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 1/2] =?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,
       };
     },
   });

From 5ed74493922533bb963de08271aa22942f5973d8 Mon Sep 17 00:00:00 2001
From: fks-xuxinyue <2822784518@qq.com>
Date: Thu, 11 Jul 2024 09:17:20 +0800
Subject: [PATCH 2/2] taskId:083 remark:"commit"

---
 .../src/api/carbonEmissionFactorLibrary.ts         |   5 +
 .../carbonEmissionFactorLibrary/config.ts          |  43 ++--
 .../carbonEmissionFactorLibrary/index.vue          |   2 +
 .../carbonEmissionStatistics/config.ts             | 183 ++++++---------
 .../energyConsumption/index.vue                    | 251 +++++++++++++++++++++
 .../carbonEmissionStatistics/index.vue             |   4 +-
 6 files changed, 362 insertions(+), 126 deletions(-)
 create mode 100644 hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/energyConsumption/index.vue

diff --git a/hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts b/hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts
index 50665a4..eecf57e 100644
--- a/hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts
+++ b/hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts
@@ -1,3 +1,4 @@
+// 碳排因子库接口
 export enum carbonEmissionFactorLibrary {
   getTableList = '/carbon-smart/api/carbon/emission/factor/queryCarbonFactorPage',
   creatOrUpdate = '/carbon-smart/api/carbon/emission/factor/creatOrUpdate',
@@ -8,3 +9,7 @@ export enum carbonEmissionFactorLibrary {
   creat = '/carbon-smart/api/carbon/emission/type/creatOrUpdate',
   delTreeNode = '/carbon-smart/api/carbon/emission/type/del',
 }
+// 碳排管理-碳排统计接口
+export enum energyConsumption {
+  pageList = '/carbon-smart/api/carbon/stats/pageList',
+}
\ No newline at end of file
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/config.ts b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/config.ts
index 58964de..6c3642a 100644
--- a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/config.ts
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/config.ts
@@ -83,24 +83,39 @@ export const formConfig = (disabled) => {
               },
             ],
           },
+          // {
+          //   field: 'emissionProcess',
+          //   label: '排放环节',
+          //   component: 'NsSelectApi',
+          //   componentProps: {
+          //     api: carbonEmissionFactorLibrary.getEmissionProcess,
+          //     params: {
+          //       emissionType: sessionStorage.getItem('checkedTreeNode'),
+          //     },
+          //     resultField: 'data',
+          //     labelField: 'emissionProcess',
+          //     valueField: 'emissionProcess',
+          //     immediate: true,
+          //     autoSelectFirst: false,
+          //     filterOption:false,
+          //     showSearch:true,
+          //     autoClearSearchValue:false
+          //   },
+          // },
           {
-            field: 'emissionProcess',
             label: '排放环节',
-            component: 'NsSelectApi',
+            field: 'emissionProcess',
+            component: 'NsInput',
             componentProps: {
-              api: carbonEmissionFactorLibrary.getEmissionProcess,
-              params: {
-                emissionType: sessionStorage.getItem('checkedTreeNode'),
-              },
-              resultField: 'data',
-              labelField: 'emissionProcess',
-              valueField: 'emissionProcess',
-              immediate: true,
-              autoSelectFirst: false,
-              filterOption:false,
-              showSearch:true,
-              autoClearSearchValue:false
+              placeholder: '请输入排放环节',
+              maxLength: 20,
             },
+            rules: [
+              {
+                required: true,
+                message: '请输入排放环节',
+              },
+            ],
           },
           {
             label: '排放因子',
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/index.vue b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/index.vue
index 1d62e7e..3c651cf 100644
--- a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/index.vue
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/index.vue
@@ -306,6 +306,7 @@ import { log } from 'node:console';
   }
   // 点击新增树节点
   const addTreeNodeData = () => {
+    operationTree.value='新增'
     treeNodeAdd.value = true;
     editTreeNode.value.type = 'create'
   };
@@ -389,6 +390,7 @@ import { log } from 'node:console';
         level:info.selectedNodes[0].level,
         dataNumber:info.selectedNodes[0].dataNumber,
         sortNumber:info.selectedNodes[0].sortNumber,
+        parentEmissionId:info.selectedNodes[0].parentEmissionId,
       }
     }
   };
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/config.ts b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/config.ts
index db7b76a..e12f23a 100644
--- a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/config.ts
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/config.ts
@@ -1,111 +1,74 @@
-import { dateUtil } from '/nerv-lib/util/date-util';
-import data from './mock.json';
-export const tableConfig = {
-  title: '设备台账',
-  // api: '/carbon_emission/device/getDeviceList',
-  value: data.dataSource,
-  params: {
-    page: 0,
-    pageSize: 10,
-  },
-  rowSelection: null,
-  columns: [
-    {
-      title: '序号',
-      customRender: (text: any) => {
-        return text.index + 1;
-      },
+export const tableColumns = [
+  {
+    title: '序号',
+    customRender: (text: any) => {
+      return text.index + 1;
     },
-    {
-      title: '能源种类',
-      dataIndex: 'id',
-    },
-    {
-      title: '计量单位',
-      dataIndex: 'deviceCode',
-    },
-    {
-      title: '全年',
-      dataIndex: 'deviceName',
-      textNumber: 8,
-      textEllipsis: true,
-    },
-    {
-      title: '设备一级区域',
-      dataIndex: 'position',
-    },
-    {
-      title: '设备二级区域',
-      dataIndex: 'position',
-    },
-    {
-      title: '设备详细位置',
-      dataIndex: 'position',
-    },
-    {
-      title: '设备规格',
-      dataIndex: 'position',
-    },
-    {
-      title: '设备厂商纳税人识别号',
-      dataIndex: 'position',
-    },
-    {
-      title: '厂商联系人',
-      dataIndex: 'position',
-    },
-    {
-      title: '设备描述',
-      dataIndex: 'position',
-    },
-    {
-      title: 'IP地址',
-      dataIndex: 'position',
-    },
-    {
-      title: '生产日期',
-      dataIndex: 'position',
-    },
-    {
-      title: '采购日期',
-      dataIndex: 'position',
-    },
-    {
-      title: '启用日期',
-      dataIndex: 'position',
-    },
-    {
-      title: '设备成本（元）',
-      dataIndex: 'position',
-    },
-    {
-      title: '使用期限',
-      dataIndex: 'position',
-    },
-    {
-      title: '额定功率',
-      dataIndex: 'position',
-    },
-    {
-      title: '特殊参数',
-      dataIndex: 'position',
-    },
-  ],
-
-  formConfig: {
-    schemas: [
-      {
-        field: 'createTime',
-        label: '生产日期',
-        component: 'NsRangePicker',
-        fieldMap: ['queryStartDate', 'queryEndDate'],
-        componentProps: {
-          valueFormat: 'YYYY-MM-DD',
-        },
-      },
-    ],
-    params: {},
-  },
-  // pagination: { pageSizeOptions: false },
-  rowKey: 'uuid',
-};
+  },
+  {
+    title: '能源种类',
+    dataIndex: 'money',
+  },
+  {
+    title: '计量单位',
+    className: 'column-money',
+    dataIndex: 'money',
+  },
+  {
+    title: '全年',
+    dataIndex: 'address',
+  },
+  {
+    title: '1月',
+    dataIndex: 'address',
+  },
+  {
+    title: '2月',
+    dataIndex: 'address',
+  },
+  {
+    title: '3月',
+    dataIndex: 'address',
+  },
+  {
+    title: '4月',
+    dataIndex: 'address',
+  },
+  {
+    title: '5月',
+    dataIndex: 'address',
+  },
+  {
+    title: '6月',
+    dataIndex: 'address',
+  },
+  {
+    title: '7月',
+    dataIndex: 'address',
+  },
+  {
+    title: '8月',
+    dataIndex: 'address',
+  },
+  {
+    title: '9月',
+    dataIndex: 'address',
+  },
+  {
+    title: '10月',
+    dataIndex: 'address',
+  },
+  {
+    title: '11月',
+    dataIndex: 'address',
+  },
+  {
+    title: '12月',
+    dataIndex: 'address',
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 130
+  },
+];
\ No newline at end of file
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/energyConsumption/index.vue b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/energyConsumption/index.vue
new file mode 100644
index 0000000..3100688
--- /dev/null
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/energyConsumption/index.vue
@@ -0,0 +1,251 @@
+<template>
+  <div>
+    <a-table 
+      :columns="tableColumns" 
+      :data-source="data" 
+      bordered
+      :pagination="false"
+      :scroll="{ x: 2000 }">
+      <template #bodyCell="{ column, text }">
+        <template v-if="column.key === 'action'">
+          <span>
+            <a>编辑</a>
+            <a-divider type="vertical" />
+            <a>删除</a>
+          </span>
+        </template>
+      </template>
+      <template #title>
+        <a-date-picker v-model:value="selectYear" picker="year" />
+        <div class="buttonGroup">
+          <a-button type="primary" @click="addNewData">新增</a-button>
+          <a-button type="primary">导入</a-button>
+          <a-button type="primary">导出</a-button>
+          <a-button type="primary">模板下载</a-button>
+          <a-button type="primary">上传凭证</a-button>
+          <a-button type="primary">凭证下载</a-button>
+        </div>
+      </template>
+    </a-table>
+    <a-pagination
+      :current="current"
+      :page-size="pageSize"
+      :total="0"
+      :show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`" />
+    <!-- 新增数据库数据 -->
+    <a-drawer
+      :width="500"
+      :visible="visible"
+      :body-style="{ paddingBottom: '80px' }"
+      :footer-style="{ textAlign: 'right' }"
+      destroyOnClose
+      @close="onClose">
+      <a-form
+        ref="formRef"
+        :model="formState"
+        :rules="rules"
+        :label-col="labelCol"
+        :wrapper-col="wrapperCol"
+      >
+        <a-form-item ref="name" label="能源种类" name="name">
+          <a-input v-model:value="formState.name" />
+        </a-form-item>
+        <a-form-item label="计量单位">
+          <a-cascader v-model:value="value" :options="options" placeholder="Please select" />
+        </a-form-item>
+        <a-form-item label="自动采集节点">
+          <a-tree-select
+            v-model:value="treeValue"
+            style="width: 300px"
+            placeholder="Please select"
+            :tree-line="true"
+            :tree-data="treeData"
+            tree-node-filter-prop="title"
+          >
+            <template #title="{ value: val, title }">
+              <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
+              <template v-else>{{ title }}</template>
+            </template>
+          </a-tree-select>
+        </a-form-item>
+        <a-form-item label="计算碳排" name="resource">
+          <a-radio-group v-model:value="formState.resource">
+            <a-radio value="1">是</a-radio>
+            <a-radio value="2">否</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item label="排放类型" name="region">
+          <a-select v-model:value="formState.region" placeholder="请选择排放类型">
+            <a-select-option value="shanghai">Zone one</a-select-option>
+            <a-select-option value="beijing">Zone two</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="1月" name="delivery">
+          <a-switch v-model:checked="formState.delivery" />
+        </a-form-item>
+      </a-form>
+      <template #footer>
+        <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
+        <a-button type="primary" @click="onSubmit">确定</a-button>
+      </template>
+    </a-drawer>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref,reactive, toRaw } from 'vue';
+  import type { UnwrapRef } from 'vue';
+  import type { Rule } from 'ant-design-vue/es/form';
+  import type { CascaderProps,TreeSelectProps  } from 'ant-design-vue';
+  import type { Dayjs } from 'dayjs';
+  import { http } from '/nerv-lib/util/http';
+  import { tableColumns } from '../config';
+  import { energyConsumption } from '/@/api/carbonEmissionFactorLibrary';
+  defineOptions({
+    name: 'EnergyConsumption', // 与页面路由name一致缓存才可生效
+  });
+  
+  const orgId = JSON.parse(sessionStorage.getItem('userInfo')).orgId;
+  const fetch = (api, params = { orgId }) => {
+    return http.post(api, params);
+  };
+  const selectYear = ref<Dayjs>();
+  const current = ref<number>(1);
+  const pageSize = ref<number>(10);
+  const visible = ref(false);
+  const value = ref<string[]>([]);
+  const data = ref([]);
+  interface FormState {
+    name: string;
+    region: string | undefined;
+    delivery: boolean;
+    resource: string;
+  }
+  const formRef = ref();
+  const labelCol = { span: 5 };
+  const wrapperCol = { span: 13 };
+  const formState: UnwrapRef<FormState> = reactive({
+    name: '',
+    region: undefined,
+    delivery: false,
+    resource: '',
+  });
+  // 定义form表单的必填
+  const rules: Record<string, Rule[]> = {
+    name: [
+      { required: true, message: '请输入能源种类', trigger: 'change' },
+    ],
+    resource: [{ required: true, message: 'Please select activity resource', trigger: 'change' }],
+  };
+  // 定义计量单位级联选择的变量
+  const options: CascaderProps['options'] = [
+    {
+      value: 'zhejiang',
+      label: 'Zhejiang',
+      children: [
+        {
+          value: 'hangzhou',
+          label: 'Hangzhou',
+          children: [
+            {
+              value: 'xihu',
+              label: 'West Lake',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      value: 'jiangsu',
+      label: 'Jiangsu',
+      children: [
+        {
+          value: 'nanjing',
+          label: 'Nanjing',
+          children: [
+            {
+              value: 'zhonghuamen',
+              label: 'Zhong Hua Men',
+            },
+          ],
+        },
+      ],
+    },
+  ];
+  // 定义自动采集节点数的变量
+  const treeValue = ref<string>();
+  const treeData = ref<TreeSelectProps['treeData']>([
+    {
+      title: 'parent 1',
+      value: 'parent 1',
+      children: [
+        {
+          title: 'parent 1-0',
+          value: 'parent 1-0',
+          children: [
+            {
+              title: 'my leaf',
+              value: 'leaf1',
+            },
+            {
+              title: 'your leaf',
+              value: 'leaf2',
+            },
+          ],
+        },
+        {
+          title: 'parent 1-1',
+          value: 'parent 1-1',
+        },
+      ],
+    },
+  ]);
+  // 获取表格数据
+  const getTableList = () => {
+    fetch(energyConsumption.pageList).then((res) => {
+      console.log(res,'aaaaaa');
+    });
+  };
+  getTableList()
+  // 点击确定提交
+  const onSubmit = () => {
+    formRef.value
+      .validate()
+      .then(() => {
+        console.log('values', formState, toRaw(formState));
+      })
+      .catch(error => {
+        console.log('error', error);
+      });
+  };
+  const resetForm = () => {
+    formRef.value.resetFields();
+  };
+  // 点击新增按钮
+  const addNewData = () => {
+    visible.value = true
+  }
+  // 关闭新增抽屉
+  const onClose = () => {
+    visible.value = false;
+  };
+</script>
+<style scoped lang="less">
+  ::v-deep .ant-table-title{
+    display: flex;
+  }
+  ::v-deep .ant-table-container{
+    padding: 0px 16px;
+  }
+  .buttonGroup{
+    margin-left: 1vw;
+    width: 30vw;
+    display: flex;
+    justify-content: space-around;
+  }
+</style>
+<style scoped>
+  th.column-money,
+  td.column-money {
+    text-align: right !important;
+  }
+</style>
\ No newline at end of file
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/index.vue b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/index.vue
index 4cb9985..9c54fa1 100644
--- a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/index.vue
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/index.vue
@@ -1,7 +1,7 @@
 <template>
   <a-tabs v-model:activeKey="activeKey">
     <a-tab-pane key="1" tab="能耗统计">
-      <ns-view-list-table v-bind="tableConfig" />
+      <energyConsumption ref="energyConsumptionRef" />
     </a-tab-pane>
     <a-tab-pane key="2" tab="碳排统计" force-render>Content of Tab Pane 2</a-tab-pane>
     <a-tab-pane key="3" tab="碳排速算">Content of Tab Pane 3</a-tab-pane>
@@ -9,7 +9,7 @@
 </template>
 <script lang="ts" setup>
   import { ref } from 'vue';
-  import { tableConfig } from './config';
+  import energyConsumption from './energyConsumption/index.vue';
   defineOptions({
     name: 'CarbonEmissionStatisticsIndex', // 与页面路由name一致缓存才可生效
   });