@@ -1,6 +1,8 @@ | |||
// TODO: 通用组件 - 按钮 菜单控制层 | |||
import useIcon from '../../../../hooks/useIcon'; | |||
import cls from './index.module.css'; | |||
import { useMemo, useState } from 'react'; | |||
import { Switch, Radio } from 'antd'; | |||
function choseBg(size) { | |||
const [width, height] = size; | |||
@@ -26,9 +28,34 @@ function choseBg(size) { | |||
function GraphBase(props) { | |||
const size = props.size || ['middle', 'middle']; | |||
const bgClass = choseBg(size); | |||
const { icon, title, desc, switcher, onSwitch, dateOptions, onDateChange } = | |||
props; | |||
const { | |||
icon, | |||
title, | |||
desc, | |||
switchOptions, | |||
onSwitch, | |||
dateOptions, | |||
onDateChange, | |||
legend, | |||
} = props; | |||
const iconSrc = useIcon(icon); | |||
const colors = useMemo(() => ['#ffd160', '#2760ff', '#15e8f5'], []); | |||
const [showChart, setShowChart] = useState(true); | |||
let dto = null; | |||
if (dateOptions) { | |||
dto = dateOptions.map((item) => ( | |||
<Radio.Button value={item} key={item} className="radio-group__item"> | |||
{item} | |||
</Radio.Button> | |||
)); | |||
} | |||
function handleSwitchChange(v) { | |||
v ? setShowChart(true) : setShowChart(false); | |||
onSwitch(v); | |||
} | |||
return ( | |||
<div | |||
@@ -45,7 +72,40 @@ function GraphBase(props) { | |||
<img src={iconSrc} alt="#" /> | |||
<h2>{title}</h2> | |||
</div> | |||
<div className={cls.graphBaseContent}>{props.children}</div> | |||
<div className={cls.graphBaseContent}> | |||
{desc && <div className={cls.graphBaseDesc}>{desc}</div>} | |||
{switchOptions && ( | |||
<div className={cls.graphBaseSwitch}> | |||
<Switch size="small" defaultChecked onChange={handleSwitchChange} /> | |||
{showChart && <span className={cls.switchLabel}>历史详情</span>} | |||
{!showChart && <span className={cls.switchLabel}>实时流量</span>} | |||
</div> | |||
)} | |||
{legend && showChart && ( | |||
<div className={cls.legend}> | |||
{legend.map((item, index) => ( | |||
<div className={cls.legendItem} key={item}> | |||
<span | |||
className={cls.lengedItemPrefix} | |||
style={{ backgroundColor: colors[index] }} | |||
></span> | |||
<span className={cls.legendItemLabel}>{item}</span> | |||
</div> | |||
))} | |||
</div> | |||
)} | |||
{dateOptions && ( | |||
<Radio.Group | |||
defaultValue="日" | |||
buttonStyle="solid" | |||
className={cls.graphBaseDate + ' ' + cls.radioGroup} | |||
onChange={({ target }) => onDateChange(target.value)} | |||
> | |||
{dto} | |||
</Radio.Group> | |||
)} | |||
{props.children} | |||
</div> | |||
</div> | |||
); | |||
} | |||
@@ -64,7 +64,7 @@ | |||
'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif; | |||
margin: 0; | |||
margin-left: 6px; | |||
font-size: 18px; | |||
font-size: 20px; | |||
color: #fff; | |||
letter-spacing: 2px; | |||
font-weight: 500; | |||
@@ -73,4 +73,73 @@ | |||
.graphBaseContent { | |||
height: 1px; | |||
flex: 1; | |||
background: #fff3; | |||
} | |||
.graphBaseDesc { | |||
position: absolute; | |||
top: 25px; | |||
left: 150px; | |||
font-size: 19px; | |||
color: #76fff9; | |||
} | |||
.graphBaseSwitch { | |||
position: absolute; | |||
top: 30px; | |||
left: 258px; | |||
display: flex; | |||
align-items: center; | |||
} | |||
.graphBaseDate { | |||
position: absolute; | |||
right: 0; | |||
top: 24px; | |||
color: #fff; | |||
margin-right: 24px; | |||
} | |||
.radioGroup { | |||
user-select: none; | |||
} | |||
.radioGroup * { | |||
border: none !important; | |||
border-radius: 0 !important; | |||
} | |||
.radioGroup *:focus-within { | |||
box-shadow: none !important; | |||
} | |||
.radioGroup *::before { | |||
width: 0 !important; | |||
} | |||
.switchLabel { | |||
color: white; | |||
margin-left: 6px; | |||
} | |||
.legend { | |||
position: absolute; | |||
top: 30px; | |||
left: 360px; | |||
color: #fff; | |||
display: flex; | |||
align-items: center; | |||
} | |||
.legendItem { | |||
display: flex; | |||
align-items: center; | |||
margin-left: 8px; | |||
} | |||
.lengedItemPrefix { | |||
width: 12px; | |||
height: 12px; | |||
border-radius: 2px; | |||
margin-right: 4px; | |||
} |
@@ -1,18 +1,23 @@ | |||
import GraphBase from '../GraphBase'; | |||
function NO(props) { | |||
function handleSwitch() {} | |||
function handleSwitch(v) { | |||
console.log('switched ', v); | |||
} | |||
function handleDateChange() {} | |||
function handleDateChange(v) { | |||
console.log('date ', v); | |||
} | |||
return ( | |||
<GraphBase | |||
icon="battery" | |||
title="一氧化氮" | |||
desc="能耗趋势图" | |||
switcher={true} | |||
switchOptions={true} | |||
onSwitch={handleSwitch} | |||
dateOptions={['日', '周', '月', '年']} | |||
legend={['总量', '白班', '夜班']} | |||
onDateChange={handleDateChange} | |||
size={['long', 'middle']} | |||
> | |||
@@ -5,7 +5,7 @@ function SmokeHandle(props) { | |||
return ( | |||
<div className={'bgray ' + cls.smoke} style={{ color: '#fff' }}> | |||
<span | |||
class={cls.shadowBorder} | |||
className={cls.shadowBorder} | |||
style={{ | |||
gridRow: '1 / 3', | |||
paddingTop: '38px', | |||
@@ -5,7 +5,7 @@ function Energy(props) { | |||
return ( | |||
<div className={'bgray ' + cls.layout} style={{ color: '#fff' }}> | |||
<span | |||
class={cls.shadowBorder} | |||
className={cls.shadowBorder} | |||
style={{ | |||
gridRow: '1 / 3', | |||
paddingTop: '38px', | |||
@@ -7,7 +7,7 @@ export const Slider = ({ value, setValue }) => { | |||
}; | |||
return ( | |||
<div id="slider" className="slider"> | |||
<input type="range" value={value} onInput={handleInput} /> | |||
<input type="range" value={value} onChange={handleInput} /> | |||
</div> | |||
); | |||
}; | |||