diff --git a/public/video/1to2.webm b/public/video/1to2.webm index a17eb07..0d9603f 100644 Binary files a/public/video/1to2.webm and b/public/video/1to2.webm differ diff --git a/public/video/2to1.webm b/public/video/2to1.webm index a032376..6191bb6 100644 Binary files a/public/video/2to1.webm and b/public/video/2to1.webm differ diff --git a/src/assets/kilnSpeed.png b/src/assets/kilnSpeed.png new file mode 100644 index 0000000..72a8801 Binary files /dev/null and b/src/assets/kilnSpeed.png differ diff --git a/src/assets/tempIntr.png b/src/assets/tempIntr.png index 6f6ca71..453ce39 100644 Binary files a/src/assets/tempIntr.png and b/src/assets/tempIntr.png differ diff --git a/src/components/Common/TemperatureBottom/index.jsx b/src/components/Common/TemperatureBottom/index.jsx index 9d3ed1a..43c6032 100644 --- a/src/components/Common/TemperatureBottom/index.jsx +++ b/src/components/Common/TemperatureBottom/index.jsx @@ -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 ( {Object.keys(tempBottom).map((d) => ( - + ))} ); diff --git a/src/components/Common/TemperatureTop/index.jsx b/src/components/Common/TemperatureTop/index.jsx index c563a60..7dbfafc 100644 --- a/src/components/Common/TemperatureTop/index.jsx +++ b/src/components/Common/TemperatureTop/index.jsx @@ -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) => ( - + ))} ); diff --git a/src/components/Modules/KilnInner/Center/VideoContainer.jsx b/src/components/Modules/KilnInner/Center/VideoContainer.jsx index 7375f13..c3823b2 100644 --- a/src/components/Modules/KilnInner/Center/VideoContainer.jsx +++ b/src/components/Modules/KilnInner/Center/VideoContainer.jsx @@ -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 ( - - - - - - - - ); + return ( + + + + + + + + ); } export default VideoContainer; diff --git a/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx b/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx index 44a6ff4..444e4c0 100644 --- a/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx +++ b/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx @@ -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) { - {/* {fireCanPlay && fireDir == "东火" && ( + {fireCanPlay && fireDir == "东火" && ( - )} */} + )} 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} /> diff --git a/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx b/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx index 920aa8b..d607be8 100644 --- a/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx +++ b/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx @@ -19,7 +19,7 @@ function FloorTwoToOne(props) { setTimeout(() => { // console.log("开启2-1的火播放"); setFireCanPlay(true); - }, 3000); + }, 1800); } if (!show) setFireCanPlay(false); return () => { diff --git a/src/components/Modules/KilnOptimize/Center/VideoContainer.jsx b/src/components/Modules/KilnOptimize/Center/VideoContainer.jsx index 7375f13..85b0ae2 100644 --- a/src/components/Modules/KilnOptimize/Center/VideoContainer.jsx +++ b/src/components/Modules/KilnOptimize/Center/VideoContainer.jsx @@ -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 ( - - - - - - - - ); + return ( + + + + + + + + ); } export default VideoContainer; diff --git a/src/components/Modules/KilnOptimize/Center/index.jsx b/src/components/Modules/KilnOptimize/Center/index.jsx index 84a385a..0c7c36f 100644 --- a/src/components/Modules/KilnOptimize/Center/index.jsx +++ b/src/components/Modules/KilnOptimize/Center/index.jsx @@ -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() { - - {/* menu */}
onFloorUpdate(1)} > @@ -50,7 +49,7 @@ function KilnCenter() {
onFloorUpdate(2)} > @@ -58,7 +57,7 @@ function KilnCenter() {
onFloorUpdate(3)} > @@ -67,12 +66,28 @@ function KilnCenter() {
{/* 颜色指示图 */} -
- +
+
{/* video */} - +
); } diff --git a/src/components/Modules/KilnOptimize/Center/videoComponents/EnterToFloor1.jsx b/src/components/Modules/KilnOptimize/Center/videoComponents/EnterToFloor1.jsx index c19ba34..c2cc5e4 100644 --- a/src/components/Modules/KilnOptimize/Center/videoComponents/EnterToFloor1.jsx +++ b/src/components/Modules/KilnOptimize/Center/videoComponents/EnterToFloor1.jsx @@ -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) { - {/* {fireCanPlay && fireDir == "东火" && ( + {fireCanPlay && fireDir == "东火" && ( )} {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, + }} > - )} */} + )} @@ -78,7 +88,7 @@ function EnterToFloorOne(props) { top: "218px", left: "678px", width: "2380px", - zIndex: 0, + zIndex: 10, }} /> diff --git a/src/components/Modules/KilnOptimize/Center/videoComponents/Floor1To2.jsx b/src/components/Modules/KilnOptimize/Center/videoComponents/Floor1To2.jsx index 099e0b0..61392f6 100644 --- a/src/components/Modules/KilnOptimize/Center/videoComponents/Floor1To2.jsx +++ b/src/components/Modules/KilnOptimize/Center/videoComponents/Floor1To2.jsx @@ -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) { + {/* 窑炉的色块 */} + {showBottom && ( + + )} - - - {fireCanPlay && fireDir == "东火" && ( + {showBottom && fireCanPlay && fireDir == "东火" && ( )} - {fireCanPlay && fireDir == "西火" && ( + {showBottom && fireCanPlay && fireDir == "西火" && ( // {fireCanPlay && ( )} - + {/* 温度组件 */} + {showBottom && ( + + )} + {/* 溶液速度色块 */} + {showSpeed && ( + + + + )} )} diff --git a/src/components/Modules/KilnOptimize/Center/videoComponents/Floor2To1.jsx b/src/components/Modules/KilnOptimize/Center/videoComponents/Floor2To1.jsx index a7784f3..ecb24e9 100644 --- a/src/components/Modules/KilnOptimize/Center/videoComponents/Floor2To1.jsx +++ b/src/components/Modules/KilnOptimize/Center/videoComponents/Floor2To1.jsx @@ -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, + }} > )} {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, + }} > )} diff --git a/src/components/Modules/KilnOptimize/components/BotttomColorBlock/index.jsx b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/index.jsx index 492a805..a5752bf 100644 --- a/src/components/Modules/KilnOptimize/components/BotttomColorBlock/index.jsx +++ b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/index.jsx @@ -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 ( - + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - - ) + + + ); } - + return ( - + - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + ); }; - -export default BotttomColorBlock; \ No newline at end of file + +export default BotttomColorBlock; diff --git a/src/components/Modules/KilnOptimize/components/CommonChart/index.jsx b/src/components/Modules/KilnOptimize/components/CommonChart/index.jsx index 1cf3ec1..8240674 100644 --- a/src/components/Modules/KilnOptimize/components/CommonChart/index.jsx +++ b/src/components/Modules/KilnOptimize/components/CommonChart/index.jsx @@ -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 (
- {(data.length > 0) && } - {(data.length <= 0) && ( + {data.length > 0 && ( + + )} + {data.length <= 0 && (

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 ( - + {/* legend */}

- 标准值外 + + 标准值外 - 标准值内 + + 标准值内
- +
- ) + ); } -export default KilnPress; \ No newline at end of file +export default KilnPress; diff --git a/src/components/Modules/KilnOptimize/components/LiquidSpeedColor/index.jsx b/src/components/Modules/KilnOptimize/components/LiquidSpeedColor/index.jsx new file mode 100644 index 0000000..a10c8f9 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/LiquidSpeedColor/index.jsx @@ -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 ( + + + + ); +} +export default LiquidSpeedColor; diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlock/index.jsx b/src/components/Modules/KilnOptimize/components/TopColorBlock/index.jsx index 32aa223..74b3d84 100644 --- a/src/components/Modules/KilnOptimize/components/TopColorBlock/index.jsx +++ b/src/components/Modules/KilnOptimize/components/TopColorBlock/index.jsx @@ -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 ( - + - - - - - - - - - - - - + + + + + + + + + + + + - - - - + + + + - - - ) + + + + ); } - + return ( - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + ); }; - -export default TopColorBlock; \ No newline at end of file + +export default TopColorBlock; diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/index.jsx b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/index.jsx index 723b598..e24435d 100644 --- a/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/index.jsx +++ b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/index.jsx @@ -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 ( - + - - - - - - - - - - - - + + + + + + + + + + + + - - - - + + + + - - - ) + + + + ); } - + return ( - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + ); }; - -export default TopColorBlockEnter; \ No newline at end of file + +export default TopColorBlockEnter;