首页看板、电表报表接口联调，部分接口参数更新
This commit is contained in:
白菜
@ -3,7 +3,7 @@
|
||||
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
|
||||
<div slot="header">
|
||||
<span class="card-title">电量指标</span>
|
||||
<el-button style="float: right; padding: 3px 0" type="text" size="small">按年</el-button>
|
||||
<!-- <el-button style="float: right; padding: 3px 0" type="text" size="small">按年</el-button>-->
|
||||
</div>
|
||||
<div style="height: 360px" id="dlzbChart"/>
|
||||
</el-card>
|
||||
@ -12,7 +12,6 @@
|
||||
<style scoped lang="scss"></style>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '@/mixins/ems/resize'
|
||||
|
||||
export default {
|
||||
@ -22,11 +21,6 @@ export default {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
@ -35,11 +29,15 @@ export default {
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.querySelector('#dlzbChart'), 'macarons')
|
||||
this.setOptions()
|
||||
initChart(data) {
|
||||
this.chart = echarts.init(document.querySelector('#dlzbChart'))
|
||||
this.setOption(data)
|
||||
},
|
||||
setOptions() {
|
||||
setOption(data) {
|
||||
const source=[['日期','充电量','放电量']]
|
||||
data.forEach(item => {
|
||||
source.push([item.dateMonth,item.chargeEnergy,item.disChargeEnergy])
|
||||
})
|
||||
this.chart.setOption({
|
||||
legend: {
|
||||
left: 'center',
|
||||
@ -55,7 +53,7 @@ export default {
|
||||
color:"#333333",
|
||||
},
|
||||
xAxis: {
|
||||
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#333333',
|
||||
@ -70,10 +68,10 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
dataset:{source},
|
||||
series: [
|
||||
{
|
||||
name:'充电量',
|
||||
data: [80,92,1,34,90,130,320,80,9,91,34,90],
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
color: '#F86F70',
|
||||
@ -85,7 +83,6 @@ export default {
|
||||
}
|
||||
},{
|
||||
name:'放电量',
|
||||
data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
color: '#488AFF',
|
||||
|
||||
@ -11,7 +11,6 @@
|
||||
<style scoped lang="scss"></style>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '@/mixins/ems/resize'
|
||||
|
||||
export default {
|
||||
@ -21,11 +20,6 @@ export default {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
@ -34,11 +28,15 @@ export default {
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.querySelector('#gjdjfbChart'), 'macarons')
|
||||
this.setOptions()
|
||||
initChart(data) {
|
||||
this.chart = echarts.init(document.querySelector('#gjdjfbChart'))
|
||||
this.setOption(data)
|
||||
},
|
||||
setOptions() {
|
||||
setOption(data) {
|
||||
const source=[['告警等级','告警数量','告警占比']]
|
||||
data.forEach(item => {
|
||||
source.push([item.level,item.dataNum,item.percent])
|
||||
})
|
||||
this.chart.setOption({
|
||||
color:['#3C81FF','#FFBE29'],
|
||||
legend: {
|
||||
@ -55,7 +53,7 @@ export default {
|
||||
color:"#333333",
|
||||
},
|
||||
xAxis: {
|
||||
data: ['A级','B级','C级','D级','E级','F级'],
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#333333',
|
||||
@ -79,19 +77,18 @@ export default {
|
||||
onZero:false
|
||||
}
|
||||
}],
|
||||
dataset:{source},
|
||||
series: [
|
||||
{
|
||||
name:'数据一',
|
||||
yAxisIndex:0,
|
||||
data: [80,92,1,34,90,130,320],
|
||||
type: 'line',
|
||||
},
|
||||
{
|
||||
name:'数据二',
|
||||
yAxisIndex:1,
|
||||
data: [89,9,80,4,100,30,30],
|
||||
type: 'bar',
|
||||
}
|
||||
{
|
||||
name:'告警数量',
|
||||
yAxisIndex:0,
|
||||
type: 'line',
|
||||
},
|
||||
{
|
||||
name:'告警占比',
|
||||
yAxisIndex:1,
|
||||
type: 'bar',
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
|
||||
@ -11,7 +11,6 @@
|
||||
<style scoped lang="scss"></style>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '@/mixins/ems/resize'
|
||||
|
||||
export default {
|
||||
@ -21,11 +20,6 @@ export default {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
@ -34,11 +28,15 @@ export default {
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.querySelector('#gjqsChart'), 'macarons')
|
||||
this.setOptions()
|
||||
initChart(data) {
|
||||
this.chart = echarts.init(document.querySelector('#gjqsChart'))
|
||||
this.setOption(data)
|
||||
},
|
||||
setOptions() {
|
||||
setOption(data) {
|
||||
const source=[['日期','告警趋势']]
|
||||
data.forEach(item => {
|
||||
source.push([item.dateMonth,item.alarmNum])
|
||||
})
|
||||
this.chart.setOption({
|
||||
color:['#F86F70'],
|
||||
legend: {
|
||||
@ -55,7 +53,7 @@ export default {
|
||||
color:"#333333",
|
||||
},
|
||||
xAxis: {
|
||||
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#333333',
|
||||
@ -70,10 +68,10 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
dataset:{source},
|
||||
series: [
|
||||
{
|
||||
name:'告警趋势',
|
||||
data: [80,92,1,34,90,130,320,80,9,91,34,90],
|
||||
type: 'line',
|
||||
areaStyle: {}
|
||||
}]
|
||||
|
||||
@ -11,7 +11,6 @@
|
||||
<style scoped lang="scss"></style>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '@/mixins/ems/resize'
|
||||
|
||||
export default {
|
||||
@ -21,11 +20,6 @@ export default {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
@ -34,11 +28,15 @@ export default {
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.querySelector('#sbgjzbChart'), 'macarons')
|
||||
this.setOptions()
|
||||
initChart(data) {
|
||||
this.chart = echarts.init(document.querySelector('#sbgjzbChart'))
|
||||
this.setOption(data)
|
||||
},
|
||||
setOptions() {
|
||||
setOption(data) {
|
||||
const source= []
|
||||
data.forEach(item => {
|
||||
source.push({value: item.alarmNum, name: item.type})
|
||||
})
|
||||
this.chart.setOption({
|
||||
color:['#FFBE29','#3C81FF','#A796FF','#FC6B69','#58F3AA'],
|
||||
tooltip: {
|
||||
@ -53,13 +51,7 @@ export default {
|
||||
name: '设备告警占比',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: [
|
||||
{ value: 1048, name: '数据一' },
|
||||
{ value: 735, name: '数据二' },
|
||||
{ value: 580, name: '数据三' },
|
||||
{ value: 484, name: '数据四' },
|
||||
{ value: 300, name: '数据五' }
|
||||
],
|
||||
data:source,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
|
||||
@ -11,7 +11,6 @@
|
||||
<style scoped lang="scss"></style>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '@/mixins/ems/resize'
|
||||
|
||||
export default {
|
||||
@ -21,11 +20,6 @@ export default {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
@ -34,11 +28,15 @@ export default {
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.querySelector('#xtxlChart'), 'macarons')
|
||||
this.setOptions()
|
||||
initChart(data) {
|
||||
this.chart = echarts.init(document.querySelector('#xtxlChart'))
|
||||
this.setOption(data)
|
||||
},
|
||||
setOptions() {
|
||||
setOption(data) {
|
||||
const source=[['日期','系统效率']]
|
||||
data.forEach(item => {
|
||||
source.push([item.dateMonth,item.systemEfficiency])
|
||||
})
|
||||
this.chart.setOption({
|
||||
color:['#FFBE01'],
|
||||
legend: {
|
||||
@ -55,7 +53,7 @@ export default {
|
||||
color:"#333333",
|
||||
},
|
||||
xAxis: {
|
||||
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle:{
|
||||
color: '#333333',
|
||||
@ -70,10 +68,10 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
dataset:{source},
|
||||
series: [
|
||||
{
|
||||
name:'系统效率',
|
||||
data: [80,92,1,34,90,130,320,80,9,91,34,90],
|
||||
type: 'line',
|
||||
}]
|
||||
})
|
||||
|
||||
@ -1,32 +1,29 @@
|
||||
<template>
|
||||
<div class="ems-dashboard-editor-container">
|
||||
<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="32" style="background:#fff;margin:30px 0;">
|
||||
<el-col :xs="24" :sm="12" :lg="12">
|
||||
<dlzb-chart/>
|
||||
<dlzb-chart ref="dlzbchart"/>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="12">
|
||||
<xtxl-chart/>
|
||||
<xtxl-chart ref="xtxlchart"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="32" style="background:#fff;margin:0;">
|
||||
<el-col :xs="24" :sm="8" :lg="8">
|
||||
<gjqs-chart/>
|
||||
<gjqs-chart ref="gjqsChart"/>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="8" :lg="8">
|
||||
<sbgjzb-chart/>
|
||||
<sbgjzb-chart ref="sbgjzbChart"/>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="8" :lg="8">
|
||||
<gjdjfb-chart/>
|
||||
<gjdjfb-chart ref="gjdjfbChart"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -37,6 +34,7 @@ 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: {
|
||||
@ -49,10 +47,25 @@ export default {
|
||||
},
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user