aio-hl-new/src/pages/homeset/Home.vue

<template>
<div>
  <section class="content">
      <div class="device-status">
          <p><span class="icon white"></span><span class="txt">关机</span></p>
          <p><span class="icon blue"></span><span class="txt">开机</span></p>
          <p><span class="icon green"></span><span class="txt">生产中</span></p>
          <p><span class="icon yellow"></span><span class="txt">待机</span></p>
          <p><span class="icon red"></span><span class="txt">故障</span></p>
      </div>
      <div class="list-box">
        <div class="device" v-for="e in dataList" :key="e.device_code" :class="{bg1:e.is_run=='1',bg2:e.is_run=='0'}" @click="toOperation(e)"
        >
          <div class="device-top">
            <div class="img">
              <img v-if="e.device_icon !== ''" :src="e.device_icon" alt="">
              <img v-else src="../../images/1.png" alt="">
            </div>
          </div>
          <div class="fl icon" :class="['white', 'blue', 'green', 'yellow', 'red'][Number(e.device_status) - 1]">
          </div>
          <div class="fl desc">
            <p class="device_name">{{e.deviceName}}</p>
            <p class="ellipsis">工单数: {{e.job_count}}</p>
            <p class="ellipsis">当前工单: {{e.workorderCode}}</p>
          </div>
        </div>
      </div>
      <Back></Back>
  </section>
</div>

</template>

<script>
import Back from '@components/Back.vue'
import {getDevice} from './../../config/getData2.js'
export default {
  name: 'Home',
  components: {
    Back
  },
  data () {
    return {
      timer: null,
      dataList: []
    }
  },
  mounted () {
    this.getList()
    this.refresh()
  },
  methods: {
    refresh () {
      this.timer = setInterval(() => {
        this.getList()
      }, 30000)
    },
    async getList () {
      let res = await getDevice()
      // let newArr = []
      // res.map(el => {
      //   newArr.push(Object.assign({}, el, {imgurl: this.$store.getters.imgBaseUrl + '/' + el.device_icon}))
      // })
      this.dataList = [...res]
    },
    toOperation (e) {
      if (e.is_run === '1') {
        this.$router.push({
          path: '/workordermanage',
          query: {code: e.deviceCode}
        })
      }
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>

<style lang="stylus" scoped>
.yellow
    background #E9B451
.red
    background red
.green
    background #09ed20
.blue
    background #53ccf9
.white
    background white
.bg1
    background #1E307E
    border 1px solid #4F93D9
.bg2
    background rgba(0,0,0,0.50)
    border 1px solid #7B7B7B
.content
    clear both
    box-sizing border-box
    // height 5rem
    width 7.9rem
    .device-status
        text-align right
        font-size .18rem
        padding .1rem 0 0 .1rem
        p
            display inline-block
            text-align left
            .icon
                display inline-block
                width .2rem
                height .2rem
                border-radius .1rem
                margin-top .08rem
            .txt
                display inline-block
                line-height .4rem
                margin-left .11rem
                float right
                color #fff
    .list-box
      padding-bottom .2rem
      // height 4.6rem
      // overflow-y scroll
      .device
          display inline-block
          width 1.75rem
          margin 0 0 .15rem .19rem
          overflow hidden
          .device-top
              box-sizing border-box
              height 1rem
              background #1E307E
              box-shadow inset 0 0 5px 0 #4F93D9
              padding .12rem .18rem .12rem .18rem
              .img
                  width 1.37rem
                  height .76rem
                  background #fff
                  text-align center
                  img
                      width 1.37rem
                      height .76rem
          .icon
              display inline-block
              width .15rem
              height .15rem
              border-radius .1rem
              margin .1rem .06rem 0 .04rem
          .desc
              display inline-block
              width 1.35rem
              margin-top: .05rem
              line-height .25rem
              p
                  font-size .13rem
                  color #fff
              .device_name
                  max-height .5rem
                  overflow hidden
                  color #fff
</style>