602 lines
17 KiB
Vue
602 lines
17 KiB
Vue
<!--
|
||
* @Author: zhp
|
||
* @Date: 2024-04-18 14:08:46
|
||
* @LastEditTime: 2024-04-24 13:52:45
|
||
* @LastEditors: zhp
|
||
* @Description:
|
||
-->
|
||
<template>
|
||
<div class="app-container">
|
||
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
|
||
<!-- <el-table show-summary :header-cell-style="{
|
||
background: '#F2F4F9',
|
||
color: '#606266'
|
||
}" class="baseTable" :max-height="tableH" id="exportTable" :data="tableData" style="width: 100%"
|
||
:span-method="objectSpanMethod">
|
||
<el-table-column v-for="item in tableProps" :prop="item.prop" :label="item.label" align="center">
|
||
</el-table-column>
|
||
</el-table> -->
|
||
<!-- <el-table border style="margin-top: 50px;" :data="transData">
|
||
<el-table-column v-for="(item, index) in transTitle" :label="item" :key="index" align="center">
|
||
<template slot-scope="scope">
|
||
{{scope.row[index]}}
|
||
</template>
|
||
</el-table-column>
|
||
</el-table> -->
|
||
|
||
<el-table class="baseTable" :span-method="objectSpanMethod" :data="tableData" style="width: 100%">
|
||
<el-table-column align="center" prop="" label="配料日报" width="120">
|
||
<el-table-column label="原料样式" align="right" width="150">
|
||
<el-table-column prop="className" label="时间" width="120">
|
||
</el-table-column>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="putType" label="" width="180">
|
||
</el-table-column>
|
||
<!-- <el-table-column prop label="参考标准及评价方法">
|
||
<el-table-column prop="activityName"></el-table-column>
|
||
<el-table-column prop="message"></el-table-column>
|
||
</el-table-column> -->
|
||
<el-table-column align="center" style="text-align: center;" v-for="(item,index) in codeList " :prop="item"
|
||
:label="item">
|
||
<!-- <template slot-scope="scope">
|
||
<el-col :span="12">
|
||
{{ codeList[index] }}
|
||
</el-col>
|
||
<el-col :span="12">
|
||
|
||
</el-col>
|
||
<el-row>
|
||
<el-col :span="24">
|
||
{{ scope.row.sj2 }}
|
||
</el-col>
|
||
</el-row>
|
||
</template> -->
|
||
</el-table-column>
|
||
</el-table-column>
|
||
</el-table>
|
||
<!-- <pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total"
|
||
@pagination="getDataList" /> -->
|
||
<!-- <base-dialog
|
||
:dialogTitle="addOrEditTitle"
|
||
:dialogVisible="addOrUpdateVisible"
|
||
@cancel="handleCancel"
|
||
@confirm="handleConfirm"
|
||
:before-close="handleCancel"
|
||
width="30%"> -->
|
||
<!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" /> -->
|
||
<!-- </base-dialog> -->
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// import AddOrUpdate from './add-or-updata';
|
||
// import basicPage from '../../../core/mixins/basic-page';
|
||
// import { parseTime } from '../../../core/mixins/code-filter';
|
||
import {
|
||
getIngredientData
|
||
} from '@/api/report/qcReport';
|
||
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
||
import FileSaver from 'file-saver'
|
||
// import { getList, } from "@/api/base/qualityScrapType";
|
||
const headers = [
|
||
// {
|
||
// prop: 'createTime',
|
||
// label: '添加时间',
|
||
// filter: parseTime
|
||
// },
|
||
{
|
||
prop: 'classType',
|
||
label: '时间'
|
||
},
|
||
{
|
||
prop: 'equipmentName',
|
||
label: ''
|
||
},
|
||
{
|
||
prop: 'num',
|
||
label: '片数'
|
||
},
|
||
{
|
||
prop: 'area',
|
||
label: '面积'
|
||
},
|
||
{
|
||
prop: 'countNum',
|
||
label: '托数',
|
||
// filter: (val) => val == false ? '不合格' : '合格',
|
||
},
|
||
{
|
||
prop: 'size',
|
||
label: '规格',
|
||
// filter: (val) => val == 1 ? 'A' : val == 2 ? 'B' : 'C',
|
||
},
|
||
// {
|
||
// prop: 'checkerName',
|
||
// label: '检测人员'
|
||
// },
|
||
// {
|
||
// prop: 'checkTime',
|
||
// label: '检测时间',
|
||
// filter: parseTime
|
||
// },
|
||
];
|
||
|
||
export default {
|
||
mixins: [ tableHeightMixin],
|
||
data() {
|
||
return {
|
||
urlOptions: {
|
||
getDataListURL: getIngredientData,
|
||
// deleteURL: deleteQualityHotMaterial,
|
||
// exportURL: exportFactoryExcel,
|
||
},
|
||
codeList: ['sj1', 'sj2', 'sj3', 'sj4', 'sj5', 'sj7', 'sj8', 'sj10', 'sj11', 'sj12', 'sj13', 'sj14'],
|
||
tableData: [],
|
||
listQuery: {
|
||
startTime: undefined,
|
||
endTime:undefined
|
||
},
|
||
formConfig: [
|
||
{
|
||
type: 'datePicker',
|
||
label: '时间段',
|
||
dateType: 'daterange',
|
||
format: 'yyyy-MM-dd HH:mm:ss',
|
||
valueFormat: "timestamp",
|
||
rangeSeparator: '-',
|
||
startPlaceholder: '开始时间',
|
||
endPlaceholder: '结束时间',
|
||
param: 'checkTime',
|
||
defaultSelect: [Date.now() - 24 * 60 * 60 - 1000, Date.now()],
|
||
width: 350
|
||
},
|
||
{
|
||
type:'button',
|
||
btnName: '查询',
|
||
name: 'search',
|
||
color: 'primary',
|
||
},
|
||
{
|
||
type:'button',
|
||
btnName: '导出',
|
||
name: 'export',
|
||
color: 'primary',
|
||
plain: true
|
||
},
|
||
],
|
||
};
|
||
},
|
||
components: {
|
||
// AddOrUpdate,
|
||
},
|
||
created() {
|
||
},
|
||
mounted() {
|
||
// this.formConfig[1].defaultSelect[]
|
||
this.listQuery.startTime = this.formConfig[0].defaultSelect[0]
|
||
this.listQuery.endTime = this.formConfig[0].defaultSelect[1]
|
||
// this.formConfig[0].defaultSelect[0] = Date.now()-24*60*60-1000
|
||
this.getDataList()
|
||
// this.getSpanArr(this.tableData)
|
||
// this.getDict();
|
||
},
|
||
methods: {
|
||
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
||
let spanOneArr = [], concatOne = 0;
|
||
this.tableData.map((item, index) => {
|
||
if (index === 0) {
|
||
spanOneArr.push(1);
|
||
} else {
|
||
//第一列需合并相同内容的判断条件
|
||
if (item.classType === this.tableData[index - 1].classType) {
|
||
spanOneArr[concatOne] += 1;
|
||
spanOneArr.push(0);
|
||
} else {
|
||
spanOneArr.push(1);
|
||
concatOne = index;
|
||
};
|
||
}
|
||
});
|
||
|
||
if (columnIndex === 0) {
|
||
const _row = spanOneArr[rowIndex];
|
||
const _col = _row > 0 ? 1 : 0;
|
||
return {
|
||
rowspan: _row,
|
||
colspan: _col
|
||
}
|
||
}
|
||
if (columnIndex === 1 ) {
|
||
if (rowIndex === 0 || rowIndex === 2 || rowIndex === 4 || rowIndex === 6 || rowIndex === 8 || rowIndex === 10) {
|
||
return {
|
||
rowspan: 2,
|
||
colspan: 1
|
||
}
|
||
}
|
||
}
|
||
if (columnIndex === 1) {
|
||
if (rowIndex %2 == 1) {
|
||
return {
|
||
rowspan: 1,
|
||
colspan: 2
|
||
}
|
||
}
|
||
}
|
||
if (columnIndex === 4 || columnIndex === 5 || columnIndex === 6 || columnIndex === 7 || columnIndex === 8 || columnIndex === 9 || columnIndex === 10 || columnIndex === 11 || columnIndex === 12 || columnIndex === 13) {
|
||
if (rowIndex % 2 == 0) {
|
||
return {
|
||
rowspan: 2,
|
||
colspan: 1
|
||
}
|
||
}
|
||
}
|
||
},
|
||
handleExport() {
|
||
// 处理查询参数
|
||
console.log(this.$refs);
|
||
var xlsxParam = { raw: true };
|
||
/* 从表生成工作簿对象 */
|
||
import('xlsx').then(excel => {
|
||
var wb = excel.utils.table_to_book(
|
||
document.querySelector("#exportTable"),
|
||
xlsxParam
|
||
);
|
||
/* 获取二进制字符串作为输出 */
|
||
var wbout = excel.write(wb, {
|
||
bookType: "xlsx",
|
||
bookSST: true,
|
||
type: "array",
|
||
});
|
||
try {
|
||
FileSaver.saveAs(
|
||
//Blob 对象表示一个不可变、原始数据的类文件对象。
|
||
//Blob 表示的不一定是JavaScript原生格式的数据。
|
||
//File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
|
||
//返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
|
||
new Blob([wbout], { type: "application/octet-stream" }),
|
||
//设置导出文件名称
|
||
"切割堆垛日报表.xlsx"
|
||
);
|
||
} catch (e) {
|
||
if (typeof console !== "undefined") console.log(e, wbout);
|
||
}
|
||
return wbout;
|
||
//do something......
|
||
})
|
||
|
||
},
|
||
// otherMethods(val) {
|
||
// if (val.type === 'detail') {
|
||
// this.addOrUpdateVisible = true;
|
||
// this.addOrEditTitle = "详情";
|
||
// this.$nextTick(() => {
|
||
// this.$refs.addOrUpdate.init(val.data.id, true);
|
||
// });
|
||
// }
|
||
// },
|
||
// 获取数据列表
|
||
getDataList() {
|
||
this.dataListLoading = true;
|
||
// this.listQuery.startTime = '1713197388000';
|
||
// this.listQuery.endTime = '1713254961000';
|
||
this.urlOptions.getDataListURL(this.listQuery).then(res => {
|
||
// console.log(res)
|
||
// console.log(res.data)
|
||
let arr = [
|
||
{
|
||
classType: 1,
|
||
className:'白班(8:00-20:00)',
|
||
'sj1': null,
|
||
'sj2': null,
|
||
'sj3': null,
|
||
'sj4': null,
|
||
'sj5': null,
|
||
'sj7': null,
|
||
'sj8': null,
|
||
'sj10': null,
|
||
'sj11': null,
|
||
'sj12': null,
|
||
'sj13': null,
|
||
'sj14': null,
|
||
putType: '投入数量'
|
||
},
|
||
{
|
||
classType: 1,
|
||
className: '白班(8:00-20:00)',
|
||
'sj1': null,
|
||
'sj2': null,
|
||
'sj3': null,
|
||
'sj4': null,
|
||
'sj5': null,
|
||
'sj7': null,
|
||
'sj8': null,
|
||
'sj10': null,
|
||
'sj11': null,
|
||
'sj12': null,
|
||
'sj13': null,
|
||
'sj14': null,
|
||
'sj1+sj2': null,
|
||
putType: ''
|
||
},
|
||
{
|
||
classType: 1,
|
||
className: '白班(8:00-20:00)',
|
||
'sj1': null,
|
||
'sj2': null,
|
||
'sj3': null,
|
||
'sj4': null,
|
||
'sj5': null,
|
||
'sj7': null,
|
||
'sj8': null,
|
||
'sj10': null,
|
||
'sj11': null,
|
||
'sj12': null,
|
||
'sj13': null,
|
||
'sj14': null,
|
||
putType: '投入次数'
|
||
},
|
||
{
|
||
classType: 1,
|
||
className: '白班(8:00-20:00)',
|
||
'sj1': null,
|
||
'sj2': null,
|
||
'sj3': null,
|
||
'sj4': null,
|
||
'sj5': null,
|
||
'sj7': null,
|
||
'sj8': null,
|
||
'sj10': null,
|
||
'sj11': null,
|
||
'sj12': null,
|
||
'sj13': null,
|
||
'sj14': null,
|
||
'sj1+sj2': null,
|
||
putType: ''
|
||
},
|
||
{
|
||
classType: 2,
|
||
className: '夜班(20:00-8:00)',
|
||
'sj1': null,
|
||
'sj2': null,
|
||
'sj3': null,
|
||
'sj4': null,
|
||
'sj5': null,
|
||
'sj7': null,
|
||
'sj8': null,
|
||
'sj10': null,
|
||
'sj11': null,
|
||
'sj12': null,
|
||
'sj13': null,
|
||
'sj14': null,
|
||
putType: '投入数量',
|
||
},
|
||
{
|
||
classType: 2,
|
||
className: '夜班(8:00-20:00)',
|
||
'sj1': null,
|
||
'sj2': null,
|
||
'sj3': null,
|
||
'sj4': null,
|
||
'sj5': null,
|
||
'sj7': null,
|
||
'sj8': null,
|
||
'sj10': null,
|
||
'sj11': null,
|
||
'sj12': null,
|
||
'sj13': null,
|
||
'sj14': null,
|
||
'sj1+sj2': null,
|
||
putType: ''
|
||
},
|
||
{
|
||
classType:2,
|
||
className: '夜班(20:00-8:00)',
|
||
'sj1': null,
|
||
'sj2': null,
|
||
'sj3': null,
|
||
'sj4': null,
|
||
'sj5': null,
|
||
'sj7': null,
|
||
'sj8': null,
|
||
'sj10': null,
|
||
'sj11': null,
|
||
'sj12': null,
|
||
'sj13': null,
|
||
'sj14': null,
|
||
putType: '投入次数',
|
||
},
|
||
{
|
||
classType: 2,
|
||
className: '夜班(8:00-20:00)',
|
||
'sj1': null,
|
||
'sj2': null,
|
||
'sj3': null,
|
||
'sj4': null,
|
||
'sj5': null,
|
||
'sj7': null,
|
||
'sj8': null,
|
||
'sj10': null,
|
||
'sj11': null,
|
||
'sj12': null,
|
||
'sj13': null,
|
||
'sj14': null,
|
||
'sj1+sj2': null,
|
||
putType: ''
|
||
},
|
||
{
|
||
classType: 3,
|
||
className: '全天',
|
||
'sj1': null,
|
||
'sj2': null,
|
||
'sj3': null,
|
||
'sj4': null,
|
||
'sj5': null,
|
||
'sj7': null,
|
||
'sj8': null,
|
||
'sj10': null,
|
||
'sj11': null,
|
||
'sj12': null,
|
||
'sj13': null,
|
||
'sj14': null,
|
||
putType: '投入数量',
|
||
},
|
||
{
|
||
classType: 3,
|
||
className: '全天',
|
||
'sj1': null,
|
||
'sj2': null,
|
||
'sj3': null,
|
||
'sj4': null,
|
||
'sj5': null,
|
||
'sj7': null,
|
||
'sj8': null,
|
||
'sj10': null,
|
||
'sj11': null,
|
||
'sj12': null,
|
||
'sj13': null,
|
||
'sj14': null,
|
||
'sj1+sj2':null,
|
||
putType: ''
|
||
},
|
||
{
|
||
classType: 3,
|
||
className: '全天',
|
||
'sj1': null,
|
||
'sj2': null,
|
||
'sj3': null,
|
||
'sj4': null,
|
||
'sj5': null,
|
||
'sj7': null,
|
||
'sj8': null,
|
||
'sj10': null,
|
||
'sj11': null,
|
||
'sj12': null,
|
||
'sj13': null,
|
||
'sj14': null,
|
||
putType: '投入次数',
|
||
},
|
||
{
|
||
classType: 3,
|
||
className: '全天',
|
||
'sj1': null,
|
||
'sj2': null,
|
||
'sj3': null,
|
||
'sj4': null,
|
||
'sj5': null,
|
||
'sj7': null,
|
||
'sj8': null,
|
||
'sj10': null,
|
||
'sj11': null,
|
||
'sj12': null,
|
||
'sj13': null,
|
||
'sj14': null,
|
||
'sj1+sj2': null,
|
||
putType: ''
|
||
},
|
||
]
|
||
res.data.forEach((ele) => {
|
||
if(ele.classType === 1 && ele.code == 'sj1+sj2') {
|
||
arr[1]['putType'] = ele.putNum
|
||
arr[3]['putType'] = ele.useNum
|
||
// arr[1]['sj2'] = ele.putNum
|
||
// arr[3]['sj2'] = ele.useNum
|
||
} else if (ele.classType === 2 && ele.code == 'sj1+sj2') {
|
||
arr[5]['putType'] = ele.putNum
|
||
arr[7]['putType'] = ele.useNum
|
||
// arr[5]['sj2'] = ele.putNum
|
||
// arr[7]['sj2'] = ele.useNum
|
||
} else if (ele.classType === 3 && ele.code == 'sj1+sj2') {
|
||
arr[9]['putType'] = ele.putNum
|
||
arr[11]['putType'] = ele.useNum
|
||
// arr[9]['sj2'] = ele.putNum
|
||
// arr[11]['sj2'] = ele.useNum
|
||
}
|
||
this.codeList.forEach((item) => {
|
||
if (ele.classType === 1 && ele.code == item) {
|
||
// console.log(arr[0][item])
|
||
arr[0][item] = ele.putNum
|
||
arr[2][item] = ele.useNum
|
||
} else if (ele.classType === 2 && ele.code == item) {
|
||
arr[4][item] = ele.putNum
|
||
arr[6][item] = ele.useNum
|
||
} else if (ele.classType === 3 && ele.code == item) {
|
||
arr[8][item] = ele.putNum
|
||
arr[10][item] = ele.useNum
|
||
}
|
||
})
|
||
})
|
||
// console.log(arr)
|
||
this.tableData = arr
|
||
console.log(this.tableData);
|
||
this.dataListLoading = false;
|
||
});
|
||
},
|
||
buttonClick(val) {
|
||
switch (val.btnName) {
|
||
case 'search':
|
||
this.listQuery.startTime = val.checkTime ? val.checkTime[0] : undefined;
|
||
this.listQuery.endTime = val.checkTime ? val.checkTime[1] : undefined;
|
||
this.getDataList();
|
||
break;
|
||
case 'export':
|
||
this.handleExport();
|
||
break;
|
||
default:
|
||
console.log(val);
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
::v-deep.baseTable .el-table__body tr.current-row>td.el-table__cell {
|
||
background-color: #EAF1FC;
|
||
}
|
||
|
||
::v-deep .baseTable .el-table .el-table__cell {
|
||
padding: 0;
|
||
height: 35px;
|
||
}
|
||
::v-deep.el-table thead.is-group th {
|
||
background: none;
|
||
}
|
||
|
||
/* ::v-deep.el-table thead.is-group tr:first-of-type th:first-of-type {
|
||
border-bottom: none;
|
||
} */
|
||
::v-deep.el-table thead.is-group tr:nth-child(2) th:nth-child(1) {
|
||
border-bottom: none;
|
||
}
|
||
::v-deep.el-table thead.is-group tr:nth-child(2) th:first-of-type:before {
|
||
content: '';
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 75px;
|
||
/*这里需要自己调整，根据td的宽度和高度*/
|
||
top: 0;
|
||
left: 0;
|
||
background-color: grey;
|
||
opacity: 0.3;
|
||
display: block;
|
||
transform: rotate(-53deg);
|
||
/*这里需要自己调整，根据线的位置*/
|
||
transform-origin: top;
|
||
}
|
||
|
||
::v-deep.el-table thead.is-group tr:nth-child(3) th:first-of-type:before {
|
||
content: '';
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 75px;
|
||
/*这里需要自己调整，根据td的宽度和高度*/
|
||
bottom: 0;
|
||
right: 0;
|
||
background-color: grey;
|
||
opacity: 0.3;
|
||
display: block;
|
||
transform: rotate(-54deg);
|
||
/*这里需要自己调整，根据线的位置*/
|
||
transform-origin: bottom;
|
||
}
|
||
</style>
|