From 0c9aa3e1d5cfbf2245f9e7462e1d27cc8c7827d1 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 14 十月 2026 18:29:49 +0800
Subject: [PATCH] feat: 客户签订合同展示、质检合格率卡片、生产订单选择默认状态修正
---
src/views/mes/home/modules/kpi-cards.vue | 120 +++++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 78 insertions(+), 42 deletions(-)
diff --git a/src/views/mes/home/modules/kpi-cards.vue b/src/views/mes/home/modules/kpi-cards.vue
index f104479..eff3bb2 100644
--- a/src/views/mes/home/modules/kpi-cards.vue
+++ b/src/views/mes/home/modules/kpi-cards.vue
@@ -18,31 +18,58 @@
navigate: [name: string];
}>();
-/** 鏄惁鏈夎川閲忔暟鎹紙鍚堟牸鍝� + 涓嶈壇鍝� > 0锛� */
-const hasQualityData = computed(
- () =>
- props.summary.todayQualifiedQuantity +
- props.summary.todayUnqualifiedQuantity >
- 0,
-);
+/**
+ * 璐ㄩ噺鍚堟牸鐜囷細鏉ユ枡 / 杩囩▼ / 鍑鸿揣涓変釜妫�楠岀幆鑺傦紝鍚勮嚜涓�寮犲崱鐗�
+ *
+ * 鐢卞悗绔寜銆屽悎鏍兼暟閲� / 妫�楠屾暟閲忋�嶈绠楋紙涓嶈繃婊ゅ崟鎹姸鎬侊紝鏃犳椂闂撮檺鍒讹級锛�
+ * 璇ョ幆鑺傛病鏈夋楠屾暟鎹椂鍚庣杩斿洖 null銆�
+ */
+const qualityRates = computed(() => [
+ {
+ label: '鏉ユ枡鍚堟牸鐜�',
+ rate: props.summary.iqcQualifiedRate,
+ checkQuantity: props.summary.iqcCheckQuantity,
+ routeName: 'MesQcIqc',
+ icon: 'lucide:package-check',
+ color: '#e6a23c',
+ colorLight: '#ebb563',
+ },
+ {
+ label: '杩囩▼鍚堟牸鐜�',
+ rate: props.summary.ipqcQualifiedRate,
+ checkQuantity: props.summary.ipqcCheckQuantity,
+ routeName: 'MesQcIpqc',
+ icon: 'lucide:workflow',
+ color: '#13c2c2',
+ colorLight: '#5cdbd3',
+ },
+ {
+ label: '鍑鸿揣鍚堟牸鐜�',
+ rate: props.summary.oqcQualifiedRate,
+ checkQuantity: props.summary.oqcCheckQuantity,
+ routeName: 'MesQcOqc',
+ icon: 'lucide:truck',
+ color: '#eb2f96',
+ colorLight: '#f759ab',
+ },
+]);
-/** 璐ㄩ噺鍚堟牸鐜� = 鍚堟牸鍝� / (鍚堟牸鍝� + 涓嶈壇鍝�) * 100锛屾棤鏁版嵁鏃朵负 0 */
-const qualityRate = computed(() => {
- const total =
- props.summary.todayQualifiedQuantity +
- props.summary.todayUnqualifiedQuantity;
- if (total === 0) {
- return 0;
- }
- return (props.summary.todayQualifiedQuantity / total) * 100;
-});
+/** 鍚堟牸鐜囧睍绀烘枃妗堬紙涓�浣嶅皬鏁帮紝涓庡師銆岃川閲忓悎鏍肩巼銆嶅崱鐗囦竴鑷达級锛屾棤鏁版嵁鏃剁敤銆屸�斻�嶈�屼笉鏄� 0% */
+function formatRate(rate: null | number | undefined) {
+ return rate === null || rate === undefined ? '鈥�' : rate.toFixed(1);
+}
+
+/** 鏃犳楠屾暟鎹椂涓嶆覆鏌撶櫨鍒嗗彿锛岄伩鍏嶅嚭鐜般�屸��%銆� */
+function hasRate(rate: null | number | undefined) {
+ return rate !== null && rate !== undefined;
+}
</script>
<template>
<Row :gutter="16">
- <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
+ <Col :lg="6" :md="12" :sm="12" :xl="4" :xs="24" class="mb-4">
<Card
- class="kpi-card cursor-pointer transition-all hover:-translate-y-1 hover:shadow-lg"
+ class="kpi-card h-full cursor-pointer transition-all hover:-translate-y-1 hover:shadow-lg"
@click="emit('navigate', 'MesProWorkOrder')"
>
<div class="flex items-center gap-4">
@@ -71,9 +98,9 @@
</div>
</Card>
</Col>
- <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
+ <Col :lg="6" :md="12" :sm="12" :xl="4" :xs="24" class="mb-4">
<Card
- class="kpi-card cursor-pointer transition-all hover:-translate-y-1 hover:shadow-lg"
+ class="kpi-card h-full cursor-pointer transition-all hover:-translate-y-1 hover:shadow-lg"
@click="emit('navigate', 'MesProFeedback')"
>
<div class="flex items-center gap-4">
@@ -100,44 +127,53 @@
</div>
</Card>
</Col>
- <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
+ <Col
+ v-for="item in qualityRates"
+ :key="item.label"
+ :lg="6"
+ :md="12"
+ :sm="12"
+ :xl="4"
+ :xs="24"
+ class="mb-4"
+ >
<Card
- class="kpi-card cursor-pointer transition-all hover:-translate-y-1 hover:shadow-lg"
- @click="emit('navigate', 'MesProFeedback')"
+ class="kpi-card h-full cursor-pointer transition-all hover:-translate-y-1 hover:shadow-lg"
+ @click="emit('navigate', item.routeName)"
>
<div class="flex items-center gap-4">
<div
class="flex size-14 flex-shrink-0 items-center justify-center rounded-xl text-white"
- style="background: linear-gradient(135deg, #e6a23c, #ebb563)"
+ :style="{ background: `linear-gradient(135deg, ${item.color}, ${item.colorLight})` }"
>
- <IconifyIcon class="size-7" icon="lucide:circle-check" />
+ <IconifyIcon class="size-7" :icon="item.icon" />
</div>
<div>
- <div class="text-muted-foreground mb-1 text-sm">璐ㄩ噺鍚堟牸鐜�</div>
+ <div class="text-muted-foreground mb-1 text-sm">{{ item.label }}</div>
<div class="flex items-baseline gap-1">
- <CountTo
- class="text-2xl font-bold leading-tight text-[#e6a23c]"
- :decimals="1"
- :end-val="qualityRate"
- :duration="1500"
- />
- <span class="text-muted-foreground text-xs">%</span>
+ <span
+ class="text-2xl font-bold leading-tight"
+ :style="{ color: item.color }"
+ >
+ {{ formatRate(item.rate) }}
+ </span>
+ <span
+ v-if="hasRate(item.rate)"
+ class="text-muted-foreground text-xs"
+ >
+ %
+ </span>
</div>
<div class="text-muted-foreground mt-1 text-xs">
- <template v-if="hasQualityData">
- <span>鍚堟牸 {{ summary.todayQualifiedQuantity }}</span>
- <Divider type="vertical" />
- <span>涓嶈壇 {{ summary.todayUnqualifiedQuantity }}</span>
- </template>
- <span v-else>鏆傛棤鏁版嵁</span>
+ <span>妫�楠� {{ item.checkQuantity }}</span>
</div>
</div>
</div>
</Card>
</Col>
- <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
+ <Col :lg="6" :md="12" :sm="12" :xl="4" :xs="24" class="mb-4">
<Card
- class="kpi-card cursor-pointer transition-all hover:-translate-y-1 hover:shadow-lg"
+ class="kpi-card h-full cursor-pointer transition-all hover:-translate-y-1 hover:shadow-lg"
@click="emit('navigate', 'MesDvMachinery')"
>
<div class="flex items-center gap-4">
--
Gitblit v1.9.3