498 lines
12 KiB
Vue
498 lines
12 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 style="display: flex; flex-direction: column;">
|
|
<div ref="powerjixie"></div>
|
|
<div ref="power"></div>
|
|
|
|
</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/border6.vue";
|
|
import { useI18n } from 'vue-i18n'
|
|
let {t} = useI18n();
|
|
const { proxy } = getCurrentInstance() as any;
|
|
let props = defineProps<{
|
|
title: string;
|
|
}>();
|
|
let power = ref();
|
|
let powerjixie = ref();
|
|
|
|
let refborder4 = ref();
|
|
|
|
const echartsData = reactive<EDataPerson>({
|
|
power: {
|
|
div: null,
|
|
data: null,
|
|
title: "",
|
|
box: null,
|
|
},
|
|
});
|
|
const echartsData2 = reactive<EDataPerson>({
|
|
power: {
|
|
div: null,
|
|
data: null,
|
|
title: "",
|
|
box: null,
|
|
},
|
|
});
|
|
|
|
const setData = (value: any) => {
|
|
let series = [];
|
|
let series2 = [];
|
|
let name = [];
|
|
let name2 = [];
|
|
let shuju = [{month: {}, type: '生产额'},{month: {}, type: '用电量'}];
|
|
let shuju2 = [{month: {}, type: '生产额'},{month: {}, type: '用电量'}];
|
|
let nameIndex = null;
|
|
value.name.forEach((ele, index) => {
|
|
if (ele == "机械分厂") {
|
|
name2.push(ele);
|
|
nameIndex = index;
|
|
} else {
|
|
name.push(ele);
|
|
}
|
|
});
|
|
value.listData.forEach((res,listDataindex) => {
|
|
for (let key in res.month) {
|
|
res.month[key].forEach((ele,index)=>{
|
|
if(!shuju2[listDataindex].month[key]){
|
|
shuju2[listDataindex].month[key]=[]
|
|
}
|
|
if(!shuju[listDataindex].month[key]){
|
|
shuju[listDataindex].month[key]=[]
|
|
}
|
|
if(index==nameIndex){
|
|
shuju2[listDataindex].month[key].push(ele)
|
|
}else{
|
|
shuju[listDataindex].month[key].push(ele)
|
|
}
|
|
})
|
|
}
|
|
});
|
|
shuju.forEach((res) => {
|
|
for (let key in res.month) {
|
|
series.push({
|
|
name: key + "月",
|
|
type: "bar",
|
|
stack: res.type,
|
|
emphasis: {
|
|
focus: "coordinateSystem",
|
|
label: {
|
|
show: true,
|
|
formatter: function (value, index) {
|
|
return value.value.toLocaleString();
|
|
},
|
|
},
|
|
},
|
|
data: res.month[key],
|
|
xAxisIndex: res.type == "生产额" ? 0 : 1,
|
|
});
|
|
}
|
|
});
|
|
shuju2.forEach((res) => {
|
|
for (let key in res.month) {
|
|
series2.push({
|
|
name: key + "月",
|
|
type: "bar",
|
|
stack: res.type,
|
|
barWidth:'20%',
|
|
emphasis: {
|
|
focus: "coordinateSystem",
|
|
label: {
|
|
show: true,
|
|
formatter: function (value, index) {
|
|
return value.value.toLocaleString();
|
|
},
|
|
},
|
|
},
|
|
data: res.month[key],
|
|
xAxisIndex: res.type == "生产额" ? 0 : 1,
|
|
});
|
|
}
|
|
});
|
|
//data0用于初始化计算的数据
|
|
let data0 = [];
|
|
for (let i = 1; i <= value.name.length; i++) {
|
|
data0.push(0);
|
|
}
|
|
let data1 = [];
|
|
for (let i = 1; i <= name2.length; i++) {
|
|
data1.push(0);
|
|
}
|
|
|
|
series.push(
|
|
{
|
|
name: "",
|
|
type: "bar",
|
|
data: data0,
|
|
color: "#bbf",
|
|
stack: value.listData[0].type,
|
|
// barWidth: 30,
|
|
label: {
|
|
show: true,
|
|
position: "right",
|
|
color: "#fff",
|
|
},
|
|
xAxisIndex: 0,
|
|
},
|
|
{
|
|
name: "",
|
|
type: "bar",
|
|
data: data0,
|
|
color: "#bbf",
|
|
stack: value.listData[1].type,
|
|
// barWidth: 30,
|
|
label: {
|
|
show: true,
|
|
position: "right",
|
|
color: "#fff",
|
|
},
|
|
xAxisIndex: 1,
|
|
}
|
|
);
|
|
series2.push(
|
|
{
|
|
name: "",
|
|
type: "bar",
|
|
data: data1,
|
|
color: "#bbf",
|
|
stack: value.listData[0].type,
|
|
// barWidth: 30,
|
|
label: {
|
|
show: true,
|
|
position: "right",
|
|
color: "#fff",
|
|
},
|
|
xAxisIndex: 0,
|
|
},
|
|
{
|
|
name: "",
|
|
type: "bar",
|
|
data: data1,
|
|
color: "#bbf",
|
|
stack: value.listData[1].type,
|
|
// barWidth: 30,
|
|
label: {
|
|
show: true,
|
|
position: "right",
|
|
color: "#fff",
|
|
},
|
|
xAxisIndex: 1,
|
|
}
|
|
);
|
|
|
|
echartsData.power!.div = powerjixie.value;
|
|
echartsData.power!.title =props.title;;
|
|
echartsData.power!.data = {
|
|
title: {
|
|
text: echartsData.power!.title,
|
|
show: true,
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 20,
|
|
},
|
|
top:"2%"
|
|
},
|
|
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",
|
|
top: "10%",
|
|
// itemStyle:{
|
|
// data:yue
|
|
// },
|
|
},
|
|
grid: {
|
|
top: "20%",
|
|
left: "3%",
|
|
right: "15%",
|
|
bottom: "-0%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "value",
|
|
name: t('messages.Production_yuan'),
|
|
show:false,
|
|
splitLine:{
|
|
show:false
|
|
}
|
|
},
|
|
{
|
|
type: "value",
|
|
name: t('messages.powerhi_du'),
|
|
splitLine:{
|
|
show:false
|
|
}
|
|
// show:false
|
|
},
|
|
],
|
|
yAxis: {
|
|
type: "category",
|
|
data: name,
|
|
},
|
|
series: series,
|
|
};
|
|
|
|
echartsData2.power!.div = power.value;
|
|
echartsData2.power!.title ='';
|
|
echartsData2.power!.data = {
|
|
title: {
|
|
text: '',
|
|
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",
|
|
// top: "5%",
|
|
// // itemStyle:{
|
|
// // data:yue
|
|
// // },
|
|
// },
|
|
grid: {
|
|
top: "-35%",
|
|
left: "3%",
|
|
right: "15%",
|
|
bottom: "20%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "value",
|
|
name: t('messages.Production_yuan'),
|
|
splitLine:{
|
|
show:false
|
|
},
|
|
max:10000000
|
|
// show:false
|
|
},
|
|
{
|
|
type: "value",
|
|
name: t('messages.powerhi_du'),
|
|
splitLine:{
|
|
show:false
|
|
},
|
|
show:false
|
|
},
|
|
],
|
|
yAxis: {
|
|
type: "category",
|
|
data: name2,
|
|
},
|
|
series: series2,
|
|
};
|
|
change(echartsData.power, value);
|
|
change(echartsData2.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].type;
|
|
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]);
|
|
}
|
|
}
|
|
if(stack=='生产额'){
|
|
stack=t('messages.Production')
|
|
}else if(stack=='用电量'){
|
|
stack=t('messages.powerTip')
|
|
}
|
|
|
|
return datavalue ? stack + ":" + datavalue.toLocaleString() : null;
|
|
}
|
|
function getSum2(params) {
|
|
let stack = value.listData[1].type;
|
|
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]);
|
|
}
|
|
}
|
|
if(stack=='生产额'){
|
|
stack=t('messages.Production')
|
|
}else if(stack=='用电量'){
|
|
stack=t('messages.powerTip')
|
|
}
|
|
|
|
return datavalue ? stack + ":" + datavalue.toLocaleString() : 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].type;
|
|
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]);
|
|
}
|
|
}
|
|
}
|
|
if(stack=='生产额'){
|
|
stack=t('messages.Production')
|
|
}else if(stack=='用电量'){
|
|
stack=t('messages.powerTip')
|
|
}
|
|
|
|
return datavalue ? stack + ":" + datavalue.toLocaleString() : null;
|
|
}
|
|
//重新计算今年年数据
|
|
function getSum2(params) {
|
|
let stack = value.listData[1].type;
|
|
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]);
|
|
}
|
|
}
|
|
}
|
|
if(stack=='生产额'){
|
|
stack=t('messages.Production')
|
|
}else if(stack=='用电量'){
|
|
stack=t('messages.powerTip')
|
|
}
|
|
|
|
return datavalue ? stack + ":" + datavalue.toLocaleString() + "" : 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].type;
|
|
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]);
|
|
}
|
|
}
|
|
if(stack=='生产额'){
|
|
stack=t('messages.Production')
|
|
}else if(stack=='用电量'){
|
|
stack=t('messages.powerTip')
|
|
}
|
|
|
|
return datavalue ? stack + ":" + datavalue.toLocaleString() : null;
|
|
}
|
|
function getSum2(params) {
|
|
let stack = value.listData[1].type;
|
|
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]);
|
|
}
|
|
}
|
|
if(stack=='生产额'){
|
|
stack=t('messages.Production')
|
|
}else if(stack=='用电量'){
|
|
stack=t('messages.powerTip')
|
|
}
|
|
|
|
return datavalue ? stack + ":" + datavalue.toLocaleString() : 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/20*5 + "px";
|
|
power.value.style.width = width + "px";
|
|
|
|
powerjixie.value.style.height = height/20*15 + "px";
|
|
powerjixie.value.style.width = width + "px";
|
|
refborder4.value.resetWH();
|
|
if (echartsData.power.box) {
|
|
echartsData.power.box.resize();
|
|
echartsData2.power.box.resize();
|
|
}
|
|
}
|
|
onMounted(() => {});
|
|
|
|
// return{setchartWH}
|
|
defineExpose({
|
|
setchartWH,
|
|
setData,
|
|
});
|
|
</script>
|
|
|
|
<style scoped></style>
|