luoshiwen
/
long_IslandOcean
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

页面提交

This commit is contained in:
luoshiwen 2023-12-14 18:04:48 +08:00
parent a27ba970b4 d82fb82882
commit 90ac4a25b9
3 changed files with 613 additions and 297 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/energyMonitoring/loadClassification.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

510
src/views/energyEfficiency/index.vue
View File

@ -1,19 +1,25 @@
<script setup> <script setup>
import {ref, onMounted} from "vue"; import { ref, onMounted } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
// 各系统能耗概况 // 各系统能耗概况
const systemTab = [{name: '空调'}, {name: '照明'}, {name: '展陈'}, {name: '消防'}, {name: '电梯'}] const systemTab = [
const systemTabIndex = ref(0) { name: "空调" },
{ name: "照明" },
{ name: "展陈" },
{ name: "消防" },
{ name: "电梯" },
];
const systemTabIndex = ref(0);
const systemLeftList = ref([ const systemLeftList = ref([
{ {
name: '今日用能峰值', name: "今日用能峰值",
value: '322', value: "322",
}, },
{ {
name: '本月用能峰值', name: "本月用能峰值",
value: '35422', value: "35422",
} },
]) ]);
const systemRightList = ref([ const systemRightList = ref([
[ [
{ {
@ -68,12 +74,12 @@ const systemRightList = ref([
]//年 ]//年
]) ])
const selectSystemTab = (index) => { const selectSystemTab = (index) => {
systemTabIndex.value = index systemTabIndex.value = index;
} };
// 能耗总量echarts // 能耗总量echarts
const drawTotalChart = () => { const drawTotalChart = () => {
let myChart = echarts.init(document.getElementById('totalEnergy')) let myChart = echarts.init(document.getElementById("totalEnergy"));
const option = { const option = {
// backgroundColor: "#05224d", // backgroundColor: "#05224d",
tooltip: {}, tooltip: {},
@ -85,7 +91,6 @@ const drawTotalChart = () => {
containLabel: true, containLabel: true,
}, },
xAxis: [ xAxis: [
{ {
type: "category", type: "category",
axisLine: { axisLine: {
@ -103,12 +108,25 @@ const drawTotalChart = () => {
color: "#DDFFFD", color: "#DDFFFD",
// margin: 40, // margin: 40,
}, },
}, },
axisTick: {show: false}, axisTick: { show: false },
boundaryGap: true, 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: [ yAxis: [
@ -127,17 +145,17 @@ const drawTotalChart = () => {
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: 'dashed', type: "dashed",
color: "rgba(1, 39, 37, 0.30)", color: "rgba(1, 39, 37, 0.30)",
}, },
}, },
axisLine: {show: false}, axisLine: { show: false },
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: "#DDFFFD", color: "#DDFFFD",
}, },
}, },
axisTick: {show: false}, axisTick: { show: false },
}, },
], ],
series: [ series: [
@ -155,15 +173,15 @@ const drawTotalChart = () => {
//区域填充样式 //区域填充样式
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient( color: new echarts.graphic.LinearGradient(
0, 0,
0, 0,
0, 0,
1, 1,
[ [
{offset: 0, color: "rgba(1, 246, 139, 0.7)"}, { offset: 0, color: "rgba(1, 246, 139, 0.7)" },
{offset: 1, color: "rgba(1, 246, 139, 0)"}, { offset: 1, color: "rgba(1, 246, 139, 0)" },
], ],
false false
), ),
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色 shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
@ -173,25 +191,25 @@ const drawTotalChart = () => {
}, },
], ],
}; };
myChart.setOption(option) myChart.setOption(option);
} };
// 定额管理charts // 定额管理charts
const drawManagement = () => { const drawManagement = () => {
let myChart = echarts.init(document.getElementById('management')) let myChart = echarts.init(document.getElementById("management"));
const option = { const option = {
// backgroundColor: "#05224d", // backgroundColor: "#05224d",
tooltip: {}, tooltip: {},
legend: { legend: {
show: true, show: true,
icon: 'rect', icon: "rect",
right: '10', right: "10",
top: '5', top: "5",
layout: 'vertical', layout: "vertical",
itemHeight: '10', itemHeight: "10",
// itemWidth:'10', // itemWidth:'10',
textStyle: { textStyle: {
color: "rgba(221, 255, 253, 1)" color: "rgba(221, 255, 253, 1)",
} },
}, },
grid: { grid: {
top: "18%", top: "18%",
@ -201,7 +219,6 @@ const drawManagement = () => {
containLabel: true, containLabel: true,
}, },
xAxis: [ xAxis: [
{ {
type: "category", type: "category",
axisLine: { axisLine: {
@ -219,10 +236,9 @@ const drawManagement = () => {
color: "#DDFFFD", color: "#DDFFFD",
margin: 40, margin: 40,
}, },
}, },
axisTick: {show: false}, axisTick: { show: false },
boundaryGap: true, boundaryGap: true,
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"], data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
}, },
@ -243,29 +259,30 @@ const drawManagement = () => {
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: 'dashed', type: "dashed",
color: "rgba(1, 39, 37, 0.30)", color: "rgba(1, 39, 37, 0.30)",
}, },
}, },
axisLine: {show: false}, axisLine: { show: false },
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: "#DDFFFD", color: "#DDFFFD",
}, },
}, },
axisTick: {show: false}, axisTick: { show: false },
}, },
], ],
series: [ series: [
{ {
name: "单位建筑面积综合能耗", name: "单位建筑面积综合能耗",
markLine: { //阈值 markLine: {
//阈值
//最大值和最小值 //最大值和最小值
data: [ data: [
{ {
yAxis: 9, yAxis: 9,
label: { label: {
show: false show: false,
}, },
lineStyle: { lineStyle: {
width: 1, width: 1,
@ -291,15 +308,15 @@ const drawManagement = () => {
//区域填充样式 //区域填充样式
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient( color: new echarts.graphic.LinearGradient(
0, 0,
0, 0,
0, 0,
1, 1,
[ [
{offset: 0, color: "rgba(221, 255, 253, .7)"}, { offset: 0, color: "rgba(221, 255, 253, .7)" },
{offset: 1, color: "rgba(221, 255, 253, 0)"}, { offset: 1, color: "rgba(221, 255, 253, 0)" },
], ],
false false
), ),
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色 shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
@ -309,13 +326,12 @@ const drawManagement = () => {
}, },
], ],
}; };
myChart.setOption(option) myChart.setOption(option);
} };
// 能效流向 // 能效流向
const drawEnergyFlow = () => { const drawEnergyFlow = () => {
let myChart = echarts.init(document.getElementById('energyFlow')) let myChart = echarts.init(document.getElementById("energyFlow"));
let sourceData = [ let sourceData = [
{ {
name: "电", name: "电",
nameValue: 1562, nameValue: 1562,
@ -338,16 +354,16 @@ const drawEnergyFlow = () => {
}, },
]; ];
let sangjiColor = [ 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 = []; let itemStyleSource = [];
for (let d = 0; d < sourceData.length; d++) { for (let d = 0; d < sourceData.length; d++) {
if (sourceData[d].name == "电") { if (sourceData[d].name == "电") {
sourceData[d].label = { sourceData[d].label = {
position: 'right' position: "right",
}; };
} }
sourceData[d].itemStyle = { sourceData[d].itemStyle = {
@ -371,6 +387,8 @@ const drawEnergyFlow = () => {
nodeWidth: '12', nodeWidth: '12',
nodeAlign:'right', nodeAlign:'right',
nodeWidth: "13",
// nodeAlign:'right',
focusNodeAdjacency: "allEdges", focusNodeAdjacency: "allEdges",
data: itemStyleSource, data: itemStyleSource,
links: [ links: [
@ -389,7 +407,6 @@ const drawEnergyFlow = () => {
target: "电梯", target: "电梯",
value: 8, value: 8,
}, },
], ],
label: { label: {
position: "left", position: "left",
@ -399,29 +416,32 @@ const drawEnergyFlow = () => {
if (params.dataIndex === 0) { if (params.dataIndex === 0) {
return ( return (
"{a|" + "{a|" +
params.data.name + params.data.name +
"}\n" + "{b|" + "}\n" +
params.data.nameValue + "}" + "{b|" +
" " + params.data.nameValue +
params.data.valueUnit "}" +
" " +
params.data.valueUnit
); );
} else { } else {
return ( return (
"{name|" + "{name|" +
params.data.name + params.data.name +
"}" + "{value|" + "}" +
params.data.nameValue + "}" + "{value|" +
// " " + params.data.nameValue +
params.data.valueUnit "}" +
// " " +
params.data.valueUnit
); );
} }
}, },
rich: { rich: {
a: { a: {
padding: [0, 15, 10, 0], padding: [0, 15, 10, 0],
fontSize: "14" fontSize: "14",
}, },
b: { b: {
color: "rgba(91, 250, 241, 1)", color: "rgba(91, 250, 241, 1)",
@ -436,9 +456,8 @@ const drawEnergyFlow = () => {
color: "rgba(91, 250, 241, 1)", color: "rgba(91, 250, 241, 1)",
fontWeight: "600", fontWeight: "600",
fontSize: "16", fontSize: "16",
padding: [0, 10, 0, 10] padding: [0, 10, 0, 10],
} },
}, },
}, },
lineStyle: { 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加载 // dom加载
onMounted(() => { onMounted(() => {
// 能耗总量 // 能耗总量
drawTotalChart() drawTotalChart();
// 定额管理 // 定额管理
drawManagement() drawManagement();
// 能效流向 // 能效流向
drawEnergyFlow() drawEnergyFlow()
// 电费电价 // 电费电价
drawElectricityPrice() drawElectricityPrice()
}) // })
// drawEnergyFlow();
//复费率
getExhibitionLoad();
});
</script> </script>
<template> <template>
@ -647,9 +948,7 @@ onMounted(() => {
<span class="month">月</span> <span class="month">月</span>
</p> </p>
</div> </div>
<div id="management" class="margin10 box-bg"> <div id="management" class="margin10 box-bg"></div>
</div>
<!-- 能效流向 --> <!-- 能效流向 -->
<div class="title margin10"> <div class="title margin10">
<span>能效流向</span> <span>能效流向</span>
@ -663,14 +962,20 @@ onMounted(() => {
</div> </div>
<div id="airConditioningLoad" class="margin10 box-bg"> <div id="airConditioningLoad" class="margin10 box-bg">
<ul class="system-tab"> <ul class="system-tab">
<li v-for="(item,index) in systemTab" :class="index==systemTabIndex?'tab-select':''" <li
@click="selectSystemTab(index)"> v-for="(item, index) in systemTab"
:class="index == systemTabIndex ? 'tab-select' : ''"
@click="selectSystemTab(index)"
>
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</li> </li>
</ul> </ul>
<div class="system-content"> <div class="system-content">
<div class="system-content-left"> <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-p1">{{ item.name }}</p>
<p class="system-content-left-item-p2">{{ item.value }}</p> <p class="system-content-left-item-p2">{{ item.value }}</p>
</div> </div>
@ -686,8 +991,6 @@ onMounted(() => {
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -714,7 +1017,7 @@ onMounted(() => {
.system-tab { .system-tab {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
padding-top: .7rem; padding-top: 0.7rem;
box-sizing: border-box; box-sizing: border-box;
.tab-select { .tab-select {
@ -726,8 +1029,8 @@ onMounted(() => {
cursor: pointer; cursor: pointer;
color: rgba(221, 255, 253, 1); color: rgba(221, 255, 253, 1);
background-size: 100% 100%; background-size: 100% 100%;
font-size: .8rem; font-size: 0.8rem;
padding: .2rem 1.1rem; padding: 0.2rem 1.1rem;
} }
} }
@ -753,7 +1056,7 @@ onMounted(() => {
&-p1 { &-p1 {
height: 29%; height: 29%;
text-align: center; text-align: center;
font-size: .875rem; font-size: 0.875rem;
color: rgba(221, 255, 253, 1); color: rgba(221, 255, 253, 1);
} }
@ -785,16 +1088,15 @@ onMounted(() => {
&-title { &-title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: .8rem; font-size: 0.8rem;
padding: 0 .5rem; padding: 0 0.5rem;
box-sizing: border-box; box-sizing: border-box;
} }
&-box { &-box {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 .5rem; padding: 0 0.5rem;
box-sizing: border-box; box-sizing: border-box;
font-weight: bold; font-weight: bold;
background-image: url("@/assets/images/system-box.png"); background-image: url("@/assets/images/system-box.png");
@ -802,15 +1104,13 @@ onMounted(() => {
height: 65%; height: 65%;
width: 100%; width: 100%;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
.yoy { .yoy {
color: rgba(1, 246, 139, 1); color: rgba(1, 246, 139, 1);
} }
} }
} }
} }
//background-color: #fff; //background-color: #fff;
} }
</style> </style>

400
src/views/energyMonitoring/index.vue
View File

@ -19,7 +19,7 @@
</div> </div>
<div class="page-right-box"> <div class="page-right-box">
<!-- 空调负荷 --> <!-- 空调负荷 -->
<div class="title" > <div class="title">
<span>空调负荷</span> <span>空调负荷</span>
</div> </div>
<div class="margin10 box-bg" id="airConditioningLoad"></div> <div class="margin10 box-bg" id="airConditioningLoad"></div>
@ -40,9 +40,9 @@
<script setup> <script setup>
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
const getImageUrl=(name)=>{ const getImageUrl = (name) => {
return new URL(name, import.meta.url).href return new URL(name, import.meta.url).href;
} };
//实时负荷 //实时负荷
function getRealTimeLoad() { function getRealTimeLoad() {
let myChart = echarts.init(document.getElementById("realTimeLoad")); let myChart = echarts.init(document.getElementById("realTimeLoad"));
@ -407,8 +407,8 @@ function getDailyElectricityConsumption() {
} }
//空调负荷 //空调负荷
function drawAirConditioningLoad(){ function drawAirConditioningLoad() {
let myChart = echarts.init(document.getElementById('airConditioningLoad')) let myChart = echarts.init(document.getElementById("airConditioningLoad"));
const option = { const option = {
// backgroundColor: "#05224d", // backgroundColor: "#05224d",
tooltip: {}, tooltip: {},
@ -420,109 +420,6 @@ function drawAirConditioningLoad(){
containLabel: true, containLabel: true,
}, },
xAxis: [ 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: ["09:00", "11:00", "13:00", "15:00", "17:00", "19:00"],
},
],
yAxis: [
{
type: "value",
name:"单位:kW",
nameTextStyle:{
color: "#DDFFFD",
align:"right",
},
min: 0,
max: 2000,
splitNumber: 5,
splitLine: {
show: true,
lineStyle: {
type:'dashed',
color: "rgba(1, 39, 37, 0.30)",
},
},
axisLine: { show: false },
axisLabel: {
textStyle: {
color: "#DDFFFD",
},
},
axisTick: { show: false },
},
],
series: [
{
name: "异常流量",
type: "line",
smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
symbolSize: 0,
lineStyle: {
color: "#5BFAF1", // 线条颜色
},
areaStyle: {
//区域填充样式
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{ offset: 0, color: "rgba(91, 250, 241, 0.40)" },
{ offset: 1, color: "rgba(91, 250, 241, 0)" },
],
false
),
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
},
data: [500, 800, 900,1200, 1800, 1600],
},
],
};
myChart.setOption(option)
}
// 展陈负荷
function drawExhibitionLoad(){
let myChart = echarts.init(document.getElementById('exhibitionLoad'))
const option = {
// backgroundColor: "#05224d",
tooltip: {},
grid: {
top: "18%",
left: "4%",
right: "4%",
bottom: "4%",
containLabel: true,
},
xAxis: [
{ {
type: "category", type: "category",
axisLine: { axisLine: {
@ -540,7 +437,6 @@ function drawExhibitionLoad(){
color: "#DDFFFD", color: "#DDFFFD",
margin: 40, margin: 40,
}, },
}, },
axisTick: { show: false }, axisTick: { show: false },
@ -551,10 +447,10 @@ function drawExhibitionLoad(){
yAxis: [ yAxis: [
{ {
type: "value", type: "value",
name:"单位:kW", name: "单位:kW",
nameTextStyle:{ nameTextStyle: {
color: "#DDFFFD", color: "#DDFFFD",
align:"right", align: "right",
}, },
min: 0, min: 0,
max: 2000, max: 2000,
@ -562,7 +458,7 @@ function drawExhibitionLoad(){
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type:'dashed', type: "dashed",
color: "rgba(1, 39, 37, 0.30)", color: "rgba(1, 39, 37, 0.30)",
}, },
}, },
@ -584,36 +480,135 @@ function drawExhibitionLoad(){
symbolSize: 0, symbolSize: 0,
lineStyle: { lineStyle: {
color: "rgba(1, 246, 139, 1)", // 线条颜色 color: "#5BFAF1", // 线条颜色
}, },
areaStyle: { areaStyle: {
//区域填充样式 //区域填充样式
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient( color: new echarts.graphic.LinearGradient(
0, 0,
0, 0,
0, 0,
1, 1,
[ [
{ offset: 0, color: "rgba(1, 246, 139, 0.7)" }, { offset: 0, color: "rgba(91, 250, 241, 0.40)" },
{ offset: 1, color: "rgba(1, 246, 139, 0)" }, { offset: 1, color: "rgba(91, 250, 241, 0)" },
], ],
false false
), ),
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色 shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 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"));
const option = {
// backgroundColor: "#05224d",
tooltip: {},
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: ["09:00", "11:00", "13:00", "15:00", "17:00", "19:00"],
},
],
yAxis: [
{
type: "value",
name: "单位:kW",
nameTextStyle: {
color: "#DDFFFD",
align: "right",
},
min: 0,
max: 2000,
splitNumber: 5,
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "rgba(1, 39, 37, 0.30)",
},
},
axisLine: { show: false },
axisLabel: {
textStyle: {
color: "#DDFFFD",
},
},
axisTick: { show: false },
},
],
series: [
{
name: "异常流量",
type: "line",
smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
symbolSize: 0,
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: [500, 800, 900, 1200, 1800, 1600],
},
],
};
myChart.setOption(option);
}
// 配电回路排名 // 配电回路排名
function drawRanking(){ function drawRanking() {
let myChart = echarts.init(document.getElementById('ranking')) let myChart = echarts.init(document.getElementById("ranking"));
let option = { let option = {
grid: { grid: {
left: "5%", left: "5%",
@ -629,15 +624,15 @@ function drawRanking(){
}, },
formatter: function (params) { formatter: function (params) {
return ( return (
params[0].name + params[0].name +
"<br/>" + "<br/>" +
"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" + "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
params[0].seriesName + params[0].seriesName +
" : " + " : " +
Number( Number(
(params[0].value.toFixed(4) / 10000).toFixed(2) (params[0].value.toFixed(4) / 10000).toFixed(2)
).toLocaleString() + ).toLocaleString() +
" 万元<br/>" " 万元<br/>"
); );
}, },
}, },
@ -656,24 +651,21 @@ function drawRanking(){
show: true, show: true,
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize:"14" fontSize: "14",
}, },
formatter: function (value,index) { formatter: function (value, index) {
return "{a|TOP " + (index+1) + return "{a|TOP " + (index + 1) + "}" + "{b|" + value + "}";
"}" + "{b|" + value + },
"}"; rich: {
a: {
width: 45,
// padding: [0, 8, 0,0],
fontSize: "14",
backgroundColor: {
image: getImageUrl("../../assets/images/rank-bg.png"),
},
},
}, },
rich:{
a:{
width:45,
// padding: [0, 8, 0,0],
fontSize:"14",
backgroundColor:{
image:getImageUrl('../../assets/images/rank-bg.png')
}
}
}
}, },
splitLine: { splitLine: {
show: false, show: false,
@ -697,26 +689,21 @@ function drawRanking(){
padding: [0, 0, 10, -10], padding: [0, 0, 10, -10],
verticalAlign: "bottom", verticalAlign: "bottom",
inside: true, inside: true,
textStyle: { textStyle: {},
},
formatter: function (value) { formatter: function (value) {
return "{a|" + (value / 10000).toLocaleString() + return "{a|" + (value / 10000).toLocaleString() + "}" + "{b|kWh}";
"}" + "{b|kWh}";
}, },
rich:{ rich: {
a:{ a: {
fontSize: "16", fontSize: "16",
color:"rgba(0, 255, 240, 1)", color: "rgba(0, 255, 240, 1)",
padding:[0,6,0,0] padding: [0, 6, 0, 0],
}, },
b:{ b: {
color: "#fff", color: "#fff",
fontSize: "12", fontSize: "12",
},
} },
}
}, },
data: [50000000, 22000000, 10000000, 5000000, 1], data: [50000000, 22000000, 10000000, 5000000, 1],
}, },
@ -748,26 +735,26 @@ function drawRanking(){
barGap: "-115%", barGap: "-115%",
data: [50000000, 50000000, 50000000, 50000000, 50000000], data: [50000000, 50000000, 50000000, 50000000, 50000000],
itemStyle: { itemStyle: {
color: 'rgba(5, 33, 31, 0.32)', color: "rgba(5, 33, 31, 0.32)",
}, },
}, },
], ],
}; };
myChart.setOption(option) myChart.setOption(option);
} }
//负荷分类 //负荷分类
function getLoadClassification() { function getLoadClassification() {
var trafficWay = [ var trafficWay = [
{ {
name: "三类项目", name: "一级",
value: 20, value: 20,
}, },
{ {
name: "天分重点", name: "二级",
value: 30, value: 30,
}, },
{ {
name: "集团重点", name: "三级",
value: 50, value: 50,
}, },
]; ];
@ -777,7 +764,11 @@ function getLoadClassification() {
} }
var data = []; 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++) { for (var i = 0; i < trafficWay.length; i++) {
data.push( data.push(
{ {
@ -811,8 +802,25 @@ function getLoadClassification() {
} }
); );
} }
var img =
"/src/assets/images/energyMonitoring/loadClassification.png";
let myChart = echarts.init(document.getElementById("loadClassification")); let myChart = echarts.init(document.getElementById("loadClassification"));
let option = { let option = {
graphic: {
elements: [
{
type: "image",
z: 3,
style: {
image: img,
width: 188,
height: 188,
},
left: "center",
top: "center",
},
],
},
color: color, color: color,
title: [ title: [
{ {
@ -829,7 +837,7 @@ function getLoadClassification() {
}, },
{ {
text: "kw", text: "kw",
x: "56%", x: "58%",
y: "45%", y: "45%",
textAlign: "center", textAlign: "center",
textStyle: { textStyle: {
@ -875,36 +883,46 @@ function getLoadClassification() {
// total += trafficWay[i].value // total += trafficWay[i].value
// } // }
percent = params.percent; percent = params.percent;
let unit = "kW";
// percent = ((params.value / total) * 100).toFixed(0) // percent = ((params.value / total) * 100).toFixed(0)
if (params.name !== "") { if (params.name !== "") {
return ( return (
params.name +
"\n" +
`{a${params.dataIndex / 2}|` + `{a${params.dataIndex / 2}|` +
percent + percent +
"%}" "}" +
`{s0|` +
unit +
"}" +
"\n" +
params.name
); );
} else { } else {
return ""; return "";
} }
}, },
padding: [60, -50],
textStyle: { textStyle: {
rich: { rich: {
a0: { a0: {
color: "#36E461", color: "rgba(1, 246, 139, 1)",
padding: [10, 0], padding: [0, 0, 10, 0],
fontSize: 15, fontSize: 15,
}, },
a1: { a1: {
color: "#0BEFF9", color: "rgba(91, 250, 241,1)",
padding: [10, 0], padding: [0, 0, 10, 0],
fontSize: 15, fontSize: 15,
}, },
a2: { a2: {
color: "#9429E1", color: "rgba(255, 221, 0, 1)",
padding: [10, 0], padding: [0, 0, 10, 0],
fontSize: 15, fontSize: 15,
}, },
s0: {
color: "#fff",
padding: [0, 0, 10, 5],
fontSize: 12,
},
}, },
}, },
}, },
@ -939,6 +957,4 @@ onMounted(() => {
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped></style>
</style>