refactor:【antd】【iot】重构首页统计组件，优化图表配置和数据加载逻辑，移除未使用的比较卡片组件

apps/web-antd/src/views/iot/home/modules/device-count-card.vue

@@ -7,6 +7,8 @@ import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 import { Card, Empty } from 'ant-design-vue';
 
+import { getDeviceCountPieChartOptions } from '../chart-options';
+
 defineOptions({ name: 'DeviceCountCard' });
 
 const props = defineProps<{
@@ -27,77 +29,17 @@ const hasData = computed(() => {
 });
 
 /** 初始化图表 */
-function initChart() {
+async function initChart() {
   if (!hasData.value) {
     return;
   }
 
-  // TODO @haohao：await nextTick();
-  nextTick(() => {
-    const data = Object.entries(
-      props.statsData.productCategoryDeviceCounts,
-    ).map(([name, value]) => ({ name, value }));
+  await nextTick();
+  const data = Object.entries(
+    props.statsData.productCategoryDeviceCounts,
+  ).map(([name, value]) => ({ name, value }));
 
-    // TODO @haohao：看看 chart-options 怎么提取出去，类似 apps/web-antd/src/views/mall/statistics/member/modules/area-chart-options.ts 写法
-    renderEcharts({
-      tooltip: {
-        trigger: 'item',
-        formatter: '{b}: {c} 个 ({d}%)',
-      },
-      legend: {
-        type: 'scroll',
-        orient: 'horizontal',
-        bottom: '10px',
-        left: 'center',
-        icon: 'circle',
-        itemWidth: 10,
-        itemHeight: 10,
-        itemGap: 12,
-        textStyle: {
-          fontSize: 12,
-        },
-        pageButtonPosition: 'end',
-        pageIconSize: 12,
-        pageTextStyle: {
-          fontSize: 12,
-        },
-        pageFormatter: '{current}/{total}',
-      },
-      series: [
-        {
-          name: '设备数量',
-          type: 'pie',
-          radius: ['35%', '55%'],
-          center: ['50%', '40%'],
-          avoidLabelOverlap: false,
-          itemStyle: {
-            borderRadius: 8,
-            borderColor: '#fff',
-            borderWidth: 2,
-          },
-          label: {
-            show: false,
-          },
-          emphasis: {
-            label: {
-              show: true,
-              fontSize: 16,
-              fontWeight: 'bold',
-            },
-            itemStyle: {
-              shadowBlur: 10,
-              shadowOffsetX: 0,
-              shadowColor: 'rgba(0, 0, 0, 0.5)',
-            },
-          },
-          labelLine: {
-            show: false,
-          },
-          data,
-        },
-      ],
-    });
-  });
+  renderEcharts(getDeviceCountPieChartOptions(data));
 }
 
 /** 监听数据变化 */
@@ -116,7 +58,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <Card title="设备数量统计" :loading="loading" class="chart-card">
+  <Card title="设备数量统计" :loading="loading" class="h-full">
     <div
       v-if="loading && !hasData"
       class="flex h-[300px] items-center justify-center"
@@ -136,12 +78,7 @@ onMounted(() => {
 </template>
 
 <style scoped>
-/** TODO tindwind */
-.chart-card {
-  height: 100%;
-}
-
-.chart-card :deep(.ant-card-body) {
+:deep(.ant-card-body) {
   padding: 20px;
 }
 </style>