hht-jianan/src/pages/proj/TakeBung.vue

<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>