diff --git a/public/video/liquidSpeed.webm b/public/video/liquidSpeed.webm
new file mode 100644
index 0000000..da0981f
Binary files /dev/null and b/public/video/liquidSpeed.webm differ
diff --git a/src/assets/kilnSpeed.png b/src/assets/kilnSpeed.png
deleted file mode 100644
index 72a8801..0000000
Binary files a/src/assets/kilnSpeed.png and /dev/null differ
diff --git a/src/components/Modules/KilnOptimize/Center/videoComponents/Floor1To2.jsx b/src/components/Modules/KilnOptimize/Center/videoComponents/Floor1To2.jsx
index 61392f6..72949cf 100644
--- a/src/components/Modules/KilnOptimize/Center/videoComponents/Floor1To2.jsx
+++ b/src/components/Modules/KilnOptimize/Center/videoComponents/Floor1To2.jsx
@@ -4,13 +4,13 @@ import FeederStatus from "../../../../Common/Feeder";
import TemperatureBottom from "../../../../Common/TemperatureBottom";
import { useSelector } from "react-redux";
import BotttomColorBlock from "./../../components/BotttomColorBlock";
-import image from "./../../../../../assets/kilnSpeed.png";
function FloorOneToTwo(props) {
const fireInfo = useSelector((state) => state.fireInfo);
const fireDir = fireInfo?.fireDirection || null;
const [fireCanPlay, setFireCanPlay] = useState(false);
+ const [liquidCanPlay, setLiquidCanPlay] = useState(false);
const vd = useRef(null);
const show = props.opacity || 0;
@@ -44,12 +44,14 @@ function FloorOneToTwo(props) {
setTimeout(() => {
// console.log("开启1-2的火播放");
setFireCanPlay(true);
+ setLiquidCanPlay(true);
}, 2000);
}
if (!show) setFireCanPlay(false);
return () => {
// console.log("关闭1-2的火播放");
setFireCanPlay(false);
+ setLiquidCanPlay(false);
};
}, [show]);
@@ -126,24 +128,20 @@ function FloorOneToTwo(props) {
/>
)}
{/* 溶液速度色块 */}
- {showSpeed && (
-
-
-
+ >
)}
diff --git a/src/components/Modules/KilnOptimize/components/BotttomColorBlock/index.jsx b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/index.jsx
index cd35c56..aa0285d 100644
--- a/src/components/Modules/KilnOptimize/components/BotttomColorBlock/index.jsx
+++ b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/index.jsx
@@ -40,6 +40,50 @@ const BotttomColorBlock = (props) => {
}
}, [floor]);
function returnColor(n) {
+ let num = Number(tempBottom[n].slice(0, tempBottom[n].length - 1));
+ if (num <= 100) {
+ return "rgba(96, 0, 189, 0.5)";
+ } else if (num > 100 && num <= 200) {
+ return "rgba(102, 7, 255, 0.5)";
+ } else if (num > 200 && num <= 300) {
+ return "rgba(10, 20, 255, 0.5)";
+ } else if (num > 300 && num <= 400) {
+ return "rgba(7, 89, 255, 0.5)";
+ } else if (num > 400 && num <= 500) {
+ return "rgba(7, 139, 255, 0.5)";
+ } else if (num > 500 && num <= 600) {
+ return "rgba(7, 194, 255, 0.5)";
+ } else if (num > 600 && num <= 700) {
+ return "rgba(7, 255, 253, 0.5)";
+ } else if (num > 700 && num <= 800) {
+ return "rgba(7, 255, 205, 0.5)";
+ } else if (num > 800 && num <= 900) {
+ return "rgba(20, 237, 127, 0.5)";
+ } else if (num > 900 && num <= 1000) {
+ return "rgba(0, 193, 39, 0.5)";
+ } else if (num > 1000 && num <= 1100) {
+ return "rgba(147, 210, 1, 0.5)";
+ } else if (num > 1100 && num <= 1200) {
+ return "rgba(206, 206, 0, 0.5)";
+ } else if (num > 1200 && num <= 1300) {
+ return "rgba(255, 226, 13, 0.5)";
+ } else if (num > 1300 && num <= 1400) {
+ return "rgba(249, 240, 146, 0.5)";
+ } else if (num > 1400 && num <= 1500) {
+ return "rgba(250, 204, 93, 0.5)";
+ } else if (num > 1500 && num <= 1600) {
+ return "rgba(240, 139, 32, 0.5)";
+ } else if (num > 1600 && num <= 1700) {
+ return "rgba(241, 88, 26, 0.5)";
+ } else if (num > 1700 && num <= 1800) {
+ return "rgba(255, 0, 0, 0.5)";
+ } else if (num > 1800 && num <= 1900) {
+ return "rgba(182, 0, 0, 0.5)";
+ } else if (num > 1900) {
+ return "rgba(140, 0, 33, 0.5)";
+ }
+ }
+ function returnColor2(n) {
let num = Number(tempBottom[n].slice(0, tempBottom[n].length - 1));
if (num <= 100) {
return "rgba(96, 0, 189, 0.7)";
@@ -83,50 +127,6 @@ const BotttomColorBlock = (props) => {
return "rgba(140, 0, 33, 0.7)";
}
}
- function returnColor2(n) {
- let num = Number(tempBottom[n].slice(0, tempBottom[n].length - 1));
- if (num <= 100) {
- return "rgba(96, 0, 189, 0.9)";
- } else if (num > 100 && num <= 200) {
- return "rgba(102, 7, 255, 0.9)";
- } else if (num > 200 && num <= 300) {
- return "rgba(10, 20, 255, 0.9)";
- } else if (num > 300 && num <= 400) {
- return "rgba(7, 89, 255, 0.9)";
- } else if (num > 400 && num <= 500) {
- return "rgba(7, 139, 255, 0.9)";
- } else if (num > 500 && num <= 600) {
- return "rgba(7, 194, 255, 0.9)";
- } else if (num > 600 && num <= 700) {
- return "rgba(7, 255, 253, 0.9)";
- } else if (num > 700 && num <= 800) {
- return "rgba(7, 255, 205, 0.9)";
- } else if (num > 800 && num <= 900) {
- return "rgba(20, 237, 127, 0.9)";
- } else if (num > 900 && num <= 1000) {
- return "rgba(0, 193, 39, 0.9)";
- } else if (num > 1000 && num <= 1100) {
- return "rgba(147, 210, 1, 0.9)";
- } else if (num > 1100 && num <= 1200) {
- return "rgba(206, 206, 0, 0.9)";
- } else if (num > 1200 && num <= 1300) {
- return "rgba(255, 226, 13, 0.9)";
- } else if (num > 1300 && num <= 1400) {
- return "rgba(249, 240, 146, 0.9)";
- } else if (num > 1400 && num <= 1500) {
- return "rgba(250, 204, 93, 0.9)";
- } else if (num > 1500 && num <= 1600) {
- return "rgba(240, 139, 32, 0.9)";
- } else if (num > 1600 && num <= 1700) {
- return "rgba(241, 88, 26, 0.9)";
- } else if (num > 1700 && num <= 1800) {
- return "rgba(255, 0, 0, 0.9)";
- } else if (num > 1800 && num <= 1900) {
- return "rgba(182, 0, 0, 0.9)";
- } else if (num > 1900) {
- return "rgba(140, 0, 33, 0.9))";
- }
- }
// 窑炉内部svg变色
function BigSvg() {
return (
@@ -225,7 +225,7 @@ const BotttomColorBlock = (props) => {
height: "100%",
position: "absolute",
top: "120px",
- left: "14px",
+ left: "13px",
zIndex: 0,
transform: "scale(0.7)",
}}
@@ -261,7 +261,7 @@ const BotttomColorBlock = (props) => {
height: "100%",
position: "absolute",
top: "120px",
- left: "21px",
+ left: "20px",
zIndex: 0,
transform: "scale(0.7)",
}}
@@ -272,10 +272,10 @@ const BotttomColorBlock = (props) => {
width: "100%",
height: "100%",
position: "absolute",
- top: "120px",
- left: "5px",
+ top: "108px",
+ left: "-10px",
zIndex: 0,
- transform: "scale(0.7)",
+ transform: "scale(0.68)",
}}
/>
{
width: "100%",
height: "100%",
position: "absolute",
- top: "120px",
- left: "9px",
+ top: "107px",
+ left: "-5px",
zIndex: 0,
- transform: "scale(0.7)",
+ transform: "scale(0.68)",
}}
/>
{
width: "100%",
height: "100%",
position: "absolute",
- top: "120px",
- left: "10px",
+ top: "109px",
+ left: "0px",
zIndex: 0,
- transform: "scale(0.7)",
+ transform: "scale(0.68)",
}}
/>
{
width: "100%",
height: "100%",
position: "absolute",
- top: "120px",
- left: "12px",
+ top: "109px",
+ left: "7px",
zIndex: 0,
- transform: "scale(0.7)",
+ transform: "scale(0.69)",
}}
/>
{
width: "100%",
height: "100%",
position: "absolute",
- top: "120px",
- left: "13px",
+ top: "110px",
+ left: "11px",
zIndex: 0,
- transform: "scale(0.7)",
+ transform: "scale(0.69)",
}}
/>
{
width: "100%",
height: "100%",
position: "absolute",
- top: "120px",
+ top: "110px",
left: "16px",
zIndex: 0,
- transform: "scale(0.7)",
+ transform: "scale(0.68)",
}}
/>
{
width: "100%",
height: "100%",
position: "absolute",
- top: "120px",
- left: "18px",
+ top: "102px",
+ left: "19px",
zIndex: 0,
- transform: "scale(0.7)",
+ transform: "scale(0.69,0.64)",
}}
/>
{
width: "100%",
height: "100%",
position: "absolute",
- top: "120px",
- left: "20px",
+ top: "102px",
+ left: "24px",
zIndex: 0,
- transform: "scale(0.7)",
+ transform: "scale(0.68,0.64)",
}}
/>
diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlock/index.jsx b/src/components/Modules/KilnOptimize/components/TopColorBlock/index.jsx
index e7c8059..1f0dc40 100644
--- a/src/components/Modules/KilnOptimize/components/TopColorBlock/index.jsx
+++ b/src/components/Modules/KilnOptimize/components/TopColorBlock/index.jsx
@@ -170,7 +170,7 @@ const TopColorBlock = ({ condition }) => {
height: "100%",
position: "absolute",
top: "120px",
- left: "5px",
+ left: "3px",
zIndex: 0,
transform: "scale(0.7)",
}}
@@ -182,7 +182,7 @@ const TopColorBlock = ({ condition }) => {
height: "100%",
position: "absolute",
top: "120px",
- left: "7px",
+ left: "5px",
zIndex: 0,
transform: "scale(0.7)",
}}
@@ -206,7 +206,7 @@ const TopColorBlock = ({ condition }) => {
height: "100%",
position: "absolute",
top: "120px",
- left: "12px",
+ left: "10px",
zIndex: 0,
transform: "scale(0.7)",
}}
@@ -218,7 +218,7 @@ const TopColorBlock = ({ condition }) => {
height: "100%",
position: "absolute",
top: "120px",
- left: "14px",
+ left: "12px",
zIndex: 0,
transform: "scale(0.7)",
}}
@@ -242,7 +242,7 @@ const TopColorBlock = ({ condition }) => {
height: "100%",
position: "absolute",
top: "120px",
- left: "18px",
+ left: "16px",
zIndex: 0,
transform: "scale(0.7)",
}}
@@ -254,7 +254,7 @@ const TopColorBlock = ({ condition }) => {
height: "100%",
position: "absolute",
top: "120px",
- left: "19px",
+ left: "17px",
zIndex: 0,
transform: "scale(0.7)",
}}
@@ -266,7 +266,7 @@ const TopColorBlock = ({ condition }) => {
height: "100%",
position: "absolute",
top: "114px",
- left: "5px",
+ left: "3px",
zIndex: 0,
transform: "scale(0.7)",
}}
@@ -278,7 +278,7 @@ const TopColorBlock = ({ condition }) => {
height: "100%",
position: "absolute",
top: "114px",
- left: "9px",
+ left: "4px",
zIndex: 0,
transform: "scale(0.7)",
}}
@@ -302,7 +302,7 @@ const TopColorBlock = ({ condition }) => {
height: "100%",
position: "absolute",
top: "114px",
- left: "12px",
+ left: "11px",
zIndex: 0,
transform: "scale(0.7)",
}}
@@ -314,7 +314,7 @@ const TopColorBlock = ({ condition }) => {
height: "100%",
position: "absolute",
top: "114px",
- left: "13px",
+ left: "12px",
zIndex: 0,
transform: "scale(0.7)",
}}
@@ -338,7 +338,7 @@ const TopColorBlock = ({ condition }) => {
height: "100%",
position: "absolute",
top: "114px",
- left: "18px",
+ left: "17px",
zIndex: 0,
transform: "scale(0.7)",
}}
@@ -350,7 +350,7 @@ const TopColorBlock = ({ condition }) => {
height: "100%",
position: "absolute",
top: "114px",
- left: "19px",
+ left: "18px",
zIndex: 0,
transform: "scale(0.7)",
}}
diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/index.jsx b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/index.jsx
index 0614af5..566de5d 100644
--- a/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/index.jsx
+++ b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/index.jsx
@@ -170,7 +170,7 @@ const TopColorBlockEnter = () => {
height: "100%",
position: "absolute",
top: "116px",
- left: "-15px",
+ left: "-16px",
zIndex: 0,
transform: "scale(0.7)",
}}
@@ -218,7 +218,7 @@ const TopColorBlockEnter = () => {
height: "100%",
position: "absolute",
top: "116px",
- left: "-13px",
+ left: "-11px",
zIndex: 0,
transform: "scale(0.7)",
}}
@@ -266,7 +266,7 @@ const TopColorBlockEnter = () => {
height: "100%",
position: "absolute",
top: "110px",
- left: "-15px",
+ left: "-17px",
zIndex: 0,
transform: "scale(0.7)",
}}
@@ -350,7 +350,7 @@ const TopColorBlockEnter = () => {
height: "100%",
position: "absolute",
top: "110px",
- left: "-7px",
+ left: "-8px",
zIndex: 0,
transform: "scale(0.7)",
}}