Merge pull request '窑炉优化' (#2) from zjl into features/warning
Reviewed-on: #2
This commit is contained in:
коміт
1e64a4d0e2
BIN
public/video/liquidSpeed.webm
Normal file
BIN
public/video/liquidSpeed.webm
Normal file
Бінарний файл не відображається.
Бінарний файл не відображається.
Перед Ширина: | Висота: | Розмір: 51 KiB |
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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)",
|
||||
}}
|
||||
|
@ -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)",
|
||||
}}
|
||||
|
Завантаження…
Посилання в новій задачі
Block a user