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

<template>
<div>
  <section class="content">
      <div class="device-status">
          <p><span class="icon red"></span><span class="txt">有任务</span></p>
          <p><span class="icon green"></span><span class="txt">生产中</span></p>
          <p><span class="icon blue"></span><span class="txt">停机</span></p>
          <p><span class="icon white"></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-show="e.device_icon" :src="e.imgurl" alt=""></div></div>
            <div class="fl icon" :class="['white', 'green', 'red', 'blue'][Number(e.device_status)]"></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 = [...newArr]
    },
    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>
.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
                width .56rem
                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
          height 2.1rem
          margin .18rem 0rem 0 .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 .2rem
              height .2rem
              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>