src/views/common/board-part-table.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2022-03-07 15:31:13
  * @LastEditors: zwq
- * @LastEditTime: 2022-07-01 16:58:50
+ * @LastEditTime: 2022-07-05 16:11:42
  * @Description:
 -->
 <template>
@@ -15,12 +15,11 @@
       style="width: 100%"
     >
       <el-table-column type="index" label="序号" width="30" align="center"> </el-table-column>
-      <el-table-column prop="name" label="客户名称" align="center"> </el-table-column>
+      <el-table-column prop="customer" label="客户名称" align="center"> </el-table-column>
-      <el-table-column prop="code" label="订单编号" align="center"> </el-table-column>
+      <el-table-column prop="orderNo" label="订单编号" align="center"> </el-table-column>
-      <el-table-column prop="num" label="数量" width="50" align="center"> </el-table-column>
+      <el-table-column prop="quantity" label="数量" width="50" align="center"> </el-table-column>
       <el-table-column prop="productName" label="产品名称" align="center"> </el-table-column>
       <el-table-column prop="weight" label="重量" width="50" align="center"> </el-table-column>
-      <el-table-column prop="process" label="加工方式" width="60" align="center"> </el-table-column>
     </el-table>
   </div>
 </template>

src/views/common/board-part.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2022-03-07 15:31:13
  * @LastEditors: zwq
- * @LastEditTime: 2022-07-01 16:58:00
+ * @LastEditTime: 2022-07-05 16:18:48
  * @Description:
 -->
 <template>
@@ -25,13 +25,13 @@
           <el-col :span="8">
             <el-row>
               <div class="mid top-info">
-                1293803
+                {{wbData.taskCode}}
                 <div style="color: #fff;margin: 5px 0;">加工单编号</div>
               </div>
             </el-row>
             <el-row>
               <div class="mid bottom-info">
-                129
+                {{wbData.plcValue}}
                 <div style="color: #fff;margin: 5px 0;">工艺号</div>
               </div>
             </el-row>
@@ -39,11 +39,11 @@
           <el-col :span="8">
             <div class="back">
               <el-progress
-                :percentage="80"
+                :percentage="wbData.completeness"
                 :stroke-width="8"
                 :show-text="false"
               ></el-progress>
-              <div style="margin: 5px 0;">{{ hour }}:{{ minute }}:{{ second }}</div>
+              <div style="margin: 5px 0;">{{ wbData.remainingTime}}</div>
                 <div style="color: #fff;font-size:14px">剩余时间</div>
             </div>
           </el-col>
@@ -53,7 +53,7 @@
       <div class="tipDiv"></div>
       标识信息卡
       </div>
-      <part-table :tableData="tableData"></part-table>
+      <part-table :tableData="wbData.currTaskDetVoList"></part-table>
     </div>
   </div>
 </template>
@@ -63,17 +63,9 @@ import partTable from './board-part-table.vue'
 export default {
   components: {partTable},
   props: {
-    tableData: {
+    wbData: {
-      type: Array,
-      default: () => []
-    },
-    countdown: {
       type: Object,
-      default: () => ({
+      default: () => {}
-        'hours': 1,
-        'minutes': 10,
-        'seconds': 0
-      })
     },
     imgUrl: {
       type: String,
@@ -82,91 +74,21 @@ export default {
   },
   data () {
     return {
-      hours: 1,
-      minutes: 12,
-      seconds: 0
     }
   },
   created () {
-    this.hours = this.countdown.hours
-    this.minutes = this.countdown.minutes
-    this.seconds = this.countdown.seconds
   },
   mounted () {
-    this.add()
-  },
-  watch: {
-    // 监听数值变化
-    second: {
-      handler (newVal) {
-        this.num(newVal)
-      }
-    },
-    minute: {
-      handler (newVal) {
-        this.num(newVal)
-      }
-    },
-    hour: {
-      handler (newVal) {
-        this.num(newVal)
-      }
-    }
-  },
-  computed: {
-    // 初始化数据
-    second () {
-      return this.num(this.seconds)
-    },
-    minute () {
-      return this.num(this.minutes)
-    },
-    hour () {
-      return this.num(this.hours)
-    }
   },
   methods: {
-    num (n) {
-      return n < 10 ? '0' + n : '' + n
-    },
-    // 倒计时函数
-    add () {
-      let time = window.setInterval(() => {
-        if (this.hours !== 0 && this.minutes === 0 && this.seconds === 0) {
-          this.hours -= 1
-          this.minutes = 59
-          this.seconds = 59
-        } else if (
-          this.hours === 0 &&
-          this.minutes !== 0 &&
-          this.seconds === 0
-        ) {
-          this.minutes -= 1
-          this.seconds = 59
-        } else if (
-          this.hours === 0 &&
-          this.minutes === 0 &&
-          this.seconds === 0
-        ) {
-          this.seconds = 0
-          window.clearInterval(time)
-        } else if (
-          this.hours !== 0 &&
-          this.minutes !== 0 &&
-          this.seconds === 0
-        ) {
-          this.minutes -= 1
-          this.seconds = 59
-        } else {
-          this.seconds -= 1
-        }
-      }, 1000)
-    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.container{
+  width: 30%;
+}
 .title {
   color: #ffffff;
   font-size: 22px;

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">
+    <div class="container-body">
-      <el-col :span="8">
+      <board v-for="(item,index) in wbData" :key="index" :wbData="item" :imgUrl="item.kilnCode + item.kilnId"></board>
-        <board :tableData="tableData1" imgUrl='BMA1'></board>
+    </div>
-      </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>
 </template>
 
@@ -53,62 +23,61 @@ export default {
   components: { board },
   data () {
     return {
-      tableData1: [
+      websock: '',
-        {
+      url: '',
-          name: '樟子松',
+      wbData: []
-          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
-      }
     }
   },
-  created () {},
+  created () {
-  methods: {}
+    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>

src/views/main.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2021-11-15 08:20:28
  * @LastEditors: zwq
- * @LastEditTime: 2022-03-18 14:48:46
+ * @LastEditTime: 2022-07-05 15:46:53
  * @Description:
 -->
 <template>
@@ -98,7 +98,7 @@
         // })
       },
       initWebSocket () { // 初始化weosocket
-        const path = `ws:${this.url}/qj/websocket/${'id'}`
+        const path = `ws:${this.url}/qj/websocket/1`
         this.websock = new WebSocket(path)
         this.websock.onmessage = this.websocketonmessage
         this.websock.onopen = this.websocketonopen