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 GasI(props) {
  const [showChart, setShowChart] = useState(true);
  const runState = useSelector((state) => state.combustionAir.runtime);
  const hisState = useSelector((state) => state.combustionAir.history);

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

  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}>
                <span className={cls.item_label}>{item.name}</span>
                <span className={cls.item_value}>{item.value}</span>
                {/* {item.name}: {item.value} */}
              </div>
            ))}
          </div>
        )}
      </div>
    </BottomBarItem>
  );
}

export default GasI;

function getOptions(showChart, hisState, runState) {
  const colors = [
    "#12FFF5",
    "#2760FF",
    "#FFD160",
    "#E80091",
    "#8064ff",
    "#ff8a3b",
    "#8cd26d",
    "#2aa1ff",
  ];
  let seriesData = null;
  let dataList = null;
  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 + 1) * 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",
        // label: {
        //   show: true,
        //   position: "top",
        //   distance: 10,
        //   color: "#fffc",
        // },
        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",
        axisPointer: {
          type: "shadow",
        },
        className: "xc-chart-tooltip",
        // backgroundColor: ''
      },
    };
  } 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" },
          ];
  }

  return [options, dataList];
}