代码提交
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('_'),
|
weekdays: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
|
||||||
|
|
||||||
})
|
})
|
||||||
|
// 引入字体
|
||||||
|
import "@/assets/font/font.css"
|
||||||
// 引入 echarts
|
// 引入 echarts
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
// element-plus中文
|
// element-plus中文
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
color: rgba(221, 255, 253, 1);
|
||||||
}
|
}
|
||||||
p,ul,li{
|
p,ul,li{
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -22,6 +23,32 @@ p,ul,li{
|
||||||
z-index:99;
|
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{
|
.m100{
|
||||||
position: relative;
|
position: relative;
|
||||||
top:2rem;
|
top:2rem;
|
||||||
|
|
@ -36,8 +63,9 @@ p,ul,li{
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
.title{
|
.title{
|
||||||
font-size: 22px;
|
font-family: "title";
|
||||||
font-weight: bold;
|
font-size: 20px;
|
||||||
|
font-weight: 400;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding-left: 2.75rem;
|
padding-left: 2.75rem;
|
||||||
padding-right:1rem;
|
padding-right:1rem;
|
||||||
|
|
@ -49,6 +77,7 @@ p,ul,li{
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
span{}
|
||||||
p{
|
p{
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -56,7 +85,7 @@ p,ul,li{
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
.year,.month{
|
.year,.month,.day{
|
||||||
padding: 0 0.8rem;
|
padding: 0 0.8rem;
|
||||||
//display: inline-block;
|
//display: inline-block;
|
||||||
//background-color: #092624;
|
//background-color: #092624;
|
||||||
|
|
@ -64,8 +93,11 @@ p,ul,li{
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
.day{
|
||||||
|
margin-left: .5rem;
|
||||||
|
}
|
||||||
.year{
|
.year{
|
||||||
margin-right: .5rem;
|
margin-right: .5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,646 @@
|
||||||
<script setup>
|
<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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="page m100">
|
||||||
能效
|
<div class="page-left-box">
|
||||||
</div>
|
<!-- 能耗总量-->
|
||||||
|
<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>
|
</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>
|
</style>
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="overview m100">
|
<div class="page m100">
|
||||||
<div class="overview-left-box">
|
<div class="page-left-box">
|
||||||
<!-- 实时负荷-->
|
<!-- 实时负荷-->
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<span>实时负荷</span>
|
<span>实时负荷</span>
|
||||||
|
|
@ -15,9 +15,9 @@
|
||||||
<div class="title margin10">
|
<div class="title margin10">
|
||||||
<span>负荷分类</span>
|
<span>负荷分类</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="margin10 box-bg"></div>
|
<div class="margin10 box-bg" id="loadClassification"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="overview-right-box">
|
<div class="page-right-box">
|
||||||
<!-- 空调负荷 -->
|
<!-- 空调负荷 -->
|
||||||
<div class="title" >
|
<div class="title" >
|
||||||
<span>空调负荷</span>
|
<span>空调负荷</span>
|
||||||
|
|
@ -32,7 +32,7 @@
|
||||||
<div class="title margin10">
|
<div class="title margin10">
|
||||||
<span>配电回路排名</span>
|
<span>配电回路排名</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="margin10 box-bg"></div>
|
<div class="margin10 box-bg" id="ranking"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -40,6 +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)=>{
|
||||||
|
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"));
|
||||||
|
|
@ -56,7 +59,6 @@ function getRealTimeLoad() {
|
||||||
xAxis: [
|
xAxis: [
|
||||||
{
|
{
|
||||||
type: "category",
|
type: "category",
|
||||||
boundaryGap: false,
|
|
||||||
axisLine: {
|
axisLine: {
|
||||||
//坐标轴轴线相关设置。数学上的x轴
|
//坐标轴轴线相关设置。数学上的x轴
|
||||||
show: true,
|
show: true,
|
||||||
|
|
@ -134,10 +136,10 @@ function getDailyElectricityConsumption() {
|
||||||
},
|
},
|
||||||
buildPath: function (ctx, shape) {
|
buildPath: function (ctx, shape) {
|
||||||
const xAxisPoint = shape.xAxisPoint;
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
const c0 = [shape.x - 10, shape.y];
|
const c0 = [shape.x - 7, shape.y];
|
||||||
const c1 = [shape.x + 10, shape.y];
|
const c1 = [shape.x + 7, shape.y];
|
||||||
const c2 = [xAxisPoint[0] + 10, xAxisPoint[1]];
|
const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
|
||||||
const c3 = [xAxisPoint[0] - 10, xAxisPoint[1]];
|
const c3 = [xAxisPoint[0] - 7, xAxisPoint[1]];
|
||||||
ctx
|
ctx
|
||||||
.moveTo(c0[0], c0[1])
|
.moveTo(c0[0], c0[1])
|
||||||
.lineTo(c1[0], c1[1])
|
.lineTo(c1[0], c1[1])
|
||||||
|
|
@ -155,10 +157,10 @@ function getDailyElectricityConsumption() {
|
||||||
},
|
},
|
||||||
buildPath: function (ctx, shape) {
|
buildPath: function (ctx, shape) {
|
||||||
const xAxisPoint = shape.xAxisPoint;
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
const c1 = [shape.x + 9, shape.y];
|
const c1 = [shape.x + 7, shape.y];
|
||||||
const c2 = [xAxisPoint[0] + 9, xAxisPoint[1]];
|
const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
|
||||||
const c3 = [xAxisPoint[0] + 9 + 8, xAxisPoint[1] - 10];
|
const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 10];
|
||||||
const c4 = [shape.x + 7 + 8, shape.y - 5];
|
const c4 = [shape.x + 7 + 7, shape.y - 5];
|
||||||
ctx
|
ctx
|
||||||
.moveTo(c1[0], c1[1])
|
.moveTo(c1[0], c1[1])
|
||||||
.lineTo(c2[0], c2[1])
|
.lineTo(c2[0], c2[1])
|
||||||
|
|
@ -175,10 +177,10 @@ function getDailyElectricityConsumption() {
|
||||||
y: 0,
|
y: 0,
|
||||||
},
|
},
|
||||||
buildPath: function (ctx, shape) {
|
buildPath: function (ctx, shape) {
|
||||||
const c1 = [shape.x - 10, shape.y];
|
const c1 = [shape.x - 7, shape.y];
|
||||||
const c2 = [shape.x + 10, shape.y];
|
const c2 = [shape.x + 8, shape.y];
|
||||||
const c3 = [shape.x + 15, shape.y - 5];
|
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
|
ctx
|
||||||
.moveTo(c1[0], c1[1])
|
.moveTo(c1[0], c1[1])
|
||||||
.lineTo(c2[0], c2[1])
|
.lineTo(c2[0], c2[1])
|
||||||
|
|
@ -193,16 +195,16 @@ function getDailyElectricityConsumption() {
|
||||||
echarts.graphic.registerShape("CubeRight", CubeRight);
|
echarts.graphic.registerShape("CubeRight", CubeRight);
|
||||||
echarts.graphic.registerShape("CubeTop", CubeTop);
|
echarts.graphic.registerShape("CubeTop", CubeTop);
|
||||||
let xAxisData = [
|
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];
|
let seriesData = [100, 200, 300, 400, 200, 250, 360, 250, 340, 280];
|
||||||
// 绿色渐变
|
// 绿色渐变
|
||||||
|
|
@ -210,8 +212,8 @@ function getDailyElectricityConsumption() {
|
||||||
// 蓝色渐变
|
// 蓝色渐变
|
||||||
let colorArr = [
|
let colorArr = [
|
||||||
["rgba(0, 170, 193, 1)"],
|
["rgba(0, 170, 193, 1)"],
|
||||||
["rgba(0, 224, 255, 1)", "rgba(13,8,16,0)"],
|
["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
|
||||||
["rgba(0, 224, 255, 1)", "rgba(14,156,185,0)"],
|
["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
|
||||||
];
|
];
|
||||||
let myChart = echarts.init(
|
let myChart = echarts.init(
|
||||||
document.getElementById("dailyElectricityConsumption")
|
document.getElementById("dailyElectricityConsumption")
|
||||||
|
|
@ -228,9 +230,9 @@ function getDailyElectricityConsumption() {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: "5%",
|
left: "4%",
|
||||||
right: "10%",
|
right: "5%",
|
||||||
top: "15%",
|
top: "18%",
|
||||||
bottom: "5%",
|
bottom: "5%",
|
||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
|
|
@ -241,31 +243,37 @@ function getDailyElectricityConsumption() {
|
||||||
show: true,
|
show: true,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
width: 1,
|
width: 1,
|
||||||
color: "rgba(255, 255, 255, 0.60)",
|
type: "solid",
|
||||||
|
color: "rgba(255, 255, 255, 0.20)",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
|
color: "rgba(221, 255, 253, 1)",
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
interval: 0,
|
interval: 1,
|
||||||
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
|
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
|
||||||
formatter: function (value) {
|
// formatter: function (value) {
|
||||||
const length = value.length;
|
// const length = value.length;
|
||||||
if (length > 3) {
|
// if (length > 3) {
|
||||||
const start = Math.floor(length / 2);
|
// const start = Math.floor(length / 2);
|
||||||
const str =
|
// const str =
|
||||||
value.slice(0, start) + "\n" + value.slice(start, length);
|
// value.slice(0, start) + "\n" + value.slice(start, length);
|
||||||
return str;
|
// return str;
|
||||||
}
|
// }
|
||||||
return value;
|
// return value;
|
||||||
},
|
// },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: "value",
|
type: "value",
|
||||||
minInterval: 1,
|
name: "单位:kW/h",
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#DDFFFD",
|
||||||
|
},
|
||||||
|
// minInterval: 1,
|
||||||
// y轴（竖直线）
|
// y轴（竖直线）
|
||||||
axisLine: {
|
axisLine: {
|
||||||
show: false,
|
show: false,
|
||||||
|
|
@ -285,7 +293,7 @@ function getDailyElectricityConsumption() {
|
||||||
// y轴文字
|
// y轴文字
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
color: "rgba(255, 255, 255, 0.60)",
|
color: "#DDFFFD",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
|
|
@ -397,6 +405,7 @@ function getDailyElectricityConsumption() {
|
||||||
};
|
};
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
}
|
}
|
||||||
|
|
||||||
//空调负荷
|
//空调负荷
|
||||||
function drawAirConditioningLoad(){
|
function drawAirConditioningLoad(){
|
||||||
let myChart = echarts.init(document.getElementById('airConditioningLoad'))
|
let myChart = echarts.init(document.getElementById('airConditioningLoad'))
|
||||||
|
|
@ -414,7 +423,6 @@ function drawAirConditioningLoad(){
|
||||||
|
|
||||||
{
|
{
|
||||||
type: "category",
|
type: "category",
|
||||||
boundaryGap: false,
|
|
||||||
axisLine: {
|
axisLine: {
|
||||||
//坐标轴轴线相关设置。数学上的x轴
|
//坐标轴轴线相关设置。数学上的x轴
|
||||||
show: true,
|
show: true,
|
||||||
|
|
@ -517,7 +525,6 @@ function drawExhibitionLoad(){
|
||||||
|
|
||||||
{
|
{
|
||||||
type: "category",
|
type: "category",
|
||||||
boundaryGap: false,
|
|
||||||
axisLine: {
|
axisLine: {
|
||||||
//坐标轴轴线相关设置。数学上的x轴
|
//坐标轴轴线相关设置。数学上的x轴
|
||||||
show: true,
|
show: true,
|
||||||
|
|
@ -602,6 +609,318 @@ function drawExhibitionLoad(){
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
myChart.setOption(option)
|
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执行
|
//加载完dom执行
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|
@ -610,29 +929,16 @@ onMounted(() => {
|
||||||
//当日累计用电量
|
//当日累计用电量
|
||||||
getDailyElectricityConsumption();
|
getDailyElectricityConsumption();
|
||||||
// 空调负荷
|
// 空调负荷
|
||||||
drawAirConditioningLoad()
|
drawAirConditioningLoad();
|
||||||
// 展陈负荷
|
// 展陈负荷
|
||||||
drawExhibitionLoad()
|
drawExhibitionLoad();
|
||||||
|
// 配电回路排名
|
||||||
|
drawRanking();
|
||||||
|
//负荷分类
|
||||||
|
getLoadClassification();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -25,6 +25,8 @@ onMounted(()=>{
|
||||||
drawPowerEcharts()
|
drawPowerEcharts()
|
||||||
// 系统用电排名
|
// 系统用电排名
|
||||||
drawRankEcharts()
|
drawRankEcharts()
|
||||||
|
//碳排放
|
||||||
|
getCarbonEmission()
|
||||||
})
|
})
|
||||||
|
|
||||||
const drawPowerEcharts = () =>{
|
const drawPowerEcharts = () =>{
|
||||||
|
|
@ -175,6 +177,7 @@ const drawRankEcharts = () =>{
|
||||||
show: true,
|
show: true,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
|
fontSize:"14"
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
|
|
@ -186,7 +189,7 @@ const drawRankEcharts = () =>{
|
||||||
axisLine: {
|
axisLine: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
data: ["大米", "玉米", "蔬菜", "鸡蛋", "坚果"],
|
data: ["空调系统", "照明系统", "消防系统", "电梯系统", "展陈系统"],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "category",
|
type: "category",
|
||||||
|
|
@ -199,12 +202,25 @@ const drawRankEcharts = () =>{
|
||||||
verticalAlign: "bottom",
|
verticalAlign: "bottom",
|
||||||
inside: true,
|
inside: true,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#ffffff",
|
|
||||||
fontSize: "12",
|
|
||||||
},
|
},
|
||||||
formatter: function (value) {
|
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],
|
data: [50000000, 22000000, 10000000, 5000000, 1],
|
||||||
},
|
},
|
||||||
|
|
@ -243,13 +259,291 @@ const drawRankEcharts = () =>{
|
||||||
};
|
};
|
||||||
myChart.setOption(option)
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
<div class="overview m100">
|
<div class="page m100">
|
||||||
|
|
||||||
<div class="overview-left-box">
|
<div class="page-left-box">
|
||||||
<!-- 用电量-->
|
<!-- 用电量-->
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<span>用电量</span>
|
<span>用电量</span>
|
||||||
|
|
@ -279,11 +573,11 @@ const drawRankEcharts = () =>{
|
||||||
<span class="month">月</span>
|
<span class="month">月</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="margin10 box-bg">
|
<div class="margin10 box-bg" id="carbonEmission">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="overview-right-box">
|
<div class="page-right-box">
|
||||||
<!-- 实时负荷 -->
|
<!-- 实时负荷 -->
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<span>实时负荷</span>
|
<span>实时负荷</span>
|
||||||
|
|
@ -308,7 +602,9 @@ const drawRankEcharts = () =>{
|
||||||
<div class="margin10 box-bg">
|
<div class="margin10 box-bg">
|
||||||
<ul class="weather-station">
|
<ul class="weather-station">
|
||||||
<li v-for="(item,index) in weatherStation" >
|
<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>
|
<p><span class="wea-value">{{item.value}}</span><span class="unit" v-if="item.unit">{{ item.unit }}</span></p>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -327,19 +623,7 @@ const drawRankEcharts = () =>{
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<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{
|
.real-time-load{
|
||||||
width:100%;
|
width:100%;
|
||||||
height:100%;
|
height:100%;
|
||||||
|
|
@ -394,8 +678,15 @@ const drawRankEcharts = () =>{
|
||||||
.img{
|
.img{
|
||||||
margin-bottom: .3rem;
|
margin-bottom: .3rem;
|
||||||
width: 11.125rem;
|
width: 11.125rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 2.6rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: .9rem;
|
||||||
|
font-style:italic;
|
||||||
height:50%;
|
height:50%;
|
||||||
|
color:rgba(221, 255, 253, 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue