398 lines
10 KiB
Vue
398 lines
10 KiB
Vue
<template>
|
|
<div class="finalInspectionData">
|
|
<el-row class="box-top">
|
|
<el-col>
|
|
<div class="search-box">
|
|
<search-bar
|
|
:formConfigs="formConfig"
|
|
@headBtnClick="buttonClick"
|
|
@select-changed="selectChanged"
|
|
/>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="8" class="box">
|
|
<el-col :span="9">
|
|
<div class="left-box">
|
|
<span class="table-button" @click="generateReport">生成表格</span>
|
|
<base-table
|
|
:selectWidth="40"
|
|
:table-props="tablePropsL"
|
|
:table-data="tableDataL"
|
|
:max-height="tableHL"
|
|
@selection-change="selectChange"
|
|
/>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="15">
|
|
<div class="right-box">
|
|
<div v-if="reportTitle">
|
|
<span class="title">{{ reportTitle }}</span>
|
|
</div>
|
|
<div class="table-box" v-if="reportTitle === '单片玻璃基板缺陷统计'">
|
|
<glass-quality-report :tableData="glassQualityArr" />
|
|
</div>
|
|
<div class="table-box" v-if="reportTitle === '厚度汇总报表'">
|
|
<glass-thick-report :tableData="thickReportArr" />
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { tableHeight } from '@/utils/index'
|
|
import {
|
|
listGlass,
|
|
qualityReport,
|
|
thickReport,
|
|
qualityReportexport,
|
|
thickReportexport
|
|
} from '@/api/qualityManagement'
|
|
import glassQualityReport from './finalInspectionDataReport/glassQualityReport.vue'
|
|
import glassThickReport from './finalInspectionDataReport/glassThickReport.vue'
|
|
import moment from 'moment'
|
|
import { timeFormatter } from '@/utils'
|
|
const tablePropsL = [
|
|
{
|
|
prop: 'glassId',
|
|
label: 'ID',
|
|
minWidth: 100
|
|
},
|
|
{
|
|
prop: 'unloadTime',
|
|
label: '检测时间',
|
|
minWidth: 120,
|
|
filter: timeFormatter
|
|
},
|
|
{
|
|
prop: 'grindtype',
|
|
label: '研磨类型',
|
|
minWidth: 80
|
|
}
|
|
]
|
|
export default {
|
|
name: 'FinalInspectionData',
|
|
components: { glassQualityReport, glassThickReport },
|
|
data() {
|
|
return {
|
|
formConfig: [
|
|
{
|
|
type: 'datePicker',
|
|
label: '检验时间',
|
|
dateType: 'datetimerange',
|
|
format: 'yyyy-MM-dd HH:mm:ss',
|
|
valueFormat: 'yyyy-MM-ddTHH:mm:ss',
|
|
rangeSeparator: '-',
|
|
startPlaceholder: '开始时间',
|
|
endPlaceholder: '结束时间',
|
|
param: 'timeVal',
|
|
defaultSelect: [],
|
|
width: 350
|
|
},
|
|
{
|
|
type: 'select',
|
|
label: '玻璃架',
|
|
selectOptions: [],
|
|
param: 'glassFrame',
|
|
defaultSelect: '全部',
|
|
width: 150,
|
|
clearable: false
|
|
},
|
|
{
|
|
type: 'select',
|
|
label: '报表类型',
|
|
selectOptions: [
|
|
{ id: '单片玻璃基板缺陷统计', name: '单片玻璃基板缺陷统计' },
|
|
{ id: '终检下片包装', name: '终检下片包装' },
|
|
{ id: '厚度汇总报表', name: '厚度汇总报表' }
|
|
],
|
|
param: 'fullInspectionType1',
|
|
defaultSelect: '',
|
|
onchange: true,
|
|
width: 150
|
|
},
|
|
{
|
|
type: 'button',
|
|
btnName: '查询',
|
|
name: 'search',
|
|
color: 'primary'
|
|
},
|
|
{
|
|
type: 'separate'
|
|
},
|
|
{
|
|
type: 'button',
|
|
btnName: '导出',
|
|
name: 'export',
|
|
color: 'primary',
|
|
plain: true
|
|
}
|
|
],
|
|
tablePropsL,
|
|
tableDataL: [],
|
|
tableHL: tableHeight(300),
|
|
reportTitle: '',
|
|
listQuery: {
|
|
startTime: '2020-07-06T16:59:23',
|
|
endTime: '2023-07-06T16:59:23',
|
|
glassFrame: '',
|
|
current: 1,
|
|
size: 500
|
|
},
|
|
selectArr: [], // 表格选中的数据
|
|
glassQualityArr: [], //基板玻璃品质
|
|
thickReportArr: [] // 厚度汇总
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getOption()
|
|
window.addEventListener('resize', () => {
|
|
this.tableHL = tableHeight(300)
|
|
})
|
|
this.formConfig[0].defaultSelect = [
|
|
moment().format('yyyy-MM-DD') + 'T00:00:00',
|
|
moment().format('yyyy-MM-DD') + 'T23:59:59'
|
|
]
|
|
this.listQuery.startTime = moment().format('yyyy-MM-DD') + 'T00:00:00'
|
|
this.listQuery.endTime = moment().format('yyyy-MM-DD') + 'T23:59:59'
|
|
this.listQuery.glassFrame = '全部'
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
getList() {
|
|
listGlass({ ...this.listQuery }).then((res) => {
|
|
if (res.code === 0) {
|
|
this.tableDataL = res.data
|
|
} else {
|
|
this.tableDataL = []
|
|
}
|
|
})
|
|
},
|
|
getOption() {
|
|
let arr = JSON.parse(
|
|
localStorage.getItem('publicList')
|
|
).glassRackStationVoList
|
|
let newArr = arr.map((item) => ({
|
|
id: item.dataName,
|
|
name: item.dataName
|
|
}))
|
|
newArr.push({ id: '全部', name: '全部' }, { id: '废片', name: '废片' })
|
|
this.formConfig[1].selectOptions = newArr
|
|
console.log(newArr)
|
|
},
|
|
buttonClick(val) {
|
|
let arr = []
|
|
switch (val.btnName) {
|
|
case 'search':
|
|
this.listQuery.startTime = val.timeVal ? val.timeVal[0] : ''
|
|
this.listQuery.endTime = val.timeVal ? val.timeVal[1] : ''
|
|
this.listQuery.glassFrame = val.glassFrame
|
|
this.getList()
|
|
break
|
|
default:
|
|
if (this.selectArr.length === 0) {
|
|
this.$message({
|
|
message: '请勾选左侧表格数据',
|
|
type: 'warning'
|
|
})
|
|
return false
|
|
}
|
|
if (this.reportTitle === '') {
|
|
this.$message({
|
|
message: '请选择报表类型',
|
|
type: 'warning'
|
|
})
|
|
return false
|
|
}
|
|
console.log(this.selectArr)
|
|
for (let i of this.selectArr) {
|
|
arr.push(i.glassId)
|
|
}
|
|
if (this.reportTitle === '单片玻璃基板缺陷统计') {
|
|
this.exportGlassReport(arr)
|
|
} else if (this.reportTitle === '厚度汇总报表') {
|
|
this.exportThickReport(arr)
|
|
}
|
|
}
|
|
},
|
|
selectChanged(val) {
|
|
this.reportTitle = val.value
|
|
this.glassQualityArr = []
|
|
this.thickReportArr = []
|
|
},
|
|
selectChange(val) {
|
|
this.selectArr = val
|
|
},
|
|
// 生成报表
|
|
generateReport() {
|
|
if (this.selectArr.length === 0) {
|
|
this.$message({
|
|
message: '请勾选左侧表格数据',
|
|
type: 'warning'
|
|
})
|
|
return false
|
|
}
|
|
if (this.reportTitle === '') {
|
|
this.$message({
|
|
message: '请选择报表类型',
|
|
type: 'warning'
|
|
})
|
|
return false
|
|
}
|
|
let arr = []
|
|
for (let i of this.selectArr) {
|
|
arr.push(i.glassId)
|
|
}
|
|
switch (this.reportTitle) {
|
|
case '单片玻璃基板缺陷统计':
|
|
this.getGlassReport(arr)
|
|
break
|
|
case '厚度汇总报表':
|
|
this.getThickReport(arr)
|
|
break
|
|
default:
|
|
}
|
|
},
|
|
getGlassReport(arr) {
|
|
qualityReport({
|
|
// glassId: [122206240688, 122206240692],
|
|
glassId: arr,
|
|
size: 1000,
|
|
current: 1
|
|
}).then((res) => {
|
|
console.log(res)
|
|
this.glassQualityArr = res.data
|
|
})
|
|
},
|
|
exportGlassReport(arr) {
|
|
qualityReportexport({
|
|
glassId: arr,
|
|
size: 1000,
|
|
current: 1
|
|
}).then((response) => {
|
|
console.log(response)
|
|
let fileName = ''
|
|
const contentDisposition = response.headers['content-disposition']
|
|
if (contentDisposition) {
|
|
fileName = decodeURIComponent(
|
|
contentDisposition.slice(
|
|
contentDisposition.indexOf('filename=') + 9
|
|
)
|
|
)
|
|
}
|
|
const blob = new Blob([response.data])
|
|
const reader = new FileReader()
|
|
reader.readAsDataURL(blob)
|
|
reader.onload = (e) => {
|
|
const a = document.createElement('a')
|
|
a.download = fileName
|
|
a.href = e.target.result
|
|
document.body.appendChild(a)
|
|
a.click()
|
|
document.body.removeChild(a)
|
|
}
|
|
})
|
|
},
|
|
getThickReport(arr) {
|
|
thickReport({
|
|
glassId: arr,
|
|
size: 1000,
|
|
current: 1
|
|
}).then((res) => {
|
|
console.log(res)
|
|
this.thickReportArr = res.data
|
|
})
|
|
},
|
|
exportThickReport(arr) {
|
|
thickReportexport({
|
|
glassId: arr,
|
|
size: 1000,
|
|
current: 1
|
|
}).then((response) => {
|
|
console.log(response)
|
|
let fileName = ''
|
|
const contentDisposition = response.headers['content-disposition']
|
|
if (contentDisposition) {
|
|
fileName = decodeURIComponent(
|
|
contentDisposition.slice(
|
|
contentDisposition.indexOf('filename=') + 9
|
|
)
|
|
)
|
|
}
|
|
const blob = new Blob([response.data])
|
|
const reader = new FileReader()
|
|
reader.readAsDataURL(blob)
|
|
reader.onload = (e) => {
|
|
const a = document.createElement('a')
|
|
a.download = fileName
|
|
a.href = e.target.result
|
|
document.body.appendChild(a)
|
|
a.click()
|
|
document.body.removeChild(a)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.finalInspectionData {
|
|
width: 100%;
|
|
.box-top {
|
|
width: 100%;
|
|
padding: 8px 16px 0;
|
|
.search-box {
|
|
height: 62px;
|
|
padding: 10px 16px;
|
|
box-sizing: border-box;
|
|
border-radius: 8px;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
.box {
|
|
width: 100%;
|
|
padding: 8px 8px 0 16px;
|
|
.left-box,
|
|
.right-box {
|
|
height: calc(100vh - 220px);
|
|
padding: 16px;
|
|
border-radius: 8px;
|
|
background-color: #fff;
|
|
.table-box {
|
|
margin-top: 16px;
|
|
height: calc(100vh - 290px);
|
|
overflow: auto;
|
|
}
|
|
}
|
|
.left-box {
|
|
.table-button {
|
|
display: inline-block;
|
|
height: 30px;
|
|
width: 100%;
|
|
text-align: center;
|
|
padding-top: 4px;
|
|
margin-bottom: 16px;
|
|
font-size: 14px;
|
|
color: #0b58ff;
|
|
border-radius: 4px;
|
|
border: 1px dotted #0b58ff;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.right-box {
|
|
.title::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 4px;
|
|
height: 16px;
|
|
background: #0b58ff;
|
|
border-radius: 1px;
|
|
margin-right: 8px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|