1

src/page/LDPage/index.css

@@ -0,0 +1,4 @@
+.main-box {
+  font-size: 50px;
+  color: #fff;
+}

src/page/LDPage/index.tsx

@@ -0,0 +1,35 @@
+import "./index.css"
+import {useEffect} from 'react';
+import {useLocation,useNavigate} from "react-router-dom";
+function LDPage() {
+  const navigate = useNavigate();
+  const {state} = useLocation();
+  console.log("LDPage被加载了")
+useEffect(() => {
+  const handleKeyDown = (event:any) => {
+    if (event.key === 'ArrowUp') {
+      console.log('LDPage向上键被按下');
+      navigate(`/TP/${state.LineID}`);
+      // 执行向上键的逻辑
+    } else if (event.key === 'ArrowDown') {
+      console.log('LDPage向下键被按下');
+      // 执行向下键的逻辑
+    }
+  };
+
+  window.addEventListener('keydown', handleKeyDown);
+
+  return () => {
+    window.removeEventListener('keydown', handleKeyDown);
+  };
+}, []); 
+
+  return (
+    <>
+      <div className="main-box">LDPage{state.LineID}</div>
+      <div className="main-box" style={{display:'none'}}>3434</div>
+    </>
+  );
+}
+
+export default LDPage;

src/page/LinePage/Center/CenterDown.tsx

@@ -0,0 +1,21 @@
+import TitleBox from "../Component/TitleBox";
+import LineChart from "./LineChart";
+function CenterDown() {
+  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>
+      {/* 产线成品率 */}
+      <div className="center_down_inner flex-col right_box">
+        <TitleBox title={"center_down_right"} />
+        <div className="chart_box">
+          <LineChart />
+        </div>
+      </div>
+    </div>
+  );
+}
+export default CenterDown;

src/page/LinePage/Center/CenterUp.tsx

@@ -0,0 +1,9 @@
+import LinePageBabylon from "../../../babylonjs/LinePageBabylon";
+function CenterUp() {
+  return (
+    <div className="center_up">
+      <LinePageBabylon modelPath={`Line1-2`} />
+    </div>
+  );
+}
+export default CenterUp;

src/page/LinePage/Center/LineChart/chart.config.ts

@@ -0,0 +1,102 @@
+import * as echarts from "echarts";
+export default function getOptions() {
+  const colors = ["#1A99FF", "#FFB70C", "#C69DFF", "#50F4E3", "#E02094"];
+  return {
+    color: colors,
+    grid: { top: 38, right: 12, bottom: 26, left: 48 },
+    legend: {
+      show: true,
+      icon: "roundRect",
+      top: 10,
+      right: 10,
+      padding: 0,
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 3,
+      height: 10,
+      textStyle: {
+        color: "#DFF1FE",
+        fontSize: 14,
+      },
+    },
+    xAxis: {
+      type: "category",
+      data: Array(7)
+        .fill(1)
+        .map((_, index) => {
+          const today = new Date();
+          const dtimestamp =
+            today.getTime() - (index + 1) * 24 * 60 * 60 * 1000;
+          return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+            dtimestamp
+          ).getDate()}`;
+        })
+        .reverse(),
+      axisLabel: {
+        color: "#fff",
+        fontSize: 14,
+      },
+      axisTick: { show: false },
+      axisLine: {
+        lineStyle: {
+          width: 2,
+          color: "#5982B2",
+        },
+      },
+    },
+    yAxis: {
+      name: "单位/%",
+      nameTextStyle: {
+        color: "#fff",
+        fontSize: 14,
+      },
+      type: "value",
+      axisLabel: {
+        color: "#fff",
+        fontSize: 14,
+        formatter: "{value}",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          width: 2,
+          color: "#5982B2",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          width: 2,
+          color: "#5982B2",
+        },
+      },
+    },
+    tooltip: {},
+    series: [
+      {
+        name: "产线1",
+        type: "line",
+        data: [20, 32, 10, 34, 90, 30, 20],
+      },
+      {
+        name: "产线2",
+        type: "line",
+        data: [22, 82, 91, 34, 90, 33, 31],
+      },
+      {
+        name: "产线3",
+        type: "line",
+        data: [50, 32, 20, 54, 19, 33, 41],
+      },
+      {
+        name: "产线4",
+        type: "line",
+        data: [30, 32, 30, 34, 90, 33, 32],
+      },
+      {
+        name: "产线5",
+        type: "line",
+        data: [20, 92, 91, 94, 90, 30, 53],
+      },
+    ],
+  };
+}

src/page/LinePage/Center/LineChart/index.tsx

@@ -0,0 +1,6 @@
+import ReactECharts from "echarts-for-react";
+import getOptions from "./chart.config";
+function LineChart() {
+  return <ReactECharts option={getOptions()} style={{ height: "100%" }} />;
+}
+export default LineChart;

src/page/LinePage/Center/index.tsx

@@ -0,0 +1,12 @@
+import CenterDown from "./CenterDown";
+import CenterUp from "./CenterUp";
+
+function Center() {
+  return (
+    <div className="group_center flex-col">
+      <CenterUp />
+      <CenterDown />
+    </div>
+  );
+}
+export default Center;

src/page/LinePage/Component/SwitchButton/index.css

@@ -0,0 +1,19 @@
+.switch-button {
+  height: 33px;
+}
+.switch-button button {
+  color: #fff;
+  font-size: 18px;
+  padding: 4px 15px;
+  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/LinePage/Component/SwitchButton/index.tsx

@@ -0,0 +1,29 @@
+import "./index.css";
+interface Name {
+  name: string;
+}
+interface nameListProps {
+  nameList: Name[];
+  activeName: string;
+  setActiveName: (name: string) => void;
+}
+function SwitchButton(props: nameListProps) {
+  return (
+    <div className="switch-button">
+      {props.nameList.map((item, index) => {
+        return (
+          <button
+            key={item.name}
+            className={props.activeName === item.name ? "active" : ""}
+            onClick={() => {
+              props.setActiveName(item.name);
+            }}
+          >
+            {item.name}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+export default SwitchButton;

src/page/LinePage/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/LinePage/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;

src/page/LinePage/Left/BarChart/chart.config.ts

@@ -0,0 +1,73 @@
+import * as echarts from "echarts";
+export default function getOptions() {
+  const colors = ["#1A99FF", "#FFB70C", "#C69DFF", "#50F4E3", "#E02094"];
+  return {
+    color: colors,
+    grid: { top: 30, right: 12, bottom: 26, left: 48 },
+    legend: {
+      show: false,
+    },
+    xAxis: {
+      type: "category",
+      data: ["缺陷1", "缺陷2", "缺陷3", "缺陷4", "缺陷5", "缺陷6"],
+      axisLabel: {
+        color: "#fff",
+        fontSize: 14,
+        interval: 0,
+      },
+      axisTick: { show: false },
+      axisLine: {
+        lineStyle: {
+          width: 2,
+          color: "#5982B2",
+        },
+      },
+    },
+    yAxis: {
+      name: "单位/千片",
+      nameTextStyle: {
+        color: "#fff",
+        fontSize: 14,
+      },
+      type: "value",
+      axisLabel: {
+        color: "#fff",
+        fontSize: 14,
+        formatter: "{value}",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          width: 2,
+          color: "#5982B2",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          width: 2,
+          color: "#5982B2",
+        },
+      },
+    },
+    tooltip: {},
+    series: [
+      {
+        data: [120, 200, 150, 80, 70, 110],
+        type: "bar",
+        barWidth: 10,
+        label: {
+          show: true,
+          fontSize: 12,
+          color: "#9CD4FF",
+          position: "top",
+        },
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: "#9DD5FF" },
+            { offset: 1, color: "#1295FF" },
+          ]),
+        },
+      },
+    ],
+  };
+}

src/page/LinePage/Left/BarChart/index.tsx

@@ -0,0 +1,6 @@
+import ReactECharts from "echarts-for-react";
+import getOptions from "./chart.config";
+function BarChart() {
+  return <ReactECharts option={getOptions()} style={{ height: "100%" }} />;
+}
+export default BarChart;

src/page/LinePage/Left/LeftDown.tsx

@@ -0,0 +1,47 @@
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import BarChart from "./BarChart";
+import { useState } from "react";
+function LeftDown() {
+  const nameList = [{ name: "表单" }, { name: "柱状" }];
+  const [activeName, setActiveName] = useState<string>(nameList[0].name);
+  return (
+    <div className="left_down">
+      <TitleBox title={"left_down"} />
+      <div className="left_up_switch">
+        <SwitchButton
+          nameList={nameList}
+          activeName={activeName}
+          setActiveName={setActiveName}
+        />
+      </div>
+      <div style={{ padding: "10px", height: "555px" }}>
+        <div className="left_down_title flex-row">
+          <div className="left_down_box1 flex-col" />
+          <span className="left_down_text">当天</span>
+          <div className="left_down_box2 flex-col" />
+        </div>
+        <div className="left_down_content">
+          {activeName === "表单" ? "表单" : <BarChart />}
+        </div>
+        <div className="left_down_title flex-row">
+          <div className="left_down_box1 flex-col" />
+          <span className="left_down_text">本周</span>
+          <div className="left_down_box2 flex-col" />
+        </div>
+        <div className="left_down_content">
+          {activeName === "表单" ? "表单" : <BarChart />}
+        </div>
+        <div className="left_down_title flex-row">
+          <div className="left_down_box1 flex-col" />
+          <span className="left_down_text">本月</span>
+          <div className="left_down_box2 flex-col" />
+        </div>
+        <div className="left_down_content">
+          {activeName === "表单" ? "表单" : <BarChart />}
+        </div>
+      </div>
+    </div>
+  );
+}
+export default LeftDown;

src/page/LinePage/Left/LeftUp.tsx

@@ -0,0 +1,24 @@
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import SummaryBarChart from "./SummaryBarChart";
+import { useState } from "react";
+function LeftUp() {
+  const nameList = [{ name: "天" }, { name: "周" }, { name: "月" }];
+  const [activeName, setActiveName] = useState<string>(nameList[0].name);
+  return (
+    <div className="left_up">
+      <TitleBox title={"left_up"} />
+      <div className="left_up_switch">
+        <SwitchButton
+          nameList={nameList}
+          activeName={activeName}
+          setActiveName={setActiveName}
+        />
+      </div>
+      <div className="left_up_chart">
+        <SummaryBarChart />
+      </div>
+    </div>
+  );
+}
+export default LeftUp;

src/page/LinePage/Left/SummaryBarChart/chart.config.ts

@@ -0,0 +1,138 @@
+import * as echarts from "echarts";
+export default function getOptions() {
+  const colors = ["#1A99FF", "#FFB70C", "#C69DFF", "#50F4E3", "#E02094"];
+  return {
+    color: colors,
+    grid: { top: 38, right: 12, bottom: 26, left: 48 },
+    legend: {
+      show: true,
+      icon: "roundRect",
+      top: 10,
+      right: 10,
+      padding: 0,
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 3,
+      height: 10,
+      textStyle: {
+        color: "#DFF1FE",
+        fontSize: 14,
+      },
+    },
+    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: 14,
+      },
+      axisTick: { show: false },
+      axisLine: {
+        lineStyle: {
+          width: 2,
+          color: "#5982B2",
+        },
+      },
+    },
+    yAxis: {
+      name: "单位/千片",
+      nameTextStyle: {
+        color: "#fff",
+        fontSize: 14,
+      },
+      type: "value",
+      axisLabel: {
+        color: "#fff",
+        fontSize: 14,
+        formatter: "{value}",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          width: 2,
+          color: "#5982B2",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          width: 2,
+          color: "#5982B2",
+        },
+      },
+    },
+    tooltip: {},
+    dataset: {
+      source: [
+        ["product", "产线1", "产线2", "产线3", "产线4", "产线5"],
+        ["缺陷1", 43, 85, 93, 60, 80],
+        ["缺陷2", 83, 73, 55, 67, 90],
+        ["缺陷3", 86, 65, 82, 68, 90],
+        ["缺陷4", 72, 53, 39, 88, 50],
+        ["缺陷5", 72, 53, 39, 88, 50],
+      ],
+    },
+    // Declare several bar series, each will be mapped
+    // to a column of dataset.source by default.
+    series: [
+      {
+        type: "bar",
+        barWidth: 8,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: "#9DD5FF" },
+            { offset: 1, color: "#1295FF" },
+          ]),
+        },
+      },
+      {
+        type: "bar",
+        barWidth: 8,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: "#FFC844" },
+            { offset: 1, color: "#FFB70C" },
+          ]),
+        },
+      },
+      {
+        type: "bar",
+        barWidth: 8,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: "#FF8BC3" },
+            { offset: 1, color: "#EB46A1" },
+          ]),
+        },
+      },
+      {
+        type: "bar",
+        barWidth: 8,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: "#85F6E9" },
+            { offset: 1, color: "#2EC6B4" },
+          ]),
+        },
+      },
+      {
+        type: "bar",
+        barWidth: 8,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: "#9496FF" },
+            { offset: 1, color: "#6567FF" },
+          ]),
+        },
+      },
+    ],
+  };
+}

src/page/LinePage/Left/SummaryBarChart/index.tsx

@@ -0,0 +1,6 @@
+import ReactECharts from "echarts-for-react";
+import getOptions from "./chart.config";
+function SummaryBarChart() {
+  return <ReactECharts option={getOptions()} style={{ height: "100%" }} />;
+}
+export default SummaryBarChart;

src/page/LinePage/Left/Table/index.tsx

@@ -0,0 +1,4 @@
+function Table() {
+  return <div>111</div>;
+}
+export default Table;

src/page/LinePage/Left/index.tsx

@@ -0,0 +1,11 @@
+import LeftUp from "./LeftUp";
+import LeftDown from "./LeftDown";
+function Left() {
+  return (
+    <div className="group_left flex-col">
+      <LeftUp />
+      <LeftDown />
+    </div>
+  );
+}
+export default Left;

src/page/LinePage/Right/LineChart/chart.config.ts

@@ -0,0 +1,87 @@
+import * as echarts from "echarts";
+export default function getOptions() {
+  const colors = ["#1A99FF", "#50F4E3"];
+  return {
+    color: colors,
+    grid: { top: 38, right: 12, bottom: 26, left: 48 },
+    legend: {
+      show: true,
+      icon: "roundRect",
+      top: 10,
+      right: 10,
+      padding: 0,
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 3,
+      height: 10,
+      textStyle: {
+        color: "#DFF1FE",
+        fontSize: 14,
+      },
+    },
+    xAxis: {
+      type: "category",
+      data: Array(7)
+        .fill(1)
+        .map((_, index) => {
+          const today = new Date();
+          const dtimestamp =
+            today.getTime() - (index + 1) * 24 * 60 * 60 * 1000;
+          return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+            dtimestamp
+          ).getDate()}`;
+        })
+        .reverse(),
+      axisLabel: {
+        color: "#fff",
+        fontSize: 14,
+      },
+      axisTick: { show: false },
+      axisLine: {
+        lineStyle: {
+          width: 2,
+          color: "#5982B2",
+        },
+      },
+    },
+    yAxis: {
+      name: "单位/千片",
+      nameTextStyle: {
+        color: "#fff",
+        fontSize: 14,
+      },
+      type: "value",
+      axisLabel: {
+        color: "#fff",
+        fontSize: 14,
+        formatter: "{value}",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          width: 2,
+          color: "#5982B2",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          width: 2,
+          color: "#5982B2",
+        },
+      },
+    },
+    tooltip: {},
+    series: [
+      {
+        name: "投入",
+        type: "line",
+        data: [20, 32, 10, 34, 90, 30, 20],
+      },
+      {
+        name: "产出",
+        type: "line",
+        data: [22, 82, 91, 34, 90, 33, 31],
+      },
+    ],
+  };
+}

src/page/LinePage/Right/LineChart/index.tsx

@@ -0,0 +1,6 @@
+import ReactECharts from "echarts-for-react";
+import getOptions from "./chart.config";
+function BarChart() {
+  return <ReactECharts option={getOptions()} style={{ height: "100%" }} />;
+}
+export default BarChart;

src/page/LinePage/Right/RightDown.tsx

@@ -0,0 +1,47 @@
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import LineChart from "./LineChart";
+import { useState } from "react";
+function RightDown() {
+  const nameList = [{ name: "表单" }, { name: "折线" }];
+  const [activeName, setActiveName] = useState<string>(nameList[0].name);
+  return (
+    <div className="right_down">
+      <TitleBox title={"right_down"} />
+      <div className="left_up_switch">
+        <SwitchButton
+          nameList={nameList}
+          activeName={activeName}
+          setActiveName={setActiveName}
+        />
+      </div>
+      <div style={{ padding: "10px", height: "628px" }}>
+        <div className="left_down_title flex-row">
+          <div className="left_down_box1 flex-col" />
+          <span className="left_down_text">当天</span>
+          <div className="left_down_box2 flex-col" />
+        </div>
+        <div className="right_down_content">
+          {activeName === "表单" ? "表单" : <LineChart />}
+        </div>
+        <div className="left_down_title flex-row">
+          <div className="left_down_box1 flex-col" />
+          <span className="left_down_text">本周</span>
+          <div className="left_down_box2 flex-col" />
+        </div>
+        <div className="right_down_content">
+          {activeName === "表单" ? "表单" : <LineChart />}
+        </div>
+        <div className="left_down_title flex-row">
+          <div className="left_down_box1 flex-col" />
+          <span className="left_down_text">本月</span>
+          <div className="left_down_box2 flex-col" />
+        </div>
+        <div className="right_down_content">
+          {activeName === "表单" ? "表单" : <LineChart />}
+        </div>
+      </div>
+    </div>
+  );
+}
+export default RightDown;

src/page/LinePage/Right/RightUp.tsx

@@ -0,0 +1,9 @@
+import TitleBox from "../Component/TitleBox";
+function RightUp() {
+  return (
+    <div className="right_up">
+      <TitleBox title={"right_up"} />
+    </div>
+  );
+}
+export default RightUp;

src/page/LinePage/Right/index.tsx

@@ -0,0 +1,12 @@
+import RightDown from "./RightDown";
+import RightUp from "./RightUp";
+
+function Right() {
+  return (
+    <div className="group_right flex-col">
+      <RightUp />
+      <RightDown />
+    </div>
+  );
+}
+export default Right;

src/page/LinePage/TopP.tsx

@@ -0,0 +1,14 @@
+import '../../lanhuapp/common.css';
+import "./index.css";
+
+function TopP() {
+  return (
+    <div className="flex-row">
+      <div className="block_top flex-row">
+        <div className='block_top_title'></div>
+      </div>
+    </div>
+  );
+}
+
+export default TopP;

src/page/LinePage/index.css

@@ -0,0 +1,168 @@
+/* 顶部 */
+.block_top {
+  width: 1920px;
+  height: 94px;
+  background: url(/public/svg/topback.svg) 100% no-repeat;
+  background-size: 100% 100%;
+  opacity: 1;
+  display: flex;
+  justify-content: center;
+}
+
+.block_top_title {
+  width: 651px;
+  height: 77px;
+  background: url(/public/png/topTiltle.png) 100% no-repeat;
+  background-size: 100% 100%;
+  margin-top: 18px;
+}
+/* 中部 */
+.block_bottom {
+  width: 1920px;
+  height: 966px;
+  padding-top: 20px;
+}
+
+.group_left {
+  width: 402px;
+  height: 966px;
+  margin: 0 0 0 24px;
+}
+
+.group_center {
+  width: 1041px;
+  height: 966px;
+  margin: 0 0 0 15px;
+}
+
+.group_right {
+  width: 401px;
+  height: 966px;
+  margin-left: 15px;
+}
+
+.left_up {
+  width: 402px;
+  height: 332px;
+  background: url(../../../public/png/rect/lp_left_up.png) no-repeat;
+  background-size: 100% 100%;
+  background-position: 0 0;
+  position: relative;
+}
+.left_down {
+  width: 402px;
+  height: 599px;
+  background: url(../../../public/png/rect/lp_left_down.png) no-repeat;
+  background-size: 100% 100%;
+  background-position: 0 0;
+  margin-top: 14px;
+  position: relative;
+}
+.center_up {
+  width: 1041px;
+  height: 562px;
+  background: url(../../../public/png/rect/lp_center_up.png) no-repeat;
+  background-size: 100% 100%;
+  background-position: 0 0;
+}
+.center_down {
+  width: 1041px;
+  height: 368px;
+  margin-top: 17px;
+}
+.center_down_inner {
+  width: 513px;
+  height: 366px;
+  background: url(../../../public/png/rect/lp_center_down.png) no-repeat;
+  background-size: 100% 100%;
+  background-position: 0 0;
+}
+.center_down .left-box {
+  margin-right: 15px;
+  position: relative;
+}
+.center_down .left-box .alarm_num_title {
+  position: absolute;
+  left: 220px;
+  top: 22px;
+  font-size: 13px;
+  letter-spacing: 3px;
+  color: #fff;
+}
+.center_down .left-box .alarm_num {
+  color: #52fff1;
+  font-size: 40px;
+  text-align: center;
+  font-family: PingFangSC, PingFang SC;
+}
+.center_down .right_box .chart_box {
+  width: 100%;
+  height: 310px;
+  margin-top: 10px;
+}
+.right_up {
+  width: 401px;
+  height: 257px;
+  background: url(../../../public/png/rect/lp_right_up.png) no-repeat;
+  background-size: 100% 100%;
+  background-position: 0 0;
+}
+.right_down {
+  width: 401px;
+  height: 673px;
+  background: url(../../../public/png/rect/lp_right_down.png) no-repeat;
+  background-size: 100% 100%;
+  background-position: 0 0;
+  margin-top: 14px;
+  position: relative;
+}
+.left_up_switch {
+  position: absolute;
+  right: 10px;
+  top: 12px;
+}
+.left_up_chart {
+  height: 275px;
+  margin-top: 10px;
+}
+/* 左侧 */
+.left_down_title {
+  height: 18px;
+  justify-content: center;
+}
+.left_down_box1 {
+  width: 56px;
+  height: 13px;
+  background: url(/public/png/leftbar.png) 100% no-repeat;
+  background-size: 100% 100%;
+  margin-top: 2px;
+}
+.left_down_box2 {
+  width: 56px;
+  height: 13px;
+  background: url(/public/png/rightbar.png) 100% no-repeat;
+  background-size: 100% 100%;
+  margin: 2px 0 0 0px;
+}
+.left_down_text {
+  /*width: 40px;*/
+  height: 18px;
+  overflow-wrap: break-word;
+  color: rgba(1, 207, 204, 1);
+  font-size: 18px;
+  letter-spacing: 5px;
+  font-family: PingFangSC-Regular;
+  white-space: nowrap;
+  line-height: 18px;
+  margin-left: 18px;
+  margin-right: 16px;
+  text-align: center;
+}
+.left_down_content {
+  height: 160px;
+  /* padding-bottom: 5px; */
+}
+.right_down_content {
+  height: 185px;
+  /* padding-bottom: 5px; */
+}

src/page/LinePage/index.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import TopP from "./TopP";
+import Left from "./Left";
+import Right from "./Right";
+import Center from "./Center";
+function LinePage() {
+  return (
+    <React.Fragment>
+      <TopP />
+      <div className="block_bottom flex-row">
+        <Left />
+        <Center />
+        <Right />
+      </div>
+    </React.Fragment>
+  );
+}
+export default LinePage;

src/page/MainE/CenterUpE.tsx

@@ -1,12 +1,15 @@
 import React from "react";
 import LineBabylon from "../../babylonjs/LineBabylon";
+import MybabylonJS_1 from "../../babylonjs/MybabylonJS_1";
 import {Observable} from "@babylonjs/core";
+// import LineID from "../../store/ChangeLineID";
 
 function CenterUpE() {
   return (
     <div className="block_16_E flex-col fineWin">
       <div className="fineWin-footer"/>
-      <LineBabylon/>
+      <LineBabylon />
+      {/* <MybabylonJS_1 modelPath={`line${LineID}`} /> */}
     </div>
   )
 }

src/page/MainE/MainE.tsx

@@ -15,6 +15,7 @@ import {MyObservable} from "../../context/MyObservable";
 import {ThisLineID} from "../../context/ThisLineID";
 
 
+
 function MainE() {
   const contextLineID = useContext(ThisLineID);
   const {LineID} = useParams()
@@ -26,7 +27,6 @@ function MainE() {
   }
   const dispatch = useAppDispatch();
   dispatch(UpdateChangeLineID(NowThisLineID));
-
   return (
     <ThisLineID.Provider value={NowThisLineID}>
       <TopE/>

src/page/TestPage/CenterUp.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from "react"; // 使用useState钩子来管理状态
+import intl from "react-intl-universal";
+import '../../lanhuapp/common.css';
+import "../../lanhuapp/index.css";
+import "../style/standard.css"
+import MybabylonJS_1 from "../../babylonjs/MybabylonJS_1";
+import MybabylonJS_2 from "../../babylonjs/MybabylonJS_2";
+import { number } from "echarts";
+import { firePixelShader } from "@babylonjs/materials/fire/fire.fragment";
+
+function CenterUp() {
+
+// 使用 useState 钩子来管理当前的序号状态
+const [modelIndex, setModelIndex] = useState(1); // 默认序号为 1
+
+// 定义切换模型序号的函数
+const prevModelIndex = () => {
+  // 当前序号减 1，如果小于 1，则变为 5
+  setModelIndex((currentModelIndex) => (currentModelIndex - 1 + 5) % 5);
+};
+
+const nextModelIndex = () => {
+  // 当前序号加 1，如果大于 5，则变为 1
+  setModelIndex((currentModelIndex) => (currentModelIndex + 1) % 5);
+};
+
+
+    
+  return (
+    <div className="block_16 flex-col fineWin">
+      <div className="fineWin-footer"/>
+      <MybabylonJS_1 modelPath={`line${modelIndex+1}`} />
+      {/* 添加按钮来切换组件 */}
+      <button className="centerButton_1" onClick={prevModelIndex}>上一个组件</button>
+      <button className="centerButton_2" onClick={nextModelIndex}>下一个组件</button>
+      <h5 className="centerButton_2" >{modelIndex}</h5>
+    </div>
+  );
+}
+
+export default CenterUp;

src/page/TestPage/index.css

@@ -0,0 +1,4 @@
+.main-box {
+  font-size: 50px;
+  color: #fff;
+}

src/page/TestPage/index.tsx

@@ -0,0 +1,38 @@
+import "./index.css"
+import MainE from "../MainE/MainE";
+import {useParams,useNavigate} from "react-router-dom";
+import {useEffect} from 'react';
+function TestPage() {
+  const {LineID} = useParams()
+  const navigate = useNavigate();
+  console.log("TestPage被加载了")
+useEffect(() => {
+  const handleKeyDown = (event:any) => {
+    if (event.key === 'ArrowUp') {
+      console.log('TestPage向上键被按下');
+      // 执行向上键的逻辑
+    } else if (event.key === 'ArrowDown') {
+      console.log('TestPage向下键被按下');
+      // 执行向下键的逻辑
+      navigate('/LD',{ state: { LineID: LineID} });
+      
+    }
+  };
+
+  window.addEventListener('keydown', handleKeyDown);
+
+  return () => {
+    window.removeEventListener('keydown', handleKeyDown);
+  };
+}, []); 
+
+  return (
+    <>
+      <div className="main-box">TestPage Line{LineID}</div>
+      <div className="main-box" style={{display:'none'}}>3434</div>
+      <MainE/>
+    </>
+  );
+}
+
+export default TestPage;