85 lines
1.9 KiB
Vue
85 lines
1.9 KiB
Vue
<template>
|
|
<section class="box">
|
|
<t-header :title="title1">
|
|
<p class="p1" @click="toJump">{{title2}}</p>
|
|
</t-header>
|
|
<Monitoring-Screen v-if="page === 'two'"></Monitoring-Screen>
|
|
<Device-Screen v-if="page === 'one'"></Device-Screen>
|
|
<section class="bottom"></section>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import THeader from '@components/header.vue'
|
|
import MonitoringScreen from './MonitoringScreen.vue'
|
|
import DeviceScreen from './DeviceScreen.vue'
|
|
export default {
|
|
name: 'HomeScreen',
|
|
components: {
|
|
THeader,
|
|
MonitoringScreen,
|
|
DeviceScreen
|
|
},
|
|
data () {
|
|
return {
|
|
page: 'one',
|
|
timer: null,
|
|
iTime: this.$store.getters.setTime1
|
|
}
|
|
},
|
|
computed: {
|
|
title1 () {
|
|
let t = ''
|
|
t = this.page === 'one' ? '海亮铜管智能车间设备监控中心' : '海亮铜管智能车间生产监控中心'
|
|
return t
|
|
},
|
|
title2 () {
|
|
let t = ''
|
|
t = this.page === 'two' ? '海亮铜管智能车间设备监控中心' : '海亮铜管智能车间生产监控中心'
|
|
return t
|
|
}
|
|
},
|
|
mounted () {
|
|
this.swipePage()
|
|
},
|
|
beforeDestroy () {
|
|
this.$once('hook:beforeDestroy', () => {
|
|
clearInterval(this.timer)
|
|
})
|
|
},
|
|
methods: {
|
|
swipePage () {
|
|
this.timer = setInterval(() => {
|
|
this.page = this.page === 'one' ? 'two' : 'one'
|
|
}, this.iTime)
|
|
},
|
|
toJump () {
|
|
clearInterval(this.timer)
|
|
this.page = this.page === 'one' ? 'two' : 'one'
|
|
setTimeout(() => {
|
|
this.swipePage()
|
|
}, 2000)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
@import '~@css/mixin'
|
|
.box
|
|
_wh(100%, 100%)
|
|
overflow hidden
|
|
.p1
|
|
position absolute
|
|
display block
|
|
cursor pointer
|
|
left .2509rem
|
|
top .22rem
|
|
font-family "SourceHanSansCN"
|
|
_font(.18rem, .30rem, #fff, 700,)
|
|
letter-spacing .01rem
|
|
.bottom
|
|
_wh(100%, .38rem)
|
|
background center bottom / 19.06rem 100% url(../assets/images/screen1/bottom.png) no-repeat
|
|
</style>
|