update basic structrue of graphbase
This commit is contained in:
parent
7bfa2cf9be
commit
32edb46215
@ -1,6 +1,8 @@
|
|||||||
// TODO: 通用组件 - 按钮 菜单控制层
|
// TODO: 通用组件 - 按钮 菜单控制层
|
||||||
import useIcon from '../../../../hooks/useIcon';
|
import useIcon from '../../../../hooks/useIcon';
|
||||||
import cls from './index.module.css';
|
import cls from './index.module.css';
|
||||||
|
import { useMemo, useState } from 'react';
|
||||||
|
import { Switch, Radio } from 'antd';
|
||||||
|
|
||||||
function choseBg(size) {
|
function choseBg(size) {
|
||||||
const [width, height] = size;
|
const [width, height] = size;
|
||||||
@ -26,9 +28,34 @@ function choseBg(size) {
|
|||||||
function GraphBase(props) {
|
function GraphBase(props) {
|
||||||
const size = props.size || ['middle', 'middle'];
|
const size = props.size || ['middle', 'middle'];
|
||||||
const bgClass = choseBg(size);
|
const bgClass = choseBg(size);
|
||||||
const { icon, title, desc, switcher, onSwitch, dateOptions, onDateChange } =
|
const {
|
||||||
props;
|
icon,
|
||||||
|
title,
|
||||||
|
desc,
|
||||||
|
switchOptions,
|
||||||
|
onSwitch,
|
||||||
|
dateOptions,
|
||||||
|
onDateChange,
|
||||||
|
legend,
|
||||||
|
} = props;
|
||||||
const iconSrc = useIcon(icon);
|
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 (
|
return (
|
||||||
<div
|
<div
|
||||||
@ -45,7 +72,40 @@ function GraphBase(props) {
|
|||||||
<img src={iconSrc} alt="#" />
|
<img src={iconSrc} alt="#" />
|
||||||
<h2>{title}</h2>
|
<h2>{title}</h2>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -64,7 +64,7 @@
|
|||||||
'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
|
'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-left: 6px;
|
margin-left: 6px;
|
||||||
font-size: 18px;
|
font-size: 20px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@ -73,4 +73,73 @@
|
|||||||
.graphBaseContent {
|
.graphBaseContent {
|
||||||
height: 1px;
|
height: 1px;
|
||||||
flex: 1;
|
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';
|
import GraphBase from '../GraphBase';
|
||||||
|
|
||||||
function NO(props) {
|
function NO(props) {
|
||||||
function handleSwitch() {}
|
function handleSwitch(v) {
|
||||||
|
console.log('switched ', v);
|
||||||
|
}
|
||||||
|
|
||||||
function handleDateChange() {}
|
function handleDateChange(v) {
|
||||||
|
console.log('date ', v);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<GraphBase
|
<GraphBase
|
||||||
icon="battery"
|
icon="battery"
|
||||||
title="一氧化氮"
|
title="一氧化氮"
|
||||||
desc="能耗趋势图"
|
desc="能耗趋势图"
|
||||||
switcher={true}
|
switchOptions={true}
|
||||||
onSwitch={handleSwitch}
|
onSwitch={handleSwitch}
|
||||||
dateOptions={['日', '周', '月', '年']}
|
dateOptions={['日', '周', '月', '年']}
|
||||||
|
legend={['总量', '白班', '夜班']}
|
||||||
onDateChange={handleDateChange}
|
onDateChange={handleDateChange}
|
||||||
size={['long', 'middle']}
|
size={['long', 'middle']}
|
||||||
>
|
>
|
||||||
|
@ -5,7 +5,7 @@ function SmokeHandle(props) {
|
|||||||
return (
|
return (
|
||||||
<div className={'bgray ' + cls.smoke} style={{ color: '#fff' }}>
|
<div className={'bgray ' + cls.smoke} style={{ color: '#fff' }}>
|
||||||
<span
|
<span
|
||||||
class={cls.shadowBorder}
|
className={cls.shadowBorder}
|
||||||
style={{
|
style={{
|
||||||
gridRow: '1 / 3',
|
gridRow: '1 / 3',
|
||||||
paddingTop: '38px',
|
paddingTop: '38px',
|
||||||
|
@ -5,7 +5,7 @@ function Energy(props) {
|
|||||||
return (
|
return (
|
||||||
<div className={'bgray ' + cls.layout} style={{ color: '#fff' }}>
|
<div className={'bgray ' + cls.layout} style={{ color: '#fff' }}>
|
||||||
<span
|
<span
|
||||||
class={cls.shadowBorder}
|
className={cls.shadowBorder}
|
||||||
style={{
|
style={{
|
||||||
gridRow: '1 / 3',
|
gridRow: '1 / 3',
|
||||||
paddingTop: '38px',
|
paddingTop: '38px',
|
||||||
|
@ -7,7 +7,7 @@ export const Slider = ({ value, setValue }) => {
|
|||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<div id="slider" className="slider">
|
<div id="slider" className="slider">
|
||||||
<input type="range" value={value} onInput={handleInput} />
|
<input type="range" value={value} onChange={handleInput} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user