update 一层温度
This commit is contained in:
lb
parent
550da629c0
commit
b601e9065a
26
src/components/Common/BlueRect/index.jsx
Normal file
26
src/components/Common/BlueRect/index.jsx
Normal 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;
|
||||
268
src/components/Common/BlueRect/index.module.css
Normal file
268
src/components/Common/BlueRect/index.module.css
Normal 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;
|
||||
}
|
||||
26
src/components/Common/TemperatureTop/index.jsx
Normal file
26
src/components/Common/TemperatureTop/index.jsx
Normal 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;
|
||||
@ -1,68 +1,72 @@
|
||||
import { useState } from 'react';
|
||||
import cls from './index.module.css';
|
||||
import Chart2 from '../../../Common/TimeFireDir';
|
||||
import VideoContainer from './VideoContainer';
|
||||
import { useState } from "react";
|
||||
import cls from "./index.module.css";
|
||||
import Chart2 from "../../../Common/TimeFireDir";
|
||||
import VideoContainer from "./VideoContainer";
|
||||
import TemperatureTop from "../../../Common/TemperatureTop";
|
||||
|
||||
function KilnCenter() {
|
||||
const [floor, setFloor] = useState(0);
|
||||
const [floor, setFloor] = useState(0);
|
||||
|
||||
function onFloorUpdate(flr) {
|
||||
setFloor(flr);
|
||||
}
|
||||
function onFloorUpdate(flr) {
|
||||
setFloor(flr);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="bgKilnInner"
|
||||
style={{
|
||||
width: '100%',
|
||||
position: 'absolute',
|
||||
top: '12%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
{/* 时间火向数据 */}
|
||||
<div
|
||||
className="fireAndTime"
|
||||
style={{ position: 'absolute', top: '-112px', height: '212px' }}
|
||||
>
|
||||
<Chart2 />
|
||||
</div>
|
||||
return (
|
||||
<div
|
||||
className="bgKilnInner"
|
||||
style={{
|
||||
width: "100%",
|
||||
position: "absolute",
|
||||
top: "12%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
{/* 时间火向数据 */}
|
||||
<div
|
||||
className="fireAndTime"
|
||||
style={{ position: "absolute", top: "-112px", height: "212px" }}
|
||||
>
|
||||
<Chart2 />
|
||||
</div>
|
||||
|
||||
{/* menu */}
|
||||
<div
|
||||
className="subMenu"
|
||||
style={{
|
||||
display: 'flex',
|
||||
marginBottom: '24px',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
'flr flr1 ' + cls.menuItem + ' ' + (floor == 1 ? cls.active : '')
|
||||
}
|
||||
onClick={() => onFloorUpdate(1)}
|
||||
>
|
||||
一层
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
'flr flr2 ' + cls.menuItem + ' ' + (floor == 2 ? cls.active : '')
|
||||
}
|
||||
onClick={() => onFloorUpdate(2)}
|
||||
>
|
||||
二层
|
||||
</div>
|
||||
</div>
|
||||
{/* menu */}
|
||||
<div
|
||||
className="subMenu"
|
||||
style={{
|
||||
display: "flex",
|
||||
marginBottom: "24px",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
"flr flr1 " + cls.menuItem + " " + (floor == 1 ? cls.active : "")
|
||||
}
|
||||
onClick={() => onFloorUpdate(1)}
|
||||
>
|
||||
一层
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
"flr flr2 " + cls.menuItem + " " + (floor == 2 ? cls.active : "")
|
||||
}
|
||||
onClick={() => onFloorUpdate(2)}
|
||||
>
|
||||
二层
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* video */}
|
||||
<VideoContainer onFloorUpdate={onFloorUpdate} floor={floor} />
|
||||
{/* 覆盖层温度信息 */}
|
||||
<TemperatureTop />
|
||||
|
||||
{/* <div className={cls.videoLayer2}></div> */}
|
||||
{/* video */}
|
||||
<VideoContainer onFloorUpdate={onFloorUpdate} floor={floor} />
|
||||
|
||||
{/* left side */}
|
||||
{/* <div
|
||||
{/* <div className={cls.videoLayer2}></div> */}
|
||||
|
||||
{/* left side */}
|
||||
{/* <div
|
||||
className="leftSide"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
@ -118,8 +122,8 @@ function KilnCenter() {
|
||||
style={{ background: '#ccc', width: '200px', height: '100px' }}
|
||||
></div>
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default KilnCenter;
|
||||
|
||||
@ -70,7 +70,7 @@ function EnterToFloorOne(props) {
|
||||
></video>
|
||||
)}
|
||||
|
||||
<motion.div
|
||||
{/* <motion.div
|
||||
className={cls.videoLayer1}
|
||||
key="eto1div"
|
||||
style={{
|
||||
@ -82,7 +82,7 @@ function EnterToFloorOne(props) {
|
||||
opacity: [0, 0, 0, 0.6, 1],
|
||||
transition: { duration: 0.3, delay: 2 },
|
||||
}}
|
||||
></motion.div>
|
||||
></motion.div> */}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
@ -59,4 +59,9 @@ const gasSlice = createSlice({
|
||||
});
|
||||
|
||||
export default gasSlice.reducer;
|
||||
export const { setHistory, setRuntime } = gasSlice.actions;
|
||||
export const {
|
||||
setGasIHistory,
|
||||
setGasIIHistory,
|
||||
setGasIRuntime,
|
||||
setGasIIRuntime,
|
||||
} = gasSlice.actions;
|
||||
|
||||
130
src/store/features/temperatureSlice.js
Normal file
130
src/store/features/temperatureSlice.js
Normal 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;
|
||||
@ -4,6 +4,7 @@ import fireReducer from "./features/fireSlice";
|
||||
import fanFrequenceReducer from "./features/fanFrequenceSlice";
|
||||
import combustionAirReducer from "./features/combustionAirSlice";
|
||||
import gasReducer from "./features/gasSlice";
|
||||
import temperatureReducer from "./features/temperatureSlice";
|
||||
|
||||
export const store = configureStore({
|
||||
reducer: {
|
||||
@ -17,5 +18,7 @@ export const store = configureStore({
|
||||
natGas: gasReducer,
|
||||
// 助燃风流量
|
||||
combustionAir: combustionAirReducer,
|
||||
// 温度
|
||||
temperature: temperatureReducer,
|
||||
},
|
||||
});
|
||||
|
||||
@ -80,6 +80,22 @@ export class WsClient {
|
||||
// 风机运行频率 历史 暂无
|
||||
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: {
|
||||
console.log("websocket message: [unknown] ---> ", e.data);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user