页面提交
This commit is contained in:
commit
90ac4a25b9
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
|
|
@ -1,19 +1,25 @@
|
|||
<script setup>
|
||||
import {ref, onMounted} from "vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
// 各系统能耗概况
|
||||
const systemTab = [{name: '空调'}, {name: '照明'}, {name: '展陈'}, {name: '消防'}, {name: '电梯'}]
|
||||
const systemTabIndex = ref(0)
|
||||
const systemTab = [
|
||||
{ name: "空调" },
|
||||
{ name: "照明" },
|
||||
{ name: "展陈" },
|
||||
{ name: "消防" },
|
||||
{ name: "电梯" },
|
||||
];
|
||||
const systemTabIndex = ref(0);
|
||||
const systemLeftList = ref([
|
||||
{
|
||||
name: '今日用能峰值',
|
||||
value: '322',
|
||||
name: "今日用能峰值",
|
||||
value: "322",
|
||||
},
|
||||
{
|
||||
name: '本月用能峰值',
|
||||
value: '35422',
|
||||
}
|
||||
])
|
||||
name: "本月用能峰值",
|
||||
value: "35422",
|
||||
},
|
||||
]);
|
||||
const systemRightList = ref([
|
||||
[
|
||||
{
|
||||
|
|
@ -68,12 +74,12 @@ const systemRightList = ref([
|
|||
]//年
|
||||
])
|
||||
const selectSystemTab = (index) => {
|
||||
systemTabIndex.value = index
|
||||
}
|
||||
systemTabIndex.value = index;
|
||||
};
|
||||
|
||||
// 能耗总量echarts
|
||||
const drawTotalChart = () => {
|
||||
let myChart = echarts.init(document.getElementById('totalEnergy'))
|
||||
let myChart = echarts.init(document.getElementById("totalEnergy"));
|
||||
const option = {
|
||||
// backgroundColor: "#05224d",
|
||||
tooltip: {},
|
||||
|
|
@ -85,7 +91,6 @@ const drawTotalChart = () => {
|
|||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
|
||||
{
|
||||
type: "category",
|
||||
axisLine: {
|
||||
|
|
@ -103,12 +108,25 @@ const drawTotalChart = () => {
|
|||
color: "#DDFFFD",
|
||||
// margin: 40,
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
axisTick: {show: false},
|
||||
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: [
|
||||
"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",
|
||||
],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
|
|
@ -127,17 +145,17 @@ const drawTotalChart = () => {
|
|||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
type: "dashed",
|
||||
color: "rgba(1, 39, 37, 0.30)",
|
||||
},
|
||||
},
|
||||
axisLine: {show: false},
|
||||
axisLine: { show: false },
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#DDFFFD",
|
||||
},
|
||||
},
|
||||
axisTick: {show: false},
|
||||
axisTick: { show: false },
|
||||
},
|
||||
],
|
||||
series: [
|
||||
|
|
@ -160,8 +178,8 @@ const drawTotalChart = () => {
|
|||
0,
|
||||
1,
|
||||
[
|
||||
{offset: 0, color: "rgba(1, 246, 139, 0.7)"},
|
||||
{offset: 1, color: "rgba(1, 246, 139, 0)"},
|
||||
{ offset: 0, color: "rgba(1, 246, 139, 0.7)" },
|
||||
{ offset: 1, color: "rgba(1, 246, 139, 0)" },
|
||||
],
|
||||
false
|
||||
),
|
||||
|
|
@ -173,25 +191,25 @@ const drawTotalChart = () => {
|
|||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option)
|
||||
}
|
||||
myChart.setOption(option);
|
||||
};
|
||||
// 定额管理charts
|
||||
const drawManagement = () => {
|
||||
let myChart = echarts.init(document.getElementById('management'))
|
||||
let myChart = echarts.init(document.getElementById("management"));
|
||||
const option = {
|
||||
// backgroundColor: "#05224d",
|
||||
tooltip: {},
|
||||
legend: {
|
||||
show: true,
|
||||
icon: 'rect',
|
||||
right: '10',
|
||||
top: '5',
|
||||
layout: 'vertical',
|
||||
itemHeight: '10',
|
||||
icon: "rect",
|
||||
right: "10",
|
||||
top: "5",
|
||||
layout: "vertical",
|
||||
itemHeight: "10",
|
||||
// itemWidth:'10',
|
||||
textStyle: {
|
||||
color: "rgba(221, 255, 253, 1)"
|
||||
}
|
||||
color: "rgba(221, 255, 253, 1)",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "18%",
|
||||
|
|
@ -201,7 +219,6 @@ const drawManagement = () => {
|
|||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
|
||||
{
|
||||
type: "category",
|
||||
axisLine: {
|
||||
|
|
@ -219,10 +236,9 @@ const drawManagement = () => {
|
|||
color: "#DDFFFD",
|
||||
margin: 40,
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
axisTick: {show: false},
|
||||
axisTick: { show: false },
|
||||
boundaryGap: true,
|
||||
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
||||
},
|
||||
|
|
@ -243,29 +259,30 @@ const drawManagement = () => {
|
|||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
type: "dashed",
|
||||
color: "rgba(1, 39, 37, 0.30)",
|
||||
},
|
||||
},
|
||||
axisLine: {show: false},
|
||||
axisLine: { show: false },
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#DDFFFD",
|
||||
},
|
||||
},
|
||||
axisTick: {show: false},
|
||||
axisTick: { show: false },
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "单位建筑面积综合能耗",
|
||||
markLine: { //阈值
|
||||
markLine: {
|
||||
//阈值
|
||||
//最大值和最小值
|
||||
data: [
|
||||
{
|
||||
yAxis: 9,
|
||||
label: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
|
|
@ -296,8 +313,8 @@ const drawManagement = () => {
|
|||
0,
|
||||
1,
|
||||
[
|
||||
{offset: 0, color: "rgba(221, 255, 253, .7)"},
|
||||
{offset: 1, color: "rgba(221, 255, 253, 0)"},
|
||||
{ offset: 0, color: "rgba(221, 255, 253, .7)" },
|
||||
{ offset: 1, color: "rgba(221, 255, 253, 0)" },
|
||||
],
|
||||
false
|
||||
),
|
||||
|
|
@ -309,13 +326,12 @@ const drawManagement = () => {
|
|||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option)
|
||||
}
|
||||
myChart.setOption(option);
|
||||
};
|
||||
// 能效流向
|
||||
const drawEnergyFlow = () => {
|
||||
let myChart = echarts.init(document.getElementById('energyFlow'))
|
||||
let myChart = echarts.init(document.getElementById("energyFlow"));
|
||||
let sourceData = [
|
||||
|
||||
{
|
||||
name: "电",
|
||||
nameValue: 1562,
|
||||
|
|
@ -338,16 +354,16 @@ const drawEnergyFlow = () => {
|
|||
},
|
||||
];
|
||||
let sangjiColor = [
|
||||
'rgba(91, 250, 241, 1)',
|
||||
'rgba(91, 250, 241, 1)',
|
||||
'rgba(91, 250, 241, 1)',
|
||||
'rgba(91, 250, 241, 1)'
|
||||
"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'
|
||||
position: "right",
|
||||
};
|
||||
}
|
||||
sourceData[d].itemStyle = {
|
||||
|
|
@ -371,6 +387,8 @@ const drawEnergyFlow = () => {
|
|||
nodeWidth: '12',
|
||||
|
||||
nodeAlign:'right',
|
||||
nodeWidth: "13",
|
||||
// nodeAlign:'right',
|
||||
focusNodeAdjacency: "allEdges",
|
||||
data: itemStyleSource,
|
||||
links: [
|
||||
|
|
@ -389,7 +407,6 @@ const drawEnergyFlow = () => {
|
|||
target: "电梯",
|
||||
value: 8,
|
||||
},
|
||||
|
||||
],
|
||||
label: {
|
||||
position: "left",
|
||||
|
|
@ -401,8 +418,10 @@ const drawEnergyFlow = () => {
|
|||
return (
|
||||
"{a|" +
|
||||
params.data.name +
|
||||
"}\n" + "{b|" +
|
||||
params.data.nameValue + "}" +
|
||||
"}\n" +
|
||||
"{b|" +
|
||||
params.data.nameValue +
|
||||
"}" +
|
||||
" " +
|
||||
params.data.valueUnit
|
||||
);
|
||||
|
|
@ -410,18 +429,19 @@ const drawEnergyFlow = () => {
|
|||
return (
|
||||
"{name|" +
|
||||
params.data.name +
|
||||
"}" + "{value|" +
|
||||
params.data.nameValue + "}" +
|
||||
"}" +
|
||||
"{value|" +
|
||||
params.data.nameValue +
|
||||
"}" +
|
||||
// " " +
|
||||
params.data.valueUnit
|
||||
);
|
||||
}
|
||||
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
padding: [0, 15, 10, 0],
|
||||
fontSize: "14"
|
||||
fontSize: "14",
|
||||
},
|
||||
b: {
|
||||
color: "rgba(91, 250, 241, 1)",
|
||||
|
|
@ -436,9 +456,8 @@ const drawEnergyFlow = () => {
|
|||
color: "rgba(91, 250, 241, 1)",
|
||||
fontWeight: "600",
|
||||
fontSize: "16",
|
||||
padding: [0, 10, 0, 10]
|
||||
}
|
||||
|
||||
padding: [0, 10, 0, 10],
|
||||
},
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
|
|
@ -452,7 +471,285 @@ const drawEnergyFlow = () => {
|
|||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option)
|
||||
myChart.setOption(option);
|
||||
};
|
||||
//复费率
|
||||
function getExhibitionLoad() {
|
||||
let myChart = echarts.init(document.getElementById("exhibitionLoad"));
|
||||
var option = {
|
||||
tooltip: {
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
borderWidth: 0,
|
||||
top: 40,
|
||||
bottom: 40,
|
||||
left: 40,
|
||||
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月"],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name:"单位:kWh",
|
||||
nameTextStyle:{
|
||||
color: "#DDFFFD",
|
||||
// align:"right",
|
||||
padding:[0,0,0,0]
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type:'dashed',
|
||||
color: "rgba(1, 39, 37, 0.30)",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#DDFFFD",
|
||||
},
|
||||
},
|
||||
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: [1, 2, 3, 4, 5, 6, 7],
|
||||
},
|
||||
{
|
||||
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: [1, 2, 3, 4, 5, 6, 7],
|
||||
},
|
||||
{
|
||||
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: [1, 2, 3, 4, 5, 6, 7],
|
||||
},
|
||||
{
|
||||
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: [1, 2, 3, 4, 5, 6, 7],
|
||||
},
|
||||
{
|
||||
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: [1, 2, 3, 4, 5, 6, 7],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
|
||||
// 电费电价
|
||||
|
|
@ -617,14 +914,18 @@ const drawElectricityPrice = () => {
|
|||
// dom加载
|
||||
onMounted(() => {
|
||||
// 能耗总量
|
||||
drawTotalChart()
|
||||
drawTotalChart();
|
||||
// 定额管理
|
||||
drawManagement()
|
||||
drawManagement();
|
||||
// 能效流向
|
||||
drawEnergyFlow()
|
||||
// 电费电价
|
||||
drawElectricityPrice()
|
||||
})
|
||||
// })
|
||||
// drawEnergyFlow();
|
||||
//复费率
|
||||
getExhibitionLoad();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -647,9 +948,7 @@ onMounted(() => {
|
|||
<span class="month">月</span>
|
||||
</p>
|
||||
</div>
|
||||
<div id="management" class="margin10 box-bg">
|
||||
|
||||
</div>
|
||||
<div id="management" class="margin10 box-bg"></div>
|
||||
<!-- 能效流向 -->
|
||||
<div class="title margin10">
|
||||
<span>能效流向</span>
|
||||
|
|
@ -663,14 +962,20 @@ onMounted(() => {
|
|||
</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(index)">
|
||||
<li
|
||||
v-for="(item, index) in systemTab"
|
||||
:class="index == systemTabIndex ? 'tab-select' : ''"
|
||||
@click="selectSystemTab(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">
|
||||
<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 }}</p>
|
||||
</div>
|
||||
|
|
@ -686,8 +991,6 @@ onMounted(() => {
|
|||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -714,7 +1017,7 @@ onMounted(() => {
|
|||
.system-tab {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
padding-top: .7rem;
|
||||
padding-top: 0.7rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
.tab-select {
|
||||
|
|
@ -726,8 +1029,8 @@ onMounted(() => {
|
|||
cursor: pointer;
|
||||
color: rgba(221, 255, 253, 1);
|
||||
background-size: 100% 100%;
|
||||
font-size: .8rem;
|
||||
padding: .2rem 1.1rem;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.2rem 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -753,7 +1056,7 @@ onMounted(() => {
|
|||
&-p1 {
|
||||
height: 29%;
|
||||
text-align: center;
|
||||
font-size: .875rem;
|
||||
font-size: 0.875rem;
|
||||
color: rgba(221, 255, 253, 1);
|
||||
}
|
||||
|
||||
|
|
@ -785,16 +1088,15 @@ onMounted(() => {
|
|||
&-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: .8rem;
|
||||
padding: 0 .5rem;
|
||||
font-size: 0.8rem;
|
||||
padding: 0 0.5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 .5rem;
|
||||
padding: 0 0.5rem;
|
||||
box-sizing: border-box;
|
||||
font-weight: bold;
|
||||
background-image: url("@/assets/images/system-box.png");
|
||||
|
|
@ -802,11 +1104,9 @@ onMounted(() => {
|
|||
height: 65%;
|
||||
width: 100%;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
|
||||
.yoy {
|
||||
color: rgba(1, 246, 139, 1);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</div>
|
||||
<div class="page-right-box">
|
||||
<!-- 空调负荷 -->
|
||||
<div class="title" >
|
||||
<div class="title">
|
||||
<span>空调负荷</span>
|
||||
</div>
|
||||
<div class="margin10 box-bg" id="airConditioningLoad"></div>
|
||||
|
|
@ -40,9 +40,9 @@
|
|||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const getImageUrl=(name)=>{
|
||||
return new URL(name, import.meta.url).href
|
||||
}
|
||||
const getImageUrl = (name) => {
|
||||
return new URL(name, import.meta.url).href;
|
||||
};
|
||||
//实时负荷
|
||||
function getRealTimeLoad() {
|
||||
let myChart = echarts.init(document.getElementById("realTimeLoad"));
|
||||
|
|
@ -407,8 +407,8 @@ function getDailyElectricityConsumption() {
|
|||
}
|
||||
|
||||
//空调负荷
|
||||
function drawAirConditioningLoad(){
|
||||
let myChart = echarts.init(document.getElementById('airConditioningLoad'))
|
||||
function drawAirConditioningLoad() {
|
||||
let myChart = echarts.init(document.getElementById("airConditioningLoad"));
|
||||
const option = {
|
||||
// backgroundColor: "#05224d",
|
||||
tooltip: {},
|
||||
|
|
@ -420,7 +420,6 @@ function drawAirConditioningLoad(){
|
|||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
|
||||
{
|
||||
type: "category",
|
||||
axisLine: {
|
||||
|
|
@ -428,7 +427,7 @@ function drawAirConditioningLoad(){
|
|||
show: true,
|
||||
lineStyle: {
|
||||
// type:'dashed',
|
||||
color: "#557775"
|
||||
color: "#557775",
|
||||
// color: "#233e64",
|
||||
},
|
||||
},
|
||||
|
|
@ -438,7 +437,6 @@ function drawAirConditioningLoad(){
|
|||
color: "#DDFFFD",
|
||||
margin: 40,
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
axisTick: { show: false },
|
||||
|
|
@ -449,10 +447,10 @@ function drawAirConditioningLoad(){
|
|||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name:"单位:kW",
|
||||
nameTextStyle:{
|
||||
name: "单位:kW",
|
||||
nameTextStyle: {
|
||||
color: "#DDFFFD",
|
||||
align:"right",
|
||||
align: "right",
|
||||
},
|
||||
min: 0,
|
||||
max: 2000,
|
||||
|
|
@ -460,7 +458,7 @@ function drawAirConditioningLoad(){
|
|||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type:'dashed',
|
||||
type: "dashed",
|
||||
color: "rgba(1, 39, 37, 0.30)",
|
||||
},
|
||||
},
|
||||
|
|
@ -502,15 +500,15 @@ function drawAirConditioningLoad(){
|
|||
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
|
||||
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
},
|
||||
data: [500, 800, 900,1200, 1800, 1600],
|
||||
data: [500, 800, 900, 1200, 1800, 1600],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option)
|
||||
myChart.setOption(option);
|
||||
}
|
||||
// 展陈负荷
|
||||
function drawExhibitionLoad(){
|
||||
let myChart = echarts.init(document.getElementById('exhibitionLoad'))
|
||||
function drawExhibitionLoad() {
|
||||
let myChart = echarts.init(document.getElementById("exhibitionLoad"));
|
||||
const option = {
|
||||
// backgroundColor: "#05224d",
|
||||
tooltip: {},
|
||||
|
|
@ -522,7 +520,6 @@ function drawExhibitionLoad(){
|
|||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
|
||||
{
|
||||
type: "category",
|
||||
axisLine: {
|
||||
|
|
@ -540,7 +537,6 @@ function drawExhibitionLoad(){
|
|||
color: "#DDFFFD",
|
||||
margin: 40,
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
axisTick: { show: false },
|
||||
|
|
@ -551,10 +547,10 @@ function drawExhibitionLoad(){
|
|||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name:"单位:kW",
|
||||
nameTextStyle:{
|
||||
name: "单位:kW",
|
||||
nameTextStyle: {
|
||||
color: "#DDFFFD",
|
||||
align:"right",
|
||||
align: "right",
|
||||
},
|
||||
min: 0,
|
||||
max: 2000,
|
||||
|
|
@ -562,7 +558,7 @@ function drawExhibitionLoad(){
|
|||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type:'dashed',
|
||||
type: "dashed",
|
||||
color: "rgba(1, 39, 37, 0.30)",
|
||||
},
|
||||
},
|
||||
|
|
@ -604,16 +600,15 @@ function drawExhibitionLoad(){
|
|||
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
|
||||
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
},
|
||||
data: [500, 800, 900,1200, 1800, 1600],
|
||||
data: [500, 800, 900, 1200, 1800, 1600],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option)
|
||||
|
||||
}
|
||||
myChart.setOption(option);
|
||||
}
|
||||
// 配电回路排名
|
||||
function drawRanking(){
|
||||
let myChart = echarts.init(document.getElementById('ranking'))
|
||||
function drawRanking() {
|
||||
let myChart = echarts.init(document.getElementById("ranking"));
|
||||
let option = {
|
||||
grid: {
|
||||
left: "5%",
|
||||
|
|
@ -656,24 +651,21 @@ function drawRanking(){
|
|||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize:"14"
|
||||
fontSize: "14",
|
||||
},
|
||||
formatter: function (value,index) {
|
||||
return "{a|TOP " + (index+1) +
|
||||
"}" + "{b|" + value +
|
||||
"}";
|
||||
formatter: function (value, index) {
|
||||
return "{a|TOP " + (index + 1) + "}" + "{b|" + value + "}";
|
||||
},
|
||||
rich:{
|
||||
a:{
|
||||
width:45,
|
||||
rich: {
|
||||
a: {
|
||||
width: 45,
|
||||
// padding: [0, 8, 0,0],
|
||||
fontSize:"14",
|
||||
backgroundColor:{
|
||||
|
||||
image:getImageUrl('../../assets/images/rank-bg.png')
|
||||
}
|
||||
}
|
||||
}
|
||||
fontSize: "14",
|
||||
backgroundColor: {
|
||||
image: getImageUrl("../../assets/images/rank-bg.png"),
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
|
|
@ -697,26 +689,21 @@ function drawRanking(){
|
|||
padding: [0, 0, 10, -10],
|
||||
verticalAlign: "bottom",
|
||||
inside: true,
|
||||
textStyle: {
|
||||
|
||||
},
|
||||
textStyle: {},
|
||||
formatter: function (value) {
|
||||
return "{a|" + (value / 10000).toLocaleString() +
|
||||
"}" + "{b|kWh}";
|
||||
return "{a|" + (value / 10000).toLocaleString() + "}" + "{b|kWh}";
|
||||
},
|
||||
rich:{
|
||||
a:{
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: "16",
|
||||
color:"rgba(0, 255, 240, 1)",
|
||||
padding:[0,6,0,0]
|
||||
color: "rgba(0, 255, 240, 1)",
|
||||
padding: [0, 6, 0, 0],
|
||||
},
|
||||
b:{
|
||||
b: {
|
||||
color: "#fff",
|
||||
fontSize: "12",
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
data: [50000000, 22000000, 10000000, 5000000, 1],
|
||||
},
|
||||
|
|
@ -748,26 +735,26 @@ function drawRanking(){
|
|||
barGap: "-115%",
|
||||
data: [50000000, 50000000, 50000000, 50000000, 50000000],
|
||||
itemStyle: {
|
||||
color: 'rgba(5, 33, 31, 0.32)',
|
||||
color: "rgba(5, 33, 31, 0.32)",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option)
|
||||
myChart.setOption(option);
|
||||
}
|
||||
//负荷分类
|
||||
function getLoadClassification() {
|
||||
var trafficWay = [
|
||||
{
|
||||
name: "三类项目",
|
||||
name: "一级",
|
||||
value: 20,
|
||||
},
|
||||
{
|
||||
name: "天分重点",
|
||||
name: "二级",
|
||||
value: 30,
|
||||
},
|
||||
{
|
||||
name: "集团重点",
|
||||
name: "三级",
|
||||
value: 50,
|
||||
},
|
||||
];
|
||||
|
|
@ -777,7 +764,11 @@ function getLoadClassification() {
|
|||
}
|
||||
|
||||
var data = [];
|
||||
var color = ["rgba(1, 246, 139, 1)", "rgba(91, 250, 241,1)", "rgba(255, 221, 0, 1)"];
|
||||
var color = [
|
||||
"rgba(1, 246, 139, 1)",
|
||||
"rgba(91, 250, 241,1)",
|
||||
"rgba(255, 221, 0, 1)",
|
||||
];
|
||||
for (var i = 0; i < trafficWay.length; i++) {
|
||||
data.push(
|
||||
{
|
||||
|
|
@ -811,8 +802,25 @@ function getLoadClassification() {
|
|||
}
|
||||
);
|
||||
}
|
||||
var img =
|
||||
"/src/assets/images/energyMonitoring/loadClassification.png";
|
||||
let myChart = echarts.init(document.getElementById("loadClassification"));
|
||||
let option = {
|
||||
graphic: {
|
||||
elements: [
|
||||
{
|
||||
type: "image",
|
||||
z: 3,
|
||||
style: {
|
||||
image: img,
|
||||
width: 188,
|
||||
height: 188,
|
||||
},
|
||||
left: "center",
|
||||
top: "center",
|
||||
},
|
||||
],
|
||||
},
|
||||
color: color,
|
||||
title: [
|
||||
{
|
||||
|
|
@ -829,7 +837,7 @@ function getLoadClassification() {
|
|||
},
|
||||
{
|
||||
text: "kw",
|
||||
x: "56%",
|
||||
x: "58%",
|
||||
y: "45%",
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
|
|
@ -875,36 +883,46 @@ function getLoadClassification() {
|
|||
// total += trafficWay[i].value
|
||||
// }
|
||||
percent = params.percent;
|
||||
let unit = "kW";
|
||||
// percent = ((params.value / total) * 100).toFixed(0)
|
||||
if (params.name !== "") {
|
||||
return (
|
||||
params.name +
|
||||
"\n" +
|
||||
`{a${params.dataIndex / 2}|` +
|
||||
percent +
|
||||
"%}"
|
||||
"}" +
|
||||
`{s0|` +
|
||||
unit +
|
||||
"}" +
|
||||
"\n" +
|
||||
params.name
|
||||
);
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
padding: [60, -50],
|
||||
textStyle: {
|
||||
rich: {
|
||||
a0: {
|
||||
color: "#36E461",
|
||||
padding: [10, 0],
|
||||
color: "rgba(1, 246, 139, 1)",
|
||||
padding: [0, 0, 10, 0],
|
||||
fontSize: 15,
|
||||
},
|
||||
a1: {
|
||||
color: "#0BEFF9",
|
||||
padding: [10, 0],
|
||||
color: "rgba(91, 250, 241,1)",
|
||||
padding: [0, 0, 10, 0],
|
||||
fontSize: 15,
|
||||
},
|
||||
a2: {
|
||||
color: "#9429E1",
|
||||
padding: [10, 0],
|
||||
color: "rgba(255, 221, 0, 1)",
|
||||
padding: [0, 0, 10, 0],
|
||||
fontSize: 15,
|
||||
},
|
||||
s0: {
|
||||
color: "#fff",
|
||||
padding: [0, 0, 10, 5],
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -939,6 +957,4 @@ onMounted(() => {
|
|||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue