From 9894aeca50e6a21d69a1ba83469b203b1619b449 Mon Sep 17 00:00:00 2001
From: lb <lb@znjszx.com>
Date: Fri, 19 Apr 2024 17:03:43 +0800
Subject: [PATCH] update WarnAlert

---
 .../Common/WarnAlert/ListContainer.jsx        | 20 +++++++++++++++++++
 src/components/Common/WarnAlert/index.jsx     | 10 ++++------
 src/pages/Home/index.jsx                      | 10 +++++++++-
 src/store/features/alarmSlice.js              |  1 +
 4 files changed, 34 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Common/WarnAlert/ListContainer.jsx

diff --git a/src/components/Common/WarnAlert/ListContainer.jsx b/src/components/Common/WarnAlert/ListContainer.jsx
new file mode 100644
index 0000000..f291ed9
--- /dev/null
+++ b/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;
diff --git a/src/components/Common/WarnAlert/index.jsx b/src/components/Common/WarnAlert/index.jsx
index feb4893..45ce117 100644
--- a/src/components/Common/WarnAlert/index.jsx
+++ b/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>
   );
 }
diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx
index d851267..819cf26 100644
--- a/src/pages/Home/index.jsx
+++ b/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>
       )}
diff --git a/src/store/features/alarmSlice.js b/src/store/features/alarmSlice.js
index 371aa35..492348b 100644
--- a/src/store/features/alarmSlice.js
+++ b/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;
     },