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>