大屏表格修改
This commit is contained in:
parent
5ce4dfba46
commit
3156d6747e
3
package-lock.json
generated
3
package-lock.json
generated
@ -14909,8 +14909,7 @@
|
||||
"version": "4.0.8",
|
||||
"resolved": "https://registry.npmmirror.com/rx-lite/-/rx-lite-4.0.8.tgz",
|
||||
"integrity": "sha512-Cun9QucwK6MIrp3mry/Y7hqD1oFqTYLQ4pGxaHTjIdaFDWRGGLikqp6u8LcWJnzpoALg9hap+JGk8sFIUuEGNA==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"rx-lite-aggregates": {
|
||||
"version": "4.0.8",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div id="container" ref="container" class="visual-container">
|
||||
<div id="container" ref="container" class="visual-container material-cockpit">
|
||||
<el-row
|
||||
class="container-title"
|
||||
:style="{
|
||||
@ -8,8 +8,10 @@
|
||||
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"
|
||||
@ -32,7 +34,7 @@
|
||||
<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">
|
||||
<div class="box-padding specil-table1">
|
||||
<base-table
|
||||
:page="1"
|
||||
:limit="14"
|
||||
@ -49,7 +51,7 @@
|
||||
<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">
|
||||
<div class="box-padding specil-table1">
|
||||
<base-table
|
||||
:page="1"
|
||||
:limit="14"
|
||||
@ -75,45 +77,55 @@ import bomList from './components/bomList.vue'
|
||||
const originalFilm = [
|
||||
{
|
||||
prop: 'time',
|
||||
label: '上线时间'
|
||||
label: '上线时间',
|
||||
minWidth: 35
|
||||
},
|
||||
{
|
||||
prop: 'productLine',
|
||||
label: '产线'
|
||||
label: '产线',
|
||||
minWidth: 33
|
||||
},
|
||||
{
|
||||
prop: 'spec',
|
||||
label: '原片规格'
|
||||
label: '原片规格',
|
||||
minWidth: 32.4
|
||||
},
|
||||
{
|
||||
prop: 'batch',
|
||||
label: '批次'
|
||||
label: '批次',
|
||||
minWidth: 35
|
||||
},
|
||||
{
|
||||
prop: 'num',
|
||||
label: '数量'
|
||||
label: '数量',
|
||||
minWidth: 28
|
||||
}
|
||||
]
|
||||
const material = [
|
||||
{
|
||||
prop: 'time',
|
||||
label: '上线时间'
|
||||
label: '上线时间',
|
||||
minWidth: 35
|
||||
},
|
||||
{
|
||||
prop: 'eqName',
|
||||
label: '设备名称'
|
||||
label: '设备名称',
|
||||
minWidth: 33
|
||||
},
|
||||
{
|
||||
prop: 'spec',
|
||||
label: '辅料规格'
|
||||
label: '辅料规格',
|
||||
minWidth: 32.4
|
||||
},
|
||||
{
|
||||
prop: 'batch',
|
||||
label: '批次'
|
||||
label: '批次',
|
||||
minWidth: 35
|
||||
},
|
||||
{
|
||||
prop: 'num',
|
||||
label: '数量'
|
||||
label: '数量',
|
||||
minWidth: 28
|
||||
}
|
||||
]
|
||||
export default {
|
||||
@ -220,6 +232,7 @@ export default {
|
||||
})
|
||||
return false
|
||||
}
|
||||
this.isFullScreen = !this.isFullScreen
|
||||
screenfull.toggle(this.$refs.container)
|
||||
}
|
||||
}
|
||||
@ -236,7 +249,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;
|
||||
@ -248,3 +260,17 @@ export default {
|
||||
}
|
||||
}
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div style="height: 14px">
|
||||
<div :style="{ height: 15 * beilv + 'px' }">
|
||||
<span v-if="this.injectData.status === 3">
|
||||
<svg-icon icon-class="green_dot" style="font-size: 14px; position: relative; top: .08em" />
|
||||
已完成
|
||||
@ -22,6 +22,21 @@ export default {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
beilv: 1
|
||||
}
|
||||
},
|
||||
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
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user