From fb1980d73a6dfd8356c83a4360fe7fe1be88e97c Mon Sep 17 00:00:00 2001
From: fks-yangshouda <yangshoudamhy@163.com>
Date: Tue, 9 Jul 2024 10:10:17 +0800
Subject: [PATCH] =?UTF-8?q?1.=E8=AE=BE=E5=A4=87=E7=9B=91=E6=8E=A7=20?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E4=B8=8B=E8=BD=BD=20=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E6=94=B9=E4=B8=BA=E4=B8=89=E5=A4=A9=202.?=
 =?UTF-8?q?=E8=83=BD=E8=80=97=E7=9B=91=E6=8E=A7=20-=20=E5=9B=BE=E8=A1=A8?=
 =?UTF-8?q?=E5=89=8D=E5=8F=B0=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hx-ai-intelligent/src/icon/huanjingjiance.svg      |   2 +-
 hx-ai-intelligent/src/icon/jiankongzhongxin.svg    |   2 +-
 hx-ai-intelligent/src/icon/xiazai.svg              |   1 +
 hx-ai-intelligent/src/router/monitor.ts            |  19 +
 .../src/view/monitor/deviceMonitor/graph/index.vue | 377 ++++++++++---------
 .../src/view/monitor/deviceMonitor/index.vue       |  96 ++---
 .../src/view/monitor/deviceMonitor/tree/index.vue  | 399 +++++++++++----------
 .../monitor/energyMonitor/graphGraph/index.vue     | 206 +++++++++++
 .../src/view/monitor/energyMonitor/index.vue       |  88 +++++
 .../src/view/monitor/energyMonitor/table/index.vue | 166 +++++++++
 .../src/view/monitor/energyMonitor/tree/index.vue  | 330 +++++++++++++++++
 11 files changed, 1264 insertions(+), 422 deletions(-)
 create mode 100644 hx-ai-intelligent/src/icon/xiazai.svg
 create mode 100644 hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue
 create mode 100644 hx-ai-intelligent/src/view/monitor/energyMonitor/index.vue
 create mode 100644 hx-ai-intelligent/src/view/monitor/energyMonitor/table/index.vue
 create mode 100644 hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue

diff --git a/hx-ai-intelligent/src/icon/huanjingjiance.svg b/hx-ai-intelligent/src/icon/huanjingjiance.svg
index 503b264..622b99b 100644
--- a/hx-ai-intelligent/src/icon/huanjingjiance.svg
+++ b/hx-ai-intelligent/src/icon/huanjingjiance.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720061440927" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11363" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M659.925333 128a74.666667 74.666667 0 0 1 71.338667 52.618667L754.56 256H821.333333c64.8 0 117.333333 52.533333 117.333334 117.333333v426.666667c0 64.8-52.533333 117.333333-117.333334 117.333333H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V373.333333c0-64.8 52.533333-117.333333 117.333334-117.333333h66.773333l23.296-75.381333A74.666667 74.666667 0 0 1 364.074667 128h295.850666zM512 405.333333c-88.362667 0-160 71.637333-160 160 0 88.362667 71.637333 160 160 160 88.362667 0 160-71.637333 160-160 0-88.362667-71.637333-160-160-160z m0 256a96 96 0 1 0 0-192 96 96 0 0 0 0 192z" fill="#000000" p-id="11364"></path></svg>
\ No newline at end of file
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720061440927" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11363" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M659.925333 128a74.666667 74.666667 0 0 1 71.338667 52.618667L754.56 256H821.333333c64.8 0 117.333333 52.533333 117.333334 117.333333v426.666667c0 64.8-52.533333 117.333333-117.333334 117.333333H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V373.333333c0-64.8 52.533333-117.333333 117.333334-117.333333h66.773333l23.296-75.381333A74.666667 74.666667 0 0 1 364.074667 128h295.850666zM512 405.333333c-88.362667 0-160 71.637333-160 160 0 88.362667 71.637333 160 160 160 88.362667 0 160-71.637333 160-160 0-88.362667-71.637333-160-160-160z m0 256a96 96 0 1 0 0-192 96 96 0 0 0 0 192z" p-id="11364"></path></svg>
\ No newline at end of file
diff --git a/hx-ai-intelligent/src/icon/jiankongzhongxin.svg b/hx-ai-intelligent/src/icon/jiankongzhongxin.svg
index b9cb5fa..83d7a07 100644
--- a/hx-ai-intelligent/src/icon/jiankongzhongxin.svg
+++ b/hx-ai-intelligent/src/icon/jiankongzhongxin.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720061108318" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10061" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M512 12L94.71 138v314.92C94.71 657.7 263.86 880.16 512 1012c248.14-131.84 417.29-354.3 417.29-559.08V138z m209.91 510H562v159.91H462V522H302.09V422H462V262.09h100V422h159.91z" fill="#2c2c2c" p-id="10062"></path></svg>
\ No newline at end of file
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720061108318" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10061" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M512 12L94.71 138v314.92C94.71 657.7 263.86 880.16 512 1012c248.14-131.84 417.29-354.3 417.29-559.08V138z m209.91 510H562v159.91H462V522H302.09V422H462V262.09h100V422h159.91z"  p-id="10062"></path></svg>
\ No newline at end of file
diff --git a/hx-ai-intelligent/src/icon/xiazai.svg b/hx-ai-intelligent/src/icon/xiazai.svg
new file mode 100644
index 0000000..dca8632
--- /dev/null
+++ b/hx-ai-intelligent/src/icon/xiazai.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720430904326" class="icon" viewBox="0 0 1354 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3403" xmlns:xlink="http://www.w3.org/1999/xlink" width="21.15625" height="16"><path d="M1034.83248 645.406063l-191.508238 191.508238a53.622507 53.622507 0 0 1-75.964301 0l-191.508238-191.508238a53.622507 53.622507 0 0 1 0-75.964301 53.622507 53.622507 0 0 1 75.965301 0l102.775054 102.775054V303.884205a53.622507 53.622507 0 1 1 107.245014 0v368.332611l95.753119-102.775054a53.622507 53.622507 0 0 1 75.965301 0 53.622507 53.622507 0 0 1 1.276988 75.964301z m262.364587-175.548385a365.141641 365.141641 0 0 0-97.030108-98.94609 378.546518 378.546518 0 0 0-29.364729-123.202867 397.697341 397.697341 0 0 0-89.369178-127.671825 404.719277 404.719277 0 0 0-133.418773-91.28516A408.549242 408.549242 0 0 0 792.894706 0.026a400.251318 400.251318 0 0 0-225.977921 67.665377 410.464224 410.464224 0 0 0-97.669102 91.285161 261.088598 261.088598 0 0 0-63.836412-7.65993 247.044727 247.044727 0 0 0-176.18738 70.857348 245.129745 245.129745 0 0 0-72.134336 202.360139 324.925011 324.925011 0 0 0-84.263225 72.77333A308.965158 308.965158 0 0 0 0.053 702.22054a310.242146 310.242146 0 0 0 97.029107 228.531898 331.307952 331.307952 0 0 0 105.969025 69.58136 330.030964 330.030964 0 0 0 127.670826 23.619782h656.233963A360.034688 360.034688 0 0 0 1242.298572 919.261544a360.034688 360.034688 0 0 0 81.071254-116.181932 354.288741 354.288741 0 0 0 27.449748-138.523725 344.713829 344.713829 0 0 0-54.260501-194.699209z" fill="#5656FB" p-id="3404"></path></svg>
\ No newline at end of file
diff --git a/hx-ai-intelligent/src/router/monitor.ts b/hx-ai-intelligent/src/router/monitor.ts
index 79d2806..65d21c1 100644
--- a/hx-ai-intelligent/src/router/monitor.ts
+++ b/hx-ai-intelligent/src/router/monitor.ts
@@ -43,6 +43,25 @@ const equipment = {
         },
       ],
     },
+    {
+      path: 'energyMonitor',
+      name: 'EnergyMonitor',
+      meta: { title: '能耗监测', hideChildren: true, icon: 'huanjingjiance' },
+      component: Base,
+      redirect: { name: 'EnergyMonitorIndex' },
+      children: [
+        {
+          path: 'index',
+          name: 'EnergyMonitorIndex',
+          component: () => import('/@/view/monitor/energyMonitor/index.vue'),
+          meta: {
+            title: '能耗监测',
+            keepAlive: true,
+            // backApi: [],
+          },
+        },
+      ],
+    },
     // {
     //   path: 'group',
     //   name: 'Group',
diff --git a/hx-ai-intelligent/src/view/monitor/deviceMonitor/graph/index.vue b/hx-ai-intelligent/src/view/monitor/deviceMonitor/graph/index.vue
index f2562fe..9e7a29d 100644
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/graph/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/graph/index.vue
@@ -1,210 +1,199 @@
-
 <template>
-
-  <div ref="chart" style="width: 100%; height: 80%;"></div>
-      
+  <div ref="graphChart" 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'
-      }
-    ]
-  },
-];
+  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({
+    // eslint-disable-next-line vue/multi-word-component-names
     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(
-              {
+    setup() {
+      const graphChart = ref(null);
+      let chartInstance: echarts.ECharts | null = null;
+
+      onMounted(() => {
+        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 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)
+                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);
+            }
           }
-
-          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: [
+            {
+              height: 10,
+              start: 0,
+              end: 100,
+              handleSize: '300%', // 设置滑块的大小
+              bottom: 15,
+            },
+          ],
+          series: seriesList,
+        };
+
+        chartInstance = echarts.init(graphChart.value);
+        chartInstance.setOption(option);
+      });
+      // 下载图表
+      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();
+        }
+      };
 
-      }
-
-
-      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'
-        //   }
-        // ]
+      return {
+        graphChart,
+        downloadChart,
       };
- 
-      const chartInstance = echarts.init(chart.value);
-      chartInstance.setOption(option);
-    });
- 
-    return { chart };
-  }
-  })
+    },
+  });
 </script>
-<style lang="less" scoped>
- 
-  </style>
+<style lang="less" scoped></style>
diff --git a/hx-ai-intelligent/src/view/monitor/deviceMonitor/index.vue b/hx-ai-intelligent/src/view/monitor/deviceMonitor/index.vue
index b3a735b..d5ab9d1 100644
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/index.vue
@@ -1,76 +1,80 @@
 <template>
   <a-row type="flex">
     <a-col :span="4">
-      <div style="padding: 0 20px; width: 100%; height: 100%;">
-        <tree ref="treeRef"></tree>
+      <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 style="width: 100%; height: 100%">
         <div class="ns-right-title">
           <span>历史数据</span>
           <div class="button">
-            <ns-icon name="biaoge" size="18" style="margin-right: 10px;"/>
-            <ns-icon :name="iconName" size="18" style="margin-right: 10px;" @click="change"/>
+            <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>
-        <graph ref="graphRef" v-if="isGraph"></graph>
-        <environment-table ref="tableRef" v-else></environment-table>
+        <graph ref="graphRef" v-if="isGraph" />
+        <environment-table ref="tableRef" v-else />
       </div>
     </a-col>
   </a-row>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import tree from './tree/index.vue';
-import graph from './graph/index.vue';
-import environmentTable from './table/index.vue';
+  import { ref } from 'vue';
+  import tree from './tree/index.vue';
+  import graph from './graph/index.vue';
+  import environmentTable from './table/index.vue';
 
-const iconName = ref('biaoge');
+  const iconName = ref('biaoge');
 
-const treeRef = ref();
-const graphRef = ref();
-const tableRef = ref();
+  const treeRef = ref();
+  const graphRef = ref();
+  const tableRef = ref();
 
-let isGraph = ref(true)
+  let isGraph = ref(true);
 
-defineOptions({
-  name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效
-});
+  defineOptions({
+    name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效
+  });
 
-function change() {
+  const downloadChart = () => {
+    if (isGraph.value) {
+      if (graphRef.value) {
+        graphRef.value.downloadChart();
+      }
+    }
+  };
 
-  isGraph.value = !isGraph.value
-  if (iconName.value == 'biaoge') {
-    iconName.value = 'bingtu'
-  } else {
-    iconName.value = 'biaoge'
+  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;
+  .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;
+    > span {
+      padding-left: 10px;
+      line-height: 20px;
+    }
+  }
+  .button {
+    display: inline-block;
+    padding-right: 10px;
   }
-}
-.button {
-  display: inline-block;
-  padding-right: 10px;
-
-}
 </style>
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 a5b4740..d4badb6 100644
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/v-on-event-hyphenation -->
 <template>
   <div class="parent-container">
     <div class="ns-tree-title">
@@ -6,10 +7,8 @@
     <a-tree-select
       v-model:value="value"
       style="width: 100%"
-
       :tree-line="treeLine && { showLeafIcon }"
-      :tree-data="treeData1"
-    >
+      :tree-data="treeData1">
       <!-- <template #title="{ value: val, title }">
         <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
         <template v-else>{{ title }}</template>
@@ -21,9 +20,8 @@
       v-model:selectedKeys="selectedKeys"
       v-model:checkedKeys="checkedKeys"
       checkable
-      style="width: 100%; margin-bottom: 10px;"
-      :tree-data="treeData2"
-    >
+      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>
@@ -36,190 +34,231 @@
         ref="select"
         v-model:value="selectedValue"
         placeholder="请选择点位"
-        style="width: 100%; margin-bottom: 10px;"
-        :options="options1"
-      ></a-select>
+        style="width: 100%; margin-bottom: 10px"
+        :options="options1" />
       <a-select
         v-model:value="frequencyValue"
         placeholder="请选择频率"
-        style="width: 100%; margin-bottom: 10px;"
-        :options="options2"
-      ></a-select>
-      <a-range-picker v-model:value="dateRange" style="width: 100%; margin-bottom: 10px;" :placeholder="['请选择日期','请选择日期']"/>
-      <a-button type="primary" style="width: 100%; margin-bottom: 10px;" @click="getDianWeiList">查询</a-button>
+        style="width: 100%; margin-bottom: 10px"
+        :options="options2" />
+      <a-range-picker
+        :value="hackValue || dateRange"
+        :disabled-date="disabledDate"
+        @change="onChange"
+        @openChange="onOpenChange"
+        @calendarChange="onCalendarChange"
+        style="width: 100%; margin-bottom: 10px"
+        :placeholder="['请选择日期', '请选择日期']" />
+      <a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect"
+        >查询</a-button
+      >
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import type { TreeSelectProps, TreeProps, SelectProps } from 'ant-design-vue';
-import { defineComponent, ref, watch ,onMounted } from 'vue';
-import dayjs, { Dayjs } from 'dayjs';
-
-const treeData2: TreeProps['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',
-      },
-    ],
-  },
-];
-
-export default defineComponent({
-  name: 'Tree',
-  setup() {
-    const treeLine = ref(true);
-    const showLeafIcon = ref(false);
-    const value = ref<string>();
-
-    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 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小时',
-      },
-    ]);
-    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: 'A 项电压' },
-        { value: '2', label: 'B 项电压' },
-        { value: '3', label: 'C 项电压' },
-        { value: '4', label: 'AB 线电压' },
-        { value: '5', label: 'BC 线电压' },
-        { value: '6', label: 'A 项电流' },
-        { value: '7', label: 'B 项电流' },
-      ];
-    };
-
-    onMounted(() => {
-      getDianWeiList();
-    });
-
-    const dateFormat = 'YYYY-MM-DD';
-
-
-
-    return {
-      treeLine,
-      showLeafIcon,
-      value,
-      treeData1,
-      treeData2,
-      expandedKeys,
-      selectedKeys,
-      checkedKeys,
-      options1,
-      options2,
-      selectedValue,
-      frequencyValue,
-      dateRange,
-      getDianWeiList,
-    };
-  },
-});
+  import type { TreeSelectProps, TreeProps, SelectProps } from 'ant-design-vue';
+  import { defineComponent, ref, watch, onMounted } from 'vue';
+  import dayjs, { Dayjs } from 'dayjs';
+
+  const treeData2: TreeProps['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',
+        },
+      ],
+    },
+  ];
+
+  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 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 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小时',
+        },
+      ]);
+      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: 'A 项电压' },
+          { value: '2', label: 'B 项电压' },
+          { value: '3', label: 'C 项电压' },
+          { value: '4', label: 'AB 线电压' },
+          { value: '5', label: 'BC 线电压' },
+          { value: '6', label: 'A 项电流' },
+          { value: '7', label: 'B 项电流' },
+        ];
+      };
+
+      const getSelect = () => {};
+
+      type RangeValue = [Dayjs, Dayjs];
+      const dates = ref<RangeValue>();
+      const hackValue = ref<RangeValue>();
+
+      const onChange = (val: RangeValue) => {
+        dateRange.value = val;
+      };
+      const onOpenChange = (open: boolean) => {
+        if (open) {
+          dates.value = [] as any;
+          hackValue.value = [] as any;
+        } else {
+          hackValue.value = undefined;
+        }
+      };
+      const disabledDate = (current: Dayjs) => {
+        if (!dates.value || (dates.value as any).length === 0) {
+          return false;
+        }
+        const tooLate = dates.value[0] && current.diff(dates.value[0], 'days') > 2;
+        const tooEarly = dates.value[1] && dates.value[1].diff(current, 'days') > 2;
+        return tooEarly || tooLate;
+      };
+      const onCalendarChange = (val: RangeValue) => {
+        dates.value = val;
+      };
+
+      onMounted(() => {
+        getDianWeiList();
+      });
+
+      const dateFormat = 'YYYY-MM-DD';
+
+      return {
+        treeLine,
+        showLeafIcon,
+        value,
+        treeData1,
+        treeData2,
+        expandedKeys,
+        selectedKeys,
+        checkedKeys,
+        options1,
+        options2,
+        selectedValue,
+        frequencyValue,
+        dateRange,
+        getDianWeiList,
+        getSelect,
+        disabledDate,
+        onCalendarChange,
+        onOpenChange,
+        onChange,
+        hackValue,
+      };
+    },
+  });
 </script>
 
 <style lang="less" scoped>
-.ns-tree-title {
-  user-select: text;
-  margin-bottom: 5px;
-  padding-bottom: 10px;
-  padding-top: 10px;
-  border-bottom: 1px solid #e9e9e9;
-  > span {
-    padding-left: 10px;
-    line-height: 20px;
+  .ns-tree-title {
+    user-select: text;
+    margin-bottom: 5px;
+    padding-bottom: 10px;
+    padding-top: 10px;
+    border-bottom: 1px solid #e9e9e9;
+    > span {
+      padding-left: 10px;
+      line-height: 20px;
+    }
+  }
+  .parent-container {
+    position: relative;
+    height: 100%;
+  }
+
+  .fixed-bottom {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    margin-bottom: 10px;
   }
-}
-.parent-container {
-  position: relative;
-  height: 100%;
-}
-
-.fixed-bottom {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  margin-bottom: 10px;
-}
 </style>
diff --git a/hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue b/hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue
new file mode 100644
index 0000000..83bfd0a
--- /dev/null
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue
@@ -0,0 +1,206 @@
+<template>
+  <div ref="graphGraphchart" style="width: 100%; height: 80%"></div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, onMounted, ref } 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() {
+      const graphGraphchart = ref(null);
+
+      let chartInstance: echarts.ECharts | null = null;
+      onMounted(() => {
+        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 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: 0,
+            left: 60,
+          },
+          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: [
+          //   {
+          //     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);
+      });
+
+      // 下载图表
+      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 {
+        graphGraphchart,
+        downloadChart,
+      };
+    },
+  });
+</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
new file mode 100644
index 0000000..aa1e1c8
--- /dev/null
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/index.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 './table/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/table/index.vue b/hx-ai-intelligent/src/view/monitor/energyMonitor/table/index.vue
new file mode 100644
index 0000000..31c5825
--- /dev/null
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/table/index.vue
@@ -0,0 +1,166 @@
+<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>
diff --git a/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue b/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
new file mode 100644
index 0000000..15f1af3
--- /dev/null
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
@@ -0,0 +1,330 @@
+<!-- eslint-disable vue/v-on-event-hyphenation -->
+<template>
+  <div class="parent-container">
+    <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" />
+
+    <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="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" />
+
+    <div class="fixed-bottom">
+      <a-divider />
+      <a-select
+        v-model:value="frequencyValue"
+        placeholder="请选择采集频率"
+        style="width: 100%; margin-bottom: 10px"
+        :options="options2" />
+      <a-range-picker
+        :value="hackValue || dateRange"
+        :disabled-date="disabledDate"
+        @change="onChange"
+        @openChange="onOpenChange"
+        @calendarChange="onCalendarChange"
+        style="width: 100%; margin-bottom: 10px"
+        :placeholder="['请选择日期', '请选择日期']" />
+      <a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect"
+        >查询</a-button
+      >
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import type { TreeSelectProps, TreeProps, SelectProps } from 'ant-design-vue';
+  import { defineComponent, ref, onMounted } from 'vue';
+  import { Dayjs } from 'dayjs';
+
+  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 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 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小时',
+        },
+      ]);
+      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 getSelect = () => {};
+
+      const treeData2 = ref<TreeProps['treeData']>([]);
+      const changeMode = () => {
+        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',
+                },
+              ],
+            },
+          ];
+        } 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',
+                },
+              ],
+            },
+          ];
+        }
+      };
+
+      type RangeValue = [Dayjs, Dayjs];
+      const dates = ref<RangeValue>();
+      const hackValue = ref<RangeValue>();
+
+      const disabledDate = (current: Dayjs) => {
+        if (!dates.value || (dates.value as any).length === 0) {
+          return false;
+        }
+        const tooLate = dates.value[0] && current.diff(dates.value[0], 'days') > 2;
+        const tooEarly = dates.value[1] && dates.value[1].diff(current, 'days') > 2;
+        return tooEarly || tooLate;
+      };
+
+      const onOpenChange = (open: boolean) => {
+        if (open) {
+          dates.value = [] as any;
+          hackValue.value = [] as any;
+        } else {
+          hackValue.value = undefined;
+        }
+      };
+
+      const onChange = (val: RangeValue) => {
+        dateRange.value = val;
+      };
+
+      const onCalendarChange = (val: RangeValue) => {
+        dates.value = val;
+      };
+      onMounted(() => {
+        getDianWeiList();
+        changeMode();
+      });
+
+      // const dateFormat = 'YYYY-MM-DD';
+
+      return {
+        // treeLine,
+        // showLeafIcon,
+        value,
+        treeData1,
+        treeData2,
+        expandedKeys,
+        selectedKeys,
+        checkedKeys,
+        options1,
+        options2,
+        mode,
+        selectedValue,
+        frequencyValue,
+        dateRange,
+        getDianWeiList,
+        getSelect,
+        changeMode,
+        disabledDate,
+        onCalendarChange,
+        onOpenChange,
+        onChange,
+        hackValue,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .ns-tree-title {
+    user-select: text;
+    margin-bottom: 5px;
+    padding-bottom: 10px;
+    padding-top: 10px;
+    border-bottom: 1px solid #e9e9e9;
+    > span {
+      padding-left: 10px;
+      line-height: 20px;
+    }
+  }
+  .parent-container {
+    position: relative;
+    height: 100%;
+  }
+
+  .fixed-bottom {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    margin-bottom: 10px;
+  }
+</style>