lb
il y a 5 mois
5 fichiers modifiés avec 31 ajouts et 13 suppressions
-
+2 -0public/index.html
-
+14 -9src/components/Common/WarnAlert/ListContainer.jsx
-
+2 -2src/pages/Home/index.jsx
-
+11 -1src/store/features/alarmSlice.js
-
+2 -1src/utils/index.js
+ 2
- 0
public/index.html
Voir le fichier
| @@ -29,6 +29,8 @@ | |||||
| <body> | <body> | ||||
| <noscript>You need to enable JavaScript to run this app.</noscript> | <noscript>You need to enable JavaScript to run this app.</noscript> | ||||
| <div id="root"></div> | <div id="root"></div> | ||||
| <div id="alarm-list-container"></div> | |||||
| <!-- | <!-- | ||||
| This HTML file is a template. | This HTML file is a template. | ||||
| If you open it directly in the browser, you will see an empty page. | If you open it directly in the browser, you will see an empty page. | ||||
+ 14
- 9
src/components/Common/WarnAlert/ListContainer.jsx
Voir le fichier
| @@ -1,20 +1,25 @@ | |||||
| import WarnAlert from "."; | import WarnAlert from "."; | ||||
| import { useSelector } from "react-redux"; | import { useSelector } from "react-redux"; | ||||
| import { createPortal } from "react-dom"; | |||||
| function AlarmListContainer(props) { | function AlarmListContainer(props) { | ||||
| const alarmList = useSelector((state) => state.alarm.list); | const alarmList = useSelector((state) => state.alarm.list); | ||||
| const posMap = { | const posMap = { | ||||
| A1_1_1: { x: 800, y: 200 }, | 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; | export default AlarmListContainer; | ||||
+ 2
- 2
src/pages/Home/index.jsx
Voir le fichier
| @@ -15,7 +15,7 @@ import { useEffect, useRef } from "react"; | |||||
| import useRefresh from "../../hooks/useRefresh"; | import useRefresh from "../../hooks/useRefresh"; | ||||
| import TimeFireDir from "../../components/Common/TimeFireDir"; | import TimeFireDir from "../../components/Common/TimeFireDir"; | ||||
| import WarnAlert from "../../components/Common/WarnAlert"; | |||||
| import WarnAlertList from "../../components/Common/WarnAlert/ListContainer"; | |||||
| export default function Home({ active }) { | export default function Home({ active }) { | ||||
| useRefresh(true); | useRefresh(true); | ||||
| @@ -36,7 +36,7 @@ export default function Home({ active }) { | |||||
| return ( | return ( | ||||
| <div className="Main"> | <div className="Main"> | ||||
| <WarnAlert x={800} y={200} /> | |||||
| {active == "窑炉总览" && <WarnAlertList />} | |||||
| {active == "窑炉总览" && ( | {active == "窑炉总览" && ( | ||||
| <div | <div | ||||
| style={{ | style={{ | ||||
+ 11
- 1
src/store/features/alarmSlice.js
Voir le fichier
| @@ -11,7 +11,17 @@ const alarmSlice = createSlice({ | |||||
| setList(state, action) { | setList(state, action) { | ||||
| // action.payload 是 { 'A1_1_1': 'detail' } 的结构 | // action.payload 是 { 'A1_1_1': 'detail' } 的结构 | ||||
| console.log("[alarm store] setting list ---> ", action); | 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; | |||||
| }, | }, | ||||
| }, | }, | ||||
| }); | }); | ||||
+ 2
- 1
src/utils/index.js
Voir le fichier
| @@ -106,7 +106,8 @@ class XClient { | |||||
| const newUser = uuidv4(); | const newUser = uuidv4(); | ||||
| new XClient( | 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", | name: "DCS_DATA", | ||||
| // "ws://m306416y13.yicp.fun:35441/xc-screen/websocket/xc001", | // "ws://m306416y13.yicp.fun:35441/xc-screen/websocket/xc001", | ||||
| // "ws://192.168.1.114:8081/xc-screen/websocket/xc001", | // "ws://192.168.1.114:8081/xc-screen/websocket/xc001", | ||||