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

更新驾驶舱 #7

Merged
zwq merged 1 commits from zwq into master 2022-11-03 10:12:40 +08:00
Conversation 0 Commits 1 Files Changed 5 +69 -63
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 default: 1
}, },
height: { height: {
type: String, type: Number,
default: '300px' default: 300
}, },
showLegend: { showLegend: {
type: Boolean, type: Boolean,

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

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

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

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