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)", }}