perf: 优化首页统计块展示

 import { BasicPageParams } from './../model/baseModel';
 import { BasicPageParams } from './../model/baseModel';
+import { HomeStatisticsRecordType } from './model';
 import { defHttp } from '/@/utils/http/axios';
 import { defHttp } from '/@/utils/http/axios';
 enum HomeEnum {
 enum HomeEnum {
   home = '/homepage/left/top',
   home = '/homepage/left/top',
@@ -9,7 +10,7 @@ enum HomeEnum {
 }
 }
 
 
 export const getHomeData = () => {
 export const getHomeData = () => {
-  return defHttp.get({
+  return defHttp.get<HomeStatisticsRecordType>({
     url: HomeEnum.home,
     url: HomeEnum.home,
   });
   });
 };
 };

-<template>
-  <div>
-    <!-- 首页基础信息 -->
-    <div class="md:flex">
-      <Card
-        v-if="!isAdmin(role)"
-        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">
-          <div class="mr-4">
-            <img
-              v-if="!isAdmin(role)"
-              src="/src/assets/images/product.png"
-              style="width: 5.625rem; height: 5.625rem"
-            />
-            <img
-              v-else
-              src="/src/assets/images/product.png"
-              style="width: 5.625rem; height: 5.625rem"
-            />
-          </div>
-          <div class="flex-auto">
-            <div class="flex justify-between" style="align-items: center">
-              <div
-                v-if="!isAdmin(role)"
-                style="font-size: 1.625rem; color: #333; font-weight: bold"
-              >
-                <CountTo
-                  v-if="growCardList?.productInfo?.sumCount"
-                  :end-val="growCardList.productInfo.sumCount"
-                />
-                <CountTo v-else :end-val="0" />
-              </div>
-              <div style="font-size: 1.625rem; color: #333; font-weight: bold" v-else>
-                <CountTo
-                  v-if="growCardList?.productInfo?.sumCount"
-                  :end-val="growCardList.productInfo?.sumCount"
-                />
-                <CountTo v-else :end-val="0" />
-              </div>
-              <Tooltip>
-                <template #title>
-                  {{
-                    !isAdmin(role)
-                      ? `产品数：${growCardList?.productInfo?.sumCount} 今日新增 ${toThousands(
-                          growCardList?.productInfo?.todayAdd
-                        )}`
-                      : `产品数：${growCardList?.customerInfo?.sumCount} 今日新增 ${toThousands(
-                          growCardList?.productInfo?.todayAdd
-                        )}`
-                  }}
-                </template>
-                <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />
-              </Tooltip>
-            </div>
-            <div> {{ !isAdmin(role) ? `产品数` : '产品数' }}</div>
-          </div>
-        </div>
-        <div v-if="!isAdmin(role)" class="pt-4" style="border-top: 2px solid #f0f2f5">
-          今日新增 {{ toThousands(growCardList?.productInfo?.todayAdd) }}</div
-        >
-        <div v-else class="pt-4" style="border-top: 2px solid #f0f2f5">
-          今日新增 {{ toThousands(growCardList?.productInfo?.todayAdd) }}</div
-        >
-      </Card>
-      <Card size="small" class="md:w-1/3 w-full !md:mt-0 !mt-4" style="color: #666">
-        <div class="flex" style="height: 100px">
-          <div class="mr-4"
-            ><img
-              src="/src/assets/images/device-count.png"
-              style="width: 5.625rem; height: 5.625rem"
-          /></div>
-          <div class="flex-auto">
-            <div class="flex justify-between" style="align-items: center">
-              <div style="font-size: 1.625rem; color: #333; font-weight: bold">
-                <CountTo
-                  v-if="growCardList?.deviceInfo?.sumCount"
-                  :endVal="growCardList.deviceInfo.sumCount"
-                />
-                <CountTo v-else :endVal="0" />
-              </div>
-              <Tooltip>
-                <template #title>
-                  设备数 : {{ growCardList?.deviceInfo.sumCount }} 今日新增
-                  {{ toThousands(growCardList?.deviceInfo?.todayAdd) }}
-                </template>
-                <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />
-              </Tooltip>
-            </div>
-            <div> 设备数 </div>
-          </div>
-        </div>
-        <div class="pt-4" style="border-top: 2px solid #f0f2f5">
-          今日新增 {{ toThousands(growCardList?.deviceInfo?.todayAdd) }}
-        </div>
-      </Card>
-      <Card 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
-              v-if="!isAdmin(role)"
-              src="/src/assets/images/alarm-count.png"
-              style="width: 5.625rem; height: 5.625rem"
-            />
-            <img v-else src="/src/assets/images/zh.png" style="width: 5.625rem; height: 5.625rem" />
-          </div>
-          <div class="flex-auto">
-            <div class="flex justify-between" style="align-items: center">
-              <div
-                v-if="!isAdmin(role)"
-                style="font-size: 1.625rem; color: #333; font-weight: bold"
-              >
-                <CountTo
-                  v-if="growCardList?.alarmInfo?.sumCount"
-                  :end-val="growCardList.alarmInfo.sumCount"
-                />
-                <CountTo v-else :end-val="0" />
-              </div>
-              <div style="font-size: 1.625rem; color: #333; font-weight: bold" v-else>
-                <CountTo
-                  v-if="growCardList?.tenantInfo?.sumCount"
-                  :end-val="growCardList.tenantInfo.sumCount"
-                />
-                <CountTo v-else :end-val="0" />
-              </div>
-              <Tooltip>
-                <template #title>
-                  {{
-                    !isAdmin(role)
-                      ? `告警数：${growCardList?.alarmInfo?.sumCount} 今日新增 ${toThousands(
-                          growCardList?.alarmInfo?.todayAdd
-                        )}`
-                      : `租户总量：${growCardList?.tenantInfo?.sumCount} 今日新增 ${toThousands(
-                          growCardList?.tenantInfo?.todayAdd
-                        )}`
-                  }}
-                </template>
-                <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />
-              </Tooltip>
-            </div>
-            <div> {{ !isAdmin(role) ? `告警数` : '租户总量' }}</div>
-          </div>
-        </div>
-        <div v-if="!isAdmin(role)" class="pt-4" style="border-top: 2px solid #f0f2f5">
-          今日新增 {{ toThousands(growCardList?.alarmInfo?.todayAdd) }}</div
-        >
-        <div v-else class="pt-4" style="border-top: 2px solid #f0f2f5">
-          今日新增 {{ toThousands(growCardList?.tenantInfo?.todayAdd) }}</div
-        >
-      </Card>
-      <Card 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
-              v-if="!isAdmin(role)"
-              src="/src/assets/images/msg-count.png"
-              style="width: 5.625rem; height: 5.625rem"
-            />
-            <img v-else src="/src/assets/images/kf.png" style="width: 5.625rem; height: 5.625rem" />
-          </div>
-          <div class="flex-auto">
-            <div class="flex justify-between" style="align-items: center">
-              <div
-                v-if="!isAdmin(role)"
-                style="font-size: 1.625rem; color: #333; font-weight: bold"
-              >
-                <CountTo
-                  v-if="growCardList?.messageInfo?.messageCount"
-                  :end-val="growCardList.messageInfo.messageCount"
-                />
-                <CountTo v-else :end-val="0" />
-              </div>
-              <div style="font-size: 1.625rem; color: #333; font-weight: bold" v-else>
-                <CountTo
-                  v-if="growCardList?.customerInfo?.sumCount"
-                  :end-val="growCardList.customerInfo.sumCount"
-                />
-                <CountTo v-else :end-val="0" />
-              </div>
-              <Tooltip>
-                <template #title>
-                  {{
-                    !isAdmin(role)
-                      ? `今日消息数：${
-                          growCardList?.messageInfo?.todayMessageAdd
-                        } 今日消息点数 ${toThousands(
-                          growCardList?.messageInfo?.todayDataPointsAdd
-                        )}`
-                      : `客户总量：${growCardList?.customerInfo?.sumCount} 今日新增 ${toThousands(
-                          growCardList?.customerInfo?.todayAdd
-                        )}`
-                  }}
-                </template>
-                <img
-                  v-if="isAdmin(role)"
-                  src="/src/assets/images/tip.png"
-                  style="width: 1.125rem; height: 1.125rem"
-                />
-              </Tooltip>
-            </div>
-            <div> {{ !isAdmin(role) ? `消息数` : '客户总量' }}</div>
-          </div>
-          <div class="flex-auto" v-if="!isAdmin(role)">
-            <div class="flex justify-between" style="align-items: center">
-              <div
-                v-if="!isAdmin(role)"
-                style="font-size: 1.625rem; color: #333; font-weight: bold"
-              >
-                <CountTo
-                  v-if="growCardList?.messageInfo?.dataPointsCount"
-                  :end-val="growCardList.messageInfo.dataPointsCount"
-                />
-                <CountTo v-else :end-val="0" />
-              </div>
-              <Tooltip>
-                <template #title>
-                  {{
-                    !isAdmin(role)
-                      ? `今日消息数：${
-                          growCardList?.messageInfo?.todayMessageAdd
-                        } 今日消息点数 ${toThousands(
-                          growCardList?.messageInfo?.todayDataPointsAdd
-                        )}`
-                      : `客户总量：${growCardList?.customerInfo?.sumCount} 今日新增 ${toThousands(
-                          growCardList?.customerInfo?.todayAdd
-                        )}`
-                  }}
-                </template>
-                <img src="/src/assets/images/tip.png" style="width: 1.125rem; height: 1.125rem" />
-              </Tooltip>
-            </div>
-            <div> {{ !isAdmin(role) ? `消息点数` : '' }}</div>
-          </div>
-        </div>
-        <div class="flex justify-between" style="border-top: 2px solid #f0f2f5">
-          <div v-if="!isAdmin(role)" class="pt-4">
-            今日消息数 {{ toThousands(growCardList?.messageInfo?.todayMessageAdd) }}</div
-          >
-          <div v-if="!isAdmin(role)" class="pt-4">
-            今日消息点数 {{ toThousands(growCardList?.messageInfo?.todayDataPointsAdd) }}</div
-          >
-          <div v-else class="pt-4">
-            近30日新增 {{ toThousands(growCardList?.customerInfo?.todayAdd) }}</div
-          >
-        </div>
-      </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%"
-        title="设备数量统计"
-      >
-        <a-row type="flex" justify="space-between" align="middle">
-          <a-col :span="12">
-            <PieChartDeviceSub
-              v-if="seriesData.length > 0"
-              :legendData="legendData"
-              :seriesData="seriesData"
-              :isCircle="false"
-          /></a-col>
-          <a-col :span="12">
-            <a-row type="flex" justify="space-between" align="middle" style="row-gap: 30px">
-              <a-col :offset="8" class="flex items-center">
-                <span class="left-icon-d-color"></span>
-                直连设备：
-                <span class="bold-text">{{ growCardList?.deviceInfo?.directConnection ?? 0 }}</span
-                >个</a-col
-              >
-              <a-col :offset="8" class="flex items-center">
-                <span class="left-icon-g-color"></span>
-                网关设备：
-                <span class="bold-text">{{ growCardList?.deviceInfo?.gateWay ?? 0 }}</span
-                >个</a-col
-              >
-              <a-col :offset="8" class="flex items-center">
-                <span class="left-icon-s-color"></span>
-                网关子设备：<span class="bold-text">{{
-                  growCardList?.deviceInfo?.sensor ?? 0
-                }}</span
-                >个</a-col
-              >
-            </a-row>
-          </a-col>
-        </a-row>
-      </Card>
-      <Card
-        size="small"
-        class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:ml-1"
-        style="color: #666; width: 50%"
-        title="设备状态统计"
-      >
-        <a-row type="flex" justify="space-between" align="middle">
-          <a-col :span="12">
-            <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 :span="12">
-            <a-row type="flex" justify="space-between" align="middle" style="row-gap: 30px">
-              <a-col :offset="8" class="flex items-center">
-                <span class="right-icon-d-color"></span>
-                待激活设备：
-                <span class="bold-text">{{ growCardList?.deviceInfo?.inActive ?? 0 }}</span
-                >个</a-col
-              >
-              <a-col :offset="8" class="flex items-center">
-                <span class="right-icon-g-color"></span>
-                在线设备：<span class="bold-text">{{ growCardList?.deviceInfo?.onLine ?? 0 }}</span
-                >个</a-col
-              >
-              <a-col :offset="8" class="flex items-center">
-                <span class="right-icon-s-color"></span>
-                离线设备：<span class="bold-text">{{ growCardList?.deviceInfo?.offLine ?? 0 }}</span
-                >个</a-col
-              >
-            </a-row>
-          </a-col>
-        </a-row>
-      </Card>
-    </div>
-  </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 { CountTo } from '/@/components/CountTo/index';
-  import { Tooltip } from 'ant-design-vue';
-  import { CardList, seriesDataT } from './props';
-  import PieChartDeviceSub from './PieChartDeviceSub.vue';
-  import PieChartDeviceStatus from './PieChartDeviceStatus.vue';
-  import { Empty } from 'ant-design-vue';
-
-  defineProps<{
-    role: string;
-  }>();
-
-  defineExpose({
-    isAdmin,
-    toThousands,
-  });
-
-  defineComponent({
-    Card,
-  });
-
-  const legendData = ref(['网关设备', '直连设备', '网关子设备']);
-
-  const seriesData: Ref<seriesDataT[]> = ref([]);
-
-  const seriesStatusData: Ref<seriesDataT[]> = ref([]);
-
-  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 () => {
-    const res = await getHomeData();
-    growCardList.value = res;
-    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>
-<style lang="less">
-  .text {
-    color: #333;
-    display: flex;
-    flex-wrap: nowrap;
-  }
-
-  .bold-text {
-    font-weight: bold;
-  }
-
-  .base-left-icon-color {
-    border-radius: 50%;
-    width: 0.75rem;
-    height: 0.75rem;
-    display: block;
-    position: relative;
-    right: 0.5rem;
-  }
-
-  .left-icon-d-color :extend(.base-left-icon-color) {
-    background-color: #5c7bd9 !important;
-  }
-  .left-icon-g-color :extend(.base-left-icon-color) {
-    background-color: #91cc75 !important;
-  }
-  .left-icon-s-color :extend(.base-left-icon-color) {
-    background-color: #fac859 !important;
-  }
-  .right-icon-d-color :extend(.base-left-icon-color) {
-    background-color: #5c7bd9;
-  }
-  .right-icon-g-color :extend(.base-left-icon-color) {
-    background-color: #91cc75;
-  }
-  .right-icon-s-color :extend(.base-left-icon-color) {
-    background-color: #ec4040;
-  }
-</style>
+<template>
+  <div>
+    <!-- 首页基础信息 -->
+    <section class="flex gap-4">
+      <StatisticalCard
+        :style="{ width: `${100 / statisticalPanelList.length}%` }"
+        v-for="(item, index) in statisticalPanelList"
+        :key="index"
+        :value="item"
+      />
+    </section>
+    <!-- 首页饼图 -->
+    <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%"
+        title="设备数量统计"
+      >
+        <a-row type="flex" justify="space-between" align="middle">
+          <a-col :span="12">
+            <PieChartDeviceSub
+              v-if="seriesData.length > 0"
+              :legendData="legendData"
+              :seriesData="seriesData"
+              :isCircle="false"
+          /></a-col>
+          <a-col :span="12">
+            <a-row type="flex" justify="space-between" align="middle" style="row-gap: 30px">
+              <a-col :offset="8" class="flex items-center">
+                <span class="left-icon-d-color"></span>
+                直连设备：
+                <span class="bold-text">{{ growCardList?.deviceInfo?.directConnection ?? 0 }}</span
+                >个</a-col
+              >
+              <a-col :offset="8" class="flex items-center">
+                <span class="left-icon-g-color"></span>
+                网关设备：
+                <span class="bold-text">{{ growCardList?.deviceInfo?.gateWay ?? 0 }}</span
+                >个</a-col
+              >
+              <a-col :offset="8" class="flex items-center">
+                <span class="left-icon-s-color"></span>
+                网关子设备：<span class="bold-text">{{
+                  growCardList?.deviceInfo?.sensor ?? 0
+                }}</span
+                >个</a-col
+              >
+            </a-row>
+          </a-col>
+        </a-row>
+      </Card>
+      <Card
+        size="small"
+        class="md:w-1/3 w-full !md:mt-0 !mt-4 !md:ml-1"
+        style="color: #666; width: 50%"
+        title="设备状态统计"
+      >
+        <a-row type="flex" justify="space-between" align="middle">
+          <a-col :span="12">
+            <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 :span="12">
+            <a-row type="flex" justify="space-between" align="middle" style="row-gap: 30px">
+              <a-col :offset="8" class="flex items-center">
+                <span class="right-icon-d-color"></span>
+                待激活设备：
+                <span class="bold-text">{{ growCardList?.deviceInfo?.inActive ?? 0 }}</span
+                >个</a-col
+              >
+              <a-col :offset="8" class="flex items-center">
+                <span class="right-icon-g-color"></span>
+                在线设备：<span class="bold-text">{{ growCardList?.deviceInfo?.onLine ?? 0 }}</span
+                >个</a-col
+              >
+              <a-col :offset="8" class="flex items-center">
+                <span class="right-icon-s-color"></span>
+                离线设备：<span class="bold-text">{{ growCardList?.deviceInfo?.offLine ?? 0 }}</span
+                >个</a-col
+              >
+            </a-row>
+          </a-col>
+        </a-row>
+      </Card>
+    </div>
+  </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 { CardList, seriesDataT } from './props';
+  import PieChartDeviceSub from './PieChartDeviceSub.vue';
+  import PieChartDeviceStatus from './PieChartDeviceStatus.vue';
+  import { Empty } from 'ant-design-vue';
+  import StatisticalCard from './StatisticalCard.vue';
+  import { HomeStatisticsRecordType } from '/@/api/dashboard/model';
+  import { useRole } from '/@/hooks/business/useRole';
+  import { unref } from 'vue';
+
+  interface RecordType {
+    value: number;
+    label: string;
+  }
+
+  interface StatisticalItemType {
+    images: string;
+    totals: RecordType[];
+    tooltips: RecordType[];
+    todayTotals: RecordType[];
+  }
+
+  defineProps<{
+    role: string;
+  }>();
+
+  defineExpose({
+    isAdmin,
+    toThousands,
+  });
+
+  defineComponent({
+    Card,
+  });
+
+  const legendData = ref(['网关设备', '直连设备', '网关子设备']);
+
+  const seriesData: Ref<seriesDataT[]> = ref([]);
+
+  const seriesStatusData: Ref<seriesDataT[]> = ref([]);
+
+  const growCardList = ref<CardList>();
+
+  const statisticalPanelList = ref<StatisticalItemType[]>([]);
+
+  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: '离线' },
+  ];
+
+  const { isSysadmin, isPlatformAdmin } = useRole();
+  const handleTransformStatisticalInfo = (record: HomeStatisticsRecordType) => {
+    const { deviceInfo, productInfo, alarmInfo, messageInfo, customerInfo, tenantInfo } = record;
+
+    const productTotal: StatisticalItemType = {
+      images: '/src/assets/images/product.png',
+      totals: [{ label: '产品数', value: productInfo?.sumCount }],
+      tooltips: [
+        { label: '产品数', value: productInfo?.sumCount },
+        { label: '今日新增', value: productInfo?.todayAdd },
+      ],
+      todayTotals: [{ label: '今日新增', value: productInfo?.todayAdd }],
+    };
+
+    const deviceTotal: StatisticalItemType = {
+      images: '/src/assets/images/device-count.png',
+      totals: [{ label: '设备数', value: deviceInfo?.sumCount }],
+      tooltips: [
+        { label: '设备数', value: deviceInfo?.sumCount },
+        { label: '今日新增', value: deviceInfo?.todayAdd },
+      ],
+      todayTotals: [{ label: '今日新增', value: deviceInfo?.todayAdd }],
+    };
+
+    const alarmTotal: StatisticalItemType = {
+      images: '/src/assets/images/alarm-count.png',
+      totals: [{ label: '告警数', value: alarmInfo?.sumCount }],
+      tooltips: [
+        { label: '告警数', value: alarmInfo?.sumCount },
+        { label: '今日新增', value: alarmInfo?.todayAdd },
+      ],
+      todayTotals: [{ label: '今日新增', value: alarmInfo?.todayAdd }],
+    };
+
+    const messageTotal: StatisticalItemType = {
+      images: '/src/assets/images/msg-count.png',
+      totals: [
+        { label: '消息数', value: messageInfo?.messageCount },
+        { label: '消息点数', value: messageInfo?.dataPointsCount },
+      ],
+      tooltips: [
+        { label: '今日消息数', value: messageInfo?.todayMessageAdd },
+        { label: '今日消息点数', value: messageInfo?.todayDataPointsAdd },
+      ],
+      todayTotals: [
+        { label: '今日消息数', value: messageInfo?.todayMessageAdd },
+        { label: '今日消息点数', value: messageInfo?.todayDataPointsAdd },
+      ],
+    };
+
+    const tenantTotal: StatisticalItemType = {
+      images: '/src/assets/images/zh.png',
+      totals: [{ label: '租户总量', value: tenantInfo?.sumCount }],
+      tooltips: [
+        { label: '租户总量', value: tenantInfo?.sumCount },
+        { label: '今日新增', value: tenantInfo?.todayAdd },
+      ],
+      todayTotals: [{ label: '今日新增', value: tenantInfo?.todayAdd }],
+    };
+
+    const customerTotal: StatisticalItemType = {
+      images: '/src/assets/images/kf.png',
+      totals: [{ label: '客户总量', value: customerInfo?.sumCount }],
+      tooltips: [
+        { label: '客户总量', value: customerInfo?.sumCount },
+        { label: '今日新增', value: customerInfo?.todayAdd },
+      ],
+      todayTotals: [{ label: '今日新增', value: customerInfo?.todayAdd }],
+    };
+
+    if (unref(isSysadmin) || unref(isPlatformAdmin)) {
+      statisticalPanelList.value = [deviceTotal, tenantTotal, customerTotal];
+    } else {
+      statisticalPanelList.value = [productTotal, deviceTotal, alarmTotal, messageTotal];
+    }
+  };
+
+  onMounted(async () => {
+    const res = await getHomeData();
+    growCardList.value = res;
+    handleTransformStatisticalInfo(res);
+    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>
+<style lang="less">
+  .text {
+    color: #333;
+    display: flex;
+    flex-wrap: nowrap;
+  }
+
+  .bold-text {
+    font-weight: bold;
+  }
+
+  .base-left-icon-color {
+    border-radius: 50%;
+    width: 0.75rem;
+    height: 0.75rem;
+    display: block;
+    position: relative;
+    right: 0.5rem;
+  }
+
+  .left-icon-d-color :extend(.base-left-icon-color) {
+    background-color: #5c7bd9 !important;
+  }
+  .left-icon-g-color :extend(.base-left-icon-color) {
+    background-color: #91cc75 !important;
+  }
+  .left-icon-s-color :extend(.base-left-icon-color) {
+    background-color: #fac859 !important;
+  }
+  .right-icon-d-color :extend(.base-left-icon-color) {
+    background-color: #5c7bd9;
+  }
+  .right-icon-g-color :extend(.base-left-icon-color) {
+    background-color: #91cc75;
+  }
+  .right-icon-s-color :extend(.base-left-icon-color) {
+    background-color: #ec4040;
+  }
+</style>