Skip to content

Z
zh_zcb-ems
Commit a9a6516d authored by huangzihao's avatar huangzihao
Browse files
Options

修改

parent 3a9ce1ba
Show whitespace changes
Inline Side-by-side
Showing with 311 additions and 340 deletions
src/css/index.css
View file @ a9a6516d
......@@ -233,6 +233,12 @@ li {
.content .st-box .echarts-box .legend li:nth-child(2)::before {
background: #01faf2;
}
.content .st-box .echarts-box .legend li:nth-child(3)::before {
background: #eef043;
}
.content .st-box .echarts-box .legend li:nth-child(4)::before {
background: #c596ff;
}
.content .st-box .echarts-box .echarts-content {
width: 380px;
height: 160px;
......@@ -259,6 +265,7 @@ li {
width: 865px;
height: 540px;
position: relative;
top: 0px;
}
.content .center-section .justify-between {
display: -webkit-box;
......@@ -339,6 +346,9 @@ li {
top: 0;
left: -72px;
}
.content .center-section .center-top .center-content {
margin-top: 150px;
}
.content .center-section .center-top .center-content .box_1 {
width: 822px;
height: 78px;
......@@ -439,7 +449,7 @@ li {
.content .center-section .center-top .center-content .center-title-bottom {
position: absolute;
left: 158px;
top: 532px;
top: 825px;
width: 549px;
height: 14px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAi4AAAAXCAYAAAAsoMSTAAAAAXNSR0IArs4c6QAAAsNJREFUeF7t2rFrE1EcB/DfpTGpi0jp1M1NcBFEcHUS0cXRzb9BHAQH418hgkMDzioOrq6CuDi5uEmmokJbam3Sk8NLCepwd03ucuFzcKRN37336+fdhe+9SxI2AgQIECBAgEBLBJKW1KlMAgQIECBAgEAILk4CAgQIECBAoDUCgktrpkqhBAgQIECAgODiHCBAgAABAgRaIyC4tGaqFEqAAAECBAgILs4BAgQIECBAoDUCgktrpkqhBCoJTK/xVb7W01xm+loJykEECLRDYJU/zNoxA6okMH+B7LrO9s5/9vmP1myPxxHx954FGCGm2XkxOoGFCQguC6PVMYHaBaaBZS0iuhHRi4j1/PVMRGTvZ2FmVbYssEwi4igifkXEYf5z9nv2fvb3bBNiVmXG/R8E8ruyMhCCThktbQnUJzBdYcnCST8izm7cfH6rv3nxfmdt/VJ9ZTQwUhrp5Gj//fjHl+HOuwdv4+DbXh5ixnmAsQLTwLQYkkBBgdI3FkWDyOxz8uldXcGaNCNAYMECs6Glt3H7xY3++QsPO93+5QWPu3Tdp8fjUfrz+3Dv85vh7qeno4gQXpZulhRE4GQldPamonCAKRNcZp+XcydAYDkETr7Psnnn5fXeua1HSdK9thylNVrF4WRy8Gq8+/XZzuu7H/LHRlZeGp0SgxP4R2D2+2nzCy5b9z4+TiIdACdAgAABAgQILEIgjWQw2r7ypEjfhVZchJcilNoQIECAAAECZQXSSAej7auFQkvWd6HgMlNE2fZl69eeAIHTC7hO/xgWXno+PbkeCBCoKFD6OvUBV1HaYQQIECBAgED9AoJL/eZGJECAAAECBCoKCC4V4RxGgAABAgQI1C8guNRvbkQCBAgQIECgooDgUhHOYQQIECBAgED9AoJL/eZGJECAAAECBCoKCC4V4RxGgAABAgQI1C/wG9ZbZxhkNI47AAAAAElFTkSuQmCC") -4px -5px no-repeat;
......@@ -452,7 +462,7 @@ li {
width: 818px;
position: absolute;
left: 31px;
top: 135px;
top: 240px;
}
.content .center-section .center-bottom .flex-row {
display: -webkit-box;
......
src/index.html
View file @ a9a6516d
<html>
<head>
<head>
<title></title>
<link href="./css/index.css" rel="stylesheet" type="text/css" />
<link href="./css/stat-bar.css" rel="stylesheet" type="text/css" />
</head>
</head>
<body>
<body>
<!--顶部标题栏-->
<div class="header">
<div class="header-left">
......@@ -31,22 +30,22 @@
<div class="stat-bar">
<div class="stat-bar-inner">
<div class="stat-item">
<div class="tit">累计用电量</div>
<div class="tit">年总能耗</div>
<div class="scroll-box"></div>
<div class="suffix">万kWh</div>
</div>
<div class="stat-item">
<div class="tit">累计发电量</div>
<div class="tit">年总发电量</div>
<div class="scroll-box"></div>
<div class="suffix">万kWh</div>
</div>
<div class="stat-item">
<div class="tit">累计碳排放量</div>
<div class="tit">年总减碳量</div>
<div class="scroll-box"></div>
<div class="suffix">万t</div>
</div>
<div class="stat-item">
<div class="tit">累计减碳量</div>
<div class="tit">年能用费用</div>
<div class="scroll-box"></div>
<div class="suffix">万t</div>
</div>
......@@ -66,10 +65,9 @@
<span class="bg-center"></span>
<div class="echarts-box">
<div class="echarts-header">
<div class="title">并网点电量（kWh）</div>
<div class="title">发电日曲线（kWh）</div>
<ul class="legend">
<li>用电量</li>
<li>上送电量</li>
</ul>
</div>
<div class="echarts-content" id="line_chart_1"></div>
......@@ -80,9 +78,9 @@
<span class="bg-center"></span>
<div class="echarts-box">
<div class="echarts-header">
<div class="title">总负荷日曲线（kWh）</div>
<ul class="legend">
<li>楼层负荷</li>
<li>充电桩负荷</li>
</ul>
</div>
<div class="echarts-content" id="line_chart_2"></div>
......@@ -93,12 +91,15 @@
<span class="bg-center"></span>
<div class="echarts-box">
<div class="echarts-header">
<div class="title">7日负荷占比（%）</div>
<ul class="legend">
<li>负荷预测</li>
<li>负荷功率</li>
<li>暖通</li>
<li>照明</li>
<li>电梯</li>
<li>热水</li>
</ul>
</div>
<div class="echarts-content" id="line_chart_3"></div>
<div class="echarts-content" id="pie_chart_3"></div>
</div>
</div>
</div>
......@@ -159,52 +160,6 @@
<div class="center-title-bottom"></div>
</div>
</div>
<!--下部统计区域-->
<div class="center-bottom">
<!--科技感框-->
<div class="section_wrap">
<div class="section_in flex-row">
<ul class="section_list">
<li>
<div class="border">
<span></span>
</div>
<div class="content">
<div class="title">峰谷差</div>
<div class="percentage s-ring-1">--<span>%</span></div>
</div>
</li>
<li>
<div class="border">
<span></span>
</div>
<div class="content">
<div class="title">消纳率</div>
<div class="percentage s-ring-2">--<span>%</span></div>
</div>
</li>
<li>
<div class="border">
<span></span>
</div>
<div class="content">
<div class="title">碳排系数</div>
<div class="percentage s-ring-3">--<span>%</span></div>
</div>
</li>
<li>
<div class="border">
<span></span>
</div>
<div class="content">
<div class="title">系统效率</div>
<div class="percentage s-ring-4">--<span>%</span></div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--右侧内容区-->
<div class="right-section">
......@@ -212,12 +167,15 @@
<span class="bg-center"></span>
<div class="echarts-box">
<div class="echarts-header">
<div class="title">基本用能日负荷</div>
<ul class="legend">
<li>光伏发电量</li>
<li>碳减排量</li>
<li>暖通</li>
<li>照明</li>
<li>电梯</li>
<li>热水</li>
</ul>
</div>
<div class="echarts-content" id="line_chart_4"></div>
<div class="echarts-content" id="pie_chart_4"></div>
</div>
</div>
......@@ -225,12 +183,10 @@
<span class="bg-center"></span>
<div class="echarts-box">
<div class="echarts-header">
<div class="title">发电计划(kW)</div>
<div class="title">定制曲线运行跟踪</div>
<ul class="legend">
<li>AC/DC</li>
<li>储能</li>
<li>光伏</li>
<li>负荷</li>
<li>参考</li>
<li>实际</li>
</ul>
</div>
<div class="echarts-content" id="line_chart_5"></div>
......@@ -241,9 +197,9 @@
<span class="bg-center"></span>
<div class="echarts-box">
<div class="echarts-header">
<div class="title">系统综合运行效率</div>
<ul class="legend">
<li>光伏预测</li>
<li>光伏功率</li>
</ul>
</div>
<div class="echarts-content" id="line_chart_6"></div>
......@@ -251,9 +207,9 @@
</div>
</div>
</div>
</body>
</body>
<script src="https://cdn.ucyber.cn/common/echarts.js"></script>
<script src="./js/tween.umd.js"></script>
<script src="./js/index.js"></script>
<script src="https://cdn.ucyber.cn/common/echarts.js"></script>
<script src="./js/tween.umd.js"></script>
<script src="./js/index.js"></script>
</html>
src/js/index.js
View file @ a9a6516d
......@@ -3,67 +3,80 @@ const testUA = (regexp) => regexp.test(ua);
const isSafari = testUA(/safari/g) && !testUA(/chrome/g);
const isWeChat = testUA(/micromessenger/g);
// 用电量、上送电量
const echart1Data = {
date: ["8/17", "8/18", "8/19", "8/20", "8/21", "8/22", "8/23"],
line1: [200, 190, 250, 100, 90, 100, 250],
line2: [100, 90, 200, 80, 60, 50, 200],
};
// 楼层负荷、充电桩负荷
const echart2Data = {
date: ["8/17", "8/18", "8/19", "8/20", "8/21", "8/22", "8/23"],
line1: [0.02, 0.3, 0.5, 1, 0.2, 0.3, 0.5],
line2: [0.01, 0.1, 0.2, 1, 0.5, 0.3, 0.8],
};
// 负荷预测、负荷功率
const echart3Data = {
date: [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
],
line1: [
0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 1, 0.02, 0.03, 0.05, 0.05, 0.02, 0.03,
0.02, 0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 0.02, 0.05, 0.02, 0.03, 0.1,
],
line2: [
0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.02, 1, 0.02, 0.02, 0.03, 0.05, 0.05,
0.02, 0.03, 0.02, 0.05, 0.02, 0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.02,
],
};
const echart3Data = [
{
value: 1048,
name: "暖通",
itemStyle: {
color: "#4380f0",
},
},
{
value: 735,
name: "照明",
itemStyle: {
color: "#01faf2",
},
},
{
value: 580,
name: "电梯",
itemStyle: {
color: "#eef043",
},
},
{
value: 484,
name: "热水",
itemStyle: {
color: "#c596ff",
},
},
];
// 光伏发电量、碳减排量
const echart4Data = {
date: ["8/17", "8/18", "8/19", "8/20", "8/21", "8/22", "8/23"],
line1: [0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 0.01],
line2: [0.01, 0.01, 0.02, 0.03, 0.1, 0.03, 0.02],
};
const echart4Data = [
{
value: 110,
name: "暖通",
itemStyle: {
color: "#4380f0",
},
},
{
value: 888,
name: "照明",
itemStyle: {
color: "#01faf2",
},
},
{
value: 222,
name: "电梯",
itemStyle: {
color: "#eef043",
},
},
{
value: 333,
name: "热水",
itemStyle: {
color: "#c596ff",
},
},
];
// AC/DC、储能、光伏、负荷
const echart5Data = {
date: [
"0",
......@@ -110,7 +123,6 @@ const echart5Data = {
],
};
// 光伏预测、光伏功率
const echart6Data = {
date: [
"0",
......@@ -230,6 +242,48 @@ const lineChartOption = (xData, yData, interval) => {
};
};
/**
* echartjs 饼图通用配置
*/
const pieChartOption = (data, isPercent) => {
return {
tooltip: {
trigger: "item",
formatter: isPercent ? "{b}: {c}" : "{b}: {d}%",
},
series: [
{
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: false,
hoverAnimation: false,
itemStyle: {
borderRadius: 10,
borderColor: "rgba(25,93,199,.2)",
borderWidth: 2,
},
label: {
show: true,
formatter(param) {
if (isPercent) {
return param.name + ": " + param.percent + "%";
} else {
return param.name + ": " + param.value;
}
},
},
labelLine: {
normal: {
length: 8,
length2: 2,
},
},
data,
},
],
};
};
// 创建多组数字
function createMultiSrollNum(numArr) {
const scrollBox = document.getElementsByClassName("scroll-box");
......@@ -426,13 +480,6 @@ function setBallData(list) {
});
}
// 设置环形数据
function setRingData(list) {
list.forEach((_, idx) => {
document.querySelector(".s-ring-" + (idx + 1)).innerHTML = list[idx];
});
}
const leftLineChart = () => {
// echart渲染
const lineChart1 = echarts.init(document.getElementById("line_chart_1"));
......@@ -443,11 +490,6 @@ const leftLineChart = () => {
color: "#4a76cf",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
},
{
data: echart1Data.line2,
color: "#2dc9e3",
areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"],
},
])
);
......@@ -459,51 +501,16 @@ const leftLineChart = () => {
color: "#4a76cf",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
},
{
data: echart2Data.line2,
color: "#2dc9e3",
areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"],
},
])
);
const lineChart3 = echarts.init(document.getElementById("line_chart_3"));
lineChart3.setOption(
lineChartOption(
echart3Data.date,
[
{
data: echart3Data.line1,
color: "#4a76cf",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
},
{
data: echart3Data.line2,
color: "#2dc9e3",
areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"],
},
],
3
)
);
const pieChart3 = echarts.init(document.getElementById("pie_chart_3"));
pieChart3.setOption(pieChartOption(echart3Data, true));
};
const rightLineChart = () => {
const lineChart4 = echarts.init(document.getElementById("line_chart_4"));
lineChart4.setOption(
lineChartOption(echart4Data.date, [
{
data: echart4Data.line1,
color: "#4a76cf",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
},
{
data: echart4Data.line2,
color: "#2dc9e3",
areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"],
},
])
);
const pieChart4 = echarts.init(document.getElementById("pie_chart_4"));
pieChart4.setOption(pieChartOption(echart4Data));
const lineChart5 = echarts.init(document.getElementById("line_chart_5"));
lineChart5.setOption(
......@@ -513,18 +520,12 @@ const rightLineChart = () => {
{
data: echart5Data.line1,
color: "#f1ec41",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
},
{
data: echart5Data.line2,
color: "#c49ffe",
},
{
data: echart5Data.line3,
color: "#4a76cf",
},
{
data: echart5Data.line4,
color: "#2dc9e3",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
},
],
3
......@@ -541,11 +542,6 @@ const rightLineChart = () => {
color: "#4a76cf",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
},
{
data: echart6Data.line2,
color: "#2dc9e3",
areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"],
},
],
3
)
......@@ -575,7 +571,4 @@ window.onload = () => {
/***********************************中间球体****************************************/
// 球体数据
setBallData(ballData);
/***********************************底部环形****************************************/
// 环形数据
setRingData(ringData);
};
src/less/index.less
View file @ a9a6516d
......@@ -210,6 +210,16 @@ li {
background: #01faf2;
}
}
&:nth-child(3) {
&::before {
background: #eef043;
}
}
&:nth-child(4) {
&::before {
background: #c596ff;
}
}
}
}
.echarts-content {
......@@ -253,6 +263,7 @@ li {
width: 865px;
height: 540px;
position: relative;
top: 0px;
.justify-between {
display: flex;
justify-content: space-between;
......@@ -322,6 +333,7 @@ li {
}
}
.center-content {
margin-top: 150px;
.box_1 {
width: 822px;
height: 78px;
......@@ -394,7 +406,7 @@ li {
.center-title-bottom {
position: absolute;
left: 158px;
top: 532px;
top: 825px;
width: 549px;
height: 14px;
//background: url(../images/center-title-bottom.png) -4px -5px no-repeat;
......@@ -411,7 +423,7 @@ li {
width: 818px;
position: absolute;
left: 31px;
top: 135px;
top: 240px;
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment