apt-nl/src/pages/modules/vehicleinformation/vehiclecontrol.vue

<template>
<div class="main-container">
  <div class="right_side">
    <div class="content_wrap">
      <div class="content_wrap_inner content_wrap_inner_1">
        <div class="state_wrap state_wrap_1">
          <div class="state_tip">偏离状态</div>
          <div class="state_content">
            <div class="state_item_1">{{status.inLineStatus_name}}</div>
          </div>
        </div>
        <div class="state_wrap state_wrap_1">
          <div class="state_tip">更新状态</div>
          <div class="state_content">
            <div class="state_item_1">{{status.UpdateStatus_name}}</div>
          </div>
        </div>
      </div>
      <div class="state_wrap">
        <div class="state_tip">显示屏控制</div>
        <div class="state_content">
          <button class="state_item_switch" :class="{'is-checked': switch1 === '1'}" :disabled="sdisabled1" @click="switchDown1('2', switch1)">
            <input type="checkbox" class="switch__input">
            <span class="switch_core"></span>
          </button>
        </div>
      </div>
      <div class="state_wrap">
        <div class="state_tip">TCS控制</div>
        <div class="state_content">
          <div class="state_item_switch" :class="{'is-checked': switch2 === '1'}" :disabled="sdisabled2" @click="switchDown2('3', switch1)">
            <input type="checkbox" class="switch__input">
            <span class="switch_core"></span>
          </div>
        </div>
      </div>
      <div class="state_wrap">
        <div class="state_tip">RC控制</div>
        <div class="state_content">
          <div class="state_item_switch" :class="{'is-checked': switch3 === '1'}" :disabled="sdisabled3" @click="switchDown3('4', switch1)">
            <input type="checkbox" class="switch__input">
            <span class="switch_core"></span>
          </div>
        </div>
      </div>
      <div class="state_wrap">
        <div class="state_tip">Joy控制</div>
        <div class="state_content">
          <div class="state_item_switch" :class="{'is-checked': switch4 === '1'}" :disabled="sdisabled4" @click="switchDown4('5', switch1)">
            <input type="checkbox" class="switch__input">
            <span class="switch_core"></span>
          </div>
        </div>
      </div>
      <div class="state_wrap">
        <div class="state_tip">AGV</div>
        <div class="state_content">
          <button class="state_item_4 pointer" @click="_skipStartPoint" :disabled="disabled2">
            <div class="state_item_4_wrap">
              <span class="state_item_4_btn state_icon_2"></span>
              <span class="state_item_4_txt">跳过起点</span>
            </div>
          </button>
          <button class="state_item_4 pointer" @click="_queryRestPoint" :disabled="disabled6">
            <div class="state_item_4_wrap">
              <span class="state_item_4_btn state_icon_6"></span>
              <span class="state_item_4_txt">初始化坐标</span>
            </div>
          </button>
          <button class="state_item_4 pointer" @click="_fullscreen">
            <div class="state_item_4_wrap">
              <span class="state_item_4_btn state_icon_4"></span>
              <span class="state_item_4_txt">全屏</span>
            </div>
          </button>
          <button class="state_item_4 pointer" @click="_exit" :disabled="disabled5">
            <div class="state_item_4_wrap">
              <span class="state_item_4_btn state_icon_3"></span>
              <span class="state_item_4_txt">退出</span>
            </div>
          </button>
          <button class="state_item_4 pointer" @click="switchDown('1', '0')" :disabled="disabled3">
            <div class="state_item_4_wrap">
              <span class="state_item_4_btn state_icon_5"></span>
              <span class="state_item_4_txt">关机</span>
            </div>
          </button>
          <button class="state_item_4 pointer" @click="_softStart" :disabled="disabled1">
            <div class="state_item_4_wrap">
              <span class="state_item_4_btn state_icon_1"></span>
              <span class="state_item_4_txt">软启动</span>
            </div>
          </button>
        </div>
      </div>
    </div>
    <div v-show="show" class="pop_wrapper">
      <div class="pop_box">
        <h2>初始化坐标</h2>
        <div class="pop_ul_wrapper">
          <ul class="pop_ul">
            <li>坐标信息</li>
            <li v-for="(e,i) in result" :key="i" @click="tocheck(e)" :class="{'checked': e === obj}"><span class="pop_ul_span">{{e.point_code}}</span><span class="pop_ul_span">{{e.point_name}}</span><span class="pop_ul_span">{{e.x}}</span><span class="pop_ul_span">{{e.y}}</span><span class="pop_ul_span">{{e.t}}</span></li>
          </ul>
        </div>
        <div class="pop_btns_box">
          <button class="button button--primary" :class="{'button--info': JSON.stringify(obj) ==='{}'}" :disabled="disabled4" @click="_restCoordinate">确定</button>
          <button class="button button--primary" @click="show=false">退出</button>
        </div>
      </div>
    </div>
    <div v-show="show" class="modal"></div>
  </div>
</div>
</template>

<script>
import {softStart, skipStartPoint, ShutDown, queryRestPoint, restCoordinate, queryAgvStatus, quitNow} from '@config/getData2.js'
export default {
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      disabled1: false,
      disabled2: false,
      disabled3: false,
      disabled4: false,
      disabled5: false,
      disabled6: false,
      show: false,
      fullscreen: false,
      result: [],
      obj: {},
      status: {},
      switch1: '0',
      switch2: '0',
      switch3: '0',
      switch4: '0',
      sdisabled1: false,
      sdisabled2: false,
      sdisabled3: false,
      sdisabled4: false
    }
  },
  created () {
    this._queryAgvStatus()
    this.refresh()
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    refresh () {
      this.timer = setInterval(() => {
        this._queryAgvStatus()
      }, this.interTime)
    },
    async _softStart () {
      this.disabled1 = true
      try {
        let res = await softStart()
        if (res.code === '1') {
          this.toast(res.desc)
        } else {
          this.toast(res.desc)
        }
        this.disabled1 = false
      } catch (e) {
        this.disabled1 = false
      }
    },
    async _skipStartPoint () {
      this.disabled2 = true
      try {
        let res = await skipStartPoint()
        if (res.code === '1') {
          this.toast(res.desc)
        } else {
          this.toast(res.desc)
        }
        this.disabled2 = false
      } catch (e) {
        this.disabled2 = false
      }
    },
    switchDown1 (type, bool) {
      this.sdisabled1 = false
      this._ShutDown(type, bool)
    },
    switchDown2 (type, bool) {
      this.sdisabled2 = false
      this._ShutDown(type, bool)
    },
    switchDown3 (type, bool) {
      this.sdisabled3 = false
      this._ShutDown(type, bool)
    },
    switchDown4 (type, bool) {
      this.sdisabled4 = false
      this._ShutDown(type, bool)
    },
    switchDown (type, bool) {
      this.disabled3 = false
      this._ShutDown(type, bool)
    },
    async _ShutDown (type, bool) {
      try {
        let res = await ShutDown(type, bool) // type  :  1-关机、2-显示屏控制、3-TCS控制、4-RC控制、5-Joy控制 bool  :  开关的值，开启传1，关闭传0
        if (res.code === '1') {
          this.toast(res.desc)
          switch (type) {
            case 2:
              this.switch1 = this.switch1 === '0' ? '1' : '0'
              break
            case 3:
              this.switch2 = this.switch2 === '0' ? '1' : '0'
              break
            case 4:
              this.switch3 = this.switch3 === '0' ? '1' : '0'
              break
            case 5:
              this.switch4 = this.switch4 === '0' ? '1' : '0'
              break
          }
        } else {
          this.toast(res.desc)
        }
        this.disabled3 = false
        this.sdisabled1 = false
        this.sdisabled2 = false
        this.sdisabled3 = false
        this.sdisabled4 = false
      } catch (e) {
        this.disabled3 = false
        this.disabled3 = false
        this.sdisabled1 = false
        this.sdisabled2 = false
        this.sdisabled3 = false
        this.sdisabled4 = false
      }
    },
    async _exit () {
      this.disabled5 = true
      try {
        let res = await quitNow()
        if (res.code === '1') {
          this.toast(res.desc)
        } else {
          this.toast(res.desc)
        }
        this.disabled5 = false
      } catch (e) {
        this.disabled5 = false
      }
    },
    _fullscreen () {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      }
    },
    async _queryRestPoint () {
      this.disabled6 = true
      try {
        let res = await queryRestPoint()
        if (res.code === '1') {
          this.result = res.result
          this.show = true
        } else {
          this.toast(res.desc)
        }
        this.disabled6 = false
      } catch (e) {
        this.disabled6 = false
      }
    },
    tocheck (e) {
      this.obj = e
    },
    async _restCoordinate () {
      this.disabled4 = true
      if (JSON.stringify(this.obj) === '{}') {
        this.toast('请选择坐标')
        this.disabled4 = false
        return
      }
      try {
        let res = await restCoordinate(this.obj.point_code, this.obj.point_name, this.obj.x, this.obj.y, this.obj.t)
        if (res.code === '1') {
          this.toast(res.desc)
          this.show = false
        } else {
          this.toast(res.desc)
        }
        this.disabled4 = false
      } catch (e) {
        this.disabled4 = false
      }
    },
    async _queryAgvStatus () {
      let res = await queryAgvStatus()
      if (res.code === '1') {
        this.status = res.result
      } else {
        this.toast(res.desc)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.content_wrap_inner
  _fj()
.state_item_4
  _fj(center,,column)
  _wh(184px,184px)
  background linear-gradient(0deg, #dfe1e7, #f1f1f6)
  border-radius 32px
  padding 16px
  margin-bottom 16px
  margin-right 16px
  overflow hidden
  &:hover, &:active
    background linear-gradient(0deg, #FA6400, #ffc3a7)
    .state_item_4_txt
      color #FA6400
    .state_item_4_btn
      position relative
      overflow hidden
      &:after
        content: ''
        display block
        height 100%
        transform translateX(-100%)
        background inherit
        _shadow(60px,#fa6400)
.state_item_4_wrap
  _wh(100%, 100%)
  background-color #fff
  border-radius 20px
  box-shadow 0 2px 2px 0 rgba(0, 0, 0, 0.1)
  _fj(center,,column)
.state_item_4_btn
  display block
  _wh(60px,60px)
  margin-bottom 13px
.state_item_4_txt
  _font(28px,45px,#464646,500,)
.state_icon_1
  _bis('../../../images/aio/agv_1.png', 100%)
.state_icon_2
  _bis('../../../images/aio/agv_2.png', 100%)
.state_icon_3
  _bis('../../../images/aio/agv_3.png', 100%)
.state_icon_4
  _bis('../../../images/aio/agv_4.png', 100%)
.state_icon_5
  _bis('../../../images/aio/agv_5.png', 100%)
.state_icon_6
  _bis('../../../images/aio/agv_6.png', 100%)
.pop_wrapper
  position fixed
  top 0
  bottom 0
  left 0
  right 0
  text-align center
  z-index 10000
  &::after
    content ""
    display inline-block
    height 100%
    width 0
    vertical-align middle
.modal
  position fixed
  left 0
  top 0
  _wh(100%,100%)
  opacity .5
  background #000
  z-index 999

.pop_box
  position  relative
  margin 0 auto 50px
  width 65%
  height 70vh
  margin-top 15vh
  padding 20px
  background-color #fff
  border-radius 16px
  overflow hidden
  h2
    _font(20px,40px,#464646,600,center)
.pop_ul_wrapper
  width 90%
  height calc(100% - 100px)
  margin 0 auto
  overflow hidden
.pop_ul
  _wh(100%, 100%)
  overflow-y auto
  li
    _wh(100%,40px)
    padding 0 20px
    border-bottom 2px dotted #D6D6D6
    text-align left
    span
      display inline-block
      _font(16px,40px,#323232,600,)
      vertical-align top
      padding-right .15rem
    &:nth-child(1)
      position: sticky;
      top: -1px;
      _font(14px,40px,#323232,600,)
      background #DFE1E6
      border-top-left-radius 10px
      border-top-right-radius 10px
.pop_ul .checked
  background-color #FD6A35
.pop_ul li.checked span
  color #fff
.pop_btns_box
  margin-top 20px
.content_wrap_inner_1
  justify-content flex-start
.state_wrap_1
  width auto
  margin-right 50px
</style>