mt-fe-group/xuchang-new
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

窑炉优化

Browse Source
This commit is contained in:
朱菊兰 2024-07-19 16:31:29 +08:00
parent c6cd097433
commit a15105a9b0
6 changed files with 99 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/video/liquidSpeed.webm Normal file
View File

Binary file not shown.

BIN
src/assets/kilnSpeed.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 51 KiB

30
src/components/Modules/KilnOptimize/Center/videoComponents/Floor1To2.jsx
View File

@ -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 && (
<motion.div
{showSpeed && liquidCanPlay && (
<video
src="/video/liquidSpeed.webm"
muted
autoPlay
loop
width={3842}
style={{
position: "absolute",
top: "242px",
left: "445px",
zIndex: "999",
top: "0px",
left: "-2px",
zIndex: 9,
}}
animate={speedAn}
>
<img
src={image}
alt=""
width="100%"
height="100%"
style={{ transform: "scale(0.583, 0.593)" }}
/>
</motion.div>
></video>
)}
<FeederStatus />
</motion.div>

138
src/components/Modules/KilnOptimize/components/BotttomColorBlock/index.jsx
View File

@ -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)",
}}
/>
<T2
@ -284,10 +284,10 @@ const BotttomColorBlock = (props) => {
width: "100%",
height: "100%",
position: "absolute",
top: "120px",
left: "9px",
top: "107px",
left: "-5px",
zIndex: 0,
transform: "scale(0.7)",
transform: "scale(0.68)",
}}
/>
<T3
@ -296,10 +296,10 @@ const BotttomColorBlock = (props) => {
width: "100%",
height: "100%",
position: "absolute",
top: "120px",
left: "10px",
top: "109px",
left: "0px",
zIndex: 0,
transform: "scale(0.7)",
transform: "scale(0.68)",
}}
/>
<T4
@ -308,10 +308,10 @@ const BotttomColorBlock = (props) => {
width: "100%",
height: "100%",
position: "absolute",
top: "120px",
left: "12px",
top: "109px",
left: "7px",
zIndex: 0,
transform: "scale(0.7)",
transform: "scale(0.69)",
}}
/>
<T5
@ -320,10 +320,10 @@ const BotttomColorBlock = (props) => {
width: "100%",
height: "100%",
position: "absolute",
top: "120px",
left: "13px",
top: "110px",
left: "11px",
zIndex: 0,
transform: "scale(0.7)",
transform: "scale(0.69)",
}}
/>
<T6
@ -332,10 +332,10 @@ const BotttomColorBlock = (props) => {
width: "100%",
height: "100%",
position: "absolute",
top: "120px",
top: "110px",
left: "16px",
zIndex: 0,
transform: "scale(0.7)",
transform: "scale(0.68)",
}}
/>
<T7
@ -344,10 +344,10 @@ const BotttomColorBlock = (props) => {
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)",
}}
/>
<T8
@ -356,10 +356,10 @@ const BotttomColorBlock = (props) => {
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)",
}}
/>
</motion.div>

24
src/components/Modules/KilnOptimize/components/TopColorBlock/index.jsx
View File

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

8
src/components/Modules/KilnOptimize/components/TopColorBlockEnter/index.jsx
View File

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