465 lines
13 KiB
Vue
465 lines
13 KiB
Vue
<!--
|
||
* @Author: zhp
|
||
* @Date: 2024-04-18 14:08:46
|
||
* @LastEditTime: 2024-04-25 13:30:11
|
||
* @LastEditors: zhp
|
||
* @Description:
|
||
-->
|
||
<template>
|
||
<div class="app-container">
|
||
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
|
||
<el-form-item label="时间" prop="startTime">
|
||
<el-date-picker v-model="listQuery.startTime" value-format="yyyy-MM-dd HH:mm:ss" type="date" placeholder="选择日期">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="产线" prop="productionLineId">
|
||
<el-select v-model="listQuery.productionLineId" placeholder="请选择">
|
||
<el-option v-for="item in lineList" :key="item.id" :label="item.name" :value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="" prop="">
|
||
<el-radio-group v-model="radio" @input="handleGetClass">
|
||
<el-radio-button label="早班查询"></el-radio-button>
|
||
<el-radio-button label="晚班查询"></el-radio-button>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
|
||
<el-form-item>
|
||
<el-button type="primary" size="small" @click="getDataList">查询</el-button>
|
||
<el-button type="primary" size="small" plain @click="handleExport">导出</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<!-- <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 :header-cell-style="{
|
||
background: '#F2F4F9',
|
||
color: '#606266'
|
||
}" class=" baseTable" :data="tableData" style="width: 100%">
|
||
<el-table-column label="时间" align="right" width="150">
|
||
<el-table-column prop="name" label="缺陷" width="120">
|
||
</el-table-column>
|
||
</el-table-column>
|
||
<!-- <el-table-column 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 v-for="(item, index) in codeList " :prop="item.prop" :label="item.label">
|
||
</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 {
|
||
getQualityRecordReport,
|
||
getCWSectionList
|
||
} 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: getQualityRecordReport,
|
||
// deleteURL: deleteQualityHotMaterial,
|
||
// exportURL: exportFactoryExcel,
|
||
},
|
||
listQuery: {
|
||
startTime: null,
|
||
productionLineId:null,
|
||
},
|
||
sum:null,
|
||
radio:'晚班查询',
|
||
lineList:[],
|
||
codeList: [
|
||
// {
|
||
// label: '19:00',
|
||
// prop: 'num0'
|
||
|
||
// },
|
||
// {
|
||
// label: '20:00',
|
||
// prop: 'num1'
|
||
// },
|
||
// {
|
||
// label: '21:00',
|
||
// prop: 'num2'
|
||
// },
|
||
// {
|
||
// label: '22:00',
|
||
// prop: 'num3'
|
||
// },
|
||
// {
|
||
// label: '23:00',
|
||
// prop: 'num4'
|
||
// },
|
||
// {
|
||
// label: '00:00',
|
||
// prop: 'num5'
|
||
// },
|
||
// {
|
||
// label: '01:00',
|
||
// prop: 'num6'
|
||
// },
|
||
// {
|
||
// label: '02:00',
|
||
// prop: 'num7'
|
||
// },
|
||
// {
|
||
// label: '03:00',
|
||
// prop: 'num8'
|
||
// },
|
||
// {
|
||
// label: '04:00',
|
||
// prop: 'num9'
|
||
// },
|
||
// {
|
||
// label: '05:00',
|
||
// prop: 'num10'
|
||
// },
|
||
// {
|
||
// label: '06:00',
|
||
// prop: 'num11'
|
||
// },
|
||
// {
|
||
// label: '不良合计',
|
||
// prop: 'sum'
|
||
// }
|
||
],
|
||
tableData: [],
|
||
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.listQuery.startTime = new Date()
|
||
this.getDataList()
|
||
this.getDict()
|
||
// this.getSpanArr(this.tableData)
|
||
// this.getDict();
|
||
},
|
||
methods: {
|
||
async getDict() {
|
||
const res = await getCWSectionList()
|
||
console.log(res)
|
||
this.lineList = res.data
|
||
},
|
||
// objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
||
// if (columnIndex === 1) {
|
||
// if (rowIndex === this.tableData.length-1) {
|
||
// return {
|
||
// rowspan: 1,
|
||
// colspan: 4
|
||
// }
|
||
// }
|
||
// }
|
||
// },
|
||
formatDateTime(time) {
|
||
var date = new Date(time);
|
||
var y = date.getFullYear();
|
||
var m = date.getMonth() + 1;
|
||
m = m < 10 ? ('0' + m) : m;
|
||
var d = date.getDate();
|
||
d = d < 10 ? ('0' + d) : d;
|
||
var h = date.getHours();
|
||
h = h < 10 ? ('0' + h) : h;
|
||
var minute = date.getMinutes();
|
||
var second = date.getSeconds();
|
||
minute = minute < 10 ? ('0' + minute) : minute;
|
||
second = second < 10 ? ('0' + second) : second;
|
||
|
||
return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
|
||
},
|
||
handleGetClass(e) {
|
||
this.getDataList()
|
||
},
|
||
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() {
|
||
var str = null
|
||
if (this.radio == '晚班查询') {
|
||
console.log(this.radio);
|
||
str = new Date(new Date(this.listQuery.startTime).setHours(19, 0, 0, 0)).getTime()
|
||
} else {
|
||
str = new Date(new Date(this.listQuery.startTime).setHours(7, 0, 0, 0)).getTime()
|
||
}
|
||
// this.dataListLoading = true;
|
||
// this.listQuery.startTime = '1713197388000';
|
||
// this.listQuery.endTime = '1713254961000';
|
||
this.urlOptions.getDataListURL({
|
||
// productionLineId: '1696716506443354114',
|
||
// startTime: '1705618800000',
|
||
productionLineId: this.listQuery.productionLineId,
|
||
startTime: str
|
||
},).then(res => {
|
||
let count = 0
|
||
let arr = []
|
||
console.log(res.data)
|
||
|
||
res.data.timeStrList.push('不良合计')
|
||
this.codeList = res.data.timeStrList.map((ele, index) => {
|
||
if (ele === '不良合计') {
|
||
return {
|
||
label: ele,
|
||
prop: 'sum'
|
||
}
|
||
} else {
|
||
return {
|
||
label: ele,
|
||
prop: 'num' + index
|
||
}
|
||
}
|
||
|
||
})
|
||
console.log(this.codeList)
|
||
// res.data.timeStrList.forEach((ele, index) => [
|
||
// this.codeList.push(ele)
|
||
// ])
|
||
for (let i in res.data.qualityInspectionRecordReportLineVOMap) {
|
||
count ++,
|
||
console.log(res.data.qualityInspectionRecordReportLineVOMap[i])
|
||
// arr.push({
|
||
|
||
// })
|
||
// console.log(arr)
|
||
let obj = {
|
||
name: res.data.qualityInspectionRecordReportLineVOMap[i].content,
|
||
sum: res.data.qualityInspectionRecordReportLineVOMap[i].sum,
|
||
}
|
||
res.data.qualityInspectionRecordReportLineVOMap[i].nums.forEach((ele, index) => {
|
||
obj['num' +index] = ele
|
||
// console.log(arr[count])
|
||
// arr[count]['num'+index] = ele
|
||
})
|
||
arr.push(obj)
|
||
}
|
||
console.log(arr);
|
||
this.tableData = arr
|
||
this.tableData.push({
|
||
name: '检验员',
|
||
num11: '合计',
|
||
sum: res.data.allSum
|
||
})
|
||
});
|
||
},
|
||
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:first-of-type 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:last-of-type 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>
|