mt-fe-group/xuchang-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 基本完成生产良品率

Browse Source
This commit is contained in:
lb 2023-07-01 16:26:01 +08:00
parent cbcb5b9877
commit 3c74468857
8 changed files with 282 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

227
src/components/BottomBar/substitutionCharts/Chart4.jsx
View File

@ -1,117 +1,138 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import './Chart4.less' import './Chart4.less';
import ReactECharts from 'echarts-for-react'; 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'; import * as echarts from 'echarts';
var color = ["#2760ff", "#ffb70c", "#3dbdc2", "#e02094"] var color = ['#2760ff', '#ffb70c', '#3dbdc2', '#e02094'];
var fontColor = '#fff' var fontColor = '#fff';
var lineColor = 'rgba(33, 50, 89,0.8)' var lineColor = 'rgba(33, 50, 89,0.8)';
class Chart3 extends Component { 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 = () => ({ xAxis: {
type: 'category',
boundaryGap: false,
data: [
legend: { 'day1',
right: "0%", 'day2',
width: "70%", 'day3',
height: "14%", 'day4',
itemWidth: 17, 'day5',
itemHeight: 13.5, 'day6',
textStyle: { 'day7',
fontSize: 12, 'day5',
color: "#F1F1F3", 'day6',
}, 'day7',
'day6',
data: name 'day7',
}, 'day5',
grid: { 'day6',
left: '3%', 'day7',
right: '4%', ],
bottom: '5%', axisLabel: {
top:'3%', show: true,
containLabel: 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: { render() {
type: 'category', return (
boundaryGap: false, <div className="ButtonChart4itemDetailBorder">
data: ['day1', 'day2', 'day3', 'day4', 'day5', 'day6', 'day7', 'day5', 'day6', 'day7', 'day6', 'day7', 'day5', 'day6', 'day7'], <ReactECharts
axisLabel: { option={this.getOption()}
show: true, style={{ width: '100%', height: '100%' }}
color: fontColor, />
}, </div>
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 (
<div className='ButtonChart4itemDetailBorder'>
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
</div >
);
}
} }
export default Chart3; export default Chart3;

6
src/components/Container.jsx
View File

@ -20,7 +20,11 @@ const Container = (props) => {
return ( return (
<div className={`${cls.container} ${props.className}`}> <div className={`${cls.container} ${props.className}`}>
<div className={cls.container__head}> <div className={cls.container__head}>
<img src={icon.current} alt="#" /> <img
src={icon.current}
alt="#"
className={props.icon == 'kiln' ? cls.bigger : ''}
/>
<h2>{props.title}</h2> <h2>{props.title}</h2>
</div> </div>
<div className={cls.container__content}>{props.children}</div> <div className={cls.container__content}>{props.children}</div>

2
src/components/LeftBar/good.module.less
View File

@ -1,5 +1,5 @@
.goodProd { .goodProd {
background: url(../../assets/good.png) no-repeat, #9f84; background: url(../../assets/good.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 625px; width: 625px;
// height: 626px; // height: 626px;

93
src/components/LeftBar/substitutionCharts/GoodRateChart/index.jsx
View File

@ -1,23 +1,108 @@
import cls from './index.module.css'; import cls from './index.module.css';
import './overwrite.css'; // 覆写 antd 默认样式，全局 import './overwrite.css'; // 覆写 antd 默认样式，全局
import ReactECharts from 'echarts-for-react'; import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';
import { Switch, Radio } from 'antd'; import { Switch, Radio } from 'antd';
import { randomInt } from '../../../../utils';
const GoodRateChart = (props) => { const GoodRateChart = (props) => {
const options = { 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: { xAxis: {
type: 'category', 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: { yAxis: {
type: 'value', 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: [ series: [
{ {
data: [820, 932, 901, 934, 1290, 1330, 1320], data: Array(7)
.fill(1)
.map((_) => {
return randomInt(60, 100);
}),
type: 'line', 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: { tooltip: {

4
src/components/LeftBar/substitutionCharts/GoodRateChart/index.module.css
View File

@ -2,7 +2,7 @@
height: 1px; height: 1px;
flex: 1; flex: 1;
padding-top: 8px; padding-top: 8px;
background: #ae27276a; /* background: #ae27276a; */
} }
.GoodRateChart .titleBar { .GoodRateChart .titleBar {
display: flex; display: flex;
@ -12,7 +12,7 @@
} }
.GoodRateChart .titleBar h2 { .GoodRateChart .titleBar h2 {
margin: 0; margin: 0;
font-size: 20px; font-size: 18px;
line-height: 32px; line-height: 32px;
letter-spacing: 1.2px; letter-spacing: 1.2px;
color: #52fff8; color: #52fff8;

10
src/components/container.module.less
View File

@ -9,6 +9,14 @@
display: flex; display: flex;
align-items: center; align-items: center;
img {
width: 20px;
&.bigger {
width: 24px;
}
}
h2 { h2 {
font-family: '微软雅黑', 'Microsoft YaHei UI', -apple-system, font-family: '微软雅黑', 'Microsoft YaHei UI', -apple-system,
BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei',
@ -26,7 +34,7 @@
.container__content { .container__content {
height: 1px; height: 1px;
flex: 1; flex: 1;
background: #25a78672; // background: #25a78672;
} }
} }

88
src/pages/index.less
View File

@ -1,52 +1,52 @@
#FullScreen { #FullScreen {
width: 3840px; width: 3840px;
height: 1080px; height: 1080px;
transform-origin: 'lefttop'; transform-origin: 'lefttop';
background-color: #040c1c; background-color: #040c1c;
.Main { .Main {
background: #a935355f; // background: #a935355f;
width: 3840px; width: 3840px;
height: 996px; height: 996px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
.Center { .Center {
background: #ce862f69; background: #ce862f69;
margin-top: 21px; margin-top: 21px;
margin-left: 24px; margin-left: 24px;
padding: 1px; padding: 1px;
width: 2472px; width: 2472px;
height: 940px; height: 940px;
.CenterData { .CenterData {
position: absolute; position: absolute;
width: 2472px; width: 2472px;
height: 240px; height: 240px;
z-index: 2; z-index: 2;
} }
.V3DBG { .V3DBG {
position: absolute; position: absolute;
width: 2472px; width: 2472px;
height: 642px; height: 642px;
z-index: 1; z-index: 1;
} }
.V3DBorder { .V3DBorder {
width: 100%; width: 100%;
height: 486px; height: 486px;
margin-top: 160px; margin-top: 160px;
background: url('../assets/3D.png'); background: url('../assets/3D.png');
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.Button { .Button {
width: 100%; width: 100%;
height: 306px; height: 306px;
margin-top: -05px; margin-top: -05px;
} }
} }
} }
} }

8
src/utils/index.js Normal file
View File

@ -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;
}