窑炉优化
This commit is contained in:
parent
214e9fe892
commit
4d7af62305
Binary file not shown.
Binary file not shown.
BIN
src/assets/kilnSpeed.png
Normal file
BIN
src/assets/kilnSpeed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 22 KiB |
@ -1,20 +1,30 @@
|
||||
import BlueRect from "../BlueRect";
|
||||
import { useSelector } from "react-redux";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
const blueTe = [
|
||||
"TE401",
|
||||
"TE402",
|
||||
"TE403",
|
||||
"PE401",
|
||||
"PE402",
|
||||
"PE403",
|
||||
];
|
||||
const blueTe = ["TE401", "TE402", "TE403", "PE401", "PE402", "PE403"];
|
||||
|
||||
function TemperatureBottom(props) {
|
||||
const tempBottom = useSelector((state) => state.temperature.bottom);
|
||||
console.log(tempBottom)
|
||||
console.log('==================+++++++++++++')
|
||||
const speed = props.speed;
|
||||
const floor = props.floor;
|
||||
const [speedAn, setSpeedAn] = useState({});
|
||||
useEffect(() => {
|
||||
// 2，3互切不用展示动画
|
||||
if (speed === "f") {
|
||||
setSpeedAn({});
|
||||
} else {
|
||||
if (floor === 2) {
|
||||
setSpeedAn({
|
||||
opacity: [0, 0, 0, 0.6, 1],
|
||||
transition: { duration: 0.3, delay: 1.8 },
|
||||
});
|
||||
} else {
|
||||
setSpeedAn({});
|
||||
}
|
||||
}
|
||||
}, [floor]);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
@ -26,15 +36,17 @@ function TemperatureBottom(props) {
|
||||
width: "100%",
|
||||
height: "80vh",
|
||||
zIndex: "-1",
|
||||
...props.style
|
||||
}}
|
||||
animate={{
|
||||
opacity: [0, 0, 0, 0.6, 1],
|
||||
transition: { duration: 0.3, delay: 2 },
|
||||
...props.style,
|
||||
}}
|
||||
animate={speedAn}
|
||||
>
|
||||
{Object.keys(tempBottom).map((d) => (
|
||||
<BlueRect title={d} key={d + Math.random()} value={tempBottom[d]} blue={blueTe.includes(d)} />
|
||||
<BlueRect
|
||||
title={d}
|
||||
key={d + Math.random()}
|
||||
value={tempBottom[d]}
|
||||
blue={blueTe.includes(d)}
|
||||
/>
|
||||
))}
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
@ -28,15 +28,20 @@ function TemperatureTop(props) {
|
||||
width: "100%",
|
||||
height: "80vh",
|
||||
zIndex: "-1",
|
||||
...props.style
|
||||
...props.style,
|
||||
}}
|
||||
animate={{
|
||||
opacity: [0, 0, 0, 0.6, 1],
|
||||
transition: { duration: 0.3, delay: 2 },
|
||||
transition: { duration: 0.3, delay: 1.5 },
|
||||
}}
|
||||
>
|
||||
{Object.keys(tempTop).map((d) => (
|
||||
<BlueRect title={d} key={d + Math.random()} value={tempTop[d]} blue={blueTe.includes(d)} />
|
||||
<BlueRect
|
||||
title={d}
|
||||
key={d + Math.random()}
|
||||
value={tempTop[d]}
|
||||
blue={blueTe.includes(d)}
|
||||
/>
|
||||
))}
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
@ -1,104 +1,108 @@
|
||||
import EnterVideo from './videoComponents/EnterVideo';
|
||||
import EnterToFloorOne from './videoComponents/EnterToFloor1';
|
||||
import EnterToFloorTwo from './videoComponents/EnterToFloor2';
|
||||
import FloorOneToTwo from './videoComponents/Floor1To2';
|
||||
import FloorTwoToOne from './videoComponents/Floor2To1';
|
||||
import { useRef, useEffect, useReducer } from 'react';
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
import EnterVideo from "./videoComponents/EnterVideo";
|
||||
import EnterToFloorOne from "./videoComponents/EnterToFloor1";
|
||||
import EnterToFloorTwo from "./videoComponents/EnterToFloor2";
|
||||
import FloorOneToTwo from "./videoComponents/Floor1To2";
|
||||
import FloorTwoToOne from "./videoComponents/Floor2To1";
|
||||
import { useRef, useEffect, useReducer } from "react";
|
||||
import { AnimatePresence } from "framer-motion";
|
||||
|
||||
const initOpacity = {
|
||||
enterVideo: 1,
|
||||
enterToFloorOne: 0,
|
||||
enterToFloorTwo: 0,
|
||||
floorOneToTwo: 0,
|
||||
floorTwoToOne: 0,
|
||||
enterVideo: 1,
|
||||
enterToFloorOne: 0,
|
||||
enterToFloorTwo: 0,
|
||||
floorOneToTwo: 0,
|
||||
floorTwoToOne: 0,
|
||||
};
|
||||
const opacityReducer = (state, action) => {
|
||||
switch (action.type) {
|
||||
case 'enter-to-1': {
|
||||
return {
|
||||
...initOpacity,
|
||||
enterToFloorOne: 1,
|
||||
enterVideo: 0,
|
||||
};
|
||||
}
|
||||
case 'enter-to-2': {
|
||||
return {
|
||||
...initOpacity,
|
||||
enterToFloorTwo: 1,
|
||||
enterVideo: 0,
|
||||
};
|
||||
}
|
||||
case 'floor-1-to-2': {
|
||||
return {
|
||||
...initOpacity,
|
||||
floorOneToTwo: 1,
|
||||
enterToFloorOne: 0,
|
||||
enterVideo: 0,
|
||||
floorTwoToOne: 0,
|
||||
};
|
||||
}
|
||||
case 'floor-2-to-1': {
|
||||
return {
|
||||
...initOpacity,
|
||||
floorTwoToOne: 1,
|
||||
enterToFloorTwo: 0,
|
||||
floorOneToTwo: 0,
|
||||
enterVideo: 0,
|
||||
};
|
||||
}
|
||||
}
|
||||
switch (action.type) {
|
||||
case "enter-to-1": {
|
||||
return {
|
||||
...initOpacity,
|
||||
enterToFloorOne: 1,
|
||||
enterVideo: 0,
|
||||
};
|
||||
}
|
||||
case "enter-to-2": {
|
||||
return {
|
||||
...initOpacity,
|
||||
enterToFloorTwo: 1,
|
||||
enterVideo: 0,
|
||||
};
|
||||
}
|
||||
case "floor-1-to-2": {
|
||||
return {
|
||||
...initOpacity,
|
||||
floorOneToTwo: 1,
|
||||
enterToFloorOne: 0,
|
||||
enterVideo: 0,
|
||||
floorTwoToOne: 0,
|
||||
};
|
||||
}
|
||||
case "floor-2-to-1": {
|
||||
return {
|
||||
...initOpacity,
|
||||
floorTwoToOne: 1,
|
||||
enterToFloorTwo: 0,
|
||||
floorOneToTwo: 0,
|
||||
enterVideo: 0,
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function VideoContainer(props) {
|
||||
const floor = props.floor || null;
|
||||
const lastFloor = useRef(null);
|
||||
const [opacity, dispatch] = useReducer(opacityReducer, initOpacity);
|
||||
const floor = props.floor || null;
|
||||
const lastFloor = useRef(null);
|
||||
const [opacity, dispatch] = useReducer(opacityReducer, initOpacity);
|
||||
|
||||
useEffect(() => {
|
||||
if (floor) {
|
||||
if (floor == 1) {
|
||||
if (lastFloor.current == 2) {
|
||||
dispatch({ type: 'floor-2-to-1' });
|
||||
} else {
|
||||
dispatch({ type: 'enter-to-1' });
|
||||
}
|
||||
} else if (floor == 2) {
|
||||
if (lastFloor.current == 1) {
|
||||
dispatch({ type: 'floor-1-to-2' });
|
||||
} else {
|
||||
dispatch({ type: 'enter-to-2' });
|
||||
}
|
||||
}
|
||||
lastFloor.current = floor;
|
||||
}
|
||||
}, [floor]);
|
||||
useEffect(() => {
|
||||
if (floor) {
|
||||
if (floor == 1) {
|
||||
if (lastFloor.current == 2) {
|
||||
dispatch({ type: "floor-2-to-1" });
|
||||
} else {
|
||||
dispatch({ type: "enter-to-1" });
|
||||
}
|
||||
} else if (floor == 2) {
|
||||
if (lastFloor.current == 1) {
|
||||
dispatch({ type: "floor-1-to-2" });
|
||||
} else {
|
||||
dispatch({ type: "enter-to-2" });
|
||||
}
|
||||
}
|
||||
lastFloor.current = floor;
|
||||
}
|
||||
}, [floor]);
|
||||
|
||||
const enterToFloorOne = () => {
|
||||
// 更新层数
|
||||
props.onFloorUpdate(1);
|
||||
// floor1 one 立即显示，enter 延迟点消失
|
||||
dispatch({ type: 'enter-to-1' });
|
||||
};
|
||||
const enterToFloorOne = () => {
|
||||
// 更新层数
|
||||
props.onFloorUpdate(1);
|
||||
// floor1 one 立即显示，enter 延迟点消失
|
||||
dispatch({ type: "enter-to-1" });
|
||||
};
|
||||
|
||||
function handleEnterVideoEnd() {
|
||||
// console.log('video end');
|
||||
enterToFloorOne();
|
||||
}
|
||||
function handleEnterVideoEnd() {
|
||||
// console.log('video end');
|
||||
enterToFloorOne();
|
||||
}
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
<EnterVideo
|
||||
key="enter"
|
||||
onVideoEnd={handleEnterVideoEnd}
|
||||
opacity={opacity.enterVideo}
|
||||
/>
|
||||
<EnterToFloorOne key="enter-to-1" opacity={opacity.enterToFloorOne} />
|
||||
<EnterToFloorTwo key="enter-to-2" opacity={opacity.enterToFloorTwo} />
|
||||
<FloorOneToTwo key="1-to-2" opacity={opacity.floorOneToTwo} />
|
||||
<FloorTwoToOne key="2-to-1" opacity={opacity.floorTwoToOne} />
|
||||
</AnimatePresence>
|
||||
);
|
||||
return (
|
||||
<AnimatePresence>
|
||||
<EnterVideo
|
||||
key="enter"
|
||||
onVideoEnd={handleEnterVideoEnd}
|
||||
opacity={opacity.enterVideo}
|
||||
/>
|
||||
<EnterToFloorOne key="enter-to-1" opacity={opacity.enterToFloorOne} />
|
||||
<EnterToFloorTwo key="enter-to-2" opacity={opacity.enterToFloorTwo} />
|
||||
<FloorOneToTwo
|
||||
key="1-to-2"
|
||||
opacity={opacity.floorOneToTwo}
|
||||
floor={floor}
|
||||
/>
|
||||
<FloorTwoToOne key="2-to-1" opacity={opacity.floorTwoToOne} />
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
export default VideoContainer;
|
||||
|
||||
@ -19,7 +19,7 @@ function EnterToFloorOne(props) {
|
||||
setTimeout(() => {
|
||||
// console.log("开启enter的火播放");
|
||||
setFireCanPlay(true);
|
||||
}, 5000);
|
||||
}, 1800);
|
||||
}
|
||||
return () => {
|
||||
// console.log("关闭enter的火播放");
|
||||
@ -49,7 +49,7 @@ function EnterToFloorOne(props) {
|
||||
<source src="/video/floor1.webm" type="video/mp4" />
|
||||
</video>
|
||||
|
||||
{/* {fireCanPlay && fireDir == "东火" && (
|
||||
{fireCanPlay && fireDir == "东火" && (
|
||||
<video
|
||||
src="/video/fire_top.webm"
|
||||
muted
|
||||
@ -68,7 +68,7 @@ function EnterToFloorOne(props) {
|
||||
width={3900}
|
||||
style={{ position: "absolute", top: "-20px", left: "-20px" }}
|
||||
></video>
|
||||
)} */}
|
||||
)}
|
||||
|
||||
<TemperatureTop
|
||||
style={{
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { useRef, useEffect, useMemo, useState } from "react";
|
||||
import { useRef, useEffect, useState } from "react";
|
||||
import FeederStatus from "../../../../Common/Feeder";
|
||||
import TemperatureTop from "../../../../../components/Common/TemperatureTop";
|
||||
import TemperatureBottom from "../../../../Common/TemperatureBottom";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
function FloorOneToTwo(props) {
|
||||
const fireInfo = useSelector((state) => state.fireInfo);
|
||||
@ -13,6 +12,7 @@ function FloorOneToTwo(props) {
|
||||
|
||||
const vd = useRef(null);
|
||||
const show = props.opacity || 0;
|
||||
const speed = "s";
|
||||
|
||||
useEffect(() => {
|
||||
if (show) {
|
||||
@ -20,7 +20,7 @@ function FloorOneToTwo(props) {
|
||||
setTimeout(() => {
|
||||
// console.log("开启1-2的火播放");
|
||||
setFireCanPlay(true);
|
||||
}, 3000);
|
||||
}, 2000);
|
||||
}
|
||||
if (!show) setFireCanPlay(false);
|
||||
return () => {
|
||||
@ -81,6 +81,8 @@ function FloorOneToTwo(props) {
|
||||
width: "2380px",
|
||||
zIndex: 0,
|
||||
}}
|
||||
speed={speed}
|
||||
floor={props.floor}
|
||||
/>
|
||||
<FeederStatus />
|
||||
</motion.div>
|
||||
|
||||
@ -19,7 +19,7 @@ function FloorTwoToOne(props) {
|
||||
setTimeout(() => {
|
||||
// console.log("开启2-1的火播放");
|
||||
setFireCanPlay(true);
|
||||
}, 3000);
|
||||
}, 1800);
|
||||
}
|
||||
if (!show) setFireCanPlay(false);
|
||||
return () => {
|
||||
|
||||
@ -1,104 +1,120 @@
|
||||
import EnterVideo from './videoComponents/EnterVideo';
|
||||
import EnterToFloorOne from './videoComponents/EnterToFloor1';
|
||||
import EnterToFloorTwo from './videoComponents/EnterToFloor2';
|
||||
import FloorOneToTwo from './videoComponents/Floor1To2';
|
||||
import FloorTwoToOne from './videoComponents/Floor2To1';
|
||||
import { useRef, useEffect, useReducer } from 'react';
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
import EnterVideo from "./videoComponents/EnterVideo";
|
||||
import EnterToFloorOne from "./videoComponents/EnterToFloor1";
|
||||
import EnterToFloorTwo from "./videoComponents/EnterToFloor2";
|
||||
import FloorOneToTwo from "./videoComponents/Floor1To2";
|
||||
import FloorTwoToOne from "./videoComponents/Floor2To1";
|
||||
import { useRef, useEffect, useReducer } from "react";
|
||||
import { AnimatePresence } from "framer-motion";
|
||||
|
||||
const initOpacity = {
|
||||
enterVideo: 1,
|
||||
enterToFloorOne: 0,
|
||||
enterToFloorTwo: 0,
|
||||
floorOneToTwo: 0,
|
||||
floorTwoToOne: 0,
|
||||
enterVideo: 1,
|
||||
enterToFloorOne: 0,
|
||||
enterToFloorTwo: 0,
|
||||
floorOneToTwo: 0,
|
||||
floorTwoToOne: 0,
|
||||
};
|
||||
const opacityReducer = (state, action) => {
|
||||
switch (action.type) {
|
||||
case 'enter-to-1': {
|
||||
return {
|
||||
...initOpacity,
|
||||
enterToFloorOne: 1,
|
||||
enterVideo: 0,
|
||||
};
|
||||
}
|
||||
case 'enter-to-2': {
|
||||
return {
|
||||
...initOpacity,
|
||||
enterToFloorTwo: 1,
|
||||
enterVideo: 0,
|
||||
};
|
||||
}
|
||||
case 'floor-1-to-2': {
|
||||
return {
|
||||
...initOpacity,
|
||||
floorOneToTwo: 1,
|
||||
enterToFloorOne: 0,
|
||||
enterVideo: 0,
|
||||
floorTwoToOne: 0,
|
||||
};
|
||||
}
|
||||
case 'floor-2-to-1': {
|
||||
return {
|
||||
...initOpacity,
|
||||
floorTwoToOne: 1,
|
||||
enterToFloorTwo: 0,
|
||||
floorOneToTwo: 0,
|
||||
enterVideo: 0,
|
||||
};
|
||||
}
|
||||
}
|
||||
switch (action.type) {
|
||||
case "enter-to-1": {
|
||||
return {
|
||||
...initOpacity,
|
||||
enterToFloorOne: 1,
|
||||
enterVideo: 0,
|
||||
};
|
||||
}
|
||||
case "enter-to-2": {
|
||||
return {
|
||||
...initOpacity,
|
||||
enterToFloorTwo: 1,
|
||||
enterVideo: 0,
|
||||
};
|
||||
}
|
||||
case "floor-1-to-2": {
|
||||
return {
|
||||
...initOpacity,
|
||||
floorOneToTwo: 1,
|
||||
enterToFloorOne: 0,
|
||||
enterVideo: 0,
|
||||
floorTwoToOne: 0,
|
||||
};
|
||||
}
|
||||
case "floor-2-to-1": {
|
||||
return {
|
||||
...initOpacity,
|
||||
floorTwoToOne: 1,
|
||||
enterToFloorTwo: 0,
|
||||
floorOneToTwo: 0,
|
||||
enterVideo: 0,
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function VideoContainer(props) {
|
||||
const floor = props.floor || null;
|
||||
const lastFloor = useRef(null);
|
||||
const [opacity, dispatch] = useReducer(opacityReducer, initOpacity);
|
||||
const floor = props.floor || null;
|
||||
const preFloor = props.preFloor.current || null;
|
||||
const lastFloor = useRef(null);
|
||||
const [opacity, dispatch] = useReducer(opacityReducer, initOpacity);
|
||||
|
||||
useEffect(() => {
|
||||
if (floor) {
|
||||
if (floor == 1) {
|
||||
if (lastFloor.current == 2) {
|
||||
dispatch({ type: 'floor-2-to-1' });
|
||||
} else {
|
||||
dispatch({ type: 'enter-to-1' });
|
||||
}
|
||||
} else if (floor == 2) {
|
||||
if (lastFloor.current == 1) {
|
||||
dispatch({ type: 'floor-1-to-2' });
|
||||
} else {
|
||||
dispatch({ type: 'enter-to-2' });
|
||||
}
|
||||
}
|
||||
lastFloor.current = floor;
|
||||
}
|
||||
}, [floor]);
|
||||
useEffect(() => {
|
||||
if (floor) {
|
||||
if (floor == 1) {
|
||||
if (lastFloor.current == 2 || lastFloor.current == 3) {
|
||||
dispatch({ type: "floor-2-to-1" });
|
||||
} else {
|
||||
dispatch({ type: "enter-to-1" });
|
||||
}
|
||||
} else if (floor == 2) {
|
||||
if (lastFloor.current == 1) {
|
||||
dispatch({ type: "floor-1-to-2" });
|
||||
} else if (lastFloor.current == 3) {
|
||||
// 视频不变画面隐藏,通过判断floor的值隐藏3显示2
|
||||
} else {
|
||||
dispatch({ type: "enter-to-2" });
|
||||
}
|
||||
} else if (floor == 3) {
|
||||
if (lastFloor.current == 1) {
|
||||
dispatch({ type: "floor-1-to-2" });
|
||||
} else if (lastFloor.current == 2) {
|
||||
// 视频不变画面隐藏，通过判断floor的值隐藏2显示3
|
||||
} else {
|
||||
dispatch({ type: "enter-to-2" });
|
||||
}
|
||||
}
|
||||
lastFloor.current = floor;
|
||||
}
|
||||
}, [floor]);
|
||||
|
||||
const enterToFloorOne = () => {
|
||||
// 更新层数
|
||||
props.onFloorUpdate(1);
|
||||
// floor1 one 立即显示，enter 延迟点消失
|
||||
dispatch({ type: 'enter-to-1' });
|
||||
};
|
||||
const enterToFloorOne = () => {
|
||||
// 更新层数
|
||||
props.onFloorUpdate(1);
|
||||
// floor1 one 立即显示，enter 延迟点消失
|
||||
dispatch({ type: "enter-to-1" });
|
||||
};
|
||||
|
||||
function handleEnterVideoEnd() {
|
||||
// console.log('video end');
|
||||
enterToFloorOne();
|
||||
}
|
||||
function handleEnterVideoEnd() {
|
||||
// console.log('video end');
|
||||
enterToFloorOne();
|
||||
}
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
<EnterVideo
|
||||
key="enter"
|
||||
onVideoEnd={handleEnterVideoEnd}
|
||||
opacity={opacity.enterVideo}
|
||||
/>
|
||||
<EnterToFloorOne key="enter-to-1" opacity={opacity.enterToFloorOne} />
|
||||
<EnterToFloorTwo key="enter-to-2" opacity={opacity.enterToFloorTwo} />
|
||||
<FloorOneToTwo key="1-to-2" opacity={opacity.floorOneToTwo} />
|
||||
<FloorTwoToOne key="2-to-1" opacity={opacity.floorTwoToOne} />
|
||||
</AnimatePresence>
|
||||
);
|
||||
return (
|
||||
<AnimatePresence>
|
||||
<EnterVideo
|
||||
key="enter"
|
||||
onVideoEnd={handleEnterVideoEnd}
|
||||
opacity={opacity.enterVideo}
|
||||
/>
|
||||
<EnterToFloorOne key="enter-to-1" opacity={opacity.enterToFloorOne} />
|
||||
<EnterToFloorTwo key="enter-to-2" opacity={opacity.enterToFloorTwo} />
|
||||
<FloorOneToTwo
|
||||
key="1-to-2"
|
||||
opacity={opacity.floorOneToTwo}
|
||||
floor={floor}
|
||||
preFloor={preFloor}
|
||||
/>
|
||||
<FloorTwoToOne key="2-to-1" opacity={opacity.floorTwoToOne} />
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
export default VideoContainer;
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
import { useState } from "react";
|
||||
import { useState, useRef } from "react";
|
||||
import cls from "./index.module.css";
|
||||
import Chart2 from "../../../Common/TimeFireDir";
|
||||
import VideoContainer from "./VideoContainer";
|
||||
|
||||
function KilnCenter() {
|
||||
const [floor, setFloor] = useState(0);
|
||||
|
||||
const preFloor = useRef();
|
||||
function onFloorUpdate(flr) {
|
||||
preFloor.current = floor;
|
||||
setFloor(flr);
|
||||
}
|
||||
|
||||
@ -29,8 +30,6 @@ function KilnCenter() {
|
||||
<Chart2 />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{/* menu */}
|
||||
<div
|
||||
className="subMenu"
|
||||
@ -42,7 +41,7 @@ function KilnCenter() {
|
||||
>
|
||||
<div
|
||||
className={
|
||||
"flr flr1 " + cls.menuItem + " " + (floor == 1 ? cls.active : "")
|
||||
"flr flr1 " + cls.menuItem + " " + (floor === 1 ? cls.active : "")
|
||||
}
|
||||
onClick={() => onFloorUpdate(1)}
|
||||
>
|
||||
@ -50,7 +49,7 @@ function KilnCenter() {
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
"flr flr2 " + cls.menuItem + " " + (floor == 2 ? cls.active : "")
|
||||
"flr flr2 " + cls.menuItem + " " + (floor === 2 ? cls.active : "")
|
||||
}
|
||||
onClick={() => onFloorUpdate(2)}
|
||||
>
|
||||
@ -58,7 +57,7 @@ function KilnCenter() {
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
"flr flr2 " + cls.menuItem + " " + (floor == 3 ? cls.active : "")
|
||||
"flr flr2 " + cls.menuItem + " " + (floor === 3 ? cls.active : "")
|
||||
}
|
||||
onClick={() => onFloorUpdate(3)}
|
||||
>
|
||||
@ -67,12 +66,28 @@ function KilnCenter() {
|
||||
</div>
|
||||
|
||||
{/* 颜色指示图 */}
|
||||
<div style={{ position: "absolute", top: "30px", right:"450px" ,width: "300px", height:"41px" }}>
|
||||
<img src={require("../../../../assets/tempIntr.png")} alt="" style={{width:"300px",height:"41px"}}/>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "30px",
|
||||
right: "450px",
|
||||
width: "300px",
|
||||
height: "41px",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={require("../../../../assets/tempIntr.png")}
|
||||
alt=""
|
||||
style={{ width: "300px", height: "41px" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* video */}
|
||||
<VideoContainer onFloorUpdate={onFloorUpdate} floor={floor} />
|
||||
<VideoContainer
|
||||
onFloorUpdate={onFloorUpdate}
|
||||
floor={floor}
|
||||
preFloor={preFloor}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -20,7 +20,7 @@ function EnterToFloorOne(props) {
|
||||
setTimeout(() => {
|
||||
// console.log("开启enter的火播放");
|
||||
setFireCanPlay(true);
|
||||
}, 5000);
|
||||
}, 1800);
|
||||
}
|
||||
return () => {
|
||||
// console.log("关闭enter的火播放");
|
||||
@ -50,14 +50,19 @@ function EnterToFloorOne(props) {
|
||||
<source src="/video/floor1.webm" type="video/mp4" />
|
||||
</video>
|
||||
|
||||
{/* {fireCanPlay && fireDir == "东火" && (
|
||||
{fireCanPlay && fireDir == "东火" && (
|
||||
<video
|
||||
src="/video/fire_top.webm"
|
||||
muted
|
||||
autoPlay
|
||||
loop
|
||||
width={3900}
|
||||
style={{ position: "absolute", top: "-20px", left: "-20px" }}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "-20px",
|
||||
left: "-20px",
|
||||
zIndex: 9,
|
||||
}}
|
||||
></video>
|
||||
)}
|
||||
{fireCanPlay && fireDir == "西火" && (
|
||||
@ -67,9 +72,14 @@ function EnterToFloorOne(props) {
|
||||
autoPlay
|
||||
loop
|
||||
width={3900}
|
||||
style={{ position: "absolute", top: "-20px", left: "-20px" }}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "-20px",
|
||||
left: "-20px",
|
||||
zIndex: 9,
|
||||
}}
|
||||
></video>
|
||||
)} */}
|
||||
)}
|
||||
|
||||
<TopColorBlockEnter />
|
||||
|
||||
@ -78,7 +88,7 @@ function EnterToFloorOne(props) {
|
||||
top: "218px",
|
||||
left: "678px",
|
||||
width: "2380px",
|
||||
zIndex: 0,
|
||||
zIndex: 10,
|
||||
}}
|
||||
/>
|
||||
<FeederStatus />
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { useRef, useEffect, useMemo, useState } from "react";
|
||||
import { useRef, useEffect, useState } from "react";
|
||||
import FeederStatus from "../../../../Common/Feeder";
|
||||
import TemperatureTop from "../../../../../components/Common/TemperatureTop";
|
||||
import TemperatureBottom from "../../../../Common/TemperatureBottom";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
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);
|
||||
@ -14,14 +14,37 @@ function FloorOneToTwo(props) {
|
||||
|
||||
const vd = useRef(null);
|
||||
const show = props.opacity || 0;
|
||||
|
||||
// 是否显示溶液速度标签的内容
|
||||
// 池底温度和溶液速度写在一个页面上
|
||||
const showSpeed = props.floor == 3 ? true : false; //显示3
|
||||
const showBottom = props.floor == 2 ? true : false; //显示2
|
||||
const speed = props.preFloor == 2 || props.preFloor == 3 ? "f" : "s";
|
||||
const [speedAn, setSpeedAn] = useState({});
|
||||
useEffect(() => {
|
||||
// 2，3互切不用展示动画
|
||||
if (speed === "f") {
|
||||
setSpeedAn({
|
||||
opacity: [0, 0, 0, 0.6, 1],
|
||||
transition: { duration: 0.3, delay: 0 },
|
||||
});
|
||||
} else {
|
||||
if (props.floor === 3) {
|
||||
setSpeedAn({
|
||||
opacity: [0, 0, 0, 0.6, 1],
|
||||
transition: { duration: 0.3, delay: 1.5 },
|
||||
});
|
||||
} else {
|
||||
setSpeedAn({});
|
||||
}
|
||||
}
|
||||
}, [props.floor]);
|
||||
useEffect(() => {
|
||||
if (show) {
|
||||
vd.current.play();
|
||||
setTimeout(() => {
|
||||
// console.log("开启1-2的火播放");
|
||||
setFireCanPlay(true);
|
||||
}, 3000);
|
||||
}, 2000);
|
||||
}
|
||||
if (!show) setFireCanPlay(false);
|
||||
return () => {
|
||||
@ -51,20 +74,27 @@ function FloorOneToTwo(props) {
|
||||
<video ref={vd} muted>
|
||||
<source src="/video/1to2.webm" type="video/mp4" />
|
||||
</video>
|
||||
{/* 窑炉的色块 */}
|
||||
{showBottom && (
|
||||
<BotttomColorBlock speed={speed} floor={props.floor} />
|
||||
)}
|
||||
|
||||
<BotttomColorBlock />
|
||||
|
||||
{fireCanPlay && fireDir == "东火" && (
|
||||
{showBottom && fireCanPlay && fireDir == "东火" && (
|
||||
<video
|
||||
src="/video/fire_top.webm"
|
||||
muted
|
||||
autoPlay
|
||||
loop
|
||||
width={3700}
|
||||
style={{ position: "absolute", top: "18px", left: "72px",zIndex: 9 }}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "18px",
|
||||
left: "72px",
|
||||
zIndex: 9,
|
||||
}}
|
||||
></video>
|
||||
)}
|
||||
{fireCanPlay && fireDir == "西火" && (
|
||||
{showBottom && fireCanPlay && fireDir == "西火" && (
|
||||
// {fireCanPlay && (
|
||||
<video
|
||||
src="/video/fire_down.webm"
|
||||
@ -72,19 +102,49 @@ function FloorOneToTwo(props) {
|
||||
autoPlay
|
||||
loop
|
||||
width={3780}
|
||||
style={{ position: "absolute", top: "-24px", left: "12px",zIndex: 9 }}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "-24px",
|
||||
left: "12px",
|
||||
zIndex: 9,
|
||||
}}
|
||||
></video>
|
||||
)}
|
||||
|
||||
<TemperatureBottom
|
||||
style={{
|
||||
top: "208px",
|
||||
// left: "638px",
|
||||
left: "690px",
|
||||
width: "2380px",
|
||||
zIndex: 10,
|
||||
}}
|
||||
/>
|
||||
{/* 温度组件 */}
|
||||
{showBottom && (
|
||||
<TemperatureBottom
|
||||
style={{
|
||||
top: "208px",
|
||||
// left: "638px",
|
||||
left: "690px",
|
||||
width: "2380px",
|
||||
zIndex: 10,
|
||||
}}
|
||||
speed={speed}
|
||||
floor={props.floor}
|
||||
/>
|
||||
)}
|
||||
{/* 溶液速度色块 */}
|
||||
{showSpeed && (
|
||||
<motion.div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "242px",
|
||||
left: "445px",
|
||||
zIndex: "999",
|
||||
}}
|
||||
animate={speedAn}
|
||||
>
|
||||
<img
|
||||
src={image}
|
||||
alt=""
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ transform: "scale(0.583, 0.593)" }}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
<FeederStatus />
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
@ -20,7 +20,7 @@ function FloorTwoToOne(props) {
|
||||
setTimeout(() => {
|
||||
// console.log("开启2-1的火播放");
|
||||
setFireCanPlay(true);
|
||||
}, 3000);
|
||||
}, 1800);
|
||||
}
|
||||
if (!show) setFireCanPlay(false);
|
||||
return () => {
|
||||
@ -59,7 +59,12 @@ function FloorTwoToOne(props) {
|
||||
autoPlay
|
||||
loop
|
||||
width={3800}
|
||||
style={{ position: "absolute", top: "10px", left: "0px",zIndex: 9, }}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "10px",
|
||||
left: "0px",
|
||||
zIndex: 9,
|
||||
}}
|
||||
></video>
|
||||
)}
|
||||
{fireCanPlay && fireDir == "西火" && (
|
||||
@ -70,7 +75,12 @@ function FloorTwoToOne(props) {
|
||||
autoPlay
|
||||
loop
|
||||
width={3800}
|
||||
style={{ position: "absolute", top: "-12px", left: "-10px",zIndex: 9, }}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "-12px",
|
||||
left: "-10px",
|
||||
zIndex: 9,
|
||||
}}
|
||||
></video>
|
||||
)}
|
||||
|
||||
|
||||
@ -1,127 +1,369 @@
|
||||
|
||||
import { useSelector } from "react-redux";
|
||||
import React from 'react';
|
||||
import React from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { ReactComponent as B1 } from './pic/b1.svg'
|
||||
import { ReactComponent as B2 } from './pic/b2.svg'
|
||||
import { ReactComponent as B3 } from './pic/b3.svg'
|
||||
import { ReactComponent as B4 } from './pic/b4.svg'
|
||||
import { ReactComponent as B5 } from './pic/b5.svg'
|
||||
import { ReactComponent as B6 } from './pic/b6.svg'
|
||||
import { ReactComponent as B7 } from './pic/b7.svg'
|
||||
import { ReactComponent as B8 } from './pic/b8.svg'
|
||||
import { ReactComponent as T1 } from './pic/t1.svg'
|
||||
import { ReactComponent as T2 } from './pic/t2.svg'
|
||||
import { ReactComponent as T3 } from './pic/t3.svg'
|
||||
import { ReactComponent as T4 } from './pic/t4.svg'
|
||||
import { ReactComponent as T5 } from './pic/t5.svg'
|
||||
import { ReactComponent as T6 } from './pic/t6.svg'
|
||||
import { ReactComponent as T7 } from './pic/t7.svg'
|
||||
import { ReactComponent as T8 } from './pic/t8.svg'
|
||||
|
||||
const BotttomColorBlock = ({ condition }) => {
|
||||
import { ReactComponent as B1 } from "./pic/b1.svg";
|
||||
import { ReactComponent as B2 } from "./pic/b2.svg";
|
||||
import { ReactComponent as B3 } from "./pic/b3.svg";
|
||||
import { ReactComponent as B4 } from "./pic/b4.svg";
|
||||
import { ReactComponent as B5 } from "./pic/b5.svg";
|
||||
import { ReactComponent as B6 } from "./pic/b6.svg";
|
||||
import { ReactComponent as B7 } from "./pic/b7.svg";
|
||||
import { ReactComponent as B8 } from "./pic/b8.svg";
|
||||
import { ReactComponent as T1 } from "./pic/t1.svg";
|
||||
import { ReactComponent as T2 } from "./pic/t2.svg";
|
||||
import { ReactComponent as T3 } from "./pic/t3.svg";
|
||||
import { ReactComponent as T4 } from "./pic/t4.svg";
|
||||
import { ReactComponent as T5 } from "./pic/t5.svg";
|
||||
import { ReactComponent as T6 } from "./pic/t6.svg";
|
||||
import { ReactComponent as T7 } from "./pic/t7.svg";
|
||||
import { ReactComponent as T8 } from "./pic/t8.svg";
|
||||
|
||||
const BotttomColorBlock = (props) => {
|
||||
const tempBottom = useSelector((state) => state.temperature.bottom);
|
||||
const speed = props.speed;
|
||||
const floor = props.floor;
|
||||
const [speedAn, setSpeedAn] = useState({});
|
||||
useEffect(() => {
|
||||
// 2，3互切不用展示动画
|
||||
if (speed === "f") {
|
||||
setSpeedAn({});
|
||||
} else {
|
||||
if (floor === 2) {
|
||||
setSpeedAn({
|
||||
opacity: [0, 0, 0, 0.6, 1],
|
||||
transition: { duration: 0.3, delay: 1.8 },
|
||||
});
|
||||
} else {
|
||||
setSpeedAn({});
|
||||
}
|
||||
}
|
||||
}, [floor]);
|
||||
function returnColor(n) {
|
||||
let num = Number(tempBottom[n].slice(0,tempBottom[n].length - 1))
|
||||
if (num <= 200) {
|
||||
return 'rgba(42, 229, 93, 0.7)';
|
||||
} else if (num >200 && num <=400) {
|
||||
return 'rgba(133, 203, 50, 0.7)';
|
||||
} else if (num >400 && num <=600) {
|
||||
return 'rgba(255, 182, 3, 0.7)';
|
||||
} else if (num >600 && num <=800) {
|
||||
return 'rgba(255, 135, 16, 0.7)';
|
||||
} else if (num >800 && num <=1000) {
|
||||
return 'rgba(249, 89, 7, 0.7)';
|
||||
} else if (num >1000 && num <=1200) {
|
||||
return 'rgba(255, 40, 40, 0.7)';
|
||||
} else if (num >1200 && num <=1400) {
|
||||
return 'rgba(255, 38, 112, 0.7)';
|
||||
} else if (num >1400 && num <=1600) {
|
||||
return 'rgba(163, 23, 187, 0.7)';
|
||||
} else if (num >1600 && num <=1800) {
|
||||
return 'rgba(119, 14, 234, 0.7)';
|
||||
} else if (num >1800) {
|
||||
return 'rgba(77, 11, 255, 0.7)';
|
||||
let num = Number(tempBottom[n].slice(0, tempBottom[n].length - 1));
|
||||
if (num <= 100) {
|
||||
return "rgba(96, 0, 189, 0.7)";
|
||||
} else if (num > 100 && num <= 200) {
|
||||
return "rgba(102, 7, 255, 0.7)";
|
||||
} else if (num > 200 && num <= 300) {
|
||||
return "rgba(10, 20, 255, 0.7)";
|
||||
} else if (num > 300 && num <= 400) {
|
||||
return "rgba(7, 89, 255, 0.7)";
|
||||
} else if (num > 400 && num <= 500) {
|
||||
return "rgba(7, 139, 255, 0.7)";
|
||||
} else if (num > 500 && num <= 600) {
|
||||
return "rgba(7, 194, 255, 0.7)";
|
||||
} else if (num > 600 && num <= 700) {
|
||||
return "rgba(7, 255, 253, 0.7)";
|
||||
} else if (num > 700 && num <= 800) {
|
||||
return "rgba(7, 255, 205, 0.7)";
|
||||
} else if (num > 800 && num <= 900) {
|
||||
return "rgba(20, 237, 127, 0.7)";
|
||||
} else if (num > 900 && num <= 1000) {
|
||||
return "rgba(0, 193, 39, 0.7)";
|
||||
} else if (num > 1000 && num <= 1100) {
|
||||
return "rgba(147, 210, 1, 0.7)";
|
||||
} else if (num > 1100 && num <= 1200) {
|
||||
return "rgba(206, 206, 0, 0.7)";
|
||||
} else if (num > 1200 && num <= 1300) {
|
||||
return "rgba(255, 226, 13, 0.7)";
|
||||
} else if (num > 1300 && num <= 1400) {
|
||||
return "rgba(249, 240, 146, 0.7)";
|
||||
} else if (num > 1400 && num <= 1500) {
|
||||
return "rgba(250, 204, 93, 0.7)";
|
||||
} else if (num > 1500 && num <= 1600) {
|
||||
return "rgba(240, 139, 32, 0.7)";
|
||||
} else if (num > 1600 && num <= 1700) {
|
||||
return "rgba(241, 88, 26, 0.7)";
|
||||
} else if (num > 1700 && num <= 1800) {
|
||||
return "rgba(255, 0, 0, 0.7)";
|
||||
} else if (num > 1800 && num <= 1900) {
|
||||
return "rgba(182, 0, 0, 0.7)";
|
||||
} else if (num > 1900) {
|
||||
return "rgba(140, 0, 33, 0.7)";
|
||||
}
|
||||
}
|
||||
function returnColor2(n) {
|
||||
let num = Number(tempBottom[n].slice(0,tempBottom[n].length - 1))
|
||||
if (num <= 200) {
|
||||
return 'rgba(42, 229, 93, 0.9)';
|
||||
} else if (num >200 && num <=400) {
|
||||
return 'rgba(133, 203, 50, 0.9)';
|
||||
} else if (num >400 && num <=600) {
|
||||
return 'rgba(255, 182, 3, 0.9)';
|
||||
} else if (num >600 && num <=800) {
|
||||
return 'rgba(255, 135, 16, 0.9)';
|
||||
} else if (num >800 && num <=1000) {
|
||||
return 'rgba(249, 89, 7, 0.9)';
|
||||
} else if (num >1000 && num <=1200) {
|
||||
return 'rgba(255, 40, 40, 0.9)';
|
||||
} else if (num >1200 && num <=1400) {
|
||||
return 'rgba(255, 38, 112, 0.9)';
|
||||
} else if (num >1400 && num <=1600) {
|
||||
return 'rgba(163, 23, 187, 0.9)';
|
||||
} else if (num >1600 && num <=1800) {
|
||||
return 'rgba(119, 14, 234, 0.9)';
|
||||
} else if (num >1800) {
|
||||
return 'rgba(77, 11, 255, 0.9)';
|
||||
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 (
|
||||
<svg width="2050px" height="700px" style={{position: "absolute", top: "320px", left: "1100px", zIndex:0}}>
|
||||
<svg
|
||||
width="2050px"
|
||||
height="700px"
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "320px",
|
||||
left: "1100px",
|
||||
zIndex: 0,
|
||||
}}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="Gradient" x1="0" x2="1" y1="0" y2="0">
|
||||
<stop offset="0%" stop-color={returnColor2('TE302')} />
|
||||
<stop offset="7%" stop-color={returnColor2('TE304')} />
|
||||
<stop offset="14%" stop-color={returnColor2('TE306')} />
|
||||
<stop offset="21%" stop-color={returnColor2('TE308')} />
|
||||
<stop offset="28%" stop-color={returnColor2('TE309')} />
|
||||
<stop offset="35%" stop-color={returnColor2('TE310')} />
|
||||
<stop offset="42%" stop-color={returnColor2('TE312')} />
|
||||
<stop offset="49%" stop-color={returnColor2('TE314')} />
|
||||
<stop offset="56%" stop-color={returnColor2('TE315')} />
|
||||
<stop offset="63%" stop-color={returnColor2('TE316')} />
|
||||
<stop offset="70%" stop-color={returnColor2('TE318')} />
|
||||
<stop offset="77%" stop-color={returnColor2('TE321')} />
|
||||
<stop offset="84%" stop-color={returnColor2('TE331')} />
|
||||
<stop offset="91%" stop-color={returnColor2('TE332')} />
|
||||
<stop offset="100%" stop-color={returnColor2('TE332')} />
|
||||
<stop offset="0%" stop-color={returnColor2("TE302")} />
|
||||
<stop offset="7%" stop-color={returnColor2("TE304")} />
|
||||
<stop offset="14%" stop-color={returnColor2("TE306")} />
|
||||
<stop offset="21%" stop-color={returnColor2("TE308")} />
|
||||
<stop offset="28%" stop-color={returnColor2("TE309")} />
|
||||
<stop offset="35%" stop-color={returnColor2("TE310")} />
|
||||
<stop offset="42%" stop-color={returnColor2("TE312")} />
|
||||
<stop offset="49%" stop-color={returnColor2("TE314")} />
|
||||
<stop offset="56%" stop-color={returnColor2("TE315")} />
|
||||
<stop offset="63%" stop-color={returnColor2("TE316")} />
|
||||
<stop offset="70%" stop-color={returnColor2("TE318")} />
|
||||
<stop offset="77%" stop-color={returnColor2("TE321")} />
|
||||
<stop offset="84%" stop-color={returnColor2("TE331")} />
|
||||
<stop offset="91%" stop-color={returnColor2("TE332")} />
|
||||
<stop offset="100%" stop-color={returnColor2("TE332")} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<polygon points="65 251,1515 251,1524 311,1640 311,1645 290,1609 90,1650 90,1650 95,1758 95,1760 107,1665 106,1658 130,1669 190,1865 190,1867 200,1685 200,1678 223,1693 313,1990 315,1992 325,1710 325,1703 347,1717 430,1910 430,1915 446,1731 445,1725 470,1738 544,1856 544,1860 562,1755 562,1752 572,1700 572,1655 340,1543 340,1534 360,1540 395,1080 397,1080 390,1024 390,1022 398,962 398,962 390,908 390,908 398,840 398,840 390,786 390,786 398,720 398,720 390,665 390,665 398,598 398,598 390,542 390,542 398,476 398,476 390,420 390,420 398,354 398,354 391,296 391,296 400,228 400,228 392,48 392" fill="url(#Gradient)" />
|
||||
</svg>)
|
||||
<polygon
|
||||
points="65 251,1515 251,1524 311,1640 311,1645 290,1609 90,1650 90,1650 95,1758 95,1760 107,1665 106,1658 130,1669 190,1865 190,1867 200,1685 200,1678 223,1693 313,1990 315,1992 325,1710 325,1703 347,1717 430,1910 430,1915 446,1731 445,1725 470,1738 544,1856 544,1860 562,1755 562,1752 572,1700 572,1655 340,1543 340,1534 360,1540 395,1080 397,1080 390,1024 390,1022 398,962 398,962 390,908 390,908 398,840 398,840 390,786 390,786 398,720 398,720 390,665 390,665 398,598 398,598 390,542 390,542 398,476 398,476 390,420 390,420 398,354 398,354 391,296 391,296 400,228 400,228 392,48 392"
|
||||
fill="url(#Gradient)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
animate={{
|
||||
opacity: [0, 0, 0, 0.6, 1],
|
||||
transition: { duration: 0.3, delay: 2 },
|
||||
}}
|
||||
>
|
||||
<motion.div animate={speedAn}>
|
||||
<BigSvg />
|
||||
<B1 style={{fill:returnColor('TE334'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "5px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<B2 style={{fill:returnColor('TE336'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "9px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<B3 style={{fill:returnColor('TE338'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "10px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<B4 style={{fill:returnColor('TE340'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "12px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<B5 style={{fill:returnColor('TE342'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "14px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<B6 style={{fill:returnColor('TE344'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "16px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<B7 style={{fill:returnColor('TE346'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "18px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<B8 style={{fill:returnColor('TE348'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "21px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<T1 style={{fill:returnColor('TE333'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "5px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<T2 style={{fill:returnColor('TE335'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "9px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<T3 style={{fill:returnColor('TE337'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "10px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<T4 style={{fill:returnColor('TE339'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "12px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<T5 style={{fill:returnColor('TE341'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "13px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<T6 style={{fill:returnColor('TE343'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "16px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<T7 style={{fill:returnColor('TE345'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "18px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<T8 style={{fill:returnColor('TE347'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "20px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<B1
|
||||
style={{
|
||||
fill: returnColor("TE334"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "5px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B2
|
||||
style={{
|
||||
fill: returnColor("TE336"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "9px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B3
|
||||
style={{
|
||||
fill: returnColor("TE338"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "10px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B4
|
||||
style={{
|
||||
fill: returnColor("TE340"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "12px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B5
|
||||
style={{
|
||||
fill: returnColor("TE342"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "14px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B6
|
||||
style={{
|
||||
fill: returnColor("TE344"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "16px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B7
|
||||
style={{
|
||||
fill: returnColor("TE346"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "18px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B8
|
||||
style={{
|
||||
fill: returnColor("TE348"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "21px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<T1
|
||||
style={{
|
||||
fill: returnColor("TE333"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "5px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<T2
|
||||
style={{
|
||||
fill: returnColor("TE335"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "9px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<T3
|
||||
style={{
|
||||
fill: returnColor("TE337"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "10px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<T4
|
||||
style={{
|
||||
fill: returnColor("TE339"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "12px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<T5
|
||||
style={{
|
||||
fill: returnColor("TE341"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "13px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<T6
|
||||
style={{
|
||||
fill: returnColor("TE343"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "16px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<T7
|
||||
style={{
|
||||
fill: returnColor("TE345"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "18px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<T8
|
||||
style={{
|
||||
fill: returnColor("TE347"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "20px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BotttomColorBlock;
|
||||
|
||||
export default BotttomColorBlock;
|
||||
|
||||
@ -2,83 +2,78 @@ import cls from "./index.module.css";
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import getOptions from "./chart.config";
|
||||
import * as echarts from "echarts";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { useEffect,useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
function CommonChart(props) {
|
||||
const { dataSource } = props;
|
||||
|
||||
const data = dataSource.data
|
||||
const yName = dataSource.yName
|
||||
const data = dataSource.data || [];
|
||||
const yName = dataSource.yName;
|
||||
|
||||
let seriesData = {
|
||||
data: data,
|
||||
markLineData: [
|
||||
{ name: '标准线1', yAxis: dataSource.msg ? dataSource.msg.lte : 0 },
|
||||
{ name: '标准线2', yAxis: dataSource.msg ? dataSource.msg.gt : 0 }
|
||||
],
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: dataSource.areaColor0
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: dataSource.areaColor1
|
||||
}
|
||||
]),
|
||||
origin:'start'
|
||||
},
|
||||
}
|
||||
data: data,
|
||||
markLineData: [
|
||||
{ name: "标准线1", yAxis: dataSource.msg ? dataSource.msg.lte : 0 },
|
||||
{ name: "标准线2", yAxis: dataSource.msg ? dataSource.msg.gt : 0 },
|
||||
],
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: dataSource.areaColor0,
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: dataSource.areaColor1,
|
||||
},
|
||||
]),
|
||||
origin: "start",
|
||||
},
|
||||
};
|
||||
let pieces = [
|
||||
{
|
||||
lte: dataSource.msg ? dataSource.msg.lte : 0,
|
||||
color: '#FFCB59'
|
||||
color: "#FFCB59",
|
||||
},
|
||||
{
|
||||
gt: dataSource.msg ? dataSource.msg.lte : 0,
|
||||
lte: dataSource.msg ? dataSource.msg.gt : 0,
|
||||
color: dataSource.color
|
||||
color: dataSource.color,
|
||||
},
|
||||
{
|
||||
gt: dataSource.msg ? dataSource.msg.gt : 0,
|
||||
color: '#FFCB59'
|
||||
}
|
||||
]
|
||||
color: "#FFCB59",
|
||||
},
|
||||
];
|
||||
|
||||
const [yRange, setYRange] = useState([]);
|
||||
useEffect(() => {
|
||||
var standardValue = dataSource.msg.sp;
|
||||
var maxY = (standardValue*100 + dataSource.range[1]*100)/100
|
||||
var minY = (standardValue*100 + dataSource.range[0]*100)/100
|
||||
// 计算最大最小值是否超标
|
||||
const maxValue = Math.max(...data);
|
||||
const minValue = Math.min(...data);
|
||||
if (maxValue > maxY) {
|
||||
maxY = Math.ceil(maxValue)
|
||||
if (data.length > 0) {
|
||||
var standardValue = dataSource.msg.sp;
|
||||
var maxY = (standardValue * 100 + dataSource.range[1] * 100) / 100;
|
||||
var minY = (standardValue * 100 + dataSource.range[0] * 100) / 100;
|
||||
// 计算最大最小值是否超标
|
||||
const maxValue = Math.max(...data);
|
||||
const minValue = Math.min(...data);
|
||||
if (maxValue > maxY) {
|
||||
maxY = Math.ceil(maxValue);
|
||||
}
|
||||
if (minValue < minY) {
|
||||
minY = Math.floor(minValue);
|
||||
}
|
||||
setYRange([minY, maxY]);
|
||||
}
|
||||
if (minValue < minY) {
|
||||
minY = Math.floor(minValue)
|
||||
}
|
||||
setYRange([minY,maxY])
|
||||
},[dataSource])
|
||||
|
||||
|
||||
|
||||
}, [dataSource, data]);
|
||||
|
||||
return (
|
||||
<div className={cls.commonChart}>
|
||||
{(data.length > 0) && <ReactECharts
|
||||
option={getOptions(
|
||||
seriesData,
|
||||
pieces,
|
||||
yRange,
|
||||
yName
|
||||
)}
|
||||
style={{ height: "100%" }}
|
||||
/>}
|
||||
{(data.length <= 0) && (
|
||||
{data.length > 0 && (
|
||||
<ReactECharts
|
||||
option={getOptions(seriesData, pieces, yRange, yName)}
|
||||
style={{ height: "100%" }}
|
||||
/>
|
||||
)}
|
||||
{data.length <= 0 && (
|
||||
<p
|
||||
style={{
|
||||
paddingTop: "88px",
|
||||
|
||||
@ -5,36 +5,40 @@ import CommonChart from "./../CommonChart";
|
||||
import { useSelector } from "react-redux";
|
||||
function KilnPress(props) {
|
||||
const kilnOptimize = useSelector((state) => state.kilnOptimize);
|
||||
console.log(kilnOptimize)
|
||||
console.log('+++++++++++++==================')
|
||||
const dataSource = {
|
||||
color:'#12FFF5',
|
||||
yName:'Pa',
|
||||
areaColor0:'rgba(18, 255, 245, 0.4)',
|
||||
areaColor1:'rgba(18, 255, 245, 0)',
|
||||
msg:kilnOptimize.pressureAvg,
|
||||
data: kilnOptimize.pressureAvg ? kilnOptimize.pressureAvg.pressureAvgFor7Day : [],
|
||||
range:[-4,4]
|
||||
}
|
||||
color: "#12FFF5",
|
||||
yName: "Pa",
|
||||
areaColor0: "rgba(18, 255, 245, 0.4)",
|
||||
areaColor1: "rgba(18, 255, 245, 0)",
|
||||
msg: kilnOptimize.pressureAvg,
|
||||
data: kilnOptimize.pressureAvg
|
||||
? kilnOptimize.pressureAvg.pressureAvgFor7Day
|
||||
: [],
|
||||
range: [-4, 4],
|
||||
};
|
||||
return (
|
||||
<BottomBarItem
|
||||
icon="kilnPress"
|
||||
title="窑压趋势图"
|
||||
style={props.style}
|
||||
>
|
||||
<BottomBarItem icon="kilnPress" title="窑压趋势图" style={props.style}>
|
||||
{/* legend */}
|
||||
<div className={cls.legend}>
|
||||
<span className={cls.item}>
|
||||
<span className={cls.block} style={{backgroundColor:'#FFCB59'}}></span>标准值外
|
||||
<span
|
||||
className={cls.block}
|
||||
style={{ backgroundColor: "#FFCB59" }}
|
||||
></span>
|
||||
标准值外
|
||||
</span>
|
||||
<span className={cls.item}>
|
||||
<span className={cls.block} style={{backgroundColor:'#12FFF5'}}></span>标准值内
|
||||
<span
|
||||
className={cls.block}
|
||||
style={{ backgroundColor: "#12FFF5" }}
|
||||
></span>
|
||||
标准值内
|
||||
</span>
|
||||
</div>
|
||||
<div className={cls.chart}>
|
||||
<CommonChart dataSource={dataSource}/>
|
||||
<CommonChart dataSource={dataSource} />
|
||||
</div>
|
||||
</BottomBarItem>
|
||||
)
|
||||
);
|
||||
}
|
||||
export default KilnPress;
|
||||
export default KilnPress;
|
||||
|
||||
@ -0,0 +1,45 @@
|
||||
import { motion } from "framer-motion";
|
||||
import { useEffect, useState } from "react";
|
||||
import image from "./../../../../../assets/kilnSpeed.png";
|
||||
function LiquidSpeedColor(props) {
|
||||
const speed = props.speed;
|
||||
const floor = props.floor;
|
||||
const [speedAn, setSpeedAn] = useState({});
|
||||
useEffect(() => {
|
||||
// 2，3互切不用展示动画
|
||||
if (speed === "f") {
|
||||
setSpeedAn({});
|
||||
} else {
|
||||
if (floor === 3) {
|
||||
setSpeedAn({
|
||||
opacity: [0, 0, 0, 0.6, 1],
|
||||
transition: { duration: 0.3, delay: 1.5 },
|
||||
});
|
||||
} else {
|
||||
setSpeedAn({});
|
||||
}
|
||||
}
|
||||
}, [floor]);
|
||||
console.log(speedAn);
|
||||
console.log("speedAnspeedAnspeedAnspeedAnspeedAnspeedAnspeedAn");
|
||||
return (
|
||||
<motion.div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "242px",
|
||||
left: "445px",
|
||||
zIndex: 999,
|
||||
}}
|
||||
animate={speedAn}
|
||||
>
|
||||
<img
|
||||
src={image}
|
||||
alt=""
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ transform: "scale(0.583, 0.593)" }}
|
||||
/>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
export default LiquidSpeedColor;
|
||||
@ -1,131 +1,362 @@
|
||||
|
||||
import { useSelector } from "react-redux";
|
||||
import React from 'react';
|
||||
import React from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { ReactComponent as B1 } from './pic/b1.svg'
|
||||
import { ReactComponent as B2 } from './pic/b2.svg'
|
||||
import { ReactComponent as B3 } from './pic/b3.svg'
|
||||
import { ReactComponent as B4 } from './pic/b4.svg'
|
||||
import { ReactComponent as B5 } from './pic/b5.svg'
|
||||
import { ReactComponent as B6 } from './pic/b6.svg'
|
||||
import { ReactComponent as B7 } from './pic/b7.svg'
|
||||
import { ReactComponent as B8 } from './pic/b8.svg'
|
||||
import { ReactComponent as T1 } from './pic/t1.svg'
|
||||
import { ReactComponent as T2 } from './pic/t2.svg'
|
||||
import { ReactComponent as T3 } from './pic/t3.svg'
|
||||
import { ReactComponent as T4 } from './pic/t4.svg'
|
||||
import { ReactComponent as T5 } from './pic/t5.svg'
|
||||
import { ReactComponent as T6 } from './pic/t6.svg'
|
||||
import { ReactComponent as T7 } from './pic/t7.svg'
|
||||
import { ReactComponent as T8 } from './pic/t8.svg'
|
||||
|
||||
import { ReactComponent as B1 } from "./pic/b1.svg";
|
||||
import { ReactComponent as B2 } from "./pic/b2.svg";
|
||||
import { ReactComponent as B3 } from "./pic/b3.svg";
|
||||
import { ReactComponent as B4 } from "./pic/b4.svg";
|
||||
import { ReactComponent as B5 } from "./pic/b5.svg";
|
||||
import { ReactComponent as B6 } from "./pic/b6.svg";
|
||||
import { ReactComponent as B7 } from "./pic/b7.svg";
|
||||
import { ReactComponent as B8 } from "./pic/b8.svg";
|
||||
import { ReactComponent as T1 } from "./pic/t1.svg";
|
||||
import { ReactComponent as T2 } from "./pic/t2.svg";
|
||||
import { ReactComponent as T3 } from "./pic/t3.svg";
|
||||
import { ReactComponent as T4 } from "./pic/t4.svg";
|
||||
import { ReactComponent as T5 } from "./pic/t5.svg";
|
||||
import { ReactComponent as T6 } from "./pic/t6.svg";
|
||||
import { ReactComponent as T7 } from "./pic/t7.svg";
|
||||
import { ReactComponent as T8 } from "./pic/t8.svg";
|
||||
|
||||
const TopColorBlock = ({ condition }) => {
|
||||
const tempTop = useSelector((state) => state.temperature.top);
|
||||
function returnColor(n) {
|
||||
let num = Number(tempTop[n].slice(0,tempTop[n].length - 1))
|
||||
if (num <= 200) {
|
||||
return 'rgba(42, 229, 93, 0.7)';
|
||||
} else if (num >200 && num <=400) {
|
||||
return 'rgba(133, 203, 50, 0.7)';
|
||||
} else if (num >400 && num <=600) {
|
||||
return 'rgba(255, 182, 3, 0.7)';
|
||||
} else if (num >600 && num <=800) {
|
||||
return 'rgba(255, 135, 16, 0.7)';
|
||||
} else if (num >800 && num <=1000) {
|
||||
return 'rgba(249, 89, 7, 0.7)';
|
||||
} else if (num >1000 && num <=1200) {
|
||||
return 'rgba(255, 40, 40, 0.7)';
|
||||
} else if (num >1200 && num <=1400) {
|
||||
return 'rgba(255, 38, 112, 0.7)';
|
||||
} else if (num >1400 && num <=1600) {
|
||||
return 'rgba(163, 23, 187, 0.7)';
|
||||
} else if (num >1600 && num <=1800) {
|
||||
return 'rgba(119, 14, 234, 0.7)';
|
||||
} else if (num >1800) {
|
||||
return 'rgba(77, 11, 255, 0.7)';
|
||||
let num = Number(tempTop[n].slice(0, tempTop[n].length - 1));
|
||||
if (num <= 100) {
|
||||
return "rgba(96, 0, 189, 0.7)";
|
||||
} else if (num > 100 && num <= 200) {
|
||||
return "rgba(102, 7, 255, 0.7)";
|
||||
} else if (num > 200 && num <= 300) {
|
||||
return "rgba(10, 20, 255, 0.7)";
|
||||
} else if (num > 300 && num <= 400) {
|
||||
return "rgba(7, 89, 255, 0.7)";
|
||||
} else if (num > 400 && num <= 500) {
|
||||
return "rgba(7, 139, 255, 0.7)";
|
||||
} else if (num > 500 && num <= 600) {
|
||||
return "rgba(7, 194, 255, 0.7)";
|
||||
} else if (num > 600 && num <= 700) {
|
||||
return "rgba(7, 255, 253, 0.7)";
|
||||
} else if (num > 700 && num <= 800) {
|
||||
return "rgba(7, 255, 205, 0.7)";
|
||||
} else if (num > 800 && num <= 900) {
|
||||
return "rgba(20, 237, 127, 0.7)";
|
||||
} else if (num > 900 && num <= 1000) {
|
||||
return "rgba(0, 193, 39, 0.7)";
|
||||
} else if (num > 1000 && num <= 1100) {
|
||||
return "rgba(147, 210, 1, 0.7)";
|
||||
} else if (num > 1100 && num <= 1200) {
|
||||
return "rgba(206, 206, 0, 0.7)";
|
||||
} else if (num > 1200 && num <= 1300) {
|
||||
return "rgba(255, 226, 13, 0.7)";
|
||||
} else if (num > 1300 && num <= 1400) {
|
||||
return "rgba(249, 240, 146, 0.7)";
|
||||
} else if (num > 1400 && num <= 1500) {
|
||||
return "rgba(250, 204, 93, 0.7)";
|
||||
} else if (num > 1500 && num <= 1600) {
|
||||
return "rgba(240, 139, 32, 0.7)";
|
||||
} else if (num > 1600 && num <= 1700) {
|
||||
return "rgba(241, 88, 26, 0.7)";
|
||||
} else if (num > 1700 && num <= 1800) {
|
||||
return "rgba(255, 0, 0, 0.7)";
|
||||
} else if (num > 1800 && num <= 1900) {
|
||||
return "rgba(182, 0, 0, 0.7)";
|
||||
} else if (num > 1900) {
|
||||
return "rgba(140, 0, 33, 0.7)";
|
||||
}
|
||||
}
|
||||
function returnColor2(n) {
|
||||
let num = Number(tempTop[n].slice(0,tempTop[n].length - 1))
|
||||
if (num <= 200) {
|
||||
return 'rgba(42, 229, 93, 0.9)';
|
||||
} else if (num >200 && num <=400) {
|
||||
return 'rgba(133, 203, 50, 0.9)';
|
||||
} else if (num >400 && num <=600) {
|
||||
return 'rgba(255, 182, 3, 0.9)';
|
||||
} else if (num >600 && num <=800) {
|
||||
return 'rgba(255, 135, 16, 0.9)';
|
||||
} else if (num >800 && num <=1000) {
|
||||
return 'rgba(249, 89, 7, 0.9)';
|
||||
} else if (num >1000 && num <=1200) {
|
||||
return 'rgba(255, 40, 40, 0.9)';
|
||||
} else if (num >1200 && num <=1400) {
|
||||
return 'rgba(255, 38, 112, 0.9)';
|
||||
} else if (num >1400 && num <=1600) {
|
||||
return 'rgba(163, 23, 187, 0.9)';
|
||||
} else if (num >1600 && num <=1800) {
|
||||
return 'rgba(119, 14, 234, 0.9)';
|
||||
} else if (num >1800) {
|
||||
return 'rgba(77, 11, 255, 0.9)';
|
||||
let num = Number(tempTop[n].slice(0, tempTop[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 (
|
||||
<svg width="2050px" height="700px" style={{position: "absolute", top: "320px", left: "1080px", zIndex:0}}>
|
||||
<svg
|
||||
width="2050px"
|
||||
height="700px"
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "320px",
|
||||
left: "1080px",
|
||||
zIndex: 0,
|
||||
}}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="Gradient1" x1="0" x2="1" y1="0" y2="0">
|
||||
<stop offset="0%" stop-color={returnColor2('TE201')} />
|
||||
<stop offset="9%" stop-color={returnColor2('TE202')} />
|
||||
<stop offset="18%" stop-color={returnColor2('TE203')} />
|
||||
<stop offset="27%" stop-color={returnColor2('TE204')} />
|
||||
<stop offset="36%" stop-color={returnColor2('TE205')} />
|
||||
<stop offset="45%" stop-color={returnColor2('TE206')} />
|
||||
<stop offset="54%" stop-color={returnColor2('TE208')} />
|
||||
<stop offset="63%" stop-color={returnColor2('TE210')} />
|
||||
<stop offset="72%" stop-color={returnColor2('TE211')} />
|
||||
<stop offset="81%" stop-color={returnColor2('TE212')} />
|
||||
<stop offset="90%" stop-color={returnColor2('TE213')} />
|
||||
<stop offset="100%" stop-color={returnColor2('TE213')} />
|
||||
<stop offset="0%" stop-color={returnColor2("TE201")} />
|
||||
<stop offset="9%" stop-color={returnColor2("TE202")} />
|
||||
<stop offset="18%" stop-color={returnColor2("TE203")} />
|
||||
<stop offset="27%" stop-color={returnColor2("TE204")} />
|
||||
<stop offset="36%" stop-color={returnColor2("TE205")} />
|
||||
<stop offset="45%" stop-color={returnColor2("TE206")} />
|
||||
<stop offset="54%" stop-color={returnColor2("TE208")} />
|
||||
<stop offset="63%" stop-color={returnColor2("TE210")} />
|
||||
<stop offset="72%" stop-color={returnColor2("TE211")} />
|
||||
<stop offset="81%" stop-color={returnColor2("TE212")} />
|
||||
<stop offset="90%" stop-color={returnColor2("TE213")} />
|
||||
<stop offset="100%" stop-color={returnColor2("TE213")} />
|
||||
</linearGradient>
|
||||
<linearGradient id="Gradient2" x1="0" x2="1" y1="0" y2="0">
|
||||
<stop offset="0%" stop-color={returnColor2('TE216')} />
|
||||
<stop offset="33%" stop-color={returnColor2('TE221')} />
|
||||
<stop offset="66%" stop-color={returnColor2('TE225')} />
|
||||
<stop offset="100%" stop-color={returnColor2('TE225')} />
|
||||
<stop offset="0%" stop-color={returnColor2("TE216")} />
|
||||
<stop offset="33%" stop-color={returnColor2("TE221")} />
|
||||
<stop offset="66%" stop-color={returnColor2("TE225")} />
|
||||
<stop offset="100%" stop-color={returnColor2("TE225")} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<polygon points="27 238,1535 238,1543 310,1555 310,1558 351,1551 361,1555 420,1076 421,1076 423,1020 423,1020 421,958 421,958 423,900 423,900 421,832 421,775 423,775 421,200 425,193 399,12 400" fill="url(#Gradient1)" />
|
||||
<polygon points="1585 308,1655 308,1670 290,1640 50,1688 50,1688 58,1800 58,1804 93,1692 93,1700 168,1900 168,1906 201,1706 200,1718 312,2024 311,2029 343,1724 344,1736 445,1940 444,1946 478,1740 478,1753 573,1874 573, 1878 608,1710 608,1678 349,1668 360,1590 360" fill="url(#Gradient2)" />
|
||||
</svg>)
|
||||
<polygon
|
||||
points="27 238,1535 238,1543 310,1555 310,1558 351,1551 361,1555 420,1076 421,1076 423,1020 423,1020 421,958 421,958 423,900 423,900 421,832 421,775 423,775 421,200 425,193 399,12 400"
|
||||
fill="url(#Gradient1)"
|
||||
/>
|
||||
<polygon
|
||||
points="1585 308,1655 308,1670 290,1640 50,1688 50,1688 58,1800 58,1804 93,1692 93,1700 168,1900 168,1906 201,1706 200,1718 312,2024 311,2029 343,1724 344,1736 445,1940 444,1946 478,1740 478,1753 573,1874 573, 1878 608,1710 608,1678 349,1668 360,1590 360"
|
||||
fill="url(#Gradient2)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
animate={{
|
||||
opacity: [0, 0, 0, 0.6, 1],
|
||||
transition: { duration: 0.3, delay: 2 },
|
||||
transition: { duration: 0.3, delay: 1.5 },
|
||||
}}
|
||||
>
|
||||
<BigSvg />
|
||||
<B1 style={{fill:returnColor('TE228'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "5px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<B2 style={{fill:returnColor('TE230'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "7px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<B3 style={{fill:returnColor('TE232'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "10px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<B4 style={{fill:returnColor('TE234'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "12px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<B5 style={{fill:returnColor('TE236'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "14px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<B6 style={{fill:returnColor('TE238'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "16px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<B7 style={{fill:returnColor('TE240'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "18px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<B8 style={{fill:returnColor('TE242'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "19px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<T1 style={{fill:returnColor('TE227'),width: "100%", height: "100%", position: "absolute", top: "114px", left: "5px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<T2 style={{fill:returnColor('TE229'),width: "100%", height: "100%", position: "absolute", top: "114px", left: "9px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<T3 style={{fill:returnColor('TE231'),width: "100%", height: "100%", position: "absolute", top: "114px", left: "10px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<T4 style={{fill:returnColor('TE233'),width: "100%", height: "100%", position: "absolute", top: "114px", left: "12px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<T5 style={{fill:returnColor('TE235'),width: "100%", height: "100%", position: "absolute", top: "114px", left: "13px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<T6 style={{fill:returnColor('TE237'),width: "100%", height: "100%", position: "absolute", top: "114px", left: "16px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<T7 style={{fill:returnColor('TE239'),width: "100%", height: "100%", position: "absolute", top: "114px", left: "18px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<T8 style={{fill:returnColor('TE241'),width: "100%", height: "100%", position: "absolute", top: "114px", left: "19px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<B1
|
||||
style={{
|
||||
fill: returnColor("TE228"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "5px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B2
|
||||
style={{
|
||||
fill: returnColor("TE230"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "7px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B3
|
||||
style={{
|
||||
fill: returnColor("TE232"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "10px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B4
|
||||
style={{
|
||||
fill: returnColor("TE234"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "12px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B5
|
||||
style={{
|
||||
fill: returnColor("TE236"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "14px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B6
|
||||
style={{
|
||||
fill: returnColor("TE238"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "16px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B7
|
||||
style={{
|
||||
fill: returnColor("TE240"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "18px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B8
|
||||
style={{
|
||||
fill: returnColor("TE242"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "120px",
|
||||
left: "19px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<T1
|
||||
style={{
|
||||
fill: returnColor("TE227"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "114px",
|
||||
left: "5px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<T2
|
||||
style={{
|
||||
fill: returnColor("TE229"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "114px",
|
||||
left: "9px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<T3
|
||||
style={{
|
||||
fill: returnColor("TE231"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "114px",
|
||||
left: "10px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<T4
|
||||
style={{
|
||||
fill: returnColor("TE233"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "114px",
|
||||
left: "12px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<T5
|
||||
style={{
|
||||
fill: returnColor("TE235"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "114px",
|
||||
left: "13px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<T6
|
||||
style={{
|
||||
fill: returnColor("TE237"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "114px",
|
||||
left: "16px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<T7
|
||||
style={{
|
||||
fill: returnColor("TE239"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "114px",
|
||||
left: "18px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<T8
|
||||
style={{
|
||||
fill: returnColor("TE241"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "114px",
|
||||
left: "19px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TopColorBlock;
|
||||
|
||||
export default TopColorBlock;
|
||||
|
||||
@ -1,131 +1,362 @@
|
||||
|
||||
import { useSelector } from "react-redux";
|
||||
import React from 'react';
|
||||
import React from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { ReactComponent as B1 } from './pic/b1.svg'
|
||||
import { ReactComponent as B2 } from './pic/b2.svg'
|
||||
import { ReactComponent as B3 } from './pic/b3.svg'
|
||||
import { ReactComponent as B4 } from './pic/b4.svg'
|
||||
import { ReactComponent as B5 } from './pic/b5.svg'
|
||||
import { ReactComponent as B6 } from './pic/b6.svg'
|
||||
import { ReactComponent as B7 } from './pic/b7.svg'
|
||||
import { ReactComponent as B8 } from './pic/b8.svg'
|
||||
import { ReactComponent as T1 } from './pic/t1.svg'
|
||||
import { ReactComponent as T2 } from './pic/t2.svg'
|
||||
import { ReactComponent as T3 } from './pic/t3.svg'
|
||||
import { ReactComponent as T4 } from './pic/t4.svg'
|
||||
import { ReactComponent as T5 } from './pic/t5.svg'
|
||||
import { ReactComponent as T6 } from './pic/t6.svg'
|
||||
import { ReactComponent as T7 } from './pic/t7.svg'
|
||||
import { ReactComponent as T8 } from './pic/t8.svg'
|
||||
|
||||
const TopColorBlockEnter = ({ condition }) => {
|
||||
import { ReactComponent as B1 } from "./pic/b1.svg";
|
||||
import { ReactComponent as B2 } from "./pic/b2.svg";
|
||||
import { ReactComponent as B3 } from "./pic/b3.svg";
|
||||
import { ReactComponent as B4 } from "./pic/b4.svg";
|
||||
import { ReactComponent as B5 } from "./pic/b5.svg";
|
||||
import { ReactComponent as B6 } from "./pic/b6.svg";
|
||||
import { ReactComponent as B7 } from "./pic/b7.svg";
|
||||
import { ReactComponent as B8 } from "./pic/b8.svg";
|
||||
import { ReactComponent as T1 } from "./pic/t1.svg";
|
||||
import { ReactComponent as T2 } from "./pic/t2.svg";
|
||||
import { ReactComponent as T3 } from "./pic/t3.svg";
|
||||
import { ReactComponent as T4 } from "./pic/t4.svg";
|
||||
import { ReactComponent as T5 } from "./pic/t5.svg";
|
||||
import { ReactComponent as T6 } from "./pic/t6.svg";
|
||||
import { ReactComponent as T7 } from "./pic/t7.svg";
|
||||
import { ReactComponent as T8 } from "./pic/t8.svg";
|
||||
|
||||
const TopColorBlockEnter = () => {
|
||||
const tempTop = useSelector((state) => state.temperature.top);
|
||||
function returnColor(n) {
|
||||
let num = Number(tempTop[n].slice(0,tempTop[n].length - 1))
|
||||
if (num <= 200) {
|
||||
return 'rgba(42, 229, 93, 0.7)';
|
||||
} else if (num >200 && num <=400) {
|
||||
return 'rgba(133, 203, 50, 0.7)';
|
||||
} else if (num >400 && num <=600) {
|
||||
return 'rgba(255, 182, 3, 0.7)';
|
||||
} else if (num >600 && num <=800) {
|
||||
return 'rgba(255, 135, 16, 0.7)';
|
||||
} else if (num >800 && num <=1000) {
|
||||
return 'rgba(249, 89, 7, 0.7)';
|
||||
} else if (num >1000 && num <=1200) {
|
||||
return 'rgba(255, 40, 40, 0.7)';
|
||||
} else if (num >1200 && num <=1400) {
|
||||
return 'rgba(255, 38, 112, 0.7)';
|
||||
} else if (num >1400 && num <=1600) {
|
||||
return 'rgba(163, 23, 187, 0.7)';
|
||||
} else if (num >1600 && num <=1800) {
|
||||
return 'rgba(119, 14, 234, 0.7)';
|
||||
} else if (num >1800) {
|
||||
return 'rgba(77, 11, 255, 0.7)';
|
||||
let num = Number(tempTop[n].slice(0, tempTop[n].length - 1));
|
||||
if (num <= 100) {
|
||||
return "rgba(96, 0, 189, 0.7)";
|
||||
} else if (num > 100 && num <= 200) {
|
||||
return "rgba(102, 7, 255, 0.7)";
|
||||
} else if (num > 200 && num <= 300) {
|
||||
return "rgba(10, 20, 255, 0.7)";
|
||||
} else if (num > 300 && num <= 400) {
|
||||
return "rgba(7, 89, 255, 0.7)";
|
||||
} else if (num > 400 && num <= 500) {
|
||||
return "rgba(7, 139, 255, 0.7)";
|
||||
} else if (num > 500 && num <= 600) {
|
||||
return "rgba(7, 194, 255, 0.7)";
|
||||
} else if (num > 600 && num <= 700) {
|
||||
return "rgba(7, 255, 253, 0.7)";
|
||||
} else if (num > 700 && num <= 800) {
|
||||
return "rgba(7, 255, 205, 0.7)";
|
||||
} else if (num > 800 && num <= 900) {
|
||||
return "rgba(20, 237, 127, 0.7)";
|
||||
} else if (num > 900 && num <= 1000) {
|
||||
return "rgba(0, 193, 39, 0.7)";
|
||||
} else if (num > 1000 && num <= 1100) {
|
||||
return "rgba(147, 210, 1, 0.7)";
|
||||
} else if (num > 1100 && num <= 1200) {
|
||||
return "rgba(206, 206, 0, 0.7)";
|
||||
} else if (num > 1200 && num <= 1300) {
|
||||
return "rgba(255, 226, 13, 0.7)";
|
||||
} else if (num > 1300 && num <= 1400) {
|
||||
return "rgba(249, 240, 146, 0.7)";
|
||||
} else if (num > 1400 && num <= 1500) {
|
||||
return "rgba(250, 204, 93, 0.7)";
|
||||
} else if (num > 1500 && num <= 1600) {
|
||||
return "rgba(240, 139, 32, 0.7)";
|
||||
} else if (num > 1600 && num <= 1700) {
|
||||
return "rgba(241, 88, 26, 0.7)";
|
||||
} else if (num > 1700 && num <= 1800) {
|
||||
return "rgba(255, 0, 0, 0.7)";
|
||||
} else if (num > 1800 && num <= 1900) {
|
||||
return "rgba(182, 0, 0, 0.7)";
|
||||
} else if (num > 1900) {
|
||||
return "rgba(140, 0, 33, 0.7)";
|
||||
}
|
||||
}
|
||||
function returnColor2(n) {
|
||||
let num = Number(tempTop[n].slice(0,tempTop[n].length - 1))
|
||||
if (num <= 200) {
|
||||
return 'rgba(42, 229, 93, 0.9)';
|
||||
} else if (num >200 && num <=400) {
|
||||
return 'rgba(133, 203, 50, 0.9)';
|
||||
} else if (num >400 && num <=600) {
|
||||
return 'rgba(255, 182, 3, 0.9)';
|
||||
} else if (num >600 && num <=800) {
|
||||
return 'rgba(255, 135, 16, 0.9)';
|
||||
} else if (num >800 && num <=1000) {
|
||||
return 'rgba(249, 89, 7, 0.9)';
|
||||
} else if (num >1000 && num <=1200) {
|
||||
return 'rgba(255, 40, 40, 0.9)';
|
||||
} else if (num >1200 && num <=1400) {
|
||||
return 'rgba(255, 38, 112, 0.9)';
|
||||
} else if (num >1400 && num <=1600) {
|
||||
return 'rgba(163, 23, 187, 0.9)';
|
||||
} else if (num >1600 && num <=1800) {
|
||||
return 'rgba(119, 14, 234, 0.9)';
|
||||
} else if (num >1800) {
|
||||
return 'rgba(77, 11, 255, 0.9)';
|
||||
let num = Number(tempTop[n].slice(0, tempTop[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 (
|
||||
<svg width="2050px" height="700px" style={{position: "absolute", top: "320px", left: "1080px", zIndex:0}}>
|
||||
<svg
|
||||
width="2050px"
|
||||
height="700px"
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "320px",
|
||||
left: "1080px",
|
||||
zIndex: 0,
|
||||
}}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="Gradient1" x1="0" x2="1" y1="0" y2="0">
|
||||
<stop offset="0%" stop-color={returnColor2('TE201')} />
|
||||
<stop offset="9%" stop-color={returnColor2('TE202')} />
|
||||
<stop offset="18%" stop-color={returnColor2('TE203')} />
|
||||
<stop offset="27%" stop-color={returnColor2('TE204')} />
|
||||
<stop offset="36%" stop-color={returnColor2('TE205')} />
|
||||
<stop offset="45%" stop-color={returnColor2('TE206')} />
|
||||
<stop offset="54%" stop-color={returnColor2('TE208')} />
|
||||
<stop offset="63%" stop-color={returnColor2('TE210')} />
|
||||
<stop offset="72%" stop-color={returnColor2('TE211')} />
|
||||
<stop offset="81%" stop-color={returnColor2('TE212')} />
|
||||
<stop offset="90%" stop-color={returnColor2('TE213')} />
|
||||
<stop offset="100%" stop-color={returnColor2('TE213')} />
|
||||
<stop offset="0%" stop-color={returnColor2("TE201")} />
|
||||
<stop offset="9%" stop-color={returnColor2("TE202")} />
|
||||
<stop offset="18%" stop-color={returnColor2("TE203")} />
|
||||
<stop offset="27%" stop-color={returnColor2("TE204")} />
|
||||
<stop offset="36%" stop-color={returnColor2("TE205")} />
|
||||
<stop offset="45%" stop-color={returnColor2("TE206")} />
|
||||
<stop offset="54%" stop-color={returnColor2("TE208")} />
|
||||
<stop offset="63%" stop-color={returnColor2("TE210")} />
|
||||
<stop offset="72%" stop-color={returnColor2("TE211")} />
|
||||
<stop offset="81%" stop-color={returnColor2("TE212")} />
|
||||
<stop offset="90%" stop-color={returnColor2("TE213")} />
|
||||
<stop offset="100%" stop-color={returnColor2("TE213")} />
|
||||
</linearGradient>
|
||||
<linearGradient id="Gradient2" x1="0" x2="1" y1="0" y2="0">
|
||||
<stop offset="0%" stop-color={returnColor2('TE216')} />
|
||||
<stop offset="33%" stop-color={returnColor2('TE221')} />
|
||||
<stop offset="66%" stop-color={returnColor2('TE225')} />
|
||||
<stop offset="100%" stop-color={returnColor2('TE225')} />
|
||||
<stop offset="0%" stop-color={returnColor2("TE216")} />
|
||||
<stop offset="33%" stop-color={returnColor2("TE221")} />
|
||||
<stop offset="66%" stop-color={returnColor2("TE225")} />
|
||||
<stop offset="100%" stop-color={returnColor2("TE225")} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<polygon points="27 238,1535 238,1543 310,1555 310,1558 351,1551 361,1555 420,1076 421,1076 423,1020 423,1020 421,958 421,958 423,900 423,900 421,832 421,775 423,775 421,200 425,193 399,12 400" fill="url(#Gradient1)" />
|
||||
<polygon points="1585 308,1655 308,1670 290,1640 50,1688 50,1688 58,1800 58,1804 93,1692 93,1700 168,1900 168,1906 201,1706 200,1718 312,2024 311,2029 343,1724 344,1736 445,1940 444,1946 478,1740 478,1753 573,1874 573, 1878 608,1710 608,1678 349,1668 360,1590 360" fill="url(#Gradient2)" />
|
||||
</svg>)
|
||||
<polygon
|
||||
points="27 238,1535 238,1543 310,1555 310,1558 351,1551 361,1555 420,1076 421,1076 423,1020 423,1020 421,958 421,958 423,900 423,900 421,832 421,775 423,775 421,200 425,193 399,12 400"
|
||||
fill="url(#Gradient1)"
|
||||
/>
|
||||
<polygon
|
||||
points="1585 308,1655 308,1670 290,1640 50,1688 50,1688 58,1800 58,1804 93,1692 93,1700 168,1900 168,1906 201,1706 200,1718 312,2024 311,2029 343,1724 344,1736 445,1940 444,1946 478,1740 478,1753 573,1874 573, 1878 608,1710 608,1678 349,1668 360,1590 360"
|
||||
fill="url(#Gradient2)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
animate={{
|
||||
opacity: [0, 0, 0, 0.6, 1],
|
||||
transition: { duration: 0.3, delay: 2 },
|
||||
transition: { duration: 0.3, delay: 1.5 },
|
||||
}}
|
||||
>
|
||||
<BigSvg />
|
||||
<B1 style={{fill:returnColor('TE228'),width: "100%", height: "100%", position: "absolute", top: "116px", left: "-15px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<B2 style={{fill:returnColor('TE230'),width: "100%", height: "100%", position: "absolute", top: "116px", left: "-15px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<B3 style={{fill:returnColor('TE232'),width: "100%", height: "100%", position: "absolute", top: "116px", left: "-15px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<B4 style={{fill:returnColor('TE234'),width: "100%", height: "100%", position: "absolute", top: "116px", left: "-12px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<B5 style={{fill:returnColor('TE236'),width: "100%", height: "100%", position: "absolute", top: "116px", left: "-13px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<B6 style={{fill:returnColor('TE238'),width: "100%", height: "100%", position: "absolute", top: "116px", left: "-9px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<B7 style={{fill:returnColor('TE240'),width: "100%", height: "100%", position: "absolute", top: "116px", left: "-8px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<B8 style={{fill:returnColor('TE242'),width: "100%", height: "100%", position: "absolute", top: "116px", left: "-8px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<T1 style={{fill:returnColor('TE227'),width: "100%", height: "100%", position: "absolute", top: "110px", left: "-15px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<T2 style={{fill:returnColor('TE229'),width: "100%", height: "100%", position: "absolute", top: "110px", left: "-15px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<T3 style={{fill:returnColor('TE231'),width: "100%", height: "100%", position: "absolute", top: "110px", left: "-15px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<T4 style={{fill:returnColor('TE233'),width: "100%", height: "100%", position: "absolute", top: "110px", left: "-15px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<T5 style={{fill:returnColor('TE235'),width: "100%", height: "100%", position: "absolute", top: "110px", left: "-12px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<T6 style={{fill:returnColor('TE237'),width: "100%", height: "100%", position: "absolute", top: "110px", left: "-12px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<T7 style={{fill:returnColor('TE239'),width: "100%", height: "100%", position: "absolute", top: "110px", left: "-8px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<T8 style={{fill:returnColor('TE241'),width: "100%", height: "100%", position: "absolute", top: "110px", left: "-7px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||
<B1
|
||||
style={{
|
||||
fill: returnColor("TE228"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "116px",
|
||||
left: "-15px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B2
|
||||
style={{
|
||||
fill: returnColor("TE230"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "116px",
|
||||
left: "-15px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B3
|
||||
style={{
|
||||
fill: returnColor("TE232"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "116px",
|
||||
left: "-15px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B4
|
||||
style={{
|
||||
fill: returnColor("TE234"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "116px",
|
||||
left: "-12px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B5
|
||||
style={{
|
||||
fill: returnColor("TE236"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "116px",
|
||||
left: "-13px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B6
|
||||
style={{
|
||||
fill: returnColor("TE238"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "116px",
|
||||
left: "-9px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B7
|
||||
style={{
|
||||
fill: returnColor("TE240"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "116px",
|
||||
left: "-8px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<B8
|
||||
style={{
|
||||
fill: returnColor("TE242"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "116px",
|
||||
left: "-8px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<T1
|
||||
style={{
|
||||
fill: returnColor("TE227"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "110px",
|
||||
left: "-15px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<T2
|
||||
style={{
|
||||
fill: returnColor("TE229"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "110px",
|
||||
left: "-15px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<T3
|
||||
style={{
|
||||
fill: returnColor("TE231"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "110px",
|
||||
left: "-15px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<T4
|
||||
style={{
|
||||
fill: returnColor("TE233"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "110px",
|
||||
left: "-15px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<T5
|
||||
style={{
|
||||
fill: returnColor("TE235"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "110px",
|
||||
left: "-12px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<T6
|
||||
style={{
|
||||
fill: returnColor("TE237"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "110px",
|
||||
left: "-12px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<T7
|
||||
style={{
|
||||
fill: returnColor("TE239"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "110px",
|
||||
left: "-8px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
<T8
|
||||
style={{
|
||||
fill: returnColor("TE241"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "110px",
|
||||
left: "-7px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.7)",
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TopColorBlockEnter;
|
||||
|
||||
export default TopColorBlockEnter;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user