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/tempIntr.png b/src/assets/tempIntr.png new file mode 100644 index 0000000..6f6ca71 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..9d3ed1a 100644 --- a/src/components/Common/TemperatureBottom/index.jsx +++ b/src/components/Common/TemperatureBottom/index.jsx @@ -13,6 +13,8 @@ const blueTe = [ function TemperatureBottom(props) { const tempBottom = useSelector((state) => state.temperature.bottom); + console.log(tempBottom) + console.log('==================+++++++++++++') return ( { + 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); + + 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' }); + }; + + 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..84a385a --- /dev/null +++ b/src/components/Modules/KilnOptimize/Center/index.jsx @@ -0,0 +1,80 @@ +import { useState } from "react"; +import cls from "./index.module.css"; +import Chart2 from "../../../Common/TimeFireDir"; +import VideoContainer from "./VideoContainer"; + +function KilnCenter() { + const [floor, setFloor] = useState(0); + + function onFloorUpdate(flr) { + 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..44a6ff4 --- /dev/null +++ b/src/components/Modules/KilnOptimize/Center/videoComponents/EnterToFloor1.jsx @@ -0,0 +1,88 @@ +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"; + +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); + }, 5000); + } + 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..f95b2d9 --- /dev/null +++ b/src/components/Modules/KilnOptimize/Center/videoComponents/Floor1To2.jsx @@ -0,0 +1,95 @@ +import { motion, AnimatePresence } from "framer-motion"; +import { useRef, useEffect, useMemo, useState } from "react"; +import FeederStatus from "../../../../Common/Feeder"; +import TemperatureTop from "../../../../../components/Common/TemperatureTop"; +import TemperatureBottom from "../../../../Common/TemperatureBottom"; +import { useSelector, useDispatch } from "react-redux"; +import BotttomColorBlock from "./../../components/BotttomColorBlock"; + +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; + + useEffect(() => { + if (show) { + vd.current.play(); + setTimeout(() => { + // console.log("开启1-2的火播放"); + setFireCanPlay(true); + }, 3000); + } + if (!show) setFireCanPlay(false); + return () => { + // console.log("关闭1-2的火播放"); + setFireCanPlay(false); + }; + }, [show]); + + return ( + + {show && ( + + + + + + {fireCanPlay && fireDir == "东火" && ( + + )} + {fireCanPlay && fireDir == "西火" && ( + // {fireCanPlay && ( + + )} + + + + + )} + + ); +} + +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..873b49a --- /dev/null +++ b/src/components/Modules/KilnOptimize/Center/videoComponents/Floor2To1.jsx @@ -0,0 +1,94 @@ +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); + }, 3000); + } + 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..00bd2d6 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/index.jsx @@ -0,0 +1,122 @@ + +import cls from './index.module.css'; +import { useSelector } from "react-redux"; +import React from 'react'; +import { ReactComponent as B1 } from './pic/b1.svg' +import { ReactComponent as B2 } from './pic/b2.svg' +import { ReactComponent as B3 } from './pic/b3.svg' +import { ReactComponent as B4 } from './pic/b4.svg' +import { ReactComponent as B5 } from './pic/b5.svg' +import { ReactComponent as B6 } from './pic/b6.svg' +import { ReactComponent as B7 } from './pic/b7.svg' +import { ReactComponent as B8 } from './pic/b8.svg' +import { ReactComponent as T1 } from './pic/t1.svg' +import { ReactComponent as T2 } from './pic/t2.svg' +import { ReactComponent as T3 } from './pic/t3.svg' +import { ReactComponent as T4 } from './pic/t4.svg' +import { ReactComponent as T5 } from './pic/t5.svg' +import { ReactComponent as T6 } from './pic/t6.svg' +import { ReactComponent as T7 } from './pic/t7.svg' +import { ReactComponent as T8 } from './pic/t8.svg' + +const BotttomColorBlock = ({ condition }) => { + const tempBottom = useSelector((state) => state.temperature.bottom); + function returnColor(n) { + let num = Number(tempBottom[n].slice(0,tempBottom[n].length - 1)) + if (num <= 200) { + return 'rgba(42, 229, 93, 0.7)'; + } else if (num >200 && num <=400) { + return 'rgba(133, 203, 50, 0.7)'; + } else if (num >400 && num <=600) { + return 'rgba(255, 182, 3, 0.7)'; + } else if (num >600 && num <=800) { + return 'rgba(255, 135, 16, 0.7)'; + } else if (num >800 && num <=1000) { + return 'rgba(249, 89, 7, 0.7)'; + } else if (num >1000 && num <=1200) { + return 'rgba(255, 40, 40, 0.7)'; + } else if (num >1200 && num <=1400) { + return 'rgba(255, 38, 112, 0.7)'; + } else if (num >1400 && num <=1600) { + return 'rgba(163, 23, 187, 0.7)'; + } else if (num >1600 && num <=1800) { + return 'rgba(119, 14, 234, 0.7)'; + } else if (num >1800) { + return 'rgba(77, 11, 255, 0.7)'; + } + } + function returnColor2(n) { + let num = Number(tempBottom[n].slice(0,tempBottom[n].length - 1)) + if (num <= 200) { + return 'rgba(42, 229, 93, 0.9)'; + } else if (num >200 && num <=400) { + return 'rgba(133, 203, 50, 0.9)'; + } else if (num >400 && num <=600) { + return 'rgba(255, 182, 3, 0.9)'; + } else if (num >600 && num <=800) { + return 'rgba(255, 135, 16, 0.9)'; + } else if (num >800 && num <=1000) { + return 'rgba(249, 89, 7, 0.9)'; + } else if (num >1000 && num <=1200) { + return 'rgba(255, 40, 40, 0.9)'; + } else if (num >1200 && num <=1400) { + return 'rgba(255, 38, 112, 0.9)'; + } else if (num >1400 && num <=1600) { + return 'rgba(163, 23, 187, 0.9)'; + } else if (num >1600 && num <=1800) { + return 'rgba(119, 14, 234, 0.9)'; + } else if (num >1800) { + return 'rgba(77, 11, 255, 0.9)'; + } + } + // 窑炉内部svg变色 + function BigSvg() { + return ( + + + + + + + + + + + + + + + + + + + + + + ) + } + + return ( +
+ + + + + + + + + + + + + + + + + +
+ ); +}; + +export default BotttomColorBlock; \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/BotttomColorBlock/index.module.css b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/index.module.css new file mode 100644 index 0000000..e18470e --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/BotttomColorBlock/index.module.css @@ -0,0 +1,3 @@ +.cls-2 { + fill: red; +} \ No newline at end of file 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..fa8fac7 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/CommonChart/chart.config.js @@ -0,0 +1,99 @@ +import * as echarts from "echarts"; + +export default function getOptions(seriesData,pieces) { + return { + grid: { top: 38, right: 12, 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: "单位m³/h", + 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", + }, + }, + }, + visualMap: { + show: false, + dimension: 1, + pieces: pieces + }, + series: [ + { + name: 'Electricity', + 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:'start', + 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..b2f74ca --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/CommonChart/index.jsx @@ -0,0 +1,73 @@ +import cls from "./index.module.css"; +import ReactECharts from "echarts-for-react"; +import getOptions from "./chart.config"; +import * as echarts from "echarts"; +import { useSelector, useDispatch } from "react-redux"; + +function CommonChart(props) { + const { dataSource } = props; + + const data = dataSource.data + + 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 + } + ]) + }, + } + 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' + } + ] + + return ( +
+ {data && } + {!data && ( +

+ 暂无数据 +

+ )} +
+ ); +} + +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..b34e02c --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/KilnBottom/index.jsx @@ -0,0 +1,36 @@ +// 窑炉压力 +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', + areaColor0:'rgba(20, 108, 255, 0.4)', + areaColor1:'rgba(20, 108, 255, 0)', + msg: kilnOptimize.bottomTempAvg, + data: kilnOptimize.bottomTempAvg ? kilnOptimize.bottomTempAvg.bottomTempAvgFor7Day : null + } + 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..2fd739e --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/KilnPress/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 KilnPress(props) { + const kilnOptimize = useSelector((state) => state.kilnOptimize); + console.log(kilnOptimize) + console.log('+++++++++++++==================') + const dataSource = { + color:'#12FFF5', + areaColor0:'rgba(18, 255, 245, 0.4)', + areaColor1:'rgba(18, 255, 245, 0)', + msg:kilnOptimize.pressureAvg, + data: kilnOptimize.pressureAvg ? kilnOptimize.pressureAvg.pressureAvgFor7Day : null + } + return ( + + {/* legend */} +
+ + 标准值外 + + + 标准值内 + +
+
+ +
+ + ) +} +export default KilnPress; \ No newline at end of file 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..6e32a6e --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/KilnTop/index.jsx @@ -0,0 +1,36 @@ +// 窑炉压力 +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', + areaColor0:'rgba(18, 255, 245, 0.4)', + areaColor1:'rgba(18, 255, 245, 0)', + msg:kilnOptimize.topTempAvg, + data:kilnOptimize.topTempAvg ? kilnOptimize.topTempAvg.topTempAvgFor7Day : null + } + 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/LiquidTrend/index.jsx b/src/components/Modules/KilnOptimize/components/LiquidTrend/index.jsx new file mode 100644 index 0000000..9e834b7 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/LiquidTrend/index.jsx @@ -0,0 +1,36 @@ +// 窑炉压力 +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', + areaColor0:'rgba(20, 108, 255, 0.4)', + areaColor1:'rgba(20, 108, 255, 0)', + msg:kilnOptimize.liquidAvg, + data:kilnOptimize.liquidAvg ? kilnOptimize.liquidAvg.liquidAvgFor7Day : null + } + 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..e169184 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlock/index.jsx @@ -0,0 +1,122 @@ + +import cls from './index.module.css'; +import { useSelector } from "react-redux"; +import React from 'react'; +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 tempBottom = useSelector((state) => state.temperature.bottom); + function returnColor(n) { + let num = Number(tempBottom[n].slice(0,tempBottom[n].length - 1)) + if (num <= 200) { + return 'rgba(42, 229, 93, 0.7)'; + } else if (num >200 && num <=400) { + return 'rgba(133, 203, 50, 0.7)'; + } else if (num >400 && num <=600) { + return 'rgba(255, 182, 3, 0.7)'; + } else if (num >600 && num <=800) { + return 'rgba(255, 135, 16, 0.7)'; + } else if (num >800 && num <=1000) { + return 'rgba(249, 89, 7, 0.7)'; + } else if (num >1000 && num <=1200) { + return 'rgba(255, 40, 40, 0.7)'; + } else if (num >1200 && num <=1400) { + return 'rgba(255, 38, 112, 0.7)'; + } else if (num >1400 && num <=1600) { + return 'rgba(163, 23, 187, 0.7)'; + } else if (num >1600 && num <=1800) { + return 'rgba(119, 14, 234, 0.7)'; + } else if (num >1800) { + return 'rgba(77, 11, 255, 0.7)'; + } + } + function returnColor2(n) { + let num = Number(tempBottom[n].slice(0,tempBottom[n].length - 1)) + if (num <= 200) { + return 'rgba(42, 229, 93, 0.9)'; + } else if (num >200 && num <=400) { + return 'rgba(133, 203, 50, 0.9)'; + } else if (num >400 && num <=600) { + return 'rgba(255, 182, 3, 0.9)'; + } else if (num >600 && num <=800) { + return 'rgba(255, 135, 16, 0.9)'; + } else if (num >800 && num <=1000) { + return 'rgba(249, 89, 7, 0.9)'; + } else if (num >1000 && num <=1200) { + return 'rgba(255, 40, 40, 0.9)'; + } else if (num >1200 && num <=1400) { + return 'rgba(255, 38, 112, 0.9)'; + } else if (num >1400 && num <=1600) { + return 'rgba(163, 23, 187, 0.9)'; + } else if (num >1600 && num <=1800) { + return 'rgba(119, 14, 234, 0.9)'; + } else if (num >1800) { + return 'rgba(77, 11, 255, 0.9)'; + } + } + // 窑炉内部svg变色 + function BigSvg() { + return ( + + + + + + + + + + + + + + + + + + + + + + ) + } + + return ( +
+ + + + + + + + + + + + + + + + + +
+ ); +}; + +export default TopColorBlock; \ No newline at end of file diff --git a/src/components/Modules/KilnOptimize/components/TopColorBlock/index.module.css b/src/components/Modules/KilnOptimize/components/TopColorBlock/index.module.css new file mode 100644 index 0000000..e18470e --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/TopColorBlock/index.module.css @@ -0,0 +1,3 @@ +.cls-2 { + fill: red; +} \ No newline at end of file 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..a024506 --- /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..ba3d919 --- /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..00f41a9 --- /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..466f3d8 --- /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..38f9387 --- /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..36972f8 --- /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..bcb7a0b --- /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..61b749b --- /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..eed04f8 --- /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..2fa9801 --- /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..99d99fc --- /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..22160fd --- /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..d8b45ee --- /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..e63fec3 --- /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..b7523dd --- /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..d07fb95 --- /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/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); }