165 lines
4.3 KiB
Vue
165 lines
4.3 KiB
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>
|