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

更新驾驶舱

Browse Source
This commit is contained in:
朱文强
2022-11-17 16:41:15 +08:00
parent 2d586c19de
commit ced84a73ec
3 changed files with 358 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>