xuchang-new/src/components/Common/GraphBase/index.jsx

// TODO: 通用组件 - 按钮 菜单控制层
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";
}

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 iconSrc = useIcon(icon);
  const colors = useMemo(() => ["#ffd160", "#2760ff", "#15e8f5"], []);
  const [showChart, setShowChart] = useState(true);

  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) {
    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>
  }

  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;