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

<template>
<div>
  <section class="content">
      <div class="device-status">
          <button class="fl mgt10 mgl10 button--primary" @click="toIfWork">设备开/完工</button>
          <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"
          :class="{bg1:item.is_run=='1',bg2:item.is_run=='0'}"
          v-for="(item, index) in list" :key="index"
          @click="toOperation(item)"
        >
          <div class="device-top"><div class="img"><img v-show="item.device_icon" :src="item.imgurl" alt=""></div></div>
          <div class="fl icon" :class="{blue:item.device_status=='3',red:item.device_status=='2',green:item.device_status=='1',white:item.device_status=='0'}"></div>
          <div class="fl desc">
              <p class="device_name">{{item.device_name}}</p>
              <p class="ellipsis">任务数: {{item.job_count}}</p>
              <p class="ellipsis">工单: {{item.produceorder_code}}</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,
      list: []
    }
  },
  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.list = [...newArr]
      // this.$store.dispatch('getIsProplan', res.result.is_productonplan)
    },
    toIfWork () {
      // this.$router.push('/ifwork')
    },
    toOperation (item) {
      if (item.is_run === '1') {
        // let obj = {
        //   code: item.device_code
        // }
        // this.$store.dispatch('setDevice', obj)
        this.$router.push({
          path: '/workordermanage',
          query: {code: item.device_code}
        })
      }
    }
  },
  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
              .device_name
                  max-height .5rem
                  overflow hidden
</style>