<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>
|
