From 3548f02fa8cf8848f49bddf5799f486f7e682ef7 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期五, 27 三月 2026 16:04:05 +0800
Subject: [PATCH] 成品检页面修改
---
src/views/qualityManagement/finalInspection/components/ratioDialog.vue | 193 ++++++++++++++++++++++++++++-------------------
1 files changed, 114 insertions(+), 79 deletions(-)
diff --git a/src/views/qualityManagement/finalInspection/components/ratioDialog.vue b/src/views/qualityManagement/finalInspection/components/ratioDialog.vue
index 23e23a0..ba24712 100644
--- a/src/views/qualityManagement/finalInspection/components/ratioDialog.vue
+++ b/src/views/qualityManagement/finalInspection/components/ratioDialog.vue
@@ -4,86 +4,54 @@
title="鏍囧噯鎶曞叆浜у嚭姣斾緥"
width="1000px"
@close="closeDialog">
- <!-- <el-card class="detail-card">
- <template #header>
- <div class="card-header">
- <span>鐢熶骇璁㈠崟淇℃伅</span>
- </div>
- </template>
- <div class="detail-info">
- <div class="info-row">
- <div class="info-item">
- <span class="info-label">鐢熶骇璁㈠崟鍙凤細</span>
- <span class="info-value">{{ orderInfo.npsNo }}</span>
+ <div class="ratio-cards">
+ <el-card v-for="(item, index) in ratioData"
+ :key="index"
+ class="ratio-card">
+ <template #header>
+ <div class="card-header">
+ <span>{{ item.productName }}<span v-if="item.model">-</span>{{ item.model || '' }}</span>
+ <span class="material-code">{{ item.materialCode }}</span>
</div>
- <div class="info-item">
- <span class="info-label">浜у搧鍚嶇О锛�</span>
- <span class="info-value">{{ orderInfo.productName }}</span>
+ </template>
+ <div class="ratio-info">
+ <div class="info-row">
+ <div class="info-item">
+ <span class="info-label">瀹為檯鎶曞叆閲忥細</span>
+ <span class="info-value">{{ item.actualInputQuantity }} {{ item.unit }}</span>
+ </div>
+ <div class="info-item">
+ <span class="info-label">瀹為檯浜у嚭閲忥細</span>
+ <span class="info-value">{{ item.actualOutputQuantity }} {{ item.unit }}</span>
+ </div>
</div>
- <div class="info-item">
- <span class="info-label">瑙勬牸锛�</span>
- <span class="info-value">{{ orderInfo.model }}</span>
+ <div class="info-row">
+ <div class="info-item">
+ <span class="info-label">瀹為檯鎶曞叆浜у嚭姣斾緥锛�</span>
+ <span class="info-value actual-ratio">{{ item.actualInputOutputRatio }}</span>
+ </div>
+ <div class="info-item">
+ <span class="info-label">鏍囧噯鎶曞叆浜у嚭姣斾緥锛�</span>
+ <span class="info-value standard-ratio">{{ item.standardInputOutputRatio }}</span>
+ </div>
</div>
- <div class="info-item">
- <span class="info-label">浜у搧绫诲瀷锛�</span>
- <span class="info-value">{{ orderInfo.strength }}</span>
+ <div class="info-row">
+ <div class="info-item">
+ <span class="info-label">鍋忓樊鐜囷細</span>
+ <span :class="['info-value', 'deviation-rate', item.deviationRate >= 0 ? 'positive' : 'negative']">
+ {{ item.deviationRate >= 0 ? '+' : '' }}{{ (item.deviationRate * 100).toFixed(2) }}%
+ </span>
+ </div>
</div>
</div>
- </div>
- </el-card> -->
- <el-card class="detail-card"
- style="margin-top: 20px;">
- <template #header>
- <div class="card-header">
- <span>鎶曞叆浜у嚭姣斾緥鏄庣粏</span>
- </div>
- </template>
- <el-table :data="ratioData"
- style="width: 100%">
- <el-table-column prop="materialCode"
- label="浜у搧缂栫爜"
- width="120" />
- <el-table-column prop="productName"
- label="浜у搧鍚嶇О"
- width="150" />
- <el-table-column prop="model"
- label="瑙勬牸"
- width="100" />
- <!-- <el-table-column prop="unit"
- label="鍗曚綅"
- width="80" /> -->
- <el-table-column prop="actualInputQuantity"
- label="瀹為檯鎶曞叆閲�"
- width="120">
- <template #default="scope">
- <span style="color: #409eff;">{{ scope.row.actualInputQuantity }}</span> {{ scope.row.unit }}
- </template>
- </el-table-column>
- <el-table-column prop="actualOutputQuantity"
- label="瀹為檯浜у嚭閲�"
- width="120">
- <template #default="scope">
- <span style="color: #409eff;">{{ scope.row.actualOutputQuantity }}</span> {{ scope.row.unit }}
- </template>
- </el-table-column>
- <el-table-column prop="standardInputOutputRatio"
- label="鏍囧噯鎶曞叆浜у嚭姣斾緥"
- width="150">
- <template #default="scope">
- <span style="color: #f68f00;">{{ scope.row.standardInputOutputRatio }}</span>
- </template>
- </el-table-column>
- <el-table-column prop="deviationRate"
- label="鍋忓樊鐜�"
- width="120">
- <template #default="scope">
- <span :style="{ color: scope.row.deviationRate >= 0 ? '#67c23a' : '#f56c6c' }">
- {{ scope.row.deviationRate >= 0 ? '+' : '' }}{{ scope.row.deviationRate.toFixed(2) }}%
- </span>
- </template>
- </el-table-column>
- </el-table>
- </el-card>
+ <img v-if="item.deviationRate < 0"
+ src="@/assets/images/ratiodown.png"
+ class="chart-image" />
+ <img v-else
+ src="@/assets/images/ratioup.png"
+ class="chart-imageUp" />
+ </el-card>
+ </div>
<template #footer>
<div class="dialog-footer">
<el-button @click="closeDialog">鍏抽棴</el-button>
@@ -146,26 +114,54 @@
font-size: 16px;
font-weight: bold;
color: #333;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .material-code {
+ font-size: 14px;
+ font-weight: normal;
+ color: #909399;
}
.detail-info {
padding: 10px 0;
}
+ .ratio-cards {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+ gap: 20px;
+ }
+
+ .ratio-card {
+ border: 1px solid #ebeef5;
+ border-radius: 4px;
+ overflow: hidden;
+ position: relative;
+ }
+
+ .ratio-info {
+ padding: 15px;
+ display: flex;
+ flex-direction: column;
+ }
+
.info-row {
display: flex;
flex-wrap: wrap;
- margin-bottom: 10px;
+ margin-bottom: 12px;
}
.info-item {
- width: 25%;
- margin-bottom: 10px;
+ width: 50%;
+ margin-bottom: 8px;
}
.info-label {
display: inline-block;
- width: 120px;
+ width: 100%;
font-weight: bold;
color: #666;
}
@@ -174,7 +170,46 @@
color: #333;
}
+ .actual-ratio {
+ color: #409eff;
+ font-weight: bold;
+ }
+
+ .standard-ratio {
+ color: #f68f00;
+ font-weight: bold;
+ }
+
+ .deviation-rate {
+ font-weight: bold;
+ }
+
+ .deviation-rate.positive {
+ color: #67c23a;
+ }
+
+ .deviation-rate.negative {
+ color: #f56c6c;
+ }
+
.dialog-footer {
text-align: center;
}
+ .chart-image {
+ position: absolute;
+ bottom: 30px;
+ right: 20px;
+ width: 60px;
+ height: 80px;
+ opacity: 0.8;
+ }
+ .chart-imageUp {
+ position: absolute;
+ bottom: 30px;
+ right: 20px;
+ width: 60px;
+ height: 80px;
+ opacity: 0.8;
+ transform: rotate(180deg);
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.3