屏幕编号添加

package-lock.json

@@ -1701,8 +1701,9 @@
     },
     "node_modules/gsap": {
       "version": "3.13.0",
-      "resolved": "https://registry.npmmirror.com/gsap/-/gsap-3.13.0.tgz",
-      "integrity": "sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw=="
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.13.0.tgz",
+      "integrity": "sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license."
     },
     "node_modules/has-symbols": {
       "version": "1.1.0",
@@ -3460,7 +3461,7 @@
     },
     "gsap": {
       "version": "3.13.0",
-      "resolved": "https://registry.npmmirror.com/gsap/-/gsap-3.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.13.0.tgz",
       "integrity": "sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw=="
     },
     "has-symbols": {

src/style.css

@@ -44,11 +44,13 @@
   margin: 0;
 }
 
-.page-container,.my-agency,.equipment-management {
+.page-container,
+.my-agency,
+.equipment-management {
   width: 100%;
   background: #181d21 !important;
   border-radius: 6px;
-    box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.10);
+  box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
   padding: 1rem;
   box-sizing: border-box;
 }
@@ -90,7 +92,7 @@ select:-webkit-autofill {
   border-right: unset !important;
 }
 
-.el-menu-item .is-active{
+.el-menu-item .is-active {
   background: transparent !important;
 }
 
@@ -102,3 +104,23 @@ select:-webkit-autofill {
 .el-progress-bar__outer {
   background-color: #4e4e4e;
 }
+
+.watermark {
+  position: fixed;
+  bottom: 40px;
+  right: 40px;
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(1px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 60px;
+  font-weight: bold;
+  color: rgba(255, 255, 255, 0.6);
+  z-index: 999;
+  pointer-events: none;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}

src/views/dashboard/index.vue

@@ -3,30 +3,54 @@
     <div class="header" data-testid="dashboard-header">
       <div class="msg-box" data-testid="dashboard-msg-box">
         <div class="title">AI智能监测</div>
-        <msg-item :msgList="msgList" data-testid="dashboard-msg-item"></msg-item>
+        <msg-item
+          :msgList="msgList"
+          data-testid="dashboard-msg-item"
+        ></msg-item>
       </div>
       <div class="indicators-box" data-testid="dashboard-indicators-box">
         <div class="title">综合健康度</div>
-        <div class="indicators-num" :style="{ color: customColorMethod(average) }" data-testid="dashboard-health-score">{{ average }}%</div>
+        <div
+          class="indicators-num"
+          :style="{ color: customColorMethod(average) }"
+          data-testid="dashboard-health-score"
+        >
+          {{ average }}%
+        </div>
         <div>
           <div class="indicators-item">布袋健康度</div>
-          <el-progress :percentage="bag" :color="customColorMethod" data-testid="dashboard-bag-progress" />
+          <el-progress
+            :percentage="bag"
+            :color="customColorMethod"
+            data-testid="dashboard-bag-progress"
+          />
         </div>
         <div>
           <div class="indicators-item">脉冲阀健康度</div>
-          <el-progress :percentage="pulseValve" :color="customColorMethod" data-testid="dashboard-pulse-valve-progress" />
+          <el-progress
+            :percentage="pulseValve"
+            :color="customColorMethod"
+            data-testid="dashboard-pulse-valve-progress"
+          />
         </div>
         <div>
           <div class="indicators-item">提升阀健康度</div>
-          <el-progress :percentage="poppetValve" :color="customColorMethod" data-testid="dashboard-poppet-valve-progress" />
+          <el-progress
+            :percentage="poppetValve"
+            :color="customColorMethod"
+            data-testid="dashboard-poppet-valve-progress"
+          />
         </div>
       </div>
       <div class="line-box" data-testid="dashboard-chart-box">
         <div class="title">健康度指数</div>
-        <chart-line :chartData="chartData" data-testid="dashboard-chart-line"></chart-line>
+        <chart-line
+          :chartData="chartData"
+          data-testid="dashboard-chart-line"
+        ></chart-line>
       </div>
     </div>
-
+    <div class="watermark">5</div>
     <div class="map-box" data-testid="dashboard-map-box">
       <map-svg :mapList="mapList" data-testid="dashboard-map-svg"></map-svg>
     </div>
@@ -35,7 +59,12 @@
 
 <script setup>
 import { ref, onMounted, onBeforeUnmount, computed, nextTick } from "vue";
-import { getHealthOverview, getHealthStatistic, getExceptionMonitor, getDusterAlarm } from "@/request/api/dashboard";
+import {
+  getHealthOverview,
+  getHealthStatistic,
+  getExceptionMonitor,
+  getDusterAlarm,
+} from "@/request/api/dashboard";
 import msgItem from "./components/msg-item.vue";
 import chartLine from "./components/chart-line.vue";
 import mapSvg from "./components/map-svg.vue";
@@ -51,10 +80,9 @@ const customColors = [
   { color: "#08c733", percentage: 100 },
 ];
 
-const chartData = ref(null)
+const chartData = ref(null);
 
-const msgList = ref([
-]);
+const msgList = ref([]);
 const mapList = ref([]);
 
 const customColorMethod = (percentage) => {
@@ -68,33 +96,31 @@ const customColorMethod = (percentage) => {
 };
 
 const healthOverview = () => {
-  getHealthOverview().then(res => {
-    average.value = Number(res.data.average.split('%')[0])
-  bag.value = Number(res.data.bag.split('%')[0])
-  pulseValve.value = Number(res.data.pulseValve.split('%')[0])
-  poppetValve.value = Number(res.data.poppetValve.split('%')[0])
-  })
-}
+  getHealthOverview().then((res) => {
+    average.value = Number(res.data.average.split("%")[0]);
+    bag.value = Number(res.data.bag.split("%")[0]);
+    pulseValve.value = Number(res.data.pulseValve.split("%")[0]);
+    poppetValve.value = Number(res.data.poppetValve.split("%")[0]);
+  });
+};
 
 const healthStatistic = () => {
-  getHealthStatistic().then(res => {
+  getHealthStatistic().then((res) => {
     chartData.value = res.data;
-  })
+  });
 };
 
 const exceptionMonitor = () => {
-  getExceptionMonitor().then(res => {
+  getExceptionMonitor().then((res) => {
     msgList.value = res.data;
-  })
-}
+  });
+};
 
 const handleDusterAlarm = () => {
-  getDusterAlarm().then(res => {
+  getDusterAlarm().then((res) => {
     mapList.value = res.data;
-  })
-}
-
-
+  });
+};
 
 onMounted(async () => {
   healthOverview();
@@ -103,7 +129,7 @@ onMounted(async () => {
   handleDusterAlarm();
 });
 
-onBeforeUnmount(() => { });
+onBeforeUnmount(() => {});
 </script>
 
 <style lang="scss" scoped>
@@ -123,7 +149,7 @@ onBeforeUnmount(() => { });
     justify-content: space-between;
     height: 15rem;
 
-    &>div {
+    & > div {
       background: #181d21;
       border-radius: 6px;
       box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
@@ -134,7 +160,7 @@ onBeforeUnmount(() => { });
     .title {
       font-size: 18px;
       font-weight: normal;
-      color: #CCC;
+      color: #ccc;
       line-height: 22px;
       margin-bottom: 10px;
     }