<template>
  <div class="dashboard-editor-container">
    <panel-group />
    <el-row style="background:#fff;padding:10px 10px 0;margin-bottom:10px;">
      <line-chart ref="lineChart"/>
    </el-row>
    <el-row :gutter="10">
      <el-col :lg="8" :sm="24" :xs="24">
        <div class="chart-wrapper">
          <raddar-chart/>
        </div>
      </el-col>
      <el-col :lg="8" :sm="24" :xs="24">
        <div class="chart-wrapper">
          <pie-chart/>
        </div>
      </el-col>
      <el-col :lg="8" :sm="24" :xs="24">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import store from "@/store";
import PanelGroup from "./dashboard/PanelGroup";
import LineChart from "./dashboard/LineChart";
import RaddarChart from "./dashboard/RaddarChart";
import PieChart from "./dashboard/PieChart";
import BarChart from "./dashboard/BarChart";


export default {
  name: "Index",
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      intervalld:null
    };
  },
  methods: {
   //定时刷新数据函数
   dataRefreh(){
     //计时器正在进行中,退出函数
     if(this.intervalld !=null){
        return;
     }
     //计时器为空,操作
     this.intervalld=setInterval(() =>{
      //  console.log("刷新"+new Date());
      //  this.initData();//加载数据函数
      //  this.$refs.lineChart.selectExamTypeView();
     },5000)
   },
   //停止定时器
   clear(){
     clearInterval(this.intervalld);//清除计时器
     this.intervalld=null;//设置为null
   }
  },
  created(){
    this.dataRefreh();
  },
  destroyed(){
    //页面销毁后,清除定时器
    this.clear();
  }
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  //padding: 10px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    height: 320px;
    padding: 10px 10px 0;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
