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

// AnnealFanRunFrequence
import cls from "./index.module.css";
import * as echarts from "echarts";
import GraphBase from "../GraphBase";
import { useEffect, useState } from "react";
import { useSelector } from "react-redux";

function WindFrequence(props) {
  const [currLine, setCurrLine] = useState('Y61')
  const [showChart, setShowChart] = useState(false);
  const [currentLine, setCurrentLine] = useState([]);
  const runState = useSelector((state) => state.annealFanFrequence.runtime);
  const hisState = useSelector((state) => state.annealFanFrequence.history);

  let dataList = [];
  let seriesData = [];
  const colors = [
    "#12FFF5",
    "#2760FF",
    "#FFD160",
    "#E80091",
    "#8064ff",
    "#ff8a3b",
    "#8cd26d",
    "#2aa1ff",
  ];
  let options = null;
  if (showChart) {
    // keys() 结果不是按照顺序，需要 sort()
    seriesData =
      hisState != null
        ? Object.keys(hisState)
            .sort()
            .map((key) => hisState[key])
        : Array(8)
            .fill(1)
            .map((_) => Array(7).fill(0));

    options = {
      color: colors,
      grid: { top: 32, right: 12, bottom: 20, left: 48 },
      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(),
        axisLabel: {
          color: "#fff",
          fontSize: 12,
        },
        axisTick: { show: false },
        axisLine: {
          lineStyle: {
            width: 1,
            color: "#213259",
          },
        },
      },
      yAxis: {
        name: "单位/m³",
        nameTextStyle: {
          color: "#fff",
          fontSize: 10,
          align: "right",
        },
        type: "value",
        axisLabel: {
          color: "#fff",
          fontSize: 12,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#213259",
          },
        },
        splitLine: {
          lineStyle: {
            color: "#213259a0",
          },
        },
        // interval: 10,
        // min: 0,
        // max: 100,
      },
      series: seriesData.map((v, i) => ({
        name: i + 1 + "#风机",
        data: v,
        type: "line",
        symbol: "circle",
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            // i % 8 避免超过8个数据时无颜色的问题
            { offset: 0, color: colors[i % 8] + "40" },
            { offset: 0.5, color: colors[i % 8] + "20" },
            { offset: 1, color: colors[i % 8] + "00" },
          ]),
        },
      })),
      tooltip: {
        trigger: "axis",
      },
    };
  } else {
    console.log('runstate changeD!......')
    dataList =
      runState != null
        ? Object.keys(runState).map((fan) => ({
            id: Math.random(),
            name: fan,
            value: runState[fan],
          }))
        : [
            { id: 1, name: "1#风机#1", value: "0m³/h" },
            // { id: 133, name: "1#风机#1", value: "0m³/h" },
            // { id: 134, name: "1#风机#1", value: "0m³/h" },
            // { id: 1344, name: "1#风机#1", value: "0m³/h" },
            // { id: 51, name: "1#风机#1", value: "0m³/h" },
            // { id: 1534, name: "1#风机#1", value: "0m³/h" },
            // { id: 154, name: "1#风机#1", value: "0m³/h" },
            // { id: 153, name: "1#风机#1", value: "0m³/h" },
            // { id: 111, name: "1#风机#1", value: "0m³/h" },
            { id: 2, name: "2#风机#1", value: "0m³/h" },
            { id: 3, name: "3#风机#1", value: "0m³/h" },
            { id: 4, name: "4#风机#1", value: "0m³/h" },
            { id: 5, name: "5#风机#1", value: "0m³/h" },
            { id: 11, name: "1#风机#2", value: "0m³/h" },
            { id: 12, name: "2#风机#2", value: "0m³/h" },
            { id: 13, name: "3#风机#2", value: "0m³/h" },
            { id: 14, name: "4#风机#2", value: "0m³/h" },
            { id: 15, name: "5#风机#2", value: "0m³/h" },
          ];
  }

  function handleSwitchChange(val) {
    if (val) {
      setShowChart(true);
    } else {
      setShowChart(false);
    }
  }

  useEffect(() => {
    if (!showChart) {
      setCurrentLine((old) =>
        dataList.filter((item) => item?.name.startsWith("1#"))
      );
    }
  }, [showChart]);

  function handleLineChange(line) {
    const lineNum = line[2];
    setCurrLine(line);
    setCurrentLine((old) =>
      dataList.filter((item) => item?.name.startsWith(`${lineNum}#`))
    );
  }

  return (
    <GraphBase
      icon="kiln"
      title="风机运行频率"
      size={["middle", "long"]}
      switchOptions={false}
      switchPosition={[null, 200]} // [top, left]
      onSwitch={handleSwitchChange}
      dateOptions={["Y61", "Y62", "Y63", "Y64", "Y65"]}
      selectWidth={70}
      defaultSelect={currLine}
      onDateChange={handleLineChange}
    >
      <div className={cls.chart} style={{ marginTop: "24px" }}>
        {/* {showChart && (
          <ReactECharts option={options} style={{ height: "100%" }} />
        )} */}
        {!showChart && (
          <div className={cls.gridList}>
            {currentLine.map((item) => (
              <div
                key={item.id}
                className={cls.listItem}
                style={{ padding: props.stretch ? "20px 0" : "" }}
              >
                <span className={cls.fanName}>{item.name}</span>
                <span
                  className={cls.fanValue}
                  style={{
                    fontWeight: 700,
                    letterSpacing: 1,
                    fontSize: 16,
                    // color: "#e03537",
                    color: "#24aebb",
                  }}
                >
                  {item.value}
                </span>
              </div>
            ))}
          </div>
        )}
      </div>
    </GraphBase>
  );
}

export default WindFrequence;