update WarnAlert

src/components/Common/WarnAlert/ListContainer.jsx

@@ -0,0 +1,20 @@
+import WarnAlert from ".";
+import { useSelector } from "react-redux";
+
+function AlarmListContainer(props) {
+  const alarmList = useSelector((state) => state.alarm.list);
+  const posMap = {
+    A1_1_1: { x: 800, y: 200 },
+  };
+  return alarmList.map((alarm) => (
+    <WarnAlert
+      key={alarm.id}
+      title={alarm.title}
+      content={alarm.content}
+      x={posMap[alarm.title].x}
+      y={posMap[alarm.title].y}
+    />
+  ));
+}
+
+export default AlarmListContainer;

src/components/Common/WarnAlert/index.jsx

@@ -3,16 +3,14 @@ import "./warn-alert.css";
 import AlertIcon from "./warn-icon.png";
 
 function WarnAlert(props) {
+  const { x, y, title, content } = props;
   return (
-    <div className="warn-alert">
+    <div className="warn-alert" style={{ top: `${y}px`, left: `${x}px` }}>
       <h1 className="">
         <img src={AlertIcon} width={24} alt="icon" />
-        {props.title || "test"}
+        {title || "test"}
       </h1>
-      <p>
-        {props.content ||
-          "Lorem ipsum dolor sit amet consectetur."}
-      </p>
+      <p>{content || "Lorem ipsum dolor sit amet consectetur."}</p>
     </div>
   );
 }

src/pages/Home/index.jsx

@@ -36,8 +36,16 @@ export default function Home({ active }) {
 
   return (
     <div className="Main">
+      <WarnAlert x={800} y={200} />
       {active == "窑炉总览" && (
-        <div style={{ position: "fixed", top: "210px", left: "50%", transform: 'translateX(-40%)' }}>
+        <div
+          style={{
+            position: "fixed",
+            top: "210px",
+            left: "50%",
+            transform: "translateX(-40%)",
+          }}
+        >
           <TimeFireDir />
         </div>
       )}

src/store/features/alarmSlice.js

@@ -9,6 +9,7 @@ const alarmSlice = createSlice({
   initialState,
   reducers: {
     setList(state, action) {
+      // action.payload 是 { 'A1_1_1': 'detail' } 的结构
       console.log("[alarm store] setting list ---> ", action);
       state.list = action.payload;
     },