1.监控中心 - 设备监测根据UI设计图进行页面优化

2.监控中心 - 能耗监测根据UI设计图进行页面优化 3.监控中心 - 环境监测修改bug，添加loading
2024-08-13 15:07:46 +08:00
parent 56c903ca86
commit 7bd8721e32
18 changed files with 818 additions and 645 deletions
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/graph/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/graph/index.vue
@@ -74,10 +74,19 @@
          // }
        }
        const option = {
+          grid: {
+            top: 60, // 上内边距
+            bottom: 40, // 下内边距
+            left: 10, // 左内边距
+            right: 60, // 右内边距
+            containLabel: true, // 自动调整 grid 以适应标签
+          },
          legend: {
            data: legendList,
            orient: 'horizontal',
-            bottom: 30,
+            top: 30,
+            right: 130,
+            icon: 'rect',
          },
          tooltip: {
            trigger: 'axis',
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/page.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/page.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <a-row type="flex">
+  <a-row type="flex" style="display: flex; position: relative">
    <a-col :span="4">
      <div style="padding: 0 20px; width: 100%; height: 100%">
        <tree ref="treeRef" />
@@ -9,7 +9,7 @@
    <a-col :span="20">
      <div style="width: 100%; height: 100%">
        <div class="ns-right-title">
-          <span>历史数据</span>
+          <span><ns-icon name="title" size="11" style="margin-right: 3px" />历史数据</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" />
@@ -65,9 +65,9 @@
    align-items: center;
    user-select: text;
    margin-bottom: 5px;
-    padding-bottom: 10px;
+    padding-bottom: 60px;
    padding-top: 10px;
-    border-bottom: 1px solid #e9e9e9;
+    // border-bottom: 1px solid #e9e9e9;

    > span {
      padding-left: 10px;
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue
@@ -3,19 +3,41 @@
    :columns="columns"
    :data-source="data"
    bordered
-    style="width: 100%"
-    :scroll="{ x: 2000 }" />
+    :pagination="false"
+    style="width: 99%; height: 75%"
+    :scroll="{ x: 2000, y: 450 }" />
+  <a-pagination
+    :total="total"
+    :show-total="(total, range) => ` 共 ${total} 条`"
+    show-size-changer
+    show-quick-jumper
+    @change="onChange"
+    style="display: flex; justify-content: right; margin-top: 10px; margin-right: 30px" />
 </template>

 <script lang="ts">
  import { defineComponent, watch, ref, onMounted } from 'vue';
  import type { TableColumnType } from 'ant-design-vue';
+  import { Pagination } from 'ant-design-vue';
  import { inject } from 'vue';

+  // defineOptions({
+  //   name: 'EnvironmentTable', // 与页面路由name一致缓存才可生效
+  //   components: {
+  //     'a-pagination': Pagination,
+  //   },
+  // });
  export default defineComponent({
    name: 'EnvironmentTable',
+    components: {
+      'a-pagination': Pagination,
+    },
    setup() {
+      const total = ref<number>();
+      // 分页后的展示数据
      let data = ref<any[]>([]);
+      // 原始数据
+      let dataList = ref<any[]>([]);
      let columns = ref<TableColumnType[]>([]);

      let index = ref(0);
@@ -30,6 +52,12 @@
      if (!pageData) {
        throw new Error('pageData is not provided');
      }
+      // 分页器
+      const onChange = (pageNumber: number, size: number) => {
+        const start = (pageNumber - 1) * size;
+        const end = start + size;
+        data.value = dataList.value.slice(start, end);
+      };
      // 监听 pageData 的变化
      watch(
        () => pageData as PageData,
@@ -69,7 +97,6 @@
        {
          title: '序号',
          customRender: ({ record, index }) => {
-            debugger;
            // 自定义单元格内容，这里返回序号
            if (index == 0) {
              data.value[index].index = 1;
@@ -194,7 +221,7 @@

      const init = () => {
        index.value = 0;
-        data.value = pageData.tableList;
+        dataList.value = pageData.tableList;

        let columnA: any[] = [...column];
        let columnB: any[] = [];
@@ -203,6 +230,8 @@
        });
        columnA.push(...columnB);
        columns.value = columnA;
+        total.value = dataList.value.length;
+        onChange(1, 10);
      };
      onMounted(() => {
        init();
@@ -212,6 +241,8 @@
        column,
        columns,
        pageData,
+        total,
+        onChange,
      };
    },
  });
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
@@ -2,13 +2,16 @@
 <template>
  <div class="parent-container">
    <div class="ns-tree-title">
+      <ns-icon name="deviceType" size="11" style="margin-right: 3px" />
      <span>设备列表</span>
    </div>
    <a-tree-select
+      ref="select"
      v-model:value="value"
      style="width: 100%"
      :tree-line="treeLine && { showLeafIcon }"
      :tree-data="treeData1"
+      allowClear
      @change="changeDeviceType" />

    <a-spin :spinning="treeLoading">
@@ -17,23 +20,35 @@
        v-model:selectedKeys="selectedKeys"
        v-model:checkedKeys="checkedKeys"
        checkable
-        :height="340"
+        :height="560"
        style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
        :tree-data="treeData2" />
    </a-spin>

-    <div class="fixed-bottom">
-      <a-divider />
+    <!-- <div class="fixed-bottom"> -->
+    <div>
+      <!-- <a-divider /> -->
      <a-select
-        ref="select"
        v-model:value="selectedValue"
        placeholder="请选择点位"
-        style="width: 100%; margin-bottom: 10px"
+        :style="{
+          top: '50px',
+          left: `${divWidth + 40}px`,
+          zIndex: 9,
+          position: 'absolute',
+          width: `${divWidth}px`,
+        }"
        :options="options1" />
      <a-select
        v-model:value="frequencyValue"
        placeholder="请选择频率"
-        style="width: 100%; margin-bottom: 10px"
+        :style="{
+          top: '50px',
+          left: `${divWidth * 2 + 50}px`,
+          zIndex: 9,
+          position: 'absolute',
+          width: `${divWidth}px`,
+        }"
        :options="options2" />
      <a-range-picker
        :value="hackValue || dateRange"
@@ -41,9 +56,23 @@
        @change="onChange"
        @openChange="onOpenChange"
        @calendarChange="onCalendarChange"
-        style="width: 100%; margin-bottom: 10px"
+        :style="{
+          top: '50px',
+          left: `${divWidth * 3 + 60}px`,
+          zIndex: 9,
+          position: 'absolute',
+          width: `${divWidth}px`,
+        }"
        :placeholder="['请选择日期', '请选择日期']" />
-      <a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect">
+      <a-button
+        type="primary"
+        :style="{
+          top: '50px',
+          left: `${divWidth * 4 + 70}px`,
+          zIndex: 9,
+          position: 'absolute',
+        }"
+        @click="getSelect">
        查询
      </a-button>
    </div>
@@ -52,18 +81,36 @@

 <script lang="ts">
  import type { TreeSelectProps, SelectProps } from 'ant-design-vue';
-  import { defineComponent, ref, onMounted, watch } from 'vue';
-  import { Dayjs } from 'dayjs';
+  import { defineComponent, ref, onMounted, onUnmounted, watch } from 'vue';
+  import dayjs, { Dayjs } from 'dayjs';
  import { inject } from 'vue';
  import { http } from '/nerv-lib/util';
  import { device } from '/@/api/deviceManage';
  import { deviceMonitor } from '/@/api/monitor';
  import { Item } from 'ant-design-vue/lib/menu';
+  import { dict, getEnum } from '/@/api';

  export default defineComponent({
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Tree',
    setup() {
+      const select = ref<HTMLElement | null>(null);
+      const divWidth = ref(0); // 用于存储 div 的宽度
+
+      // 获取 div 的宽度
+      // const getDivWidth = () => {
+      //   if (select.value) {
+      //     divWidth.value = select.value.$el.offsetWidth;
+      //   }
+      // };
+      // 使用 ResizeObserver 监听宽度变化
+      const getDivWidth = new ResizeObserver(() => {
+        if (select.value?.$el) {
+          divWidth.value = select.value.$el.offsetWidth;
+          console.log('宽度变化:', divWidth.value);
+        }
+      });
+
      const treeLoading = ref(false);
      const treeLine = ref(true);
      const showLeafIcon = ref(false);
@@ -93,7 +140,7 @@
        treeLoading.value = true;
        http
          .post(device.queryDevicePage, {
-            code: val,
+            deviceCode: val,
            orgId: orgId.value,
            pageNum: 1,
            pageSize: 1000,
@@ -102,7 +149,7 @@
            if (!val) {
              val = '999999999';
            }
-            if (!label) {
+            if (!label || label.length == 0) {
              label = ['所有设备'];
            }
            let records = res.data.records;
@@ -113,6 +160,9 @@
            let a: TreeSelectProps['treeData'] = [{ title: label[0], key: val, children: records }];
            treeData2.value = a;
            expandedKeys.value = [val];
+            if (records && records.length > 2) {
+              checkedKeys.value = [records[0].deviceInfoCode, records[1].deviceInfoCode];
+            }
          })
          .finally(() => {
            treeLoading.value = false;
@@ -125,27 +175,37 @@

      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小时',
-        },
+        // {
+        //   value: '1',
+        //   label: '5分钟',
+        // },
+        // {
+        //   value: '2',
+        //   label: '10分钟',
+        // },
+        // {
+        //   value: '3',
+        //   label: '30分钟',
+        // },
+        // {
+        //   value: '4',
+        //   label: '1小时',
+        // },
      ]);
      const selectedValue = ref<string | undefined>();
      const frequencyValue = ref<string | undefined>();
-      const dateRange = ref<[Dayjs, Dayjs] | undefined>();
+      const dateRange = ref<[Dayjs, Dayjs] | undefined>([dayjs(), dayjs()]);

+      interface PageData {
+        tableList: any[];
+        tableColumns: any[];
+        graphList: any[];
+        XData: any[];
+      }
+      const pageData = inject<PageData>('pageData');
+      if (!pageData) {
+        throw new Error('pageData is not provided');
+      }
      const getDianWeiList = () => {
        if (checkedKeys.value && checkedKeys.value.length > 0) {
          http
@@ -159,6 +219,15 @@
                res.data.forEach((item: any) => {
                  options1.value?.push({ value: item.code, label: item.name });
                });
+                selectedValue.value = options1.value[0].value;
+                if (
+                  pageData.tableList.length == 0 ||
+                  pageData.tableColumns.length == 0 ||
+                  pageData.graphList.length == 0 ||
+                  pageData.XData.length == 0
+                ) {
+                  getSelect();
+                }
              }

              // options1.value = res.data;
@@ -177,18 +246,18 @@
        // ];
      };

-      interface PageData {
-        tableList: any[];
-        tableColumns: any[];
-        graphList: any[];
-        XData: any[];
-      }
-      const pageData = inject<PageData>('pageData');
-      if (!pageData) {
-        throw new Error('pageData is not provided');
-      }
      // 查询数据后放入pageData
      const getSelect = () => {
+        if (!startDate.value || !endDate.value) {
+          // 获取当天的时间
+          const today = new Date();
+          const year = today.getFullYear();
+          const month = String(today.getMonth() + 1).padStart(2, '0'); // getMonth() 返回的月份是0-11
+          const day = String(today.getDate()).padStart(2, '0');
+
+          startDate.value = year + '-' + month + '-' + day;
+          endDate.value = year + '-' + month + '-' + day;
+        }
        http
          .post(deviceMonitor.getDeviceGraph, {
            deviceIds: checkedKeys.value,
@@ -196,7 +265,7 @@

            endDate: endDate.value,
            startDate: startDate.value,
-            timeRate: '2',
+            timeRate: frequencyValue.value,
          })
          .then((res) => {
            pageData.tableList = res.data.tableList;
@@ -240,9 +309,32 @@
        dates.value = val;
      };

-      onMounted(() => {
+      onMounted(async () => {
+        if (select.value?.$el) {
+          divWidth.value = select.value.$el.offsetWidth;
+          getDivWidth.observe(select.value.$el);
+        }
+        // getDivWidth();
+        // window.addEventListener('resize', getDivWidth); // 监听窗口大小变化
+
+        let frequency = await getEnum({ params: { enumType: 'TimeFrequencyEnum' } });
+        options2.value = frequency.data;
+        if (options2.value && options2.value.length > 0) {
+          frequencyValue.value = options2.value[options2.value.length - 1].value;
+        }
        changeDeviceType(null, null);
-        getSelect();
+        // getSelect();
+      });
+      // 在组件卸载时移除监听器
+      // onUpdated(() => {
+      //   window.removeEventListener('resize', getDivWidth);
+      // });
+      // 在组件卸载时停止监听
+      onUnmounted(() => {
+        if (select.value?.$el) {
+          getDivWidth.unobserve(select.value.$el);
+        }
+        getDivWidth.disconnect();
      });
      // 监听 pageData 的变化
      watch(
@@ -277,6 +369,8 @@
        pageData,
        changeDeviceType,
        treeLoading,
+        select,
+        divWidth,
      };
    },
  });
@@ -295,14 +389,19 @@
    }
  }
  .parent-container {
-    position: relative;
+    // position: relative;
    height: 100%;
  }

-  .fixed-bottom {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    margin-bottom: 10px;
-  }
+  // .fixed-bottom {
+  //   // display: flex;
+  //   // top: 50px;
+  //   // left: 340px;
+  //   // z-index: 9;
+
+  //   // position: absolute;
+  //   // bottom: 0;
+  //   width: 100%;
+  //   // margin-bottom: 10px;
+  // }
 </style>
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/analysisGraph/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/analysisGraph/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-row type="flex" style="height: 92%">
+  <a-row type="flex" style="height: 90%">
    <a-col :span="8" style="height: 100%">
      <div
        style="
@@ -14,14 +14,16 @@
          style="
            padding-bottom: 10px;
            width: 40%;
-            height: 4%;
-            padding-left: 30px;
+            height: 20%;
+            padding-right: 30px;
            padding-top: 10px;
+            display: flex;
+            float: right;
          ">
          <a-radio-button value="1" style="width: 50%; text-align: center"> 同比 </a-radio-button>
          <a-radio-button value="2" style="width: 50%; text-align: center"> 环比 </a-radio-button>
        </a-radio-group>
-        <div ref="analysisGraphchart" style="width: 100%; height: 95%"></div>
+        <div ref="analysisGraphchart" style="width: 100%; height: 95%; padding-top: 10%"></div>
      </div>
    </a-col>
    <a-col :span="16" style="height: 100%">
@@ -37,7 +39,7 @@
        ref="analysisGraphBarchart"
        style="
          width: 98%;
-          height: 58%;
+          height: 57%;
          box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5);
          margin: 1%;
        "></div>
@@ -179,7 +181,7 @@

          const option = {
            grid: {
-              top: 60,
+              top: 80,
              bottom: 20,
            },
            dataZoom: [
@@ -243,13 +245,22 @@
          for (let i = 0; i < data.value.length; i++) {
            dateX.push(data.value[i].name);

-            seriesdata.push({ value: data.value[i].value, name: data.value[i].name });
+            seriesdata.push({
+              value: data.value[i].value,
+              name: data.value[i].name,
+              radius: ['70%', '90%'],
+            });
          }
          var seriesList = [
            {
              // name: data.value[0].energyType,
              data: seriesdata,
              type: 'pie',
+              // // 可单选
+              selectedMode: true,
+              // 选中扇区的偏移距离
+              clockwise: '10',
+              // hoverAnimation: true,
              // 圆环内径和外径
              radius: ['70%', '90%'],
              center: ['30%', '50%'], // 调整环形图的位置，百分比表示相对于容器的宽高
@@ -264,7 +275,7 @@
                // formatter: '{b}',
                position: 'outside', // 确保标签在环形图外部
                // alignTo: 'edge',
-                formatter: '{c}' + data.value[0].energyUnit + '\n{d}%',
+                formatter: '{c}' + data.value[0].unit + '\n{d}%',
                alignTo: 'labelLine',
                distanceToLabelLine: 5, // 调整标签和引导线之间的距离
                distance: 10, // 调整标签距离图形的距离
@@ -312,10 +323,12 @@
          };

          chartRight1 = echarts.init(analysisGraphRingchart.value);
-          chartRight1.setOption(option);
+          // chartRight1.setOption(option);

          // 默认点击第一个
          if (seriesdata.length > 0) {
+            seriesdata[0].radius = ['50%', '100%'];
+            chartRight1.setOption(option);
            drawRight2(seriesdata[0]);
          }
          chartRight1.on('click', function (params) {
@@ -368,10 +381,10 @@
              },
            },
          },
-          grid: {
-            top: 20,
-            bottom: 60,
-          },
+          // grid: {
+          //   top: 20,
+          //   bottom: 60,
+          // },
          xAxis: {
            type: 'category',
            axisLine: { show: false },
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/analysisTable/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/analysisTable/index.vue
@@ -4,6 +4,7 @@
    :columns="columns"
    :data-source="data"
    bordered
+    :pagination="false"
    :row-selection="rowSelection">
    <template #bodyCell="{ column, record }">
      <template v-if="column.title === '操作'">
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue
@@ -69,12 +69,12 @@
          //   }
          // }
          seriesList.push({
-            name: data.value[i].deviceName,
+            name: data.value[i].name,
            data: data.value[i].data,
            type: 'line',
            smooth: true,
          });
-          legendList.push(data.value[i].deviceName);
+          legendList.push(data.value[i].name);
        }
        const option = {
          legend: {
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/graphTable/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/graphTable/index.vue
@@ -3,18 +3,34 @@
    :columns="columns"
    :data-source="data"
    bordered
-    style="width: 100%"
+    style="width: 100%; height: 90%"
+    :pagination="false"
    :scroll="{ x: '2000' }" />
+  <a-pagination
+    :total="total"
+    :show-total="(total, range) => ` 共 ${total} 条`"
+    show-size-changer
+    show-quick-jumper
+    @change="onChange"
+    style="display: flex; justify-content: right; margin-top: 10px; margin-right: 30px" />
 </template>

 <script lang="ts">
  import { defineComponent, watch, inject, ref, onMounted } from 'vue';
  import type { TableColumnType } from 'ant-design-vue';
+  import { Pagination } from 'ant-design-vue';

  export default defineComponent({
-    name: 'EnvironmentTable',
+    // name: 'EnvironmentTable',
+    components: {
+      'a-pagination': Pagination,
+    },
    setup() {
+      const total = ref<number>();
+      // 分页后的展示数据
      let data = ref<any[]>([]);
+      // 原始数据
+      let dataList = ref<any[]>([]);
      let columns = ref<TableColumnType[]>([]);

      interface PageData {
@@ -72,7 +88,7 @@
      const column: TableColumnType[] = [
        {
          title: '设备/组名',
-          dataIndex: 'deviceName',
+          dataIndex: 'name',
          customCell: (record, rowIndex) => {
            if (rowIndex == undefined) {
              return {
@@ -80,8 +96,8 @@
                colSpan: 0,
              };
            }
-            const rowSpan = getRowSpan('deviceName', record, data.value);
-            if (rowIndex != 0 && data.value[rowIndex - 1].deviceName == record.deviceName) {
+            const rowSpan = getRowSpan('name', record, data.value);
+            if (rowIndex != 0 && data.value[rowIndex - 1].name == record.name) {
              return {
                rowSpan: 0,
                colSpan: 0,
@@ -102,8 +118,8 @@
                colSpan: 0,
              };
            }
-            const rowSpan = getRowSpan('selectedValueName', record, data.value, ['deviceName']);
-            if (rowIndex != 0 && data.value[rowIndex - 1].deviceName == record.deviceName) {
+            const rowSpan = getRowSpan('selectedValueName', record, data.value, ['name']);
+            if (rowIndex != 0 && data.value[rowIndex - 1].name == record.name) {
              return {
                rowSpan: 0,
                colSpan: 0,
@@ -116,8 +132,14 @@
        },
      ];

+      // 分页器
+      const onChange = (pageNumber: number, size: number) => {
+        const start = (pageNumber - 1) * size;
+        const end = start + size;
+        data.value = dataList.value.slice(start, end);
+      };
      const init = () => {
-        data.value = pageData.graphTableList;
+        dataList.value = pageData.graphTableList;

        let columnA: any[] = [...column];
        let columnB: any[] = [];
@@ -126,6 +148,8 @@
        });
        columnA.push(...columnB);
        columns.value = columnA;
+        total.value = dataList.value.length;
+        onChange(1, 10);
      };
      onMounted(() => {
        init();
@@ -139,6 +163,8 @@
        data,
        column,
        columns,
+        total,
+        onChange,
      };
    },
  });
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
@@ -1,10 +1,6 @@
 <!-- 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-row type="flex" style="height: 92%; display: flex; position: relative">
    <a-col :span="4">
      <div style="padding: 0 20px; width: 100%; height: 100%">
        <tree ref="treeRef" />
@@ -12,19 +8,31 @@
    </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 style="height: 22%">
+          <div class="ns-right-title">
+            <a-tabs
+              v-model:activeKey="activeKey"
+              style="height: 8%; width: 100%"
+              @change="changeActive">
+              <a-tab-pane key="1" tab="图表" />
+              <a-tab-pane key="2" tab="分析" />
+            </a-tabs>
+            <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>
+          <span style="padding-left: 10px; line-height: 20px"
+            ><ns-icon name="title" size="11" style="margin-right: 3px" />统计数据</span
+          >
        </div>
-        <div v-if="activeKey == '1'" style="height: 90%; width: 100%">
+
+        <div v-if="activeKey == '1'" style="height: 82%; width: 100%">
          <graph-graph ref="graphRef" v-if="isGraph" />
          <environment-table ref="tableRef" v-else style="width: 100%" />
        </div>
-        <div v-else style="height: 90%">
-          <analysis-graph ref="analysisGraphRef" v-if="isGraph" />
+        <div v-else style="height: 82%; width: 100%">
+          <analysis-graph ref="analysisGraphRef" v-if="isGraph" style="height: 100%; width: 100%" />
          <analysis-table ref="analysisTableRef" v-else />
        </div>
      </div>
@@ -67,6 +75,13 @@
      }
    }
  };
+  const changeActive = () => {
+    if (activeKey.value == '1') {
+      treeRef.value.getSelectGraph(activeKey.value);
+    } else {
+      treeRef.value.getSelectAnalyse(activeKey.value);
+    }
+  };

  function change() {
    isGraph.value = !isGraph.value;
@@ -80,21 +95,18 @@

 <style lang="less" scoped>
  .ns-right-title {
+    position: relative;
    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;
-    }
+    // border-bottom: 1px solid #e9e9e9;
  }
  .button {
+    position: absolute;
+    right: 0;
    display: inline-block;
    padding-right: 10px;
  }
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
@@ -2,16 +2,12 @@
 <template>
  <div class="parent-container">
    <div class="ns-tree-title">
+      <ns-icon name="common" size="11" style="margin-right: 3px" />
      <span>数据点位</span>
    </div>
-    <a-select
-      ref="select"
-      v-model:value="selectedValue"
-      placeholder="请选择能耗类型"
-      style="width: 100%; margin-bottom: 10px"
-      :options="options1"
-      @change="changeEnergyType" />
+
    <a-radio-group
+      ref="select"
      v-model:value="mode"
      @change="changeMode"
      style="padding-bottom: 10px; width: 100%">
@@ -32,7 +28,7 @@
        v-model:selectedKeys="selectedKeys"
        v-model:checkedKeys="checkedKeys"
        checkable
-        :height="300"
+        :height="600"
        style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
        :tree-data="treeData2">
        <!-- <template #title="{ title }">
@@ -51,38 +47,104 @@
      </a-tree>
    </a-spin>

-    <div class="fixed-bottom">
-      <a-divider />
+    <!-- <div class="fixed-bottom"> -->
+    <div>
+      <!-- <a-divider /> -->
      <a-select
-        v-model:value="dateTypeValue"
+        v-model:value="selectedValue"
+        placeholder="请选择能耗类型"
+        :style="{
+          top: '100px',
+          left: `${divWidth + 40}px`,
+          zIndex: 9,
+          position: 'absolute',
+          width: `${divWidth}px`,
+        }"
+        :options="options1"
+        @change="changeEnergyType" />
+      <a-select
+        v-model:value="frequencyValue"
        placeholder="请选择日期类型"
-        style="width: 100%; margin-bottom: 10px"
-        :options="options2" />
+        :style="{
+          top: '100px',
+          left: `${divWidth * 2 + 50}px`,
+          zIndex: 9,
+          position: 'absolute',
+          width: `${divWidth}px`,
+        }"
+        :options="options2"
+        @change="changeFrequency" />
      <a-range-picker
-        style="width: 100%; margin-bottom: 10px"
+        :style="{
+          top: '100px',
+          left: `${divWidth * 3 + 60}px`,
+          zIndex: 9,
+          position: 'absolute',
+          width: `${divWidth}px`,
+        }"
        @change="onChangeDate"
        v-model:value="dateValue"
-        :picker="dateTypeValue" />
-      <a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect">
+        :picker="dateTypeValue"
+        v-if="activeKey == '1'" />
+
+      <a-date-picker
+        :style="{
+          top: '100px',
+          left: `${divWidth * 3 + 60}px`,
+          zIndex: 9,
+          position: 'absolute',
+          width: `${divWidth}px`,
+        }"
+        @change="onChangeDate"
+        v-model:value="timeValue"
+        :picker="dateTypeValue"
+        v-if="activeKey == '2'" />
+      <a-button
+        type="primary"
+        :style="{
+          top: '100px',
+          left: `${divWidth * 4 + 70}px`,
+          zIndex: 9,
+          position: 'absolute',
+        }"
+        @click="getSelect(null)">
        查询
      </a-button>
    </div>
+
+    <!-- </div> -->
  </div>
 </template>

 <script lang="ts">
  import type { TreeSelectProps, SelectProps } from 'ant-design-vue';
-  import { defineComponent, ref, onMounted, inject } from 'vue';
+  import { defineComponent, ref, onMounted, inject, onUnmounted } from 'vue';
  import dayjs, { Dayjs } from 'dayjs';
  import { http } from '/nerv-lib/util';
  import { device, group } from '/@/api/deviceManage';
  import { energyMonitor } from '/@/api/monitor';
-  import { dict } from '/@/api';
+  import { dict, getEnum } from '/@/api';

  export default defineComponent({
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Tree',
    setup() {
+      const select = ref<HTMLElement | null>(null);
+      const divWidth = ref(0); // 用于存储 div 的宽度
+
+      // 获取 div 的宽度
+      // const getDivWidth = () => {
+      //   if (select.value) {
+      //     divWidth.value = select.value.$el.offsetWidth;
+      //   }
+      // };
+      // 使用 ResizeObserver 监听宽度变化
+      const getDivWidth = new ResizeObserver(() => {
+        if (select.value?.$el) {
+          divWidth.value = select.value.$el.offsetWidth;
+          console.log('宽度变化:', divWidth.value);
+        }
+      });
      const value = ref<string>();
      const deviceName = ref<string>();
      const pointName = ref<string>();
@@ -104,10 +166,17 @@
      // 能耗类型
      const selectedValue = ref<string | number | null | undefined>();
      // 日期类型
-      const dateTypeValue = ref<string | undefined>('month');
+      const dateTypeValue = ref();
+
+      const frequencyValue = ref();
+
+      const activeKey = ref('1');
+
      // 时间
      const dateValue = ref<[Dayjs, Dayjs] | undefined>([dayjs(), dayjs()]);

+      const timeValue = ref<Dayjs | undefined>(dayjs());
+
      // 页面初始化参数
      const getOptionsList = async () => {
        try {
@@ -122,20 +191,26 @@
        } catch (error) {
          console.error('Failed to fetch options:', error);
        }
-        options2.value = [
-          {
-            value: 'date',
-            label: '日',
-          },
-          {
-            value: 'month',
-            label: '月',
-          },
-          {
-            value: 'year',
-            label: '年',
-          },
-        ];
+        let frequency = await getEnum({ params: { enumType: 'EnergyTimeEnum' } });
+        options2.value = frequency.data;
+        if (options2.value && options2.value.length > 0) {
+          dateTypeValue.value = 'date';
+          frequencyValue.value = options2.value[0].value;
+        }
+        // options2.value = [
+        //   {
+        //     value: 'date',
+        //     label: '日',
+        //   },
+        //   {
+        //     value: 'month',
+        //     label: '月',
+        //   },
+        //   {
+        //     value: 'year',
+        //     label: '年',
+        //   },
+        // ];
      };
      interface PageData {
        // 图表 表格数据
@@ -156,7 +231,7 @@

      // 选择能耗类型
      const changeEnergyType = () => {
-        if (selectedValue.value == '碳排量') {
+        if (selectedValue.value == 'CARBON_EMISSIONS') {
          shebei.value = true;
          mode.value = '1';
        } else {
@@ -166,23 +241,55 @@
      };
      const startDate = ref<String>();
      const endDate = ref<String>();
-      const onChangeDate = (val: RangeValue, dateStrings: any) => {
+
+      const startDateAnalyse = ref<String>();
+      const endDateAnalyse = ref<String>();
+
+      const onChangeDate = (val: any, dateStrings: any) => {
        if (dateStrings && dateStrings.length === 2) {
          dateValue.value = val;
          startDate.value = dateStrings[0];
          endDate.value = dateStrings[1];
+        } else if (dateStrings) {
+          timeValue.value = val;
+          startDateAnalyse.value = dateStrings;
+          endDateAnalyse.value = dateStrings;
        }
      };
-      const getSelect = () => {
-        // const date = dateValue.value;
-        // let year = 0;
-        // let month = 0;
-        // if (date) {
-        //   year = date.year();
-        //   month = date.month() + 1;
-        // } else {
-        //   return;
-        // }
+      const changeFrequency = (value) => {
+        if (frequencyValue.value == 0) {
+          dateTypeValue.value = 'date';
+        } else if (frequencyValue.value == 1) {
+          dateTypeValue.value = 'month';
+        } else if (frequencyValue.value == 2) {
+          dateTypeValue.value = 'year';
+        }
+      };
+
+      const getSelect = (key: any) => {
+        let keyV = null;
+        if (key) {
+          keyV = key;
+        }
+        if (activeKey.value == '1') {
+          getSelectGraph(keyV);
+        } else {
+          getSelectAnalyse(keyV);
+        }
+      };
+
+      const getSelectGraph = (key: any) => {
+        if (key) {
+          activeKey.value = key;
+          if (
+            pageData.graphTableList.length > 0 &&
+            pageData.graphTableColumns.length > 0 &&
+            pageData.graphGraphList.length > 0
+          ) {
+            return;
+          }
+        }
+
        let startTime = '';
        let endTime = '';
        if (startDate.value && endDate.value) {
@@ -222,28 +329,77 @@
            energyType: selectedValue.value,
            orgId: orgId.value,

-            dateType: dateTypeValue.value == 'year' ? 0 : 1, //0 年 1月
+            dateType: frequencyValue.value,
            deviceInfoCodes: mode.value == '0' ? checkedKeys.value : [], // 设备需要传 device_info_code
            energyQueryType: mode.value, // 0 设备  1 节点

            nodeIds: mode.value == '1' ? checkedKeys.value : [],
-            startTime: startTime,
-            endTime: endTime,
+            startDate: startTime,
+            endDate: endTime,
          })
          .then((res) => {
-            let selectedValueName = '';
-            options1.value?.forEach((item) => {
-              if (item.value == selectedValue.value) {
-                selectedValueName = item.label;
-              }
-            });
-            res.data.tableList.forEach((item) => {
-              item.selectedValueName = selectedValueName;
-            });
-            pageData.graphTableList = res.data.tableList;
-            pageData.graphTableColumns = res.data.tableHeaderList;
-            pageData.graphGraphList = res.data.graghData;
+            if (res.data && res.data.tableList && res.data.tableHeaderList && res.data.graghData) {
+              let selectedValueName = '';
+              options1.value?.forEach((item) => {
+                if (item.value == selectedValue.value) {
+                  selectedValueName = item.label;
+                }
+              });
+              res.data.tableList.forEach((item) => {
+                item.selectedValueName = selectedValueName;
+              });
+              pageData.graphTableList = res.data.tableList;
+              pageData.graphTableColumns = res.data.tableHeaderList;
+              pageData.graphGraphList = res.data.graghData;
+            } else {
+              pageData.graphTableList = [];
+              pageData.graphTableColumns = [];
+              pageData.graphGraphList = [];
+            }
          });
+      };
+      const getSelectAnalyse = (key: any) => {
+        if (key) {
+          activeKey.value = key;
+          if (pageData.analysisGraphList.length > 0 && pageData.analysisTableList.length > 0) {
+            return;
+          }
+        }
+        let startTime = '';
+        let endTime = '';
+        if (startDateAnalyse.value != endDateAnalyse.value) {
+          endDate.value = startDateAnalyse.value;
+        }
+        if (startDateAnalyse.value && endDateAnalyse.value) {
+          if (dateTypeValue.value == 'month') {
+            startTime = startDateAnalyse.value + '-01';
+            const [year, month] = endDateAnalyse.value.split('-').map(Number);
+
+            // 创建下一个月的第一天
+            const date = new Date(year, month, 1);
+
+            // 减去一天得到当月的最后一天
+            // date.setDate(date.getDate() - 1);
+            endTime = date.toISOString().split('T')[0];
+            // endTime = endDate.value + '-01';
+          } else if (dateTypeValue.value == 'year') {
+            startTime = startDateAnalyse.value + '-01-01';
+            endTime = endDateAnalyse.value + '-12-31';
+          } else {
+            startTime = startDateAnalyse.value + '';
+            endTime = endDateAnalyse.value + '';
+          }
+        } else {
+          // 获取当天的时间
+          const today = new Date();
+          const year = today.getFullYear();
+          const month = String(today.getMonth() + 1).padStart(2, '0'); // getMonth() 返回的月份是0-11
+          const day = String(today.getDate()).padStart(2, '0');
+
+          startTime = year + '-' + month + '-' + day;
+          endTime = year + '-' + month + '-' + day;
+        }
+        timeValue.value = dayjs(startTime);

        // 分析数据
        http
@@ -257,12 +413,17 @@
            energyQueryType: mode.value, // 0 设备  1 节点

            nodeIds: mode.value == '1' ? checkedKeys.value : [],
-            startTime: startTime,
-            endTime: endTime,
+            startDate: startTime,
+            endDate: endTime,
          })
          .then((res) => {
-            pageData.analysisTableList = res.data.dataList;
-            pageData.analysisGraphList = res.data.dataList;
+            if (res.data && res.data.dataList) {
+              pageData.analysisTableList = res.data.dataList;
+              pageData.analysisGraphList = res.data.dataList;
+            } else {
+              pageData.analysisTableList = [];
+              pageData.analysisGraphList = [];
+            }
          });
      };

@@ -272,6 +433,7 @@
      const treeData2 = ref<TreeSelectProps['treeData']>([]);
      // 切换树结构
      const changeMode = () => {
+        checkedKeys.value = [];
        treeLoading.value = true;
        if (mode.value == '0') {
          http
@@ -295,7 +457,7 @@
              treeData2.value = a;
              expandedKeys.value = [val];
              checkedKeys.value.push(records[0].deviceCode, records[1].deviceCode);
-              getSelect();
+              getSelect(null);
            })
            .finally(() => {
              treeLoading.value = false;
@@ -312,6 +474,8 @@
              treeData2.value = formatTreeData(pointName.value ? res.data[0].searchList : res.data);

              expandedKeys.value = getAllKeys(treeData2.value);
+              checkedKeys.value.push(treeData2.value[0].key, treeData2.value[1].key);
+              getSelect(null);
            })
            .finally(() => {
              treeLoading.value = false;
@@ -362,6 +526,11 @@
        dates.value = val;
      };
      onMounted(() => {
+        if (select.value?.$el) {
+          divWidth.value = select.value.$el.offsetWidth;
+          getDivWidth.observe(select.value.$el);
+        }
+
        getOptionsList();
        changeMode();
        // debugger;
@@ -370,7 +539,14 @@
        //   treeData2.value[0].children[1].deviceCode,
        // );
        // debugger;
-        getSelect();
+        // getSelect(null);
+      });
+      // 在组件卸载时停止监听
+      onUnmounted(() => {
+        if (select.value?.$el) {
+          getDivWidth.unobserve(select.value.$el);
+        }
+        getDivWidth.disconnect();
      });

      return {
@@ -386,9 +562,13 @@
        mode,
        selectedValue,
        dateTypeValue,
+        frequencyValue,
        dateValue,
+        timeValue,
        getOptionsList,
        getSelect,
+        getSelectAnalyse,
+        getSelectGraph,
        changeMode,
        disabledDate,
        onCalendarChange,
@@ -398,6 +578,10 @@
        changeEnergyType,
        shebei,
        onChangeDate,
+        changeFrequency,
+        activeKey,
+        select,
+        divWidth,
      };
    },
  });
@@ -416,14 +600,14 @@
    }
  }
  .parent-container {
-    position: relative;
+    // position: relative;
    height: 100%;
  }

-  .fixed-bottom {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    margin-bottom: 10px;
-  }
+  // .fixed-bottom {
+  //   position: absolute;
+  //   bottom: 0;
+  //   width: 100%;
+  //   margin-bottom: 10px;
+  // }
 </style>
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/aggregateData/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/aggregateData/index.vue
@@ -1,5 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
+  <!-- <a-spin :spinning="loading"> -->
  <a-row type="flex" style="height: 100%; width: 96%; margin: 2%">
    <a-col :span="6">
      <!-- <div style="height: 96%; margin: 2%"> -->
@@ -26,6 +27,7 @@
          </div>
        </div>
      </div>
+
      <div
        style="
          height: 62%;
@@ -34,26 +36,16 @@
          box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5);
          border-radius: 10px;
          background: #ffffff;
-        "
-        ><div style="height: 10%">平均值</div>
+        ">
+        <div style="height: 10%">平均值</div>
+
        <div style="display: flex; display: flex; flex-wrap: wrap; width: 100%; height: 100%">
-          <div
-            v-for="(item, index) in averageData"
-            :key="index"
-            style="
-              width: 33%;
-              height: 45%;
-              /* display: flex; */
-              /* flex-direction: column;
-              justify-content: center;
-              align-items: center;  */
-              /* margin: 10%;
-            ">
+          <div v-for="(item, index) in averageData" :key="index" style="width: 33%; height: 45%">
            <div
              style="
                height: 90%;
                margin: 0 5%;
-                /* box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5); */
+
                border-radius: 10px;
                background-color: rgba(67, 136, 251, 0.09803921568627451);
                display: flex;
@@ -94,8 +86,8 @@
              >
            </div>
          </div>
-        </div></div
-      >
+        </div>
+      </div>
      <!-- </div> -->
    </a-col>
    <a-col :span="18">
@@ -141,14 +133,7 @@
              style="width: 20%; margin-left: 10px"
              :options="frequencyOptions" />
            <a-date-picker style="width: 20%; margin-left: 10px" v-model:value="timeValue" />
-            <!-- <a-range-picker
-            :value="hackValue || dateRange"
-            :disabled-date="disabledDate"
-            @change="onChange"
-            @openChange="onOpenChange"
-            @calendarChange="onCalendarChange"
-            style="width: 100%; margin-bottom: 10px"
-            :placeholder="['请选择日期', '请选择日期']" /> -->
+
            <a-button type="primary" style="margin-left: 10px" @click="getDeviceHotMap">
              查询
            </a-button>
@@ -160,6 +145,7 @@
      <!-- </div> -->
    </a-col>
  </a-row>
+  <!-- </a-spin> -->
 </template>
 <script lang="ts">
  export default {
@@ -181,7 +167,7 @@
  defineOptions({
    name: 'AggregateData', // 与页面路由name一致缓存才可生效
  });
-
+  const loading = ref(false);
  // 采集频率
  const frequencyValue = ref<string>();

@@ -301,6 +287,7 @@
        treeData2.value = res.data;
        if (treeData2.value && treeData2.value.length > 0) {
          quyuvalue.value = [treeData2.value[0].childList[0].id];
+          getDeviceHotMap();
        }
      });
  };
@@ -355,7 +342,7 @@
    // 获取区域数据
    await queryDeviceArea();

-    await getDeviceHotMap();
+    // await getDeviceHotMap();

    // let hotData = {
    //   timeList: [
@@ -781,4 +768,8 @@
  };
 </script>

-<style lang="less" scoped></style>
+<style lang="less" scoped>
+  :deep(.ant-spin-nested-loading) {
+    height: 100% !important;
+  }
+</style>
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue
@@ -1,51 +1,55 @@
 <!-- eslint-disable vue/v-on-event-hyphenation -->
 <template>
-  <div>
-    <a-table
-      :columns="tableColumns"
-      :data-source="pageData"
-      bordered
-      :pagination="false"
-      :scroll="{ x: 100, y: 450 }">
-      <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-spin :spinning="loading"> -->
+  <div style="background: #ffffff; height: 95%">
+    <a-spin :spinning="loading">
+      <a-table
+        :columns="tableColumns"
+        :data-source="pageData"
+        bordered
+        :pagination="false"
+        :scroll="{ x: 100, y: 450 }">
+        <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"
-              @change="changeFrequency" />
-            <!-- <a-date-picker style="width: 13%; margin-left: 10px" v-model:value="timeValue" /> -->
-            <!-- :picker="dateTypeValue" -->
-            <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="getTableList">
-              查询
-            </a-button>
+              <a-select
+                v-model:value="frequencyValue"
+                placeholder="请选择频率"
+                style="width: 17%; margin-left: 10px"
+                :options="frequencyOptions"
+                @change="changeFrequency" />
+              <!-- <a-date-picker style="width: 13%; margin-left: 10px" v-model:value="timeValue" /> -->
+              <!-- :picker="dateTypeValue" -->
+              <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="getTableList">
+                查询
+              </a-button>
+            </div>
+            <a-button type="primary"> 导出 </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" />
+        </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" />
+    </a-spin>
  </div>
+  <!-- </a-spin> -->
 </template>
 <script lang="ts" setup>
  import { ref, onMounted } from 'vue';
@@ -65,6 +69,8 @@
    },
  });

+  const loading = ref(false);
+
  const typeList = ref();
  // 采集频率
  const frequencyValue = ref<string | undefined>();
@@ -136,44 +142,20 @@
  };
  // 获取表格数据
  const getTableList = () => {
+    loading.value = true;
    // 拼装开始结束时间
    if (!startDate.value || !endDate.value) {
      const nowDate = new Date();
      let nowDateString = nowDate.toISOString().split('T')[0];
      const [year, month, day] = nowDateString.split('-').map(Number);
-      if (frequencyValue.value == '3') {
-        startDate.value = year + '-' + month;
-        endDate.value = year + '-' + month;
-      } else if (frequencyValue.value == '4') {
-        startDate.value = year + '';
-        endDate.value = year + '';
-      }
-    }
-    let startTime = '';
-    let endTime = '';
-    if (frequencyValue.value == '3') {
-      startTime = startDate.value + '-01';
-      const [year, month] = endDate.value.split('-').map(Number);
-
-      // 创建下一个月的第一天
-      const date = new Date(year, month, 1);
-
-      // 减去一天得到当月的最后一天
-      // date.setDate(date.getDate() - 1);
-      endTime = date.toISOString().split('T')[0];
-      // endTime = endDate.value + '-01';
-    } else if (frequencyValue.value == '4') {
-      startTime = startDate.value + '-01-01';
-      endTime = endDate.value + '-12-31';
-    } else {
-      startTime = startDate.value + '';
-      endTime = endDate.value + '';
+      startDate.value = year + '-' + month + '-' + day;
+      endDate.value = year + '-' + month + '-' + day;
    }
    http
      .post(environmentMonitor.getDeviceAveragesByRate, {
        orgId: orgId.value,
-        startTime: startTime, //开始时间
-        endTime: endTime, //结束时间
+        startTime: startDate.value, //开始时间
+        endTime: endDate.value, //结束时间

        timeRate: frequencyValue.value, // 频率
      })
@@ -195,6 +177,9 @@
        data.value = res.data.data;
        total.value = res.data.data.length;
        onChange(1, 10);
+      })
+      .finally(() => {
+        loading.value = false;
      });
  };
  onMounted(async () => {
@@ -204,106 +189,9 @@
    if (frequencyOptions.value && frequencyOptions.value.length > 0) {
      frequencyValue.value = frequencyOptions.value[frequencyOptions.value.length - 1].value;
    }
-    // 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',
-          },
-        ],
-      },
-    ];
    getTableList();
  });

-  // getTableList();
  // 分页器
  const onChange = (pageNumber: number, size: number) => {
    queryParams.value.pageNum = pageNumber;
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/index.vue
@@ -1,85 +1,73 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <div>
-    <a-table
-      :columns="tableColumns"
-      :data-source="pageData"
-      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: 17%"
-              :options="typeList" />
-            <a-tree-select
-              v-model:value="quyuvalue"
-              style="width: 17%; margin-left: 10px"
-              :tree-data="treeData2"
-              :field-names="{
-                children: 'childList',
-                label: 'name',
-                value: 'id',
-              }"
-              tree-checkable
-              allow-clear
-              placeholder="请选择区域"
-              tree-node-filter-prop="label"
-              :maxTagCount="1" />
-            <a-select
-              v-model:value="frequencyValue"
-              placeholder="请选择采集频率"
-              style="width: 17%; margin-left: 10px"
-              :options="frequencyOptions"
-              @change="changeFrequency" />
-            <!-- <a-date-picker
-              :picker="dateTypeValue"
-              style="width: 15%; margin-left: 10px"
-              v-model:value="timeValue" /> -->
-
-            <!-- :picker="dateTypeValue" -->
-            <a-range-picker
-              :value="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="getTableList">
-              查询
-            </a-button>
+  <div style="background: #ffffff; height: 95%">
+    <a-spin :spinning="loading">
+      <a-table
+        :columns="tableColumns"
+        :data-source="pageData"
+        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: 17%"
+                :options="typeList" />
+              <a-tree-select
+                v-model:value="quyuvalue"
+                style="width: 17%; margin-left: 10px"
+                :tree-data="treeData2"
+                :field-names="{
+                  children: 'childList',
+                  label: 'name',
+                  value: 'id',
+                }"
+                tree-checkable
+                allow-clear
+                placeholder="请选择区域"
+                tree-node-filter-prop="label"
+                :maxTagCount="1" />
+              <a-select
+                v-model:value="frequencyValue"
+                placeholder="请选择采集频率"
+                style="width: 17%; margin-left: 10px"
+                :options="frequencyOptions"
+                @change="changeFrequency" />
+              <a-range-picker
+                :value="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="getTableList">
+                查询
+              </a-button>
+            </div>
+            <a-button type="primary"> 导出 </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" /> -->
-    <a-pagination
-      :total="total"
-      show-size-changer
-      show-quick-jumper
-      @change="onChange"
-      style="display: flex; justify-content: center; margin-top: 10px" />
+        </template>
+      </a-table>
+      <a-pagination
+        :total="total"
+        show-size-changer
+        show-quick-jumper
+        @change="onChange"
+        style="display: flex; justify-content: center; margin-top: 10px" />
+    </a-spin>
  </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 { tableColumns as tableColumnsA } from './config';
  import { environmentMonitor } from '/@/api/monitor';
  import { http } from '/nerv-lib/util';
  import { dict, getEnum } from '/@/api';
@@ -92,6 +80,115 @@
      'a-pagination': Pagination,
    },
  });
+
+  const loading = ref(false);
+  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 tableColumnsA: TableColumnType[] = [
+    {
+      title: '序号',
+      customRender: ({ record, index }) => {
+        // 自定义单元格内容，这里返回序号
+        if (index == 0) {
+          pageData.value[index].index = 1;
+          // return 1;
+        } else if (pageData.value[index - 1].location == record.location) {
+          pageData.value[index].index = pageData.value[index - 1].index;
+          // return data.value[index].index;
+        } else {
+          pageData.value[index].index = pageData.value[index - 1].index + 1;
+        }
+        return pageData.value[index].index;
+      },
+      customCell: (record, rowIndex) => {
+        if (rowIndex == undefined) {
+          return {
+            rowSpan: 0,
+            colSpan: 0,
+          };
+        }
+        const rowSpan = getRowSpan('location', record, pageData.value);
+        if (rowIndex != 0 && pageData.value[rowIndex - 1].location == record.location) {
+          return {
+            rowSpan: 0,
+            colSpan: 0,
+          };
+        }
+        return {
+          rowSpan: rowSpan,
+        };
+      },
+    },
+    {
+      title: '区域名称',
+      dataIndex: 'location',
+      customCell: (record, rowIndex) => {
+        if (rowIndex == undefined) {
+          return {
+            rowSpan: 0,
+            colSpan: 0,
+          };
+        }
+        const rowSpan = getRowSpan('location', record, pageData.value);
+        if (rowIndex != 0 && pageData.value[rowIndex - 1].location == record.location) {
+          return {
+            rowSpan: 0,
+            colSpan: 0,
+          };
+        }
+        return {
+          rowSpan: rowSpan,
+        };
+      },
+    },
+    {
+      title: '点位',
+      dataIndex: 'pointName',
+      customCell: (record, rowIndex) => {
+        if (rowIndex == undefined) {
+          return {
+            rowSpan: 0,
+            colSpan: 0,
+          };
+        }
+        const rowSpan = getRowSpan('pointName', record, pageData.value, ['location']);
+        if (
+          rowIndex != 0 &&
+          pageData.value[rowIndex - 1].location == record.location &&
+          pageData.value[rowIndex - 1].pointName == record.pointName
+        ) {
+          return {
+            rowSpan: 0,
+            colSpan: 0,
+          };
+        }
+        return {
+          rowSpan: rowSpan,
+        };
+      },
+    },
+    {
+      title: '日期',
+      dataIndex: 'time',
+    },
+  ];
+
  const typeList = ref();
  const typeValue = ref();
  const quyuvalue = ref<string[]>([]);
@@ -103,8 +200,9 @@
  const frequencyOptions = ref<SelectProps['options']>([]);

  const treeData2 = ref<TreeSelectProps['treeData']>([]);
-  const data = ref([]);
-  const pageData = ref([]);
+  // const data = ref([]);
+  let data = ref<any[]>([]);
+  const pageData = ref<any[]>([]);

  // const timeValue = ref<Dayjs>();
  let tableColumns = ref<TableColumnType[]>([]);
@@ -117,15 +215,6 @@
  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();
-  // };

  type RangeValue = [Dayjs, Dayjs];
  const dates = ref<RangeValue>();
@@ -160,23 +249,11 @@
  };
  // 切换频率
  const changeFrequency = () => {
-    //
-    // if (frequencyValue.value == '0' || frequencyValue.value == '1' || frequencyValue.value == '2') {
-    //   dateTypeValue.value = 'date';
-    // } else if (frequencyValue.value == '3') {
-    //   dateTypeValue.value = 'month';
-    // } else if (frequencyValue.value == '4') {
-    //   dateTypeValue.value = 'year';
-    // }
    dateRange.value = undefined;
  };
  // 获取表格数据
  const getTableList = () => {
-    // fetch(energyConsumption.pageList, queryParams.value).then((res) => {
-    //   data.value = res.data.records;
-    //   total.value = res.data.total;
-    // });
-
+    loading.value = true;
    let environmentType = '';
    for (let i = 0; i < typeList.value.length; i++) {
      if (typeList.value[i].value == typeValue.value) {
@@ -189,41 +266,16 @@
      const nowDate = new Date();
      let nowDateString = nowDate.toISOString().split('T')[0];
      const [year, month, day] = nowDateString.split('-').map(Number);
-      if (frequencyValue.value == '3') {
-        startDate.value = year + '-' + month;
-        endDate.value = year + '-' + month;
-      } else if (frequencyValue.value == '4') {
-        startDate.value = year + '';
-        endDate.value = year + '';
-      }
-    }
-    let startTime = '';
-    let endTime = '';
-    if (frequencyValue.value == '3') {
-      startTime = startDate.value + '-01';
-      const [year, month] = endDate.value.split('-').map(Number);
-
-      // 创建下一个月的第一天
-      const date = new Date(year, month, 1);
-
-      // 减去一天得到当月的最后一天
-      // date.setDate(date.getDate() - 1);
-      endTime = date.toISOString().split('T')[0];
-      // endTime = endDate.value + '-01';
-    } else if (frequencyValue.value == '4') {
-      startTime = startDate.value + '-01-01';
-      endTime = endDate.value + '-12-31';
-    } else {
-      startTime = startDate.value + '';
-      endTime = endDate.value + '';
+      startDate.value = year + '-' + month + '-' + day;
+      endDate.value = year + '-' + month + '-' + day;
    }
    http
      .post(environmentMonitor.getDeviceHistory, {
        orgId: orgId.value,
        environmentType: environmentType, // 环境参数code
        location: quyuvalue.value, // 区域id或者name
-        startTime: startTime, //开始时间
-        endTime: endTime, //结束时间
+        startTime: startDate.value, //开始时间
+        endTime: endDate.value, //结束时间

        timeRate: frequencyValue.value, // 频率
      })
@@ -237,24 +289,6 @@
            dataIndex: headerList[i],
          });
        }
-        // 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;
@@ -263,6 +297,9 @@
        data.value = res.data.data;
        total.value = res.data.data.length;
        onChange(1, 10);
+      })
+      .finally(() => {
+        loading.value = false;
      });
  };
  // 获取区域数据
@@ -273,6 +310,7 @@
        treeData2.value = res.data;
        if (treeData2.value && treeData2.value.length > 0) {
          quyuvalue.value = [treeData2.value[0].childList[0].id];
+          getTableList();
        }
      });
  };
@@ -295,139 +333,13 @@
    }
    // 获取区域数据
    await queryDeviceArea();
-
-    // 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;
-
-    await getTableList();
  });

-  // getTableList();
  // 分页器
  const onChange = (pageNumber: number, size: number) => {
-    // queryParams.value.pageNum = pageNumber;
-    // queryParams.value.pageSize = size;
-    // data.value;
-    // debugger;
    const start = (pageNumber - 1) * size;
    const end = start + size;
    pageData.value = data.value.slice(start, end);
-    // getTableList();
  };
 </script>
 <style scoped lang="less">
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/index.vue
@@ -3,7 +3,7 @@
    <div style="display: flex">
      <a-tabs v-model:activeKey="activeKey" style="height: 5%; width: 100%; background: #ffffff">
        <a-tab-pane key="1" tab="综合数据" />
-        <a-tab-pane key="2" tab="历史数据" force-render />
+        <a-tab-pane key="2" tab="历史数据" />
        <a-tab-pane key="3" tab="平均数据" />
      </a-tabs>
      <a-button