Skip to content

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

feat: 添加小数点

parent 3a9ce1ba
Show whitespace changes
Inline Side-by-side
Showing with 300 additions and 289 deletions
src/css/stat-bar.css
View file @ 03558732
@font-face { @font-face {
font-family: "DigifaceWide"; font-family: 'DigifaceWide';
src: url("../font/DIGIFACEWIDE REGULAR.TTF") format("truetype"); src: url('../font/DIGIFACEWIDE REGULAR.TTF') format('truetype');
/* Safari, Android, iOS */ /* Safari, Android, iOS */
} }
.stat-bar { .stat-bar {
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
.stat-bar .stat-item .tit { .stat-bar .stat-item .tit {
font-size: 20px; font-size: 20px;
color: #52ccff; color: #52ccff;
font-family: "Source Han Sans CN"; font-family: 'Source Han Sans CN';
} }
.stat-bar .stat-item .scroll-box { .stat-bar .stat-item .scroll-box {
display: -webkit-box; display: -webkit-box;
...@@ -46,7 +46,6 @@ ...@@ -46,7 +46,6 @@
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
margin-left: 10px; margin-left: 10px;
min-width: 215px;
} }
.stat-bar .stat-item .scroll-num { .stat-bar .stat-item .scroll-num {
width: 39px; width: 39px;
...@@ -55,15 +54,23 @@ ...@@ -55,15 +54,23 @@
text-align: center; text-align: center;
font-size: 41px; font-size: 41px;
color: #01fff6; color: #01fff6;
font-family: "DigifaceWide"; font-family: 'DigifaceWide';
border-radius: 3px; border-radius: 3px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAyCAYAAADfuMIdAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAABAxJREFUeJzFmb2rXFUUxdc+X9e8JEQyEf8AE00nIoigRQqtrCyiEsEyWog2dnba+h9YCHZiEaIggjam0comIJJU4gck4T1DwvuYmXvPdu1z7515/gPZb/hx7rx5MIu1197n3PsC7EdVcE0fx4+6wA96xg37ftNhevgTmrhrOMurAa/Iv3hVHrph3286TE8T95126Ll+8u4Rnr8a3TEd/ajLnOtw9++K3VX8H+VkwuJCcWH3jqBiJ2BJlYe7ETs7acP5ix1OPlmwfy+4sDyYMpchWK0jDg5SQ7oCrQm3/gj482Fy4f4/1PNAAigH6xxPl5IM7Jwpp+7txVMlJS9wqAm9hIA13evv52GJxokTKQ8y5CGsixeoq3xMXI6aUmrUPuvyMCsL7gVEEgYT11FcXWfd0UYdUFRKVlE3cLTOCEcxIDJzskqcydlgcbkOFJjcQJids7IuKWhFQUalcwhkcAPDstCwaJtFQMl0LufGquco6Tuo+CFabLxZ/AJ0yAm1GD33higpR5bYC55E2BRhck6HPGcuVZmcgyMhY91HG8IUV6k2FEN1mDLnB6dHQe7C6Nw6ZO3RGYDwD3g9+EH32BCzc7WnoNpA5RHKTipx8KOyY/uB4pSTLooFsDSAYqM5sGu8gEaaNCS6ZqdhTuYwdAbf88Nq+4Yf1q2pTJmrWiKDaGjQrmXOEVSas1qmMXPm3PRBUOaOTYHqyGbOWeboHH8xYSKFJfZj7NYax8wpysZSDsHQHNTHvOCRyQZxslMJtbBbtxO6tNXc9MLKGu1U0pyrJYg0eNtjZWVj0EkntmW1zNE5pVuGzblKgW0Qe2Hiap3K2joUIzpuYa7YaVhkagjL3HHltLaKusGzuWUv2h1/NBtrkIbUmoWhFJ48vaAmMjvHslojGFTtm7dt5uKYuWBq55rrNn9uUE9MYbPxb3cIO8+xe3ntRStrc85e0hQ3S7XqdO3ZsZweUSZxlRs/N1ytc1m94X1r61ZtTzc3ZRVFFr537dbWsTGMO4S0Z025YUJ1Wr2wIQzLnPDFBuBSZO7WWagXm7KGuawb1xLX5OoclEdgCWPmlG/mMI7qi29ZmznByjrNudk5Cm3uqR8qtk7d2t5sLLXHEklF3DjunD253n5orrljDs6ZE7NSraRZqFporSe0iyclmZ2TyCUZY94kulLH563z3VfchFGOXXshJrK2st7F4ly/Ud2Ettnnx2IxYP9gL+AAP+OFF/+qi3MrYBbmV9J69okezz53B7/cuBnwhuyhdJ/2H3x0c/XypTurCxf31089/eg5/8z+6qVLu/17H97C7duf599/ezD+v/U1uYF4+gpev/wZrr7/tb71zjf65tvfPlIuX7nOCn6Jn77/OH/1xa/MnPwHoi9Z08sHR4EAAAAASUVORK5CYII=") no-repeat 0 0; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAyCAYAAADfuMIdAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAABAxJREFUeJzFmb2rXFUUxdc+X9e8JEQyEf8AE00nIoigRQqtrCyiEsEyWog2dnba+h9YCHZiEaIggjam0comIJJU4gck4T1DwvuYmXvPdu1z7515/gPZb/hx7rx5MIu1197n3PsC7EdVcE0fx4+6wA96xg37ftNhevgTmrhrOMurAa/Iv3hVHrph3286TE8T95126Ll+8u4Rnr8a3TEd/ajLnOtw9++K3VX8H+VkwuJCcWH3jqBiJ2BJlYe7ETs7acP5ix1OPlmwfy+4sDyYMpchWK0jDg5SQ7oCrQm3/gj482Fy4f4/1PNAAigH6xxPl5IM7Jwpp+7txVMlJS9wqAm9hIA13evv52GJxokTKQ8y5CGsixeoq3xMXI6aUmrUPuvyMCsL7gVEEgYT11FcXWfd0UYdUFRKVlE3cLTOCEcxIDJzskqcydlgcbkOFJjcQJids7IuKWhFQUalcwhkcAPDstCwaJtFQMl0LufGquco6Tuo+CFabLxZ/AJ0yAm1GD33higpR5bYC55E2BRhck6HPGcuVZmcgyMhY91HG8IUV6k2FEN1mDLnB6dHQe7C6Nw6ZO3RGYDwD3g9+EH32BCzc7WnoNpA5RHKTipx8KOyY/uB4pSTLooFsDSAYqM5sGu8gEaaNCS6ZqdhTuYwdAbf88Nq+4Yf1q2pTJmrWiKDaGjQrmXOEVSas1qmMXPm3PRBUOaOTYHqyGbOWeboHH8xYSKFJfZj7NYax8wpysZSDsHQHNTHvOCRyQZxslMJtbBbtxO6tNXc9MLKGu1U0pyrJYg0eNtjZWVj0EkntmW1zNE5pVuGzblKgW0Qe2Hiap3K2joUIzpuYa7YaVhkagjL3HHltLaKusGzuWUv2h1/NBtrkIbUmoWhFJ48vaAmMjvHslojGFTtm7dt5uKYuWBq55rrNn9uUE9MYbPxb3cIO8+xe3ntRStrc85e0hQ3S7XqdO3ZsZweUSZxlRs/N1ytc1m94X1r61ZtTzc3ZRVFFr537dbWsTGMO4S0Z025YUJ1Wr2wIQzLnPDFBuBSZO7WWagXm7KGuawb1xLX5OoclEdgCWPmlG/mMI7qi29ZmznByjrNudk5Cm3uqR8qtk7d2t5sLLXHEklF3DjunD253n5orrljDs6ZE7NSraRZqFporSe0iyclmZ2TyCUZY94kulLH563z3VfchFGOXXshJrK2st7F4ly/Ud2Ettnnx2IxYP9gL+AAP+OFF/+qi3MrYBbmV9J69okezz53B7/cuBnwhuyhdJ/2H3x0c/XypTurCxf31089/eg5/8z+6qVLu/17H97C7duf599/ezD+v/U1uYF4+gpev/wZrr7/tb71zjf65tvfPlIuX7nOCn6Jn77/OH/1xa/MnPwHoi9Z08sHR4EAAAAASUVORK5CYII=') no-repeat 0 0;
background-size: cover; background-size: cover;
overflow: hidden; overflow: hidden;
margin-right: 4px; margin-right: 4px;
} }
.stat-bar .stat-item .dot {
background-color: #01fff6;
width: 6px;
height: 6px;
border-radius: 100%;
margin-top: 36px;
margin-right: 4px;
}
.stat-bar .stat-item .suffix { .stat-bar .stat-item .suffix {
font-size: 16px; font-size: 16px;
color: #758094; color: #758094;
font-family: "Source Han Sans CN"; font-family: 'Source Han Sans CN';
} }
src/js/index.js
View file @ 03558732
const ua = navigator.userAgent.toLowerCase(); const ua = navigator.userAgent.toLowerCase()
const testUA = (regexp) => regexp.test(ua); const testUA = (regexp) => regexp.test(ua)
const isSafari = testUA(/safari/g) && !testUA(/chrome/g); const isSafari = testUA(/safari/g) && !testUA(/chrome/g)
const isWeChat = testUA(/micromessenger/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, 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, 0.02, 0.03, 0.1, 0.02, 0.05, 0.02, 0.03, 0.1,
], ],
line2: [ 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.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.02, 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,
], ],
}; }
// 光伏发电量、碳减排量 // 光伏发电量、碳减排量
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, 190, 250, 100, 90, 100, 250, 100, 190, 250,
190, 250, 100, 90, 100, 250, 100, 190, 250, 100, 90, 100, 100, 90, 100,
], ],
line2: [ line2: [
200, 90, 200, 100, 90, 100, 200, 190, 250, 100, 90, 100, 250, 100, 190, 250, 200, 90, 200, 100, 90, 100, 200, 190, 250, 100, 90, 100, 250, 100, 190, 250, 100, 90, 100, 250, 100, 1000, 100, 250,
100, 90, 100, 250, 100, 1000, 100, 250, 500, 500,
], ],
line3: [ line3: [
300, 90, 200, 100, 90, 100, 200, 190, 250, 100, 90, 100, 250, 100, 190, 250, 300, 90, 200, 100, 90, 100, 200, 190, 250, 100, 90, 100, 250, 100, 190, 250, 100, 90, 100, 250, 100, 1000, 100, 250,
100, 90, 100, 250, 100, 1000, 100, 250, 400, 400,
], ],
line4: [ line4: [
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,
100, 90, 100, 250, 100, 1000, 100, 250, 300, 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, 0.03, 0.02, 0.02, 0.03, 0.05, 1, 0.02, 0.03,
0.03, 0.02, 0.02, 0.03, 0.05, 1, 0.02, 0.03, 0.02, 0.05, 0.02, 0.03, 0.05, 0.02, 0.05, 0.02, 0.03, 0.05,
], ],
line2: [ line2: [
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.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.02, 0.03, 0.05, 0.05, 0.05,
], ],
}; }
// 顶部滚动数字数据 // 顶部滚动数字数据
const scrollNumData = { const scrollNumData = {
beforeNumArr: ["00000", "00000", "00000", "00000"], beforeNumArr: ["000.00", "000.0", "0000", "00000"],
afterNumArr: ["35345", "83460", "36765", "36465"], afterNumArr: ["003.45", "846.0", "0065", "36465"],
}; }
// 中间球体数据 // 中间球体数据
const ballData = [11, 22, 33, 44, 55, 66]; const ballData = [11, 22, 33, 44, 55, 66]
// 底部环形数据 // 底部环形数据
const ringData = [11, 22, 33, 44]; const ringData = [11, 22, 33, 44]
/** /**
* echartjs 曲线图通用配置 * echartjs 曲线图通用配置
...@@ -167,7 +167,7 @@ const ringData = [11, 22, 33, 44]; ...@@ -167,7 +167,7 @@ const ringData = [11, 22, 33, 44];
* @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,
...@@ -186,184 +186,186 @@ const lineChartOption = (xData, yData, interval) => { ...@@ -186,184 +186,186 @@ 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(numArr) { function createMultiSrollNum(numArr) {
const scrollBox = document.getElementsByClassName("scroll-box"); const scrollBox = document.getElementsByClassName('scroll-box')
for (let i = 0; i < scrollBox.length; i++) { for (let i = 0; i < scrollBox.length; i++) {
const scrollNode = scrollBox[i]; const scrollNode = scrollBox[i]
const childNumArr = numArr[i].split(""); const childNumArr = numArr[i].split('')
const docFrag = document.createDocumentFragment(); const docFrag = document.createDocumentFragment()
childNumArr.forEach((num, i) => { childNumArr.forEach((num, i) => {
docFrag.appendChild(createSrollNum(num)); docFrag.appendChild(createSrollNum(num))
}); })
scrollNode.appendChild(docFrag); scrollNode.appendChild(docFrag)
} }
} }
// 创建单个数字 // 创建单个数字
function createSrollNum(num) { function createSrollNum(num) {
const scrollNumNode = document.createElement("div"); const scrollNumNode = document.createElement('div')
scrollNumNode.className = "scroll-num"; if (num === '.') {
scrollNumNode.innerHTML = "<ul><li>" + num + "</li></ul>"; scrollNumNode.className = 'dot'
return scrollNumNode; } else {
scrollNumNode.className = 'scroll-num'
scrollNumNode.innerHTML = '<ul><li>' + num + '</li></ul>'
}
return scrollNumNode
} }
function getIntervalNumArr(start, end, reduce) { function getIntervalNumArr(start, end, reduce) {
const arr = []; const arr = []
if (reduce) { if (reduce) {
for (let i = end; i > start; i--) { for (let i = end; i > start; i--) {
arr.push(i); arr.push(i)
} }
} else { } else {
for (let i = start; i < end; i++) { for (let i = start; i < end; i++) {
arr.push(i); arr.push(i)
} }
} }
return arr; return arr
} }
function repeatArr(a, m) { function repeatArr(a, m) {
let j = []; let j = []
for (let i = 0; i < m; i++) { for (let i = 0; i < m; i++) {
j = j.concat(a); j = j.concat(a)
} }
return j; return j
} }
// 创建多组数字动画 // 创建多组数字动画
function addMultiDigitAnimate(beforeNumArr, afterNumArr) { function addMultiDigitAnimate(beforeNumArr, afterNumArr) {
TWEEN.removeAll(); TWEEN.removeAll()
const scrollBox = document.getElementsByClassName("scroll-box"); const scrollBox = document.getElementsByClassName('scroll-box')
console.log(beforeNumArr, afterNumArr); const arr = []
const arr = [];
for (let i = 0; i < scrollBox.length; i++) { for (let i = 0; i < scrollBox.length; i++) {
const scrollNode = scrollBox[i]; const scrollNode = scrollBox[i]
const beforeNum = beforeNumArr[i]; const beforeNum = beforeNumArr[i]
const afterNum = afterNumArr[i]; const afterNum = afterNumArr[i]
const isUp = Number(afterNum) - Number(beforeNum) >= 0; const isUp = Number(afterNum) - Number(beforeNum) >= 0
const beforeChildNumArr = beforeNum.split(""); const beforeChildNumArr = beforeNum.split('')
const afterChildNumArr = afterNum.split(""); const afterChildNumArr = afterNum.split('')
const scrollNum = scrollNode.childNodes; const scrollNum = scrollNode.childNodes
let delay = 0; let delay = 0
const staticDuration = 6000; const staticDuration = 6000
let zeroBeforeIndex = 0; // 是否以0开头 标志位 let zeroBeforeIndex = 0 // 是否以0开头 标志位
let zeroAfterIndex = 0; // 是否以0开头 标志位 let zeroAfterIndex = 0 // 是否以0开头 标志位
let someNumberIndex = 0; // 前面有几位数字相同 let someNumberIndex = 0 // 前面有几位数字相同
let stopSomeNumber = false; // 停止计算前面有几位数字相同 let stopSomeNumber = false // 停止计算前面有几位数字相同
const digitIndex = beforeChildNumArr.findIndex((ele) => ele === '.') // 小数点
for (let j = 0; j < beforeChildNumArr.length; j++) { for (let j = 0; j < beforeChildNumArr.length; j++) {
const num = +beforeChildNumArr[j]; if (beforeChildNumArr[j] === '.') {
const num2 = +afterChildNumArr[j]; continue
}
const num = +beforeChildNumArr[j]
const num2 = +afterChildNumArr[j]
// 算beforeNum前面的0 // 算beforeNum前面的0
let zeroBeforeFlag = false; let zeroBeforeFlag = false
if (num === 0 && zeroBeforeIndex === j) { if (num === 0 && zeroBeforeIndex === j) {
zeroBeforeFlag = true; if ((digitIndex > -1 && j < digitIndex - 1) || digitIndex === -1) {
zeroBeforeIndex++; zeroBeforeFlag = true
zeroBeforeIndex++
}
} }
// 算afterNum前面的0 // 算afterNum前面的0
let zeroAfterFlag = false; let zeroAfterFlag = false
if (num2 === 0 && zeroAfterIndex === j) { if (num2 === 0 && zeroAfterIndex === j) {
zeroAfterFlag = true; if ((digitIndex > -1 && j < digitIndex - 1) || digitIndex === -1) {
zeroAfterIndex++; zeroAfterFlag = true
zeroAfterIndex++
}
} }
// 前面有几位数字相同 // 前面有几位数字相同
if (num === num2 && !stopSomeNumber) { if (num === num2 && !stopSomeNumber) {
someNumberIndex++; someNumberIndex++
} else { } else {
stopSomeNumber = true; stopSomeNumber = true
} }
let numberArr; let numberArr
let repeatNum; let repeatNum
if (isUp) { if (isUp) {
if (num2 > num) { if (num2 > num) {
numberArr = getIntervalNumArr(num, num2); numberArr = getIntervalNumArr(num, num2)
repeatNum = getIntervalNumArr(num2, 10).concat( repeatNum = getIntervalNumArr(num2, 10).concat(getIntervalNumArr(0, num2))
getIntervalNumArr(0, num2)
);
} else { } else {
numberArr = getIntervalNumArr(num2, num, true); numberArr = getIntervalNumArr(num2, num, true)
repeatNum = getIntervalNumArr(0, num2, true) repeatNum = getIntervalNumArr(0, num2, true).concat([0]).concat(getIntervalNumArr(num2, 9, true))
.concat([0])
.concat(getIntervalNumArr(num2, 9, true));
} }
numberArr = numberArr.concat(repeatArr(repeatNum, j - someNumberIndex)); numberArr = numberArr.concat(repeatArr(repeatNum, j - someNumberIndex))
numberArr.push(num2); numberArr.push(num2)
} else { } else {
if (num2 < num) { if (num2 < num) {
numberArr = getIntervalNumArr(num2, num, true); numberArr = getIntervalNumArr(num2, num, true)
repeatNum = getIntervalNumArr(0, num2, true) repeatNum = getIntervalNumArr(0, num2, true).concat([0]).concat(getIntervalNumArr(num2, 9, true))
.concat([0])
.concat(getIntervalNumArr(num2, 9, true));
} else { } else {
numberArr = getIntervalNumArr(num, num2); numberArr = getIntervalNumArr(num, num2)
repeatNum = getIntervalNumArr(num2, 10).concat( repeatNum = getIntervalNumArr(num2, 10).concat(getIntervalNumArr(0, num2))
getIntervalNumArr(0, num2)
);
} }
numberArr = numberArr.concat(repeatArr(repeatNum, j - someNumberIndex)); numberArr = numberArr.concat(repeatArr(repeatNum, j - someNumberIndex))
numberArr.push(num2); numberArr.push(num2)
numberArr.reverse(); numberArr.reverse()
} }
const ulNode = scrollNum[j].childNodes[0]; const ulNode = scrollNum[j].childNodes[0]
ulNode.innerHTML = numberArr ulNode.innerHTML = numberArr.map((ele) => '<li>' + ele + '</li>').join('')
.map((ele) => "<li>" + ele + "</li>")
.join("");
const last = (1 / numberArr.length - 1) * 100; const last = (1 / numberArr.length - 1) * 100
const start = isUp ? 0 : last; const start = isUp ? 0 : last
const lastDelay = delay + staticDuration * 0.03; const lastDelay = delay + staticDuration * 0.03
const opacityBefore = zeroBeforeFlag ? 0 : 1; const opacityBefore = zeroBeforeFlag ? 0 : 1
arr.push({ arr.push({
start, start,
end: isUp ? last : 0, end: isUp ? last : 0,
...@@ -372,192 +374,186 @@ function addMultiDigitAnimate(beforeNumArr, afterNumArr) { ...@@ -372,192 +374,186 @@ function addMultiDigitAnimate(beforeNumArr, afterNumArr) {
opacityAfter: zeroAfterFlag ? 0 : 1, opacityAfter: zeroAfterFlag ? 0 : 1,
duration: staticDuration - lastDelay, duration: staticDuration - lastDelay,
ulNode, ulNode,
}); })
delay = lastDelay; delay = lastDelay
ulNode.setAttribute( ulNode.setAttribute('style', 'transform: translateY(' + start + '%);opacity:' + opacityBefore)
"style",
"transform: translateY(" + start + "%);opacity:" + opacityBefore
);
} }
} }
arr.forEach((sObject) => { arr.forEach((sObject) => {
const { start, end, ulNode, delay, duration, opacityBefore, opacityAfter } = const { start, end, ulNode, delay, duration, opacityBefore, opacityAfter } = sObject
sObject;
new TWEEN.Tween({ y: start, opacity: opacityBefore }) new TWEEN.Tween({ y: start, opacity: opacityBefore })
.to({ y: end, opacity: opacityAfter }, duration) .to({ y: end, opacity: opacityAfter }, duration)
.delay(delay) .delay(delay)
.easing(TWEEN.Easing.Quintic.Out) .easing(TWEEN.Easing.Quintic.Out)
.onUpdate((object) => { .onUpdate((object) => {
ulNode.setAttribute( ulNode.setAttribute('style', 'transform: translateY(' + object.y + '%);opacity:' + object.opacity)
"style", })
"transform: translateY(" + object.y + "%);opacity:" + object.opacity .start()
);
}) })
.start();
});
animate(); animate()
} }
function createRandom() { function createRandom() {
const arr = []; const arr = []
for (let i = 0; i < 4; i++) { for (let i = 0; i < 4; i++) {
let str = ""; let str = ''
for (let j = 0; j < 5; j++) { for (let j = 0; j < 5; j++) {
const num = Math.floor(Math.random() * 10) + ""; const num = Math.floor(Math.random() * 10) + ''
str += num; str += num
} }
arr.push(str); arr.push(str)
} }
return arr; return arr
} }
function animate(time) { function animate(time) {
let id = requestAnimationFrame(animate); let id = requestAnimationFrame(animate)
var result = TWEEN.update(time); var result = TWEEN.update(time)
if (!result) cancelAnimationFrame(id); if (!result) cancelAnimationFrame(id)
} }
// 设置圆球数据 // 设置圆球数据
function setBallData(list) { function setBallData(list) {
list.forEach((_, idx) => { list.forEach((_, idx) => {
document.querySelector(".ball-l-" + (idx + 1)).innerHTML = list[idx]; document.querySelector('.ball-l-' + (idx + 1)).innerHTML = list[idx]
}); })
} }
// 设置环形数据 // 设置环形数据
function setRingData(list) { function setRingData(list) {
list.forEach((_, idx) => { list.forEach((_, idx) => {
document.querySelector(".s-ring-" + (idx + 1)).innerHTML = list[idx]; document.querySelector('.s-ring-' + (idx + 1)).innerHTML = list[idx]
}); })
} }
const leftLineChart = () => { const leftLineChart = () => {
// 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 rightLineChart = () => { const rightLineChart = () => {
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
) )
); )
}; }
window.onload = () => { window.onload = () => {
/***********************************顶部数字滚动****************************************/ /***********************************顶部数字滚动****************************************/
// 初始化 // 初始化
createMultiSrollNum(scrollNumData.beforeNumArr); createMultiSrollNum(scrollNumData.beforeNumArr)
// 添加动画 // 添加动画
addMultiDigitAnimate(scrollNumData.beforeNumArr, scrollNumData.afterNumArr); addMultiDigitAnimate(scrollNumData.beforeNumArr, scrollNumData.afterNumArr)
// 测试，点击第一列数字 // 测试，点击第一列数字
// document.getElementsByClassName('scroll-box')[0].onclick = function () { // document.getElementsByClassName('scroll-box')[0].onclick = function () {
...@@ -568,14 +564,14 @@ window.onload = () => { ...@@ -568,14 +564,14 @@ window.onload = () => {
// } // }
/***********************************左侧chart线条****************************************/ /***********************************左侧chart线条****************************************/
leftLineChart(); leftLineChart()
/***********************************右侧chart线条****************************************/ /***********************************右侧chart线条****************************************/
rightLineChart(); rightLineChart()
/***********************************中间球体****************************************/ /***********************************中间球体****************************************/
// 球体数据 // 球体数据
setBallData(ballData); setBallData(ballData)
/***********************************底部环形****************************************/ /***********************************底部环形****************************************/
// 环形数据 // 环形数据
setRingData(ringData); setRingData(ringData)
}; }
src/less/stat-bar.less
View file @ 03558732
@font-face { @font-face {
font-family: "DigifaceWide"; font-family: 'DigifaceWide';
src: url("../font/DIGIFACEWIDE REGULAR.TTF") format("truetype"); /* Safari, Android, iOS */ src: url('../font/DIGIFACEWIDE REGULAR.TTF') format('truetype'); /* Safari, Android, iOS */
} }
.stat-bar { .stat-bar {
...@@ -27,12 +27,12 @@ ...@@ -27,12 +27,12 @@
.tit { .tit {
font-size: 20px; font-size: 20px;
color: #52ccff; color: #52ccff;
font-family: "Source Han Sans CN"; font-family: 'Source Han Sans CN';
} }
.scroll-box { .scroll-box {
display: flex; display: flex;
margin-left: 10px; margin-left: 10px;
min-width: 215px; // min-width: 215px;
} }
.scroll-num { .scroll-num {
width: 39px; width: 39px;
...@@ -41,19 +41,27 @@ ...@@ -41,19 +41,27 @@
text-align: center; text-align: center;
font-size: 41px; font-size: 41px;
color: #01fff6; color: #01fff6;
font-family: "DigifaceWide"; font-family: 'DigifaceWide';
border-radius: 3px; border-radius: 3px;
//background: url('../images/digital-bg.png') no-repeat 0 0; //background: url('../images/digital-bg.png') no-repeat 0 0;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAyCAYAAADfuMIdAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAABAxJREFUeJzFmb2rXFUUxdc+X9e8JEQyEf8AE00nIoigRQqtrCyiEsEyWog2dnba+h9YCHZiEaIggjam0comIJJU4gck4T1DwvuYmXvPdu1z7515/gPZb/hx7rx5MIu1197n3PsC7EdVcE0fx4+6wA96xg37ftNhevgTmrhrOMurAa/Iv3hVHrph3286TE8T95126Ll+8u4Rnr8a3TEd/ajLnOtw9++K3VX8H+VkwuJCcWH3jqBiJ2BJlYe7ETs7acP5ix1OPlmwfy+4sDyYMpchWK0jDg5SQ7oCrQm3/gj482Fy4f4/1PNAAigH6xxPl5IM7Jwpp+7txVMlJS9wqAm9hIA13evv52GJxokTKQ8y5CGsixeoq3xMXI6aUmrUPuvyMCsL7gVEEgYT11FcXWfd0UYdUFRKVlE3cLTOCEcxIDJzskqcydlgcbkOFJjcQJids7IuKWhFQUalcwhkcAPDstCwaJtFQMl0LufGquco6Tuo+CFabLxZ/AJ0yAm1GD33higpR5bYC55E2BRhck6HPGcuVZmcgyMhY91HG8IUV6k2FEN1mDLnB6dHQe7C6Nw6ZO3RGYDwD3g9+EH32BCzc7WnoNpA5RHKTipx8KOyY/uB4pSTLooFsDSAYqM5sGu8gEaaNCS6ZqdhTuYwdAbf88Nq+4Yf1q2pTJmrWiKDaGjQrmXOEVSas1qmMXPm3PRBUOaOTYHqyGbOWeboHH8xYSKFJfZj7NYax8wpysZSDsHQHNTHvOCRyQZxslMJtbBbtxO6tNXc9MLKGu1U0pyrJYg0eNtjZWVj0EkntmW1zNE5pVuGzblKgW0Qe2Hiap3K2joUIzpuYa7YaVhkagjL3HHltLaKusGzuWUv2h1/NBtrkIbUmoWhFJ48vaAmMjvHslojGFTtm7dt5uKYuWBq55rrNn9uUE9MYbPxb3cIO8+xe3ntRStrc85e0hQ3S7XqdO3ZsZweUSZxlRs/N1ytc1m94X1r61ZtTzc3ZRVFFr537dbWsTGMO4S0Z025YUJ1Wr2wIQzLnPDFBuBSZO7WWagXm7KGuawb1xLX5OoclEdgCWPmlG/mMI7qi29ZmznByjrNudk5Cm3uqR8qtk7d2t5sLLXHEklF3DjunD253n5orrljDs6ZE7NSraRZqFporSe0iyclmZ2TyCUZY94kulLH563z3VfchFGOXXshJrK2st7F4ly/Ud2Ettnnx2IxYP9gL+AAP+OFF/+qi3MrYBbmV9J69okezz53B7/cuBnwhuyhdJ/2H3x0c/XypTurCxf31089/eg5/8z+6qVLu/17H97C7duf599/ezD+v/U1uYF4+gpev/wZrr7/tb71zjf65tvfPlIuX7nOCn6Jn77/OH/1xa/MnPwHoi9Z08sHR4EAAAAASUVORK5CYII=") background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAyCAYAAADfuMIdAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAABAxJREFUeJzFmb2rXFUUxdc+X9e8JEQyEf8AE00nIoigRQqtrCyiEsEyWog2dnba+h9YCHZiEaIggjam0comIJJU4gck4T1DwvuYmXvPdu1z7515/gPZb/hx7rx5MIu1197n3PsC7EdVcE0fx4+6wA96xg37ftNhevgTmrhrOMurAa/Iv3hVHrph3286TE8T95126Ll+8u4Rnr8a3TEd/ajLnOtw9++K3VX8H+VkwuJCcWH3jqBiJ2BJlYe7ETs7acP5ix1OPlmwfy+4sDyYMpchWK0jDg5SQ7oCrQm3/gj482Fy4f4/1PNAAigH6xxPl5IM7Jwpp+7txVMlJS9wqAm9hIA13evv52GJxokTKQ8y5CGsixeoq3xMXI6aUmrUPuvyMCsL7gVEEgYT11FcXWfd0UYdUFRKVlE3cLTOCEcxIDJzskqcydlgcbkOFJjcQJids7IuKWhFQUalcwhkcAPDstCwaJtFQMl0LufGquco6Tuo+CFabLxZ/AJ0yAm1GD33higpR5bYC55E2BRhck6HPGcuVZmcgyMhY91HG8IUV6k2FEN1mDLnB6dHQe7C6Nw6ZO3RGYDwD3g9+EH32BCzc7WnoNpA5RHKTipx8KOyY/uB4pSTLooFsDSAYqM5sGu8gEaaNCS6ZqdhTuYwdAbf88Nq+4Yf1q2pTJmrWiKDaGjQrmXOEVSas1qmMXPm3PRBUOaOTYHqyGbOWeboHH8xYSKFJfZj7NYax8wpysZSDsHQHNTHvOCRyQZxslMJtbBbtxO6tNXc9MLKGu1U0pyrJYg0eNtjZWVj0EkntmW1zNE5pVuGzblKgW0Qe2Hiap3K2joUIzpuYa7YaVhkagjL3HHltLaKusGzuWUv2h1/NBtrkIbUmoWhFJ48vaAmMjvHslojGFTtm7dt5uKYuWBq55rrNn9uUE9MYbPxb3cIO8+xe3ntRStrc85e0hQ3S7XqdO3ZsZweUSZxlRs/N1ytc1m94X1r61ZtTzc3ZRVFFr537dbWsTGMO4S0Z025YUJ1Wr2wIQzLnPDFBuBSZO7WWagXm7KGuawb1xLX5OoclEdgCWPmlG/mMI7qi29ZmznByjrNudk5Cm3uqR8qtk7d2t5sLLXHEklF3DjunD253n5orrljDs6ZE7NSraRZqFporSe0iyclmZ2TyCUZY94kulLH563z3VfchFGOXXshJrK2st7F4ly/Ud2Ettnnx2IxYP9gL+AAP+OFF/+qi3MrYBbmV9J69okezz53B7/cuBnwhuyhdJ/2H3x0c/XypTurCxf31089/eg5/8z+6qVLu/17H97C7duf599/ezD+v/U1uYF4+gpev/wZrr7/tb71zjf65tvfPlIuX7nOCn6Jn77/OH/1xa/MnPwHoi9Z08sHR4EAAAAASUVORK5CYII=')
no-repeat 0 0; no-repeat 0 0;
background-size: cover; background-size: cover;
overflow: hidden; overflow: hidden;
margin-right: 4px; margin-right: 4px;
} }
.dot {
background-color: #01fff6;
width: 6px;
height: 6px;
border-radius: 100%;
margin-top: 36px;
margin-right: 4px;
}
.suffix { .suffix {
font-size: 16px; font-size: 16px;
color: #758094; color: #758094;
font-family: "Source Han Sans CN"; font-family: 'Source Han Sans CN';
} }
} }
} }
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