303 lines
7.2 KiB
Vue
303 lines
7.2 KiB
Vue
<template>
|
|
<div>
|
|
<el-row :gutter="10" class="main-box">
|
|
<el-col :span="18">
|
|
<div class="left-box">
|
|
<search-bar
|
|
:formConfigs="formConfig"
|
|
ref="searchBarForm"
|
|
@headBtnClick="buttonClick"
|
|
/>
|
|
<base-table
|
|
ref="palletTable1"
|
|
id="palletTable"
|
|
:page="listQuery.current"
|
|
:limit="listQuery.size"
|
|
:table-props="tableProps"
|
|
:table-data="tableData"
|
|
:max-height="tableH"
|
|
highlight-current-row
|
|
@current-change="selectPallet"
|
|
/>
|
|
<pagination
|
|
:page.sync="listQuery.current"
|
|
:limit.sync="listQuery.size"
|
|
:total="total"
|
|
@pagination="getList()"
|
|
/>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="right-box">
|
|
<el-row>
|
|
<el-col class="rigth-top">
|
|
<span class="title">托盘对应产品等级数据</span>
|
|
<base-table
|
|
:table-props="tableProps2"
|
|
:table-data="tableData2"
|
|
:max-height="tableH2"
|
|
/>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col class="right-bottom">
|
|
<span class="title">托盘对应产品等级分析</span>
|
|
<pallet-level-chart :chartMsg="chartMsg" />
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { tableHeight } from '@/utils/index'
|
|
import palletLevelChart from './../components/palletLevelChart.vue'
|
|
import {
|
|
palletIndicatorAnalysisPage,
|
|
palletIndicatorGetType
|
|
} from '@/api/deviceManagement'
|
|
import { timeFormatter } from '@/utils'
|
|
import moment from 'moment'
|
|
const tableProps = [
|
|
{
|
|
prop: 'proLineName',
|
|
label: '产线',
|
|
minWidth: 80
|
|
},
|
|
{
|
|
prop: 'code',
|
|
label: '工单编号',
|
|
minWidth: 120
|
|
},
|
|
{
|
|
prop: 'glassId',
|
|
label: '玻璃ID',
|
|
minWidth: 120
|
|
},
|
|
{
|
|
prop: 'rackId',
|
|
label: '成品架ID',
|
|
minWidth: 120
|
|
},
|
|
{
|
|
prop: 'loadTime',
|
|
label: '产品上片时间',
|
|
filter: timeFormatter,
|
|
minWidth: 160
|
|
},
|
|
{
|
|
prop: 'unloadTime',
|
|
label: '产品下片时间',
|
|
filter: timeFormatter,
|
|
minWidth: 160
|
|
},
|
|
{
|
|
prop: 'grade',
|
|
label: '玻璃等级',
|
|
minWidth: 80
|
|
},
|
|
{
|
|
prop: 'palletId',
|
|
label: '面磨托盘ID',
|
|
minWidth: 120
|
|
},
|
|
{
|
|
prop: 'glassLength',
|
|
label: '玻璃长度'
|
|
},
|
|
{
|
|
prop: 'glassWidth',
|
|
label: '玻璃宽度'
|
|
},
|
|
{
|
|
prop: 'glassHeight',
|
|
label: '玻璃厚度'
|
|
}
|
|
]
|
|
const tableProps2 = [
|
|
{
|
|
prop: 'productType',
|
|
label: '产品分类'
|
|
},
|
|
{
|
|
prop: 'num',
|
|
label: '数量'
|
|
},
|
|
{
|
|
prop: 'percentage',
|
|
label: '占比'
|
|
}
|
|
]
|
|
export default {
|
|
name: 'analysisOfPallet',
|
|
components: { palletLevelChart },
|
|
data() {
|
|
return {
|
|
formConfig: [
|
|
{
|
|
type: 'input',
|
|
label: '托盘ID',
|
|
placeholder: '托盘ID',
|
|
param: 'palletId'
|
|
},
|
|
{
|
|
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: 'button',
|
|
btnName: '查询',
|
|
name: 'search',
|
|
color: 'primary'
|
|
}
|
|
],
|
|
listQuery: {
|
|
current: 1,
|
|
size: 20,
|
|
palletId: '',
|
|
startTime: '',
|
|
endTime: ''
|
|
},
|
|
total: 0,
|
|
tableProps,
|
|
tableData: [],
|
|
tableH: tableHeight(330),
|
|
listQuery2: {
|
|
current: 1,
|
|
size: 500
|
|
},
|
|
tableProps2,
|
|
tableData2: [],
|
|
tableH2: tableHeight(360) / 2,
|
|
chartMsg: {}
|
|
}
|
|
},
|
|
mounted() {
|
|
window.addEventListener('resize', () => {
|
|
this.tableH = tableHeight(330)
|
|
this.tableH2 = tableHeight(360) / 2
|
|
})
|
|
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'
|
|
},
|
|
methods: {
|
|
getList() {
|
|
if (this.listQuery.palletId) {
|
|
palletIndicatorAnalysisPage({ ...this.listQuery }).then((res) => {
|
|
this.tableData = res.data.records
|
|
this.total = res.data.total
|
|
})
|
|
this.getLevel()
|
|
} else {
|
|
this.$message.error('请先输入托盘id后再查询')
|
|
}
|
|
},
|
|
getLevel() {
|
|
// 需要修改ID
|
|
palletIndicatorGetType({
|
|
palletId: this.listQuery.palletId,
|
|
startTime: this.listQuery.startTime,
|
|
endTime: this.listQuery.endTime
|
|
}).then((res) => {
|
|
this.tableData2 = []
|
|
if (res.code === 0) {
|
|
const data = res.data
|
|
this.chartMsg = data
|
|
console.log(this.chartMsg)
|
|
let arr = [
|
|
{ name: '良品', num: 'okNum', percentage: 'okPercentage' },
|
|
{
|
|
name: '待再加工',
|
|
num: 'reprocessNum',
|
|
percentage: 'rePercentage'
|
|
},
|
|
{ name: '废品', num: 'wasteNum', percentage: 'noPercentage' },
|
|
{ name: '抽检', num: 'checkNum', percentage: 'checkPercentage' },
|
|
{ name: '废弃', num: 'scrapNum', percentage: 'scrapPercentage' },
|
|
{ name: '碎片', num: 'chipNum', percentage: 'checkPercentage' },
|
|
{
|
|
name: '次良品',
|
|
num: 'inferiorNum',
|
|
percentage: 'inferiorPercentage'
|
|
}
|
|
]
|
|
for (let i = 0; i < 7; i++) {
|
|
let obj = {}
|
|
obj.productType = arr[i].name
|
|
obj.num = data[arr[i].num]
|
|
obj.percentage = data[arr[i].percentage]
|
|
this.tableData2.push(obj)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
buttonClick(val) {
|
|
if (val.btnName === 'search') {
|
|
this.listQuery.palletId = val.palletId
|
|
this.listQuery.startTime = val.timeVal ? val.timeVal[0] : ''
|
|
this.listQuery.endTime = val.timeVal ? val.timeVal[1] : ''
|
|
this.getList()
|
|
}
|
|
},
|
|
selectPallet(newVal) {
|
|
let palletId = newVal.palletId
|
|
this.getLevel(palletId)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.main-box {
|
|
width: 100%;
|
|
padding: 0px 6px 0 16px;
|
|
.left-box {
|
|
height: calc(100vh - 204px);
|
|
padding: 16px;
|
|
border-radius: 8px;
|
|
background-color: #fff;
|
|
}
|
|
.rigth-top {
|
|
background-color: #fff;
|
|
margin-bottom: 10px;
|
|
height: calc((100vh - 214px) / 2);
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
}
|
|
.right-bottom {
|
|
background-color: #fff;
|
|
height: calc((100vh - 214px) / 2);
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
}
|
|
.title {
|
|
display: inline-block;
|
|
margin-right: 8px;
|
|
margin-bottom: 22px;
|
|
}
|
|
.title::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 4px;
|
|
height: 16px;
|
|
background: #0b58ff;
|
|
border-radius: 1px;
|
|
margin-right: 8px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
</style>
|