From c4ea28992abcec98e5464ab714a32df978b3ff33 Mon Sep 17 00:00:00 2001
From: tuqin <tuqin@tuqin.cn>
Date: 星期三, 14 十月 2026 11:20:30 +0800
Subject: [PATCH] feat(dashboard): 首页卡片改回「带数量」的原格式（人力资源4 + 售后/薪酬4）
---
src/views/dashboard/analytics/modules/kpi-cards.vue | 41 +++++++++++++++-----
src/views/dashboard/analytics/modules/biz-cards.vue | 42 ++++++++++++++++-----
2 files changed, 63 insertions(+), 20 deletions(-)
diff --git a/src/views/dashboard/analytics/modules/biz-cards.vue b/src/views/dashboard/analytics/modules/biz-cards.vue
index 82ed984..8420263 100644
--- a/src/views/dashboard/analytics/modules/biz-cards.vue
+++ b/src/views/dashboard/analytics/modules/biz-cards.vue
@@ -1,9 +1,15 @@
<script lang="ts" setup>
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
+import { CountTo } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { Col, Row } from 'ant-design-vue';
+
+import { getProblemPage } from '#/api/aftersales/problem';
+import { getReturnPage } from '#/api/aftersales/return';
+import { getTicketPage } from '#/api/aftersales/ticket';
+import { getOvertimeWageConfigList } from '#/api/hrm/salary/overtime-wage';
defineOptions({ name: 'DashboardBizCards' });
@@ -14,20 +20,31 @@
interface ModuleCard {
id: string;
title: string;
- desc: string;
path: string;
+ unit: string;
+ desc: string;
icon: string;
gradient: string;
shadow: string;
textColor: string;
}
-/** 鍞悗绠＄悊妯″潡鍏ュ彛 */
+/** 鍞悗绠＄悊 + 钖叕 妯″潡 */
const cards: ModuleCard[] = [
- { id: 'ticket', title: '鍞悗宸ュ崟', desc: '鍞悗绠＄悊', path: '/aftersales/ticket', icon: 'lucide:wrench', gradient: 'from-cyan-500 to-teal-400', shadow: 'shadow-cyan-500/25', textColor: 'text-cyan-600 dark:text-cyan-400' },
- { id: 'return', title: '閫�璐х敵璇�', desc: '鍞悗绠＄悊', path: '/aftersales/return', icon: 'lucide:undo-2', gradient: 'from-pink-500 to-rose-400', shadow: 'shadow-pink-500/25', textColor: 'text-pink-600 dark:text-pink-400' },
- { id: 'problem', title: '闂搴�', desc: '鍞悗绠＄悊', path: '/aftersales/problem', icon: 'lucide:book-open', gradient: 'from-amber-500 to-yellow-400', shadow: 'shadow-amber-500/25', textColor: 'text-amber-600 dark:text-amber-400' },
+ { id: 'ticket', title: '鍞悗宸ュ崟', path: '/aftersales/ticket', unit: '鍗�', desc: '鍞悗绠＄悊', icon: 'lucide:wrench', gradient: 'from-cyan-500 to-teal-400', shadow: 'shadow-cyan-500/25', textColor: 'text-cyan-600 dark:text-cyan-400' },
+ { id: 'return', title: '閫�璐х敵璇�', path: '/aftersales/return', unit: '鍗�', desc: '鍞悗绠＄悊', icon: 'lucide:undo-2', gradient: 'from-pink-500 to-rose-400', shadow: 'shadow-pink-500/25', textColor: 'text-pink-600 dark:text-pink-400' },
+ { id: 'problem', title: '闂搴�', path: '/aftersales/problem', unit: '鏉�', desc: '鍞悗绠＄悊', icon: 'lucide:book-open', gradient: 'from-amber-500 to-yellow-400', shadow: 'shadow-amber-500/25', textColor: 'text-amber-600 dark:text-amber-400' },
+ { id: 'overtimeWage', title: '鍔犵彮宸ヨ祫绠＄悊', path: '/hrm/salary/overtime-wage', unit: '椤�', desc: '钖叕绠＄悊', icon: 'lucide:clock', gradient: 'from-indigo-500 to-blue-400', shadow: 'shadow-indigo-500/25', textColor: 'text-indigo-600 dark:text-indigo-400' },
];
+
+const counts = ref<Record<string, number>>({ ticket: 0, return: 0, problem: 0, overtimeWage: 0 });
+
+async function load() {
+ try { counts.value.ticket = (await getTicketPage({ pageNo: 1, pageSize: 1 })).total ?? 0; } catch { /* ignore */ }
+ try { counts.value.return = (await getReturnPage({ pageNo: 1, pageSize: 1 })).total ?? 0; } catch { /* ignore */ }
+ try { counts.value.problem = (await getProblemPage({ pageNo: 1, pageSize: 1 })).total ?? 0; } catch { /* ignore */ }
+ try { counts.value.overtimeWage = (await getOvertimeWageConfigList()).length ?? 0; } catch { /* ignore */ }
+}
/** 3D 鍊炬枩 */
interface TiltState { x: number; y: number }
@@ -52,11 +69,13 @@
transition: t.x === 0 && t.y === 0 ? 'transform 0.5s ease' : 'transform 0.1s ease',
};
}
+
+onMounted(load);
</script>
<template>
<Row :gutter="16">
- <Col v-for="c in cards" :key="c.id" :lg="8" :md="8" :sm="12" :xl="8" :xs="24" class="mb-4">
+ <Col v-for="c in cards" :key="c.id" :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
<div
class="glass-tilt group cursor-pointer overflow-hidden rounded-2xl border-0"
:style="tiltStyle(c.id)"
@@ -69,9 +88,12 @@
<IconifyIcon class="size-6 text-white" :icon="c.icon" />
</div>
<div class="min-w-0 flex-1">
- <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">{{ c.desc }}</div>
- <div class="text-2xl font-bold leading-tight" :class="c.textColor">{{ c.title }}</div>
- <div class="mt-1 text-xs text-gray-400">鐐瑰嚮杩涘叆</div>
+ <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">{{ c.title }}</div>
+ <div class="flex items-baseline gap-1">
+ <CountTo class="text-2xl font-bold leading-tight" :class="c.textColor" :end-val="counts[c.id]" :duration="1200" />
+ <span class="text-xs text-gray-400">{{ c.unit }}</span>
+ </div>
+ <div class="mt-1 text-xs text-gray-400">{{ c.desc }}</div>
</div>
</div>
<div class="absolute -right-6 -top-6 size-24 rounded-full bg-pink-400/10 blur-xl transition-all duration-300 group-hover:scale-150" />
diff --git a/src/views/dashboard/analytics/modules/kpi-cards.vue b/src/views/dashboard/analytics/modules/kpi-cards.vue
index 3e21464..df8e427 100644
--- a/src/views/dashboard/analytics/modules/kpi-cards.vue
+++ b/src/views/dashboard/analytics/modules/kpi-cards.vue
@@ -1,9 +1,15 @@
<script lang="ts" setup>
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
+import { CountTo } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { Col, Row } from 'ant-design-vue';
+
+import { getAttendanceRecordPage } from '#/api/hrm/attendance/record';
+import { getEmployeePage } from '#/api/hrm/employee';
+import { getEmployeeContractPage } from '#/api/hrm/employee/contract';
+import { getSalaryCalculationPage } from '#/api/hrm/salary/calculation';
defineOptions({ name: 'DashboardKpiCards' });
@@ -14,21 +20,31 @@
interface ModuleCard {
id: string;
title: string;
- desc: string;
path: string;
+ unit: string;
+ desc: string;
icon: string;
gradient: string;
shadow: string;
textColor: string;
}
-/** 浜哄姏璧勬簮妯″潡鍏ュ彛 */
+/** 浜哄姏璧勬簮妯″潡 */
const cards: ModuleCard[] = [
- { id: 'employee', title: '鍛樺伐绠＄悊', desc: '浜哄姏璧勬簮', path: '/hrm/employee', icon: 'lucide:users', gradient: 'from-blue-500 to-cyan-400', shadow: 'shadow-blue-500/25', textColor: 'text-blue-600 dark:text-blue-400' },
- { id: 'contract', title: '鍛樺伐鍚堝悓', desc: '浜哄姏璧勬簮', path: '/hrm/employee-contract', icon: 'lucide:file-signature', gradient: 'from-emerald-500 to-green-400', shadow: 'shadow-emerald-500/25', textColor: 'text-emerald-600 dark:text-emerald-400' },
- { id: 'attendance', title: '鑰冨嫟绠＄悊', desc: '浜哄姏璧勬簮', path: '/hrm/attendance/rule', icon: 'lucide:calendar-check', gradient: 'from-orange-500 to-amber-400', shadow: 'shadow-orange-500/25', textColor: 'text-orange-600 dark:text-orange-400' },
- { id: 'salary', title: '钖叕绠＄悊', desc: '浜哄姏璧勬簮', path: '/hrm/salary/calculation', icon: 'lucide:wallet', gradient: 'from-violet-500 to-purple-400', shadow: 'shadow-violet-500/25', textColor: 'text-violet-600 dark:text-violet-400' },
+ { id: 'employee', title: '鍛樺伐绠＄悊', path: '/hrm/employee', unit: '浜�', desc: '鍦ㄥ唽鍛樺伐', icon: 'lucide:users', gradient: 'from-blue-500 to-cyan-400', shadow: 'shadow-blue-500/25', textColor: 'text-blue-600 dark:text-blue-400' },
+ { id: 'contract', title: '鍛樺伐鍚堝悓', path: '/hrm/employee-contract', unit: '浠�', desc: '绛剧害鍚堝悓', icon: 'lucide:file-signature', gradient: 'from-emerald-500 to-green-400', shadow: 'shadow-emerald-500/25', textColor: 'text-emerald-600 dark:text-emerald-400' },
+ { id: 'attendance', title: '鑰冨嫟绠＄悊', path: '/hrm/attendance/rule', unit: '鏉�', desc: '鑰冨嫟璁板綍', icon: 'lucide:calendar-check', gradient: 'from-orange-500 to-amber-400', shadow: 'shadow-orange-500/25', textColor: 'text-orange-600 dark:text-orange-400' },
+ { id: 'salary', title: '钖叕绠＄悊', path: '/hrm/salary/calculation', unit: '鍗�', desc: '钖叕鏍哥畻', icon: 'lucide:wallet', gradient: 'from-violet-500 to-purple-400', shadow: 'shadow-violet-500/25', textColor: 'text-violet-600 dark:text-violet-400' },
];
+
+const counts = ref<Record<string, number>>({ employee: 0, contract: 0, attendance: 0, salary: 0 });
+
+async function load() {
+ try { counts.value.employee = (await getEmployeePage({ pageNo: 1, pageSize: 1 })).total ?? 0; } catch { /* ignore */ }
+ try { counts.value.contract = (await getEmployeeContractPage({ pageNo: 1, pageSize: 1 })).total ?? 0; } catch { /* ignore */ }
+ try { counts.value.attendance = (await getAttendanceRecordPage({ pageNo: 1, pageSize: 1 })).total ?? 0; } catch { /* ignore */ }
+ try { counts.value.salary = (await getSalaryCalculationPage({ pageNo: 1, pageSize: 1 })).total ?? 0; } catch { /* ignore */ }
+}
/** 3D 鍊炬枩鏁堟灉 */
interface TiltState { x: number; y: number }
@@ -53,6 +69,8 @@
transition: t.x === 0 && t.y === 0 ? 'transform 0.5s ease' : 'transform 0.1s ease',
};
}
+
+onMounted(load);
</script>
<template>
@@ -70,9 +88,12 @@
<IconifyIcon class="size-6 text-white" :icon="c.icon" />
</div>
<div class="min-w-0 flex-1">
- <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">{{ c.desc }}</div>
- <div class="text-2xl font-bold leading-tight" :class="c.textColor">{{ c.title }}</div>
- <div class="mt-1 text-xs text-gray-400">鐐瑰嚮杩涘叆</div>
+ <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">{{ c.title }}</div>
+ <div class="flex items-baseline gap-1">
+ <CountTo class="text-2xl font-bold leading-tight" :class="c.textColor" :end-val="counts[c.id]" :duration="1200" />
+ <span class="text-xs text-gray-400">{{ c.unit }}</span>
+ </div>
+ <div class="mt-1 text-xs text-gray-400">{{ c.desc }}</div>
</div>
</div>
<div class="absolute -right-6 -top-6 size-24 rounded-full bg-blue-400/10 blur-xl transition-all duration-300 group-hover:scale-150" />
--
Gitblit v1.9.3