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

import GraphBase from "../GraphBase";
import "./index.module.scss";
import { useSelector } from "react-redux";
import { ScrollBoard } from "@jiaminghi/data-view-react";
import { useMemo } from "react";

function attachStyle(data) {
  return data.map((arr) => {
    return arr.map((item, index) => {
      if (index == arr.length - 1) {
        return `<div style="display: flex; align-items: center">
							<span style="box-shadow: 0 0 4px 4px ${
                item == 1 ? "#2760ff55" : item == 0 ? "#a81b2655" : "#E6A23C55"
              }; margin-right: 8px; width: 8px; height: 8px; border-radius: 8px; background: ${
          item == 1 ? "#2760ff" : item == 0 ? "#a81b26" : "#E6A23C"
        }"></span><span style="color: ${
          item == 1 ? "#2760ff" : item == 0 ? "#a81b26" : "#E6A23C"
        }">${item == 1 ? "运行" : item == 0 ? "故障" : "未运行"}</span></div>`;
      }
      return `<span style='color: #fffa'>${item}</span>`;
    });
  });
}

function FanInfo(props) {
  // 默认使用风机信息，可以使用 source 来调整该组件使用 annealFanInfo 的数据
  const fanInfo = useSelector((state) => state[props.source ?? "fanInfo"].data);

  const data = Object.keys(fanInfo).map((key, index) => {
    return [
      index + 1,
      key,
      fanInfo[key] == "运行" ? 1 : fanInfo[key] == "故障" ? 0 : 2,
    ];
  });

  const y61 = useMemo(
    () => data.filter((item) => item[1].startsWith("1#")) || [],
    [data]
  );
  const y62 = useMemo(
    () => data.filter((item) => item[1].startsWith("2#")) || [],
    [data]
  );
  const y63 = useMemo(
    () => data.filter((item) => item[1].startsWith("3#")) || [],
    [data]
  );
  const y64 = useMemo(
    () => data.filter((item) => item[1].startsWith("4#")) || [],
    [data]
  );
  const y65 = useMemo(
    () => data.filter((item) => item[1].startsWith("5#")) || [],
    [data]
  );
  const y66 = useMemo(() => [...y65.slice(5), ...y65.slice(0, 5)], [y65]);

  let config = {
    headerBGC: "rgba(4, 44, 76, 0.3)",
    header: [
      '<span style="color:#fff">序号<span/>',
      '<span style="color:#fff">风机名称<span/>',
      '<span style="color:#fff">故障情况<span/>',
    ],
    oddRowBGC: "#042444",
    evenRowBGC: "#042c4c",
    // columnWidth: data.length > 12 ? [50, 136] : [88, 256],
    columnWidth: [50, 136],
    rowNum: 6,
    hoverPause: true,
    data: [],
  };

  return (
    <GraphBase
      icon="kiln"
      title="风机信息"
      size={props.longBg ? ["middle", "full"] : ["middle", "short"]}
    >
      <div
        style={{
          display: "grid",
          gridTemplateRows: "auto 2px auto 2px auto",
          gap: "4px",
          // height: "100%",
          position: "relative",
        }}
      >
        <div className="" style={{ display: "flex", gap: "8px" }}>
          <div>
            <h1
              style={{
                fontSize: "16px",
                fontWeight: 400,
                textAlign: "center",
                letterSpacing: "2px",
                color: "#fff",
                background: "#012041",
                padding: "4px 0",
              }}
            >
              产线Y61
            </h1>
            <ScrollBoard
              key="y61"
              config={{ ...config, data: attachStyle(y61) }}
              style={{
                width: "280px",
                height: "280px",
              }}
            />
          </div>
          <div>
            <h1
              style={{
                fontSize: "16px",
                fontWeight: 400,
                textAlign: "center",
                letterSpacing: "2px",
                color: "#fff",
                background: "#012041",
                padding: "4px 0",
              }}
            >
              产线Y62
            </h1>
            <ScrollBoard
              key="y62"
              config={{ ...config, data: attachStyle(y62) }}
              style={{
                width: "280px",
                height: "280px",
              }}
            />
          </div>
        </div>

        <div
          className="horizontalLine"
          style={{
            height: "2px",
            background:
              "radial-gradient(ellipse, #15E8F563, #15E8F599, transparent,  transparent)",
          }}
        ></div>

        <div className="" style={{ display: "flex", gap: "8px" }}>
          <div>
            <h1
              style={{
                fontSize: "16px",
                fontWeight: 400,
                textAlign: "center",
                letterSpacing: "2px",
                color: "#fff",
                background: "#012041",
                padding: "4px 0",
              }}
            >
              产线Y63
            </h1>
            <ScrollBoard
              key="y63"
              config={{ ...config, data: attachStyle(y63) }}
              style={{
                width: "280px",
                height: "280px",
              }}
            />
          </div>
          <div>
            {/* <div style={{ display: "flex", flexDirection: "column" }}> */}
            <h1
              style={{
                fontSize: "16px",
                fontWeight: 400,
                textAlign: "center",
                letterSpacing: "2px",
                color: "#fff",
                background: "#012041",
                padding: "4px 0",
              }}
            >
              产线Y64
            </h1>
            <ScrollBoard
              key="y64"
              config={{ ...config, data: attachStyle(y64) }}
              style={{
                width: "280px",
                height: "280px",
              }}
            />
          </div>
        </div>

        <div
          className="horizontalLine"
          style={{
            height: "2px",
            background:
              "radial-gradient(ellipse, #15E8F563, #15E8F599, transparent,  transparent)",
          }}
        ></div>

        <div
          className=""
          style={{ height: "240px", display: "flex", flexDirection: "column" }}
        >
          <h1
            style={{
              fontSize: "16px",
              fontWeight: 400,
              textAlign: "center",
              letterSpacing: "2px",
              color: "#fff",
              background: "#012041",
              padding: "4px 0",
            }}
          >
            产线Y65
          </h1>
          <div style={{ flex: 1, height: "1px", display: "flex", gap: "4px" }}>
            <ScrollBoard
              key="y65"
              config={{ ...config, data: attachStyle(y65), rowNum: 5 }}
              style={{
                width: "280px",
                height: "220px",
              }}
            />
            <ScrollBoard
              key="y66"
              config={{ ...config, data: attachStyle(y66), rowNum: 5 }}
              style={{
                width: "280px",
                height: "220px",
              }}
            />
          </div>
        </div>
      </div>
    </GraphBase>
  );
}

export default FanInfo;