- 
+
{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;
+}