<!--实时监控-->
<template>
  <app-container>
    <div class="monitor-title">实时监控</div>
    <call-statics ref="callStatics" :query="listQuery"/>
    <el-row :gutter="10">
      <el-col span="12">
        <satisfied-statics ref="satisfiedStatics" :query="listQuery"/>
      </el-col>
      <el-col span="12">
        <wait-statics ref="waitStatics" :query="listQuery"/>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <call-line ref="callLine" :query="listQuery"/>
      </el-col>
    </el-row>
  </app-container>
</template>

<script>
import CallStatics from './components/callStatics'
import AppContainer from '../../../components/layout/AppContainer'
import SatisfiedStatics from './components/satisfiedStatics'
import WaitStatics from './components/waitStatics'
import CallLine from './components/callLine'
import { getToday } from '@/utils/dateutils'

export default {
  name: 'RealtimeMonitor',
  components: { CallLine, WaitStatics, SatisfiedStatics, AppContainer, CallStatics },
  data() {
    return {
      listQuery: {
        startTime: '',
        endTime: ''
      },
      timer: null
    }
  },
  created() {
    this.listQuery.startTime = getToday('yyyy-MM-dd')
    this.listQuery.endTime = getToday('yyyy-MM-dd')
  },
  activated() {
    this.listQuery.startTime = getToday('yyyy-MM-dd')
    this.listQuery.endTime = getToday('yyyy-MM-dd')
  },
  mounted(){
    this.timer = setInterval(()=>{
      this.refreshData()
    }, 3000)
  },
  methods:{
    refreshData(){
      console.log('refresh Data')
      this.$refs.callStatics.fetchData()
      this.$refs.satisfiedStatics.fetchData()
      this.$refs.waitStatics.fetchData()
      this.$refs.callLine.fetchData()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.monitor-title{
  line-height: 2;
  font-size: 18px;
  font-weight: 700;
  padding: 5px;
  text-align: center;
  //background-color: #9accf3;
  background-color: #F5F7FA;
}

</style>