<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' 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: 'datetime', format: 'yyyy-MM-dd HH:mm:ss', valueFormat: 'yyyy-MM-dd HH:mm:ss', placeholder: '产品上片时间', param: 'testTime', width: 200 }, { type: 'button', btnName: '查询', name: 'search', color: 'primary' } ], listQuery: { current: 1, size: 20, palletId: '' }, 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.getList() }, methods: { getList() { palletIndicatorAnalysisPage({ ...this.listQuery }).then((res) => { this.tableData = res.data.records this.total = res.data.total this.setCurrent() let palletId = this.tableData[0].palletId this.getLevel(palletId) }) }, setCurrent() { let _this = this setTimeout(function () { _this.$refs.palletTable1.setCurrent('palletTable', 0) }, 500) }, getLevel() { // 需要修改ID palletIndicatorGetType({ id: 1 }).then((res) => { this.tableData2 = [] if (res.code === 0) { const data = res.data this.chartMsg = data console.log(this.chartMsg) let obj = {} obj.productType = '良品' obj.num = data.okNum obj.percentage = data.okPercentage this.tableData2.push(obj) let obj2 = {} obj2.productType = '待再加工' obj2.num = data.reprocessNum obj2.percentage = data.rePercentage this.tableData2.push(obj2) let obj3 = {} obj3.productType = '废品' obj3.num = data.wasteNum obj3.percentage = data.noPercentage this.tableData2.push(obj3) } }) }, buttonClick(val) { if (val.btnName === 'search') { this.listQuery.palletId = val.palletId 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>