@@ -0,0 +1,20 @@ | |||||
import WarnAlert from "."; | |||||
import { useSelector } from "react-redux"; | |||||
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} | |||||
/> | |||||
)); | |||||
} | |||||
export default AlarmListContainer; |
@@ -3,16 +3,14 @@ import "./warn-alert.css"; | |||||
import AlertIcon from "./warn-icon.png"; | import AlertIcon from "./warn-icon.png"; | ||||
function WarnAlert(props) { | function WarnAlert(props) { | ||||
const { x, y, title, content } = props; | |||||
return ( | return ( | ||||
<div className="warn-alert"> | |||||
<div className="warn-alert" style={{ top: `${y}px`, left: `${x}px` }}> | |||||
<h1 className=""> | <h1 className=""> | ||||
<img src={AlertIcon} width={24} alt="icon" /> | <img src={AlertIcon} width={24} alt="icon" /> | ||||
{props.title || "test"} | |||||
{title || "test"} | |||||
</h1> | </h1> | ||||
<p> | |||||
{props.content || | |||||
"Lorem ipsum dolor sit amet consectetur."} | |||||
</p> | |||||
<p>{content || "Lorem ipsum dolor sit amet consectetur."}</p> | |||||
</div> | </div> | ||||
); | ); | ||||
} | } | ||||
@@ -36,8 +36,16 @@ export default function Home({ active }) { | |||||
return ( | return ( | ||||
<div className="Main"> | <div className="Main"> | ||||
<WarnAlert x={800} y={200} /> | |||||
{active == "窑炉总览" && ( | {active == "窑炉总览" && ( | ||||
<div style={{ position: "fixed", top: "210px", left: "50%", transform: 'translateX(-40%)' }}> | |||||
<div | |||||
style={{ | |||||
position: "fixed", | |||||
top: "210px", | |||||
left: "50%", | |||||
transform: "translateX(-40%)", | |||||
}} | |||||
> | |||||
<TimeFireDir /> | <TimeFireDir /> | ||||
</div> | </div> | ||||
)} | )} | ||||
@@ -9,6 +9,7 @@ const alarmSlice = createSlice({ | |||||
initialState, | initialState, | ||||
reducers: { | reducers: { | ||||
setList(state, action) { | setList(state, action) { | ||||
// action.payload 是 { 'A1_1_1': 'detail' } 的结构 | |||||
console.log("[alarm store] setting list ---> ", action); | console.log("[alarm store] setting list ---> ", action); | ||||
state.list = action.payload; | state.list = action.payload; | ||||
}, | }, | ||||