Compare commits

...

3 Commits

Author SHA1 Message Date
lb
361aedd4ad done alarm 2024-04-23 15:26:55 +08:00
lb
60c6fdda79 1 2024-04-23 11:24:31 +08:00
lb
15708c0eef update 2024-04-23 09:33:41 +08:00
8 changed files with 255 additions and 17 deletions

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.

View File

@ -35,10 +35,10 @@ const EnergyCostRealtime = () => {
paddingRight: "6px", paddingRight: "6px",
}} }}
> >
余热发电(实时) 余热发电(昨日)
</i> </i>
<span style={{ fontSize: "17px", color: "#3ce8ff" }}> <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
{(+energyInfo?.elecQty2)?.toFixed(2) || 0}kWh {(+energyInfo?.elecQty1)?.toFixed(2) || 0}kWh
</span> </span>
</div> </div>
@ -66,7 +66,7 @@ const EnergyCostRealtime = () => {
paddingRight: "6px", paddingRight: "6px",
}} }}
> >
水耗量 水耗量(昨日)
</i> </i>
<span style={{ fontSize: "17px", color: "#3ce8ff" }}> <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
{(+energyInfo?.waterQty)?.toFixed(2) || 0}Km³ {(+energyInfo?.waterQty)?.toFixed(2) || 0}Km³
@ -80,7 +80,7 @@ const EnergyCostRealtime = () => {
paddingRight: "6px", paddingRight: "6px",
}} }}
> >
天然气I 天然气I(累计)
</i> </i>
<span style={{ fontSize: "17px", color: "#3ce8ff" }}> <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
{energyInfo?.ngQty1 || "0Nm³"} {energyInfo?.ngQty1 || "0Nm³"}
@ -94,7 +94,7 @@ const EnergyCostRealtime = () => {
paddingRight: "6px", paddingRight: "6px",
}} }}
> >
电耗量 电耗量(昨日)
</i> </i>
<span style={{ fontSize: "17px", color: "#3ce8ff" }}> <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
{(+energyInfo?.elecQty2)?.toFixed(2) || 0}kWh {(+energyInfo?.elecQty2)?.toFixed(2) || 0}kWh
@ -108,7 +108,7 @@ const EnergyCostRealtime = () => {
paddingRight: "6px", paddingRight: "6px",
}} }}
> >
天然气II 天然气II(累计)
</i> </i>
<span style={{ fontSize: "17px", color: "#3ce8ff" }}> <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
{energyInfo?.ngQty2 || "0Nm³"} {energyInfo?.ngQty2 || "0Nm³"}

View File

@ -1,18 +1,128 @@
import WarnAlert from "."; import WarnAlert from ".";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
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) { function AlarmListContainer(props) {
const alarmList = useSelector((state) => state.alarm.list); const alarmList = useSelector((state) => state.alarm.list);
const posMap = { // const alarmList = total
A1_1_1: { x: 800, y: 200 }, // .split("\n")
}; // .filter((str) => str.trim())
// .map((item) => ({
// id: item.split(",")[0],
// title: item.split(",")[0],
// content: item.split(",")[1],
// }));
return alarmList.map((alarm) => ( return alarmList.map((alarm) => (
<WarnAlert <WarnAlert
key={alarm.id} key={alarm.id}
title={alarm.title} title={alarm.title}
content={alarm.content} content={alarm.content}
x={posMap[alarm.title].x} x={posMap[alarm.title]?.x || 0}
y={posMap[alarm.title].y} y={posMap[alarm.title]?.y || 0}
/> />
)); ));
} }

View File

@ -0,0 +1,104 @@
{
"AN_1_1": { "x": 650, "y": 645 },
"AN_1_2": { "x": 1450, "y": 540 },
"AN_1_3": { "x": 640, "y": 285 },
"AN_1_4": { "x": 720, "y": 645 },
"AN_2_1": { "x": 1250, "y": 540 },
"AN_2_2": { "x": 1200, "y": 540 },
"AN_2_3": { "x": 1460, "y": 410 },
"AN_2_4": { "x": 650, "y": 420 },
"AN_3_1": { "x": 1360, "y": 380 },
"AN_3_2": { "x": 1360, "y": 380 },
"AN_3_3": { "x": 1360, "y": 420 },
"AN_3_4": { "x": 1360, "y": 420 },
"AN_4_1": { "x": 1350, "y": 460 },
"AN_4_2": { "x": 1350, "y": 460 },
"AN_4_3": { "x": 1270, "y": 320 },
"AN_4_4": { "x": 900, "y": 420 },
"AN_5_1": { "x": 650, "y": 645 },
"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": 650, "y": 440 },
"AN_6_4": { "x": 1400, "y": 650 },
"AN_7_1": { "x": 1450, "y": 540 },
"AN_7_2": { "x": 1450, "y": 540 },
"AN_7_3": { "x": 1470, "y": 540 },
"AN_7_4": { "x": 1470, "y": 540 },
"AN_8_1": { "x": 1470, "y": 540 },
"AN_8_2": { "x": 1470, "y": 540 },
"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": 1400, "y": 650 },
"AN_11_1": { "x": 1450, "y": 480 },
"AN_11_2": { "x": 1450, "y": 480 },
"AN_11_3": { "x": 1450, "y": 480 },
"AN_11_4": { "x": 1450, "y": 480 },
"AN_12_1": { "x": 1450, "y": 480 },
"AN_12_2": { "x": 1450, "y": 480 },
"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": 1450, "y": 480 },
"AN_14_4": { "x": 1400, "y": 650 },
"AN_15_1": { "x": 1450, "y": 430 },
"AN_15_2": { "x": 1450, "y": 430 },
"AN_15_3": { "x": 1470, "y": 430 },
"AN_15_4": { "x": 1470, "y": 430 },
"AN_16_1": { "x": 1470, "y": 430 },
"AN_16_2": { "x": 1470, "y": 430 },
"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": 1450, "y": 430 },
"AN_18_4": { "x": 1400, "y": 650 },
"AN_19_1": { "x": 1450, "y": 370 },
"AN_19_2": { "x": 1450, "y": 370 },
"AN_19_3": { "x": 1460, "y": 370 },
"AN_19_4": { "x": 1460, "y": 370 },
"AN_20_1": { "x": 1460, "y": 370 },
"AN_20_2": { "x": 1460, "y": 370 },
"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": 1460, "y": 370 },
"AN_23_1": { "x": 1460, "y": 320 },
"AN_23_2": { "x": 1460, "y": 320 },
"AN_23_3": { "x": 1465, "y": 320 },
"AN_23_4": { "x": 1465, "y": 320 },
"AN_24_1": { "x": 1465, "y": 320 },
"AN_24_2": { "x": 1465, "y": 320 },
"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": 1460, "y": 320 }
}

View File

@ -9,7 +9,14 @@
background: url(./3.png) 0 0 / 116px 100% repeat-x; background: url(./3.png) 0 0 / 116px 100% repeat-x;
box-shadow: 0 0 24px 6px rgba(0, 0, 0, 0.5); box-shadow: 0 0 24px 6px rgba(0, 0, 0, 0.5);
user-select: none; 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 { .warn-alert::before {

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,6 @@ export default function Home({ active }) {
return ( return (
<div className="Main"> <div className="Main">
<WarnAlert x={800} y={200} />
{active == "窑炉总览" && ( {active == "窑炉总览" && (
<div <div
style={{ style={{
@ -50,7 +49,9 @@ export default function Home({ active }) {
</div> </div>
)} )}
{active != "窑炉总览" && <div className="bgDitu"></div>} {active != "窑炉总览" && <div className="bgDitu"></div>}
{active == "窑炉总览" && <div className="bgOverview"></div>} {active == "窑炉总览" && (
<div className="bgOverview" id="bgOverview"></div>
)}
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
<div <div
className="left-side" className="left-side"
@ -70,6 +71,9 @@ export default function Home({ active }) {
<div className="Center"> <div className="Center">
{active == "窑炉总览" && ( {active == "窑炉总览" && (
<> <>
<div id="alarm-list-container">
<WarnAlertList />
</div>
<AnimatePresence> <AnimatePresence>
<motion.div <motion.div
key="center-top" key="center-top"

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

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