diff --git a/src/components/Common/BlueRect/index.jsx b/src/components/Common/BlueRect/index.jsx
new file mode 100644
index 0000000..3b176dd
--- /dev/null
+++ b/src/components/Common/BlueRect/index.jsx
@@ -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;
diff --git a/src/components/Common/BlueRect/index.module.css b/src/components/Common/BlueRect/index.module.css
new file mode 100644
index 0000000..8523b09
--- /dev/null
+++ b/src/components/Common/BlueRect/index.module.css
@@ -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;
+}
diff --git a/src/components/Common/TemperatureTop/index.jsx b/src/components/Common/TemperatureTop/index.jsx
new file mode 100644
index 0000000..7b76589
--- /dev/null
+++ b/src/components/Common/TemperatureTop/index.jsx
@@ -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;
diff --git a/src/components/Modules/KilnInner/Center/index.jsx b/src/components/Modules/KilnInner/Center/index.jsx
index 1ac9dd4..731ccf6 100644
--- a/src/components/Modules/KilnInner/Center/index.jsx
+++ b/src/components/Modules/KilnInner/Center/index.jsx
@@ -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;
diff --git a/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx b/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx
index 69eb7aa..059100e 100644
--- a/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx
+++ b/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx
@@ -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>
diff --git a/src/store/features/gasSlice.js b/src/store/features/gasSlice.js
index 3dc84c3..4de6b96 100644
--- a/src/store/features/gasSlice.js
+++ b/src/store/features/gasSlice.js
@@ -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;
diff --git a/src/store/features/temperatureSlice.js b/src/store/features/temperatureSlice.js
new file mode 100644
index 0000000..d806353
--- /dev/null
+++ b/src/store/features/temperatureSlice.js
@@ -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;
diff --git a/src/store/index.js b/src/store/index.js
index 23dff4c..de93964 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -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,
   },
 });
diff --git a/src/utils/index.js b/src/utils/index.js
index f3718eb..d6b69d8 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -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);
         }