From 3c74468857cd65c9caac3c0ddb389f3fb45a30d9 Mon Sep 17 00:00:00 2001 From: lb Date: Sat, 1 Jul 2023 16:26:01 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E5=9F=BA=E6=9C=AC=E5=AE=8C=E6=88=90?= =?UTF-8?q?=E7=94=9F=E4=BA=A7=E8=89=AF=E5=93=81=E7=8E=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BottomBar/substitutionCharts/Chart4.jsx | 227 ++++++++++-------- src/components/Container.jsx | 6 +- src/components/LeftBar/good.module.less | 2 +- .../GoodRateChart/index.jsx | 93 ++++++- .../GoodRateChart/index.module.css | 4 +- src/components/container.module.less | 10 +- src/pages/index.less | 88 +++---- src/utils/index.js | 8 + 8 files changed, 282 insertions(+), 156 deletions(-) create mode 100644 src/utils/index.js diff --git a/src/components/BottomBar/substitutionCharts/Chart4.jsx b/src/components/BottomBar/substitutionCharts/Chart4.jsx index 7884584..3221983 100644 --- a/src/components/BottomBar/substitutionCharts/Chart4.jsx +++ b/src/components/BottomBar/substitutionCharts/Chart4.jsx @@ -1,117 +1,138 @@ - import React, { Component } from 'react'; -import './Chart4.less' +import './Chart4.less'; import ReactECharts from 'echarts-for-react'; - - -var name = ['10HZ-15HZ', '15HZ-25HZ', '30HZ-35HZ', '40HZ-45HZ'] +var name = ['10HZ-15HZ', '15HZ-25HZ', '30HZ-35HZ', '40HZ-45HZ']; import * as echarts from 'echarts'; -var color = ["#2760ff", "#ffb70c", "#3dbdc2", "#e02094"] -var fontColor = '#fff' -var lineColor = 'rgba(33, 50, 89,0.8)' - - - - +var color = ['#2760ff', '#ffb70c', '#3dbdc2', '#e02094']; +var fontColor = '#fff'; +var lineColor = 'rgba(33, 50, 89,0.8)'; class Chart3 extends Component { + getOption = () => ({ + legend: { + right: '0%', + width: '70%', + height: '14%', + itemWidth: 17, + itemHeight: 13.5, + textStyle: { + fontSize: 12, + color: '#F1F1F3', + }, + data: name, + }, + grid: { + left: '3%', + right: '4%', + bottom: '5%', + top: '3%', + containLabel: true, + }, - getOption = () => ({ - - - - legend: { - right: "0%", - width: "70%", - height: "14%", - itemWidth: 17, - itemHeight: 13.5, - textStyle: { - fontSize: 12, - color: "#F1F1F3", - }, - - data: name - }, - grid: { - left: '3%', - right: '4%', - bottom: '5%', - top:'3%', - containLabel: true, - }, + xAxis: { + type: 'category', + boundaryGap: false, + data: [ + 'day1', + 'day2', + 'day3', + 'day4', + 'day5', + 'day6', + 'day7', + 'day5', + 'day6', + 'day7', + 'day6', + 'day7', + 'day5', + 'day6', + 'day7', + ], + axisLabel: { + show: true, + color: fontColor, + }, + axisLine: { + lineStyle: { + color: lineColor, + }, + }, + }, + yAxis: { + type: 'value', + axisLabel: { + show: true, + color: fontColor, + }, + axisLine: { + show: true, + lineStyle: { + color: lineColor, + }, + }, + splitLine: { + lineStyle: { + color: lineColor, + }, + }, + }, + series: { + name: '发电量', + type: 'line', + showSymbol: true, + symbol: 'circle', + symbolSize: 8, + symbolBorder: 'rgba(17, 36, 246,0.1)', + data: [ + 200, + 320, + 121, + 125, + 585, + 213, + 521, + 326, + 542, + 258, + 632, + 145, + 258, + 632, + 145, + ], + lineStyle: { + width: 1, + color: 'rgba(246, 23, 106,0.9)', + }, + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: 'rgba(246, 23, 106,0.3)' }, + { offset: 0.5, color: 'rgba(246, 23, 106,0.2)' }, + { offset: 1, color: 'rgba(246, 23, 106,0.1)' }, + ]), + }, + itemStyle: { + borderColor: '#F6176A', + color: 'rgba(4, 20, 36,0.8)', + }, + }, + }); - xAxis: { - type: 'category', - boundaryGap: false, - data: ['day1', 'day2', 'day3', 'day4', 'day5', 'day6', 'day7', 'day5', 'day6', 'day7', 'day6', 'day7', 'day5', 'day6', 'day7'], - axisLabel: { - show: true, - color: fontColor, - }, - axisLine: { - lineStyle: { - color: lineColor, - }, - }, - }, - yAxis: { - type: 'value', - axisLabel: { - show: true, - color: fontColor, - }, - axisLine: { - show: true, - lineStyle: { - color: lineColor, - }, - }, - splitLine: { - lineStyle: { - color: lineColor, - }, - }, - }, - series: { - - name:'发电量', - type: 'line', - showSymbol: true, - symbol: "circle", - symbolSize:8, - symbolBorder:"rgba(17, 36, 246,0.1)", - data: [200,320,121,125,585,213,521,326,542,258,632,145,258,632,145], - lineStyle: { - width: 1, - color:"rgba(246, 23, 106,0.9)", - }, - areaStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: 'rgba(246, 23, 106,0.3)' }, - { offset: 0.5, color: 'rgba(246, 23, 106,0.2)' }, - { offset: 1, color: 'rgba(246, 23, 106,0.1)' } - ]), - }, - itemStyle: { - borderColor: '#F6176A', - color: "rgba(4, 20, 36,0.8)", - }, - - } - }) - - render() { - return ( -
- -
- ); - } + render() { + return ( +
+ +
+ ); + } } export default Chart3; diff --git a/src/components/Container.jsx b/src/components/Container.jsx index fb2cf25..fc0efe8 100644 --- a/src/components/Container.jsx +++ b/src/components/Container.jsx @@ -20,7 +20,11 @@ const Container = (props) => { return (
- # + #

{props.title}

{props.children}
diff --git a/src/components/LeftBar/good.module.less b/src/components/LeftBar/good.module.less index 63f1b7d..3b4237a 100644 --- a/src/components/LeftBar/good.module.less +++ b/src/components/LeftBar/good.module.less @@ -1,5 +1,5 @@ .goodProd { - background: url(../../assets/good.png) no-repeat, #9f84; + background: url(../../assets/good.png) no-repeat; background-size: 100% 100%; width: 625px; // height: 626px; diff --git a/src/components/LeftBar/substitutionCharts/GoodRateChart/index.jsx b/src/components/LeftBar/substitutionCharts/GoodRateChart/index.jsx index 77ba562..4d78ae4 100644 --- a/src/components/LeftBar/substitutionCharts/GoodRateChart/index.jsx +++ b/src/components/LeftBar/substitutionCharts/GoodRateChart/index.jsx @@ -1,23 +1,108 @@ import cls from './index.module.css'; import './overwrite.css'; // 覆写 antd 默认样式，全局 import ReactECharts from 'echarts-for-react'; +import * as echarts from 'echarts'; import { Switch, Radio } from 'antd'; +import { randomInt } from '../../../../utils'; const GoodRateChart = (props) => { const options = { - grid: { top: 28, right: 12, bottom: 20, left: 48 }, + color: ['#FFD160', '#12FFF5', '#2760FF'], + grid: { top: 28, right: 12, bottom: 32, left: 48 }, xAxis: { type: 'category', - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + data: Array(7) + .fill(1) + .map((_, index) => { + const today = new Date(); + const dtimestamp = today - index * 24 * 60 * 60 * 1000; + return `${new Date(dtimestamp).getMonth() + 1}.${new Date( + dtimestamp, + ).getDate()}`; + }) + .reverse(), + axisLabel: { + color: '#fff', + fontSize: 12, + }, + axisTick: { show: false }, + axisLine: { + lineStyle: { + width: 1, + color: '#213259', + }, + }, }, yAxis: { type: 'value', + axisLabel: { + color: '#fff', + fontSize: 12, + formatter: '{value} %', + }, + axisLine: { + show: true, + lineStyle: { + color: '#213259', + }, + }, + splitLine: { + lineStyle: { + color: '#213259a0', + }, + }, + interval: 10, + min: 0, + max: 100, }, series: [ { - data: [820, 932, 901, 934, 1290, 1330, 1320], + data: Array(7) + .fill(1) + .map((_) => { + return randomInt(60, 100); + }), type: 'line', - smooth: true, + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: '#FFD16040' }, + { offset: 0.5, color: '#FFD16020' }, + { offset: 1, color: '#FFD16010' }, + ]), + }, + // smooth: true, + }, + { + data: Array(7) + .fill(1) + .map((_) => { + return randomInt(60, 100); + }), + type: 'line', + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: '#12FFF540' }, + { offset: 0.5, color: '#12FFF520' }, + { offset: 1, color: '#12FFF510' }, + ]), + }, + // smooth: true, + }, + { + data: Array(7) + .fill(1) + .map((_) => { + return randomInt(60, 100); + }), + type: 'line', + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: '#2760FF40' }, + { offset: 0.5, color: '#2760FF20' }, + { offset: 1, color: '#2760FF10' }, + ]), + }, + // smooth: true, }, ], tooltip: { diff --git a/src/components/LeftBar/substitutionCharts/GoodRateChart/index.module.css b/src/components/LeftBar/substitutionCharts/GoodRateChart/index.module.css index c80ea2f..db8c3f8 100644 --- a/src/components/LeftBar/substitutionCharts/GoodRateChart/index.module.css +++ b/src/components/LeftBar/substitutionCharts/GoodRateChart/index.module.css @@ -2,7 +2,7 @@ height: 1px; flex: 1; padding-top: 8px; - background: #ae27276a; + /* background: #ae27276a; */ } .GoodRateChart .titleBar { display: flex; @@ -12,7 +12,7 @@ } .GoodRateChart .titleBar h2 { margin: 0; - font-size: 20px; + font-size: 18px; line-height: 32px; letter-spacing: 1.2px; color: #52fff8; diff --git a/src/components/container.module.less b/src/components/container.module.less index 31c8349..472c5ca 100644 --- a/src/components/container.module.less +++ b/src/components/container.module.less @@ -9,6 +9,14 @@ display: flex; align-items: center; + img { + width: 20px; + + &.bigger { + width: 24px; + } + } + h2 { font-family: '微软雅黑', 'Microsoft YaHei UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', @@ -26,7 +34,7 @@ .container__content { height: 1px; flex: 1; - background: #25a78672; + // background: #25a78672; } } diff --git a/src/pages/index.less b/src/pages/index.less index 420e010..fb6c9af 100644 --- a/src/pages/index.less +++ b/src/pages/index.less @@ -1,52 +1,52 @@ #FullScreen { - width: 3840px; - height: 1080px; - transform-origin: 'lefttop'; - background-color: #040c1c; + width: 3840px; + height: 1080px; + transform-origin: 'lefttop'; + background-color: #040c1c; - .Main { - background: #a935355f; - width: 3840px; - height: 996px; - display: flex; - flex-direction: row; + .Main { + // background: #a935355f; + width: 3840px; + height: 996px; + display: flex; + flex-direction: row; - .Center { - background: #ce862f69; - margin-top: 21px; - margin-left: 24px; - padding: 1px; - width: 2472px; - height: 940px; + .Center { + background: #ce862f69; + margin-top: 21px; + margin-left: 24px; + padding: 1px; + width: 2472px; + height: 940px; - .CenterData { - position: absolute; - width: 2472px; - height: 240px; - z-index: 2; - } + .CenterData { + position: absolute; + width: 2472px; + height: 240px; + z-index: 2; + } - .V3DBG { - position: absolute; - width: 2472px; - height: 642px; - z-index: 1; - } + .V3DBG { + position: absolute; + width: 2472px; + height: 642px; + z-index: 1; + } - .V3DBorder { - width: 100%; - height: 486px; - margin-top: 160px; - background: url('../assets/3D.png'); - background-size: 100% 100%; - background-repeat: no-repeat; - } + .V3DBorder { + width: 100%; + height: 486px; + margin-top: 160px; + background: url('../assets/3D.png'); + background-size: 100% 100%; + background-repeat: no-repeat; + } - .Button { - width: 100%; - height: 306px; - margin-top: -05px; - } - } - } + .Button { + width: 100%; + height: 306px; + margin-top: -05px; + } + } + } } diff --git a/src/utils/index.js b/src/utils/index.js new file mode 100644 index 0000000..424896c --- /dev/null +++ b/src/utils/index.js @@ -0,0 +1,8 @@ +export function randomInt(min, max, includeMax = false) { + let Fn = includeMax ? Math.ceil : Math.floor; + let num = Fn(Math.random() * max); + while (num < min) { + num = Fn(Math.random() * max); + } + return num; +}