85 lines
2.2 KiB
Vue
85 lines
2.2 KiB
Vue
<template>
|
|
<div class="ems-dashboard-editor-container" v-loading="loading">
|
|
<zd-info></zd-info>
|
|
<div class="ems-content-container ems-content-container-padding">
|
|
<div class="content-title">数据概览</div>
|
|
<el-row :gutter="15" style="background:#fff;margin:30px 0;">
|
|
<el-col :xs="24" :sm="12" :lg="12">
|
|
<dlzb-chart ref="dlzbchart"/>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="12" :lg="12">
|
|
<xtxl-chart ref="xtxlchart"/>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="15" style="background:#fff;margin:0;">
|
|
<el-col :xs="24" :sm="8" :lg="8">
|
|
<gjqs-chart ref="gjqsChart"/>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="8" :lg="8">
|
|
<sbgjzb-chart ref="sbgjzbChart"/>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="8" :lg="8">
|
|
<gjdjfb-chart ref="gjdjfbChart"/>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ZdInfo from '@/components/Ems/ZdBaseInfo/index.vue'
|
|
import DlzbChart from './DlzbChart.vue'
|
|
import XtxlChart from './XtxlChart.vue'
|
|
import GjqsChart from './GjqsChart.vue'
|
|
import SbgjzbChart from './SbgjzbChart.vue'
|
|
import GjdjfbChart from './GjdjfbChart.vue'
|
|
import { dataList } from '@/api/ems/home'
|
|
export default {
|
|
name: 'Index',
|
|
components: {
|
|
ZdInfo,
|
|
DlzbChart,
|
|
XtxlChart,
|
|
GjqsChart,
|
|
SbgjzbChart,
|
|
GjdjfbChart
|
|
},
|
|
data() {
|
|
return {
|
|
loading:false,
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
},
|
|
mounted() {
|
|
this.loading = true
|
|
dataList().then(response => {
|
|
const data = JSON.parse(JSON.stringify(response?.data || {}))
|
|
this.$refs.dlzbchart.initChart(data?.elecDataList || [])
|
|
this.$refs.xtxlchart.initChart(data?.sysEfficList || [])
|
|
this.$refs.gjqsChart.initChart(data?.alarmDataList || [])
|
|
this.$refs.sbgjzbChart.initChart(data?.deviceAlarmList || [])
|
|
this.$refs.gjdjfbChart.initChart(data?.alarmLevelList || [])
|
|
|
|
}).finally(() => {
|
|
this.loading = false
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.ems-dashboard-editor-container {
|
|
position: relative;
|
|
.content-title{
|
|
line-height: 16px;
|
|
color: #333333;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
}
|
|
</style>
|