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

<template>
<div class="ssyx-ems-dashboard-editor-container">
<!--  6个方块-->
  <real-time-base-info :data="runningHeadData"/>
<!--  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 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},
  mixins:[getQuerySiteId,intervalUpdate],
  data() {
    return {
      runningHeadData:{},//运行信息
    }
  },
  methods:{
    //6个方块数据
    getRunningHeadData(){
      getRunningHeadInfo(this.siteId).then(response => {
        this.runningHeadData = response?.data || {}
      })
    },
    updateData(){
      this.getRunningHeadData()
      this.$refs.cnglqx.init(this.siteId)
      this.$refs.pocpjwd.init(this.siteId)
      this.$refs.dcpjsoc.init(this.siteId)
      this.$refs.dcpjwd.init(this.siteId)
    },
    init(){
      this.$nextTick(()=>{
        this.updateData()
        this.updateInterval(this.updateData)
      })
    }
  }

}
</script>