feat:首页新增饼状图和调整部分样式

@@ -7,7 +7,11 @@
     >
     >
       <div class="flex container">
       <div class="flex container">
         <div class="mr-4 flex chart-top">
         <div class="mr-4 flex chart-top">
-          <PieChartDeviceSub :legendData="legendData" :seriesData="seriesData" />
+          <PieChartDeviceSub
+            :legendData="legendData"
+            :seriesData="seriesData"
+            :radisData="radisData"
+          />
         </div>
         </div>
         <div class="ml-20 flex justify-around right-text">
         <div class="ml-20 flex justify-around right-text">
           <div class="text"> 直连设备：4个 </div>
           <div class="text"> 直连设备：4个 </div>
@@ -23,7 +27,11 @@
     >
     >
       <div class="flex container">
       <div class="flex container">
         <div class="mr-4 flex chart-top">
         <div class="mr-4 flex chart-top">
-          <PieChartDeviceSub :legendData="legendStatusData" :seriesData="seriesStatusData" />
+          <PieChartDeviceSub
+            :legendData="legendStatusData"
+            :seriesData="seriesStatusData"
+            :radisData="radisStatusData"
+          />
         </div>
         </div>
         <div class="ml-20 flex justify-around right-text">
         <div class="ml-20 flex justify-around right-text">
           <div class="text"> 待激活设备：2个 </div>
           <div class="text"> 待激活设备：2个 </div>
@@ -35,7 +43,7 @@
   </div>
   </div>
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>
-  import { ref, onMounted, defineComponent } from 'vue';
+  import { ref, onMounted, defineComponent, Ref } from 'vue';
   import { Card } from 'ant-design-vue';
   import { Card } from 'ant-design-vue';
   import { getHomeData } from '/@/api/dashboard';
   import { getHomeData } from '/@/api/dashboard';
   import { isAdmin } from '/@/enums/roleEnum';
   import { isAdmin } from '/@/enums/roleEnum';
@@ -73,20 +81,31 @@
       todayMessageAdd: number;
       todayMessageAdd: number;
     };
     };
   }
   }
+  type seriesDataT = {
+    value: number;
+    name: string;
+    itemStyle: object;
+  };
+  const radisData: any = ref('70%');
+  const radisStatusData = ref<string[]>(['40%', '70%']);
   const growCardList = ref<CardList>();
   const growCardList = ref<CardList>();
-  const legendData = ref<string[]>(['gateway', 'directly', 'sub-device']);
-  const seriesData = ref([
-    { value: 1048, name: 'gateway', itemStyle: { color: '#3aa0ff' } },
-    { value: 735, name: 'directly', itemStyle: { color: '#36cbcb' } },
-    { value: 580, name: 'sub-device', itemStyle: { color: '#4ecb73' } },
-  ]);
-  const legendStatusData = ref<string[]>(['inactive', 'online', 'offline']);
-  const seriesStatusData = ref([
-    { value: 1048, name: 'inactive', itemStyle: { color: '#3aa0ff' } },
-    { value: 735, name: 'online', itemStyle: { color: '#36cbcb' } },
-    { value: 580, name: 'offline', itemStyle: { color: '#4ecb73' } },
-  ]);
+  const legendData = ref(['gateway', 'directly', 'sub-device']);
+  const seriesData: Ref<seriesDataT[]> = ref([]);
+  const legendStatusData = ref(['inactive', 'online', 'offline']);
+  const seriesStatusData: Ref<seriesDataT[]> = ref([]);
   onMounted(async () => {
   onMounted(async () => {
+    const mockData = [
+      { value: 1048, name: 'gateway', itemStyle: { color: '#3aa0ff' } },
+      { value: 735, name: 'directly', itemStyle: { color: '#36cbcb' } },
+      { value: 580, name: 'sub-device', itemStyle: { color: '#4ecb73' } },
+    ];
+    const mockTestData = [
+      { value: 1048, name: 'inactive', itemStyle: { color: '#3aa0ff' } },
+      { value: 735, name: 'online', itemStyle: { color: '#36cbcb' } },
+      { value: 580, name: 'offline', itemStyle: { color: '#4ecb73' } },
+    ];
+    seriesData.value = mockData;
+    seriesStatusData.value = mockTestData;
     const res = await getHomeData();
     const res = await getHomeData();
     growCardList.value = res;
     growCardList.value = res;
   });
   });

@@ -28,13 +28,19 @@
         type: Array,
         type: Array,
         default: () => [],
         default: () => [],
       },
       },
+      radisData: {
+        type: Array || String,
+        default: () => ['40%', '70%'] || '70%',
+      },
     },
     },
     setup(props) {
     setup(props) {
-      const { legendData, seriesData } = toRefs(props);
+      const { legendData, seriesData, radisData } = toRefs(props);
       const dataSeries = ref<any>([]);
       const dataSeries = ref<any>([]);
       const legendDatas = ref<any>([]);
       const legendDatas = ref<any>([]);
+      const radisDatas = ref<any>([]);
       dataSeries.value = seriesData.value;
       dataSeries.value = seriesData.value;
       legendDatas.value = legendData.value;
       legendDatas.value = legendData.value;
+      radisDatas.value = radisData.value;
 
 
       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>);
@@ -55,7 +61,7 @@
           series: [
           series: [
             {
             {
               type: 'pie',
               type: 'pie',
-              radius: '60%',
+              radius: radisDatas.value,
               data: dataSeries,
               data: dataSeries,
               emphasis: {
               emphasis: {
                 itemStyle: {
                 itemStyle: {