update

vor 5 Monaten · 15708c0eef
--- 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.
--- 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;
--- 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={{
--- 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;
    },
  },
 });
--- 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",