mt-fe-group/xuchang-new
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

Browse Source
This commit is contained in:
lb 2024-04-23 09:33:41 +08:00
parent 2996c061dc
commit 15708c0eef
5 changed files with 31 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -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.

23
src/components/Common/WarnAlert/ListContainer.jsx
View File

@ -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 return createPortal(
key={alarm.id} alarmList.map((alarm) => (
title={alarm.title} <WarnAlert
content={alarm.content} key={alarm.id}
x={posMap[alarm.title].x} title={alarm.title}
y={posMap[alarm.title].y} 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;

4
src/pages/Home/index.jsx
View File

@ -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={{

12
src/store/features/alarmSlice.js
View File

@ -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;
}, },
}, },
}); });

3
src/utils/index.js
View File

@ -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",