点位管理

src/config/getData2.js

@@ -16,47 +16,55 @@ export const updatePass = (Rfold, Rfnew) => post('api/pda/updatePass', {
 })
 
 /**
- * 点位绑定确认
+ * 点位管理
  */
-// 1.1查询区域点位
-export const queryPoint = () => post('api/pda/sendMaterial/queryPoint', {})
-// export const queryPoint = () => {
+// 1.1查询区域
+export const queryRegion = () => post('api/pda/sendMaterial/queryRegion', {})
+// export const queryRegion = () => {
 //   let res = {
 //     code: '1',
 //     result: [{
 //       region_id: '1',
-//       region_code: '1',
-//       region_name: 'A001',
-//       pointArr: [{
-//         point_id: '1',
-//         point_code: '1',
-//         point_name: 'A001-001'
-//       }, {
-//         point_id: '2',
-//         point_code: '2',
-//         point_name: 'A001-002'
-//       }]
+//       region_name: 'a'
 //     }, {
 //       region_id: '2',
-//       region_code: '2',
-//       region_name: 'A002',
-//       pointArr: [{
-//         point_id: '1',
-//         point_code: '1',
-//         point_name: 'A002-001'
-//       }, {
-//         point_id: '2',
-//         point_code: '2',
-//         point_name: 'A002-002'
-//       }]
+//       region_name: 'aa'
+//     }]
+//   }
+//   return res
+// }
+// 1.2查询区域点位
+export const queryPoint = (id) => post('api/pda/sendMaterial/queryPoint', {
+  region_id: id
+})
+// export const queryPoint = () => {
+//   let res = {
+//     code: '1',
+//     pointArr: [{
+//       point_id: '1',
+//       point_code: '1',
+//       point_name: 'A001-001',
+//       point_status: '00',
+//       quality_scode: ''
+//     }, {
+//       point_id: '2',
+//       point_code: '2',
+//       point_name: 'A001-002',
+//       point_status: '02',
+//       quality_scode: '00',
+//       product_code: 'gdff',
+//       batch_code: '01',
+//       product_specifications: '133',
+//       weight: '100',
+//       time: '2020-10-10'
 //     }]
 //   }
 //   return res
 // }
 // 1.2点位绑定确认
-export const emptyAndQtyConfirm = (id, status, scode) => post('api/pda/emptyAndQty/confirm', {
+export const emptyAndQtyConfirm = (id, type, scode) => post('api/pda/emptyAndQty/confirm', {
   point_id: id,
-  point_status: status,
+  type: type,
   quality_scode: scode
 })
 

src/pages/login/Home.vue

@@ -16,7 +16,7 @@
     <div class="con">
       <ul>
         <!-- <li v-for="e in menuList" :key="e.menu_id" @click="toPage(e)">{{e.name}}</li> -->
-        <li @click="goInner('/PointBindConfirm')">点位绑定确认</li>
+        <li @click="goInner('/PointManage')">点位管理</li>
         <li @click="goInner('/CarryTask')">搬运任务</li>
         <li @click="goInner('/TaskManage')">任务管理</li>
         <li @click="goInner('/ZlManage')">指令管理</li>

src/pages/proj/PointManage.vue

@@ -0,0 +1,330 @@
+<template>
+    <section>
+      <nav-bar title="点位管理"></nav-bar>
+      <section class="content mgt15">
+        <div class="clear icons">
+          <div class="fl item_icon">
+            <div class="color_icon icon_squa gray"></div>
+            <div class="font_icon">空位</div>
+          </div>
+          <div class="fl item_icon">
+            <div class="color_icon icon_squa blue1"></div>
+            <div class="font_icon">有空桶</div>
+          </div>
+          <div class="fl item_icon">
+            <div class="color_icon icon_squa blue"></div>
+            <div class="font_icon">有料桶（</div>
+          </div>
+          <div class="fl item_icon">
+            <div class="color_icon orange"></div>
+            <div class="font_icon">待检品</div>
+          </div>
+          <div class="fl item_icon">
+            <div class="color_icon green"></div>
+            <div class="font_icon">合格品</div>
+          </div>
+          <div class="fl item_icon">
+            <div class="color_icon red"></div>
+            <div class="font_icon">不良品）</div>
+          </div>
+        </div>
+        <div class="locate_block" v-for="e in areaArr" :key="e.region_id">
+          <div class="locate_name" @click="getPonit (e)">
+            <h2>{{e.region_name}}</h2>
+            <div class="iconfont open_icon" :class="{'is_reverse': e.checked === true}"></div>
+          </div>
+          <div v-show="e.checked === true" class="site_block clear" ref="liCon">
+            <div class="site_item fl" v-for="(el, i) in e.pointArr" :key="i" :class="['gray', 'blue1', 'blue'][Number(el.point_status)]" @click="setInfo(el)">
+              <div class="site_item_box clear">
+                <h3 class="fl">站点</h3>
+                <p class="fl"><span class="color_icon" :class="el.quality_scode !== '' || undefined ? ['orange', 'green', 'red'][Number(el.quality_scode)] : ''"></span>{{el.point_name}}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <div v-if="active" class="msg_wrapper">
+        <div class="msg_box">
+        <div class="msg_item_wrap">
+            <div class="msg_item">
+                <div class="label_item">当前点位</div>
+                <div class="from_item">
+                {{obj.point_name}}
+                </div>
+            </div>
+            <div class="msg_item">
+                <div class="label_item">产品名称</div>
+                <div class="from_item">
+                {{obj.product_code}}
+                </div>
+            </div>
+        </div>
+        <div class="msg_item_wrap">
+            <div class="msg_item">
+                <div class="label_item">产品规格</div>
+                <div class="from_item">
+                {{obj.batch_code}}
+                </div>
+            </div>
+            <div class="msg_item">
+                <div class="label_item">批次</div>
+                <div class="from_item">
+                {{obj.product_specifications}}
+                </div>
+            </div>
+        </div>
+        <div class="msg_item_wrap">
+            <div class="msg_item">
+                <div class="label_item">重量</div>
+                <div class="from_item">
+                {{obj.weight}}
+                </div>
+            </div>
+            <div class="msg_item">
+                <div class="label_item">时间</div>
+                <div class="from_item">
+                {{obj.time}}
+                </div>
+            </div>
+        </div>
+        <div v-show="obj.point_status === '02'" class="msg_item_wrap">
+            <div class="msg_item allwidth">
+                <div class="label_item">质量状态</div>
+                <div class="from_item">
+                    <el-select v-model="value" placeholder="请选择">
+                    <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                    </el-option>
+                    </el-select>
+                </div>
+            </div>
+        </div>
+          <div class="msg_btns">
+            <button class="msg_btn" :disabled="disabled1" @click="cleanUp">清空</button>
+            <button class="msg_btn" :disabled="disabled2" @click="msgSure">确认</button>
+            <button class="msg_btn" @click="msgCancle">取消</button>
+          </div>
+        </div>
+      </div>
+      <div v-if="active" class="mask"></div>
+    </section>
+  </template>
+
+<script>
+import NavBar from '@components/NavBar.vue'
+import {queryRegion, queryPoint, emptyAndQtyConfirm} from '@config/getData2'
+export default {
+  name: 'PointManage',
+  components: {
+    NavBar
+  },
+  data () {
+    return {
+      interTime: this.$store.getters.setTime,
+      timer: null,
+      liConHeight: 0, // 折叠面板内容初始高度
+      areaArr: [],
+      pointArr: [],
+      regobj: {},
+      active: false,
+      options: [{value: '00', label: '待检品'}, {value: '01', label: '合格品'}, {value: '02', label: '不良品'}],
+      value: '',
+      obj: {},
+      disabled1: false,
+      disabled2: false
+    }
+  },
+  mounted () {
+    document.body.removeAttribute('class', 'login-bg')
+    this.initArea()
+  },
+  //   beforeDestroy () {
+  //     clearInterval(this.timer)
+  //   },
+  methods: {
+    // refresh (e) {
+    //   this.timer = setInterval(() => {
+    //     this.initPonit(e)
+    //   }, this.interTime)
+    // },
+    async initArea () {
+      let res = await queryRegion()
+      if (res.code === '1') {
+        this.areaArr = [...res.result]
+        this.areaArr.map(el => {
+          this.$set(el, 'checked', false)
+          this.$set(el, 'pointArr', [])
+        })
+        if (this.areaArr.length > 0) {
+          this.getPonit(this.areaArr[0])
+        }
+      } else {
+        this.Dialog(res.desc)
+      }
+    },
+    async initPonit (e) {
+      let res = await queryPoint(e.region_id)
+      if (res.code === '1') {
+        this.regobj = e
+        this.areaArr.map(el => {
+          if (el.region_id === e.region_id) {
+            this.$set(el, 'pointArr', [...res.pointArr])
+          }
+        })
+      } else {
+        this.Dialog(res.desc)
+      }
+    },
+    getPonit (e) {
+    //   clearInterval(this.timer)
+      this.areaArr.map(el => {
+        if (el.region_id !== e.region_id) {
+          el.checked = false
+        }
+        if (el.region_id === e.region_id) {
+          e.checked = !e.checked
+        }
+      })
+      if (e.checked) {
+        this.initPonit(e)
+        // this.refresh(e)
+      }
+    },
+    setInfo (e) {
+      this.active = true
+      this.obj = e
+      this.value = e.quality_scode
+    },
+    msgCancle () {
+      this.active = false
+      this.obj = {}
+      this.value = ''
+    },
+    msgSure () {
+      this.disabled2 = true
+      this._emptyAndQtyConfirm(this.obj.point_id, '1', this.value)
+      this.active = false
+    },
+    cleanUp () {
+      this.disabled1 = true
+      this._emptyAndQtyConfirm(this.obj.point_id, '2', this.value)
+      this.active = false
+    },
+    async _emptyAndQtyConfirm (id, type, code) {
+      try {
+        let res = await emptyAndQtyConfirm(id, type, code)
+        if (res.code === '1') {
+          this.toast(res.desc)
+          this.initPonit(this.regobj)
+          this.value = ''
+          this.disabled1 = false
+          this.disabled2 = false
+          //   clearInterval(this.timer)
+          //   var that = this
+          //   setTimeout(() => {
+          //     that.initPonit(this.regobj)
+          //     this.refresh(this.regobj)
+          //     this.value = ''
+          //     this.disabled1 = false
+          //     this.disabled2 = false
+          //   }, 2000)
+        } else {
+          this.Dialog(res.desc)
+          this.value = ''
+          this.disabled1 = false
+          this.disabled2 = false
+        }
+      } catch (err) {
+        console.log(err)
+        this.value = ''
+        this.disabled1 = false
+        this.disabled2 = false
+      }
+    }
+  }
+}
+</script>
+
+  <style lang="stylus" scoped>
+  @import '~@style/mixin'
+  .locate_block
+    width 100%
+    background-color #fff
+    border-radius 5px
+    padding .1rem
+    margin-bottom .12rem
+  .locate_name
+    position relative
+    _wh(100%,24px)
+    h2
+      _font(16px,24px,#000,500)
+  .site_block
+    _wh(100%,auto)
+    overflow hidden
+    transition height .3s
+  .site_item
+    _wh(32%,50px)
+    padding 0 .1rem
+    margin-top .12rem
+    background-color #e5e5e5
+    border-radius 5px
+    margin-right 2%
+    overflow hidden
+    &:nth-child(3n)
+      margin-right 0
+  .site_item_box
+    _wh(100%, 40px)
+    margin 5px 0
+    overflow hidden
+    h3
+      display block
+      width 18px
+      _font(14px,20px,#000,500)
+    p
+      display block
+      _fj(center)
+      width calc(100% - 18px)
+      height 40px
+      _font(14px,20px,#999)
+      background-color #fff
+      border-radius 3px
+      padding 0 .05rem
+  .open_icon
+    position absolute
+    right 0
+    top 0
+    _wh(24px,24px)
+    _font(20px,24px,$red,,right)
+    transition all .3s
+    transform rotateZ(180deg)
+  .is_reverse
+    transform rotateZ(0)
+  .gray
+    background-color #e5e5e5
+  .blue
+    background-color $blue
+  .blue1
+    background-color #29406d
+.green
+    background-color $green
+  .orange
+    background-color orange
+  .red
+    background-color red
+.icons
+    height .8rem
+.msg_item
+    _fj()
+    height 35px
+    line-height 35px
+    margin-bottom 15px
+.label_item
+    width 70px
+.from_item
+    width calc(100% - 70px)
+.allwidth
+    width 100%
+  </style>

src/router/index.js

@@ -8,7 +8,7 @@ const Login = r => require.ensure([], () => r(require('../pages/login/Login')),
 const Setup = r => require.ensure([], () => r(require('../pages/login/Setup')), 'Setup')
 
 // 任务页面
-const PointBindConfirm = r => require.ensure([], () => r(require('../pages/proj/PointBindConfirm')), 'PointBindConfirm')
+const PointManage = r => require.ensure([], () => r(require('../pages/proj/PointManage')), 'PointManage')
 const CarryTask = r => require.ensure([], () => r(require('../pages/proj/CarryTask')), 'CarryTask')
 const TaskManage = r => require.ensure([], () => r(require('../pages/proj/TaskManage')), 'TaskManage')
 const ZlManage = r => require.ensure([], () => r(require('../pages/proj/ZlManage')), 'ZlManage')
@@ -47,8 +47,8 @@ export default new Router({
       component: PreLoad
     },
     {
-      path: '/PointBindConfirm', // 点位绑定确认
-      component: PointBindConfirm
+      path: '/PointManage', // 点位管理
+      component: PointManage
     },
     {
       path: '/CarryTask', // 搬运任务

src/style/common.styl

@@ -448,6 +448,13 @@ header
   opacity .2
   background #000
   z-index 99
+.msg_item_wrap
+  _fj()
+  width 100%
+  .msg_item
+    width calc(50% - 10px)
+    &:nth-child(2n+2)
+      margin-left 20px
 .msg_item
   height 50px
   line-height 50px
@@ -560,5 +567,8 @@ header
   _wh(.2rem,.2rem)
   border-radius 50%
   margin-right .1rem
+.icon_squa
+  border-radius 5px
+  _wh(.28rem,.28rem)
 .font_icon
   _font(.28rem, .4rem, #000)