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

<template>
<div class="main-container">
  <div class="right_side">
    <div class="content_wrap">
      <div class="title_wrap">
        <h2>{{ $t('vehiclecontrol.vehiclecontrol') }}</h2>
      </div>
      <div class="page_container">
        <div class="state_title-wrap">
          <h3>{{ $t('vehiclecontrol.status') }}</h3>
        </div>
        <div class="state_wrap">
          <div class="state_item_wrap">
            <div class="state_item_label">{{ $t('vehiclecontrol.deviationstate') }}:</div>
            <div class="state_item_val" :class="{'state_item_val_disabled': status.inLineStatus === '1'}">{{$i18n.locale === 'en-us' ? status.en_inLineStatus_name : status.zh_inLineStatus_name }}</div>
          </div>
          <div class="state_item_wrap">
            <div class="state_item_label">{{ $t('vehiclecontrol.updatestatus') }}:</div>
            <div class="state_item_val" :class="{'state_item_val_disabled': status.UpdateStatus === '0'}">{{$i18n.locale === 'en-us' ? status.en_UpdateStatus_name : status.zh_UpdateStatus_name }}</div>
          </div>
        </div>
        <div class="state_title-wrap">
          <h3>AGV</h3>
        </div>
        <div class="agv_wrap">
          <!-- 跳过起点 -->
          <button class="switch_item switch_item_1" @click="switchDown('9', '0')" :disabled="disabled">{{ $t('vehiclecontrol.skipthestart') }}</button>
          <!-- 初始化坐标 -->
          <button class="switch_item switch_item_2" @click="_queryRestPoint" :disabled="disabled">{{ $t('vehiclecontrol.initializecoordinate') }}</button>
          <!-- 全屏 -->
          <button class="switch_item switch_item_3" @click="switchDown('11', '0')" :disabled="disabled">{{ $t('vehiclecontrol.fullscreen') }}</button>
          <!-- 退出 -->
          <button class="switch_item switch_item_4" @click="switchDown('7', '0')" :disabled="disabled">{{ $t('vehiclecontrol.quit') }}</button>
          <!-- 关机 -->
          <button class="switch_item switch_item_5" @click="switchDown('1', '0')" :disabled="disabled">{{ $t('vehiclecontrol.poweroff') }}</button>
          <!-- 软启动 -->
          <button class="switch_item switch_item_6" @click="switchDown('8', '0')" :disabled="disabled">{{ $t('vehiclecontrol.softwarerestart') }}</button>
          <!-- 重启 -->
          <button class="switch_item switch_item_7" @click="switchDown('10', '0')" :disabled="disabled">{{ $t('vehiclecontrol.restart') }}</button>
          <!-- 跳过检测 -->
          <button class="switch_item switch_item_8" @click="switchDown('12', '0')" :disabled="disabled">{{ $t('vehiclecontrol.skipdetection') }}</button>
        </div>
        <div class="state_title-wrap">
          <h3>{{ $t('vehiclecontrol.control') }}</h3>
        </div>
        <div class="control_wrap">
          <div class="control_item">
            <div class="control_label">{{ $t('vehiclecontrol.displaycontrol') }}</div>
            <div class="control_val">
              <button class="state_item_switch" :class="{'is-checked': switch1 === '1'}" :disabled="disabled" @click="switchDown('2', switch1)">
                <input type="checkbox" class="switch__input">
                <span class="switch_core"></span>
              </button>
            </div>
          </div>
          <div class="control_item">
            <div class="control_label">TCS{{ $t('vehiclecontrol.control') }}</div>
            <div class="control_val">
              <button class="state_item_switch" :class="{'is-checked': switch2 === '1'}" :disabled="disabled" @click="switchDown('3', switch2)">
                <input type="checkbox" class="switch__input">
                <span class="switch_core"></span>
              </button>
            </div>
          </div>
          <div class="control_item">
            <div class="control_label">SCHE{{ $t('vehiclecontrol.control') }}</div>
            <div class="control_val">
              <button class="state_item_switch" :class="{'is-checked': switch3 === '1'}" :disabled="disabled" @click="switchDown('4', switch3)">
                <input type="checkbox" class="switch__input">
                <span class="switch_core"></span>
              </button>
            </div>
          </div>
          <div class="control_item">
            <div class="control_label">RC{{ $t('vehiclecontrol.control') }}</div>
            <div class="control_val">
              <button class="state_item_switch" :class="{'is-checked': switch4 === '1'}" :disabled="disabled" @click="switchDown('5', switch4)">
                <input type="checkbox" class="switch__input">
                <span class="switch_core"></span>
              </button>
            </div>
          </div>
          <div class="control_item">
            <div class="control_label">Joy{{ $t('vehiclecontrol.control') }}</div>
            <div class="control_val">
              <button class="state_item_switch" :class="{'is-checked': switch5 === '1'}" :disabled="disabled" @click="switchDown('6', switch5)">
                <input type="checkbox" class="switch__input">
                <span class="switch_core"></span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-show="show" class="dialog_wrapper">
      <div class="dialog">
        <div class="dialog_header">
          <span class="dialog_title">{{ $t('vehiclecontrol.initializecoordinates') }}</span>
        </div>
        <div class="dialog_body">
          <div class="pop_ul_wrapper">
            <ul class="pop_ul">
              <li>{{ $t('vehiclecontrol.coordinateinformation') }}</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>
        <div class="dialog_footer">
          <button class="button_control button_control_s button--info button_control_disabled mgr31" :disabled="disabled" @click="_restCoordinate"><p>{{ $t('button.ok') }}</p></button>
          <button class="button_control button_control_s" @click="show=false"><p>{{ $t('button.exit') }}</p></button>
        </div>
      </div>
    </div>
    <div v-show="show" class="modal"></div>
  </div>
</div>
</template>

<script>
import {ShutDown, queryRestPoint, restCoordinate, queryAgvStatus} from '@config/getData2.js'
export default {
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      show: false,
      result: [],
      obj: {},
      status: {},
      switch1: '',
      switch2: '',
      switch3: '',
      switch4: '',
      switch5: '',
      disabled: false
    }
  },
  created () {
    this.refresh()
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  destroyed () {
    clearInterval(this.timer)
  },
  methods: {
    text () {
      this.switch1 = '0'
    },
    refresh () {
      this._queryAgvStatus()
      this.timer = setInterval(() => {
        this._queryAgvStatus()
      }, this.interTime)
    },
    switchDown (type, bool) {
      this.disabled = true
      if (type === '5' && this.switch4 === '0' && this.switch5 === '1') {
        // this.toast('RC控制与Joy控制不能同时开启')
        this.toast(this.$t('vehiclecontrol.toast2'))
        this.disabled = false
        return
      }
      if (type === '6' && this.switch4 === '1' && this.switch5 === '0') {
        // this.toast('RC控制与Joy控制不能同时开启')
        this.toast(this.$t('vehiclecontrol.toast2'))
        this.disabled = false
        return
      }
      clearInterval(this.timer)
      bool = bool === '0' ? '1' : '0'
      if (type === '2') {
        this.switch1 = this.switch1 === '0' ? '1' : '0'
      }
      if (type === '3') {
        this.switch2 = this.switch2 === '0' ? '1' : '0'
      }
      if (type === '4') {
        this.switch3 = this.switch3 === '0' ? '1' : '0'
      }
      if (type === '5') {
        this.switch4 = this.switch4 === '0' ? '1' : '0'
      }
      if (type === '6') {
        this.switch5 = this.switch5 === '0' ? '1' : '0'
      }
      this._ShutDown(type, bool)
    },
    async _ShutDown (type, bool) {
      try {
        let res = await ShutDown(type, bool) // type:1-关机、2-显示屏控制、3-TCS控制、4-SCHE控制、5-RC控制、6-Joy控制，7-退出，8-软启动，9-跳过起点，10-重启，11-全屏，12-跳过检测 ; bool:开关或按钮的值，开关开启传1，关闭传0，按钮点击直接传1
        if (res.code === '1') {
          this.toast(res.desc)
        } else {
          this.toast(res.desc)
        }
        this.disabled = false
        this.refresh()
      } catch (e) {
        this.disabled = false
        this.toast(this.$t('common.operationfailed'))
        this.refresh()
      }
    },
    async _queryRestPoint () {
      this.disabled = true
      try {
        let res = await queryRestPoint()
        if (res.code === '1') {
          this.result = res.result
          this.show = true
        } else {
          this.toast(res.desc)
        }
        this.disabled = false
      } catch (e) {
        this.disabled = false
      }
    },
    tocheck (e) {
      this.obj = e
    },
    async _restCoordinate () {
      this.disabled = true
      if (JSON.stringify(this.obj) === '{}') {
        // this.toast('请选择坐标')
        this.toast(this.$t('vehiclecontrol.toast1'))
        this.disabled = 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.disabled = false
      } catch (e) {
        this.disabled = false
      }
    },
    async _queryAgvStatus () {
      let res = await queryAgvStatus()
      if (res.code === '1') {
        this.status = res.result
        this.switch1 = res.result.screenStatus
        this.switch2 = res.result.tcsStatus
        this.switch3 = res.result.scheStatus
        this.switch4 = res.result.rcStatus
        this.switch5 = res.result.joyStatus
      } else {
        this.toast(res.desc)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.state_wrap
  width 100%
  _fj()
  padding 17px 30px 32px 80px
.state_item_wrap
  width 50%
  _fj(flex-start)
.state_item_label
  width 196px
  _font(36px, 56px, #B4C1D8, 500,)
  font-family: SourceHanSansCN-Medium;
.state_item_val
  width calc(100% - 196px)
  _font(36px, 56px, #fff, 500,)
  font-family: SourceHanSansCN-Medium;
  padding-left 66px
  background left center url(../../../images/new/state_btn.png) no-repeat
.state_item_val_disabled
  background-image url(../../../images/new/state_btn_disable.png)
.agv_wrap
  width 100%
  _fj()
  padding 10px 30px 29px 80px
.switch_item
  _wh(157px, 157px)
  _font(24px, 24px, #fff,,center)
  padding 85px 10px 10px 10px
.switch_item_1
  background center url(../../../images/new/switch_1.png) no-repeat
.switch_item_2
  background center url(../../../images/new/switch_2.png) no-repeat
.switch_item_3
  background center url(../../../images/new/switch_3.png) no-repeat
.switch_item_4
  background center url(../../../images/new/switch_4.png) no-repeat
.switch_item_5
  background center url(../../../images/new/switch_5.png) no-repeat
.switch_item_6
  background center url(../../../images/new/switch_6.png) no-repeat
.switch_item_7
  background center url(../../../images/new/switch_7.png) no-repeat
.switch_item_8
  background center url(../../../images/new/switch_8.png) no-repeat
.control_wrap
  width 100%
  _fj(flex-start, flex-start)
  flex-wrap wrap
  padding 10px 30px 29px 80px
.control_item
  width calc(100% / 3)
  _fj(flex-start, flex-start)
.control_label
  width 190px
  _font(36px, 88px, #B4C1D8, 500,)
  font-family: SourceHanSansCN-Medium;
.content_wrap_inner
  _fj()
.state_item_4
  _fj(center,,column)
  _wh(155px,155px)
  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(20px,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%)
.state_icon_7
  _bis('../../../images/aio/agv_7.png', 100%)
.state_icon_8
  _bis('../../../images/aio/agv_8.png', 100%)
.dialog
  height 812px
  width 980px
.dialog_body
  height 530px
.mgr31
  margin-right 31px
.pop_ul_wrapper
  _wh(100%, 100%)
.pop_ul
  _wh(100%, 100%)
  overflow-y auto
  li
    width 100%
    min-height 81px
    line-height 40px
    padding 20.5px 20px
    border-bottom 2px dotted #D6D6D6
    text-align left
    span
      display inline-block
      _font(26px,40px,#fff,600,)
      vertical-align top
      padding-right 25px
    &:nth-child(1)
      position: sticky;
      top: -1px;
      _font(36px,81px,#afbed8,bold,)
      font-family: SourceHanSansCN-Bold;
      font-style: italic
      background left center / 1px 81px url(../../../images/new/th_bg.png) repeat-x
      border-bottom 0
.pop_ul .checked
  background-color #FD6A35
.pop_ul li.checked span
  color #fff
.enClass
  .state_item_label
    font-size 26px
    width 200px
  .state_item_val
    width calc(100% - 200px)
  .control_label
    font-size 24px
  .switch_item
    font-size 20px
    line-height 20px
</style>