前端优化调整

frontend/src/views/home/tabs/dashboard.vue

@@ -1,13 +1,18 @@
-<!-- 真正的首页 -->
+<!-- 
+  首页Dashboard组件 - 主要功能页面
+  布局：左侧计划树 + 右侧功能区域（功能选择、饼图统计、表格数据）
+-->
 <template>
   <div class='static' ref='popupBaseView'>
     <el-row :gutter='10'>
+      <!-- 左侧计划树区域 (20%) -->
       <el-col :lg='4' :xl='4' :md='4' :sm='4'>
         <div class='left_tree'>
-          <!-- <tree ref='treeRef' :updateSelectedTreeNode='getPieData || (() => {})' /> -->
-            <tree ref='treeRef' :updateSelectedTreeNode='updateData|| (() => {})' :width="viewWidth" :height="viewHeight" :planTable ='planTable'/>
+          <tree ref='treeRef' :updateSelectedTreeNode='updateData|| (() => {})' :width='viewWidth' :height='viewHeight'
+                :planTable='planTable' />
         </div>
       </el-col>
+      <!-- 右侧主要内容区域 (80%) -->
       <el-col :lg='20' :xl='20' :md='20' :sm='20'>
         <div class='right_container'>
           <!-- 功能选择 -->
@@ -29,8 +34,8 @@
           </div>
           <!--检测计划统计 饼图统计-->
           <div class='container_pieShow'>
-            <el-collapse model-value='1' accordion @change='handleCollapseChange' >
-              <el-collapse-item name='1' >
+            <el-collapse model-value='1' accordion @change='handleCollapseChange'>
+              <el-collapse-item name='1'>
                 <template #title>
                   <div class='container_pieShow_title'>
                     <span>检测计划统计</span>
@@ -90,12 +95,13 @@
           </div>
 
           <!--下方表格数据-->
-          <el-tabs class='tabs-menu' type='border-card' @tab-change='handleTabsChange' v-model='editableTabsValue'
+          <el-tabs class='tabs-menu' type='border-card' v-model='editableTabsValue'
                    :style='{ height: tabsHeight }'>
             <el-tab-pane :label='tabLabel1' :style='{ height: tabPaneHeight}'>
-              <!-- 列表数据 -->
+              <!-- 设备数据表格 -->
               <div class='container_table' :style='{ height: tableHeight }'>
-                <Table ref='tableRef1' :id='currentId' :plan ='select_Plan'  :planArray = 'planList2?.data'  :planTable ='planTable'  @batchGenerateClicked="handleBatchGenerate"></Table>
+                <Table ref='tableRef1' :id='currentId' :plan='select_Plan' :planArray='planList2'
+                       :planTable='planTable' @batchGenerateClicked='handleBatchGenerate'></Table>
               </div>
             </el-tab-pane>
           </el-tabs>
@@ -105,19 +111,18 @@
   </div>
 </template>
 <script lang='ts' setup>
-import pie from '@/components/echarts/pie/default.vue'
 import { useRouter } from 'vue-router'
+import { type Plan } from '@/api/plan/interface'
+import { type CollapseModelValue } from 'element-plus/es/components/collapse/src/collapse.mjs'
+import { type Device } from '@/api/device/interface/device'
+import { type ResultData } from '@/api/interface'
+import pie from '@/components/echarts/pie/default.vue'
 import tree from '../components/tree.vue'
 import Table from '../components/table.vue'
-import deviceDataList from '@/api/device/device/deviceData'
-import { getBoundPqDevList, getPlanListByPattern,getPlanList } from '@/api/plan/plan.ts'
+import { getBoundPqDevList, getPlanListByPattern, getPlanList } from '@/api/plan/plan'
 import { onBeforeMount, onUnmounted, ref, watch } from 'vue'
 import { useModeStore } from '@/stores/modules/mode' // 引入模式 store
 import { useDictStore } from '@/stores/modules/dict'
-import { type Plan } from '@/api/plan/interface'
-import type { CollapseModelValue } from 'element-plus/es/components/collapse/src/collapse.mjs'
-import { type Device } from '@/api/device/interface/device'
-import { ResultData } from '@/api/interface'
 import { useViewSize } from '@/hooks/useViewSize'
 
 const planName = ref('')
@@ -125,11 +130,9 @@ const dictStore = useDictStore()
 const modeStore = useModeStore()
 const chartsInfoRef = ref<HTMLElement | null>(null)
 const chartsWidth = ref<number>(0)
-const deviceData = deviceDataList.plan_devicedata
 const treeRef = ref()
 const form: any = ref({
   activeTabs: 0, //功能选择,例如报告生成
-  activeChildTabs: 0,//子功能选择,例如未检设备报告生成，或已检设备更换误差体系生成
   checkStatus: 0, //检测状态
   checkReportStatus: 0, //检测报告状态
   checkResult: 0, //检测结果
@@ -146,118 +149,118 @@ const tabsHeight = ref('calc(100vh - 522px)') // 初始高度
 const tabPaneHeight = ref('calc(100% - 5px)') // 初始高度
 const tableHeight = ref('calc(100% - 50px)') // 初始高度
 
-const planList = ref<ResultData<Plan.ReqPlan[]>>()
-const planList2 = ref<ResultData<Plan.ReqPlan[]>>()//备份含子计划的结构
-const select_Plan = ref<Plan.ReqPlan>()
-const isLabelLineShow = ref(true)
-const planTable = ref<any[]>([])
-const { popupBaseView,viewWidth, viewHeight } = useViewSize()
-const handleCollapseChange = (val: CollapseModelValue) => {
+// ============================ 计划数据状态 ============================
+const planList = ref<Plan.ReqPlan[]>([]) // 计划列表（过滤后）
+const planList2 = ref<Plan.ReqPlan[]>([]) // 计划列表原始数据（包含子计划）
+const select_Plan = ref<Plan.ReqPlan>() // 当前选中的计划
+const planTable = ref<any[]>([]) // 比对模式下的计划表格数据
 
-  // 计算新的高度
+// ============================ 视图状态 ============================
+const isLabelLineShow = ref(true) // 饼图是否显示引导线
+const { popupBaseView, viewWidth, viewHeight } = useViewSize() // 视口尺寸hook
+
+/**
+ * 处理折叠面板展开/收起事件
+ * 根据面板状态动态调整表格高度，优化空间利用
+ * @param val - 当前展开的面板值
+ */
+const handleCollapseChange = (val: CollapseModelValue) => {
+  // 计算新的高度值
   let newHeight
   if (Array.isArray(val)) {
+    // 数组情况：有展开项时高度更小，无展开项时高度更大
     newHeight = val.length > 0 ? 'calc(100vh - 522px)' : 'calc(100vh - 333px)'
   } else {
+    // 单个值情况：展开时高度更小，收起时高度更大
     newHeight = val ? 'calc(100vh - 538px)' : 'calc(100vh - 333px)'
   }
+  // 更新各个容器的高度
   tabsHeight.value = newHeight
   tabPaneHeight.value = `calc(100% - 5px)`
   tableHeight.value = `calc(100% - 5px)`
 }
 
-const handleTabsChange = (val: any) => {
-  form.value.activeTabs = 0
-  form.value.activeTabs = 3
-  form.value.activeChildTabs = Number(val)
 
-}
+// 设置默认主题颜色
 localStorage.setItem('color', '#91cc75')
-//功能选择数据
+// ============================ 功能按钮配置 ============================
+/**
+ * 主功能选项卡配置
+ * 包含4个主要功能：设备检测、报告生成、设备归档、数据操作
+ */
 const tabsList = ref([
   {
-    label: '设备检测',
+    label: '设备检测', // 设备检测功能
     value: 0,
     img: new URL('/src/assets/images/plan/static/1.svg', import.meta.url).href,
-    checked: true,
+    checked: true, // 默认选中
   },
   {
-    label: '报告生成',
+    label: '报告生成', // 检测报告生成功能
     value: 3,
     img: new URL('/src/assets/images/plan/static/3.svg', import.meta.url).href,
     checked: false,
   },
   {
-    label: '设备归档',
+    label: '设备归档', // 设备归档管理功能
     value: 4,
     img: new URL('/src/assets/images/plan/static/4.svg', import.meta.url).href,
     checked: false,
   },
   {
-    label: '数据操作',
+    label: '数据操作', // 数据查询和操作功能
     value: 5,
     img: new URL('/src/assets/images/plan/static/5.svg', import.meta.url).href,
     checked: false,
   },
 ])
 
+// 初始化默认选中第一个功能选项卡
 form.value.activeTabs = tabsList.value[0].value
-const tableRef1 = ref()
-const tableRef2 = ref()
-const currentId = ref('')
 
-watch(
-  () => form.value,
-  (val, oldVal) => {
-    if (val) {
+// ============================ 组件引用和状态 ============================
+const tableRef1 = ref() // 主表格组件引用
+const currentId = ref('') // 当前选中的计划ID
 
-      if (form.value.activeTabs === 0)//设备检测
-      {
-        const tabledata = deviceData.filter((item) => item.document_State === '未归档')
-        tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
-      } else if (form.value.activeTabs === 4)//设备归档
-      {
-        const tabledata = deviceData.filter((item) => item.check_State === '检测完成' && item.document_State === '未归档')
-        tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
-      } else if (form.value.activeTabs === 3 || form.value.activeTabs === 5)//报告生成、数据查询
-      {
-        const tabledata = deviceData.filter((item) => item.check_State === '检测完成')
-        tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
-      }
-    }
-  },
-  {
-    immediate: true,
-    deep: true,
-  },
-)
+// ============================ 监听器 ============================
+/**
+ * 监听功能切换并通知表格组件更新配置
+ * 不再传递静态数据，让表格组件通过API获取真实数据
+ */
 watch(
-  () => form.value,
-  (val, oldVal) => {
-    if (val) {
-      tableRef2.value && tableRef2.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs)
+  () => form.value.activeTabs,
+  (newTabs) => {
+    // 只传递功能模式，不传递静态假数据
+    // 表格组件会根据功能模式通过API获取对应的真实数据
+    tableRef1.value && tableRef1.value.changeActiveTabs(newTabs)
   }
-  },
-  {
-    immediate: true,
-    deep: true,
-  },
+  // 去掉 immediate: true，避免初始化时重复调用
 )
 
-const pieRef1 = ref(),
-pieRef2 = ref(),
-pieRef3 = ref()
+// ============================ 饼图组件引用和数据 ============================
+const pieRef1 = ref(), // 设备检测状态饼图引用
+  pieRef2 = ref(), // 设备检测结果饼图引用
+  pieRef3 = ref() // 设备报告状态饼图引用
 
-const chartsData1: any = ref([]),
-chartsData2: any = ref([]),
-chartsData3: any = ref([])
+const chartsData1: any = ref([]), // 设备检测状态统计数据
+  chartsData2: any = ref([]), // 设备检测结果统计数据
+  chartsData3: any = ref([]) // 设备报告状态统计数据
 
-const findPlanById = (plans: Plan.ReqPlan[], id: string): Plan.ReqPlan | undefined => {
+// ============================ 工具函数 ============================
+/**
+ * 递归查找指定 ID 的计划
+ * @param plans - 计划数组
+ * @param id - 计划 ID
+ * @returns 找到的计划对象或 undefined
+ */
+const findPlanById = (plans: any, id: string): Plan.ReqPlan | undefined => {
+  if (!plans) return undefined
   for (const plan of plans) {
-    if (plan.id === id) {
+    if (plan?.id === id) {
       return plan
     }
-    if (plan.children) {
+    // 递归搜索子计划
+    if (plan?.children) {
       const foundPlan = findPlanById(plan.children, id)
       if (foundPlan) {
         return foundPlan
@@ -268,43 +271,56 @@ const findPlanById = (plans: Plan.ReqPlan[], id: string): Plan.ReqPlan | undefin
 }
 
 
+/**
+ * 处理树节点选中事件的回调函数
+ * 根据选中的计划节点更新饼图数据并切换相应的功能模式
+ * @param id - 选中的计划 ID
+ */
 const updateData = (id: string) => {
-    getPieData(id);//刷新饼图
+  // 刷新饼图数据
+  getPieData(id)
 
-    //获取点击树的父节点名字
+  // 查找当前计划的父节点名称
   const parentNodeName = ref('')
-    for (let i = 0; i < planList.value.data.length; i++) {
-    if (Array.isArray(planList.value.data[i].children) && planList.value.data[i].children.length > 0) {
-        for (let j = 0; j < planList.value.data[i].children.length; j++) {
-            if (planList.value.data[i].children[j].id === id) {
-                parentNodeName.value = planList.value.data[i].name
-                break;
+  if (planList.value?.length) {
+    for (let i = 0; i < planList.value.length; i++) {
+      const children = planList.value[i]?.children
+      if (Array.isArray(children) && children.length > 0) {
+        for (let j = 0; j < children.length; j++) {
+          if (children[j]?.id === id) {
+            parentNodeName.value = planList.value[i]?.name || ''
+            break
           }
         }
       }
     }
-    if(parentNodeName.value === '检测完成'){
-      handleCheckFunction(5)
-    }else{
-      handleCheckFunction(0)
+  }
+  
+  // 根据父节点名称自动切换功能模式
+  if (parentNodeName.value === '检测完成') {
+    handleCheckFunction(5) // 切换到数据操作模式
+  } else {
+    handleCheckFunction(0) // 切换到设备检测模式
   }
 }
 
+/**
+ * 获取指定计划的设备统计数据并更新饼图
+ * 分别统计设备的检测状态、检测结果、报告状态分布情况
+ * @param id - 计划 ID
+ */
 const getPieData = async (id: string) => {
-  currentId.value = id // 设置当前ID
-  // 初始化计数对象
-  const checkStateCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0, 3: 0 }
-  const checkResultCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0 }
-  const reportStateCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0 }
+  currentId.value = id // 设置当前选中的计划ID
+  
+  // 初始化各类统计计数器
+  const checkStateCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0, 3: 0 } // 检测状态计数：未检(0)、检测中(1)、检测完成(2)、归档(3)
+  const checkResultCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0 } // 检测结果计数：不符合(0)、符合(1)、未检(2)
+  const reportStateCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0 } // 报告状态计数：未生成(0)、已生成(1)、未检(2)
   if (id) {
     const boundPqDevList = ref<Device.ResPqDev[]>([])//根据检测计划id查询出所有已绑定的设备
     const plan = findPlanById(planList.value, id)
-
-    planName.value = '所选计划:' + plan.name
-
+    planName.value = '所选计划:' + (plan?.name || '')
     select_Plan.value = plan
-    console.log('所选计划:',plan)
-
     const pqDevList_Result2 = await getBoundPqDevList({ 'planIdList': [id], 'checkStateList': [0, 1, 2, 3] })
     boundPqDevList.value = pqDevList_Result2.data as Device.ResPqDev[]
     // 遍历 boundPqDevList 并更新计数对象
@@ -325,78 +341,128 @@ const getPieData = async (id: string) => {
     })
 
     // 检查 checkStateCount 是否全为 0
-    if(boundPqDevList.value.length != 0){
+    if (boundPqDevList.value.length != 0) {
 
-      isLabelLineShow.value = true;
-      const allZero = Object.values(checkStateCount).every(count => count === 0);
+      isLabelLineShow.value = true
+      const allZero = Object.values(checkStateCount).every(count => count === 0)
       chartsData1.value = [
-      { value: allZero ? 0 : checkStateCount[0] === 0 ? null : checkStateCount[0], name: '未检', itemStyle: { color: '#fac858' } },
-      { value: allZero ? 0 : checkStateCount[1] === 0 ? null : checkStateCount[1], name: '检测中', itemStyle: { color: '#ee6666' } },
-      { value: allZero ? 0 : checkStateCount[2] === 0 ? null : checkStateCount[2], name: '检测完成', itemStyle: { color: '#91cc75' } },
-      { value: allZero ? 0 : checkStateCount[3] === 0 ? null : checkStateCount[3], name: '归档', itemStyle: { color: '#5470c6' } },
-      ];
+        {
+          value: allZero ? 0 : checkStateCount[0] === 0 ? null : checkStateCount[0],
+          name: '未检',
+          itemStyle: { color: '#fac858' },
+        },
+        {
+          value: allZero ? 0 : checkStateCount[1] === 0 ? null : checkStateCount[1],
+          name: '检测中',
+          itemStyle: { color: '#ee6666' },
+        },
+        {
+          value: allZero ? 0 : checkStateCount[2] === 0 ? null : checkStateCount[2],
+          name: '检测完成',
+          itemStyle: { color: '#91cc75' },
+        },
+        {
+          value: allZero ? 0 : checkStateCount[3] === 0 ? null : checkStateCount[3],
+          name: '归档',
+          itemStyle: { color: '#5470c6' },
+        },
+      ]
       // 同样处理 chartsData2 和 chartsData3
-      const allZeroResult = Object.values(checkResultCount).every(count => count === 0);
+      const allZeroResult = Object.values(checkResultCount).every(count => count === 0)
       chartsData2.value = [
-        { value: allZeroResult ? 0 : checkResultCount[2] === 0 ? null : checkResultCount[2], name: '未检', itemStyle: { color: '#fac858' } },
-        { value: allZeroResult ? 0 : checkResultCount[0] === 0 ? null : checkResultCount[0], name: '不符合', itemStyle: { color: '#ee6666' } },
-        { value: allZeroResult ? 0 : checkResultCount[1] === 0 ? null : checkResultCount[1], name: '符合', itemStyle: { color: '#91cc75' } },
-      ];
+        {
+          value: allZeroResult ? 0 : checkResultCount[2] === 0 ? null : checkResultCount[2],
+          name: '未检',
+          itemStyle: { color: '#fac858' },
+        },
+        {
+          value: allZeroResult ? 0 : checkResultCount[0] === 0 ? null : checkResultCount[0],
+          name: '不符合',
+          itemStyle: { color: '#ee6666' },
+        },
+        {
+          value: allZeroResult ? 0 : checkResultCount[1] === 0 ? null : checkResultCount[1],
+          name: '符合',
+          itemStyle: { color: '#91cc75' },
+        },
+      ]
 
 
       // 检查 reportStateCount 是否全为 0
-      const allZeroReport = Object.values(reportStateCount).every(count => count === 0);
+      const allZeroReport = Object.values(reportStateCount).every(count => count === 0)
       chartsData3.value = [
-        { value: allZeroReport ? 0 : reportStateCount[2] === 0 ? null : reportStateCount[2], name: '未检', itemStyle: { color: '#fac858' } },
-        { value: allZeroReport ? 0 : reportStateCount[0] === 0 ? null : reportStateCount[0], name: '未生成', itemStyle: { color: '#ee6666' } },
-        { value: allZeroReport ? 0 : reportStateCount[1] === 0 ? null : reportStateCount[1], name: '已生成', itemStyle: { color: '#91cc75' } },
-      ];
+        {
+          value: allZeroReport ? 0 : reportStateCount[2] === 0 ? null : reportStateCount[2],
+          name: '未检',
+          itemStyle: { color: '#fac858' },
+        },
+        {
+          value: allZeroReport ? 0 : reportStateCount[0] === 0 ? null : reportStateCount[0],
+          name: '未生成',
+          itemStyle: { color: '#ee6666' },
+        },
+        {
+          value: allZeroReport ? 0 : reportStateCount[1] === 0 ? null : reportStateCount[1],
+          name: '已生成',
+          itemStyle: { color: '#91cc75' },
+        },
+      ]
 
-    }else{
+    } else {
 
-      isLabelLineShow.value = false;//不展示引导线
+      isLabelLineShow.value = false//不展示引导线
       chartsData1.value = [
-      { value: null , name: '未检', itemStyle: { color: '#fac858' } },
-      { value:  null , name: '检测中', itemStyle: { color: '#ee6666' } },
-      { value: null , name: '检测完成', itemStyle: { color: '#91cc75' } },
-      { value:  null , name: '归档', itemStyle: { color: '#5470c6' } },
-      { value:  0 , itemStyle: { color: '#eeeeee' } },
-    ];
+        { value: null, name: '未检', itemStyle: { color: '#fac858' } },
+        { value: null, name: '检测中', itemStyle: { color: '#ee6666' } },
+        { value: null, name: '检测完成', itemStyle: { color: '#91cc75' } },
+        { value: null, name: '归档', itemStyle: { color: '#5470c6' } },
+        { value: 0, itemStyle: { color: '#eeeeee' } },
+      ]
 
       chartsData2.value = [
         { value: null, name: '未检', itemStyle: { color: '#fac858' } },
         { value: null, name: '不符合', itemStyle: { color: '#ee6666' } },
         { value: null, name: '符合', itemStyle: { color: '#91cc75' } },
-        { value:  0 , itemStyle: { color: '#eeeeee' } },
-      ];
+        { value: 0, itemStyle: { color: '#eeeeee' } },
+      ]
 
       chartsData3.value = [
         { value: null, name: '未检', itemStyle: { color: '#fac858' } },
         { value: null, name: '未生成', itemStyle: { color: '#ee6666' } },
         { value: null, name: '已生成', itemStyle: { color: '#91cc75' } },
-        { value:  0 , itemStyle: { color: '#eeeeee' } },
-      ];
+        { value: 0, itemStyle: { color: '#eeeeee' } },
+      ]
     }
-  }else{
+  } else {
     planName.value = '所选计划:'
   }
 
 
-
   pieRef1.value.init()
   pieRef2.value.init()
   pieRef3.value.init()
 }
+/**
+ * 初始化树组件数据
+ * @param data - 计划数据
+ */
 const getTree = (data?: any) => {
   treeRef.value.getTreeData(data)
 }
-//前往检测
+
+// ============================ 路由跳转函数 ============================
+/**
+ * 跳转到检测页面
+ */
 const handleDetection = () => {
   router.push({
     path: '/detection',
   })
 }
-//前往计划详情
+
+/**
+ * 跳转到计划详情页面
+ */
 const planDetail = () => {
   router.push({
     path: '/plan/planList',
@@ -404,53 +470,69 @@ const planDetail = () => {
 }
 
 
-//功能选择css切换
+// ============================ 主要业务逻辑函数 ============================
+/**
+ * 处理功能选项卡切换
+ * 根据选中的功能更新UI状态和表格显示内容
+ * @param val - 功能选项卡值 (0:设备检测, 3:报告生成, 4:设备归档, 5:数据操作)
+ */
 const handleCheckFunction = (val: any) => {
+  // 重置tab状态
   editableTabsValue.value = '0'
-  form.value.activeChildTabs = 0
+  
+  // 更新功能按钮的选中状态
   tabsList.value.map((item: any, index: any) => {
-    if (val == item.value) {
-      item.checked = true
-    } else {
-      item.checked = false
-    }
+    item.checked = (val == item.value)
   })
 
   tabShow.value = false
 
+  // 根据选中的功能设置不同的过滤条件和标签
   switch (val) {
-    case 0://自动检测
-      checkStateTable.value = [0, 1, 2]
+    case 0: // 设备检测模式
+      checkStateTable.value = [0, 1, 2] // 显示未检、检测中、检测完成的设备
       tabLabel1.value = '设备检测'
       break
-    case 1://手动检测
+    case 1: // 手动检测模式（预留）
       tabLabel1.value = '手动检测'
       break
-    case 2://设备复检
+    case 2: // 设备复检模式（预留）
       tabLabel1.value = '设备复检'
       break
-    case 3://报告生成
-      checkStateTable.value = [2, 3]
+    case 3: // 报告生成模式
+      checkStateTable.value = [2, 3] // 显示检测完成和已归档的设备
       tabLabel1.value = '报告生成'
-      //tabShow.value = true;
       break
-    case 4://设备归档
-      checkStateTable.value = [2]
+    case 4: // 设备归档模式
+      checkStateTable.value = [2] // 只显示检测完成的设备
       tabLabel1.value = '设备归档'
       break
-    case 5://数据查询
-      checkStateTable.value = [2, 3]
+    case 5: // 数据查询模式
+      checkStateTable.value = [2, 3] // 显示检测完成和已归档的设备
       tabLabel1.value = '数据查询'
       break
   }
+  // 更新当前激活的功能选项卡
   form.value.activeTabs = val
+  
+  // 刷新饼图数据以确保统计信息同步
+  if (currentId.value) {
+    getPieData(currentId.value)
+  }
 }
 
 
+// ============================ 监听器和事件处理 ============================
+/**
+ * 饼图容器尺寸变化监听器
+ * 当容器大小变化时自动调整饼图尺寸，保持响应式设计
+ */
 const resizeObserver = new ResizeObserver(entries => {
   for (let entry of entries) {
+    // 更新容器宽度
     chartsWidth.value = entry.contentRect.width
 
+    // 同步调整三个饼图的尺寸（宽度为容器的95%，高度固定180px）
     pieRef1.value?.reSize(chartsWidth.value * 0.95, 180, true)
     pieRef2.value?.reSize(chartsWidth.value * 0.95, 180, true)
     pieRef3.value?.reSize(chartsWidth.value * 0.95, 180, true)
@@ -458,10 +540,18 @@ const resizeObserver = new ResizeObserver(entries => {
 })
 
 
+// ============================ 初始化函数 ============================
+/**
+ * 初始化计划数据
+ * 根据当前模式获取相应的计划列表数据
+ */
 const initPlan = async () => {
-  const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? ''//获取数据字典中对应的id
+  // 获取当前模式对应的数据字典ID
+  const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? ''
+  
+  // 构建计划查询请求对象
   const reqPlan: Plan.ReqPlan = {
-    pattern: patternId,
+    pattern: patternId, // 模式ID
     datasourceIds: '',
     sourceIds: '',
     planId: '',
@@ -485,81 +575,96 @@ const initPlan = async () => {
     reportTemplateName: '',
     reportTemplateVersion: '',
     dataRule: '',
-    testItemNameStr:'',
+    testItemNameStr: '',
     testItems: [],
-    standardDevIds:[],
+    standardDevIds: [],
     standardDevMap: new Map<string, number>(),
   }
-  planList2.value = (await getPlanListByPattern(reqPlan)) as ResultData<Plan.ReqPlan[]>
-  planList.value = JSON.parse(JSON.stringify(planList2.value));
-  planList.value = planList.value.data.map((item: any) => {
-      if (item.children) {
-        item.children = item.children.filter(child => child.pid === '0');
+  
+  // 获取计划数据
+  const result = await getPlanListByPattern(reqPlan) as ResultData<Plan.ReqPlan[]>
+  planList2.value = result.data || []
+  
+  // 创建计划数据的副本用于过滤处理
+  planList.value = JSON.parse(JSON.stringify(planList2.value))
+  
+  // 过滤子计划，只保留 pid 为 '0' 的项目
+  planList.value = planList.value.map((item: any) => {
+    if (item?.children) {
+      item.children = item.children.filter((child: any) => child?.pid === '0')
     }
-      return item;
-    });
+    return item
+  })
 }
 
+// ============================ 生命周期函数 ============================
+/**
+ * 组件挂载前的初始化操作
+ * 1. 初始化计划数据
+ * 2. 设置默认选中的计划
+ * 3. 初始化图表和树组件
+ * 4. 根据模式加载额外数据
+ */
 onBeforeMount(async () => {
-
+  // 初始化计划数据
   await initPlan()
-  console.log(planList.value)
-  for (let i = 0; i < planList.value.length; i++) {
-    if (Array.isArray(planList.value[i].children) && planList.value[i].children.length > 0) {
-      currentId.value = planList.value[i].children[0].id; // 直接赋值第一个 children 的 id
-      break; // 确保只执行一次
-    }
-  }
-  console.log('planList.valuecurrentId.value', currentId.value)
-  // if (planList.value.data[0].children[0]) {
-  //   currentId.value = planList.value.data[0].children[0].id
-  //   console.log('currentId.value',planList.value.data[0])
-  // }
   
+  // 找到第一个有子计划的项目，并设置为默认选中
+  if (planList.value?.length) {
+    for (let i = 0; i < planList.value.length; i++) {
+      const children = planList.value[i]?.children
+      if (Array.isArray(children) && children.length > 0) {
+        currentId.value = children[0]?.id // 选中第一个子计划
+        break // 确保只选中一个
+      }
+    }
+  }
+
+  // 初始化图表尺寸监听器
   if (chartsInfoRef.value) {
     resizeObserver.observe(chartsInfoRef.value)
   }
-  getTree(planList.value)
+  
+  // 初始化树组件和饼图数据
+  getTree(planList.value || [])
   getPieData(currentId.value)
 
-  if(modeStore.currentMode != '比对式')
-      return;
-  const patternId2 = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id;
+  // 如果不是比对模式，直接返回
+  if (modeStore.currentMode != '比对式')
+    return
+    
+  // 比对模式下加载额外的计划表格数据
+  const patternId2 = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id
   if (patternId2 !== undefined) {
-      planTable.value = await getPlanList({ 'patternId': patternId2 });
+    planTable.value = await getPlanList({ 'patternId': patternId2 })
   }
 })
 
+/**
+ * 组件卸载时的清理操作
+ * 移除尺寸监听器，防止内存泄漏
+ */
 onUnmounted(async () => {
   if (chartsInfoRef.value) {
     resizeObserver.unobserve(chartsInfoRef.value)
   }
-
-
 })
 
+/**
+ * 处理批量操作完成后的数据更新
+ * 更新计划数据、树状态和饼图，表格会通过watch自动更新
+ */
 const handleBatchGenerate = async () => {
- // console.log('批量生成按钮被点击了');
-  // 在这里添加其他逻辑，比如显示对话框、更新状态等
+  // 重新获取计划数据
   await initPlan()
-  treeRef.value.clickTableToTree(planList.value,currentId.value)
+  // 更新树的选中状态
+  treeRef.value.clickTableToTree(planList.value || [], currentId.value)
+  // 重新获取饼图数据，deviceData更新后watch会自动触发表格更新
   getPieData(currentId.value)
 
-  if (form.value.activeTabs === 0)//设备检测
-      {
-        const tabledata = deviceData.filter((item) => item.document_State === '未归档')
-        tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
-      } else if (form.value.activeTabs === 4)//设备归档
-      {
-        const tabledata = deviceData.filter((item) => item.check_State === '检测完成' && item.document_State === '未归档')
-        tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
-      } else if (form.value.activeTabs === 3 || form.value.activeTabs === 5)//报告生成、数据查询
-      {
-        const tabledata = deviceData.filter((item) => item.check_State === '检测完成')
-        tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
-      }
-
-};
+  // 移除重复的表格渲染调用 - watch监听器已经处理了这部分逻辑
+  tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs)
+}
 </script>
 <style lang='scss' scoped>
 
@@ -707,7 +812,6 @@ const handleBatchGenerate = async () => {
     }
 
 
-
     .tabs-menu {
       height: 100%;
       border: 0;
@@ -748,6 +852,4 @@ const handleBatchGenerate = async () => {
 }
 
 
-
-
 </style>