代码提交
This commit is contained in:
commit
03056ed10a
Binary file not shown.
|
|
@ -0,0 +1,7 @@
|
|||
/*庞门正道标题体免费版-Regular*/
|
||||
@font-face {
|
||||
font-family: "title";
|
||||
src: url('./PangMenZhengDaoBiaoTiTiMianFeiBan-2.ttf');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 625 B |
Binary file not shown.
|
After Width: | Height: | Size: 265 B |
Binary file not shown.
|
After Width: | Height: | Size: 264 B |
Binary file not shown.
|
After Width: | Height: | Size: 186 B |
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -8,7 +8,8 @@ moment.locale('zh-cn', {
|
|||
weekdays: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
|
||||
|
||||
})
|
||||
|
||||
// 引入字体
|
||||
import "@/assets/font/font.css"
|
||||
// 引入 echarts
|
||||
import * as echarts from "echarts";
|
||||
// element-plus中文
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
color: rgba(221, 255, 253, 1);
|
||||
}
|
||||
p,ul,li{
|
||||
margin: 0;
|
||||
|
|
@ -22,6 +23,32 @@ p,ul,li{
|
|||
z-index:99;
|
||||
|
||||
}
|
||||
.unit{
|
||||
font-size:.8rem;
|
||||
color:rgba(221, 255, 253, 1);
|
||||
font-weight: normal;
|
||||
}
|
||||
.page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&-right-box, &-left-box {
|
||||
height: 100%;
|
||||
width: vw(450);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&-right-box {
|
||||
padding-right: 2.375rem;
|
||||
}
|
||||
|
||||
&-left-box {
|
||||
padding-left: 2.375rem;
|
||||
}
|
||||
}
|
||||
.m100{
|
||||
position: relative;
|
||||
top:2rem;
|
||||
|
|
@ -36,8 +63,9 @@ p,ul,li{
|
|||
background-size: 100% 100%;
|
||||
}
|
||||
.title{
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
font-family: "title";
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
padding-left: 2.75rem;
|
||||
padding-right:1rem;
|
||||
|
|
@ -49,6 +77,7 @@ p,ul,li{
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
span{}
|
||||
p{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -56,7 +85,7 @@ p,ul,li{
|
|||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.year,.month{
|
||||
.year,.month,.day{
|
||||
padding: 0 0.8rem;
|
||||
//display: inline-block;
|
||||
//background-color: #092624;
|
||||
|
|
@ -64,6 +93,9 @@ p,ul,li{
|
|||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.day{
|
||||
margin-left: .5rem;
|
||||
}
|
||||
.year{
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,646 @@
|
|||
<script setup>
|
||||
import {ref, onMounted} from "vue";
|
||||
import * as echarts from "echarts";
|
||||
// 各系统能耗概况
|
||||
const systemTab = [{name: '空调'}, {name: '照明'}, {name: '展陈'}, {name: '消防'}, {name: '电梯'}]
|
||||
const systemTabIndex = ref(0)
|
||||
const systemLeftList = ref([
|
||||
{
|
||||
name: '今日用能峰值',
|
||||
value: '322',
|
||||
},
|
||||
{
|
||||
name: '本月用能峰值',
|
||||
value: '35422',
|
||||
}
|
||||
])
|
||||
const systemRightList = ref([
|
||||
[
|
||||
{
|
||||
name: '今日',
|
||||
value: '3122',
|
||||
unit:'kWh'
|
||||
},
|
||||
{
|
||||
name: '昨日',
|
||||
value: '9400',
|
||||
unit:'kWh'
|
||||
},
|
||||
{
|
||||
name:'同比',
|
||||
value:'-201',
|
||||
unit:'%'
|
||||
}
|
||||
],//日
|
||||
[
|
||||
{
|
||||
name: '本月',
|
||||
value: '3122',
|
||||
unit:'kWh'
|
||||
},
|
||||
{
|
||||
name: '上月',
|
||||
value: '9400',
|
||||
unit:'kWh'
|
||||
},
|
||||
{
|
||||
name:'同比',
|
||||
value:'-201',
|
||||
unit:'%'
|
||||
}
|
||||
],//月
|
||||
[
|
||||
{
|
||||
name: '今年',
|
||||
value: '3122',
|
||||
unit:'kWh'
|
||||
},
|
||||
{
|
||||
name: '去年',
|
||||
value: '9400',
|
||||
unit:'kWh'
|
||||
},
|
||||
{
|
||||
name:'同比',
|
||||
value:'-201',
|
||||
unit:'%'
|
||||
}
|
||||
]//年
|
||||
])
|
||||
const selectSystemTab = (index) => {
|
||||
systemTabIndex.value = index
|
||||
}
|
||||
|
||||
// 能耗总量echarts
|
||||
const drawTotalChart = () => {
|
||||
let myChart = echarts.init(document.getElementById('totalEnergy'))
|
||||
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: ["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: [
|
||||
{
|
||||
type: "value",
|
||||
name: "单位:kW",
|
||||
// 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(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: [100, 200, 300, 282, 283, 166, 100, 200, 300, 282, 283, 166, 283],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option)
|
||||
}
|
||||
// 定额管理charts
|
||||
const drawManagement = () => {
|
||||
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',
|
||||
// itemWidth:'10',
|
||||
textStyle: {
|
||||
color: "rgba(221, 255, 253, 1)"
|
||||
}
|
||||
},
|
||||
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: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "单位:kgce/m²",
|
||||
// padding:[0,10,0,0],
|
||||
nameTextStyle: {
|
||||
color: "#DDFFFD",
|
||||
align: "middle",
|
||||
padding: [0, -30, 0, 0],
|
||||
},
|
||||
min: 0,
|
||||
max: 18,
|
||||
splitNumber: 6,
|
||||
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: "单位建筑面积综合能耗",
|
||||
markLine: { //阈值
|
||||
//最大值和最小值
|
||||
data: [
|
||||
{
|
||||
yAxis: 9,
|
||||
label: {
|
||||
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],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option)
|
||||
}
|
||||
// 能效流向
|
||||
const drawEnergyFlow = () => {
|
||||
let myChart = echarts.init(document.getElementById('energyFlow'))
|
||||
let sourceData = [
|
||||
|
||||
{
|
||||
name: "电",
|
||||
nameValue: 1562,
|
||||
valueUnit: "KWh",
|
||||
},
|
||||
{
|
||||
name: "空调",
|
||||
nameValue: 562,
|
||||
valueUnit: "kWh",
|
||||
},
|
||||
{
|
||||
name: "照明",
|
||||
nameValue: 490,
|
||||
valueUnit: "kWh",
|
||||
},
|
||||
{
|
||||
name: "电梯",
|
||||
nameValue: 510,
|
||||
valueUnit: "kWh",
|
||||
},
|
||||
];
|
||||
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: [
|
||||
{
|
||||
type: "sankey",
|
||||
layout: "none",
|
||||
top: "5%",
|
||||
bottom: "4%",
|
||||
left: "6%",
|
||||
right: "5%",
|
||||
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)
|
||||
}
|
||||
// dom加载
|
||||
onMounted(() => {
|
||||
// 能耗总量
|
||||
drawTotalChart()
|
||||
// 定额管理
|
||||
drawManagement()
|
||||
// 能效流向
|
||||
drawEnergyFlow()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
能效
|
||||
</div>
|
||||
<div class="page m100">
|
||||
<div class="page-left-box">
|
||||
<!-- 能耗总量-->
|
||||
<div class="title">
|
||||
<span>能耗总量</span>
|
||||
<p>
|
||||
<span class="month">月</span>
|
||||
<span class="day">日</span>
|
||||
</p>
|
||||
</div>
|
||||
<div id="totalEnergy" class="margin10 box-bg"></div>
|
||||
<!-- 能效对标（定额管理）-->
|
||||
<div class="title margin10">
|
||||
<span>能效对标（定额管理）</span>
|
||||
<p>
|
||||
<span class="year">年</span>
|
||||
<span class="month">月</span>
|
||||
</p>
|
||||
</div>
|
||||
<div id="management" class="margin10 box-bg">
|
||||
|
||||
</div>
|
||||
<!-- 能效流向 -->
|
||||
<div class="title margin10">
|
||||
<span>能效流向</span>
|
||||
</div>
|
||||
<div id="energyFlow" class="margin10 box-bg"></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(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 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="system-content-right">
|
||||
<div class="system-content-right-item" v-for="(item,index) in systemRightList">
|
||||
<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">年</span>
|
||||
<span class="month">月</span>
|
||||
<span class="day">日</span>
|
||||
</p>
|
||||
</div>
|
||||
<div id="exhibitionLoad" class="margin10 box-bg"></div>
|
||||
<!-- 电费电价-->
|
||||
<div class="title margin10">
|
||||
<span>电费电价</span>
|
||||
</div>
|
||||
<div id="ranking" class="margin10 box-bg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.system-tab {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
padding-top: .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: .8rem;
|
||||
padding: .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%;
|
||||
text-align: center;
|
||||
font-size: .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: .8rem;
|
||||
padding: 0 .5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 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>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="overview m100">
|
||||
<div class="overview-left-box">
|
||||
<div class="page m100">
|
||||
<div class="page-left-box">
|
||||
<!-- 实时负荷-->
|
||||
<div class="title">
|
||||
<span>实时负荷</span>
|
||||
|
|
@ -15,9 +15,9 @@
|
|||
<div class="title margin10">
|
||||
<span>负荷分类</span>
|
||||
</div>
|
||||
<div class="margin10 box-bg"></div>
|
||||
<div class="margin10 box-bg" id="loadClassification"></div>
|
||||
</div>
|
||||
<div class="overview-right-box">
|
||||
<div class="page-right-box">
|
||||
<!-- 空调负荷 -->
|
||||
<div class="title" >
|
||||
<span>空调负荷</span>
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
<div class="title margin10">
|
||||
<span>配电回路排名</span>
|
||||
</div>
|
||||
<div class="margin10 box-bg"></div>
|
||||
<div class="margin10 box-bg" id="ranking"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -40,6 +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
|
||||
}
|
||||
//实时负荷
|
||||
function getRealTimeLoad() {
|
||||
let myChart = echarts.init(document.getElementById("realTimeLoad"));
|
||||
|
|
@ -56,7 +59,6 @@ function getRealTimeLoad() {
|
|||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
//坐标轴轴线相关设置。数学上的x轴
|
||||
show: true,
|
||||
|
|
@ -134,10 +136,10 @@ function getDailyElectricityConsumption() {
|
|||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
const xAxisPoint = shape.xAxisPoint;
|
||||
const c0 = [shape.x - 10, shape.y];
|
||||
const c1 = [shape.x + 10, shape.y];
|
||||
const c2 = [xAxisPoint[0] + 10, xAxisPoint[1]];
|
||||
const c3 = [xAxisPoint[0] - 10, xAxisPoint[1]];
|
||||
const c0 = [shape.x - 7, shape.y];
|
||||
const c1 = [shape.x + 7, shape.y];
|
||||
const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
|
||||
const c3 = [xAxisPoint[0] - 7, xAxisPoint[1]];
|
||||
ctx
|
||||
.moveTo(c0[0], c0[1])
|
||||
.lineTo(c1[0], c1[1])
|
||||
|
|
@ -155,10 +157,10 @@ function getDailyElectricityConsumption() {
|
|||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
const xAxisPoint = shape.xAxisPoint;
|
||||
const c1 = [shape.x + 9, shape.y];
|
||||
const c2 = [xAxisPoint[0] + 9, xAxisPoint[1]];
|
||||
const c3 = [xAxisPoint[0] + 9 + 8, xAxisPoint[1] - 10];
|
||||
const c4 = [shape.x + 7 + 8, shape.y - 5];
|
||||
const c1 = [shape.x + 7, shape.y];
|
||||
const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
|
||||
const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 10];
|
||||
const c4 = [shape.x + 7 + 7, shape.y - 5];
|
||||
ctx
|
||||
.moveTo(c1[0], c1[1])
|
||||
.lineTo(c2[0], c2[1])
|
||||
|
|
@ -175,10 +177,10 @@ function getDailyElectricityConsumption() {
|
|||
y: 0,
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
const c1 = [shape.x - 10, shape.y];
|
||||
const c2 = [shape.x + 10, shape.y];
|
||||
const c1 = [shape.x - 7, shape.y];
|
||||
const c2 = [shape.x + 8, shape.y];
|
||||
const c3 = [shape.x + 15, shape.y - 5];
|
||||
const c4 = [shape.x - 5, shape.y - 5];
|
||||
const c4 = [shape.x - 2, shape.y - 5];
|
||||
ctx
|
||||
.moveTo(c1[0], c1[1])
|
||||
.lineTo(c2[0], c2[1])
|
||||
|
|
@ -193,16 +195,16 @@ function getDailyElectricityConsumption() {
|
|||
echarts.graphic.registerShape("CubeRight", CubeRight);
|
||||
echarts.graphic.registerShape("CubeTop", CubeTop);
|
||||
let xAxisData = [
|
||||
"北京",
|
||||
"上海",
|
||||
"天津",
|
||||
"南京",
|
||||
"深圳",
|
||||
"重庆",
|
||||
"青岛",
|
||||
"大连",
|
||||
"沈阳",
|
||||
"哈尔滨",
|
||||
"08:00",
|
||||
"09:00",
|
||||
"10:00",
|
||||
"11:00",
|
||||
"12:00",
|
||||
"13:00",
|
||||
"14:00",
|
||||
"15:00",
|
||||
"16:00",
|
||||
"17:00",
|
||||
];
|
||||
let seriesData = [100, 200, 300, 400, 200, 250, 360, 250, 340, 280];
|
||||
// 绿色渐变
|
||||
|
|
@ -210,8 +212,8 @@ function getDailyElectricityConsumption() {
|
|||
// 蓝色渐变
|
||||
let colorArr = [
|
||||
["rgba(0, 170, 193, 1)"],
|
||||
["rgba(0, 224, 255, 1)", "rgba(13,8,16,0)"],
|
||||
["rgba(0, 224, 255, 1)", "rgba(14,156,185,0)"],
|
||||
["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
|
||||
["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
|
||||
];
|
||||
let myChart = echarts.init(
|
||||
document.getElementById("dailyElectricityConsumption")
|
||||
|
|
@ -228,9 +230,9 @@ function getDailyElectricityConsumption() {
|
|||
},
|
||||
},
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "10%",
|
||||
top: "15%",
|
||||
left: "4%",
|
||||
right: "5%",
|
||||
top: "18%",
|
||||
bottom: "5%",
|
||||
containLabel: true,
|
||||
},
|
||||
|
|
@ -241,31 +243,37 @@ function getDailyElectricityConsumption() {
|
|||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: "rgba(255, 255, 255, 0.60)",
|
||||
type: "solid",
|
||||
color: "rgba(255, 255, 255, 0.20)",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(221, 255, 253, 1)",
|
||||
fontSize: 14,
|
||||
interval: 0,
|
||||
interval: 1,
|
||||
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
|
||||
formatter: function (value) {
|
||||
const length = value.length;
|
||||
if (length > 3) {
|
||||
const start = Math.floor(length / 2);
|
||||
const str =
|
||||
value.slice(0, start) + "\n" + value.slice(start, length);
|
||||
return str;
|
||||
}
|
||||
return value;
|
||||
},
|
||||
// formatter: function (value) {
|
||||
// const length = value.length;
|
||||
// if (length > 3) {
|
||||
// const start = Math.floor(length / 2);
|
||||
// const str =
|
||||
// value.slice(0, start) + "\n" + value.slice(start, length);
|
||||
// return str;
|
||||
// }
|
||||
// return value;
|
||||
// },
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
minInterval: 1,
|
||||
name: "单位:kW/h",
|
||||
nameTextStyle: {
|
||||
color: "#DDFFFD",
|
||||
},
|
||||
// minInterval: 1,
|
||||
// y轴（竖直线）
|
||||
axisLine: {
|
||||
show: false,
|
||||
|
|
@ -285,7 +293,7 @@ function getDailyElectricityConsumption() {
|
|||
// y轴文字
|
||||
axisLabel: {
|
||||
fontSize: 14,
|
||||
color: "rgba(255, 255, 255, 0.60)",
|
||||
color: "#DDFFFD",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
|
|
@ -397,6 +405,7 @@ function getDailyElectricityConsumption() {
|
|||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
|
||||
//空调负荷
|
||||
function drawAirConditioningLoad(){
|
||||
let myChart = echarts.init(document.getElementById('airConditioningLoad'))
|
||||
|
|
@ -414,7 +423,6 @@ function drawAirConditioningLoad(){
|
|||
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
//坐标轴轴线相关设置。数学上的x轴
|
||||
show: true,
|
||||
|
|
@ -517,7 +525,6 @@ function drawExhibitionLoad(){
|
|||
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
//坐标轴轴线相关设置。数学上的x轴
|
||||
show: true,
|
||||
|
|
@ -602,6 +609,318 @@ function drawExhibitionLoad(){
|
|||
],
|
||||
};
|
||||
myChart.setOption(option)
|
||||
|
||||
}
|
||||
// 配电回路排名
|
||||
function drawRanking(){
|
||||
let myChart = echarts.init(document.getElementById('ranking'))
|
||||
let option = {
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
bottom: "-10%",
|
||||
top: "8%",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "none",
|
||||
},
|
||||
formatter: function (params) {
|
||||
return (
|
||||
params[0].name +
|
||||
"<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>" +
|
||||
params[0].seriesName +
|
||||
" : " +
|
||||
Number(
|
||||
(params[0].value.toFixed(4) / 10000).toFixed(2)
|
||||
).toLocaleString() +
|
||||
" 万元<br/>"
|
||||
);
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
show: false,
|
||||
type: "value",
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
inverse: true,
|
||||
axisLabel: {
|
||||
padding: [0, 0, 10, -10],
|
||||
verticalAlign: "bottom",
|
||||
inside: true,
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize:"14"
|
||||
},
|
||||
formatter: function (value,index) {
|
||||
return "{a|TOP " + (index+1) +
|
||||
"}" + "{b|" + value +
|
||||
"}";
|
||||
},
|
||||
rich:{
|
||||
a:{
|
||||
width:45,
|
||||
// padding: [0, 8, 0,0],
|
||||
fontSize:"14",
|
||||
backgroundColor:{
|
||||
|
||||
image:getImageUrl('../../assets/images/rank-bg.png')
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
|
||||
data: ["空调系统", "照明系统", "消防系统", "电梯系统", "展陈系统"],
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
inverse: true,
|
||||
axisTick: "none",
|
||||
axisLine: "none",
|
||||
show: true,
|
||||
axisLabel: {
|
||||
padding: [0, 0, 10, -10],
|
||||
verticalAlign: "bottom",
|
||||
inside: true,
|
||||
textStyle: {
|
||||
|
||||
},
|
||||
formatter: function (value) {
|
||||
return "{a|" + (value / 10000).toLocaleString() +
|
||||
"}" + "{b|kWh}";
|
||||
},
|
||||
rich:{
|
||||
a:{
|
||||
fontSize: "16",
|
||||
color:"rgba(0, 255, 240, 1)",
|
||||
padding:[0,6,0,0]
|
||||
},
|
||||
b:{
|
||||
color: "#fff",
|
||||
fontSize: "12",
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
data: [50000000, 22000000, 10000000, 5000000, 1],
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "金额",
|
||||
type: "bar",
|
||||
zlevel: 1,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(29, 169, 153, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(223, 243, 240, 1)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
barWidth: 8,
|
||||
data: [50000000, 22000000, 10000000, 5000000, 200],
|
||||
},
|
||||
{
|
||||
name: "背景",
|
||||
type: "bar",
|
||||
barWidth: 10,
|
||||
barGap: "-115%",
|
||||
data: [50000000, 50000000, 50000000, 50000000, 50000000],
|
||||
itemStyle: {
|
||||
color: 'rgba(5, 33, 31, 0.32)',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option)
|
||||
}
|
||||
//负荷分类
|
||||
function getLoadClassification() {
|
||||
var trafficWay = [
|
||||
{
|
||||
name: "三类项目",
|
||||
value: 20,
|
||||
},
|
||||
{
|
||||
name: "天分重点",
|
||||
value: 30,
|
||||
},
|
||||
{
|
||||
name: "集团重点",
|
||||
value: 50,
|
||||
},
|
||||
];
|
||||
var total = 0;
|
||||
for (var i = 0; i < trafficWay.length; i++) {
|
||||
total += trafficWay[i].value;
|
||||
}
|
||||
|
||||
var data = [];
|
||||
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(
|
||||
{
|
||||
value: trafficWay[i].value,
|
||||
name: trafficWay[i].name,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 5,
|
||||
shadowBlur: 20,
|
||||
borderRadius: 10,
|
||||
borderColor: color[i],
|
||||
shadowColor: color[i],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: total * 0.04,
|
||||
name: "",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
color: "rgba(0, 0, 0, 0)",
|
||||
borderWidth: 0,
|
||||
},
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
let myChart = echarts.init(document.getElementById("loadClassification"));
|
||||
let option = {
|
||||
color: color,
|
||||
title: [
|
||||
{
|
||||
text: "1694",
|
||||
x: "47%",
|
||||
y: "42%",
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
fontFamily: "Verdana-Bold",
|
||||
fontSize: "24",
|
||||
fontWeight: "bold",
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "kw",
|
||||
x: "56%",
|
||||
y: "45%",
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
fontSize: "14",
|
||||
fontWeight: "100",
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "总负荷",
|
||||
left: "49%",
|
||||
top: "55%",
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
fontFamily: "MicrosoftYaHei",
|
||||
fontSize: "14",
|
||||
fontWeight: "100",
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "pie",
|
||||
clockWise: false,
|
||||
radius: [55, 59],
|
||||
hoverAnimation: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
color: "#FFFFFF",
|
||||
fontSize: 16,
|
||||
formatter: function (params) {
|
||||
var percent = 0;
|
||||
// var total = 0
|
||||
// for (var i = 0; i < trafficWay.length; i++) {
|
||||
// total += trafficWay[i].value
|
||||
// }
|
||||
percent = params.percent;
|
||||
// percent = ((params.value / total) * 100).toFixed(0)
|
||||
if (params.name !== "") {
|
||||
return (
|
||||
params.name +
|
||||
"\n" +
|
||||
`{a${params.dataIndex / 2}|` +
|
||||
percent +
|
||||
"%}"
|
||||
);
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
rich: {
|
||||
a0: {
|
||||
color: "#36E461",
|
||||
padding: [10, 0],
|
||||
fontSize: 15,
|
||||
},
|
||||
a1: {
|
||||
color: "#0BEFF9",
|
||||
padding: [10, 0],
|
||||
fontSize: 15,
|
||||
},
|
||||
a2: {
|
||||
color: "#9429E1",
|
||||
padding: [10, 0],
|
||||
fontSize: 15,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 50,
|
||||
show: true,
|
||||
color: "#00ffff",
|
||||
},
|
||||
},
|
||||
},
|
||||
data: data,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
//加载完dom执行
|
||||
onMounted(() => {
|
||||
|
|
@ -610,29 +929,16 @@ onMounted(() => {
|
|||
//当日累计用电量
|
||||
getDailyElectricityConsumption();
|
||||
// 空调负荷
|
||||
drawAirConditioningLoad()
|
||||
drawAirConditioningLoad();
|
||||
// 展陈负荷
|
||||
drawExhibitionLoad()
|
||||
drawExhibitionLoad();
|
||||
// 配电回路排名
|
||||
drawRanking();
|
||||
//负荷分类
|
||||
getLoadClassification();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.overview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&-right-box,
|
||||
&-left-box {
|
||||
height: 100%;
|
||||
width: vw(450);
|
||||
}
|
||||
&-right-box {
|
||||
padding-right: 2.375rem;
|
||||
}
|
||||
&-left-box {
|
||||
padding-left: 2.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@ onMounted(()=>{
|
|||
drawPowerEcharts()
|
||||
// 系统用电排名
|
||||
drawRankEcharts()
|
||||
//碳排放
|
||||
getCarbonEmission()
|
||||
})
|
||||
|
||||
const drawPowerEcharts = () =>{
|
||||
|
|
@ -175,6 +177,7 @@ const drawRankEcharts = () =>{
|
|||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize:"14"
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
|
|
@ -186,7 +189,7 @@ const drawRankEcharts = () =>{
|
|||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
data: ["大米", "玉米", "蔬菜", "鸡蛋", "坚果"],
|
||||
data: ["空调系统", "照明系统", "消防系统", "电梯系统", "展陈系统"],
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
|
|
@ -199,12 +202,25 @@ const drawRankEcharts = () =>{
|
|||
verticalAlign: "bottom",
|
||||
inside: true,
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: "12",
|
||||
|
||||
},
|
||||
formatter: function (value) {
|
||||
return (value / 10000).toLocaleString() + "kw/h";
|
||||
return "{a|" + (value / 10000).toLocaleString() +
|
||||
"}" + "{b|kWh}";
|
||||
},
|
||||
rich:{
|
||||
a:{
|
||||
fontSize: "16",
|
||||
color:"rgba(0, 255, 240, 1)",
|
||||
padding:[0,6,0,0]
|
||||
},
|
||||
b:{
|
||||
color: "#fff",
|
||||
fontSize: "12",
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
data: [50000000, 22000000, 10000000, 5000000, 1],
|
||||
},
|
||||
|
|
@ -243,13 +259,291 @@ const drawRankEcharts = () =>{
|
|||
};
|
||||
myChart.setOption(option)
|
||||
}
|
||||
//碳排放
|
||||
function getCarbonEmission() {
|
||||
const offsetX = 10; //bar宽
|
||||
const offsetY = 5; //倾斜角度
|
||||
// 绘制左侧面
|
||||
const CubeLeft = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
const xAxisPoint = shape.xAxisPoint;
|
||||
const c0 = [shape.x - 7, shape.y];
|
||||
const c1 = [shape.x + 7, shape.y];
|
||||
const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
|
||||
const c3 = [xAxisPoint[0] - 7, xAxisPoint[1]];
|
||||
ctx
|
||||
.moveTo(c0[0], c0[1])
|
||||
.lineTo(c1[0], c1[1])
|
||||
.lineTo(c2[0], c2[1])
|
||||
.lineTo(c3[0], c3[1])
|
||||
.closePath();
|
||||
ctx.stroke();
|
||||
},
|
||||
});
|
||||
// 绘制右侧面
|
||||
const CubeRight = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
const xAxisPoint = shape.xAxisPoint;
|
||||
const c1 = [shape.x + 7, shape.y];
|
||||
const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
|
||||
const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 10];
|
||||
const c4 = [shape.x + 7 + 7, shape.y - 5];
|
||||
ctx
|
||||
.moveTo(c1[0], c1[1])
|
||||
.lineTo(c2[0], c2[1])
|
||||
.lineTo(c3[0], c3[1])
|
||||
.lineTo(c4[0], c4[1])
|
||||
.closePath();
|
||||
ctx.stroke();
|
||||
},
|
||||
});
|
||||
// 绘制顶面
|
||||
const CubeTop = echarts.graphic.extendShape({
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
buildPath: function (ctx, shape) {
|
||||
const c1 = [shape.x - 7, shape.y];
|
||||
const c2 = [shape.x + 8, shape.y];
|
||||
const c3 = [shape.x + 15, shape.y - 5];
|
||||
const c4 = [shape.x - 2, shape.y - 5];
|
||||
ctx
|
||||
.moveTo(c1[0], c1[1])
|
||||
.lineTo(c2[0], c2[1])
|
||||
.lineTo(c3[0], c3[1])
|
||||
.lineTo(c4[0], c4[1])
|
||||
.closePath();
|
||||
ctx.stroke();
|
||||
},
|
||||
});
|
||||
// 注册三个面图形
|
||||
echarts.graphic.registerShape("CubeLeft", CubeLeft);
|
||||
echarts.graphic.registerShape("CubeRight", CubeRight);
|
||||
echarts.graphic.registerShape("CubeTop", CubeTop);
|
||||
let xAxisData = [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
];
|
||||
let seriesData = [100, 200, 300, 400, 200, 250,];
|
||||
// 绿色渐变
|
||||
// let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
|
||||
// 蓝色渐变
|
||||
let colorArr = [
|
||||
["rgba(0, 193, 113, 1)"],
|
||||
["rgba(0, 255, 140, 1)", "rgba(0, 255, 140,0)"],
|
||||
["rgba(0, 255, 140, 1)", "rgba(0, 255, 140,0)"],
|
||||
];
|
||||
let myChart = echarts.init(
|
||||
document.getElementById("carbonEmission")
|
||||
);
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
formatter: function (params, ticket, callback) {
|
||||
const item = params[1];
|
||||
return item.name + " : " + item.value;
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "4%",
|
||||
right: "5%",
|
||||
top: "18%",
|
||||
bottom: "5%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: xAxisData,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
type: "solid",
|
||||
color: "rgba(255, 255, 255, 0.20)",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(221, 255, 253, 1)",
|
||||
fontSize: 14,
|
||||
interval: 0,
|
||||
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
|
||||
// formatter: function (value) {
|
||||
// const length = value.length;
|
||||
// if (length > 3) {
|
||||
// const start = Math.floor(length / 2);
|
||||
// const str =
|
||||
// value.slice(0, start) + "\n" + value.slice(start, length);
|
||||
// return str;
|
||||
// }
|
||||
// return value;
|
||||
// },
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "单位:kW/h",
|
||||
nameTextStyle: {
|
||||
color: "#DDFFFD",
|
||||
},
|
||||
// minInterval: 1,
|
||||
// y轴（竖直线）
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
// y轴横向 标线
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(1, 39, 37, 0.30)",
|
||||
},
|
||||
},
|
||||
// y轴刻度线
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
// y轴文字
|
||||
axisLabel: {
|
||||
fontSize: 14,
|
||||
color: "#DDFFFD",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "custom",
|
||||
renderItem: (params, api) => {
|
||||
const location = api.coord([api.value(0), api.value(1)]);
|
||||
return {
|
||||
type: "group",
|
||||
children: [
|
||||
// 左侧面
|
||||
{
|
||||
type: "CubeLeft",
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0),
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
},
|
||||
style: {
|
||||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: colorArr[1][0],
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: colorArr[1][1],
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
// 右侧面
|
||||
{
|
||||
type: "CubeRight",
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0),
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
},
|
||||
style: {
|
||||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: colorArr[2][0],
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: colorArr[2][1],
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
// 顶部
|
||||
{
|
||||
type: "CubeTop",
|
||||
shape: {
|
||||
api,
|
||||
xValue: api.value(0),
|
||||
yValue: api.value(1),
|
||||
x: location[0],
|
||||
y: location[1],
|
||||
xAxisPoint: api.coord([api.value(0), 0]),
|
||||
},
|
||||
style: {
|
||||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: colorArr[0][0],
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: colorArr[0][0],
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
data: seriesData,
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: "top",
|
||||
formatter: (e) => {
|
||||
return e.value;
|
||||
},
|
||||
fontSize: 16,
|
||||
color: "#43C4F1",
|
||||
offset: [0, -5],
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
color: "transparent",
|
||||
},
|
||||
tooltip: {},
|
||||
data: seriesData,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="overview m100">
|
||||
<div class="page m100">
|
||||
|
||||
<div class="overview-left-box">
|
||||
<div class="page-left-box">
|
||||
<!-- 用电量-->
|
||||
<div class="title">
|
||||
<span>用电量</span>
|
||||
|
|
@ -279,11 +573,11 @@ const drawRankEcharts = () =>{
|
|||
<span class="month">月</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="margin10 box-bg">
|
||||
<div class="margin10 box-bg" id="carbonEmission">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview-right-box">
|
||||
<div class="page-right-box">
|
||||
<!-- 实时负荷 -->
|
||||
<div class="title">
|
||||
<span>实时负荷</span>
|
||||
|
|
@ -308,7 +602,9 @@ const drawRankEcharts = () =>{
|
|||
<div class="margin10 box-bg">
|
||||
<ul class="weather-station">
|
||||
<li v-for="(item,index) in weatherStation" >
|
||||
<p class="img" :style="'background-image:'+ getImageUrl(item.pic)"></p>
|
||||
<p class="img" :style="'background-image:'+ getImageUrl(item.pic)">
|
||||
<span>{{item.name}}</span>
|
||||
</p>
|
||||
<p><span class="wea-value">{{item.value}}</span><span class="unit" v-if="item.unit">{{ item.unit }}</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -327,19 +623,7 @@ const drawRankEcharts = () =>{
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.overview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&-right-box,&-left-box {
|
||||
height: 100%;
|
||||
width: vw(450);
|
||||
box-sizing:border-box;
|
||||
}
|
||||
&-right-box{padding-right: 2.375rem;}
|
||||
&-left-box{padding-left: 2.375rem;}
|
||||
|
||||
.real-time-load{
|
||||
width:100%;
|
||||
height:100%;
|
||||
|
|
@ -394,8 +678,15 @@ const drawRankEcharts = () =>{
|
|||
.img{
|
||||
margin-bottom: .3rem;
|
||||
width: 11.125rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 2.6rem;
|
||||
box-sizing: border-box;
|
||||
font-size: .9rem;
|
||||
font-style:italic;
|
||||
height:50%;
|
||||
color:rgba(221, 255, 253, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue