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

更新驾驶舱

Browse Source
This commit is contained in:
朱文强 2022-11-03 10:11:06 +08:00
parent cd977fbb29
commit 3501a8f8f2
5 changed files with 69 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/OperationalOverview/title (2).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

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

@ -31,8 +31,8 @@ export default {
default: 1
},
height: {
type: String,
default: '300px'
type: Number,
default: 300
},
showLegend: {
type: Boolean,

8
src/views/OperationalOverview/components/newPie.vue
View File

@ -2,11 +2,11 @@
* @Author: zwq
* @Date: 2022-01-21 14:43:06
* @LastEditors: zwq
* @LastEditTime: 2022-10-25 09:30:47
* @LastEditTime: 2022-11-02 16:52:34
* @Description:
-->
<template>
<div :id="id" :class="className" :style="{ height: computedHeight, width: width }" />
<div :id="id" :class="className" :style="{ height: height * beilv + 'px', width: width }" />
</template>
<script>
@ -35,8 +35,8 @@ export default {
default: 1
},
height: {
type: String,
default: '300px'
type: Number,
default: 300
},
showCenterTitle: {
type: Boolean,

14
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 16:39:57
* @LastEditTime: 2022-11-03 08:58:07
* @Description:
-->
<template>
@ -10,7 +10,7 @@
<div
v-for="i in areaArr"
:key="i"
:style="{ height: 135 * beilv + 'px', margin: 8 * beilv + 'px' + ' 0' }"
:style="{ height: 135 * beilv + 'px', marginTop: 11 * beilv + 'px' }"
class="area"
>
<el-row>
@ -53,13 +53,13 @@ export default {
<style scoped>
.area {
background: url('../../../assets/img/OperationalOverview/编组36.png') no-repeat;
background-image: linear-gradient(to right, rgba(59, 76, 118,0.6), transparent);
background-size: 100% 100%;
padding: 5px 10px;
margin: 3px 0;
padding: 5px 0;
padding-left: 15px;
text-align: center;
border-radius: 4px;
background-color: rgb(0, 0, 0, 0.5);
border: 1px dotted #5EC3D8;
}
.areaName {
margin-top: 100%;
@ -68,7 +68,7 @@ export default {
line-height: 30px;
}
.locationFlex{
margin-left: 15px;
margin-left: 25px;
display: flex;
flex-wrap: wrap;
align-content: space-between;

106
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-26 09:57:19
* @LastEditTime: 2022-11-03 10:06:28
* @Description:
-->
<template>
@ -34,14 +34,18 @@
<el-row type="flex" class="h-full flex-col">
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
<base-container :beilv="beilv" :height="190" :title="'成品入库作业'" :title-icon="'入库管理'">
<div style="width:100%">
<div :style="{ fontSize: 13 * beilv + 'px' }">
<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">2022.12.12 13:12:45</span></div></el-col>
<el-col :span="12"><div class="inTest" :style="{ padding: 9 * beilv + 'px'}"><span class="leftText">成品编码:</span><span class="rightText">34394233442</span></div></el-col>
</el-row>
<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">347384734</span></div></el-col>
<el-col :span="12"><div class="inTest" :style="{ padding: 9 * beilv + 'px'}"><span class="leftText">成品规格:</span><span class="rightText">234*345*34</span></div></el-col>
</el-row>
<el-row>
<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-col :span="12"><div class="inTest" :style="{ padding: 9 * beilv + 'px'}"><span class="leftText">执行叉车:</span><span class="rightText">叉车</span></div></el-col>
<el-col :span="12"><div class="inTest" :style="{ padding: 9 * beilv + 'px'}"><span class="leftText">库位:</span><span class="rightText">A区34货位3层</span></div></el-col>
</el-row>
</div>
</base-container>
@ -49,26 +53,34 @@
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
<!-- 成品入库列队 -->
<base-container :beilv="beilv" :height="190" :title="'成品入库列队'" :title-icon="'编组'">
<base-table
:limit="10"
:beilv="beilv"
:table-config="inAndOutOfEachLine.tableProps"
:table-data="inAndOutOfEachLine.list"
/>
<div style="background:rgba(14, 32, 62, 1);border-radius:5px">
<base-table
:limit="10"
:beilv="beilv"
:table-config="inAndOutOfEachLine.tableProps"
:table-data="inAndOutOfEachLine.list"
/>
</div>
</base-container>
</el-col>
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
<base-container :beilv="beilv" :height="190" :title="'成品出库作业'" :title-icon="'出库管理'">
<div style="width:100%">
<div :style="{ fontSize: 13 * beilv + 'px' }">
<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">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">34394233442</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">34394233442</span></div></el-col>
<el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">出库作业号:</span><span class="rightText">347384734</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">234*345*34</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"><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-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 :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>
@ -76,12 +88,14 @@
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
<!-- 成品入库列队 -->
<base-container :beilv="beilv" :height="190" :title="'成品出库列队'" :title-icon="'编组备份 2'">
<base-table
:limit="10"
:beilv="beilv"
:table-config="inAndOutOfEachLine.tableProps"
:table-data="inAndOutOfEachLine.list"
/>
<div style="background:rgba(14, 32, 62, 1);border-radius:5px">
<base-table
:limit="10"
:beilv="beilv"
:table-config="inAndOutOfEachLine.tableProps"
:table-data="inAndOutOfEachLine.list"
/>
</div>
</base-container>
</el-col>
</el-row>
@ -103,9 +117,9 @@
<el-row type="flex" class="h-full flex-col">
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
<base-container :beilv="beilv" :title="'设备工单管理'" :title-icon="'编组(1)'">
<div class="div-box" style="text-align: center;">
<div class="div-box" :style="{textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px',marginBottom: 12 * beilv + 'px'}">
<span v-html="titleLeftSVG" />
<span style="color: #01CFCC; font-size: 15px; line-height: 18px;">
<span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
成品库存一览1
</span>
<div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
@ -115,26 +129,26 @@
:legend-config="{ left: '1%', top: '30%', itemGap: 5 }"
:series-data="legendData1"
:beilv="beilv"
:height="'220'"
:height="226"
/>
</div>
<div class="div-box" style="text-align: center;position:relative">
<div class="div-box" :style="{textAlign: 'center', position: 'relative', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px', marginBottom: 12 * beilv + 'px'}">
<span v-html="titleLeftSVG" />
<span style="color: #01CFCC; font-size: 15px; line-height: 18px;">
<span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
成品库存一览2
</span>
<div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
<new-bar
:name-list="clNameList"
:data-list="clDataList"
:height="'220'"
:height="226"
:beilv="beilv"
/>
<div class="barDiv" :style="{width: 340* beilv + 'px'}" />
<div class="barDiv" :style="{width: 345* beilv + 'px'}" />
</div>
<div class="div-box" style="text-align: center;">
<div class="div-box" :style="{textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px'}">
<span v-html="titleLeftSVG" />
<span style="color: #01CFCC; font-size: 15px; line-height: 18px;">
<span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
成品库存一览3
</span>
<div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
@ -144,7 +158,7 @@
:legend-config="{ left: '1%', top: '30%', itemGap: 5 }"
:series-data="legendData3"
:beilv="beilv"
:height="'220'"
:height="226"
/>
</div>
</base-container>
@ -596,13 +610,13 @@ export default {
background-size: cover;
.container-title {
width: 100%;
background: url('../../assets/img/OperationalOverview/title.png') no-repeat;
background: url('../../assets/img/OperationalOverview/title (2).png') no-repeat;
background-size: 100% 100%;
color: #00fff0;
color: #fff;
text-align: center;
.title-button {
color: #00fff0;
font-size: 20px;
font-size: 32px;
position: absolute;
}
}
@ -611,18 +625,12 @@ export default {
}
}
.inTest {
font-size: 1.2em;
background: url('../../assets/img/OperationalOverview/矩形@2x.png') no-repeat;
background-size: 100% 100%;
padding: 5px 10px;
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-bottom: 10px;
}
.leftText{
display: inline-block;
@ -636,10 +644,8 @@ export default {
background: transparent;
box-shadow: inset 0 0 16px 1px rgba(255, 255, 255, 0.5);
display: inline-block;
padding: 10px;
width: 100%;
border-radius: 4px;
margin-bottom: 10px;
}
.barDiv {
height: 46px;