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%'], symbolOffset: [0, '-50%'],
symbolSize: [26, 6], symbolSize: [26, 6],
zlevel: 2, 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: { label: {
color: 'rgba(119, 255, 242, 1)', color: 'rgba(119, 255, 242, 1)',
show: true, show: true,
@ -218,10 +223,13 @@ export default {
axisLine: { axisLine: {
lineStyle: { lineStyle: {
type: 'solid', type: 'solid',
color: '#213259', // 左边线的颜色 color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
width: '1'// 坐标线的宽度 width: '1'// 坐标线的宽度
} }
}, },
axisTick: {
show: false
},
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色 color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
@ -231,7 +239,7 @@ export default {
splitLine: { splitLine: {
lineStyle: { lineStyle: {
type: 'dotted', type: 'dotted',
color: '#213259' color: 'rgba(119, 255, 242, 0.2)'
} }
}, },
type: 'value' type: 'value'

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

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

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

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

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

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