From 7981c8b76ea5708bfb75b59fcd65252e72ed72f3 Mon Sep 17 00:00:00 2001
From: liu <2021943741@qq.com>
Date: 星期二, 20 十月 2026 14:09:55 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev_江苏商贸供销社' into dev_江苏商贸供销社
---
src/views/dashboard/analytics/modules/kpi-cards.vue | 234 ++++++++-------------------------------------------------
1 files changed, 35 insertions(+), 199 deletions(-)
diff --git a/src/views/dashboard/analytics/modules/kpi-cards.vue b/src/views/dashboard/analytics/modules/kpi-cards.vue
index 761db56..1f3d505 100644
--- a/src/views/dashboard/analytics/modules/kpi-cards.vue
+++ b/src/views/dashboard/analytics/modules/kpi-cards.vue
@@ -1,210 +1,46 @@
-<script lang="ts" setup>
-import type { MesHomeApi } from '#/api/mes/home';
-
-import { computed, ref } from 'vue';
-
-import { CountTo } from '@vben/common-ui';
+<script setup lang="ts">
+import type { MenuRecordRaw } from '@vben/types';
+import { computed, onMounted, reactive } from 'vue';
import { IconifyIcon } from '@vben/icons';
+import { usePortalMenus } from '#/components/portal/use-portal-menus';
+import { getTaskTodoPage } from '#/api/bpm/task';
+import { getApplicationPage } from '#/api/research/application';
+import { getGuidelinePage } from '#/api/research/guideline';
+import { getReimbursementPage } from '#/api/finance/reimbursement';
-import { Col, Row } from 'ant-design-vue';
-
-defineOptions({ name: 'DashboardKpiCards' });
-
-const props = defineProps<{
- summary: MesHomeApi.Summary;
-}>();
-
-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;
+type MetricKey = 'todo' | 'application' | 'reimbursement' | 'guideline';
+interface Metric { key: MetricKey; menu: MenuRecordRaw; icon: string; unit: string }
+const { features, goMenu } = usePortalMenus();
+const states = reactive<Record<MetricKey, { loading: boolean; failed: boolean; count: number }>>({
+ todo: { loading: true, failed: false, count: 0 }, application: { loading: true, failed: false, count: 0 }, reimbursement: { loading: true, failed: false, count: 0 }, guideline: { loading: true, failed: false, count: 0 },
});
-
-const equipmentRate = computed(() => {
- if (props.summary.machineryTotal === 0) return 0;
- return (props.summary.machineryProducing / props.summary.machineryTotal) * 100;
+const metrics = computed<Metric[]>(() => {
+ const f = features.value;
+ return [
+ f.todo && { key: 'todo', menu: f.todo, icon: 'lucide:list-todo', unit: '椤瑰緟鍔�' },
+ f.application && { key: 'application', menu: f.application, icon: 'lucide:file-text', unit: '椤圭敵鎶�' },
+ f.reimbursement && { key: 'reimbursement', menu: f.reimbursement, icon: 'lucide:receipt', unit: '寮犳姤閿�鍗�' },
+ f.guideline && { key: 'guideline', menu: f.guideline, icon: 'lucide:book-open', unit: '浠芥寚鍗�' },
+ ].filter((item): item is Metric => Boolean(item));
});
-
-/** 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',
- };
-}
+const loaders = { todo: getTaskTodoPage, application: getApplicationPage, reimbursement: getReimbursementPage, guideline: getGuidelinePage };
+onMounted(() => {
+ for (const metric of metrics.value) {
+ loaders[metric.key]({ pageNo: 1, pageSize: 1 }).then((result) => { states[metric.key].count = result.total ?? 0; }).catch(() => { states[metric.key].failed = true; }).finally(() => { states[metric.key].loading = false; });
+ }
+});
</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')"
- >
- <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>
- <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="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>
+ <div class="portal-metrics" :style="{ '--count': metrics.length }"><button v-for="metric in metrics" :key="metric.key" type="button" @click="goMenu(metric.menu)"><span class="metric-icon"><IconifyIcon :icon="metric.icon" /></span><div><strong>{{ metric.menu.name }}</strong><div class="metric-value"><b>{{ states[metric.key].loading ? '鈥�' : states[metric.key].failed ? '鈥�' : states[metric.key].count }}</b><span>{{ states[metric.key].failed ? '鏆傛椂鏃犳硶鑾峰彇' : metric.unit }}</span></div></div><IconifyIcon class="metric-arrow" icon="lucide:chevron-right" /></button></div>
</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;
-}
-
-.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);
-}
+.portal-metrics { display: grid; grid-template-columns: repeat(var(--count), minmax(0, 1fr)); }
+button { display: flex; min-width: 0; min-height: 80px; align-items: center; gap: 13px; padding: 8px 20px; border-right: 1px solid #e4edf5; background: #fff; text-align: left; cursor: pointer; }
+button:last-child { border: 0; }.metric-icon { display: grid; width: 43px; height: 43px; flex: none; place-items: center; border-radius: 50%; color: #2775b9; background: #ecf4fd; font-size: 23px; }
+strong { color: #315273; font-size: 13px; font-weight: 600; }.metric-value { display: flex; align-items: baseline; gap: 7px; margin-top: 4px; }.metric-value b { color: #173958; font-size: 26px; line-height: 1.2; }.metric-value span { color: #5c7187; font-size: 11px; }.metric-arrow { width: 15px; flex: none; margin-left: auto; color: #5c7187; }
+button:hover { background: #f7faff; }button:focus-visible { outline: 2px solid #2c70b2; outline-offset: -2px; }
+@media (max-width: 850px) { .portal-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; }button { padding: 8px 10px; }button:nth-child(2n) { border-right: 0; } }
+@media (max-width: 420px) { .metric-icon { width: 34px; height: 34px; font-size: 20px; }button { gap: 8px; padding: 8px 5px; }.metric-arrow { display: none; }.metric-value b { font-size: 23px; } }
</style>
--
Gitblit v1.9.3