@@ -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) => { | |||
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; |
@@ -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 { | |||
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: 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>; | |||
} |