1.监控中心 - 设备监测 左侧树与右侧组件联动

2.对接设备类型接口

hx-ai-intelligent/src/view/monitor/deviceMonitor/graph/index.vue

@@ -5,129 +5,62 @@
 <script lang="ts">
   import { defineComponent, onMounted, ref, watch } from 'vue';
   import * as echarts from 'echarts';
-
-  const data = [
-    {
-      date: '2023-12-01 0:00',
-      unit: 'V',
-      data: [
-        {
-          name: 'AC_002（暖通电表）',
-          value: '21',
-        },
-        {
-          name: 'AC_003（照明电表）',
-          value: '36',
-        },
-        {
-          name: 'AC_004（给排水电表）',
-          value: '5',
-        },
-      ],
-    },
-    {
-      date: '2023-12-02 0:00',
-      unit: 'V',
-      data: [
-        {
-          name: 'AC_002（暖通电表）',
-          value: '26',
-        },
-        {
-          name: 'AC_003（照明电表）',
-          value: '25',
-        },
-        {
-          name: 'AC_004（给排水电表）',
-          value: '47',
-        },
-      ],
-    },
-    {
-      date: '2023-12-03 0:00',
-      unit: 'V',
-      data: [
-        {
-          name: 'AC_002（暖通电表）',
-          value: '18',
-        },
-        {
-          name: 'AC_003（照明电表）',
-          value: '22',
-        },
-        {
-          name: 'AC_004（给排水电表）',
-          value: '26',
-        },
-      ],
-    },
-    {
-      date: '2023-12-04 0:00',
-      unit: 'V',
-      data: [
-        {
-          name: 'AC_002（暖通电表）',
-          value: '40',
-        },
-        {
-          name: 'AC_003（照明电表）',
-          value: '15',
-        },
-        {
-          name: 'AC_004（给排水电表）',
-          value: '12',
-        },
-      ],
-    },
-    {
-      date: '2023-12-05 0:00',
-      unit: 'V',
-      data: [
-        {
-          name: 'AC_002（暖通电表）',
-          value: '15',
-        },
-        {
-          name: 'AC_003（照明电表）',
-          value: '18',
-        },
-        {
-          name: 'AC_004（给排水电表）',
-          value: '15',
-        },
-      ],
-    },
-  ];
+  import { inject } from 'vue';
 
   export default defineComponent({
     // eslint-disable-next-line vue/multi-word-component-names
     name: 'Graph',
 
     setup() {
+      let data = ref<any[]>([]);
+      interface PageData {
+        tableList: any[];
+        tableColumns: any[];
+        graphList: any[];
+      }
+      const pageData = inject<PageData>('pageData');
+
+      if (!pageData) {
+        throw new Error('pageData is not provided');
+      }
+      // 监听 pageData 的变化
+      watch(
+        () => pageData as PageData,
+        (_newValue, _oldValue) => {
+          // 执行你的逻辑代码
+          draw();
+        },
+        { deep: true },
+      );
       const graphChart = ref(null);
       let chartInstance: echarts.ECharts | null = null;
 
-      onMounted(() => {
+      const draw = () => {
+        data.value = pageData.graphList;
+        if (chartInstance) {
+          chartInstance.dispose();
+        }
         chartInstance = echarts.init(graphChart.value);
+
         var seriesList = [];
         var date = [];
         var legendList: string | any[] = [];
-        for (let i = 0; i < data.length; i++) {
-          date.push(data[i].date);
+        for (let i = 0; i < data.value.length; i++) {
+          date.push(data.value[i].date);
 
-          for (let j = 0; j < data[i].data.length; j++) {
+          for (let j = 0; j < data.value[i].data.length; j++) {
             if (seriesList.length < j + 1) {
               seriesList.push({
-                name: data[i].data[j].name,
-                data: [data[i].data[j].value],
+                name: data.value[i].data[j].name,
+                data: [data.value[i].data[j].value],
                 type: 'line',
                 smooth: true,
               });
             } else {
-              seriesList[j].data.push(data[i].data[j].value);
+              seriesList[j].data.push(data.value[i].data[j].value);
             }
             if (legendList.length == 0 || legendList.length < j + 1) {
-              legendList.push(data[i].data[j].name);
+              legendList.push(data.value[i].data[j].name);
             }
           }
         }
@@ -143,7 +76,7 @@
               const date = params[0].name;
               const values = params
                 .map((param: any) => {
-                  const unit = data.find((d) => d.date === date)?.unit || '';
+                  const unit = data.value.find((d) => d.date === date)?.unit || '';
                   return `<tr>
                           <td>${param.marker}${param.seriesName}</td>
                           <td style="text-align: right;">${param.value} ${unit}</td>
@@ -174,6 +107,9 @@
 
         chartInstance = echarts.init(graphChart.value);
         chartInstance.setOption(option);
+      };
+      onMounted(() => {
+        draw();
       });
       // 下载图表
       const downloadChart = () => {
@@ -190,6 +126,7 @@
       };
 
       return {
+        draw,
         graphChart,
         downloadChart,
       };