更新看板

src/views/common/board.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2022-03-07 15:31:13
  * @LastEditors: zwq
- * @LastEditTime: 2022-07-04 10:49:38
+ * @LastEditTime: 2022-07-05 16:12:59
  * @Description:
 -->
 <template>
@@ -10,39 +10,9 @@
     <div class="container-title">
       浙江求精科技车间生产看板
     </div>
-    <el-row :gutter="20" style="margin:20px">
-      <el-col :span="8">
-        <board :tableData="tableData1" imgUrl='BMA1'></board>
-      </el-col>
-      <el-col :span="8">
-        <board :tableData="tableData2" imgUrl='BMA2' :countdown="countdown"></board>
-      </el-col>
-      <el-col :span="8">
-        <board :tableData="tableData2" imgUrl='BMA3'></board>
-      </el-col>
-    </el-row>
-    <el-row :gutter="20" style="margin:20px">
-      <el-col :span="8">
-        <board :tableData="tableData2" imgUrl='BMA4' :countdown="countdown1"></board>
-      </el-col>
-      <el-col :span="8">
-        <board :tableData="tableData2" imgUrl='BMB1'></board>
-      </el-col>
-      <el-col :span="8">
-        <board :tableData="tableData1" imgUrl='BMB2' :countdown="countdown"></board>
-      </el-col>
-    </el-row>
-    <el-row :gutter="20" style="margin:20px">
-      <el-col :span="8">
-        <board :tableData="tableData2" imgUrl='BMB3' :countdown="countdown"></board>
-      </el-col>
-      <el-col :span="8">
-        <board :tableData="tableData1" imgUrl='BMC1'></board>
-      </el-col>
-      <el-col :span="8">
-        <board :tableData="tableData2" imgUrl='BMC2' :countdown="countdown1"></board>
-      </el-col>
-    </el-row>
+    <div class="container-body">
+      <board v-for="(item,index) in wbData" :key="index" :wbData="item" :imgUrl="item.kilnCode + item.kilnId"></board>
+    </div>
   </div>
 </template>
 
@@ -53,62 +23,61 @@ export default {
   components: { board },
   data () {
     return {
-      tableData1: [
-        {
-          name: '樟子松',
-          code: '1103434',
-          num: 12,
-          productName: '株洲铁',
-          weight: 123,
-          process: '压缩'
-        },
-        {
-          name: '阿斯蒂芬',
-          code: '1103434',
-          num: 122,
-          productName: '株洲铁',
-          weight: 815,
-          process: '压缩'
-        },
-        {
-          name: '风都',
-          code: '1103434',
-          num: 334,
-          productName: '株洲铁',
-          weight: 1223,
-          process: '压缩'
-        }
-      ],
-      tableData2: [
-        {
-          name: '阿斯蒂芬',
-          code: '1103434',
-          num: 122,
-          productName: '株洲铁',
-          weight: 815,
-          process: '压缩'
-        }
-      ],
-      countdown: {
-        'hours': 5,
-        'minutes': 20,
-        'seconds': 12
-      },
-      countdown1: {
-        'hours': 11,
-        'minutes': 43,
-        'seconds': 56
-      }
+      websock: '',
+      url: '',
+      wbData: []
     }
   },
-  created () {},
-  methods: {}
+  created () {
+    const baseurl = window.SITE_CONFIG.baseUrl
+    this.url = baseurl.slice(5)
+    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())
+    },
+    websocketonerror () {
+      // 连接建立失败重连
+      this.initWebSocket()
+    },
+    websocketonmessage (e) {
+      // 数据接收
+      console.log(e.data)
+      this.wbData = JSON.parse(e.data)
+      console.log(this.wbData)
+    },
+    websocketsend () {
+      // 数据发送
+      this.websock.send()
+    },
+    websocketclose (e) {
+      // 关闭
+      console.log('断开连接', e)
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 .main-body {
-  min-height: 100%;
+  min-height: 88vh;
   width: 100%;
   background: url(~@/assets/img/board/1.png) center no-repeat;
   background-size: cover;
@@ -124,5 +93,13 @@ export default {
     line-height: 80px;
     text-align: center;
   }
+
+  .container-body {
+    display: flex;
+    margin: auto;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: space-around;
+  }
 }
 </style>