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%;`">
    </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 class="scTable1">
      <div style="background-color: #094170">
        <div class="scrollTable" style="font-weight: bold;">
          报警信息
        </div>
      </div>
      <vue-seamless-scroll
        :class-option="chart1TableOption"
        :data="almTableData"
        style="height: calc(100% - 33px);overflow:hidden; "
      >
        <div
          v-for="(item, index) in almTableData"
          :key="index"
        >
          <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
            <div
              class="scrollTable">
              {{ item.ruleName }}
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import bg from '@/assets/images/bg.jpg'
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  components: {vueSeamlessScroll},
  data() {
    return {
      bg,
      deviceData: {
        'E0001': {},
        'E0002': {},
        'E0003': {},
        'E0004': {},
        'E0005': {},
        'E0006': {},
        'E0013': {},
        'E0014': {},
      },
      almData: {
        'E0001': {},
        'E0002': {},
        'E0003': {},
        'E0004': {},
        'E0005': {},
        'E0006': {},
        'E0013': {},
        'E0014': {},
      },
      almTableData: [],
      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,
          })
          this.$set(this.almData[deviceID], e.deviceParam.monitorId, e.alarmRules)
          // this.$set(this.almData[deviceID], e.deviceParam.monitorId, [
          //   {
          //     "objid": 30020,
          //     "monitorId": "T0002_0101 ",
          //     "ruleId": null,
          //     "ruleName": "T0002_0101 表的温度大于阈值 20",
          //     "triggerRule": 0,
          //     "monitorField": 0,
          //     "triggerValue": 20,
          //     "cause": "温度过高-备注"
          //   },
          //   {
          //     "objid": 30021,
          //     "monitorId": "T0002_0101 ",
          //     "ruleId": null,
          //     "ruleName": "T0002_0101表的温度小于阈值 30",
          //     "triggerRule": 1,
          //     "monitorField": 0,
          //     "triggerValue": 30,
          //     "cause": "温度过低-备注"
          //   }
          // ])
          let list = []

          Object.values(this.almData).forEach((item) => {
            Object.values(item).forEach((item1) => {
              item1.forEach((item2) => {
                list.push(item2)
              })
            })
          })

          this.almTableData = list
          // this.$set(this.almData[deviceID], e.deviceParam.monitorId, ['报警信息'])
        }
      }
    )
  },
  methods:
    {}
}
</script>
<style lang="less" scoped>
.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 {
  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%);
  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;
  }
}
</style>