From 88a8837876bb320188394df8c5a7e5745eb583ab Mon Sep 17 00:00:00 2001
From: fks-yangshouda <yangshoudamhy@163.com>
Date: Mon, 2 Sep 2024 15:49:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=9B=91=E6=8E=A7=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83=E5=89=8D=E5=8F=B0=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/view/monitor/deviceMonitor/page.vue        |  28 ++++-
 .../src/view/monitor/deviceMonitor/table/index.vue |  43 +++++---
 .../src/view/monitor/deviceMonitor/tree/index.vue  |  42 +++++++-
 .../monitor/energyMonitor/graphTable/index.vue     |  31 +++---
 .../src/view/monitor/energyMonitor/page.vue        |  28 ++++-
 .../src/view/monitor/energyMonitor/tree/index.vue  |  20 +++-
 .../environmentMonitor/aggregateData/index.vue     | 118 ++++++++++++++++++---
 .../environmentMonitor/averageData/index.vue       |  32 +++++-
 .../environmentMonitor/historyData/index.vue       |  28 ++++-
 9 files changed, 301 insertions(+), 69 deletions(-)

diff --git a/hx-ai-intelligent/src/view/monitor/deviceMonitor/page.vue b/hx-ai-intelligent/src/view/monitor/deviceMonitor/page.vue
index 7b8759b..76ddf0b 100644
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/page.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/page.vue
@@ -6,7 +6,7 @@
         <tree ref="treeRef" />
       </div>
     </a-col>
-    <a-col :span="20">
+    <a-col :span="20" style="height: 100%">
       <div
         style="
           width: 98%;
@@ -16,14 +16,15 @@
           margin-left: 1.5%;
         ">
         <div class="ns-right-title">
-          <span><ns-icon name="title" size="11" style="margin-right: 3px" />历史数据</span>
+          <!-- <span><ns-icon name="title" size="11" style="margin-right: 3px" />历史数据</span> -->
+          <div class="title">历史数据</div>
           <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>
         <graph ref="graphRef" v-if="isGraph" />
-        <environment-table ref="tableRef" style="width: 100%" v-else />
+        <environment-table ref="tableRef" style="height: 83%" v-else />
       </div>
     </a-col>
   </a-row>
@@ -89,4 +90,25 @@
     display: inline-block;
     padding-right: 10px;
   }
+
+  .title {
+    text-align: left;
+    height: 32px;
+    line-height: 32px;
+    font-weight: bold;
+    user-select: text;
+    position: relative;
+    padding-left: 20px;
+  }
+  .title::before {
+    content: '';
+    position: absolute;
+    left: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 13px;
+    width: 3px;
+    border-radius: 1px;
+    background-color: #2778ff;
+  }
 </style>
diff --git a/hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue b/hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue
index eb18c17..734da9b 100644
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue
@@ -1,18 +1,27 @@
 <template>
-  <a-table
-    :columns="columns"
-    :data-source="data"
-    bordered
-    :pagination="false"
-    style="width: 99%; height: 75%; margin-left: 0.5%"
-    :scroll="{ x: x, 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" />
+  <div style="width: 100%; overflow-y: auto">
+    <a-table
+      :columns="columns"
+      :data-source="data"
+      bordered
+      :pagination="false"
+      style="width: 99%; margin-left: 0.5%"
+      :scroll="{ x: x }" />
+    <a-pagination
+      :total="total"
+      size="small"
+      :show-total="(total, range) => `显示第${range[0]}到${range[1]}条记录 ,共${total} 条记录`"
+      show-size-changer
+      show-quick-jumper
+      @change="onChange"
+      style="
+        display: flex;
+        justify-content: right;
+        margin-top: 10px;
+        margin-right: 30px;
+        padding-bottom: 10px;
+      " />
+  </div>
 </template>
 
 <script lang="ts">
@@ -268,7 +277,7 @@
 </script>
 
 <style lang="less" scoped>
-  ::v-deep .ant-table-container table > thead > tr:first-child th:last-child {
-    display: none !important;
-  }
+  // ::v-deep .ant-table-container table > thead > tr:first-child th:last-child {
+  //   display: none !important;
+  // }
 </style>
diff --git a/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue b/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
index bfe41a9..72f9071 100644
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
@@ -2,8 +2,8 @@
 <template>
   <div class="parent-container">
     <div class="ns-tree-title">
-      <ns-icon name="deviceType" size="11" style="margin-right: 3px" />
-      <span>设备列表</span>
+      <ns-icon name="deviceType" size="11" style="margin-top: 10px" />
+      <div class="title">设备列表</div>
     </div>
     <a-tree-select
       ref="select"
@@ -83,6 +83,7 @@
 </template>
 
 <script lang="ts">
+  import { message } from 'ant-design-vue';
   import type { TreeSelectProps, SelectProps } from 'ant-design-vue';
   import { defineComponent, ref, onMounted, onUnmounted, watch } from 'vue';
   import dayjs, { Dayjs } from 'dayjs';
@@ -228,12 +229,14 @@
       const getDianWeiList = () => {
         let deviceIds: any[] = [];
         if (checkedKeys.value && checkedKeys.value.length > 0) {
-          debugger;
           checkedKeys.value.forEach((element) => {
             if (value.value != element && value.value != '999999999') {
               deviceIds.push(element);
             }
           });
+          if (deviceIds.length == 0) {
+            return;
+          }
           http
             .post(deviceMonitor.getDevicePointToMonitor, {
               deviceIds: deviceIds,
@@ -275,6 +278,11 @@
 
       // 查询数据后放入pageData
       const getSelect = () => {
+        pageData.tableList = [];
+        pageData.tableColumns = [];
+
+        pageData.graphList = [];
+        pageData.XData = [];
         if (!startDate.value || !endDate.value) {
           // 获取当天的时间
           const today = new Date();
@@ -293,6 +301,10 @@
             }
           });
         }
+        if (deviceIds.length == 0) {
+          message.warning('请先选择设备！');
+          return;
+        }
         http
           .post(deviceMonitor.getDeviceGraph, {
             deviceIds: deviceIds,
@@ -414,8 +426,9 @@
 
 <style lang="less" scoped>
   .ns-tree-title {
+    display: flex;
     user-select: text;
-    margin-bottom: 5px;
+    margin-bottom: 12px;
     padding-bottom: 10px;
     padding-top: 10px;
     border-bottom: 1px solid #e9e9e9;
@@ -444,4 +457,25 @@
   //   width: 100%;
   //   // margin-bottom: 10px;
   // }
+
+  .title {
+    text-align: left;
+    height: 32px;
+    line-height: 32px;
+    font-weight: bold;
+    user-select: text;
+    position: relative;
+    padding-left: 9px;
+  }
+  // .title::before {
+  //   content: '';
+  //   position: absolute;
+  //   left: 10px;
+  //   top: 50%;
+  //   transform: translateY(-50%);
+  //   height: 13px;
+  //   width: 3px;
+  //   border-radius: 1px;
+  //   background-color: #2778ff;
+  // }
 </style>
diff --git a/hx-ai-intelligent/src/view/monitor/energyMonitor/graphTable/index.vue b/hx-ai-intelligent/src/view/monitor/energyMonitor/graphTable/index.vue
index 819f1c8..61e31d0 100644
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/graphTable/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/graphTable/index.vue
@@ -1,18 +1,21 @@
 <template>
-  <a-table
-    :columns="columns"
-    :data-source="data"
-    bordered
-    style="width: 99%; height: 90%; margin-left: 0.5%"
-    :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" />
+  <div style="height: 100%; width: 100%; overflow-y: auto">
+    <a-table
+      :columns="columns"
+      :data-source="data"
+      bordered
+      style="width: 99%; margin-left: 0.5%"
+      :pagination="false"
+      :scroll="{ x: '2000' }" />
+    <a-pagination
+      :total="total"
+      size="small"
+      :show-total="(total, range) => `显示第${range[0]}到${range[1]}条记录 ,共${total} 条记录`"
+      show-size-changer
+      show-quick-jumper
+      @change="onChange"
+      style="display: flex; justify-content: right; margin-top: 10px; margin-right: 30px" />
+  </div>
 </template>
 
 <script lang="ts">
diff --git a/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue b/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
index 4cb3f6f..7dc0251 100644
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
@@ -32,12 +32,13 @@
               <ns-icon :name="iconName" size="18" style="margin-right: 10px" @click="change" />
             </div>
           </div>
-          <span style="padding-left: 10px; line-height: 20px">
+          <!-- <span style="padding-left: 10px; line-height: 20px">
             <ns-icon name="title" size="11" style="margin-right: 3px" />统计数据
-          </span>
+          </span> -->
+          <div class="title">统计数据</div>
         </div>
 
-        <div v-if="activeKey == '1'" style="height: 72%; width: 100%">
+        <div v-if="activeKey == '1'" style="height: 75%; width: 100%">
           <graph-graph ref="graphRef" v-if="isGraph" />
           <environment-table ref="tableRef" v-else style="width: 100%" />
         </div>
@@ -155,4 +156,25 @@
   ::v-deep .ant-tabs-tab:hover {
     color: #000000; /* 悬停时的文字颜色 */
   }
+
+  .title {
+    text-align: left;
+    height: 32px;
+    line-height: 32px;
+    font-weight: bold;
+    user-select: text;
+    position: relative;
+    padding-left: 20px;
+  }
+  .title::before {
+    content: '';
+    position: absolute;
+    left: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 13px;
+    width: 3px;
+    border-radius: 1px;
+    background-color: #2778ff;
+  }
 </style>
diff --git a/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue b/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
index 0158075..0710b72 100644
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
@@ -2,8 +2,9 @@
 <template>
   <div class="parent-container">
     <div class="ns-tree-title">
-      <ns-icon name="common" size="11" style="margin-right: 3px" />
-      <span>数据点位</span>
+      <ns-icon name="common" size="11" style="margin-top: 10px" />
+      <!-- <span>数据点位</span> -->
+      <div class="title">数据点位</div>
     </div>
 
     <a-select
@@ -383,7 +384,7 @@
             deviceInfoCodes: mode.value == '0' ? checkedKeys.value : [], // 设备需要传 device_info_code
             energyQueryType: mode.value, // 0 设备  1 节点
 
-            nodeIds: mode.value == '1' ? checkedKeys.value : [],
+            nodeIds: mode.value == '1' ? checkedKeys.value.checked : [],
             startDate: startTime,
             endDate: endTime,
           })
@@ -647,8 +648,9 @@
 
 <style lang="less" scoped>
   .ns-tree-title {
+    display: flex;
     user-select: text;
-    margin-bottom: 5px;
+    margin-bottom: 12px;
     padding-bottom: 10px;
     padding-top: 10px;
     border-bottom: 1px solid #e9e9e9;
@@ -690,4 +692,14 @@
   .ant-radio-button-wrapper:not(:first-child)::before {
     width: 0;
   }
+
+  .title {
+    text-align: left;
+    height: 32px;
+    line-height: 32px;
+    font-weight: bold;
+    user-select: text;
+    position: relative;
+    padding-left: 9px;
+  }
 </style>
diff --git a/hx-ai-intelligent/src/view/monitor/environmentMonitor/aggregateData/index.vue b/hx-ai-intelligent/src/view/monitor/environmentMonitor/aggregateData/index.vue
index 4c7693c..19fd69d 100644
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/aggregateData/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/aggregateData/index.vue
@@ -15,7 +15,7 @@
         ">
         <div style="display: flex">
           <ns-icon name="zongheshuju" size="30" style="margin-right: 3px" />
-          <span>设备状态</span>
+          <span style="font-weight: bold">设备状态</span>
         </div>
 
         <div style="width: 100%; height: 100%; padding-left: 10%; padding-right: 10%">
@@ -73,7 +73,7 @@
         ">
         <div style="display: flex">
           <ns-icon name="zongheshuju" size="30" style="margin-right: 3px" />
-          <div style="height: 10%">平均值</div>
+          <div style="height: 10%; font-weight: bold">平均值</div>
         </div>
 
         <div style="display: flex; flex-wrap: wrap; width: 100%; height: 92%">
@@ -144,7 +144,7 @@
         ">
         <div style="width: 100%; display: flex; align-items: center">
           <ns-icon name="zongheshuju" size="30" style="margin-right: 3px; margin-top: 8px" />
-          <div style="width: 20%">环境指数分析</div>
+          <div style="width: 20%; font-weight: bold">环境指数分析</div>
           <div style="width: 80%; float: right; padding-right: 40px">
             <a-select
               v-model:value="typeValue"
@@ -812,24 +812,110 @@
             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,
+        //   },
+        // ],
+        //滑块样式
         dataZoom: [
           {
-            show: true,
             type: 'slider',
-            zoomLock: true,
+            // backgroundColor: 'yellow',
+            fillerColor: new echarts.graphic.LinearGradient(
+              0,
+              0,
+              1,
+              0,
+              [
+                {
+                  offset: 0,
+                  color: 'rgba(97, 134, 255, 1)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(36, 186, 255, 1)',
+                },
+              ],
+              false,
+            ),
+            height: 12, // 设置slider的高度为15
+            // start: 0,
+            // end: 100,
             startValue: 0, // 从头开始。
             endValue: 23,
-            bottom: 20,
-            height: 10,
-            showDetail: false,
-          },
-          {
-            show: true,
-            type: 'inside',
-            xAxisIndex: 0,
-            zoomOnMouseWheel: false, // 滚轮是否触发缩放
-            moveOnMouseMove: true, // 鼠标滚轮触发滚动
-            moveOnMouseWheel: true,
+            right: 60,
+            left: 60,
+            bottom: 10,
+            handleIcon:
+              'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 使用类似 axisPointer 的图标
+            handleSize: '140%', // 放大按钮
+            // borderColor: 'none',
+            handleStyle: {
+              color: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                1,
+                0,
+                [
+                  {
+                    offset: 0,
+                    color: 'rgba(97, 134, 255, 1)',
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(36, 186, 255, 1)',
+                  },
+                ],
+                false,
+              ),
+              borderWidth: 4,
+              borderColor: new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                [
+                  {
+                    offset: 0,
+                    color: 'rgba(255, 255, 255, 1)',
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(204, 238, 255, 1)',
+                  },
+                ],
+                false,
+              ),
+              shadowOffsetX: 0, // 阴影偏移x轴多少
+              shadowOffsetY: 0, // 阴影偏移y轴多少
+            },
+            // 显示的label的格式化器
+            // 20050101 变为 2005\n0101
+            // labelFormatter: function (index, value) {
+            //   const year = value.slice(0, 4);
+            //   const date = value.slice(4);
+            //   return year + '\n' + date;
+            // },
+            // textStyle: {
+            //   fontStyle: 'italic', // 设置字体倾斜
+            // },
+            // showDataShadow: false, // 隐藏数据阴影
           },
         ],
         visualMap: {
diff --git a/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue b/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue
index 0ed97f5..bbb6285 100644
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue
@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/v-on-event-hyphenation -->
 <template>
   <!-- <a-spin :spinning="loading"> -->
-  <div style="background: #ffffff; height: 95%; position: relative">
+  <div style="background: #ffffff; height: 95%; position: relative; overflow-y: auto">
     <a-spin :spinning="loading">
       <a-table
         :columns="tableColumns"
@@ -13,9 +13,10 @@
           <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%"
-                ><ns-icon name="title" size="11" style="margin-right: 3px" />数据报表</div
-              >
+              <div style="width: 10%">
+                <!-- <ns-icon name="title" size="11" style="margin-right: 3px" /> -->
+                <span class="title">数据报表</span>
+              </div>
 
               <a-select
                 v-model:value="frequencyValue"
@@ -175,6 +176,8 @@
       startDate.value = year + '-' + month + '-' + day;
       endDate.value = year + '-' + month + '-' + day;
     }
+    tableColumns.value = [];
+    tableColumns.value.push(...tableColumnsA);
     http
       .post(environmentMonitor.getDeviceAveragesByRate, {
         orgId: orgId.value,
@@ -253,4 +256,25 @@
   /* ::v-deep .ant-table-title + .ant-table-container table > thead > tr:first-child th:last-child {
     display: none !important;
   } */
+
+  .title {
+    text-align: left;
+    height: 32px;
+    line-height: 32px;
+    font-weight: bold;
+    user-select: text;
+    position: relative;
+    padding-left: 9px;
+  }
+  .title::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 13px;
+    width: 3px;
+    border-radius: 1px;
+    background-color: #2778ff;
+  }
 </style>
diff --git a/hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/index.vue b/hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/index.vue
index f6f93e4..cfb3c9d 100644
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/index.vue
@@ -19,9 +19,10 @@
               border-top: 0 !important;
             ">
             <div style="display: flex; align-items: center; width: 85%">
-              <div style="width: 10%"
-                ><ns-icon name="title" size="11" style="margin-right: 3px" />数据报表</div
-              >
+              <div style="width: 10%">
+                <!-- <ns-icon name="title" size="11" style="margin-right: 3px" /> -->
+                <span class="title">数据报表</span>
+              </div>
               <a-select
                 v-model:value="typeValue"
                 placeholder="请选择环境参数"
@@ -324,7 +325,6 @@
             });
           }
           x.value = 360 + headerList.length * 60;
-          debugger;
           let columnA: any[] = [...tableColumnsA];
           columnA.push(...tableColumnsB);
           tableColumns.value = columnA;
@@ -406,4 +406,24 @@
   /* ::v-deep .ant-table-title + .ant-table-container table > thead > tr:first-child th:last-child {
     display: none !important;
   } */
+  .title {
+    text-align: left;
+    height: 32px;
+    line-height: 32px;
+    font-weight: bold;
+    user-select: text;
+    position: relative;
+    padding-left: 9px;
+  }
+  .title::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 13px;
+    width: 3px;
+    border-radius: 1px;
+    background-color: #2778ff;
+  }
 </style>