* add: 添加监控中心-设备监测页面

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

@@ -0,0 +1,210 @@
+
+<template>
+
+  <div ref="chart" style="width: 100%; height: 80%;"></div>
+      
+</template>
+
+<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'
+      }
+    ]
+  },
+];
+
+  export default defineComponent({
+    name: 'Graph',
+    setup() {
+    const chart = ref(null);
+ 
+    onMounted(() => {
+
+      var seriesList = []
+      var date = []
+      var legendList: string|any[] = []
+      for (let i = 0; i < data.length; i++) {
+       
+        date.push(data[i].date)
+
+        for (let j = 0; j < data[i].data.length; j++) {
+          if (seriesList.length  < j + 1) {
+            seriesList.push(
+              {
+                name: data[i].data[j].name,
+                data: [data[i].data[j].value],
+                type: 'line',
+                smooth: true
+              }
+            )
+          } else {
+            seriesList[j].data.push(data[i].data[j].value)
+          }
+
+          if (legendList.length == 0 || legendList.length  < j + 1) {
+            legendList.push(data[i].data[j].name)
+            
+          }
+          
+
+
+        }
+
+      }
+
+
+      const option = {
+
+
+        legend: {
+          data: legendList,
+          orient: 'horizontal',
+          bottom: 30
+        },
+        tooltip: {
+          trigger: 'axis',
+          formatter: (params: any) => {
+            const date = params[0].name;
+            const values = params.map((param: any) => {
+              const unit = data.find(d => d.date === date)?.unit || '';
+              return `<tr>
+                        <td>${param.marker}${param.seriesName}</td>
+                        <td style="text-align: right;">${param.value} ${unit}</td>
+                      </tr>`;
+            }).join('');
+            return `<div>${date}</div><table style="width: 100%;">${values}</table>`;
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: date
+        },
+        yAxis: {
+          type: 'value'
+        },
+        dataZoom: [
+          // {
+          //   type: 'inside',
+          //   start: 0,
+          //   end: 10
+          // },
+          {
+            height: 10,
+            start: 0,
+            end: 100,
+            handleSize: '300%', // 设置滑块的大小
+            bottom: 15,
+
+          }
+        ],
+        series: seriesList
+        // series: [
+
+        //   {
+        //     data: [820, 932, 901, 934, 1290, 1330, 1320],
+        //     type: 'line'
+        //   }
+        // ]
+      };
+ 
+      const chartInstance = echarts.init(chart.value);
+      chartInstance.setOption(option);
+    });
+ 
+    return { chart };
+  }
+  })
+</script>
+<style lang="less" scoped>
+ 
+  </style>