From 982c97ab82f3beb1b4febcf014562eda34b9fc05 Mon Sep 17 00:00:00 2001
From: liu <2021943741@qq.com>
Date: 星期二, 29 九月 2026 17:59:41 +0800
Subject: [PATCH] feat(ui): 江苏商贸品牌视觉与首页/登录页改版
---
src/views/dashboard/analytics/modules/kpi-cards.vue | 359 +++++++++++++++++++++++++++++++++--------------------------
1 files changed, 200 insertions(+), 159 deletions(-)
diff --git a/src/views/dashboard/analytics/modules/kpi-cards.vue b/src/views/dashboard/analytics/modules/kpi-cards.vue
index 761db56..a813bda 100644
--- a/src/views/dashboard/analytics/modules/kpi-cards.vue
+++ b/src/views/dashboard/analytics/modules/kpi-cards.vue
@@ -1,210 +1,251 @@
<script lang="ts" setup>
-import type { MesHomeApi } from '#/api/mes/home';
-
-import { computed, 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';
-defineOptions({ name: 'DashboardKpiCards' });
+import { getTaskTodoPage } from '#/api/bpm/task';
+import { getReimbursementPage } from '#/api/finance/reimbursement';
+import { getApplicationPage } from '#/api/research/application';
+import { getGuidelinePage } from '#/api/research/guideline';
-const props = defineProps<{
- summary: MesHomeApi.Summary;
-}>();
+defineOptions({ name: 'DashboardKpiCards' });
const emit = defineEmits<{
navigate: [name: string];
}>();
-const qualityRate = computed(() => {
- const total =
- props.summary.todayQualifiedQuantity +
- props.summary.todayUnqualifiedQuantity;
- return total === 0 ? 0 : (props.summary.todayQualifiedQuantity / total) * 100;
+const todoCount = ref(0);
+const applicationCount = ref(0);
+const reimbursementCount = ref(0);
+const guidelineCount = ref(0);
+
+async function loadTodo() {
+ try {
+ const result = await getTaskTodoPage({ pageNo: 1, pageSize: 1 });
+ todoCount.value = result.total ?? 0;
+ } catch {
+ /* 鏃犳潈闄愭垨鎺ュ彛寮傚父锛屼繚鎸� 0 */
+ }
+}
+
+async function loadApplication() {
+ try {
+ const result = await getApplicationPage({ pageNo: 1, pageSize: 1 });
+ applicationCount.value = result.total ?? 0;
+ } catch {
+ /* 鏃犳潈闄愭垨鎺ュ彛寮傚父锛屼繚鎸� 0 */
+ }
+}
+
+async function loadReimbursement() {
+ try {
+ const result = await getReimbursementPage({ pageNo: 1, pageSize: 1 });
+ reimbursementCount.value = result.total ?? 0;
+ } catch {
+ /* 鏃犳潈闄愭垨鎺ュ彛寮傚父锛屼繚鎸� 0 */
+ }
+}
+
+async function loadGuideline() {
+ try {
+ const result = await getGuidelinePage({ pageNo: 1, pageSize: 1 });
+ guidelineCount.value = result.total ?? 0;
+ } catch {
+ /* 鏃犳潈闄愭垨鎺ュ彛寮傚父锛屼繚鎸� 0 */
+ }
+}
+
+onMounted(() => {
+ loadTodo();
+ loadApplication();
+ loadReimbursement();
+ loadGuideline();
});
-
-const equipmentRate = computed(() => {
- if (props.summary.machineryTotal === 0) return 0;
- return (props.summary.machineryProducing / props.summary.machineryTotal) * 100;
-});
-
-/** 3D 鍊炬枩鏁堟灉 */
-interface TiltState { x: number; y: number }
-
-const tilts = ref<Record<string, TiltState>>({});
-
-function onMouseMove(e: MouseEvent, id: string) {
- const el = e.currentTarget as HTMLElement;
- const rect = el.getBoundingClientRect();
- const x = ((e.clientX - rect.left) / rect.width - 0.5) * 2;
- const y = ((e.clientY - rect.top) / rect.height - 0.5) * 2;
- tilts.value[id] = { x: x * -6, y: y * 6 };
-}
-
-function onMouseLeave(id: string) {
- tilts.value[id] = { x: 0, y: 0 };
-}
-
-function tiltStyle(id: string) {
- const t = tilts.value[id] ?? { x: 0, y: 0 };
- return {
- transform: `perspective(600px) rotateX(${t.y}deg) rotateY(${t.x}deg)`,
- transition: t.x === 0 && t.y === 0 ? 'transform 0.5s ease' : 'transform 0.1s ease',
- };
-}
</script>
<template>
<Row :gutter="16">
- <!-- 鐢熶骇璁㈠崟 -->
+ <!-- 鎴戠殑寰呭姙 -->
<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('order')"
- @mousemove="(e: MouseEvent) => onMouseMove(e, 'order')"
- @mouseleave="onMouseLeave('order')"
- @click="emit('navigate', 'MesProWorkOrder')"
+ class="elite-card group cursor-pointer"
+ @click="emit('navigate', 'BpmTaskTodo')"
>
- <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 items-center gap-4 p-5">
+ <div class="elite-icon-tile">
+ <IconifyIcon class="size-6" icon="lucide:list-todo" />
</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>
- </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="elite-label">鎴戠殑寰呭姙</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"
+ class="elite-value"
+ :class="todoCount > 0 ? 'text-[#b8901f] dark:text-[#e3c567]' : ''"
+ :duration="1200"
+ :end-val="todoCount"
/>
- <span class="text-xs text-gray-400">%</span>
+ <span class="elite-unit">椤�</span>
</div>
- <div class="mt-1 text-xs text-gray-400">
- 鍚堟牸 {{ summary.todayQualifiedQuantity }} | 涓嶈壇 {{ summary.todayUnqualifiedQuantity }}
- </div>
+ <div class="elite-meta">瀹℃壒涓績 路 寰呭鐞嗕换鍔�</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')"
+ class="elite-card group cursor-pointer"
+ @click="emit('navigate', 'ResearchApplication')"
>
- <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 class="flex items-center gap-4 p-5">
+ <div class="elite-icon-tile">
+ <IconifyIcon class="size-6" icon="lucide:file-text" />
</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="elite-label">璇鹃鐢虫姤</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>
+ <CountTo
+ class="elite-value"
+ :duration="1200"
+ :end-val="applicationCount"
+ />
+ <span class="elite-unit">椤�</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 class="elite-meta">璇鹃绠＄悊 路 鐢虫姤涔�</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>
+
+ <!-- 璐㈠姟鎶ラ攢 -->
+ <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
+ <div
+ class="elite-card group cursor-pointer"
+ @click="emit('navigate', 'FinanceReimbursement')"
+ >
+ <div class="flex items-center gap-4 p-5">
+ <div class="elite-icon-tile">
+ <IconifyIcon class="size-6" icon="lucide:receipt" />
+ </div>
+ <div class="min-w-0 flex-1">
+ <div class="elite-label">璐㈠姟鎶ラ攢</div>
+ <div class="flex items-baseline gap-1">
+ <CountTo
+ class="elite-value"
+ :duration="1200"
+ :end-val="reimbursementCount"
+ />
+ <span class="elite-unit">鍗�</span>
+ </div>
+ <div class="elite-meta">璐㈠姟鎶ラ攢 路 鎶ラ攢鍗�</div>
+ </div>
+ </div>
+ </div>
+ </Col>
+
+ <!-- 璇鹃鎸囧崡 -->
+ <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
+ <div
+ class="elite-card group cursor-pointer"
+ @click="emit('navigate', 'ResearchGuideline')"
+ >
+ <div class="flex items-center gap-4 p-5">
+ <div class="elite-icon-tile">
+ <IconifyIcon class="size-6" icon="lucide:book-open" />
+ </div>
+ <div class="min-w-0 flex-1">
+ <div class="elite-label">璇鹃鎸囧崡</div>
+ <div class="flex items-baseline gap-1">
+ <CountTo
+ class="elite-value"
+ :duration="1200"
+ :end-val="guidelineCount"
+ />
+ <span class="elite-unit">浠�</span>
+ </div>
+ <div class="elite-meta">璇鹃绠＄悊 路 鐢虫姤鎸囧崡</div>
+ </div>
+ </div>
</div>
</Col>
</Row>
</template>
<style scoped>
-.glass-tilt {
- background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
- backdrop-filter: blur(20px);
- -webkit-backdrop-filter: blur(20px);
- border: 1px solid rgba(255,255,255,0.6);
- box-shadow:
- 0 4px 24px rgba(0,0,0,0.04),
- 0 1px 4px rgba(0,0,0,0.02),
- inset 0 1px 0 rgba(255,255,255,0.8);
- transform-style: preserve-3d;
+/* ===== 瀛︽湳鍏搁泤鍗＄墖 ===== */
+.elite-card {
+ background: #fdfcfa;
+ border: 1px solid rgba(212, 175, 55, 0.22);
+ border-radius: 14px;
+ box-shadow: 0 2px 14px rgba(15, 36, 64, 0.05);
+ transition:
+ border-color 0.3s ease,
+ box-shadow 0.3s ease;
}
-.dark .glass-tilt {
- background: linear-gradient(135deg, rgba(30,30,55,0.75), rgba(20,20,40,0.5));
- border: 1px solid rgba(255,255,255,0.08);
- 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);
+.elite-card:hover {
+ border-color: rgba(212, 175, 55, 0.5);
+ box-shadow: 0 6px 20px rgba(15, 36, 64, 0.09);
+}
+
+.dark .elite-card {
+ background: #101a2b;
+ border-color: rgba(212, 175, 55, 0.2);
+ box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
+}
+
+/* 鍥炬爣搴曪細钘忛潚娓愬彉 + 閲戣壊鍥炬爣 */
+.elite-icon-tile {
+ display: flex;
+ width: 48px;
+ height: 48px;
+ flex-shrink: 0;
+ align-items: center;
+ justify-content: center;
+ border-radius: 12px;
+ color: #e3c567;
+ background: linear-gradient(135deg, #1e4571, #0f2440);
+ border: 1px solid rgba(212, 175, 55, 0.3);
+ box-shadow: 0 4px 12px rgba(15, 36, 64, 0.18);
+ transition: border-color 0.3s ease;
+}
+
+/* 鎮仠鍙閲戣壊鎻忚竟寰井鎻愪寒锛屼笉鍋氱缉鏀� */
+.group:hover .elite-icon-tile {
+ border-color: rgba(212, 175, 55, 0.6);
+}
+
+.elite-label {
+ margin-bottom: 4px;
+ font-size: 12px;
+ font-weight: 500;
+ letter-spacing: 1px;
+ color: #8a94a6;
+}
+
+.elite-value {
+ font-size: 24px;
+ font-weight: 700;
+ line-height: 1.2;
+ color: #0f2440;
+}
+
+.dark .elite-value {
+ color: #e3c567;
+}
+
+.elite-unit {
+ font-size: 12px;
+ color: #8a94a6;
+}
+
+.elite-meta {
+ margin-top: 4px;
+ font-size: 12px;
+ color: #8a94a6;
}
</style>
--
Gitblit v1.9.3