sss

src/packages/components/Charts/MyComponents/DeviceStatus/config.ts

@@ -10,13 +10,14 @@ export const option = {
   textColor: '#ffffff',
   headerBackgroundColor: 'rgba(26, 56, 90, 0.5)',
   itemBackgroundColor: 'rgba(15, 35, 62, 0.5)',
-  timeColor: '#FF4D4F',
+  timeTextColor: '#ffffff',
+  timeBgColor: '#FF4D4F',
   headerHeight: 40,
   itemHeight: 35,
   fontSize: 14,
   title: '设备实时在线概况',
   titleSize: 20,
-  titleColor: '#ffffff',
+  titleColor: '#B4E4FF',
   iconColor: '#00E5FF',
   onlineRate: 75,
   onlineDevice: 23,

src/packages/components/Charts/MyComponents/DeviceStatus/index.vue

@@ -6,17 +6,13 @@
           <svg-icon icon-class="rocket" class="title-icon" :style="{ color: option.iconColor }"></svg-icon>
         </div>
         <div class="title-text-bg" :style="{ backgroundColor: option.headerBgColor2 }">
-          <span :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</span>
+          <span class="title-text" :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</span>
         </div>
       </div>
       <div class="header-right">
         <div class="legend">
           <div v-for="color in option.legendColors" :key="color" class="legend-item" :style="{ backgroundColor: color }"></div>
         </div>
-        <div class="device-count">
-          <span class="online">{{ option.onlineDevice }}</span>
-          <span class="total">/ {{ option.totalDevice }}</span>
-        </div>
       </div>
     </div>
     <div class="status-section">
@@ -27,8 +23,8 @@
             :style="{ background: `conic-gradient(${option.progressColor} 0% ${option.onlineRate}%, ${option.progressBgColor} ${option.onlineRate}% 100%)` }"
           >
             <div class="rate-text-wrapper">
-              <span class="rate-text">{{ option.onlineRate }}</span>
-              <span class="rate-percent">%</span>
+              <span class="rate-text" :style="{ color: option.progressColor }">{{ option.onlineRate }}</span>
+              <span class="rate-percent" :style="{ color: option.progressColor }">%</span>
             </div>
           </div>
         </div>
@@ -39,6 +35,10 @@
           <div class="progress" :style="{ width: option.onlineRate + '%', backgroundColor: option.progressColor }"></div>
         </div>
       </div>
+      <div class="device-count">
+        <span class="online">{{ option.onlineDevice }}</span>
+        <span class="total">/ {{ option.totalDevice }}</span>
+      </div>
     </div>
     <div class="table-header" :style="{ backgroundColor: option.headerBackgroundColor, height: option.headerHeight + 'px' }">
       <div v-for="header in option.header" :key="header" class="header-item" :style="{ color: option.headerTextColor, fontSize: option.fontSize + 'px' }">
@@ -51,7 +51,11 @@
         <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.enterprise }}</div>
         <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.deviceType }}</div>
         <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.deviceName }}</div>
-        <div class="row-item time" :style="{ color: option.timeColor, fontSize: option.fontSize + 'px' }">{{ item.time }}</div>
+        <div class="row-item time-wrapper">
+          <div class="time" :style="{ backgroundColor: option.timeBgColor, color: option.timeTextColor, fontSize: option.fontSize + 'px' }">
+            {{ item.time }}
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -86,7 +90,7 @@ const option = computed(() => props.chartConfig.option)
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 15px;
+    margin-bottom: 10px;
 
     .header-left {
       display: flex;
@@ -110,6 +114,9 @@ const option = computed(() => props.chartConfig.option)
         align-items: center;
         justify-content: center;
         clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%);
+        .title-text {
+          text-shadow: 0 0 10px rgba(180, 228, 255, 0.8);
+        }
       }
     }
 
@@ -125,15 +132,6 @@ const option = computed(() => props.chartConfig.option)
           margin-left: 5px;
         }
       }
-      .device-count {
-        font-size: 20px;
-        .online {
-          color: #00e5ff;
-        }
-        .total {
-          color: #ffffff;
-        }
-      }
     }
   }
 
@@ -141,6 +139,7 @@ const option = computed(() => props.chartConfig.option)
     display: flex;
     align-items: center;
     margin-bottom: 15px;
+    padding: 0 10px;
     .online-rate {
       display: flex;
       align-items: center;
@@ -182,13 +181,12 @@ const option = computed(() => props.chartConfig.option)
         }
         .rate-text-wrapper {
           position: absolute;
-          color: #00e5ff;
           .rate-text {
-            font-size: 22px;
+            font-size: 24px;
             font-weight: bold;
           }
           .rate-percent {
-            font-size: 12px;
+            font-size: 14px;
             margin-left: 2px;
           }
         }
@@ -211,6 +209,16 @@ const option = computed(() => props.chartConfig.option)
         border-radius: 6px;
       }
     }
+    .device-count {
+      font-size: 20px;
+      margin-left: 15px;
+      .online {
+        color: #00e5ff;
+      }
+      .total {
+        color: #ffffff;
+      }
+    }
   }
 
   .table-header {
@@ -250,13 +258,15 @@ const option = computed(() => props.chartConfig.option)
         &:nth-child(1) { flex: 2; }
         &:nth-child(2) { flex: 2; }
         &:nth-child(3) { flex: 3; }
-        &:nth-child(4) {
-          flex: 1;
-          text-align: right;
-          padding-right: 10px;
       }
-        &.time {
-          color: #ff4d4f;
+      .time-wrapper {
+        flex: 1;
+        display: flex;
+        justify-content: flex-end;
+        padding-right: 10px;
+        .time {
+          padding: 2px 8px;
+          border-radius: 5px;
         }
       }
     }