JDAirPort.Ems.UI/src/views/board/index.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%;`">
      <!--      <img :src="model" alt="">-->
    </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]" class="almSpan">
            {{ ii }}
          </div>
        </div>
        <div v-for="i in Object.keys(almData.E0014)">
          <div v-for="ii in  almData.E0014[i]" class="almSpan">
            {{ ii }}
          </div>
        </div>
      </div>
      <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 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>
                <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="alm">
        <div v-for="i in Object.keys(almData.E0002)">
          <div v-for="ii in  almData.E0002[i]" class="almSpan">
            {{ ii }}
          </div>
        </div>
        <div v-for="i in Object.keys(almData.E0003)">
          <div v-for="ii in  almData.E0003[i]" class="almSpan">
            {{ ii }}
          </div>
        </div>
        <div v-for="i in Object.keys(almData.E0004)">
          <div v-for="ii in  almData.E0004[i]" class="almSpan">
            {{ ii }}
          </div>
        </div>
      </div>
      <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.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>
                <div class="info1">
                  {{ deviceMap[ii] }}
                </div>
                <div class="span">
                  :
                </div>
                <div class="info2">
                  {{ deviceData.E0002[i][ii] }}
                </div>
              </div>
            </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>
                <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 class="item3">
      <div class="alm">
        <div v-for="i in Object.keys(almData.E0001)">
          <div v-for="ii in  almData.E0001[i]" class="almSpan">
            {{ ii }}
          </div>
        </div>
      </div>
      <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.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 class="item4">
      <div class="alm">
        <div v-for="i in Object.keys(almData.E0005)">
          <div v-for="ii in  almData.E0005[i]" class="almSpan">
            {{ ii }}
          </div>
        </div>
        <div v-for="i in Object.keys(almData.E0006)">
          <div v-for="ii in  almData.E0006[i]" class="almSpan">
            {{ ii }}
          </div>
        </div>
      </div>
      <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.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>
                <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>
</template>

<script>
import bg from '@/assets/images/bg.jpg'

export default {
  data() {
    return {
      bg,
      deviceData: {
        'E0001': {},
        'E0002': {},
        'E0003': {},
        'E0004': {},
        'E0005': {},
        'E0006': {},
        'E0013': {},
        'E0014': {},
      },
      almData: {
        'E0001': {},
        'E0002': {},
        'E0003': {},
        'E0004': {},
        'E0005': {},
        'E0006': {},
        'E0013': {},
        'E0014': {},
      },
      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,
          })
          // this.$set(this.almData[deviceID], e.deviceParam.monitorId, e.alarmRules.map(v => {
          //   return v.ruleName
          // }))
          this.$set(this.almData[deviceID], e.deviceParam.monitorId, ['报警信息'])
        }
        console.log(this.deviceData.E0014)
      }
    )
  },
  methods:
    {}
}
</script>
<style lang="less" scoped>
.title {
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  letter-spacing: 0.3vw;
  font-size: 2vw;
  font-weight: 800;
  color: white;
}

.item1 {
  right: 0%;
  bottom: 27%;

  .alm {
    position: absolute;
    top: 100%;
    right: 0%;
  }

  .line {
    position: absolute;
    top: 100%;
    left: 100%;
    transform-origin: left top;
    transform: translateX(-50%) rotate(-45deg);
    width: 1px;
    height: 3vh;
    background-color: #fff;
  }
}

.item2 {
  right: 24%;
  bottom: 25%;

  .alm {
    position: absolute;
    top: 100%;
    right: 0%;
  }

  .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%;

  .alm {
    position: absolute;
    top: 100%;
    left: 0%;
  }

  .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%;


  .alm {
    position: absolute;
    top: 100%;
    left: 60%;
    transform: translateX(-50%);
  }

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


  .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 {
  animation: colourSwitching 0.5s infinite;
}

@keyframes colourSwitching {
  0% {
    color: #ffff00;
  }
  50% {
    color: #ff0000;
  }
  100% {
    color: #ffff00;
  }
}
</style>