<!--
 * @Author: zwq
 * @Date: 2022-03-07 15:31:13
 * @LastEditors: zwq
 * @LastEditTime: 2022-07-08 08:36:01
 * @Description:
-->
<template>
  <div class="main-body">
    <div class="container-title">
      浙江求精科技车间生产看板
    </div>
    <div class="container-body">
      <board v-for="(item,index) in wbData" :key="index" :wbData="item" :imgUrl="item.kilnCode"></board>
    </div>
  </div>
</template>

<script>
import board from './board-part'
export default {
  name: 'Board',
  components: { board },
  data () {
    return {
      websock: '',
      url: '',
      wbData: []
    }
  },
  created () {
    this.url = window.SITE_CONFIG.wbUrl
    this.initWebSocket()
  },
  destroyed () {
    // 页面销毁时关闭ws连接
    if (this.websock) {
      this.websock.close() // 关闭websocket
    }
  },
  methods: {
    initWebSocket () {
      // 初始化weosocket
      const path = `ws://${this.url}/qj/websocket/2`
      this.websock = new WebSocket(path)
      this.websock.onmessage = this.websocketonmessage
      this.websock.onopen = this.websocketonopen
      this.websock.onerror = this.websocketonerror
      this.websock.onclose = this.websocketclose
    },
    websocketonopen () {
      // 连接建立之后执行send方法发送数据
      this.websocketsend(JSON.stringify('2'))
    },
    websocketonerror () {
      // 连接建立失败重连
      this.initWebSocket()
    },
    websocketonmessage (e) {
      // 数据接收
      this.wbData = JSON.parse(e.data)
      console.log(this.wbData)
    },
    websocketsend (val) {
      // 数据发送
      this.websock.send(val)
    },
    websocketclose (e) {
      // 关闭
      console.log('断开连接', e)
    }
  }
}
</script>

<style lang="scss" scoped>
.main-body {
  min-height: 100vh;
  width: 100%;
  background: url(~@/assets/img/board/1.png) center no-repeat;
  background-size: cover;
  overflow: hidden;

  .container-title {
    width: 100%;
    height: 80px;
    background: url(~@/assets/img/board/2.png) no-repeat;
    background-size: 100% 100%;
    color: #00fff0;
    font-size: 28px;
    line-height: 80px;
    text-align: center;
  }

  .container-body {
    display: flex;
    margin: auto;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
  }
}
</style>
