更新驾驶舱 #18
18
src/App.vue
18
src/App.vue
@ -1,3 +1,10 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: zwq
|
||||||
|
* @Date: 2022-10-20 09:22:39
|
||||||
|
* @LastEditors: zwq
|
||||||
|
* @LastEditTime: 2022-11-24 10:37:57
|
||||||
|
* @Description:
|
||||||
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<router-view />
|
<router-view />
|
||||||
@ -7,7 +14,18 @@
|
|||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'App',
|
name: 'App',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
beilv: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.beilv = document.body.offsetWidth / 1920
|
||||||
|
document.documentElement.style.setProperty('--beilv', this.beilv)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.beilv = document.body.offsetWidth / 1920
|
||||||
|
document.documentElement.style.setProperty('--beilv', this.beilv)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2022-01-21 14:43:06
|
* @Date: 2022-01-21 14:43:06
|
||||||
* @LastEditors: zwq
|
* @LastEditors: zwq
|
||||||
* @LastEditTime: 2022-11-17 16:35:33
|
* @LastEditTime: 2022-11-24 16:17:09
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@ -171,7 +171,6 @@ export default {
|
|||||||
},
|
},
|
||||||
// 默认的series配置
|
// 默认的series配置
|
||||||
series: {
|
series: {
|
||||||
center: ['50%', '55%'],
|
|
||||||
radius: ['50%', '70%'],
|
radius: ['50%', '70%'],
|
||||||
silent: true,
|
silent: true,
|
||||||
avoidLabelOverlap: false,
|
avoidLabelOverlap: false,
|
||||||
@ -196,8 +195,18 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
if (this.chart) {
|
||||||
|
this.chart.resize()
|
||||||
|
this.$nextTick(() => {
|
||||||
|
// 重新绘制文本大小
|
||||||
|
this.initChart()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.initChart()
|
this.initChart()
|
||||||
|
this.chart.resize()
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
@ -213,23 +222,24 @@ export default {
|
|||||||
this.chart.setOption({
|
this.chart.setOption({
|
||||||
title: this.showCenterTitle
|
title: this.showCenterTitle
|
||||||
? {
|
? {
|
||||||
text: this.seriesData.reduce((pre, cur) => pre + cur.value, 0),
|
text: `${this.seriesData.reduce((pre, cur) => pre + cur.value, 0)}\n{name|总共}`,
|
||||||
subtext: '总共',
|
top: 'center',
|
||||||
top: '48%',
|
left: '48%',
|
||||||
left: '49%',
|
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
itemGap: 5,
|
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
fontSize: 26 * this.beilv,
|
fontSize: 26 * this.beilv,
|
||||||
fontWeight: 400,
|
fontWeight: 400,
|
||||||
lineHeight: 15
|
lineHeight: 15 * this.beilv,
|
||||||
},
|
rich: {
|
||||||
subtextStyle: {
|
name: {
|
||||||
color: 'rgba(255, 255, 255, 0.7)',
|
color: 'rgba(255, 255, 255, 0.7)',
|
||||||
fontWeight: 400,
|
fontWeight: 400,
|
||||||
fontSize: 14 * this.beilv,
|
textAlign: 'center',
|
||||||
lineHeight: 20
|
fontSize: 14 * this.beilv,
|
||||||
|
lineHeight: 20 * this.beilv
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
: {},
|
: {},
|
||||||
@ -262,7 +272,8 @@ export default {
|
|||||||
normal: {
|
normal: {
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
fontSize: 14 * this.beilv,
|
fontSize: 15 * this.beilv,
|
||||||
|
lineHeight: 18,
|
||||||
formatter: '{d}%\n{name|{b}}',
|
formatter: '{d}%\n{name|{b}}',
|
||||||
rich: {
|
rich: {
|
||||||
name: {
|
name: {
|
||||||
|
@ -2,13 +2,18 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2020-12-29 16:37:56
|
* @Date: 2020-12-29 16:37:56
|
||||||
* @LastEditors: zwq
|
* @LastEditors: zwq
|
||||||
* @LastEditTime: 2022-11-17 16:39:20
|
* @LastEditTime: 2022-11-24 15:47:14
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div>
|
<div>
|
||||||
<div v-for="i in areaArr" :key="i.title" :style="{ height: 145 * beilv + 'px', width: 730 * beilv + 'px' }" class="box">
|
<div
|
||||||
|
v-for="i in areaArr"
|
||||||
|
:key="i.title"
|
||||||
|
:style="{ height: 145 * beilv + 'px', width: 730 * beilv + 'px' }"
|
||||||
|
class="box"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
:style="{ fontSize: 22 * beilv + 'px', width: 40 * beilv + 'px' }"
|
:style="{ fontSize: 22 * beilv + 'px', width: 40 * beilv + 'px' }"
|
||||||
class="box-name title"
|
class="box-name title"
|
||||||
@ -25,10 +30,10 @@
|
|||||||
{{ i.subtitle }}
|
{{ i.subtitle }}
|
||||||
</div>
|
</div>
|
||||||
<div class="locationFlex">
|
<div class="locationFlex">
|
||||||
<div v-for="j in 4" :key="j+'div1'" class="finished">
|
<div v-for="j in 4" :key="j + 'div1'" class="finished">
|
||||||
<div
|
<div
|
||||||
v-for="(l,index) in 19"
|
v-for="(l, index) in 19"
|
||||||
:key="l+'box1'"
|
:key="l + 'box1'"
|
||||||
:class="l > Math.round(Math.random() * 80) ? 'waring' : ''"
|
:class="l > Math.round(Math.random() * 80) ? 'waring' : ''"
|
||||||
:style="{
|
:style="{
|
||||||
marginRight: 2 * beilv + 'px',
|
marginRight: 2 * beilv + 'px',
|
||||||
@ -40,7 +45,7 @@
|
|||||||
}"
|
}"
|
||||||
class="location"
|
class="location"
|
||||||
>
|
>
|
||||||
{{ j + 4*index }}
|
{{ j + 4 * index }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -50,22 +55,19 @@
|
|||||||
<!-- 辅材库 -->
|
<!-- 辅材库 -->
|
||||||
<div
|
<div
|
||||||
v-for="i in areaArr1"
|
v-for="i in areaArr1"
|
||||||
:key="i+'div2'"
|
:key="i + 'div2'"
|
||||||
:style="{ height: 135 * beilv + 'px', width: 730 * beilv + 'px',marginTop: 13 * beilv + 'px', }"
|
:style="{ width: 730 * beilv + 'px', padding: 9 * beilv + 'px' + ' 0' }"
|
||||||
class="box2"
|
class="box2"
|
||||||
>
|
>
|
||||||
<div
|
<div :style="{ fontSize: 22 * beilv + 'px', width: 40 * beilv + 'px', color: '#fff' }" class="box-name title">
|
||||||
:style="{ fontSize: 22 * beilv + 'px', width: 40 * beilv + 'px',color: '#fff' }"
|
|
||||||
class="box-name title"
|
|
||||||
>
|
|
||||||
{{ i }}
|
{{ i }}
|
||||||
</div>
|
</div>
|
||||||
<div v-if="i==='辅材库'" class="locationFlex" style="margin-left:0">
|
<div v-if="i === '辅材库'" class="locationFlex" style="margin-left:0">
|
||||||
<div v-for="j in 4" :key="j+'div3'" class="Auxiliary">
|
<div v-for="j in 4" :key="j + 'div3'" class="Auxiliary">
|
||||||
<div
|
<div
|
||||||
v-for="(l,index) in 19"
|
v-for="(l, index) in 19"
|
||||||
:key="l+'box5'"
|
:key="l + 'box5'"
|
||||||
:class="[num.indexOf(j + 4*index)>0 ? 'waring' : '',l===10? 'interlayer' : '']"
|
:class="[num.indexOf(j + 4 * index) > 0 ? 'waring' : '', l === 10 ? 'interlayer' : '']"
|
||||||
:style="{
|
:style="{
|
||||||
marginRight: 2 * beilv + 'px',
|
marginRight: 2 * beilv + 'px',
|
||||||
marginTop: 2 * beilv + 'px',
|
marginTop: 2 * beilv + 'px',
|
||||||
@ -75,16 +77,16 @@
|
|||||||
}"
|
}"
|
||||||
class="location"
|
class="location"
|
||||||
>
|
>
|
||||||
{{ j + 4*index }}
|
{{ j + 4 * index }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="locationFlex" style="margin-left:0">
|
<div v-else class="locationFlex" style="margin-left:0">
|
||||||
<div v-for="j in [3,2,1]" :key="j+'div4'">
|
<div v-for="j in [3, 2, 1]" :key="j + 'div4'">
|
||||||
<div
|
<div
|
||||||
v-for="l in 20"
|
v-for="l in 20"
|
||||||
:key="l+'box9'"
|
:key="l + 'box9'"
|
||||||
:class="num.indexOf(l + 4*j)>0 ? 'waring' : ''"
|
:class="num.indexOf(l + 4 * j) > 0 ? 'waring' : ''"
|
||||||
:style="{
|
:style="{
|
||||||
marginRight: 2 * beilv + 'px',
|
marginRight: 2 * beilv + 'px',
|
||||||
marginTop: 2 * beilv + 'px',
|
marginTop: 2 * beilv + 'px',
|
||||||
@ -152,12 +154,23 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
align-content: space-between;
|
||||||
|
margin: calc(16px * var(--beilv));
|
||||||
|
gap: calc(16px * var(--beilv));
|
||||||
|
position: absolute;
|
||||||
|
height: 95%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
overflow:hidden;
|
||||||
|
}
|
||||||
.box {
|
.box {
|
||||||
border: 1px dotted rgba(94, 195, 216, 0.6);
|
border: 1px dotted rgba(94, 195, 216, 0.6);
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -221,7 +234,7 @@ export default {
|
|||||||
.waring {
|
.waring {
|
||||||
background: #ff5d6b;
|
background: #ff5d6b;
|
||||||
}
|
}
|
||||||
.box2{
|
.box2 {
|
||||||
background-image: linear-gradient(to right, rgba(48, 112, 125, 0.6), transparent);
|
background-image: linear-gradient(to right, rgba(48, 112, 125, 0.6), transparent);
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
border: 1px dotted rgba(94, 195, 216, 0.6);
|
border: 1px dotted rgba(94, 195, 216, 0.6);
|
||||||
@ -230,13 +243,13 @@ export default {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: left;
|
justify-content: left;
|
||||||
}
|
}
|
||||||
.finished:nth-child(2){
|
.finished:nth-child(2) {
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
.Auxiliary:nth-child(2){
|
.Auxiliary:nth-child(2) {
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
.interlayer{
|
.interlayer {
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2021-07-19 15:18:30
|
* @Date: 2021-07-19 15:18:30
|
||||||
* @LastEditors: zwq
|
* @LastEditors: zwq
|
||||||
* @LastEditTime: 2022-11-17 16:04:14
|
* @LastEditTime: 2022-11-24 16:01:46
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@ -20,7 +20,7 @@
|
|||||||
<el-button
|
<el-button
|
||||||
type="text"
|
type="text"
|
||||||
class="title-button"
|
class="title-button"
|
||||||
:style="{ right: 9 * beilv + 'px', top: 37 * beilv + 'px',fontSize: 35 * beilv + 'px' }"
|
:style="{ right: 9 * beilv + 'px', top: 37 * beilv + 'px', fontSize: 35 * beilv + 'px' }"
|
||||||
@click="changeFullScreen"
|
@click="changeFullScreen"
|
||||||
>
|
>
|
||||||
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
|
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
|
||||||
@ -29,77 +29,150 @@
|
|||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
<el-row class="container-main">
|
<el-row class="container-main">
|
||||||
<el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="9 * beilv">
|
<el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="16 * beilv">
|
||||||
|
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-row type="flex" class="h-full flex-col">
|
<el-row type="flex" class="h-full flex-col">
|
||||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
<div class="div-box-left">
|
||||||
<base-container :beilv="beilv" :height="190" :title="'成品入库作业'" :title-icon="'入库管理'">
|
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||||
<div :style="{ fontSize: 13 * beilv + 'px' }">
|
<base-container :beilv="beilv" :height="190" :title="'成品入库作业'" :title-icon="'入库管理'">
|
||||||
<el-row :style="{ marginBottom: 15 * beilv + 'px'}">
|
<div :style="{ fontSize: 13 * beilv + 'px' }">
|
||||||
<el-col :span="12"><div class="inTest" :style="{ padding: 9 * beilv + 'px'}"><span class="leftText">时间:</span><span class="rightText">2022.12.12 13:12:45</span></div></el-col>
|
<el-row :style="{ marginBottom: 15 * beilv + 'px' }">
|
||||||
<el-col :span="12"><div class="inTest" :style="{ padding: 9 * beilv + 'px'}"><span class="leftText">成品编码:</span><span class="rightText">CP5651696250</span></div></el-col>
|
<el-col :span="12">
|
||||||
</el-row>
|
<div class="inTest" :style="{ padding: 9 * beilv + 'px' }">
|
||||||
<el-row :style="{ marginBottom: 15 * beilv + 'px'}">
|
<span class="leftText">时间:</span>
|
||||||
<el-col :span="12"><div class="inTest" :style="{ padding: 9 * beilv + 'px'}"><span class="leftText">入库作业号:</span><span class="rightText">RQ5055348160</span></div></el-col>
|
<span class="rightText">2022.12.12 13:12:45</span>
|
||||||
<el-col :span="12"><div class="inTest" :style="{ padding: 9 * beilv + 'px'}"><span class="leftText">成品规格:</span><span class="rightText">3.2-1033*2089</span></div></el-col>
|
</div>
|
||||||
</el-row>
|
</el-col>
|
||||||
<el-row>
|
<el-col :span="12">
|
||||||
<el-col :span="12"><div class="inTest" :style="{ padding: 9 * beilv + 'px'}"><span class="leftText">执行叉车:</span><span class="rightText">叉车</span></div></el-col>
|
<div class="inTest" :style="{ padding: 9 * beilv + 'px' }">
|
||||||
<el-col :span="12"><div class="inTest" :style="{ padding: 9 * beilv + 'px'}"><span class="leftText">库位:</span><span class="rightText">成品库D-D区-14</span></div></el-col>
|
<span class="leftText">成品编码:</span>
|
||||||
</el-row>
|
<span class="rightText">CP5651696250</span>
|
||||||
</div>
|
</div>
|
||||||
</base-container>
|
</el-col>
|
||||||
</el-col>
|
</el-row>
|
||||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
<el-row :style="{ marginBottom: 15 * beilv + 'px' }">
|
||||||
<!-- 成品入库列队 -->
|
<el-col :span="12">
|
||||||
<base-container :beilv="beilv" :height="190" :title="'成品入库列队'" :title-icon="'编组'">
|
<div class="inTest" :style="{ padding: 9 * beilv + 'px' }">
|
||||||
<div style="background:rgba(14, 32, 62, 1);border-radius:5px">
|
<span class="leftText">入库作业号:</span>
|
||||||
<base-table
|
<span class="rightText">RQ5055348160</span>
|
||||||
:limit="10"
|
</div>
|
||||||
:beilv="beilv"
|
</el-col>
|
||||||
:show-index="false"
|
<el-col :span="12">
|
||||||
:table-config="inAndOutOfEachLine.tableProps"
|
<div class="inTest" :style="{ padding: 9 * beilv + 'px' }">
|
||||||
:table-data="inAndOutOfEachLine.list"
|
<span class="leftText">成品规格:</span>
|
||||||
/>
|
<span class="rightText">3.2-1033*2089</span>
|
||||||
</div>
|
</div>
|
||||||
</base-container>
|
</el-col>
|
||||||
</el-col>
|
</el-row>
|
||||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
<el-row>
|
||||||
<base-container :beilv="beilv" :height="190" :title="'成品出库作业'" :title-icon="'出库管理'">
|
<el-col :span="12">
|
||||||
<div :style="{ fontSize: 13 * beilv + 'px' }">
|
<div class="inTest" :style="{ padding: 9 * beilv + 'px' }">
|
||||||
<el-row :style="{ marginBottom: 10 * beilv + 'px'}">
|
<span class="leftText">执行叉车:</span>
|
||||||
<el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">时间:</span><span class="rightText">2022.12.12 13:12:45</span></div></el-col>
|
<span class="rightText">叉车</span>
|
||||||
<el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">ERP订单:</span><span class="rightText">TCP203</span></div></el-col>
|
</div>
|
||||||
</el-row>
|
</el-col>
|
||||||
<el-row :style="{ marginBottom: 10 * beilv + 'px'}">
|
<el-col :span="12">
|
||||||
<el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">成品编码:</span><span class="rightText">CP3212128221</span></div></el-col>
|
<div class="inTest" :style="{ padding: 9 * beilv + 'px' }">
|
||||||
<el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">出库作业号:</span><span class="rightText">CQ3727367699</span></div></el-col>
|
<span class="leftText">库位:</span>
|
||||||
</el-row>
|
<span class="rightText">成品库D-D区-14</span>
|
||||||
<el-row :style="{ marginBottom: 10 * beilv + 'px'}">
|
</div>
|
||||||
<el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">成品规格:</span><span class="rightText">3.2-1128*1716</span></div></el-col>
|
</el-col>
|
||||||
<el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">执行叉车:</span><span class="rightText">叉车</span></div></el-col>
|
</el-row>
|
||||||
</el-row>
|
</div>
|
||||||
<el-row>
|
</base-container>
|
||||||
<el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">库位:</span><span class="rightText">成品库C-C区-1</span></div></el-col>
|
</el-col>
|
||||||
<el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">库位前置区:</span><span class="rightText">A区34货位3层</span></div></el-col>
|
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||||
</el-row>
|
<!-- 成品入库列队 -->
|
||||||
</div>
|
<base-container :beilv="beilv" :height="190" :title="'成品入库列队'" :title-icon="'编组'">
|
||||||
</base-container>
|
<div style="background:rgba(14, 32, 62, 1);border-radius:5px;opacity: 0.8;">
|
||||||
</el-col>
|
<base-table
|
||||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
:limit="10"
|
||||||
<!-- 成品出库列队 -->
|
:beilv="beilv"
|
||||||
<base-container :beilv="beilv" :height="190" :title="'成品出库列队'" :title-icon="'编组备份 2'">
|
:show-index="false"
|
||||||
<div style="background:rgba(14, 32, 62, 1);border-radius:5px">
|
:table-config="inAndOutOfEachLine.tableProps"
|
||||||
<base-table
|
:table-data="inAndOutOfEachLine.list"
|
||||||
:limit="10"
|
/>
|
||||||
:beilv="beilv"
|
</div>
|
||||||
:show-index="false"
|
</base-container>
|
||||||
:table-config="OutOfEachLine.tableProps"
|
</el-col>
|
||||||
:table-data="OutOfEachLine.list"
|
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||||
/>
|
<base-container :beilv="beilv" :height="190" :title="'成品出库作业'" :title-icon="'出库管理'">
|
||||||
</div>
|
<div :style="{ fontSize: 13 * beilv + 'px' }">
|
||||||
</base-container>
|
<el-row :style="{ marginBottom: 10 * beilv + 'px' }">
|
||||||
</el-col>
|
<el-col :span="12">
|
||||||
|
<div class="outTest" :style="{ padding: 7 * beilv + 'px' }">
|
||||||
|
<span class="leftText">时间:</span>
|
||||||
|
<span class="rightText">2022.12.12 13:12:45</span>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="outTest" :style="{ padding: 7 * beilv + 'px' }">
|
||||||
|
<span class="leftText">ERP订单:</span>
|
||||||
|
<span class="rightText">TCP203</span>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :style="{ marginBottom: 10 * beilv + 'px' }">
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="outTest" :style="{ padding: 7 * beilv + 'px' }">
|
||||||
|
<span class="leftText">成品编码:</span>
|
||||||
|
<span class="rightText">CP3212128221</span>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="outTest" :style="{ padding: 7 * beilv + 'px' }">
|
||||||
|
<span class="leftText">出库作业号:</span>
|
||||||
|
<span class="rightText">CQ3727367699</span>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :style="{ marginBottom: 10 * beilv + 'px' }">
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="outTest" :style="{ padding: 7 * beilv + 'px' }">
|
||||||
|
<span class="leftText">成品规格:</span>
|
||||||
|
<span class="rightText">3.2-1128*1716</span>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="outTest" :style="{ padding: 7 * beilv + 'px' }">
|
||||||
|
<span class="leftText">执行叉车:</span>
|
||||||
|
<span class="rightText">叉车</span>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="outTest" :style="{ padding: 7 * beilv + 'px' }">
|
||||||
|
<span class="leftText">库位:</span>
|
||||||
|
<span class="rightText">成品库C-C区-1</span>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="outTest" :style="{ padding: 7 * beilv + 'px' }">
|
||||||
|
<span class="leftText">库位前置区:</span>
|
||||||
|
<span class="rightText">A区34货位3层</span>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</base-container>
|
||||||
|
</el-col>
|
||||||
|
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||||
|
<!-- 成品出库列队 -->
|
||||||
|
<base-container :beilv="beilv" :height="190" :title="'成品出库列队'" :title-icon="'编组备份 2'">
|
||||||
|
<div style="background:rgba(14, 32, 62, 1);border-radius:5px;opacity: 0.8;">
|
||||||
|
<base-table
|
||||||
|
:limit="10"
|
||||||
|
:beilv="beilv"
|
||||||
|
:show-index="false"
|
||||||
|
:table-config="OutOfEachLine.tableProps"
|
||||||
|
:table-data="OutOfEachLine.list"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</base-container>
|
||||||
|
</el-col>
|
||||||
|
</div>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
@ -107,7 +180,7 @@
|
|||||||
<!-- 中间栏 -->
|
<!-- 中间栏 -->
|
||||||
<el-row type="flex" class="h-full flex-col">
|
<el-row type="flex" class="h-full flex-col">
|
||||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||||
<base-container :beilv="beilv">
|
<base-container :beilv="beilv" :height="958">
|
||||||
<storage-cockpit-area :beilv="beilv" />
|
<storage-cockpit-area :beilv="beilv" />
|
||||||
</base-container>
|
</base-container>
|
||||||
</el-col>
|
</el-col>
|
||||||
@ -118,58 +191,77 @@
|
|||||||
<!-- 右边栏 设备工单管理 -->
|
<!-- 右边栏 设备工单管理 -->
|
||||||
<el-row type="flex" class="h-full flex-col">
|
<el-row type="flex" class="h-full flex-col">
|
||||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||||
<base-container :beilv="beilv" :title="'设备工单管理'" :title-icon="'编组(1)'">
|
<base-container :beilv="beilv" :title="'库存总览'" :title-icon="'编组(1)'">
|
||||||
<div class="div-box" :style="{textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px',marginBottom: 12 * beilv + 'px'}">
|
<div class="div-box-main">
|
||||||
<span v-html="titleLeftSVG" />
|
<div
|
||||||
<span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
|
class="div-box"
|
||||||
成品库存一览
|
:style="{
|
||||||
</span>
|
textAlign: 'center',
|
||||||
<div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
|
padding: 8 * beilv + 'px',
|
||||||
<new-pie
|
paddingTop: 15 * beilv + 'px',
|
||||||
:id="'pie-chart1'"
|
}"
|
||||||
:show-center-title="true"
|
>
|
||||||
:legend-config="{ left: '0%', top: '30%', itemGap: 5 }"
|
<span v-html="titleLeftSVG" />
|
||||||
:series-data="legendData1"
|
<span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
|
||||||
:beilv="beilv"
|
成品库存一览
|
||||||
:height="226"
|
</span>
|
||||||
/>
|
<div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
|
||||||
</div>
|
<new-pie
|
||||||
<div class="div-box" :style="{textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px', marginBottom: 12 * beilv + 'px'}">
|
:id="'pie-chart1'"
|
||||||
<span v-html="titleLeftSVG" />
|
:show-center-title="true"
|
||||||
<span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
|
:legend-config="{ left: '0%', top: '30%', itemGap: 5 }"
|
||||||
辅材库存一览
|
:series-data="legendData1"
|
||||||
</span>
|
:beilv="beilv"
|
||||||
<div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
|
:height="226"
|
||||||
<new-pie
|
/>
|
||||||
:id="'pie-chart2'"
|
</div>
|
||||||
:show-center-title="true"
|
<div
|
||||||
:legend-config="{ left: '0%', top: '30%', itemGap: 5 }"
|
class="div-box"
|
||||||
:series-data="legendData2"
|
:style="{
|
||||||
:beilv="beilv"
|
textAlign: 'center',
|
||||||
:height="226"
|
padding: 8 * beilv + 'px',
|
||||||
/>
|
paddingTop: 15 * beilv + 'px',
|
||||||
<!-- <new-bar
|
}"
|
||||||
|
>
|
||||||
|
<span v-html="titleLeftSVG" />
|
||||||
|
<span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
|
||||||
|
辅材库存一览
|
||||||
|
</span>
|
||||||
|
<div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
|
||||||
|
<new-pie
|
||||||
|
:id="'pie-chart2'"
|
||||||
|
:show-center-title="true"
|
||||||
|
:legend-config="{ left: '0%', top: '30%', itemGap: 5 }"
|
||||||
|
:series-data="legendData2"
|
||||||
|
:beilv="beilv"
|
||||||
|
:height="226"
|
||||||
|
/>
|
||||||
|
<!-- <new-bar
|
||||||
:name-list="clNameList"
|
:name-list="clNameList"
|
||||||
:data-list="clDataList"
|
:data-list="clDataList"
|
||||||
:height="226"
|
:height="226"
|
||||||
:beilv="beilv"
|
:beilv="beilv"
|
||||||
/>
|
/>
|
||||||
<div class="barDiv" :style="{width: 355* beilv + 'px'}" /> -->
|
<div class="barDiv" :style="{width: 355* beilv + 'px'}" /> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="div-box" :style="{textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px'}">
|
<div
|
||||||
<span v-html="titleLeftSVG" />
|
class="div-box"
|
||||||
<span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
|
:style="{ textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px' }"
|
||||||
备件库存一览
|
>
|
||||||
</span>
|
<span v-html="titleLeftSVG" />
|
||||||
<div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
|
<span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
|
||||||
<new-pie
|
备件库存一览
|
||||||
:id="'pie-chart3'"
|
</span>
|
||||||
:show-center-title="true"
|
<div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
|
||||||
:legend-config="{ left: '0%', top: '30%', itemGap: 5 }"
|
<new-pie
|
||||||
:series-data="legendData3"
|
:id="'pie-chart3'"
|
||||||
:beilv="beilv"
|
:show-center-title="true"
|
||||||
:height="226"
|
:legend-config="{ left: '0%', top: '30%', itemGap: 5 }"
|
||||||
/>
|
:series-data="legendData3"
|
||||||
|
:beilv="beilv"
|
||||||
|
:height="226"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</base-container>
|
</base-container>
|
||||||
</el-col>
|
</el-col>
|
||||||
@ -691,7 +783,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.container-main {
|
.container-main {
|
||||||
padding: 16px;
|
padding: 16px 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.inTest {
|
.inTest {
|
||||||
@ -702,18 +794,44 @@ export default {
|
|||||||
background: url('../../assets/img/OperationalOverview/矩形@2x(1).png') no-repeat;
|
background: url('../../assets/img/OperationalOverview/矩形@2x(1).png') no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
.leftText{
|
.leftText {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 40%;
|
width: 40%;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
.rightText{
|
.rightText {
|
||||||
color:rgba(255, 255, 255, 0.6)
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
}
|
||||||
|
.div-box-left{
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
align-content: space-between;
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
overflow:hidden;
|
||||||
|
}
|
||||||
|
.div-box-main {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
align-content: space-between;
|
||||||
|
margin: calc(16px * var(--beilv));
|
||||||
|
gap: calc(16px * var(--beilv));
|
||||||
|
padding-top: 4em;
|
||||||
|
position: absolute;
|
||||||
|
height: 95%;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
overflow:hidden;
|
||||||
}
|
}
|
||||||
.div-box {
|
.div-box {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
box-shadow: inset 0 0 16px 1px rgba(255, 255, 255, 0.2);
|
box-shadow: inset 0 0 16px 1px rgba(255, 255, 255, 0.2);
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
@ -722,7 +840,7 @@ export default {
|
|||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 40px;
|
bottom: 40px;
|
||||||
left:55px;
|
left: 55px;
|
||||||
transform: skewX(-30deg);
|
transform: skewX(-30deg);
|
||||||
background: linear-gradient(180deg, rgba(59, 76, 118, 0) 0%, #49fbd6 100%);
|
background: linear-gradient(180deg, rgba(59, 76, 118, 0) 0%, #49fbd6 100%);
|
||||||
}
|
}
|
||||||
@ -797,7 +915,7 @@ export default {
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.h-full {
|
.h-full {
|
||||||
height: calc(100vh - 150px);
|
height: calc(100vh - 110px * var(--beilv));
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-col {
|
.flex-col {
|
||||||
|
Loading…
Reference in New Issue
Block a user