mt-fe-group/xuchang-screen
9
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
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 './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 (
<div className='ButtonChart4itemDetailBorder'>
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
</div >
);
}
render() {
return (
<div className="ButtonChart4itemDetailBorder">
<ReactECharts
option={this.getOption()}
style={{ width: '100%', height: '100%' }}
/>
</div>
);
}
}
export default Chart3;

6
src/components/Container.jsx
View File

@@ -20,7 +20,11 @@ const Container = (props) => {
return (
<div className={`${cls.container} ${props.className}`}>
<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>
</div>
<div className={cls.container__content}>{props.children}</div>

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

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

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

@@ -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: {

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

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

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

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

88
src/pages/index.less
View File

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

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