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

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

function WindFrequence(props) {
  const [showChart, setShowChart] = useState(false);
  const runState = useSelector((state) => state.fanFrequence.runtime);
  const hisState = useSelector((state) => state.fanFrequence.history);

  const [options, dataList] = getOptions(showChart, hisState, runState);

  function handleSwitchChange(val) {
    if (val) {
      setShowChart(true);
    } else {
      setShowChart(false);
    }
  }
  return (
    <GraphBase
      icon="smoke"
      title="风机运行频率"
      size={["middle", "long"]}
      switchOptions={false}
      switchPosition={[null, 200]} // [top, left]
      onSwitch={handleSwitchChange}
    >
      <div className={cls.chart}>
        {/* {showChart && (
          <ReactECharts option={options} style={{ height: "100%" }} />
        )} */}
        {!showChart && (
          <div className={cls.gridList}>
            {dataList.map((item) => (
              <div
                key={item.id}
                className={cls.listItem}
                style={{ padding: props.stretch ? "16px 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;

function getOptions(showChart, hisState, runState) {
  let dataList = null;
  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 {
    dataList =
      runState != null
        ? Object.keys(runState).map((fan) => ({
            id: Math.random(),
            name: fan,
            value: (+runState[fan])?.toFixed(2),
          }))
        : [
            { id: 1, name: "1#风机", value: "0m³/h" },
            { id: 2, name: "2#风机", value: "0m³/h" },
            { id: 3, name: "3#风机", value: "0m³/h" },
            { id: 4, name: "4#风机", value: "0m³/h" },
            { id: 5, name: "5#风机", value: "0m³/h" },
            { id: 6, name: "6#风机", value: "0m³/h" },
            { id: 7, name: "7#风机", value: "0m³/h" },
            { id: 8, name: "8#风机", value: "0m³/h" },
            { id: 9, name: "9#风机", value: "0m³/h" },
            { id: 10, name: "10#风机", value: "0m³/h" },
            { id: 11, name: "11#风机", value: "0m³/h" },
            { id: 12, name: "12#风机", value: "0m³/h" },
            { id: 13, name: "13#风机", value: "0m³/h" },
            { id: 14, name: "14#风机", value: "0m³/h" },
            { id: 15, name: "15#风机", value: "0m³/h" },
            { id: 16, name: "16#风机", value: "0m³/h" },
          ];
  }

  return [options, dataList];
}