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

2. 监控中心 - 能耗监测 - 分析图表前台页面
2024-07-11 17:29:23 +08:00
parent 4dea1ff14d
commit 37b877b220
8 changed files with 362 additions and 169 deletions
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/analysisTable/index.vue
+++ b/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>