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

 <template>
+  <!-- 首页基础信息 -->
   <div class="md:flex">
     <Card size="small" class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4" style="color: #666">
       <div class="flex" style="height: 100px">
@@ -131,8 +132,12 @@
         今日新增 {{ toThousands(growCardList?.customerInfo?.todayAdd) }}</div
       >
     </Card>
-
-    <Card size="small" class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:ml-4" style="color: #666">
+    <Card
+      v-if="!isAdmin(role)"
+      size="small"
+      class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:ml-4"
+      style="color: #666"
+    >
       <div class="flex" style="height: 100px">
         <div class="mr-4">
           <img
@@ -188,50 +193,143 @@
       >
     </Card>
   </div>
+  <!-- 首页饼图 -->
+  <div class="md:flex mt-4" v-if="!isAdmin(role)">
+    <Card
+      size="small"
+      class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4"
+      style="color: #666; width: 50%"
+    >
+      <div class="flex container">
+        <div class="mr-4 flex chart-top">
+          <PieChartDeviceSub :legendData="legendData" :seriesData="seriesData" :isCircle="true" />
+        </div>
+        <div class="ml-20 flex justify-around right-text">
+          <div class="text">
+            直连设备：{{ growCardList?.deviceInfo?.directConnection ?? 0 }}个
+          </div>
+          <div class="text"> 网关设备：{{ growCardList?.deviceInfo?.gateWay ?? 0 }}个 </div>
+          <div class="text"> 网关子设备：{{ growCardList?.deviceInfo?.sensor ?? 0 }}个 </div>
+        </div>
+      </div>
+    </Card>
+    <Card
+      size="small"
+      class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:ml-1"
+      style="color: #666; width: 50%"
+    >
+      <div class="flex container">
+        <div class="mr-4 flex chart-top">
+          <PieChartDeviceSub
+            :legendData="legendStatusData"
+            :seriesData="seriesStatusData"
+            :isCircle="false"
+          />
+        </div>
+        <div class="ml-20 flex justify-around right-text">
+          <div class="text"> 待激活设备：{{ growCardList?.deviceInfo?.inActive ?? 0 }}个 </div>
+          <div class="text"> 在线设备：{{ growCardList?.deviceInfo?.onLine ?? 0 }}个 </div>
+          <div class="text"> 离线设备：{{ growCardList?.deviceInfo?.offLine ?? 0 }}个 </div>
+        </div>
+      </div>
+    </Card>
+  </div>
 </template>
 <script lang="ts" setup>
-  import { ref, onMounted, defineComponent } from 'vue';
+  import { ref, onMounted, defineComponent, Ref } from 'vue';
   import { Card } from 'ant-design-vue';
   import { getHomeData } from '/@/api/dashboard';
   import { isAdmin } from '/@/enums/roleEnum';
   import { toThousands } from '/@/utils/fnUtils';
   import { CountTo } from '/@/components/CountTo/index';
   import { Tooltip } from 'ant-design-vue';
+  import { CardList, seriesDataT } from './props';
+  import PieChartDeviceSub from './PieChartDeviceSub.vue';
 
   defineProps<{
     role: string;
   }>();
+
   defineExpose({
     isAdmin,
     toThousands,
   });
+
   defineComponent({
     Card,
   });
-  interface CardList {
-    deviceInfo: {
-      sumCount: number;
-      onLine: number;
-      offLine: number;
-      inActive: number;
-      todayAdd: number;
-    };
-    tenantInfo?: { sumCount: number; todayAdd: number };
-    customerInfo?: { sumCount: number; todayAdd: number };
-    alarmInfo?: {
-      sumCount: number;
-      todayAdd: number;
-    };
-    messageInfo?: {
-      dataPointsCount: number;
-      messageCount: number;
-      todayDataPointsAdd: number;
-      todayMessageAdd: number;
-    };
-  }
+
+  const legendData = ref(['网关设备', '直连设备', '网关子设备']);
+
+  const seriesData: Ref<seriesDataT[]> = ref([]);
+
+  const legendStatusData = ref(['待激活', '在线', '离线']);
+
+  const seriesStatusData: Ref<seriesDataT[]> = ref([]);
+
   const growCardList = ref<CardList>();
+
   onMounted(async () => {
     const res = await getHomeData();
     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: '#5AEEED' }
+              : o === 'gateWay'
+              ? { color: '#0B55F1' }
+              : { color: '#00C678' },
+        });
+      }
+      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: '#F9C900' }
+              : o === 'onLine'
+              ? { color: '#5AEEED' }
+              : { color: '#FF9C4A' },
+        });
+      }
+    }
   });
 </script>
+<style lang="css">
+  .right-text {
+    width: 40%;
+    flex-direction: column;
+    height: 240px;
+    margin: 10px 0 10px 50px;
+  }
+
+  .text {
+    color: #333;
+    font-weight: bold;
+    display: flex;
+    flex-wrap: nowrap;
+  }
+
+  .chart-top {
+    width: 60%;
+    height: 300px;
+    align-items: center;
+    margin-top: -30px;
+  }
+
+  .container {
+    width: 100%;
+  }
+</style>

-<template>
-  <div class="md:flex mt-4">
-    <Card
-      size="small"
-      class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4"
-      style="color: #666; width: 50%"
-    >
-      <div class="flex container">
-        <div class="mr-4 flex chart-top">
-          <PieChartDeviceSub
-            :legendData="legendData"
-            :seriesData="seriesData"
-            :radisData="radisData"
-          />
-        </div>
-        <div class="ml-20 flex justify-around right-text">
-          <div class="text"> 直连设备：4个 </div>
-          <div class="text"> 网关设备：1个 </div>
-          <div class="text"> 网关子设备：6个 </div>
-        </div>
-      </div>
-    </Card>
-    <Card
-      size="small"
-      class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:ml-1"
-      style="color: #666; width: 50%"
-    >
-      <div class="flex container">
-        <div class="mr-4 flex chart-top">
-          <PieChartDeviceSub
-            :legendData="legendStatusData"
-            :seriesData="seriesStatusData"
-            :radisData="radisStatusData"
-          />
-        </div>
-        <div class="ml-20 flex justify-around right-text">
-          <div class="text"> 待激活设备：2个 </div>
-          <div class="text"> 在线设备：1个 </div>
-          <div class="text"> 离线设备：4个 </div>
-        </div>
-      </div>
-    </Card>
-  </div>
-</template>
-<script lang="ts" setup>
-  import { ref, onMounted, defineComponent, Ref } from 'vue';
-  import { Card } from 'ant-design-vue';
-  import { getHomeData } from '/@/api/dashboard';
-  import { isAdmin } from '/@/enums/roleEnum';
-  import { toThousands } from '/@/utils/fnUtils';
-  import PieChartDeviceSub from './PieChartDeviceSub.vue';
-
-  defineProps<{
-    role: string;
-  }>();
-  defineExpose({
-    isAdmin,
-    toThousands,
-  });
-  defineComponent({
-    Card,
-  });
-  interface CardList {
-    deviceInfo: {
-      sumCount: number;
-      onLine: number;
-      offLine: number;
-      inActive: number;
-      todayAdd: number;
-    };
-    tenantInfo?: { sumCount: number; todayAdd: number };
-    customerInfo?: { sumCount: number; todayAdd: number };
-    alarmInfo?: {
-      sumCount: number;
-      todayAdd: number;
-    };
-    messageInfo?: {
-      dataPointsCount: number;
-      messageCount: number;
-      todayDataPointsAdd: 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 legendData = ref(['gateway', 'directly', 'sub-device']);
-  const seriesData: Ref<seriesDataT[]> = ref([
-    { value: 1048, name: 'gateway', itemStyle: { color: '#3079FF' } },
-    { value: 735, name: 'directly', itemStyle: { color: '#36cbcb' } },
-    { value: 580, name: 'sub-device', itemStyle: { color: '#4ecb73' } },
-  ]);
-  const legendStatusData = ref(['inactive', 'online', 'offline']);
-  const seriesStatusData: Ref<seriesDataT[]> = ref([
-    { value: 1048, name: 'inactive', itemStyle: { color: '#3079FF' } },
-    { value: 735, name: 'online', itemStyle: { color: '#36cbcb' } },
-    { value: 580, name: 'offline', itemStyle: { color: '#4ecb73' } },
-  ]);
-  onMounted(async () => {
-    const res = await getHomeData();
-    growCardList.value = res;
-  });
-</script>
-
-<style lang="css">
-  .right-text {
-    width: 40%;
-    flex-direction: column;
-    height: 240px;
-    margin: 10px 0 10px 50px;
-  }
-
-  .text {
-    color: #333;
-    font-weight: bold;
-    display: flex;
-    flex-wrap: nowrap;
-  }
-
-  .chart-top {
-    width: 60%;
-    height: 300px;
-    align-items: center;
-    margin-top: -30px;
-  }
-
-  .container {
-    width: 100%;
-  }
-</style>

@@ -8,6 +8,7 @@
   import { defineComponent, PropType, ref, Ref, onMounted, toRefs } from 'vue';
   import { useECharts } from '/@/hooks/web/useECharts';
   import { Empty } from 'ant-design-vue';
+  import { seriesDataT } from './props';
 
   export default defineComponent({
     components: { Empty },
@@ -28,19 +29,17 @@
         type: Array,
         default: () => [],
       },
-      radisData: {
-        type: Array || String,
-        default: () => ['40%', '70%'] || '70%',
+      isCircle: {
+        type: Boolean,
+        default: true,
       },
     },
     setup(props) {
-      const { legendData, seriesData, radisData } = toRefs(props);
-      const dataSeries = ref<any>([]);
-      const legendDatas = ref<any>([]);
-      const radisDatas = ref<any>([]);
-      dataSeries.value = seriesData.value;
-      legendDatas.value = legendData.value;
-      radisDatas.value = radisData.value;
+      const { legendData, seriesData } = toRefs(props);
+      const dataSeries: Ref<seriesDataT[]> = ref([]);
+      const legendDatas: Ref<seriesDataT[]> = ref([]);
+      dataSeries.value = seriesData.value as unknown as seriesDataT[];
+      legendDatas.value = legendData.value as unknown as seriesDataT[];
 
       const chartRef = ref<HTMLDivElement | null>(null);
       const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
@@ -60,8 +59,9 @@
           },
           series: [
             {
+              avoidLabelOverlap: false,
               type: 'pie',
-              radius: radisDatas.value,
+              radius: props.isCircle ? '60%' : ['40%', '60%'],
               data: dataSeries.value,
               emphasis: {
                 itemStyle: {
@@ -70,6 +70,12 @@
                   shadowColor: 'rgba(0, 0, 0, 0.5)',
                 },
               },
+              labelLine: {
+                normal: {
+                  show: true,
+                  length2: 1,
+                },
+              },
             },
           ],
         });

@@ -243,7 +243,6 @@
         }
       } else {
         if (data) {
-          console.log('消息数', data);
           if (data) {
             const { transportDataPointsCountHourly, transportMsgCountHourly } =
               data.data[0].latest.TIME_SERIES;
@@ -259,9 +258,7 @@
               transportDataPointsCountHourly?.ts,
               transportDataPointsCountHourly?.value,
             ]);
-            console.log('state.dataPointList', state.dataPointList);
             state.messageList.push([transportMsgCountHourly?.ts, transportMsgCountHourly?.value]);
-            console.log('state.messageList', state.messageList);
           }
         }
         if (update) {
@@ -276,8 +273,6 @@
           }
           state.dataPointList = newArray;
           state.messageList = newArray1;
-          console.log('newArray', state.dataPointList);
-          console.log('newArray1', state.messageList);
         }
       }
     },

@@ -13,3 +13,33 @@ export const basicProps = {
     default: '280px',
   },
 };
+
+export interface CardList {
+  deviceInfo: {
+    sumCount: number;
+    onLine: number;
+    offLine: number;
+    inActive: number;
+    todayAdd: number;
+    directConnection: number;
+    gateWay: number;
+    sensor: number;
+  };
+  tenantInfo?: { sumCount: number; todayAdd: number };
+  customerInfo?: { sumCount: number; todayAdd: number };
+  alarmInfo?: {
+    sumCount: number;
+    todayAdd: number;
+  };
+  messageInfo?: {
+    dataPointsCount: number;
+    messageCount: number;
+    todayDataPointsAdd: number;
+    todayMessageAdd: number;
+  };
+}
+export type seriesDataT = {
+  value: number | undefined;
+  name: string;
+  itemStyle: object;
+};

@@ -2,7 +2,6 @@
   <div class="p-4 md:flex">
     <div class="md:w-7/10 w-full !mr-4 enter-y">
       <GrowCard :loading="loading" class="enter-y" :role="role" />
-      <PieChartDevice :loading="loading" class="enter-y" :role="role" />
       <SiteAnalysisMessage class="!my-4 enter-y" :loading="loading" :role="role" />
       <SiteAnalysis class="!my-4 enter-y" :loading="loading" :role="role" />
       <div class="md:flex enter-y" v-if="!isAdmin(role)">
@@ -31,15 +30,17 @@
   import { USER_INFO_KEY } from '/@/enums/cacheEnum';
   import { getAuthCache } from '/@/utils/auth';
   import { isAdmin } from '/@/enums/roleEnum';
-  import PieChartDevice from './components/PieChartDevice.vue';
 
   defineExpose({
     isAdmin,
   });
 
   const userInfo: any = getAuthCache(USER_INFO_KEY);
+
   const role: string = userInfo?.roles[0];
+
   const loading = ref(true);
+
   setTimeout(() => {
     loading.value = false;
   }, 1500);