1. 监控中心 - 能耗监测 - 分析 表格 前端页面

2. 监控中心 - 能耗监测 - 分析 图表 前台页面

hx-ai-intelligent/src/view/monitor/energyMonitor/analysisGraph/index.vue

@@ -0,0 +1,155 @@
+<template>
+  <a-row type="flex" style="height: 92%">
+    <a-col :span="8">
+      <a-radio-group
+        v-model:value="mode"
+        @change="changeMode"
+        style="padding-bottom: 10px; width: 40%; height: 4%; padding-left: 30px; padding-top: 10px">
+        <a-radio-button value="1" style="width: 50%; text-align: center"> 同比 </a-radio-button>
+        <a-radio-button value="2" style="width: 50%; text-align: center"> 环比 </a-radio-button>
+      </a-radio-group>
+      <div ref="analysisGraphchart" style="width: 100%; height: 95%"></div>
+    </a-col>
+    <a-col :span="16" />
+  </a-row>
+</template>
+
+<script lang="ts">
+  import { defineComponent, onMounted, ref, inject, watch } from 'vue';
+  import * as echarts from 'echarts';
+
+  export default defineComponent({
+    name: 'AnalysisGraph',
+    setup() {
+      const mode = ref<String>('1');
+      let data = ref<any[]>([]);
+      interface PageData {
+        // 图表 表格数据
+        graphTableList: any[];
+        // 图表 表格表头
+        graphTableColumns: any[];
+        // 图表 图表数据
+        graphGraphList: any[];
+        // 分析 表格数据
+        analysisTableList: any[];
+        // 分析 图表数据
+        analysisGraphList: 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 changeMode = () => {};
+      const analysisGraphchart = ref(null);
+
+      let chartInstance: echarts.ECharts | null = null;
+
+      const draw = () => {
+        data.value = pageData.analysisGraphList;
+        if (data.value && data.value.length > 0) {
+          if (chartInstance) {
+            chartInstance.dispose();
+          }
+          chartInstance = echarts.init(analysisGraphchart.value);
+
+          var seriesdata = [];
+          var dateX = [];
+          // var legendList: string | any[] = [];
+          for (let i = 0; i < data.value.length; i++) {
+            dateX.push(data.value[i].name);
+
+            seriesdata.push({ value: data.value[i].value, label: data.value[i].labelRight });
+          }
+
+          var seriesList = [
+            {
+              name: data.value[0].energyType,
+              data: seriesdata,
+              type: 'bar',
+              label: {
+                show: true,
+                formatter: '{b}',
+              },
+            },
+          ];
+
+          const option = {
+            // tooltip: {
+            //   trigger: 'axis',
+            //   formatter: (params: any) => {
+            //     const date = params[0].name;
+            //     const values = params
+            //       .map((param: any) => {
+            //         const unit = data.value.find((d) => d.name === 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>`;
+            //   },
+            // },
+            yAxis: {
+              type: 'category',
+              axisLine: { show: false },
+              axisLabel: { show: false },
+              axisTick: { show: false },
+              splitLine: { show: false },
+              data: dateX,
+            },
+            xAxis: {
+              type: 'value',
+              position: 'top',
+              splitLine: {
+                lineStyle: {
+                  type: 'dashed',
+                },
+              },
+            },
+            series: seriesList,
+          };
+
+          chartInstance = echarts.init(analysisGraphchart.value);
+          chartInstance.setOption(option);
+        }
+      };
+      onMounted(() => {
+        draw();
+      });
+
+      // 下载图表
+      const downloadChart = () => {
+        if (chartInstance) {
+          const base64 = chartInstance.getDataURL({
+            type: 'png',
+            backgroundColor: '#fff',
+          });
+          const link = document.createElement('a');
+          link.href = base64;
+          link.download = 'chart.png';
+          link.click();
+        }
+      };
+
+      return {
+        analysisGraphchart,
+        downloadChart,
+        mode,
+        changeMode,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped></style>

hx-ai-intelligent/src/view/monitor/energyMonitor/analysisTable/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <a-table :columns="columns" :data-source="data" bordered />
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref, inject, watch, onMounted } from 'vue';
+
+  export default defineComponent({
+    name: 'AnalysisTable',
+    setup() {
+      const columns = [
+        {
+          title: '设备/节点',
+          dataIndex: 'key',
+        },
+        {
+          title: '统计值',
+          dataIndex: 'name',
+        },
+        {
+          title: '同比',
+          children: [
+            {
+              title: '△差值',
+              dataIndex: 'position',
+            },
+            {
+              title: '增长率',
+              dataIndex: 'unit',
+            },
+          ],
+        },
+        {
+          title: '环比',
+          children: [
+            {
+              title: '△差值',
+              dataIndex: 'position',
+            },
+            {
+              title: '增长率',
+              dataIndex: 'unit',
+            },
+          ],
+        },
+        {
+          title: '纵向对比',
+          children: [
+            {
+              title: '△差值',
+              dataIndex: 'position',
+            },
+            {
+              title: '增长率',
+              dataIndex: 'unit',
+            },
+          ],
+        },
+
+        {
+          title: '操作',
+          dataIndex: 'date',
+        },
+      ];
+      let data = ref<any[]>([]);
+
+      interface PageData {
+        // 图表 表格数据
+        graphTableList: any[];
+        // 图表 表格表头
+        graphTableColumns: any[];
+        // 图表 图表数据
+        graphGraphList: any[];
+        // 分析 表格数据
+        analysisTableList: any[];
+        // 分析 图表数据
+        analysisGraphList: any[];
+      }
+      const pageData = inject<PageData>('pageData');
+
+      if (!pageData) {
+        throw new Error('pageData is not provided');
+      }
+      // 监听 pageData 的变化
+      watch(
+        () => pageData as PageData,
+        (_newValue, _oldValue) => {
+          data.value = pageData.analysisTableList;
+        },
+        { deep: true },
+      );
+      onMounted(() => {
+        data.value = pageData.analysisTableList;
+      });
+      return {
+        data,
+        columns,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped></style>

hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue

@@ -11,9 +11,16 @@
     setup() {
       let data = ref<any[]>([]);
       interface PageData {
+        // 图表 表格数据
         graphTableList: any[];
+        // 图表 表格表头
         graphTableColumns: any[];
+        // 图表 图表数据
         graphGraphList: any[];
+        // 分析 表格数据
+        analysisTableList: any[];
+        // 分析 图表数据
+        analysisGraphList: any[];
       }
       const pageData = inject<PageData>('pageData');
 

hx-ai-intelligent/src/view/monitor/energyMonitor/graphTable/index.vue

@@ -13,9 +13,16 @@
       let columns = ref<TableColumnType[]>([]);
 
       interface PageData {
+        // 图表 表格数据
         graphTableList: any[];
+        // 图表 表格表头
         graphTableColumns: any[];
+        // 图表 图表数据
         graphGraphList: any[];
+        // 分析 表格数据
+        analysisTableList: any[];
+        // 分析 图表数据
+        analysisGraphList: any[];
       }
       const pageData = inject<PageData>('pageData');
 

hx-ai-intelligent/src/view/monitor/energyMonitor/index.vue

@@ -9,9 +9,16 @@
 
   // 创建一个响应式对象
   const pageData = reactive({
+    // 图表 表格数据
     graphTableList: [],
+    // 图表 表格表头
     graphTableColumns: [],
+    // 图表 图表数据
     graphGraphList: [],
+    // 分析 表格数据
+    analysisTableList: [],
+    // 分析 图表数据
+    analysisGraphList: [],
   });
 
   // 使用 provide 函数来提供这个响应式对象

hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue

@@ -23,6 +23,10 @@
           <graph-graph ref="graphRef" v-if="isGraph" />
           <environment-table ref="tableRef" v-else />
         </div>
+        <div v-else style="height: 90%">
+          <analysis-graph ref="graphRef" v-if="isGraph" />
+          <analysis-table ref="analysisTableRef" v-else />
+        </div>
       </div>
     </a-col>
   </a-row>
@@ -33,12 +37,15 @@
   import tree from './tree/index.vue';
   import graphGraph from './graphGraph/index.vue';
   import environmentTable from './graphTable/index.vue';
+  import analysisTable from './analysisTable/index.vue';
+  import analysisGraph from './analysisGraph/index.vue';
 
   const iconName = ref('biaoge');
 
   const treeRef = ref();
   const graphRef = ref();
   const tableRef = ref();
+  const analysisTableRef = ref();
 
   let isGraph = ref(true);
   const activeKey = ref('1');

hx-ai-intelligent/src/view/monitor/energyMonitor/table/index.vue

@@ -1,166 +0,0 @@
-<template>
-  <a-table :columns="columns" :data-source="data" bordered />
-</template>
-
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import type { TableColumnType } from 'ant-design-vue';
-
-  const data = [
-    {
-      key: '1',
-      name: 'AC_002（暖通电表）',
-      position: 'A 相电压',
-      unit: 'V',
-      date: '2023-12-01',
-      '1:00': '3626',
-    },
-    {
-      key: '1',
-      name: 'AC_002（暖通电表）',
-      position: 'A 相电压',
-      unit: 'V',
-      date: '2023-12-01',
-      '1:00': '3626',
-    },
-    {
-      key: '2',
-      name: 'AC_003（照明电表）',
-      position: 'A 相电压',
-      unit: 'V',
-      date: '2023-12-01',
-      '1:00': '3626',
-    },
-    {
-      key: '2',
-      name: 'AC_003（照明电表）',
-      position: 'A 相电压',
-      unit: 'V',
-      date: '2023-12-01',
-      '1:00': '3626',
-    },
-    {
-      key: '3',
-      name: 'AC_004（给排水电表）',
-      position: 'A 相电压',
-      unit: 'V',
-      date: '2023-12-01',
-      '1:00': '3626',
-    },
-  ];
-
-  export default defineComponent({
-    name: 'EnvironmentTable',
-    setup() {
-      const getRowSpan = (dataIndex: string, record, data, dependents: string[] = []) => {
-        let rowSpan = 1;
-        for (let i = data.indexOf(record) + 1; i < data.length; i++) {
-          let shouldMerge = true;
-          for (const dependent of dependents) {
-            if (data[i][dependent] !== record[dependent]) {
-              shouldMerge = false;
-              break;
-            }
-          }
-          if (shouldMerge && data[i][dataIndex] === record[dataIndex]) {
-            rowSpan++;
-          } else {
-            break;
-          }
-        }
-        return rowSpan;
-      };
-
-      const columns: TableColumnType[] = [
-        {
-          title: '序号',
-          dataIndex: 'key',
-          customCell: (record, rowIndex) => {
-            const rowSpan = getRowSpan('name', record, data);
-            if (rowIndex != 0 && data[rowIndex - 1].key == record.key) {
-              return {
-                rowSpan: 0,
-                colSpan: 0,
-              };
-            }
-            return {
-              rowSpan: rowSpan,
-            };
-          },
-        },
-        {
-          title: '设备名称',
-          dataIndex: 'name',
-          customCell: (record, rowIndex) => {
-            const rowSpan = getRowSpan('name', record, data);
-            if (rowIndex != 0 && data[rowIndex - 1].name == record.name) {
-              return {
-                rowSpan: 0,
-                colSpan: 0,
-              };
-            }
-            return {
-              rowSpan: rowSpan,
-            };
-          },
-        },
-        {
-          title: '设备点位',
-          dataIndex: 'position',
-          customCell: (record, rowIndex) => {
-            const rowSpan = getRowSpan('position', record, data, ['name']);
-            if (
-              rowIndex != 0 &&
-              data[rowIndex - 1].name == record.name &&
-              data[rowIndex - 1].position == record.position
-            ) {
-              return {
-                rowSpan: 0,
-                colSpan: 0,
-              };
-            }
-            return {
-              rowSpan: rowSpan,
-            };
-          },
-        },
-        {
-          title: '计量单位',
-          dataIndex: 'unit',
-          customCell: (record, rowIndex) => {
-            const rowSpan = getRowSpan('unit', record, data, ['name', 'position']);
-            if (
-              rowIndex != 0 &&
-              data[rowIndex - 1].name == record.name &&
-              data[rowIndex - 1].position == record.position &&
-              data[rowIndex - 1].unit == record.unit
-            ) {
-              return {
-                rowSpan: 0,
-                colSpan: 0,
-              };
-            }
-            return {
-              rowSpan: rowSpan,
-            };
-          },
-        },
-        {
-          title: '日期',
-          dataIndex: 'date',
-        },
-        {
-          title: '1:00',
-          dataIndex: '1:00',
-        },
-      ];
-
-      return {
-        data,
-        columns,
-      };
-    },
-  });
-</script>
-
-<style lang="less" scoped></style>

hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue

@@ -15,9 +15,9 @@
       v-model:value="mode"
       @change="changeMode"
       style="padding-bottom: 10px; width: 100%">
-      <a-radio-button value="1" style="width: 50%; text-align: center" :disabled="shebei"
+      <a-radio-button value="1" style="width: 50%; text-align: center" :disabled="shebei">
-        >设备</a-radio-button
+        设备
-      >
+      </a-radio-button>
       <a-radio-button value="2" style="width: 50%; text-align: center">节点</a-radio-button>
     </a-radio-group>
     <a-input
@@ -130,9 +130,16 @@
         ];
       };
       interface PageData {
+        // 图表 表格数据
         graphTableList: any[];
+        // 图表 表格表头
         graphTableColumns: any[];
+        // 图表 图表数据
         graphGraphList: any[];
+        // 分析 表格数据
+        analysisTableList: any[];
+        // 分析 图表数据
+        analysisGraphList: any[];
       }
       const pageData = inject<PageData>('pageData');
       if (!pageData) {
@@ -289,6 +296,72 @@
             ],
           },
         ];
+        pageData.analysisTableList = [
+          {
+            key: '1',
+            name: 'AC_002（暖通电表）',
+            position: 'A 相电压',
+            unit: 'V',
+            date: '2023-12-01',
+          },
+          {
+            key: '1',
+            name: 'AC_002（暖通电表）',
+            position: 'A 相电压',
+            unit: 'V',
+            date: '2023-12-01',
+          },
+          {
+            key: '2',
+            name: 'AC_003（照明电表）',
+            position: 'A 相电压',
+            unit: 'V',
+            date: '2023-12-01',
+          },
+          {
+            key: '2',
+            name: 'AC_003（照明电表）',
+            position: 'A 相电压',
+            unit: 'V',
+            date: '2023-12-01',
+          },
+          {
+            key: '3',
+            name: 'AC_004（给排水电表）',
+            position: 'A 相电压',
+            unit: 'V',
+            date: '2023-12-01',
+          },
+        ];
+        pageData.analysisGraphList = [
+          {
+            name: 'AC_002（暖通电表）',
+            value: -21,
+            energyType: selectedValue.value,
+            unit: 'V',
+            labelRight: {
+              position: 'right',
+            },
+          },
+          {
+            name: 'AC_003（照明电表）',
+            value: 36,
+            energyType: selectedValue.value,
+            unit: 'V',
+            labelRight: {
+              position: 'insideLeft',
+            },
+          },
+          {
+            name: 'AC_004（给排水电表）',
+            value: -5,
+            energyType: selectedValue.value,
+            unit: 'V',
+            labelRight: {
+              position: 'right',
+            },
+          },
+        ];
       };
       const getSelect11 = () => {
         pageData.graphTableList = [