diff --git a/public/index.html b/public/index.html
index 1dbdca6..b2bf050 100644
--- a/public/index.html
+++ b/public/index.html
@@ -29,6 +29,8 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="alarm-list-container"></div>
+
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/src/components/Common/WarnAlert/ListContainer.jsx b/src/components/Common/WarnAlert/ListContainer.jsx
index f291ed9..92990d4 100644
--- a/src/components/Common/WarnAlert/ListContainer.jsx
+++ b/src/components/Common/WarnAlert/ListContainer.jsx
@@ -1,20 +1,25 @@
 import WarnAlert from ".";
 import { useSelector } from "react-redux";
+import { createPortal } from "react-dom";
 
 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}
-    />
-  ));
+
+  return createPortal(
+    alarmList.map((alarm) => (
+      <WarnAlert
+        key={alarm.id}
+        title={alarm.title}
+        content={alarm.content}
+        x={posMap[alarm.title]?.x || Math.floor(Math.random() * 500)}
+        y={posMap[alarm.title]?.y || Math.floor(Math.random() * 500)}
+      />
+    )),
+    document.getElementById("alarm-list-container")
+  );
 }
 
 export default AlarmListContainer;
diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx
index 819cf26..13dcb00 100644
--- a/src/pages/Home/index.jsx
+++ b/src/pages/Home/index.jsx
@@ -15,7 +15,7 @@ import { useEffect, useRef } from "react";
 import useRefresh from "../../hooks/useRefresh";
 import TimeFireDir from "../../components/Common/TimeFireDir";
 
-import WarnAlert from "../../components/Common/WarnAlert";
+import WarnAlertList from "../../components/Common/WarnAlert/ListContainer";
 
 export default function Home({ active }) {
   useRefresh(true);
@@ -36,7 +36,7 @@ export default function Home({ active }) {
 
   return (
     <div className="Main">
-      <WarnAlert x={800} y={200} />
+      {active == "窑炉总览" && <WarnAlertList />}
       {active == "窑炉总览" && (
         <div
           style={{
diff --git a/src/store/features/alarmSlice.js b/src/store/features/alarmSlice.js
index 492348b..353f9cb 100644
--- a/src/store/features/alarmSlice.js
+++ b/src/store/features/alarmSlice.js
@@ -11,7 +11,17 @@ const alarmSlice = createSlice({
     setList(state, action) {
       // action.payload 是 { 'A1_1_1': 'detail' } 的结构
       console.log("[alarm store] setting list ---> ", action);
-      state.list = action.payload;
+      const rawData = action.payload;
+      const list = [];
+      Object.entries(rawData).forEach(([key, value]) => {
+        const n = [key, value];
+        list.push({
+          id: key,
+          title: n[0],
+          content: n[1],
+        });
+      });
+      state.list = list;
     },
   },
 });
diff --git a/src/utils/index.js b/src/utils/index.js
index 428270f..54c5617 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -106,7 +106,8 @@ class XClient {
 const newUser = uuidv4();
 new XClient(
   {
-    url: "ws://10.70.180.10:8081/xc-screen/websocket/xc001" + newUser,
+    // url: "ws://10.70.180.10:8081/xc-screen/websocket/xc001" + newUser,
+    url: "ws://127.0.0.1:9800/alarm?user=" + newUser,
     name: "DCS_DATA",
     // "ws://m306416y13.yicp.fun:35441/xc-screen/websocket/xc001",
     // "ws://192.168.1.114:8081/xc-screen/websocket/xc001",
