apt-nl/src/pages/Home.vue

<template>
  <section>
    <nav-bar></nav-bar>
    <div class="con0">
      <div class="site_nav active fl">
        <router-link  class="site_nav_a" to="/home">首页</router-link>
      </div>
      <div class="site_nav fl">
        <router-link  class="site_nav_a white" to="/taskmanage">任务管理</router-link>
      </div>
      <div class="site_nav fl">
        <router-link  class="site_nav_a white" to="/errormanage">故障管理</router-link>
      </div>
      <div class="site_nav site_nav4 fl">
        <router-link  class="site_nav_a white" to="/carrysite">车辆信息</router-link>
      </div>
      <div class="site_nav fl">
        <router-link  class="site_nav_a white" to="/ifconfigindex/ifconfiginfo">开发者选项</router-link>
      </div>
    </div>
    <div class="con1">
      <!-- <img src="../images/aio/elec5.png"> -->
      <div class="elec-box">
        <div class="elec-c" :class="{bggreen: Number(dataInfo.electric) >= 40,bgred: Number(dataInfo.electric) < 40}" :style="'height:' + dataInfo.electric + '%'"></div>
      </div>
      <span class="elec-t" :class="{cgreen: Number(dataInfo.electric) >= 40,cred: Number(dataInfo.electric) < 40}">{{dataInfo.electric}}%</span>
      <button v-if="dataInfo.button_name" @click="clickSave">{{dataInfo.button_name}}</button>
    </div>
    <div class="con2">
      <div class="infoli">
        <img src="../images/aio/icon2.png">
        <span class="title">设备信息：</span>
        <span class="txt">{{dataInfo.device_info}}</span>
      </div>
      <div class="infoli">
        <img src="../images/aio/icon5.png">
        <span class="title">任务状态：</span>
        <span class="txt">{{dataInfo.task_status}}</span>
      </div>
      <div class="infoli">
        <img src="../images/aio/icon6.png">
        <span class="title">任务数量：</span>
        <span class="txt">{{dataInfo.task_num}}</span>
      </div>
      <div class="infoli">
        <img src="../images/aio/icon4.png">
        <span class="title">AGV故障：</span>
        <span class="txt">{{dataInfo.agv_error}}</span>
      </div>
    </div>
  </section>
</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: {}
    }
  },
  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'
.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 4.62rem
  height 4.62rem
  background center / 100% 100% url(../images/aio/car2.png) no-repeat
  margin-left .4rem
  margin-right .69rem
  // img
  //   position absolute
  //   top .2rem
  //   right .3rem
  .elec-box
    position absolute
    top .2rem
    right .3rem
    width .3rem
    height .6rem
    border .01rem solid #dddddd
    border-radius .03rem
    transform rotate(180deg)
    padding .02rem
  .elec-c
    // height 80%
    // background #ffcc00
  .elec-t
    float right
    margin-top .9rem
    text-align center
    width .9rem
    font-size .16rem
  button
    box-sizing border-box
    width 3.7rem
    height 1.08rem
    border 8px solid #F1F1F5
    border-radius 16px
    font-size .3rem
    background #ffffff
    margin-top .6rem
    margin-left .45rem
    padding .03rem
.con2
  float left
  width 7.4rem
  height 5.02rem
  background center / 100% 100% url(../images/aio/bg2.png) no-repeat
  padding-top .2rem
  .infoli
    width 7rem
    line-height 1.08rem
    height 1.08rem
    background #ffffff
    margin 0 auto
    // margin-bottom 2px
    border-bottom 1px dotted #cccccc
    img
      float left
      margin .42rem .15rem 0 .31rem
      width .26rem
      height .26rem
    .title
      float left
      display inline-block
      font-size .24rem
      color #323232
    .txt
      float left
      display inline-block
      font-size .3rem
      color #FA6400
</style>