取放桶盖

src/config/getData2.js

@@ -72,3 +72,41 @@ export const sendMaterialConfirm = (sid, scode, spcode, nid, ncode, npcode) => p
   next_region_code: ncode,
   next_point_code: npcode
 })
+
+/**
+ * 取放桶盖
+ */
+// 1.1查询所有区域信息
+// export const handArea = () => post('api/hand/area', {})
+export const handArea = () => {
+  let res = {
+    code: '1',
+    result: [{
+      region_id: '1',
+      region_code: '1',
+      region_name: 'A001'
+    }]
+  }
+  return res
+}
+// 1.2根据区域查询点位
+// export const handPoint = (reg) => post('api/hand/point', {
+//   region: reg
+// })
+export const handPoint = () => {
+  let res = {
+    code: '1',
+    result: [{
+      device_id: '1',
+      device_code: '1',
+      device_name: 'A001-001',
+      status: '2'
+    }]
+  }
+  return res
+}
+// 1.3取放盖确认
+export const handTake = (code, type) => post('api/hand/take', {
+  device_code: code,
+  type: type
+})

src/pages/login/Home.vue

@@ -20,6 +20,7 @@
         <li @click="goInner('/CarryTask')">搬运任务</li>
         <li @click="goInner('/TaskManage')">任务管理</li>
         <li @click="goInner('/ZlManage')">指令管理</li>
+        <li @click="goInner('/TakeBung')">取放桶盖</li>
         <li @click="goInner('/Password')">修改密码</li>
       </ul>
     </div>

src/pages/proj/TakeBung.vue

@@ -0,0 +1,266 @@
+<template>
+  <section>
+    <nav-bar title="取放桶盖"></nav-bar>
+    <section class="content content1 mgt15">
+      <div class="clear icons">
+        <div class="fl item_icon">
+          <div class="color_icon gray"></div>
+          <div class="font_icon">未确认</div>
+        </div>
+        <div class="fl item_icon">
+          <div class="color_icon blue"></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>
+      <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', 'blue', 'green'][Number(el.status)]" @click="setInfo(el)">
+            <div class="site_item_box clear">
+              <h3 class="fl">站点</h3>
+              <p class="fl">{{el.device_name}}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <div v-if="active" class="msg_wrapper">
+      <div class="msg_box">
+        <div class="msg_item">
+          <p>站点：{{obj.device_name}}</p>
+        </div>
+        <div class="msg_btns">
+          <button class="msg_btn" :disabled="disabled1" @click="toSure1">取盖确认</button>
+          <button class="msg_btn" :disabled="disabled2" @click="toSure2">放盖确认</button>
+          <button class="msg_btn" @click="cancle">取消</button>
+        </div>
+      </div>
+    </div>
+    <div v-if="active" class="mask"></div>
+  </section>
+</template>
+
+<script>
+import NavBar from '@components/NavBar.vue'
+import {handArea, handPoint, handTake} from '@config/getData2'
+export default {
+  name: 'TakeBung',
+  components: {
+    NavBar
+  },
+  data () {
+    return {
+      interTime: this.$store.getters.setTime,
+      timer: null,
+      areaArr: [],
+      pointArr: [],
+      regobj: {},
+      obj: {},
+      disabled1: false,
+      disabled2: false,
+      active: 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 handArea()
+      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 handPoint(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.result])
+          }
+        })
+      } 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.obj = e
+      this.active = true
+    },
+    cancle () {
+      this.obj = {}
+      this.active = false
+      this.disabled1 = false
+      this.disabled2 = false
+    },
+    toSure1 () {
+      this.disabled1 = true
+      this.sureTask(this.obj.device_code, '1')
+    },
+    toSure2 () {
+      this.disabled2 = true
+      this.sureTask(this.obj.device_code, '2')
+    },
+    async sureTask (code, type) {
+      try {
+        let res = await handTake(code, type)
+        if (res.code === '1') {
+          this.toast(res.desc)
+          clearInterval(this.timer)
+          setTimeout(() => {
+            this.initPonit(this.regobj)
+            this.refresh(this.regobj)
+            this.obj = {}
+            this.active = false
+            this.disabled1 = false
+            this.disabled2 = false
+          }, 2000)
+        } else {
+          this.Dialog(res.desc)
+          this.disabled1 = false
+          this.disabled2 = false
+        }
+      } catch (err) {
+        console.log(err)
+        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%,.48rem)
+  h2
+    _font(.32rem,.48rem,#000,500)
+.site_block
+  _wh(100%,auto)
+  overflow hidden
+  transition height .3s
+.site_item
+  _wh(32%,1rem)
+  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%, .8rem)
+  margin .1rem 0
+  overflow hidden
+  h3
+    display block
+    width .36rem
+    _font(.28rem,.4rem,#000,500)
+  p
+    display block
+    _fj(center)
+    width calc(100% - .36rem)
+    height 100%
+    _font(.28rem,.4rem,#999)
+    background-color #fff
+    border-radius 3px
+    padding 0 .05rem
+    overflow hidden
+.open_icon
+  position absolute
+  right 0
+  top 0
+  _wh(.48rem,.48rem)
+  _font(.4rem,.48rem,$red,,right)
+  transition all .3s
+  transform rotateZ(180deg)
+.is_reverse
+  transform rotateZ(0)
+.gray
+  background-color #e5e5e5
+.blue
+  background-color $blue
+.green
+  background-color $green
+.orange
+  background-color orange
+.red
+  background-color red
+.submit-bar
+  height 1.6rem
+  padding .1rem
+.dot_item
+  width 35%
+  background-color #e5e5e5
+.p1
+  display block
+  height .6rem
+  _font(.15rem,.6rem,,,center)
+  border-bottom .01rem solid #fff
+  overflow hidden
+.p2
+  display block
+  height .8rem
+  padding 0 .05rem
+  _font(.15rem,.8rem,,,center)
+  overflow hidden
+.btn_block
+  _wh(20%, 1.4rem)
+  _fj()
+  flex-direction column
+.btn1
+  width 100%
+.content1
+  height calc(100% - 1.01rem)
+  overflow-y scroll
+</style>

src/router/index.js

@@ -13,6 +13,7 @@ const CarryTask = r => require.ensure([], () => r(require('../pages/proj/CarryTa
 const TaskManage = r => require.ensure([], () => r(require('../pages/proj/TaskManage')), 'TaskManage')
 const ZlManage = r => require.ensure([], () => r(require('../pages/proj/ZlManage')), 'ZlManage')
 const Password = r => require.ensure([], () => r(require('../pages/proj/Password')), 'Password')
+const TakeBung = r => require.ensure([], () => r(require('../pages/proj/TakeBung')), 'TakeBung')
 
 Vue.use(Router)
 
@@ -64,6 +65,10 @@ export default new Router({
     {
       path: '/Password', // 密码
       component: Password
+    },
+    {
+      path: '/TakeBung', // 取放桶盖
+      component: TakeBung
     }
   ],
   scrollBehavior (to, from, savedPosition) {

src/style/common.styl

@@ -549,3 +549,16 @@ header
   color#323232
 .el-radio__inner:hover
     border-color: $red
+
+.icons
+  height .4rem
+  margin-bottom .12rem
+.item_icon
+  _fj()
+  margin-right .1rem
+.color_icon
+  _wh(.2rem,.2rem)
+  border-radius 50%
+  margin-right .1rem
+.font_icon
+  _font(.28rem, .4rem, #000)