pref:优化首页右边设备状态统计圆环图渲染方式

@@ -254,13 +254,11 @@
       >
       >
         <a-row type="flex" justify="space-between" align="middle">
         <a-row type="flex" justify="space-between" align="middle">
           <a-col :span="12">
           <a-col :span="12">
-            <div>
-              <PieChartDeviceStatus
-                v-if="seriesStatusData.length > 0"
-                :seriesStatusData="seriesStatusData"
-              />
-              <div class="empty-box" v-else><Empty :image="Empty.PRESENTED_IMAGE_SIMPLE" /></div>
-            </div>
+            <PieChartDeviceStatus
+              v-if="seriesStatusData.length > 0"
+              :seriesStatusData="seriesStatusData"
+            />
+            <div class="empty-box" v-else><Empty :image="Empty.PRESENTED_IMAGE_SIMPLE" /></div>
           </a-col>
           </a-col>
           <a-col :span="12">
           <a-col :span="12">
             <a-row type="flex" justify="space-between" align="middle" style="row-gap: 30px">
             <a-row type="flex" justify="space-between" align="middle" style="row-gap: 30px">

@@ -6,10 +6,10 @@
       :key="index"
       :key="index"
       :span="8"
       :span="8"
     >
     >
-      <div
+      <a-col
         :id="`chartPie${item.key}`"
         :id="`chartPie${item.key}`"
-        style="width: 150px; height: 200px; position: relative; top: -0.7rem"
-      ></div>
+        style="width: 10rem; height: 12rem; position: relative; top: -0.7rem"
+      />
     </a-col>
     </a-col>
   </a-row>
   </a-row>
 </template>
 </template>
@@ -76,7 +76,7 @@
                 style: {
                 style: {
                   fill: '#1a1a1a',
                   fill: '#1a1a1a',
                   text: value + '个',
                   text: value + '个',
-                  font: '14px Microsoft YaHei',
+                  font: '1.25vh Microsoft YaHei',
                 },
                 },
               },
               },
             ],
             ],
@@ -104,18 +104,19 @@
         }
         }
       });
       });
 
 
-      const resize = () => {
+      const resize = (flag) => {
         Object.keys(chartsInstance).forEach((key) => {
         Object.keys(chartsInstance).forEach((key) => {
-          chartsInstance[key].resize();
+          const doFuncKey = chartsInstance[key];
+          flag === 'r' ? doFuncKey.resize() : doFuncKey.dispose();
         });
         });
       };
       };
 
 
       onMounted(() => {
       onMounted(() => {
-        window.addEventListener('resize', resize);
+        window.addEventListener('resize', () => resize('r'));
       });
       });
 
 
       onUnmounted(() => {
       onUnmounted(() => {
-        window.removeEventListener('resize', resize);
+        window.removeEventListener('resize', () => resize('d'));
       });
       });
     },
     },
   });
   });