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">正常</div>
        </div>
      </div>
      <div class="state_wrap">
        <div class="state_tip">传感器状态</div>
        <div class="state_content">
          <div class="state_item_2">
            <span class="state_item_2_dot"></span>
            <span class="state_item_2_txt">急停按钮</span>
          </div>
          <div class="state_item_2">
            <span class="state_item_2_dot"></span>
            <span class="state_item_2_txt">避障减速</span>
          </div>
          <div class="state_item_2">
            <span class="state_item_2_dot"></span>
            <span class="state_item_2_txt">复位按钮</span>
          </div>
          <div class="state_item_2">
            <span class="state_item_2_dot"></span>
            <span class="state_item_2_txt">避障停车</span>
          </div>
          <div class="state_item_2">
            <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">111111</span>
          </div>
          <div class="state_item_3">
            <span class="state_item_3_txt1">Y坐标：</span>
            <span class="state_item_3_txt2">111111</span>
          </div>
          <div class="state_item_3">
            <span class="state_item_3_txt1">Z坐标：</span>
            <span class="state_item_3_txt2">111111</span>
          </div>
          <div class="state_item_3">
            <span class="state_item_3_txt1">下发速度：</span>
            <span class="state_item_3_txt2">111111</span>
          </div>
          <div class="state_item_3">
            <span class="state_item_3_txt1">实际速度：</span>
            <span class="state_item_3_txt2">111111</span>
          </div>
          <div class="state_item_3">
            <span class="state_item_3_txt1">舵轮角度：</span>
            <span class="state_item_3_txt2">111111</span>
          </div>
          <div class="state_item_3">
            <span class="state_item_3_txt1">偏差：</span>
            <span class="state_item_3_txt2">111111</span>
          </div>
          <div class="state_item_3">
            <span class="state_item_3_txt1">偏差：</span>
            <span class="state_item_3_txt2">111111</span>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="right_side_box_1">
      <ul class="site_btn_box">
        <li class="site_btn">正常</li>
      </ul>
      <ul class="site_btn_box site_btn_box_1">
        <li class="site_btn site_btn_1">X坐标：{{result.x}}</li>
        <li class="site_btn site_btn_1">Y坐标：{{result.y}}</li>
        <li class="site_btn site_btn_1">航向角：{{result.z}}</li>
        <li class="site_btn site_btn_1">下发速度：{{result.send_speed}}</li>
        <li class="site_btn site_btn_1">实际速度：{{result.real_speed}}</li>
        <li class="site_btn site_btn_1">舵轮角度：{{result.carrier}}</li>
        <li class="site_btn site_btn_1">横向偏差：{{result.landscape_deviation}}</li>
        <li class="site_btn site_btn_1">航向偏差：{{result.course_deviation}}</li>
      </ul>
    </div> -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      result: {}
    }
  }
}
</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
</style>