349 lines
11 KiB
Vue
349 lines
11 KiB
Vue
<template>
|
|
<div id="container" ref="container" class="visual-container order-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">
|
|
<!-- 上 -->
|
|
<el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="16 * beilv" class="top-container">
|
|
<el-col :span="10">
|
|
<base-container :beilv="beilv" :height="412" :title="'工单一览表'" :title-icon="'cockpit_1_1'">
|
|
<work-order :beilv="beilv" :order-msg="orderList" />
|
|
</base-container>
|
|
</el-col>
|
|
<el-col :span="14">
|
|
<base-container :beilv="beilv" :height="412" :title="'订单池'" :title-icon="'cockpit_1_2'">
|
|
<div class="box-padding specil-table1">
|
|
<base-table
|
|
:page="1"
|
|
:limit="12"
|
|
:show-index="false"
|
|
:beilv="beilv"
|
|
:table-config="orderPool"
|
|
:table-data="orderPoolList"
|
|
/>
|
|
</div>
|
|
</base-container>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 下 -->
|
|
<el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" class="bottom-container">
|
|
<el-col :style="{ margin: 16 * beilv + 'px' + ' 0' }" :span="24">
|
|
<base-container :beilv="beilv" :height="520" :title="'在途/完成订单监控'" :title-icon="'cockpit_1_3'">
|
|
<div class="box-padding specil-table2">
|
|
<base-table
|
|
:page="1"
|
|
:limit="17"
|
|
:show-index="false"
|
|
:beilv="beilv"
|
|
:table-config="orderMonitiring"
|
|
:table-data="orderMonitiringList"
|
|
/>
|
|
</div>
|
|
</base-container>
|
|
</el-col>
|
|
</el-row>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import baseContainer from './components/baseContainer'
|
|
import workOrder from './components/workOrder.vue'
|
|
import screenfull from 'screenfull'
|
|
import BaseTable from './components/baseTable.vue'
|
|
import moment from 'moment'
|
|
import orderStatus from './components/orderStatus.vue'
|
|
const orderPool = [
|
|
{
|
|
prop: 'customerName',
|
|
label: '客户名称',
|
|
minWidth: 38
|
|
},
|
|
{
|
|
prop: 'orderCode',
|
|
label: '订单编号',
|
|
minWidth: 36
|
|
},
|
|
{
|
|
prop: 'productName',
|
|
label: '产品名称',
|
|
minWidth: 30
|
|
},
|
|
{
|
|
prop: 'planNum',
|
|
label: '计划加工量',
|
|
minWidth: 23.6
|
|
},
|
|
{
|
|
prop: 'planDelivery',
|
|
label: '计划交货期',
|
|
minWidth: 25
|
|
},
|
|
{
|
|
prop: 'status',
|
|
label: '订单状态',
|
|
subcomponent: orderStatus,
|
|
minWidth: 21
|
|
}
|
|
]
|
|
const orderMonitiring = [
|
|
{
|
|
prop: 'customerName',
|
|
label: '客户名称',
|
|
minWidth: 40
|
|
},
|
|
{
|
|
prop: 'orderCode',
|
|
label: '订单编号',
|
|
minWidth: 38
|
|
},
|
|
{
|
|
prop: 'status',
|
|
label: '订单状态',
|
|
subcomponent: orderStatus,
|
|
minWidth: 28
|
|
},
|
|
{
|
|
prop: 'completion',
|
|
label: '完成率',
|
|
minWidth: 24.8
|
|
},
|
|
{
|
|
prop: 'yield',
|
|
label: '良品率',
|
|
minWidth: 24.8
|
|
},
|
|
{
|
|
prop: 'shiftCosts',
|
|
label: '班组费用',
|
|
minWidth: 24.8
|
|
},
|
|
{
|
|
prop: 'energyCosts',
|
|
label: '能耗费用',
|
|
minWidth: 29.4
|
|
},
|
|
{
|
|
prop: 'equipmentCost',
|
|
label: '设备费用',
|
|
minWidth: 29.4
|
|
},
|
|
{
|
|
prop: 'materialCost',
|
|
label: '材料费用',
|
|
minWidth: 29.4
|
|
},
|
|
{
|
|
prop: 'totalCost',
|
|
label: '总费用',
|
|
minWidth: 31.6
|
|
}
|
|
]
|
|
export default {
|
|
name: 'Cockpit',
|
|
components: {
|
|
baseContainer,
|
|
workOrder,
|
|
BaseTable
|
|
},
|
|
data() {
|
|
return {
|
|
beilv: 1,
|
|
isFullScreen: false,
|
|
orderPool,
|
|
orderPoolList: [],
|
|
orderMonitiring,
|
|
orderMonitiringList: [],
|
|
orderList: []
|
|
}
|
|
},
|
|
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 compList = ['隆基绿能科技股份有限公司', '天合光能股份有限公司', '晶澳太阳能科技股份有限公司', '晶科能源股份有限公司', '阿特斯阳光电力集团', '东方日升新能源股份有限公司', '尚德集团', '浙江正泰新能源开发有限公司', '环晟光伏(江苏)有限公司', '江苏赛拉弗光伏系统有限公司', '唐山海泰新能科技股份有限公司', '阳光能源控股有限公司', '横店集团东磁股份有限公司', '常州亿晶光电科技有限公司', '协鑫集成科技股份有限公司', '苏州中来光伏新材股份有限公司', '中节能太阳能科技(镇江)有限公司', '苏州腾晖光伏技术有限公司', '英利绿色能源控股有限公司', '湖南红太阳新能源科技有限公司']
|
|
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']
|
|
const daping = [{name: '3.2-1032*1747', percentage: '72%'},{name: '2.0-1128*1716', percentage: '67%'},{name: '3.2-1128*1716', percentage: '46%'},{name: '2.0-1128*2251', percentage: '89%'}]
|
|
const arr1 = []
|
|
const arr2 = []
|
|
const temp = []
|
|
for(let i = 0; i < 4; i++) {
|
|
const sj = parseInt(Math.random() * 200)
|
|
const obj = {}
|
|
obj.code = 'WOD' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
|
|
obj.state = '激活'
|
|
obj.name = daping[i].name
|
|
obj.line = sj % 2 ? 'A' : 'B'
|
|
obj.workCode = 'ODFG' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
|
|
obj.percentage = daping[i].percentage
|
|
arr1.push(obj)
|
|
}
|
|
this.orderList = arr1
|
|
for (let i = 0; i < 20; i++) {
|
|
const obj = {}
|
|
const sj = parseInt(Math.random() * 200)
|
|
obj.customerName = compList[parseInt(Math.random() * (compList.length))]
|
|
obj.orderCode = 'ODFG' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
|
|
obj.productName = productList[parseInt(Math.random() * (productList.length))]
|
|
obj.planNum = parseInt(Math.random() * 800 + 100) + '(m²)'
|
|
obj.planDelivery = moment().add(sj, 'days').format('YYYY-MM-DD')
|
|
// obj.status = parseInt(Math.random() * 3 + 1)
|
|
obj.status = 4
|
|
arr2.push(obj)
|
|
}
|
|
this.orderPoolList = arr2
|
|
for (let i = 0; i < 20; i++) {
|
|
const obj = {}
|
|
const sj = parseInt(Math.random() * 200)
|
|
obj.customerName = compList[parseInt(Math.random() * (compList.length))]
|
|
obj.orderCode = 'ODFG' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
|
|
obj.status = parseInt(Math.random() * 3 + 1)
|
|
obj.completion = obj.status === 1 ? '0.00%' : (obj.status === 3 ? '100%' : parseInt(Math.random() * 100) + '%')
|
|
obj.yield = parseInt(Math.random() * 50 + 50) + '%'
|
|
// obj.shiftCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
|
|
// obj.energyCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
|
|
// obj.equipmentCost = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
|
|
// obj.materialCost = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
|
|
// obj.totalCost = parseInt(obj.shiftCosts + obj.energyCosts + obj.equipmentCost + obj.materialCost).toFixed(2)
|
|
obj.shiftCosts = '0'
|
|
obj.energyCosts = '0'
|
|
obj.equipmentCost = '0'
|
|
obj.materialCost = '0'
|
|
obj.totalCost = '0'
|
|
temp.push(obj)
|
|
}
|
|
this.orderMonitiringList = temp
|
|
},
|
|
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;
|
|
}
|
|
}
|
|
.container-main {
|
|
padding: 16px 8px;
|
|
.top-container {
|
|
height: calc((100vh - 100px * var(--beilv)) * 0.42);
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
.bottom-container {
|
|
height: calc((100vh - 100px * var(--beilv)) * 0.56);
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
}
|
|
.box-padding {
|
|
padding: 0 16px;
|
|
height: 100%;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
.order-cockpit {
|
|
.specil-table1 {
|
|
.el-table .cell {
|
|
padding-left: 25px;
|
|
padding-right: 25px;
|
|
}
|
|
.el-table--border th:first-child .cell,
|
|
.el-table--border td:first-child .cell {
|
|
padding-left: 25px;
|
|
}
|
|
}
|
|
.specil-table2 {
|
|
.el-table .cell {
|
|
padding-left: 25px;
|
|
}
|
|
.el-table--border th:first-child .cell,
|
|
.el-table--border td:first-child .cell {
|
|
padding-left: 25px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|