apt-nl-new/src/pages/modules/home/home.vue

<template>
  <div class="main-container main-container_l">
    <div class="con1">
      <div class="tip" v-if="dataInfo.error_name">{{dataInfo.error_name}}</div>
    </div>
    <div class="con2">
      <div class="rt">
        <div class="rttxt">设备信息</div>
      </div>
      <div class="rc">
        <div class="infoli01">
          <span class="title">设备信息</span>
          <span class="txt01">{{dataInfo.device_info}}</span>
          <div class="line"></div>
        </div>
        <div class="infoli01">
          <span class="title">当前任务</span>
          <span class="txt01">{{dataInfo.task_name}}</span>
          <div class="line"></div>
        </div>
        <div class="infoli">
          <span class="title">任务状态</span>
          <span class="txt">{{dataInfo.task_status}}</span>
          <div class="line"></div>
        </div>
        <div class="infoli">
          <span class="title">任务数量</span>
          <span class="txt">{{dataInfo.task_num}}</span>
          <div class="line"></div>
        </div>
        <div class="infoli infoli3">
          <span class="title">当前速度</span>
          <span class="txt">{{dataInfo.speed}}</span>
          <div class="speed-bg"></div>
          <div class="line" style="top: 110px"></div>
        </div>
        <div class="infoli infoli3">
          <span class="title">AGV故障</span>
          <span class="txt txt2">{{dataInfo.error_name}}</span>
        </div>
        <button class="btn" v-if="dataInfo.button_name" @click="clickSave">{{dataInfo.button_name}}</button>
      </div>
    </div>
  </div>
</template>

<script>
import {queryHomePage, clickSave} from '@/config/getData.js'
import NavBar from '@components/NavBar.vue'
export default {
  name: 'Home',
  components: {
    NavBar
  },
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      dataInfo: {}
      // dataInfo: {
      //   device_info: 'NobleLiftPS10LMT_HuaHai',
      //   task_name: '无',
      //   task_status: '有任务未执行',
      //   task_num: '待执行',
      //   speed: '0.0m/s',
      //   error_name: '障碍物告警',
      //   button_name: '继续搬运'
      // }
      // dataInfo: {
      //   device_info: 'NobleLiftPS10LMT_HuaHai',
      //   task_name: '任务号：11287-目标点：18-一线起升电机',
      //   task_status: '执行中',
      //   task_num: '待执行0/2',
      //   speed: '0.0m/s',
      //   error_name: '正常运行',
      //   button_name: '继续搬运'
      // }
    }
  },
  created () {
    // this.initData()
    // this.refresh()
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    refresh () {
      this.timer = setInterval(() => {
        this.initData()
      }, this.interTime)
    },
    async initData () {
      let res = await queryHomePage()
      if (res.code === '1') {
        this.dataInfo = res.result
      } else {
        this.toast(res.desc)
      }
    },
    async clickSave () {
      if (!this.dataInfo.button_name) {
        return
      }
      let res = await clickSave(this.dataInfo.button_code)
      if (res.code === '1') {
        this.toast(res.desc)
        this.initData()
      } else {
        this.toast(res.desc)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.main-container_l
  width 100%
  padding-left 53px
.bgred
  background #fa6400
.bggreen
  background #54C0B3
.cred
  color #fa6400
.cgreen
  color #54C0B3
.con0
  height 1rem
  margin-top .26rem
  margin-bottom .5rem
  margin-left .4rem
.site_nav
  _wh(2rem,1rem)
  _bis('../../../images/aio/btn_dis.png',100%,100%)
  margin-bottom .2rem
  margin-right .3rem
  &:nth-of-type(3)
    margin-right 1.8rem
.site_nav_a
  display block
  _font(.32rem,1rem,,,center)
  cursor pointer
  color #ffffff
.active
  _bis('../../../images/aio/btn_checked.png',100%,100%)
.white
  color #464646
.con1
  float left
  position relative
  width 811px
  height 776px
  // background center / 100% 100% url(../../../images/aio/car2.png) no-repeat
  background center / 100% 100% url(../../../images/new/car-home.png) no-repeat
  // background center / 100% 100% url(../../../images/aio/AGV223.gif) no-repeat
  margin-right 235px
  .tip
    width 542px
    height 120px
    line-height 120px
    color #FF907F
    font-style italic
    font-size 36px
    text-align center
    margin-top 153px
    margin-left 63px
    background center / 100% 100% url(../../../images/new/bg-home-tip.png) no-repeat
.con2
  float left
.btn
  width 335px
  height 91px
  background center / 100% 100% url(../../../images/new/button.png) no-repeat
  margin-left 167px
  position relative
  top -20px
  color #f6f9fe
.rt
  width 646px
  height 102px
  font-size 36px
  font-style italic
  color #F6F9FE
  background center / 100% 100% url(../../../images/new/bg-home-r1.png) no-repeat
  .rttxt
    margin-left 31px
    padding-top 40px
.rc
  width 652px
  height 697px
  font-size 36px
  color #B4C1D8
  background center / 100% 100% url(../../../images/new/bg-home-r2.png) no-repeat
.infoli01
  width 542px
  height 140px
  margin 0 auto
  padding-top 45px
  .title
    float left
    display inline-block
    color #f6f9fe
  .txt01
    float left
    display inline-block
    color #3CC1FF
    margin-left 34px
    width 330px
    line-height 36px
    word-wrap break-word
    font-size 30px
.infoli
  width 542px
  line-height 94px
  height 94px
  margin 0 auto
  .title
    float left
    display inline-block
    color #f6f9fe
  .txt
    float left
    display inline-block
    color #3CC1FF
    margin-left 34px
    font-size 30px
.infoli3
  line-height 94px
  height 124px
  .title
    float left
    display inline-block
    color #f6f9fe
  .txt
    float left
    display inline-block
    color #3CC1FF
    margin-left 34px
    font-size 30px
.speed-bg
  width 513px
  height 12px
  background center / 100% 100% url(../../../images/new/bg-home-r3.png) no-repeat
  position relative
  top 95px
.line
  width 543px
  height 1px
  background center / 100% 100% url(../../../images/new/bg-home-r4.png) no-repeat
  position relative
  top 92px
.txt2
  color #E54F29 !important
</style>