微调

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

@@ -2,7 +2,7 @@
 <template>
   <div class="static">
     <div class="left_tree">
-      <tree ref="treeRef" :updateSelectedTreeNode="getPieData || (() => {})"/>
+      <tree ref="treeRef"  :updateSelectedTreeNode="getPieData || (() => {})" />
     </div>
     <!-- <span class="new_span">测试scss颜色</span> -->
     <div class="right_container">
@@ -89,14 +89,14 @@
       <el-tab-pane :label="tabLabel1" :style="{ height: tabPaneHeight }"> 
         <!-- 列表数据 -->
         <div class="container_table" :style="{ height: tableHeight }">
-          <Table ref="tableRef1"></Table>
+          <Table ref="tableRef1" :id='currentId'></Table>
         </div>
       </el-tab-pane>
     
       <el-tab-pane label="已检设备"  v-if="tabShow" :style="{ height: tabPaneHeight }">
         <!-- 列表数据 -->
         <div class="container_table" :style="{ height: tableHeight }">
-          <Table ref="tableRef2"></Table>
+          <Table ref="tableRef2" :id='currentId'></Table>
         </div>
       </el-tab-pane>
     </el-tabs>
@@ -109,9 +109,19 @@ import pie from "@/components/echarts/pie/default.vue";
 import { useRouter } from "vue-router";
 import tree from "../components/tree.vue";
 import Table from "../components/table.vue";
-import { data } from "@/api/plan/static.json";
+//import { data } from "@/api/plan/static.json";
 import deviceDataList from '@/api/device/device/deviceData'
+import {getPlanListByPattern } from '@/api/plan/plan.ts'
+import { onMounted, 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 { getBoundPqDevList } from '@/api/plan/plan.ts'
 
+const dictStore = useDictStore()
+const modeStore = useModeStore();
 const chartsInfoRef = ref<HTMLElement | null>(null);
 const chartsWidth = ref<number>(0);
 const deviceData = deviceDataList.plan_devicedata
@@ -136,15 +146,18 @@ const tabsHeight = ref('calc(100vh - 538px)'); // 初始高度
 const tabPaneHeight = ref('calc(100% - 5px)'); // 初始高度
 const tableHeight = ref('calc(100% - 5px)'); // 初始高度
 const handleChange = (val: string[]) => {
- // console.log(val)
+ 
 }
 
-const handleCollapseChange = (val: string[]) => {
+const handleCollapseChange = (val: CollapseModelValue) => {
 
-  console.log(val)
-  console.log(val.length)
   // 计算新的高度
-  const newHeight = val.length > 0 ? 'calc(100vh - 538px)' : 'calc(100vh - 333px)';
+  let newHeight;
+  if (Array.isArray(val)) {
+    newHeight = val.length > 0 ? 'calc(100vh - 538px)' : 'calc(100vh - 333px)';
+  } else {
+    newHeight = val ? 'calc(100vh - 538px)' : 'calc(100vh - 333px)';
+  }
   //const newtableHeight= val.length > 0 ? 'calc(100vh - 638px)' : 'calc(100vh - 433px)';
   tabsHeight.value = newHeight;
   tabPaneHeight.value = `calc(100% - 5px)`; 
@@ -154,7 +167,7 @@ const handleCollapseChange = (val: string[]) => {
   // tableRef2.value.resize();
 };
 
-const handleTabsChange = (val) => {
+const handleTabsChange = (val: any) => {
   form.value.activeTabs = 0;
   form.value.activeTabs = 3;
   form.value.activeChildTabs = Number(val);
@@ -199,7 +212,7 @@ const tabsList = ref([
 form.value.activeTabs = tabsList.value[0].value;
 const tableRef1 = ref();
 const tableRef2 = ref();
-
+const currentId = ref('');
 
 watch(
   () => form.value,
@@ -248,13 +261,23 @@ const pieRef1 = ref(),
   pieRef3 = ref();
 const changeSelect = () => {
   console.log(form.value.activeTabs);
-  getPieData();
+  //getPieData();
 };
 const chartsData1: any = ref([]),
   chartsData2: any = ref([]),
   chartsData3: any = ref([]);
-const getPieData = () => {
-  
+const getPieData = async (id: string) => {
+  console.log('123111',id);
+  currentId.value = id; // 设置当前ID
+
+
+  const boundPqDevList=ref<Device.ResPqDev[]>([])//根据检测计划id查询出所有已绑定的设备 
+  const pqDevList_Result2 = await getBoundPqDevList({'planId': id, 'checkStateList':[0,1,2]});
+  boundPqDevList.value = pqDevList_Result2.data as Device.ResPqDev[];
+  console.log('饼图',boundPqDevList.value)
+
+
+
   chartsData1.value = [
     { value: 12, name: "未检", itemStyle: { color: '#fac858' } },
     { value: 0, name: "检测中", itemStyle: { color: '#ee6666' }  },
@@ -265,24 +288,11 @@ const getPieData = () => {
     { value: 12, name: "未检" , itemStyle: { color: '#fac858' } },
     { value: 3, name: "不符合" , itemStyle: { color: '#ee6666' } },
     { value: 5, name: "符合", itemStyle: { color: '#91cc75' }  },
-    //     { value: Math.floor(Math.random() * 100) + 1, name: "有不合格项" , itemStyle: { color: '#ee6666' } },
-    // { value: Math.floor(Math.random() * 100) + 1, name: "全部合格", itemStyle: { color: '#91cc75' }  },
   ];
-  // pieRef2.value.init();
   chartsData3.value = [
-    // { value: Math.floor(Math.random() * 100) + 1, name: "已生成报告" },
-    // { value: Math.floor(Math.random() * 100) + 1, name: "未生成报告" },
-
     { value: 12, name: "未检" , itemStyle: { color: '#fac858' } },
     { value: 4, name: "未生成" , itemStyle: { color: '#ee6666' } },
     { value: 4, name: "已生成", itemStyle: { color: '#91cc75' }  },
-
-
-    // { value: Math.floor(Math.random() * 100) + 1, name: "未检" , itemStyle: { color: '#fac858' } },
-    // { value: Math.floor(Math.random() * 100) + 1, name: "有不合格项未生成报告" },
-    // { value: Math.floor(Math.random() * 100) + 1, name: "全部合格未生成报告" },
-    // { value: Math.floor(Math.random() * 100) + 1, name: "有不合格项已生成报告" },
-    // { value: Math.floor(Math.random() * 100) + 1, name: "全部合格已生成报告" },
   ];
 
   pieRef1.value.init();
@@ -292,13 +302,8 @@ const getPieData = () => {
   // pieRef2.value.reSize(470,145,true);
   // pieRef3.value.reSize(470,145,true);
 };
-const getTree = () => {
-  treeRef.value.getTreeData(data);
-  // getStaticTreeData({ userName: "zhangsan", planName: "111" }).then((res) => {
-  //   console.log(res, "99999999");
-  //   // treeRef.value.getTreeData(res.data);
-  //   treeRef.value.getTreeData(data);
-  // });
+const getTree = (data?: any) => {
+   treeRef.value.getTreeData(data);
 };
 //前往检测
 const handleDetection = () => {
@@ -353,6 +358,7 @@ const handleCheckFunction = (val: any) => {
 };
 
 
+
 const resizeObserver = new ResizeObserver(entries => {
   for (let entry of entries) {
     chartsWidth.value = entry.contentRect.width;
@@ -364,21 +370,47 @@ const resizeObserver = new ResizeObserver(entries => {
   }
 });
 
-onMounted(() => {
- // console.log();
+onMounted(async () => {
+    const patternId   = dictStore.getDictData('Pattern').find(item=>item.name=== modeStore.currentMode)?.id ?? ''//获取数据字典中对应的id
+    const reqPlan: Plan.ReqPlan = {
+        pattern: patternId,
+        datasourceIds: "",
+        sourceIds: [],
+        planId: "",
+        scriptName: "",
+        errorSysName: "",
+        sourceName: "",
+        devIds: [],
+        id: "",
+        name: "",
+        dataSourceId: "",
+        scriptId: "",
+        errorSysId: "",
+        timeCheck: 0,
+        testState: 0,
+        reportState: 0,
+        result: 0,
+        code: 0,
+        state: 0
+    };
+  const planList = await getPlanListByPattern(reqPlan);
+  console.log('1111111111111111')
  if (chartsInfoRef.value) {
     resizeObserver.observe(chartsInfoRef.value);
   }
-  getTree();
-  getPieData();
-});
+  getTree(planList.data);
 
+  //getPieData('');
+});
 
 onUnmounted(() => {
   if (chartsInfoRef.value) {
     resizeObserver.unobserve(chartsInfoRef.value);
   }
 });
+
+
+
 </script>
 <style lang="scss" scoped>
 .static {