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 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="line"></div>
      <div style="display: inline-block">
        <div v-for="i in Object.keys(deviceData.E0013)">
          <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>
      </div>
      <div style="display: inline-block">
        <div v-for="i in Object.keys(deviceData.E0014)">
          <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>
      </div>
    </div>
    <div class="item2">
      <div class="line"></div>
      <div v-for="i in Object.keys(deviceData.E0002)">
        <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>
      <div v-for="i in Object.keys(deviceData.E0003)">
        <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>
      <div v-for="i in Object.keys(deviceData.E0004)">
        <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>
    </div>
    <div class="item3">
      <div class="line"></div>
      <div v-for="i in Object.keys(deviceData.E0001)">
        <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>
    </div>
    <div class="item4">
      <div class="line"></div>
      <div v-for="i in Object.keys(deviceData.E0005)">
        <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>
      <div v-for="i in Object.keys(deviceData.E0006)">
        <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>
    </div>
  </div>
</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': {},
        '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,
            })
          }
          console.log(this.deviceData.E0014)
        }
    )
  },
  methods:
      {}
}
</script>
<style lang="less" scoped>
.title {
  position: absolute;
  top: 1%;
  left: 50%;
  transform: translateX(-50%);
  letter-spacing: 0.2vw;
  font-size: 1.8vw;
  font-weight: 800;
  color: white;
}

.item1 {
  right: -3%;
  width: 14vw;
  bottom: 25%;
}

.item2 {
  right: 18%;
  width: 14vw;
  bottom: 25%;
}

.item3 {
  right: 60%;
  width: 14vw;
  bottom: 25%;
}

.item4 {
  right: 75%;
  width: 14vw;
  bottom: 65%;
}

.item1, .item2, .item3, .item4 {
  position: absolute;
  border: 1px solid white;
  transform: translateX(-50%);
  color: #fff;

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

  .data {
  }
}
</style>