You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1450 lines
39 KiB
Vue
1450 lines
39 KiB
Vue
<template>
|
|
<div style="height: 100vh;width: 100vw;overflow: hidden;position: relative;">
|
|
<div
|
|
:style="`width:100%;height:100%;background-image:url(${bg});background-repeat: no-repeat;background-size: 100% 100%;`">
|
|
</div>
|
|
<div class="title">青岛胶东机场行李输送线</div>
|
|
|
|
<div class="leftBottom">
|
|
<el-button-group size="mini">
|
|
<el-button size="mini" style="width: 90px" @click="isDevise=true" :type=" isDevise ? 'primary':''">显示设备
|
|
</el-button>
|
|
<el-button size="mini" style="width: 90px" @click="isDevise=false" :type=" isDevise ? '':'primary'">隐藏设备
|
|
</el-button>
|
|
</el-button-group>
|
|
<br>
|
|
<el-button-group size="mini" style="margin-top: 12px;">
|
|
<el-button size="mini" style="width: 90px" @click="isNo=true" :type=" isNo ? 'primary':''">显示皮带号
|
|
</el-button>
|
|
<el-button size="mini" style="width: 90px" @click="isNo=false" :type=" isNo ? '':'primary'">隐藏皮带号
|
|
</el-button>
|
|
</el-button-group>
|
|
<div style="margin: 4px 0 ;">
|
|
<img :src="icon1" alt="" style="width: 2vw">
|
|
<span style="line-height: 2vw;color: #fff;vertical-align: top;font-size: 12px">温度设备</span>
|
|
</div>
|
|
<div style="margin: 4px 0 ;">
|
|
<img :src="icon2" alt="" style="width: 2vw">
|
|
<span style="line-height: 2vw;color: #fff;vertical-align: top;;font-size: 12px">湿度设备</span>
|
|
</div>
|
|
<div style="margin: 4px 0 ;">
|
|
<img :src="icon3" alt="" style="width: 2vw">
|
|
<span style="line-height: 2vw;color: #fff;vertical-align: top;;font-size: 12px">温湿度设备</span>
|
|
</div>
|
|
<div style="margin: 4px 0 ;">
|
|
<img :src="icon4" alt="" style="width: 2vw">
|
|
<span style="line-height: 2vw;color: #fff;vertical-align: top;;font-size: 12px">振动设备</span>
|
|
</div>
|
|
<div style="margin: 4px 0 ;">
|
|
<img :src="icon5" alt="" style="width: 2vw">
|
|
<span style="line-height: 2vw;color: #fff;vertical-align: top;;font-size: 12px">报警设备</span>
|
|
</div>
|
|
</div>
|
|
<div class="leftTop">
|
|
<el-button size="mini" @click="$router.push('/')" type="primary">返回首页
|
|
</el-button>
|
|
</div>
|
|
|
|
<div v-if="isNo">
|
|
<div class="id id1">15.01</div>
|
|
<div class="id id2">15.03</div>
|
|
<div class="id id3">19.01</div>
|
|
<div class="id id4">21.01</div>
|
|
<div class="id id5">23.03</div>
|
|
<div class="id id6">23.04</div>
|
|
<div class="id id7">25.01</div>
|
|
<div class="id id8">29.01</div>
|
|
<div class="id id9">27.01</div>
|
|
<div class="id id10">31.01</div>
|
|
<div class="id id11">31.03</div>
|
|
<div class="id" style="top: 83%;left: 55%;">31.05</div>
|
|
<div class="id" style="top: 80.5%;left: 55%;">31.07</div>
|
|
<div class="id" style="top: 80.5%;left: 58%;">31.09</div>
|
|
<div class="id" style="top: 81%;left: 60.5%;">31.11</div>
|
|
<div class="id" style="top: 85%;left: 60.5%;">31.13</div>
|
|
<div class="id" style="top: 85%;left: 54%;">31.15</div>
|
|
<div class="id" style="top: 86%;left: 49.5%;">31.17</div>
|
|
<div class="id" style="top: 83.2%;left: 47.9%;transform: rotate(45deg);">31.19</div>
|
|
<div class="id" style="top: 81.5%;left: 48.7%;">31.21</div>
|
|
<div class="id" style="top: 82.8%;left: 46.8%;">31.23</div>
|
|
<div class="id" style="top: 82.8%;left: 43%;">31.25</div>
|
|
<div class="id" style="top: 82.8%;left: 38.2%;">33.01</div>
|
|
<div class="id" style="top: 82.8%;left: 36%;">37.01</div>
|
|
<div class="id" style="top: 81.3%;left: 36%;">35.01</div>
|
|
<div class="id" style="top: 79.5%;left: 37%;">35.02</div>
|
|
<div class="id" style="top: 82.7%;left: 31%;">39.01</div>
|
|
<div class="id" style="top: 81%;left: 31%;">41.03</div>
|
|
<div class="id" style="top: 78.5%;left: 29.5%;">41.04</div>
|
|
<div class="id" style="top: 82.2%;left: 24.5%;">43.01</div>
|
|
<div class="id" style="top: 81.5%;left: 20.5%;">43.03</div>
|
|
<div class="id" style="top: 72.5%;left: 20.9%;transform: rotate(103deg);">43.05</div>
|
|
<div class="id" style="top: 59.5%;left: 22.5%;transform: rotate(103deg);">43.07</div>
|
|
<div class="id" style="top: 48.5%;left: 24%;transform: rotate(103deg);">45.02</div>
|
|
<div class="id" style="top: 44.5%;left: 24.5%;transform: rotate(103deg);">49.01</div>
|
|
<div class="id" style="top: 39.5%;left: 26.5%;">49.03</div>
|
|
<div class="id" style="top: 38.8%;left: 21.5%;">49.05</div>
|
|
<div class="id" style="top: 40%;left: 13.5%;">49.07</div>
|
|
<div class="id" style="top: 40%;left: 8%;">51.03</div>
|
|
</div>
|
|
<div v-if="isDevise">
|
|
<div class="icon2" style="top: 73%;left: 73%;">
|
|
<div class="deviceInfo2">
|
|
<div class="line"></div>
|
|
<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>
|
|
<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 class="icon2" style="top: 74%;left: 94%;">
|
|
<div class="deviceInfo">
|
|
<div class="line"></div>
|
|
<div class="table1">
|
|
<div class="deviceName">E0014_0200</div>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="line-height: 30px" v-for="ii in Object.keys((deviceData.E0014||{}).E0014_0200 || {})"
|
|
v-if="deviceData.E0014.E0014_0200[ii]>0">
|
|
<div>
|
|
<div class="info1">
|
|
{{ deviceMap[ii] }}
|
|
</div>
|
|
<div class="span">
|
|
:
|
|
</div>
|
|
<div class="info2">
|
|
{{ deviceData.E0014.E0014_0200[ii] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="icon2" style="top: 74%;left: 90%;">
|
|
<div class="deviceInfo">
|
|
<div class="line"></div>
|
|
<div class="table1">
|
|
<div class="deviceName">E0014_1600</div>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="line-height: 30px" v-for="ii in Object.keys((deviceData.E0014||{}).E0014_1600 || {})"
|
|
v-if="deviceData.E0014.E0014_1600[ii]>0">
|
|
<div>
|
|
<div class="info1">
|
|
{{ deviceMap[ii] }}
|
|
</div>
|
|
<div class="span">
|
|
:
|
|
</div>
|
|
<div class="info2">
|
|
{{ deviceData.E0014.E0014_1600[ii] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="icon2" style="top: 74%;left: 76%;">
|
|
<div class="deviceInfo">
|
|
<div class="line"></div>
|
|
<div class="table1">
|
|
<div class="deviceName">E0014_0100</div>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="line-height: 30px" v-for="ii in Object.keys((deviceData.E0014||{}).E0014_0100 || {})"
|
|
v-if="deviceData.E0014.E0014_0100[ii]>0">
|
|
<div>
|
|
<div class="info1">
|
|
{{ deviceMap[ii] }}
|
|
</div>
|
|
<div class="span">
|
|
:
|
|
</div>
|
|
<div class="info2">
|
|
{{ deviceData.E0014.E0014_0100[ii] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="icon4" style="top: 74%;left: 92.4%;">
|
|
<div class="deviceInfo">
|
|
<div class="line"></div>
|
|
<div class="table1">
|
|
<div class="deviceName">E0014_3500</div>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="line-height: 30px" v-for="ii in Object.keys((deviceData.E0014||{}).E0014_3500 || {})"
|
|
v-if="deviceData.E0014.E0014_3500[ii]>0">
|
|
<div>
|
|
<div class="info1">
|
|
{{ deviceMap[ii] }}
|
|
</div>
|
|
<div class="span">
|
|
:
|
|
</div>
|
|
<div class="info2">
|
|
{{ deviceData.E0014.E0014_3500[ii] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="icon4" style="top: 74%;left: 77.7%;">
|
|
<div class="deviceInfo">
|
|
<div class="line"></div>
|
|
<div class="table1">
|
|
<div class="deviceName">E0014_3700</div>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="line-height: 30px" v-for="ii in Object.keys((deviceData.E0014||{}).E0014_3700 || {})"
|
|
v-if="deviceData.E0014.E0014_3700[ii]>0">
|
|
<div>
|
|
<div class="info1">
|
|
{{ deviceMap[ii] }}
|
|
</div>
|
|
<div class="span">
|
|
:
|
|
</div>
|
|
<div class="info2">
|
|
{{ deviceData.E0014.E0014_3700[ii] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="icon2" style="top: 88%;left: 55%;">
|
|
<div class="deviceInfo">
|
|
<div class="line"></div>
|
|
<div class="table1">
|
|
<div class="deviceName">E0004_0800</div>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="line-height: 30px" v-for="ii in Object.keys((deviceData.E0004||{}).E0004_0800 || {})"
|
|
v-if="deviceData.E0004.E0004_0800[ii]>0">
|
|
<div>
|
|
<div class="info1">
|
|
{{ deviceMap[ii] }}
|
|
</div>
|
|
<div class="span">
|
|
:
|
|
</div>
|
|
<div class="info2">
|
|
{{ deviceData.E0004.E0004_0800[ii] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="icon4" style="top: 88.2%;left: 52.7%;">
|
|
<div class="deviceInfo">
|
|
<div class="line"></div>
|
|
<div class="table1">
|
|
<div class="deviceName">E0004_3800</div>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="line-height: 30px" v-for="ii in Object.keys((deviceData.E0004||{}).E0004_3800 || {})"
|
|
v-if="deviceData.E0004.E0004_3800[ii]>0">
|
|
<div>
|
|
<div class="info1">
|
|
{{ deviceMap[ii] }}
|
|
</div>
|
|
<div class="span">
|
|
:
|
|
</div>
|
|
<div class="info2">
|
|
{{ deviceData.E0004.E0004_3800[ii] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="icon4" style="top: 77.6%;left: 57.8%;">
|
|
<div class="deviceInfo">
|
|
<div class="line"></div>
|
|
<div class="table1">
|
|
<div class="deviceName">E0004_3400</div>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="line-height: 30px" v-for="ii in Object.keys((deviceData.E0004||{}).E0004_3400 || {})"
|
|
v-if="deviceData.E0004.E0004_3400[ii]>0">
|
|
<div>
|
|
<div class="info1">
|
|
{{ deviceMap[ii] }}
|
|
</div>
|
|
<div class="span">
|
|
:
|
|
</div>
|
|
<div class="info2">
|
|
{{ deviceData.E0004.E0004_3400[ii] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="icon4" style="top: 85.6%;left: 63.8%;">
|
|
<div class="deviceInfo">
|
|
<div class="line"></div>
|
|
<div class="table1">
|
|
<div class="deviceName">E0004_3600</div>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="line-height: 30px" v-for="ii in Object.keys((deviceData.E0004||{}).E0004_3600 || {})"
|
|
v-if="deviceData.E0004.E0004_3600[ii]>0">
|
|
<div>
|
|
<div class="info1">
|
|
{{ deviceMap[ii] }}
|
|
</div>
|
|
<div class="span">
|
|
:
|
|
</div>
|
|
<div class="info2">
|
|
{{ deviceData.E0004.E0004_3600[ii] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="icon2" style="top: 75%;left: 29%;">
|
|
<div class="deviceInfo">
|
|
<div class="line"></div>
|
|
<div class="table1">
|
|
<div class="deviceName">E0002_2400</div>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="line-height: 30px" v-for="ii in Object.keys((deviceData.E0002||{}).E0002_2400 || {})"
|
|
v-if="deviceData.E0002.E0002_2400[ii]>0">
|
|
<div>
|
|
<div class="info1">
|
|
{{ deviceMap[ii] }}
|
|
</div>
|
|
<div class="span">
|
|
:
|
|
</div>
|
|
<div class="info2">
|
|
{{ deviceData.E0002.E0002_2400[ii] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="icon2" style="top: 79%;left: 35%;">
|
|
<div class="deviceInfo">
|
|
<div class="line"></div>
|
|
<div class="table1">
|
|
<div class="deviceName">E0003_2900</div>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="line-height: 30px" v-for="ii in Object.keys((deviceData.E0003||{}).E0003_2900 || {})"
|
|
v-if="deviceData.E0003.E0003_2900[ii]>0">
|
|
<div>
|
|
<div class="info1">
|
|
{{ deviceMap[ii] }}
|
|
</div>
|
|
<div class="span">
|
|
:
|
|
</div>
|
|
<div class="info2">
|
|
{{ deviceData.E0003.E0003_2900[ii] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="icon2" style="top: 77%;left: 38%;">
|
|
<div class="deviceInfo">
|
|
<div class="line"></div>
|
|
<div class="table1">
|
|
<div class="deviceName">E0003_2700</div>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="line-height: 30px" v-for="ii in Object.keys((deviceData.E0003||{}).E0003_2700 || {})"
|
|
v-if="deviceData.E0003.E0003_2700[ii]>0">
|
|
<div>
|
|
<div class="info1">
|
|
{{ deviceMap[ii] }}
|
|
</div>
|
|
<div class="span">
|
|
:
|
|
</div>
|
|
<div class="info2">
|
|
{{ deviceData.E0003.E0003_2700[ii] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="icon2" style="top: 77%;left: 23%;">
|
|
<div class="deviceInfo">
|
|
<div class="line"></div>
|
|
<div class="table1">
|
|
<div class="deviceName">E0001_1900</div>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="line-height: 30px" v-for="ii in Object.keys((deviceData.E0001||{}).E0001_1900 || {})"
|
|
v-if="deviceData.E0001.E0001_1900[ii]>0">
|
|
<div>
|
|
<div class="info1">
|
|
{{ deviceMap[ii] }}
|
|
</div>
|
|
<div class="span">
|
|
:
|
|
</div>
|
|
<div class="info2">
|
|
{{ deviceData.E0001.E0001_1900[ii] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="icon2" style="top: 55%;left: 25.5%;">
|
|
<div class="deviceInfo">
|
|
<div class="line"></div>
|
|
<div class="table1">
|
|
<div class="deviceName">E0001_0400</div>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="line-height: 30px" v-for="ii in Object.keys((deviceData.E0001||{}).E0001_0400 || {})"
|
|
v-if="deviceData.E0001.E0001_0400[ii]>0">
|
|
<div>
|
|
<div class="info1">
|
|
{{ deviceMap[ii] }}
|
|
</div>
|
|
<div class="span">
|
|
:
|
|
</div>
|
|
<div class="info2">
|
|
{{ deviceData.E0001.E0001_0400[ii] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="icon2" style="top: 35.5%;left: 26.6%;">
|
|
<div class="deviceInfo">
|
|
<div class="line"></div>
|
|
<div class="table1">
|
|
<div class="deviceName">E0001_2100</div>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="line-height: 30px" v-for="ii in Object.keys((deviceData.E0001||{}).E0001_2100 || {})"
|
|
v-if="deviceData.E0001.E0001_2100[ii]>0">
|
|
<div>
|
|
<div class="info1">
|
|
{{ deviceMap[ii] }}
|
|
</div>
|
|
<div class="span">
|
|
:
|
|
</div>
|
|
<div class="info2">
|
|
{{ deviceData.E0001.E0001_2100[ii] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="icon2" style="top: 38.5%;left: 11.6%;">
|
|
<div class="deviceInfo1">
|
|
<div class="line"></div>
|
|
<div class="table1">
|
|
<div class="deviceName">E0005_0300</div>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="line-height: 30px" v-for="ii in Object.keys((deviceData.E0005||{}).E0005_0300 || {})"
|
|
v-if="deviceData.E0005.E0005_0300[ii]>0">
|
|
<div>
|
|
<div class="info1">
|
|
{{ deviceMap[ii] }}
|
|
</div>
|
|
<div class="span">
|
|
:
|
|
</div>
|
|
<div class="info2">
|
|
{{ deviceData.E0005.E0005_0300[ii] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="icon2" style="top: 38.5%;left: 18.6%;">
|
|
<div class="deviceInfo">
|
|
<div class="line"></div>
|
|
<div class="table1">
|
|
<div class="deviceName">E0006_0600</div>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="line-height: 30px" v-for="ii in Object.keys((deviceData.E0006||{}).E0006_0600 || {})"
|
|
v-if="deviceData.E0006.E0006_0600[ii]>0">
|
|
<div>
|
|
<div class="info1">
|
|
{{ deviceMap[ii] }}
|
|
</div>
|
|
<div class="span">
|
|
:
|
|
</div>
|
|
<div class="info2">
|
|
{{ deviceData.E0006.E0006_0600[ii] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="icon2" style="top: 82%;left: 80.8%;">
|
|
<div class="deviceInfo">
|
|
<div class="line"></div>
|
|
<div class="table1">
|
|
<div class="deviceName">E0014_1200</div>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="line-height: 30px" v-for="ii in Object.keys((deviceData.E0014||{}).E0014_1200 || {})"
|
|
v-if="deviceData.E0014.E0014_1200[ii]>0">
|
|
<div>
|
|
<div class="info1">
|
|
{{ deviceMap[ii] }}
|
|
</div>
|
|
<div class="span">
|
|
:
|
|
</div>
|
|
<div class="info2">
|
|
{{ deviceData.E0014.E0014_1200[ii] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="icon2" style="top: 82%;left: 84.3%;">
|
|
<div class="deviceInfo">
|
|
<div class="line"></div>
|
|
<div class="table1">
|
|
<div class="deviceName">E0014_2300</div>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="line-height: 30px" v-for="ii in Object.keys((deviceData.E0014||{}).E0014_2300 || {})"
|
|
v-if="deviceData.E0014.E0014_2300[ii]>0">
|
|
<div>
|
|
<div class="info1">
|
|
{{ deviceMap[ii] }}
|
|
</div>
|
|
<div class="span">
|
|
:
|
|
</div>
|
|
<div class="info2">
|
|
{{ deviceData.E0014.E0014_2300[ii] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="icon2" style="top: 82%;left: 91%;">
|
|
<div class="deviceInfo">
|
|
<div class="line"></div>
|
|
<div class="table1">
|
|
<div class="deviceName">E0014_3200</div>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="line-height: 30px" v-for="ii in Object.keys((deviceData.E0014||{}).E0014_3200 || {})"
|
|
v-if="deviceData.E0014.E0014_3200[ii]>0">
|
|
<div>
|
|
<div class="info1">
|
|
{{ deviceMap[ii] }}
|
|
</div>
|
|
<div class="span">
|
|
:
|
|
</div>
|
|
<div class="info2">
|
|
{{ deviceData.E0014.E0014_3200[ii] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="icon2" style="top: 82%;left: 94.3%;">
|
|
<div class="deviceInfo">
|
|
<div class="line"></div>
|
|
<div class="table1">
|
|
<div class="deviceName">E0014_1300</div>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="line-height: 30px" v-for="ii in Object.keys((deviceData.E0014||{}).E0014_1300 || {})"
|
|
v-if="deviceData.E0014.E0014_1300[ii]>0">
|
|
<div>
|
|
<div class="info1">
|
|
{{ deviceMap[ii] }}
|
|
</div>
|
|
<div class="span">
|
|
:
|
|
</div>
|
|
<div class="info2">
|
|
{{ deviceData.E0014.E0014_1300[ii] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="icon2" style="top: 85%;left: 66%;">
|
|
<div class="deviceInfo">
|
|
<div class="line"></div>
|
|
<div class="table1">
|
|
<div class="deviceName">E0004_0500</div>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="line-height: 30px" v-for="ii in Object.keys((deviceData.E0004||{}).E0004_0500 || {})"
|
|
v-if="deviceData.E0004.E0004_0500[ii]>0">
|
|
<div>
|
|
<div class="info1">
|
|
{{ deviceMap[ii] }}
|
|
</div>
|
|
<div class="span">
|
|
:
|
|
</div>
|
|
<div class="info2">
|
|
{{ deviceData.E0004.E0004_0500[ii] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="icon2" style="top: 86%;left: 34%;">
|
|
<div class="deviceInfo">
|
|
<div class="line"></div>
|
|
<div class="table1">
|
|
<div class="deviceName">E0002_1100</div>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="line-height: 30px" v-for="ii in Object.keys((deviceData.E0002||{}).E0002_1100 || {})"
|
|
v-if="deviceData.E0002.E0002_1100[ii]>0">
|
|
<div>
|
|
<div class="info1">
|
|
{{ deviceMap[ii] }}
|
|
</div>
|
|
<div class="span">
|
|
:
|
|
</div>
|
|
<div class="info2">
|
|
{{ deviceData.E0002.E0002_1100[ii] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="icon2" style="top: 79%;left: 32%;">
|
|
<div class="deviceInfo">
|
|
<div class="line"></div>
|
|
<div class="table1">
|
|
<div class="deviceName">E0002_1800</div>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="line-height: 30px" v-for="ii in Object.keys((deviceData.E0002||{}).E0002_1800 || {})"
|
|
v-if="deviceData.E0002.E0002_1800[ii]>0">
|
|
<div>
|
|
<div class="info1">
|
|
{{ deviceMap[ii] }}
|
|
</div>
|
|
<div class="span">
|
|
:
|
|
</div>
|
|
<div class="info2">
|
|
{{ deviceData.E0002.E0002_1800[ii] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="icon2" style="top: 50.5%;left: 26.2%;">
|
|
<div class="deviceInfo">
|
|
<div class="line"></div>
|
|
<div class="table1">
|
|
<div class="deviceName">E0001_0700</div>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="line-height: 30px" v-for="ii in Object.keys((deviceData.E0001||{}).E0001_0700 || {})"
|
|
v-if="deviceData.E0001.E0001_0700[ii]>0">
|
|
<div>
|
|
<div class="info1">
|
|
{{ deviceMap[ii] }}
|
|
</div>
|
|
<div class="span">
|
|
:
|
|
</div>
|
|
<div class="info2">
|
|
{{ deviceData.E0001.E0001_0700[ii] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="icon2" style="top: 46.5%;left: 26.7%;">
|
|
<div class="deviceInfo">
|
|
<div class="line"></div>
|
|
<div class="table1">
|
|
<div class="deviceName">E0001_1400</div>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="line-height: 30px" v-for="ii in Object.keys((deviceData.E0001||{}).E0001_1400 || {})"
|
|
v-if="deviceData.E0001.E0001_1400[ii]>0">
|
|
<div>
|
|
<div class="info1">
|
|
{{ deviceMap[ii] }}
|
|
</div>
|
|
<div class="span">
|
|
:
|
|
</div>
|
|
<div class="info2">
|
|
{{ deviceData.E0001.E0001_1400[ii] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="icon2" style="top: 42.5%;left: 27.2%;">
|
|
<div class="deviceInfo">
|
|
<div class="line"></div>
|
|
<div class="table1">
|
|
<div class="deviceName">E0001_2200</div>
|
|
</div>
|
|
<div class="table2">
|
|
<div style="line-height: 30px" v-for="ii in Object.keys((deviceData.E0001||{}).E0001_2200 || {})"
|
|
v-if="deviceData.E0001.E0001_2200[ii]>0">
|
|
<div>
|
|
<div class="info1">
|
|
{{ deviceMap[ii] }}
|
|
</div>
|
|
<div class="span">
|
|
:
|
|
</div>
|
|
<div class="info2">
|
|
{{ deviceData.E0001.E0001_2200[ii] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import bg from '@/assets/images/bg.jpg'
|
|
import icon1 from '@/assets/images/icon1.jpg'
|
|
import icon2 from '@/assets/images/icon2.jpg'
|
|
import icon3 from '@/assets/images/icon3.jpg'
|
|
import icon4 from '@/assets/images/icon4.jpg'
|
|
import icon5 from '@/assets/images/icon5.jpg'
|
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
|
import {getByAlarmInfo} from "@/api/board";
|
|
import {saveWebSocketAlarmData} from "@/api/ems/record/recordAlarmData";
|
|
|
|
export default {
|
|
components: {vueSeamlessScroll},
|
|
data() {
|
|
return {
|
|
bg,
|
|
icon1,
|
|
icon2,
|
|
icon3,
|
|
icon4,
|
|
icon5,
|
|
isDevise: true,
|
|
isNo: true,
|
|
deviceData: {
|
|
'E0001': {},
|
|
'E0002': {},
|
|
'E0003': {},
|
|
'E0004': {},
|
|
'E0005': {},
|
|
'E0006': {},
|
|
'E0013': {},
|
|
'E0014': {},
|
|
},
|
|
chart1TableOption: {
|
|
step: 0.5, // 数值越大速度滚动越快
|
|
limitMoveNum: 12, // 开始无缝滚动的数据量 this.dataList.length
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|
direction: 1, // 0向下 1向上 2向左 3向右
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
waitTime: 0,
|
|
autoPlay: true,
|
|
},
|
|
deviceMap: {
|
|
temperature: '温度',
|
|
humidity: '湿度',
|
|
illuminance: '照度',
|
|
noise: '噪音',
|
|
concentration: '气体浓度',
|
|
vibrationSpeed: '振动-速度',
|
|
vibrationDisplacement: '振动-位移',
|
|
vibrationAcceleration: '振动-加速度',
|
|
vibrationTemp: '振动-温度',
|
|
},
|
|
|
|
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$bus.$on('websocket-device-data', (e) => {
|
|
let deviceID = e?.deviceParam?.monitorId?.split('_')?.[0]
|
|
if (Object.keys(this.deviceData).includes(deviceID)) {
|
|
this.$set(this.deviceData[deviceID], e.deviceParam.monitorId, {
|
|
temperature: e.deviceParam.temperature || 0,
|
|
humidity: e.deviceParam.humidity || 0,
|
|
illuminance: e.deviceParam.illuminance || 0,
|
|
noise: e.deviceParam.noise || 0,
|
|
concentration: e.deviceParam.concentration || 0,
|
|
vibrationSpeed: e.deviceParam.vibrationSpeed || 0,
|
|
vibrationDisplacement: e.deviceParam.vibrationDisplacement || 0,
|
|
vibrationAcceleration: e.deviceParam.vibrationAcceleration || 0,
|
|
vibrationTemp: e.deviceParam.vibrationTemp || 0,
|
|
})
|
|
}
|
|
})
|
|
},
|
|
methods: {}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
|
|
.deviceInfo {
|
|
position: absolute;
|
|
bottom: calc(2vw + 2vh);
|
|
right: calc(2vw + 2vh);
|
|
width: 200px;
|
|
color: #fff;
|
|
display: none;
|
|
|
|
.line {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 100%;
|
|
transform-origin: center top;
|
|
transform: translateX(-50%) rotate(-45deg);
|
|
width: 1px;
|
|
height: 3vh;
|
|
background-color: #3E649F;
|
|
}
|
|
|
|
.table1 {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 50px;
|
|
background-image: url(~@/assets/images/table1.jpg);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.deviceName {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 12px;
|
|
transform: translateY(-50%);
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
.table2 {
|
|
width: 100%;
|
|
background-image: url(~@/assets/images/table2.jpg);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
padding: 0 12px;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.deviceInfo1 {
|
|
position: absolute;
|
|
bottom: calc(2vw + 2vh);
|
|
left: calc(2vw + 2vh);
|
|
width: 200px;
|
|
color: #fff;
|
|
display: none;
|
|
|
|
.line {
|
|
position: absolute;
|
|
top: 100%;
|
|
right: 100%;
|
|
transform-origin: center top;
|
|
transform: translateX(-50%) rotate(45deg);
|
|
width: 1px;
|
|
height: 3vh;
|
|
background-color: #3E649F;
|
|
}
|
|
|
|
.table1 {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 50px;
|
|
background-image: url(~@/assets/images/table1.jpg);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.deviceName {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 12px;
|
|
transform: translateY(-50%);
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
.table2 {
|
|
width: 100%;
|
|
background-image: url(~@/assets/images/table2.jpg);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
padding: 0 12px;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.deviceInfo2 {
|
|
position: absolute;
|
|
bottom: calc(2vw + 2vh);
|
|
right: calc(2vw + 2vh);
|
|
width: 345.6px;
|
|
color: #fff;
|
|
display: none;
|
|
|
|
.line {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 100%;
|
|
transform-origin: center top;
|
|
transform: translateX(-50%) rotate(-45deg);
|
|
width: 1px;
|
|
height: 3vh;
|
|
background-color: #3E649F;
|
|
}
|
|
|
|
.table1 {
|
|
width: 100%;
|
|
height: 50px;
|
|
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: 50px;
|
|
min-height: 50px;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.icon2 {
|
|
position: absolute;
|
|
width: 2vw;
|
|
height: 2vw;
|
|
background-image: url("~@/assets/images/icon2.jpg");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
&:hover {
|
|
.deviceInfo, .deviceInfo1, .deviceInfo2 {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon4 {
|
|
position: absolute;
|
|
width: 2vw;
|
|
height: 2vw;
|
|
background-image: url("~@/assets/images/icon4.jpg");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
&:hover {
|
|
.deviceInfo, .deviceInfo1, .deviceInfo2 {
|
|
display: block;
|
|
|
|
}
|
|
}
|
|
|
|
.deviceInfo {
|
|
|
|
.table2 {
|
|
|
|
.info1 {
|
|
width: 50%;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.id {
|
|
position: absolute;
|
|
color: #fff;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 0.6vw;
|
|
}
|
|
|
|
.id1 {
|
|
top: 77%;
|
|
left: 90%;
|
|
}
|
|
|
|
.id2 {
|
|
top: 77%;
|
|
left: 85%;
|
|
}
|
|
|
|
.id3 {
|
|
top: 75.5%;
|
|
left: 74%;
|
|
}
|
|
|
|
.id4 {
|
|
top: 78.2%;
|
|
left: 72.4%;
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
.id5 {
|
|
top: 77%;
|
|
left: 72%;
|
|
}
|
|
|
|
.id6 {
|
|
top: 77%;
|
|
left: 70%;
|
|
}
|
|
|
|
.id7 {
|
|
top: 83%;
|
|
left: 72%;
|
|
}
|
|
|
|
.id8 {
|
|
top: 83%;
|
|
left: 70%;
|
|
}
|
|
|
|
.id9 {
|
|
top: 79.5%;
|
|
left: 69.7%;
|
|
}
|
|
|
|
.id10 {
|
|
top: 82%;
|
|
left: 64.5%;
|
|
}
|
|
|
|
.id11 {
|
|
top: 83.1%;
|
|
left: 58.2%;
|
|
}
|
|
|
|
.scrollTable {
|
|
color: rgb(185, 186, 192);
|
|
margin: auto 0px;
|
|
padding: 4px 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-align: center;
|
|
display: inline-block;
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.title {
|
|
position: absolute;
|
|
top: 2%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
letter-spacing: 0.3vw;
|
|
font-size: 2vw;
|
|
font-weight: 800;
|
|
color: white;
|
|
}
|
|
|
|
|
|
.scTable1 {
|
|
display: none;
|
|
position: absolute;
|
|
top: 48%;
|
|
left: 2.5%;
|
|
width: 20%;
|
|
height: 45%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.line:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background-color: #B8DFFA;
|
|
border: 2px solid #3E649F;
|
|
}
|
|
|
|
.item1 {
|
|
right: 0%;
|
|
bottom: 27%;
|
|
|
|
.alm {
|
|
position: absolute;
|
|
top: 100%;
|
|
right: 0%;
|
|
}
|
|
|
|
.line {
|
|
position: absolute;
|
|
top: calc(100% - 8px);
|
|
left: calc(100% - 8px);
|
|
transform-origin: center top;
|
|
transform: translateX(-50%) rotate(-45deg);
|
|
width: 1px;
|
|
height: 3vh;
|
|
background-color: #3E649F;
|
|
}
|
|
}
|
|
|
|
.item2 {
|
|
right: 24%;
|
|
bottom: 25%;
|
|
|
|
.alm {
|
|
position: absolute;
|
|
top: 100%;
|
|
right: 0%;
|
|
}
|
|
|
|
.line {
|
|
position: absolute;
|
|
top: calc(100% - 8px);
|
|
left: calc(100% - 8px);
|
|
transform-origin: center top;
|
|
transform: translateX(-50%) rotate(-45deg);
|
|
width: 1px;
|
|
height: 3vh;
|
|
background-color: #3E649F;
|
|
}
|
|
}
|
|
|
|
.item3 {
|
|
left: 40%;
|
|
bottom: 25%;
|
|
|
|
.alm {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0%;
|
|
}
|
|
|
|
.line {
|
|
position: absolute;
|
|
top: calc(100% - 8px);
|
|
left: 8px;
|
|
transform-origin: center top;
|
|
transform: translateX(-50%) rotate(45deg);
|
|
width: 1px;
|
|
height: 3vh;
|
|
background-color: #3E649F;
|
|
}
|
|
}
|
|
|
|
.item4 {
|
|
left: 18%;
|
|
bottom: 66%;
|
|
|
|
|
|
.alm {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 60%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.line {
|
|
position: absolute;
|
|
top: calc(100% - 8px);
|
|
left: calc(60% - 8px);
|
|
transform-origin: center top;
|
|
transform: translateX(-50%) rotate(-45deg);
|
|
width: 1px;
|
|
height: 3vh;
|
|
background-color: #3E649F;
|
|
}
|
|
}
|
|
|
|
.item1, .item2, .item3, .item4 {
|
|
padding: 8px;
|
|
width: 345.6px;
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
display: none;
|
|
color: #fff;
|
|
|
|
|
|
.table1 {
|
|
width: 100%;
|
|
height: 50px;
|
|
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: 50px;
|
|
min-height: 50px;
|
|
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 {
|
|
}
|
|
}
|
|
|
|
.alm {
|
|
display: none;
|
|
animation: colourSwitching 0.5s infinite;
|
|
}
|
|
|
|
@keyframes colourSwitching {
|
|
0% {
|
|
color: #ffff00;
|
|
}
|
|
50% {
|
|
color: #ff0000;
|
|
}
|
|
100% {
|
|
color: #ffff00;
|
|
}
|
|
}
|
|
|
|
.leftBottom {
|
|
position: absolute;
|
|
bottom: 4.5%;
|
|
left: 2.5%;
|
|
}
|
|
|
|
.leftTop {
|
|
position: absolute;
|
|
top: 4.5%;
|
|
left: 2.5%;
|
|
}
|
|
|
|
</style>
|
|
<style>
|
|
|
|
.almReminder {
|
|
display: block;
|
|
}
|
|
</style>
|