screenFront/src/views/energyConsumeJixiefenchang/content/chart/power.vue

310 lines
6.9 KiB
Vue
Raw Normal View History

2023-05-12 08:41:33 +00:00
<!--
* @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>