xuchang-new/src/components/公共组件/风机运行频率/index.jsx

// 风机运行频率
import cls from "./index.module.css";
import ReactECharts from "echarts-for-react";
import * as echarts from "echarts";
import { Switch } from "antd";
import GraphBase from "../../公共组件/GraphBase";
import { useState, useContext } from "react";
// import SocketContext from '../../../store/socket-data-provider';

function WindFrequence(props) {
  const [showChart, setShowChart] = useState(true);
  // const { runState, hisState } = useContext(SocketContext);

  const runState = null;
  const hisState = null;

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

    // debug
    console.log(
      "助燃风 chart series data",
      hisState?.combustionAir,
      seriesData
    );
    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, [
            { offset: 0, color: colors[i] + "40" },
            { offset: 0.5, color: colors[i] + "20" },
            { offset: 1, color: colors[i] + "00" },
          ]),
        },
      })),
      tooltip: {
        trigger: "axis",
      },
    };
  } else {
    dataList = runState?.combustionAirPressureArr
      ? [
          { 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" },
        ].map((item, index) => ({
          ...item,
          value: runState.combustionAirPressureArr[index] ?? "/",
        }))
      : [
          { 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" },
        ];
  }

  function handleSwitchChange(val) {
    if (val) {
      setShowChart(true);
    } else {
      setShowChart(false);
    }
  }
  return (
    <GraphBase
      icon="kiln"
      title="风机运行频率"
      size={["middle", "long"]}
      switchOptions={true}
      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}>
                {item.name}: {item.value}
              </div>
            ))}
          </div>
        )}
      </div>
    </GraphBase>
  );
}

export default WindFrequence;