大屏样式

src/page/LinePage/Center/CenterDown.tsx

@@ -1,16 +1,60 @@
 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>

src/page/LinePage/Center/CenterUp.tsx

@@ -1,8 +1,11 @@
 import LinePageBabylon from "../../../babylonjs/LinePageBabylon";
+import { useParams } from "react-router-dom";
 function CenterUp() {
+  const { LineID } = useParams();
+  const lineID = LineID?.toString() || "1-1";
   return (
     <div className="center_up">
-      <LinePageBabylon modelPath={`Line1-2`} />
+      <LinePageBabylon modelPath={`Line${lineID}`} />
     </div>
   );
 }

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

@@ -70,31 +70,44 @@ export default function getOptions() {
         },
       },
     },
-    tooltip: {},
+    tooltip: {
+      trigger: "axis",
+      className: "luoyang-chart-tooltip",
+    },
     series: [
       {
         name: "产线1",
         type: "line",
+        symbol: "circle",
+        symbolSize: 4,
         data: [20, 32, 10, 34, 90, 30, 20],
       },
       {
         name: "产线2",
         type: "line",
+        symbol: "circle",
+        symbolSize: 4,
         data: [22, 82, 91, 34, 90, 33, 31],
       },
       {
         name: "产线3",
         type: "line",
+        symbol: "circle",
+        symbolSize: 4,
         data: [50, 32, 20, 54, 19, 33, 41],
       },
       {
         name: "产线4",
         type: "line",
+        symbol: "circle",
+        symbolSize: 4,
         data: [30, 32, 30, 34, 90, 33, 32],
       },
       {
         name: "产线5",
         type: "line",
+        symbol: "circle",
+        symbolSize: 4,
         data: [20, 92, 91, 94, 90, 30, 53],
       },
     ],