From 60c6fdda79dc2e01807c46326933ba4ad35de6a3 Mon Sep 17 00:00:00 2001
From: lb <lb@znjszx.com>
Date: Tue, 23 Apr 2024 11:24:31 +0800
Subject: [PATCH] 1

---
 public/index.html                             |   2 +-
 .../Energy/EnergeCostRealtime/index.jsx       |  12 +-
 .../Common/WarnAlert/ListContainer.jsx        | 141 +++++++++++++++---
 src/components/Common/WarnAlert/position.json | 104 +++++++++++++
 .../Common/WarnAlert/warn-alert.css           |   9 +-
 src/pages/Home/index.jsx                      |   8 +-
 6 files changed, 248 insertions(+), 28 deletions(-)
 create mode 100644 src/components/Common/WarnAlert/position.json
diff --git a/public/index.html b/public/index.html
index b2bf050..823930c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -29,7 +29,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <div id="alarm-list-container"></div>
+    <!-- <div id="alarm-list-container"></div> -->
 
     <!--
       This HTML file is a template.
diff --git a/src/components/Common/Energy/EnergeCostRealtime/index.jsx b/src/components/Common/Energy/EnergeCostRealtime/index.jsx
index e7344ad..64ea958 100644
--- a/src/components/Common/Energy/EnergeCostRealtime/index.jsx
+++ b/src/components/Common/Energy/EnergeCostRealtime/index.jsx
@@ -35,10 +35,10 @@ const EnergyCostRealtime = () => {
                   paddingRight: "6px",
                 }}
               >
-                余热发电(实时)
+                余热发电(昨日)
               </i>
               <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
-                {(+energyInfo?.elecQty2)?.toFixed(2) || 0}kWh
+                {(+energyInfo?.elecQty1)?.toFixed(2) || 0}kWh
               </span>
             </div>
 
@@ -66,7 +66,7 @@ const EnergyCostRealtime = () => {
                   paddingRight: "6px",
                 }}
               >
-                水耗量
+                水耗量(昨日)
               </i>
               <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
                 {(+energyInfo?.waterQty)?.toFixed(2) || 0}Km³
@@ -80,7 +80,7 @@ const EnergyCostRealtime = () => {
                   paddingRight: "6px",
                 }}
               >
-                天然气I
+                天然气I(累计)
               </i>
               <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
                 {energyInfo?.ngQty1 || "0Nm³"}
@@ -94,7 +94,7 @@ const EnergyCostRealtime = () => {
                   paddingRight: "6px",
                 }}
               >
-                电耗量
+                电耗量(昨日)
               </i>
               <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
                 {(+energyInfo?.elecQty2)?.toFixed(2) || 0}kWh
@@ -108,7 +108,7 @@ const EnergyCostRealtime = () => {
                   paddingRight: "6px",
                 }}
               >
-                天然气II
+                天然气II(累计)
               </i>
               <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
                 {energyInfo?.ngQty2 || "0Nm³"}
diff --git a/src/components/Common/WarnAlert/ListContainer.jsx b/src/components/Common/WarnAlert/ListContainer.jsx
index 92990d4..66032e0 100644
--- a/src/components/Common/WarnAlert/ListContainer.jsx
+++ b/src/components/Common/WarnAlert/ListContainer.jsx
@@ -1,25 +1,130 @@
 import WarnAlert from ".";
 import { useSelector } from "react-redux";
-import { createPortal } from "react-dom";
+import posMap from "./position.json";
+
+const total = `AN_1_1,助燃风故障报警
+AN_1_2,压延机冷却风故障报警
+AN_1_3,L吊墙冷却风机故障报警
+AN_1_4,熔化带及部分澄清部冷却风机故障报警
+AN_2_1,澄清带池壁冷却风机故障报警
+AN_2_2,钢碴碴冷却风机故障报警
+AN_2_3,支通路拐角冷却风机报警
+AN_2_4,吊墙吊钩砖结构温升报警
+AN_3_1,深层水包冷却水温升报警
+AN_3_2,深层水包冷却水断水报警
+AN_3_3,卡脖吊平冷却水断水报警
+AN_3_4,卡脖吊平喧冷却水温升报警
+AN_4_1,液面计冷却水断水报警
+AN_4_2,液面计冷却水温升报警
+AN_4_3,循环水入口压力低报警
+AN_4_4,天然气压力高低报警
+AN_5_1,助燃风风压低报警
+AN_5_2,净化压缩气压力低报警
+AN_5_3,普通压缩空气压力高低报警
+AN_5_4,焦炉煤气气压力高低报警
+AN_6_1,换向过程故障报警
+AN_6_2,空交机换向不到位报警
+AN_6_3,投料机故障报警
+AN_6_4,备用
+AN_7_1,1#压延机冷却水断水报警
+AN_7_2,1#压延机冷却水温升报警
+AN_7_3,1#过渡辊台冷却水断水报警
+AN_7_4,1过渡辊台冷却水温升报警
+AN_8_1,1#线唇砖冷却水断水报警
+AN_8_2,1#线唇砖冷却水温升报警
+AN_8_3,1#退火窑A区风机报警
+AN_8_4,1#退火窑B区风机报警
+AN_9_1,1#退火窑c区风机报警
+AN_9_2,1#退火窑Ret1区风机报警
+AN_9_3,1#退火窑Ret2区风机报警
+AN_9_4,1#退火窑F1区风机报警
+AN_10_1,1#退火窑F2区风机报警
+AN_10_2,1#主传动报警
+AN_10_3,1#压延机报警
+AN_10_4,备用
+AN_11_1,2#压延机冷却水断水报警
+AN_11_2,2#压延机冷却水温升报警
+AN_11_3,2#过渡辊台冷却水断水报警
+AN_11_4,2#过渡辊台冷却水温升报警
+AN_12_1,2#线唇砖冷却水断水报警
+AN_12_2,2#线唇砖冷却水温升报警
+AN_12_3,2#退火窑A区风机报警
+AN_12_4,2#退火窑B区风机报警
+AN_13_1,2#退火窑c区风机报警
+AN_13_2,2#退火窑Ret1区风机报警
+AN_13_3,2#退火窑Ret2区风机报警
+AN_13_4,2#退火窑F1区风机报警
+AN_14_1,2#退火窑F2区风机报警
+AN_14_2,2#主传动报警
+AN_14_3,2#压延机报警
+AN_14_4,备用
+AN_15_1,3#压延机冷却水断水报警
+AN_15_2,3压延机冷却水温升报警
+AN_15_3,3#过渡辊台冷却水断水报警
+AN_15_4,3#过渡辊台冷却水温升报警
+AN_16_1,3#线唇砖冷却水断水报警
+AN_16_2,3#线唇砖冷却水温升报警
+AN_16_3,3#退火窑A区风机报警
+AN_16_4,3#退火窑B区风机报警
+AN_17_1,3#退火窑c区风机报警
+AN_17_2,3#退火窑Ret1区风机报警
+AN_17_3,3#退火窑Ret2区风机报警
+AN_17_4,3#退火窑F1区风机报警
+AN_18_1,3#退火窑F2区风机报警
+AN_18_2,3#主传动报警
+AN_18_3,3#压延机报警
+AN_18_4,备用
+AN_19_1,4#压延机冷却水断水报警
+AN_19_2,4压延机冷却水温升报警
+AN_19_3,4#过渡辊台冷却水断水报警
+AN_19_4,4#过渡辊台冷却水温升报警
+AN_20_1,4#线唇砖冷却水断水报警
+AN_20_2,4#线唇砖冷却水温升报警
+AN_20_3,4#退火窑A区风机报警
+AN_20_4,4#退火窑B区风机报警
+AN_21_1,4#退火窑c区风机报警
+AN_21_2,4#退火窑Ret1区风机报警
+AN_21_3,4#退火窑Ret2区风机报警
+AN_21_4,4#退火窑F1区风机报警
+AN_22_1,4#退火窑F2区风机报警
+AN_22_2,4#主传动报警
+AN_22_3,4#压延机报警
+AN_23_1,5#压延机冷却水断水报警
+AN_23_2,5#压延机冷却水温升报警
+AN_23_3,5#过渡辊台冷却水断水报警
+AN_23_4,5#过渡台冷却水温升报警
+AN_24_1,5#线唇砖冷却水断水报警
+AN_24_2,5#线唇砖冷却水温升报警
+AN_24_3,5#退火窑A区风机报警
+AN_24_4,5#退火窑B区风机报警
+AN_25_1,5#退火窑c区风机报警
+AN_25_2,5#退火窑Ret1区风机报警
+AN_25_3,5#退火窑Ret2区风机报警
+AN_25_4,5#退火窑F1区风机报警
+AN_26_1,5#退火窑F2区风机报警
+AN_26_2,5#主传动报警
+AN_26_3,5#压延机报警
+`;
 
 function AlarmListContainer(props) {
-  const alarmList = useSelector((state) => state.alarm.list);
-  const posMap = {
-    A1_1_1: { x: 800, y: 200 },
-  };
-
-  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")
-  );
+  // const alarmList = useSelector((state) => state.alarm.list);
+  const alarmList = total
+    .split("\n")
+    .filter((str) => str.trim())
+    .map((item) => ({
+      id: item.split(",")[0],
+      title: item.split(",")[0],
+      content: item.split(",")[1],
+    }));
+  return alarmList.map((alarm) => (
+    <WarnAlert
+      key={alarm.id}
+      title={alarm.title}
+      content={alarm.content}
+      x={posMap[alarm.title]?.x || 0}
+      y={posMap[alarm.title]?.y || 0}
+    />
+  ));
 }
 
 export default AlarmListContainer;
diff --git a/src/components/Common/WarnAlert/position.json b/src/components/Common/WarnAlert/position.json
new file mode 100644
index 0000000..0cce324
--- /dev/null
+++ b/src/components/Common/WarnAlert/position.json
@@ -0,0 +1,104 @@
+{
+  "AN_1_1": { "x": 0, "y": 0 },
+  "AN_1_2": { "x": 0, "y": 0 },
+  "AN_1_3": { "x": 0, "y": 0 },
+  "AN_1_4": { "x": 0, "y": 0 },
+  "AN_2_1": { "x": 1250, "y": 540 },
+  "AN_2_2": { "x": 1200, "y": 540 },
+  "AN_2_3": { "x": 0, "y": 0 },
+  "AN_2_4": { "x": 0, "y": 0 },
+  "AN_3_1": { "x": 0, "y": 0 },
+  "AN_3_2": { "x": 0, "y": 0 },
+  "AN_3_3": { "x": 0, "y": 0 },
+  "AN_3_4": { "x": 0, "y": 0 },
+  "AN_4_1": { "x": 0, "y": 0 },
+  "AN_4_2": { "x": 0, "y": 0 },
+  "AN_4_3": { "x": 0, "y": 0 },
+  "AN_4_4": { "x": 900, "y": 420 },
+  "AN_5_1": { "x": 0, "y": 0 },
+  "AN_5_2": { "x": 980, "y": 420 },
+  "AN_5_3": { "x": 1050, "y": 420 },
+  "AN_5_4": { "x": 1130, "y": 420 },
+  "AN_6_1": { "x": 1220, "y": 420 },
+  "AN_6_2": { "x": 1290, "y": 420 },
+  "AN_6_3": { "x": 0, "y": 0 },
+  "AN_6_4": { "x": 0, "y": 0 },
+  "AN_7_1": { "x": 1450, "y": 540 },
+  "AN_7_2": { "x": 1450, "y": 540 },
+  "AN_7_3": { "x": 0, "y": 0 },
+  "AN_7_4": { "x": 0, "y": 0 },
+  "AN_8_1": { "x": 0, "y": 0 },
+  "AN_8_2": { "x": 0, "y": 0 },
+  "AN_8_3": { "x": 1480, "y": 540 },
+  "AN_8_4": { "x": 1580, "y": 540 },
+  "AN_9_1": { "x": 1700, "y": 540 },
+  "AN_9_2": { "x": 1760, "y": 540 },
+  "AN_9_3": { "x": 1780, "y": 540 },
+  "AN_9_4": { "x": 1780, "y": 540 },
+  "AN_10_1": { "x": 1780, "y": 540 },
+  "AN_10_2": { "x": 1390, "y": 540 },
+  "AN_10_3": { "x": 1450, "y": 540 },
+  "AN_10_4": { "x": 0, "y": 0 },
+  "AN_11_1": { "x": 0, "y": 0 },
+  "AN_11_2": { "x": 0, "y": 0 },
+  "AN_11_3": { "x": 0, "y": 0 },
+  "AN_11_4": { "x": 0, "y": 0 },
+  "AN_12_1": { "x": 0, "y": 0 },
+  "AN_12_2": { "x": 0, "y": 0 },
+  "AN_12_3": { "x": 1550, "y": 480 },
+  "AN_12_4": { "x": 1650, "y": 480 },
+  "AN_13_1": { "x": 1750, "y": 480 },
+  "AN_13_2": { "x": 1850, "y": 480 },
+  "AN_13_3": { "x": 1900, "y": 480 },
+  "AN_13_4": { "x": 1910, "y": 480 },
+  "AN_14_1": { "x": 1920, "y": 480 },
+  "AN_14_2": { "x": 1450, "y": 480 },
+  "AN_14_3": { "x": 0, "y": 0 },
+  "AN_14_4": { "x": 0, "y": 0 },
+  "AN_15_1": { "x": 0, "y": 0 },
+  "AN_15_2": { "x": 0, "y": 0 },
+  "AN_15_3": { "x": 0, "y": 0 },
+  "AN_15_4": { "x": 0, "y": 0 },
+  "AN_16_1": { "x": 0, "y": 0 },
+  "AN_16_2": { "x": 0, "y": 0 },
+  "AN_16_3": { "x": 1600, "y": 430 },
+  "AN_16_4": { "x": 1700, "y": 430 },
+  "AN_17_1": { "x": 1800, "y": 430 },
+  "AN_17_2": { "x": 1900, "y": 430 },
+  "AN_17_3": { "x": 1950, "y": 430 },
+  "AN_17_4": { "x": 1960, "y": 430 },
+  "AN_18_1": { "x": 1970, "y": 430 },
+  "AN_18_2": { "x": 1450, "y": 430 },
+  "AN_18_3": { "x": 0, "y": 0 },
+  "AN_18_4": { "x": 0, "y": 0 },
+  "AN_19_1": { "x": 0, "y": 0 },
+  "AN_19_2": { "x": 0, "y": 0 },
+  "AN_19_3": { "x": 0, "y": 0 },
+  "AN_19_4": { "x": 0, "y": 0 },
+  "AN_20_1": { "x": 0, "y": 0 },
+  "AN_20_2": { "x": 0, "y": 0 },
+  "AN_20_3": { "x": 1500, "y": 370 },
+  "AN_20_4": { "x": 1600, "y": 370 },
+  "AN_21_1": { "x": 1700, "y": 370 },
+  "AN_21_2": { "x": 1800, "y": 370 },
+  "AN_21_3": { "x": 1850, "y": 370 },
+  "AN_21_4": { "x": 1860, "y": 370 },
+  "AN_22_1": { "x": 1870, "y": 370 },
+  "AN_22_2": { "x": 1450, "y": 370 },
+  "AN_22_3": { "x": 0, "y": 0 },
+  "AN_23_1": { "x": 0, "y": 0 },
+  "AN_23_2": { "x": 0, "y": 0 },
+  "AN_23_3": { "x": 0, "y": 0 },
+  "AN_23_4": { "x": 0, "y": 0 },
+  "AN_24_1": { "x": 0, "y": 0 },
+  "AN_24_2": { "x": 0, "y": 0 },
+  "AN_24_3": { "x": 1480, "y": 320 },
+  "AN_24_4": { "x": 1580, "y": 320 },
+  "AN_25_1": { "x": 1680, "y": 320 },
+  "AN_25_2": { "x": 1780, "y": 320 },
+  "AN_25_3": { "x": 1750, "y": 320 },
+  "AN_25_4": { "x": 1760, "y": 320 },
+  "AN_26_1": { "x": 1770, "y": 320 },
+  "AN_26_2": { "x": 1430, "y": 320 },
+  "AN_26_3": { "x": 0, "y": 0 }
+}
diff --git a/src/components/Common/WarnAlert/warn-alert.css b/src/components/Common/WarnAlert/warn-alert.css
index 28a5ed0..f411f85 100644
--- a/src/components/Common/WarnAlert/warn-alert.css
+++ b/src/components/Common/WarnAlert/warn-alert.css
@@ -9,7 +9,14 @@
   background: url(./3.png) 0 0 / 116px 100% repeat-x;
   box-shadow: 0 0 24px 6px rgba(0, 0, 0, 0.5);
   user-select: none;
-  transform: scale(.64);
+  transform: scale(0.64);
+  cursor: pointer;
+}
+
+.warn-alert:hover {
+  transform: scale(1.1);
+  box-shadow: 0 0 32px 12px rgba(0, 0, 0, 0.5);
+  z-index: 10001;
 }
 
 .warn-alert::before {
diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx
index 13dcb00..b95cfa0 100644
--- a/src/pages/Home/index.jsx
+++ b/src/pages/Home/index.jsx
@@ -36,7 +36,6 @@ export default function Home({ active }) {
 
   return (
     <div className="Main">
-      {active == "窑炉总览" && <WarnAlertList />}
       {active == "窑炉总览" && (
         <div
           style={{
@@ -50,7 +49,9 @@ export default function Home({ active }) {
         </div>
       )}
       {active != "窑炉总览" && <div className="bgDitu"></div>}
-      {active == "窑炉总览" && <div className="bgOverview"></div>}
+      {active == "窑炉总览" && (
+        <div className="bgOverview" id="bgOverview"></div>
+      )}
       <AnimatePresence mode="wait">
         <div
           className="left-side"
@@ -70,6 +71,9 @@ export default function Home({ active }) {
       <div className="Center">
         {active == "窑炉总览" && (
           <>
+            <div id="alarm-list-container">
+              <WarnAlertList />
+            </div>
             <AnimatePresence>
               <motion.div
                 key="center-top"
