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

2.监控中心 - 能耗监测  根据UI设计图进行页面优化
3.监控中心 - 环境监测  修改bug，添加loading

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,
       };
     },
   });