feat(assistant): 新增AI助手功能模块，包括质控分析报告、绩效分析报告及数据可视化看板

新增AI助手主界面、质控分析报告和绩效分析报告组件，实现数据查询、图表展示及导出功能。包含勤务组织、质控活动和风险隐患三大模块，支持年/季/月时间维度查询。添加ECharts图表展示及Word导出功能，优化响应式布局和交互体验。

package.json

@@ -19,6 +19,7 @@
     "url": "http://git.sundot.cn/airport/airport-web.git"
   },
   "dependencies": {
+    "@babel/runtime": "^7.28.6",
     "@codemirror/basic-setup": "^0.20.0",
     "@codemirror/lang-sql": "^6.9.0",
     "@codemirror/language": "^6.11.1",
@@ -30,13 +31,17 @@
     "axios": "1.9.0",
     "clipboard": "2.0.11",
     "codemirror-editor-vue3": "^2.8.0",
+    "docx": "^9.5.1",
     "echarts": "5.6.0",
     "element-plus": "2.9.9",
-    "file-saver": "2.0.5",
+    "file-saver": "^2.0.5",
     "fuse.js": "6.6.2",
+    "html2canvas": "^1.4.1",
     "js-beautify": "1.14.11",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
+    "jspdf": "^4.1.0",
+    "jspdf-autotable": "^5.0.7",
     "moment": "^2.30.1",
     "nprogress": "0.2.0",
     "pinia": "3.0.2",

src/api/assistant/assistant.js

@@ -0,0 +1,109 @@
+import request from '@/utils/request'
+// 质控活动
+export function getAnalysisReport(data) {
+  return request({
+    url: '/system/analysisReport/check',
+    method: 'post',
+    data: data
+  })
+}
+//出勤人次分析
+export function getCalculate(data) {
+  return request({
+    url: '/quality/attendance/calculate',
+    method: 'post',
+    data: data
+  })
+}
+//出勤人次趋势数据
+export function getCalculateTrendData(data) {
+  return request({
+    url: '/quality/attendance/trend-data',
+    method: 'post',
+    data: data
+  })
+}
+//获取资质等级分布饼状图数据
+export function getQualificationPieChart(query) {
+  return request({
+    url: '/statistics/qualification/pie-chart',
+    method: 'get',
+    params: query
+  })
+}
+//获取资质等级分布柱状图数据
+export function getQualificationBarChart(query) {
+  return request({
+    url: '/statistics/qualification/bar-chart',
+    method: 'get',
+    params: query
+  })
+}
+
+
+
+//获取物品分类统计
+export function getCategoryStats(query) {
+  return request({
+    url: '/quality/item-category-stats/category-stats',
+    method: 'get',
+    params: query
+  })
+}
+//获取查获时段趋势图
+export function getSeizureTimeTrend(query) {
+  return request({
+    url: '/quality/item-category-stats/seizure-time-trend',
+    method: 'get',
+    params: query
+  })
+}
+//获取隐匿夹带部位分布统计
+export function getConcealmentPositionStats(query) {
+  return request({
+    url: '/quality/item-category-stats/concealment-position-stats',
+    method: 'get',
+    params: query
+  })
+}
+//获取岗位分类统计
+export function getPostCategoryStats(query) {
+  return request({
+    url: '/quality/item-category-stats/post-category-stats',
+    method: 'get',
+    params: query
+  })
+}
+//获取通道排名统计
+export function getChannelRankingStats(query) {
+  return request({
+    url: '/quality/item-category-stats/channel-ranking-stats',
+    method: 'get',
+    params: query
+  })
+}
+//获取各科室查获排名
+export function getDepartmentRanking(query) {
+  return request({
+    url: '/quality/item-category-stats/brigade-ranking',
+    method: 'get',
+    params: query
+  })
+}
+
+//基于时间维度的绩效统计查询趋势图
+export function getCalculateByTime(data) {
+  return request({
+    url: '/performance/dimension/calculate-by-time',
+    method: 'post',
+    data: data
+  })
+}
+//基于时间维度的绩效统计查询列表
+export function getCalculateByTimeList(data) {
+  return request({
+    url: '/performance/dimension/calculate-by-time-list',
+    method: 'post',
+    data: data
+  })
+}

src/assets/images/mbtj/load.js

@@ -0,0 +1,61 @@
+
+import enfj from './enfj.png'
+import enfp from './enfp.png'
+import entj from './entj.png'
+import entp from './entp.png'
+import esfj from './esfj.png'
+import esfp from './enfp.png'
+import estj from './entj.png'
+import estp from './enfp.png'
+import infj from './infj.png'
+import infp from './infp.png'
+import intj from './intj.png'
+import intp from './intp.png'
+import isfj from './isfj.png'
+import isfp from './infp.png'
+import istj from './intj.png'
+import istp from './infp.png'
+
+const mbtjImgMap = {
+  enfj,
+  enfp,
+  entj,
+  entp,
+  esfj,
+  esfp,
+  estj,
+  estp,
+  infj,
+  infp,
+  intj,
+  intp,
+  isfj,
+  isfp,
+  istj,
+  istp
+}
+const getMbtjImgPath = (code) => {
+  const curImgPath = mbtjImgMap[String(code).substring(0, 4).toLocaleLowerCase()]
+  if (curImgPath) return curImgPath
+  return ''
+}
+
+export {
+  enfj,
+  enfp,
+  entj,
+  entp,
+  esfj,
+  esfp,
+  estj,
+  estp,
+  infj,
+  infp,
+  intj,
+  intp,
+  isfj,
+  isfp,
+  istj,
+  istp,
+  getMbtjImgPath
+}

src/hooks/chart.js

@@ -1,24 +1,46 @@
-import { onMounted, onUnmounted, ref } from 'vue';
+import { ref, shallowRef } from 'vue';
 import { useResizeObserver } from '@vueuse/core';
 import * as echarts from 'echarts';
 
 export function useEcharts(domRef) {
-  const chartInstance = ref(null);
+  const chartInstance = shallowRef(null);
+  const initialized = ref(false);
 
   // 初始化图表
   const initChart = () => {
-    if (!domRef.value) return;
-    chartInstance.value = echarts.init(domRef.value, 'macarons');
+    if (!domRef.value || initialized.value) return;
+    try {
+      chartInstance.value = echarts.init(domRef.value, 'macarons');
+      initialized.value = true;
+    } catch (error) {
+      console.error('ECharts初始化失败:', error);
+    }
   };
 
   const setOption = (option) => {
+    if (!chartInstance.value && !initialized.value) {
+      initChart();
+    }
     if (!chartInstance.value) return;
-    chartInstance.value.setOption(option);
+    
+    try {
+      chartInstance.value.setOption(option);
+      // 仅在需要时调整大小，避免重复调用
+      if (domRef.value && domRef.value.offsetHeight > 0) {
+        chartInstance.value.resize();
+      }
+    } catch (error) {
+      console.error('ECharts设置选项失败:', error);
+    }
   };
 
   const handleResize = () => {
     if (!chartInstance.value) return;
-    chartInstance.value.resize();
+    try {
+      chartInstance.value.resize();
+    } catch (err) {
+      console.log(err);
+    }
   };
 
   // 使用vueuse的resizeObserver监听容器大小变化
@@ -26,21 +48,18 @@ export function useEcharts(domRef) {
     handleResize();
   });
 
-  // 组件挂载时初始化
-  onMounted(() => {
-    initChart();
-  });
-
-  // 组件卸载时销毁
-  onUnmounted(() => {
+  const dispose = () => {
     if (chartInstance.value) {
       chartInstance.value.dispose();
       chartInstance.value = null;
+      initialized.value = false;
     }
-  });
+  };
 
   return {
     chartInstance,
     setOption,
+    dispose,
+    initChart
   };
 }

src/views/assistant/components/dataBoard.vue

@@ -0,0 +1,767 @@
+<template>
+  <div class="data-board-container">
+    <!-- 头部导航 -->
+    <div class="header">
+      <div class="header-left">
+        <el-button link class="back-btn" @click="handleBack">
+          <el-icon>
+            <ArrowLeft />
+          </el-icon>
+          <span>返回AI助手</span>
+        </el-button>
+      </div>
+      <div class="header-right">
+        <el-button class="export-btn" @click="handleExport">
+          <el-icon>
+            <Download />
+          </el-icon>
+          <span>导出文档</span>
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 查询表单区域 -->
+    <div class="query-form">
+      <div class="form-container">
+        <el-form :model="queryForm" label-width="80px">
+          <el-form-item label="查询时间">
+            <div class="form-row">
+              <div class="form-content">
+                <el-select v-model="queryForm.dateRangeQueryType" placeholder="请选择时间类型"
+                  @change="handledateRangeQueryTypeChange" class="select-field">
+                  <el-option label="年" value="YEAR" />
+                  <el-option label="季度" value="QUARTER" />
+                  <el-option label="月" value="MONTH" />
+                </el-select>
+                <el-select v-model="queryForm.year" placeholder="请选择年份" v-if="queryForm.dateRangeQueryType"
+                  class="select-field">
+                  <el-option v-for="year in yearOptions" :key="year" :label="year + '年'" :value="year" />
+                </el-select>
+                <el-select v-model="queryForm.quarter" placeholder="请选择季度"
+                  v-if="queryForm.dateRangeQueryType === 'QUARTER'" class="select-field">
+                  <el-option label="第一季度" value="1" />
+                  <el-option label="第二季度" value="2" />
+                  <el-option label="第三季度" value="3" />
+                  <el-option label="第四季度" value="4" />
+                </el-select>
+                <el-select v-model="queryForm.month" placeholder="请选择月份" v-if="queryForm.dateRangeQueryType === 'MONTH'"
+                  class="select-field">
+                  <el-option v-for="month in monthOptions" :key="month" :label="month + '月'" :value="month" />
+                </el-select>
+              </div>
+              <div class="form-actions">
+                <el-button type="primary" @click="handleQuery">查询</el-button>
+                <el-button @click="handleReset">重置</el-button>
+              </div>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+
+    <!-- 勤务组织组件 -->
+    <DutyOrganization :query-form="currentQueryParams" />
+
+    <!-- 质控活动组件 -->
+    <QualityControl :query-form="currentQueryParams" />
+
+    <!-- 风险隐患组件 -->
+    <RiskHazard :query-form="currentQueryParams" />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { ArrowLeft, Download } from '@element-plus/icons-vue'
+import { ElMessage, ElLoading } from 'element-plus'
+import html2canvas from 'html2canvas'
+import jsPDF from 'jspdf'
+import { Document, Packer, Paragraph, ImageRun, HeadingLevel, AlignmentType } from 'docx'
+import { saveAs } from 'file-saver'
+import DutyOrganization from './dutyOrganization.vue'
+import QualityControl from './qualityControl.vue'
+import RiskHazard from './riskHazard.vue'
+
+// 定义emit事件
+const emit = defineEmits(['back'])
+
+// 生成年份选项（近10年）
+const currentYear = new Date().getFullYear()
+
+// 查询表单数据
+const queryForm = ref({
+  dateRangeQueryType: 'YEAR',
+  year: currentYear,
+  quarter: '',
+  month: ''
+})
+
+// 当前查询参数（只有点击查询按钮时才更新）
+const currentQueryParams = ref({
+  dateRangeQueryType: 'YEAR',
+  year: currentYear,
+  quarter: '',
+  month: ''
+})
+const yearOptions = computed(() => {
+  const years = []
+  for (let i = currentYear; i >= currentYear - 9; i--) {
+    years.push(i)
+  }
+  return years
+})
+
+// 月份选项
+const monthOptions = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12])
+
+// 时间类型变化处理
+const handledateRangeQueryTypeChange = () => {
+  // 根据选择的时间类型清空相关字段
+  if (queryForm.value.dateRangeQueryType === 'QUARTER') {
+    // 选择季度时清空月份
+    queryForm.value.month = ''
+  } else if (queryForm.value.dateRangeQueryType === 'MONTH') {
+    // 选择月份时清空季度
+    queryForm.value.quarter = ''
+  } else if (queryForm.value.dateRangeQueryType === 'YEAR') {
+    // 选择年时清空季度和月份
+    queryForm.value.quarter = ''
+    queryForm.value.month = ''
+  }
+}
+
+// 返回按钮点击事件
+const handleBack = () => {
+  emit('back')
+}
+
+// 查询处理
+const handleQuery = () => {
+  console.log('查询参数:', queryForm.value)
+  // 将查询表单值复制到当前查询参数
+  currentQueryParams.value = { ...queryForm.value }
+  console.log('当前查询参数已更新:', currentQueryParams.value)
+}
+
+// 重置表单
+const handleReset = () => {
+  queryForm.value = {
+    dateRangeQueryType: 'YEAR',
+    year: currentYear,
+    quarter: '',
+    month: ''
+  }
+  // 重置后自动查询接口
+  handleQuery()
+}
+const handleExport = async () => {
+
+  const btn = document.querySelector('.export-btn');
+  const loading = ElLoading.service({
+    lock: true,
+    text: '正在生成Word文档...',
+    background: 'rgba(0, 0, 0, 0.7)'
+  })
+
+  btn.disabled = true;
+  btn.textContent = '导出中...';
+
+  try {
+
+    // 获取所有组件的大标题和面板项
+    const sectionTitles = document.querySelectorAll('.section-title h2');
+    const panelItems = document.querySelectorAll('.panel-item');
+    const children = [];
+
+    // 生成动态文档标题
+    let reportTitle = '质控分析报告';
+    
+    if (queryForm.value.year) {
+      if (queryForm.value.dateRangeQueryType === 'YEAR') {
+        reportTitle = `${queryForm.value.year}年质控分析报告`;
+      } else if (queryForm.value.dateRangeQueryType === 'QUARTER' && queryForm.value.quarter) {
+        const quarterNames = ['', '第一季度', '第二季度', '第三季度', '第四季度'];
+        reportTitle = `${queryForm.value.year}年${quarterNames[parseInt(queryForm.value.quarter)]}质控分析报告`;
+      } else if (queryForm.value.dateRangeQueryType === 'MONTH' && queryForm.value.month) {
+        reportTitle = `${queryForm.value.year}年${queryForm.value.month}月质控分析报告`;
+      }
+    }
+
+    // 添加文档标题
+    children.push(
+      new Paragraph({
+        text: reportTitle,
+        heading: HeadingLevel.TITLE,
+        alignment: AlignmentType.CENTER,
+      }),
+      new Paragraph({
+        text: `导出时间: ${new Date().toLocaleString('zh-CN')}`,
+        alignment: AlignmentType.CENTER,
+      }),
+      new Paragraph({ text: '' }) // 空行
+    );
+
+    // 按组件顺序处理：先处理大标题，再处理对应的面板项
+    let panelIndex = 0;
+    for (let i = 0; i < sectionTitles.length; i++) {
+      const sectionTitle = sectionTitles[i];
+      const sectionName = sectionTitle.textContent;
+      
+      // 添加组件大标题
+      children.push(
+        new Paragraph({
+          text: `${i + 1}. ${sectionName}`,
+          heading: HeadingLevel.HEADING_1,
+        }),
+        new Paragraph({ text: '' }) // 空行
+      );
+
+      // 处理该组件下的所有面板项
+      const componentPanelItems = [];
+      while (panelIndex < panelItems.length) {
+        const panelItem = panelItems[panelIndex];
+        
+        // 检查这个面板项是否属于当前组件
+        const panelSectionTitle = panelItem.closest('.quality-control, .duty-organization, .risk-hazard')?.querySelector('.section-title h2');
+        if (panelSectionTitle && panelSectionTitle.textContent === sectionName) {
+          componentPanelItems.push(panelItem);
+          panelIndex++;
+        } else {
+          break; // 遇到下一个组件的面板项，停止处理
+        }
+      }
+
+      // 处理当前组件下的面板项
+      for (let j = 0; j < componentPanelItems.length; j++) {
+        const panelItem = componentPanelItems[j];
+       
+       // 获取面板项标题
+       const titleElement = panelItem.querySelector('.panel-header h2, .panel-header h3');
+       const title = titleElement?.textContent || `图表${j + 1}`;
+       
+       // 添加面板项标题
+       children.push(
+         new Paragraph({
+           text: `${i + 1}.${j + 1} ${title}`,
+           heading: HeadingLevel.HEADING_2,
+         }),
+         new Paragraph({ text: '' }) // 在小标题后添加空行
+       );
+
+       // 获取面板项中的所有相关元素，按DOM顺序排列
+       const contentElements = panelItem.querySelectorAll('.stat-card, .describe-card, .chart-container');
+       
+       // 按DOM顺序处理每个元素
+       for (let k = 0; k < contentElements.length; k++) {
+         const element = contentElements[k];
+         
+         if (element.classList.contains('stat-card') || element.classList.contains('describe-card')) {
+           // 处理描述内容卡片
+           const description = element.textContent || '';
+           if (description) {
+             children.push(
+               new Paragraph({
+                 text: description,
+                 alignment: AlignmentType.LEFT,
+               }),
+               new Paragraph({ text: '' }) // 空行
+             );
+           }
+         } else if (element.classList.contains('chart-container')) {
+           // 处理图表容器
+           // 截图
+           const canvas = await html2canvas(element, {
+             backgroundColor: '#ffffff',
+             scale: 2, // 高清截图
+             logging: false
+           });
+
+           // 转换为 base64
+           const imageData = canvas.toDataURL('image/png');
+           const base64Data = imageData.replace(/^data:image\/png;base64,/, '');
+
+           // 计算保持宽高比的尺寸
+           const maxWidth = 500; // Word中最大宽度
+           const originalWidth = canvas.width;
+           const originalHeight = canvas.height;
+           const aspectRatio = originalWidth / originalHeight;
+
+           let finalWidth = maxWidth;
+           let finalHeight = maxWidth / aspectRatio;
+
+           // 如果高度超过限制，按高度缩放
+           const maxHeight = 400;
+           if (finalHeight > maxHeight) {
+             finalHeight = maxHeight;
+             finalWidth = maxHeight * aspectRatio;
+           }
+
+           // 添加图片（保持原始宽高比）
+           children.push(
+             new Paragraph({
+               children: [
+                 new ImageRun({
+                   data: Uint8Array.from(atob(base64Data), c => c.charCodeAt(0)),
+                   transformation: {
+                     width: Math.round(finalWidth),
+                     height: Math.round(finalHeight)
+                   }
+                 })
+               ],
+               alignment: AlignmentType.CENTER,
+             }),
+             new Paragraph({ text: '' }) // 图片后空行
+           );
+
+           // 小延迟，让UI更新
+           await new Promise(resolve => setTimeout(resolve, 100));
+         }
+       }
+
+      // 获取表格容器
+      const tableContainer = panelItem.querySelector('.table-container');
+      if (tableContainer) {
+        // 截图
+        const canvas = await html2canvas(tableContainer, {
+          backgroundColor: '#ffffff',
+          scale: 2, // 高清截图
+          logging: false
+        });
+
+        // 转换为 base64
+        const imageData = canvas.toDataURL('image/png');
+        const base64Data = imageData.replace(/^data:image\/png;base64,/, '');
+
+        // 计算保持宽高比的尺寸
+        const maxWidth = 500; // Word中最大宽度
+        const originalWidth = canvas.width;
+        const originalHeight = canvas.height;
+        const aspectRatio = originalWidth / originalHeight;
+
+        let finalWidth = maxWidth;
+        let finalHeight = maxWidth / aspectRatio;
+
+        // 如果高度超过限制，按高度缩放
+        const maxHeight = 400;
+        if (finalHeight > maxHeight) {
+          finalHeight = maxHeight;
+          finalWidth = maxHeight * aspectRatio;
+        }
+
+        // 添加表格图片（保持原始宽高比）
+        children.push(
+          new Paragraph({
+            children: [
+              new ImageRun({
+                data: Uint8Array.from(atob(base64Data), c => c.charCodeAt(0)),
+                transformation: {
+                  width: Math.round(finalWidth),
+                  height: Math.round(finalHeight)
+                }
+              })
+            ],
+            alignment: AlignmentType.CENTER,
+          }),
+          new Paragraph({ text: '' }) // 图片后空行
+        );
+
+        // 小延迟，让UI更新
+        await new Promise(resolve => setTimeout(resolve, 100));
+      }
+      }
+    }
+
+    // 创建文档
+    const doc = new Document({
+      sections: [{
+        properties: {},
+        children: children
+      }]
+    });
+
+    // 生成并下载
+    const blob = await Packer.toBlob(doc);
+    const fileName = `质控分析报告_${new Date().toISOString().slice(0, 10)}.docx`;
+    saveAs(blob, fileName);
+
+    ElMessage.success('Word文档导出成功');
+
+  } catch (error) {
+    console.error('导出失败:', error);
+    ElMessage.error('导出失败: ' + error.message);
+  } finally {
+    btn.disabled = false;
+    btn.textContent = '导出文档';
+    loading.close();
+  }
+}
+
+// 导出PDF功能
+// const handleExport1 = async () => {
+//   const loading = ElLoading.service({
+//     lock: true,
+//     text: '正在生成PDF文档...',
+//     background: 'rgba(0, 0, 0, 0.7)'
+//   })
+
+//   try {
+//     // 等待所有图表完全渲染
+//     await new Promise(resolve => setTimeout(resolve, 3000))
+
+//     // 获取查询条件下面的内容（不包括头部导航和查询表单）
+//     const contentElement = document.querySelector('.data-board-container')
+//     if (!contentElement) {
+//       throw new Error('未找到导出内容')
+//     }
+
+//     // 创建PDF
+//     const pdf = new jsPDF({
+//       orientation: 'portrait',
+//       unit: 'mm',
+//       format: 'a4'
+//     })
+
+//     // 设置PDF样式
+//     const pageWidth = pdf.internal.pageSize.getWidth()
+//     const pageHeight = pdf.internal.pageSize.getHeight()
+//     const margin = 15
+//     const contentWidth = pageWidth - 2 * margin
+
+//     let currentY = margin
+
+//     // 添加报告标题 - 使用图片方式支持中文
+//     const titleElement = document.createElement('div')
+//     titleElement.style.position = 'fixed'
+//     titleElement.style.left = '-9999px'
+//     titleElement.style.top = '0'
+//     titleElement.style.fontSize = '18px'
+//     titleElement.style.fontWeight = 'bold'
+//     titleElement.style.fontFamily = 'sans-serif' // 使用系统默认字体以确保中文支持
+//     titleElement.style.color = 'black'
+//     titleElement.style.whiteSpace = 'nowrap'
+//     titleElement.textContent = '质控分析报告'
+//     document.body.appendChild(titleElement)
+
+//     const titleCanvas = await html2canvas(titleElement, {
+//       scale: 2,
+//       useCORS: true,
+//       allowTaint: true,
+//       backgroundColor: '#ffffff',
+//       logging: false
+//     })
+
+//     const titleImgData = titleCanvas.toDataURL('image/png')
+//     const titleImgWidth = Math.min(100, contentWidth) // 限制标题宽度
+//     const titleImgHeight = (titleCanvas.height * titleImgWidth) / titleCanvas.width
+
+//     pdf.addImage(titleImgData, 'PNG', margin, currentY, titleImgWidth, titleImgHeight)
+//     document.body.removeChild(titleElement)
+
+//     currentY += titleImgHeight + 5
+
+//     // 添加生成时间 - 使用图片方式支持中文
+//     const timeElement = document.createElement('div')
+//     timeElement.style.position = 'fixed'
+//     timeElement.style.left = '-9999px'
+//     timeElement.style.top = '0'
+//     timeElement.style.fontSize = '10px'
+//     timeElement.style.fontFamily = 'sans-serif'
+//     timeElement.style.color = 'black'
+//     timeElement.style.whiteSpace = 'nowrap'
+//     timeElement.textContent = `生成时间: ${new Date().toLocaleString()}`
+//     document.body.appendChild(timeElement)
+
+//     const timeCanvas = await html2canvas(timeElement, {
+//       scale: 2,
+//       useCORS: true,
+//       allowTaint: true,
+//       backgroundColor: '#ffffff',
+//       logging: false
+//     })
+
+//     const timeImgData = timeCanvas.toDataURL('image/png')
+//     const timeImgWidth = Math.min(120, contentWidth) // 限制时间信息宽度
+//     const timeImgHeight = (timeCanvas.height * timeImgWidth) / timeCanvas.width
+
+//     pdf.addImage(timeImgData, 'PNG', margin, currentY, timeImgWidth, timeImgHeight)
+//     document.body.removeChild(timeElement)
+
+//     currentY += timeImgHeight + 10
+
+//     currentY += 15
+
+//     // 获取查询条件后面的所有内容元素
+//     const contentSections = Array.from(contentElement.children).slice(2); // 跳过头部和查询表单
+
+//     // 用于跟踪已处理的元素，避免重复
+//     const processedElements = new Set();
+
+//     for (let i = 0; i < contentSections.length; i++) {
+//       const section = contentSections[i]
+
+//       // 检查是否需要分页
+//       if (currentY > pageHeight - 50) {
+//         pdf.addPage()
+//         currentY = margin
+//       }
+
+//       // 获取该section中的所有元素，按DOM顺序处理
+//       const allElements = Array.from(section.querySelectorAll('h2, h3, .stat-card, .describe-card, .echarts-chart, .table-container'));
+
+//       for (let idx = 0; idx < allElements.length; idx++) {
+//         const element = allElements[idx];
+
+//         // 使用元素的位置和内容来判断是否已处理
+//         const elementKey = `${element.tagName}-${element.className}-${element.getBoundingClientRect().top}-${element.getBoundingClientRect().left}-${element.innerText.substring(0, 20)}`;
+//         if (processedElements.has(elementKey)) {
+//           continue; // 跳过已处理的元素
+//         }
+
+//         // 标记为已处理，防止重复处理
+//         processedElements.add(elementKey);
+
+//         // 根据元素类型分别处理
+//         if (element.classList.contains('echarts-chart')) {
+//           // 处理ECharts图表
+//           // 确保图表可见
+//           element.style.visibility = 'visible'
+//           element.style.opacity = '1'
+//           element.style.display = 'block'
+
+//           // 等待图表渲染完成
+//           await new Promise(resolve => setTimeout(resolve, 500))
+
+//           try {
+//             // 尝试通过ECharts实例获取图表数据
+//             let chartData = null
+
+//             // 使用ECharts自带的getDataURL
+//             if (window.echarts && window.echarts.getInstanceByDom) {
+//               const instance = window.echarts.getInstanceByDom(element)
+//               if (instance) {
+//                 chartData = instance.getDataURL({
+//                   type: 'png',
+//                   pixelRatio: 2,
+//                   backgroundColor: '#fff'
+//                 })
+
+//                 // 强制刷新图表
+//                 instance.resize()
+//               }
+//             }
+
+//             if (chartData) {
+//               // 计算合适的图表高度，保持宽高比
+//               const img = new Image()
+//               img.src = chartData
+
+//               // 由于异步问题，我们使用固定比例
+//               const imgHeight = 80 // 固定图表高度
+
+//               // 检查是否需要分页
+//               if (currentY + imgHeight > pageHeight - margin) {
+//                 pdf.addPage()
+//                 currentY = margin
+//               }
+
+//               // 添加图表到PDF
+//               pdf.addImage(chartData, 'PNG', margin, currentY, contentWidth, imgHeight)
+//               currentY += imgHeight + 10
+//             } else {
+//               // 如果无法获取图表数据，尝试使用html2canvas
+//               const canvas = await html2canvas(element, {
+//                 scale: 2,
+//                 useCORS: true,
+//                 allowTaint: true,
+//                 backgroundColor: '#ffffff',
+//                 logging: false
+//               })
+
+//               const chartImgData = canvas.toDataURL('image/png')
+//               const imgHeight = 80 // 固定图表高度
+
+//               // 检查是否需要分页
+//               if (currentY + imgHeight > pageHeight - margin) {
+//                 pdf.addPage()
+//                 currentY = margin
+//               }
+
+//               // 添加图表到PDF
+//               pdf.addImage(chartImgData, 'PNG', margin, currentY, contentWidth, imgHeight)
+//               currentY += imgHeight + 10
+//             }
+//           } catch (error) {
+//             console.error(`图表导出失败:`, error)
+//             // 添加错误提示
+//             pdf.setFontSize(10)
+//             pdf.setTextColor(255, 0, 0) // 红色
+//             pdf.text(`图表导出失败`, margin, currentY)
+//             pdf.setTextColor(0, 0, 0) // 重置为黑色
+//             currentY += 10
+//           }
+//         } else {
+//           // 处理文本内容（标题、统计卡片、描述等）- 转换为图片以支持中文
+//           const text = element.innerText?.trim()
+
+//           if (text && text.length > 0) {
+//             // 创建一个临时元素来确保正确的样式显示
+//             const tempElement = document.createElement('div');
+//             tempElement.innerHTML = element.innerHTML;
+//             tempElement.style.position = 'fixed';
+//             tempElement.style.left = '-9999px';
+//             tempElement.style.top = '0';
+//             tempElement.style.width = '600px'; // 设置一个合适的宽度
+//             tempElement.style.padding = '10px';
+//             tempElement.style.boxSizing = 'border-box';
+
+//             // 根据原始元素的标签类型应用适当的样式
+//             if (element.tagName === 'H2') {
+//               tempElement.style.fontSize = '18px';
+//               tempElement.style.fontWeight = 'bold';
+//               tempElement.style.marginBottom = '10px';
+//             } else if (element.tagName === 'H3') {
+//               tempElement.style.fontSize = '14px';
+//               tempElement.style.fontWeight = 'bold';
+//               tempElement.style.marginBottom = '8px';
+//             } else {
+//               tempElement.style.fontSize = '12px';
+//               tempElement.style.lineHeight = '1.5';
+//             }
+
+//             document.body.appendChild(tempElement);
+
+//             // 使用html2canvas将文本元素转换为图片，以正确显示中文
+//             const canvas = await html2canvas(tempElement, {
+//               scale: 2,
+//               useCORS: true,
+//               allowTaint: true,
+//               backgroundColor: '#ffffff',
+//               logging: false
+//             })
+
+//             const textImgData = canvas.toDataURL('image/png')
+//             const imgWidth = contentWidth
+//             const imgHeight = (canvas.height * imgWidth) / canvas.width
+
+//             // 检查是否需要分页
+//             if (currentY + imgHeight > pageHeight - margin) {
+//               pdf.addPage()
+//               currentY = margin
+//             }
+
+//             // 添加文本图片到PDF
+//             pdf.addImage(textImgData, 'PNG', margin, currentY, imgWidth, imgHeight)
+//             currentY += imgHeight + 5
+
+//             // 移除临时元素
+//             document.body.removeChild(tempElement);
+//           }
+//         }
+//       }
+
+//       // 组件之间添加分隔
+//       currentY += 10
+//     }
+
+//     // 保存PDF
+//     pdf.save('质控分析报告_' + new Date().toISOString().slice(0, 10) + '.pdf')
+
+//     ElMessage.success('PDF导出成功')
+
+//   } catch (error) {
+//     console.error('导出失败:', error)
+//     ElMessage.error('导出失败: ' + error.message)
+//   } finally {
+//     loading.close()
+//   }
+// }
+</script>
+
+<style scoped>
+.data-board-container {
+  /* height: 100vh; */
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  padding: 20px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 16px 16px 16px;
+}
+
+.back-btn {
+  color: #3D3D3D;
+  font-size: 14px;
+}
+
+.back-btn:hover {
+  color: #3D3D3D;
+}
+
+.back-btn .el-icon-back {
+  margin-right: 8px;
+}
+
+.export-btn {
+  background-color: transparent;
+}
+
+.export-btn:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.query-form {
+  background: white;
+  border-radius: 8px;
+  padding: 24px 24px 5px 24px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.form-container {
+  width: 100%;
+}
+
+.form-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+.form-content {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex: 1;
+}
+
+.form-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.select-field {
+  min-width: 120px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .data-board-container {
+    padding: 16px;
+  }
+
+  .header {
+    flex-direction: column;
+    gap: 16px;
+    align-items: flex-start;
+  }
+
+  .header-right {
+    align-self: flex-end;
+  }
+}
+</style>

src/views/assistant/components/riskHazard.vue

@@ -0,0 +1,996 @@
+<template>
+  <div class="risk-hazard">
+    <!-- 风险隐患标题 -->
+    <div class="section-title">
+      <h2>风险隐患</h2>
+    </div>
+
+    <!-- 六个部分布局，一行三个，共两行 -->
+    <div class="six-panel-layout">
+      <!-- 第一行 -->
+      <div class="panel-row">
+        <!-- 第一个：查获违禁品类别 -->
+        <div class="panel-item">
+          <div class="panel-header">
+            <h3>查获违禁品类别</h3>
+          </div>
+
+          <!-- 描述卡片 -->
+          <div class="describe-card">
+            <div class="describe-content">
+              {{ categoryStatsDescription }}
+            </div>
+          </div>
+
+          <!-- 饼图 -->
+          <div class="chart-container">
+            <div ref="captureRankChartRef" class="echarts-chart"></div>
+          </div>
+        </div>
+
+        <!-- 第二个：问题发现统计 -->
+        <div class="panel-item">
+          <div class="panel-header">
+            <h3>问题发现统计</h3>
+          </div>
+
+          <!-- 描述卡片 -->
+          <div class="describe-card">
+            <div class="describe-content">
+              {{ seizureTimeTrendDescription }}
+            </div>
+          </div>
+
+          <!-- 折线图 -->
+          <div class="chart-container">
+            <div ref="problemDiscoveryChartRef" class="echarts-chart"></div>
+          </div>
+        </div>
+
+        <!-- 第三个：隐匿物品查获部位 -->
+        <div class="panel-item">
+          <div class="panel-header">
+            <h3>隐匿物品查获部位</h3>
+          </div>
+
+          <!-- 描述卡片 -->
+          <div class="describe-card">
+            <div class="describe-content">
+              {{ concealmentPositionStatsDescription }}
+            </div>
+          </div>
+
+          <!-- 饼图 -->
+          <div class="chart-container">
+            <div ref="problemRectificationChartRef" class="echarts-chart"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 第二行 -->
+      <div class="panel-row">
+        <!-- 第四个：查获排名表格 -->
+        <div class="panel-item">
+          <div class="panel-header">
+            <h3>查获排名</h3>
+          </div>
+
+          <!-- 描述卡片 -->
+          <div class="describe-card">
+            <div class="describe-content">
+              {{ departmentRankingDescription }}
+            </div>
+          </div>
+
+          <!-- 表格 -->
+          <div class="table-container">
+            <el-table :data="captureRankData" style="width: 100%" size="small">
+              <el-table-column prop="rank" label="排名" align="center" />
+              <el-table-column prop="department" label="大队" />
+              <el-table-column prop="percentage" label="占比" align="center">
+                <template #default="{ row }">
+                  <span>{{ row.percentage }}%</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="count" label="数量" align="center" />
+            </el-table>
+          </div>
+        </div>
+
+        <!-- 第五个：查获岗位分布 -->
+        <div class="panel-item">
+          <div class="panel-header">
+            <h3>查获岗位分布</h3>
+          </div>
+
+          <!-- 描述卡片 -->
+          <div class="describe-card">
+            <div class="describe-content">
+              {{ postCategoryStatsDescription }}
+            </div>
+          </div>
+
+          <!-- 饼图 -->
+          <div class="chart-container">
+            <div ref="rectificationStatsChartRef" class="echarts-chart"></div>
+          </div>
+        </div>
+
+        <!-- 第六个：查获通道TOP5 -->
+        <div class="panel-item">
+          <div class="panel-header">
+            <h3>查获通道TOP5</h3>
+          </div>
+
+          <!-- 描述卡片 -->
+          <div class="describe-card">
+            <div class="describe-content">
+              {{ channelRankingStatsDescription }}
+            </div>
+          </div>
+
+          <!-- 表格 -->
+          <div class="table-container">
+            <el-table :data="captureChannelData" style="width: 100%" size="small">
+              <el-table-column prop="channel" label="查获通道" />
+              <el-table-column prop="count" label="查获数量" align="center" />
+              <el-table-column prop="area" label="所在区域" />
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { useEcharts } from '@/hooks/chart.js'
+import {
+  getCategoryStats,
+  getSeizureTimeTrend,
+  getConcealmentPositionStats,
+  getDepartmentRanking,
+  getPostCategoryStats,
+  getChannelRankingStats
+} from '@/api/assistant/assistant.js'
+
+// 定义props接收queryForm参数
+const props = defineProps({
+  queryForm: {
+    type: Object,
+    default: () => ({
+      dateRangeQueryType: '',
+      year: '',
+      quarter: '',
+      month: ''
+    })
+  }
+})
+
+// 图表容器引用
+const captureRankChartRef = ref(null)
+const problemDiscoveryChartRef = ref(null)
+const problemRectificationChartRef = ref(null)
+const rectificationStatsChartRef = ref(null)
+
+// 图表实例
+const { setOption: setCaptureRankOption, dispose: disposeCaptureRank } = useEcharts(captureRankChartRef)
+const { setOption: setProblemDiscoveryOption, dispose: disposeProblemDiscovery } = useEcharts(problemDiscoveryChartRef)
+const { setOption: setProblemRectificationOption, dispose: disposeProblemRectification } = useEcharts(problemRectificationChartRef)
+const { setOption: setRectificationStatsOption, dispose: disposeRectificationStats } = useEcharts(rectificationStatsChartRef)
+
+// 六个API接口的响应式数据
+const categoryStatsData = ref({})
+const seizureTimeTrendData = ref({})
+const concealmentPositionStatsData = ref({})
+const departmentRankingData = ref({})
+const postCategoryStatsData = ref({})
+const channelRankingStatsData = ref({})
+
+// 计算属性：动态生成查获违禁品类别描述
+const categoryStatsDescription = computed(() => {
+  
+  if (!categoryStatsData.value || !categoryStatsData.value || !Array.isArray(categoryStatsData.value)) {
+    return '查获物品以[占比最高物品类型]为主，占比达[X]%，其次为[第二高占比物品类型]（[X]%）、[第三高占比物品类型]（[X]%），需重点强化对应物品的安检识别与管控力度。'
+  }
+
+  const categoryData = categoryStatsData.value
+  
+  // 1. 按数量排序，获取前三名
+  const sortedData = [...categoryData].sort((a, b) => (b.quantity || 0) - (a.quantity || 0))
+  
+  // 2. 计算总数量
+  const totalCount = sortedData.reduce((sum, item) => sum + (item.quantity || 0), 0)
+  
+  // 3. 获取前三名数据
+  const top1 = sortedData[0] || { categoryNameOne: '未知类型', quantity: 0 }
+  const top2 = sortedData[1] || { categoryNameOne: '未知类型', quantity: 0 }
+  const top3 = sortedData[2] || { categoryNameOne: '未知类型', quantity: 0 }
+  
+  // 4. 计算百分比
+  const top1Percentage = totalCount > 0 ? ((top1.quantity / totalCount) * 100).toFixed(2) : '0.00'
+  const top2Percentage = totalCount > 0 ? ((top2.quantity / totalCount) * 100).toFixed(2) : '0.00'
+  const top3Percentage = totalCount > 0 ? ((top3.quantity / totalCount) * 100).toFixed(2) : '0.00'
+  
+  // 5. 生成描述文字
+  return `查获物品以${top1.categoryNameOne  || '未知类型'}为主，占比达${top1Percentage}%，其次为${top2.categoryNameOne  || '未知类型'}（${top2Percentage}%）、${top3.categoryNameOne  || '未知类型'}（${top3Percentage}%），需重点强化对应物品的安检识别与管控力度。`
+})
+
+// 计算属性：动态生成查获时间趋势描述
+  const seizureTimeTrendDescription = computed(() => {
+    if (!seizureTimeTrendData.value || !seizureTimeTrendData.value || !Array.isArray(seizureTimeTrendData.value)) {
+      return '高峰时段：XX:XX、XX:XX左右（平均查获量达XX件），需强化对应时段的安检力度。低峰时段：XX:XX、XX:XX后（平均查获量XX件）'
+    }
+
+    const trendData = seizureTimeTrendData.value
+    
+    // 1. 按查获量排序，找出最高和最低的两个时段
+    const sortedData = [...trendData].sort((a, b) => (b.total || 0) - (a.total || 0))
+    
+    // 2. 获取最高的两个时段
+    const peakHours = sortedData.slice(0, 2).map(item => item.hourOfDay || '').filter(Boolean)
+    
+    // 3. 获取最低的两个时段
+    const lowHours = sortedData.slice(-2).map(item => item.hourOfDay || '').filter(Boolean)
+    
+    // 4. 计算高峰时段平均查获量
+    const peakData = trendData.filter(item => peakHours.some(hour => item.hourOfDay?.includes(hour)))
+    const peakAvg = peakData.length > 0 
+      ? Math.round(peakData.reduce((sum, item) => sum + (item.total || 0), 0) / peakData.length)
+      : 0
+    
+    // 5. 计算低峰时段平均查获量
+    const lowData = trendData.filter(item => lowHours.some(hour => item.hourOfDay?.includes(hour)))
+    const lowAvg = lowData.length > 0 
+      ? Math.round(lowData.reduce((sum, item) => sum + (item.total || 0), 0) / lowData.length)
+      : 0
+    
+    // 6. 生成描述文字
+    return `高峰时段：${peakHours.join('、')}左右（平均查获量达${peakAvg}件），需强化对应时段的安检力度。低峰时段：${lowHours.join('、')}后（平均查获量${lowAvg}件）`
+  })
+
+  // 计算属性：动态生成隐匿物品查获部位描述
+  const concealmentPositionStatsDescription = computed(() => {
+    if (!concealmentPositionStatsData.value || !Array.isArray(concealmentPositionStatsData.value)) {
+      return '违禁品主要藏匿于"XX"，是安检搜检的重点部位。'
+    }
+
+    const positionData = concealmentPositionStatsData.value
+    
+    // 1. 按查获量排序，找出查获量最高的部位
+    const sortedData = [...positionData].sort((a, b) => (b.count || 0) - (a.count || 0))
+    
+    // 2. 获取查获量最高的部位
+    const topPosition = sortedData[0] || { positionName: 'XX', count: 0 }
+    
+    // 3. 生成描述文字
+    return `违禁品主要藏匿于"${topPosition.positionName || 'XX'}"，是安检搜检的重点部位。`
+  })
+
+  // 计算属性：动态生成大队查获排名描述
+  const departmentRankingDescription = computed(() => {
+    
+    if (!departmentRankingData.value || !Array.isArray(departmentRankingData.value)) {
+      return 'XXXX是违禁品查获的主力大队，查获违禁物品数量为XX，占比XX%。'
+    }
+
+    const rankingData = departmentRankingData.value
+    
+    // 1. 按查获量排序，找出查获量最高的大队
+    const sortedData = [...rankingData].sort((a, b) => (b.seizureCount || 0) - (a.seizureCount || 0))
+    
+    // 2. 获取查获量最高的大队
+    const topDepartment = sortedData[0] || { departmentName: 'XXXX', seizureCount: 234 }
+    
+  
+    // 5. 生成描述文字
+    return `${topDepartment.departmentName || 'XXXX'}是违禁品查获的主力大队，查获违禁物品数量为${topDepartment.seizureCount || 'XX'}，占比${topDepartment.currentRatio}%。`
+  })
+
+  // 计算属性：动态生成查获岗位分布描述
+  const postCategoryStatsDescription = computed(() => {
+    if (!postCategoryStatsData.value || !Array.isArray(postCategoryStatsData.value)) {
+      return '"XX"的查获数量最多，为XX件，占比XX%。'
+    }
+
+    const postData = postCategoryStatsData.value
+    
+    // 1. 按查获量排序，找出查获量最高的岗位
+    const sortedData = [...postData].sort((a, b) => (b.quantity || 0) - (a.quantity || 0))
+    
+    // 2. 获取查获量最高的岗位
+    const topPost = sortedData[0] || { postName: 'XX', quantity: 124 }
+    
+    // 3. 计算总查获量
+    const totalCount = postData.reduce((sum, item) => sum + (item.quantity || 0), 0)
+    
+    // 4. 计算占比
+    const percentage = totalCount > 0 ? ((topPost.quantity / totalCount) * 100).toFixed(0) : '45'
+    
+    // 5. 生成描述文字
+    return `"${topPost.postName || 'XX'}"的查获数量最多，为${topPost.quantity || 124}件，占比${percentage}%。`
+  })
+
+  // 计算属性：动态生成查获通道TOP5描述
+  const channelRankingStatsDescription = computed(() => {
+    if (!channelRankingStatsData.value || !Array.isArray(channelRankingStatsData.value)) {
+      return '违禁物品查获主要集中于XXXX，查获数量为XX，占比XX%。'
+    }
+
+    const channelData = channelRankingStatsData.value
+    
+    // 1. 按查获量排序，找出查获量最高的通道
+    const sortedData = [...channelData].sort((a, b) => (b.seizureQuantity || 0) - (a.seizureQuantity || 0))
+    
+    // 2. 获取查获量最高的通道
+    const topChannel = sortedData[0] || { channelName: 'XXXX', seizureQuantity: 123 }
+    
+    // 3. 计算总查获量
+    const totalCount = channelData.reduce((sum, item) => sum + (item.seizureQuantity || 0), 0)
+    
+    // 4. 计算占比
+    const percentage = totalCount > 0 ? ((topChannel.seizureQuantity / totalCount) * 100).toFixed(0) : '23'
+    
+    // 5. 生成描述文字
+    return `违禁物品查获主要集中于${topChannel.channelName || 'XXXX'}，查获数量为${topChannel.seizureQuantity || 'XX'}，占比${percentage}%。`
+  })
+
+// 表格数据
+const captureRankData = ref([])
+const captureChannelData = ref([])
+
+// 处理query参数，当dateRangeQueryType为YEAR时添加yearOnYear: true
+const processQueryParams = (queryParams) => {
+  const processedParams = { ...queryParams }
+  if (processedParams.dateRangeQueryType === 'YEAR') {
+    processedParams.yearOnYear = true
+  } else {
+    processedParams.chainRatio = true
+    processedParams.yearOnYear = true
+  }
+  return processedParams
+}
+
+// 调用API获取风险隐患数据
+const fetchRiskHazardData = async (queryParams) => {
+  try {
+    // 处理query参数
+    const processedParams = processQueryParams(queryParams)
+
+    // 按顺序调用六个API接口
+
+    // 1. 查获违禁品类别统计
+    const categoryStatsResponse = await getCategoryStats(processedParams)
+    console.log('查获违禁品类别统计:', categoryStatsResponse)
+    categoryStatsData.value = categoryStatsResponse.data?.categoryStats || []
+
+    // 2. 查获时间趋势
+    const seizureTimeTrendResponse = await getSeizureTimeTrend(processedParams)
+    console.log('查获时间趋势:', seizureTimeTrendResponse)
+    seizureTimeTrendData.value = seizureTimeTrendResponse?.data || []
+
+    // 3. 隐匿物品查获部位统计
+    const concealmentPositionStatsResponse = await getConcealmentPositionStats(processedParams)
+    console.log('隐匿物品查获部位统计:', concealmentPositionStatsResponse)
+    concealmentPositionStatsData.value = concealmentPositionStatsResponse?.data?.positionStats || []
+
+    // 4. 大队查获排名（表格数据）
+    const departmentRankingResponse = await getDepartmentRanking(processedParams)
+    console.log('大队查获排名:', departmentRankingResponse)
+    departmentRankingData.value = departmentRankingResponse.data || []
+
+    // 5. 查获岗位分布统计
+    const postCategoryStatsResponse = await getPostCategoryStats(processedParams)
+    console.log('查获岗位分布统计:', postCategoryStatsResponse)
+    postCategoryStatsData.value = postCategoryStatsResponse?.data?.postStats || []
+
+    // 6. 查获通道TOP5（表格数据）
+    const channelRankingStatsResponse = await getChannelRankingStats(processedParams)
+    console.log('查获通道TOP5:', channelRankingStatsResponse)
+    channelRankingStatsData.value = channelRankingStatsResponse?.data?.channelRankings || []
+
+    // 更新图表和表格数据
+    updateChartsWithData()
+
+  } catch (error) {
+    console.error('获取风险隐患数据失败:', error)
+  }
+}
+
+// 查获违禁品类别饼图配置
+const captureRankOptions = {
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b}: {c}件 ({d}%)'
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'left',
+    top: 'center',
+    textStyle: {
+      color: '#333',
+      fontSize: 12
+    }
+  },
+  color: ['#FF9F43', '#54C6EB', '#A3D9B1', '#FF6B9D', '#9B59B6'],
+  series: [
+    {
+      name: '违禁品类别',
+      type: 'pie',
+      radius: '60%',
+      center: ['60%', '50%'],
+      avoidLabelOverlap: false,
+      itemStyle: {
+        borderRadius: 10,
+        borderColor: '#fff',
+        borderWidth: 2
+      },
+      label: {
+        show: true,
+        formatter: '{b}: {c}件',
+        fontSize: 12
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 14,
+          fontWeight: 'bold'
+        },
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      },
+      labelLine: {
+        show: true,
+        length: 10,
+        length2: 20
+      },
+      data: []
+    }
+  ]
+}
+
+// 问题发现折线图配置
+const problemDiscoveryOptions = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    },
+    formatter: function (params) {
+      return `${params[0].name}<br/>问题数量: <span style="color:#FF6B6B;font-weight:bold">${params[0].data}</span>`
+    }
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
+    axisLine: {
+      lineStyle: {
+        color: '#999'
+      }
+    },
+    axisLabel: {
+      fontSize: 12
+    }
+  },
+  yAxis: {
+    type: 'value',
+    name: '问题数量',
+    axisLine: {
+      lineStyle: {
+        color: '#999'
+      }
+    },
+    splitLine: {
+      lineStyle: {
+        color: '#f0f0f0'
+      }
+    }
+  },
+  series: [
+    {
+      name: '问题发现',
+      type: 'line',
+      smooth: true,
+      symbol: 'circle',
+      symbolSize: 6,
+      itemStyle: {
+        color: '#FF6B6B'
+      },
+      lineStyle: {
+        color: '#FF6B6B',
+        width: 3
+      },
+      label: {
+        show: true,
+        position: 'top',
+        formatter: '{c}'
+      },
+      data: []
+    }
+  ]
+}
+
+// 隐匿物品查获部位饼图配置
+const problemRectificationOptions = {
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b}: {c}件 ({d}%)'
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'left',
+    top: 'center',
+    textStyle: {
+      color: '#333',
+      fontSize: 12
+    }
+  },
+  color: ['#FF9F43', '#54C6EB', '#A3D9B1', '#FF6B9D', '#9B59B6'],
+  series: [
+    {
+      name: '查获部位',
+      type: 'pie',
+      radius: '70%',
+      center: ['50%', '50%'],
+      avoidLabelOverlap: false,
+      itemStyle: {
+        borderRadius: 10,
+        borderColor: '#fff',
+        borderWidth: 2
+      },
+      label: {
+        show: true,
+        formatter: '{b}: {c}件',
+        fontSize: 12
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 14,
+          fontWeight: 'bold'
+        },
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      },
+      labelLine: {
+        show: true,
+        length: 10,
+        length2: 20
+      },
+      data: []
+    }
+  ]
+}
+
+// 查获岗位分布饼图配置
+const rectificationStatsOptions = {
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b}: {c}件 ({d}%)'
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'left',
+    top: 'center',
+    textStyle: {
+      color: '#333',
+      fontSize: 12
+    }
+  },
+  color: ['#FF9F43', '#54C6EB', '#A3D9B1', '#FF6B9D', '#9B59B6'],
+  series: [
+    {
+      name: '岗位分布',
+      type: 'pie',
+      radius: '70%',
+      center: ['60%', '50%'],
+      avoidLabelOverlap: false,
+      itemStyle: {
+        borderRadius: 10,
+        borderColor: '#fff',
+        borderWidth: 2
+      },
+      label: {
+        show: true,
+        formatter: '{b}: {c}件',
+        fontSize: 12
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 14,
+          fontWeight: 'bold'
+        },
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      },
+      labelLine: {
+        show: true,
+        length: 10,
+        length2: 20
+      },
+      data: []
+    }
+  ]
+}
+
+// 初始化图表
+onMounted(() => {
+  // 确保DOM完全渲染后再初始化图表
+  const initCharts = () => {
+    // 查获违禁品类别饼图
+    if (captureRankChartRef.value && captureRankChartRef.value.offsetHeight > 0) {
+      setCaptureRankOption(captureRankOptions)
+    }
+
+    // 问题发现折线图
+    if (problemDiscoveryChartRef.value && problemDiscoveryChartRef.value.offsetHeight > 0) {
+      setProblemDiscoveryOption(problemDiscoveryOptions)
+    }
+
+    // 隐匿物品查获部位饼图
+    if (problemRectificationChartRef.value && problemRectificationChartRef.value.offsetHeight > 0) {
+      setProblemRectificationOption(problemRectificationOptions)
+    }
+
+    // 查获岗位分布饼图
+    if (rectificationStatsChartRef.value && rectificationStatsChartRef.value.offsetHeight > 0) {
+      setRectificationStatsOption(rectificationStatsOptions)
+    }
+  }
+
+  // 立即尝试初始化
+  initCharts()
+
+  // 如果容器高度为0，延迟重试
+  setTimeout(() => {
+    initCharts()
+  }, 200)
+})
+
+// 监听queryForm参数变化，调用API获取数据
+watch(() => props.queryForm, (newQueryForm) => {
+  // 只有当所有必要的查询参数都存在时才调用API
+  if (newQueryForm.dateRangeQueryType && newQueryForm.year) {
+    fetchRiskHazardData(newQueryForm)
+  }
+}, { deep: true, immediate: true })
+
+// 根据API数据更新图表和表格数据
+const updateChartsWithData = () => {
+  // 1. 更新查获违禁品类别饼图
+  updateCategoryStatsChart()
+
+  // 2. 更新查获时间趋势折线图
+  updateSeizureTimeTrendChart()
+
+  // 3. 更新隐匿物品查获部位饼图
+  updateConcealmentPositionStatsChart()
+
+  // 4. 更新大队查获排名表格
+  updateDepartmentRankingTable()
+
+  // 5. 更新查获岗位分布饼图
+  updatePostCategoryStatsChart()
+
+  // 6. 更新查获通道TOP5表格
+  updateChannelRankingStatsTable()
+
+  console.log('风险隐患数据已更新，图表和表格已刷新')
+}
+
+// 更新查获违禁品类别饼图数据
+const updateCategoryStatsChart = () => {
+  if (categoryStatsData.value && categoryStatsData.value) {
+    const pieData = categoryStatsData.value
+
+    // 转换数据格式
+    const formattedData = pieData.map(item => ({
+      name: item.categoryNameOne || '未知类别',
+      value: item.quantity || 0
+    }))
+
+    // 更新饼图数据
+    captureRankOptions.series[0].data = formattedData
+
+    // 重新设置图表选项
+    setCaptureRankOption(captureRankOptions)
+
+    console.log('查获违禁品类别饼图已更新:', formattedData)
+  } else {
+    // 无数据时清空图表
+    captureRankOptions.series[0].data = []
+    setCaptureRankOption(captureRankOptions)
+  }
+}
+
+// 更新查获时间趋势折线图数据
+const updateSeizureTimeTrendChart = () => {
+  if (seizureTimeTrendData.value && seizureTimeTrendData.value) {
+    const trendData = seizureTimeTrendData.value
+
+    // 提取横坐标和时间数据
+    const xAxisData = trendData.map(item => item.hourOfDay || '未知时间')
+    const seriesData = trendData.map(item => item.total || 0)
+
+    // 更新图表配置
+    problemDiscoveryOptions.xAxis.data = xAxisData
+    problemDiscoveryOptions.series[0].data = seriesData
+
+    // 重新设置图表选项
+    setProblemDiscoveryOption(problemDiscoveryOptions)
+
+    console.log('查获时间趋势折线图已更新:', { xAxis: xAxisData, series: seriesData })
+  } else {
+    // 无数据时清空图表
+    problemDiscoveryOptions.xAxis.data = []
+    problemDiscoveryOptions.series[0].data = []
+    setProblemDiscoveryOption(problemDiscoveryOptions)
+  }
+}
+
+// 更新隐匿物品查获部位饼图数据
+const updateConcealmentPositionStatsChart = () => {
+  if (concealmentPositionStatsData.value && concealmentPositionStatsData.value) {
+    const pieData = concealmentPositionStatsData.value
+
+    // 转换数据格式
+    const formattedData = pieData.map(item => ({
+      name: item.positionName || '未知部位',
+      value: item.quantity || 0
+    }))
+
+    // 更新饼图数据
+    problemRectificationOptions.series[0].data = formattedData
+
+    // 重新设置图表选项
+    setProblemRectificationOption(problemRectificationOptions)
+
+    console.log('隐匿物品查获部位饼图已更新:', formattedData)
+  } else {
+    // 无数据时清空图表
+    problemRectificationOptions.series[0].data = []
+    setProblemRectificationOption(problemRectificationOptions)
+  }
+}
+
+// 更新大队查获排名表格数据
+const updateDepartmentRankingTable = () => {
+  if (departmentRankingData.value && departmentRankingData.value) {
+    const tableData = departmentRankingData.value
+
+    // 转换数据格式
+    const formattedData = tableData.map((item, index) => ({
+      rank: index + 1,
+      department: item.brigadeName || '未知大队',
+      percentage: item.currentRatio || 0,
+      count: item.seizureCount || 0
+    }))
+
+    // 更新表格数据
+    captureRankData.value = formattedData
+
+    console.log('大队查获排名表格已更新:', formattedData)
+  } else {
+    // 无数据时清空表格
+    captureRankData.value = []
+  }
+}
+
+// 更新查获岗位分布饼图数据
+const updatePostCategoryStatsChart = () => {
+  if (postCategoryStatsData.value && postCategoryStatsData.value) {
+    const pieData = postCategoryStatsData.value
+
+    // 转换数据格式
+    const formattedData = pieData.map(item => ({
+      name: item.postName || '未知岗位',
+      value: item.quantity || 0
+    }))
+
+    // 更新饼图数据
+    rectificationStatsOptions.series[0].data = formattedData
+
+    // 重新设置图表选项
+    setRectificationStatsOption(rectificationStatsOptions)
+
+    console.log('查获岗位分布饼图已更新:', formattedData)
+  } else {
+    // 无数据时清空图表
+    rectificationStatsOptions.series[0].data = []
+    setRectificationStatsOption(rectificationStatsOptions)
+  }
+}
+
+// 更新查获通道TOP5表格数据
+const updateChannelRankingStatsTable = () => {
+  if (channelRankingStatsData.value && channelRankingStatsData.value) {
+    const tableData = channelRankingStatsData.value
+
+    // 转换数据格式
+    const formattedData = tableData.map(item => ({
+      channel: item.channelName || '未知通道',
+      count: item.seizureQuantity || 0,
+      area: item.regionalName || '未知区域'
+    }))
+
+    // 更新表格数据
+    captureChannelData.value = formattedData
+
+    console.log('查获通道TOP5表格已更新:', formattedData)
+  } else {
+    // 无数据时清空表格
+    captureChannelData.value = []
+  }
+}
+
+// 组件卸载时销毁图表
+onUnmounted(() => {
+  disposeCaptureRank()
+  disposeProblemDiscovery()
+  disposeProblemRectification()
+  disposeRectificationStats()
+})
+</script>
+
+<style scoped>
+.risk-hazard {
+  width: 100%;
+}
+
+/* 风险隐患标题 */
+.section-title {
+  margin: 14px 0 14px 0;
+  text-align: left;
+}
+
+.section-title h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  margin: 0;
+}
+
+/* 六个部分布局 */
+.six-panel-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.panel-row {
+  display: flex;
+  gap: 16px;
+}
+
+.panel-item {
+  flex: 1;
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.panel-header {
+  padding-bottom: 0;
+}
+
+.panel-header h3 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin: 0;
+}
+
+/* 描述卡片样式 */
+.describe-card {
+  background: #F8F8F8;
+  border: 1px dashed #CDCCCC;
+  border-radius: 6px;
+  padding: 7px 10px;
+  text-align: left;
+}
+
+.describe-content {
+
+  font-size: 13px;
+  color: #666;
+  line-height: 1.5;
+}
+
+.stat-number {
+  font-weight: 600;
+  color: #557DDB;
+  font-size: 16px;
+}
+
+.stat-trend {
+  font-weight: 500;
+}
+
+.stat-trend.up {
+  color: #67C23A;
+}
+
+.stat-trend.down {
+  color: #F56C6C;
+}
+
+/* 图表容器 */
+.chart-container {
+  /* background: #F8F8F8;
+  border-radius: 6px;
+  padding: 16px; */
+  min-height: 200px;
+  height: 250px;
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  /* 防止被压缩 */
+}
+
+/* 表格容器 */
+.table-container {
+  /* background: #F8F8F8; */
+  flex: 1;
+  border: 1px solid #E4E7ED;
+  border-radius: 4px;
+
+}
+
+/* 表格偶数行背景色 */
+.table-container :deep(.el-table__body tr:nth-child(even)) {
+  background-color: #F8F8F8;
+}
+
+/* 表格样式 - 列头和列内容 */
+.table-container :deep(.el-table__header th),
+.table-container :deep(.el-table__body td) {
+  font-weight: 500;
+  font-size: 13px;
+  color: #333333;
+}
+
+.percentage {
+  color: #557DDB;
+  font-weight: 600;
+}
+
+/* ECharts图表样式 */
+.echarts-chart {
+  width: 100% !important;
+  height: 100% !important;
+  min-height: 200px;
+  display: block;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .panel-row {
+    flex-direction: column;
+  }
+}
+</style>

src/views/assistant/index.vue

@@ -0,0 +1,543 @@
+<template>
+  <div class="ai-assist-wrapper">
+    <div class="ai-assist-container" v-if="!showDataBoard && !showPerformanceAnalysis">
+
+      <!-- 消息区域 -->
+      <div class="messages-area" ref="messagesRef">
+        <div v-if="messages.length === 0" class="welcome-message">
+          <h2>您好，今天有什么可以帮到您</h2>
+        </div>
+        <div v-else class="messages-list">
+          <div v-for="msg in messages" :key="msg.id" :class="['message-item', msg.type]">
+
+            <!-- 用户消息 -->
+            <div v-if="msg.type === 'user'" class="user-bubble">{{ msg.text }}</div>
+
+            <!-- AI 回复 -->
+            <div v-else class="assistant-bubble">
+              <!-- 进度步骤 -->
+              <div v-if="msg.steps.length" class="progress-steps">
+                <div v-for="step in msg.steps" :key="step.step" :class="['step-item', step.status]">
+                  <span class="step-icon">
+                    <svg v-if="step.status === 'running'" class="spin-icon" viewBox="0 0 24 24" fill="none">
+                      <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" stroke-dasharray="32" stroke-dashoffset="10"/>
+                    </svg>
+                    <svg v-else viewBox="0 0 24 24" fill="none">
+                      <path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                  </span>
+                  <span class="step-name">{{ step.name }}</span>
+                  <span v-if="step.detail" class="step-detail">{{ step.detail }}</span>
+                  <span v-if="step.duration != null" class="step-duration">{{ step.duration }}s</span>
+                </div>
+              </div>
+
+              <!-- 结果内容 -->
+              <div v-if="msg.result" class="result-content">
+
+                <!-- 知识问答 -->
+                <div v-if="msg.result.query_type === 'knowledge'" class="knowledge-answer">
+                  <div class="answer-text">{{ msg.result.answer }}</div>
+                  <div v-if="msg.result.sources && msg.result.sources.length" class="sources">
+                    <span class="sources-label">参考来源：</span>
+                    <el-tag v-for="s in msg.result.sources" :key="s.filename" size="small" class="source-tag">
+                      {{ s.filename }}
+                    </el-tag>
+                  </div>
+                </div>
+
+                <!-- 数据查询 / 混合查询 -->
+                <div v-if="msg.result.query_type === 'data' || msg.result.query_type === 'hybrid'">
+                  <div v-if="msg.result.answer" class="knowledge-answer" style="margin-bottom: 12px;">
+                    <div class="answer-text">{{ msg.result.answer }}</div>
+                  </div>
+                  <div class="result-summary">{{ msg.result.message }}</div>
+                  <el-table
+                    v-if="msg.result.rows && msg.result.rows.length"
+                    :data="msg.result.rows"
+                    border
+                    size="small"
+                    max-height="360"
+                    class="result-table"
+                  >
+                    <el-table-column
+                      v-for="col in msg.result.columns"
+                      :key="col"
+                      :prop="col"
+                      :label="col"
+                      min-width="100"
+                    />
+                  </el-table>
+                  <div v-else-if="msg.result.rows" class="no-data">暂无数据</div>
+                </div>
+
+                <!-- 耗时 -->
+                <div v-if="msg.result.timing && msg.result.timing.total" class="timing-info">
+                  共耗时 {{ msg.result.timing.total }}s
+                </div>
+              </div>
+
+              <!-- 错误 -->
+              <div v-if="msg.status === 'error'" class="error-message">
+                <svg viewBox="0 0 24 24" fill="none" width="16" height="16">
+                  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                  <path d="M12 8v4m0 4h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                </svg>
+                {{ msg.errorText }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 底部输入区 -->
+      <div class="chat-container">
+        <div class="quick-action">
+          <el-button class="report-btn" @click="handleReportClick">质控分析报告</el-button>
+          <el-button class="report-btn" @click="handlePerformanceClick">绩效分析报告</el-button>
+        </div>
+        <div class="input-container">
+          <el-input
+            v-model="inputMessage"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入您的问题，按 Enter 发送..."
+            class="chat-input"
+            @keydown.enter.exact.prevent="handleSend"
+          />
+          <el-button
+            :disabled="!inputMessage.trim() || isLoading"
+            circle
+            class="send-btn"
+            @click="handleSend"
+          >
+            <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
+              <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
+            </svg>
+          </el-button>
+        </div>
+      </div>
+    </div>
+
+    <DataBoard v-if="showDataBoard" @back="handleBack" />
+    <PerformanceAnalysis v-if="showPerformanceAnalysis" @back="handleBack" />
+  </div>
+</template>
+
+<script setup>
+import { ref, nextTick, onMounted, onActivated, onDeactivated } from 'vue'
+import DataBoard from './components/dataBoard.vue'
+import PerformanceAnalysis from './components/performanceAnalysis.vue'
+import useUserStore from '@/store/modules/user'
+
+const userStore = useUserStore()
+const AI_SERVICE_URL = import.meta.env.VITE_AI_SERVICE_URL || 'http://localhost:8000'
+
+const inputMessage = ref('')
+const isLoading = ref(false)
+const messages = ref([])
+const messagesRef = ref(null)
+const showDataBoard = ref(false)
+const showPerformanceAnalysis = ref(false)
+
+onMounted(() => resetState())
+onActivated(() => resetState())
+onDeactivated(() => resetState())
+
+const resetState = () => {
+  showDataBoard.value = false
+  showPerformanceAnalysis.value = false
+  inputMessage.value = ''
+  messages.value = []
+  isLoading.value = false
+}
+
+const scrollToBottom = async () => {
+  await nextTick()
+  if (messagesRef.value) {
+    messagesRef.value.scrollTop = messagesRef.value.scrollHeight
+  }
+}
+
+const handleSend = async () => {
+  const text = inputMessage.value.trim()
+  if (!text || isLoading.value) return
+
+  inputMessage.value = ''
+  isLoading.value = true
+
+  // 添加用户消息
+  messages.value.push({ id: Date.now(), type: 'user', text })
+  await scrollToBottom()
+
+  // 添加 AI 占位消息
+  const assistantMsg = {
+    id: Date.now() + 1,
+    type: 'assistant',
+    status: 'loading',
+    steps: [],
+    result: null,
+    errorText: ''
+  }
+  messages.value.push(assistantMsg)
+  await scrollToBottom()
+
+  try {
+    const response = await fetch(`${AI_SERVICE_URL}/api/smart-query-stream`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        question: text,
+        user_id: String(userStore.id || 'anonymous'),
+        llm_type: 'claude'
+      })
+    })
+
+    if (!response.ok) {
+      throw new Error(`服务请求失败 (${response.status})`)
+    }
+
+    const reader = response.body.getReader()
+    const decoder = new TextDecoder()
+    let buffer = ''
+
+    while (true) {
+      const { done, value } = await reader.read()
+      if (done) break
+
+      buffer += decoder.decode(value, { stream: true })
+      // SSE 事件以两个换行符分隔
+      const blocks = buffer.split('\n\n')
+      buffer = blocks.pop() // 保留未完整的块
+
+      for (const block of blocks) {
+        if (!block.trim()) continue
+        const lines = block.split('\n')
+        let eventType = ''
+        let dataStr = ''
+        for (const line of lines) {
+          if (line.startsWith('event: ')) eventType = line.slice(7).trim()
+          else if (line.startsWith('data: ')) dataStr = line.slice(6).trim()
+        }
+        if (!dataStr) continue
+
+        let data
+        try { data = JSON.parse(dataStr) } catch { continue }
+
+        if (eventType === 'progress') {
+          const existing = assistantMsg.steps.find(s => s.step === data.step)
+          if (existing) {
+            Object.assign(existing, data)
+          } else {
+            assistantMsg.steps.push({ ...data })
+          }
+          // 触发响应式更新
+          messages.value = [...messages.value]
+          await scrollToBottom()
+
+        } else if (eventType === 'result') {
+          // 将所有仍在 running 的步骤标记为 done
+          assistantMsg.steps.forEach(s => { if (s.status === 'running') s.status = 'done' })
+          assistantMsg.result = data
+          assistantMsg.status = 'done'
+          messages.value = [...messages.value]
+          await scrollToBottom()
+
+        } else if (eventType === 'error') {
+          assistantMsg.status = 'error'
+          assistantMsg.errorText = data.message || '请求失败，请稍后重试'
+          messages.value = [...messages.value]
+        }
+      }
+    }
+
+    // 若未收到 result 事件
+    if (assistantMsg.status === 'loading') {
+      assistantMsg.status = 'error'
+      assistantMsg.errorText = '未收到服务响应，请检查 AI 服务是否正常运行'
+      messages.value = [...messages.value]
+    }
+
+  } catch (e) {
+    assistantMsg.status = 'error'
+    assistantMsg.errorText = e.message || '网络错误，请检查 AI 服务连接'
+    messages.value = [...messages.value]
+  } finally {
+    isLoading.value = false
+    await scrollToBottom()
+  }
+}
+
+const handleReportClick = () => { showDataBoard.value = true }
+const handlePerformanceClick = () => { showPerformanceAnalysis.value = true }
+const handleBack = () => {
+  showDataBoard.value = false
+  showPerformanceAnalysis.value = false
+}
+</script>
+
+<style scoped>
+.ai-assist-wrapper {
+  background: #f5f5f5;
+  min-height: 100vh;
+}
+
+.ai-assist-container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  padding: 0 20px 20px;
+  box-sizing: border-box;
+}
+
+/* ===== 消息区域 ===== */
+.messages-area {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 0;
+}
+
+.welcome-message {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.welcome-message h2 {
+  color: #333;
+  font-size: 28px;
+  font-weight: 400;
+  margin: 0;
+  opacity: 0.8;
+}
+
+.messages-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.message-item {
+  display: flex;
+}
+
+.message-item.user {
+  justify-content: flex-end;
+}
+
+.message-item.assistant {
+  justify-content: flex-start;
+}
+
+/* 用户气泡 */
+.user-bubble {
+  max-width: 70%;
+  background: #557DDB;
+  color: #fff;
+  padding: 10px 16px;
+  border-radius: 18px 18px 4px 18px;
+  font-size: 14px;
+  line-height: 1.6;
+  word-break: break-word;
+}
+
+/* AI 气泡 */
+.assistant-bubble {
+  max-width: 80%;
+  background: #fff;
+  padding: 14px 16px;
+  border-radius: 18px 18px 18px 4px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+/* ===== 进度步骤 ===== */
+.progress-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+
+.step-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: #888;
+}
+
+.step-item.done {
+  color: #67c23a;
+}
+
+.step-item.running {
+  color: #557DDB;
+}
+
+.step-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.spin-icon {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.step-detail {
+  color: #aaa;
+  font-size: 12px;
+}
+
+.step-duration {
+  color: #aaa;
+  font-size: 12px;
+  margin-left: auto;
+}
+
+/* ===== 结果内容 ===== */
+.result-content {
+  margin-top: 4px;
+}
+
+.knowledge-answer .answer-text {
+  color: #333;
+  white-space: pre-wrap;
+  line-height: 1.8;
+}
+
+.sources {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.sources-label {
+  font-size: 12px;
+  color: #999;
+}
+
+.source-tag {
+  font-size: 12px;
+}
+
+.result-summary {
+  color: #666;
+  font-size: 13px;
+  margin-bottom: 8px;
+}
+
+.result-table {
+  width: 100%;
+}
+
+.no-data {
+  color: #999;
+  font-size: 13px;
+  text-align: center;
+  padding: 12px 0;
+}
+
+.timing-info {
+  margin-top: 10px;
+  font-size: 12px;
+  color: #bbb;
+  text-align: right;
+}
+
+.error-message {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #f56c6c;
+  font-size: 13px;
+}
+
+/* ===== 底部输入区 ===== */
+.chat-container {
+  flex-shrink: 0;
+}
+
+.quick-action {
+  margin-bottom: 10px;
+  display: flex;
+  gap: 8px;
+}
+
+.report-btn {
+  color: #557DDB;
+  border: 1px solid #557DDB;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.report-btn:hover {
+  background-color: #557DDB;
+  color: white;
+}
+
+.input-container {
+  position: relative;
+}
+
+.chat-input :deep(.el-textarea__inner) {
+  border: 1px solid #e0e0e0;
+  border-radius: 12px;
+  padding: 16px;
+  font-size: 14px;
+  resize: none;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  padding-right: 60px;
+}
+
+.send-btn {
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  background-color: #557DDB;
+  color: white;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+
+.send-btn:hover:not(.is-disabled) {
+  background-color: #3a6bd9;
+}
+
+.send-btn.is-disabled {
+  background-color: #c0c4cc;
+  cursor: not-allowed;
+}
+
+@media (max-width: 768px) {
+  .ai-assist-container {
+    padding: 0 16px 16px;
+  }
+
+  .welcome-message h2 {
+    font-size: 24px;
+  }
+
+  .user-bubble, .assistant-bubble {
+    max-width: 95%;
+  }
+}
+</style>