140 lines
3.9 KiB
JavaScript
140 lines
3.9 KiB
JavaScript
// TODO: 通用组件 - 按钮 菜单控制层
|
|
import useIcon from "../../../hooks/useIcon";
|
|
import cls from "./index.module.css";
|
|
import { useMemo, useState } from "react";
|
|
import { Switch, Select } from "antd";
|
|
import "./selector.style.overwrite.css";
|
|
import triangle from "../../../assets/Icon/triangle.svg";
|
|
|
|
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,
|
|
defaultSelect,
|
|
selectWidth,
|
|
legend,
|
|
} = props;
|
|
const descSmall = props.descSmall || false;
|
|
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 = (
|
|
<Select
|
|
defaultValue={defaultSelect || dateOptions[0]}
|
|
style={{ width: selectWidth || 60 }}
|
|
popupClassName="xc-date-selector-menu"
|
|
className={cls.graphBaseDate + " " + cls.radioGroup}
|
|
options={dateOptions.map((item) => ({ label: item, value: item }))}
|
|
suffixIcon={<img src={triangle} alt="#" />}
|
|
notFoundContent={
|
|
<span
|
|
style={{
|
|
color: "#fff",
|
|
fontSize: "calc(14px * var(--scale))",
|
|
lineHeight: 1,
|
|
paddingLeft: "calc(12px * var(--scale))",
|
|
}}
|
|
>
|
|
- 无 -
|
|
</span>
|
|
}
|
|
onChange={(value, option) => onDateChange(value)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
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>
|
|
{desc && <div className={`${cls.graphBaseDesc} ${descSmall ? cls.graphBaseDescSmall : ''}`}>{desc}</div>}
|
|
</div>
|
|
<div className={cls.graphBaseContent}>
|
|
{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 && dto}
|
|
{props.children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default GraphBase;
|