mt-fe-group/tft-fe
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

增加报表管理模块

Browse Source
This commit is contained in:
朱菊兰
2023-05-30 09:00:50 +08:00
parent 2ae3d3f3e7
commit de0a6c45e0
93 changed files with 950 additions and 1070 deletions
Download Patch File Download Diff File Expand all files Collapse all files

426
src/views/qualityManagement/finalInspectionData.vue
View File

@@ -1,426 +0,0 @@
<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 class="table-box" v-if="reportTitle === '终检下片包装'">
<glass-pack-report
:tableData1="packClaReportArr"
:tableData2="packReportArr"
/>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import { tableHeight } from '@/utils/index'
import {
listGlass,
qualityReport,
thickReport,
qualityReportexport,
thickReportexport,
queryGlassData,
claGlassData
} from '@/api/qualityManagement'
import glassQualityReport from './finalInspectionDataReport/glassQualityReport.vue'
import glassThickReport from './finalInspectionDataReport/glassThickReport.vue'
import glassPackReport from './finalInspectionDataReport/glassPackReport.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, glassPackReport },
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: '',
endTime: '',
glassFrame: '',
current: 1,
size: 500
},
selectArr: [], // 表格选中的数据
glassQualityArr: [], //基板玻璃品质
thickReportArr: [], // 厚度汇总
packReportArr: [], //下片包装
packClaReportArr: []
}
},
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 = []
this.packReportArr = []
this.packClaReportArr = []
},
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:
this.getGlassData(arr)
}
},
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
})
}
}
}
</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>

229
src/views/qualityManagement/finalInspectionDataReport/finalInspectionData.vue
View File

@@ -1,229 +0,0 @@
<template>
<div class="finalInspectionData">
<el-row class="box-top">
<el-col>
<div class="search-box">
<search-bar :formConfigs="formConfig" @headBtnClick="buttonClick" />
</div>
</el-col>
</el-row>
<el-row :gutter="8" class="box">
<el-col :span="9">
<div class="left-box">
<span class="table-button">生成表格</span>
<base-table
:selectWidth="40"
:table-props="tablePropsL"
:table-data="tableDataL"
:max-height="tableHL"
/>
</div>
</el-col>
<el-col :span="15">
<div class="right-box">
<div>
<span class="title">成品玻璃基本缺陷统计</span>
</div>
<ul class="tip">
<li>单位：um</li>
<li>玻璃ID：26522322323</li>
<li>生产日期：2022.12.24 15:56:24</li>
<li>等级：G1</li>
</ul>
<div class="table-box">
<final-data-table />
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import { tableHeight } from '@/utils/index'
import finalDataTable from './components/finalDataTable'
const tablePropsL = [
{
prop: 'id',
label: 'ID',
minWidth: 100
},
{
prop: 'time',
label: '检测时间',
minWidth: 100
},
{
prop: 'type',
label: '研磨类型',
minWidth: 100
}
]
export default {
name: 'FinalInspectionData',
components: { finalDataTable },
data() {
return {
formConfig: [
{
type: 'datePicker',
label: '检验时间',
dateType: 'datetime',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
placeholder: '检验时间',
param: 'testTime',
width: 200
},
{
type: 'select',
label: '玻璃架',
selectOptions: [
{ id: '1', name: '521321545' },
{ id: '2', name: '932234561' },
{ id: '3', name: '542121212' },
{ id: '4', name: '354855321' }
],
param: 'fullInspectionType',
defaultSelect: '',
width: 150
},
{
type: 'select',
label: '报表类型',
selectOptions: [
{ id: '1', name: '单片玻璃基板缺陷统计' },
{ id: '2', name: '终检下片包装' },
{ id: '3', name: '厚度检查机报表' },
{ id: '4', name: '厚度汇总报表' }
],
param: 'fullInspectionType1',
defaultSelect: '',
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)
}
},
mounted() {
window.addEventListener('resize', () => {
this.tableHL = tableHeight(300)
})
this.getList()
},
methods: {
buttonClick(val) {
switch (val.btnName) {
case 'search':
this.getList()
break
default:
alert('导出')
}
},
getList() {
let arr = []
for (let i = 0; i < 30; i++) {
let obj = {}
obj.type = i
arr.push(obj)
}
this.tableDataL = arr
}
}
}
</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 {
height: calc(100vh - 352px);
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;
}
.tip {
display: flex;
flex-flow: row wrap;
height: 40px;
margin: 16px 0 20px;
li {
width: 25%;
font-size: 14px;
font-weight: 500;
text-align: center;
padding-top: 10px;
border-top: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
border-left: 1px solid #e8e8e8;
}
:last-child {
border-right: 1px solid #e8e8e8;
}
}
}
}
}
</style>

298
src/views/qualityManagement/finalInspectionDataReport/glassPackReport.vue
View File

@@ -1,298 +0,0 @@
<template>
<div>
<base-table
:table-props="tableProps1"
:table-data="tableData1"
:max-height="tableH"
/>
<base-table
:table-props="tableProps2"
:table-data="tableData2"
:max-height="tableH"
/>
</div>
</template>
<script>
import { timeFormatter, tableHeight } from '@/utils'
const tableProps1 = [
{
prop: 'grindType',
label: '研磨类型',
minWidth: 120
},
{
prop: 'glassNum',
label: '数量',
minWidth: 160
},
{
prop: 'surfaceAvg',
label: '颗粒均值',
minWidth: 120
},
{
prop: 'surfaceMin',
label: '最小值',
minWidth: 120
},
{
prop: 'surfaceMax',
label: '最大值',
minWidth: 120
},
{
prop: 'savg',
label: 'S均值<1um',
minWidth: 120
},
{
prop: 'mavg',
label: 'M均值1-3um',
minWidth: 120
},
{
prop: 'lavg',
label: 'L均值3-5um',
minWidth: 120
},
{
prop: 'xlAvg',
label: 'XL均值5-10um',
minWidth: 120
},
{
prop: 'defectAvg',
label: '缺陷均值',
minWidth: 120
},
{
prop: 'defectMin',
label: '最小值',
minWidth: 120
},
{
prop: 'defectMax',
label: '最大值',
minWidth: 120
},
{
prop: 'blAvg',
label: '气泡均值',
minWidth: 120
},
{
prop: 'distortionAvg',
label: '变形均值',
minWidth: 120
},
{
prop: 'fiberAvg',
label: '纤维均值',
minWidth: 120
},
{
prop: 'iisrestAvg',
label: '无法识别均值',
minWidth: 120
},
{
prop: 'knotAvg',
label: '结节均值',
minWidth: 120
},
{
prop: 'ptAvg',
label: '铂金欠点均值',
minWidth: 120
},
{
prop: 'scratchAvg',
label: '划伤均值',
minWidth: 120
},
{
prop: 'stoneAvg',
label: '结石均值',
minWidth: 120
},
{
prop: 'tailAvg',
label: '拖尾均值',
minWidth: 120
},
{
prop: 'tinAvg',
label: '点状缺陷均值',
minWidth: 120
},
{
prop: 'bottomAvg',
label: '锡(锡面)均值',
minWidth: 120
},
{
prop: 'topAvg',
label: '锡(空气面)均值',
minWidth: 120
}
]
const tableProps2 = [
{
prop: 'glassId',
label: '玻璃ID',
minWidth: 120
},
{
prop: 'rackNum',
label: '包装架号',
minWidth: 120
},
{
prop: 'testTime',
label: '包装时间',
filter: timeFormatter,
minWidth: 160
},
{
prop: 'num',
label: '包装数量',
minWidth: 120
},
{
prop: 'particleSum',
label: '颗粒Sum',
minWidth: 120
},
{
prop: 's',
label: 'S<1um',
minWidth: 120
},
{
prop: 'm',
label: 'M1-3um',
minWidth: 120
},
{
prop: 'l',
label: 'L3-5um',
minWidth: 120
},
{
prop: 'xl',
label: 'XL5-10um',
minWidth: 120
},
{
prop: 'defectSum',
label: '缺陷Sum',
minWidth: 120
},
{
prop: 'bl',
label: '气泡',
minWidth: 120
},
{
prop: 'distortion',
label: '变形',
minWidth: 120
},
{
prop: 'fiber',
label: '纤维',
minWidth: 120
},
{
prop: 'iisrest',
label: '无法识别',
minWidth: 120
},
{
prop: 'knot',
label: '结节',
minWidth: 120
},
{
prop: 'pt',
label: '铂金欠点',
minWidth: 120
},
{
prop: 'scratch',
label: '划伤',
minWidth: 120
},
{
prop: 'stone',
label: '结石',
minWidth: 120
},
{
prop: 'tail',
label: '拖尾',
minWidth: 120
},
{
prop: 'tin',
label: '点状缺陷',
minWidth: 120
},
{
prop: 'bottom',
label: '锡(锡面)',
minWidth: 120
},
{
prop: 'top',
label: '锡(空气面)',
minWidth: 120
},
{
prop: 'adg',
label: 'ADG',
minWidth: 120
},
{
prop: 'allSum',
label: '合计',
minWidth: 120
},
{
prop: 'grindType',
label: '研磨类型',
minWidth: 120
}
]
export default {
name: 'glassPackReport',
data() {
return {
tableProps1,
tableProps2,
tableH: tableHeight(292)
}
},
mounted() {
window.addEventListener('resize', () => {
this.tableH = tableHeight(292)
})
},
props: {
tableData1: {
type: Array,
required: true,
default: () => {
return []
}
},
tableData2: {
type: Array,
required: true,
default: () => {
return []
}
}
}
}
</script>

146
src/views/qualityManagement/finalInspectionDataReport/glassQualityReport.vue
View File

@@ -1,146 +0,0 @@
<template>
<div>
<base-table
:table-props="tableProps"
:table-data="tableData"
:max-height="tableH"
/>
</div>
</template>
<script>
import { timeFormatter, tableHeight } from '@/utils'
const tableProps = [
{
prop: 'time',
label: '检测时间',
filter: timeFormatter,
minWidth: 160
},
{
prop: 'virtualcode',
label: '玻璃ID',
minWidth: 120
},
{
prop: 'lineA',
label: '加工条件',
children: [
{
prop: 'palletId',
label: '托盘ID'
},
{
prop: 'grindtype',
label: '研磨类型'
}
]
},
{
prop: 'lineB',
label: '检测数据',
children: [
{
prop: 'sums',
label: '颗粒总数'
},
{
prop: 'distortion',
label: '变形'
},
{
prop: 'tail',
label: '拖尾'
},
{
prop: 'bl',
label: '气泡'
},
{
prop: 'stone',
label: '结石'
},
{
prop: 'scratch',
label: '划伤'
},
{
prop: 'surfaceSum',
label: '面检总数'
}
]
},
{
prop: 'lineC',
label: '研磨电流(A)',
children: [
{
prop: 'ae',
label: 'A机台'
},
{
prop: 'be',
label: 'B机台'
},
{
prop: 'ce',
label: 'C机台'
},
{
prop: 'alle',
label: '总电流'
}
]
},
{
prop: 'eletricityConform',
label: '工艺符合性',
minWidth: 100
},
{
prop: 'lineD',
label: '研磨时间(S)',
children: [
{
prop: 'ae',
label: 'A机台'
},
{
prop: 'be',
label: 'B机台'
},
{
prop: 'ce',
label: 'C机台'
},
{
prop: 'allt',
label: '总研磨时间',
minWidth: 100
}
]
}
]
export default {
name: 'glassQualityReport',
data() {
return {
tableProps,
tableH: tableHeight(292)
}
},
mounted() {
window.addEventListener('resize', () => {
this.tableH = tableHeight(292)
})
},
props: {
tableData: {
type: Array,
required: true,
default: () => {
return []
}
}
}
}
</script>

78
src/views/qualityManagement/finalInspectionDataReport/glassThickReport.vue
View File

@@ -1,78 +0,0 @@
<template>
<div>
<base-table
:table-props="tableProps"
:table-data="tableData"
:max-height="tableH"
/>
</div>
</template>
<script>
import { timeFormatter, tableHeight } from '@/utils'
const tableProps = [
{
prop: 'glassId',
label: '玻璃ID',
minWidth: 120
},
{
prop: 'testTime',
label: '检测时间',
filter: timeFormatter,
minWidth: 160
},
{
prop: 'palletId',
label: '托盘ID',
minWidth: 120
},
{
prop: 'grindType',
label: '研磨类型',
minWidth: 120
},
{
prop: 'maxValue',
label: '最大值',
minWidth: 120
},
{
prop: 'minValue',
label: '最小值',
minWidth: 120
},
{
prop: 'avgValue',
label: '平均值',
minWidth: 120
},
{
prop: 'ttvValue',
label: '厚薄差',
minWidth: 120
}
]
export default {
name: 'glassThickReport',
data() {
return {
tableProps,
tableH: tableHeight(292)
}
},
mounted() {
window.addEventListener('resize', () => {
this.tableH = tableHeight(292)
})
},
props: {
tableData: {
type: Array,
required: true,
default: () => {
return []
}
}
}
}
</script>