From 52d8fdefc85591abe9ee6c8cd382f91698013ebf Mon Sep 17 00:00:00 2001
From: tuqin <tuqin@tuqin.cn>
Date: 星期三, 14 十月 2026 11:01:59 +0800
Subject: [PATCH] feat(dashboard): 首页改为「人力资源+售后管理」模块入口
---
src/views/dashboard/analytics/modules/kpi-cards.vue | 165 ++++++++++---------------------------------------------
1 files changed, 30 insertions(+), 135 deletions(-)
diff --git a/src/views/dashboard/analytics/modules/kpi-cards.vue b/src/views/dashboard/analytics/modules/kpi-cards.vue
index 761db56..3e21464 100644
--- a/src/views/dashboard/analytics/modules/kpi-cards.vue
+++ b/src/views/dashboard/analytics/modules/kpi-cards.vue
@@ -1,38 +1,37 @@
<script lang="ts" setup>
-import type { MesHomeApi } from '#/api/mes/home';
+import { ref } from 'vue';
-import { computed, ref } from 'vue';
-
-import { CountTo } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { Col, Row } from 'ant-design-vue';
defineOptions({ name: 'DashboardKpiCards' });
-const props = defineProps<{
- summary: MesHomeApi.Summary;
-}>();
-
const emit = defineEmits<{
- navigate: [name: string];
+ navigate: [path: string];
}>();
-const qualityRate = computed(() => {
- const total =
- props.summary.todayQualifiedQuantity +
- props.summary.todayUnqualifiedQuantity;
- return total === 0 ? 0 : (props.summary.todayQualifiedQuantity / total) * 100;
-});
+interface ModuleCard {
+ id: string;
+ title: string;
+ desc: string;
+ path: string;
+ icon: string;
+ gradient: string;
+ shadow: string;
+ textColor: string;
+}
-const equipmentRate = computed(() => {
- if (props.summary.machineryTotal === 0) return 0;
- return (props.summary.machineryProducing / props.summary.machineryTotal) * 100;
-});
+/** 浜哄姏璧勬簮妯″潡鍏ュ彛 */
+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' },
+];
/** 3D 鍊炬枩鏁堟灉 */
interface TiltState { x: number; y: number }
-
const tilts = ref<Record<string, TiltState>>({});
function onMouseMove(e: MouseEvent, id: string) {
@@ -58,129 +57,25 @@
<template>
<Row :gutter="16">
- <!-- 鐢熶骇璁㈠崟 -->
- <Col :lg="6" :md="12" :sm="12" :xl="6" :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('order')"
- @mousemove="(e: MouseEvent) => onMouseMove(e, 'order')"
- @mouseleave="onMouseLeave('order')"
- @click="emit('navigate', 'MesProWorkOrder')"
+ :style="tiltStyle(c.id)"
+ @mousemove="(e: MouseEvent) => onMouseMove(e, c.id)"
+ @mouseleave="onMouseLeave(c.id)"
+ @click="emit('navigate', c.path)"
>
<div class="relative z-10 flex items-center gap-4 p-5">
- <div class="flex size-12 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-cyan-400 shadow-lg shadow-blue-500/25 transition-transform duration-300 group-hover:scale-110">
- <IconifyIcon class="size-6 text-white" icon="lucide:clipboard-list" />
+ <div class="flex size-12 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br transition-transform duration-300 group-hover:scale-110" :class="[c.gradient, c.shadow]">
+ <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">鐢熶骇璁㈠崟</div>
- <div class="flex items-baseline gap-1">
- <CountTo class="text-2xl font-bold leading-tight text-blue-600 dark:text-blue-400" :end-val="summary.workOrderActiveCount" :duration="1200" />
- <span class="text-xs text-gray-400">杩涜涓�</span>
- </div>
- <div class="mt-1 flex items-center gap-1 text-xs text-gray-400">
- <span class="inline-block size-1.5 rounded-full bg-amber-400" /> 寰呮帓浜� {{ summary.workOrderPrepareCount }}
- <span class="mx-1">|</span>
- <span class="inline-block size-1.5 rounded-full bg-emerald-400" /> 宸插畬鎴� {{ summary.workOrderFinishedCount }}
- </div>
+ <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>
</div>
- <div class="absolute inset-0 -z-0 bg-gradient-to-br from-blue-500/5 to-cyan-500/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
<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" />
- </div>
- </Col>
-
- <!-- 浠婃棩浜ч噺 -->
- <Col :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('output')"
- @mousemove="(e: MouseEvent) => onMouseMove(e, 'output')"
- @mouseleave="onMouseLeave('output')"
- @click="emit('navigate', 'MesProFeedback')"
- >
- <div class="relative z-10 flex items-center gap-4 p-5">
- <div class="flex size-12 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-500 to-green-400 shadow-lg shadow-emerald-500/25 transition-transform duration-300 group-hover:scale-110">
- <IconifyIcon class="size-6 text-white" icon="lucide:trending-up" />
- </div>
- <div class="min-w-0 flex-1">
- <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">浠婃棩浜ч噺</div>
- <div class="flex items-baseline gap-1">
- <CountTo class="text-2xl font-bold leading-tight text-emerald-600 dark:text-emerald-400" :end-val="summary.todayOutput" :duration="1200" />
- <span class="text-xs text-gray-400">浠�</span>
- </div>
- <div class="mt-1 text-xs text-gray-400">
- 鏄ㄦ棩 {{ summary.yesterdayOutput }} 浠�
- <span v-if="summary.yesterdayOutput > 0 && summary.todayOutput >= summary.yesterdayOutput" class="text-emerald-500">鈫�</span>
- <span v-else-if="summary.yesterdayOutput > 0" class="text-red-500">鈫�</span>
- </div>
- </div>
- </div>
- <div class="absolute inset-0 -z-0 bg-gradient-to-br from-emerald-500/5 to-green-500/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
- <div class="absolute -right-6 -top-6 size-24 rounded-full bg-emerald-400/10 blur-xl transition-all duration-300 group-hover:scale-150" />
- </div>
- </Col>
-
- <!-- 璐ㄩ噺鍚堟牸鐜� -->
- <Col :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('quality')"
- @mousemove="(e: MouseEvent) => onMouseMove(e, 'quality')"
- @mouseleave="onMouseLeave('quality')"
- @click="emit('navigate', 'MesQcRecord')"
- >
- <div class="relative z-10 flex items-center gap-4 p-5">
- <div class="flex size-12 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-orange-500 to-amber-400 shadow-lg shadow-orange-500/25 transition-transform duration-300 group-hover:scale-110">
- <IconifyIcon class="size-6 text-white" icon="lucide:shield-check" />
- </div>
- <div class="min-w-0 flex-1">
- <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">璐ㄩ噺鍚堟牸鐜�</div>
- <div class="flex items-baseline gap-1">
- <CountTo
- class="text-2xl font-bold leading-tight"
- :class="qualityRate >= 95 ? 'text-emerald-600 dark:text-emerald-400' : qualityRate >= 80 ? 'text-orange-600 dark:text-orange-400' : 'text-red-600 dark:text-red-400'"
- :decimals="1" :end-val="qualityRate" :duration="1200"
- />
- <span class="text-xs text-gray-400">%</span>
- </div>
- <div class="mt-1 text-xs text-gray-400">
- 鍚堟牸 {{ summary.todayQualifiedQuantity }} | 涓嶈壇 {{ summary.todayUnqualifiedQuantity }}
- </div>
- </div>
- </div>
- <div class="absolute inset-0 -z-0 bg-gradient-to-br from-orange-500/5 to-amber-500/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
- <div class="absolute -right-6 -top-6 size-24 rounded-full bg-orange-400/10 blur-xl transition-all duration-300 group-hover:scale-150" />
- </div>
- </Col>
-
- <!-- 璁惧杩愯鐜� -->
- <Col :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('equip')"
- @mousemove="(e: MouseEvent) => onMouseMove(e, 'equip')"
- @mouseleave="onMouseLeave('equip')"
- @click="emit('navigate', 'MesDvMachinery')"
- >
- <div class="relative z-10 flex items-center gap-4 p-5">
- <div class="flex size-12 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-violet-500 to-purple-400 shadow-lg shadow-violet-500/25 transition-transform duration-300 group-hover:scale-110">
- <IconifyIcon class="size-6 text-white" icon="lucide:cpu" />
- </div>
- <div class="min-w-0 flex-1">
- <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">璁惧杩愯鐜�</div>
- <div class="flex items-baseline gap-1">
- <CountTo class="text-2xl font-bold leading-tight text-violet-600 dark:text-violet-400" :decimals="1" :end-val="equipmentRate" :duration="1200" />
- <span class="text-xs text-gray-400">%</span>
- </div>
- <div class="mt-1 flex items-center gap-1 text-xs text-gray-400">
- <span class="text-red-400">鍋滄満 {{ summary.machineryStop }}</span>
- <span class="mx-1">|</span>
- <span class="text-amber-400">缁存姢 {{ summary.machineryMaintenance }}</span>
- </div>
- </div>
- </div>
- <div class="absolute inset-0 -z-0 bg-gradient-to-br from-violet-500/5 to-purple-500/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
- <div class="absolute -right-6 -top-6 size-24 rounded-full bg-violet-400/10 blur-xl transition-all duration-300 group-hover:scale-150" />
</div>
</Col>
</Row>
@@ -205,6 +100,6 @@
box-shadow:
0 4px 24px rgba(0,0,0,0.3),
0 1px 4px rgba(0,0,0,0.2),
- inset 0 1px 0 rgba(255,255,255,0.04);
+ inset 0 1px 0 rgba(255,255,255,0.05);
}
</style>
--
Gitblit v1.9.3