|
|
@@ -1,5 +1,5 @@ |
|
|
|
<template> |
|
|
|
<div id="container" ref="container" class="visual-container"> |
|
|
|
<div id="container" ref="container" class="visual-container order-cockpit"> |
|
|
|
<el-row |
|
|
|
class="container-title" |
|
|
|
:style="{ |
|
|
@@ -8,16 +8,18 @@ |
|
|
|
fontSize: beilv * 30 + 'px' |
|
|
|
}" |
|
|
|
> |
|
|
|
<img src="../../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt=""> |
|
|
|
合肥新能源数字工厂工单管理驾驶舱 |
|
|
|
<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" /> |
|
|
|
<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"> |
|
|
@@ -30,7 +32,7 @@ |
|
|
|
</el-col> |
|
|
|
<el-col :span="14"> |
|
|
|
<base-container :beilv="beilv" :height="412" :title="'订单池'" :title-icon="'cockpit_1_2'"> |
|
|
|
<div class="box-padding"> |
|
|
|
<div class="box-padding specil-table1"> |
|
|
|
<base-table |
|
|
|
:page="1" |
|
|
|
:limit="12" |
|
|
@@ -47,7 +49,7 @@ |
|
|
|
<el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }"> |
|
|
|
<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"> |
|
|
|
<div class="box-padding specil-table2"> |
|
|
|
<base-table |
|
|
|
:page="1" |
|
|
|
:limit="16" |
|
|
@@ -73,71 +75,87 @@ import orderStatus from './components/orderStatus.vue' |
|
|
|
const orderPool = [ |
|
|
|
{ |
|
|
|
prop: 'customerName', |
|
|
|
label: '客户名称' |
|
|
|
label: '客户名称', |
|
|
|
minWidth: 35.2 |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'orderCode', |
|
|
|
label: '订单编号' |
|
|
|
label: '订单编号', |
|
|
|
minWidth: 32 |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'productName', |
|
|
|
label: '产品名称' |
|
|
|
label: '产品名称', |
|
|
|
minWidth: 32 |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'planNum', |
|
|
|
label: '计划加工量' |
|
|
|
label: '计划加工量', |
|
|
|
minWidth: 23.6 |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'planDelivery', |
|
|
|
label: '计划交货期' |
|
|
|
label: '计划交货期', |
|
|
|
minWidth: 28.8 |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'status', |
|
|
|
label: '订单状态', |
|
|
|
subcomponent: orderStatus |
|
|
|
subcomponent: orderStatus, |
|
|
|
minWidth: 19 |
|
|
|
} |
|
|
|
] |
|
|
|
const orderMonitiring = [ |
|
|
|
{ |
|
|
|
prop: 'customerName', |
|
|
|
label: '客户名称' |
|
|
|
label: '客户名称', |
|
|
|
minWidth: 35.2 |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'orderCode', |
|
|
|
label: '订单编号' |
|
|
|
label: '订单编号', |
|
|
|
minWidth: 33.2 |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'status', |
|
|
|
label: '订单状态', |
|
|
|
subcomponent: orderStatus |
|
|
|
subcomponent: orderStatus, |
|
|
|
minWidth: 27 |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'completion', |
|
|
|
label: '完成率' |
|
|
|
label: '完成率', |
|
|
|
minWidth: 24.8 |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'yield', |
|
|
|
label: '良品率' |
|
|
|
label: '良品率', |
|
|
|
minWidth: 24.8 |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'shiftCosts', |
|
|
|
label: '班组费用' |
|
|
|
label: '班组费用', |
|
|
|
minWidth: 24.8 |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'energyCosts', |
|
|
|
label: '能耗费用' |
|
|
|
label: '能耗费用', |
|
|
|
minWidth: 29.4 |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'equipmentCost', |
|
|
|
label: '设备费用' |
|
|
|
label: '设备费用', |
|
|
|
minWidth: 29.4 |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'materialCost', |
|
|
|
label: '材料费用' |
|
|
|
label: '材料费用', |
|
|
|
minWidth: 29.4 |
|
|
|
}, |
|
|
|
{ |
|
|
|
prop: 'totalCost', |
|
|
|
label: '总费用' |
|
|
|
label: '总费用', |
|
|
|
minWidth: 31.6 |
|
|
|
} |
|
|
|
] |
|
|
|
export default { |
|
|
@@ -217,11 +235,11 @@ export default { |
|
|
|
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 ? 0 : parseInt(Math.random() * 800 + 100) |
|
|
|
obj.energyCosts = obj.status === 1 ? 0 : parseInt(Math.random() * 800 + 100) |
|
|
|
obj.equipmentCost = obj.status === 1 ? 0 : parseInt(Math.random() * 800 + 100) |
|
|
|
obj.materialCost = obj.status === 1 ? 0 : parseInt(Math.random() * 800 + 100) |
|
|
|
obj.totalCost = obj.shiftCosts + obj.energyCosts + obj.equipmentCost + obj.materialCost |
|
|
|
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) |
|
|
|
temp.push(obj) |
|
|
|
} |
|
|
|
this.orderMonitiringList = temp |
|
|
@@ -247,6 +265,7 @@ export default { |
|
|
|
}) |
|
|
|
return false |
|
|
|
} |
|
|
|
this.isFullScreen = !this.isFullScreen |
|
|
|
screenfull.toggle(this.$refs.container) |
|
|
|
} |
|
|
|
} |
|
|
@@ -263,7 +282,6 @@ export default { |
|
|
|
background: url('../../../assets/img/cockpit/title.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
color: #fff; |
|
|
|
text-align: center; |
|
|
|
.title-button { |
|
|
|
color: #00fff0; |
|
|
|
font-size: 20px; |
|
|
@@ -278,3 +296,26 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
</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: 50px; |
|
|
|
} |
|
|
|
.el-table--border th:first-child .cell, |
|
|
|
.el-table--border td:first-child .cell { |
|
|
|
padding-left: 50px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |