setup
This commit is contained in:
lb
124
src/components/Common/GraphBase/index.jsx
Normal file
124
src/components/Common/GraphBase/index.jsx
Normal file
@@ -0,0 +1,124 @@
|
||||
// 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;
|
||||
return width === 'long' && height === 'middle'
|
||||
? 'long-middle'
|
||||
: width === 'long' && height === 'short'
|
||||
? 'long-short'
|
||||
: width === 'short' && height === 'middle'
|
||||
? 'short-middle'
|
||||
: width === 'short' && height === 'short'
|
||||
? 'short-short'
|
||||
: width === 'short' && height === 'long'
|
||||
? 'short-long'
|
||||
: width === 'middle' && height === 'middle'
|
||||
? 'middle-middle'
|
||||
: width === 'middle' && height === 'short'
|
||||
? 'middle-short'
|
||||
: width === 'middle' && height === 'long'
|
||||
? 'middle-long'
|
||||
: width === 'middle' && height === 'full'
|
||||
? 'middle-full'
|
||||
: 'middle-middle';
|
||||
}
|
||||
|
||||
function GraphBase(props) {
|
||||
const size = props.size || ['middle', 'middle'];
|
||||
const bgClass = choseBg(size);
|
||||
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;
|
||||
const switchStyle = {};
|
||||
|
||||
if (props.switchPosition) {
|
||||
props.switchPosition.forEach((item, index) => {
|
||||
if (item != null) {
|
||||
switchStyle[index == 0 ? 'top' : 'left'] = item + 'px';
|
||||
}
|
||||
});
|
||||
}
|
||||
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
|
||||
className={
|
||||
'graph-base ' +
|
||||
cls[bgClass] +
|
||||
' ' +
|
||||
cls.graphBase +
|
||||
' ' +
|
||||
props.className
|
||||
}
|
||||
style={{ ...props.style }}
|
||||
>
|
||||
<div className={cls.graphBaseTitle}>
|
||||
<img src={iconSrc} alt="#" />
|
||||
<h2>{title}</h2>
|
||||
</div>
|
||||
<div className={cls.graphBaseContent}>
|
||||
{desc && <div className={cls.graphBaseDesc}>{desc}</div>}
|
||||
{switchOptions && (
|
||||
<div className={cls.graphBaseSwitch} style={switchStyle}>
|
||||
<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={dateOptions[0]}
|
||||
buttonStyle="solid"
|
||||
className={cls.graphBaseDate + ' ' + cls.radioGroup}
|
||||
onChange={({ target }) => onDateChange(target.value)}
|
||||
>
|
||||
{dto}
|
||||
</Radio.Group>
|
||||
)}
|
||||
{props.children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default GraphBase;
|
||||
153
src/components/Common/GraphBase/index.module.css
Normal file
153
src/components/Common/GraphBase/index.module.css
Normal file
@@ -0,0 +1,153 @@
|
||||
/* .long-long {
|
||||
background: url('../../../../assets/long-long.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
} */
|
||||
|
||||
.long-middle {
|
||||
background: url('../../../assets/long-middle.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.long-short {
|
||||
background: url('../../../assets/long-short.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.middle-long {
|
||||
background: url('../../../assets/middle-middle.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.middle-full {
|
||||
background: url('../../../assets/middle-long.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.middle-middle {
|
||||
background: url('../../../assets/middle-middle-2.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.middle-short {
|
||||
/* background: url('../../../assets/middle-short.png') no-repeat; */
|
||||
/* background: url('../../../assets/energy.png') no-repeat; */
|
||||
background: url('../../../assets/bg-bottom-item.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* more...
|
||||
*/
|
||||
|
||||
.graphBase {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* justify-content: flex-end;
|
||||
align-items: center; */
|
||||
position: relative;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.graphBaseTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.graphBaseTitle > img {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.graphBaseTitle > h2 {
|
||||
font-family: '微软雅黑', 'Microsoft YaHei UI', -apple-system,
|
||||
BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei',
|
||||
'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
|
||||
margin: 0;
|
||||
margin-left: 6px;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
Reference in New Issue
Block a user