308 lines
8.5 KiB
Vue
308 lines
8.5 KiB
Vue
<!--
|
|
* @Author: zwq
|
|
* @Date: 2023-08-24 14:47:58
|
|
* @LastEditors: zwq
|
|
* @LastEditTime: 2025-02-25 14:03:40
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<div>
|
|
<search-bar
|
|
:formConfigs="formConfig"
|
|
ref="searchBarForm"
|
|
@headBtnClick="buttonClick" />
|
|
<el-table
|
|
id="detail"
|
|
:data="tableData"
|
|
:header-cell-style="{
|
|
background: '#F2F4F9',
|
|
color: '#606266',
|
|
}"
|
|
border
|
|
:span-method="arraySpanMethod"
|
|
v-loading="dataListLoading"
|
|
style="width: 100%"
|
|
ref="dataList">
|
|
<el-table-column prop="lineName" label="产线" align="center" />
|
|
<el-table-column
|
|
prop="sizes"
|
|
width="105"
|
|
showOverflowtooltip
|
|
align="center"
|
|
label="规格" />
|
|
<el-table-column prop="process" label="产品工艺" align="center" />
|
|
<el-table-column prop="inputN" label="投入" align="center">
|
|
<el-table-column prop="inputNum" label="投入数量/片" />
|
|
<el-table-column prop="inputArea" label="投入面积/m²">
|
|
<template v-slot="scope">
|
|
<span>
|
|
{{
|
|
scope.row.inputArea != null
|
|
? scope.row.inputArea.toFixed(2)
|
|
: '-'
|
|
}}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column prop="outputN" label="产出" align="center">
|
|
<el-table-column prop="outputNum" label="产出数量/片" />
|
|
<el-table-column prop="outputArea" label="产出面积/m²">
|
|
<template v-slot="scope">
|
|
<span>
|
|
{{
|
|
scope.row.outputArea != null
|
|
? scope.row.outputArea.toFixed(2)
|
|
: '-'
|
|
}}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column prop="lossN" label="不良" align="center">
|
|
<el-table-column prop="lossNum" label="不良数量/片" />
|
|
<el-table-column prop="lossArea" label="不良面积/m²">
|
|
<template v-slot="scope">
|
|
<span>
|
|
{{
|
|
scope.row.lossArea != null ? scope.row.lossArea.toFixed(2) : '-'
|
|
}}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column prop="lossRatio" label="不良率/%">
|
|
<template v-slot="scope">
|
|
<span>
|
|
{{
|
|
scope.row.lossRatio != null ? scope.row.lossRatio.toFixed(2) : '-'
|
|
}}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="outputRatio" label="投入产出率/%">
|
|
<template v-slot="scope">
|
|
<span>
|
|
{{
|
|
scope.row.outputRatio != null
|
|
? scope.row.outputRatio.toFixed(2)
|
|
: '-'
|
|
}}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="processingRatio" label="加工成品率/%">
|
|
<template v-slot="scope">
|
|
<span>
|
|
{{
|
|
scope.row.processingRatio != null
|
|
? scope.row.processingRatio.toFixed(2)
|
|
: '-'
|
|
}}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="lossD" label="不良详情" align="center">
|
|
<el-table-column prop="original" label="原片" align="center">
|
|
<el-table-column prop="originalLossNum" label="原片不良/片" />
|
|
<el-table-column prop="originalLossArea" label="原片不良/m²">
|
|
<template v-slot="scope">
|
|
<span>
|
|
{{
|
|
scope.row.originalLossArea != null
|
|
? scope.row.originalLossArea.toFixed(2)
|
|
: '-'
|
|
}}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column prop="edge" label="磨边" align="center">
|
|
<el-table-column prop="edgeLossNum" label="磨边不良/片" />
|
|
<el-table-column prop="edgeLossArea" label="磨边不良/m²">
|
|
<template v-slot="scope">
|
|
<span>
|
|
{{
|
|
scope.row.edgeLossArea != null
|
|
? scope.row.edgeLossArea.toFixed(2)
|
|
: '-'
|
|
}}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column prop="drill" label="打孔" align="center">
|
|
<el-table-column prop="drillLossNum" label="打孔不良/片" />
|
|
<el-table-column prop="drillLossArea" label="打孔不良/m²">
|
|
<template v-slot="scope">
|
|
<span>
|
|
{{
|
|
scope.row.drillLossArea != null
|
|
? scope.row.drillLossArea.toFixed(2)
|
|
: '-'
|
|
}}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column prop="coating" label="镀膜" align="center">
|
|
<el-table-column prop="coatingLossNum" label="镀膜不良/片" />
|
|
<el-table-column prop="coatingLossArea" label="镀膜不良/m²">
|
|
<template v-slot="scope">
|
|
<span>
|
|
{{
|
|
scope.row.coatingLossArea != null
|
|
? scope.row.coatingLossArea.toFixed(2)
|
|
: '-'
|
|
}}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column prop="silk" label="丝印" align="center">
|
|
<el-table-column prop="silkLossNum" label="丝印不良/片" />
|
|
<el-table-column prop="silkLossArea" label="丝印不良/m²">
|
|
<template v-slot="scope">
|
|
<span>
|
|
{{
|
|
scope.row.silkLossArea != null
|
|
? scope.row.silkLossArea.toFixed(2)
|
|
: '-'
|
|
}}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column prop="tempering" label="钢化" align="center">
|
|
<el-table-column prop="temperingLossNum" label="钢化不良/片" />
|
|
<el-table-column prop="temperingLossArea" label="钢化不良/m²">
|
|
<template v-slot="scope">
|
|
<span>
|
|
{{
|
|
scope.row.temperingLossArea != null
|
|
? scope.row.temperingLossArea.toFixed(2)
|
|
: '-'
|
|
}}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column prop="packing" label="包装" align="center">
|
|
<el-table-column prop="packingLossNum" label="包装不良/片" />
|
|
<el-table-column prop="packingLossArea" label="包装不良/m²">
|
|
<template v-slot="scope">
|
|
<span>
|
|
{{
|
|
scope.row.packingLossArea != null
|
|
? scope.row.packingLossArea.toFixed(2)
|
|
: '-'
|
|
}}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getTeamReportPageDet } from '@/api/core/monitoring/auto';
|
|
import * as XLSX from 'xlsx';
|
|
import FileSaver from 'file-saver';
|
|
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
tableData: [],
|
|
dataListLoading: false,
|
|
formConfig: [
|
|
{
|
|
// type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
|
|
type: 'button',
|
|
btnName: '导出',
|
|
name: 'export',
|
|
color: 'warning',
|
|
},
|
|
],
|
|
};
|
|
},
|
|
components: {},
|
|
created() {},
|
|
mounted() {},
|
|
methods: {
|
|
// 获取数据列表
|
|
init(id) {
|
|
this.dataListLoading = true;
|
|
getTeamReportPageDet(id).then((response) => {
|
|
this.tableData = response.data?.map((item, index) => {
|
|
item.originalLossNum = item.original?.lossNum;
|
|
item.originalLossArea = item.original?.lossArea;
|
|
item.edgeLossNum = item.edge?.lossNum;
|
|
item.edgeLossArea = item.edge?.lossArea;
|
|
item.drillLossNum = item.drill?.lossNum;
|
|
item.drillLossArea = item.drill?.lossArea;
|
|
item.coatingLossNum = item.coating?.lossNum;
|
|
item.coatingLossArea = item.coating?.lossArea;
|
|
item.silkLossNum = item.silk?.lossNum;
|
|
item.silkLossArea = item.silk?.lossArea;
|
|
item.temperingLossNum = item.tempering?.lossNum;
|
|
item.temperingLossArea = item.tempering?.lossArea;
|
|
item.packingLossNum = item.packing?.lossNum;
|
|
item.packingLossArea = item.packing?.lossArea;
|
|
if (item.isSummaryReport) {
|
|
item.lineName = '合计';
|
|
}
|
|
return item;
|
|
});
|
|
this.dataListLoading = false;
|
|
});
|
|
},
|
|
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
|
|
if (row.isSummaryReport) {
|
|
if (columnIndex === 0) {
|
|
return [1, 3];
|
|
} else if (columnIndex === 1) {
|
|
return [0, 0];
|
|
} else if (columnIndex === 2) {
|
|
return [0, 0];
|
|
}
|
|
}
|
|
},
|
|
|
|
buttonClick(val) {
|
|
switch (val.btnName) {
|
|
case 'export':
|
|
this.handleExport();
|
|
break;
|
|
default:
|
|
console.log(val);
|
|
}
|
|
},
|
|
handleExport() {
|
|
let tables = document.querySelector('#detail').cloneNode(true);
|
|
let exportTable = XLSX.utils.table_to_book(tables);
|
|
|
|
var exportTableOut = XLSX.write(exportTable, {
|
|
bookType: 'xlsx',
|
|
bookSST: true,
|
|
type: 'array',
|
|
});
|
|
// sheetjs.xlsx为导出表格的标题名称
|
|
try {
|
|
FileSaver.saveAs(
|
|
new Blob([exportTableOut], {
|
|
type: 'application/octet-stream',
|
|
}),
|
|
'班组生产报表-详情.xlsx'
|
|
);
|
|
} catch (e) {
|
|
if (typeof console !== 'undefined') console.log(e, exportTableOut);
|
|
}
|
|
return exportTableOut;
|
|
},
|
|
},
|
|
};
|
|
</script>
|