113 lines
3.2 KiB
Vue
113 lines
3.2 KiB
Vue
<!-- src/views/PdoManagement/components/PdoSummary.vue -->
|
||
<template>
|
||
<el-descriptions
|
||
class="summary-content"
|
||
:column="1"
|
||
:style="{ width: '100%' }"
|
||
size="mini"
|
||
>
|
||
<!-- 循环渲染汇总项，从计算属性获取数据 -->
|
||
<el-descriptions-item
|
||
v-for="(item, index) in summaryResult"
|
||
:key="index"
|
||
:label="item.label"
|
||
label-class="summary-label"
|
||
>
|
||
<!-- 根据类型格式化显示（重量/百分比/数量） -->
|
||
<span :class="item.type === 'rate' ? 'summary-rate' : ''">
|
||
{{ item.value }}
|
||
{{ item.unit }}
|
||
</span>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'PdoSummary',
|
||
props: {
|
||
// 接收表格原始数据（父组件传递）
|
||
tableData: {
|
||
type: Array,
|
||
required: true,
|
||
default: () => [] // 默认空数组，避免无数据时报错
|
||
}
|
||
},
|
||
computed: {
|
||
// 核心：根据tableData计算汇总结果
|
||
summaryResult() {
|
||
// 1. 基础数值汇总（处理字符串转数字，避免NaN）
|
||
const totalEntryWeight = this.tableData.reduce((sum, item) => {
|
||
return sum + (Number(item.entryWeight) || 0)
|
||
}, 0) // 原料总重（来料重量求和）
|
||
|
||
const totalExitWeight = this.tableData.reduce((sum, item) => {
|
||
return sum + (Number(item.exitNetWeight) || 0)
|
||
}, 0) // 产品总重（成品带涂料重量求和）
|
||
|
||
const totalZincRemoved = totalEntryWeight - totalExitWeight // 去锌总理重（原料总重 - 产品总重）
|
||
|
||
// 2. 成材率计算（避免除数为0）
|
||
const yieldRate = totalEntryWeight > 0
|
||
? ((totalExitWeight / totalEntryWeight) * 100).toFixed(2)
|
||
: '0.00'
|
||
|
||
// 3. 卷数统计（原料/成品卷数默认按表格行数，可根据实际业务调整，如去重entryMatId）
|
||
const totalEntryCoils = this.tableData.length // 原料总卷数
|
||
const totalExitCoils = this.tableData.length // 成品总卷数
|
||
|
||
// 4. 返回格式化后的汇总项
|
||
return [
|
||
{ label: '原料总重', value: totalEntryWeight.toFixed(1), unit: 't', type: 'weight' },
|
||
{ label: '去锌总理重', value: totalZincRemoved.toFixed(1), unit: 't', type: 'weight' },
|
||
{ label: '产品总重', value: totalExitWeight.toFixed(1), unit: 't', type: 'weight' },
|
||
{ label: '成材率', value: yieldRate, unit: '%', type: 'rate' },
|
||
{ label: '原料总卷数', value: totalEntryCoils, unit: '卷', type: 'count' },
|
||
{ label: '成品总卷数', value: totalExitCoils, unit: '卷', type: 'count' }
|
||
]
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.summary-content {
|
||
padding: 10px;
|
||
flex: 1;
|
||
|
||
&::-webkit-scrollbar {
|
||
width: 4px;
|
||
}
|
||
|
||
&::-webkit-scrollbar-thumb {
|
||
background: #c0c0c0;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
&::-webkit-scrollbar-track {
|
||
background: #f0f0f0;
|
||
}
|
||
|
||
::v-deep .el-descriptions__label {
|
||
font-weight: 500;
|
||
color: #666;
|
||
font-size: 12px;
|
||
}
|
||
|
||
::v-deep .el-descriptions__content {
|
||
color: #333;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.summary-label {
|
||
font-weight: 500;
|
||
color: #666;
|
||
}
|
||
|
||
.summary-rate {
|
||
color: #333;
|
||
font-weight: 600;
|
||
}
|
||
</style> |