From a47f8ae50fc477a611ab14d93af6a320ca690d27 Mon Sep 17 00:00:00 2001
From: fks-yangshouda <yangshoudamhy@163.com>
Date: Thu, 15 Aug 2024 15:34:50 +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=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hx-ai-intelligent/src/icon/xiazai.svg              | 11 +++-
 .../src/view/monitor/deviceMonitor/page.vue        | 15 +++--
 .../src/view/monitor/deviceMonitor/tree/index.vue  | 12 ++--
 .../monitor/energyMonitor/analysisGraph/index.vue  | 68 ++++++++++++++++------
 .../monitor/energyMonitor/graphGraph/index.vue     | 21 ++++++-
 .../src/view/monitor/energyMonitor/page.vue        | 38 ++++++++++--
 .../src/view/monitor/energyMonitor/tree/index.vue  | 14 +++--
 .../environmentMonitor/aggregateData/index.vue     |  6 +-
 .../src/view/monitor/environmentMonitor/index.vue  |  6 +-
 9 files changed, 147 insertions(+), 44 deletions(-)

diff --git a/hx-ai-intelligent/src/icon/xiazai.svg b/hx-ai-intelligent/src/icon/xiazai.svg
index 738f4a4..f77ac5b 100644
--- a/hx-ai-intelligent/src/icon/xiazai.svg
+++ b/hx-ai-intelligent/src/icon/xiazai.svg
@@ -1 +1,10 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720430904326" class="icon" viewBox="0 0 1354 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3403" xmlns:xlink="http://www.w3.org/1999/xlink" width="21.15625" height="16"><path d="M1034.83248 645.406063l-191.508238 191.508238a53.622507 53.622507 0 0 1-75.964301 0l-191.508238-191.508238a53.622507 53.622507 0 0 1 0-75.964301 53.622507 53.622507 0 0 1 75.965301 0l102.775054 102.775054V303.884205a53.622507 53.622507 0 1 1 107.245014 0v368.332611l95.753119-102.775054a53.622507 53.622507 0 0 1 75.965301 0 53.622507 53.622507 0 0 1 1.276988 75.964301z m262.364587-175.548385a365.141641 365.141641 0 0 0-97.030108-98.94609 378.546518 378.546518 0 0 0-29.364729-123.202867 397.697341 397.697341 0 0 0-89.369178-127.671825 404.719277 404.719277 0 0 0-133.418773-91.28516A408.549242 408.549242 0 0 0 792.894706 0.026a400.251318 400.251318 0 0 0-225.977921 67.665377 410.464224 410.464224 0 0 0-97.669102 91.285161 261.088598 261.088598 0 0 0-63.836412-7.65993 247.044727 247.044727 0 0 0-176.18738 70.857348 245.129745 245.129745 0 0 0-72.134336 202.360139 324.925011 324.925011 0 0 0-84.263225 72.77333A308.965158 308.965158 0 0 0 0.053 702.22054a310.242146 310.242146 0 0 0 97.029107 228.531898 331.307952 331.307952 0 0 0 105.969025 69.58136 330.030964 330.030964 0 0 0 127.670826 23.619782h656.233963A360.034688 360.034688 0 0 0 1242.298572 919.261544a360.034688 360.034688 0 0 0 81.071254-116.181932 354.288741 354.288741 0 0 0 27.449748-138.523725 344.713829 344.713829 0 0 0-54.260501-194.699209z" fill="#16B187" p-id="3404"></path></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="14.6600341796875" viewBox="0 0 20 14.6600341796875" fill="none">
+<path d="M20 11.96C20 12.2933 19.9433 12.6067 19.83 12.9C19.7167 13.1933 19.56 13.46 19.36 13.7C19.16 13.94 18.9233 14.1367 18.65 14.29C18.3767 14.4433 18.08 14.5467 17.76 14.6L17.76 14.64L17.34 14.64L17.32 14.64L4.34 14.64C4.31333 14.64 4.29667 14.6433 4.29 14.65C4.28333 14.6567 4.26667 14.66 4.24 14.66C4.21333 14.66 4.19333 14.6567 4.18 14.65C4.16667 14.6433 4.14667 14.64 4.12 14.64L4 14.64L4 14.62C3.44 14.5933 2.91667 14.4667 2.43 14.24C1.94333 14.0133 1.52 13.71 1.16 13.33C0.8 12.95 0.516667 12.51 0.31 12.01C0.103333 11.51 -7.45058e-08 10.98 0 10.42C7.45058e-08 9.86 0.103333 9.33333 0.31 8.84C0.516667 8.34666 0.796667 7.91333 1.15 7.54001C1.50333 7.16667 1.91667 6.86 2.39 6.62C2.86333 6.37999 3.37333 6.24001 3.92 6.20001C4.01333 5.33333 4.25333 4.52335 4.64 3.77C5.02667 3.01666 5.52333 2.36 6.13 1.8C6.73667 1.24001 7.43333 0.799988 8.22 0.479996C9.00667 0.160004 9.84667 0 10.74 0C11.6867 0 12.58 0.180008 13.42 0.539993C14.26 0.899994 14.99 1.39333 15.61 2.02C16.23 2.64667 16.72 3.37666 17.08 4.20999C17.44 5.04333 17.62 5.93333 17.62 6.88C17.62 7.30667 17.58 7.72334 17.5 8.13C17.42 8.53668 17.3067 8.92665 17.16 9.3C17.1867 9.3 17.2167 9.29666 17.25 9.29001C17.2833 9.28333 17.3133 9.28 17.34 9.28C17.7133 9.28 18.06 9.35001 18.38 9.48999C18.7 9.62999 18.98 9.81999 19.22 10.06C19.46 10.3 19.65 10.5833 19.79 10.91C19.93 11.2367 20 11.5867 20 11.96L20 11.96ZM13.42 9C13.58 8.73334 13.6267 8.57999 13.56 8.54001C13.4933 8.5 13.3267 8.48001 13.06 8.48001C12.9 8.48001 12.6767 8.47667 12.39 8.47C12.1033 8.46333 11.8867 8.45999 11.74 8.45999C11.5267 8.45999 11.39 8.37332 11.33 8.2C11.27 8.02666 11.24 7.78667 11.24 7.48C11.24 7.05333 11.2367 6.70999 11.23 6.45C11.2233 6.19 11.22 5.90666 11.22 5.59999C11.22 5.25333 11.1967 5 11.15 4.84C11.1033 4.67999 10.9133 4.60001 10.58 4.60001C10.34 4.60001 10.16 4.60333 10.04 4.61C9.92 4.61665 9.75333 4.61998 9.54 4.61998C9.18 4.61998 8.95667 4.72334 8.87 4.93001C8.78333 5.13666 8.74 5.34 8.74 5.53999L8.74 6.17999C8.74 6.35332 8.74333 6.52 8.75 6.68001C8.75667 6.84 8.76 7.00667 8.76 7.17999L8.76 7.75999C8.76 7.97333 8.73333 8.13667 8.68 8.25C8.62667 8.36334 8.5 8.42 8.3 8.42C8.22 8.43332 8.11 8.44333 7.97 8.45C7.83 8.45667 7.68667 8.46333 7.54 8.47C7.39333 8.47667 7.25333 8.48 7.12 8.48001L6.8 8.48001C6.52 8.48001 6.35333 8.56667 6.3 8.74001C6.24667 8.91333 6.33333 9.13333 6.56 9.40001C6.78667 9.67999 7.03 9.98334 7.29 10.31C7.55 10.6367 7.80667 10.9667 8.06 11.3C8.31333 11.6333 8.55667 11.9567 8.79 12.27C9.02333 12.5833 9.24 12.8533 9.44 13.08C9.8 13.48 10.1467 13.4733 10.48 13.06C10.68 12.8333 10.9133 12.54 11.18 12.18C11.4467 11.82 11.72 11.4433 12 11.05C12.28 10.6567 12.5467 10.2767 12.8 9.90999C13.0533 9.54332 13.26 9.24001 13.42 9L13.42 9Z"   fill="url(#linear_fill_0_2380)" >
+</path>
+<defs>
+<linearGradient id="linear_fill_0_2380" x1="10" y1="0" x2="10" y2="14.6600341796875" gradientUnits="userSpaceOnUse">
+<stop offset="0" stop-color="#2BC69C"  />
+<stop offset="1" stop-color="#0CA87E"  />
+</linearGradient>
+</defs>
+</svg>
diff --git a/hx-ai-intelligent/src/view/monitor/deviceMonitor/page.vue b/hx-ai-intelligent/src/view/monitor/deviceMonitor/page.vue
index afae477..ed43d30 100644
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/page.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/page.vue
@@ -1,18 +1,25 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <a-row type="flex" style="display: flex; position: relative">
+  <a-row type="flex" style="display: flex; position: relative; background: #f1f2f6">
     <a-col :span="4">
-      <div style="padding: 0 20px; width: 100%; height: 100%">
+      <div style="width: 100%; height: 100%">
         <tree ref="treeRef" />
       </div>
     </a-col>
     <a-col :span="20">
-      <div style="width: 100%; height: 100%">
+      <div
+        style="
+          width: 98%;
+          height: 100%;
+          border-radius: 10px;
+          background: #ffffff;
+          margin-left: 1.5%;
+        ">
         <div class="ns-right-title">
           <span><ns-icon name="title" size="11" style="margin-right: 3px" />历史数据</span>
           <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" />
+            <ns-icon :name="iconName" size="15" style="margin-right: 10px" @click="change" />
           </div>
         </div>
         <graph ref="graphRef" v-if="isGraph" />
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 8c6e29e..826eeb1 100644
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
@@ -33,7 +33,7 @@
         placeholder="请选择点位"
         :style="{
           top: '50px',
-          left: `${divWidth + 40}px`,
+          left: `${divWidth + 55}px`,
           zIndex: 9,
           position: 'absolute',
           width: `${divWidth}px`,
@@ -44,7 +44,7 @@
         placeholder="请选择频率"
         :style="{
           top: '50px',
-          left: `${divWidth * 2 + 50}px`,
+          left: `${divWidth * 2 + 65}px`,
           zIndex: 9,
           position: 'absolute',
           width: `${divWidth}px`,
@@ -58,7 +58,7 @@
         @calendarChange="onCalendarChange"
         :style="{
           top: '50px',
-          left: `${divWidth * 3 + 60}px`,
+          left: `${divWidth * 3 + 75}px`,
           zIndex: 9,
           position: 'absolute',
           width: `${divWidth}px`,
@@ -68,7 +68,7 @@
         type="primary"
         :style="{
           top: '50px',
-          left: `${divWidth * 4 + 70}px`,
+          left: `${divWidth * 4 + 85}px`,
           zIndex: 9,
           position: 'absolute',
         }"
@@ -390,6 +390,10 @@
   }
   .parent-container {
     // position: relative;
+    border-radius: 10px;
+    background: #ffffff;
+    padding-left: 10px;
+    padding-right: 10px;
     height: 100%;
   }
 
diff --git a/hx-ai-intelligent/src/view/monitor/energyMonitor/analysisGraph/index.vue b/hx-ai-intelligent/src/view/monitor/energyMonitor/analysisGraph/index.vue
index ac7558b..77aeba6 100644
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/analysisGraph/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/analysisGraph/index.vue
@@ -1,9 +1,10 @@
 <template>
-  <a-row type="flex" style="height: 90%">
+  <a-row type="flex" style="height: 100%">
     <a-col :span="8" style="height: 100%">
       <div
         style="
-          box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5); /* 灰色阴影 */
+          box-shadow: 0 0 15px rgba(69, 123, 234, 0.2);
+          border-radius: 10px;
           width: 98%;
           height: 96%;
           margin: 2%;
@@ -32,7 +33,8 @@
         style="
           width: 98%;
           height: 38%;
-          box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5);
+          box-shadow: 0 0 15px rgba(69, 123, 234, 0.2);
+          border-radius: 10px;
           margin: 1%;
         "></div>
       <div
@@ -40,7 +42,8 @@
         style="
           width: 98%;
           height: 57%;
-          box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5);
+          box-shadow: 0 0 15px rgba(69, 123, 234, 0.2);
+          border-radius: 10px;
           margin: 1%;
         "></div>
     </a-col>
@@ -242,7 +245,9 @@
           var seriesdata = [];
           var dateX = [];
           // var legendList: string | any[] = [];
+          let sum = 0;
           for (let i = 0; i < data.value.length; i++) {
+            sum += data.value[i].value;
             dateX.push(data.value[i].name);
 
             seriesdata.push({
@@ -262,7 +267,7 @@
               clockwise: '10',
               // hoverAnimation: true,
               // 圆环内径和外径
-              radius: ['70%', '90%'],
+              radius: ['60%', '80%'],
               center: ['30%', '50%'], // 调整环形图的位置，百分比表示相对于容器的宽高
               // 显示折线
               labelLine: {
@@ -294,6 +299,29 @@
             tooltip: {
               trigger: 'item',
             },
+            graphic: [
+              {
+                type: 'text',
+                left: '28%',
+                top: '33%',
+                style: {
+                  text: '总计',
+                  fill: '#000',
+                  fontSize: 14,
+                },
+              },
+              {
+                type: 'text',
+                left: sum > 100 ? '24%' : '30%',
+                top: '50%',
+                style: {
+                  text: sum,
+                  fill: '#000',
+                  fontSize: 30,
+                  fontWeight: 700,
+                },
+              },
+            ],
 
             // 图例
             legend: {
@@ -334,7 +362,9 @@
           chartRight1.on('click', function (params) {
             // 控制台输出数据的名称
             console.log(params.name + ' 被点击了');
-            drawRight2(params);
+            if (params.name && params.name != '') {
+              drawRight2(params);
+            }
           });
         }
       };
@@ -360,18 +390,18 @@
         });
         const option = {
           // 图例
-          legend: {
-            data: [
-              { name: '对比值', icon: 'rect' }, // 对比值使用矩形图标
-              {
-                name: '参考线',
-                icon: 'path://M234.666667 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM473.6 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM934.4 490.666667h-136.533333a25.6 25.6 0 1 0 0 51.2h136.533333a25.6 25.6 0 1 0 0-51.2zM712.533333 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2z',
-              }, // 参考线使用自定义路径图标，只显示线条
-            ],
-            orient: 'horizontal',
-            bottom: 10,
-            left: 60,
-          },
+          // legend: {
+          //   data: [
+          //     { name: '对比值', icon: 'rect' }, // 对比值使用矩形图标
+          //     {
+          //       name: '参考线',
+          //       icon: 'path://M234.666667 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM473.6 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM934.4 490.666667h-136.533333a25.6 25.6 0 1 0 0 51.2h136.533333a25.6 25.6 0 1 0 0-51.2zM712.533333 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2z',
+          //     }, // 参考线使用自定义路径图标，只显示线条
+          //   ],
+          //   orient: 'horizontal',
+          //   bottom: 10,
+          //   left: 60,
+          // },
           tooltip: {
             trigger: 'axis',
             axisPointer: {
@@ -409,7 +439,7 @@
               zoomLock: true,
               startValue: 0, // 从头开始。
               endValue: 5,
-              bottom: '0%',
+              bottom: 20,
               height: 10,
               showDetail: false,
             },
diff --git a/hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue b/hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue
index a36cf9b..13dc5ca 100644
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="graphGraphchart" style="width: 100%; height: 80%"></div>
+  <div ref="graphGraphchart" style="width: 100%; height: 100%"></div>
 </template>
 
 <script lang="ts">
@@ -77,6 +77,10 @@
           legendList.push(data.value[i].name);
         }
         const option = {
+          grid: {
+            top: 40,
+            bottom: 50,
+          },
           legend: {
             data: legendList,
             orient: 'horizontal',
@@ -107,6 +111,21 @@
             type: 'value',
           },
           series: seriesList,
+          // 使用 ECharts 的 graphic 组件来展示无数据的提示
+          graphic:
+            data.value.length === 0
+              ? {
+                  type: 'text',
+                  left: 'center',
+                  top: 'middle',
+                  style: {
+                    text: '无数据',
+                    fontSize: 20,
+                    fontWeight: 'bold',
+                    fill: '#999',
+                  },
+                }
+              : null,
         };
 
         chartInstance = echarts.init(graphGraphchart.value);
diff --git a/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue b/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
index 4985b36..3149bc7 100644
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
@@ -1,13 +1,20 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <a-row type="flex" style="height: 92%; display: flex; position: relative">
+  <a-row type="flex" style="height: 100%; display: flex; position: relative; background: #f1f2f6">
     <a-col :span="4">
-      <div style="padding: 0 20px; width: 100%; height: 100%">
+      <div style="width: 100%; height: 100%">
         <tree ref="treeRef" />
       </div>
     </a-col>
     <a-col :span="20">
-      <div style="width: 100%; height: 100%">
+      <div
+        style="
+          width: 98%;
+          height: 100%;
+          border-radius: 10px;
+          background: #ffffff;
+          margin-left: 1.5%;
+        ">
         <div style="height: 22%">
           <div class="ns-right-title">
             <a-tabs
@@ -16,6 +23,9 @@
               @change="changeActive">
               <a-tab-pane key="1" tab="图表" />
               <a-tab-pane key="2" tab="分析" />
+              <!-- <template #renderTabBar="{ DefaultTabBar, ...props }">
+                <component :is="DefaultTabBar" v-bind="props" :style="{ opacity: 0.5 }" />
+              </template> -->
             </a-tabs>
             <div class="button">
               <ns-icon name="xiazai" size="18" style="margin-right: 10px" @click="downloadChart" />
@@ -27,11 +37,11 @@
           >
         </div>
 
-        <div v-if="activeKey == '1'" style="height: 82%; width: 100%">
+        <div v-if="activeKey == '1'" style="height: 72%; width: 100%">
           <graph-graph ref="graphRef" v-if="isGraph" />
           <environment-table ref="tableRef" v-else style="width: 100%" />
         </div>
-        <div v-else style="height: 82%; width: 100%">
+        <div v-else style="height: 78%; width: 100%">
           <analysis-graph ref="analysisGraphRef" v-if="isGraph" style="height: 100%; width: 100%" />
           <analysis-table ref="analysisTableRef" v-else />
         </div>
@@ -110,4 +120,22 @@
     display: inline-block;
     padding-right: 10px;
   }
+  ::v-deep .ant-tabs-tab {
+    font-weight: bold; /* 选中标签的加粗 */
+    // font-size: 16px;
+    // letter-spacing: 1.33px;
+    color: #666666 !important;
+  }
+  ::v-deep .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+    // background-color: #f0f0f0; /* 自定义选中背景色 */
+    // color: #1890ff; /* 自定义选中文字颜色 */
+    // border-radius: 5px; /* 选中标签的圆角 */
+    // font-weight: bold; /* 选中标签的加粗 */
+
+    color: #000000 !important;
+  }
+
+  ::v-deep .ant-tabs-tab:hover {
+    color: #000000; /* 悬停时的文字颜色 */
+  }
 </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 11c127f..e50637d 100644
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
@@ -55,7 +55,7 @@
         placeholder="请选择能耗类型"
         :style="{
           top: '100px',
-          left: `${divWidth + 40}px`,
+          left: `${divWidth + 55}px`,
           zIndex: 9,
           position: 'absolute',
           width: `${divWidth}px`,
@@ -67,7 +67,7 @@
         placeholder="请选择日期类型"
         :style="{
           top: '100px',
-          left: `${divWidth * 2 + 50}px`,
+          left: `${divWidth * 2 + 65}px`,
           zIndex: 9,
           position: 'absolute',
           width: `${divWidth}px`,
@@ -77,7 +77,7 @@
       <a-range-picker
         :style="{
           top: '100px',
-          left: `${divWidth * 3 + 60}px`,
+          left: `${divWidth * 3 + 75}px`,
           zIndex: 9,
           position: 'absolute',
           width: `${divWidth}px`,
@@ -90,7 +90,7 @@
       <a-date-picker
         :style="{
           top: '100px',
-          left: `${divWidth * 3 + 60}px`,
+          left: `${divWidth * 3 + 75}px`,
           zIndex: 9,
           position: 'absolute',
           width: `${divWidth}px`,
@@ -103,7 +103,7 @@
         type="primary"
         :style="{
           top: '100px',
-          left: `${divWidth * 4 + 70}px`,
+          left: `${divWidth * 4 + 85}px`,
           zIndex: 9,
           position: 'absolute',
         }"
@@ -601,6 +601,10 @@
   }
   .parent-container {
     // position: relative;
+    border-radius: 10px;
+    background: #ffffff;
+    padding-left: 10px;
+    padding-right: 10px;
     height: 100%;
   }
 
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 ff4e517..882fcb5 100644
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/aggregateData/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/aggregateData/index.vue
@@ -9,7 +9,7 @@
           height: 35%;
           width: 100%;
           padding: 2%;
-          box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5);
+          box-shadow: 0 0 15px rgba(69, 123, 234, 0.2);
           border-radius: 10px;
           background: #ffffff;
         ">
@@ -59,7 +59,7 @@
           height: 62%;
           margin-top: 4%;
           padding: 2%;
-          box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5);
+          box-shadow: 0 0 15px rgba(69, 123, 234, 0.2);
           border-radius: 10px;
           background: #ffffff;
         ">
@@ -127,7 +127,7 @@
           height: 100%;
           margin-left: 20px;
           padding: 1%;
-          box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5);
+          box-shadow: 0 0 15px rgba(69, 123, 234, 0.2);
           border-radius: 10px;
           background: #ffffff;
         ">
diff --git a/hx-ai-intelligent/src/view/monitor/environmentMonitor/index.vue b/hx-ai-intelligent/src/view/monitor/environmentMonitor/index.vue
index fbf6225..7dabdd5 100644
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/index.vue
@@ -1,7 +1,9 @@
 <template>
-  <div style="background: #f2f6fd; width: 100%; height: 100%">
+  <div style="width: 100%; height: 100%">
     <div style="display: flex">
-      <a-tabs v-model:activeKey="activeKey" style="height: 5%; width: 100%; background: #ffffff">
+      <a-tabs
+        v-model:activeKey="activeKey"
+        style="height: 5%; width: 100%; margin-top: 0.5%; background: #ffffff">
         <a-tab-pane key="1" tab="综合数据" />
         <a-tab-pane key="2" tab="历史数据" />
         <a-tab-pane key="3" tab="平均数据" />