
<template>
<div class="ssyx-ems-dashboard-editor-container">
<!--  6个方块-->
  <real-time-base-info :data="runningHeadData"/>
  <!-- 时间选择 -->
  <date-range-select ref="dateRangeSelect" @updateDate="updateDate" style="margin-top:20px;"/>
<!--  echart图表-->
  <el-row :gutter="32" style="background:#fff;margin:30px 0;">
    <el-col :xs="24" :sm="12" :lg="12">
      <cnglqx-chart ref='cnglqx'/>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="12">
      <pocpjwd-chart ref='pocpjwd'/>
    </el-col>
  </el-row>
  <el-row :gutter="32" style="margin:30px 0;">
    <el-col :xs="24" :sm="12" :lg="12">
      <dcpjsoc-chart ref="dcpjsoc"/>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="12">
      <dcpjwd-chart ref="dcpjwd"/>
    </el-col>
  </el-row>
</div>
</template>

<style scoped lang="scss">

</style>
<script>
import DateRangeSelect from '@/components/Ems/DateRangeSelect/index.vue'
import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
import CnglqxChart from './CnglqxChart.vue'
import PocpjwdChart from './PocpjwdChart.vue'
import DcpjwdChart from './DcpjwdChart.vue'
import DcpjsocChart from './DcpjsocChart.vue'
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getRunningHeadInfo} from '@/api/ems/dzjk'
import intervalUpdate from "@/mixins/ems/intervalUpdate";

export default {
  name:'DzjkSbjkSsyx',
  components:{RealTimeBaseInfo,CnglqxChart,PocpjwdChart,DcpjwdChart,DcpjsocChart,DateRangeSelect},
  mixins:[getQuerySiteId,intervalUpdate],
  data() {
    return {
      runningHeadData:{},//运行信息
      timeRange:[],
      isInit:true
    }
  },
  methods:{
    //6个方块数据
    getRunningHeadData(){
      getRunningHeadInfo(this.siteId).then(response => {
        this.runningHeadData = response?.data || {}
      })
    },
    // 更新时间范围 重置图表
    updateDate(data){
      this.timeRange=data
      !this.isInit && this.updateChart()
      this.isInit = false
    },
    updateChart(){
      this.$refs.cnglqx.init(this.siteId,this.timeRange||[])
      this.$refs.pocpjwd.init(this.siteId,this.timeRange||[])
      this.$refs.dcpjsoc.init(this.siteId,this.timeRange||[])
      this.$refs.dcpjwd.init(this.siteId,this.timeRange||[])
      this.updateInterval(this.updateData)
    },
    updateData(){
      this.getRunningHeadData()
      this.updateChart()
    },
    init(){
      this.$refs.dateRangeSelect.init(true)
      this.$nextTick(()=>{
        this.updateData()
      })
    }
  }

}
</script>
