561 lines
16 KiB
Vue
561 lines
16 KiB
Vue
<template>
|
|
<div class="finalInspectionData">
|
|
<el-row class="box-top">
|
|
<el-col>
|
|
<div class="search-box">
|
|
<search-bar
|
|
:formConfigs="formConfig"
|
|
ref="searchBarForm"
|
|
@headBtnClick="buttonClick"
|
|
@select-changed="selectChanged"
|
|
/>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<div class="box">
|
|
<split-pane v-model="split1">
|
|
<template #left>
|
|
<div class="split-pane 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>
|
|
</template>
|
|
<template #right>
|
|
<div class="split-pane right-box">
|
|
<div class="inner-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 class="table-box" v-if="reportTitle === '终检下片包装'">
|
|
<glass-pack-report
|
|
:tableData1="packClaReportArr"
|
|
:tableData2="packReportArr"
|
|
/>
|
|
</div>
|
|
<div class="table-box" v-if="reportTitle === '玻璃判废统计表'">
|
|
<glass-waste-report :tableData="wasteReportArr" />
|
|
</div>
|
|
<div class="table-box" v-if="reportTitle === '判废机组统计表'">
|
|
<waste-machine-report :tableData="wasteMachineArr" />
|
|
</div>
|
|
<div class="table-box" v-if="reportTitle === '判废位置统计表'">
|
|
<waste-location-report :tableData="wasteLocationArr" />
|
|
</div>
|
|
<div class="table-box" v-if="reportTitle === '玻璃基板缺陷报表'">
|
|
<glass-defect-report :tableData="glassDefectArr" />
|
|
</div>
|
|
<div class="table-box" v-if="reportTitle === '厚度检查机报表'">
|
|
<thickness-report :tableData="glassDefectArr" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</split-pane>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { tableHeight } from '@/utils/index'
|
|
import {
|
|
listGlass,
|
|
qualityReport,
|
|
thickReport,
|
|
qualityReportexport,
|
|
thickReportexport,
|
|
queryGlassData,
|
|
claGlassData,
|
|
getGlassVoid,
|
|
getUnitVoid
|
|
} from '@/api/reportManagement'
|
|
import glassQualityReport from './finalInspectionDataReport/glassQualityReport.vue'
|
|
import glassThickReport from './finalInspectionDataReport/glassThickReport.vue'
|
|
import glassPackReport from './finalInspectionDataReport/glassPackReport.vue'
|
|
import glassWasteReport from './finalInspectionDataReport/glassWasteReport.vue'
|
|
import wasteMachineReport from './finalInspectionDataReport/wasteMachineReport.vue'
|
|
import wasteLocationReport from './finalInspectionDataReport/wasteLocationReport.vue'
|
|
import glassDefectReport from './finalInspectionDataReport/glassDefectReport.vue'
|
|
import thicknessReport from './finalInspectionDataReport/thicknessReport.vue'
|
|
import moment from 'moment'
|
|
import { timeFormatter } from '@/utils'
|
|
const tablePropsL = [
|
|
{
|
|
prop: 'glassId',
|
|
label: 'ID',
|
|
minWidth: 120
|
|
},
|
|
{
|
|
prop: 'unloadTime',
|
|
label: '检测时间',
|
|
minWidth: 160,
|
|
filter: timeFormatter
|
|
},
|
|
{
|
|
prop: 'grindtype',
|
|
label: '研磨类型',
|
|
minWidth: 80
|
|
},
|
|
{
|
|
prop: 'rackId',
|
|
label: '玻璃架',
|
|
minWidth: 80
|
|
},
|
|
{
|
|
prop: 'glassNum',
|
|
label: '数量',
|
|
minWidth: 80
|
|
}
|
|
]
|
|
export default {
|
|
name: 'FinalInspectionData',
|
|
components: {
|
|
glassQualityReport,
|
|
glassThickReport,
|
|
glassPackReport,
|
|
glassWasteReport,
|
|
wasteMachineReport,
|
|
wasteLocationReport,
|
|
glassDefectReport,
|
|
thicknessReport
|
|
},
|
|
data() {
|
|
return {
|
|
split1: 0.3,
|
|
formConfig: [
|
|
{
|
|
type: 'select',
|
|
label: '报表类型',
|
|
selectOptions: [
|
|
{ id: '玻璃基板品质报表', name: '玻璃基板品质报表' },
|
|
{ id: '终检下片包装', name: '终检下片包装' },
|
|
{ id: '厚度汇总报表', name: '厚度汇总报表' },
|
|
{ id: '玻璃判废统计表', name: '玻璃判废统计表' },
|
|
{ id: '判废机组统计表', name: '判废机组统计表' },
|
|
{ id: '判废位置统计表', name: '判废位置统计表' },
|
|
{ id: '玻璃基板缺陷报表', name: '玻璃基板缺陷报表' },
|
|
{ id: '厚度检查机报表', name: '厚度检查机报表' }
|
|
],
|
|
param: 'fullInspectionType',
|
|
defaultSelect: '',
|
|
onchange: true,
|
|
width: 150
|
|
},
|
|
{
|
|
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: '',
|
|
label: '',
|
|
selectOptions: [
|
|
{ id: '1', name: '1' },
|
|
{ id: '2', name: '2' },
|
|
{ id: '3', name: '3' },
|
|
{ id: '4', name: '4' },
|
|
{ id: '5', name: '5' },
|
|
{ id: '6', name: '6' },
|
|
{ id: '全部', name: '全部' }
|
|
],
|
|
param: 'glassFrame1',
|
|
defaultSelect: '全部',
|
|
width: 150,
|
|
clearable: false
|
|
},
|
|
{
|
|
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: '',
|
|
endTime: '',
|
|
glassFrame: '',
|
|
current: 1,
|
|
size: 500
|
|
},
|
|
selectArr: [], // 表格选中的数据
|
|
glassQualityArr: [], //基板玻璃品质
|
|
thickReportArr: [], // 厚度汇总
|
|
packReportArr: [], //下片包装
|
|
packClaReportArr: [],
|
|
wasteReportArr: [{ name1: 11 }, { name1: 22 }], // 玻璃判废
|
|
wasteMachineArr: [],
|
|
wasteLocationArr: [
|
|
{ name: '颗粒/面检数超标', dd1: '11', dd2: '0' },
|
|
{ name: '颗粒/缺陷聚集', name1: '22' },
|
|
{ name: '划伤', name1: '33' },
|
|
{ name: '面磨印记', name1: '44' },
|
|
{ name: '磨痕', name1: '55' }
|
|
],
|
|
glassDefectArr: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getOption()
|
|
window.addEventListener('resize', () => {
|
|
this.tableHL = tableHeight(300)
|
|
})
|
|
this.formConfig[1].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[2].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 = []
|
|
this.packReportArr = []
|
|
this.packClaReportArr = []
|
|
this.wasteReportArr = []
|
|
this.wasteMachineArr = []
|
|
console.log(val)
|
|
if (val.value === '判废位置统计表') {
|
|
this.formConfig[3].type = 'select'
|
|
this.formConfig[3].label = '研磨类型'
|
|
} else {
|
|
this.formConfig[3].type = ''
|
|
this.formConfig[3].label = ''
|
|
}
|
|
this.formConfig[1].defaultSelect =
|
|
this.$refs.searchBarForm.formInline.timeVal
|
|
this.formConfig[2].defaultSelect =
|
|
this.$refs.searchBarForm.formInline.glassFrame
|
|
},
|
|
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
|
|
case '终检下片包装':
|
|
this.getGlassData(arr)
|
|
break
|
|
case '玻璃判废统计表':
|
|
this.getWasteData(arr)
|
|
break
|
|
case '判废机组统计表':
|
|
this.getWasteMachineData(arr)
|
|
break
|
|
default:
|
|
console.log('111')
|
|
}
|
|
},
|
|
// 玻璃基板品质报表
|
|
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)
|
|
}
|
|
})
|
|
},
|
|
// 终检下片包装
|
|
getGlassData(arr) {
|
|
queryGlassData({
|
|
glassId: arr
|
|
}).then((res) => {
|
|
console.log(res)
|
|
this.packReportArr = res.data
|
|
})
|
|
claGlassData({
|
|
glassId: arr
|
|
}).then((res) => {
|
|
console.log(res)
|
|
this.packClaReportArr = res.data
|
|
})
|
|
},
|
|
// 玻璃判废统计表
|
|
getWasteData(arr) {
|
|
getGlassVoid({
|
|
size: 1000,
|
|
current: 1,
|
|
glassId: arr
|
|
}).then((res) => {
|
|
console.log(res)
|
|
this.wasteReportArr = res.data
|
|
})
|
|
},
|
|
// 判废机组统计表
|
|
getWasteMachineData(arr) {
|
|
getUnitVoid({
|
|
size: 1000,
|
|
current: 1,
|
|
glassId: arr
|
|
}).then((res) => {
|
|
console.log(res)
|
|
this.wasteMachineArr = res.data
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</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 {
|
|
height: calc(100vh - 215px);
|
|
margin: 8px 16px 0 16px;
|
|
.split-pane {
|
|
height: 100%;
|
|
border-radius: 8px;
|
|
}
|
|
.left-box {
|
|
padding: 16px;
|
|
background-color: #fff;
|
|
.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 {
|
|
.inner-box {
|
|
height: 100%;
|
|
margin-left: 16px;
|
|
padding: 16px 16px 0;
|
|
border-radius: 8px;
|
|
overflow: auto;
|
|
background-color: #fff;
|
|
.table-box {
|
|
margin-top: 16px;
|
|
height: calc(100vh - 290px);
|
|
overflow: auto;
|
|
}
|
|
}
|
|
.title::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 4px;
|
|
height: 16px;
|
|
background: #0b58ff;
|
|
border-radius: 1px;
|
|
margin-right: 8px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|