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

import ReactECharts from "echarts-for-react";
import TitleBox from "../Component/TitleBox";
import ScrollBoard from "./../../Component/ScrollBoard";
import SwitchButton from "../Component/SwitchButton";
import { useState } from "react";
import getOptions from "./LineChart/chart.config";
import { useParams } from "react-router-dom";
function CenterDown() {
  const { LineID } = useParams();
  const lineID = LineID?.toString() || "1-1";
  console.log(lineID.slice(-1));
  // 假数据
  const dataSource = {
    day: {
      yData1: [76.1, 77.4, 75.2, 74.1, 78.5, 81.3, 79.2],
      yData2: [77.2, 78.1, 78.2, 77.1, 79.2, 78.3, 79.5],
      yData3: [75.1, 74.3, 71.3, 79.8, 82.3, 81.4, 80.3],
      yData4: [82.4, 83.1, 88.4, 85.3, 87.1, 82.5, 84.9],
      yData5: [82.3, 81.9, 85.8, 81.9, 84.1, 83.5, 82.3],
    },
    week: {
      yData1: [120, 200, 150, 80, 100, 89, 69],
      yData2: [100, 150, 120, 70, 90, 97, 89],
      yData3: [80, 120, 90, 60, 80, 79, 98],
      yData4: [60, 90, 70, 40, 60, 69, 98],
      yData5: [40, 60, 50, 20, 40, 89, 99],
    },
    month: {
      yData1: [1200, 2000, 1500, 800, 1000, 999, 889],
      yData2: [1000, 1500, 1200, 700, 900, 987, 897],
      yData3: [800, 1200, 900, 600, 800, 962, 759],
      yData4: [600, 900, 700, 400, 600, 896, 987],
      yData5: [400, 600, 500, 200, 400, 986, 951],
    },
  };
  const nameList = [
    { name: "天", ename: "day" },
    { name: "周", ename: "week" },
    { name: "月", ename: "month" },
  ];
  const [activeName, setActiveName] = useState<string>(nameList[0].ename);
  let chartData = (dataSource as { [key: string]: any })[activeName];
  const handleButtonChange = (activeName: string) => {
    setActiveName(activeName);
  };
  const options = getOptions(chartData);
  const config = {
    header: ["序号", "报警时间", "报警编码", "设备状态"],
    headerHeight: 36,
    rowNum: 6,
    align: ["center", "left", "left", "left"],
    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>",
      ],
    ],
  };
  const config1 = {
    header: ["序号", "报警时间", "报警设备", "报警内容"],
    headerHeight: 36,
    rowNum: 6,
    align: ["center", "left", "left", "left"],
    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",
        "2024/8/28 08:32",
        "清洗机5_1",
        "<span style='color:#FF1E1E'>故障</span>",
      ],
      [
        "2",
        "2024/8/28 06:12",
        "清洗机5_1",
        "<span style='color:#FFB40F'>离线</span>",
      ],
      [
        "3",
        "2024/8/28 06:05",
        "磨边机5_2",
        "<span style='color:#FFB40F'>离线</span>",
      ],
      [
        "4",
        "2024/8/28 04:43",
        "二次镀膜机5_1",
        "<span style='color:#FFB40F'>离线</span>",
      ],
      [
        "5",
        "2024/8/28 02:14",
        "磨边机5_1",
        "<span style='color:#FF1E1E'>故障</span>",
      ],
      [
        "6",
        "2024/8/27 22:54",
        "磨边机5_2",
        "<span style='color:#FFB40F'>离线</span>",
      ],
      [
        "7",
        "2024/8/27 21:55",
        "磨边机5_1",
        "<span style='color:#FFB40F'>离线</span>",
      ],
      [
        "8",
        "2024/8/27 21:42",
        "一次镀膜机5_2",
        "<span style='color:#FFB40F'>离线</span>",
      ],
      [
        "9",
        "2024/8/27 21:37",
        "磨边机5_1",
        "<span style='color:#FFB40F'>离线</span>",
      ],
    ],
  };
  const config2 = {
    header: ["序号", "报警时间", "报警设备", "报警内容"],
    headerHeight: 36,
    rowNum: 6,
    align: ["center", "left", "left", "left"],
    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",
        "2024/8/28 07:44",
        "下片机械手5_1",
        "<span style='color:#FF1E1E'>故障</span>",
      ],
      [
        "2",
        "2024/8/28 07:35",
        "下片机械手5_1",
        "<span style='color:#FF1E1E'>故障</span>",
      ],
      [
        "3",
        "2024/8/28 03:23",
        "在线铺纸机5_1",
        "<span style='color:#FFB40F'>离线</span>",
      ],
      [
        "4",
        "2024/8/28 01:36",
        "下片机械手5_2",
        "<span style='color:#FF1E1E'>故障</span>",
      ],
      [
        "5",
        "2024/8/28 00:38",
        "钢化炉5",
        "<span style='color:#FFB40F'>离线</span>",
      ],
      [
        "6",
        "2024/8/27 23:58",
        "下片机械手5_3",
        "<span style='color:#FFB40F'>离线</span>",
      ],
      [
        "7",
        "2024/8/27 23:45",
        "下片机械手5_2",
        "<span style='color:#FFB40F'>离线</span>",
      ],
      [
        "8",
        "2024/8/27 22:34",
        "钢化炉5",
        "<span style='color:#FFB40F'>离线</span>",
      ],
      [
        "9",
        "2024/8/27 20:31",
        "在线铺纸机5_1",
        "<span style='color:#FF1E1E'>故障</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={lineID.slice(-1) === "1" ? config1 : config2}
            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} onChange={handleButtonChange} />
        </div> */}

        {options && (
          <div className="chart_box">
            {<ReactECharts option={options} style={{ height: "100%" }} />}
          </div>
        )}
        {!options && (
          <p
            style={{
              color: "#cccf",
              fontSize: "24px",
              userSelect: "none",
              textAlign: "center",
              paddingTop: "72px",
            }}
          >
            暂无数据
          </p>
        )}
      </div>
    </div>
  );
}
export default CenterDown;