更新看板

Reviewed-on: #14

config/index.js

@@ -1,8 +1,8 @@
 /*
  * @Author: gtz
  * @Date: 2021-11-19 10:10:51
- * @LastEditors: gtz
- * @LastEditTime: 2022-03-05 16:16:24
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-07-01 11:05:12
  * @Description: file content
  * @FilePath: \mt-qj-wms-ui\config\index.js
  */
@@ -31,7 +31,7 @@ module.exports = {
     },
 
     // Various Dev Server settings
-    host: '0.0.0.0', // can be overwritten by process.env.HOST
+    host: 'localhost', // can be overwritten by process.env.HOST
     port: 8001, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,

src/router/index.js

@@ -1,8 +1,8 @@
 /*
  * @Author: zwq
  * @Date: 2021-11-15 08:20:28
- * @LastEditors: gtz
- * @LastEditTime: 2022-03-05 16:05:35
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-07-01 11:11:17
  * @Description:
  */
 /**
@@ -39,6 +39,7 @@ const mainRoutes = {
     // 2. iframeUrl: 是否通过iframe嵌套展示内容, '以http[s]://开头': 是, '': 否
     // 提示: 如需要通过iframe嵌套展示内容, 但不通过tab打开, 请自行创建组件使用iframe处理!
     { path: '/home', component: _import('common/home'), name: 'home', meta: { title: '首页', isTab: true } },
+    { path: '/board', component: _import('common/board'), name: 'board', meta: { title: '车间生产看板', isTab: false } },
     { path: '/orderProcess', component: _import('common/order-process'), name: 'orderProcess', meta: { title: '订单加工', isTab: true } },
     { path: '/orderAuto', component: _import('common/order-auto'), name: 'orderAuto', meta: { title: '自动任务', isTab: true } },
     { path: '/exWarehouse', component: _import('common/ex-warehouse'), name: 'exWarehouse', meta: { title: '货物出库', isTab: true } },

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

@@ -0,0 +1,52 @@
+<!--
+ * @Author: zwq
+ * @Date: 2022-03-07 15:31:13
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-07-05 16:11:42
+ * @Description:
+-->
+<template>
+  <div class="main-body">
+    <el-table
+      size='mini'
+      :data="tableData"
+      :header-cell-style="{background:'#082c34',color:'#acb9be',padding:'0px'}"
+      :cell-style="{background:'#04222d',color:'#acb9be',padding:'5px 0px'}"
+      style="width: 100%"
+    >
+      <el-table-column type="index" label="序号" width="30" align="center"> </el-table-column>
+      <el-table-column prop="customer" label="客户名称" align="center"> </el-table-column>
+      <el-table-column prop="orderNo" label="订单编号" 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>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'board-part-table',
+  components: {},
+  props: {
+    tableData: {
+      type: Array,
+      default: []
+    }
+  },
+  data () {
+    return {}
+  },
+  created () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.main-body{
+  margin: 5px;
+}
+.main-body /deep/ .cell{
+  padding: 0px;
+}
+</style>

src/views/common/board-part.vue

@@ -0,0 +1,148 @@
+<!--
+ * @Author: zwq
+ * @Date: 2022-03-07 15:31:13
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-07-05 16:18:48
+ * @Description:
+-->
+<template>
+  <div class="container">
+    <div class="title">
+      <div class="tipDiv"></div>
+      加工单信息
+    </div>
+    <div class="main-body">
+      <div class="main-header">
+        <el-row :gutter="8">
+          <el-col :span="8">
+            <div class="front">
+              <img
+                :src="'/static/img/lu/'+imgUrl+'.png'"
+                style="display:block;margin:auto"
+              />炉号
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <el-row>
+              <div class="mid top-info">
+                {{wbData.taskCode}}
+                <div style="color: #fff;margin: 5px 0;">加工单编号</div>
+              </div>
+            </el-row>
+            <el-row>
+              <div class="mid bottom-info">
+                {{wbData.plcValue}}
+                <div style="color: #fff;margin: 5px 0;">工艺号</div>
+              </div>
+            </el-row>
+          </el-col>
+          <el-col :span="8">
+            <div class="back">
+              <el-progress
+                :percentage="wbData.completeness"
+                :stroke-width="8"
+                :show-text="false"
+              ></el-progress>
+              <div style="margin: 5px 0;">{{ wbData.remainingTime}}</div>
+                <div style="color: #fff;font-size:14px">剩余时间</div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="main-table">
+      <div class="tipDiv"></div>
+      标识信息卡
+      </div>
+      <part-table :tableData="wbData.currTaskDetVoList"></part-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import partTable from './board-part-table.vue'
+export default {
+  components: {partTable},
+  props: {
+    wbData: {
+      type: Object,
+      default: () => {}
+    },
+    imgUrl: {
+      type: String,
+      default: 'BMA1'
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container{
+  width: 30%;
+}
+.title {
+  color: #ffffff;
+  font-size: 22px;
+  margin: 8px 0;
+  .tipDiv {
+    border-radius: 3px;
+    width: 8px;
+    height: 22px;
+    margin-right: 20px;
+    background-color: #54fdef;
+    float: left;
+  }
+}
+.main-body{
+  background-color: #04242d;
+.main-header {
+  .front {
+    min-height: 136px;
+    border-radius: 4px;
+    padding: 6px;
+    color: #ffffff;
+    text-align: center;
+    background: linear-gradient(to bottom, #133e46 0%, #04202c 100%);
+  }
+  .mid {
+    min-height: 64px;
+    border-radius: 4px;
+    margin-bottom: 5px;
+    padding: 6px;
+    color: #48dcd1;
+    text-align: center;
+    background: linear-gradient(to bottom, #0b2c36 0%, #04202c 100%);
+  }
+  .back {
+    min-height: 136px;
+    padding: 25px 5px;
+    text-align: center;
+    font-size: 30px;
+    color: #48dcd1;
+  }
+  .back /deep/ .el-progress-bar__inner {
+    background: linear-gradient(to right, #62fbb9 0%, #fdd64a 100%);
+  }
+}
+.main-table{
+  color: #ffffff;
+  margin: 10px;
+  .tipDiv{
+    width: 8px;
+    height: 8px;
+    margin: 3px 10px 3px 0;
+    background-color: #54fdef;
+    float: left;
+  }
+}
+}
+</style>

src/views/common/board.vue

@@ -0,0 +1,105 @@
+<!--
+ * @Author: zwq
+ * @Date: 2022-03-07 15:31:13
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-07-05 16:12:59
+ * @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 + item.kilnId"></board>
+    </div>
+  </div>
+</template>
+
+<script>
+import board from './board-part'
+export default {
+  name: 'Board',
+  components: { board },
+  data () {
+    return {
+      websock: '',
+      url: '',
+      wbData: []
+    }
+  },
+  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: 88vh;
+  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>

src/views/main-sidebar.vue

@@ -11,6 +11,10 @@
           <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
           <span slot="title">首页</span>
         </el-menu-item>
+        <el-menu-item index="board" @click="$router.push({ name: 'board' })">
+          <icon-svg name="shanchu" class="site-sidebar__menu-icon"></icon-svg>
+          <span slot="title">车间生产看板</span>
+        </el-menu-item>
         <el-submenu index="task">
           <template slot="title">
             <icon-svg name="config" class="site-sidebar__menu-icon"></icon-svg>

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