diff --git a/public/video/1to2.webm b/public/video/1to2.webm index a17eb07..0d9603f 100644 Binary files a/public/video/1to2.webm and b/public/video/1to2.webm differ diff --git a/public/video/2to1.webm b/public/video/2to1.webm index a032376..6191bb6 100644 Binary files a/public/video/2to1.webm and b/public/video/2to1.webm differ diff --git a/src/App.js b/src/App.js index e1ac168..91985bd 100644 --- a/src/App.js +++ b/src/App.js @@ -10,7 +10,7 @@ import RulerContainer from "./components/Tools/Ruler"; import { Switch } from "antd"; import { createPortal } from "react-dom"; -const Menus = ["窑炉总览", "窑炉内部", "退火监测", "质检统计", "能耗分析"]; +const Menus = ["窑炉总览", "窑炉内部", "窑炉优化","退火监测", "质检统计", "能耗分析"]; const LUNBO_INTERVAL = 60 * 1000; function App() { const { styles, value, setValue } = useSlider(100); diff --git a/src/assets/Icon/kilnBottom.png b/src/assets/Icon/kilnBottom.png new file mode 100644 index 0000000..2e28026 Binary files /dev/null and b/src/assets/Icon/kilnBottom.png differ diff --git a/src/assets/Icon/kilnPress.png b/src/assets/Icon/kilnPress.png new file mode 100644 index 0000000..72c41e7 Binary files /dev/null and b/src/assets/Icon/kilnPress.png differ diff --git a/src/assets/Icon/kilnTop.png b/src/assets/Icon/kilnTop.png new file mode 100644 index 0000000..84b951a Binary files /dev/null and b/src/assets/Icon/kilnTop.png differ diff --git a/src/assets/Icon/liquidTrend.png b/src/assets/Icon/liquidTrend.png new file mode 100644 index 0000000..ddf65a0 Binary files /dev/null and b/src/assets/Icon/liquidTrend.png differ diff --git a/src/assets/kilnSpeed.png b/src/assets/kilnSpeed.png new file mode 100644 index 0000000..72a8801 Binary files /dev/null and b/src/assets/kilnSpeed.png differ diff --git a/src/assets/tempIntr.png b/src/assets/tempIntr.png new file mode 100644 index 0000000..453ce39 Binary files /dev/null and b/src/assets/tempIntr.png differ diff --git a/src/components/Common/NavMenu/index.jsx b/src/components/Common/NavMenu/index.jsx index 160b6b6..3b526fc 100644 --- a/src/components/Common/NavMenu/index.jsx +++ b/src/components/Common/NavMenu/index.jsx @@ -5,8 +5,9 @@ export default function CenterMenu({ active, onChangeActive }) { const menuList = [ ["窑炉总览", "/kilnSummary"], ["窑炉内部", "/kilnInner"], + ["窑炉优化", "/kilnOptimize"], ["退火监测", "/stopFire"], - ["质检统计", "/quailtyCheck"], + ["质检统计", "/quailtyCheck"], ["能耗分析", "/energyCost"], ]; return ( diff --git a/src/components/Common/NavMenu/index.module.scss b/src/components/Common/NavMenu/index.module.scss index f813585..e3bdaf1 100644 --- a/src/components/Common/NavMenu/index.module.scss +++ b/src/components/Common/NavMenu/index.module.scss @@ -2,7 +2,7 @@ position: fixed; top: 120px; // left: 1340px; - left: 1460px; + left: 1338px; color: white; z-index: 10000; } diff --git a/src/components/Common/TemperatureBottom/index.jsx b/src/components/Common/TemperatureBottom/index.jsx index 25ff7f0..43c6032 100644 --- a/src/components/Common/TemperatureBottom/index.jsx +++ b/src/components/Common/TemperatureBottom/index.jsx @@ -1,18 +1,30 @@ import BlueRect from "../BlueRect"; import { useSelector } from "react-redux"; import { motion, AnimatePresence } from "framer-motion"; +import { useEffect, useState } from "react"; -const blueTe = [ - "TE401", - "TE402", - "TE403", - "PE401", - "PE402", - "PE403", -]; +const blueTe = ["TE401", "TE402", "TE403", "PE401", "PE402", "PE403"]; function TemperatureBottom(props) { const tempBottom = useSelector((state) => state.temperature.bottom); + const speed = props.speed; + const floor = props.floor; + const [speedAn, setSpeedAn] = useState({}); + useEffect(() => { + // 2，3互切不用展示动画 + if (speed === "f") { + setSpeedAn({}); + } else { + if (floor === 2) { + setSpeedAn({ + opacity: [0, 0, 0, 0.6, 1], + transition: { duration: 0.3, delay: 1.8 }, + }); + } else { + setSpeedAn({}); + } + } + }, [floor]); return ( {Object.keys(tempBottom).map((d) => ( - + ))} ); diff --git a/src/components/Common/TemperatureTop/index.jsx b/src/components/Common/TemperatureTop/index.jsx index c563a60..7dbfafc 100644 --- a/src/components/Common/TemperatureTop/index.jsx +++ b/src/components/Common/TemperatureTop/index.jsx @@ -28,15 +28,20 @@ function TemperatureTop(props) { width: "100%", height: "80vh", zIndex: "-1", - ...props.style + ...props.style, }} animate={{ opacity: [0, 0, 0, 0.6, 1], - transition: { duration: 0.3, delay: 2 }, + transition: { duration: 0.3, delay: 1.5 }, }} > {Object.keys(tempTop).map((d) => ( - + ))} ); diff --git a/src/components/Modules/KilnInner/Center/VideoContainer.jsx b/src/components/Modules/KilnInner/Center/VideoContainer.jsx index 7375f13..c3823b2 100644 --- a/src/components/Modules/KilnInner/Center/VideoContainer.jsx +++ b/src/components/Modules/KilnInner/Center/VideoContainer.jsx @@ -1,104 +1,108 @@ -import EnterVideo from './videoComponents/EnterVideo'; -import EnterToFloorOne from './videoComponents/EnterToFloor1'; -import EnterToFloorTwo from './videoComponents/EnterToFloor2'; -import FloorOneToTwo from './videoComponents/Floor1To2'; -import FloorTwoToOne from './videoComponents/Floor2To1'; -import { useRef, useEffect, useReducer } from 'react'; -import { AnimatePresence } from 'framer-motion'; +import EnterVideo from "./videoComponents/EnterVideo"; +import EnterToFloorOne from "./videoComponents/EnterToFloor1"; +import EnterToFloorTwo from "./videoComponents/EnterToFloor2"; +import FloorOneToTwo from "./videoComponents/Floor1To2"; +import FloorTwoToOne from "./videoComponents/Floor2To1"; +import { useRef, useEffect, useReducer } from "react"; +import { AnimatePresence } from "framer-motion"; const initOpacity = { - enterVideo: 1, - enterToFloorOne: 0, - enterToFloorTwo: 0, - floorOneToTwo: 0, - floorTwoToOne: 0, + enterVideo: 1, + enterToFloorOne: 0, + enterToFloorTwo: 0, + floorOneToTwo: 0, + floorTwoToOne: 0, }; const opacityReducer = (state, action) => { - switch (action.type) { - case 'enter-to-1': { - return { - ...initOpacity, - enterToFloorOne: 1, - enterVideo: 0, - }; - } - case 'enter-to-2': { - return { - ...initOpacity, - enterToFloorTwo: 1, - enterVideo: 0, - }; - } - case 'floor-1-to-2': { - return { - ...initOpacity, - floorOneToTwo: 1, - enterToFloorOne: 0, - enterVideo: 0, - floorTwoToOne: 0, - }; - } - case 'floor-2-to-1': { - return { - ...initOpacity, - floorTwoToOne: 1, - enterToFloorTwo: 0, - floorOneToTwo: 0, - enterVideo: 0, - }; - } - } + switch (action.type) { + case "enter-to-1": { + return { + ...initOpacity, + enterToFloorOne: 1, + enterVideo: 0, + }; + } + case "enter-to-2": { + return { + ...initOpacity, + enterToFloorTwo: 1, + enterVideo: 0, + }; + } + case "floor-1-to-2": { + return { + ...initOpacity, + floorOneToTwo: 1, + enterToFloorOne: 0, + enterVideo: 0, + floorTwoToOne: 0, + }; + } + case "floor-2-to-1": { + return { + ...initOpacity, + floorTwoToOne: 1, + enterToFloorTwo: 0, + floorOneToTwo: 0, + enterVideo: 0, + }; + } + } }; function VideoContainer(props) { - const floor = props.floor || null; - const lastFloor = useRef(null); - const [opacity, dispatch] = useReducer(opacityReducer, initOpacity); + const floor = props.floor || null; + const lastFloor = useRef(null); + const [opacity, dispatch] = useReducer(opacityReducer, initOpacity); - useEffect(() => { - if (floor) { - if (floor == 1) { - if (lastFloor.current == 2) { - dispatch({ type: 'floor-2-to-1' }); - } else { - dispatch({ type: 'enter-to-1' }); - } - } else if (floor == 2) { - if (lastFloor.current == 1) { - dispatch({ type: 'floor-1-to-2' }); - } else { - dispatch({ type: 'enter-to-2' }); - } - } - lastFloor.current = floor; - } - }, [floor]); + useEffect(() => { + if (floor) { + if (floor == 1) { + if (lastFloor.current == 2) { + dispatch({ type: "floor-2-to-1" }); + } else { + dispatch({ type: "enter-to-1" }); + } + } else if (floor == 2) { + if (lastFloor.current == 1) { + dispatch({ type: "floor-1-to-2" }); + } else { + dispatch({ type: "enter-to-2" }); + } + } + lastFloor.current = floor; + } + }, [floor]); - const enterToFloorOne = () => { - // 更新层数 - props.onFloorUpdate(1); - // floor1 one 立即显示，enter 延迟点消失 - dispatch({ type: 'enter-to-1' }); - }; + const enterToFloorOne = () => { + // 更新层数 + props.onFloorUpdate(1); + // floor1 one 立即显示，enter 延迟点消失 + dispatch({ type: "enter-to-1" }); + }; - function handleEnterVideoEnd() { - // console.log('video end'); - enterToFloorOne(); - } + function handleEnterVideoEnd() { + // console.log('video end'); + enterToFloorOne(); + } - return ( - - - - - - - - ); + return ( + + + + + + + + ); } export default VideoContainer; diff --git a/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx b/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx index 44a6ff4..444e4c0 100644 --- a/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx +++ b/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx @@ -19,7 +19,7 @@ function EnterToFloorOne(props) { setTimeout(() => { // console.log("开启enter的火播放"); setFireCanPlay(true); - }, 5000); + }, 1800); } return () => { // console.log("关闭enter的火播放"); @@ -49,7 +49,7 @@ function EnterToFloorOne(props) { - {/* {fireCanPlay && fireDir == "东火" && ( + {fireCanPlay && fireDir == "东火" && ( - )} */} + )} state.fireInfo); @@ -13,6 +12,7 @@ function FloorOneToTwo(props) { const vd = useRef(null); const show = props.opacity || 0; + const speed = "s"; useEffect(() => { if (show) { @@ -20,7 +20,7 @@ function FloorOneToTwo(props) { setTimeout(() => { // console.log("开启1-2的火播放"); setFireCanPlay(true); - }, 3000); + }, 2000); } if (!show) setFireCanPlay(false); return () => { @@ -81,6 +81,8 @@ function FloorOneToTwo(props) { width: "2380px", zIndex: 0, }} + speed={speed} + floor={props.floor} /> diff --git a/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx b/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx index 920aa8b..d607be8 100644 --- a/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx +++ b/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx @@ -19,7 +19,7 @@ function FloorTwoToOne(props) { setTimeout(() => { // console.log("开启2-1的火播放"); setFireCanPlay(true); - }, 3000); + }, 1800); } if (!show) setFireCanPlay(false); return () => { diff --git a/src/components/Modules/KilnOptimize/Center/VideoContainer.jsx b/src/components/Modules/KilnOptimize/Center/VideoContainer.jsx new file mode 100644 index 0000000..85b0ae2 --- /dev/null +++ b/src/components/Modules/KilnOptimize/Center/VideoContainer.jsx @@ -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 ( + + + + + + + + ); +} + +export default VideoContainer; diff --git a/src/components/Modules/KilnOptimize/Center/index.jsx b/src/components/Modules/KilnOptimize/Center/index.jsx new file mode 100644 index 0000000..0c7c36f --- /dev/null +++ b/src/components/Modules/KilnOptimize/Center/index.jsx @@ -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 ( +
+ {/* 时间火向数据 */} +
+ +
+ + {/* menu */} +
+
onFloorUpdate(1)} + > + 碹顶温度 +
+
onFloorUpdate(2)} + > + 池底温度 +
+
onFloorUpdate(3)} + > + 溶液速度 +
+
+ + {/* 颜色指示图 */} +
+ +
+ + {/* video */} + +
+ ); +} + +export default KilnCenter; diff --git a/src/components/Modules/KilnOptimize/Center/index.module.css b/src/components/Modules/KilnOptimize/Center/index.module.css new file mode 100644 index 0000000..db19460 --- /dev/null +++ b/src/components/Modules/KilnOptimize/Center/index.module.css @@ -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; +} \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/Center/videoComponents/EnterToFloor1.jsx b/src/components/Modules/KilnOptimize/Center/videoComponents/EnterToFloor1.jsx new file mode 100644 index 0000000..c2cc5e4 --- /dev/null +++ b/src/components/Modules/KilnOptimize/Center/videoComponents/EnterToFloor1.jsx @@ -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 ( + + {show && ( + + + + {fireCanPlay && fireDir == "东火" && ( + + )} + {fireCanPlay && fireDir == "西火" && ( + + )} + + + + + + + )} + + ); +} + +export default EnterToFloorOne; diff --git a/src/components/Modules/KilnOptimize/Center/videoComponents/EnterToFloor2.jsx b/src/components/Modules/KilnOptimize/Center/videoComponents/EnterToFloor2.jsx new file mode 100644 index 0000000..decbc00 --- /dev/null +++ b/src/components/Modules/KilnOptimize/Center/videoComponents/EnterToFloor2.jsx @@ -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 ( + + + + ); +} + +export default EnterToFloorTwo; diff --git a/src/components/Modules/KilnOptimize/Center/videoComponents/EnterVideo.jsx b/src/components/Modules/KilnOptimize/Center/videoComponents/EnterVideo.jsx new file mode 100644 index 0000000..a5098d8 --- /dev/null +++ b/src/components/Modules/KilnOptimize/Center/videoComponents/EnterVideo.jsx @@ -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 ( + + {show && ( + + + + )} + + ); +} + +export default EnterVideo; diff --git a/src/components/Modules/KilnOptimize/Center/videoComponents/Floor1To2.jsx b/src/components/Modules/KilnOptimize/Center/videoComponents/Floor1To2.jsx new file mode 100644 index 0000000..61392f6 --- /dev/null +++ b/src/components/Modules/KilnOptimize/Center/videoComponents/Floor1To2.jsx @@ -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 ( + + {show && ( + + + {/* 窑炉的色块 */} + {showBottom && ( + + )} + + {showBottom && fireCanPlay && fireDir == "东火" && ( + + )} + {showBottom && fireCanPlay && fireDir == "西火" && ( + // {fireCanPlay && ( + + )} + + {/* 温度组件 */} + {showBottom && ( + + )} + {/* 溶液速度色块 */} + {showSpeed && ( + + + + )} + + + )} + + ); +} + +export default FloorOneToTwo; diff --git a/src/components/Modules/KilnOptimize/Center/videoComponents/Floor2To1.jsx b/src/components/Modules/KilnOptimize/Center/videoComponents/Floor2To1.jsx new file mode 100644 index 0000000..ecb24e9 --- /dev/null +++ b/src/components/Modules/KilnOptimize/Center/videoComponents/Floor2To1.jsx @@ -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 ( + + {show && ( + + + + {fireCanPlay && fireDir == "东火" && ( + // {fireCanPlay && ( + + )} + {fireCanPlay && fireDir == "西火" && ( + // {fireCanPlay && ( + + )} + + + + + + + )} + + ); +} + +export default FloorTwoToOne; diff --git a/src/components/Modules/KilnOptimize/LeftSide/index.jsx b/src/components/Modules/KilnOptimize/LeftSide/index.jsx new file mode 100644 index 0000000..f3201e2 --- /dev/null +++ b/src/components/Modules/KilnOptimize/LeftSide/index.jsx @@ -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 ( + + + + + ); +} diff --git a/src/components/Modules/KilnOptimize/LeftSide/index.module.scss b/src/components/Modules/KilnOptimize/LeftSide/index.module.scss new file mode 100644 index 0000000..ee7715c --- /dev/null +++ b/src/components/Modules/KilnOptimize/LeftSide/index.module.scss @@ -0,0 +1,9 @@ +.leftBar { + width: 625px; + height: 966px; + // margin-left: 40px; + + display: flex; + flex-direction: column; + justify-content: space-between; +} diff --git a/src/components/Modules/KilnOptimize/RightSide/index.jsx b/src/components/Modules/KilnOptimize/RightSide/index.jsx new file mode 100644 index 0000000..7e735b1 --- /dev/null +++ b/src/components/Modules/KilnOptimize/RightSide/index.jsx @@ -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 ( + + + + + ); +} diff --git a/src/components/Modules/KilnOptimize/RightSide/index.module.scss b/src/components/Modules/KilnOptimize/RightSide/index.module.scss new file mode 100644 index 0000000..ee7715c --- /dev/null +++ b/src/components/Modules/KilnOptimize/RightSide/index.module.scss @@ -0,0 +1,9 @@ +.leftBar { + width: 625px; + height: 966px; + // margin-left: 40px; + + display: flex; + flex-direction: column; + justify-content: space-between; +} diff --git a/src/components/Modules/KilnOptimize/components/BotttomColorBlock/index.jsx b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/index.jsx new file mode 100644 index 0000000..cd35c56 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/index.jsx @@ -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 ( + + + + + + + + + + + + + + + + + + + + + + + ); + } + + return ( + + + + + + + + + + + + + + + + + + + + ); +}; + +export default BotttomColorBlock; diff --git a/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/b1.svg b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/b1.svg new file mode 100644 index 0000000..a024506 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/b1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/b2.svg b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/b2.svg new file mode 100644 index 0000000..ba3d919 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/b2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/b3.svg b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/b3.svg new file mode 100644 index 0000000..00f41a9 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/b3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/b4.svg b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/b4.svg new file mode 100644 index 0000000..466f3d8 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/b4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/b5.svg b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/b5.svg new file mode 100644 index 0000000..38f9387 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/b5.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/b6.svg b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/b6.svg new file mode 100644 index 0000000..36972f8 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/b6.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/b7.svg b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/b7.svg new file mode 100644 index 0000000..bcb7a0b --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/b7.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/b8.svg b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/b8.svg new file mode 100644 index 0000000..61b749b --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/b8.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/t1.svg b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/t1.svg new file mode 100644 index 0000000..eed04f8 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/t1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/t2.svg b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/t2.svg new file mode 100644 index 0000000..2fa9801 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/t2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/t3.svg b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/t3.svg new file mode 100644 index 0000000..99d99fc --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/t3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/t4.svg b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/t4.svg new file mode 100644 index 0000000..22160fd --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/t4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/t5.svg b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/t5.svg new file mode 100644 index 0000000..d8b45ee --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/t5.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/t6.svg b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/t6.svg new file mode 100644 index 0000000..e63fec3 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/t6.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/t7.svg b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/t7.svg new file mode 100644 index 0000000..b7523dd --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/t7.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/t8.svg b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/t8.svg new file mode 100644 index 0000000..d07fb95 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/pic/t8.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/CommonChart/chart.config.js b/src/components/Modules/KilnOptimize/components/CommonChart/chart.config.js new file mode 100644 index 0000000..6c0c5c5 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/CommonChart/chart.config.js @@ -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: '' + }, + }; +} diff --git a/src/components/Modules/KilnOptimize/components/CommonChart/index.jsx b/src/components/Modules/KilnOptimize/components/CommonChart/index.jsx new file mode 100644 index 0000000..8240674 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/CommonChart/index.jsx @@ -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 ( +
+ {data.length > 0 && ( + + )} + {data.length <= 0 && ( +

+ 暂无数据 +

+ )} +
+ ); +} + +export default CommonChart; diff --git a/src/components/Modules/KilnOptimize/components/CommonChart/index.module.css b/src/components/Modules/KilnOptimize/components/CommonChart/index.module.css new file mode 100644 index 0000000..bbfdd99 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/CommonChart/index.module.css @@ -0,0 +1,3 @@ +.commonChart { + height: 100%; +} \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/KilnBottom/index.jsx b/src/components/Modules/KilnOptimize/components/KilnBottom/index.jsx new file mode 100644 index 0000000..bd70a17 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/KilnBottom/index.jsx @@ -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 ( + + {/* legend */} +
+ + 标准值外 + + + 标准值内 + +
+
+ +
+ + ) +} +export default KilnBottom; \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/KilnBottom/index.module.css b/src/components/Modules/KilnOptimize/components/KilnBottom/index.module.css new file mode 100644 index 0000000..19978b5 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/KilnBottom/index.module.css @@ -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; +} \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/KilnPress/index.jsx b/src/components/Modules/KilnOptimize/components/KilnPress/index.jsx new file mode 100644 index 0000000..533207f --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/KilnPress/index.jsx @@ -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 ( + + {/* legend */} +
+ + + 标准值外 + + + + 标准值内 + +
+
+ +
+ + ); +} +export default KilnPress; diff --git a/src/components/Modules/KilnOptimize/components/KilnPress/index.module.css b/src/components/Modules/KilnOptimize/components/KilnPress/index.module.css new file mode 100644 index 0000000..19978b5 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/KilnPress/index.module.css @@ -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; +} \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/KilnTop/index.jsx b/src/components/Modules/KilnOptimize/components/KilnTop/index.jsx new file mode 100644 index 0000000..dcf0142 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/KilnTop/index.jsx @@ -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 ( + + {/* legend */} +
+ + 标准值外 + + + 标准值内 + +
+
+ +
+ + ) +} +export default KilnTop; \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/KilnTop/index.module.css b/src/components/Modules/KilnOptimize/components/KilnTop/index.module.css new file mode 100644 index 0000000..19978b5 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/KilnTop/index.module.css @@ -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; +} \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/LiquidSpeedColor/index.jsx b/src/components/Modules/KilnOptimize/components/LiquidSpeedColor/index.jsx new file mode 100644 index 0000000..a10c8f9 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/LiquidSpeedColor/index.jsx @@ -0,0 +1,45 @@ +import { motion } from "framer-motion"; +import { useEffect, useState } from "react"; +import image from "./../../../../../assets/kilnSpeed.png"; +function LiquidSpeedColor(props) { + const speed = props.speed; + const floor = props.floor; + const [speedAn, setSpeedAn] = useState({}); + useEffect(() => { + // 2，3互切不用展示动画 + if (speed === "f") { + setSpeedAn({}); + } else { + if (floor === 3) { + setSpeedAn({ + opacity: [0, 0, 0, 0.6, 1], + transition: { duration: 0.3, delay: 1.5 }, + }); + } else { + setSpeedAn({}); + } + } + }, [floor]); + console.log(speedAn); + console.log("speedAnspeedAnspeedAnspeedAnspeedAnspeedAnspeedAn"); + return ( + + + + ); +} +export default LiquidSpeedColor; diff --git a/src/components/Modules/KilnOptimize/components/LiquidTrend/index.jsx b/src/components/Modules/KilnOptimize/components/LiquidTrend/index.jsx new file mode 100644 index 0000000..217ba3f --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/LiquidTrend/index.jsx @@ -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 ( + + {/* legend */} +
+ + 标准值外 + + + 标准值内 + +
+
+ +
+ + ) +} +export default LiquidTrend; \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/LiquidTrend/index.module.css b/src/components/Modules/KilnOptimize/components/LiquidTrend/index.module.css new file mode 100644 index 0000000..19978b5 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/LiquidTrend/index.module.css @@ -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; +} \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlock/index.jsx b/src/components/Modules/KilnOptimize/components/TopColorBlock/index.jsx new file mode 100644 index 0000000..e7c8059 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlock/index.jsx @@ -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 ( + + + + + + + + + + + + + + + + + + + + + + + + + + + ); + } + + return ( + + + + + + + + + + + + + + + + + + + + ); +}; + +export default TopColorBlock; diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/b1.svg b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/b1.svg new file mode 100644 index 0000000..9738474 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/b1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/b2.svg b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/b2.svg new file mode 100644 index 0000000..b794e76 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/b2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/b3.svg b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/b3.svg new file mode 100644 index 0000000..7f2bc55 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/b3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/b4.svg b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/b4.svg new file mode 100644 index 0000000..ebe251d --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/b4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/b5.svg b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/b5.svg new file mode 100644 index 0000000..347878c --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/b5.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/b6.svg b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/b6.svg new file mode 100644 index 0000000..76ed899 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/b6.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/b7.svg b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/b7.svg new file mode 100644 index 0000000..90b6ab6 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/b7.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/b8.svg b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/b8.svg new file mode 100644 index 0000000..c449fc7 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/b8.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/t1.svg b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/t1.svg new file mode 100644 index 0000000..3dfb5b3 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/t1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/t2.svg b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/t2.svg new file mode 100644 index 0000000..154f7d3 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/t2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/t3.svg b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/t3.svg new file mode 100644 index 0000000..ea0256d --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/t3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/t4.svg b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/t4.svg new file mode 100644 index 0000000..eff73a8 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/t4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/t5.svg b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/t5.svg new file mode 100644 index 0000000..3b430f4 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/t5.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/t6.svg b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/t6.svg new file mode 100644 index 0000000..94a9030 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/t6.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/t7.svg b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/t7.svg new file mode 100644 index 0000000..ba3e86f --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/t7.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/t8.svg b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/t8.svg new file mode 100644 index 0000000..be99c68 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlock/pic/t8.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/index.jsx b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/index.jsx new file mode 100644 index 0000000..0614af5 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/index.jsx @@ -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 ( + + + + + + + + + + + + + + + + + + + + + + + + + + + ); + } + + return ( + + + + + + + + + + + + + + + + + + + + ); +}; + +export default TopColorBlockEnter; diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/b1.svg b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/b1.svg new file mode 100644 index 0000000..9738474 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/b1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/b2.svg b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/b2.svg new file mode 100644 index 0000000..b794e76 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/b2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/b3.svg b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/b3.svg new file mode 100644 index 0000000..7f2bc55 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/b3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/b4.svg b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/b4.svg new file mode 100644 index 0000000..ebe251d --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/b4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/b5.svg b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/b5.svg new file mode 100644 index 0000000..347878c --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/b5.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/b6.svg b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/b6.svg new file mode 100644 index 0000000..76ed899 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/b6.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/b7.svg b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/b7.svg new file mode 100644 index 0000000..90b6ab6 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/b7.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/b8.svg b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/b8.svg new file mode 100644 index 0000000..c449fc7 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/b8.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/t1.svg b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/t1.svg new file mode 100644 index 0000000..3dfb5b3 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/t1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/t2.svg b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/t2.svg new file mode 100644 index 0000000..154f7d3 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/t2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/t3.svg b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/t3.svg new file mode 100644 index 0000000..ea0256d --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/t3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/t4.svg b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/t4.svg new file mode 100644 index 0000000..eff73a8 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/t4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/t5.svg b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/t5.svg new file mode 100644 index 0000000..3b430f4 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/t5.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/t6.svg b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/t6.svg new file mode 100644 index 0000000..94a9030 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/t6.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/t7.svg b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/t7.svg new file mode 100644 index 0000000..ba3e86f --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/t7.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/t8.svg b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/t8.svg new file mode 100644 index 0000000..be99c68 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlockEnter/pic/t8.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/hooks/useIcon.js b/src/hooks/useIcon.js index bf06639..7c3894b 100644 --- a/src/hooks/useIcon.js +++ b/src/hooks/useIcon.js @@ -7,6 +7,10 @@ import IconPuzzle from '../assets/Icon/icon-puzzle.png'; import IconPause from '../assets/Icon/icon-pause.png'; import IconDefault from '../assets/Icon/icon-puzzle.png'; 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) { // const icon = require(`../assets/icons/${iconName}.svg`).default; @@ -27,6 +31,14 @@ function useIcon(iconName) { ? IconPause : iconName == 'temp' ? IconTemp + : iconName == 'kilnPress' + ? IconKilnPress + : iconName == 'liquidTrend' + ? IconLiquidTrend + : iconName == 'kilnTop' + ? IconKilnTop + : iconName == 'kilnBottom' + ? IconKilnBottom : IconDefault; } diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx index 47de141..92b025c 100644 --- a/src/pages/Home/index.jsx +++ b/src/pages/Home/index.jsx @@ -6,10 +6,13 @@ import { AnimatePresence, motion } from "framer-motion"; // 动画 import KilnCenter from "../../components/Modules/KilnInner/Center"; // 窑炉内部 import KilnInnerLeft from "../../components/Modules/KilnInner/LeftSide"; // 窑炉内部左侧内容 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 QualityCheckLeft from "../../components/Modules/QualityCheck/LeftSide"; // 质检统计 - 左边 -import FireCheckRight from "../../components/Modules/FireCheck/RightSide"; -import QualityCheckRight from "../../components/Modules/QualityCheck/RightSide"; +import FireCheckRight from "../../components/Modules/FireCheck/RightSide";// 退火监测 - 右边 +import QualityCheckRight from "../../components/Modules/QualityCheck/RightSide";// 质检统计 - 右边 import { useSelector } from "react-redux"; import { useEffect, useRef } from "react"; import useRefresh from "../../hooks/useRefresh"; @@ -63,6 +66,7 @@ export default function Home({ active }) { > {active == "窑炉总览" && } {active == "窑炉内部" && } + {active == "窑炉优化" && } {active == "退火监测" && } {active == "质检统计" && } @@ -131,6 +135,8 @@ export default function Home({ active }) { {active == "窑炉内部" && } + {active == "窑炉优化" && } + {active == "退火监测" &&
} {active == "质检统计" &&
} @@ -138,6 +144,7 @@ export default function Home({ active }) { {active == "窑炉总览" && } {active == "窑炉内部" && } + {active == "窑炉优化" && } {active == "退火监测" && } {active == "质检统计" && } diff --git a/src/store/features/kilnOptimizeSlice.js b/src/store/features/kilnOptimizeSlice.js new file mode 100644 index 0000000..3bf7e6e --- /dev/null +++ b/src/store/features/kilnOptimizeSlice.js @@ -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; \ No newline at end of file diff --git a/src/store/index.js b/src/store/index.js index e72c774..4ca7992 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -15,6 +15,7 @@ import annealFanInfoReducer from "./features/annealFanInfoSlice"; import cuttingReducer from "./features/cuttingSlice"; import smokeReducer from "./features/smokeSlice"; import alarmSlice from "./features/alarmSlice"; +import kilnOptimizeSlice from "./features/kilnOptimizeSlice"; export const store = configureStore({ reducer: { @@ -49,6 +50,8 @@ export const store = configureStore({ // 切割 cutting: cuttingReducer, // 烟气 - smoke: smokeReducer + smoke: smokeReducer, + // 窑炉优化 + kilnOptimize: kilnOptimizeSlice }, }); diff --git a/src/utils/dcs.js b/src/utils/dcs.js index 892fd5d..5f1f918 100644 --- a/src/utils/dcs.js +++ b/src/utils/dcs.js @@ -136,6 +136,38 @@ export default function handler(msg) { }); 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: { console.log("websocket message: [unknown] ---> ", msg.data); }