feat；iothome

src/views/iot/home/components/ComparisonCard.vue

@@ -0,0 +1,33 @@
+<template>
+  <el-card class="stat-card" shadow="never">
+    <div class="flex flex-col">
+      <div class="flex justify-between items-center mb-1">
+        <span class="text-gray-500 text-base font-medium">{{ title }}</span>
+        <Icon :icon="icon" class="text-[32px]" :class="iconColor" />
+      </div>
+      <span class="text-3xl font-bold text-gray-700">
+        {{ value }}
+      </span>
+      <el-divider class="my-2" />
+      <div class="flex justify-between items-center text-gray-400 text-sm">
+        <span>今日新增</span>
+        <span class="text-green-500">+{{ todayCount }}</span>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+
+/** 统计卡片组件 */
+defineOptions({ name: 'ComparisonCard' })
+
+const props = defineProps({
+  title: propTypes.string.def('').isRequired,
+  value: propTypes.number.def(0).isRequired,
+  todayCount: propTypes.number.def(0).isRequired,
+  icon: propTypes.string.def('').isRequired,
+  iconColor: propTypes.string.def('')
+})
+</script>

src/views/iot/home/index.vue

@@ -2,72 +2,40 @@
   <!-- 第一行：统计卡片行 -->
   <el-row :gutter="16" class="mb-4">
     <el-col :span="6">
-      <el-card class="stat-card" shadow="never">
+      <ComparisonCard
-        <div class="flex flex-col">
+        title="分类数量"
-          <div class="flex justify-between items-center mb-1">
+        :value="statsData.productCategoryCount"
-            <span class="text-gray-500 text-base font-medium">分类数量</span>
+        :todayCount="statsData.productCategoryTodayCount"
-            <Icon icon="ep:menu" class="text-[32px] text-blue-400" />
+        icon="ep:menu"
-          </div>
+        iconColor="text-blue-400"
-          <span class="text-3xl font-bold text-gray-700">
+      />
-            {{ statsData.productCategoryCount }}
-          </span>
-          <el-divider class="my-2" />
-          <div class="flex justify-between items-center text-gray-400 text-sm">
-            <span>今日新增</span>
-            <span class="text-green-500">+{{ statsData.productCategoryTodayCount }}</span>
-          </div>
-        </div>
-      </el-card>
     </el-col>
     <el-col :span="6">
-      <el-card class="stat-card" shadow="never">
+      <ComparisonCard
-        <div class="flex flex-col">
+        title="产品数量"
-          <div class="flex justify-between items-center mb-1">
+        :value="statsData.productCount"
-            <span class="text-gray-500 text-base font-medium">产品数量</span>
+        :todayCount="statsData.productTodayCount"
-            <Icon icon="ep:box" class="text-[32px] text-orange-400" />
+        icon="ep:box"
-          </div>
+        iconColor="text-orange-400"
-          <span class="text-3xl font-bold text-gray-700">{{ statsData.productCount }}</span>
+      />
-          <el-divider class="my-2" />
-          <div class="flex justify-between items-center text-gray-400 text-sm">
-            <span>今日新增</span>
-            <span class="text-green-500">+{{ statsData.productTodayCount }}</span>
-          </div>
-        </div>
-      </el-card>
     </el-col>
     <el-col :span="6">
-      <el-card class="stat-card" shadow="never">
+      <ComparisonCard
-        <div class="flex flex-col">
+        title="设备数量"
-          <div class="flex justify-between items-center mb-1">
+        :value="statsData.deviceCount"
-            <span class="text-gray-500 text-base font-medium">设备数量</span>
+        :todayCount="statsData.deviceTodayCount"
-            <Icon icon="ep:cpu" class="text-[32px] text-purple-400" />
+        icon="ep:cpu"
-          </div>
+        iconColor="text-purple-400"
-          <span class="text-3xl font-bold text-gray-700">{{ statsData.deviceCount }}</span>
+      />
-          <el-divider class="my-2" />
-          <div class="flex justify-between items-center text-gray-400 text-sm">
-            <span>今日新增</span>
-            <span class="text-green-500">+{{ statsData.deviceTodayCount }}</span>
-          </div>
-        </div>
-      </el-card>
     </el-col>
     <el-col :span="6">
-      <el-card class="stat-card" shadow="never">
+      <ComparisonCard
-        <div class="flex flex-col">
+        title="设备消息数"
-          <div class="flex justify-between items-center mb-1">
+        :value="statsData.deviceMessageCount"
-            <span class="text-gray-500 text-base font-medium">设备消息数</span>
+        :todayCount="statsData.deviceMessageTodayCount"
-            <Icon icon="ep:message" class="text-[32px] text-teal-400" />
+        icon="ep:message"
-          </div>
+        iconColor="text-teal-400"
-          <span class="text-3xl font-bold text-gray-700">
+      />
-            {{ statsData.deviceMessageCount }}
-          </span>
-          <el-divider class="my-2" />
-          <div class="flex justify-between items-center text-gray-400 text-sm">
-            <span>今日新增</span>
-            <span class="text-green-500">+{{ statsData.deviceMessageTodayCount }}</span>
-          </div>
-        </div>
-      </el-card>
     </el-col>
   </el-row>
 
@@ -165,6 +133,7 @@ import {
   ProductCategoryApi
 } from '@/api/iot/statistics'
 import { formatDate } from '@/utils/formatTime'
+import ComparisonCard from './components/ComparisonCard.vue'
 
 // TODO @super：参考下 /Users/yunai/Java/yudao-ui-admin-vue3/src/views/mall/home/index.vue，拆一拆组件