@@ -0,0 +1,51 @@ | |||||
import { useSelector } from "react-redux"; | |||||
import { motion, AnimatePresence } from "framer-motion"; | |||||
function FeederStatus(props) { | |||||
const feeder = useSelector((state) => state.feeder); | |||||
const rightFeeder = feeder.rightFeeder; | |||||
const leftFeeder = feeder.leftFeeder; | |||||
return ( | |||||
<motion.div | |||||
className="feeder" | |||||
style={{ | |||||
position: "absolute", | |||||
bottom: "128px", | |||||
left: "800px", | |||||
width: "300px", | |||||
height: "80px", | |||||
zIndex: "-1", | |||||
display: "flex", | |||||
gap: "20px", | |||||
...props.style, | |||||
}} | |||||
animate={{ | |||||
opacity: [0, 0, 0, 0.6, 1], | |||||
transition: { duration: 0.3, delay: 2 }, | |||||
}} | |||||
> | |||||
<span | |||||
style={{ | |||||
color: "#fff", | |||||
border: "1px solid #fff", | |||||
padding: "12px", | |||||
background: leftFeeder == "运行" ? "#0f03" : "#f003", | |||||
}} | |||||
> | |||||
投料机1 : {leftFeeder} | |||||
</span> | |||||
<span | |||||
style={{ | |||||
color: "#fff", | |||||
border: "1px solid #fff", | |||||
padding: "12px", | |||||
background: rightFeeder == "运行" ? "#0f03" : "#f003", | |||||
}} | |||||
> | |||||
投料机2 : {rightFeeder} | |||||
</span> | |||||
</motion.div> | |||||
); | |||||
} | |||||
export default FeederStatus; |
@@ -1,8 +1,6 @@ | |||||
import { motion, AnimatePresence } from "framer-motion"; | import { motion, AnimatePresence } from "framer-motion"; | ||||
import { useRef, useEffect, useMemo, useCallback, useState } from "react"; | import { useRef, useEffect, useMemo, useCallback, useState } from "react"; | ||||
// import cls from "../index.module.css"; | |||||
// import SocketContext from '../../../../../store/socket-data-provider'; | |||||
// import TemperatureTop from "../../../../Common/TemperatureTop"; | |||||
import FeederStatus from "../../../../Common/Feeder"; | |||||
import TemperatureBottom from "../../../../Common/TemperatureBottom"; | import TemperatureBottom from "../../../../Common/TemperatureBottom"; | ||||
function EnterToFloorOne(props) { | function EnterToFloorOne(props) { | ||||
@@ -92,6 +90,7 @@ function EnterToFloorOne(props) { | |||||
zIndex: 0, | zIndex: 0, | ||||
}} | }} | ||||
/> | /> | ||||
<FeederStatus /> | |||||
</motion.div> | </motion.div> | ||||
)} | )} | ||||
</AnimatePresence> | </AnimatePresence> | ||||
@@ -1,8 +1,6 @@ | |||||
import { motion, AnimatePresence } from "framer-motion"; | import { motion, AnimatePresence } from "framer-motion"; | ||||
import { useRef, useEffect, useMemo, useState } from "react"; | import { useRef, useEffect, useMemo, useState } from "react"; | ||||
import cls from "../index.module.css"; | |||||
// import SocketContext from '../../../../../store/socket-data-provider'; | |||||
// import { useContext } from "react"; | |||||
import FeederStatus from "../../../../Common/Feeder"; | |||||
import TemperatureTop from "../../../../../components/Common/TemperatureTop"; | import TemperatureTop from "../../../../../components/Common/TemperatureTop"; | ||||
@@ -96,6 +94,7 @@ function FloorOneToTwo(props) { | |||||
zIndex: 0, | zIndex: 0, | ||||
}} | }} | ||||
/> | /> | ||||
<FeederStatus /> | |||||
</motion.div> | </motion.div> | ||||
)} | )} | ||||
</AnimatePresence> | </AnimatePresence> | ||||
@@ -1,9 +1,6 @@ | |||||
import { motion, AnimatePresence } from "framer-motion"; | import { motion, AnimatePresence } from "framer-motion"; | ||||
import { useRef, useEffect, useMemo, useState } from "react"; | import { useRef, useEffect, useMemo, useState } from "react"; | ||||
import cls from "../index.module.css"; | |||||
// import SocketContext from '../../../../../store/socket-data-provider'; | |||||
// import { useContext } from "react"; | |||||
// import TemperatureTop from "../../../../../components/Common/TemperatureTop"; | |||||
import FeederStatus from "../../../../Common/Feeder"; | |||||
import TemperatureBottom from "../../../../Common/TemperatureBottom"; | import TemperatureBottom from "../../../../Common/TemperatureBottom"; | ||||
function FloorTwoToOne(props) { | function FloorTwoToOne(props) { | ||||
@@ -97,6 +94,7 @@ function FloorTwoToOne(props) { | |||||
zIndex: 0, | zIndex: 0, | ||||
}} | }} | ||||
/> | /> | ||||
<FeederStatus /> | |||||
</motion.div> | </motion.div> | ||||
)} | )} | ||||
</AnimatePresence> | </AnimatePresence> | ||||
@@ -0,0 +1,21 @@ | |||||
import { createSlice } from "@reduxjs/toolkit"; | |||||
export const initialState = { | |||||
rightFeeder: "运行", | |||||
leftFeeder: "运行", | |||||
}; | |||||
const feederSlice = createSlice({ | |||||
name: "feeder", | |||||
initialState, | |||||
reducers: { | |||||
setFeederInfo: (state, action) => { | |||||
Object.keys(action.payload).forEach((key) => { | |||||
state[key] = action.payload[key]; | |||||
}); | |||||
}, | |||||
}, | |||||
}); | |||||
export default feederSlice.reducer; | |||||
export const { setFeederInfo } = feederSlice.actions; |
@@ -1,5 +1,6 @@ | |||||
import { configureStore } from "@reduxjs/toolkit"; | import { configureStore } from "@reduxjs/toolkit"; | ||||
import kilnReducer from "./features/kilnSlice"; | import kilnReducer from "./features/kilnSlice"; | ||||
import feederReducer from "./features/feederSlice"; | |||||
import fireReducer from "./features/fireSlice"; | import fireReducer from "./features/fireSlice"; | ||||
import fanFrequenceReducer from "./features/fanFrequenceSlice"; | import fanFrequenceReducer from "./features/fanFrequenceSlice"; | ||||
import combustionAirReducer from "./features/combustionAirSlice"; | import combustionAirReducer from "./features/combustionAirSlice"; | ||||
@@ -10,6 +11,8 @@ export const store = configureStore({ | |||||
reducer: { | reducer: { | ||||
// 窑炉信息 | // 窑炉信息 | ||||
kiln: kilnReducer, | kiln: kilnReducer, | ||||
// 投料机信息 | |||||
feeder: feederReducer, | |||||
// 火向信息 | // 火向信息 | ||||
fireInfo: fireReducer, | fireInfo: fireReducer, | ||||
// 风机运行频率 | // 风机运行频率 | ||||
@@ -96,6 +96,14 @@ export class WsClient { | |||||
}); | }); | ||||
break; | break; | ||||
} | } | ||||
case "FeederInfo": { | |||||
// 投料机信息 | |||||
store.dispatch({ | |||||
type: "feeder/setFeederInfo", | |||||
payload: serializedData.data, | |||||
}); | |||||
break; | |||||
} | |||||
default: { | default: { | ||||
console.log("websocket message: [unknown] ---> ", e.data); | console.log("websocket message: [unknown] ---> ", e.data); | ||||
} | } | ||||