xuchang-new/src/components/Common/SmokeHandle/SmokeTrendChart/index.jsx

import cls from "./index.module.css";
import * as echarts from "echarts";
import { Select } from "antd";
import ReactECharts from "echarts-for-react";
import { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import triangle from "../../../../assets/Icon/triangle.svg";
import dayjs from "dayjs";

const SmokeTrendChart = (props) => {
  const dayTrend = useSelector((state) => state.smoke?.dayTrend);
  const weekTrend = useSelector((state) => state.smoke?.weekTrend);
  const monthTrend = useSelector((state) => state.smoke?.monthTrend);
  const yearTrend = useSelector((state) => state.smoke?.yearTrend);

  const [source, setSource] = useState("O2_float");
  const [period, setPeriod] = useState("day");

  const currentTrend =
    period === "day"
      ? dayTrend
      : period === "week"
      ? weekTrend
      : period === "month"
      ? monthTrend
      : yearTrend;

  const options = getOptions(source, period, currentTrend);

  const [desc, setDesc] = useState("");

  useEffect(() => {
    switch (period) {
      case "day":
        setDesc(
          dayjs().format("YYYY.MM.DD") +
            " 7点 - " +
            dayjs().add(1, "day").format("YYYY.MM.DD") +
            " 7点"
        );
        break;
      case "month":
        setDesc(
          dayjs().subtract(1, "month").format("YYYY.MM.") +
            "29 - " +
            dayjs().format("YYYY.MM.") +
            "28"
        );
        break;
      case "week":
        setDesc(
          dayjs().subtract(7, "day").format("YYYY.MM.DD") +
            " - " +
            dayjs().subtract(1, "day").format("YYYY.MM.DD")
        );
        break;
      case "year":
        setDesc(
          dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
            "29 - " +
            dayjs().endOf("year").format("YYYY.MM.") +
            "28"
        );
        break;
    }
  }, [period]);

  function handleDateChange(value) {
    setPeriod(
      {
        日: "day",
        周: "week",
        月: "month",
        年: "year",
      }[value]
    );
  }
  function handleSourceChange(value) {
    setSource(
      {
        氧气: "O2_float",
        氮氧化物: "NOX_float",
        二氧化硫: "SO2_float",
        颗粒物: "dust_float",
      }[value]
    );
  }

  return (
    <div className={cls.energyCostChart}>
      <div className={cls.titleBar}>
        <h2>烟气趋势图</h2>
        {/* <Switch defaultChecked onChange={handleSwitchChange} /> */}
        {/* <div className={cls.legend}>
          <span className="legend__title">班次详情</span>
          <ul className="legend__list">
            <li>总量</li>
            <li>白班</li>
            <li>夜班</li>
          </ul>
        </div> */}
      </div>

      <div className={`${cls.choiceBar} flex items-center justify-between`}>
        {/* <Radio.Group
          value={source}
          onChange={(e) => setSource(e.target.value)}
          buttonStyle="solid"
          className={`${cls.radioGroup} flex items-center justify-between`}
        >
          <Radio.Button value="O2_float" className="radio-group__item">
            氧气
          </Radio.Button>
          <Radio.Button value="NOX_float" className="radio-group__item">
            氮氧化物
          </Radio.Button>
          <Radio.Button value="SO2_float" className="radio-group__item">
            二氧化硫
          </Radio.Button>
          <Radio.Button value="dust_float" className="radio-group__item">
            颗粒物
          </Radio.Button>
        </Radio.Group> */}
        <Select
          defaultValue={"氧气"}
          style={{ width: 100 }}
          popupClassName="xc-date-selector-menu"
          className={cls.radioGroupShort}
          options={["氧气", "氮氧化物", "二氧化硫", "颗粒物"].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) => handleSourceChange(value)}
        />

        <div className={cls.graphBaseDesc}>{desc}</div>

        {/* <Radio.Group
          value={period}
          onChange={(e) => setPeriod(e.target.value)}
          buttonStyle="solid"
          className={cls.radioGroup}
        >
          <Radio.Button value="day" className="radio-group__item">
            日
          </Radio.Button>
          <Radio.Button value="week" className="radio-group__item">
            周
          </Radio.Button>
          <Radio.Button value="month" className="radio-group__item">
            月
          </Radio.Button>
          <Radio.Button value="year" className="radio-group__item">
            年
          </Radio.Button>
        </Radio.Group> */}

        <Select
          defaultValue={"日"}
          style={{ width: 60 }}
          popupClassName="xc-date-selector-menu"
          className={cls.radioGroupShort}
          options={["日", "周", "月", "年"].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) => handleDateChange(value)}
        />
      </div>
      {options && <ReactECharts option={options} style={{ height: "220px" }} />}
      {!options && (
        <p
          style={{
            color: "#cccf",
            fontSize: "24px",
            userSelect: "none",
            textAlign: "center",
            paddingTop: "96px",
          }}
        >
          暂无数据
        </p>
      )}
    </div>
  );
};

export default SmokeTrendChart;

function getOptions(source, period, trend) {
  if (
    trend[source].length === 0 ||
    trend[source].filter((item) => item.value).length == 0
  )
    return null;

  return {
    color: ["#FFD160", "#12FFF5", "#2760FF"],
    grid: {
      top: 40,
      right: 12,
      bottom: 20,
      left: source == "O2_float" ? 56 : 72,
    },
    xAxis: {
      type: "category",
      //   data: Array(7)
      //     .fill(1)
      //     .map((_, index) => {
      //       const today = new Date();
      //       const dtimestamp = today - index * 24 * 60 * 60 * 1000;
      //       return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
      //         dtimestamp
      //       ).getDate()}`;
      //     })
      //     .reverse(),
      data: trend[source].map((item) => item.time),
      axisLabel: {
        color: "#fff",
        fontSize: 12,
      },
      axisTick: { show: false },
      axisLine: {
        lineStyle: {
          width: 1,
          color: "#213259",
        },
      },
    },
    yAxis: {
      name: source == "O2_float" ? "单位:%" : "单位mg/m³",
      nameTextStyle: {
        color: "#fff",
        fontSize: 13,
        align: "right",
      },
      type: "value",
      axisLabel: {
        color: "#fff",
        fontSize: 14,
        formatter: "{value}",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#213259",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#213259a0",
        },
      },
    },
    series: [
      {
        data: trend[source].map((item) =>
          !(item.value == null || isNaN(+item.value))
            ? (+item.value).toFixed(2)
            : null
        ),
        type: "line",
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#FFD16040" },
            { offset: 0.5, color: "#FFD16020" },
            { offset: 1, color: "#FFD16010" },
          ]),
        },
        // smooth: true,
      },
      //   {
      //     data: Array(7)
      //       .fill(1)
      //       .map((_) => {
      //         return randomInt(60, 100);
      //       }),
      //     type: "line",
      //     areaStyle: {
      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //         { offset: 0, color: "#12FFF540" },
      //         { offset: 0.5, color: "#12FFF520" },
      //         { offset: 1, color: "#12FFF510" },
      //       ]),
      //     },
      //     // smooth: true,
      //   },
      //   {
      //     data: Array(7)
      //       .fill(1)
      //       .map((_) => {
      //         return randomInt(60, 100);
      //       }),
      //     type: "line",
      //     areaStyle: {
      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //         { offset: 0, color: "#2760FF40" },
      //         { offset: 0.5, color: "#2760FF20" },
      //         { offset: 1, color: "#2760FF10" },
      //       ]),
      //     },
      //     // smooth: true,
      //   },
    ],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      className: "xc-chart-tooltip",
    },
  };
}