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

更新驾驶舱 #18

Merged
zwq merged 1 commits from zwq into master 2022-11-24 16:20:47 +08:00
Conversation 0 Commits 1 Files Changed 4 +327 -167
4 changed files with 327 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/App.vue
View File

@ -1,3 +1,10 @@
<!--
* @Author: zwq
* @Date: 2022-10-20 09:22:39
* @LastEditors: zwq
* @LastEditTime: 2022-11-24 10:37:57
* @Description:
-->
<template>
<div id="app">
<router-view />
@ -7,7 +14,18 @@
<script>
export default {
name: 'App',
data() {
return {
beilv: 1
}
},
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>

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

@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2022-01-21 14:43:06
* @LastEditors: zwq
* @LastEditTime: 2022-11-17 16:35:33
* @LastEditTime: 2022-11-24 16:17:09
* @Description:
-->
<template>
@ -171,7 +171,6 @@ export default {
},
// 默认的series配置
series: {
center: ['50%', '55%'],
radius: ['50%', '70%'],
silent: true,
avoidLabelOverlap: false,
@ -196,8 +195,18 @@ export default {
}
},
mounted() {
window.addEventListener('resize', () => {
if (this.chart) {
this.chart.resize()
this.$nextTick(() => {
// 重新绘制文本大小
this.initChart()
})
}
})
this.$nextTick(() => {
this.initChart()
this.chart.resize()
})
},
beforeDestroy() {
@ -213,23 +222,24 @@ export default {
this.chart.setOption({
title: this.showCenterTitle
? {
text: this.seriesData.reduce((pre, cur) => pre + cur.value, 0),
subtext: '总共',
top: '48%',
left: '49%',
text: `${this.seriesData.reduce((pre, cur) => pre + cur.value, 0)}\n{name|总共}`,
top: 'center',
left: '48%',
textAlign: 'center',
itemGap: 5,
textStyle: {
color: '#fff',
fontSize: 26 * this.beilv,
fontWeight: 400,
lineHeight: 15
},
subtextStyle: {
lineHeight: 15 * this.beilv,
rich: {
name: {
color: 'rgba(255, 255, 255, 0.7)',
fontWeight: 400,
textAlign: 'center',
fontSize: 14 * this.beilv,
lineHeight: 20
lineHeight: 20 * this.beilv
}
}
}
}
: {},
@ -262,7 +272,8 @@ export default {
normal: {
label: {
show: true,
fontSize: 14 * this.beilv,
fontSize: 15 * this.beilv,
lineHeight: 18,
formatter: '{d}%\n{name|{b}}',
rich: {
name: {

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

@ -2,13 +2,18 @@
* @Author: zwq
* @Date: 2020-12-29 16:37:56
* @LastEditors: zwq
* @LastEditTime: 2022-11-17 16:39:20
* @LastEditTime: 2022-11-24 15:47:14
* @Description:
-->
<template>
<div class="container">
<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
:style="{ fontSize: 22 * beilv + 'px', width: 40 * beilv + 'px' }"
class="box-name title"
@ -51,13 +56,10 @@
<div
v-for="i in areaArr1"
: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"
>
<div
:style="{ fontSize: 22 * beilv + 'px', width: 40 * beilv + 'px',color: '#fff' }"
class="box-name title"
>
<div :style="{ fontSize: 22 * beilv + 'px', width: 40 * beilv + 'px', color: '#fff' }" class="box-name title">
{{ i }}
</div>
<div v-if="i === '辅材库'" class="locationFlex" style="margin-left:0">
@ -152,12 +154,23 @@ export default {
}
}
},
methods: {
}
methods: {}
}
</script>
<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 {
border: 1px dotted rgba(94, 195, 216, 0.6);
display: flex;

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

@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2021-07-19 15:18:30
* @LastEditors: zwq
* @LastEditTime: 2022-11-17 16:04:14
* @LastEditTime: 2022-11-24 16:01:46
* @Description:
-->
<template>
@ -29,23 +29,55 @@
</el-row>
<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-row type="flex" class="h-full flex-col">
<div class="div-box-left">
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
<base-container :beilv="beilv" :height="190" :title="'成品入库作业'" :title-icon="'入库管理'">
<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">CP5651696250</span></div></el-col>
<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">CP5651696250</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">RQ5055348160</span></div></el-col>
<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>
<el-col :span="12">
<div class="inTest" :style="{ padding: 9 * beilv + 'px' }">
<span class="leftText">入库作业号:</span>
<span class="rightText">RQ5055348160</span>
</div>
</el-col>
<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>
</el-row>
<el-row>
<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">成品库D-D区-14</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">成品库D-D区-14</span>
</div>
</el-col>
</el-row>
</div>
</base-container>
@ -53,7 +85,7 @@
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
<!-- 成品入库列队 -->
<base-container :beilv="beilv" :height="190" :title="'成品入库列队'" :title-icon="'编组'">
<div style="background:rgba(14, 32, 62, 1);border-radius:5px">
<div style="background:rgba(14, 32, 62, 1);border-radius:5px;opacity: 0.8;">
<base-table
:limit="10"
:beilv="beilv"
@ -68,20 +100,60 @@
<base-container :beilv="beilv" :height="190" :title="'成品出库作业'" :title-icon="'出库管理'">
<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">TCP203</span></div></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-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-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-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>
@ -89,7 +161,7 @@
<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">
<div style="background:rgba(14, 32, 62, 1);border-radius:5px;opacity: 0.8;">
<base-table
:limit="10"
:beilv="beilv"
@ -100,6 +172,7 @@
</div>
</base-container>
</el-col>
</div>
</el-row>
</el-col>
@ -107,7 +180,7 @@
<!-- 中间栏 -->
<el-row type="flex" class="h-full flex-col">
<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" />
</base-container>
</el-col>
@ -118,8 +191,16 @@
<!-- 右边栏 设备工单管理 -->
<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="{textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px',marginBottom: 12 * beilv + 'px'}">
<base-container :beilv="beilv" :title="'库存总览'" :title-icon="'编组(1)'">
<div class="div-box-main">
<div
class="div-box"
:style="{
textAlign: 'center',
padding: 8 * beilv + 'px',
paddingTop: 15 * beilv + 'px',
}"
>
<span v-html="titleLeftSVG" />
<span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
成品库存一览
@ -134,7 +215,14 @@
:height="226"
/>
</div>
<div class="div-box" :style="{textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px', marginBottom: 12 * beilv + 'px'}">
<div
class="div-box"
:style="{
textAlign: 'center',
padding: 8 * beilv + 'px',
paddingTop: 15 * beilv + 'px',
}"
>
<span v-html="titleLeftSVG" />
<span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
辅材库存一览
@ -156,7 +244,10 @@
/>
<div class="barDiv" :style="{width: 355* beilv + 'px'}" /> -->
</div>
<div class="div-box" :style="{textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px'}">
<div
class="div-box"
:style="{ textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px' }"
>
<span v-html="titleLeftSVG" />
<span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
备件库存一览
@ -171,6 +262,7 @@
:height="226"
/>
</div>
</div>
</base-container>
</el-col>
</el-row>
@ -691,7 +783,7 @@ export default {
}
}
.container-main {
padding: 16px;
padding: 16px 8px;
}
}
.inTest {
@ -708,12 +800,38 @@ export default {
text-align: right;
}
.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 {
background: transparent;
box-shadow: inset 0 0 16px 1px rgba(255, 255, 255, 0.2);
display: inline-block;
width: 100%;
border-radius: 4px;
}
@ -797,7 +915,7 @@ export default {
<style lang="scss" scoped>
.h-full {
height: calc(100vh - 150px);
height: calc(100vh - 110px * var(--beilv));
}
.flex-col {