87 lines
2.4 KiB
Vue
87 lines
2.4 KiB
Vue
|
|
<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>
|