update 基本完成生产良品率
This commit is contained in:
parent
cbcb5b9877
commit
3c74468857
@ -1,41 +1,29 @@
|
||||
|
||||
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%",
|
||||
right: '0%',
|
||||
width: '70%',
|
||||
height: '14%',
|
||||
itemWidth: 17,
|
||||
itemHeight: 13.5,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#F1F1F3",
|
||||
color: '#F1F1F3',
|
||||
},
|
||||
|
||||
data: name
|
||||
data: name,
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
@ -48,7 +36,23 @@ class Chart3 extends Component {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['day1', 'day2', 'day3', 'day4', 'day5', 'day6', 'day7', 'day5', 'day6', 'day7', 'day6', 'day7', 'day5', 'day6', 'day7'],
|
||||
data: [
|
||||
'day1',
|
||||
'day2',
|
||||
'day3',
|
||||
'day4',
|
||||
'day5',
|
||||
'day6',
|
||||
'day7',
|
||||
'day5',
|
||||
'day6',
|
||||
'day7',
|
||||
'day6',
|
||||
'day7',
|
||||
'day5',
|
||||
'day6',
|
||||
'day7',
|
||||
],
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: fontColor,
|
||||
@ -78,37 +82,54 @@ class Chart3 extends Component {
|
||||
},
|
||||
},
|
||||
series: {
|
||||
|
||||
name: '发电量',
|
||||
type: 'line',
|
||||
showSymbol: true,
|
||||
symbol: "circle",
|
||||
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],
|
||||
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)",
|
||||
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)' }
|
||||
{ offset: 1, color: 'rgba(246, 23, 106,0.1)' },
|
||||
]),
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#F6176A',
|
||||
color: "rgba(4, 20, 36,0.8)",
|
||||
color: 'rgba(4, 20, 36,0.8)',
|
||||
},
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
});
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='ButtonChart4itemDetailBorder'>
|
||||
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
|
||||
<div className="ButtonChart4itemDetailBorder">
|
||||
<ReactECharts
|
||||
option={this.getOption()}
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
background-color: #040c1c;
|
||||
|
||||
.Main {
|
||||
background: #a935355f;
|
||||
// background: #a935355f;
|
||||
width: 3840px;
|
||||
height: 996px;
|
||||
display: flex;
|
||||
|
||||
8
src/utils/index.js
Normal file
8
src/utils/index.js
Normal 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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user