Skip to content

Z
zh_zcb-ems
Commit af9a09f9 authored by wu.hui's avatar wu.hui
Browse files
Options

feat: 添加数字滚动

parent 77d10f2b
Hide whitespace changes
Inline Side-by-side
Showing with 792 additions and 358 deletions
src/css/index.css
View file @ af9a09f9
body { body {
margin: 0 20px; margin: 0 20px;
padding: 0; padding: 0;
background: url("../images/bg.png") no-repeat; background: url('../images/bg.png') no-repeat;
min-width: 1800px;
overflow-x: auto;
} }
ul { ul {
list-style: none; list-style: none;
} }
ul,
li {
margin: 0;
padding: 0;
}
.header { .header {
position: relative; position: relative;
height: 130px; height: 130px;
width: 100%; width: 100%;
background: url("../images/header-bg.png") no-repeat; background: url('../images/header-bg.png') no-repeat;
background-size: cover; background-size: cover;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -24,7 +31,7 @@ ul { ...@@ -24,7 +31,7 @@ ul {
width: 228px; width: 228px;
height: 40px; height: 40px;
margin: 80px 0 0 20px; margin: 80px 0 0 20px;
background: url("../images/logo.png") no-repeat; background: url('../images/logo.png') no-repeat;
background-size: cover; background-size: cover;
} }
.header-middle { .header-middle {
...@@ -94,7 +101,7 @@ ul { ...@@ -94,7 +101,7 @@ ul {
display: inline-block; display: inline-block;
width: 23px; width: 23px;
height: 23px; height: 23px;
background: url("../images/user.png") no-repeat; background: url('../images/user.png') no-repeat;
background-size: cover; background-size: cover;
margin-right: 15px; margin-right: 15px;
} }
...@@ -111,7 +118,7 @@ ul { ...@@ -111,7 +118,7 @@ ul {
width: 21px; width: 21px;
height: 23px; height: 23px;
cursor: pointer; cursor: pointer;
background: url("../images/logout.png") no-repeat; background: url('../images/logout.png') no-repeat;
background-size: contain; background-size: contain;
margin-right: 15px; margin-right: 15px;
} }
...@@ -133,7 +140,7 @@ ul { ...@@ -133,7 +140,7 @@ ul {
.content .st-box::before, .content .st-box::before,
.content .st-box::after { .content .st-box::after {
position: absolute; position: absolute;
content: " "; content: ' ';
display: block; display: block;
top: 50%; top: 50%;
-webkit-transform: translateY(-50%); -webkit-transform: translateY(-50%);
...@@ -196,8 +203,7 @@ ul { ...@@ -196,8 +203,7 @@ ul {
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
margin-top: 35px; margin: 35px 20px 0;
margin-right: 20px;
} }
.content .st-box .echarts-box .legend li { .content .st-box .echarts-box .legend li {
display: -webkit-box; display: -webkit-box;
...@@ -218,7 +224,7 @@ ul { ...@@ -218,7 +224,7 @@ ul {
height: 12px; height: 12px;
border-radius: 5px; border-radius: 5px;
display: block; display: block;
content: " "; content: ' ';
} }
.content .st-box .echarts-box .legend li:nth-child(1)::before { .content .st-box .echarts-box .legend li:nth-child(1)::before {
background: #4380f0; background: #4380f0;
...@@ -307,7 +313,7 @@ ul { ...@@ -307,7 +313,7 @@ ul {
align-items: center; align-items: center;
} }
.content .center-section .center-top .center-title { .content .center-section .center-top .center-title {
background: url("../images/center-title-bg.png") no-repeat; background: url('../images/center-title-bg.png') no-repeat;
width: 411px; width: 411px;
height: 54px; height: 54px;
position: relative; position: relative;
...@@ -616,4 +622,3 @@ ul { ...@@ -616,4 +622,3 @@ ul {
white-space: nowrap; white-space: nowrap;
line-height: 24px; line-height: 24px;
} }
/*# sourceMappingURL=index.css.map */
\ No newline at end of file
src/css/stat-bar.css 0 → 100644
View file @ af9a09f9
@font-face {
font-family: 'DigifaceWide';
src: url('../font/DIGIFACEWIDE REGULAR.TTF') format('truetype');
/* Safari, Android, iOS */
}
.stat-bar {
z-index: 2;
width: 98%;
margin: 0 auto;
height: 64px;
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(11, 79, 253, 0.2)), color-stop(70%, rgba(12, 80, 252, 0)), to(rgba(12, 80, 252, 0)));
background-image: -o-linear-gradient(bottom, rgba(11, 79, 253, 0.2) 0%, rgba(12, 80, 252, 0) 70%, rgba(12, 80, 252, 0) 100%);
background-image: linear-gradient(0deg, rgba(11, 79, 253, 0.2) 0%, rgba(12, 80, 252, 0) 70%, rgba(12, 80, 252, 0) 100%);
overflow: hidden;
}
.stat-bar .stat-bar-inner {
width: 1700px;
margin: 8px auto 0 auto;
height: 48px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.stat-bar .stat-item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.stat-bar .stat-item .tit {
font-size: 20px;
color: #52ccff;
font-family: 'Source Han Sans CN';
}
.stat-bar .stat-item .scroll-box {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-left: 10px;
}
.stat-bar .stat-item .scroll-num {
width: var(--width, 36px);
height: var(--height, 48px);
line-height: var(--height, 48px);
text-align: center;
font-size: 41px;
color: #01fff6;
font-family: 'DigifaceWide';
border-radius: 3px;
background-image: -webkit-gradient(linear, left bottom, left top, from(#07256a), to(rgba(7, 37, 105, 0)));
background-image: -o-linear-gradient(bottom, #07256a 0%, rgba(7, 37, 105, 0) 100%);
background-image: linear-gradient(0deg, #07256a 0%, rgba(7, 37, 105, 0) 100%);
border: 1px solid #01fff6;
overflow: hidden;
margin-right: 4px;
}
.stat-bar .stat-item .suffix {
font-size: 16px;
color: #758094;
font-family: 'Source Han Sans CN';
}
.stat-bar .border-animate {
-webkit-animation: enhance-bounce-in-down 1s calc(var(--delay) * 1s) forwards;
animation: enhance-bounce-in-down 1s calc(var(--delay) * 1s) forwards;
}
.stat-bar .animate {
-webkit-animation: move 1.6s linear infinite, bounce-in-down 1s calc(var(--delay) * 1s) forwards;
animation: move 1.6s linear infinite, bounce-in-down 1s calc(var(--delay) * 1s) forwards;
}
@-webkit-keyframes move {
from {
-webkit-transform: translateY(-90%);
transform: translateY(-90%);
-webkit-filter: url(#blur);
filter: url(#blur);
}
to {
-webkit-transform: translateY(1%);
transform: translateY(1%);
-webkit-filter: url(#blur);
filter: url(#blur);
}
}
@keyframes move {
from {
-webkit-transform: translateY(-90%);
transform: translateY(-90%);
-webkit-filter: url(#blur);
filter: url(#blur);
}
to {
-webkit-transform: translateY(1%);
transform: translateY(1%);
-webkit-filter: url(#blur);
filter: url(#blur);
}
}
@-webkit-keyframes bounce-in-down {
from {
-webkit-transform: translateY(calc(var(--i) * -9.09% - 7%));
transform: translateY(calc(var(--i) * -9.09% - 7%));
-webkit-filter: none;
filter: none;
}
25% {
-webkit-transform: translateY(calc(var(--i) * -9.09% + 3%));
transform: translateY(calc(var(--i) * -9.09% + 3%));
}
50% {
-webkit-transform: translateY(calc(var(--i) * -9.09% - 1%));
transform: translateY(calc(var(--i) * -9.09% - 1%));
}
70% {
-webkit-transform: translateY(calc(var(--i) * -9.09% + 0.6%));
transform: translateY(calc(var(--i) * -9.09% + 0.6%));
}
85% {
-webkit-transform: translateY(calc(var(--i) * -9.09% - 0.3%));
transform: translateY(calc(var(--i) * -9.09% - 0.3%));
}
to {
-webkit-transform: translateY(calc(var(--i) * -9.09%));
transform: translateY(calc(var(--i) * -9.09%));
}
}
@keyframes bounce-in-down {
from {
-webkit-transform: translateY(calc(var(--i) * -9.09% - 7%));
transform: translateY(calc(var(--i) * -9.09% - 7%));
-webkit-filter: none;
filter: none;
}
25% {
-webkit-transform: translateY(calc(var(--i) * -9.09% + 3%));
transform: translateY(calc(var(--i) * -9.09% + 3%));
}
50% {
-webkit-transform: translateY(calc(var(--i) * -9.09% - 1%));
transform: translateY(calc(var(--i) * -9.09% - 1%));
}
70% {
-webkit-transform: translateY(calc(var(--i) * -9.09% + 0.6%));
transform: translateY(calc(var(--i) * -9.09% + 0.6%));
}
85% {
-webkit-transform: translateY(calc(var(--i) * -9.09% - 0.3%));
transform: translateY(calc(var(--i) * -9.09% - 0.3%));
}
to {
-webkit-transform: translateY(calc(var(--i) * -9.09%));
transform: translateY(calc(var(--i) * -9.09%));
}
}
@-webkit-keyframes enhance-bounce-in-down {
25% {
-webkit-transform: translateY(8%);
transform: translateY(8%);
}
50% {
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
}
70% {
-webkit-transform: translateY(2%);
transform: translateY(2%);
}
85% {
-webkit-transform: translateY(-1%);
transform: translateY(-1%);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes enhance-bounce-in-down {
25% {
-webkit-transform: translateY(8%);
transform: translateY(8%);
}
50% {
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
}
70% {
-webkit-transform: translateY(2%);
transform: translateY(2%);
}
85% {
-webkit-transform: translateY(-1%);
transform: translateY(-1%);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
src/index.html
View file @ af9a09f9
<html> <html>
<head>
<title></title> <head>
<script src="js/index.js"></script> <title></title>
<link href="/css/index.css" rel="stylesheet" type="text/css" /> <link href="/css/index.css" rel="stylesheet" type="text/css" />
</head> <link href="/css/stat-bar.css" rel="stylesheet" type="text/css" />
<body> </head>
<!--顶部标题栏-->
<div class="header"> <body>
<div class="header-left"> <!--顶部标题栏-->
<div class="logo"></div> <div class="header">
</div> <div class="header-left">
<div class="header-middle"> <div class="logo"></div>
<ul>
<li class="active"><span>首页</span></li>
<li><span>监控</span></li>
</ul>
<div></div>
<ul>
<li><span>统计</span></li>
<li><span>系统管理</span></li>
</ul>
</div>
<div class="header-right">
<div><span></span><span>lyy</span><span></span></div>
</div>
</div> </div>
<!--顶部统计栏--> <div class="header-middle">
<div class="stat-bar"> <ul>
<li class="active"><span>首页</span></li>
<li><span>监控</span></li>
</ul>
<div></div>
<ul> <ul>
<li></li> <li><span>统计</span></li>
<li></li> <li><span>系统管理</span></li>
<li></li>
<li></li>
</ul> </ul>
</div> </div>
<!--内容区--> <div class="header-right">
<div class="content"> <div><span></span><span>lyy</span><span></span></div>
<!--左侧内容区--> </div>
<div class="left-section"> </div>
<!--科技感框--> <!--顶部统计栏-->
<div class="st-box"> <div class="stat-bar">
<span class="bg-center"></span> <div class="stat-bar-inner">
<div class="echarts-box"> <div class="stat-item">
<div class="echarts-header"> <div class="tit">累计用电量</div>
<div class="title">并网点电量（kWh）</div> <div class="scroll-box"></div>
<ul class="legend"> <div class="suffix">万kWh</div>
<li>用电量</li> </div>
<li>上送电量</li> <div class="stat-item">
</ul> <div class="tit">累计发电量</div>
</div> <div class="scroll-box"></div>
<div class="echarts-content" id="line_chart_1"></div> <div class="suffix">万kWh</div>
</div>
<div class="stat-item">
<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="scroll-box"></div>
<div class="suffix">万t</div>
</div>
</div>
<svg width="0" height="0">
<filter id="blur">
<feGaussianBlur in="SourceGraphic" :stdDeviation="0 12" />
</filter>
</svg>
</div>
<!--内容区-->
<div class="content">
<!--左侧内容区-->
<div class="left-section">
<!--科技感框-->
<div class="st-box">
<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>
<div class="echarts-content" id="line_chart_1"></div>
</div> </div>
<!--科技感框--> </div>
<div class="st-box"> <!--科技感框-->
<span class="bg-center"></span> <div class="st-box">
<div class="echarts-box"> <span class="bg-center"></span>
<div class="echarts-header"> <div class="echarts-box">
<ul class="legend"> <div class="echarts-header">
<li>楼层负荷</li> <ul class="legend">
<li>充电桩负荷</li> <li>楼层负荷</li>
</ul> <li>充电桩负荷</li>
</div> </ul>
<div class="echarts-content" id="line_chart_2"></div>
</div> </div>
<div class="echarts-content" id="line_chart_2"></div>
</div> </div>
<!--科技感框--> </div>
<div class="st-box"> <!--科技感框-->
<span class="bg-center"></span> <div class="st-box">
<div class="echarts-box"> <span class="bg-center"></span>
<div class="echarts-header"> <div class="echarts-box">
<ul class="legend"> <div class="echarts-header">
<li>负荷预测</li> <ul class="legend">
<li>负荷功率</li> <li>负荷预测</li>
</ul> <li>负荷功率</li>
</div> </ul>
<div class="echarts-content" id="line_chart_3"></div>
</div> </div>
<div class="echarts-content" id="line_chart_3"></div>
</div> </div>
</div> </div>
<!--中间内容区--> </div>
<div class="center-section"> <!--中间内容区-->
<!--上部统计区域--> <div class="center-section">
<div class="center-top"> <!--上部统计区域-->
<!--中间标题--> <div class="center-top">
<div class="center-title"> <!--中间标题-->
<span>能源监测</span> <div class="center-title">
<div class="center-title-bg"></div> <span>能源监测</span>
</div> <div class="center-title-bg"></div>
<div class="center-content"> </div>
<!--中间左侧统计--> <div class="center-content">
<div class="box_1 justify-between"> <!--中间左侧统计-->
<div class="box-left"> <div class="box_1 justify-between">
<span class="text-title">单平米能耗(kWh)</span> <div class="box-left">
<div class="globe_1 text-globe"> <span class="text-title">单平米能耗(kWh)</span>
<span class="text-num">88</span> <div class="globe_1 text-globe">
</div> <span class="text-num">88</span>
</div> </div>
<div class="box-right"> </div>
<span class="text-title">单平米碳排(kWh)</span> <div class="box-right">
<div class="globe_2 text-globe"> <span class="text-title">单平米碳排(kWh)</span>
<span class="text-num">100</span> <div class="globe_2 text-globe">
</div> <span class="text-num">100</span>
</div> </div>
</div> </div>
<div class="box_1 justify-between"> </div>
<div class="box-left"> <div class="box_1 justify-between">
<span class="text-title">充电桩功率(kW)</span> <div class="box-left">
<div class="globe_1 text-globe"> <span class="text-title">充电桩功率(kW)</span>
<span class="text-num">88</span> <div class="globe_1 text-globe">
</div> <span class="text-num">88</span>
</div> </div>
<div class="box-right"> </div>
<span class="text-title">光伏功率(kW)</span> <div class="box-right">
<div class="globe_2 text-globe"> <span class="text-title">光伏功率(kW)</span>
<span class="text-num">100</span> <div class="globe_2 text-globe">
</div> <span class="text-num">100</span>
</div> </div>
</div> </div>
<div class="box_1 justify-between"> </div>
<div class="box-left-bottom"> <div class="box_1 justify-between">
<span class="text-title">负荷功率(kW)</span> <div class="box-left-bottom">
<div class="globe_1 text-globe"> <span class="text-title">负荷功率(kW)</span>
<span class="text-num">88</span> <div class="globe_1 text-globe">
</div> <span class="text-num">88</span>
</div> </div>
<div class="box-right-bottom"> </div>
<span class="text-title">联络线功率(kW)</span> <div class="box-right-bottom">
<div class="globe_2 text-globe"> <span class="text-title">联络线功率(kW)</span>
<span class="text-num">100</span> <div class="globe_2 text-globe">
</div> <span class="text-num">100</span>
</div> </div>
</div> </div>
<div class="section"></div>
<div class="center-title-bottom"></div>
</div> </div>
<div class="section"></div>
<div class="center-title-bottom"></div>
</div> </div>
<!--下部统计区域--> </div>
<div class="center-bottom"> <!--下部统计区域-->
<!--科技感框--> <div class="center-bottom">
<div class="section_1"> <!--科技感框-->
<div class="section_2 flex-row"> <div class="section_1">
<div class="text-ball flex-col"> <div class="section_2 flex-row">
<span class="text_73">峰谷差</span> <div class="text-ball flex-col">
<div class="text-wrapper_36 text-wrapper"> <span class="text_73">峰谷差</span>
<span class="text-ball-num">88</span> <div class="text-wrapper_36 text-wrapper">
<span class="text-ball-percent">%</span> <span class="text-ball-num">88</span>
</div> <span class="text-ball-percent">%</span>
</div> </div>
<div class="section_3 flex-col"> </div>
<div class="group_27 flex-row"> <div class="section_3 flex-col">
<div class="text-group_7 flex-col justify-between"> <div class="group_27 flex-row">
<span class="text_115">消纳率</span> <div class="text-group_7 flex-col justify-between">
<div class="text-wrapper_57 text-wrapper"> <span class="text_115">消纳率</span>
<span class="text-ball-num">100</span> <div class="text-wrapper_57 text-wrapper">
<span class="text-ball-percent">%</span> <span class="text-ball-num">100</span>
</div> <span class="text-ball-percent">%</span>
</div> </div>
</div> </div>
</div> </div>
<div class="section_4 flex-col"> </div>
<div class="box_54 flex-row"> <div class="section_4 flex-col">
<div class="text-group_8 flex-col justify-between"> <div class="box_54 flex-row">
<span class="text_118">碳排系数</span> <div class="text-group_8 flex-col justify-between">
<div class="text-wrapper"> <span class="text_118">碳排系数</span>
<span class="text-ball-num">98</span> <div class="text-wrapper">
<span class="text-ball-percent">%</span> <span class="text-ball-num">98</span>
</div> <span class="text-ball-percent">%</span>
</div> </div>
</div> </div>
</div> </div>
<div class="section_5 flex-col"> </div>
<div class="box_55 flex-row"> <div class="section_5 flex-col">
<div class="text-group_9 flex-col justify-between"> <div class="box_55 flex-row">
<span class="text_121">系统效率</span> <div class="text-group_9 flex-col justify-between">
<div class="text-wrapper"> <span class="text_121">系统效率</span>
<span class="text-ball-num">88</span> <div class="text-wrapper">
<span class="text-ball-percent">%</span> <span class="text-ball-num">88</span>
</div> <span class="text-ball-percent">%</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -185,51 +207,54 @@ ...@@ -185,51 +207,54 @@
</div> </div>
</div> </div>
</div> </div>
<!--右侧内容区--> </div>
<div class="right-section"> <!--右侧内容区-->
<div class="st-box"> <div class="right-section">
<span class="bg-center"></span> <div class="st-box">
<div class="echarts-box"> <span class="bg-center"></span>
<div class="echarts-header"> <div class="echarts-box">
<ul class="legend"> <div class="echarts-header">
<li>光伏发电量</li> <ul class="legend">
<li>碳减排量</li> <li>光伏发电量</li>
</ul> <li>碳减排量</li>
</div> </ul>
<div class="echarts-content" id="line_chart_4"></div>
</div> </div>
<div class="echarts-content" id="line_chart_4"></div>
</div> </div>
</div>
<div class="st-box electric-power-st-box"> <div class="st-box electric-power-st-box">
<span class="bg-center"></span> <span class="bg-center"></span>
<div class="echarts-box"> <div class="echarts-box">
<div class="echarts-header"> <div class="echarts-header">
<div class="title">发电计划(kW)</div> <div class="title">发电计划(kW)</div>
<ul class="legend"> <ul class="legend">
<li>AC/DC</li> <li>AC/DC</li>
<li>储能</li> <li>储能</li>
<li>光伏</li> <li>光伏</li>
<li>负荷</li> <li>负荷</li>
</ul> </ul>
</div>
<div class="echarts-content" id="line_chart_5"></div>
</div> </div>
<div class="echarts-content" id="line_chart_5"></div>
</div> </div>
</div>
<div class="st-box"> <div class="st-box">
<span class="bg-center"></span> <span class="bg-center"></span>
<div class="echarts-box"> <div class="echarts-box">
<div class="echarts-header"> <div class="echarts-header">
<ul class="legend"> <ul class="legend">
<li>光伏预测</li> <li>光伏预测</li>
<li>光伏功率</li> <li>光伏功率</li>
</ul> </ul>
</div>
<div class="echarts-content" id="line_chart_6"></div>
</div> </div>
<div class="echarts-content" id="line_chart_6"></div>
</div> </div>
</div> </div>
</div> </div>
<script src="https://cdn.ucyber.cn/common/echarts.js"></script> </div>
</body> </body>
</html>
<script src="https://cdn.ucyber.cn/common/echarts.js"></script>
<script src="/js/index.js"></script>
</html>
\ No newline at end of file
src/js/index.js
View file @ af9a09f9
const ua = navigator.userAgent.toLowerCase()
const testUA = (regexp) => regexp.test(ua)
const isSafari = testUA(/safari/g) && !testUA(/chrome/g)
const isWeChat = testUA(/micromessenger/g)
// 用电量、上送电量 // 用电量、上送电量
const echart1Data = { const echart1Data = {
date: ["8/17", "8/18", "8/19", "8/20", "8/21", "8/22", "8/23"], date: ['8/17', '8/18', '8/19', '8/20', '8/21', '8/22', '8/23'],
line1: [200, 190, 250, 100, 90, 100, 250], line1: [200, 190, 250, 100, 90, 100, 250],
line2: [100, 90, 200, 80, 60, 50, 200], line2: [100, 90, 200, 80, 60, 50, 200],
}; }
// 楼层负荷、充电桩负荷 // 楼层负荷、充电桩负荷
const echart2Data = { const echart2Data = {
date: ["8/17", "8/18", "8/19", "8/20", "8/21", "8/22", "8/23"], 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], 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], line2: [0.01, 0.1, 0.2, 1, 0.5, 0.3, 0.8],
}; }
// 负荷预测、负荷功率 // 负荷预测、负荷功率
const echart3Data = { const echart3Data = {
date: [ date: [
"0", '0',
"1", '1',
"2", '2',
"3", '3',
"4", '4',
"5", '5',
"6", '6',
"7", '7',
"8", '8',
"9", '9',
"10", '10',
"11", '11',
"12", '12',
"13", '13',
"14", '14',
"15", '15',
"16", '16',
"17", '17',
"18", '18',
"19", '19',
"20", '20',
"21", '21',
"22", '22',
"23", '23',
"24", '24',
], ],
line1: [ 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.03, 0.05, 0.05, 0.02, 0.03, 1, 0.02, 0.03, 0.05, 0.05, 0.02, 0.03,
...@@ -49,43 +54,43 @@ const echart3Data = { ...@@ -49,43 +54,43 @@ const echart3Data = {
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.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, 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 echart4Data = { const echart4Data = {
date: ["8/17", "8/18", "8/19", "8/20", "8/21", "8/22", "8/23"], 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], 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], line2: [0.01, 0.01, 0.02, 0.03, 0.1, 0.03, 0.02],
}; }
// AC/DC、储能、光伏、负荷 // AC/DC、储能、光伏、负荷
const echart5Data = { const echart5Data = {
date: [ date: [
"0", '0',
"1", '1',
"2", '2',
"3", '3',
"4", '4',
"5", '5',
"6", '6',
"7", '7',
"8", '8',
"9", '9',
"10", '10',
"11", '11',
"12", '12',
"13", '13',
"14", '14',
"15", '15',
"16", '16',
"17", '17',
"18", '18',
"19", '19',
"20", '20',
"21", '21',
"22", '22',
"23", '23',
"24", '24',
], ],
line1: [ line1: [
100, 190, 250, 100, 90, 100, 250, 100, 190, 250, 100, 90, 100, 250, 100, 100, 190, 250, 100, 90, 100, 250, 100, 190, 250, 100, 90, 100, 250, 100,
...@@ -103,36 +108,36 @@ const echart5Data = { ...@@ -103,36 +108,36 @@ const echart5Data = {
400, 90, 200, 100, 90, 100, 200, 190, 250, 100, 90, 100, 250, 100, 190, 250, 400, 90, 200, 100, 90, 100, 200, 190, 250, 100, 90, 100, 250, 100, 190, 250,
100, 90, 100, 250, 100, 1000, 100, 250, 300, 100, 90, 100, 250, 100, 1000, 100, 250, 300,
], ],
}; }
// 光伏预测、光伏功率 // 光伏预测、光伏功率
const echart6Data = { const echart6Data = {
date: [ date: [
"0", '0',
"1", '1',
"2", '2',
"3", '3',
"4", '4',
"5", '5',
"6", '6',
"7", '7',
"8", '8',
"9", '9',
"10", '10',
"11", '11',
"12", '12',
"13", '13',
"14", '14',
"15", '15',
"16", '16',
"17", '17',
"18", '18',
"19", '19',
"20", '20',
"21", '21',
"22", '22',
"23", '23',
"24", '24',
], ],
line1: [ line1: [
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.02, 0.03, 0.05, 0.05, 0.02, 0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.02,
...@@ -142,7 +147,7 @@ const echart6Data = { ...@@ -142,7 +147,7 @@ const echart6Data = {
0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.02, 0.03, 0.02, 0.02, 0.03, 0.05, 0.03, 0.02, 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, 1, 0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.05, 0.05, 0.02, 0.03, 0.02, 0.05, 1, 0.03, 0.02, 0.02, 0.03, 0.05, 0.05, 0.05,
], ],
}; }
/** /**
* echartjs 曲线图通用配置 * echartjs 曲线图通用配置
...@@ -150,7 +155,7 @@ const echart6Data = { ...@@ -150,7 +155,7 @@ const echart6Data = {
* @param {type: array, desc: y轴数据 } yData * @param {type: array, desc: y轴数据 } yData
* */ * */
const lineChartOption = (xData, yData, interval) => { const lineChartOption = (xData, yData, interval) => {
const series = []; const series = []
yData.forEach((item) => { yData.forEach((item) => {
series.push({ series.push({
data: item.data, data: item.data,
...@@ -169,163 +174,220 @@ const lineChartOption = (xData, yData, interval) => { ...@@ -169,163 +174,220 @@ const lineChartOption = (xData, yData, interval) => {
]), ]),
} }
: null, : null,
type: "line", type: 'line',
smooth: true, smooth: true,
symbol: "none", symbol: 'none',
}); })
}); })
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: 'axis',
}, },
grid: { grid: {
top: "5%", top: '5%',
bottom: "15%", bottom: '15%',
right: "5%", right: '5%',
}, },
xAxis: { xAxis: {
data: xData, data: xData,
type: "category", type: 'category',
axisLine: { show: false }, axisLine: { show: false },
axisTick: { show: false }, axisTick: { show: false },
splitLine: false, splitLine: false,
boundaryGap: false, boundaryGap: false,
axisLabel: { axisLabel: {
color: "#7c90c8", color: '#7c90c8',
fontSize: 10, fontSize: 10,
margin: 15, margin: 15,
interval, interval,
}, },
}, },
yAxis: { yAxis: {
type: "value", type: 'value',
axisLine: { show: false }, axisLine: { show: false },
axisTick: { show: false }, axisTick: { show: false },
splitLine: false, splitLine: false,
axisLabel: { axisLabel: {
color: "#7c90c8", color: '#7c90c8',
fontSize: 10, fontSize: 10,
margin: 15, margin: 15,
}, },
}, },
series, series,
}; }
}; }
// 创建一组数字
function createMultiSrollNum(box, numString, width, height, delay) {
box.style.setProperty('--width', width + 'px')
box.style.setProperty('--height', height + 'px')
const docFrag = document.createDocumentFragment()
numString.split('').forEach((num, i) => {
docFrag.appendChild(createSrollNum(num, delay + i * 0.2))
})
box.appendChild(docFrag)
}
// 创建单个数字
function createSrollNum(num, delay) {
const scrollNumNode = document.createElement('div')
scrollNumNode.className = 'scroll-num border-animate'
scrollNumNode.innerHTML = `<ul class="animate">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
</ul>`
scrollNumNode.style.setProperty('--i', num)
scrollNumNode.style.setProperty('--delay', delay)
const ulNode = scrollNumNode.childNodes[0]
if (isSafari || isWeChat) {
let timer = setTimeout(() => {
ulNode.setAttribute(
'style',
'animation: none;transform: translateY(' + num * -9.09 + '%)'
)
timer = null
}, delay * 1000)
}
return scrollNumNode
}
window.onload = () => { window.onload = () => {
// echart渲染 // echart渲染
const lineChart1 = echarts.init(document.getElementById("line_chart_1")); const lineChart1 = echarts.init(document.getElementById('line_chart_1'))
lineChart1.setOption( lineChart1.setOption(
lineChartOption(echart1Data.date, [ lineChartOption(echart1Data.date, [
{ {
data: echart1Data.line1, data: echart1Data.line1,
color: "#4a76cf", color: '#4a76cf',
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"], areaColor: ['rgba(23,71,153, 1)', 'rgba(23,71,153, 0)'],
}, },
{ {
data: echart1Data.line2, data: echart1Data.line2,
color: "#2dc9e3", color: '#2dc9e3',
areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"], areaColor: ['rgba(0,105,107, 1)', 'rgba(0,105,107, 0)'],
}, },
]) ])
); )
const lineChart2 = echarts.init(document.getElementById("line_chart_2")); const lineChart2 = echarts.init(document.getElementById('line_chart_2'))
lineChart2.setOption( lineChart2.setOption(
lineChartOption(echart2Data.date, [ lineChartOption(echart2Data.date, [
{ {
data: echart2Data.line1, data: echart2Data.line1,
color: "#4a76cf", color: '#4a76cf',
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"], areaColor: ['rgba(23,71,153, 1)', 'rgba(23,71,153, 0)'],
}, },
{ {
data: echart2Data.line2, data: echart2Data.line2,
color: "#2dc9e3", color: '#2dc9e3',
areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"], areaColor: ['rgba(0,105,107, 1)', 'rgba(0,105,107, 0)'],
}, },
]) ])
); )
const lineChart3 = echarts.init(document.getElementById("line_chart_3")); const lineChart3 = echarts.init(document.getElementById('line_chart_3'))
lineChart3.setOption( lineChart3.setOption(
lineChartOption( lineChartOption(
echart3Data.date, echart3Data.date,
[ [
{ {
data: echart3Data.line1, data: echart3Data.line1,
color: "#4a76cf", color: '#4a76cf',
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"], areaColor: ['rgba(23,71,153, 1)', 'rgba(23,71,153, 0)'],
}, },
{ {
data: echart3Data.line2, data: echart3Data.line2,
color: "#2dc9e3", color: '#2dc9e3',
areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"], areaColor: ['rgba(0,105,107, 1)', 'rgba(0,105,107, 0)'],
}, },
], ],
3 3
) )
); )
const lineChart4 = echarts.init(document.getElementById("line_chart_4")); const lineChart4 = echarts.init(document.getElementById('line_chart_4'))
lineChart4.setOption( lineChart4.setOption(
lineChartOption(echart4Data.date, [ lineChartOption(echart4Data.date, [
{ {
data: echart4Data.line1, data: echart4Data.line1,
color: "#4a76cf", color: '#4a76cf',
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"], areaColor: ['rgba(23,71,153, 1)', 'rgba(23,71,153, 0)'],
}, },
{ {
data: echart4Data.line2, data: echart4Data.line2,
color: "#2dc9e3", color: '#2dc9e3',
areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"], areaColor: ['rgba(0,105,107, 1)', 'rgba(0,105,107, 0)'],
}, },
]) ])
); )
const lineChart5 = echarts.init(document.getElementById("line_chart_5")); const lineChart5 = echarts.init(document.getElementById('line_chart_5'))
lineChart5.setOption( lineChart5.setOption(
lineChartOption( lineChartOption(
echart5Data.date, echart5Data.date,
[ [
{ {
data: echart5Data.line1, data: echart5Data.line1,
color: "#f1ec41", color: '#f1ec41',
}, },
{ {
data: echart5Data.line2, data: echart5Data.line2,
color: "#c49ffe", color: '#c49ffe',
}, },
{ {
data: echart5Data.line3, data: echart5Data.line3,
color: "#4a76cf", color: '#4a76cf',
}, },
{ {
data: echart5Data.line4, data: echart5Data.line4,
color: "#2dc9e3", color: '#2dc9e3',
}, },
], ],
3 3
) )
); )
const lineChart6 = echarts.init(document.getElementById("line_chart_6")); const lineChart6 = echarts.init(document.getElementById('line_chart_6'))
lineChart6.setOption( lineChart6.setOption(
lineChartOption( lineChartOption(
echart6Data.date, echart6Data.date,
[ [
{ {
data: echart6Data.line1, data: echart6Data.line1,
color: "#4a76cf", color: '#4a76cf',
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"], areaColor: ['rgba(23,71,153, 1)', 'rgba(23,71,153, 0)'],
}, },
{ {
data: echart6Data.line2, data: echart6Data.line2,
color: "#2dc9e3", color: '#2dc9e3',
areaColor: ["rgba(0,105,107, 1)", "rgba(0,105,107, 0)"], areaColor: ['rgba(0,105,107, 1)', 'rgba(0,105,107, 0)'],
}, },
], ],
3 3
) )
); )
};
// 数据统计数字滚动
const width = 36
const height = 48
const delay = 1.4
const scrollBox = document.getElementsByClassName('scroll-box')
;['35345', '83460', '36765', '36465'].forEach((numStr, i) => {
createMultiSrollNum(scrollBox[i], numStr, width, height, delay)
})
}
src/css/index.less → src/less/index.less
View file @ af9a09f9
body { body {
margin: 0 20px; margin: 0 20px;
padding: 0; padding: 0;
background: url("../images/bg.png") no-repeat; background: url('../images/bg.png') no-repeat;
min-width: 1800px;
overflow-x: auto;
} }
ul { ul {
list-style: none; list-style: none;
} }
ul,
li {
margin: 0;
padding: 0;
}
.header { .header {
position: relative; position: relative;
height: 130px; height: 130px;
width: 100%; width: 100%;
background: url("../images/header-bg.png") no-repeat; background: url('../images/header-bg.png') no-repeat;
background-size: cover; background-size: cover;
display: flex; display: flex;
} }
...@@ -21,7 +28,7 @@ ul { ...@@ -21,7 +28,7 @@ ul {
width: 228px; width: 228px;
height: 40px; height: 40px;
margin: 80px 0 0 20px; margin: 80px 0 0 20px;
background: url("../images/logo.png") no-repeat; background: url('../images/logo.png') no-repeat;
background-size: cover; background-size: cover;
} }
.header-middle { .header-middle {
...@@ -80,7 +87,7 @@ ul { ...@@ -80,7 +87,7 @@ ul {
display: inline-block; display: inline-block;
width: 23px; width: 23px;
height: 23px; height: 23px;
background: url("../images/user.png") no-repeat; background: url('../images/user.png') no-repeat;
background-size: cover; background-size: cover;
margin-right: 15px; margin-right: 15px;
} }
...@@ -97,7 +104,7 @@ ul { ...@@ -97,7 +104,7 @@ ul {
width: 21px; width: 21px;
height: 23px; height: 23px;
cursor: pointer; cursor: pointer;
background: url("../images/logout.png") no-repeat; background: url('../images/logout.png') no-repeat;
background-size: contain; background-size: contain;
margin-right: 15px; margin-right: 15px;
} }
...@@ -116,7 +123,7 @@ ul { ...@@ -116,7 +123,7 @@ ul {
&::before, &::before,
&::after { &::after {
position: absolute; position: absolute;
content: " "; content: ' ';
display: block; display: block;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
...@@ -162,8 +169,7 @@ ul { ...@@ -162,8 +169,7 @@ ul {
.legend { .legend {
user-select: none; user-select: none;
display: flex; display: flex;
margin-top: 35px; margin: 35px 20px 0;
margin-right: 20px;
li { li {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -176,7 +182,7 @@ ul { ...@@ -176,7 +182,7 @@ ul {
height: 12px; height: 12px;
border-radius: 5px; border-radius: 5px;
display: block; display: block;
content: " "; content: ' ';
} }
&:nth-child(1) { &:nth-child(1) {
&::before { &::before {
...@@ -227,11 +233,11 @@ ul { ...@@ -227,11 +233,11 @@ ul {
} }
} }
} }
.center-section{ .center-section {
width: 865px; width: 865px;
height: 540px; height: 540px;
position: relative; position: relative;
.justify-between{ .justify-between {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
...@@ -247,7 +253,7 @@ ul { ...@@ -247,7 +253,7 @@ ul {
margin: 15px 0 0 28px; margin: 15px 0 0 28px;
line-height: 47px; line-height: 47px;
} }
.text-globe{ .text-globe {
position: absolute; position: absolute;
height: 110px; height: 110px;
background: url(../images/globe.png) 100% no-repeat; background: url(../images/globe.png) 100% no-repeat;
...@@ -263,16 +269,16 @@ ul { ...@@ -263,16 +269,16 @@ ul {
text-align: left; text-align: left;
white-space: nowrap; white-space: nowrap;
} }
.center-top{ .center-top {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.center-title{ .center-title {
background: url("../images/center-title-bg.png") no-repeat; background: url('../images/center-title-bg.png') no-repeat;
width: 411px; width: 411px;
height: 54px; height: 54px;
position: relative; position: relative;
& > span{ & > span {
width: 89px; width: 89px;
height: 22px; height: 22px;
overflow-wrap: break-word; overflow-wrap: break-word;
...@@ -284,7 +290,7 @@ ul { ...@@ -284,7 +290,7 @@ ul {
line-height: 53px; line-height: 53px;
margin: 16px 0 0 168px; margin: 16px 0 0 168px;
} }
.center-title-bg{ .center-title-bg {
background: url(../images/center-title-top.png) no-repeat; background: url(../images/center-title-top.png) no-repeat;
width: 549px; width: 549px;
height: 14px; height: 14px;
...@@ -293,7 +299,7 @@ ul { ...@@ -293,7 +299,7 @@ ul {
left: -72px; left: -72px;
} }
} }
.center-content{ .center-content {
.box_1 { .box_1 {
width: 822px; width: 822px;
height: 78px; height: 78px;
...@@ -355,7 +361,7 @@ ul { ...@@ -355,7 +361,7 @@ ul {
} }
} }
} }
.center-title-bottom{ .center-title-bottom {
position: absolute; position: absolute;
left: 158px; left: 158px;
top: 532px; top: 532px;
...@@ -375,7 +381,7 @@ ul { ...@@ -375,7 +381,7 @@ ul {
} }
} }
} }
.center-bottom{ .center-bottom {
.flex-row { .flex-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
...@@ -474,8 +480,8 @@ ul { ...@@ -474,8 +480,8 @@ ul {
margin-left: 10px; margin-left: 10px;
} }
.text-wrapper_57 { .text-wrapper_57 {
width: 83px; width: 83px;
} }
} }
} }
} }
...@@ -531,7 +537,7 @@ ul { ...@@ -531,7 +537,7 @@ ul {
} }
} }
} }
} }
} }
} }
} }
src/less/stat-bar.less 0 → 100644
View file @ af9a09f9
@font-face {
font-family: 'DigifaceWide';
src: url('../font/DIGIFACEWIDE REGULAR.TTF') format('truetype'); /* Safari, Android, iOS */
}
.stat-bar {
z-index: 2;
width: 98%;
margin: 0 auto;
height: 64px;
background-image: linear-gradient(
0deg,
rgba(11, 79, 253, 0.2) 0%,
rgba(12, 80, 252, 0) 70%,
rgba(12, 80, 252, 0) 100%
);
overflow: hidden;
.stat-bar-inner {
width: 1700px;
margin: 8px auto 0 auto;
height: 48px;
display: flex;
justify-content: space-between;
}
.stat-item {
display: flex;
align-items: center;
.tit {
font-size: 20px;
color: #52ccff;
font-family: 'Source Han Sans CN';
}
.scroll-box {
display: flex;
margin-left: 10px;
}
.scroll-num {
width: var(--width, 36px);
height: var(--height, 48px);
line-height: var(--height, 48px);
text-align: center;
font-size: 41px;
color: #01fff6;
font-family: 'DigifaceWide';
border-radius: 3px;
background-image: linear-gradient(
0deg,
#07256a 0%,
rgba(7, 37, 105, 0) 100%
);
border: 1px solid #01fff6;
overflow: hidden;
margin-right: 4px;
}
.suffix {
font-size: 16px;
color: #758094;
font-family: 'Source Han Sans CN';
}
}
.border-animate {
animation: enhance-bounce-in-down 1s calc(var(--delay) * 1s) forwards;
}
.animate {
animation: move 1.6s linear infinite,
bounce-in-down 1s calc(var(--delay) * 1s) forwards;
}
}
@keyframes move {
from {
transform: translateY(-90%);
filter: url(#blur);
}
to {
transform: translateY(1%);
filter: url(#blur);
}
}
@keyframes bounce-in-down {
from {
transform: translateY(calc(var(--i) * -9.09% - 7%));
filter: none;
}
25% {
transform: translateY(calc(var(--i) * -9.09% + 3%));
}
50% {
transform: translateY(calc(var(--i) * -9.09% - 1%));
}
70% {
transform: translateY(calc(var(--i) * -9.09% + 0.6%));
}
85% {
transform: translateY(calc(var(--i) * -9.09% - 0.3%));
}
to {
transform: translateY(calc(var(--i) * -9.09%));
}
}
@keyframes enhance-bounce-in-down {
25% {
transform: translateY(8%);
}
50% {
transform: translateY(-4%);
}
70% {
transform: translateY(2%);
}
85% {
transform: translateY(-1%);
}
to {
transform: translateY(0);
}
}
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