优化监控中心样式

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: {

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"

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();
       });
       // 在组件卸载时移除监听器

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));
+          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]];
+        if (data.value.length != 0) {
           setStandard(data.value[0]);
+        }
       });
       const setStandard = (record: any) => {
         selectedKey.value = [record.id];

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

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>

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>

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>

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;