mt-fe-group/xuchang-new
8
0
Fork 0
程式碼 問題 合併請求 版本發布 Wiki 動態

update

瀏覽代碼
This commit is contained in:
lb 2024-04-23 09:33:41 +08:00
父節點 2996c061dc
當前提交 15708c0eef
共有 5 個檔案被更改，包括 31 行新增 和 13 行删除
顯示統計資料 下載 Patch 檔 下載差異檔 展開所有檔案 折疊所有檔案

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

23
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;

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

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

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