zangch
/
JDAirPort.Ems.UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改看板

Browse Source
boardTest
夜笙歌 3 weeks ago
parent 8a2c583701
commit 0b35c0f405
6 changed files with 339 additions and 87 deletions
Show Stats Download Patch File Download Diff File

BIN
src/assets/images/bg.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 102 KiB

After

Width:  |  Height:  |  Size: 246 KiB

BIN
src/assets/images/model.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 195 KiB

BIN
src/assets/images/modelbg1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
src/assets/images/table1.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1017 B

BIN
src/assets/images/table2.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 990 B

426
src/views/board/index.vue
Unescape Escape View File

@ -1,69 +1,194 @@
<template> <template>
<div style="height: 100vh;width: 100vw;overflow: hidden;position: relative;"> <div style="height: 100vh;width: 100vw;overflow: hidden;position: relative;">
<div <div
:style="`width:100%;height:100%;background-image:url(${bg});background-repeat: no-repeat;background-size: 100% 100%;`"> :style="`width:100%;height:100%;background-image:url(${bg});background-repeat: no-repeat;background-size: 100% 100%;`">
<!-- <img :src="model" alt="">--> <!-- <img :src="model" alt="">-->
</div> </div>
<div style="position:absolute;top: 10%;left: 1%;width: 98%;height: 88%"
:style="`background-image:url(${bg1});background-repeat: no-repeat;background-size: 100% 100%;`">
</div>
<div style="position:absolute;top: 65%;left: 50%;width: 100%;height: 100%;transform: translate(-50%, -50%);"
:style="`background-image:url(${model});background-repeat: no-repeat;background-size: 100% 100%;`">
</div>
<div class="title">青岛胶东机场行李输送线</div> <div class="title">青岛胶东机场行李输送线</div>
<div class="item1"> <div class="item1">
<!-- <div class="alm">-->
<!-- <div v-for="i in Object.keys(almData.E0013)">-->
<!-- <div v-for="ii in almData.E0013[i]">-->
<!-- {{ ii }}-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<div class="line"></div> <div class="line"></div>
<div style="display: inline-block"> <div class="table1">
<div v-for="i in Object.keys(deviceData.E0013)"> <div class="th1">设备名称</div>
<div v-for="ii in Object.keys(deviceData.E0013[i])" v-if="deviceData.E0013[i][ii]>0"> <div class="th2">设备参数</div>
<div class="data">{{ i }} {{ deviceMap[ii] }} : {{ deviceData.E0013[i][ii] }}</div> </div>
<div class="table2">
<div style="border-bottom: 1px solid #244b9f;" v-for="i in Object.keys(deviceData.E0013)">
<div class="td1">{{ i }}</div>
<div class="td2">
<div v-for="ii in Object.keys(deviceData.E0013[i])" v-if="deviceData.E0013[i][ii]>0">
<div>
<div class="info1">
{{ deviceMap[ii] }}
</div>
<div class="span">
:
</div>
<div class="info2">
{{ deviceData.E0013[i][ii] }}
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> <div style="border-bottom: 1px solid #244b9f;" v-for="i in Object.keys(deviceData.E0014)">
<div style="display: inline-block"> <div class="td1">{{ i }}</div>
<div v-for="i in Object.keys(deviceData.E0014)"> <div class="td2">
<div v-for="ii in Object.keys(deviceData.E0014[i])" v-if="deviceData.E0014[i][ii]>0"> <div v-for="ii in Object.keys(deviceData.E0014[i])" v-if="deviceData.E0014[i][ii]>0">
<div class="data">{{ i }} {{ deviceMap[ii] }} : {{ deviceData.E0014[i][ii] }}</div> <div>
<div class="info1">
{{ deviceMap[ii] }}
</div>
<div class="span">
:
</div>
<div class="info2">
{{ deviceData.E0014[i][ii] }}
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="item2"> <div class="item2">
<div class="line"></div> <div class="line"></div>
<div v-for="i in Object.keys(deviceData.E0002)"> <div class="table1">
<div v-for="ii in Object.keys(deviceData.E0002[i])" v-if="deviceData.E0002[i][ii]>0"> <div class="th1">设备名称</div>
<div class="data">{{ i }} {{ deviceMap[ii] }} : {{ deviceData.E0002[i][ii] }}</div> <div class="th2">设备参数</div>
</div>
</div> </div>
<div v-for="i in Object.keys(deviceData.E0003)"> <div class="table2">
<div v-for="ii in Object.keys(deviceData.E0003[i])" v-if="deviceData.E0003[i][ii]>0"> <div style="border-bottom: 1px solid #244b9f;" v-for="i in Object.keys(deviceData.E0002)">
<div class="data">{{ i }} {{ deviceMap[ii] }} : {{ deviceData.E0003[i][ii] }}</div> <div class="td1">{{ i }}</div>
<div class="td2">
<div v-for="ii in Object.keys(deviceData.E0002[i])" v-if="deviceData.E0002[i][ii]>0">
<div>
<div class="info1">
{{ deviceMap[ii] }}
</div>
<div class="span">
:
</div>
<div class="info2">
{{ deviceData.E0002[i][ii] }}
</div>
</div>
</div>
</div>
</div> </div>
</div> <div style="border-bottom: 1px solid #244b9f;" v-for="i in Object.keys(deviceData.E0003)">
<div v-for="i in Object.keys(deviceData.E0004)"> <div class="td1">{{ i }}</div>
<div v-for="ii in Object.keys(deviceData.E0004[i])" v-if="deviceData.E0004[i][ii]>0"> <div class="td2">
<div class="data">{{ i }} {{ deviceMap[ii] }} : {{ deviceData.E0004[i][ii] }}</div> <div v-for="ii in Object.keys(deviceData.E0003[i])" v-if="deviceData.E0003[i][ii]>0">
<div>
<div class="info1">
{{ deviceMap[ii] }}
</div>
<div class="span">
:
</div>
<div class="info2">
{{ deviceData.E0003[i][ii] }}
</div>
</div>
</div>
</div>
</div>
<div style="border-bottom: 1px solid #244b9f;" v-for="i in Object.keys(deviceData.E0004)">
<div class="td1">{{ i }}</div>
<div class="td2">
<div v-for="ii in Object.keys(deviceData.E0004[i])" v-if="deviceData.E0004[i][ii]>0">
<div>
<div class="info1">
{{ deviceMap[ii] }}
</div>
<div class="span">
:
</div>
<div class="info2">
{{ deviceData.E0004[i][ii] }}
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="item3"> <div class="item3">
<div class="line"></div> <div class="line"></div>
<div v-for="i in Object.keys(deviceData.E0001)"> <div class="table1">
<div v-for="ii in Object.keys(deviceData.E0001[i])" v-if="deviceData.E0001[i][ii]>0"> <div class="th1">设备名称</div>
<div class="data">{{ i }} {{ deviceMap[ii] }} : {{ deviceData.E0001[i][ii] }}</div> <div class="th2">设备参数</div>
</div>
<div class="table2">
<div style="border-bottom: 1px solid #244b9f;" v-for="i in Object.keys(deviceData.E0001)">
<div class="td1">{{ i }}</div>
<div class="td2">
<div v-for="ii in Object.keys(deviceData.E0001[i])" v-if="deviceData.E0001[i][ii]>0">
<div>
<div class="info1">
{{ deviceMap[ii] }}
</div>
<div class="span">
:
</div>
<div class="info2">
{{ deviceData.E0001[i][ii] }}
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="item4"> <div class="item4">
<div class="line"></div> <div class="line"></div>
<div v-for="i in Object.keys(deviceData.E0005)"> <div class="table1">
<div v-for="ii in Object.keys(deviceData.E0005[i])" v-if="deviceData.E0005[i][ii]>0"> <div class="th1">设备名称</div>
<div class="data">{{ i }} {{ deviceMap[ii] }} : {{ deviceData.E0005[i][ii] }}</div> <div class="th2">设备参数</div>
</div>
</div> </div>
<div v-for="i in Object.keys(deviceData.E0006)"> <div class="table2">
<div v-for="ii in Object.keys(deviceData.E0006[i])" v-if="deviceData.E0006[i][ii]>0"> <div style="border-bottom: 1px solid #244b9f;" v-for="i in Object.keys(deviceData.E0005)">
<div class="data">{{ i }} {{ deviceMap[ii] }} : {{ deviceData.E0006[i][ii] }}</div> <div class="td1">{{ i }}</div>
<div class="td2">
<div v-for="ii in Object.keys(deviceData.E0005[i])" v-if="deviceData.E0005[i][ii]>0">
<div>
<div class="info1">
{{ deviceMap[ii] }}
</div>
<div class="span">
:
</div>
<div class="info2">
{{ deviceData.E0005[i][ii] }}
</div>
</div>
</div>
</div>
</div>
<div style="border-bottom: 1px solid #244b9f;" v-for="i in Object.keys(deviceData.E0006)">
<div class="td1">{{ i }}</div>
<div class="td2">
<div v-for="ii in Object.keys(deviceData.E0006[i])" v-if="deviceData.E0006[i][ii]>0">
<div>
<div class="info1">
{{ deviceMap[ii] }}
</div>
<div class="span">
:
</div>
<div class="info2">
{{ deviceData.E0006[i][ii] }}
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -71,15 +196,11 @@
</template> </template>
<script> <script>
import model from '@/assets/images/model.jpg'
import bg from '@/assets/images/bg.jpg' import bg from '@/assets/images/bg.jpg'
import bg1 from '@/assets/images/modelbg1.jpg'
export default { export default {
data() { data() {
return { return {
model,
bg1,
bg, bg,
deviceData: { deviceData: {
'E0001': {}, 'E0001': {},
@ -91,6 +212,16 @@ export default {
'E0013': {}, 'E0013': {},
'E0014': {}, 'E0014': {},
}, },
almData: {
'E0001': {},
'E0002': {},
'E0003': {},
'E0004': {},
'E0005': {},
'E0006': {},
'E0013': {},
'E0014': {},
},
deviceMap: { deviceMap: {
temperature: '温度', temperature: '温度',
humidity: '湿度', humidity: '湿度',
@ -106,77 +237,198 @@ export default {
}, },
mounted() { mounted() {
this.$bus.$on('websocket-device-data', (e) => { this.$bus.$on('websocket-device-data', (e) => {
let deviceID = e?.deviceParam?.monitorId?.split('_')?.[0] let deviceID = e?.deviceParam?.monitorId?.split('_')?.[0]
if (Object.keys(this.deviceData).includes(deviceID)) { if (Object.keys(this.deviceData).includes(deviceID)) {
this.$set(this.deviceData[deviceID], e.deviceParam.monitorId, { this.$set(this.deviceData[deviceID], e.deviceParam.monitorId, {
temperature: e.deviceParam.temperature || 0, temperature: e.deviceParam.temperature || 0,
humidity: e.deviceParam.humidity || 0, humidity: e.deviceParam.humidity || 0,
illuminance: e.deviceParam.illuminance || 0, illuminance: e.deviceParam.illuminance || 0,
noise: e.deviceParam.noise || 0, noise: e.deviceParam.noise || 0,
concentration: e.deviceParam.concentration || 0, concentration: e.deviceParam.concentration || 0,
vibrationSpeed: e.deviceParam.vibrationSpeed || 0, vibrationSpeed: e.deviceParam.vibrationSpeed || 0,
vibrationDisplacement: e.deviceParam.vibrationDisplacement || 0, vibrationDisplacement: e.deviceParam.vibrationDisplacement || 0,
vibrationAcceleration: e.deviceParam.vibrationAcceleration || 0, vibrationAcceleration: e.deviceParam.vibrationAcceleration || 0,
vibrationTemp: e.deviceParam.vibrationTemp || 0, vibrationTemp: e.deviceParam.vibrationTemp || 0,
}) })
} // this.$set(this.almData[deviceID], e.deviceParam.monitorId, e.alarmRules.map(v => {
console.log(this.deviceData.E0014) // return v.ruleName
// }))
this.$set(this.almData[deviceID], e.deviceParam.monitorId, ['报警1', '报警2'])
} }
console.log(this.deviceData.E0014)
}
) )
}, },
methods: methods:
{} {}
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.title { .title {
position: absolute; position: absolute;
top: 1%; top: 2%;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
letter-spacing: 0.2vw; letter-spacing: 0.3vw;
font-size: 1.8vw; font-size: 2vw;
font-weight: 800; font-weight: 800;
color: white; color: white;
} }
.item1 { .item1 {
right: 0%; right: 0%;
bottom: 25%; bottom: 27%;
}
.item2 {
right: 18%;
bottom: 25%;
}
.item3 {
right: 60%;
bottom: 25%;
}
.item4 {
right: 75%;
bottom: 65%;
}
.item1, .item2, .item3, .item4 {
padding: 8px;
//width: 14vw;
position: absolute;
border: 1px solid white;
transform: translateX(-50%);
color: #fff;
.line { .line {
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 50%; left: 100%;
transform: translateX(-50%); transform-origin: left top;
transform: translateX(-50%) rotate(-45deg);
width: 1px; width: 1px;
height: 3vh; height: 3vh;
background-color: #fff; background-color: #fff;
} }
}
.item2 {
right: 24%;
bottom: 25%;
.line {
position: absolute;
top: 100%;
left: 100%;
transform-origin: left top;
transform: translateX(-50%) rotate(-45deg);
width: 1px;
height: 3vh;
background-color: #fff;
}
}
.item3 {
left: 40%;
bottom: 25%;
.line {
position: absolute;
top: 100%;
left: 0%;
transform-origin: right top;
transform: translateX(-50%) rotate(45deg);
width: 1px;
height: 3vh;
background-color: #fff;
}
}
.item4 {
left: 18%;
bottom: 66%;
.line {
position: absolute;
top: 100%;
left: 60%;
transform-origin: left top;
transform: translateX(-50%) rotate(-45deg);
width: 1px;
height: 3vh;
background-color: #fff;
}
}
.item1, .item2, .item3, .item4 {
padding: 8px;
width: 345.6px;
position: absolute;
transform: translateX(-50%);
color: #fff;
.alm {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.table1 {
width: 100%;
height: 55px;
background-image: url(~@/assets/images/table1.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
.th1, .th2 {
white-space: nowrap;
display: inline-block;
line-height: 55px;
min-height: 55px;
font-size: 18px;
font-weight: 700;
text-align: center;
}
.th1 {
width: 40%;
}
.th2 {
width: 60%;
}
}
.table2 {
width: 100%;
background-image: url(~@/assets/images/table2.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0 12px;
.td1, .td2 {
white-space: nowrap;
display: inline-block;
font-size: 15.36px;
line-height: 26.88px;
min-height: 26.88px;
text-align: center;
}
.td1 {
vertical-align: top;
width: 40%;
color: #E4E6ED;
}
.td2 {
width: 60%;
}
.td2 {
.info1 {
width: 50%;
display: inline-block;
text-align: right;
color: #fff6
}
.span {
width: 14px;
display: inline-block;
text-align: center;
}
.info2 {
width: calc(50% - 14px);
display: inline-block;
text-align: left;
color: #E4E6ED;
}
}
}
.data { .data {
} }

Write Preview
Loading…
Cancel
Save