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

Merge pull request '更新驾驶舱' (#15) from zwq into master

Browse Source 
Reviewed-on: #15
This commit is contained in:
朱文强 2022-11-17 16:41:53 +08:00
commit 6f5607a841
3 changed files with 358 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
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-11 15:27:23
* @LastEditTime: 2022-11-17 16:35:33
* @Description:
-->
<template>
@ -93,6 +93,7 @@ export default {
// 默认的legend配置
legend: {
orient: 'vertical',
show: false,
bottom: 0,
itemHeight: 10,
itemWidth: 10,
@ -112,16 +113,16 @@ export default {
rich: {
a: {
align: 'center',
fontSize: 13,
fontSize: 12,
fontWeight: 400,
color: 'rgba(255, 255, 255, 0.7)',
padding: [0, 4],
padding: [0, 1],
lineHeight: 16
},
b: {
// verticalAlign: 'top',
align: 'center',
fontSize: 13,
fontSize: 12,
fontWeight: 400,
color: 'rgba(255, 255, 255)'
},
@ -170,7 +171,7 @@ export default {
},
// 默认的series配置
series: {
center: ['60%', '55%'],
center: ['50%', '55%'],
radius: ['50%', '70%'],
silent: true,
avoidLabelOverlap: false,
@ -215,19 +216,19 @@ export default {
text: this.seriesData.reduce((pre, cur) => pre + cur.value, 0),
subtext: '总共',
top: '48%',
left: '59%',
left: '49%',
textAlign: 'center',
itemGap: 5,
textStyle: {
color: '#fff',
fontSize: 26,
fontSize: 26 * this.beilv,
fontWeight: 400,
lineHeight: 15
},
subtextStyle: {
color: 'rgba(255, 255, 255, 0.7)',
fontWeight: 400,
fontSize: 14,
fontSize: 14 * this.beilv,
lineHeight: 20
}
}
@ -259,6 +260,17 @@ export default {
...this.seriesConfig,
itemStyle: {
normal: {
label: {
show: true,
fontSize: 14 * this.beilv,
formatter: '{d}%\n{name|{b}}',
rich: {
name: {
color: 1,
fontSize: 10 * this.beilv
}
}
},
color: (list) => {
var colorList = [
{
@ -292,10 +304,10 @@ export default {
}
}
},
label: {
formatter: [
'{d}%'
].join('\n')
labelLine: {
length: 8,
length2: 15,
maxSurfaceAngle: 80
},
data: this.seriesData.map((item, index) => {
item.label = {

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

@ -2,42 +2,107 @@
* @Author: zwq
* @Date: 2020-12-29 16:37:56
* @LastEditors: zwq
* @LastEditTime: 2022-11-08 16:06:39
* @LastEditTime: 2022-11-17 16:39:20
* @Description:
-->
<template>
<div class="container">
<div
v-for="i in areaArr"
:key="i"
:style="{ height: 135 * beilv + 'px',width: 730 * beilv + 'px', marginTop: 11 * beilv + 'px' }"
class="area"
>
<el-row>
<el-col :span="1">
<div class="areaName" :style="{ fontSize: 24 * beilv + 'px',lineHeight: 40 * beilv + 'px', marginTop: 20 * beilv + 'px' }">{{ i }}</div>
</el-col>
<el-col :span="23">
<div>
<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"
:class="titleClick === i.title ? 'title-click' : ''"
@click="titleClick = i.title"
>
{{ i.title }}
</div>
<div class="bg" :style="{ height: 145 * beilv + 'px', width: 685 * beilv + 'px' }">
<div
:style="{ fontSize: 22 * beilv + 'px', height: 116 * beilv + 'px', width: 26 * beilv + 'px' }"
class="box-name subtitle"
>
{{ i.subtitle }}
</div>
<div class="locationFlex">
<div
v-for="l in 72"
:key="l"
:class="l > Math.round(Math.random() * 100) ? 'waring' : ''"
:style="{
marginRight: 6 * beilv + 'px',
marginTop: 2 * beilv + 'px',
marginBottom: 1 * beilv + 'px',
height: 28 * beilv + 'px',
lineHeight: 28 * beilv + 'px',
fontSize: 12 * beilv + 'px'
}"
class="location"
>
{{ l }}
<div v-for="j in 4" :key="j+'div1'" class="finished">
<div
v-for="(l,index) in 19"
:key="l+'box1'"
:class="l > Math.round(Math.random() * 80) ? 'waring' : ''"
:style="{
marginRight: 2 * beilv + 'px',
marginTop: 2 * beilv + 'px',
marginBottom: 1 * beilv + 'px',
height: 26 * beilv + 'px',
lineHeight: 28 * beilv + 'px',
fontSize: 12 * beilv + 'px'
}"
class="location"
>
{{ j + 4*index }}
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</div>
<!-- 辅材库 -->
<div
v-for="i in areaArr1"
:key="i+'div2'"
:style="{ height: 135 * beilv + 'px', width: 730 * beilv + 'px',marginTop: 13 * beilv + 'px', }"
class="box2"
>
<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">
<div v-for="j in 4" :key="j+'div3'" class="Auxiliary">
<div
v-for="(l,index) in 19"
:key="l+'box5'"
:class="[num.indexOf(j + 4*index)>0 ? 'waring' : '',l===10? 'interlayer' : '']"
:style="{
marginRight: 2 * beilv + 'px',
marginTop: 2 * beilv + 'px',
height: 26 * beilv + 'px',
lineHeight: 28 * beilv + 'px',
fontSize: 12 * beilv + 'px'
}"
class="location"
>
{{ j + 4*index }}
</div>
</div>
</div>
<div v-else class="locationFlex" style="margin-left:0">
<div v-for="j in [3,2,1]" :key="j+'div4'">
<div
v-for="l in 20"
:key="l+'box9'"
:class="num.indexOf(l + 4*j)>0 ? 'waring' : ''"
:style="{
marginRight: 2 * beilv + 'px',
marginTop: 2 * beilv + 'px',
marginBottom: 1 * beilv + 'px',
height: 38 * beilv + 'px',
width: '4.5%',
lineHeight: 19 * beilv + 'px',
fontSize: 12 * beilv + 'px'
}"
class="location"
>
<div style="border-bottom:1px dotted rgba(255,255,255,0.5);">
{{ j }}
</div>
<div>{{ l }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
@ -55,38 +120,123 @@ export default {
},
data() {
return {
areaArr: ['A区', 'B区', 'C区', 'D区', 'E区', 'F区']
areaArr: [
{
title: '成品库 A',
subtitle: 'A 区'
},
{
title: '成品库 B',
subtitle: 'B 区'
},
{
title: '成品库 C',
subtitle: 'C 区'
},
{
title: '成品库 D',
subtitle: 'D 区'
}
],
titleClick: '成品库 A',
locationArr: [1, 5, 9],
areaArr1: ['辅材库', '备件库'],
num: []
}
},
methods: {}
created() {
for (let i = 0; i <= 30; i++) {
this.num.push(Math.round(Math.random() * 90))
if (i === 30) {
console.log(this.num)
}
}
},
methods: {
}
}
</script>
<style scoped>
.area {
background-image: linear-gradient(to right, rgba(59, 76, 118, 0.6), transparent);
background-size: 100% 100%;
padding: 5px 0;
padding-left: 15px;
text-align: center;
border-radius: 4px;
border: 1px dotted #5ec3d8;
.box {
border: 1px dotted rgba(94, 195, 216, 0.6);
display: flex;
align-items: center;
justify-content: left;
}
.areaName {
.box::after {
width: 95%;
height: 10px;
display: block;
margin: 0 auto;
border-bottom: 1px solid red;
}
.box:first-child {
border-radius: 4px 4px 0 0;
}
.box:last-child {
border-radius: 0 0 4px 4px;
}
.bg {
background-image: linear-gradient(to right, rgba(48, 112, 125, 0.6), transparent);
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: left;
}
.box-name {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.title {
font-weight: 600;
height: 100%;
cursor: pointer;
color: #afb8c5;
background-color: transparent;
}
.title-click {
color: #fff;
background-color: rgba(48, 112, 125, 0.6);
}
.subtitle {
font-weight: 400;
margin-left: 8px;
border-radius: 4px;
border: 1px dotted rgba(94, 195, 216, 0.6);
}
.locationFlex {
margin-left: 25px;
display: flex;
flex-wrap: wrap;
align-content: space-between;
width: 100%;
margin-left: 10px;
text-align: center;
}
.location {
display: inline-block;
background: #63cf74;
width: 4.5%;
width: 4.7%;
border-radius: 4px;
}
.waring {
background: #ff5d6b;
}
.box2{
background-image: linear-gradient(to right, rgba(48, 112, 125, 0.6), transparent);
background-size: 100% 100%;
border: 1px dotted rgba(94, 195, 216, 0.6);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: left;
}
.finished:nth-child(2){
margin-bottom: 8px;
}
.Auxiliary:nth-child(2){
margin-bottom: 8px;
}
.interlayer{
margin-left: 8px;
}
</style>

207
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-11 15:14:51
* @LastEditTime: 2022-11-17 16:04:14
* @Description:
-->
<template>
@ -57,6 +57,7 @@
<base-table
:limit="10"
:beilv="beilv"
:show-index="false"
:table-config="inAndOutOfEachLine.tableProps"
:table-data="inAndOutOfEachLine.list"
/>
@ -86,14 +87,15 @@
</base-container>
</el-col>
<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">
<base-table
:limit="10"
:beilv="beilv"
:table-config="inAndOutOfEachLine.tableProps"
:table-data="inAndOutOfEachLine.list"
:show-index="false"
:table-config="OutOfEachLine.tableProps"
:table-data="OutOfEachLine.list"
/>
</div>
</base-container>
@ -120,42 +122,50 @@
<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; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
成品库存一览1
成品库存一览
</span>
<div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
<new-pie
:id="'pie-chart1'"
:show-center-title="true"
:legend-config="{ left: '1%', top: '30%', itemGap: 5 }"
:legend-config="{ left: '0%', top: '30%', itemGap: 5 }"
:series-data="legendData1"
:beilv="beilv"
:height="226"
/>
</div>
<div class="div-box" :style="{textAlign: 'center', position: 'relative', 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', marginBottom: 12 * beilv + 'px'}">
<span v-html="titleLeftSVG" />
<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
<new-pie
:id="'pie-chart2'"
:show-center-title="true"
:legend-config="{ left: '0%', top: '30%', itemGap: 5 }"
:series-data="legendData2"
:beilv="beilv"
:height="226"
/>
<!-- <new-bar
:name-list="clNameList"
:data-list="clDataList"
:height="226"
:beilv="beilv"
/>
<div class="barDiv" :style="{width: 355* beilv + 'px'}" />
<div class="barDiv" :style="{width: 355* beilv + 'px'}" /> -->
</div>
<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' }">
成品库存一览3
备件库存一览
</span>
<div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
<new-pie
:id="'pie-chart3'"
:show-center-title="true"
:legend-config="{ left: '1%', top: '30%', itemGap: 5 }"
:legend-config="{ left: '0%', top: '30%', itemGap: 5 }"
:series-data="legendData3"
:beilv="beilv"
:height="226"
@ -174,7 +184,7 @@
import baseContainer from './components/baseContainer'
import baseTable from './components/baseTable'
import newPie from './components/newPie'
import newBar from './components/newBar'
// import newBar from './components/newBar'
import storageCockpitArea from './components/storageCockpitArea'
// import LineChart1 from './components/LineChart'
// import LineChart2 from './components/LineChart'
@ -185,58 +195,85 @@ import screenfull from 'screenfull'
import axios from '@/utils/request'
import moment from 'moment'
const legendData3 = [
{
name: 'A',
icon: 'circle',
value: 196
},
{
name: 'B',
icon: 'circle',
value: 111
},
{
name: 'C',
icon: 'circle',
value: 89
},
{
name: 'D',
icon: 'circle',
value: 77
},
{
name: 'E',
icon: 'circle',
value: 77
}
]
const legendData1 = [
{
name: 'A',
name: '2.0-1128*1716',
icon: 'circle',
value: 134
value: 128
},
{
name: 'B',
name: '2.0-1128*2251',
icon: 'circle',
value: 125
value: 225
},
{
name: 'C',
name: '2.0-1128*2272',
icon: 'circle',
value: 107
value: 24
},
{
name: 'D',
name: '3.2-1128*1716',
icon: 'circle',
value: 61
value: 77
},
{
name: 'E',
name: '3.2-1128*1716',
icon: 'circle',
value: 153
value: 93
}
]
const legendData2 = [
{
name: '2.0-1128*1716',
icon: 'circle',
value: 128
},
{
name: '2.0-1128*2251',
icon: 'circle',
value: 104
},
{
name: '2.0-1128*2272',
icon: 'circle',
value: 24
},
{
name: '3.2-1128*1716',
icon: 'circle',
value: 77
},
{
name: '3.2-1128*1716',
icon: 'circle',
value: 93
}
]
const legendData3 = [
{
name: '2.0-1128*1716',
icon: 'circle',
value: 128
},
{
name: '2.0-1128*2251',
icon: 'circle',
value: 96
},
{
name: '2.0-1128*2272',
icon: 'circle',
value: 201
},
{
name: '3.2-1128*1716',
icon: 'circle',
value: 77
},
{
name: '3.2-1128*1716',
icon: 'circle',
value: 66
}
]
const clDataList = [
@ -303,8 +340,8 @@ export default {
baseContainer,
baseTable,
storageCockpitArea,
newPie,
newBar
newPie
// newBar
// LineChart1,
// LineChart2,
// LinearBarChart
@ -313,6 +350,7 @@ export default {
data() {
return {
legendData1,
legendData2,
legendData3,
clNameList,
clDataList,
@ -327,25 +365,58 @@ export default {
total: 0,
list: [
{
test1: '392849829',
test2: '叉车1',
test3: '392849829',
test4: '322*234*12',
test5: '库位1'
test1: 'RQ5055348178',
test2: 'D4288603319',
test3: 'CP5651696263',
test4: '100*50mm',
test5: 'A区'
},
{
test1: '392849829',
test2: '叉车2',
test3: '392849829',
test4: '322*234*12',
test5: '库位2'
test1: 'RQ3722771932',
test2: 'D3732827773',
test3: 'CP4140258231',
test4: '100*100mm',
test5: 'K区'
},
{
test1: '392849829',
test2: '叉车3',
test3: '392849829',
test4: '322*234*12',
test5: '库位3'
test1: 'RQ1342208728',
test2: 'D6178738555',
test3: 'CP5284407553',
test4: '70*50mm',
test5: 'G区'
}
]
},
OutOfEachLine: {
tableProps: [
{ prop: 'test1', label: '作业号', align: 'center' },
{ prop: 'test2', label: 'ERP订单', align: 'center' },
{ prop: 'test3', label: '成品编码', align: 'center' },
{ prop: 'test4', label: '成品规格', align: 'center' },
{ prop: 'test5', label: '库位', align: 'center' }
],
total: 0,
list: [
{
test1: 'CQ3727367714',
test2: 'TCP231',
test3: 'CP3212128336',
test4: '50*50mm',
test5: 'H区'
},
{
test1: 'CQ7080508785',
test2: 'TCP186',
test3: 'CP2760242729',
test4: '100*120mm',
test5: 'B区'
},
{
test1: 'CQ8843212447',
test2: 'TCP67',
test3: 'CP1569191519',
test4: '120*120mm',
test5: 'A区'
}
]
},
@ -641,7 +712,7 @@ export default {
}
.div-box {
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.2);
display: inline-block;
width: 100%;
border-radius: 4px;