5个页面的ws接口

src/page/LinePage1-2/Component/SwitchButton/index.css

@@ -0,0 +1,19 @@
+.switch-button {
+  height: 33px;
+}
+.switch-button button {
+  color: #fff;
+  font-size: 18px;
+  padding: 4px 10px;
+  background-color: rgba(49, 135, 140, 0.3);
+  cursor: pointer;
+}
+.switch-button button:first-child {
+  border-radius: 5px 0 0 5px;
+}
+.switch-button button:last-child {
+  border-radius: 0 5px 5px 0;
+}
+.switch-button button.active {
+  background-color: rgba(86, 244, 231, 0.7);
+}

src/page/LinePage1-2/Component/SwitchButton/index.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import "./index.css";
+interface Name {
+  name: string;
+  ename: string;
+}
+interface nameListProps {
+  nameList: Name[];
+  onChange: (value: string) => void;
+}
+function createActiveNameUpdater(nameList: any, activeName: string) {
+  let activeIndex = nameList.findIndex((obj: any) => obj.name === activeName);
+
+  return function updateActiveName() {
+    activeIndex = (activeIndex + 1) % nameList.length;
+    return nameList[activeIndex].ename;
+  };
+}
+function SwitchButton(props: nameListProps) {
+  const [activeName, setActiveName] = useState(props.nameList[0].ename);
+  const [timerId, setTimerId] = useState<any>(null);
+  let updateActiveName = createActiveNameUpdater(props.nameList, activeName);
+  useEffect(() => {
+    const timer = setInterval(() => {
+      let active = updateActiveName();
+      setActiveName(active);
+      props.onChange(active);
+    }, 60000);
+    setTimerId(timer);
+    return () => {
+      if (timerId !== null) {
+        clearInterval(timerId);
+      }
+    };
+  }, [props.nameList.length]);
+  const btnClick = (ename: string) => {
+    if (timerId !== null) {
+      clearInterval(timerId);
+    }
+    setActiveName(ename);
+    props.onChange(ename); // 通知父组件
+    const newTimer = setInterval(() => {
+      let active = updateActiveName();
+      setActiveName(active);
+      props.onChange(active);
+    }, 60000);
+    setTimerId(newTimer);
+  };
+  return (
+    <div className="switch-button">
+      {props.nameList.map((item, index) => {
+        return (
+          <button
+            key={item.ename}
+            className={activeName === item.ename ? "active" : ""}
+            onClick={() => btnClick(item.ename)}
+          >
+            {item.name}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+export default SwitchButton;

src/page/LinePage1-2/Component/TitleBox/index.css

@@ -0,0 +1,13 @@
+.title_box {
+  font-size: 24px;
+  color: #52fff1;
+  padding: 10px 0 0 15px;
+}
+.title_box img {
+  width: 33px;
+  height: 33px;
+  vertical-align: bottom;
+  margin-right: 3px;
+  position: relative;
+  top: 3px;
+}

src/page/LinePage1-2/Component/TitleBox/index.tsx

@@ -0,0 +1,53 @@
+import Defect from "./../../assets/icon/defect.png";
+import Alarm from "./../../assets/icon/alarm.png";
+import Finished from "./../../assets/icon/finished.png";
+import InputAndOutput from "./../../assets/icon/inputAndOutput.png";
+import Num from "./../../assets/icon/num.png";
+import Record from "./../../assets/icon/record.png";
+import "./index.css";
+interface titleProps {
+  title: string;
+}
+function TitleBox(props: titleProps) {
+  const filteredTitles = () => {
+    switch (props.title) {
+      case "left_up":
+        return {
+          img: Defect,
+          title: "产线报废汇总",
+        };
+      case "left_down":
+        return {
+          img: Record,
+          title: "当前产线报废情况",
+        };
+      case "center_down_left":
+        return {
+          img: Alarm,
+          title: "异常报警",
+        };
+      case "center_down_right":
+        return {
+          img: Finished,
+          title: "产线成品率",
+        };
+      case "right_up":
+        return {
+          img: Num,
+          title: "各产线总投入和产出",
+        };
+      default:
+        return {
+          img: InputAndOutput,
+          title: "当前产线投入和产出",
+        };
+    }
+  };
+  return (
+    <div className="title_box">
+      <img src={filteredTitles().img} alt="title" />
+      <span>{filteredTitles().title}</span>
+    </div>
+  );
+}
+export default TitleBox;