From ddf0514182d33b6a712dc3eea4b1b8982ef544bb Mon Sep 17 00:00:00 2001
From: fks-yangshouda <yangshoudamhy@163.com>
Date: Wed, 17 Jul 2024 15:06:11 +0800
Subject: [PATCH] =?UTF-8?q?1.=E8=AE=BE=E5=A4=87=E7=9B=91=E6=B5=8B=20?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E5=AF=B9=E6=8E=A5=202.=E7=8E=AF=E5=A2=83?=
 =?UTF-8?q?=E7=9B=91=E6=B5=8B=20=E5=B9=B3=E5=9D=87=E6=95=B0=E6=8D=AE=20?=
 =?UTF-8?q?=E5=89=8D=E5=8F=B0=E9=A1=B5=E9=9D=A2=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hx-ai-intelligent/src/api/monitor.ts               |  13 +
 .../src/view/monitor/deviceMonitor/graph/index.vue |  47 ++-
 .../src/view/monitor/deviceMonitor/index.vue       |   1 +
 .../src/view/monitor/deviceMonitor/page.vue        |   2 +-
 .../src/view/monitor/deviceMonitor/table/index.vue |  86 ++--
 .../src/view/monitor/deviceMonitor/tree/index.vue  | 452 ++++++++-------------
 .../environmentMonitor/averageData/config.ts       |  36 ++
 .../environmentMonitor/averageData/index.vue       | 250 ++++++++++++
 .../environmentMonitor/historyData/config.ts       |  20 +
 .../environmentMonitor/historyData/index.vue       | 243 +++++++++++
 .../src/view/monitor/environmentMonitor/index.vue  |   6 +-
 11 files changed, 832 insertions(+), 324 deletions(-)
 create mode 100644 hx-ai-intelligent/src/api/monitor.ts
 create mode 100644 hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/config.ts
 create mode 100644 hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue
 create mode 100644 hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/config.ts
 create mode 100644 hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/index.vue

diff --git a/hx-ai-intelligent/src/api/monitor.ts b/hx-ai-intelligent/src/api/monitor.ts
new file mode 100644
index 0000000..62f5064
--- /dev/null
+++ b/hx-ai-intelligent/src/api/monitor.ts
@@ -0,0 +1,13 @@
+export enum deviceMonitor {
+  // getTableList = '/carbon/emission/factor/queryCarbonFactorPage',
+  // addNewData = '/carbon/emission/factor/creatOrUpdate',
+  // editUser = '/carbon-smart/api/user/edit',
+  // frozen = '/carbon-smart/api/user/frozen',
+  // resetPwd = '/carbon-smart/api/user/resetPwd',
+  // del = '/carbon-smart/api/user/del',
+  // batchDel = '/carbon-smart/api/user/batchDel',
+  // getCarbonFactorTree = '/carbon/emission/type/getCarbonFactorTree',
+  // queryDeptTree = '/carbon-smart/api/user/queryDeptTree',
+  // queryUserPerList = '/carbon-smart/api/user/queryUserPerList',
+  getDeviceGraph = '/carbon-smart/api/monitor/getDeviceGraph',
+}
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 bce9c0e..194ded6 100644
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/graph/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/graph/index.vue
@@ -17,6 +17,7 @@
         tableList: any[];
         tableColumns: any[];
         graphList: any[];
+        XData: any[];
       }
       const pageData = inject<PageData>('pageData');
 
@@ -37,32 +38,40 @@
 
       const draw = () => {
         data.value = pageData.graphList;
+        let XData = pageData.XData;
         if (chartInstance) {
           chartInstance.dispose();
         }
         chartInstance = echarts.init(graphChart.value);
 
         var seriesList = [];
-        var date = [];
+        // var date = [];
         var legendList: string | any[] = [];
         for (let i = 0; i < data.value.length; i++) {
-          date.push(data.value[i].date);
+          seriesList.push({
+            name: data.value[i].deviceName,
+            data: data.value[i].data,
+            type: 'line',
+            smooth: true,
+          });
+          legendList.push(data.value[i].deviceName);
+          // date.push(data.value[i].date);
 
-          for (let j = 0; j < data.value[i].data.length; j++) {
-            if (seriesList.length < j + 1) {
-              seriesList.push({
-                name: data.value[i].data[j].name,
-                data: [data.value[i].data[j].value],
-                type: 'line',
-                smooth: true,
-              });
-            } else {
-              seriesList[j].data.push(data.value[i].data[j].value);
-            }
-            if (legendList.length == 0 || legendList.length < j + 1) {
-              legendList.push(data.value[i].data[j].name);
-            }
-          }
+          // for (let j = 0; j < data.value[i].data.length; j++) {
+          //   if (seriesList.length < j + 1) {
+          //     seriesList.push({
+          //       name: data.value[i].data[j].name,
+          //       data: [data.value[i].data[j].value],
+          //       type: 'line',
+          //       smooth: true,
+          //     });
+          //   } else {
+          //     seriesList[j].data.push(data.value[i].data[j].value);
+          //   }
+          //   if (legendList.length == 0 || legendList.length < j + 1) {
+          //     legendList.push(data.value[i].data[j].name);
+          //   }
+          // }
         }
         const option = {
           legend: {
@@ -76,7 +85,7 @@
               const date = params[0].name;
               const values = params
                 .map((param: any) => {
-                  const unit = data.value.find((d) => d.date === date)?.unit || '';
+                  const unit = data.value.find((d) => d.date === date)?.devicePositionUnit || '';
                   return `<tr>
                           <td>${param.marker}${param.seriesName}</td>
                           <td style="text-align: right;">${param.value} ${unit}</td>
@@ -88,7 +97,7 @@
           },
           xAxis: {
             type: 'category',
-            data: date,
+            data: XData,
           },
           yAxis: {
             type: 'value',
diff --git a/hx-ai-intelligent/src/view/monitor/deviceMonitor/index.vue b/hx-ai-intelligent/src/view/monitor/deviceMonitor/index.vue
index 71bf86b..909b319 100644
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/index.vue
@@ -12,6 +12,7 @@
     tableList: [],
     tableColumns: [],
     graphList: [],
+    XData: [],
   });
 
   // 使用 provide 函数来提供这个响应式对象
diff --git a/hx-ai-intelligent/src/view/monitor/deviceMonitor/page.vue b/hx-ai-intelligent/src/view/monitor/deviceMonitor/page.vue
index d406f8c..4cbf1e7 100644
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/page.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/page.vue
@@ -16,7 +16,7 @@
           </div>
         </div>
         <graph ref="graphRef" v-if="isGraph" />
-        <environment-table ref="tableRef" v-else />
+        <environment-table ref="tableRef" style="width: 100%" v-else />
       </div>
     </a-col>
   </a-row>
diff --git a/hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue b/hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue
index c205a2d..60f77cc 100644
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue
@@ -1,5 +1,10 @@
 <template>
-  <a-table :columns="columns" :data-source="data" bordered />
+  <a-table
+    :columns="columns"
+    :data-source="data"
+    bordered
+    style="width: 100%"
+    :scroll="{ x: 2000 }" />
 </template>
 
 <script lang="ts">
@@ -7,14 +12,14 @@
   import type { TableColumnType } from 'ant-design-vue';
   import { inject } from 'vue';
 
-  // let data: any[] = [];
-
   export default defineComponent({
     name: 'EnvironmentTable',
     setup() {
       let data = ref<any[]>([]);
       let columns = ref<TableColumnType[]>([]);
 
+      let index = ref(0);
+
       interface PageData {
         tableList: any[];
         tableColumns: any[];
@@ -29,13 +34,14 @@
       watch(
         () => pageData as PageData,
         (_newValue, _oldValue) => {
-          data.value = pageData.tableList;
+          // data.value = pageData.tableList;
 
-          let columnA: any[] = [...column];
-          columnA.push(...pageData.tableColumns);
-          columns.value = columnA;
-          // pageData.graphList;
-          // 执行你的逻辑代码
+          // let columnA: any[] = [...column];
+          // columnA.push(...pageData.tableColumns);
+          // columns.value = columnA;
+          // // pageData.graphList;
+          // // 执行你的逻辑代码
+          init();
         },
         { deep: true },
       );
@@ -62,7 +68,13 @@
       const column: TableColumnType[] = [
         {
           title: '序号',
-          dataIndex: 'key',
+          customRender: ({ record, index }) => {
+            // 自定义单元格内容，这里返回序号
+            if (index == 0 || data.value[index - 1].deviceName == record.deviceName) {
+              return index + 1;
+            }
+            return index;
+          },
           customCell: (record, rowIndex) => {
             if (rowIndex == undefined) {
               return {
@@ -70,8 +82,8 @@
                 colSpan: 0,
               };
             }
-            const rowSpan = getRowSpan('name', record, data.value);
-            if (rowIndex != 0 && data.value[rowIndex - 1].key == record.key) {
+            const rowSpan = getRowSpan('deviceName', record, data.value);
+            if (rowIndex != 0 && data.value[rowIndex - 1].deviceName == record.deviceName) {
               return {
                 rowSpan: 0,
                 colSpan: 0,
@@ -82,9 +94,16 @@
             };
           },
         },
+        // {
+        //   title: '序号',
+        //   customRender: (text: any) => {
+        //     index.value += 1;
+        //     return index.value;
+        //   },
+        // },
         {
           title: '设备名称',
-          dataIndex: 'name',
+          dataIndex: 'deviceName',
           customCell: (record, rowIndex) => {
             if (rowIndex == undefined) {
               return {
@@ -92,8 +111,8 @@
                 colSpan: 0,
               };
             }
-            const rowSpan = getRowSpan('name', record, data.value);
-            if (rowIndex != 0 && data.value[rowIndex - 1].name == record.name) {
+            const rowSpan = getRowSpan('deviceName', record, data.value);
+            if (rowIndex != 0 && data.value[rowIndex - 1].deviceName == record.deviceName) {
               return {
                 rowSpan: 0,
                 colSpan: 0,
@@ -106,7 +125,7 @@
         },
         {
           title: '设备点位',
-          dataIndex: 'position',
+          dataIndex: 'devicePositionName',
           customCell: (record, rowIndex) => {
             if (rowIndex == undefined) {
               return {
@@ -114,11 +133,11 @@
                 colSpan: 0,
               };
             }
-            const rowSpan = getRowSpan('position', record, data.value, ['name']);
+            const rowSpan = getRowSpan('devicePositionName', record, data.value, ['deviceName']);
             if (
               rowIndex != 0 &&
-              data.value[rowIndex - 1].name == record.name &&
-              data.value[rowIndex - 1].position == record.position
+              data.value[rowIndex - 1].deviceName == record.deviceName &&
+              data.value[rowIndex - 1].devicePositionName == record.devicePositionName
             ) {
               return {
                 rowSpan: 0,
@@ -132,7 +151,7 @@
         },
         {
           title: '计量单位',
-          dataIndex: 'unit',
+          dataIndex: 'devicePositionUnit',
           customCell: (record, rowIndex) => {
             if (rowIndex == undefined) {
               return {
@@ -140,12 +159,15 @@
                 colSpan: 0,
               };
             }
-            const rowSpan = getRowSpan('unit', record, data.value, ['name', 'position']);
+            const rowSpan = getRowSpan('devicePositionUnit', record, data.value, [
+              'deviceName',
+              'devicePositionName',
+            ]);
             if (
               rowIndex != 0 &&
-              data.value[rowIndex - 1].name == record.name &&
-              data.value[rowIndex - 1].position == record.position &&
-              data.value[rowIndex - 1].unit == record.unit
+              data.value[rowIndex - 1].deviceName == record.deviceName &&
+              data.value[rowIndex - 1].devicePositionName == record.devicePositionName &&
+              data.value[rowIndex - 1].devicePositionUnit == record.devicePositionUnit
             ) {
               return {
                 rowSpan: 0,
@@ -157,14 +179,26 @@
             };
           },
         },
+        {
+          title: '日期',
+          dataIndex: 'time',
+        },
       ];
 
-      onMounted(() => {
+      const init = () => {
+        index.value = 0;
         data.value = pageData.tableList;
 
         let columnA: any[] = [...column];
-        columnA.push(...pageData.tableColumns);
+        let columnB: any[] = [];
+        pageData.tableColumns.forEach((item) => {
+          columnB.push({ title: item, dataIndex: item });
+        });
+        columnA.push(...columnB);
         columns.value = columnA;
+      };
+      onMounted(() => {
+        init();
       });
       return {
         data,
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 dda707f..f087745 100644
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
@@ -46,9 +46,6 @@
       <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>
@@ -60,6 +57,7 @@
   import { inject } from 'vue';
   import { http } from '/nerv-lib/util';
   import { device } from '/@/api/deviceManage';
+  import { deviceMonitor } from '/@/api/monitor';
 
   export default defineComponent({
     // eslint-disable-next-line vue/multi-word-component-names
@@ -163,6 +161,7 @@
         tableList: any[];
         tableColumns: any[];
         graphList: any[];
+        XData: any[];
       }
       const pageData = inject<PageData>('pageData');
       if (!pageData) {
@@ -170,278 +169,180 @@
       }
       // 查询数据后放入pageData
       const getSelect = () => {
-        pageData.tableList = [
-          {
-            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',
-          },
-        ];
-        pageData.tableColumns = [
-          {
-            title: '日期',
-            dataIndex: 'date',
-          },
-          {
-            title: '1:00',
-            dataIndex: '1:00',
-          },
-        ];
-        pageData.graphList = [
-          {
-            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',
-              },
-            ],
-          },
-          {
-            date: '2023-12-06 0:00',
-            unit: 'V',
-            data: [
-              {
-                name: 'AC_002（暖通电表）',
-                value: '15',
-              },
-              {
-                name: 'AC_003（照明电表）',
-                value: '18',
-              },
-              {
-                name: 'AC_004（给排水电表）',
-                value: '15',
-              },
-            ],
-          },
-        ];
-      };
-      // 测试查询 模拟不同数据
-      const getSelect11 = () => {
-        pageData.tableList = [
-          {
-            key: '1',
-            name: 'AC_002（暖通电表）',
-            position: 'A 相电压',
-            unit: 'V',
-            date: '2023-12-01',
-            '1:00': '3626',
-            '2:00': '2222',
-          },
-          {
-            key: '1',
-            name: 'AC_002（暖通电表）',
-            position: 'A 相电压',
-            unit: 'V',
-            date: '2023-12-01',
-            '1:00': '3626',
-            '2:00': '2222',
-          },
-          {
-            key: '2',
-            name: 'AC_003（照明电表）',
-            position: 'A 相电压',
-            unit: 'V',
-            date: '2023-12-01',
-            '1:00': '3626',
-            '2:00': '2222',
-          },
-          {
-            key: '2',
-            name: 'AC_003（照明电表）',
-            position: 'A 相电压',
-            unit: 'V',
-            date: '2023-12-01',
-            '1:00': '3626',
-            '2:00': '2222',
-          },
-          {
-            key: '3',
-            name: 'AC_004（给排水电表）',
-            position: 'A 相电压',
-            unit: 'V',
-            date: '2023-12-01',
-            '1:00': '3626',
-            '2:00': '2222',
-          },
-        ];
-        pageData.tableColumns = [
-          {
-            title: '日期',
-            dataIndex: 'date',
-          },
-          {
-            title: '1:00',
-            dataIndex: '1:00',
-          },
-          {
-            title: '2:00',
-            dataIndex: '2:00',
-          },
-        ];
-        pageData.graphList = [
-          {
-            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（1111111）',
-                value: '14',
-              },
-            ],
-          },
-          {
-            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（1111111）',
-                value: '28',
-              },
-            ],
-          },
-        ];
+        http
+          .post(deviceMonitor.getDeviceGraph, {
+            deviceIds: ['HLlmTZp8-0601-0001', 'HLlmTZp-0804-0001'],
+            devicePointCode: 'ua',
+            devicePointId: 32,
+            endDate: '2024-07-02',
+            startDate: '2024-07-01',
+            timeRate: '2',
+          })
+          .then((res) => {
+            pageData.tableList = res.data.tableList;
+            pageData.tableColumns = res.data.tableHeaderList;
+
+            pageData.graphList = res.data.graphData;
+            pageData.XData = res.data.XData;
+          });
+        // pageData.tableList = [
+        //   {
+        //     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',
+        //   },
+        // ];
+        // pageData.tableColumns = [
+        //   {
+        //     title: '00:00',
+        //     dataIndex: '00:00',
+        //   },
+        // ];
+        // pageData.graphList = [
+        //   {
+        //     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',
+        //       },
+        //     ],
+        //   },
+        //   {
+        //     date: '2023-12-06 0:00',
+        //     unit: 'V',
+        //     data: [
+        //       {
+        //         name: 'AC_002（暖通电表）',
+        //         value: '15',
+        //       },
+        //       {
+        //         name: 'AC_003（照明电表）',
+        //         value: '18',
+        //       },
+        //       {
+        //         name: 'AC_004（给排水电表）',
+        //         value: '15',
+        //       },
+        //     ],
+        //   },
+        // ];
       };
 
       type RangeValue = [Dayjs, Dayjs];
@@ -493,7 +394,6 @@
         dateRange,
         getDianWeiList,
         getSelect,
-        getSelect11,
         disabledDate,
         onCalendarChange,
         onOpenChange,
diff --git a/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/config.ts b/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/config.ts
new file mode 100644
index 0000000..4381d77
--- /dev/null
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/config.ts
@@ -0,0 +1,36 @@
+export const tableColumns = [
+  {
+    title: '序号',
+    customRender: (text: any) => {
+      return text.index + 1;
+    },
+  },
+  {
+    title: '时间',
+    dataIndex: 'areaName',
+  },
+  {
+    title: '温度（℃）',
+    dataIndex: 'point',
+  },
+  {
+    title: '湿度（%）',
+    dataIndex: 'date',
+  },
+  {
+    title: 'CO2浓度（ppm）',
+    dataIndex: 'areaName',
+  },
+  {
+    title: 'PM2.5（μg/m³）',
+    dataIndex: 'point',
+  },
+  {
+    title: 'TVOC（mg/m³）',
+    dataIndex: 'date',
+  },
+  {
+    title: 'TVOC（mg/m³）',
+    dataIndex: '光照度（lux）',
+  },
+];
diff --git a/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue b/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue
new file mode 100644
index 0000000..2c82e13
--- /dev/null
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue
@@ -0,0 +1,250 @@
+<!-- eslint-disable vue/v-on-event-hyphenation -->
+<template>
+  <div>
+    <a-table :columns="tableColumns" :data-source="data" bordered :pagination="false">
+      <template #title>
+        <div
+          style="display: flex; align-items: center; justify-content: space-between; width: 100%">
+          <div style="display: flex; align-items: center; width: 85%">
+            <div style="width: 10%">数据报表</div>
+
+            <a-select
+              v-model:value="frequencyValue"
+              placeholder="请选择频率"
+              style="width: 17%; margin-left: 10px"
+              :options="frequencyOptions" />
+            <!-- <a-date-picker style="width: 13%; margin-left: 10px" v-model:value="timeValue" /> -->
+            <a-range-picker
+              :value="hackValue || dateRange"
+              :disabled-date="disabledDate"
+              @change="onChangeDate"
+              @openChange="onOpenChange"
+              @calendarChange="onCalendarChange"
+              style="width: 17%; margin-left: 10px"
+              :placeholder="['请选择日期', '请选择日期']" />
+            <a-button type="primary" style="margin-left: 10px" @click="getSelect"> 查询 </a-button>
+          </div>
+          <a-button type="primary"> 导出 </a-button>
+        </div>
+      </template>
+    </a-table>
+    <a-pagination
+      :current="queryParams.pageNum"
+      :total="total"
+      :page-size="queryParams.pageSize"
+      style="display: flex; justify-content: center; margin-top: 16px"
+      :show-size-changer="true"
+      :show-quick-jumper="true"
+      @change="onChange" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  // import { http } from '/nerv-lib/util/http';
+  import { Pagination, SelectProps, TreeSelectProps, TableColumnType } from 'ant-design-vue';
+  import { tableColumns } from './config';
+  import type { Dayjs } from 'dayjs';
+  // import { energyConsumption } from '/@/api/carbonEmissionFactorLibrary';
+  defineOptions({
+    energyType: 'AverageData', // 与页面路由name一致缓存才可生效
+    components: {
+      'a-pagination': Pagination,
+    },
+  });
+
+  const typeList = ref();
+  // 采集频率
+  const frequencyValue = ref<string | undefined>();
+
+  // 采集频率list
+  const frequencyOptions = ref<SelectProps['options']>([]);
+
+  const treeData2 = ref<TreeSelectProps['treeData']>([]);
+  const data = ref([]);
+  // let tableColumns = ref<TableColumnType[]>([]);
+
+  const total = ref<number>();
+  const queryParams = ref({
+    pageNum: 1,
+    pageSize: 10,
+  });
+  const orgId = ref('');
+  const result = JSON.parse(sessionStorage.getItem('ORGID')!);
+  orgId.value = result;
+
+  type RangeValue = [Dayjs, Dayjs];
+  const dates = ref<RangeValue>();
+  const hackValue = ref<RangeValue>();
+  const dateRange = ref<[Dayjs, Dayjs] | undefined>();
+
+  const onChangeDate = (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;
+  };
+  // 获取表格数据
+  const getTableList = () => {
+    // fetch(energyConsumption.pageList, queryParams.value).then((res) => {
+    //   data.value = res.data.records;
+    //   total.value = res.data.total;
+    // });
+  };
+  onMounted(() => {
+    frequencyOptions.value = [
+      {
+        value: '1',
+        label: '30分钟',
+      },
+      {
+        value: '2',
+        label: '小时',
+      },
+      {
+        value: '3',
+        label: '天',
+      },
+      {
+        value: '4',
+        label: '月',
+      },
+      {
+        value: '5',
+        label: '年',
+      },
+    ];
+    typeList.value = [
+      {
+        id: 1,
+        value: '温度',
+      },
+      {
+        id: 2,
+        value: 'CO2浓度',
+      },
+      {
+        id: 3,
+        value: 'PM2.5',
+      },
+      {
+        id: 4,
+        value: '光照度',
+      },
+      {
+        id: 5,
+        value: 'TVOC',
+      },
+      {
+        id: 6,
+        value: '湿度',
+      },
+    ];
+    treeData2.value = [
+      {
+        label: '办公区',
+        value: '0-0',
+        children: [
+          {
+            label: '办公一区',
+            value: '0-0-0',
+          },
+          {
+            label: '办公二区',
+            value: '0-0-1',
+          },
+          {
+            label: '办公三区',
+            value: '0-0-2',
+          },
+          {
+            label: '办公四区',
+            value: '0-0-3',
+          },
+        ],
+      },
+      {
+        label: '站厅',
+        value: '0-1',
+
+        children: [
+          {
+            label: '站厅一区',
+            value: '0-1-0',
+            // disabled: true,
+          },
+          {
+            label: '站厅二区',
+            value: '0-1-1',
+          },
+          {
+            label: '站厅三区',
+            value: '0-1-2',
+          },
+          {
+            label: '站厅四区',
+            value: '0-1-3',
+          },
+        ],
+      },
+    ];
+    // let tableColumnsB = [
+    //   {
+    //     title: '1:00',
+    //     dataIndex: '1:00',
+    //   },
+    //   {
+    //     title: '2:00',
+    //     dataIndex: '2:00',
+    //   },
+    //   {
+    //     title: '3:00',
+    //     dataIndex: '3:00',
+    //   },
+    //   {
+    //     title: '4:00',
+    //     dataIndex: '4:00',
+    //   },
+    // ];
+    // let columnA: any[] = [...tableColumnsA];
+    // columnA.push(...tableColumnsB);
+    // tableColumns.value = columnA;
+  });
+
+  getTableList();
+  // 分页器
+  const onChange = (pageNumber: number, size: number) => {
+    queryParams.value.pageNum = pageNumber;
+    queryParams.value.pageSize = size;
+    getTableList();
+  };
+</script>
+<style scoped lang="less">
+  ::v-deep .ant-table-title {
+    display: flex;
+  }
+  ::v-deep .ant-table-container {
+    padding: 0px 16px;
+  }
+</style>
+<style scoped>
+  th.column-money,
+  td.column-money {
+    text-align: right !important;
+  }
+</style>
diff --git a/hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/config.ts b/hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/config.ts
new file mode 100644
index 0000000..6fdccb4
--- /dev/null
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/config.ts
@@ -0,0 +1,20 @@
+export const tableColumns = [
+  {
+    title: '序号',
+    customRender: (text: any) => {
+      return text.index + 1;
+    },
+  },
+  {
+    title: '区域名称',
+    dataIndex: 'areaName',
+  },
+  {
+    title: '点位',
+    dataIndex: 'point',
+  },
+  {
+    title: '日期',
+    dataIndex: 'date',
+  },
+];
diff --git a/hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/index.vue b/hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/index.vue
new file mode 100644
index 0000000..a9342ab
--- /dev/null
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/index.vue
@@ -0,0 +1,243 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div>
+    <a-table
+      :columns="tableColumns"
+      :data-source="data"
+      bordered
+      :pagination="false"
+      :scroll="{ x: 100 }">
+      <template #title>
+        <div
+          style="display: flex; align-items: center; justify-content: space-between; width: 100%">
+          <div style="display: flex; align-items: center; width: 85%">
+            <div style="width: 10%">数据报表</div>
+            <a-select
+              v-model:value="typeValue"
+              placeholder="请选择环境参数"
+              style="width: 15%"
+              :options="typeList" />
+            <a-tree-select
+              v-model:value="quyuvalue"
+              style="width: 15%; margin-left: 10px"
+              :tree-data="treeData2"
+              tree-checkable
+              allow-clear
+              placeholder="请选择区域"
+              tree-node-filter-prop="label"
+              :maxTagCount="1" />
+            <a-select
+              v-model:value="frequencyValue"
+              placeholder="请选择采集频率"
+              style="width: 15%; margin-left: 10px"
+              :options="frequencyOptions" />
+            <a-date-picker style="width: 15%; margin-left: 10px" v-model:value="timeValue" />
+            <a-button type="primary" style="margin-left: 10px" @click="getSelect"> 查询 </a-button>
+          </div>
+          <a-button type="primary"> 导出 </a-button>
+        </div>
+      </template>
+    </a-table>
+    <a-pagination
+      :current="queryParams.pageNum"
+      :total="total"
+      :page-size="queryParams.pageSize"
+      style="display: flex; justify-content: center; margin-top: 16px"
+      :show-size-changer="true"
+      :show-quick-jumper="true"
+      @change="onChange" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, onMounted, defineOptions } from 'vue';
+  // import { http } from '/nerv-lib/util/http';
+  import { Pagination, SelectProps, TreeSelectProps, TableColumnType } from 'ant-design-vue';
+  import { tableColumns as tableColumnsA } from './config';
+  import type { Dayjs } from 'dayjs';
+  // import { energyConsumption } from '/@/api/carbonEmissionFactorLibrary';
+  defineOptions({
+    energyType: 'HistoryData', // 与页面路由name一致缓存才可生效
+    components: {
+      'a-pagination': Pagination,
+    },
+  });
+  const typeList = ref();
+  const typeValue = ref();
+  const quyuvalue = ref<string[]>([]);
+  // 采集频率
+  const frequencyValue = ref<string | undefined>();
+
+  // 采集频率list
+  const frequencyOptions = ref<SelectProps['options']>([]);
+
+  const treeData2 = ref<TreeSelectProps['treeData']>([]);
+  const data = ref([]);
+  const timeValue = ref<Dayjs>();
+  let tableColumns = ref<TableColumnType[]>([]);
+
+  const total = ref<number>();
+  const queryParams = ref({
+    pageNum: 1,
+    pageSize: 10,
+  });
+  const orgId = ref('');
+  const result = JSON.parse(sessionStorage.getItem('ORGID')!);
+  orgId.value = result;
+  // const fetch = (api, params = { orgId }) => {
+  //   return http.post(api, params);
+  // };
+
+  // 年份选择改变触发
+  // const changeYearData = () => {
+  //   queryParams.value.year = selectYear.value.format('YYYY');
+  //   getTableList();
+  // };
+  // 获取表格数据
+  const getTableList = () => {
+    // fetch(energyConsumption.pageList, queryParams.value).then((res) => {
+    //   data.value = res.data.records;
+    //   total.value = res.data.total;
+    // });
+  };
+  onMounted(() => {
+    frequencyOptions.value = [
+      {
+        value: '1',
+        label: '5分钟',
+      },
+      {
+        value: '2',
+        label: '10分钟',
+      },
+      {
+        value: '3',
+        label: '30分钟',
+      },
+      {
+        value: '4',
+        label: '1小时',
+      },
+      {
+        value: '5',
+        label: '天',
+      },
+    ];
+    typeList.value = [
+      {
+        id: 1,
+        value: '温度',
+      },
+      {
+        id: 2,
+        value: 'CO2浓度',
+      },
+      {
+        id: 3,
+        value: 'PM2.5',
+      },
+      {
+        id: 4,
+        value: '光照度',
+      },
+      {
+        id: 5,
+        value: 'TVOC',
+      },
+      {
+        id: 6,
+        value: '湿度',
+      },
+    ];
+    treeData2.value = [
+      {
+        label: '办公区',
+        value: '0-0',
+        children: [
+          {
+            label: '办公一区',
+            value: '0-0-0',
+          },
+          {
+            label: '办公二区',
+            value: '0-0-1',
+          },
+          {
+            label: '办公三区',
+            value: '0-0-2',
+          },
+          {
+            label: '办公四区',
+            value: '0-0-3',
+          },
+        ],
+      },
+      {
+        label: '站厅',
+        value: '0-1',
+
+        children: [
+          {
+            label: '站厅一区',
+            value: '0-1-0',
+            // disabled: true,
+          },
+          {
+            label: '站厅二区',
+            value: '0-1-1',
+          },
+          {
+            label: '站厅三区',
+            value: '0-1-2',
+          },
+          {
+            label: '站厅四区',
+            value: '0-1-3',
+          },
+        ],
+      },
+    ];
+    let tableColumnsB = [
+      {
+        title: '1:00',
+        dataIndex: '1:00',
+      },
+      {
+        title: '2:00',
+        dataIndex: '2:00',
+      },
+      {
+        title: '3:00',
+        dataIndex: '3:00',
+      },
+      {
+        title: '4:00',
+        dataIndex: '4:00',
+      },
+    ];
+    let columnA: any[] = [...tableColumnsA];
+    columnA.push(...tableColumnsB);
+    tableColumns.value = columnA;
+  });
+
+  getTableList();
+  // 分页器
+  const onChange = (pageNumber: number, size: number) => {
+    queryParams.value.pageNum = pageNumber;
+    queryParams.value.pageSize = size;
+    getTableList();
+  };
+</script>
+<style scoped lang="less">
+  ::v-deep .ant-table-title {
+    display: flex;
+  }
+  ::v-deep .ant-table-container {
+    padding: 0px 16px;
+  }
+</style>
+<style scoped>
+  th.column-money,
+  td.column-money {
+    text-align: right !important;
+  }
+</style>
diff --git a/hx-ai-intelligent/src/view/monitor/environmentMonitor/index.vue b/hx-ai-intelligent/src/view/monitor/environmentMonitor/index.vue
index 48caad7..485a9d9 100644
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/index.vue
@@ -4,14 +4,16 @@
     <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>
   </a-tabs>
-  <!-- <ns-view-list-table v-bind="tableConfig" v-if="activeKey == '1'" /> -->
 
   <aggregate-data ref="aggregateDataRef" v-if="activeKey == '1'" style="height: 85%" />
+  <history-data v-if="activeKey == '2'" />
+  <average-data v-if="activeKey == '3'" />
 </template>
 <script lang="ts" setup>
   import { ref } from 'vue';
-  import { tableConfig } from './config';
   import aggregateData from './aggregateData/index.vue';
+  import historyData from './historyData/index.vue';
+  import averageData from './averageData/index.vue';
 
   const aggregateDataRef = ref();