screen-hl-one/src/pages/HomeScreen.vue

<template>
  <section class="box">
    <Monitoring-Screen v-if="page === 'two'"></Monitoring-Screen>
    <Device-Screen v-if="page === 'one'"></Device-Screen>
  </section>
</template>

<script>
import MonitoringScreen from './MonitoringScreen.vue'
import DeviceScreen from './DeviceScreen.vue'
export default {
  name: 'HomeScreen',
  components: {
    MonitoringScreen,
    DeviceScreen
  },
  data () {
    return {
      page: 'one',
      timer: null,
      iTime: this.$store.getters.setTime1
    }
  },
  mounted () {
    this.swipePage()
  },
  methods: {
    swipePage () {
      this.timer = setInterval(() => {
        this.page = this.page === 'one' ? 'two' : 'one'
      }, this.iTime)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@css/mixin'
.box
  _wh(100%, 100%)
  overflow hidden
</style>