310 lines
6.9 KiB
Vue
310 lines
6.9 KiB
Vue
|
<!--
|
||
|
* @FilePath: \wwwd:\code\screenFront\src\views\energyConsume\content\chart\power.vue
|
||
|
* @Author: 王路平
|
||
|
* @文件版本: V1.0.0
|
||
|
* @Date: 2023-02-13 15:04:23
|
||
|
* @Description:
|
||
|
*
|
||
|
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||
|
-->
|
||
|
<template>
|
||
|
<div>
|
||
|
<border4 ref="refborder4">
|
||
|
<template v-slot>
|
||
|
<div ref="power"></div>
|
||
|
</template>
|
||
|
</border4>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script setup lang="ts">
|
||
|
import {getCurrentInstance, onMounted, reactive, ref} from "vue"
|
||
|
import {EDataPerson,EDataPersonItem} from '@/type/energyConsume'
|
||
|
import {accAdd} from '@/utils/precision'
|
||
|
import border4 from "@/components/borderBox/border4.vue"
|
||
|
import { useI18n } from 'vue-i18n'
|
||
|
let {t} = useI18n();
|
||
|
const { proxy } = getCurrentInstance() as any;
|
||
|
let props=defineProps<{
|
||
|
title:string
|
||
|
}>()
|
||
|
let power=ref()
|
||
|
|
||
|
let refborder4=ref()
|
||
|
|
||
|
const echartsData = reactive<EDataPerson>({
|
||
|
power:{
|
||
|
div:null,
|
||
|
data:null,
|
||
|
title:'',
|
||
|
box:null
|
||
|
},
|
||
|
})
|
||
|
|
||
|
const setData=(value:any)=>{
|
||
|
|
||
|
let series=[]
|
||
|
value.listData.forEach(res=>{
|
||
|
for(let key in res.month){
|
||
|
series.push({
|
||
|
name: key+'月',
|
||
|
type: 'bar',
|
||
|
stack: res.years,
|
||
|
emphasis: {
|
||
|
focus: 'coordinateSystem',
|
||
|
label: {
|
||
|
show: true
|
||
|
}
|
||
|
},
|
||
|
data: res.month[key],
|
||
|
xAxisIndex:res.years=='2022'?0:1,
|
||
|
})
|
||
|
}
|
||
|
|
||
|
})
|
||
|
//data0用于初始化计算的数据
|
||
|
let data0=[]
|
||
|
for(let i=1;i<=value.name.length;i++){
|
||
|
data0.push(0)
|
||
|
}
|
||
|
|
||
|
series.push(
|
||
|
{
|
||
|
name: value.listData[0].years,
|
||
|
type: 'bar',
|
||
|
data:data0,
|
||
|
color: '#bbf',
|
||
|
stack: value.listData[0].years,
|
||
|
// barWidth: 30,
|
||
|
label: {
|
||
|
show: true,
|
||
|
position: 'right',
|
||
|
color: '#fff',
|
||
|
},
|
||
|
xAxisIndex:0,
|
||
|
},{
|
||
|
name: value.listData[1].years,
|
||
|
type: 'bar',
|
||
|
data: data0,
|
||
|
color: '#bbf',
|
||
|
stack: value.listData[1].years,
|
||
|
// barWidth: 30,
|
||
|
label: {
|
||
|
show: true,
|
||
|
position: 'right',
|
||
|
color: '#fff'
|
||
|
},
|
||
|
xAxisIndex:1,
|
||
|
},
|
||
|
)
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
echartsData.power!.div=power.value
|
||
|
echartsData.power!.title=props.title
|
||
|
echartsData.power!.data={
|
||
|
title:{
|
||
|
text:echartsData.power!.title,
|
||
|
show:true,
|
||
|
textStyle:{
|
||
|
color:'#fff',
|
||
|
fontSize:20
|
||
|
}
|
||
|
},
|
||
|
tooltip: {
|
||
|
trigger: 'item',
|
||
|
axisPointer: {
|
||
|
// Use axis to trigger tooltip
|
||
|
type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow',
|
||
|
axis:'auto',
|
||
|
|
||
|
},
|
||
|
},
|
||
|
// color:color,
|
||
|
legend: {
|
||
|
type:'scroll',
|
||
|
bottom: '3%',
|
||
|
// itemStyle:{
|
||
|
// data:yue
|
||
|
// },
|
||
|
},
|
||
|
grid: {
|
||
|
top:'8%',
|
||
|
left: '3%',
|
||
|
right: '10%',
|
||
|
bottom: '15%',
|
||
|
containLabel: true
|
||
|
},
|
||
|
xAxis: [{
|
||
|
type: 'value',
|
||
|
name: t('messages.Production_yuan'),
|
||
|
},{
|
||
|
type: 'value',
|
||
|
name: t('messages.powerhi_du'),
|
||
|
}],
|
||
|
yAxis: {
|
||
|
type: 'category',
|
||
|
data: value.name
|
||
|
},
|
||
|
series: series
|
||
|
};
|
||
|
|
||
|
change(echartsData.power,value)
|
||
|
}
|
||
|
|
||
|
const change = (item:EDataPersonItem,value:any) => {
|
||
|
let Ebox=proxy.$echarts.init(
|
||
|
item.div,
|
||
|
"dark"
|
||
|
);
|
||
|
clacChartsSum(item.data,value)
|
||
|
Ebox.setOption(item.data);
|
||
|
item.box = Ebox
|
||
|
changeecharts(item.data,value)
|
||
|
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* @函数功能: 修改用电量总数数值的标签
|
||
|
* @param {*} option echarts数据
|
||
|
* @param {*} value api接收数据
|
||
|
* @出口参数:
|
||
|
* @函数备注:
|
||
|
*/
|
||
|
const clacChartsSum=(option:any,value:any)=>{
|
||
|
var series = option.series
|
||
|
function getSum1 (params) {
|
||
|
let stack=value.listData[0].years
|
||
|
var datavalue = 0
|
||
|
for (var i = 0; i < series.length; i++) {
|
||
|
if(series[i].stack==stack){
|
||
|
// datavalue += series[i].data[params.dataIndex]
|
||
|
datavalue=accAdd(datavalue,series[i].data[params.dataIndex])
|
||
|
}
|
||
|
|
||
|
}
|
||
|
return datavalue ? stack+'年/'+ datavalue+'kw.h' : null
|
||
|
}
|
||
|
function getSum2 (params) {
|
||
|
let stack=value.listData[1].years
|
||
|
var datavalue = 0
|
||
|
for (var i = 0; i < series.length; i++) {
|
||
|
if(series[i].stack==stack){
|
||
|
// datavalue += series[i].data[params.dataIndex]
|
||
|
datavalue=accAdd(datavalue,series[i].data[params.dataIndex])
|
||
|
}
|
||
|
|
||
|
}
|
||
|
return datavalue ? stack+'年/'+ datavalue+'kw.h' : null
|
||
|
}
|
||
|
series[series.length - 1].label.formatter = getSum2
|
||
|
series[series.length - 2].label.formatter = getSum1
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* @函数功能: 修改用电量总数数值的标签
|
||
|
* @param {*} option echarts数据
|
||
|
* @param {*} value api接收数据
|
||
|
* @出口参数:
|
||
|
* @函数备注:
|
||
|
*/
|
||
|
const changeecharts=(option:any,value:any)=>{
|
||
|
var series = option.series
|
||
|
|
||
|
echartsData.power.box.on('legendselectchanged',(obj)=>{
|
||
|
//重新计算前一年数据
|
||
|
function getSum1 (params) {
|
||
|
let stack=value.listData[0].years
|
||
|
var datavalue = 0
|
||
|
for (var i = 0; i < series.length; i++) {
|
||
|
if (obj.selected[series[i].name]) {
|
||
|
if(series[i].stack==stack){
|
||
|
// datavalue += series[i].data[params.dataIndex]
|
||
|
datavalue=accAdd(datavalue,series[i].data[params.dataIndex])
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
return datavalue ? stack+'年/'+ datavalue+'kw.h' : null
|
||
|
}
|
||
|
//重新计算今年年数据
|
||
|
function getSum2 (params) {
|
||
|
let stack=value.listData[1].years
|
||
|
var datavalue = 0
|
||
|
for (var i = 0; i < series.length; i++) {
|
||
|
if (obj.selected[series[i].name]) {
|
||
|
if(series[i].stack==stack){
|
||
|
// datavalue += series[i].data[params.dataIndex]
|
||
|
datavalue=accAdd(datavalue,series[i].data[params.dataIndex])
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
return datavalue ? stack+'年/'+ datavalue+'kw.h' : null
|
||
|
}
|
||
|
series[series.length - 1].label.formatter = getSum2
|
||
|
series[series.length - 2].label.formatter = getSum1
|
||
|
echartsData.power.box.setOption(option)
|
||
|
})
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
function getSum1 (params) {
|
||
|
let stack=value.listData[0].years
|
||
|
var datavalue = 0
|
||
|
for (var i = 0; i < series.length; i++) {
|
||
|
if(series[i].stack==stack){
|
||
|
// datavalue += series[i].data[params.dataIndex]
|
||
|
datavalue=accAdd(datavalue,series[i].data[params.dataIndex])
|
||
|
}
|
||
|
|
||
|
}
|
||
|
return datavalue ? stack+'年/'+ datavalue+'kw.h' : null
|
||
|
}
|
||
|
function getSum2 (params) {
|
||
|
let stack=value.listData[1].years
|
||
|
var datavalue = 0
|
||
|
for (var i = 0; i < series.length; i++) {
|
||
|
if(series[i].stack==stack){
|
||
|
// datavalue += series[i].data[params.dataIndex]
|
||
|
datavalue=accAdd(datavalue,series[i].data[params.dataIndex])
|
||
|
}
|
||
|
|
||
|
}
|
||
|
return datavalue ? stack+'年/'+ datavalue+'kw.h' : null
|
||
|
}
|
||
|
series[series.length - 1].label.formatter = getSum2
|
||
|
series[series.length - 2].label.formatter = getSum1
|
||
|
}
|
||
|
|
||
|
function setchartWH(width:any,height:any){
|
||
|
echartsData.power!.div=power.value
|
||
|
power.value.style.height=height+'px'
|
||
|
power.value.style.width=width+'px'
|
||
|
|
||
|
refborder4.value.resetWH()
|
||
|
if(echartsData.power.box){
|
||
|
echartsData.power.box.resize()
|
||
|
}
|
||
|
|
||
|
}
|
||
|
onMounted(() => {
|
||
|
|
||
|
})
|
||
|
|
||
|
// return{setchartWH}
|
||
|
defineExpose({
|
||
|
setchartWH,
|
||
|
setData
|
||
|
})
|
||
|
|
||
|
</script>
|
||
|
|
||
|
<style scoped>
|
||
|
|
||
|
</style>
|