luoyang-screen/src/page/LinePage/Center/CenterDown.tsx

import TitleBox from "../Component/TitleBox";
import LineChart from "./LineChart";
import ScrollBoard from "./../../Component/ScrollBoard";
import SwitchButton from "../Component/SwitchButton";
import { useState } from "react";
function CenterDown() {
  const nameList = [{ name: "天" }, { name: "周" }, { name: "月" }];
  const [activeName, setActiveName] = useState<string>(nameList[0].name);
  const config = {
    header: ["序号", "报警时间", "报警编码", "设备状态"],
    headerHeight: 36,
    rowNum: 6,
    headerBGC: "rgba(79, 114, 136, 0.3)",
    oddRowBGC: "rgba(79, 114, 136, 0.3)",
    evenRowBGC: "rgba(76, 97, 123, 0.1)",
    columnWidth: [80, 137, 137, 137],
    data: [
      ["1", "行1列1", "行1列2", "<span style='color:#FF1E1E'>行1列3</span>"],
      ["2", "行2列1", "行2列2", "<span style='color:#FF1E1E'>行2列3</span>"],
      ["3", "行3列1", "行3列2", "<span style='color:#FF1E1E'>行3列3</span>"],
      ["4", "行4列1", "行4列2", "<span style='color:#FFB40F'>行4列3</span>"],
      ["5", "行5列1", "行5列2", "<span style='color:#FF1E1E'>行5列3</span>"],
      ["6", "行6列1", "行6列2", "<span style='color:#FFB40F'>行6列3</span>"],
      ["7", "行7列1", "行7列2", "<span style='color:#FF1E1E'>行7列3</span>"],
      ["8", "行8列1", "行8列2", "<span style='color:#FF1E1E'>行8列3</span>"],
      ["9", "行9列1", "行9列2", "<span style='color:#FF1E1E'>行9列3</span>"],
      [
        "10",
        "行10列1",
        "行10列2",
        "<span style='color:#FFB40F'>行10列3</span>",
      ],
    ],
  };
  return (
    <div className="center_down flex-row">
      <div className="center_down_inner flex-col left-box">
        <TitleBox title={"center_down_left"} />
        <span className="alarm_num_title">— 报警总数 —</span>
        <div className="alarm_num">321,343</div>
        <div style={{ padding: 10, height: "270px" }}>
          <ScrollBoard
            config={config}
            style={{ width: "492px", height: "250px" }}
          />
        </div>
      </div>
      {/* 产线成品率 */}
      <div className="center_down_inner flex-col right_box">
        <TitleBox title={"center_down_right"} />
        <div className="left_up_switch">
          <SwitchButton
            nameList={nameList}
            activeName={activeName}
            setActiveName={setActiveName}
          />
        </div>
        <div className="chart_box">
          <LineChart />
        </div>
      </div>
    </div>
  );
}
export default CenterDown;