203 lines
4.7 KiB
Vue
203 lines
4.7 KiB
Vue
<template>
|
|
<div>
|
|
<div class="top-box">
|
|
<div style="padding: 10px 0 0 16px">
|
|
<search-bar :formConfigs="formConfig" />
|
|
</div>
|
|
<production-line-diagram></production-line-diagram>
|
|
</div>
|
|
<el-row class="bottom-box" :gutter="10">
|
|
<el-col :span="4" class="area">
|
|
<span class="title">终检单元</span>
|
|
<base-table
|
|
:page="listQuery1.current"
|
|
:limit="listQuery1.size"
|
|
:pageWidth="40"
|
|
:table-props="tableProps1"
|
|
:table-data="tableData1"
|
|
:max-height="tableH"
|
|
/>
|
|
</el-col>
|
|
<el-col :span="6" class="area">
|
|
<span class="title">面磨后清洗单元</span>
|
|
<base-table
|
|
:page="listQuery1.current"
|
|
:limit="listQuery1.size"
|
|
:pageWidth="40"
|
|
:table-props="tableProps1"
|
|
:table-data="tableData3"
|
|
:max-height="tableH"
|
|
/>
|
|
</el-col>
|
|
<el-col :span="6" class="area">
|
|
<span class="title">面磨单元</span>
|
|
<base-table
|
|
:page="listQuery2.current"
|
|
:limit="listQuery2.size"
|
|
:pageWidth="40"
|
|
:table-props="tableProps1"
|
|
:table-data="tableData4"
|
|
:max-height="tableH"
|
|
/>
|
|
</el-col>
|
|
<el-col :span="4" class="area">
|
|
<span class="title">磨边后清洗单元</span>
|
|
<base-table
|
|
:page="listQuery2.current"
|
|
:limit="listQuery2.size"
|
|
:pageWidth="40"
|
|
:table-props="tableProps2"
|
|
:table-data="tableData5"
|
|
:max-height="tableH2"
|
|
/>
|
|
<span class="title">边检单元</span>
|
|
<base-table
|
|
:page="listQuery2.current"
|
|
:limit="listQuery2.size"
|
|
:pageWidth="40"
|
|
:table-props="tableProps2"
|
|
:table-data="tableData5"
|
|
:max-height="tableH2"
|
|
/>
|
|
</el-col>
|
|
<el-col :span="4" class="area">
|
|
<span class="title">精切磨边单元</span>
|
|
<base-table
|
|
:page="listQuery1.current"
|
|
:limit="listQuery1.size"
|
|
:pageWidth="40"
|
|
:table-props="tableProps2"
|
|
:table-data="tableData6"
|
|
:max-height="tableH"
|
|
/>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { tableHeight } from './../../utils'
|
|
import ProductionLineDiagram from './components/ProductionLineDiagram.vue'
|
|
const tableProps1 = [
|
|
{
|
|
prop: 'name',
|
|
label: '设备名称',
|
|
minWidth: 98
|
|
},
|
|
{
|
|
prop: 'glassID',
|
|
label: '玻璃ID',
|
|
minWidth: 98
|
|
},
|
|
{
|
|
prop: 'glassID1',
|
|
label: '研磨类型',
|
|
minWidth: 98
|
|
}
|
|
]
|
|
const tableProps2 = [
|
|
{
|
|
prop: 'name',
|
|
label: '设备名称',
|
|
minWidth: 98
|
|
},
|
|
{
|
|
prop: 'glassID',
|
|
label: '玻璃ID',
|
|
minWidth: 98
|
|
}
|
|
]
|
|
export default {
|
|
name: 'ProductionLineStatus',
|
|
data() {
|
|
return {
|
|
formConfig: [
|
|
{
|
|
type: 'select',
|
|
label: '产线',
|
|
selectOptions: JSON.parse(localStorage.getItem('publicList'))
|
|
.proLineVoList,
|
|
param: 'proLineId',
|
|
defaultSelect: ''
|
|
}
|
|
],
|
|
listQuery1: {
|
|
current: 1,
|
|
size: 10
|
|
},
|
|
listQuery2: {
|
|
current: 1,
|
|
size: 5
|
|
},
|
|
tableH: tableHeight(479),
|
|
tableH2: (tableHeight(238) * 0.68 - 50) / 2,
|
|
tableProps1,
|
|
tableData1: [],
|
|
tableData2: [],
|
|
tableData3: [],
|
|
tableProps2,
|
|
tableData4: [],
|
|
tableData5: [],
|
|
tableData6: []
|
|
}
|
|
},
|
|
components: { ProductionLineDiagram },
|
|
mounted() {
|
|
window.addEventListener('resize', () => {
|
|
this.tableH = tableHeight(479)
|
|
this.tableH2 = (tableHeight(238) * 0.68 - 50) / 2
|
|
})
|
|
this.getTableMsg()
|
|
},
|
|
methods: {
|
|
getTableMsg() {
|
|
let arr = []
|
|
for (let i = 0; i < 16; i++) {
|
|
let obj = {}
|
|
obj.id = i
|
|
obj.name = '测试' + i
|
|
arr.push(obj)
|
|
}
|
|
this.tableData1 = arr
|
|
this.tableData2 = arr
|
|
this.tableData3 = arr
|
|
this.tableData4 = arr
|
|
this.tableData5 = arr
|
|
this.tableData6 = arr
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.top-box,
|
|
.bottom-box {
|
|
background-color: #fff;
|
|
margin: 8px 16px 0 !important;
|
|
border-radius: 4px;
|
|
}
|
|
.top-box {
|
|
height: calc((100vh - 90px - 50px - 16px) * 0.32);
|
|
}
|
|
.bottom-box {
|
|
height: calc((100vh - 90px - 50px - 16px) * 0.68);
|
|
padding: 0 16px 16px;
|
|
.area {
|
|
.title {
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
color: #000000;
|
|
margin: 14px 0;
|
|
}
|
|
.title::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 4px;
|
|
height: 16px;
|
|
background: #0b58ff;
|
|
border-radius: 1px;
|
|
margin-right: 8px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
</style>
|