emsfront/src/views/ems/dzjk/sbjk/ssyx/index.vue

<template>
<div class="ssyx-ems-dashboard-editor-container">
<!--  6个方块-->
  <real-time-base-info :display-data="runningDisplayData" :loading="runningHeadLoading"/>
  <!-- 时间选择 -->
  <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' :display-data="runningDisplayData"/>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="12">
      <pocpjwd-chart ref='pocpjwd' :display-data="runningDisplayData"/>
    </el-col>
  </el-row>
  <el-row :gutter="32" style="margin:30px 0;">
    <el-col :xs="24" :sm="12" :lg="12">
      <dcpjsoc-chart ref="dcpjsoc" :display-data="runningDisplayData"/>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="12">
      <dcpjwd-chart ref="dcpjwd" :display-data="runningDisplayData"/>
    </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 {getProjectDisplayData} 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 {
      runningDisplayData: [], //单站监控项目配置展示数据
      timeRange:[],
      isInit:true,
      runningHeadLoading: false,
    }
  },
  methods:{
    //6个方块数据
    getRunningHeadData(){
      this.runningHeadLoading = true
      return getProjectDisplayData(this.siteId).then((displayResponse) => {
        this.runningDisplayData = displayResponse?.data || []
      }).finally(() => {
        this.runningHeadLoading = false
      })
    },
    // 更新时间范围 重置图表
    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().finally(() => {
        this.updateChart()
      })
    },
    init(){
      this.$refs.dateRangeSelect.init(true)
      this.$nextTick(()=>{
        this.updateData()
      })
    }
  }

}
</script>