311 lines
8.5 KiB
Vue
311 lines
8.5 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: 0, top: 37 * beilv + 'px' }"
|
|
@click="changeFullScreen"
|
|
>
|
|
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" :style="{fontSize: 33 * beilv + 'px'}" />
|
|
<svg-icon v-else icon-class="fullScreenView" :style="{fontSize: 33 * beilv + 'px'}" />
|
|
</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" :style="{ margin: 16 * beilv + 'px' + ' 0' }">
|
|
<!-- 右上 -->
|
|
<div class="right-box">
|
|
<div class="right-top">
|
|
<base-container :beilv="beilv" :height="470" :title="'在途辅料'" :title-icon="'cockpit_2_3'">
|
|
<div class="box-padding specil-table1">
|
|
<base-table
|
|
:page="1"
|
|
:limit="15"
|
|
:show-index="false"
|
|
:beilv="beilv"
|
|
:table-config="material"
|
|
:table-data="materialList"
|
|
/>
|
|
</div>
|
|
</base-container>
|
|
</div>
|
|
<div class="right-bottom">
|
|
<base-container :beilv="beilv" :height="470" :title="'深加工再制品'" :title-icon="'cockpit_2_2'">
|
|
<div class="box-padding specil-table1">
|
|
<base-table
|
|
:page="1"
|
|
:limit="15"
|
|
:show-index="false"
|
|
:beilv="beilv"
|
|
:table-config="originalFilm"
|
|
:table-data="originalFilmList"
|
|
/>
|
|
</div>
|
|
</base-container>
|
|
</div>
|
|
</div>
|
|
</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 = []
|
|
const productList = ['2.0-1128*1716', '2.0-1128*2251', '2.0-1128*2272', '3.2-1128*1716', '3.2-1128*1718','3.2-1032*1747', '3.2-1033*2089']
|
|
let cnum = 1
|
|
for (let i = 0; i < 20; i++) {
|
|
const obj = {}
|
|
const sj = parseInt(Math.random() * 3 + 1)
|
|
cnum += sj
|
|
obj.time = moment('20221101 081002').add(cnum, 'days').add(cnum, 'hours').add(cnum, 'minute').add(cnum, 'second').format('YYYY-MM-DD HH:mm:ss')
|
|
obj.productLine = sj % 2 ? 'A' : 'B'
|
|
obj.spec = productList[parseInt(Math.random() * (productList.length))]
|
|
obj.batch = moment('20221101 081002').add(cnum, 'days').add(cnum, 'hours').add(cnum, 'minute').add(cnum, 'second').format('YYYYMMDDHH')
|
|
obj.num = parseInt(Math.random() * 800 + 100) + ' (片)'
|
|
arr.push(obj)
|
|
}
|
|
arr.sort(function (a, b) {
|
|
return new Date(a.time) - new Date(b.time)
|
|
})
|
|
this.originalFilmList = arr
|
|
const eqList = [
|
|
{name: '磨边机', fc: ''},
|
|
{name: '丝印机', fc: ['油墨', '刮胶']},
|
|
{name: '镀膜机', fc: ['镀膜液', '异丙醇']},
|
|
{name: '包装机', fc: ['隔离纸', '包装辅材']}
|
|
]
|
|
let cnum2 = 1
|
|
for (let i = 0; i < 20; i++) {
|
|
const obj = {}
|
|
const sj = parseInt(Math.random() * 3 + 1)
|
|
const sj2 = parseInt(Math.random() * eqList.length)
|
|
const sj3 = sj % 2 ? 1 : 0
|
|
cnum2 += sj
|
|
obj.time = moment('20221015 110314').add(cnum2, 'days').add(cnum2, 'hours').add(cnum2, 'minute').add(cnum2, 'second').format('YYYY-MM-DD HH:mm:ss')
|
|
obj.eqName = eqList[sj2].name
|
|
obj.spec = eqList[sj2].fc ? (eqList[sj2].fc[sj3]) : ''
|
|
obj.batch = moment('20221015 110314').add(cnum2, 'days').add(cnum2, 'hours').add(cnum2, 'minute').add(cnum2, 'second').format('YYYYMMDD')
|
|
obj.num = parseInt(Math.random() * 800 + 100)
|
|
temp.push(obj)
|
|
}
|
|
temp.sort(function (a, b) {
|
|
return new Date(a.time) - new Date(b.time)
|
|
})
|
|
this.materialList = temp
|
|
this.bomMsg = [
|
|
{ name: '2.0-1128*1716' },
|
|
{ name: '2.0-1128*2251' },
|
|
{ name: '2.0-1128*2272' },
|
|
{ name: '3.2-1128*1716' },
|
|
{ name: '3.2-1128*1718' },
|
|
{ name: '3.2-1032*1747' }
|
|
]
|
|
},
|
|
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 16px;
|
|
height: 100%;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
.material-cockpit {
|
|
.container-main {
|
|
height: calc(100vh - 100px * var(--beilv));
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
.right-box {
|
|
height: 100%;
|
|
display: flex;
|
|
// flex: 1;
|
|
flex-direction: column-reverse;
|
|
justify-content: space-between;
|
|
}
|
|
.right-top {
|
|
height: 49.4%;
|
|
}
|
|
.right-bottom {
|
|
height: 49.4%;
|
|
}
|
|
.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>
|