用户管理

src/pages/modules/vehicleinformation/vehiclecontrol.vue

@@ -1,19 +1,33 @@
 <template>
   <div class="right_side">
     <div class="content_wrap">
-      <div class="state_wrap">
-        <div class="state_tip">显示屏控制</div>
-        <div class="state_content state_content_1">
-          <div class="state_item_switch is-checked">
-            <input type="checkbox" class="switch__input">
-            <span class="switch_core"></span>
+      <div class="content_wrap_inner">
+        <div class="state_wrap">
+          <div class="state_tip">偏离状态</div>
+          <div class="state_content">
+            <div class="state_item_1">{{status.inLineStatus_name}}</div>
+          </div>
+        </div>
+        <div class="state_wrap">
+          <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 state_content_1">
-          <div class="state_item_switch is-checked">
+        <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>
@@ -21,8 +35,8 @@
       </div>
       <div class="state_wrap">
         <div class="state_tip">RC控制</div>
-        <div class="state_content state_content_1">
-          <div class="state_item_switch is-checked">
+        <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>
@@ -30,8 +44,8 @@
       </div>
       <div class="state_wrap">
         <div class="state_tip">Joy控制</div>
-        <div class="state_content state_content_1">
-          <div class="state_item_switch is-checked">
+        <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>
@@ -40,47 +54,299 @@
       <div class="state_wrap">
         <div class="state_tip">AGV</div>
         <div class="state_content">
-          <div class="state_item_4">
-            <span class="state_item_4_btn state_icon_2"></span>
-            <span class="state_item_4_txt">跳过起点</span>
-          </div>
-          <div class="state_item_4">
-            <span class="state_item_4_btn state_icon_6"></span>
-            <span class="state_item_4_txt">初始化坐标</span>
-          </div>
-          <div class="state_item_4">
-            <span class="state_item_4_btn state_icon_4"></span>
-            <span class="state_item_4_txt">全屏</span>
-          </div>
-          <div class="state_item_4">
-            <span class="state_item_4_btn state_icon_3"></span>
-            <span class="state_item_4_txt">退出</span>
-          </div>
-          <div class="state_item_4">
-            <span class="state_item_4_btn state_icon_5"></span>
-            <span class="state_item_4_txt">关机</span>
-          </div>
-          <div class="state_item_4">
-            <span class="state_item_4_btn state_icon_1"></span>
-            <span class="state_item_4_txt">软启动</span>
-          </div>
+          <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>
 </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'
-.state_content_1
-  height 100px
+.content_wrap_inner
+  _fj()
 .state_item_4
   _fj(center,,column)
   _wh(184px,184px)
-  _bis('../../../images/aio/agv_btn_bg.png', 100%)
+  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
@@ -97,4 +363,70 @@
   _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
 </style>