pref:优化代码和优化离线饼图颜色

@@ -212,9 +212,14 @@
         class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4"
         class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4"
         style="color: #666; width: 50%"
         style="color: #666; width: 50%"
       >
       >
-        <div class="flex container">
+        <div class="flex container ml-4">
           <div class="mr-4 flex chart-top">
           <div class="mr-4 flex chart-top">
-            <PieChartDeviceSub :legendData="legendData" :seriesData="seriesData" :isCircle="true" />
+            <PieChartDeviceSub
+              v-if="seriesData.length > 0"
+              :legendData="legendData"
+              :seriesData="seriesData"
+              :isCircle="true"
+            />
           </div>
           </div>
           <div class="ml-20 flex justify-around right-text">
           <div class="ml-20 flex justify-around right-text">
             <div class="text">
             <div class="text">
@@ -230,9 +235,10 @@
         class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:ml-1"
         class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:ml-1"
         style="color: #666; width: 50%"
         style="color: #666; width: 50%"
       >
       >
-        <div class="flex container">
+        <div class="flex container ml-4">
           <div class="mr-4 flex chart-top">
           <div class="mr-4 flex chart-top">
             <PieChartDeviceSub
             <PieChartDeviceSub
+              v-if="seriesStatusData.length > 0"
               :legendData="legendStatusData"
               :legendData="legendStatusData"
               :seriesData="seriesStatusData"
               :seriesData="seriesStatusData"
               :isCircle="false"
               :isCircle="false"
@@ -282,42 +288,30 @@
 
 
   const growCardList = ref<CardList>();
   const growCardList = ref<CardList>();
 
 
+  const devicePieColor = [
+    { key: 'directConnection', itemStyle: { color: '#5C7BD9' }, value: '直连设备' },
+    { key: 'gateWay', itemStyle: { color: '#91CC75' }, value: '网关设备' },
+    { key: 'sensor', itemStyle: { color: '#FAC859' }, value: '网关子设备' },
+    { key: 'inActive', itemStyle: { color: '#5C7BD9' }, value: '待激活' },
+    { key: 'onLine', itemStyle: { color: '#91CC75 ' }, value: '在线' },
+    { key: 'offLine', itemStyle: { color: '#EC4040' }, value: '离线' },
+  ];
+
   onMounted(async () => {
   onMounted(async () => {
     const res = await getHomeData();
     const res = await getHomeData();
     growCardList.value = res;
     growCardList.value = res;
-    const devObj = growCardList.value?.deviceInfo;
-    for (let o in devObj) {
-      if (o === 'directConnection' || o === 'gateWay' || o === 'sensor') {
-        seriesData.value.push({
-          value:
-            o === 'directConnection'
-              ? devObj?.directConnection
-              : o === 'gateWay'
-              ? devObj?.gateWay
-              : devObj?.sensor,
-          name: o === 'directConnection' ? '直连设备' : o === 'gateWay' ? '网关设备' : '网关子设备',
-          itemStyle:
-            o === 'directConnection'
-              ? { color: '#5C7BD9' }
-              : o === 'gateWay'
-              ? { color: '#91CC75' }
-              : { color: '#FAC859' },
-        });
-      }
-      if (o === 'inActive' || o === 'onLine' || o === 'offLine') {
-        seriesStatusData.value.push({
-          value:
-            o === 'inActive' ? devObj?.inActive : o === 'onLine' ? devObj?.onLine : devObj?.offLine,
-          name: o === 'inActive' ? '待激活' : o === 'onLine' ? '在线' : '离线',
-          itemStyle:
-            o === 'inActive'
-              ? { color: '#5C7BD9' }
-              : o === 'onLine'
-              ? { color: '#91CC75' }
-              : { color: '#FAC859' },
-        });
-      }
-    }
+    const { deviceInfo } = growCardList.value!;
+    let data = Object.entries(deviceInfo).map(([key, value]) => {
+      const name = devicePieColor?.find((f) => f.key === key)?.value;
+      const itemStyle = devicePieColor?.find((f) => f.key === key)?.itemStyle;
+      return { key, value, itemStyle, name };
+    });
+    seriesData.value = data.filter(
+      (f) => f.key === 'directConnection' || f.key === 'gateWay' || f.key === 'sensor'
+    );
+    seriesStatusData.value = data.filter(
+      (f) => f.key === 'inActive' || f.key === 'onLine' || f.key === 'offLine'
+    );
   });
   });
 </script>
 </script>
 <style lang="css">
 <style lang="css">

@@ -43,6 +43,12 @@
 
 
       const chartRef = ref<HTMLDivElement | null>(null);
       const chartRef = ref<HTMLDivElement | null>(null);
       const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
       const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
+      const labelLine = {
+        normal: {
+          show: true,
+          length2: 1,
+        },
+      } as any;
       onMounted(() => {
       onMounted(() => {
         setOptions({
         setOptions({
           backgroundColor: '#ffffff',
           backgroundColor: '#ffffff',
@@ -70,12 +76,7 @@
                   shadowColor: 'rgba(0, 0, 0, 0.5)',
                   shadowColor: 'rgba(0, 0, 0, 0.5)',
                 },
                 },
               },
               },
-              labelLine: {
-                normal: {
-                  show: true,
-                  length2: 1,
-                },
-              },
+              labelLine,
             },
             },
           ],
           ],
         });
         });

@@ -44,6 +44,7 @@ export interface CardList {
 }
 }
 export type seriesDataT = {
 export type seriesDataT = {
   value: number | undefined;
   value: number | undefined;
-  name: string;
-  itemStyle: object;
+  name: string | undefined;
+  itemStyle: object | undefined;
+  key?: string | undefined;
 };
 };