From ab693a92e8729f8be2fe4ed0952669d68e609352 Mon Sep 17 00:00:00 2001
From: wally <18603454788@163.com>
Date: Tue, 16 Nov 2021 15:58:07 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E8=AE=BE=E5=A4=87=E6=A6=82=E8=A7=88):?=
 =?UTF-8?q?=20=E8=AE=BE=E5=A4=87=E6=A6=82=E8=A7=88=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=AD=A3=E5=B8=B8=E6=95=B0=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/index.js                             |  1 +
 .../overview/chart-device-count.vue           |  2 +-
 .../overview/chart-device-detail.vue          | 18 +++++-
 src/utils/overview.js                         | 56 ++++++++++++++++---
 4 files changed, 68 insertions(+), 9 deletions(-)

diff --git a/src/apis/index.js b/src/apis/index.js
index 1b7f8f2..753797c 100644
--- a/src/apis/index.js
+++ b/src/apis/index.js
@@ -23,6 +23,7 @@ export const getDevicesCount = () => {
         offline: 10,
         fault: 10,
         warning: 15,
+        normal: 65,
       });
     }, 100);
   });
diff --git a/src/components/overview/chart-device-count.vue b/src/components/overview/chart-device-count.vue
index 5e12fdc..9f15aaf 100644
--- a/src/components/overview/chart-device-count.vue
+++ b/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>
diff --git a/src/components/overview/chart-device-detail.vue b/src/components/overview/chart-device-detail.vue
index 729621a..c7747ca 100644
--- a/src/components/overview/chart-device-detail.vue
+++ b/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),
   };
 });
 
diff --git a/src/utils/overview.js b/src/utils/overview.js
index e3e340c..983058e 100644
--- a/src/utils/overview.js
+++ b/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,
+            },
           },
         ],
       },