277 lines
7.7 KiB
Vue
277 lines
7.7 KiB
Vue
<template>
|
|
<div id="container" ref="container" class="visual-container material-cockpit">
|
|
<el-row
|
|
class="container-title"
|
|
:style="{
|
|
height: beilv * 88 + 'px',
|
|
lineHeight: beilv * 88 + 'px',
|
|
fontSize: beilv * 30 + 'px'
|
|
}"
|
|
>
|
|
<div :style="{ paddingLeft: 645 * beilv + 'px' }">
|
|
<img src="../../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
|
|
合肥新能源数字工厂物料管理驾驶舱
|
|
</div>
|
|
<el-button
|
|
type="text"
|
|
class="title-button"
|
|
:style="{ right: 33 * beilv + 'px', top: 37 * beilv + 'px' }"
|
|
@click="changeFullScreen"
|
|
>
|
|
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
|
|
<svg-icon v-else icon-class="fullScreenView" />
|
|
</el-button>
|
|
</el-row>
|
|
<el-row class="container-main" :style="{ padding: '0 ' + 16 * beilv + 'px' }" :gutter="16 * beilv">
|
|
<!-- 左 -->
|
|
<el-col :span="10" :style="{ margin: 16 * beilv + 'px' + ' 0' }">
|
|
<base-container :beilv="beilv" :height="958" :title="'BOM清单管理'" :title-icon="'cockpit_2_1'">
|
|
<bom-list :beilv="beilv" :bom-msg="bomMsg" />
|
|
</base-container>
|
|
</el-col>
|
|
<el-col :span="14">
|
|
<!-- 右上 -->
|
|
<el-row>
|
|
<el-col :style="{ marginTop: 16 * beilv + 'px' }">
|
|
<base-container :beilv="beilv" :height="470" :title="'在途原片'" :title-icon="'cockpit_2_2'">
|
|
<div class="box-padding specil-table1">
|
|
<base-table
|
|
:page="1"
|
|
:limit="14"
|
|
:show-index="false"
|
|
:beilv="beilv"
|
|
:table-config="originalFilm"
|
|
:table-data="originalFilmList"
|
|
/>
|
|
</div>
|
|
</base-container>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 右下 -->
|
|
<el-row>
|
|
<el-col :style="{ margin: 16 * beilv + 'px' + ' 0' }">
|
|
<base-container :beilv="beilv" :height="470" :title="'在途辅料'" :title-icon="'cockpit_2_3'">
|
|
<div class="box-padding specil-table1">
|
|
<base-table
|
|
:page="1"
|
|
:limit="14"
|
|
:show-index="false"
|
|
:beilv="beilv"
|
|
:table-config="material"
|
|
:table-data="materialList"
|
|
/>
|
|
</div>
|
|
</base-container>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import baseContainer from './components/baseContainer'
|
|
import screenfull from 'screenfull'
|
|
import BaseTable from './components/baseTable.vue'
|
|
import moment from 'moment'
|
|
import bomList from './components/bomList.vue'
|
|
const originalFilm = [
|
|
{
|
|
prop: 'time',
|
|
label: '上线时间',
|
|
minWidth: 35
|
|
},
|
|
{
|
|
prop: 'productLine',
|
|
label: '产线',
|
|
minWidth: 33
|
|
},
|
|
{
|
|
prop: 'spec',
|
|
label: '原片规格',
|
|
minWidth: 32.4
|
|
},
|
|
{
|
|
prop: 'batch',
|
|
label: '批次',
|
|
minWidth: 35
|
|
},
|
|
{
|
|
prop: 'num',
|
|
label: '数量',
|
|
minWidth: 28
|
|
}
|
|
]
|
|
const material = [
|
|
{
|
|
prop: 'time',
|
|
label: '上线时间',
|
|
minWidth: 35
|
|
},
|
|
{
|
|
prop: 'eqName',
|
|
label: '设备名称',
|
|
minWidth: 33
|
|
},
|
|
{
|
|
prop: 'spec',
|
|
label: '辅料规格',
|
|
minWidth: 32.4
|
|
},
|
|
{
|
|
prop: 'batch',
|
|
label: '批次',
|
|
minWidth: 35
|
|
},
|
|
{
|
|
prop: 'num',
|
|
label: '数量',
|
|
minWidth: 28
|
|
}
|
|
]
|
|
export default {
|
|
name: 'Cockpit',
|
|
components: {
|
|
baseContainer,
|
|
BaseTable,
|
|
bomList
|
|
},
|
|
data() {
|
|
return {
|
|
beilv: 1,
|
|
isFullScreen: false,
|
|
originalFilm,
|
|
originalFilmList: [],
|
|
material,
|
|
materialList: [],
|
|
bomMsg: []
|
|
}
|
|
},
|
|
watch: {
|
|
isFullScreen: function(val) {
|
|
if (val) {
|
|
this.beilv = document.body.offsetWidth / 1920
|
|
} else {
|
|
this.beilv = document.getElementById('container').offsetWidth / 1920
|
|
}
|
|
},
|
|
'sidebar.opened': function(val) {
|
|
console.log(val)
|
|
if (!this.isFullScreen) {
|
|
setTimeout(() => {
|
|
this.beilv = document.getElementById('container').offsetWidth / 1920
|
|
}, 300)
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.beilv = document.getElementById('container').offsetWidth / 1920
|
|
window.addEventListener('resize', () => {
|
|
if (this.isFullScreen) {
|
|
this.beilv = document.body.offsetWidth / 1920
|
|
} else {
|
|
this.beilv = document.getElementById('container').offsetWidth / 1920
|
|
}
|
|
})
|
|
this.getMsg()
|
|
},
|
|
methods: {
|
|
getMsg() {
|
|
const arr = []
|
|
const temp = []
|
|
for (let i = 0; i < 20; i++) {
|
|
const obj = {}
|
|
const sj = parseInt(Math.random() * 200)
|
|
obj.time = moment().add(sj, 'days').add(sj, 'hours').add(sj, 'minute').add(sj, 'second').format('YYYY-MM-DD HH:mm:ss')
|
|
obj.productLine = '产线A'
|
|
obj.spec = '光伏玻璃2.0'
|
|
obj.batch = moment().subtract(sj, 'days').format('YYYYMMDD') + '0000' + parseInt(Math.random() * 89 + 10)
|
|
obj.num = parseInt(Math.random() * 800 + 100)
|
|
arr.push(obj)
|
|
}
|
|
this.originalFilmList = arr
|
|
const eqList = ['清洗机', 'A1一次冷却机', 'A1下片机', 'A1一次固化机', 'A1一次镀膜机', 'A1二次固化机', 'A1二次镀膜机', 'A1磨边机', 'A1磨边清洗机', 'A1预热机', 'A2一次冷却机', 'A2一次固化机', 'A2一次镀膜机', 'A2下片机', 'A2二次固化机', 'A2磨边机', 'A2磨边清洗机', 'A储片机206']
|
|
const spcList = ['200*231*0.5', '100*120*0.2', '70*80', '100*100']
|
|
for (let i = 0; i < 20; i++) {
|
|
const obj = {}
|
|
const sj = parseInt(Math.random() * 200)
|
|
obj.time = moment().add(sj, 'days').add(sj, 'hours').add(sj, 'minute').add(sj, 'second').format('YYYY-MM-DD HH:mm:ss')
|
|
obj.eqName = eqList[parseInt(Math.random() * eqList.length)]
|
|
obj.spec = spcList[parseInt(Math.random() * spcList.length)]
|
|
obj.batch = moment().subtract(sj, 'days').format('YYYYMMDD') + '0000' + parseInt(Math.random() * 89 + 10)
|
|
obj.num = parseInt(Math.random() * 800 + 100)
|
|
temp.push(obj)
|
|
}
|
|
this.materialList = temp
|
|
this.bomMsg = [
|
|
{ name: '隔离纸' },
|
|
{ name: '异丙醇' },
|
|
{ name: '镀膜液' },
|
|
{ name: '磨轮' },
|
|
{ name: '包装辅材' },
|
|
{ name: '网板' }
|
|
]
|
|
},
|
|
change() {
|
|
this.isFullScreen = screenfull.isFullscreen
|
|
},
|
|
init() {
|
|
if (screenfull.enabled) {
|
|
screenfull.on('change', this.change)
|
|
}
|
|
},
|
|
destroy() {
|
|
if (screenfull.enabled) {
|
|
screenfull.off('change', this.change)
|
|
}
|
|
},
|
|
changeFullScreen() {
|
|
if (!screenfull.enabled) {
|
|
this.$message({
|
|
message: 'you browser can not work',
|
|
type: 'warning'
|
|
})
|
|
return false
|
|
}
|
|
this.isFullScreen = !this.isFullScreen
|
|
screenfull.toggle(this.$refs.container)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.visual-container {
|
|
width: 100%;
|
|
min-width: 960px;
|
|
background: url('../../../assets/img/cockpit/cockpit-back.png') no-repeat;
|
|
background-size: cover;
|
|
.container-title {
|
|
width: 100%;
|
|
background: url('../../../assets/img/cockpit/title.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #fff;
|
|
.title-button {
|
|
color: #00fff0;
|
|
font-size: 20px;
|
|
position: absolute;
|
|
}
|
|
}
|
|
.box-padding {
|
|
padding: 0 16px;
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
.material-cockpit {
|
|
.specil-table1 {
|
|
.el-table .cell {
|
|
padding-left: 40px;
|
|
padding-right: 40px;
|
|
}
|
|
.el-table--border th:first-child .cell,
|
|
.el-table--border td:first-child .cell {
|
|
padding-left: 40px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|