From 79871604f3c79e0ee7a15d198ef321b42fe65c24 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期五, 27 三月 2026 17:54:56 +0800
Subject: [PATCH] 追踪进度页面修改

---
 src/views/qualityManagement/finalInspection/components/ratioDialog.vue |  215 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 215 insertions(+), 0 deletions(-)

diff --git a/src/views/qualityManagement/finalInspection/components/ratioDialog.vue b/src/views/qualityManagement/finalInspection/components/ratioDialog.vue
new file mode 100644
index 0000000..ba24712
--- /dev/null
+++ b/src/views/qualityManagement/finalInspection/components/ratioDialog.vue
@@ -0,0 +1,215 @@
+<template>
+  <div>
+    <el-dialog v-model="dialogVisible"
+               title="鏍囧噯鎶曞叆浜у嚭姣斾緥"
+               width="1000px"
+               @close="closeDialog">
+      <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>
+          </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-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-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>
+          <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>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from "vue";
+  import { qualityInspectFinishedRatio } from "@/api/qualityManagement/rawMaterialInspection.js";
+
+  const emit = defineEmits(["close"]);
+  const dialogVisible = ref(false);
+  const ratioData = ref([]);
+  const orderInfo = ref({});
+  const loading = ref(false);
+
+  const openDialog = row => {
+    dialogVisible.value = true;
+    orderInfo.value = row;
+    getRatioDetails(row);
+  };
+
+  const getRatioDetails = row => {
+    loading.value = true;
+    // 鏋勫缓璇锋眰鍙傛暟
+    const params = {
+      productOrderId: row.productOrderId,
+    };
+
+    qualityInspectFinishedRatio(params)
+      .then(res => {
+        ratioData.value = res.data || [];
+        loading.value = false;
+      })
+      .catch(err => {
+        loading.value = false;
+        console.error("鑾峰彇鏍囧噯鎶曞叆浜у嚭姣斾緥澶辫触:", err);
+      });
+  };
+
+  const closeDialog = () => {
+    dialogVisible.value = false;
+    emit("close");
+  };
+
+  defineExpose({
+    openDialog,
+  });
+</script>
+
+<style scoped>
+  .detail-card {
+    margin-bottom: 20px;
+  }
+
+  .card-header {
+    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: 12px;
+  }
+
+  .info-item {
+    width: 50%;
+    margin-bottom: 8px;
+  }
+
+  .info-label {
+    display: inline-block;
+    width: 100%;
+    font-weight: bold;
+    color: #666;
+  }
+
+  .info-value {
+    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