优化监控中心前台样式

3 months ago · 88a8837876
9 changed files with 301 additions and 69 deletions
--- 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>
--- 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>
+  <div style="width: 100%; overflow-y: auto">
    <a-table
      :columns="columns"
      :data-source="data"
      bordered
      :pagination="false"
-    style="width: 99%; height: 75%; margin-left: 0.5%"
-    :scroll="{ x: x, y: 450 }" />
+      style="width: 99%; margin-left: 0.5%"
+      :scroll="{ x: x }" />
    <a-pagination
      :total="total"
-    :show-total="(total, range) => ` 共 ${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" />
+      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>
--- 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>
--- 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>
+  <div style="height: 100%; width: 100%; overflow-y: auto">
    <a-table
      :columns="columns"
      :data-source="data"
      bordered
-    style="width: 99%; height: 90%; margin-left: 0.5%"
+      style="width: 99%; margin-left: 0.5%"
      :pagination="false"
      :scroll="{ x: '2000' }" />
    <a-pagination
      :total="total"
-    :show-total="(total, range) => ` 共 ${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">
--- 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>
--- 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>
--- 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,
+            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)',
                  },
                  {
-            show: true,
-            type: 'inside',
-            xAxisIndex: 0,
-            zoomOnMouseWheel: false, // 滚轮是否触发缩放
-            moveOnMouseMove: true, // 鼠标滚轮触发滚动
-            moveOnMouseWheel: true,
+                    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: {
--- 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>
--- 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>