<!--
 * @Description: 智慧交通右屏
 * @Author: 王晓颖
 * @Date: 2020-10-12 15:06:16
 -->
<template>
  <div class="modular-row-100">
    <div class="modular-col-100">
      <div class="modular-row-30">
        <div class="modular-col-30 modular-padding-right">
          <traffic-introduce ref="trafficIntroduce"/>
          <!--<traffic-base ref="trafficIntroduce" v-if="!isShow"/>-->
        </div>
        <div class="modular-col-60">
          <traffic-safety ref="trafficSafety"/>
        </div>

      </div>
      <div class="modular-row-30">
        <div class="modular-col-60 modular-padding-right">
          <traffic-case ref="trafficCase"/>
        </div>
        <div class="modular-col-30">
          <traffic-gem-road-rank/>
        </div>
      </div>
      <div class="modular-row-30">
        <div class="modular-col-60 modular-padding-right">
          <traffic-peccancy/>
        </div>
        <div class="modular-col-30">
          <traffic-camera ref="trafficCamera" v-if="isShow"/>
          <environment ref="trafficCamera" v-if="!isShow"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TrafficSafety from './trafficSafety'
import TrafficCamera from './trafficCamera'
import TrafficPeccancy from './trafficPeccancy'
import TrafficIntroduce from './trafficIntroduce'
import TrafficCase from './trafficCase'
import TrafficGemRoadRank from './components/trafficGemRoadRank'
import TrafficBase from './trafficBase'
import Environment from "./environment";
export default {
  name: 'trafficAll',
  components: {
    Environment,
    TrafficBase,
    TrafficGemRoadRank,
    TrafficCase,
    TrafficIntroduce,
    TrafficPeccancy,
    TrafficCamera,
    TrafficSafety},
  data () {
    return {
      compTimer: null,
      isShow: true,
      timer1: null, // 10分钟计时器
      counts1: 600000,
      timer2: null,
      counts2: 3600000 // 1小时计时器
    }
  },
  mounted () {
    this.compChange()
    this.countdown()
  },
  methods: {
    compChange () {
      this.compTimer = setTimeout(() => {
        this.isShow = !this.isShow
        this.compChange()
      }, 5 * 1000)
    },
    countdown () {
      this.timer1 = setInterval(this.refreshGroup1, this.counts1)
      this.timer2 = setInterval(this.refreshGroup2, this.counts2)
    },
    refreshGroup1 () {
      console.log('refreshGroup1' + new Date())
      this.$refs.trafficSafety.getData()
      this.$refs.trafficCamera.getData()
      this.$refs.trafficCaseFromPie.getData()
      this.$refs.trafficCaseAreaPie.getData()
    },
    refreshGroup2 () {
      console.log('refreshGroup2' + new Date())
      this.$refs.trafficCountLine.getData()
      this.$refs.trafficCaseRoadRank.getData()
      this.$refs.trafficCaseTypeRank.getData()
    },
    stopInter () {
      clearInterval(this.timer1)
      clearInterval(this.timer2)
      this.timer1 = null
      this.timer2 = null
    }
  },
  beforeDestroy () {
    this.stopInter()
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>