From a698c69b7c0d099e6bcf80a7b6cf1f3f062354aa Mon Sep 17 00:00:00 2001
From: fks-yangshouda <yangshoudamhy@163.com>
Date: Thu, 11 Jul 2024 08:45:20 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E4=B8=AD=E5=BF=83=20-=20?=
 =?UTF-8?q?=E8=83=BD=E8=80=97=E7=9B=91=E6=B5=8B=20-=20=E5=9B=BE=E8=A1=A8?=
 =?UTF-8?q?=20=E5=B7=A6=E4=BE=A7=E6=A0=91=E5=92=8C=E5=8F=B3=E4=BE=A7?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E8=81=94=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/view/monitor/deviceMonitor/tree/index.vue  | 117 +---
 .../monitor/energyMonitor/graphGraph/index.vue     | 158 ++---
 .../monitor/energyMonitor/graphTable/index.vue     | 122 ++++
 .../src/view/monitor/energyMonitor/index.vue       |  91 +--
 .../src/view/monitor/energyMonitor/page.vue        |  88 +++
 .../src/view/monitor/energyMonitor/tree/index.vue  | 662 +++++++++++++++------
 6 files changed, 765 insertions(+), 473 deletions(-)
 create mode 100644 hx-ai-intelligent/src/view/monitor/energyMonitor/graphTable/index.vue
 create mode 100644 hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue

diff --git a/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue b/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
index 9b858e9..a3c572f 100644
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
@@ -11,18 +11,16 @@
       :tree-data="treeData1"
       @change="changeDeviceType" />
 
-    <a-tree
-      v-model:expandedKeys="expandedKeys"
-      v-model:selectedKeys="selectedKeys"
-      v-model:checkedKeys="checkedKeys"
-      checkable
-      style="width: 100%; margin-bottom: 10px"
-      :tree-data="treeData2">
-      <!-- <template #title="{ title, key }">
-        <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
-        <template v-else>{{ title }}</template>
-      </template> -->
-    </a-tree>
+    <a-spin :spinning="treeLoading">
+      <a-tree
+        v-model:expandedKeys="expandedKeys"
+        v-model:selectedKeys="selectedKeys"
+        v-model:checkedKeys="checkedKeys"
+        checkable
+        :height="340"
+        style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
+        :tree-data="treeData2" />
+    </a-spin>
 
     <div class="fixed-bottom">
       <a-divider />
@@ -56,18 +54,18 @@
 </template>
 
 <script lang="ts">
-  import type { TreeSelectProps, TreeProps, SelectProps } from 'ant-design-vue';
+  import type { TreeSelectProps, SelectProps } from 'ant-design-vue';
   import { defineComponent, ref, onMounted } from 'vue';
   import { Dayjs } from 'dayjs';
   import { inject } from 'vue';
   import { http } from '/nerv-lib/util';
   import { device } from '/@/api/deviceManage';
-  // import { device } from '/@/api/deviceManage';
 
   export default defineComponent({
     // eslint-disable-next-line vue/multi-word-component-names
     name: 'Tree',
     setup() {
+      const treeLoading = ref(false);
       const treeLine = ref(true);
       const showLeafIcon = ref(false);
       const value = ref<string>();
@@ -76,90 +74,31 @@
       const result = JSON.parse(sessionStorage.getItem('ORGID')!);
       orgId.value = result;
 
-      const treeData1 = ref<TreeSelectProps['treeData']>([
-        // {
-        //   title: '3.电梯',
-        //   value: '3',
-        //   children: [
-        //     {
-        //       title: '301.扶梯',
-        //       value: '301',
-        //     },
-        //     {
-        //       title: '302.直梯',
-        //       value: '302',
-        //     },
-        //   ],
-        // },
-        // {
-        //   title: '4.冷热源',
-        //   value: '4',
-        //   children: [
-        //     {
-        //       title: '401.冷水机组',
-        //       value: '401',
-        //     },
-        //     {
-        //       title: '402.热泵机组',
-        //       value: '402',
-        //     },
-        //     {
-        //       title: '403.锅炉',
-        //       value: '403',
-        //     },
-        //     {
-        //       title: '404.水处理机组',
-        //       value: '404',
-        //     },
-        //   ],
-        // },
-      ]);
+      const treeData1 = ref<TreeSelectProps['treeData']>([]);
 
       http.post(device.queryDeviceTree, { orgId: orgId.value }).then((res) => {
         treeData1.value = formatTreeData(res.data);
       });
 
-      const formatTreeData = (data) => {
-        return data.map((item) => ({
+      const formatTreeData = (data: any) => {
+        return data.map((item: any) => ({
           title: item.code + '.' + item.deviceType,
           value: item.code,
           children: item.children ? formatTreeData(item.children) : [],
         }));
       };
 
-      // const treeData2: TreeProps['treeData'] = [
-      const treeData2 = ref<TreeSelectProps['treeData']>([
-        // {
-        //   title: 'AC_001(总电表)',
-        //   key: '1',
-        //   children: [
-        //     {
-        //       title: 'AC_002(暖通电表)',
-        //       key: '2',
-        //     },
-        //     {
-        //       title: 'AC_003(照明电表)',
-        //       key: '3',
-        //     },
-        //     {
-        //       title: 'AC_004(给排水电表)',
-        //       key: '4',
-        //     },
-        //     {
-        //       title: 'AC_005(通风电表)',
-        //       key: '5',
-        //     },
-        //     {
-        //       title: 'AC_006(电动门电表)',
-        //       key: '6',
-        //     },
-        //   ],
-        // },
-      ]);
+      const treeData2 = ref<TreeSelectProps['treeData']>([]);
 
-      const changeDeviceType = (val, label, extra) => {
+      const changeDeviceType = (val: any, label: any) => {
+        treeLoading.value = true;
         http
-          .post(device.queryDevicePage, { code: val, orgId: orgId.value, pageNum: 1, pageSize: 10 })
+          .post(device.queryDevicePage, {
+            code: val,
+            orgId: orgId.value,
+            pageNum: 1,
+            pageSize: 1000,
+          })
           .then((res) => {
             if (!val) {
               val = '999999999';
@@ -174,6 +113,9 @@
             let a: TreeSelectProps['treeData'] = [{ title: label[0], key: val, children: records }];
             treeData2.value = a;
             expandedKeys.value = [val];
+          })
+          .finally(() => {
+            treeLoading.value = false;
           });
       };
 
@@ -531,11 +473,9 @@
 
       onMounted(() => {
         getDianWeiList();
-        changeDeviceType();
+        changeDeviceType(null, null);
       });
 
-      // const dateFormat = 'YYYY-MM-DD';
-
       return {
         treeLine,
         showLeafIcon,
@@ -560,6 +500,7 @@
         hackValue,
         pageData,
         changeDeviceType,
+        treeLoading,
       };
     },
   });
diff --git a/hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue b/hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue
index 83bfd0a..9145e02 100644
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue
@@ -3,129 +3,62 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, onMounted, ref } from 'vue';
+  import { defineComponent, onMounted, ref, inject, 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: 'GraphGraph',
     setup() {
+      let data = ref<any[]>([]);
+      interface PageData {
+        graphTableList: any[];
+        graphTableColumns: any[];
+        graphGraphList: 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 graphGraphchart = ref(null);
 
       let chartInstance: echarts.ECharts | null = null;
-      onMounted(() => {
+
+      const draw = () => {
+        data.value = pageData.graphGraphList;
+        if (chartInstance) {
+          chartInstance.dispose();
+        }
         chartInstance = echarts.init(graphGraphchart.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);
             }
           }
         }
@@ -142,7 +75,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>
@@ -159,27 +92,14 @@
           yAxis: {
             type: 'value',
           },
-          // dataZoom: [
-          //   {
-          //     height: 10,
-          //     start: 0,
-          //     end: 100,
-          //     handleSize: '300%', // 设置滑块的大小
-          //     bottom: 15,
-          //   },
-          // ],
-          // toolbox: {
-          //   show: true,
-          //   feature: {
-          //     mark: { show: true },
-          //     saveAsImage: { show: true },
-          //   },
-          // },
           series: seriesList,
         };
 
         chartInstance = echarts.init(graphGraphchart.value);
         chartInstance.setOption(option);
+      };
+      onMounted(() => {
+        draw();
       });
 
       // 下载图表
diff --git a/hx-ai-intelligent/src/view/monitor/energyMonitor/graphTable/index.vue b/hx-ai-intelligent/src/view/monitor/energyMonitor/graphTable/index.vue
new file mode 100644
index 0000000..28d281b
--- /dev/null
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/graphTable/index.vue
@@ -0,0 +1,122 @@
+<template>
+  <a-table :columns="columns" :data-source="data" bordered />
+</template>
+
+<script lang="ts">
+  import { defineComponent, watch, inject, ref, onMounted } from 'vue';
+  import type { TableColumnType } from 'ant-design-vue';
+
+  export default defineComponent({
+    name: 'EnvironmentTable',
+    setup() {
+      let data = ref<any[]>([]);
+      let columns = ref<TableColumnType[]>([]);
+
+      interface PageData {
+        graphTableList: any[];
+        graphTableColumns: any[];
+        graphGraphList: 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.graphTableList;
+
+          let columnA: any[] = [...column];
+          columnA.push(...pageData.graphTableColumns);
+          columns.value = columnA;
+          // pageData.graphList;
+          // 执行你的逻辑代码
+        },
+        { deep: true },
+      );
+
+      const getRowSpan = (dataIndex: string, record: any, data: any, 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 column: TableColumnType[] = [
+        {
+          title: '设备/组名',
+          dataIndex: 'name',
+          customCell: (record, rowIndex) => {
+            if (rowIndex == undefined) {
+              return {
+                rowSpan: 0,
+                colSpan: 0,
+              };
+            }
+            const rowSpan = getRowSpan('name', record, data.value);
+            if (rowIndex != 0 && data.value[rowIndex - 1].name == record.name) {
+              return {
+                rowSpan: 0,
+                colSpan: 0,
+              };
+            }
+            return {
+              rowSpan: rowSpan,
+            };
+          },
+        },
+        {
+          title: '参数名称',
+          dataIndex: 'paramName',
+          customCell: (record, rowIndex) => {
+            if (rowIndex == undefined) {
+              return {
+                rowSpan: 0,
+                colSpan: 0,
+              };
+            }
+            const rowSpan = getRowSpan('paramName', record, data.value, ['name']);
+            if (rowIndex != 0 && data.value[rowIndex - 1].name == record.name) {
+              return {
+                rowSpan: 0,
+                colSpan: 0,
+              };
+            }
+            return {
+              rowSpan: rowSpan,
+            };
+          },
+        },
+      ];
+
+      onMounted(() => {
+        data.value = pageData.graphTableList;
+
+        let columnA: any[] = [...column];
+        columnA.push(...pageData.graphTableColumns);
+        columns.value = columnA;
+      });
+      return {
+        data,
+        column,
+        columns,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped></style>
diff --git a/hx-ai-intelligent/src/view/monitor/energyMonitor/index.vue b/hx-ai-intelligent/src/view/monitor/energyMonitor/index.vue
index aa1e1c8..705aa07 100644
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/index.vue
@@ -1,88 +1,19 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <a-tabs v-model:activeKey="activeKey" style="height: 8%">
-    <a-tab-pane key="1" tab="图表" />
-    <a-tab-pane key="2" tab="分析" />
-  </a-tabs>
-  <a-row type="flex" style="height: 92%">
-    <a-col :span="4">
-      <div style="padding: 0 20px; width: 100%; height: 100%">
-        <tree ref="treeRef" />
-      </div>
-    </a-col>
-    <a-col :span="20">
-      <div style="width: 100%; height: 100%">
-        <div class="ns-right-title">
-          <span>统计数据</span>
-          <div class="button">
-            <ns-icon name="xiazai" size="18" style="margin-right: 10px" @click="downloadChart" />
-            <ns-icon :name="iconName" size="18" style="margin-right: 10px" @click="change" />
-          </div>
-        </div>
-        <div v-if="activeKey == '1'" style="height: 90%">
-          <graph-graph ref="graphRef" v-if="isGraph" />
-          <environment-table ref="tableRef" v-else />
-        </div>
-      </div>
-    </a-col>
-  </a-row>
+  <page />
 </template>
 
-<script lang="ts" setup>
-  import { ref } from 'vue';
-  import tree from './tree/index.vue';
-  import graphGraph from './graphGraph/index.vue';
-  import environmentTable from './table/index.vue';
+<script setup>
+  import { reactive, provide } from 'vue';
+  import page from './page.vue';
 
-  const iconName = ref('biaoge');
-
-  const treeRef = ref();
-  const graphRef = ref();
-  const tableRef = ref();
-
-  let isGraph = ref(true);
-  const activeKey = ref('1');
-
-  defineOptions({
-    name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效
+  // 创建一个响应式对象
+  const pageData = reactive({
+    graphTableList: [],
+    graphTableColumns: [],
+    graphGraphList: [],
   });
 
-  const downloadChart = () => {
-    if (activeKey.value == '1' && isGraph) {
-      if (graphRef.value) {
-        graphRef.value.downloadChart();
-      }
-    }
-  };
-
-  function change() {
-    isGraph.value = !isGraph.value;
-    if (iconName.value == 'biaoge') {
-      iconName.value = 'bingtu';
-    } else {
-      iconName.value = 'biaoge';
-    }
-  }
+  // 使用 provide 函数来提供这个响应式对象
+  provide('pageData', pageData);
 </script>
-
-<style lang="less" scoped>
-  .ns-right-title {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    user-select: text;
-    margin-bottom: 5px;
-    padding-bottom: 10px;
-    padding-top: 10px;
-    border-bottom: 1px solid #e9e9e9;
-
-    > span {
-      padding-left: 10px;
-      line-height: 20px;
-    }
-  }
-  .button {
-    display: inline-block;
-    padding-right: 10px;
-  }
-</style>
diff --git a/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue b/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
new file mode 100644
index 0000000..d4aa62b
--- /dev/null
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
@@ -0,0 +1,88 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <a-tabs v-model:activeKey="activeKey" style="height: 8%">
+    <a-tab-pane key="1" tab="图表" />
+    <a-tab-pane key="2" tab="分析" />
+  </a-tabs>
+  <a-row type="flex" style="height: 92%">
+    <a-col :span="4">
+      <div style="padding: 0 20px; width: 100%; height: 100%">
+        <tree ref="treeRef" />
+      </div>
+    </a-col>
+    <a-col :span="20">
+      <div style="width: 100%; height: 100%">
+        <div class="ns-right-title">
+          <span>统计数据</span>
+          <div class="button">
+            <ns-icon name="xiazai" size="18" style="margin-right: 10px" @click="downloadChart" />
+            <ns-icon :name="iconName" size="18" style="margin-right: 10px" @click="change" />
+          </div>
+        </div>
+        <div v-if="activeKey == '1'" style="height: 90%">
+          <graph-graph ref="graphRef" v-if="isGraph" />
+          <environment-table ref="tableRef" v-else />
+        </div>
+      </div>
+    </a-col>
+  </a-row>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import tree from './tree/index.vue';
+  import graphGraph from './graphGraph/index.vue';
+  import environmentTable from './graphTable/index.vue';
+
+  const iconName = ref('biaoge');
+
+  const treeRef = ref();
+  const graphRef = ref();
+  const tableRef = ref();
+
+  let isGraph = ref(true);
+  const activeKey = ref('1');
+
+  defineOptions({
+    name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效
+  });
+
+  const downloadChart = () => {
+    if (activeKey.value == '1' && isGraph) {
+      if (graphRef.value) {
+        graphRef.value.downloadChart();
+      }
+    }
+  };
+
+  function change() {
+    isGraph.value = !isGraph.value;
+    if (iconName.value == 'biaoge') {
+      iconName.value = 'bingtu';
+    } else {
+      iconName.value = 'biaoge';
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .ns-right-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    user-select: text;
+    margin-bottom: 5px;
+    padding-bottom: 10px;
+    padding-top: 10px;
+    border-bottom: 1px solid #e9e9e9;
+
+    > span {
+      padding-left: 10px;
+      line-height: 20px;
+    }
+  }
+  .button {
+    display: inline-block;
+    padding-right: 10px;
+  }
+</style>
diff --git a/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue b/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
index 15f1af3..ffb8614 100644
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
@@ -4,38 +4,38 @@
     <div class="ns-tree-title">
       <span>数据点位</span>
     </div>
-    <!-- <a-tree-select
-      v-model:value="value"
-      style="width: 100%"
-
-      :tree-line="treeLine && { showLeafIcon }"
-      :tree-data="treeData1"
-    >
-    </a-tree-select> -->
     <a-select
       ref="select"
       v-model:value="selectedValue"
       placeholder="请选择能耗类型"
       style="width: 100%; margin-bottom: 10px"
-      :options="options1" />
-
+      :options="options1"
+      @change="changeEnergyType" />
     <a-radio-group
       v-model:value="mode"
       @change="changeMode"
       style="padding-bottom: 10px; width: 100%">
-      <a-radio-button value="1" style="width: 50%; text-align: center">设备</a-radio-button>
+      <a-radio-button value="1" style="width: 50%; text-align: center" :disabled="shebei"
+        >设备</a-radio-button
+      >
       <a-radio-button value="2" style="width: 50%; text-align: center">节点</a-radio-button>
     </a-radio-group>
-    <a-input v-model:value="value" placeholder="请输入设备名称" v-if="mode == '1'" />
-    <a-input v-model:value="value" placeholder="请输入节点名称" v-else />
-    <a-tree
-      v-model:expandedKeys="expandedKeys"
-      v-model:selectedKeys="selectedKeys"
-      v-model:checkedKeys="checkedKeys"
-      checkable
-      :height="300"
-      style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
-      :tree-data="treeData2" />
+    <a-input
+      v-model:value="deviceName"
+      placeholder="请输入设备名称"
+      v-if="mode == '1'"
+      @change="changeMode" />
+    <a-input v-model:value="pointName" placeholder="请输入节点名称" v-else @change="changeMode" />
+    <a-spin :spinning="treeLoading">
+      <a-tree
+        v-model:expandedKeys="expandedKeys"
+        v-model:selectedKeys="selectedKeys"
+        v-model:checkedKeys="checkedKeys"
+        checkable
+        :height="300"
+        style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
+        :tree-data="treeData2" />
+    </a-spin>
 
     <div class="fixed-bottom">
       <a-divider />
@@ -52,193 +52,482 @@
         @calendarChange="onCalendarChange"
         style="width: 100%; margin-bottom: 10px"
         :placeholder="['请选择日期', '请选择日期']" />
-      <a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect"
-        >查询</a-button
-      >
+      <a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect">
+        查询
+      </a-button>
+      <!-- <a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect11">
+        模拟不同数据查询
+      </a-button> -->
     </div>
   </div>
 </template>
 
 <script lang="ts">
-  import type { TreeSelectProps, TreeProps, SelectProps } from 'ant-design-vue';
-  import { defineComponent, ref, onMounted } from 'vue';
+  import type { TreeSelectProps, SelectProps } from 'ant-design-vue';
+  import { defineComponent, ref, onMounted, inject } from 'vue';
   import { Dayjs } from 'dayjs';
+  import { http } from '/nerv-lib/util';
+  import { device, group } from '/@/api/deviceManage';
+  import { dict } from '/@/api';
 
   export default defineComponent({
     // eslint-disable-next-line vue/multi-word-component-names
     name: 'Tree',
     setup() {
-      // const treeLine = ref(true);
-      // const showLeafIcon = ref(false);
       const value = ref<string>();
+      const deviceName = ref<string>();
+      const pointName = ref<string>();
+      const treeLoading = ref(false);
+      const shebei = ref(false);
 
-      const treeData1 = ref<TreeSelectProps['treeData']>([
-        {
-          title: '3.电梯',
-          value: '3',
-          children: [
-            {
-              title: '301.扶梯',
-              value: '301',
-            },
-            {
-              title: '302.直梯',
-              value: '302',
-            },
-          ],
-        },
-        {
-          title: '4.冷热源',
-          value: '4',
-          children: [
-            {
-              title: '401.冷水机组',
-              value: '401',
-            },
-            {
-              title: '402.热泵机组',
-              value: '402',
-            },
-            {
-              title: '403.锅炉',
-              value: '403',
-            },
-            {
-              title: '404.水处理机组',
-              value: '404',
-            },
-          ],
-        },
-      ]);
-
-      const expandedKeys = ref<string[]>(['0-0-0', '0-0-1']);
-      const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
-      const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);
+      // 树打开节点
+      const expandedKeys = ref<string[]>([]);
+      // 树勾选节点
+      const selectedKeys = ref<string[]>([]);
+      // 树点击节点
+      const checkedKeys = ref<string[]>([]);
 
+      // 能耗类型list
       const options1 = ref<SelectProps['options']>([]);
-      const options2 = ref<SelectProps['options']>([
-        {
-          value: '1',
-          label: '5分钟',
-        },
-        {
-          value: '2',
-          label: '10分钟',
-        },
-        {
-          value: '3',
-          label: '30分钟',
-        },
-        {
-          value: '4',
-          label: '1小时',
-        },
-      ]);
+      // 采集频率list
+      const options2 = ref<SelectProps['options']>([]);
       const mode = ref<String>('1');
+      // 能耗类型
       const selectedValue = ref<string | undefined>();
+      // 采集频率
       const frequencyValue = ref<string | undefined>();
+      // 时间
       const dateRange = ref<[Dayjs, Dayjs] | undefined>();
 
-      const getDianWeiList = () => {
-        console.log('getDianWeiList 被调用');
-        options1.value = [
-          { value: '1', label: '用电量' },
-          { value: '2', label: '用水量' },
-          { value: '3', label: '碳排量' },
-          { value: '4', label: '标煤量' },
+      // 页面初始化参数
+      const getOptionsList = async () => {
+        try {
+          const options = await dict({ params: { dicKey: 'ENERGY_TYPE' } });
+          options.data.data.forEach((item: any) => {
+            (item.value = item.cnValue), (item.label = item.cnValue);
+          });
+          options1.value = options.data.data; // 根据返回数据的结构来更新 options1.value
+        } catch (error) {
+          console.error('Failed to fetch options:', error);
+        }
+        options2.value = [
+          {
+            value: '1',
+            label: '5分钟',
+          },
+          {
+            value: '2',
+            label: '10分钟',
+          },
+          {
+            value: '3',
+            label: '30分钟',
+          },
+          {
+            value: '4',
+            label: '1小时',
+          },
         ];
       };
+      interface PageData {
+        graphTableList: any[];
+        graphTableColumns: any[];
+        graphGraphList: any[];
+      }
+      const pageData = inject<PageData>('pageData');
+      if (!pageData) {
+        throw new Error('pageData is not provided');
+      }
 
-      const getSelect = () => {};
+      // 选择能耗类型
+      const changeEnergyType = () => {
+        if (selectedValue.value == '8') {
+          shebei.value = true;
+          mode.value = '2';
+        } else {
+          shebei.value = false;
+        }
+        changeMode();
+      };
+      const getSelect = () => {
+        pageData.graphTableList = [
+          {
+            key: '1',
+            name: 'AC_002（暖通电表）',
+            paramName: '用电量(kWh)',
+            date: '2023-12-01',
+            '1:00': '3626',
+          },
+          {
+            key: '1',
+            name: 'AC_002（暖通电表）',
+            paramName: '用电量(kWh)',
+            date: '2023-12-01',
+            '1:00': '3626',
+          },
+          {
+            key: '2',
+            name: 'AC_003（照明电表）',
+            paramName: '用电量(kWh)',
+            date: '2023-12-01',
+            '1:00': '3626',
+          },
+          {
+            key: '2',
+            name: 'AC_003（照明电表）',
+            paramName: '用电量(kWh)',
+            date: '2023-12-01',
+            '1:00': '3626',
+          },
+          {
+            key: '3',
+            name: 'AC_004（给排水电表）',
+            paramName: '用电量(kWh)',
+            date: '2023-12-01',
+            '1:00': '3626',
+          },
+        ];
+        pageData.graphTableColumns = [
+          {
+            title: '日期',
+            dataIndex: 'date',
+          },
+          {
+            title: '1:00',
+            dataIndex: '1:00',
+          },
+        ];
+        pageData.graphGraphList = [
+          {
+            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',
+              },
+            ],
+          },
+        ];
+      };
+      const getSelect11 = () => {
+        pageData.graphTableList = [
+          {
+            key: '1',
+            name: 'AC_002（暖通电表）',
+            paramName: '用电量(kWh)',
+            date: '2023-12-01',
+            '1:00': '3626',
+            '2:00': '3626',
+          },
+          {
+            key: '1',
+            name: 'AC_002（暖通电表）',
+            paramName: '用电量(kWh)',
+            date: '2023-12-01',
+            '1:00': '3626',
+            '2:00': '3626',
+          },
+          {
+            key: '2',
+            name: 'AC_003（照明电表）',
+            paramName: '用电量(kWh)',
+            date: '2023-12-01',
+            '1:00': '3626',
+            '2:00': '3626',
+          },
+          {
+            key: '2',
+            name: 'AC_003（照明电表）',
+            paramName: '用电量(kWh)',
+            date: '2023-12-01',
+            '1:00': '3626',
+            '2:00': '3626',
+          },
+          {
+            key: '3',
+            name: 'AC_004（给排水电表）',
+            paramName: '用电量(kWh)',
+            date: '2023-12-01',
+            '1:00': '3626',
+            '2:00': '3626',
+          },
+        ];
+        pageData.graphTableColumns = [
+          {
+            title: '日期',
+            dataIndex: 'date',
+          },
+          {
+            title: '1:00',
+            dataIndex: '1:00',
+          },
+          {
+            title: '2:00',
+            dataIndex: '2:00',
+          },
+        ];
+        pageData.graphGraphList = [
+          {
+            date: '2023-12-01 0:00',
+            unit: 'V',
+            data: [
+              {
+                name: 'AC_002（暖通电表）',
+                value: '21',
+              },
+              {
+                name: 'AC_003（照明电表）',
+                value: '36',
+              },
+              {
+                name: 'AC_004（给排水电表）',
+                value: '5',
+              },
+              {
+                name: 'AC_005（333333333）',
+                value: '22',
+              },
+            ],
+          },
+          {
+            date: '2023-12-02 0:00',
+            unit: 'V',
+            data: [
+              {
+                name: 'AC_002（暖通电表）',
+                value: '26',
+              },
+              {
+                name: 'AC_003（照明电表）',
+                value: '25',
+              },
+              {
+                name: 'AC_004（给排水电表）',
+                value: '47',
+              },
+              {
+                name: 'AC_005（333333333）',
+                value: '28',
+              },
+            ],
+          },
+          {
+            date: '2023-12-03 0:00',
+            unit: 'V',
+            data: [
+              {
+                name: 'AC_002（暖通电表）',
+                value: '18',
+              },
+              {
+                name: 'AC_003（照明电表）',
+                value: '22',
+              },
+              {
+                name: 'AC_004（给排水电表）',
+                value: '26',
+              },
+              {
+                name: 'AC_005（333333333）',
+                value: '44',
+              },
+            ],
+          },
+          {
+            date: '2023-12-04 0:00',
+            unit: 'V',
+            data: [
+              {
+                name: 'AC_002（暖通电表）',
+                value: '40',
+              },
+              {
+                name: 'AC_003（照明电表）',
+                value: '15',
+              },
+              {
+                name: 'AC_004（给排水电表）',
+                value: '12',
+              },
+              {
+                name: 'AC_005（333333333）',
+                value: '26',
+              },
+            ],
+          },
+          {
+            date: '2023-12-05 0:00',
+            unit: 'V',
+            data: [
+              {
+                name: 'AC_002（暖通电表）',
+                value: '15',
+              },
+              {
+                name: 'AC_003（照明电表）',
+                value: '18',
+              },
+              {
+                name: 'AC_004（给排水电表）',
+                value: '15',
+              },
+              {
+                name: 'AC_005（333333333）',
+                value: '35',
+              },
+            ],
+          },
+        ];
+      };
 
-      const treeData2 = ref<TreeProps['treeData']>([]);
+      const orgId = ref('');
+      const result = JSON.parse(sessionStorage.getItem('ORGID')!);
+      orgId.value = result;
+      const treeData2 = ref<TreeSelectProps['treeData']>([]);
+      // 切换树结构
       const changeMode = () => {
+        treeLoading.value = true;
         if (mode.value == '1') {
-          treeData2.value = [
-            {
-              title: 'AC_001(总电表)',
-              key: '101',
-              children: [
-                {
-                  title: 'AC_002(暖通电表)',
-                  key: '102',
-                },
-                {
-                  title: 'AC_003(照明电表)',
-                  key: '103',
-                },
-                {
-                  title: 'AC_004(给排水电表)',
-                  key: '104',
-                },
-                {
-                  title: 'AC_005(通风电表)',
-                  key: '105',
-                },
-                {
-                  title: 'AC_006(电动门电表)',
-                  key: '106',
-                },
-              ],
-            },
-          ];
+          http
+            .post(device.queryDevicePage, {
+              deviceName: deviceName.value,
+              energyType: selectedValue.value,
+              orgId: orgId.value,
+              pageNum: 1,
+              pageSize: 9999,
+            })
+            .then((res) => {
+              let val = '999999999';
+
+              let label = '所有设备';
+
+              let records = res.data.records;
+              records.forEach((item: any) => {
+                (item.title = item.deviceModel + ' ' + item.deviceName), (item.key = item.id);
+              });
+              let a: TreeSelectProps['treeData'] = [{ title: label, key: val, children: records }];
+              treeData2.value = a;
+              expandedKeys.value = [val];
+            })
+            .finally(() => {
+              treeLoading.value = false;
+            });
         } else {
-          treeData2.value = [
-            {
-              title: '功能分项',
-              key: '1',
-              children: [
-                {
-                  title: '照明',
-                  key: '2',
-                  children: [
-                    {
-                      title: '站台照明',
-                      key: '3',
-                    },
-                    {
-                      title: '站厅照明',
-                      key: '4',
-                    },
-                    {
-                      title: '应急照明',
-                      key: '5',
-                    },
-                    {
-                      title: '广告照明',
-                      key: '6',
-                    },
-                  ],
-                },
-                {
-                  title: '暖通',
-                  key: '7',
-                },
-                {
-                  title: '排放',
-                  key: '8',
-                },
-                {
-                  title: '给排水',
-                  key: '9',
-                },
-                {
-                  title: '光伏',
-                  key: '10',
-                },
-                {
-                  title: '电梯',
-                  key: '11',
-                },
-                {
-                  title: '电动门',
-                  key: '12',
-                },
-              ],
-            },
-          ];
+          http
+            .post(group.queryDeviceGroupTree, {
+              pointName: pointName.value,
+              energyType: selectedValue.value,
+              orgId: orgId.value,
+            })
+            .then((res) => {
+              treeData2.value = [];
+              treeData2.value = formatTreeData(pointName.value ? res.data[0].searchList : res.data);
+
+              expandedKeys.value = getAllKeys(treeData2.value);
+            })
+            .finally(() => {
+              treeLoading.value = false;
+            });
         }
       };
+      const getAllKeys = (data: any) => {
+        let keys: any[] = [];
+        data.forEach((item: any) => {
+          if (item.children) {
+            keys.push(item.key);
+            keys = keys.concat(getAllKeys(item.children));
+          }
+        });
+        return keys;
+      };
+      const formatTreeData = (data: any) => {
+        return data.map((item: any) => ({
+          title: item.pointName,
+          key: item.id,
+          children: item.children ? formatTreeData(item.children) : [],
+        }));
+      };
 
       type RangeValue = [Dayjs, Dayjs];
       const dates = ref<RangeValue>();
@@ -270,17 +559,14 @@
         dates.value = val;
       };
       onMounted(() => {
-        getDianWeiList();
+        getOptionsList();
         changeMode();
       });
 
-      // const dateFormat = 'YYYY-MM-DD';
-
       return {
-        // treeLine,
-        // showLeafIcon,
         value,
-        treeData1,
+        deviceName,
+        pointName,
         treeData2,
         expandedKeys,
         selectedKeys,
@@ -291,14 +577,18 @@
         selectedValue,
         frequencyValue,
         dateRange,
-        getDianWeiList,
+        getOptionsList,
         getSelect,
+        getSelect11,
         changeMode,
         disabledDate,
         onCalendarChange,
         onOpenChange,
         onChange,
         hackValue,
+        treeLoading,
+        changeEnergyType,
+        shebei,
       };
     },
   });