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 {
margin: 0 20px;
padding: 0;
background: url("../images/bg.png") no-repeat;
background: url('../images/bg.png') no-repeat;
min-width: 1800px;
overflow-x: auto;
}
ul {
list-style: none;
}
ul,
li {
margin: 0;
padding: 0;
}
.header {
position: relative;
height: 130px;
width: 100%;
background: url("../images/header-bg.png") no-repeat;
background: url('../images/header-bg.png') no-repeat;
background-size: cover;
display: -webkit-box;
display: -webkit-flex;
......@@ -24,7 +31,7 @@ ul {
width: 228px;
height: 40px;
margin: 80px 0 0 20px;
background: url("../images/logo.png") no-repeat;
background: url('../images/logo.png') no-repeat;
background-size: cover;
}
.header-middle {
......@@ -94,7 +101,7 @@ ul {
display: inline-block;
width: 23px;
height: 23px;
background: url("../images/user.png") no-repeat;
background: url('../images/user.png') no-repeat;
background-size: cover;
margin-right: 15px;
}
......@@ -111,7 +118,7 @@ ul {
width: 21px;
height: 23px;
cursor: pointer;
background: url("../images/logout.png") no-repeat;
background: url('../images/logout.png') no-repeat;
background-size: contain;
margin-right: 15px;
}
......@@ -133,7 +140,7 @@ ul {
.content .st-box::before,
.content .st-box::after {
position: absolute;
content: " ";
content: ' ';
display: block;
top: 50%;
-webkit-transform: translateY(-50%);
......@@ -196,8 +203,7 @@ ul {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-top: 35px;
margin-right: 20px;
margin: 35px 20px 0;
}
.content .st-box .echarts-box .legend li {
display: -webkit-box;
......@@ -218,7 +224,7 @@ ul {
height: 12px;
border-radius: 5px;
display: block;
content: " ";
content: ' ';
}
.content .st-box .echarts-box .legend li:nth-child(1)::before {
background: #4380f0;
......@@ -307,7 +313,7 @@ ul {
align-items: center;
}
.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;
height: 54px;
position: relative;
......@@ -616,4 +622,3 @@ ul {
white-space: nowrap;
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>
<head>
<title></title>
<script src="js/index.js"></script>
<link href="/css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--顶部标题栏-->
<div class="header">
<div class="header-left">
<div class="logo"></div>
</div>
<div class="header-middle">
<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>
<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>
<body>
<!--顶部标题栏-->
<div class="header">
<div class="header-left">
<div class="logo"></div>
</div>
<!--顶部统计栏-->
<div class="stat-bar">
<div class="header-middle">
<ul>
<li class="active"><span>首页</span></li>
<li><span>监控</span></li>
</ul>
<div></div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li><span>统计</span></li>
<li><span>系统管理</span></li>
</ul>
</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 class="echarts-content" id="line_chart_1"></div>
<div class="header-right">
<div><span></span><span>lyy</span><span></span></div>
</div>
</div>
<!--顶部统计栏-->
<div class="stat-bar">
<div class="stat-bar-inner">
<div class="stat-item">
<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="scroll-box"></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 class="echarts-content" id="line_chart_1"></div>
</div>
<!--科技感框-->
<div class="st-box">
<span class="bg-center"></span>
<div class="echarts-box">
<div class="echarts-header">
<ul class="legend">
<li>楼层负荷</li>
<li>充电桩负荷</li>
</ul>
</div>
<div class="echarts-content" id="line_chart_2"></div>
</div>
<!--科技感框-->
<div class="st-box">
<span class="bg-center"></span>
<div class="echarts-box">
<div class="echarts-header">
<ul class="legend">
<li>楼层负荷</li>
<li>充电桩负荷</li>
</ul>
</div>
<div class="echarts-content" id="line_chart_2"></div>
</div>
<!--科技感框-->
<div class="st-box">
<span class="bg-center"></span>
<div class="echarts-box">
<div class="echarts-header">
<ul class="legend">
<li>负荷预测</li>
<li>负荷功率</li>
</ul>
</div>
<div class="echarts-content" id="line_chart_3"></div>
</div>
<!--科技感框-->
<div class="st-box">
<span class="bg-center"></span>
<div class="echarts-box">
<div class="echarts-header">
<ul class="legend">
<li>负荷预测</li>
<li>负荷功率</li>
</ul>
</div>
<div class="echarts-content" id="line_chart_3"></div>
</div>
</div>
<!--中间内容区-->
<div class="center-section">
<!--上部统计区域-->
<div class="center-top">
<!--中间标题-->
<div class="center-title">
<span>能源监测</span>
<div class="center-title-bg"></div>
</div>
<div class="center-content">
<!--中间左侧统计-->
<div class="box_1 justify-between">
<div class="box-left">
<span class="text-title">单平米能耗(kWh)</span>
<div class="globe_1 text-globe">
<span class="text-num">88</span>
</div>
</div>
<!--中间内容区-->
<div class="center-section">
<!--上部统计区域-->
<div class="center-top">
<!--中间标题-->
<div class="center-title">
<span>能源监测</span>
<div class="center-title-bg"></div>
</div>
<div class="center-content">
<!--中间左侧统计-->
<div class="box_1 justify-between">
<div class="box-left">
<span class="text-title">单平米能耗(kWh)</span>
<div class="globe_1 text-globe">
<span class="text-num">88</span>
</div>
<div class="box-right">
<span class="text-title">单平米碳排(kWh)</span>
<div class="globe_2 text-globe">
<span class="text-num">100</span>
</div>
</div>
<div class="box-right">
<span class="text-title">单平米碳排(kWh)</span>
<div class="globe_2 text-globe">
<span class="text-num">100</span>
</div>
</div>
<div class="box_1 justify-between">
<div class="box-left">
<span class="text-title">充电桩功率(kW)</span>
<div class="globe_1 text-globe">
<span class="text-num">88</span>
</div>
</div>
<div class="box_1 justify-between">
<div class="box-left">
<span class="text-title">充电桩功率(kW)</span>
<div class="globe_1 text-globe">
<span class="text-num">88</span>
</div>
<div class="box-right">
<span class="text-title">光伏功率(kW)</span>
<div class="globe_2 text-globe">
<span class="text-num">100</span>
</div>
</div>
<div class="box-right">
<span class="text-title">光伏功率(kW)</span>
<div class="globe_2 text-globe">
<span class="text-num">100</span>
</div>
</div>
<div class="box_1 justify-between">
<div class="box-left-bottom">
<span class="text-title">负荷功率(kW)</span>
<div class="globe_1 text-globe">
<span class="text-num">88</span>
</div>
</div>
<div class="box_1 justify-between">
<div class="box-left-bottom">
<span class="text-title">负荷功率(kW)</span>
<div class="globe_1 text-globe">
<span class="text-num">88</span>
</div>
<div class="box-right-bottom">
<span class="text-title">联络线功率(kW)</span>
<div class="globe_2 text-globe">
<span class="text-num">100</span>
</div>
</div>
<div class="box-right-bottom">
<span class="text-title">联络线功率(kW)</span>
<div class="globe_2 text-globe">
<span class="text-num">100</span>
</div>
</div>
<div class="section"></div>
<div class="center-title-bottom"></div>
</div>
<div class="section"></div>
<div class="center-title-bottom"></div>
</div>
<!--下部统计区域-->
<div class="center-bottom">
<!--科技感框-->
<div class="section_1">
<div class="section_2 flex-row">
<div class="text-ball flex-col">
<span class="text_73">峰谷差</span>
<div class="text-wrapper_36 text-wrapper">
<span class="text-ball-num">88</span>
<span class="text-ball-percent">%</span>
</div>
</div>
<!--下部统计区域-->
<div class="center-bottom">
<!--科技感框-->
<div class="section_1">
<div class="section_2 flex-row">
<div class="text-ball flex-col">
<span class="text_73">峰谷差</span>
<div class="text-wrapper_36 text-wrapper">
<span class="text-ball-num">88</span>
<span class="text-ball-percent">%</span>
</div>
<div class="section_3 flex-col">
<div class="group_27 flex-row">
<div class="text-group_7 flex-col justify-between">
<span class="text_115">消纳率</span>
<div class="text-wrapper_57 text-wrapper">
<span class="text-ball-num">100</span>
<span class="text-ball-percent">%</span>
</div>
</div>
<div class="section_3 flex-col">
<div class="group_27 flex-row">
<div class="text-group_7 flex-col justify-between">
<span class="text_115">消纳率</span>
<div class="text-wrapper_57 text-wrapper">
<span class="text-ball-num">100</span>
<span class="text-ball-percent">%</span>
</div>
</div>
</div>
<div class="section_4 flex-col">
<div class="box_54 flex-row">
<div class="text-group_8 flex-col justify-between">
<span class="text_118">碳排系数</span>
<div class="text-wrapper">
<span class="text-ball-num">98</span>
<span class="text-ball-percent">%</span>
</div>
</div>
<div class="section_4 flex-col">
<div class="box_54 flex-row">
<div class="text-group_8 flex-col justify-between">
<span class="text_118">碳排系数</span>
<div class="text-wrapper">
<span class="text-ball-num">98</span>
<span class="text-ball-percent">%</span>
</div>
</div>
</div>
<div class="section_5 flex-col">
<div class="box_55 flex-row">
<div class="text-group_9 flex-col justify-between">
<span class="text_121">系统效率</span>
<div class="text-wrapper">
<span class="text-ball-num">88</span>
<span class="text-ball-percent">%</span>
</div>
</div>
<div class="section_5 flex-col">
<div class="box_55 flex-row">
<div class="text-group_9 flex-col justify-between">
<span class="text_121">系统效率</span>
<div class="text-wrapper">
<span class="text-ball-num">88</span>
<span class="text-ball-percent">%</span>
</div>
</div>
</div>
......@@ -185,51 +207,54 @@
</div>
</div>
</div>
<!--右侧内容区-->
<div class="right-section">
<div class="st-box">
<span class="bg-center"></span>
<div class="echarts-box">
<div class="echarts-header">
<ul class="legend">
<li>光伏发电量</li>
<li>碳减排量</li>
</ul>
</div>
<div class="echarts-content" id="line_chart_4"></div>
</div>
<!--右侧内容区-->
<div class="right-section">
<div class="st-box">
<span class="bg-center"></span>
<div class="echarts-box">
<div class="echarts-header">
<ul class="legend">
<li>光伏发电量</li>
<li>碳减排量</li>
</ul>
</div>
<div class="echarts-content" id="line_chart_4"></div>
</div>
</div>
<div class="st-box electric-power-st-box">
<span class="bg-center"></span>
<div class="echarts-box">
<div class="echarts-header">
<div class="title">发电计划(kW)</div>
<ul class="legend">
<li>AC/DC</li>
<li>储能</li>
<li>光伏</li>
<li>负荷</li>
</ul>
</div>
<div class="echarts-content" id="line_chart_5"></div>
<div class="st-box electric-power-st-box">
<span class="bg-center"></span>
<div class="echarts-box">
<div class="echarts-header">
<div class="title">发电计划(kW)</div>
<ul class="legend">
<li>AC/DC</li>
<li>储能</li>
<li>光伏</li>
<li>负荷</li>
</ul>
</div>
<div class="echarts-content" id="line_chart_5"></div>
</div>
</div>
<div class="st-box">
<span class="bg-center"></span>
<div class="echarts-box">
<div class="echarts-header">
<ul class="legend">
<li>光伏预测</li>
<li>光伏功率</li>
</ul>
</div>
<div class="echarts-content" id="line_chart_6"></div>
<div class="st-box">
<span class="bg-center"></span>
<div class="echarts-box">
<div class="echarts-header">
<ul class="legend">
<li>光伏预测</li>
<li>光伏功率</li>
</ul>
</div>
<div class="echarts-content" id="line_chart_6"></div>
</div>
</div>
</div>
<script src="https://cdn.ucyber.cn/common/echarts.js"></script>
</body>
</html>
</div>
</body>
<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 = {
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],
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"],
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",
'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,
......@@ -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.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 = {
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],
line2: [0.01, 0.01, 0.02, 0.03, 0.1, 0.03, 0.02],
};
}
// AC/DC、储能、光伏、负荷
const echart5Data = {
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",
'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: [
100, 190, 250, 100, 90, 100, 250, 100, 190, 250, 100, 90, 100, 250, 100,
......@@ -103,36 +108,36 @@ const echart5Data = {
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,
],
};
}
// 光伏预测、光伏功率
const echart6Data = {
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",
'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, 0.02, 0.02, 0.03, 0.05, 0.05, 0.02,
......@@ -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.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 曲线图通用配置
......@@ -150,7 +155,7 @@ const echart6Data = {
* @param {type: array, desc: y轴数据 } yData
* */
const lineChartOption = (xData, yData, interval) => {
const series = [];
const series = []
yData.forEach((item) => {
series.push({
data: item.data,
......@@ -169,163 +174,220 @@ const lineChartOption = (xData, yData, interval) => {
]),
}
: null,
type: "line",
type: 'line',
smooth: true,
symbol: "none",
});
});
symbol: 'none',
})
})
return {
tooltip: {
trigger: "axis",
trigger: 'axis',
},
grid: {
top: "5%",
bottom: "15%",
right: "5%",
top: '5%',
bottom: '15%',
right: '5%',
},
xAxis: {
data: xData,
type: "category",
type: 'category',
axisLine: { show: false },
axisTick: { show: false },
splitLine: false,
boundaryGap: false,
axisLabel: {
color: "#7c90c8",
color: '#7c90c8',
fontSize: 10,
margin: 15,
interval,
},
},
yAxis: {
type: "value",
type: 'value',
axisLine: { show: false },
axisTick: { show: false },
splitLine: false,
axisLabel: {
color: "#7c90c8",
color: '#7c90c8',
fontSize: 10,
margin: 15,
},
},
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 = () => {
// echart渲染
const lineChart1 = echarts.init(document.getElementById("line_chart_1"));
const lineChart1 = echarts.init(document.getElementById('line_chart_1'))
lineChart1.setOption(
lineChartOption(echart1Data.date, [
{
data: echart1Data.line1,
color: "#4a76cf",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
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)"],
color: '#2dc9e3',
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(
lineChartOption(echart2Data.date, [
{
data: echart2Data.line1,
color: "#4a76cf",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
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)"],
color: '#2dc9e3',
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(
lineChartOption(
echart3Data.date,
[
{
data: echart3Data.line1,
color: "#4a76cf",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
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)"],
color: '#2dc9e3',
areaColor: ['rgba(0,105,107, 1)', 'rgba(0,105,107, 0)'],
},
],
3
)
);
)
const lineChart4 = echarts.init(document.getElementById("line_chart_4"));
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)"],
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)"],
color: '#2dc9e3',
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(
lineChartOption(
echart5Data.date,
[
{
data: echart5Data.line1,
color: "#f1ec41",
color: '#f1ec41',
},
{
data: echart5Data.line2,
color: "#c49ffe",
color: '#c49ffe',
},
{
data: echart5Data.line3,
color: "#4a76cf",
color: '#4a76cf',
},
{
data: echart5Data.line4,
color: "#2dc9e3",
color: '#2dc9e3',
},
],
3
)
);
)
const lineChart6 = echarts.init(document.getElementById("line_chart_6"));
const lineChart6 = echarts.init(document.getElementById('line_chart_6'))
lineChart6.setOption(
lineChartOption(
echart6Data.date,
[
{
data: echart6Data.line1,
color: "#4a76cf",
areaColor: ["rgba(23,71,153, 1)", "rgba(23,71,153, 0)"],
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)"],
color: '#2dc9e3',
areaColor: ['rgba(0,105,107, 1)', 'rgba(0,105,107, 0)'],
},
],
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 {
margin: 0 20px;
padding: 0;
background: url("../images/bg.png") no-repeat;
background: url('../images/bg.png') no-repeat;
min-width: 1800px;
overflow-x: auto;
}
ul {
list-style: none;
}
ul,
li {
margin: 0;
padding: 0;
}
.header {
position: relative;
height: 130px;
width: 100%;
background: url("../images/header-bg.png") no-repeat;
background: url('../images/header-bg.png') no-repeat;
background-size: cover;
display: flex;
}
......@@ -21,7 +28,7 @@ ul {
width: 228px;
height: 40px;
margin: 80px 0 0 20px;
background: url("../images/logo.png") no-repeat;
background: url('../images/logo.png') no-repeat;
background-size: cover;
}
.header-middle {
......@@ -80,7 +87,7 @@ ul {
display: inline-block;
width: 23px;
height: 23px;
background: url("../images/user.png") no-repeat;
background: url('../images/user.png') no-repeat;
background-size: cover;
margin-right: 15px;
}
......@@ -97,7 +104,7 @@ ul {
width: 21px;
height: 23px;
cursor: pointer;
background: url("../images/logout.png") no-repeat;
background: url('../images/logout.png') no-repeat;
background-size: contain;
margin-right: 15px;
}
......@@ -116,7 +123,7 @@ ul {
&::before,
&::after {
position: absolute;
content: " ";
content: ' ';
display: block;
top: 50%;
transform: translateY(-50%);
......@@ -162,8 +169,7 @@ ul {
.legend {
user-select: none;
display: flex;
margin-top: 35px;
margin-right: 20px;
margin: 35px 20px 0;
li {
display: flex;
align-items: center;
......@@ -176,7 +182,7 @@ ul {
height: 12px;
border-radius: 5px;
display: block;
content: " ";
content: ' ';
}
&:nth-child(1) {
&::before {
......@@ -227,11 +233,11 @@ ul {
}
}
}
.center-section{
.center-section {
width: 865px;
height: 540px;
position: relative;
.justify-between{
.justify-between {
display: flex;
justify-content: space-between;
}
......@@ -247,7 +253,7 @@ ul {
margin: 15px 0 0 28px;
line-height: 47px;
}
.text-globe{
.text-globe {
position: absolute;
height: 110px;
background: url(../images/globe.png) 100% no-repeat;
......@@ -263,16 +269,16 @@ ul {
text-align: left;
white-space: nowrap;
}
.center-top{
.center-top {
display: flex;
flex-direction: column;
align-items: center;
.center-title{
background: url("../images/center-title-bg.png") no-repeat;
.center-title {
background: url('../images/center-title-bg.png') no-repeat;
width: 411px;
height: 54px;
position: relative;
& > span{
& > span {
width: 89px;
height: 22px;
overflow-wrap: break-word;
......@@ -284,7 +290,7 @@ ul {
line-height: 53px;
margin: 16px 0 0 168px;
}
.center-title-bg{
.center-title-bg {
background: url(../images/center-title-top.png) no-repeat;
width: 549px;
height: 14px;
......@@ -293,7 +299,7 @@ ul {
left: -72px;
}
}
.center-content{
.center-content {
.box_1 {
width: 822px;
height: 78px;
......@@ -355,7 +361,7 @@ ul {
}
}
}
.center-title-bottom{
.center-title-bottom {
position: absolute;
left: 158px;
top: 532px;
......@@ -375,7 +381,7 @@ ul {
}
}
}
.center-bottom{
.center-bottom {
.flex-row {
display: flex;
flex-direction: row;
......@@ -474,8 +480,8 @@ ul {
margin-left: 10px;
}
.text-wrapper_57 {
width: 83px;
}
width: 83px;
}
}
}
}
......@@ -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