1494 lines
38 KiB
Vue
1494 lines
38 KiB
Vue
<script setup>
|
||
import { ref, onMounted, onUnmounted, nextTick } from "vue";
|
||
import * as echarts from "echarts";
|
||
import {
|
||
getTotalEnergy,
|
||
getEnergyIndexing,
|
||
getEnergyFlow,
|
||
getSystemEnergy,
|
||
getMultiRate,
|
||
getElectricityRate,
|
||
} from "@/api/energyEfficiency";
|
||
import moment from "moment";
|
||
// import { formatter } from "element-plus";
|
||
|
||
// 各系统能耗概况
|
||
const systemTab = [
|
||
{ name: "空调" },
|
||
{ name: "照明" },
|
||
{ name: "展陈" },
|
||
{ name: "消防" },
|
||
{ name: "电梯" },
|
||
];
|
||
const systemTabIndex = ref(0);
|
||
const systemTabName = ref("空调");
|
||
const systemLeftList = ref([
|
||
{
|
||
name: "今日用能峰值",
|
||
value: "322",
|
||
},
|
||
{
|
||
name: "本月用能峰值",
|
||
value: "35422",
|
||
},
|
||
]);
|
||
const systemRightList = ref([
|
||
[
|
||
{
|
||
name: "今日",
|
||
value: "3122",
|
||
unit: "kgce",
|
||
},
|
||
{
|
||
name: "昨日",
|
||
value: "9400",
|
||
unit: "kgce",
|
||
},
|
||
{
|
||
name: "同比",
|
||
value: "-201",
|
||
unit: "%",
|
||
},
|
||
], //日
|
||
[
|
||
{
|
||
name: "本月",
|
||
value: "3122",
|
||
unit: "kgce",
|
||
},
|
||
{
|
||
name: "上月",
|
||
value: "9400",
|
||
unit: "kgce",
|
||
},
|
||
{
|
||
name: "同比",
|
||
value: "-201",
|
||
unit: "%",
|
||
},
|
||
], //月
|
||
[
|
||
{
|
||
name: "今年",
|
||
value: "3122",
|
||
unit: "kgce",
|
||
},
|
||
{
|
||
name: "去年",
|
||
value: "9400",
|
||
unit: "kgce",
|
||
},
|
||
{
|
||
name: "同比",
|
||
value: "-201",
|
||
unit: "%",
|
||
},
|
||
], //年
|
||
]);
|
||
|
||
// 能耗总量时间点击事件
|
||
const totalEnergyDate = ref("month");
|
||
const toggleTotalEnergy = (event) => {
|
||
totalEnergyDate.value = event.srcElement.className;
|
||
totalEnergyInterface();
|
||
};
|
||
// 能效对标时间点击时间
|
||
const managementDate = ref("month");
|
||
|
||
const toggleManagement = (event) => {
|
||
managementDate.value = event.srcElement.className;
|
||
energyIndexingInterface();
|
||
};
|
||
// 复费率的时间点击事件
|
||
const exhibitionLoadDate = ref("month");
|
||
const toggleExhibitionLoad = (event) => {
|
||
exhibitionLoadDate.value = event.srcElement.className;
|
||
};
|
||
const selectSystemTab = (item, index) => {
|
||
systemTabIndex.value = index;
|
||
systemTabName.value = item.name;
|
||
systemEnergyInterface();
|
||
};
|
||
|
||
// 能耗总量echarts
|
||
const drawTotalChart = (data) => {
|
||
let dom = document.getElementById("totalEnergy");
|
||
dom.removeAttribute("_echarts_instance_");
|
||
let myChart;
|
||
myChart = echarts.init(dom);
|
||
|
||
const option = {
|
||
// backgroundColor: "#05224d",
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: "#57617B",
|
||
},
|
||
},
|
||
},
|
||
grid: {
|
||
top: "18%",
|
||
left: "4%",
|
||
right: "4%",
|
||
bottom: "4%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
axisLine: {
|
||
//坐标轴轴线相关设置。数学上的x轴
|
||
show: true,
|
||
lineStyle: {
|
||
// type:'dashed',
|
||
color: "#557775",
|
||
// color: "#233e64",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
//坐标轴刻度标签的相关设置
|
||
textStyle: {
|
||
color: "#DDFFFD",
|
||
// margin: 40,
|
||
},
|
||
},
|
||
|
||
axisTick: { show: false },
|
||
boundaryGap: true,
|
||
// data: [
|
||
// "11-01",
|
||
// "11-02",
|
||
// "11-03",
|
||
// "11-04",
|
||
// "11-05",
|
||
// "11-07",
|
||
// "11-08",
|
||
// "11-09",
|
||
// "11-10",
|
||
// "11-11",
|
||
// "11-12",
|
||
// "11-13",
|
||
// "11-14",
|
||
// ],
|
||
data: data.map((el) => {
|
||
return el.time;
|
||
}),
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
name: "单位:kgce",
|
||
// padding:[0,10,0,0],
|
||
nameTextStyle: {
|
||
color: "#DDFFFD",
|
||
align: "center",
|
||
padding: [0, 15, 0, 0],
|
||
},
|
||
// min: 0,
|
||
// max: 500,
|
||
splitNumber: 5,
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "rgba(255, 255, 255, 0.30)",
|
||
},
|
||
},
|
||
axisLine: { show: false },
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#DDFFFD",
|
||
},
|
||
// 使用formatter格式化y轴的标签
|
||
formatter: function (value) {
|
||
// 如果数值大于1000，则以千位分隔
|
||
if (value >= 1000) {
|
||
return value / 10000 + "万";
|
||
} else if (value >= 10000000) {
|
||
return value / 100000000 + "亿";
|
||
} else {
|
||
return value;
|
||
}
|
||
},
|
||
},
|
||
axisTick: { show: false },
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "能耗总量",
|
||
type: "line",
|
||
smooth: true, //是否平滑曲线显示
|
||
symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
|
||
// symbolSize: 0,
|
||
itemStyle: {
|
||
color: "rgba(1, 246, 139, 1)",
|
||
},
|
||
lineStyle: {
|
||
color: "rgba(1, 246, 139, 1)", // 线条颜色
|
||
},
|
||
areaStyle: {
|
||
//区域填充样式
|
||
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{ offset: 0, color: "rgba(1, 246, 139, 0.7)" },
|
||
{ offset: 1, color: "rgba(1, 246, 139, 0)" },
|
||
],
|
||
false
|
||
),
|
||
|
||
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
|
||
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||
},
|
||
// data: [100, 200, 300, 282, 283, 166, 100, 200, 300, 282, 283, 166, 283],
|
||
data: data.map((el) => {
|
||
return el.EH;
|
||
}),
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
// 添加 resize 事件处理程序
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||
});
|
||
};
|
||
// 定额管理charts
|
||
const drawManagement = (data) => {
|
||
let dom = document.getElementById("management");
|
||
dom.removeAttribute("_echarts_instance_");
|
||
let myChart;
|
||
myChart = echarts.init(dom);
|
||
// let myChart = echarts.init(document.getElementById("management"));
|
||
let yData = data.map((el) => {
|
||
return el.EnergyIndexing;
|
||
});
|
||
console.log(Math.max(...yData) / 2);
|
||
const option = {
|
||
// backgroundColor: "#05224d",
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: "#57617B",
|
||
},
|
||
},
|
||
},
|
||
legend: {
|
||
show: true,
|
||
icon: "rect",
|
||
right: "12",
|
||
top: "12",
|
||
layout: "vertical",
|
||
itemHeight: "12",
|
||
// itemWidth:"18",
|
||
// itemGap: "80",
|
||
formatter: ["{a|{name}}"].join("\n"),
|
||
// itemWidth:'10',
|
||
textStyle: {
|
||
color: "rgba(221, 255, 253, 1)",
|
||
rich: {
|
||
a: {
|
||
padding: [2, 0, 0, 0],
|
||
// verticalAlign: 'bottom',
|
||
},
|
||
},
|
||
},
|
||
},
|
||
grid: {
|
||
top: "18%",
|
||
left: "4%",
|
||
right: "4%",
|
||
bottom: "4%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
axisLine: {
|
||
//坐标轴轴线相关设置。数学上的x轴
|
||
show: true,
|
||
lineStyle: {
|
||
// type:'dashed',
|
||
color: "#557775",
|
||
// color: "#233e64",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
//坐标轴刻度标签的相关设置
|
||
textStyle: {
|
||
color: "#DDFFFD",
|
||
margin: 40,
|
||
},
|
||
formatter: function (value) {
|
||
// 如果数值大于1000，则以千位分隔
|
||
if (value >= 1000) {
|
||
return value / 10000 + "万";
|
||
} else if (value >= 10000000) {
|
||
return value / 100000000 + "亿";
|
||
} else {
|
||
return value;
|
||
}
|
||
},
|
||
},
|
||
|
||
axisTick: { show: false },
|
||
boundaryGap: true,
|
||
// data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
||
data: data.map((el) => {
|
||
return el.time;
|
||
}),
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
name: "单位:kgce/m²",
|
||
|
||
nameTextStyle: {
|
||
color: "#DDFFFD",
|
||
align: "middle",
|
||
padding: [0, -15, 0, 0],
|
||
},
|
||
// min: 0,
|
||
// max: 18,
|
||
splitNumber: 6,
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "rgba(255, 255, 255, 0.30)",
|
||
},
|
||
},
|
||
axisLine: { show: false },
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#DDFFFD",
|
||
},
|
||
formatter: function (params) {
|
||
console.log(params,'定额');
|
||
if(params === (Math.max(...yData) / 2)){
|
||
return '{a|'+params+'}'
|
||
}else{
|
||
return params
|
||
}
|
||
},
|
||
rich:{
|
||
a:{
|
||
color:'rgba(255, 221, 0, 1)'
|
||
}
|
||
}
|
||
},
|
||
axisTick: { show: false },
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "单位建筑面积综合能耗",
|
||
markLine: {
|
||
//阈值
|
||
//最大值和最小值
|
||
data: [
|
||
{
|
||
yAxis: Math.max(...yData) / 2,
|
||
label: {
|
||
show: false,
|
||
},
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
lineStyle: {
|
||
width: 1,
|
||
color: "rgba(255, 221, 0, 1)",
|
||
// symbol:"none",
|
||
},
|
||
},
|
||
],
|
||
symbol: ["none", "none"],
|
||
},
|
||
type: "line",
|
||
smooth: true, //是否平滑曲线显示
|
||
symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
|
||
// symbolSize: 0,
|
||
itemStyle: {
|
||
color: "rgba(221, 255, 253, 1)",
|
||
},
|
||
|
||
lineStyle: {
|
||
color: "rgba(221, 255, 253, 1)", // 线条颜色
|
||
},
|
||
areaStyle: {
|
||
//区域填充样式
|
||
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{ offset: 0, color: "rgba(221, 255, 253, .7)" },
|
||
{ offset: 1, color: "rgba(221, 255, 253, 0)" },
|
||
],
|
||
false
|
||
),
|
||
|
||
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
|
||
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||
},
|
||
// data: [5, 7, 9, 6, 2, 5, 4],
|
||
data: yData,
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
// 添加 resize 事件处理程序
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||
});
|
||
};
|
||
// 能效流向
|
||
const drawEnergyFlow = (params) => {
|
||
let dom = document.getElementById("energyFlow");
|
||
dom.removeAttribute("_echarts_instance_");
|
||
let myChart;
|
||
myChart = echarts.init(dom);
|
||
// let myChart = echarts.init(document.getElementById("energyFlow"));
|
||
let sourceData = [
|
||
{
|
||
name: "能耗",
|
||
nameValue: params[0].Amont,
|
||
valueUnit: "kgce",
|
||
},
|
||
{
|
||
name: "空调",
|
||
nameValue: params[0].data[0].AirConditioner,
|
||
valueUnit: "kgce",
|
||
},
|
||
{
|
||
name: "照明",
|
||
nameValue: params[0].data[0].Illumination,
|
||
valueUnit: "kgce",
|
||
},
|
||
{
|
||
name: "电梯",
|
||
nameValue: params[0].data[0].Elevator,
|
||
valueUnit: "kgce",
|
||
},
|
||
];
|
||
let sangjiColor = [
|
||
"rgba(91, 250, 241, 1)",
|
||
"rgba(91, 250, 241, 1)",
|
||
"rgba(91, 250, 241, 1)",
|
||
"rgba(91, 250, 241, 1)",
|
||
];
|
||
let itemStyleSource = [];
|
||
for (let d = 0; d < sourceData.length; d++) {
|
||
if (sourceData[d].name === "能耗") {
|
||
sourceData[d].label = {
|
||
position: "right",
|
||
};
|
||
}
|
||
sourceData[d].itemStyle = {
|
||
color: sangjiColor[d],
|
||
};
|
||
itemStyleSource.push(sourceData[d]);
|
||
}
|
||
|
||
let option = {
|
||
series: [
|
||
{
|
||
// select:{
|
||
// disabled:true
|
||
// },
|
||
type: "sankey",
|
||
layout: "none",
|
||
top: "5%",
|
||
bottom: "4%",
|
||
left: "6%",
|
||
right: "5%",
|
||
nodeAlign: "right",
|
||
nodeWidth: "13",
|
||
// nodeAlign:'right',
|
||
focusNodeAdjacency: "allEdges",
|
||
data: itemStyleSource,
|
||
links: [
|
||
{
|
||
source: "能耗",
|
||
target: "空调",
|
||
value: 8,
|
||
},
|
||
{
|
||
source: "能耗",
|
||
target: "照明",
|
||
value: 8,
|
||
},
|
||
{
|
||
source: "能耗",
|
||
target: "电梯",
|
||
value: 8,
|
||
},
|
||
],
|
||
label: {
|
||
position: "left",
|
||
color: "#fff",
|
||
fontSize: 14,
|
||
formatter: function (params) {
|
||
if (params.dataIndex === 0) {
|
||
return (
|
||
"{a|" +
|
||
params.data.name +
|
||
"}\n" +
|
||
"{b|" +
|
||
params.data.nameValue +
|
||
"}" +
|
||
" " +
|
||
params.data.valueUnit
|
||
);
|
||
} else {
|
||
return (
|
||
"{name|" +
|
||
params.data.name +
|
||
"}" +
|
||
"{value|" +
|
||
params.data.nameValue +
|
||
"}" +
|
||
// " " +
|
||
params.data.valueUnit
|
||
);
|
||
}
|
||
},
|
||
rich: {
|
||
a: {
|
||
padding: [0, 15, 10, 0],
|
||
fontSize: "14",
|
||
},
|
||
b: {
|
||
color: "rgba(91, 250, 241, 1)",
|
||
fontWeight: "600",
|
||
fontSize: "16",
|
||
},
|
||
name: {
|
||
fontSize: 14,
|
||
// padding: [10, 0, 0, 0],
|
||
},
|
||
value: {
|
||
color: "rgba(91, 250, 241, 1)",
|
||
fontWeight: "600",
|
||
fontSize: "16",
|
||
padding: [0, 10, 0, 10],
|
||
},
|
||
},
|
||
},
|
||
lineStyle: {
|
||
color: "source",
|
||
// curveness: 0.5,
|
||
},
|
||
itemStyle: {
|
||
borderWidth: 1,
|
||
borderColor: "transparent",
|
||
},
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
// 添加 resize 事件处理程序
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||
});
|
||
};
|
||
//复费率
|
||
function getExhibitionLoad(data) {
|
||
let dom = document.getElementById("exhibitionLoad");
|
||
dom.removeAttribute("_echarts_instance_");
|
||
let myChart;
|
||
myChart = echarts.init(dom);
|
||
// let myChart = echarts.init(document.getElementById("exhibitionLoad"));
|
||
var option = {
|
||
tooltip: {
|
||
axisPointer: {
|
||
type: "shadow",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
},
|
||
grid: {
|
||
borderWidth: 0,
|
||
top: 40,
|
||
bottom: 40,
|
||
left: 50,
|
||
right: 20,
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
legend: {
|
||
icon: "rect",
|
||
right: "4%",
|
||
top: "3%",
|
||
itemWidth: 20, // 标签宽度为20px
|
||
itemHeight: 10, // 标签高度为10px
|
||
textStyle: {
|
||
color: "#ffffff",
|
||
},
|
||
data: ["尖", "峰", "平", "谷", "深"],
|
||
},
|
||
calculable: true,
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
trigger: "axis",
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
// type:'dashed',
|
||
color: "#557775",
|
||
// color: "#233e64",
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitArea: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#DDFFFD",
|
||
margin: 40,
|
||
},
|
||
},
|
||
// data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
||
data: data.map((el) => {
|
||
return el.time;
|
||
}),
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
name: "单位:kWh",
|
||
nameTextStyle: {
|
||
color: "#DDFFFD",
|
||
// align:"right",
|
||
padding: [0, 30, 0, 0],
|
||
},
|
||
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "rgba(255,255,255, 0.30)",
|
||
},
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#DDFFFD",
|
||
},
|
||
formatter: function (value) {
|
||
// 如果数值大于1000，则以千位分隔
|
||
if (value >= 1000) {
|
||
return value / 10000 + "万";
|
||
} else if (value >= 10000000) {
|
||
return value / 100000000 + "亿";
|
||
} else {
|
||
return value;
|
||
}
|
||
},
|
||
},
|
||
splitArea: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "尖",
|
||
type: "bar",
|
||
stack: "Total1",
|
||
barMaxWidth: 15,
|
||
barGap: "10%",
|
||
label: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(255, 165, 29, 1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(255, 165, 29, 0)",
|
||
},
|
||
]),
|
||
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(255, 165, 29, 1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(255, 165, 29, 0)",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
data: data.map((el) => {
|
||
return el.Needle;
|
||
}),
|
||
},
|
||
{
|
||
name: "峰",
|
||
type: "bar",
|
||
barMaxWidth: 15,
|
||
stack: "Total1",
|
||
label: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(80, 194, 255, 1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(80, 194, 255, 0)",
|
||
},
|
||
]),
|
||
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(80, 194, 255, 1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(80, 194, 255, 0)",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
data: data.map((el) => {
|
||
return el.Peak;
|
||
}),
|
||
},
|
||
{
|
||
name: "平",
|
||
type: "bar",
|
||
barMaxWidth: 15,
|
||
stack: "Total1",
|
||
label: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(255, 221, 0, 1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(255, 221, 0, 0)",
|
||
},
|
||
]),
|
||
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(255, 221, 0, 1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(255, 221, 0, 0)",
|
||
},
|
||
]),
|
||
barBorderRadius: 0,
|
||
},
|
||
},
|
||
data: data.map((el) => {
|
||
return el.Flat;
|
||
}),
|
||
},
|
||
{
|
||
name: "谷",
|
||
type: "bar",
|
||
barMaxWidth: 15,
|
||
stack: "Total1",
|
||
label: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(1, 246, 139, 1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(1, 246, 139, 0)",
|
||
},
|
||
]),
|
||
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(1, 246, 139, 1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(1, 246, 139, 0)",
|
||
},
|
||
]),
|
||
barBorderRadius: 0,
|
||
},
|
||
},
|
||
data: data.map((el) => {
|
||
return el.Grain;
|
||
}),
|
||
},
|
||
{
|
||
name: "深",
|
||
type: "bar",
|
||
barMaxWidth: 15,
|
||
stack: "Total1",
|
||
label: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(91, 250, 241, 1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(91, 250, 241, 0)",
|
||
},
|
||
]),
|
||
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(91, 250, 241, 1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(91, 250, 241, 0)",
|
||
},
|
||
]),
|
||
barBorderRadius: 0,
|
||
},
|
||
},
|
||
data: data.map((el) => {
|
||
return el.Deep;
|
||
}),
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
// 添加 resize 事件处理程序
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||
});
|
||
}
|
||
|
||
// 电费电价
|
||
const drawElectricityPrice = (data) => {
|
||
let dom = document.getElementById("electricity-price");
|
||
dom.removeAttribute("_echarts_instance_");
|
||
let myChart;
|
||
myChart = echarts.init(dom);
|
||
// let myChart = echarts.init(document.getElementById("electricity-price"));
|
||
let option = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
backgroundColor: "rgba(1, 13, 19, 0.5)",
|
||
borderWidth: 0,
|
||
axisPointer: {
|
||
// 坐标轴指示器，坐标轴触发有效
|
||
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||
},
|
||
textStyle: {
|
||
color: "rgba(212, 232, 254, 1)",
|
||
// fontSize: fontChart(0.24),
|
||
},
|
||
confine: true,
|
||
},
|
||
legend: {
|
||
show: true,
|
||
data: ["电费", "销售电价"],
|
||
selected: {
|
||
电费: true,
|
||
销售电价: true,
|
||
},
|
||
icon: "rect",
|
||
itemGap: 14,
|
||
top: "8",
|
||
layout: "vertical",
|
||
itemHeight: "10",
|
||
// itemWidth:'10',
|
||
textStyle: {
|
||
color: "rgba(221, 255, 253, 1)",
|
||
},
|
||
},
|
||
grid: {
|
||
top: "20%",
|
||
left: "4%",
|
||
right: "4%",
|
||
bottom: "4%",
|
||
containLabel: true,
|
||
},
|
||
|
||
xAxis: {
|
||
type: "category",
|
||
data: data.map((el) => {
|
||
return el.time;
|
||
}),
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#557775",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
// interval: 0,
|
||
// rotate: 40,
|
||
|
||
show: true,
|
||
textStyle: {
|
||
fontFamily: "Microsoft YaHei",
|
||
color: "#DDFFFD",
|
||
},
|
||
},
|
||
},
|
||
|
||
yAxis: [
|
||
{
|
||
name: "单位:kWh",
|
||
nameTextStyle: {
|
||
color: "rgba(221, 255, 253, 1)",
|
||
padding: [0, 20, 0, 10],
|
||
},
|
||
// 表现为上下位置
|
||
type: "value",
|
||
// max: "50",
|
||
splitNumber: 5,
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: "#666666",
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
fontFamily: "Microsoft YaHei",
|
||
color: "#DDFFFD",
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
splitNumber: 5,
|
||
name: "单位:元/kWh",
|
||
position: "right", // 放在右边
|
||
nameTextStyle: {
|
||
padding: [0, 15, 0, 0],
|
||
color: "rgba(221, 255, 253, 1)",
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
// fontSize: 18,
|
||
color: "rgba(221, 255, 253, 1)",
|
||
formatter: function (value) {
|
||
// 在标签后面添加百分号
|
||
return value.toFixed(1);
|
||
},
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "rgba(1, 39, 37, 0.30)",
|
||
|
||
// color: '#eff6ff'
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "电费",
|
||
type: "bar",
|
||
barWidth: "15",
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(82, 217, 208, 1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(82, 217, 208, 0)",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
data: data.map((el) => {
|
||
return el.Electricity;
|
||
}),
|
||
},
|
||
{
|
||
name: "销售电价",
|
||
type: "line",
|
||
yAxisIndex: 1, // 与第二个 y 轴关联
|
||
itemStyle: {
|
||
color: "rgba(1, 246, 139, 1)", // 设置折线颜色为黄色
|
||
},
|
||
symbol: "none",
|
||
data: data.map((el) => {
|
||
return el.Electrovalence;
|
||
}), // 折线图的数据
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
// 添加 resize 事件处理程序
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||
});
|
||
};
|
||
|
||
// 时间选择器参数
|
||
const dateValue = ref([
|
||
moment().subtract(1, "days").format("YYYY-MM-DD"),
|
||
moment().format("YYYY-MM-DD"),
|
||
]);
|
||
// 默认时间
|
||
const defaultTime = ref([
|
||
moment().subtract(1, "days").format("YYYY-MM-DD"),
|
||
moment().format("YYYY-MM-DD"),
|
||
]);
|
||
|
||
// 获取能耗总量数据
|
||
const totalEnergyInterface = () => {
|
||
let params = {
|
||
date: totalEnergyDate.value === "month" ? "月" : "日",
|
||
};
|
||
getTotalEnergy(params).then((res) => {
|
||
drawTotalChart(res.data.slice(-10));
|
||
});
|
||
};
|
||
// 获取能效对标数据
|
||
const energyIndexingInterface = () => {
|
||
let params = {
|
||
date: managementDate.value === "month" ? "月" : "年",
|
||
};
|
||
getEnergyIndexing(params).then((res) => {
|
||
drawManagement(res.data.slice(-10));
|
||
});
|
||
};
|
||
// 获取各系统能耗数据
|
||
const systemEnergyInterface = () => {
|
||
let params = {
|
||
name: systemTabName.value,
|
||
};
|
||
getSystemEnergy(params).then((res) => {
|
||
systemLeftList.value[0].value = res.data[0].DayPeak;
|
||
systemLeftList.value[1].value = res.data[0].MonthPeak;
|
||
systemRightList.value.forEach((el, i) => {
|
||
if (res.data[0].data[i].This > 10000) {
|
||
el[0].value = (res.data[0].data[i].This / 10000).toFixed(3);
|
||
el[0].unit = "万" + el[0].unit;
|
||
} else {
|
||
el[0].value = res.data[0].data[i].This;
|
||
}
|
||
if (res.data[0].data[i].Last > 10000) {
|
||
el[1].value = (res.data[0].data[i].Last / 10000).toFixed(3);
|
||
el[1].unit = "万" + el[1].unit;
|
||
} else {
|
||
el[1].value = res.data[0].data[i].Last;
|
||
}
|
||
|
||
el[2].value = res.data[0].data[i].Year;
|
||
});
|
||
});
|
||
};
|
||
// 获取复费率数据
|
||
const multiRateInterface = () => {
|
||
let params = {
|
||
date: "",
|
||
};
|
||
if (exhibitionLoadDate.value === "year") {
|
||
params.date = "年";
|
||
} else if (exhibitionLoadDate.value === "month") {
|
||
params.date = "月";
|
||
} else if (exhibitionLoadDate.value === "day") {
|
||
params.date = "日";
|
||
}
|
||
getMultiRate(params).then((res) => {
|
||
getExhibitionLoad(res.data.slice(-10));
|
||
});
|
||
};
|
||
// 获取电费电价数据
|
||
const electricityRateInterface = () => {
|
||
getElectricityRate().then((res) => {
|
||
drawElectricityPrice(res.data.slice(-10));
|
||
});
|
||
};
|
||
//事件选择
|
||
function handBlur(value) {
|
||
defaultTime.value[0] = moment(value[0]).format("YYYY-MM-DD");
|
||
defaultTime.value[1] = moment(value[1]).format("YYYY-MM-DD");
|
||
energyFlow();
|
||
}
|
||
//能效流向
|
||
function energyFlow() {
|
||
let date = {
|
||
sdate: defaultTime.value[0],
|
||
edate: defaultTime.value[1],
|
||
};
|
||
getEnergyFlow(date)
|
||
.then((res) => {
|
||
if (res.code == 200) {
|
||
drawEnergyFlow(res.data);
|
||
} else {
|
||
return flase;
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.log(err);
|
||
});
|
||
}
|
||
// dom加载ie
|
||
onMounted(() => {
|
||
// 能耗总量
|
||
totalEnergyInterface();
|
||
// 定额管理
|
||
energyIndexingInterface();
|
||
// 能效流向
|
||
energyFlow();
|
||
// 各系统能耗概况
|
||
systemEnergyInterface();
|
||
// 电费电价
|
||
electricityRateInterface();
|
||
//复费率
|
||
multiRateInterface();
|
||
// getExhibitionLoad();
|
||
});
|
||
onUnmounted(() => {});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="page m100">
|
||
<div class="page-left-box">
|
||
<!-- 能耗总量-->
|
||
<div class="title">
|
||
<span>能耗总量</span>
|
||
<p>
|
||
<span
|
||
class="month"
|
||
:class="totalEnergyDate === 'month' ? 'selectMonth' : ''"
|
||
@click="toggleTotalEnergy"
|
||
>月</span
|
||
>
|
||
<span
|
||
class="day"
|
||
:class="totalEnergyDate === 'day' ? 'selectDay' : ''"
|
||
@click="toggleTotalEnergy"
|
||
>日</span
|
||
>
|
||
</p>
|
||
</div>
|
||
<div id="totalEnergy" class="margin10 box-bg"></div>
|
||
<!-- 能效对标（定额管理）-->
|
||
<div class="title margin10">
|
||
<span>能效对标（定额管理）</span>
|
||
<p>
|
||
<span
|
||
class="year"
|
||
:class="managementDate === 'year' ? 'selectYear' : ''"
|
||
@click="toggleManagement"
|
||
>年</span
|
||
>
|
||
<span
|
||
class="month"
|
||
:class="managementDate === 'month' ? 'selectMonth' : ''"
|
||
@click="toggleManagement"
|
||
>月</span
|
||
>
|
||
</p>
|
||
</div>
|
||
<div id="management" class="margin10 box-bg"></div>
|
||
<!-- 能效流向 -->
|
||
<div class="title margin10">
|
||
<span>能效流向</span>
|
||
</div>
|
||
<div class="margin10 box-bg flow">
|
||
<div class="date-picker">
|
||
<span style="font-size: 0.875rem">选择日期：</span>
|
||
<el-date-picker
|
||
v-model="dateValue"
|
||
type="daterange"
|
||
start-placeholder="开始时间"
|
||
end-placeholder="结束时间"
|
||
:default-time="defaultTime"
|
||
@change="handBlur"
|
||
/>
|
||
</div>
|
||
<div id="energyFlow"></div>
|
||
</div>
|
||
</div>
|
||
<div class="page-right-box">
|
||
<!-- 各系统能耗概况 -->
|
||
<div class="title">
|
||
<span>各系统能耗概况</span>
|
||
</div>
|
||
<div id="airConditioningLoad" class="margin10 box-bg">
|
||
<ul class="system-tab">
|
||
<li
|
||
v-for="(item, index) in systemTab"
|
||
:class="index === systemTabIndex ? 'tab-select' : ''"
|
||
@click="selectSystemTab(item, index)"
|
||
>
|
||
<span>{{ item.name }}</span>
|
||
</li>
|
||
</ul>
|
||
<div class="system-content">
|
||
<div class="system-content-left">
|
||
<div
|
||
v-for="(item, index) in systemLeftList"
|
||
class="system-content-left-item"
|
||
>
|
||
<p class="system-content-left-item-p1">{{ item.name }}</p>
|
||
<p class="system-content-left-item-p2">
|
||
{{
|
||
item.value > 10000
|
||
? (item.value / 10000).toFixed(3)
|
||
: item.value > 100000000
|
||
? (item.value / 100000000).toFixed(3)
|
||
: item.value
|
||
}}
|
||
<span style="color: rgb(221, 255, 253)">{{
|
||
item.value > 10000 ? "万" : item.value > 100000000 ? "亿" : ""
|
||
}}</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="system-content-right">
|
||
<div
|
||
v-for="(item, index) in systemRightList"
|
||
class="system-content-right-item"
|
||
>
|
||
<ul class="system-content-right-item-title">
|
||
<li v-for="(s, i) in item">{{ s.name }}</li>
|
||
</ul>
|
||
<div class="system-content-right-item-box">
|
||
<span v-for="v in item" :class="v.unit === '%' ? 'yoy' : ''"
|
||
>{{ v.value }} <span class="unit">{{ v.unit }}</span></span
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 复费率-->
|
||
<div class="title margin10">
|
||
<span>复费率</span>
|
||
<p>
|
||
<span
|
||
class="year"
|
||
:class="exhibitionLoadDate === 'year' ? 'selectYear' : ''"
|
||
@click="toggleExhibitionLoad"
|
||
>年</span
|
||
>
|
||
<span
|
||
class="month"
|
||
:class="exhibitionLoadDate === 'month' ? 'selectMonth' : ''"
|
||
@click="toggleExhibitionLoad"
|
||
>月</span
|
||
>
|
||
<span
|
||
class="day"
|
||
:class="exhibitionLoadDate === 'day' ? 'selectDay' : ''"
|
||
@click="toggleExhibitionLoad"
|
||
>日</span
|
||
>
|
||
</p>
|
||
</div>
|
||
<div id="exhibitionLoad" class="margin10 box-bg"></div>
|
||
<!-- 电费电价-->
|
||
<div class="title margin10">
|
||
<span>电费电价</span>
|
||
</div>
|
||
<div id="electricity-price" class="margin10 box-bg"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
#energyFlow {
|
||
width: 100%;
|
||
height: 82.4%;
|
||
}
|
||
.flow {
|
||
padding-top: 0.5rem;
|
||
}
|
||
.date-picker {
|
||
padding-left: 0.75rem;
|
||
display: flex;
|
||
align-items: center;
|
||
:deep(.el-input__wrapper) {
|
||
background-image: url("@/assets/images/picker.png");
|
||
background-size: 100% 100%;
|
||
box-shadow: none !important;
|
||
width: 20rem !important;
|
||
height: 1.7rem;
|
||
flex-grow: unset;
|
||
box-sizing: border-box !important;
|
||
border: none !important;
|
||
background-color: transparent !important;
|
||
}
|
||
:deep(.el-icon) {
|
||
display: none;
|
||
}
|
||
:deep(.el-range-input) {
|
||
color: rgba(221, 255, 253, 1) !important;
|
||
}
|
||
}
|
||
.system-tab {
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
padding-top: 0.7rem;
|
||
box-sizing: border-box;
|
||
|
||
.tab-select {
|
||
background-image: url("@/assets/images/air-tab-select.png");
|
||
}
|
||
|
||
li {
|
||
background-image: url("@/assets/images/air-tab.png");
|
||
cursor: pointer;
|
||
color: rgba(221, 255, 253, 1);
|
||
background-size: 100% 100%;
|
||
font-size: 0.8rem;
|
||
padding: 0.2rem 1.1rem;
|
||
}
|
||
}
|
||
|
||
.system-content {
|
||
height: 83%;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
|
||
&-left {
|
||
width: 6.875rem;
|
||
height: 100%;
|
||
display: flex;
|
||
align-content: space-evenly;
|
||
flex-wrap: wrap;
|
||
|
||
&-item {
|
||
height: 40%;
|
||
width: 100%;
|
||
background-image: url("@/assets/images/system-value-bg.png");
|
||
background-size: 100% 100%;
|
||
|
||
&-p1 {
|
||
height: 29%;
|
||
line-height: 25px;
|
||
text-align: center;
|
||
font-size: 0.875rem;
|
||
color: rgba(221, 255, 253, 1);
|
||
}
|
||
|
||
&-p2 {
|
||
height: 70%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-weight: 600;
|
||
font-size: 20px;
|
||
color: rgba(91, 250, 241, 1);
|
||
}
|
||
}
|
||
}
|
||
|
||
&-right {
|
||
width: 15.7rem;
|
||
height: 100%;
|
||
//background-color: #fff;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-content: space-evenly;
|
||
|
||
&-item {
|
||
height: 30%;
|
||
//background-color: #000;
|
||
width: 100%;
|
||
|
||
&-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 0.8rem;
|
||
padding: 0 0.5rem;
|
||
box-sizing: border-box;
|
||
}
|
||
&-box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 0.5rem;
|
||
box-sizing: border-box;
|
||
font-weight: bold;
|
||
background-image: url("@/assets/images/system-box.png");
|
||
background-size: 100% 100%;
|
||
height: 65%;
|
||
width: 100%;
|
||
color: rgba(255, 255, 255, 1);
|
||
.yoy {
|
||
color: rgba(1, 246, 139, 1);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
//background-color: #fff;
|
||
}
|
||
</style>
|