<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>
