优化监控中心前台页面

2024-08-22 15:23:02 +08:00
parent 05bb62752b
commit 7b1f25689e
12 changed files with 122 additions and 80 deletions
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue
@@ -155,7 +155,7 @@
        chartInstance.setOption(option);
      };
      onMounted(() => {
-        // draw();
+        draw();
      });

      // 下载图表
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
@@ -32,9 +32,9 @@
              <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
-          >
+          <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: 72%; width: 100%">
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
@@ -171,7 +171,7 @@
      // 日期类型
      const dateTypeValue = ref();

-      const frequencyValue = ref();
+      const frequencyValue = ref(0);

      const activeKey = ref('1');

@@ -284,13 +284,13 @@
      const getSelectGraph = (key: any) => {
        if (key) {
          activeKey.value = key;
-          if (
-            pageData.graphTableList.length > 0 &&
-            pageData.graphTableColumns.length > 0 &&
-            pageData.graphGraphList.length > 0
-          ) {
-            return;
-          }
+          // if (
+          //   pageData.graphTableList.length > 0 &&
+          //   pageData.graphTableColumns.length > 0 &&
+          //   pageData.graphGraphList.length > 0
+          // ) {
+          //   return;
+          // }
        }

        let startTime = '';
@@ -364,9 +364,9 @@
      const getSelectAnalyse = (key: any) => {
        if (key) {
          activeKey.value = key;
-          if (pageData.analysisGraphList.length > 0 && pageData.analysisTableList.length > 0) {
-            return;
-          }
+          // if (pageData.analysisGraphList.length > 0 && pageData.analysisTableList.length > 0) {
+          //   return;
+          // }
        }
        let startTime = '';
        let endTime = '';
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/aggregateData/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/aggregateData/index.vue
@@ -811,6 +811,26 @@
            lineHeight: 20,
          },
        },
+        dataZoom: [
+          {
+            show: true,
+            type: 'slider',
+            zoomLock: true,
+            startValue: 0, // 从头开始。
+            endValue: 23,
+            bottom: 20,
+            height: 10,
+            showDetail: false,
+          },
+          {
+            show: true,
+            type: 'inside',
+            xAxisIndex: 0,
+            zoomOnMouseWheel: false, // 滚轮是否触发缩放
+            moveOnMouseMove: true, // 鼠标滚轮触发滚动
+            moveOnMouseWheel: true,
+          },
+        ],
        visualMap: {
          show: false,
          min: min,
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/config.ts
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/config.ts
@@ -4,10 +4,14 @@ export const tableColumns = [
    customRender: (text: any) => {
      return text.index + 1;
    },
+    width: 150,
+    align: 'center',
  },
  {
    title: '时间',
    dataIndex: 'time',
+    width: 150,
+    align: 'center',
  },
  // {
  //   title: '温度（℃）',
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue
@@ -9,7 +9,7 @@
        bordered
        :pagination="false"
        style="height: 75%"
-        :scroll="{ x: 100, y: 450 }">
+        :scroll="{ x: 200, y: 450 }">
        <template #title>
          <div
            style="display: flex; align-items: center; justify-content: space-between; width: 100%">
@@ -84,6 +84,7 @@
  });

  const loading = ref(false);
+  const x = ref(1200);

  const typeList = ref();
  // 采集频率
@@ -181,8 +182,11 @@
          tableColumnsB.push({
            title: headerList[i],
            dataIndex: headerList[i],
+            width: 150,
+            align: 'center',
          });
        }
+        x.value = 300 + headerList.length * 150;
        let columnA: any[] = [...tableColumnsA];
        columnA.push(...tableColumnsB);
        tableColumns.value = columnA;
@@ -222,7 +226,7 @@
    display: flex;
  }
  ::v-deep .ant-table-container {
-    padding: 0px 16px;
+    margin: 0px 16px;
  }
 </style>
 <style scoped>
@@ -233,4 +237,7 @@
  ::v-deep .ant-table.ant-table-bordered > .ant-table-title {
    border: none !important;
  }
+  /* ::v-deep .ant-table-title + .ant-table-container table > thead > tr:first-child th:last-child {
+    display: none !important;
+  } */
 </style>
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/index.vue
@@ -8,7 +8,7 @@
        bordered
        :pagination="false"
        :height="500"
-        :scroll="{ x: 3000, y: 440 }">
+        :scroll="{ x: x, y: 440 }">
        <template #title>
          <div
            style="
@@ -123,6 +123,8 @@
  const tableColumnsA: TableColumnType[] = [
    {
      title: '序号',
+      width: 50,
+      align: 'center',
      customRender: ({ record, index }) => {
        // 自定义单元格内容，这里返回序号
        if (index == 0) {
@@ -159,6 +161,7 @@
      title: '区域名称',
      dataIndex: 'location',
      width: 100,
+      align: 'center',
      customCell: (record, rowIndex) => {
        if (rowIndex == undefined) {
          return {
@@ -182,6 +185,7 @@
      title: '点位',
      dataIndex: 'pointName',
      width: 100,
+      align: 'center',
      customCell: (record, rowIndex) => {
        if (rowIndex == undefined) {
          return {
@@ -209,6 +213,7 @@
      title: '日期',
      dataIndex: 'time',
      width: 110,
+      align: 'center',
    },
  ];

@@ -236,6 +241,7 @@
    pageSize: 10,
  });
  const orgId = ref('');
+  const x = ref(2000);
  const result = JSON.parse(sessionStorage.getItem('ORGID')!);
  orgId.value = result;

@@ -310,8 +316,11 @@
          tableColumnsB.push({
            title: headerList[i],
            dataIndex: headerList[i],
+            width: 60,
+            align: 'center',
          });
        }
+        x.value = 360 + headerList.length * 60;
        let columnA: any[] = [...tableColumnsA];
        columnA.push(...tableColumnsB);
        tableColumns.value = columnA;
@@ -370,7 +379,7 @@
    display: flex;
  }
  ::v-deep .ant-table-container {
-    padding: 0px 16px;
+    margin: 0px 16px;
  }
 </style>
 <style scoped>
@@ -381,4 +390,7 @@
  ::v-deep .ant-table.ant-table-bordered > .ant-table-title {
    border: none !important;
  }
+  ::v-deep .ant-table-title + .ant-table-container table > thead > tr:first-child th:last-child {
+    display: none !important;
+  }
 </style>
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/index.vue
@@ -40,7 +40,7 @@
    @ok="handleOk"
    @cancel="closeOpenUpload">
    <div style="display: flex">
-      <div style="width: 15%">
+      <div style="width: 15%; height: 100%; position: sticky; top: 0; align-self: flex-start">
        <a-tabs
          v-model:activeKey="typeValue"
          tab-position="left"
@@ -76,25 +76,6 @@
              ">
              <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: 35%; 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-cascader
                  :options="treeData2"
                  v-model:value="quyuvalue"
@@ -115,18 +96,11 @@
                  v-model:value="areaName"
                  placeholder="请输入设备名称"
                  style="width: 20%; margin-left: 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 style="margin-left: 10px" @click="resetting"> 重置 </a-button>
                <a-button type="primary" style="margin-left: 10px" @click="queryDeviceInfoListPage">
                  搜索
                </a-button>
              </div>
-              <!-- <a-button type="primary"> 导出 </a-button> -->
            </div>
            <div>
              <a-divider />