171 lines
3.7 KiB
Vue
171 lines
3.7 KiB
Vue
<template>
|
||
<section>
|
||
<div class="con1">
|
||
<div class="desc">当前状态</div>
|
||
<div class="status"></div>
|
||
<div class="txt">一类故障</div>
|
||
</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/icon5.png">
|
||
<span class="title">故障内容：</span>
|
||
<span class="txt">{{dataInfo.task_status}}</span>
|
||
</div>
|
||
<div class="infoli">
|
||
<img src="../../../images/aio/icon4.png">
|
||
<span class="title">处理办法：</span>
|
||
<span class="txt">{{dataInfo.task_num}}</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/bg3.png) no-repeat
|
||
margin-left .18rem
|
||
margin-right .35rem
|
||
margin-top 1rem
|
||
font-size .34rem
|
||
.desc
|
||
margin-left 1rem
|
||
margin-top .5rem
|
||
color #ffffff
|
||
.status
|
||
margin .8rem 0 .8rem 2rem
|
||
width .48rem
|
||
height .48rem
|
||
border-radius .24rem
|
||
background-color $yellow
|
||
.txt
|
||
width 4.62rem
|
||
text-align center
|
||
color $yellow
|
||
.con2
|
||
float left
|
||
width 6.4rem
|
||
height 5.02rem
|
||
background center / 100% 100% url(../../../images/aio/bg2.png) no-repeat
|
||
padding-top .2rem
|
||
margin-top 1rem
|
||
.infoli
|
||
width 6rem
|
||
line-height 1.08rem
|
||
height 1.08rem
|
||
background #ffffff
|
||
margin 0 auto
|
||
// margin-bottom 2px
|
||
border-bottom 1px dotted #cccccc
|
||
img
|
||
float left
|
||
margin .4rem .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>
|