update 一层温度

This commit is contained in:
lb 2023-12-01 11:34:54 +08:00
parent 550da629c0
commit b601e9065a
9 changed files with 540 additions and 62 deletions

View File

@ -0,0 +1,26 @@
import cls from "./index.module.css";
function BlueRect(props) {
const title = props.title || "DEFAULT";
const value = props.value || "0℃";
return (
<div className={`${cls.blueRect} ${cls[title]}`} style={{}}>
<span
className="title"
style={{
fontSize: "18px",
lineHeight: "24px",
color: props.blue ? "#40afb8" : "#fff",
fontWeight: 600,
}}
>
{title}
</span>
<span className="value" style={{ fontSize: "22px" }}>
{value}
</span>
</div>
);
}
export default BlueRect;

View File

@ -0,0 +1,268 @@
.blueRect {
display: inline-block;
width: 106px;
height: 68px;
position: absolute;
top: 0;
left: 0;
padding: 6px 0;
display: flex;
flex-direction: column;
align-items: center;
color: #fff;
background: #0a426820;
border-radius: 4px;
}
.blueRect::before {
content: "";
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(
to right,
transparent 0%,
transparent 50%,
#24aebb 100%
);
border-radius: 3px;
}
.blueRect::after {
content: "";
display: inline-block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(
to right,
#24aebb 0%,
transparent 50%,
transparent 100%
);
border-radius: 3px;
}
/** left **/
.TE271 {
top: 160px;
left: 80px;
}
.TE272 {
top: 254px; /* +94px */
left: 80px;
}
.TE273 {
top: 348px; /* +94px */
left: 80px;
}
.TE274 {
top: 442px;
left: 80px;
}
.TE279 {
top: 536px;
left: 80px;
}
.TE275 {
top: 160px;
left: 216px;
}
.TE276 {
top: 254px;
left: 216px; /* +136px */
}
.TE277 {
top: 348px; /* +94px */
left: 216px; /* +136px */
}
.TE278 {
top: 442px; /* +94px */
left: 216px; /* +136px */
}
.TE280 {
top: 536px; /* +94px */
left: 216px; /* +136px */
}
/** center top **/
.TE227 {
top: 128px;
left: 616px;
}
.TE229 {
top: 128px;
left: 736px; /* +120px */
}
.TE231 {
top: 128px;
left: 856px;
}
.TE233 {
top: 128px;
left: 976px;
}
.TE235 {
top: 128px;
left: 1096px;
}
.TE237 {
top: 128px;
left: 1216px;
}
.TE239 {
top: 128px;
left: 1336px;
}
.TE241 {
top: 128px;
left: 1456px;
}
/** center bottom **/
.TE228 {
top: 620px;
left: 588px;
}
.TE230 {
top: 620px;
left: 710px;
}
.TE232 {
top: 620px;
left: 830px;
}
.TE234 {
top: 620px;
left: 950px;
}
.TE236 {
top: 620px;
left: 1070px;
}
.TE238 {
top: 620px;
left: 1190px;
}
.TE240 {
top: 620px;
left: 1310px;
}
.TE242 {
top: 620px;
left: 1430px;
}
/** center middle **/
.TE201 {
top: 390px;
left: 450px;
}
.TE202 {
top: 390px;
left: 580px;
}
.TE203 {
top: 390px;
left: 710px;
}
.TE204 {
top: 390px;
left: 840px;
}
.TE205 {
top: 390px;
left: 970px;
}
.TE206 {
top: 390px;
left: 1100px;
}
.TE207 {
top: 340px;
left: 1260px;
}
.TE208 {
top: 390px;
left: 1260px;
}
.TE209 {
top: 480px;
left: 1260px;
}
.TE210 {
top: 390px;
left: 1390px;
}
.TE211 {
top: 390px;
left: 1530px;
}
.TE212 {
top: 390px;
left: 1660px;
}
.TE213 {
top: 390px;
left: 1790px;
}
/** right **/
.TE214 {
top: 160px;
left: 2000px;
}
.TE215 {
top: 265px;
left: 2020px;
}
.TE216 {
top: 400px;
left: 2030px;
}
.TE217 {
top: 535px;
left: 2050px;
}
.TE218 {
top: 670px;
left: 2080px;
}
.TE219 {
top: 160px;
left: 2120px;
}
.TE220 {
top: 265px;
left: 2140px;
}
.TE221 {
top: 400px;
left: 2150px;
}
.TE222 {
top: 535px;
left: 2170px;
}
.TE223 {
top: 670px;
left: 2200px;
}
.TE224 {
top: 265px;
left: 2240px;
}
.TE225 {
top: 400px;
left: 2310px;
}
.TE226 {
top: 535px;
left: 2280px;
}

View File

@ -0,0 +1,26 @@
import BlueRect from "../BlueRect";
import { useSelector } from "react-redux";
function TemperatureTop(props) {
const tempTop = useSelector((state) => state.temperature.top);
return (
<div
className="temperature-top"
style={{
position: "absolute",
top: "0",
left: "0",
width: "100%",
height: "95vh",
background: "#ccc3",
}}
>
{Object.keys(tempTop).map((d) => (
<BlueRect title={d} value={tempTop[d]} />
))}
</div>
);
}
export default TemperatureTop;

View File

@ -1,7 +1,8 @@
import { useState } from 'react'; import { useState } from "react";
import cls from './index.module.css'; import cls from "./index.module.css";
import Chart2 from '../../../Common/TimeFireDir'; import Chart2 from "../../../Common/TimeFireDir";
import VideoContainer from './VideoContainer'; import VideoContainer from "./VideoContainer";
import TemperatureTop from "../../../Common/TemperatureTop";
function KilnCenter() { function KilnCenter() {
const [floor, setFloor] = useState(0); const [floor, setFloor] = useState(0);
@ -14,17 +15,17 @@ function KilnCenter() {
<div <div
className="bgKilnInner" className="bgKilnInner"
style={{ style={{
width: '100%', width: "100%",
position: 'absolute', position: "absolute",
top: '12%', top: "12%",
display: 'flex', display: "flex",
flexDirection: 'column', flexDirection: "column",
}} }}
> >
{/* 时间火向数据 */} {/* 时间火向数据 */}
<div <div
className="fireAndTime" className="fireAndTime"
style={{ position: 'absolute', top: '-112px', height: '212px' }} style={{ position: "absolute", top: "-112px", height: "212px" }}
> >
<Chart2 /> <Chart2 />
</div> </div>
@ -33,14 +34,14 @@ function KilnCenter() {
<div <div
className="subMenu" className="subMenu"
style={{ style={{
display: 'flex', display: "flex",
marginBottom: '24px', marginBottom: "24px",
justifyContent: 'center', justifyContent: "center",
}} }}
> >
<div <div
className={ className={
'flr flr1 ' + cls.menuItem + ' ' + (floor == 1 ? cls.active : '') "flr flr1 " + cls.menuItem + " " + (floor == 1 ? cls.active : "")
} }
onClick={() => onFloorUpdate(1)} onClick={() => onFloorUpdate(1)}
> >
@ -48,7 +49,7 @@ function KilnCenter() {
</div> </div>
<div <div
className={ className={
'flr flr2 ' + cls.menuItem + ' ' + (floor == 2 ? cls.active : '') "flr flr2 " + cls.menuItem + " " + (floor == 2 ? cls.active : "")
} }
onClick={() => onFloorUpdate(2)} onClick={() => onFloorUpdate(2)}
> >
@ -56,6 +57,9 @@ function KilnCenter() {
</div> </div>
</div> </div>
{/* 覆盖层温度信息 */}
<TemperatureTop />
{/* video */} {/* video */}
<VideoContainer onFloorUpdate={onFloorUpdate} floor={floor} /> <VideoContainer onFloorUpdate={onFloorUpdate} floor={floor} />

View File

@ -70,7 +70,7 @@ function EnterToFloorOne(props) {
></video> ></video>
)} )}
<motion.div {/* <motion.div
className={cls.videoLayer1} className={cls.videoLayer1}
key="eto1div" key="eto1div"
style={{ style={{
@ -82,7 +82,7 @@ function EnterToFloorOne(props) {
opacity: [0, 0, 0, 0.6, 1], opacity: [0, 0, 0, 0.6, 1],
transition: { duration: 0.3, delay: 2 }, transition: { duration: 0.3, delay: 2 },
}} }}
></motion.div> ></motion.div> */}
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>

View File

@ -59,4 +59,9 @@ const gasSlice = createSlice({
}); });
export default gasSlice.reducer; export default gasSlice.reducer;
export const { setHistory, setRuntime } = gasSlice.actions; export const {
setGasIHistory,
setGasIIHistory,
setGasIRuntime,
setGasIIRuntime,
} = gasSlice.actions;

View File

@ -0,0 +1,130 @@
import { createSlice } from "@reduxjs/toolkit";
export const initialState = {
top: {
TE201: "0℃",
TE202: "0℃",
TE203: "0℃",
TE204: "0℃",
TE205: "0℃",
TE206: "0℃",
TE207: "0℃",
TE208: "0℃",
TE209: "0℃",
TE210: "0℃",
TE211: "0℃",
TE212: "0℃",
TE213: "0℃",
TE214: "0℃",
TE215: "0℃",
TE216: "0℃",
TE217: "0℃",
TE218: "0℃",
TE219: "0℃",
TE220: "0℃",
TE221: "0℃",
TE222: "0℃",
TE223: "0℃",
TE224: "0℃",
TE225: "0℃",
TE226: "0℃",
TE227: "0℃",
TE228: "0℃",
TE229: "0℃",
TE230: "0℃",
TE231: "0℃",
TE232: "0℃",
TE233: "0℃",
TE234: "0℃",
TE235: "0℃",
TE236: "0℃",
TE237: "0℃",
TE238: "0℃",
TE239: "0℃",
TE240: "0℃",
TE241: "0℃",
TE242: "0℃",
TE271: "0℃",
TE272: "0℃",
TE273: "0℃",
TE274: "0℃",
TE275: "0℃",
TE276: "0℃",
TE277: "0℃",
TE278: "0℃",
TE279: "0℃",
TE280: "0℃",
},
bottom: {
PE401: "0℃",
PE402: "0℃",
PE403: "0℃",
TE301: "0℃",
TE302: "0℃",
TE303: "0℃",
TE304: "0℃",
TE305: "0℃",
TE306: "0℃",
TE307: "0℃",
TE308: "0℃",
TE309: "0℃",
TE310: "0℃",
TE311: "0℃",
TE312: "0℃",
TE313: "0℃",
TE314: "0℃",
TE315: "0℃",
TE316: "0℃",
TE317: "0℃",
TE318: "0℃",
TE319: "0℃",
TE320: "0℃",
TE321: "0℃",
TE322: "0℃",
TE323: "0℃",
TE324: "0℃",
TE325: "0℃",
TE326: "0℃",
TE327: "0℃",
TE328: "0℃",
TE329: "0℃",
TE330: "0℃",
TE331: "0℃",
TE332: "0℃",
TE333: "0℃",
TE334: "0℃",
TE335: "0℃",
TE336: "0℃",
TE337: "0℃",
TE338: "0℃",
TE339: "0℃",
TE340: "0℃",
TE341: "0℃",
TE342: "0℃",
TE343: "0℃",
TE344: "0℃",
TE345: "0℃",
TE346: "0℃",
TE347: "0℃",
TE348: "0℃",
TE401: "0℃",
TE402: "0℃",
TE403: "0℃",
},
};
const temperatureSlice = createSlice({
name: "temperature",
initialState,
reducers: {
setTopTemp: (state, action) => {
state["top"] = action.payload;
},
setBottomTemp: (state, action) => {
state["bottom"] = action.payload;
},
},
});
export default temperatureSlice.reducer;
export const { setTopTemp, setBottomTemp } = temperatureSlice.actions;

View File

@ -4,6 +4,7 @@ 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";
import gasReducer from "./features/gasSlice"; import gasReducer from "./features/gasSlice";
import temperatureReducer from "./features/temperatureSlice";
export const store = configureStore({ export const store = configureStore({
reducer: { reducer: {
@ -17,5 +18,7 @@ export const store = configureStore({
natGas: gasReducer, natGas: gasReducer,
// 助燃风流量 // 助燃风流量
combustionAir: combustionAirReducer, combustionAir: combustionAirReducer,
// 温度
temperature: temperatureReducer,
}, },
}); });

View File

@ -80,6 +80,22 @@ export class WsClient {
// 风机运行频率 历史 暂无 // 风机运行频率 历史 暂无
break; break;
} }
case "TopTempInfo": {
// 碹顶温度列表
store.dispatch({
type: "temperature/setTopTemp",
payload: serializedData.data.topTempInfo,
});
break;
}
case "BottomTempInfo": {
// 碹底温度列表
store.dispatch({
type: "temperature/setBottomTemp",
payload: serializedData.data.bottomTempInfo,
});
break;
}
default: { default: {
console.log("websocket message: [unknown] ---> ", e.data); console.log("websocket message: [unknown] ---> ", e.data);
} }