Merge pull request '新增看板' (#14) from zwq into master

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,53 @@
+<!--
+ * @Author: zwq
+ * @Date: 2022-03-07 15:31:13
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-07-01 16:58:50
+ * @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="name" label="客户名称" align="center"> </el-table-column>
+      <el-table-column prop="code" label="订单编号" align="center"> </el-table-column>
+      <el-table-column prop="num" 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>
+
+<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,226 @@
+<!--
+ * @Author: zwq
+ * @Date: 2022-03-07 15:31:13
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-07-01 16:58:00
+ * @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">
+                1293803
+                <div style="color: #fff;margin: 5px 0;">加工单编号</div>
+              </div>
+            </el-row>
+            <el-row>
+              <div class="mid bottom-info">
+                129
+                <div style="color: #fff;margin: 5px 0;">工艺号</div>
+              </div>
+            </el-row>
+          </el-col>
+          <el-col :span="8">
+            <div class="back">
+              <el-progress
+                :percentage="80"
+                :stroke-width="8"
+                :show-text="false"
+              ></el-progress>
+              <div style="margin: 5px 0;">{{ hour }}:{{ minute }}:{{ second }}</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="tableData"></part-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import partTable from './board-part-table.vue'
+export default {
+  components: {partTable},
+  props: {
+    tableData: {
+      type: Array,
+      default: () => []
+    },
+    countdown: {
+      type: Object,
+      default: () => ({
+        'hours': 1,
+        'minutes': 10,
+        'seconds': 0
+      })
+    },
+    imgUrl: {
+      type: String,
+      default: 'BMA1'
+    }
+  },
+  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>
+.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,128 @@
+<!--
+ * @Author: zwq
+ * @Date: 2022-03-07 15:31:13
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-07-04 10:49:38
+ * @Description:
+-->
+<template>
+  <div class="main-body">
+    <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>
+</template>
+
+<script>
+import board from './board-part'
+export default {
+  name: 'Board',
+  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
+      }
+    }
+  },
+  created () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.main-body {
+  min-height: 100%;
+  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;
+  }
+}
+</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>