mt-fe-group/xuchang-new
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

Browse Source
This commit is contained in:
lb
2024-01-24 14:41:24 +08:00
parent 909bd92ee6
commit 446234c2aa
11 changed files with 466 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

259
src/components/Common/GraphBase/index.jsx
View File

@@ -1,126 +1,159 @@
// TODO: 通用组件 - 按钮 菜单控制层
import useIcon from '../../../hooks/useIcon';
import cls from './index.module.css';
import { useMemo, useState } from 'react';
import { Switch, Radio } from 'antd';
import useIcon from "../../../hooks/useIcon";
import cls from "./index.module.css";
import { useMemo, useState } from "react";
import { Switch, Select, Radio } from "antd";
import "./selector.style.overwrite.css";
// import { Switch, Select, Space } from 'antd';
import triangle from "../../../assets/Icon/triangle.svg";
const handleChange = (value: string) => {
console.log(`selected ${value}`);
};
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';
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,
legend,
} = props;
const iconSrc = useIcon(icon);
const colors = useMemo(() => ['#ffd160', '#2760ff', '#15e8f5'], []);
const [showChart, setShowChart] = useState(true);
const size = props.size || ["middle", "middle"];
const bgClass = choseBg(size);
const {
icon,
title,
desc,
switchOptions,
onSwitch,
dateOptions,
onDateChange,
defaultSelect,
selectWidth,
legend,
} = props;
const iconSrc = useIcon(icon);
const colors = useMemo(() => ["#ffd160", "#2760ff", "#15e8f5"], []);
const [showChart, setShowChart] = useState(true);
let dto = null;
const switchStyle = {};
let dto = null;
let timerangeHint = 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>
));
}
if (props.switchPosition) {
props.switchPosition.forEach((item, index) => {
if (item != null) {
switchStyle[index == 0 ? "top" : "left"] = item + "px";
}
});
}
function handleSwitchChange(v) {
v ? setShowChart(true) : setShowChart(false);
onSwitch(v);
}
if (dateOptions) {
console.log("dateoptions ", title, 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: "14px",
lineHeight: 1,
paddingLeft: "12px",
}}
>
- 无 -
</span>
}
onChange={(value, option) => onDateChange(value)}
/>
);
// <Radio.Button value={item} key={item} className="radio-group__item">
// {item}
// </Radio.Button>
}
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}>{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 && (
// defaultValue={defaultSelect || dateOptions[0]}
<Radio.Group
value={defaultSelect || dateOptions[0]}
buttonStyle="solid"
className={cls.graphBaseDate + ' ' + cls.radioGroup}
onChange={({ target }) => onDateChange(target.value)}
>
{dto}
</Radio.Group>
)}
{props.children}
</div>
</div>
);
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}>{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
// (
// <Radio.Group
// value={defaultSelect || dateOptions[0]}
// buttonStyle="solid"
// className={cls.graphBaseDate + " " + cls.radioGroup}
// onChange={({ target }) => onDateChange(target.value)}
// >
// {dto}
// </Radio.Group>
// )
}
{props.children}
</div>
</div>
);
}
export default GraphBase;

2
src/components/Common/GraphBase/index.module.css
View File

@@ -115,7 +115,7 @@
.radioGroup * {
border: none !important;
border-radius: 0 !important;
border-radius: 6px !important;
}
.radioGroup *:focus-within {

31
src/components/Common/GraphBase/selector.style.overwrite.css Normal file
View File

@@ -0,0 +1,31 @@
.xc-date-selector-menu {
background-color: #04233c !important;
}
.xc-date-selector-menu .ant-select-item {
color: #fff;
background: transparent;
}
.xc-date-selector-menu .ant-select-item-option-content {
text-align: center;
}
.xc-date-selector-menu .ant-select-item-option-selected {
color: #fff !important;
background-color: #02457E !important;
}
.ant-select-selector {
background-color: #02457E !important;
color: #fff !important;
}
/*
.ant-select-selector::after {
content: '\25BC' !important;
visibility: visible !important;
position: absolute;
top: 2px;
right: 22px;
color: #04233c;
} */