优化监控中心样式

2024-08-19 15:45:48 +08:00
parent 45d914b16e
commit fbe0796d7d
9 changed files with 113 additions and 37 deletions
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/graph/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/graph/index.vue
@@ -77,7 +77,7 @@
          grid: {
            top: 60, // 上内边距
            bottom: 40, // 下内边距
-            left: 10, // 左内边距
+            left: 50, // 左内边距
            right: 60, // 右内边距
            containLabel: true, // 自动调整 grid 以适应标签
          },
@@ -85,7 +85,7 @@
            data: legendList,
            orient: 'horizontal',
            top: 30,
-            right: 130,
+            right: 55,
            icon: 'rect',
          },
          tooltip: {
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue
@@ -4,7 +4,7 @@
    :data-source="data"
    bordered
    :pagination="false"
-    style="width: 99%; height: 75%"
+    style="width: 99%; height: 75%; margin-left: 0.5%"
    :scroll="{ x: 2000, y: 450 }" />
  <a-pagination
    :total="total"
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
@@ -11,7 +11,6 @@
      style="width: 100%"
      :tree-line="treeLine && { showLeafIcon }"
      :tree-data="treeData1"
-      allowClear
      @change="changeDeviceType" />

    <a-spin :spinning="treeLoading">
@@ -124,6 +123,18 @@

      http.post(device.queryDeviceTree, { orgId: orgId.value }).then((res) => {
        treeData1.value = formatTreeData(res.data);
+
+        if (treeData1.value && treeData1.value.length > 0) {
+          if (treeData1.value[0].children) {
+            value.value = treeData1.value[0].children[0].value;
+            changeDeviceType(treeData1.value[0].children[0].value, [
+              treeData1.value[0].children[0].title,
+            ]);
+          } else {
+            value.value = treeData1.value[0].value;
+            changeDeviceType(treeData1.value[0].value, [treeData1.value[0].title]);
+          }
+        }
      });

      const formatTreeData = (data: any) => {
@@ -207,10 +218,16 @@
        throw new Error('pageData is not provided');
      }
      const getDianWeiList = () => {
+        let deviceIds: any[] = [];
        if (checkedKeys.value && checkedKeys.value.length > 0) {
+          checkedKeys.value.forEach((element) => {
+            if (value.value != element) {
+              deviceIds.push(element);
+            }
+          });
          http
            .post(deviceMonitor.getDevicePointToMonitor, {
-              deviceIds: checkedKeys.value,
+              deviceIds: deviceIds,
              orgId: orgId.value,
              type: 0,
            })
@@ -259,9 +276,17 @@
          startDate.value = year + '-' + month + '-' + day;
          endDate.value = year + '-' + month + '-' + day;
        }
+        let deviceIds: any[] = [];
+        if (checkedKeys.value && checkedKeys.value.length > 0) {
+          checkedKeys.value.forEach((element) => {
+            if (value.value != element) {
+              deviceIds.push(element);
+            }
+          });
+        }
        http
          .post(deviceMonitor.getDeviceGraph, {
-            deviceIds: checkedKeys.value,
+            deviceIds: deviceIds,
            devicePointCode: selectedValue.value,

            endDate: endDate.value,
@@ -323,7 +348,7 @@
        if (options2.value && options2.value.length > 0) {
          frequencyValue.value = options2.value[options2.value.length - 1].value;
        }
-        changeDeviceType(null, null);
+        // changeDeviceType(null, null);
        // getSelect();
      });
      // 在组件卸载时移除监听器
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/analysisTable/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/analysisTable/index.vue
@@ -5,7 +5,8 @@
    :data-source="data"
    bordered
    :pagination="false"
-    :row-selection="rowSelection">
+    :row-selection="rowSelection"
+    style="width: 99%; margin-left: 0.5%">
    <template #bodyCell="{ column, record }">
      <template v-if="column.title === '操作'">
        <a-button type="link" @click="setStandard(record)" v-if="record.id != selectedKey[0]"
@@ -123,7 +124,9 @@
        (_newValue, _oldValue) => {
          // 深度拷贝
          data.value = JSON.parse(JSON.stringify(pageData.analysisTableList));
-          setStandard(data.value[0]);
+          if (data.value.length != 0) {
+            setStandard(data.value[0]);
+          }
        },
        { deep: true },
      );
@@ -131,7 +134,9 @@
        // 深度拷贝
        data.value = JSON.parse(JSON.stringify(pageData.analysisTableList));
        // selectedKey.value = [data.value[0]];
-        setStandard(data.value[0]);
+        if (data.value.length != 0) {
+          setStandard(data.value[0]);
+        }
      });
      const setStandard = (record: any) => {
        selectedKey.value = [record.id];
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/graphTable/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/graphTable/index.vue
@@ -3,7 +3,7 @@
    :columns="columns"
    :data-source="data"
    bordered
-    style="width: 100%; height: 90%"
+    style="width: 99%; height: 90%; margin-left: 0.5%"
    :pagination="false"
    :scroll="{ x: '2000' }" />
  <a-pagination
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/aggregateData/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/aggregateData/index.vue
@@ -1,12 +1,12 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
  <!-- <a-spin :spinning="loading"> -->
-  <a-row type="flex" style="height: 100%; width: 96%; margin: 2%">
+  <a-row type="flex" style="height: 100%; width: 96%; margin-left: 1.5%; margin-top: 1%">
    <a-col :span="6">
      <!-- <div style="height: 96%; margin: 2%"> -->
      <div
        style="
-          height: 35%;
+          height: 38%;
          width: 100%;
          padding: 2%;
          box-shadow: 0 0 15px rgba(69, 123, 234, 0.2);
@@ -22,15 +22,17 @@
          <!-- <div ref="ringChartRef" style="width: 50%; height: 80%"></div> -->
          <div
            style="
-              height: 40%;
+              height: 35%;
              background: #f3fbf9;
              display: flex;
              justify-content: center;
              align-items: center;
+              border-radius: 12px;
+              margin-bottom: 2%;
            ">
            <ns-icon name="xianshiqi" size="30" style="margin-right: 30px" />
            <div style="height: 100%; display: flex">
-              <div style="display: inline-flex; align-items: flex-end; height: 75%">设备总计</div>
+              <div style="display: inline-flex; align-items: flex-end; height: 80%">设备总计</div>
              <div
                style="
                  font-size: 46px;
@@ -38,17 +40,22 @@
                  letter-spacing: 2.76px;
                  color: rgba(22, 178, 136, 1);
                  text-align: center;
-                  height: 75%;
+                  display: inline-flex;
+                  align-items: flex-end;
+                  height: 95%;
                "
                >{{ sum }}</div
              >
-              <div style="display: inline-flex; align-items: flex-end; height: 75%">台</div>
+              <div style="display: inline-flex; align-items: flex-end; height: 80%">台</div>
            </div>
          </div>
-          <div style="width: 100%; height: 60%">
+          <div style="width: 100%; height: 60%; margin-top: 6%">
            <div v-for="(item, index) in ringData" :key="index">
              {{ item.name }} : {{ item.value }} {{ item.unit }}
-              <a-progress :percent="(100 * item.value) / sum" :show-info="false" />
+              <a-progress
+                :percent="(100 * item.value) / sum"
+                :show-info="false"
+                :strokeWidth="15" />
            </div>
          </div>
        </div>
@@ -56,7 +63,7 @@

      <div
        style="
-          height: 62%;
+          height: 59%;
          margin-top: 4%;
          padding: 2%;
          box-shadow: 0 0 15px rgba(69, 123, 234, 0.2);
@@ -68,15 +75,15 @@
          <div style="height: 10%">平均值</div>
        </div>

-        <div style="display: flex; display: flex; flex-wrap: wrap; width: 100%; height: 100%">
-          <div v-for="(item, index) in averageData" :key="index" style="width: 33%; height: 45%">
+        <div style="display: flex; flex-wrap: wrap; width: 100%; height: 92%">
+          <div v-for="(item, index) in averageData" :key="index" style="width: 33%; height: 49%">
            <div
              style="
-                height: 90%;
-                margin: 0 5%;
+                height: 97%;
+                margin: 0 5% 1.5% 5%;

                border-radius: 10px;
-                background-color: rgba(67, 136, 251, 0.09803921568627451);
+                background-color: #f5fafd;
                display: flex;
                flex-direction: column;
                justify-content: center;
@@ -89,6 +96,7 @@
                  font-weight: 400;
                  font-style: normal;
                  font-size: 14px;
+                  padding-top: 5px;
                "
                >{{ item.name }}</div
              >
@@ -99,6 +107,7 @@
                  font-style: normal;
                  color: #ea7000;
                  text-align: center;
+                  padding-top: 5px;
                "
                >{{ item.value }}</div
              >
@@ -110,6 +119,7 @@
                  font-size: 10px;
                  color: #7f7f7f;
                  text-align: center;
+                  padding-top: 5px;
                "
                >{{ item.unit }}</div
              >
@@ -131,8 +141,8 @@
          border-radius: 10px;
          background: #ffffff;
        ">
-        <div style="width: 100%; display: flex">
-          <ns-icon name="zongheshuju" size="30" style="margin-right: 3px" />
+        <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: 80%; float: right; padding-right: 40px">
            <a-select
@@ -143,7 +153,7 @@
            <!-- {{ quyuvalue }} {{ defaultValues }} -->
            <a-tree-select
              v-model:value="quyuvalue"
-              style="width: 35%; margin-left: 10px"
+              style="width: 34%; margin-left: 10px"
              :tree-data="treeData2"
              show-checked-strategy="SHOW_CHILD"
              :default-value="defaultValues"
@@ -160,7 +170,7 @@
            <a-select
              v-model:value="frequencyValue"
              placeholder="请选择采集频率"
-              style="width: 10%; margin-left: 10px"
+              style="width: 12%; margin-left: 10px"
              :options="frequencyOptions" />
            <a-date-picker style="width: 20%; margin-left: 10px" v-model:value="timeValue" />

@@ -803,4 +813,17 @@
  :deep(.ant-spin-nested-loading) {
    height: 100% !important;
  }
+  // /* 修改 a-progress 圆角大小 */
+  // ::v-deep .ant-progress-bg {
+  //   // border-radius: 1px !important; /* 调整圆角大小，值可以自定义 */
+  //   stroke-linecap: butt !important; /* 如果需要去掉圆角，使用 "butt" */
+  // }
+  /* 修改 a-progress 进度条的圆角 */
+  ::v-deep .ant-progress-inner {
+    border-radius: 4px !important; /* 整个进度条容器的圆角 */
+  }
+
+  ::v-deep .ant-progress-bg {
+    border-radius: 4px !important; /* 进度条本身的圆角 */
+  }
 </style>
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue
@@ -38,7 +38,9 @@
                查询
              </a-button>
            </div>
-            <a-button type="primary"> 导出 </a-button>
+            <a-button type="primary" style="position: absolute; right: 40px; top: -45px">
+              导出
+            </a-button>
          </div>
        </template>
      </a-table>
@@ -228,4 +230,7 @@
  td.column-money {
    text-align: right !important;
  }
+  ::v-deep .ant-table.ant-table-bordered > .ant-table-title {
+    border: 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
@@ -11,7 +11,13 @@
        :scroll="{ x: 3000, y: 440 }">
        <template #title>
          <div
-            style="display: flex; align-items: center; justify-content: space-between; width: 100%">
+            style="
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              width: 100%;
+              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
@@ -53,7 +59,9 @@
                查询
              </a-button>
            </div>
-            <a-button type="primary"> 导出 </a-button>
+            <a-button type="primary" style="position: absolute; right: 40px; top: -45px">
+              导出
+            </a-button>
          </div>
        </template>
      </a-table>
@@ -370,4 +378,7 @@
  td.column-money {
    text-align: right !important;
  }
+  ::v-deep .ant-table.ant-table-bordered > .ant-table-title {
+    border: none !important;
+  }
 </style>
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/index.vue
@@ -3,7 +3,14 @@
    <div style="display: flex">
      <a-tabs
        v-model:activeKey="activeKey"
-        style="height: 5%; width: 100%; margin-top: 0.5%; background: #ffffff">
+        style="
+          height: 5%;
+          width: 98.5%;
+          margin-top: 0.5%;
+          padding-left: 1.5%;
+          background: #ffffff;
+          font-family: 'PingFangSC-Regular', sans-serif;
+        ">
        <a-tab-pane key="1" tab="综合数据" />
        <a-tab-pane key="2" tab="历史数据" />
        <a-tab-pane key="3" tab="平均数据" />
@@ -11,7 +18,8 @@
      <a-button
        type="primary"
        style="position: absolute; margin-right: 30px; margin-top: 10px; right: 30px"
-        @click="configurePoint">
+        @click="configurePoint"
+        v-if="activeKey == '1'">
        配置监测点位
      </a-button>
    </div>
@@ -236,7 +244,6 @@
  };
  // 修改是否显示状态
  const updateShowed = (record: any) => {
-    debugger;
    let url = '';
    if (record.useFlag == 0) {
      record.useFlag = 1;
@@ -253,7 +260,7 @@
      },
    ];
    http.post(url, params).then((res) => {
-      debugger;
+      console.log('🚀 ~ http.post ~ res:', res);
    });
  };
  // 批量修改是否显示状态
@@ -448,7 +455,7 @@
 </script>
 <style lang="less" scoped>
  ::v-deep .ant-tabs-tab {
-    font-weight: bold; /* 选中标签的加粗 */
+    font-weight: 700; /* 选中标签的加粗 */
    // font-size: 16px;
    // letter-spacing: 1.33px;
    color: #666666 !important;