zjl #1
Binary file not shown.
Binary file not shown.
@ -10,7 +10,7 @@ import RulerContainer from "./components/Tools/Ruler";
|
|||||||
import { Switch } from "antd";
|
import { Switch } from "antd";
|
||||||
import { createPortal } from "react-dom";
|
import { createPortal } from "react-dom";
|
||||||
|
|
||||||
const Menus = ["窑炉总览", "窑炉内部", "退火监测", "质检统计", "能耗分析"];
|
const Menus = ["窑炉总览", "窑炉内部", "窑炉优化","退火监测", "质检统计", "能耗分析"];
|
||||||
const LUNBO_INTERVAL = 60 * 1000;
|
const LUNBO_INTERVAL = 60 * 1000;
|
||||||
function App() {
|
function App() {
|
||||||
const { styles, value, setValue } = useSlider(100);
|
const { styles, value, setValue } = useSlider(100);
|
||||||
|
|||||||
BIN
src/assets/Icon/kilnBottom.png
Normal file
BIN
src/assets/Icon/kilnBottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/assets/Icon/kilnPress.png
Normal file
BIN
src/assets/Icon/kilnPress.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/assets/Icon/kilnTop.png
Normal file
BIN
src/assets/Icon/kilnTop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
src/assets/Icon/liquidTrend.png
Normal file
BIN
src/assets/Icon/liquidTrend.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/assets/kilnSpeed.png
Normal file
BIN
src/assets/kilnSpeed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
src/assets/tempIntr.png
Normal file
BIN
src/assets/tempIntr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@ -5,8 +5,9 @@ export default function CenterMenu({ active, onChangeActive }) {
|
|||||||
const menuList = [
|
const menuList = [
|
||||||
["窑炉总览", "/kilnSummary"],
|
["窑炉总览", "/kilnSummary"],
|
||||||
["窑炉内部", "/kilnInner"],
|
["窑炉内部", "/kilnInner"],
|
||||||
|
["窑炉优化", "/kilnOptimize"],
|
||||||
["退火监测", "/stopFire"],
|
["退火监测", "/stopFire"],
|
||||||
["质检统计", "/quailtyCheck"],
|
["质检统计", "/quailtyCheck"],
|
||||||
["能耗分析", "/energyCost"],
|
["能耗分析", "/energyCost"],
|
||||||
];
|
];
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
top: 120px;
|
top: 120px;
|
||||||
// left: 1340px;
|
// left: 1340px;
|
||||||
left: 1460px;
|
left: 1338px;
|
||||||
color: white;
|
color: white;
|
||||||
z-index: 10000;
|
z-index: 10000;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,18 +1,30 @@
|
|||||||
import BlueRect from "../BlueRect";
|
import BlueRect from "../BlueRect";
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
import { motion, AnimatePresence } from "framer-motion";
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
const blueTe = [
|
const blueTe = ["TE401", "TE402", "TE403", "PE401", "PE402", "PE403"];
|
||||||
"TE401",
|
|
||||||
"TE402",
|
|
||||||
"TE403",
|
|
||||||
"PE401",
|
|
||||||
"PE402",
|
|
||||||
"PE403",
|
|
||||||
];
|
|
||||||
|
|
||||||
function TemperatureBottom(props) {
|
function TemperatureBottom(props) {
|
||||||
const tempBottom = useSelector((state) => state.temperature.bottom);
|
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]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<motion.div
|
<motion.div
|
||||||
@ -24,15 +36,17 @@ function TemperatureBottom(props) {
|
|||||||
width: "100%",
|
width: "100%",
|
||||||
height: "80vh",
|
height: "80vh",
|
||||||
zIndex: "-1",
|
zIndex: "-1",
|
||||||
...props.style
|
...props.style,
|
||||||
}}
|
|
||||||
animate={{
|
|
||||||
opacity: [0, 0, 0, 0.6, 1],
|
|
||||||
transition: { duration: 0.3, delay: 2 },
|
|
||||||
}}
|
}}
|
||||||
|
animate={speedAn}
|
||||||
>
|
>
|
||||||
{Object.keys(tempBottom).map((d) => (
|
{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>
|
</motion.div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -28,15 +28,20 @@ function TemperatureTop(props) {
|
|||||||
width: "100%",
|
width: "100%",
|
||||||
height: "80vh",
|
height: "80vh",
|
||||||
zIndex: "-1",
|
zIndex: "-1",
|
||||||
...props.style
|
...props.style,
|
||||||
}}
|
}}
|
||||||
animate={{
|
animate={{
|
||||||
opacity: [0, 0, 0, 0.6, 1],
|
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) => (
|
{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>
|
</motion.div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,104 +1,108 @@
|
|||||||
import EnterVideo from './videoComponents/EnterVideo';
|
import EnterVideo from "./videoComponents/EnterVideo";
|
||||||
import EnterToFloorOne from './videoComponents/EnterToFloor1';
|
import EnterToFloorOne from "./videoComponents/EnterToFloor1";
|
||||||
import EnterToFloorTwo from './videoComponents/EnterToFloor2';
|
import EnterToFloorTwo from "./videoComponents/EnterToFloor2";
|
||||||
import FloorOneToTwo from './videoComponents/Floor1To2';
|
import FloorOneToTwo from "./videoComponents/Floor1To2";
|
||||||
import FloorTwoToOne from './videoComponents/Floor2To1';
|
import FloorTwoToOne from "./videoComponents/Floor2To1";
|
||||||
import { useRef, useEffect, useReducer } from 'react';
|
import { useRef, useEffect, useReducer } from "react";
|
||||||
import { AnimatePresence } from 'framer-motion';
|
import { AnimatePresence } from "framer-motion";
|
||||||
|
|
||||||
const initOpacity = {
|
const initOpacity = {
|
||||||
enterVideo: 1,
|
enterVideo: 1,
|
||||||
enterToFloorOne: 0,
|
enterToFloorOne: 0,
|
||||||
enterToFloorTwo: 0,
|
enterToFloorTwo: 0,
|
||||||
floorOneToTwo: 0,
|
floorOneToTwo: 0,
|
||||||
floorTwoToOne: 0,
|
floorTwoToOne: 0,
|
||||||
};
|
};
|
||||||
const opacityReducer = (state, action) => {
|
const opacityReducer = (state, action) => {
|
||||||
switch (action.type) {
|
switch (action.type) {
|
||||||
case 'enter-to-1': {
|
case "enter-to-1": {
|
||||||
return {
|
return {
|
||||||
...initOpacity,
|
...initOpacity,
|
||||||
enterToFloorOne: 1,
|
enterToFloorOne: 1,
|
||||||
enterVideo: 0,
|
enterVideo: 0,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
case 'enter-to-2': {
|
case "enter-to-2": {
|
||||||
return {
|
return {
|
||||||
...initOpacity,
|
...initOpacity,
|
||||||
enterToFloorTwo: 1,
|
enterToFloorTwo: 1,
|
||||||
enterVideo: 0,
|
enterVideo: 0,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
case 'floor-1-to-2': {
|
case "floor-1-to-2": {
|
||||||
return {
|
return {
|
||||||
...initOpacity,
|
...initOpacity,
|
||||||
floorOneToTwo: 1,
|
floorOneToTwo: 1,
|
||||||
enterToFloorOne: 0,
|
enterToFloorOne: 0,
|
||||||
enterVideo: 0,
|
enterVideo: 0,
|
||||||
floorTwoToOne: 0,
|
floorTwoToOne: 0,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
case 'floor-2-to-1': {
|
case "floor-2-to-1": {
|
||||||
return {
|
return {
|
||||||
...initOpacity,
|
...initOpacity,
|
||||||
floorTwoToOne: 1,
|
floorTwoToOne: 1,
|
||||||
enterToFloorTwo: 0,
|
enterToFloorTwo: 0,
|
||||||
floorOneToTwo: 0,
|
floorOneToTwo: 0,
|
||||||
enterVideo: 0,
|
enterVideo: 0,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
function VideoContainer(props) {
|
function VideoContainer(props) {
|
||||||
const floor = props.floor || null;
|
const floor = props.floor || null;
|
||||||
const lastFloor = useRef(null);
|
const lastFloor = useRef(null);
|
||||||
const [opacity, dispatch] = useReducer(opacityReducer, initOpacity);
|
const [opacity, dispatch] = useReducer(opacityReducer, initOpacity);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (floor) {
|
if (floor) {
|
||||||
if (floor == 1) {
|
if (floor == 1) {
|
||||||
if (lastFloor.current == 2) {
|
if (lastFloor.current == 2) {
|
||||||
dispatch({ type: 'floor-2-to-1' });
|
dispatch({ type: "floor-2-to-1" });
|
||||||
} else {
|
} else {
|
||||||
dispatch({ type: 'enter-to-1' });
|
dispatch({ type: "enter-to-1" });
|
||||||
}
|
}
|
||||||
} else if (floor == 2) {
|
} else if (floor == 2) {
|
||||||
if (lastFloor.current == 1) {
|
if (lastFloor.current == 1) {
|
||||||
dispatch({ type: 'floor-1-to-2' });
|
dispatch({ type: "floor-1-to-2" });
|
||||||
} else {
|
} else {
|
||||||
dispatch({ type: 'enter-to-2' });
|
dispatch({ type: "enter-to-2" });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
lastFloor.current = floor;
|
lastFloor.current = floor;
|
||||||
}
|
}
|
||||||
}, [floor]);
|
}, [floor]);
|
||||||
|
|
||||||
const enterToFloorOne = () => {
|
const enterToFloorOne = () => {
|
||||||
// 更新层数
|
// 更新层数
|
||||||
props.onFloorUpdate(1);
|
props.onFloorUpdate(1);
|
||||||
// floor1 one 立即显示，enter 延迟点消失
|
// floor1 one 立即显示，enter 延迟点消失
|
||||||
dispatch({ type: 'enter-to-1' });
|
dispatch({ type: "enter-to-1" });
|
||||||
};
|
};
|
||||||
|
|
||||||
function handleEnterVideoEnd() {
|
function handleEnterVideoEnd() {
|
||||||
// console.log('video end');
|
// console.log('video end');
|
||||||
enterToFloorOne();
|
enterToFloorOne();
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AnimatePresence>
|
<AnimatePresence>
|
||||||
<EnterVideo
|
<EnterVideo
|
||||||
key="enter"
|
key="enter"
|
||||||
onVideoEnd={handleEnterVideoEnd}
|
onVideoEnd={handleEnterVideoEnd}
|
||||||
opacity={opacity.enterVideo}
|
opacity={opacity.enterVideo}
|
||||||
/>
|
/>
|
||||||
<EnterToFloorOne key="enter-to-1" opacity={opacity.enterToFloorOne} />
|
<EnterToFloorOne key="enter-to-1" opacity={opacity.enterToFloorOne} />
|
||||||
<EnterToFloorTwo key="enter-to-2" opacity={opacity.enterToFloorTwo} />
|
<EnterToFloorTwo key="enter-to-2" opacity={opacity.enterToFloorTwo} />
|
||||||
<FloorOneToTwo key="1-to-2" opacity={opacity.floorOneToTwo} />
|
<FloorOneToTwo
|
||||||
<FloorTwoToOne key="2-to-1" opacity={opacity.floorTwoToOne} />
|
key="1-to-2"
|
||||||
</AnimatePresence>
|
opacity={opacity.floorOneToTwo}
|
||||||
);
|
floor={floor}
|
||||||
|
/>
|
||||||
|
<FloorTwoToOne key="2-to-1" opacity={opacity.floorTwoToOne} />
|
||||||
|
</AnimatePresence>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default VideoContainer;
|
export default VideoContainer;
|
||||||
|
|||||||
@ -19,7 +19,7 @@ function EnterToFloorOne(props) {
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
// console.log("开启enter的火播放");
|
// console.log("开启enter的火播放");
|
||||||
setFireCanPlay(true);
|
setFireCanPlay(true);
|
||||||
}, 5000);
|
}, 1800);
|
||||||
}
|
}
|
||||||
return () => {
|
return () => {
|
||||||
// console.log("关闭enter的火播放");
|
// console.log("关闭enter的火播放");
|
||||||
@ -49,7 +49,7 @@ function EnterToFloorOne(props) {
|
|||||||
<source src="/video/floor1.webm" type="video/mp4" />
|
<source src="/video/floor1.webm" type="video/mp4" />
|
||||||
</video>
|
</video>
|
||||||
|
|
||||||
{/* {fireCanPlay && fireDir == "东火" && (
|
{fireCanPlay && fireDir == "东火" && (
|
||||||
<video
|
<video
|
||||||
src="/video/fire_top.webm"
|
src="/video/fire_top.webm"
|
||||||
muted
|
muted
|
||||||
@ -68,7 +68,7 @@ function EnterToFloorOne(props) {
|
|||||||
width={3900}
|
width={3900}
|
||||||
style={{ position: "absolute", top: "-20px", left: "-20px" }}
|
style={{ position: "absolute", top: "-20px", left: "-20px" }}
|
||||||
></video>
|
></video>
|
||||||
)} */}
|
)}
|
||||||
|
|
||||||
<TemperatureTop
|
<TemperatureTop
|
||||||
style={{
|
style={{
|
||||||
|
|||||||
@ -1,9 +1,8 @@
|
|||||||
import { motion, AnimatePresence } from "framer-motion";
|
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 FeederStatus from "../../../../Common/Feeder";
|
||||||
import TemperatureTop from "../../../../../components/Common/TemperatureTop";
|
|
||||||
import TemperatureBottom from "../../../../Common/TemperatureBottom";
|
import TemperatureBottom from "../../../../Common/TemperatureBottom";
|
||||||
import { useSelector, useDispatch } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
|
|
||||||
function FloorOneToTwo(props) {
|
function FloorOneToTwo(props) {
|
||||||
const fireInfo = useSelector((state) => state.fireInfo);
|
const fireInfo = useSelector((state) => state.fireInfo);
|
||||||
@ -13,6 +12,7 @@ function FloorOneToTwo(props) {
|
|||||||
|
|
||||||
const vd = useRef(null);
|
const vd = useRef(null);
|
||||||
const show = props.opacity || 0;
|
const show = props.opacity || 0;
|
||||||
|
const speed = "s";
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (show) {
|
if (show) {
|
||||||
@ -20,7 +20,7 @@ function FloorOneToTwo(props) {
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
// console.log("开启1-2的火播放");
|
// console.log("开启1-2的火播放");
|
||||||
setFireCanPlay(true);
|
setFireCanPlay(true);
|
||||||
}, 3000);
|
}, 2000);
|
||||||
}
|
}
|
||||||
if (!show) setFireCanPlay(false);
|
if (!show) setFireCanPlay(false);
|
||||||
return () => {
|
return () => {
|
||||||
@ -81,6 +81,8 @@ function FloorOneToTwo(props) {
|
|||||||
width: "2380px",
|
width: "2380px",
|
||||||
zIndex: 0,
|
zIndex: 0,
|
||||||
}}
|
}}
|
||||||
|
speed={speed}
|
||||||
|
floor={props.floor}
|
||||||
/>
|
/>
|
||||||
<FeederStatus />
|
<FeederStatus />
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|||||||
@ -19,7 +19,7 @@ function FloorTwoToOne(props) {
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
// console.log("开启2-1的火播放");
|
// console.log("开启2-1的火播放");
|
||||||
setFireCanPlay(true);
|
setFireCanPlay(true);
|
||||||
}, 3000);
|
}, 1800);
|
||||||
}
|
}
|
||||||
if (!show) setFireCanPlay(false);
|
if (!show) setFireCanPlay(false);
|
||||||
return () => {
|
return () => {
|
||||||
|
|||||||
120
src/components/Modules/KilnOptimize/Center/VideoContainer.jsx
Normal file
120
src/components/Modules/KilnOptimize/Center/VideoContainer.jsx
Normal file
@ -0,0 +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";
|
||||||
|
|
||||||
|
const initOpacity = {
|
||||||
|
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,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function VideoContainer(props) {
|
||||||
|
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 || 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" });
|
||||||
|
};
|
||||||
|
|
||||||
|
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}
|
||||||
|
floor={floor}
|
||||||
|
preFloor={preFloor}
|
||||||
|
/>
|
||||||
|
<FloorTwoToOne key="2-to-1" opacity={opacity.floorTwoToOne} />
|
||||||
|
</AnimatePresence>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default VideoContainer;
|
||||||
95
src/components/Modules/KilnOptimize/Center/index.jsx
Normal file
95
src/components/Modules/KilnOptimize/Center/index.jsx
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="bgKilnInner"
|
||||||
|
style={{
|
||||||
|
width: "100%",
|
||||||
|
position: "absolute",
|
||||||
|
top: "12%",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* 时间火向数据 */}
|
||||||
|
<div
|
||||||
|
className="fireAndTime"
|
||||||
|
style={{ position: "absolute", top: "-112px", height: "212px" }}
|
||||||
|
>
|
||||||
|
<Chart2 />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* menu */}
|
||||||
|
<div
|
||||||
|
className="subMenu"
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
marginBottom: "24px",
|
||||||
|
justifyContent: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={
|
||||||
|
"flr flr1 " + cls.menuItem + " " + (floor === 1 ? cls.active : "")
|
||||||
|
}
|
||||||
|
onClick={() => onFloorUpdate(1)}
|
||||||
|
>
|
||||||
|
碹顶温度
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={
|
||||||
|
"flr flr2 " + cls.menuItem + " " + (floor === 2 ? cls.active : "")
|
||||||
|
}
|
||||||
|
onClick={() => onFloorUpdate(2)}
|
||||||
|
>
|
||||||
|
池底温度
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={
|
||||||
|
"flr flr2 " + cls.menuItem + " " + (floor === 3 ? cls.active : "")
|
||||||
|
}
|
||||||
|
onClick={() => onFloorUpdate(3)}
|
||||||
|
>
|
||||||
|
溶液速度
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
{/* video */}
|
||||||
|
<VideoContainer
|
||||||
|
onFloorUpdate={onFloorUpdate}
|
||||||
|
floor={floor}
|
||||||
|
preFloor={preFloor}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default KilnCenter;
|
||||||
46
src/components/Modules/KilnOptimize/Center/index.module.css
Normal file
46
src/components/Modules/KilnOptimize/Center/index.module.css
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
.menuItem {
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
padding: 10px 50px;
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 48px;
|
||||||
|
letter-spacing: 6px;
|
||||||
|
background: url(../../../../assets/bg_center_menu.png) no-repeat;
|
||||||
|
background-size: 100% 50%;
|
||||||
|
background-position: bottom;
|
||||||
|
color: #00fff788;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
|
||||||
|
'PingFang SC', 'Microsoft YaHei', '微软雅黑', 'Microsoft YaHei UI',
|
||||||
|
'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menuItem.active,
|
||||||
|
.menuItem:hover {
|
||||||
|
color: #00fff7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menuItem:not(:first-child) {
|
||||||
|
margin-left: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.videoLayer2 {
|
||||||
|
width: 2440px;
|
||||||
|
height: 720px;
|
||||||
|
background: url(../../../../assets/video-layer-2.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-position: 0 0;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.videoLayer1 {
|
||||||
|
width: 2440px;
|
||||||
|
height: 720px;
|
||||||
|
background: url(../../../../assets/floor1-status.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-position: 0 0;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
@ -0,0 +1,101 @@
|
|||||||
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
|
import { useRef, useEffect, useMemo, useCallback, useState } from "react";
|
||||||
|
import FeederStatus from "../../../../Common/Feeder";
|
||||||
|
import TemperatureBottom from "../../../../Common/TemperatureBottom";
|
||||||
|
import TemperatureTop from "../../../../Common/TemperatureTop";
|
||||||
|
import { useSelector, useDispatch } from "react-redux";
|
||||||
|
import TopColorBlockEnter from "./../../components/TopColorBlockEnter";
|
||||||
|
|
||||||
|
function EnterToFloorOne(props) {
|
||||||
|
const fireInfo = useSelector((state) => state.fireInfo);
|
||||||
|
const fireDir = fireInfo?.fireDirection || null;
|
||||||
|
|
||||||
|
const [fireCanPlay, setFireCanPlay] = useState(false);
|
||||||
|
const vd = useRef(null);
|
||||||
|
const show = props.opacity || 0;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (show) {
|
||||||
|
vd.current.play();
|
||||||
|
setTimeout(() => {
|
||||||
|
// console.log("开启enter的火播放");
|
||||||
|
setFireCanPlay(true);
|
||||||
|
}, 1800);
|
||||||
|
}
|
||||||
|
return () => {
|
||||||
|
// console.log("关闭enter的火播放");
|
||||||
|
setFireCanPlay(false);
|
||||||
|
};
|
||||||
|
}, [show]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AnimatePresence>
|
||||||
|
{show && (
|
||||||
|
<motion.div
|
||||||
|
className="video-wrapper"
|
||||||
|
style={{
|
||||||
|
position: "fixed",
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
width: "100%",
|
||||||
|
height: "100%",
|
||||||
|
zIndex: -999,
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }}
|
||||||
|
>
|
||||||
|
<video ref={vd} muted width={"100%"}>
|
||||||
|
<source src="/video/floor1.webm" type="video/mp4" />
|
||||||
|
</video>
|
||||||
|
|
||||||
|
{fireCanPlay && fireDir == "东火" && (
|
||||||
|
<video
|
||||||
|
src="/video/fire_top.webm"
|
||||||
|
muted
|
||||||
|
autoPlay
|
||||||
|
loop
|
||||||
|
width={3900}
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
top: "-20px",
|
||||||
|
left: "-20px",
|
||||||
|
zIndex: 9,
|
||||||
|
}}
|
||||||
|
></video>
|
||||||
|
)}
|
||||||
|
{fireCanPlay && fireDir == "西火" && (
|
||||||
|
<video
|
||||||
|
src="/video/fire_down.webm"
|
||||||
|
muted
|
||||||
|
autoPlay
|
||||||
|
loop
|
||||||
|
width={3900}
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
top: "-20px",
|
||||||
|
left: "-20px",
|
||||||
|
zIndex: 9,
|
||||||
|
}}
|
||||||
|
></video>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<TopColorBlockEnter />
|
||||||
|
|
||||||
|
<TemperatureTop
|
||||||
|
style={{
|
||||||
|
top: "218px",
|
||||||
|
left: "678px",
|
||||||
|
width: "2380px",
|
||||||
|
zIndex: 10,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<FeederStatus />
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default EnterToFloorOne;
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { useRef, useEffect } from 'react';
|
||||||
|
|
||||||
|
function EnterToFloorTwo(props) {
|
||||||
|
const vd = useRef(null);
|
||||||
|
const opacity = props.opacity || 0;
|
||||||
|
|
||||||
|
if (opacity == 1) {
|
||||||
|
setTimeout(() => {
|
||||||
|
vd.current.play();
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
vd.current.addEventListener('ended', () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
vd.current.currentTime = 0;
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className="video-wrapper"
|
||||||
|
style={{
|
||||||
|
position: 'fixed',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
zIndex: -1000,
|
||||||
|
opacity: opacity,
|
||||||
|
zIndex: -999,
|
||||||
|
}}
|
||||||
|
transition={{ type: 'tween', duration: 1 }}
|
||||||
|
>
|
||||||
|
<video ref={vd} muted width={'100%'}>
|
||||||
|
<source src="/video/floor2.webm" type="video/mp4" />
|
||||||
|
</video>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default EnterToFloorTwo;
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
import { motion, AnimatePresence } from 'framer-motion';
|
||||||
|
import { useEffect, useRef, useMemo } from 'react';
|
||||||
|
|
||||||
|
function EnterVideo(props) {
|
||||||
|
const show = props.opacity || 0;
|
||||||
|
const vd = useRef(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
vd.current.addEventListener('ended', props.onVideoEnd);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AnimatePresence>
|
||||||
|
{show && (
|
||||||
|
<motion.div
|
||||||
|
className="video-wrapper"
|
||||||
|
style={{
|
||||||
|
position: 'fixed',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
zIndex: -1000,
|
||||||
|
}}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }}
|
||||||
|
>
|
||||||
|
<video ref={vd} muted autoPlay={true} width={'100%'}>
|
||||||
|
<source src="/video/enter.webm" type="video/mp4" />
|
||||||
|
</video>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default EnterVideo;
|
||||||
@ -0,0 +1,155 @@
|
|||||||
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
|
import { useRef, useEffect, useState } from "react";
|
||||||
|
import FeederStatus from "../../../../Common/Feeder";
|
||||||
|
import TemperatureBottom from "../../../../Common/TemperatureBottom";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import BotttomColorBlock from "./../../components/BotttomColorBlock";
|
||||||
|
import image from "./../../../../../assets/kilnSpeed.png";
|
||||||
|
|
||||||
|
function FloorOneToTwo(props) {
|
||||||
|
const fireInfo = useSelector((state) => state.fireInfo);
|
||||||
|
const fireDir = fireInfo?.fireDirection || null;
|
||||||
|
|
||||||
|
const [fireCanPlay, setFireCanPlay] = useState(false);
|
||||||
|
|
||||||
|
const 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);
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
if (!show) setFireCanPlay(false);
|
||||||
|
return () => {
|
||||||
|
// console.log("关闭1-2的火播放");
|
||||||
|
setFireCanPlay(false);
|
||||||
|
};
|
||||||
|
}, [show]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AnimatePresence>
|
||||||
|
{show && (
|
||||||
|
<motion.div
|
||||||
|
className="video-wrapper"
|
||||||
|
style={{
|
||||||
|
position: "fixed",
|
||||||
|
top: "0px",
|
||||||
|
left: "0px",
|
||||||
|
width: "calc(100% - 50px)",
|
||||||
|
height: "calc(100% - 7px)",
|
||||||
|
zIndex: -998,
|
||||||
|
overflow: "clip",
|
||||||
|
}}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0, transition: { duration: 0, delay: 0.1 } }}
|
||||||
|
>
|
||||||
|
<video ref={vd} muted>
|
||||||
|
<source src="/video/1to2.webm" type="video/mp4" />
|
||||||
|
</video>
|
||||||
|
{/* 窑炉的色块 */}
|
||||||
|
{showBottom && (
|
||||||
|
<BotttomColorBlock speed={speed} floor={props.floor} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{showBottom && fireCanPlay && fireDir == "东火" && (
|
||||||
|
<video
|
||||||
|
src="/video/fire_top.webm"
|
||||||
|
muted
|
||||||
|
autoPlay
|
||||||
|
loop
|
||||||
|
width={3700}
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
top: "18px",
|
||||||
|
left: "72px",
|
||||||
|
zIndex: 9,
|
||||||
|
}}
|
||||||
|
></video>
|
||||||
|
)}
|
||||||
|
{showBottom && fireCanPlay && fireDir == "西火" && (
|
||||||
|
// {fireCanPlay && (
|
||||||
|
<video
|
||||||
|
src="/video/fire_down.webm"
|
||||||
|
muted
|
||||||
|
autoPlay
|
||||||
|
loop
|
||||||
|
width={3780}
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
top: "-24px",
|
||||||
|
left: "12px",
|
||||||
|
zIndex: 9,
|
||||||
|
}}
|
||||||
|
></video>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 温度组件 */}
|
||||||
|
{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>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FloorOneToTwo;
|
||||||
@ -0,0 +1,104 @@
|
|||||||
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
|
import { useRef, useEffect, useMemo, useState } from "react";
|
||||||
|
import FeederStatus from "../../../../Common/Feeder";
|
||||||
|
import TemperatureBottom from "../../../../Common/TemperatureBottom";
|
||||||
|
import TemperatureTop from "../../../../Common/TemperatureTop";
|
||||||
|
import { useSelector, useDispatch } from "react-redux";
|
||||||
|
import TopColorBlock from "./../../components/TopColorBlock";
|
||||||
|
|
||||||
|
function FloorTwoToOne(props) {
|
||||||
|
const fireInfo = useSelector((state) => state.fireInfo);
|
||||||
|
const fireDir = fireInfo?.fireDirection || null;
|
||||||
|
const [fireCanPlay, setFireCanPlay] = useState(false);
|
||||||
|
|
||||||
|
const vd = useRef(null);
|
||||||
|
const show = props.opacity || 0;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (show) {
|
||||||
|
vd.current.play();
|
||||||
|
setTimeout(() => {
|
||||||
|
// console.log("开启2-1的火播放");
|
||||||
|
setFireCanPlay(true);
|
||||||
|
}, 1800);
|
||||||
|
}
|
||||||
|
if (!show) setFireCanPlay(false);
|
||||||
|
return () => {
|
||||||
|
// console.log("关闭2-1的火播放");
|
||||||
|
setFireCanPlay(false);
|
||||||
|
};
|
||||||
|
}, [show]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AnimatePresence>
|
||||||
|
{show && (
|
||||||
|
<motion.div
|
||||||
|
className="video-wrapper"
|
||||||
|
style={{
|
||||||
|
position: "fixed",
|
||||||
|
top: "0px",
|
||||||
|
left: "0px",
|
||||||
|
width: "calc(100% - 50px)",
|
||||||
|
height: "calc(100% - 7px)",
|
||||||
|
zIndex: -998,
|
||||||
|
overflow: "clip",
|
||||||
|
}}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0, transition: { duration: 0.2, delay: 0.2 } }}
|
||||||
|
>
|
||||||
|
<video ref={vd} muted>
|
||||||
|
<source src="/video/2to1.webm" type="video/mp4" />
|
||||||
|
</video>
|
||||||
|
|
||||||
|
{fireCanPlay && fireDir == "东火" && (
|
||||||
|
// {fireCanPlay && (
|
||||||
|
<video
|
||||||
|
src="/video/fire_top.webm"
|
||||||
|
muted
|
||||||
|
autoPlay
|
||||||
|
loop
|
||||||
|
width={3800}
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
top: "10px",
|
||||||
|
left: "0px",
|
||||||
|
zIndex: 9,
|
||||||
|
}}
|
||||||
|
></video>
|
||||||
|
)}
|
||||||
|
{fireCanPlay && fireDir == "西火" && (
|
||||||
|
// {fireCanPlay && (
|
||||||
|
<video
|
||||||
|
src="/video/fire_down.webm"
|
||||||
|
muted
|
||||||
|
autoPlay
|
||||||
|
loop
|
||||||
|
width={3800}
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
top: "-12px",
|
||||||
|
left: "-10px",
|
||||||
|
zIndex: 9,
|
||||||
|
}}
|
||||||
|
></video>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<TopColorBlock />
|
||||||
|
|
||||||
|
<TemperatureTop
|
||||||
|
style={{
|
||||||
|
top: "200px",
|
||||||
|
left: "652px",
|
||||||
|
width: "2380px",
|
||||||
|
zIndex: 10,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<FeederStatus style={{ left: "680px" }} />
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FloorTwoToOne;
|
||||||
22
src/components/Modules/KilnOptimize/LeftSide/index.jsx
Normal file
22
src/components/Modules/KilnOptimize/LeftSide/index.jsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import KilnPress from './../components/KilnPress';
|
||||||
|
import LiquidTrend from './../components/LiquidTrend';
|
||||||
|
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
|
||||||
|
import cls from './index.module.scss';
|
||||||
|
|
||||||
|
export default function index() {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className={cls.leftBar}
|
||||||
|
initial={{ opacity: 0, position: 'absolute' }}
|
||||||
|
animate={{ opacity: 1, position: 'relative' }}
|
||||||
|
exit={{ opacity: 0, position: 'relative' }}
|
||||||
|
transition={{ type: 'tween' }}
|
||||||
|
>
|
||||||
|
<KilnPress style={{ flex: 1, width: '100%', marginTop: '24px' }} />
|
||||||
|
<LiquidTrend style={{ flex: 1, width: '100%', marginTop: '24px' }} />
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
.leftBar {
|
||||||
|
width: 625px;
|
||||||
|
height: 966px;
|
||||||
|
// margin-left: 40px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
22
src/components/Modules/KilnOptimize/RightSide/index.jsx
Normal file
22
src/components/Modules/KilnOptimize/RightSide/index.jsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import KilnTop from './../components/KilnTop';
|
||||||
|
import KilnBottom from './../components/KilnBottom';
|
||||||
|
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
|
||||||
|
import cls from './index.module.scss';
|
||||||
|
|
||||||
|
export default function index() {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className={cls.leftBar}
|
||||||
|
initial={{ opacity: 0, position: 'absolute' }}
|
||||||
|
animate={{ opacity: 1, position: 'relative' }}
|
||||||
|
exit={{ opacity: 0, position: 'relative' }}
|
||||||
|
transition={{ type: 'tween' }}
|
||||||
|
>
|
||||||
|
<KilnTop style={{ flex: 1, width: '100%', marginTop: '24px' }} />
|
||||||
|
<KilnBottom style={{ flex: 1, width: '100%', marginTop: '24px' }} />
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
.leftBar {
|
||||||
|
width: 625px;
|
||||||
|
height: 966px;
|
||||||
|
// margin-left: 40px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
@ -0,0 +1,369 @@
|
|||||||
|
import { useSelector } from "react-redux";
|
||||||
|
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 = (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 <= 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 <= 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,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="Gradient" x1="0" x2="1" y1="0" y2="0">
|
||||||
|
<stop offset="0%" stopColor={returnColor2("TE302")} />
|
||||||
|
<stop offset="7%" stopColor={returnColor2("TE304")} />
|
||||||
|
<stop offset="14%" stopColor={returnColor2("TE306")} />
|
||||||
|
<stop offset="21%" stopColor={returnColor2("TE308")} />
|
||||||
|
<stop offset="28%" stopColor={returnColor2("TE309")} />
|
||||||
|
<stop offset="35%" stopColor={returnColor2("TE310")} />
|
||||||
|
<stop offset="42%" stopColor={returnColor2("TE312")} />
|
||||||
|
<stop offset="49%" stopColor={returnColor2("TE314")} />
|
||||||
|
<stop offset="56%" stopColor={returnColor2("TE315")} />
|
||||||
|
<stop offset="63%" stopColor={returnColor2("TE316")} />
|
||||||
|
<stop offset="70%" stopColor={returnColor2("TE318")} />
|
||||||
|
<stop offset="77%" stopColor={returnColor2("TE321")} />
|
||||||
|
<stop offset="84%" stopColor={returnColor2("TE331")} />
|
||||||
|
<stop offset="91%" stopColor={returnColor2("TE332")} />
|
||||||
|
<stop offset="100%" stopColor={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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<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)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BotttomColorBlock;
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path class="cls-2" d="M374,684.78c.67-3.25-.17-7.48,1.32-9.68,4.12-6.1,3.08-12.76,3.87-19.21,1.14-9.35,2-18.74,2.83-28.13.46-4.94.68-9.91,1.1-14.86.21-2.35,1.08-4,4-4,8,0,15.88-1.32,23.88-.92,10.47.52,20.87-1.41,31.37-1.09,3.77.12,4.88,1.19,4.72,4.88-.53,12.25-1.55,24.44-2.87,36.62-.32,3,0,6-.28,9-.24,2.31.05,5.21-3.43,5.73-.94.14-1.28.88-1.46,1.77-1.14,5.74-1.63,11.45-.05,17.23.63,2.29,1.68,3,3.93,2.46,5.1-1.14,10.29-.2,15.42-.55,2.83-.19,3.92,1,3.72,3.77-.44,6.11-.48,12.27-1.17,18.35-1.4,12.35-1.89,24.76-2.9,37.13-1.16,14.2-2.68,28.36-3.07,42.61-.11,4.35-1.77,6.43-7,6.29-17.64-.48-35.3-.23-52.94-.25-6.26-1.06-12.57-.31-18.85-.43-9.37-.19-12.74-3.23-12.56-12.59.27-14,2.08-27.79,4-41.61.36-2.63,1.12-5.23.95-7.9-.82-12.7,1.41-25.14,3.1-37.63C371.93,689.25,372.3,686.78,374,684.78Z" transform="translate(277 -158)"/><path class="cls-3" d="M374,684.78c-1,7.35-1.83,14.72-3,22-.48,3-1.14,5.84-.95,8.85,1,15-2.57,29.58-3.76,44.38-.61,7.58-1.82,15.14-1.25,22.8.33,4.37,4.69,7.93,10.3,8.07,5,.12,10,0,15,.05,1.6,0,3.37-.57,4.7.93-14.8,0-29.6,0-44.39.19-3.37,0-4.36-.41-3.87-4.41,1.81-15.11,2.94-30.29,4.34-45.45,1.68-18.12,3.4-36.23,5-54.36.21-2.45,1.31-3.05,3.49-3C364.37,684.9,369.19,684.81,374,684.78Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:#fefefe;}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M480.88,792.94c-3.83,0-7.66,0-11.49,0-2,0-3.19-.13-3-3,1.07-14.33,1.48-28.72,2.72-43,1.11-12.89,2.22-25.76,2.95-38.68.46-8.24,1.27-16.46,2-24.69.14-1.59.47-2,2.68-1.87a181.45,181.45,0,0,0,20.32-.36c1.22-.06,2.78-.14,3.16-2.66.67-4.4,1.28-8.55-.11-12.95-2.19-6.89.21-13.88.14-20.84-.06-6.66,1.64-13.34,1.64-20,0-6,1.56-11.78,1.16-17.74-.14-2,.76-3.13,2.89-3.14,8.5-.05,17-.08,25.49-.22,7.34-.12,14.71-.85,22-.41,4.39.27,8.82.39,13.14.24,3.78-.13,3.73,1.65,3.4,4-1.36,9.61-1.61,19.29-2,29-.3,7.76-.25,15.65-1.79,23.18-1.08,5.35-2.77,10.4-2.64,16.06.08,3.8.43,5.56,4.65,5.27s8.33.06,12.49-.11c2.45-.1,3.59.4,3.38,3.21-1.2,16.07-1.4,32.2-2.92,48.27-.92,9.67-.31,19.48-1.26,29.15-.93,9.47-.5,19-1.35,28.42-.16,1.75-1.07,1.94-2.43,2-9.27.23-18.54.51-27.81.72-6,.14-11.95.24-17.93.26Q505.64,793,480.88,792.94Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M688.32,678.37c6.48-1.08,13,.16,19.42-.34,1.14-.09,1.78.47,1.69,2.11-.34,5.79.05,11.64-.48,17.4-1.39,15-.26,30.1-1.71,45.12-.76,7.79-.07,15.7-.25,23.55s-.81,15.51-.89,23.26c0,3.15-1.9,2.46-3.58,2.46-16.33,0-32.66,0-49,0q-28.53,0-57,.16c-7.62,0-7.43.11-6.55-7.79.62-5.55.56-11.18.83-16.75.42-8.63,1-17.28,1.34-25.92.64-16.17,1.82-32.32,2.47-48.5.12-2.84.93-5.77.35-8.49-1.27-6,2.93-7,6.56-6.37,6.94,1.15,13.84-.2,20.71.67,1.72.22,1.85-.78,1.85-2.09a47.69,47.69,0,0,1,.65-10.39c.2-.92-.46-2.91-.91-3-5.09-.61-2.73-4.41-2.65-6.68.55-15.06.41-30.18,2.86-45.13a7.54,7.54,0,0,0-.17-1.47c-.37-9.21-.37-9.07,8.66-9.27,18.49-.4,37,.7,55.49-.37,2-.11,3.2.49,3.09,2.94-.71,16.32-.84,32.66-1.89,49C688.61,661,687,669.58,688.32,678.37Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M811.77,680c5.44,0,11,.23,16.42-.09,3.78-.22,5,.73,4.93,4.77-.21,26.57-.11,53.14-.11,79.71,0,7.49-.09,15,0,22.48.06,3-.88,4.18-4,4.15-12.62-.12-25.25-.17-37.87,0-8.65.11-17.3.82-26,.91-14.36.16-28.73-.25-43.08.21-5,.16-6-2.93-5.63-5.86.84-6,0-11.89.51-17.79,1.4-16,.48-32.14,1.79-48.2.83-10.23.17-20.57.19-30.86,0-9.47,0-9.24,9.15-8.88,5.28.22,10.57-.91,15.92-.23,2.79.35,4.43-.89,4-4.26-.37-2.95,0-6-.11-9-.08-1.69,1.13-4.1-2.33-4.33-1-.06-.61-2.05-.62-3.18-.2-17.65,1.65-35.27,1-52.93-.13-3.43,1.83-3.66,4.46-3.64,10.66.07,21.34.3,32-.06,8.42-.29,16.85.86,25.28-.69,1.7-.31,4.53.29,4.41,4.08-.6,18.58.32,37.18-.51,55.78C811.35,667.88,811.57,673.78,811.77,680Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M843,740.81q0-22.23,0-44.47c0-10.87,2.11-12.72,13.14-11.72,4.78.43,9.55-1,14.37,0,.89.2,1.52-1.36,1.51-2.65-.06-6.15,1.89-13.19-.44-18.28-4.35-9.47-.72-18.86-2.11-28.22a72.45,72.45,0,0,1,.19-21.69c.18-1.1.56-2.48.1-3.33-1.74-3.2.15-3.45,2.52-3.49,1,0,2,0,3,0,18.19-.06,36.39-.09,54.58-.22,2.19,0,3.08.42,3.2,2.89.7,13.84,1.45,27.68.85,41.51-.44,10.23,1.61,20.32,1.05,30.51-.13,2.24,1,2.33,2.69,2.31,4.33-.07,8.67.09,13-.07,2.46-.1,3.57.4,3.41,3.21a193,193,0,0,0,.27,28.67c1.52,16.25-.37,32.49,1.33,48.72a137.51,137.51,0,0,1,.37,20c-.17,4.23-1,6.62-6.36,6.55-25.32-.34-50.66-.3-76-.07-9,.08-18.1-.43-27.16.48-2.16.22-3.7-1-3.64-4.22C843.17,771.8,843,756.3,843,740.81Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M966,771.59c0-8.14-.48-16.25-.82-24.38-.6-13.94.17-27.94-.31-41.89-.24-7.24-.64-14.48-1-21.72-.18-4.27,1-6,5.52-5.73,7.48.37,15,0,22.49.15,3.54.08,4.3-1.95,3.9-4.62-1.5-10-1.66-20-1.94-30.11-.37-13.11-.87-26.21-1-39.33,0-3,.39-3.1,3.15-3.11q18.24-.06,36.48-.86c6-.27,12,1.1,18.07.12,2.19-.35,2.8,1.9,2.9,3.93.49,9.59,1.12,19.17,1.52,28.75.55,13.51.85,27,1.47,40.52.12,2.8,1,5.22,5.1,4.64s8.35-.18,12.53-.19c2.83,0,4.08,1.18,4,4.23-.47,13.4.72,26.78,1.3,40.13.36,8.46-.59,17.13,1.6,25.53.5,1.93,0,4-.09,6-.37,11,1,21.85,1.2,32.78.06,2.79-.67,3.55-3.53,3.59-12.86.18-25.7.55-38.58.06-9.55-.37-19.15.7-28.73.81-14.17.17-28.36,0-42.54.1-2.31,0-2.75-.84-2.71-2.9C966.08,782.59,966,777.09,966,771.59Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M1150.13,789.94c-15.52.45-34.88-.55-54.23.45-2.17.11-3.91-.9-4-3.81-.22-13.2-.23-26.43-1-39.61-1-16-1.51-32.05-2.15-48.08-.2-5-.3-10.19-.81-15.25-.33-3.28,1-3.82,3.92-3.74,7.49.2,15-.1,22.48.14,3.54.11,4.55-1.46,4.69-4.59a66,66,0,0,0-2-17.46c-1.54-6.78-.47-13.84-1.33-20.68-1.14-9-.41-18.11-1.62-27.14-1-7.47,0-8.5,7.3-8.08,14,.81,27.93-1.05,41.91.44,2.66.29,6.62-1.71,8.24.22s.8,5.62.94,8.55c.52,11.41.24,22.92,1.69,34.2,1.35,10.48-.14,21,1.56,31.41.51,3.2,1.82,3.47,4,3,4.32-.89,8.72.9,13.12-.68,1-.34,4.07,0,4.21,3.73.65,17.54,1.54,35.09,2.93,52.58,1.35,17.11,2.33,34.22,3.33,51.35.14,2.35-.69,3-4,3C1184.28,790,1169.12,789.94,1150.13,789.94Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M1261.82,604c9.2,0,18.42.29,27.61-.14,4-.19,5.26,1.62,5.5,4.78,1.09,14.09,2,28.21,3.06,42.31s2.12,28,3.54,42c.48,4.68.78,9.39,1.3,14.08,1.7,15.25,2.87,30.57,4.07,45.88.84,10.74,1.32,21.51,2.12,32.26.23,3.07-.71,3.87-3.82,3.89-8.89.06-17.77.79-26.66.86-20.14.14-40.29,0-60.43.11-3.19,0-4.15-1.65-4.07-4.1.21-5.8-.68-11.5-1-17.24-1.17-18.88-2.08-37.77-3.78-56.63-.82-9-1.88-18.08-1.3-27.21.12-2,.42-2.6,2.66-3a66.19,66.19,0,0,1,17.75-.73c5.59.57,7.29-2.14,7.6-6.75.27-4.05.41-9.56-1.38-11.76-4-4.87-2.48-10.09-3.42-15-1-5.36-.38-11-1.27-16.41-1.13-6.81-.2-13.74-1.8-20.52-1.29-5.5,0-6.66,5.77-6.66Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.75.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M417,240c17.2,0,34.41.12,51.61-.05,7.73-.08,15.47.23,23.21-.64,2.33-.26,5.77-.17,5.23,4.2-1.93,15.53-2.35,31.19-3.78,46.77-1,10.78-1.72,21.63-2.25,32.47-.49,9.79-1.8,19.51-2.21,29.32-.22,5.29-6.43,4.19-9,3.63-4.49-1-8.86,1.21-13.13-.56-1.19-.49-1.42.54-1.74,1.65-1.71,6-2,12.6.41,17.81,3,6.41,1,12.32,1.09,18.39.17,11.48-4.33,22.59-2.92,34.25.29,2.36-2.21,1.82-3.69,1.79-12.47-.24-24.93-1.51-37.41-.92-6.67.31-13.23-1.65-19.94-.63-1.66.26-2.73-1.11-2.5-3.25,1.73-16.17,3.48-32.34,5-48.54.56-6.17-2.43-12-2.88-18.05-.14-1.88-1.33-1.54-2.43-1.56-2,0-4,0-6,0-5.51,0-6.77-1.11-5.51-6.41s1.17-10.8,1.76-16.19c1.67-15.15,2.33-30.42,4.26-45.53,1.72-13.43,2.65-26.9,3.84-40.35.5-5.64,2-7.06,8.49-7.48H417Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M559,241.07c14.66,0,29.31,0,44,0,3,0,4.49-.27,4.37,4.25-.25,10-1.06,20-1.44,29.94-.8,20.66-2.55,41.28-3.78,61.92-.28,4.65-.11,9.32,0,14,0,3.32-1.27,4.52-4.69,4.07a74.81,74.81,0,0,0-9.48-.16c-6.53,0-6.64,0-6.81,6.83-.08,3.58.71,7.28.67,10.72-.08,7.64-.69,15.32-.91,23-.07,2.27-.89,4.56-.74,6.81.53,7.8-1.48,15.45-1.1,23.24.16,3.14-1.3,4.5-4.74,4.45-12.66-.19-25.33-.22-38,0-5.26.09-10.51.14-15.77,0-3.06-.07-3.8-.46-3.66-4,.28-7.22.67-14.43,1.21-21.64.64-8.43.87-16.94,2.26-25.25.44-2.63,1.7-5.48,2.42-8.29,1.21-4.67-.61-9.11-1.08-13.64-.13-1.24-1.06-2.88-3-2.24-4.79,1.52-9.72-1-14.67.69-1.43.49-4.57-.47-4.1-4.63,1.22-10.83,1.36-21.78,2.25-32.66q2.28-27.82,4.13-55.67c.31-4.75.65-9.5.87-14.27.27-5.93,2-7.43,7.94-7.44Q537,241.05,559,241.07Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.75.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M671.48,239.07c15.49,0,31,.08,46.48-.06,3.08,0,4.28.53,4.14,4-.68,16.69-1.16,33.38-1.55,50.08-.3,12.5.15,25-.74,37.49-.51,7.17-.63,14.31-.77,21.47,0,2.44-1.35,3.07-3.52,3-4.72-.06-9.45.17-14.17-.08-3-.16-3.18.91-3.32,3.65-.54,11,1.74,21.95,1,33-.69,10.29-1.29,20.59-1,30.91.06,1.95-.58,2.56-2.54,2.55q-20.44-.1-40.91,0c-5.52,0-11.05-.34-16.56.43-3.09.43-5.19.1-5.13-4.23.23-14.46.73-28.9,2.11-43.3.08-.82-.06-2.25.26-2.36,7.29-2.56,3.45-8.66,3.44-12.8,0-7.74-.71-7.45-8.57-7.48-5.08,0-10.13-.32-15.22.2-1.75.18-2.7-1.24-2.61-3.16.74-15,1.48-30,1.81-45s1.55-30,2.08-45c.22-6.39.68-12.81.87-19.23,0-1.53-1-3.05,2.71-3.37,16.41-1.44,32.81-.08,49.19-.64C669.81,239.05,670.65,239.07,671.48,239.07Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M744.69,244.07c21.59-.76,43.18.55,64.79-.41,8-.35,16.21.22,24.33.33,2.71,0,3.4.86,3.23,3.39-.54,8-.95,16.13-1.2,24.05-.28,8.9-.22,18.1-.26,27.07,0,10.6-.18,21.28-.53,31.92-.22,7-.26,14,.06,21,.15,3.38-1.16,3.78-4,3.64-4.16-.21-8.34.09-12.49-.11-2.65-.12-3.67.41-3.72,3.43-.34,20.73-1.19,41.45-.93,62.19.08,6.78,0,7.33-6.16,6.95-11.2-.69-22.37.33-33.58-.15a161,161,0,0,0-20.79.57c-2.82.24-3.42-1.9-3.26-3.09,1.37-9.73.53-19.49.81-29.23.16-5.8.31-11.6.51-17.4a2.9,2.9,0,0,1,.52-1.85c5.68-5.22,2-11.94,2.88-17.91.36-2.56-.86-3.69-3.78-3.54-5.86.29-11.74.07-17.62.08-2.85,0-4.43.34-3.84-4.21,1.07-8.3.15-16.84.36-25.28.49-19.18,1.18-38.34,1-57.53-.05-7,.77-14.08.85-21.12,0-2.67,1.11-3,3.26-2.86C738.35,244.17,741.52,244.07,744.69,244.07Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M930,379.68c0,14.68,1.5,29.32,1.06,44-.07,2.45-.46,3.43-3.23,3.41C909,427,890.14,427,871.3,427c-1.55,0-3.25.57-3.35-2.24-.58-15.57-3-31.06-2-46.71.15-2.34,0-4.43,3.31-4,2.23.26,1.71-1.51,1.72-2.71,0-4.33-.13-8.67.07-13,.13-2.58-.62-3.43-3.29-3.34-5.82.21-11.66-.06-17.49.11-3.25.1-4.21-1.12-4.35-4.35-.61-13.2.56-26.39,0-39.56-.54-12.73,0-25.45-.1-38.17-.11-10.06-.47-20.19.14-30.28.17-2.85.78-4.27,4.28-4.2,10.77.19,21.6.33,32.3,0,14.92-.44,29.83,0,44.74-.44,5.14-.16,10.32.29,15.44-.14,3.2-.28,3.83,1.93,3.87,3.62.35,14.83.45,29.66.54,44.49,0,7.38-.79,14.83,0,22.11,1.55,14.42.26,28.83,1,43.22.13,2.75-.71,3.52-3,3.64-.83,0-1.66,0-2.49,0-12.19.05-12.23,0-12.58,12.15C929.9,371.36,930,375.52,930,379.68Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.75.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M972.41,355c-4,0-8-.07-12,0-2.29.05-2.7-1.05-2.84-3.11-1.29-18.17-.09-36.39-1.23-54.58-.86-13.51-.36-27.11-.47-40.66a131.73,131.73,0,0,0-.75-16.49c-.45-3.42-.23-6.2,5-6.33,11-.25,21.89.19,32.84.18,15.53,0,31.06.18,46.58-.11,5.49-.1,11,0,16.43-.17,3.29-.13,2.88,1.07,3.06,3.07,1.31,15,1.78,30.09,2.23,45.16.45,15.27.85,30.55,1.88,45.79.52,7.73.75,15.43.91,23.16.06,3-1,4.32-4,4.1-2.32-.17-4.66,0-7,0-6.12,0-8.13,1.79-8,7.86.41,16.09,1,32.17,1.55,48.25,0,1.22-.78,2.2-.43,3.61,1.62,6.6-.76,9.46-7.28,8.14-7-1.41-13.93-.75-20.87-.74-8.28,0-16.55,1.16-24.82-.07-2.39-.35-6,3.3-6.88-1.14-.42-2.19-2.88-4.8-.51-7.43.24-.27-.29-1.7-.83-2.12-5.69-4.45-3-11-3.09-16.16-.09-7.37-.38-14.71-.82-22.07-.12-2-.62-4.67,3.05-3.15a.72.72,0,0,0,.5,0c1.54-.69,3.85-1.16,2.49-3.54-2.06-3.59,4.1-9.71-3.22-11.3C980.21,354.39,976.24,355,972.41,355Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.75.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M1080.55,225.08c15.33,0,30.65,0,46,0,13.13,0,26.25-.68,39.39-.07,2.93.13,4.16.91,4.12,4-.15,12.67,1.79,25.31,1.6,37.89-.22,15.8,1.33,31.48,1.61,47.23.21,12,1.25,24,1.87,36,.15,3,.7,5.07-4.31,4.71-3.66-.26-7.77-1.48-11.65,0-1.05.41-2,.18-2.24,1.86a52.16,52.16,0,0,0,.29,17.94c1.12,6.34.85,12.7,1.63,19,1,8,.81,16.16,1.16,24.24a8.09,8.09,0,0,0,.39,2.9c1.7,3.69-.67,3.28-3,3.29-7.44,0-14.88.26-22.31.29q-14,.07-27.93-.06c-1.85,0-2.16-1.34-2.17-3.06-.09-8.73-.66-17.47-1.22-26.15-.5-7.77-.5-15.51-.74-23.25-.12-4,.44-8,.43-12,0-6.78-4.37-5-7.54-5.17-6.45-.24-12.94.06-19.4.29-2.43.09-2.65-1.15-3-3.13-1.18-7-.15-14.05-.7-21.06-1.1-14.09-1.22-28.25-2-42.36-.64-12.23-1.25-24.46-1.93-36.69-.43-7.77-1.08-15.52-1-23.33,0-2.91.92-3.69,3.66-3.48C1074.54,225.25,1077.55,225.08,1080.55,225.08Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M1249,426c-9.66,0-19.32-.11-29,.05-3.4.06-4.7-.66-5.19-4.56-1.21-9.43-1.53-18.93-2.46-28.38-.85-8.61-1-17.44,1-26.16.78-3.33-.18-7.06-.34-10.61-.09-2-1.61-1.28-2.59-1.31-6.8-.2-13.65-.92-20.37-.27-4.56.44-4.94-2.66-4.86-4.79.33-8.89-1-17.68-1.41-26.5-.76-15.51-1.84-31-3-46.52-1.06-14.83-2.63-29.62-2.83-44.51-.08-6.39-.14-6.39,6.33-6.39,26.63,0,53.26.08,79.89-.09,4.16,0,5.2,1.13,5.39,5.31.81,17.84,2.49,35.62,3.51,53.45,1.17,20.41,3.3,40.76,4.8,61.15.24,3.29.53,6.57-1.67,10-3,4.58-2.39,11.58.16,14.67,6.59,8,3.45,16.69,4.6,25,1.23,8.95,1.66,18,2,27,.13,2.87-.79,3.59-3.58,3.54C1269.29,425.93,1259.13,426,1249,426Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,100 @@
|
|||||||
|
import * as echarts from "echarts";
|
||||||
|
|
||||||
|
export default function getOptions(seriesData,pieces,range,yName) {
|
||||||
|
return {
|
||||||
|
grid: { top: 38, right: 44, bottom: 20, left: 48 },
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: Array(7)
|
||||||
|
.fill(1)
|
||||||
|
.map((_, index) => {
|
||||||
|
const today = new Date();
|
||||||
|
const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
|
||||||
|
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
|
||||||
|
dtimestamp
|
||||||
|
).getDate()}`;
|
||||||
|
})
|
||||||
|
.reverse(),
|
||||||
|
axisLabel: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
axisTick: { show: false },
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
width: 1,
|
||||||
|
color: "#213259",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: "单位: "+yName,
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 10,
|
||||||
|
align: "right",
|
||||||
|
},
|
||||||
|
type: "value",
|
||||||
|
axisLabel: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 12,
|
||||||
|
formatter: "{value}",
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#213259",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#213259a0",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
min:range[0],
|
||||||
|
max:range[1]
|
||||||
|
},
|
||||||
|
visualMap: {
|
||||||
|
show: false,
|
||||||
|
dimension: 1,
|
||||||
|
pieces: pieces
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'line',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
color:'inherit'
|
||||||
|
},
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 6,
|
||||||
|
// prettier-ignore
|
||||||
|
data: seriesData.data,
|
||||||
|
markLine: {
|
||||||
|
symbol: 'none',
|
||||||
|
label:{
|
||||||
|
show:true,
|
||||||
|
position:'end',
|
||||||
|
formatter:'标准线',
|
||||||
|
color:'#FFCB59',
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
lineStyle:{
|
||||||
|
color:'#FFCB59'
|
||||||
|
},
|
||||||
|
data: seriesData.markLineData
|
||||||
|
},
|
||||||
|
areaStyle: seriesData.areaStyle
|
||||||
|
}
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross'
|
||||||
|
},
|
||||||
|
className: "xc-chart-tooltip",
|
||||||
|
// backgroundColor: ''
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -0,0 +1,93 @@
|
|||||||
|
import cls from "./index.module.css";
|
||||||
|
import ReactECharts from "echarts-for-react";
|
||||||
|
import getOptions from "./chart.config";
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
function CommonChart(props) {
|
||||||
|
const { dataSource } = props;
|
||||||
|
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
let pieces = [
|
||||||
|
{
|
||||||
|
lte: dataSource.msg ? dataSource.msg.lte : 0,
|
||||||
|
color: "#FFCB59",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gt: dataSource.msg ? dataSource.msg.lte : 0,
|
||||||
|
lte: dataSource.msg ? dataSource.msg.gt : 0,
|
||||||
|
color: dataSource.color,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gt: dataSource.msg ? dataSource.msg.gt : 0,
|
||||||
|
color: "#FFCB59",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const [yRange, setYRange] = useState([]);
|
||||||
|
useEffect(() => {
|
||||||
|
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]);
|
||||||
|
}
|
||||||
|
}, [dataSource, data]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cls.commonChart}>
|
||||||
|
{data.length > 0 && (
|
||||||
|
<ReactECharts
|
||||||
|
option={getOptions(seriesData, pieces, yRange, yName)}
|
||||||
|
style={{ height: "100%" }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{data.length <= 0 && (
|
||||||
|
<p
|
||||||
|
style={{
|
||||||
|
paddingTop: "88px",
|
||||||
|
color: "#fffc",
|
||||||
|
textAlign: "center",
|
||||||
|
fontSize: "24px",
|
||||||
|
userSelect: "none",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
暂无数据
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CommonChart;
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
.commonChart {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
// 窑炉压力
|
||||||
|
import cls from "./index.module.css";
|
||||||
|
import BottomBarItem from "./../../../../../components/Common/BottomItemBackground";
|
||||||
|
import CommonChart from "./../CommonChart"
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
function KilnBottom(props) {
|
||||||
|
const kilnOptimize = useSelector((state) => state.kilnOptimize);
|
||||||
|
const dataSource = {
|
||||||
|
color:'#146CFF',
|
||||||
|
yName:'℃',
|
||||||
|
areaColor0:'rgba(20, 108, 255, 0.4)',
|
||||||
|
areaColor1:'rgba(20, 108, 255, 0)',
|
||||||
|
msg: kilnOptimize.bottomTempAvg,
|
||||||
|
data: kilnOptimize.bottomTempAvg ? kilnOptimize.bottomTempAvg.bottomTempAvgFor7Day : [],
|
||||||
|
range:[-10,10]
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<BottomBarItem
|
||||||
|
icon="kilnBottom"
|
||||||
|
title="池底温度趋势图"
|
||||||
|
style={props.style}
|
||||||
|
>
|
||||||
|
{/* legend */}
|
||||||
|
<div className={cls.legend}>
|
||||||
|
<span className={cls.item}>
|
||||||
|
<span className={cls.block} style={{backgroundColor:'#FFCB59'}}></span>标准值外
|
||||||
|
</span>
|
||||||
|
<span className={cls.item}>
|
||||||
|
<span className={cls.block} style={{backgroundColor:'#146CFF'}}></span>标准值内
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className={cls.chart}>
|
||||||
|
<CommonChart dataSource={dataSource}/>
|
||||||
|
</div>
|
||||||
|
</BottomBarItem>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default KilnBottom;
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
.chart {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.legend {
|
||||||
|
position: absolute;
|
||||||
|
right: 25px;
|
||||||
|
top: 30px;
|
||||||
|
}
|
||||||
|
.item{
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 10px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #DFF1FE;
|
||||||
|
}
|
||||||
|
.block {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 2px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
// 窑炉压力
|
||||||
|
import cls from "./index.module.css";
|
||||||
|
import BottomBarItem from "./../../../../../components/Common/BottomItemBackground";
|
||||||
|
import CommonChart from "./../CommonChart";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
function KilnPress(props) {
|
||||||
|
const kilnOptimize = useSelector((state) => state.kilnOptimize);
|
||||||
|
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],
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<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>
|
||||||
|
<span className={cls.item}>
|
||||||
|
<span
|
||||||
|
className={cls.block}
|
||||||
|
style={{ backgroundColor: "#12FFF5" }}
|
||||||
|
></span>
|
||||||
|
标准值内
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className={cls.chart}>
|
||||||
|
<CommonChart dataSource={dataSource} />
|
||||||
|
</div>
|
||||||
|
</BottomBarItem>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export default KilnPress;
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
.chart {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.legend {
|
||||||
|
position: absolute;
|
||||||
|
right: 25px;
|
||||||
|
top: 30px;
|
||||||
|
}
|
||||||
|
.item{
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 10px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #DFF1FE;
|
||||||
|
}
|
||||||
|
.block {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 2px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
// 窑炉压力
|
||||||
|
import cls from "./index.module.css";
|
||||||
|
import BottomBarItem from "./../../../../../components/Common/BottomItemBackground";
|
||||||
|
import CommonChart from "./../CommonChart"
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
function KilnTop(props) {
|
||||||
|
const kilnOptimize = useSelector((state) => state.kilnOptimize);
|
||||||
|
const dataSource = {
|
||||||
|
color:'#12FFF5',
|
||||||
|
yName:'℃',
|
||||||
|
areaColor0:'rgba(18, 255, 245, 0.4)',
|
||||||
|
areaColor1:'rgba(18, 255, 245, 0)',
|
||||||
|
msg:kilnOptimize.topTempAvg,
|
||||||
|
data:kilnOptimize.topTempAvg ? kilnOptimize.topTempAvg.topTempAvgFor7Day : [],
|
||||||
|
range:[-10,10]
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<BottomBarItem
|
||||||
|
icon="kilnTop"
|
||||||
|
title="碹顶温度趋势图"
|
||||||
|
style={props.style}
|
||||||
|
>
|
||||||
|
{/* legend */}
|
||||||
|
<div className={cls.legend}>
|
||||||
|
<span className={cls.item}>
|
||||||
|
<span className={cls.block} style={{backgroundColor:'#FFCB59'}}></span>标准值外
|
||||||
|
</span>
|
||||||
|
<span className={cls.item}>
|
||||||
|
<span className={cls.block} style={{backgroundColor:'#12FFF5'}}></span>标准值内
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className={cls.chart}>
|
||||||
|
<CommonChart dataSource={dataSource}/>
|
||||||
|
</div>
|
||||||
|
</BottomBarItem>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default KilnTop;
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
.chart {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.legend {
|
||||||
|
position: absolute;
|
||||||
|
right: 25px;
|
||||||
|
top: 30px;
|
||||||
|
}
|
||||||
|
.item{
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 10px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #DFF1FE;
|
||||||
|
}
|
||||||
|
.block {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 2px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
@ -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;
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
// 窑炉压力
|
||||||
|
import cls from "./index.module.css";
|
||||||
|
import BottomBarItem from "./../../../../../components/Common/BottomItemBackground";
|
||||||
|
import CommonChart from "./../CommonChart"
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
function LiquidTrend(props) {
|
||||||
|
const kilnOptimize = useSelector((state) => state.kilnOptimize);
|
||||||
|
const dataSource = {
|
||||||
|
color:'#146CFF',
|
||||||
|
yName:'mm',
|
||||||
|
areaColor0:'rgba(20, 108, 255, 0.4)',
|
||||||
|
areaColor1:'rgba(20, 108, 255, 0)',
|
||||||
|
msg:kilnOptimize.liquidAvg,
|
||||||
|
data:kilnOptimize.liquidAvg ? kilnOptimize.liquidAvg.liquidAvgFor7Day : [],
|
||||||
|
range:[-1,1]
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<BottomBarItem
|
||||||
|
icon="liquidTrend"
|
||||||
|
title="液位趋势图"
|
||||||
|
style={props.style}
|
||||||
|
>
|
||||||
|
{/* legend */}
|
||||||
|
<div className={cls.legend}>
|
||||||
|
<span className={cls.item}>
|
||||||
|
<span className={cls.block} style={{backgroundColor:'#FFCB59'}}></span>标准值外
|
||||||
|
</span>
|
||||||
|
<span className={cls.item}>
|
||||||
|
<span className={cls.block} style={{backgroundColor:'#146CFF'}}></span>标准值内
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className={cls.chart}>
|
||||||
|
<CommonChart dataSource={dataSource}/>
|
||||||
|
</div>
|
||||||
|
</BottomBarItem>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default LiquidTrend;
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
.chart {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.legend {
|
||||||
|
position: absolute;
|
||||||
|
right: 25px;
|
||||||
|
top: 30px;
|
||||||
|
}
|
||||||
|
.item{
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 10px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #DFF1FE;
|
||||||
|
}
|
||||||
|
.block {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 2px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
@ -0,0 +1,362 @@
|
|||||||
|
import { useSelector } from "react-redux";
|
||||||
|
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 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 <= 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 <= 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,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="Gradient1" x1="0" x2="1" y1="0" y2="0">
|
||||||
|
<stop offset="0%" stopColor={returnColor2("TE201")} />
|
||||||
|
<stop offset="9%" stopColor={returnColor2("TE202")} />
|
||||||
|
<stop offset="18%" stopColor={returnColor2("TE203")} />
|
||||||
|
<stop offset="27%" stopColor={returnColor2("TE204")} />
|
||||||
|
<stop offset="36%" stopColor={returnColor2("TE205")} />
|
||||||
|
<stop offset="45%" stopColor={returnColor2("TE206")} />
|
||||||
|
<stop offset="54%" stopColor={returnColor2("TE208")} />
|
||||||
|
<stop offset="63%" stopColor={returnColor2("TE210")} />
|
||||||
|
<stop offset="72%" stopColor={returnColor2("TE211")} />
|
||||||
|
<stop offset="81%" stopColor={returnColor2("TE212")} />
|
||||||
|
<stop offset="90%" stopColor={returnColor2("TE213")} />
|
||||||
|
<stop offset="100%" stopColor={returnColor2("TE213")} />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="Gradient2" x1="0" x2="1" y1="0" y2="0">
|
||||||
|
<stop offset="0%" stopColor={returnColor2("TE216")} />
|
||||||
|
<stop offset="33%" stopColor={returnColor2("TE221")} />
|
||||||
|
<stop offset="66%" stopColor={returnColor2("TE225")} />
|
||||||
|
<stop offset="100%" stopColor={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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
animate={{
|
||||||
|
opacity: [0, 0, 0, 0.6, 1],
|
||||||
|
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)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TopColorBlock;
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM421.92,703.81c-2.21-.15-4-.39-5.76-.37-26.5.16-53,.46-79.48.44-4.48,0-5.5,1.52-5.71,5.7-.59,11.58-.8,11.57-12.2,11.61-1,0-2,.09-3,0-2.63-.22-3.4,1.09-3.54,3.56-.57,10-1.28,19.93-2,29.9-1.54,22.09-3.13,44.17-4.65,66.26-.56,8.08-1,16.16-1.46,24.91h6.08l60-.14c13.16,0,26.33-.19,39.49,0,3.89,0,5.23-1.25,5.21-5.17,0-5.82.55-11.64.86-17.46q1.85-34.66,3.69-69.34C420.3,737.36,421.07,721.06,421.92,703.81Z" transform="translate(277 -158)"/><path d="M421.92,703.81c-.85,17.25-1.62,33.55-2.46,49.84q-1.8,34.67-3.69,69.34c-.31,5.82-.9,11.64-.86,17.46,0,3.92-1.32,5.21-5.21,5.17-13.16-.14-26.33,0-39.49,0l-60,.14h-6.08c.5-8.75.9-16.83,1.46-24.91,1.52-22.09,3.11-44.17,4.65-66.26.7-10,1.41-19.93,2-29.9.14-2.47.91-3.78,3.54-3.56,1,.09,2,0,3,0,11.4,0,11.61,0,12.2-11.61.21-4.18,1.23-5.71,5.71-5.7,26.49,0,53-.28,79.48-.44C417.93,703.42,419.71,703.66,421.92,703.81Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM544.59,703.38q-53.33,0-106.49,0c-2.87,0-3.72,1.28-3.8,3.94-.17,5.65-.58,11.3-.87,17-2,38.74-3.87,77.48-5.95,116.21-.21,3.84,1.08,5,4.69,5q51.72-.4,103.43-.61c2.88,0,4.18-.76,4.23-3.91.1-7.15.55-14.3.85-21.46,1.31-30.6,2.68-61.21,3.86-91.82C544.85,719.69,544.59,711.75,544.59,703.38Z" transform="translate(277 -158)"/><path d="M544.59,703.38c0,8.37.26,16.31-.05,24.24-1.18,30.61-2.55,61.22-3.86,91.82-.3,7.16-.75,14.31-.85,21.46-.05,3.15-1.35,3.89-4.23,3.91q-51.71.2-103.43.61c-3.61,0-4.9-1.14-4.69-5,2.08-38.73,4-77.47,5.95-116.21.29-5.65.7-11.3.87-17,.08-2.66.93-3.94,3.8-3.94Q491.3,703.43,544.59,703.38Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 872 B |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM558.89,703.13a13,13,0,0,0-.55,1.88q-2.9,68.16-5.8,136.31c-.11,2.69,1,3.48,3.53,3.43,6.33-.12,12.66,0,19-.08,29.5-.18,59-.44,88.49-.51,3.93,0,5.81-1,5.65-5.28-.18-4.65.31-9.32.41-14q1-48.24,2-96.46c.15-8.43,0-16.87,0-25.31Z" transform="translate(277 -158)"/><path d="M558.89,703.13H671.6c0,8.44.13,16.88,0,25.31q-.9,48.22-2,96.46c-.1,4.66-.59,9.33-.41,14,.16,4.3-1.72,5.27-5.65,5.28-29.49.07-59,.33-88.49.51-6.33,0-12.66,0-19,.08-2.53,0-3.64-.74-3.53-3.43q2.94-68.15,5.8-136.31A13,13,0,0,1,558.89,703.13Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 770 B |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM799.81,702.69a17.56,17.56,0,0,0-2.32-.43c-36,0-72,.14-107.93.1-3.94,0-4.13,2-4.18,5q-1,65.19-2.27,130.37c-.09,4.72,1,6.33,6,6.28q52-.46,103.93-.34c4.29,0,5.72-1,5.75-5.53.21-43.3.66-86.6,1-129.9C799.83,706.5,799.81,704.71,799.81,702.69Z" transform="translate(277 -158)"/><path d="M799.81,702.69c0,2,0,3.81,0,5.6-.37,43.3-.82,86.6-1,129.9,0,4.5-1.46,5.53-5.75,5.53q-52-.09-103.93.34c-5,.05-6.08-1.56-6-6.28q1.35-65.17,2.27-130.37c0-3,.24-5.06,4.18-5,36,0,72-.06,107.93-.1A17.56,17.56,0,0,1,799.81,702.69Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 770 B |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM812.91,702.15a15.47,15.47,0,0,0-.55,2.23q-.57,67.73-1.18,135.46c0,3.33,1.61,3.79,4.34,3.77q52-.43,104-.7c3.43,0,4.28-1.39,4.16-4.48q-.42-11-.52-22-.5-54.74-.9-109.46c0-3.3-.12-5.49-4.73-5.44-32.82.38-65.65.44-98.47.6Z" transform="translate(277 -158)"/><path d="M812.91,702.15H819c32.82-.16,65.65-.22,98.47-.6,4.61,0,4.71,2.14,4.73,5.44q.4,54.74.9,109.46.11,11,.52,22c.12,3.09-.73,4.47-4.16,4.48q-52,.23-104,.7c-2.73,0-4.37-.44-4.34-3.77q.68-67.73,1.18-135.46A15.47,15.47,0,0,1,812.91,702.15Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 758 B |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM1049,701.25h-5.47c-33.82.06-67.64.21-101.47.07-5,0-6.07,1.61-6,6.32q.85,65,1.21,129.94c0,4.25,1.39,5.3,5.44,5.27,34.83-.23,69.65-.25,104.47-.37,1.77,0,3.54-.24,5.76-.4C1051.66,795,1050.36,748.47,1049,701.25Z" transform="translate(277 -158)"/><path d="M1049,701.25c1.32,47.22,2.62,93.77,3.93,140.83-2.22.16-4,.4-5.76.4-34.82.12-69.64.14-104.47.37-4,0-5.41-1-5.44-5.27q-.37-65-1.21-129.94c-.06-4.71,1.06-6.34,6-6.32,33.83.14,67.65,0,101.47-.07Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 709 B |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM1064.31,778.29c.47,14.73,1.29,36.54,1.76,58.35.1,4.49,1.63,5.57,5.87,5.53q49.23-.4,98.47-.33c4.88,0,5.77-1.64,5.58-6.05q-2.76-65.14-5.13-130.32c-.15-4.41-2.31-4.67-5.7-4.65-32.49.18-65,.35-97.48.27-4.51,0-5.63,1.33-5.47,5.68C1063,728.24,1063.51,749.73,1064.31,778.29Z" transform="translate(277 -158)"/><path d="M1064.31,778.29c-.8-28.56-1.31-50-2.1-71.52-.16-4.35,1-5.69,5.47-5.68,32.49.08,65-.09,97.48-.27,3.39,0,5.55.24,5.7,4.65q2.36,65.17,5.13,130.32c.19,4.41-.7,6.06-5.58,6.05q-49.23-.15-98.47.33c-4.24,0-5.77-1-5.87-5.53C1065.6,814.83,1064.78,793,1064.31,778.29Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 834 B |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197Zm-957.31-80.35v-.58c14.66,0,29.33,0,44,0,6.49,0,6.37-.09,6-6.4q-2.54-44.4-4.93-88.81-1.08-20-2.1-39.92c-.17-3.37-.58-5.82-5.3-5.76q-43.48.55-87,.44c-4.84,0-6.29,1.43-6.06,6.27,1.25,25.62,2.18,51.26,3.28,76.88.75,17.48,1.77,34.94,2.3,52.42.14,4.78,2,5.64,6.29,5.57C1210.69,841.5,1225.19,841.65,1239.69,841.65Z" transform="translate(277 -158)"/><path d="M1239.69,841.65c-14.5,0-29-.15-43.49.1-4.3.07-6.15-.79-6.29-5.57-.53-17.48-1.55-34.94-2.3-52.42-1.1-25.62-2-51.26-3.28-76.88-.23-4.84,1.22-6.28,6.06-6.27q43.48.09,87-.44c4.72-.06,5.13,2.39,5.3,5.76q1,20,2.1,39.92,2.43,44.42,4.93,88.81c.35,6.31.47,6.38-6,6.4-14.66,0-29.33,0-44,0Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 897 B |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM447.62,225.07h-5.18c-29.8,0-59.61.19-89.41-.13-5.6-.06-7.34,1.6-7,6.89.18,3.46-.48,7-.72,10.45q-2.34,33.61-4.66,67.22c-.84,12.29-1.53,24.58-2.46,36.86-.26,3.46.79,5,4.38,4.66,2.48-.21,5,.1,7.48-.08,3.39-.24,4.84.88,4.5,4.53s-.07,7.58-.07,11.49a8.13,8.13,0,0,0,2,.57c26.8,0,53.61,0,80.42,0,3.26,0,3.72-1.73,3.87-4.41,2.26-40.38,4.63-80.75,6.87-121.13C447.88,236.59,447.62,231.14,447.62,225.07Z" transform="translate(277 -158)"/><path d="M447.62,225.07c0,6.07.26,11.52,0,16.94-2.24,40.38-4.61,80.75-6.87,121.13-.15,2.68-.61,4.42-3.87,4.41-26.81-.05-53.62,0-80.42,0a8.13,8.13,0,0,1-2-.57c0-3.91-.27-7.73.07-11.49s-1.11-4.77-4.5-4.53c-2.48.18-5-.13-7.48.08-3.59.3-4.64-1.2-4.38-4.66.93-12.28,1.62-24.57,2.46-36.86q2.29-33.62,4.66-67.22c.24-3.49.9-7,.72-10.45-.29-5.29,1.45-7,7-6.89,29.8.32,59.61.14,89.41.13Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM562.48,225.44H460.77a10,10,0,0,0-.48,1.8q-2.06,35.67-4.06,71.34c-1.2,21.13-2.28,42.26-3.69,63.36-.29,4.21.77,5.67,5,5.64q48.24-.34,96.49-.39c3.27,0,4.74-.86,4.79-4.5.13-10.83.58-21.65,1-32.47.86-22.14,1.94-44.28,2.59-66.43C562.79,251.18,562.48,238.55,562.48,225.44Z" transform="translate(277 -158)"/><path d="M562.48,225.44c0,13.11.31,25.74-.06,38.35-.65,22.15-1.73,44.29-2.59,66.43-.42,10.82-.87,21.64-1,32.47-.05,3.64-1.52,4.49-4.79,4.5q-48.24.07-96.49.39c-4.24,0-5.3-1.43-5-5.64,1.41-21.1,2.49-42.23,3.69-63.36q2-35.67,4.06-71.34a10,10,0,0,1,.48-1.8Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 819 B |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM683.28,225.41a26.54,26.54,0,0,0-2.82-.39c-33.48,0-67,.06-100.43-.05-4.14,0-4.52,2.22-4.62,5.35-1.41,43.6-2.78,87.2-4.4,130.79-.19,5.09,1.58,6.09,6.21,6.06,32.31-.22,64.62-.18,96.93-.25,1.75,0,3.5-.24,5.49-.39C680.86,319.23,682.07,272.5,683.28,225.41Z" transform="translate(277 -158)"/><path d="M683.28,225.41c-1.21,47.09-2.42,93.82-3.64,141.12-2,.15-3.74.39-5.49.39-32.31.07-64.62,0-96.93.25-4.63,0-6.4-1-6.21-6.06,1.62-43.59,3-87.19,4.4-130.79.1-3.13.48-5.37,4.62-5.35,33.47.11,67,0,100.43.05A26.54,26.54,0,0,1,683.28,225.41Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 792 B |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM802,296.2h.7c0-21.82-.14-43.65.11-65.47,0-4.63-1.31-5.91-5.85-5.88q-47.47.27-95,0c-4.37,0-6,1-6.06,5.77Q694.7,295.86,692.84,361c-.13,4.59,1.14,6,5.8,6q49-.31,98-.08c4.62,0,5.54-1.59,5.5-5.75C801.94,339.51,802,317.86,802,296.2Z" transform="translate(277 -158)"/><path d="M802,296.2c0,21.66-.09,43.31.07,65,0,4.16-.88,5.77-5.5,5.75q-49-.27-98,.08c-4.66,0-5.93-1.37-5.8-6q1.8-65.19,3.13-130.39c.1-4.74,1.69-5.79,6.06-5.77q47.47.21,95,0c4.54,0,5.9,1.25,5.85,5.88-.25,21.82-.11,43.65-.11,65.47Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 755 B |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM919.16,296.12H918c0-22-.08-44,.07-66,0-4.15-1.36-5.36-5.47-5.34q-46.47.24-93,0c-3.95,0-5.48.88-5.47,5.24q.13,65.72-.21,131.43c0,4.11,1.12,5.38,5.32,5.36q47.22-.27,94.45,0c4.62,0,5.52-1.61,5.49-5.76C919.08,339.43,919.16,317.78,919.16,296.12Z" transform="translate(277 -158)"/><path d="M919.16,296.12c0,21.66-.08,43.31.08,65,0,4.15-.87,5.79-5.49,5.76q-47.22-.28-94.45,0c-4.2,0-5.34-1.25-5.32-5.36q.32-65.71.21-131.43c0-4.36,1.52-5.25,5.47-5.24q46.49.18,93,0c4.11,0,5.5,1.19,5.47,5.34-.15,22-.07,44-.07,66Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 769 B |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM1039.17,296.21h-1.4c0-21.66-.16-43.32.11-65,.06-5-1.2-6.55-6.35-6.51q-47,.36-94,.05c-4.82,0-6.59,1-6.51,6.31q.94,65.23,1.21,130.48c0,4.29,1.44,5.22,5.45,5.2q48.75-.24,97.49,0c4.34,0,5.74-1,5.59-5.56C1040.05,339.53,1039.67,317.87,1039.17,296.21Z" transform="translate(277 -158)"/><path d="M1039.17,296.21c.5,21.66.88,43.32,1.6,65,.15,4.52-1.25,5.58-5.59,5.56q-48.75-.23-97.49,0c-4,0-5.42-.91-5.45-5.2q-.35-65.24-1.21-130.48c-.08-5.33,1.69-6.34,6.51-6.31q47,.25,94-.05c5.15,0,6.41,1.54,6.35,6.51-.27,21.66-.11,43.32-.11,65Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 787 B |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM1052.49,366.17c2.8.22,4.1.41,5.4.41q46.2,0,92.4,0c6.58,0,6.7,0,6.46-6.5-1.66-43.57-3.43-87.14-5-130.72-.16-4.51-2.54-4.59-5.8-4.58-30,.06-59.94.15-89.9,0-4.86,0-6.18,1.46-6.06,6.27,1,37.78,1.7,75.56,2.45,113.34C1052.61,351.47,1052.49,358.61,1052.49,366.17Z" transform="translate(277 -158)"/><path d="M1052.49,366.17c0-7.56.12-14.7,0-21.84-.75-37.78-1.48-75.56-2.45-113.34-.12-4.81,1.2-6.3,6.06-6.27,30,.17,59.93.08,89.9,0,3.26,0,5.64.07,5.8,4.58,1.54,43.58,3.31,87.15,5,130.72.24,6.49.12,6.5-6.46,6.5q-46.2,0-92.4,0C1056.59,366.58,1055.29,366.39,1052.49,366.17Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 827 B |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM1170.17,366.09c2.38.16,4.33.4,6.28.39,25.5-.09,51-.1,76.49-.38,12.29-.14,11.28,2.73,10.53-11.71-2.13-41.26-4.59-82.49-6.63-123.75-.25-5-2-6-6.57-6-26.17.18-52.33.1-78.5.11-7.79,0-7.65,0-7.31,7.67q2,43.69,3.77,87.38C1168.88,335.1,1169.51,350.4,1170.17,366.09Z" transform="translate(277 -158)"/><path d="M1170.17,366.09c-.66-15.69-1.29-31-1.94-46.28q-1.86-43.68-3.77-87.38c-.34-7.65-.48-7.66,7.31-7.67,26.17,0,52.33.07,78.5-.11,4.52,0,6.32.95,6.57,6,2,41.26,4.5,82.49,6.63,123.75.75,14.44,1.76,11.57-10.53,11.71-25.5.28-51,.29-76.49.38C1174.5,366.49,1172.55,366.25,1170.17,366.09Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 844 B |
@ -0,0 +1,362 @@
|
|||||||
|
import { useSelector } from "react-redux";
|
||||||
|
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 = () => {
|
||||||
|
const tempTop = useSelector((state) => state.temperature.top);
|
||||||
|
function returnColor(n) {
|
||||||
|
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 <= 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,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="Gradient1" x1="0" x2="1" y1="0" y2="0">
|
||||||
|
<stop offset="0%" stopColor={returnColor2("TE201")} />
|
||||||
|
<stop offset="9%" stopColor={returnColor2("TE202")} />
|
||||||
|
<stop offset="18%" stopColor={returnColor2("TE203")} />
|
||||||
|
<stop offset="27%" stopColor={returnColor2("TE204")} />
|
||||||
|
<stop offset="36%" stopColor={returnColor2("TE205")} />
|
||||||
|
<stop offset="45%" stopColor={returnColor2("TE206")} />
|
||||||
|
<stop offset="54%" stopColor={returnColor2("TE208")} />
|
||||||
|
<stop offset="63%" stopColor={returnColor2("TE210")} />
|
||||||
|
<stop offset="72%" stopColor={returnColor2("TE211")} />
|
||||||
|
<stop offset="81%" stopColor={returnColor2("TE212")} />
|
||||||
|
<stop offset="90%" stopColor={returnColor2("TE213")} />
|
||||||
|
<stop offset="100%" stopColor={returnColor2("TE213")} />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="Gradient2" x1="0" x2="1" y1="0" y2="0">
|
||||||
|
<stop offset="0%" stopColor={returnColor2("TE216")} />
|
||||||
|
<stop offset="33%" stopColor={returnColor2("TE221")} />
|
||||||
|
<stop offset="66%" stopColor={returnColor2("TE225")} />
|
||||||
|
<stop offset="100%" stopColor={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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
animate={{
|
||||||
|
opacity: [0, 0, 0, 0.6, 1],
|
||||||
|
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)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TopColorBlockEnter;
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM421.92,703.81c-2.21-.15-4-.39-5.76-.37-26.5.16-53,.46-79.48.44-4.48,0-5.5,1.52-5.71,5.7-.59,11.58-.8,11.57-12.2,11.61-1,0-2,.09-3,0-2.63-.22-3.4,1.09-3.54,3.56-.57,10-1.28,19.93-2,29.9-1.54,22.09-3.13,44.17-4.65,66.26-.56,8.08-1,16.16-1.46,24.91h6.08l60-.14c13.16,0,26.33-.19,39.49,0,3.89,0,5.23-1.25,5.21-5.17,0-5.82.55-11.64.86-17.46q1.85-34.66,3.69-69.34C420.3,737.36,421.07,721.06,421.92,703.81Z" transform="translate(277 -158)"/><path d="M421.92,703.81c-.85,17.25-1.62,33.55-2.46,49.84q-1.8,34.67-3.69,69.34c-.31,5.82-.9,11.64-.86,17.46,0,3.92-1.32,5.21-5.21,5.17-13.16-.14-26.33,0-39.49,0l-60,.14h-6.08c.5-8.75.9-16.83,1.46-24.91,1.52-22.09,3.11-44.17,4.65-66.26.7-10,1.41-19.93,2-29.9.14-2.47.91-3.78,3.54-3.56,1,.09,2,0,3,0,11.4,0,11.61,0,12.2-11.61.21-4.18,1.23-5.71,5.71-5.7,26.49,0,53-.28,79.48-.44C417.93,703.42,419.71,703.66,421.92,703.81Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM544.59,703.38q-53.33,0-106.49,0c-2.87,0-3.72,1.28-3.8,3.94-.17,5.65-.58,11.3-.87,17-2,38.74-3.87,77.48-5.95,116.21-.21,3.84,1.08,5,4.69,5q51.72-.4,103.43-.61c2.88,0,4.18-.76,4.23-3.91.1-7.15.55-14.3.85-21.46,1.31-30.6,2.68-61.21,3.86-91.82C544.85,719.69,544.59,711.75,544.59,703.38Z" transform="translate(277 -158)"/><path d="M544.59,703.38c0,8.37.26,16.31-.05,24.24-1.18,30.61-2.55,61.22-3.86,91.82-.3,7.16-.75,14.31-.85,21.46-.05,3.15-1.35,3.89-4.23,3.91q-51.71.2-103.43.61c-3.61,0-4.9-1.14-4.69-5,2.08-38.73,4-77.47,5.95-116.21.29-5.65.7-11.3.87-17,.08-2.66.93-3.94,3.8-3.94Q491.3,703.43,544.59,703.38Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 872 B |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM558.89,703.13a13,13,0,0,0-.55,1.88q-2.9,68.16-5.8,136.31c-.11,2.69,1,3.48,3.53,3.43,6.33-.12,12.66,0,19-.08,29.5-.18,59-.44,88.49-.51,3.93,0,5.81-1,5.65-5.28-.18-4.65.31-9.32.41-14q1-48.24,2-96.46c.15-8.43,0-16.87,0-25.31Z" transform="translate(277 -158)"/><path d="M558.89,703.13H671.6c0,8.44.13,16.88,0,25.31q-.9,48.22-2,96.46c-.1,4.66-.59,9.33-.41,14,.16,4.3-1.72,5.27-5.65,5.28-29.49.07-59,.33-88.49.51-6.33,0-12.66,0-19,.08-2.53,0-3.64-.74-3.53-3.43q2.94-68.15,5.8-136.31A13,13,0,0,1,558.89,703.13Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 770 B |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM799.81,702.69a17.56,17.56,0,0,0-2.32-.43c-36,0-72,.14-107.93.1-3.94,0-4.13,2-4.18,5q-1,65.19-2.27,130.37c-.09,4.72,1,6.33,6,6.28q52-.46,103.93-.34c4.29,0,5.72-1,5.75-5.53.21-43.3.66-86.6,1-129.9C799.83,706.5,799.81,704.71,799.81,702.69Z" transform="translate(277 -158)"/><path d="M799.81,702.69c0,2,0,3.81,0,5.6-.37,43.3-.82,86.6-1,129.9,0,4.5-1.46,5.53-5.75,5.53q-52-.09-103.93.34c-5,.05-6.08-1.56-6-6.28q1.35-65.17,2.27-130.37c0-3,.24-5.06,4.18-5,36,0,72-.06,107.93-.1A17.56,17.56,0,0,1,799.81,702.69Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 770 B |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM812.91,702.15a15.47,15.47,0,0,0-.55,2.23q-.57,67.73-1.18,135.46c0,3.33,1.61,3.79,4.34,3.77q52-.43,104-.7c3.43,0,4.28-1.39,4.16-4.48q-.42-11-.52-22-.5-54.74-.9-109.46c0-3.3-.12-5.49-4.73-5.44-32.82.38-65.65.44-98.47.6Z" transform="translate(277 -158)"/><path d="M812.91,702.15H819c32.82-.16,65.65-.22,98.47-.6,4.61,0,4.71,2.14,4.73,5.44q.4,54.74.9,109.46.11,11,.52,22c.12,3.09-.73,4.47-4.16,4.48q-52,.23-104,.7c-2.73,0-4.37-.44-4.34-3.77q.68-67.73,1.18-135.46A15.47,15.47,0,0,1,812.91,702.15Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 758 B |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM1049,701.25h-5.47c-33.82.06-67.64.21-101.47.07-5,0-6.07,1.61-6,6.32q.85,65,1.21,129.94c0,4.25,1.39,5.3,5.44,5.27,34.83-.23,69.65-.25,104.47-.37,1.77,0,3.54-.24,5.76-.4C1051.66,795,1050.36,748.47,1049,701.25Z" transform="translate(277 -158)"/><path d="M1049,701.25c1.32,47.22,2.62,93.77,3.93,140.83-2.22.16-4,.4-5.76.4-34.82.12-69.64.14-104.47.37-4,0-5.41-1-5.44-5.27q-.37-65-1.21-129.94c-.06-4.71,1.06-6.34,6-6.32,33.83.14,67.65,0,101.47-.07Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 709 B |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM1064.31,778.29c.47,14.73,1.29,36.54,1.76,58.35.1,4.49,1.63,5.57,5.87,5.53q49.23-.4,98.47-.33c4.88,0,5.77-1.64,5.58-6.05q-2.76-65.14-5.13-130.32c-.15-4.41-2.31-4.67-5.7-4.65-32.49.18-65,.35-97.48.27-4.51,0-5.63,1.33-5.47,5.68C1063,728.24,1063.51,749.73,1064.31,778.29Z" transform="translate(277 -158)"/><path d="M1064.31,778.29c-.8-28.56-1.31-50-2.1-71.52-.16-4.35,1-5.69,5.47-5.68,32.49.08,65-.09,97.48-.27,3.39,0,5.55.24,5.7,4.65q2.36,65.17,5.13,130.32c.19,4.41-.7,6.06-5.58,6.05q-49.23-.15-98.47.33c-4.24,0-5.77-1-5.87-5.53C1065.6,814.83,1064.78,793,1064.31,778.29Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 834 B |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197Zm-957.31-80.35v-.58c14.66,0,29.33,0,44,0,6.49,0,6.37-.09,6-6.4q-2.54-44.4-4.93-88.81-1.08-20-2.1-39.92c-.17-3.37-.58-5.82-5.3-5.76q-43.48.55-87,.44c-4.84,0-6.29,1.43-6.06,6.27,1.25,25.62,2.18,51.26,3.28,76.88.75,17.48,1.77,34.94,2.3,52.42.14,4.78,2,5.64,6.29,5.57C1210.69,841.5,1225.19,841.65,1239.69,841.65Z" transform="translate(277 -158)"/><path d="M1239.69,841.65c-14.5,0-29-.15-43.49.1-4.3.07-6.15-.79-6.29-5.57-.53-17.48-1.55-34.94-2.3-52.42-1.1-25.62-2-51.26-3.28-76.88-.23-4.84,1.22-6.28,6.06-6.27q43.48.09,87-.44c4.72-.06,5.13,2.39,5.3,5.76q1,20,2.1,39.92,2.43,44.42,4.93,88.81c.35,6.31.47,6.38-6,6.4-14.66,0-29.33,0-44,0Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 897 B |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM447.62,225.07h-5.18c-29.8,0-59.61.19-89.41-.13-5.6-.06-7.34,1.6-7,6.89.18,3.46-.48,7-.72,10.45q-2.34,33.61-4.66,67.22c-.84,12.29-1.53,24.58-2.46,36.86-.26,3.46.79,5,4.38,4.66,2.48-.21,5,.1,7.48-.08,3.39-.24,4.84.88,4.5,4.53s-.07,7.58-.07,11.49a8.13,8.13,0,0,0,2,.57c26.8,0,53.61,0,80.42,0,3.26,0,3.72-1.73,3.87-4.41,2.26-40.38,4.63-80.75,6.87-121.13C447.88,236.59,447.62,231.14,447.62,225.07Z" transform="translate(277 -158)"/><path d="M447.62,225.07c0,6.07.26,11.52,0,16.94-2.24,40.38-4.61,80.75-6.87,121.13-.15,2.68-.61,4.42-3.87,4.41-26.81-.05-53.62,0-80.42,0a8.13,8.13,0,0,1-2-.57c0-3.91-.27-7.73.07-11.49s-1.11-4.77-4.5-4.53c-2.48.18-5-.13-7.48.08-3.59.3-4.64-1.2-4.38-4.66.93-12.28,1.62-24.57,2.46-36.86q2.29-33.62,4.66-67.22c.24-3.49.9-7,.72-10.45-.29-5.29,1.45-7,7-6.89,29.8.32,59.61.14,89.41.13Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM562.48,225.44H460.77a10,10,0,0,0-.48,1.8q-2.06,35.67-4.06,71.34c-1.2,21.13-2.28,42.26-3.69,63.36-.29,4.21.77,5.67,5,5.64q48.24-.34,96.49-.39c3.27,0,4.74-.86,4.79-4.5.13-10.83.58-21.65,1-32.47.86-22.14,1.94-44.28,2.59-66.43C562.79,251.18,562.48,238.55,562.48,225.44Z" transform="translate(277 -158)"/><path d="M562.48,225.44c0,13.11.31,25.74-.06,38.35-.65,22.15-1.73,44.29-2.59,66.43-.42,10.82-.87,21.64-1,32.47-.05,3.64-1.52,4.49-4.79,4.5q-48.24.07-96.49.39c-4.24,0-5.3-1.43-5-5.64,1.41-21.1,2.49-42.23,3.69-63.36q2-35.67,4.06-71.34a10,10,0,0,1,.48-1.8Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 819 B |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM683.28,225.41a26.54,26.54,0,0,0-2.82-.39c-33.48,0-67,.06-100.43-.05-4.14,0-4.52,2.22-4.62,5.35-1.41,43.6-2.78,87.2-4.4,130.79-.19,5.09,1.58,6.09,6.21,6.06,32.31-.22,64.62-.18,96.93-.25,1.75,0,3.5-.24,5.49-.39C680.86,319.23,682.07,272.5,683.28,225.41Z" transform="translate(277 -158)"/><path d="M683.28,225.41c-1.21,47.09-2.42,93.82-3.64,141.12-2,.15-3.74.39-5.49.39-32.31.07-64.62,0-96.93.25-4.63,0-6.4-1-6.21-6.06,1.62-43.59,3-87.19,4.4-130.79.1-3.13.48-5.37,4.62-5.35,33.47.11,67,0,100.43.05A26.54,26.54,0,0,1,683.28,225.41Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 792 B |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM802,296.2h.7c0-21.82-.14-43.65.11-65.47,0-4.63-1.31-5.91-5.85-5.88q-47.47.27-95,0c-4.37,0-6,1-6.06,5.77Q694.7,295.86,692.84,361c-.13,4.59,1.14,6,5.8,6q49-.31,98-.08c4.62,0,5.54-1.59,5.5-5.75C801.94,339.51,802,317.86,802,296.2Z" transform="translate(277 -158)"/><path d="M802,296.2c0,21.66-.09,43.31.07,65,0,4.16-.88,5.77-5.5,5.75q-49-.27-98,.08c-4.66,0-5.93-1.37-5.8-6q1.8-65.19,3.13-130.39c.1-4.74,1.69-5.79,6.06-5.77q47.47.21,95,0c4.54,0,5.9,1.25,5.85,5.88-.25,21.82-.11,43.65-.11,65.47Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 755 B |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM919.16,296.12H918c0-22-.08-44,.07-66,0-4.15-1.36-5.36-5.47-5.34q-46.47.24-93,0c-3.95,0-5.48.88-5.47,5.24q.13,65.72-.21,131.43c0,4.11,1.12,5.38,5.32,5.36q47.22-.27,94.45,0c4.62,0,5.52-1.61,5.49-5.76C919.08,339.43,919.16,317.78,919.16,296.12Z" transform="translate(277 -158)"/><path d="M919.16,296.12c0,21.66-.08,43.31.08,65,0,4.15-.87,5.79-5.49,5.76q-47.22-.28-94.45,0c-4.2,0-5.34-1.25-5.32-5.36q.32-65.71.21-131.43c0-4.36,1.52-5.25,5.47-5.24q46.49.18,93,0c4.11,0,5.5,1.19,5.47,5.34-.15,22-.07,44-.07,66Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 769 B |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM1039.17,296.21h-1.4c0-21.66-.16-43.32.11-65,.06-5-1.2-6.55-6.35-6.51q-47,.36-94,.05c-4.82,0-6.59,1-6.51,6.31q.94,65.23,1.21,130.48c0,4.29,1.44,5.22,5.45,5.2q48.75-.24,97.49,0c4.34,0,5.74-1,5.59-5.56C1040.05,339.53,1039.67,317.87,1039.17,296.21Z" transform="translate(277 -158)"/><path d="M1039.17,296.21c.5,21.66.88,43.32,1.6,65,.15,4.52-1.25,5.58-5.59,5.56q-48.75-.23-97.49,0c-4,0-5.42-.91-5.45-5.2q-.35-65.24-1.21-130.48c-.08-5.33,1.69-6.34,6.51-6.31q47,.25,94-.05c5.15,0,6.41,1.54,6.35,6.51-.27,21.66-.11,43.32-.11,65Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 787 B |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM1052.49,366.17c2.8.22,4.1.41,5.4.41q46.2,0,92.4,0c6.58,0,6.7,0,6.46-6.5-1.66-43.57-3.43-87.14-5-130.72-.16-4.51-2.54-4.59-5.8-4.58-30,.06-59.94.15-89.9,0-4.86,0-6.18,1.46-6.06,6.27,1,37.78,1.7,75.56,2.45,113.34C1052.61,351.47,1052.49,358.61,1052.49,366.17Z" transform="translate(277 -158)"/><path d="M1052.49,366.17c0-7.56.12-14.7,0-21.84-.75-37.78-1.48-75.56-2.45-113.34-.12-4.81,1.2-6.3,6.06-6.27,30,.17,59.93.08,89.9,0,3.26,0,5.64.07,5.8,4.58,1.54,43.58,3.31,87.15,5,130.72.24,6.49.12,6.5-6.46,6.5q-46.2,0-92.4,0C1056.59,366.58,1055.29,366.39,1052.49,366.17Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 827 B |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM1170.17,366.09c2.38.16,4.33.4,6.28.39,25.5-.09,51-.1,76.49-.38,12.29-.14,11.28,2.73,10.53-11.71-2.13-41.26-4.59-82.49-6.63-123.75-.25-5-2-6-6.57-6-26.17.18-52.33.1-78.5.11-7.79,0-7.65,0-7.31,7.67q2,43.69,3.77,87.38C1168.88,335.1,1169.51,350.4,1170.17,366.09Z" transform="translate(277 -158)"/><path d="M1170.17,366.09c-.66-15.69-1.29-31-1.94-46.28q-1.86-43.68-3.77-87.38c-.34-7.65-.48-7.66,7.31-7.67,26.17,0,52.33.07,78.5-.11,4.52,0,6.32.95,6.57,6,2,41.26,4.5,82.49,6.63,123.75.75,14.44,1.76,11.57-10.53,11.71-25.5.28-51,.29-76.49.38C1174.5,366.49,1172.55,366.25,1170.17,366.09Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 844 B |
@ -7,6 +7,10 @@ import IconPuzzle from '../assets/Icon/icon-puzzle.png';
|
|||||||
import IconPause from '../assets/Icon/icon-pause.png';
|
import IconPause from '../assets/Icon/icon-pause.png';
|
||||||
import IconDefault from '../assets/Icon/icon-puzzle.png';
|
import IconDefault from '../assets/Icon/icon-puzzle.png';
|
||||||
import IconTemp from '../assets/Icon/temp.svg';
|
import IconTemp from '../assets/Icon/temp.svg';
|
||||||
|
import IconKilnPress from '../assets/Icon/kilnPress.png';
|
||||||
|
import IconLiquidTrend from '../assets/Icon/liquidTrend.png';
|
||||||
|
import IconKilnTop from '../assets/Icon/kilnTop.png';
|
||||||
|
import IconKilnBottom from '../assets/Icon/kilnBottom.png';
|
||||||
|
|
||||||
function useIcon(iconName) {
|
function useIcon(iconName) {
|
||||||
// const icon = require(`../assets/icons/${iconName}.svg`).default;
|
// const icon = require(`../assets/icons/${iconName}.svg`).default;
|
||||||
@ -27,6 +31,14 @@ function useIcon(iconName) {
|
|||||||
? IconPause
|
? IconPause
|
||||||
: iconName == 'temp'
|
: iconName == 'temp'
|
||||||
? IconTemp
|
? IconTemp
|
||||||
|
: iconName == 'kilnPress'
|
||||||
|
? IconKilnPress
|
||||||
|
: iconName == 'liquidTrend'
|
||||||
|
? IconLiquidTrend
|
||||||
|
: iconName == 'kilnTop'
|
||||||
|
? IconKilnTop
|
||||||
|
: iconName == 'kilnBottom'
|
||||||
|
? IconKilnBottom
|
||||||
: IconDefault;
|
: IconDefault;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -6,10 +6,13 @@ import { AnimatePresence, motion } from "framer-motion"; // 动画
|
|||||||
import KilnCenter from "../../components/Modules/KilnInner/Center"; // 窑炉内部
|
import KilnCenter from "../../components/Modules/KilnInner/Center"; // 窑炉内部
|
||||||
import KilnInnerLeft from "../../components/Modules/KilnInner/LeftSide"; // 窑炉内部左侧内容
|
import KilnInnerLeft from "../../components/Modules/KilnInner/LeftSide"; // 窑炉内部左侧内容
|
||||||
import KilnInnerRight from "../../components/Modules/KilnInner/RightSide"; // 窑炉内部右侧内容
|
import KilnInnerRight from "../../components/Modules/KilnInner/RightSide"; // 窑炉内部右侧内容
|
||||||
|
import OptimizeCenter from "../../components/Modules/KilnOptimize/Center"; // 窑炉优化
|
||||||
|
import KilnOptimizeLeft from "../../components/Modules/KilnOptimize/LeftSide"; // 窑炉优化左侧内容
|
||||||
|
import KilnOptimizeRight from "../../components/Modules/KilnOptimize/RightSide"; // 窑炉优化右侧内容
|
||||||
import FireCheckLeft from "../../components/Modules/FireCheck/LeftSide"; // 退火监测 - 左边
|
import FireCheckLeft from "../../components/Modules/FireCheck/LeftSide"; // 退火监测 - 左边
|
||||||
import QualityCheckLeft from "../../components/Modules/QualityCheck/LeftSide"; // 质检统计 - 左边
|
import QualityCheckLeft from "../../components/Modules/QualityCheck/LeftSide"; // 质检统计 - 左边
|
||||||
import FireCheckRight from "../../components/Modules/FireCheck/RightSide";
|
import FireCheckRight from "../../components/Modules/FireCheck/RightSide";// 退火监测 - 右边
|
||||||
import QualityCheckRight from "../../components/Modules/QualityCheck/RightSide";
|
import QualityCheckRight from "../../components/Modules/QualityCheck/RightSide";// 质检统计 - 右边
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
import { useEffect, useRef } from "react";
|
import { useEffect, useRef } from "react";
|
||||||
import useRefresh from "../../hooks/useRefresh";
|
import useRefresh from "../../hooks/useRefresh";
|
||||||
@ -63,6 +66,7 @@ export default function Home({ active }) {
|
|||||||
>
|
>
|
||||||
{active == "窑炉总览" && <LeftBar key="kiln-total" />}
|
{active == "窑炉总览" && <LeftBar key="kiln-total" />}
|
||||||
{active == "窑炉内部" && <KilnInnerLeft key="kiln-inner" />}
|
{active == "窑炉内部" && <KilnInnerLeft key="kiln-inner" />}
|
||||||
|
{active == "窑炉优化" && <KilnOptimizeLeft key="kiln-optimize" />}
|
||||||
{active == "退火监测" && <FireCheckLeft key="fire-check" />}
|
{active == "退火监测" && <FireCheckLeft key="fire-check" />}
|
||||||
{active == "质检统计" && <QualityCheckLeft key="quality-check" />}
|
{active == "质检统计" && <QualityCheckLeft key="quality-check" />}
|
||||||
</div>
|
</div>
|
||||||
@ -131,6 +135,8 @@ export default function Home({ active }) {
|
|||||||
|
|
||||||
{active == "窑炉内部" && <KilnCenter />}
|
{active == "窑炉内部" && <KilnCenter />}
|
||||||
|
|
||||||
|
{active == "窑炉优化" && <OptimizeCenter />}
|
||||||
|
|
||||||
{active == "退火监测" && <div className="bgFire"></div>}
|
{active == "退火监测" && <div className="bgFire"></div>}
|
||||||
|
|
||||||
{active == "质检统计" && <div className="bgQuality"></div>}
|
{active == "质检统计" && <div className="bgQuality"></div>}
|
||||||
@ -138,6 +144,7 @@ export default function Home({ active }) {
|
|||||||
|
|
||||||
{active == "窑炉总览" && <RightBar key="right-bar" />}
|
{active == "窑炉总览" && <RightBar key="right-bar" />}
|
||||||
{active == "窑炉内部" && <KilnInnerRight key="kiln-inner-right" />}
|
{active == "窑炉内部" && <KilnInnerRight key="kiln-inner-right" />}
|
||||||
|
{active == "窑炉优化" && <KilnOptimizeRight key="kiln-optimize-right" />}
|
||||||
{active == "退火监测" && <FireCheckRight key="kiln-fire-check-right" />}
|
{active == "退火监测" && <FireCheckRight key="kiln-fire-check-right" />}
|
||||||
{active == "质检统计" && <QualityCheckRight key="kiln-quality-right" />}
|
{active == "质检统计" && <QualityCheckRight key="kiln-quality-right" />}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
159
src/store/features/kilnOptimizeSlice.js
Normal file
159
src/store/features/kilnOptimizeSlice.js
Normal file
@ -0,0 +1,159 @@
|
|||||||
|
import { createSlice } from "@reduxjs/toolkit";
|
||||||
|
|
||||||
|
export const initialState = {
|
||||||
|
// info: {
|
||||||
|
// // 余热发电
|
||||||
|
// elecQty1: "0", // kWh
|
||||||
|
// // 电消耗量
|
||||||
|
// elecQty2: "0", // kWh
|
||||||
|
// elecQty3: "0", // kWh
|
||||||
|
// elecQty4: "0", // kWh
|
||||||
|
// elecQty5: "0", // kWh
|
||||||
|
// elecQty6: "0", // kWh
|
||||||
|
// elecQty7: "0", // kWh
|
||||||
|
// // 水消耗量
|
||||||
|
// waterQty: "0", // Km³
|
||||||
|
// // 天然气1
|
||||||
|
// ngQty1: "0", // m³
|
||||||
|
// // 天然气2
|
||||||
|
// ngQty2: "0", // m³
|
||||||
|
// },
|
||||||
|
// trend: {
|
||||||
|
// natGas1: {
|
||||||
|
// // 暂时只存了周数据:
|
||||||
|
// week: [],
|
||||||
|
// month: [],
|
||||||
|
// year: [],
|
||||||
|
// },
|
||||||
|
// natGas2: {
|
||||||
|
// week: [],
|
||||||
|
// month: [],
|
||||||
|
// year: [],
|
||||||
|
// },
|
||||||
|
// elec: {
|
||||||
|
// week: [
|
||||||
|
// // { qty: 10, time: "01" },
|
||||||
|
// // { qty: 20, time: "02" },
|
||||||
|
// // { qty: 30, time: "03" },
|
||||||
|
// // { qty: 40, time: "04" },
|
||||||
|
// // { qty: 50, time: "05" },
|
||||||
|
// // { qty: 60, time: "06" },
|
||||||
|
// // { qty: 70, time: "07" },
|
||||||
|
// ],
|
||||||
|
// month: [
|
||||||
|
// // { qty: 20, time: "02" },
|
||||||
|
// // { qty: 30, time: "03" },
|
||||||
|
// // { qty: 40, time: "04" },
|
||||||
|
// // { qty: 50, time: "05" },
|
||||||
|
// // { qty: 60, time: "06" },
|
||||||
|
// // { qty: 70, time: "07" },
|
||||||
|
// // { qty: 80, time: "08" },
|
||||||
|
// // { qty: 90, time: "09" },
|
||||||
|
// // { qty: 100, time: "10" },
|
||||||
|
// // { qty: 110, time: "11" },
|
||||||
|
// // { qty: 120, time: "12" },
|
||||||
|
// // { qty: 130, time: "13" },
|
||||||
|
// // { qty: 140, time: "14" },
|
||||||
|
// // { qty: 150, time: "15" },
|
||||||
|
// // { qty: 160, time: "16" },
|
||||||
|
// // { qty: 170, time: "17" },
|
||||||
|
// // { qty: 180, time: "18" },
|
||||||
|
// // { qty: 190, time: "19" },
|
||||||
|
// // { qty: 200, time: "20" },
|
||||||
|
// // { qty: 210, time: "21" },
|
||||||
|
// // { qty: 220, time: "22" },
|
||||||
|
// // { qty: 230, time: "23" },
|
||||||
|
// // { qty: 240, time: "24" },
|
||||||
|
// // { qty: 250, time: "25" },
|
||||||
|
// // { qty: 260, time: "26" },
|
||||||
|
// // { qty: 270, time: "27" },
|
||||||
|
// // { qty: 280, time: "28" },
|
||||||
|
// // { qty: 290, time: "29" },
|
||||||
|
// // { qty: 300, time: "30" },
|
||||||
|
// // { qty: 310, time: "31" },
|
||||||
|
// ],
|
||||||
|
// year: [
|
||||||
|
// // { qty: 10, time: "01" },
|
||||||
|
// // { qty: 20, time: "02" },
|
||||||
|
// // { qty: 30, time: "03" },
|
||||||
|
// // { qty: 40, time: "04" },
|
||||||
|
// // { qty: 50, time: "05" },
|
||||||
|
// // { qty: 60, time: "06" },
|
||||||
|
// // { qty: 70, time: "07" },
|
||||||
|
// // { qty: 80, time: "08" },
|
||||||
|
// // { qty: 90, time: "09" },
|
||||||
|
// // { qty: 100, time: "10" },
|
||||||
|
// // { qty: 110, time: "11" },
|
||||||
|
// // { qty: 120, time: "12" },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
pressureAvg:{},
|
||||||
|
liquidAvg:{},
|
||||||
|
bottomTempAvg:{},
|
||||||
|
topTempAvg:{}
|
||||||
|
};
|
||||||
|
|
||||||
|
const kilnOptimizeSlice = createSlice({
|
||||||
|
name: "kilnOptimize",
|
||||||
|
initialState,
|
||||||
|
reducers: {
|
||||||
|
// setInfo: (state, action) => {
|
||||||
|
// state.info = { ...state.info, ...action.payload };
|
||||||
|
// },
|
||||||
|
// setElecTrend: (state, action) => {
|
||||||
|
// if (action.payload.week?.length) {
|
||||||
|
// state.trend.elec.week = action.payload.week;
|
||||||
|
// }
|
||||||
|
// if (action.payload.month?.length) {
|
||||||
|
// state.trend.elec.month = action.payload.month;
|
||||||
|
// }
|
||||||
|
// if (action.payload.year?.length) {
|
||||||
|
// state.trend.elec.year = action.payload.year;
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// setSumGasData: (state, action) => {
|
||||||
|
// if ("sumGas1Now" in action.payload) {
|
||||||
|
// state.info.ngQty1 = action.payload.sumGas1Now;
|
||||||
|
// }
|
||||||
|
// if ("sumGas2Now" in action.payload) {
|
||||||
|
// state.info.ngQty2 = action.payload.sumGas2Now;
|
||||||
|
// }
|
||||||
|
// if ("hisSumGas1For7Day" in action.payload) {
|
||||||
|
// state.trend.natGas1.week = action.payload.hisSumGas1For7Day;
|
||||||
|
// }
|
||||||
|
// if ("hisSumGas2For7Day" in action.payload) {
|
||||||
|
// state.trend.natGas2.week = action.payload.hisSumGas2For7Day;
|
||||||
|
// }
|
||||||
|
// if ("sumGas1ForMonth" in action.payload) {
|
||||||
|
// state.trend.natGas1.month = action.payload.sumGas1ForMonth;
|
||||||
|
// }
|
||||||
|
// if ("sumGas2ForMonth" in action.payload) {
|
||||||
|
// state.trend.natGas2.month = action.payload.sumGas2ForMonth;
|
||||||
|
// }
|
||||||
|
// if ("sumGas1ForYear" in action.payload) {
|
||||||
|
// state.trend.natGas1.year = action.payload.sumGas1ForYear;
|
||||||
|
// }
|
||||||
|
// if ("sumGas2ForYear" in action.payload) {
|
||||||
|
// state.trend.natGas2.year = action.payload.sumGas2ForYear;
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// ====================
|
||||||
|
setPressureAvg: (state, action) => {
|
||||||
|
console.log(action.payload)
|
||||||
|
state.pressureAvg = action.payload;
|
||||||
|
},
|
||||||
|
setLiquidAvg: (state, action) => {
|
||||||
|
state.liquidAvg = action.payload;
|
||||||
|
},
|
||||||
|
setBottomTempAvg: (state, action) => {
|
||||||
|
state.bottomTempAvg = action.payload;
|
||||||
|
},
|
||||||
|
setTopTempAvg: (state, action) => {
|
||||||
|
state.topTempAvg = action.payload;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default kilnOptimizeSlice.reducer;
|
||||||
|
export const { setPressureAvg, setLiquidAvg,setBottomTempAvg,setTopTempAvg} = kilnOptimizeSlice.actions;
|
||||||
@ -15,6 +15,7 @@ import annealFanInfoReducer from "./features/annealFanInfoSlice";
|
|||||||
import cuttingReducer from "./features/cuttingSlice";
|
import cuttingReducer from "./features/cuttingSlice";
|
||||||
import smokeReducer from "./features/smokeSlice";
|
import smokeReducer from "./features/smokeSlice";
|
||||||
import alarmSlice from "./features/alarmSlice";
|
import alarmSlice from "./features/alarmSlice";
|
||||||
|
import kilnOptimizeSlice from "./features/kilnOptimizeSlice";
|
||||||
|
|
||||||
export const store = configureStore({
|
export const store = configureStore({
|
||||||
reducer: {
|
reducer: {
|
||||||
@ -49,6 +50,8 @@ export const store = configureStore({
|
|||||||
// 切割
|
// 切割
|
||||||
cutting: cuttingReducer,
|
cutting: cuttingReducer,
|
||||||
// 烟气
|
// 烟气
|
||||||
smoke: smokeReducer
|
smoke: smokeReducer,
|
||||||
|
// 窑炉优化
|
||||||
|
kilnOptimize: kilnOptimizeSlice
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@ -136,6 +136,38 @@ export default function handler(msg) {
|
|||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
case "pressureAvgFor7Day": {
|
||||||
|
// 窑炉压力
|
||||||
|
store.dispatch({
|
||||||
|
type: "kilnOptimize/setPressureAvg",
|
||||||
|
payload: serializedData.data,
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "liquidAvgFor7Day": {
|
||||||
|
// 液位
|
||||||
|
store.dispatch({
|
||||||
|
type: "kilnOptimize/setLiquidAvg",
|
||||||
|
payload: serializedData.data,
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "bottomTempAvgFor7Day": {
|
||||||
|
// 池底
|
||||||
|
store.dispatch({
|
||||||
|
type: "kilnOptimize/setBottomTempAvg",
|
||||||
|
payload: serializedData.data,
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "topTempAvgFor7Day": {
|
||||||
|
// 碹顶
|
||||||
|
store.dispatch({
|
||||||
|
type: "kilnOptimize/setTopTempAvg",
|
||||||
|
payload: serializedData.data,
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
default: {
|
default: {
|
||||||
console.log("websocket message: [unknown] ---> ", msg.data);
|
console.log("websocket message: [unknown] ---> ", msg.data);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user