setup
This commit is contained in:
lb
19
src/components/Common/TodayGood/GoodProduction.jsx
Normal file
19
src/components/Common/TodayGood/GoodProduction.jsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import cls from './good.module.scss';
|
||||
import Container from '../../Container';
|
||||
import TodayTableData from './components/TodayTableData';
|
||||
import GoodRateChart from './components/GoodRateChart';
|
||||
import TechSplitline from '../TechSplitline';
|
||||
|
||||
const GoodProduction = () => {
|
||||
return (
|
||||
<Container icon="good" title="本日生产良品率" className={cls.goodProd}>
|
||||
<div className={`${cls.goodProd__content} h-full`}>
|
||||
<TodayTableData />
|
||||
<TechSplitline />
|
||||
<GoodRateChart />
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default GoodProduction;
|
||||
@@ -0,0 +1,155 @@
|
||||
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 = {
|
||||
color: ['#FFD160', '#12FFF5', '#2760FF'],
|
||||
grid: { top: 28, right: 12, bottom: 32, left: 48 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
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: Array(7)
|
||||
.fill(1)
|
||||
.map((_) => {
|
||||
return randomInt(60, 100);
|
||||
}),
|
||||
type: 'line',
|
||||
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: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
};
|
||||
|
||||
function handleSwitchChange(val) {
|
||||
// val: boolean
|
||||
console.log('switch change', val);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cls.GoodRateChart}>
|
||||
<div className={cls.titleBar}>
|
||||
<h2>生产良品率</h2>
|
||||
<Switch defaultChecked onChange={handleSwitchChange} />
|
||||
<div className={cls.legend}>
|
||||
<span className="legend__title">班次详情</span>
|
||||
<ul className="legend__list">
|
||||
<li>总量</li>
|
||||
<li>白班</li>
|
||||
<li>夜班</li>
|
||||
</ul>
|
||||
</div>
|
||||
<Radio.Group
|
||||
defaultValue="week"
|
||||
buttonStyle="solid"
|
||||
className={cls.radioGroup}
|
||||
>
|
||||
<Radio.Button value="day" className="radio-group__item">
|
||||
日
|
||||
</Radio.Button>
|
||||
<Radio.Button value="week" className="radio-group__item">
|
||||
周
|
||||
</Radio.Button>
|
||||
<Radio.Button value="month" className="radio-group__item">
|
||||
月
|
||||
</Radio.Button>
|
||||
<Radio.Button value="year" className="radio-group__item">
|
||||
年
|
||||
</Radio.Button>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
<ReactECharts option={options} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GoodRateChart;
|
||||
@@ -0,0 +1,86 @@
|
||||
.GoodRateChart {
|
||||
height: 1px;
|
||||
flex: 1;
|
||||
padding-top: 8px;
|
||||
/* background: #ae27276a; */
|
||||
}
|
||||
.GoodRateChart .titleBar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: white;
|
||||
}
|
||||
.GoodRateChart .titleBar h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
letter-spacing: 1.2px;
|
||||
color: #52fff8;
|
||||
}
|
||||
|
||||
.GoodRateChart .titleBar .legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.GoodRateChart .titleBar .legend * {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
color: #dff1fe;
|
||||
}
|
||||
|
||||
.GoodRateChart .titleBar .legend ul {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
margin-left: 8px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
align-items: center;
|
||||
}
|
||||
.GoodRateChart .titleBar .legend ul li {
|
||||
position: relative;
|
||||
margin: 4px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.GoodRateChart .titleBar .legend ul li::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.GoodRateChart .titleBar .legend ul li:first-child::before {
|
||||
background-color: #ffd160;
|
||||
}
|
||||
|
||||
.GoodRateChart .titleBar .legend ul li:nth-child(2)::before {
|
||||
background-color: #12fff5;
|
||||
}
|
||||
|
||||
.GoodRateChart .titleBar .legend ul li:nth-child(3)::before {
|
||||
background-color: #2760ff;
|
||||
}
|
||||
|
||||
.radioGroup * {
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.radioGroup *:focus-within {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.radioGroup *::before {
|
||||
width: 0 !important;
|
||||
}
|
||||
|
||||
.radioGroup_button_wrapper {
|
||||
color: #fff !important;
|
||||
background: #03233c !important;
|
||||
}
|
||||
|
||||
.radioGroup_button_wrapper.ant-radio-button-wrapper-checked {
|
||||
background: #02457e !important;
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
.GoodRateChart {
|
||||
height: 1px;
|
||||
flex: 1;
|
||||
padding-top: 8px;
|
||||
// background: #ae27276a;
|
||||
|
||||
.titleBar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #0003;
|
||||
color: white;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
line-height: 32px;
|
||||
letter-spacing: 1.2px;
|
||||
color: #52fff8;
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
* {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
color: #dff1fe;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
margin-left: 8px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
align-items: center;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
margin: 4px;
|
||||
padding-left: 16px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&:first-child::before {
|
||||
background-color: #ffd160;
|
||||
}
|
||||
|
||||
&:nth-child(2)::before {
|
||||
background-color: #12fff5;
|
||||
}
|
||||
|
||||
&:nth-child(3)::before {
|
||||
background-color: #2760ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radioGroup {
|
||||
* {
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
|
||||
&:focus-within {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&::before {
|
||||
width: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.radioGroup_button_wrapper {
|
||||
color: #fff !important;
|
||||
background: #03233c !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
.radio-group__item {
|
||||
color: #fff !important;
|
||||
background: #03233c !important;
|
||||
}
|
||||
|
||||
.radio-group__item:first-child {
|
||||
border-top-left-radius: 4px !important;
|
||||
border-bottom-left-radius: 4px !important;
|
||||
}
|
||||
|
||||
.radio-group__item:last-child {
|
||||
border-top-right-radius: 4px !important;
|
||||
border-bottom-right-radius: 4px !important;
|
||||
}
|
||||
|
||||
.radio-group__item.ant-radio-button-wrapper-checked {
|
||||
background: #02457e !important;
|
||||
}
|
||||
|
||||
.ant-switch {
|
||||
background: #004782 !important;
|
||||
}
|
||||
.ant-switch .ant-switch-handle::before {
|
||||
background-color: #00233f !important;
|
||||
}
|
||||
.ant-switch-checked {
|
||||
background: #b4fffdb1 !important;
|
||||
}
|
||||
.ant-switch-checked:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.ant-switch-checked .ant-switch-handle::before {
|
||||
background-color: #76fff9 !important;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import { useState } from 'react';
|
||||
import cls from './index.module.scss';
|
||||
// import { ScrollBoard } from '@jiaminghi/data-view-react';
|
||||
|
||||
const TodayTableData = (props) => {
|
||||
const [config, setConfig] = useState({
|
||||
// headerBGC: 'rgba(4, 44, 76, 0.3)',
|
||||
headerBGC: 'rgba(4, 44, 76, .8)',
|
||||
header: [
|
||||
'<span style="color:#fff">产线<span/>',
|
||||
'<span style="color:#fff">一等率<span/>',
|
||||
'<span style="color:#fff">二等率<span/>',
|
||||
'<span style="color:#fff">成品率<span/>',
|
||||
'<span style="color:#fff">废品率<span/>',
|
||||
],
|
||||
oddRowBGC: '#042444',
|
||||
evenRowBGC: '#042c4c',
|
||||
columnWidth: [90],
|
||||
headerHeight: 40,
|
||||
hoverPause: false,
|
||||
data: [
|
||||
['产线1', '37%', '62%', '97%', '7%'],
|
||||
['产线2', '95%', '10%', '99%', '3%'],
|
||||
['产线3', '68%', '1%', '92%', '4%'],
|
||||
['产线4', '94%', '21%', '97%', '2%'],
|
||||
['产线5', '99%', '30%', '95%', '5%'],
|
||||
],
|
||||
});
|
||||
return (
|
||||
<div className={cls.todayTableData}>
|
||||
{/* <ScrollBoard config={config} style={{ width: '100%' }} /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TodayTableData;
|
||||
@@ -0,0 +1,5 @@
|
||||
.todayTableData {
|
||||
height: 240px;
|
||||
// flex: 1;
|
||||
padding-top: 12px;
|
||||
}
|
||||
14
src/components/Common/TodayGood/good.module.scss
Normal file
14
src/components/Common/TodayGood/good.module.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
.goodProd {
|
||||
background: url(../../../assets/good.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 625px;
|
||||
// height: 626px;
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
margin-top: 24px;
|
||||
|
||||
.goodProd__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user