mt-fe-group/11-wms
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

更新驾驶舱 #5

Merged
zwq merged 1 commits from zwq into master 2022-10-26 13:22:50 +08:00
Conversation 0 Commits 1 Files Changed 5 +91 -45
5 changed files with 91 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/编组 6@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 MiB

14
src/views/OperationalOverview/components/newBar.vue
View File

@ -148,7 +148,12 @@ export default {
symbolOffset: [0, '-50%'],
symbolSize: [26, 6],
zlevel: 2,
itemStyle: { color: '#2c6e7d' },
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(59, 76, 118, 0)' },
{ offset: 1, color: '#2c6e7d' }
])
},
label: {
color: 'rgba(119, 255, 242, 1)',
show: true,
@ -218,10 +223,13 @@ export default {
axisLine: {
lineStyle: {
type: 'solid',
color: '#213259', // 左边线的颜色
color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
width: '1'// 坐标线的宽度
}
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
@ -231,7 +239,7 @@ export default {
splitLine: {
lineStyle: {
type: 'dotted',
color: '#213259'
color: 'rgba(119, 255, 242, 0.2)'
}
},
type: 'value'

4
src/views/OperationalOverview/components/storageCockpitArea.vue
View File

@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2020-12-29 16:37:56
* @LastEditors: zwq
* @LastEditTime: 2022-10-25 08:51:13
* @LastEditTime: 2022-10-25 16:39:57
* @Description:
-->
<template>
@ -62,7 +62,7 @@ export default {
background-color: rgb(0, 0, 0, 0.5);
}
.areaName {
padding-top: 60%;
margin-top: 100%;
font-weight: 600;
font-size: 24px;
line-height: 30px;

100
src/views/OperationalOverview/storageCockpit.vue
View File

@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2021-07-19 15:18:30
* @LastEditors: zwq
* @LastEditTime: 2022-10-25 10:06:59
* @LastEditTime: 2022-10-26 09:57:19
* @Description:
-->
<template>
@ -36,12 +36,12 @@
<base-container :beilv="beilv" :height="190" :title="'成品入库作业'" :title-icon="'入库管理'">
<div style="width:100%">
<el-row>
<el-col :span="12"><div class="inTest">时间:2022.12.12 13:12:45</div></el-col>
<el-col :span="12"><div class="inTest">成品编码:34394233442</div></el-col>
<el-col :span="12"><div class="inTest">入库作业号:347384734</div></el-col>
<el-col :span="12"><div class="inTest">成品规格:234*345*34</div></el-col>
<el-col :span="12"><div class="inTest">执行叉车:叉车</div></el-col>
<el-col :span="12"><div class="inTest">库位:A区34货位3层</div></el-col>
<el-col :span="12"><div class="inTest"><span class="leftText">时间:</span><span class="rightText">2022.12.12 13:12:45</span></div></el-col>
<el-col :span="12"><div class="inTest"><span class="leftText">成品编码:</span><span class="rightText">34394233442</span></div></el-col>
<el-col :span="12"><div class="inTest"><span class="leftText">入库作业号:</span><span class="rightText">347384734</span></div></el-col>
<el-col :span="12"><div class="inTest"><span class="leftText">成品规格:</span><span class="rightText">234*345*34</span></div></el-col>
<el-col :span="12"><div class="inTest"><span class="leftText">执行叉车:</span><span class="rightText">叉车</span></div></el-col>
<el-col :span="12"><div class="inTest"><span class="leftText">库位:</span><span class="rightText">A区34货位3层</span></div></el-col>
</el-row>
</div>
</base-container>
@ -61,14 +61,14 @@
<base-container :beilv="beilv" :height="190" :title="'成品出库作业'" :title-icon="'出库管理'">
<div style="width:100%">
<el-row>
<el-col :span="12"><div class="outTest">时间:2022.12.12 13:12:45</div></el-col>
<el-col :span="12"><div class="outTest">ERP订单::34394233442</div></el-col>
<el-col :span="12"><div class="outTest">成品编码:34394233442</div></el-col>
<el-col :span="12"><div class="outTest">出库作业号::347384734</div></el-col>
<el-col :span="12"><div class="outTest">成品规格:234*345*34</div></el-col>
<el-col :span="12"><div class="outTest">执行叉车:叉车</div></el-col>
<el-col :span="12"><div class="outTest">库位:A区34货位3层</div></el-col>
<el-col :span="12"><div class="outTest">库位前置区::A区34货位3层</div></el-col>
<el-col :span="12"><div class="outTest"><span class="leftText">时间:</span><span class="rightText">2022.12.12 13:12:45</span></div></el-col>
<el-col :span="12"><div class="outTest"><span class="leftText">ERP订单:</span><span class="rightText">34394233442</span></div></el-col>
<el-col :span="12"><div class="outTest"><span class="leftText">成品编码:</span><span class="rightText">34394233442</span></div></el-col>
<el-col :span="12"><div class="outTest"><span class="leftText">出库作业号:</span><span class="rightText">347384734</span></div></el-col>
<el-col :span="12"><div class="outTest"><span class="leftText">成品规格:</span><span class="rightText">234*345*34</span></div></el-col>
<el-col :span="12"><div class="outTest"><span class="leftText">执行叉车:</span><span class="rightText">叉车</span></div></el-col>
<el-col :span="12"><div class="outTest"><span class="leftText">库位:</span><span class="rightText">A区34货位3层</span></div></el-col>
<el-col :span="12"><div class="outTest"><span class="leftText">库位前置区:</span><span class="rightText">A区34货位3层</span></div></el-col>
</el-row>
</div>
</base-container>
@ -113,12 +113,12 @@
:id="'pie-chart1'"
:show-center-title="true"
:legend-config="{ left: '1%', top: '30%', itemGap: 5 }"
:series-data="legendData3"
:series-data="legendData1"
:beilv="beilv"
:height="'220'"
/>
</div>
<div class="div-box" style="text-align: center;">
<div class="div-box" style="text-align: center;position:relative">
<span v-html="titleLeftSVG" />
<span style="color: #01CFCC; font-size: 15px; line-height: 18px;">
成品库存一览2
@ -130,6 +130,7 @@
:height="'220'"
:beilv="beilv"
/>
<div class="barDiv" :style="{width: 340* beilv + 'px'}" />
</div>
<div class="div-box" style="text-align: center;">
<span v-html="titleLeftSVG" />
@ -197,6 +198,33 @@ const legendData3 = [
value: 77
}
]
const legendData1 = [
{
name: 'A',
icon: 'circle',
value: 134
},
{
name: 'B',
icon: 'circle',
value: 125
},
{
name: 'C',
icon: 'circle',
value: 107
},
{
name: 'D',
icon: 'circle',
value: 61
},
{
name: 'E',
icon: 'circle',
value: 153
}
]
const clDataList = [
{
topColor: 'rgba(59, 76, 118, 0.2)',
@ -205,14 +233,7 @@ const clDataList = [
data: [64, 91, 55, 65, 37, 77]
}
]
const clNameList = [
'A',
'B',
'C',
'D',
'E',
'F'
]
const clNameList = ['A', 'B', 'C', 'D', 'E', 'F']
const titleLeftSVG = `<svg
width="56px"
height="13px"
@ -277,6 +298,7 @@ export default {
},
data() {
return {
legendData1,
legendData3,
clNameList,
clDataList,
@ -358,7 +380,6 @@ export default {
})
},
methods: {
change() {
this.isFullScreen = screenfull.isFullscreen
},
@ -571,7 +592,7 @@ export default {
.visual-container {
width: 100%;
min-width: 960px;
background: url('../../assets/img/OperationalOverview/back.png') no-repeat;
background: url('../../assets/img/编组 6@2x.png') no-repeat;
background-size: cover;
.container-title {
width: 100%;
@ -594,16 +615,22 @@ export default {
background: url('../../assets/img/OperationalOverview/矩形@2x.png') no-repeat;
background-size: 100% 100%;
padding: 5px 10px;
margin: 3px 0;
text-align: center;
margin-bottom: 10px;
}
.outTest {
font-size: 1.2em;
background: url('../../assets/img/OperationalOverview/矩形@2x(1).png') no-repeat;
background-size: 100% 100%;
padding: 5px 10px;
margin: 3px 0;
text-align: center;
margin-bottom: 10px;
}
.leftText{
display: inline-block;
width: 100px;
text-align: right;
}
.rightText{
color:rgba(255, 255, 255, 0.6)
}
.div-box {
background: transparent;
@ -611,8 +638,19 @@ export default {
display: inline-block;
padding: 10px;
width: 100%;
border-radius: 4px;
margin-bottom: 10px;
}
.barDiv {
height: 46px;
opacity: 0.5;
position: absolute;
bottom: 40px;
left:55px;
transform: skewX(-30deg);
background: linear-gradient(180deg, rgba(59, 76, 118, 0) 0%, #49fbd6 100%);
border: 1px solid #3c7080;
}
.now-team-title {
margin: 0;
margin-top: -1em;

4
src/views/wmsHome/index.vue
View File

@ -80,7 +80,7 @@ export default {
padding-top: 25vh;
.choicepart-item {
display: inline-block;
width: 184px;
width: 180px;
height: 223px;
margin: 40px;
background: url('../../assets/img/choicepart/choice-item-back.png') no-repeat;
@ -93,7 +93,7 @@ export default {
cursor: pointer;
position: relative;
img {
width: 104px;
width: 90px;
height: 99px;
position: absolute;
top: 32px;