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

<template>
  <div class="right_side">
    <div class="content_wrap">
      <div class="state_wrap">
        <div class="state_tip">车辆状态</div>
        <div class="state_content">
          <div class="state_item_1">{{result.vehicle_status}}</div>
        </div>
      </div>
      <div class="state_wrap">
        <div class="state_tip">工作状态</div>
        <div class="state_content">
          <div class="state_item_1">{{result.working_status}}</div>
        </div>
      </div>
      <div class="state_wrap">
        <div class="state_tip">传感器状态</div>
        <div class="state_content">
          <div class="state_item_2" :class="result1.stopButton_status === '0' ? 'site_btn_disabled' : 'site_btn_active'">
            <span class="state_item_2_dot"></span>
            <span class="state_item_2_txt">急停按钮</span>
          </div>
          <div class="state_item_2" :class="result1.speedReduction_status === '0' ? 'site_btn_disabled' : 'site_btn_active'">
            <span class="state_item_2_dot"></span>
            <span class="state_item_2_txt">避障减速</span>
          </div>
          <div class="state_item_2" :class="result1.resetButton_status === '0' ? 'site_btn_disabled' : 'site_btn_active'">
            <span class="state_item_2_dot"></span>
            <span class="state_item_2_txt">复位按钮</span>
          </div>
          <div class="state_item_2" :class="result1.speedStop_status === '0' ? 'site_btn_disabled' : 'site_btn_active'">
            <span class="state_item_2_dot"></span>
            <span class="state_item_2_txt">避障停车</span>
          </div>
          <div class="state_item_2" :class="result1.securityTentacle_status === '0' ? 'site_btn_disabled' : 'site_btn_active'">
            <span class="state_item_2_dot"></span>
            <span class="state_item_2_txt">安全触边</span>
          </div>
        </div>
      </div>
      <div class="state_wrap">
        <div class="state_tip">AGV</div>
        <div class="state_content">
          <div class="state_item_3">
            <span class="state_item_3_txt1">X坐标：</span>
            <span class="state_item_3_txt2">{{result.x}}</span>
          </div>
          <div class="state_item_3">
            <span class="state_item_3_txt1">Y坐标：</span>
            <span class="state_item_3_txt2">{{result.y}}</span>
          </div>
          <div class="state_item_3">
            <span class="state_item_3_txt1">航向角：</span>
            <span class="state_item_3_txt2">{{result.z}}</span>
          </div>
          <div class="state_item_3">
            <span class="state_item_3_txt1">下发速度：</span>
            <span class="state_item_3_txt2">{{result.send_speed}}</span>
          </div>
          <div class="state_item_3">
            <span class="state_item_3_txt1">实际速度：</span>
            <span class="state_item_3_txt2">{{result.real_speed}}</span>
          </div>
          <div class="state_item_3">
            <span class="state_item_3_txt1">舵轮角度：</span>
            <span class="state_item_3_txt2">{{result.carrier}}</span>
          </div>
          <div class="state_item_3">
            <span class="state_item_3_txt1">横向偏差：</span>
            <span class="state_item_3_txt2">{{result.landscape_deviation}}</span>
          </div>
          <div class="state_item_3">
            <span class="state_item_3_txt1">航向偏差：</span>
            <span class="state_item_3_txt2">{{result.course_deviation}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {queryVehicleStatus, querrySensor} from '@config/getData2.js'
export default {
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      result: {},
      result1: {}
    }
  },
  created () {
    this._queryVehicleStatus()
    this._querrySensor()
    this.refresh()
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    refresh () {
      this.timer = setInterval(() => {
        this._queryVehicleStatus()
        this._querrySensor()
      }, this.interTime)
    },
    async _queryVehicleStatus () {
      let res = await queryVehicleStatus()
      if (res.code === '1') {
        this.result = res.result
      } else {
        this.toast(res.desc)
      }
    },
    async _querrySensor () {
      let res = await querrySensor()
      if (res.code === '1') {
        this.result1 = res.result
      } else {
        this.toast(res.desc)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.right_side_box_1
  _wh(100%,100%)
  padding .26rem .34rem 0 .48rem
.site_btn_box
  _wh(100%,auto)
  overflow hidden
.site_btn_box_1
  margin-top .2rem
  _fj(flex-start)
  flex-wrap wrap
.site_btn
  float left
  _wh(2.6rem,1rem)
  background #FFFFFF
  border 1.6px solid #54C0B3
  box-shadow 2px 0px 5px 0px rgba(222,222,222,1)
  border-radius .16rem
  _font(.32rem,1rem,#54C0B3,,center)
  margin-right .3rem
  margin-bottom .2rem
.site_btn_1
  width 30%
  border 1.6px solid #8B90A6
  color: #696969
  margin-right 3%
  margin-bottom .24rem
.site_btn_disabled
  opacity 0.5
  .state_item_2_dot
    background-color #c6c6c6
.site_btn_active
  opacity 1
  .state_item_2_dot
    background-color #00c852
</style>