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

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

@ -4,66 +4,191 @@
:style="`width:100%;height:100%;background-image:url(${bg});background-repeat: no-repeat;background-size: 100% 100%;`">
<!-- <img :src="model" alt="">-->
</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="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 style="display: inline-block">
<div v-for="i in Object.keys(deviceData.E0013)">
<div class="table1">
<div class="th1">设备名称</div>
<div class="th2">设备参数</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 class="data">{{ i }} {{ deviceMap[ii] }} : {{ deviceData.E0013[i][ii] }}</div>
<div>
<div class="info1">
{{ deviceMap[ii] }}
</div>
<div class="span">
:
</div>
<div class="info2">
{{ deviceData.E0013[i][ii] }}
</div>
</div>
</div>
<div style="display: inline-block">
<div v-for="i in Object.keys(deviceData.E0014)">
</div>
</div>
<div style="border-bottom: 1px solid #244b9f;" v-for="i in Object.keys(deviceData.E0014)">
<div class="td1">{{ i }}</div>
<div class="td2">
<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 class="item2">
<div class="line"></div>
<div v-for="i in Object.keys(deviceData.E0002)">
<div class="table1">
<div class="th1">设备名称</div>
<div class="th2">设备参数</div>
</div>
<div class="table2">
<div style="border-bottom: 1px solid #244b9f;" v-for="i in Object.keys(deviceData.E0002)">
<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 class="data">{{ i }} {{ deviceMap[ii] }} : {{ deviceData.E0002[i][ii] }}</div>
<div>
<div class="info1">
{{ deviceMap[ii] }}
</div>
<div class="span">
:
</div>
<div class="info2">
{{ deviceData.E0002[i][ii] }}
</div>
</div>
<div v-for="i in Object.keys(deviceData.E0003)">
</div>
</div>
</div>
<div style="border-bottom: 1px solid #244b9f;" v-for="i in Object.keys(deviceData.E0003)">
<div class="td1">{{ i }}</div>
<div class="td2">
<div v-for="ii in Object.keys(deviceData.E0003[i])" v-if="deviceData.E0003[i][ii]>0">
<div class="data">{{ i }} {{ deviceMap[ii] }} : {{ deviceData.E0003[i][ii] }}</div>
<div>
<div class="info1">
{{ deviceMap[ii] }}
</div>
<div class="span">
:
</div>
<div class="info2">
{{ deviceData.E0003[i][ii] }}
</div>
</div>
<div v-for="i in Object.keys(deviceData.E0004)">
</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 class="data">{{ i }} {{ deviceMap[ii] }} : {{ deviceData.E0004[i][ii] }}</div>
<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 class="item3">
<div class="line"></div>
<div v-for="i in Object.keys(deviceData.E0001)">
<div class="table1">
<div class="th1">设备名称</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 class="data">{{ i }} {{ deviceMap[ii] }} : {{ deviceData.E0001[i][ii] }}</div>
<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 class="item4">
<div class="line"></div>
<div v-for="i in Object.keys(deviceData.E0005)">
<div class="table1">
<div class="th1">设备名称</div>
<div class="th2">设备参数</div>
</div>
<div class="table2">
<div style="border-bottom: 1px solid #244b9f;" v-for="i in Object.keys(deviceData.E0005)">
<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 class="data">{{ i }} {{ deviceMap[ii] }} : {{ deviceData.E0005[i][ii] }}</div>
<div>
<div class="info1">
{{ deviceMap[ii] }}
</div>
<div class="span">
:
</div>
<div class="info2">
{{ deviceData.E0005[i][ii] }}
</div>
</div>
<div v-for="i in Object.keys(deviceData.E0006)">
</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 class="data">{{ i }} {{ deviceMap[ii] }} : {{ deviceData.E0006[i][ii] }}</div>
<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>
@ -71,15 +196,11 @@
</template>
<script>
import model from '@/assets/images/model.jpg'
import bg from '@/assets/images/bg.jpg'
import bg1 from '@/assets/images/modelbg1.jpg'
export default {
data() {
return {
model,
bg1,
bg,
deviceData: {
'E0001': {},
@ -91,6 +212,16 @@ export default {
'E0013': {},
'E0014': {},
},
almData: {
'E0001': {},
'E0002': {},
'E0003': {},
'E0004': {},
'E0005': {},
'E0006': {},
'E0013': {},
'E0014': {},
},
deviceMap: {
temperature: '温度',
humidity: '湿度',
@ -119,6 +250,10 @@ export default {
vibrationAcceleration: e.deviceParam.vibrationAcceleration || 0,
vibrationTemp: e.deviceParam.vibrationTemp || 0,
})
// this.$set(this.almData[deviceID], e.deviceParam.monitorId, e.alarmRules.map(v => {
// return v.ruleName
// }))
this.$set(this.almData[deviceID], e.deviceParam.monitorId, ['报警1', '报警2'])
}
console.log(this.deviceData.E0014)
}
@ -131,52 +266,169 @@ export default {
<style lang="less" scoped>
.title {
position: absolute;
top: 1%;
top: 2%;
left: 50%;
transform: translateX(-50%);
letter-spacing: 0.2vw;
font-size: 1.8vw;
letter-spacing: 0.3vw;
font-size: 2vw;
font-weight: 800;
color: white;
}
.item1 {
right: 0%;
bottom: 25%;
}
.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;
bottom: 27%;
.line {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
left: 100%;
transform-origin: left top;
transform: translateX(-50%) rotate(-45deg);
width: 1px;
height: 3vh;
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 {
}

Write Preview
Loading…
Cancel
Save