@@ -1,7 +1,70 @@ | |||||
import cls from './index.module.less'; | |||||
import cls from './index.module.css'; | |||||
import './overwrite.css'; // 覆写 antd 默认样式,全局 | |||||
import ReactECharts from 'echarts-for-react'; | |||||
import { Switch, Radio } from 'antd'; | |||||
const GoodRateChart = (props) => { | const GoodRateChart = (props) => { | ||||
return <div className={cls.GoodRateChart}>good rate chart</div>; | |||||
const options = { | |||||
grid: { top: 28, right: 12, bottom: 20, left: 48 }, | |||||
xAxis: { | |||||
type: 'category', | |||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], | |||||
}, | |||||
yAxis: { | |||||
type: 'value', | |||||
}, | |||||
series: [ | |||||
{ | |||||
data: [820, 932, 901, 934, 1290, 1330, 1320], | |||||
type: 'line', | |||||
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; | 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: 20px; | |||||
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; | |||||
} |
@@ -1,4 +1,93 @@ | |||||
.GoodRateChart { | .GoodRateChart { | ||||
height: 1px; | height: 1px; | ||||
flex: 1; | 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: 2px solid red; | |||||
* { | |||||
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,28 @@ | |||||
.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-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,5 @@ | |||||
import cls from './radio.group.module.less'; | |||||
function RadioGroup(props) { | |||||
return <div className="radioGroup"></div>; | |||||
} |