refactor(设备概览): 设备概览添加正常数量

src/apis/index.js

@@ -23,6 +23,7 @@ export const getDevicesCount = () => {
         offline: 10,
         fault: 10,
         warning: 15,
+        normal: 65,
       });
     }, 100);
   });

src/components/overview/chart-device-count.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="device-overview-container" style="height: 228px"></div>
+  <div id="device-overview-container" style="height: 354px"></div>
 </template>
 
 <script setup>

src/components/overview/chart-device-detail.vue

@@ -2,13 +2,27 @@
   <el-card class="pb-4" shadow="hover">
     <el-row :gutter="20">
       <el-col :span="12">
+        <div class="text-sm text-gray-400">设备总数</div>
+        <div class="text-gray-500 text-4xl mt-1 mb-3">{{ count.total }}</div>
+        <div class="line-wrap bg-blue-50">
+          <div :style="{ width: `${countPercent.total}` }" class="line bg-blue-300"></div>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="text-sm text-gray-400">正常数量</div>
+        <div class="text-gray-500 text-4xl mt-1 mb-3">{{ count.normal }}</div>
+        <div class="line-wrap bg-lime-50">
+          <div :style="{ width: `${countPercent.normal}` }" class="line bg-lime-300"></div>
+        </div>
+      </el-col>
+      <el-col :span="12" class="mt-10">
         <div class="text-sm text-gray-400">在线数量</div>
         <div class="text-gray-500 text-4xl mt-1 mb-3">{{ count.online }}</div>
         <div class="line-wrap bg-green-50">
           <div :style="{ width: `${countPercent.online}` }" class="line bg-green-300"></div>
         </div>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="12" class="mt-10">
         <div class="text-sm text-gray-400">离线数量</div>
         <div class="text-gray-500 text-4xl mt-1 mb-3">{{ count.offline }}</div>
         <div class="line-wrap bg-gray-50">
@@ -45,6 +59,8 @@ const countPercent = computed(() => {
     offline: computeWidth(count.value.offline),
     warning: computeWidth(count.value.warning),
     fault: computeWidth(count.value.fault),
+    total: computeWidth(count.value.total),
+    normal: computeWidth(count.value.normal),
   };
 });
 

src/utils/overview.js

@@ -27,7 +27,7 @@ export function generateChartOption(count) {
       {
         name: '设备统计',
         type: 'pie',
-        radius: ['50%', '98%'],
+        radius: ['70%', '95%'],
         avoidLabelOverlap: false,
         itemStyle: {
           borderRadius: 10,
@@ -37,7 +37,7 @@ export function generateChartOption(count) {
         label: {
           show: true,
           position: 'inside',
-          fontSize: 18,
+          fontSize: 17,
           color: '#FFF',
           // formatter: '{b}\n{c}',
           lineHeight: 40,
@@ -45,7 +45,7 @@ export function generateChartOption(count) {
         emphasis: {
           label: {
             show: true,
-            fontSize: 20,
+            fontSize: 19,
             fontWeight: 'bold',
           },
         },
@@ -54,22 +54,64 @@ export function generateChartOption(count) {
           {
             value: count.online,
             name: '在线',
-            itemStyle: { color: '#10B981' },
+            itemStyle: { color: '#4ADE80' },
           },
           {
             value: count.offline,
             name: '离线',
-            itemStyle: { color: '#6B7280' },
+            itemStyle: { color: '#94A3B8' },
+          },
+        ],
       },
+      {
+        name: '设备统计',
+        type: 'pie',
+        radius: ['35%', '60%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: '#fff',
+          borderWidth: 2,
+        },
+        label: {
+          show: true,
+          position: 'inside',
+          fontSize: 14,
+          color: '#323232',
+          // formatter: '{b}\n{c}',
+          lineHeight: 40,
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 16,
+            fontWeight: 'bold',
+          },
+        },
+        labelLine: { show: false },
+        data: [
           {
             value: count.fault,
             name: '故障',
-            itemStyle: { color: '#EF4444' },
+            itemStyle: { color: '#FCA5A5' },
           },
           {
             value: count.warning,
             name: '报警',
-            itemStyle: { color: '#F59E0B' },
+            itemStyle: { color: '#FDE047' },
+          },
+          {
+            value: count.normal,
+            name: '正常',
+            itemStyle: { color: '#6EE7B7' },
+          },
+          {
+            value: count.offline,
+            name: '离线',
+            itemStyle: {
+              color: '#fff',
+              opacity: 0,
+            },
           },
         ],
       },