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

// 助燃风流量
import cls from "./index.module.css";
import BottomBarItem from "../BottomItemBackground";
import ReactECharts from "echarts-for-react";
import * as echarts from "echarts";
import { Switch } from "antd";
import { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";

// function mockData(type = "runtime") {
//   const RUNTIME_DATA_LENGTH = 8;
//   const MAX_HISTORY_DATA_LENGTH = 8;
//   const WEEK = 7;

//   switch (type) {
//     case "runtime":
//       return [
//         ...Array.from(
//           { length: RUNTIME_DATA_LENGTH },
//           () => Math.floor(Math.random() * 100) + "m³/h"
//         ),
//       ];
//     case "history":
//       return {
//         ...Array.from(
//           { length: Math.floor(Math.random() * MAX_HISTORY_DATA_LENGTH) },
//           (_, index) => ({
//             ["GAS_" + index]: [
//               ...Array.from({ length: WEEK }, () =>
//                 Math.floor(Math.random() * 100)
//               ),
//             ],
//           })
//         ).reduce((arr, curr) => ({ ...arr, ...curr }), {}),
//       };
//     default:
//       break;
//   }
// }

/** 助燃风流量 */
function GasI(props) {
  const [showChart, setShowChart] = useState(true);
  // const dispath = useDispatch();
  const runState = useSelector((state) => state.combustionAir.runtime);
  const hisState = useSelector((state) => state.combustionAir.history);

  // useEffect(() => {
  //   setInterval(() => {
  //     dispath({
  //       type: "combustionAir/setRuntime",
  //       payload: mockData("runtime"),
  //     });
  //     dispath({
  //       type: "combustionAir/setHistory",
  //       payload: mockData("history"),
  //     });
  //   }, 60000);
  // }, [dispath]);

  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, [
            { offset: 0, color: colors[i % colors.length] + "40" },
            { offset: 0.5, color: colors[i % colors.length] + "20" },
            { offset: 1, color: colors[i % colors.length] + "00" },
          ]),
        },
      })),
      tooltip: {
        trigger: "axis",
      },
    };
  } else {
    dataList =
      runState != null
        ? [
            { 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" },
          ].map((item, index) => ({
            ...item,
            value: runState[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" },
          ];
  }

  function handleSwitchChange(val) {
    if (val) {
      setShowChart(true);
    } else {
      setShowChart(false);
    }
  }
  return (
    <BottomBarItem
      icon="pause"
      title="助燃风流量"
      className={cls.gas}
      style={props.style}
    >
      <div className={cls.headWidget}>
        <div className="flex items-center">
          <Switch size="small" defaultChecked onChange={handleSwitchChange} />
          {showChart && <span className={cls.switchLabel}>历史详情</span>}
          {!showChart && <span className={cls.switchLabel}>实时流量</span>}
        </div>
      </div>

      <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>
    </BottomBarItem>
  );
}

export default GasI;