zjl #1
@ -10,7 +10,7 @@ import RulerContainer from "./components/Tools/Ruler";
|
|||||||
import { Switch } from "antd";
|
import { Switch } from "antd";
|
||||||
import { createPortal } from "react-dom";
|
import { createPortal } from "react-dom";
|
||||||
|
|
||||||
const Menus = ["窑炉总览", "窑炉内部", "退火监测", "质检统计", "能耗分析"];
|
const Menus = ["窑炉总览", "窑炉内部", "窑炉优化","退火监测", "质检统计", "能耗分析"];
|
||||||
const LUNBO_INTERVAL = 60 * 1000;
|
const LUNBO_INTERVAL = 60 * 1000;
|
||||||
function App() {
|
function App() {
|
||||||
const { styles, value, setValue } = useSlider(100);
|
const { styles, value, setValue } = useSlider(100);
|
||||||
|
|||||||
BIN
src/assets/Icon/kilnBottom.png
Normal file
BIN
src/assets/Icon/kilnBottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/assets/Icon/kilnPress.png
Normal file
BIN
src/assets/Icon/kilnPress.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/assets/Icon/kilnTop.png
Normal file
BIN
src/assets/Icon/kilnTop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
src/assets/Icon/liquidTrend.png
Normal file
BIN
src/assets/Icon/liquidTrend.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/assets/tempIntr.png
Normal file
BIN
src/assets/tempIntr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
@ -5,8 +5,9 @@ export default function CenterMenu({ active, onChangeActive }) {
|
|||||||
const menuList = [
|
const menuList = [
|
||||||
["窑炉总览", "/kilnSummary"],
|
["窑炉总览", "/kilnSummary"],
|
||||||
["窑炉内部", "/kilnInner"],
|
["窑炉内部", "/kilnInner"],
|
||||||
|
["窑炉优化", "/kilnOptimize"],
|
||||||
["退火监测", "/stopFire"],
|
["退火监测", "/stopFire"],
|
||||||
["质检统计", "/quailtyCheck"],
|
["质检统计", "/quailtyCheck"],
|
||||||
["能耗分析", "/energyCost"],
|
["能耗分析", "/energyCost"],
|
||||||
];
|
];
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
top: 120px;
|
top: 120px;
|
||||||
// left: 1340px;
|
// left: 1340px;
|
||||||
left: 1460px;
|
left: 1338px;
|
||||||
color: white;
|
color: white;
|
||||||
z-index: 10000;
|
z-index: 10000;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -13,6 +13,8 @@ const blueTe = [
|
|||||||
|
|
||||||
function TemperatureBottom(props) {
|
function TemperatureBottom(props) {
|
||||||
const tempBottom = useSelector((state) => state.temperature.bottom);
|
const tempBottom = useSelector((state) => state.temperature.bottom);
|
||||||
|
console.log(tempBottom)
|
||||||
|
console.log('==================+++++++++++++')
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<motion.div
|
<motion.div
|
||||||
|
|||||||
104
src/components/Modules/KilnOptimize/Center/VideoContainer.jsx
Normal file
104
src/components/Modules/KilnOptimize/Center/VideoContainer.jsx
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
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 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 (
|
||||||
|
<AnimatePresence>
|
||||||
|
<EnterVideo
|
||||||
|
key="enter"
|
||||||
|
onVideoEnd={handleEnterVideoEnd}
|
||||||
|
opacity={opacity.enterVideo}
|
||||||
|
/>
|
||||||
|
<EnterToFloorOne key="enter-to-1" opacity={opacity.enterToFloorOne} />
|
||||||
|
<EnterToFloorTwo key="enter-to-2" opacity={opacity.enterToFloorTwo} />
|
||||||
|
<FloorOneToTwo key="1-to-2" opacity={opacity.floorOneToTwo} />
|
||||||
|
<FloorTwoToOne key="2-to-1" opacity={opacity.floorTwoToOne} />
|
||||||
|
</AnimatePresence>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default VideoContainer;
|
||||||
80
src/components/Modules/KilnOptimize/Center/index.jsx
Normal file
80
src/components/Modules/KilnOptimize/Center/index.jsx
Normal file
@ -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 (
|
||||||
|
<div
|
||||||
|
className="bgKilnInner"
|
||||||
|
style={{
|
||||||
|
width: "100%",
|
||||||
|
position: "absolute",
|
||||||
|
top: "12%",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* 时间火向数据 */}
|
||||||
|
<div
|
||||||
|
className="fireAndTime"
|
||||||
|
style={{ position: "absolute", top: "-112px", height: "212px" }}
|
||||||
|
>
|
||||||
|
<Chart2 />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
{/* menu */}
|
||||||
|
<div
|
||||||
|
className="subMenu"
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
marginBottom: "24px",
|
||||||
|
justifyContent: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={
|
||||||
|
"flr flr1 " + cls.menuItem + " " + (floor == 1 ? cls.active : "")
|
||||||
|
}
|
||||||
|
onClick={() => onFloorUpdate(1)}
|
||||||
|
>
|
||||||
|
碹顶温度
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={
|
||||||
|
"flr flr2 " + cls.menuItem + " " + (floor == 2 ? cls.active : "")
|
||||||
|
}
|
||||||
|
onClick={() => onFloorUpdate(2)}
|
||||||
|
>
|
||||||
|
池底温度
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={
|
||||||
|
"flr flr2 " + cls.menuItem + " " + (floor == 3 ? cls.active : "")
|
||||||
|
}
|
||||||
|
onClick={() => onFloorUpdate(3)}
|
||||||
|
>
|
||||||
|
溶液速度
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 颜色指示图 */}
|
||||||
|
<div style={{ position: "absolute", top: "30px", right:"450px" ,width: "300px", height:"41px" }}>
|
||||||
|
<img src={require("../../../../assets/tempIntr.png")} alt="" style={{width:"300px",height:"41px"}}/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* video */}
|
||||||
|
<VideoContainer onFloorUpdate={onFloorUpdate} floor={floor} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default KilnCenter;
|
||||||
46
src/components/Modules/KilnOptimize/Center/index.module.css
Normal file
46
src/components/Modules/KilnOptimize/Center/index.module.css
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
.menuItem {
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
padding: 10px 50px;
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 48px;
|
||||||
|
letter-spacing: 6px;
|
||||||
|
background: url(../../../../assets/bg_center_menu.png) no-repeat;
|
||||||
|
background-size: 100% 50%;
|
||||||
|
background-position: bottom;
|
||||||
|
color: #00fff788;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
|
||||||
|
'PingFang SC', 'Microsoft YaHei', '微软雅黑', 'Microsoft YaHei UI',
|
||||||
|
'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menuItem.active,
|
||||||
|
.menuItem:hover {
|
||||||
|
color: #00fff7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menuItem:not(:first-child) {
|
||||||
|
margin-left: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.videoLayer2 {
|
||||||
|
width: 2440px;
|
||||||
|
height: 720px;
|
||||||
|
background: url(../../../../assets/video-layer-2.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-position: 0 0;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.videoLayer1 {
|
||||||
|
width: 2440px;
|
||||||
|
height: 720px;
|
||||||
|
background: url(../../../../assets/floor1-status.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-position: 0 0;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
@ -0,0 +1,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 (
|
||||||
|
<AnimatePresence>
|
||||||
|
{show && (
|
||||||
|
<motion.div
|
||||||
|
className="video-wrapper"
|
||||||
|
style={{
|
||||||
|
position: "fixed",
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
width: "100%",
|
||||||
|
height: "100%",
|
||||||
|
zIndex: -999,
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }}
|
||||||
|
>
|
||||||
|
<video ref={vd} muted width={"100%"}>
|
||||||
|
<source src="/video/floor1.webm" type="video/mp4" />
|
||||||
|
</video>
|
||||||
|
|
||||||
|
{/* {fireCanPlay && fireDir == "东火" && (
|
||||||
|
<video
|
||||||
|
src="/video/fire_top.webm"
|
||||||
|
muted
|
||||||
|
autoPlay
|
||||||
|
loop
|
||||||
|
width={3900}
|
||||||
|
style={{ position: "absolute", top: "-20px", left: "-20px" }}
|
||||||
|
></video>
|
||||||
|
)}
|
||||||
|
{fireCanPlay && fireDir == "西火" && (
|
||||||
|
<video
|
||||||
|
src="/video/fire_down.webm"
|
||||||
|
muted
|
||||||
|
autoPlay
|
||||||
|
loop
|
||||||
|
width={3900}
|
||||||
|
style={{ position: "absolute", top: "-20px", left: "-20px" }}
|
||||||
|
></video>
|
||||||
|
)} */}
|
||||||
|
|
||||||
|
<TemperatureTop
|
||||||
|
style={{
|
||||||
|
top: "218px",
|
||||||
|
left: "678px",
|
||||||
|
width: "2380px",
|
||||||
|
zIndex: 0,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<FeederStatus />
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default EnterToFloorOne;
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { useRef, useEffect } from 'react';
|
||||||
|
|
||||||
|
function EnterToFloorTwo(props) {
|
||||||
|
const vd = useRef(null);
|
||||||
|
const opacity = props.opacity || 0;
|
||||||
|
|
||||||
|
if (opacity == 1) {
|
||||||
|
setTimeout(() => {
|
||||||
|
vd.current.play();
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
vd.current.addEventListener('ended', () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
vd.current.currentTime = 0;
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className="video-wrapper"
|
||||||
|
style={{
|
||||||
|
position: 'fixed',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
zIndex: -1000,
|
||||||
|
opacity: opacity,
|
||||||
|
zIndex: -999,
|
||||||
|
}}
|
||||||
|
transition={{ type: 'tween', duration: 1 }}
|
||||||
|
>
|
||||||
|
<video ref={vd} muted width={'100%'}>
|
||||||
|
<source src="/video/floor2.webm" type="video/mp4" />
|
||||||
|
</video>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default EnterToFloorTwo;
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
import { motion, AnimatePresence } from 'framer-motion';
|
||||||
|
import { useEffect, useRef, useMemo } from 'react';
|
||||||
|
|
||||||
|
function EnterVideo(props) {
|
||||||
|
const show = props.opacity || 0;
|
||||||
|
const vd = useRef(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
vd.current.addEventListener('ended', props.onVideoEnd);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AnimatePresence>
|
||||||
|
{show && (
|
||||||
|
<motion.div
|
||||||
|
className="video-wrapper"
|
||||||
|
style={{
|
||||||
|
position: 'fixed',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
zIndex: -1000,
|
||||||
|
}}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }}
|
||||||
|
>
|
||||||
|
<video ref={vd} muted autoPlay={true} width={'100%'}>
|
||||||
|
<source src="/video/enter.webm" type="video/mp4" />
|
||||||
|
</video>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default EnterVideo;
|
||||||
@ -0,0 +1,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 (
|
||||||
|
<AnimatePresence>
|
||||||
|
{show && (
|
||||||
|
<motion.div
|
||||||
|
className="video-wrapper"
|
||||||
|
style={{
|
||||||
|
position: "fixed",
|
||||||
|
top: "0px",
|
||||||
|
left: "0px",
|
||||||
|
width: "calc(100% - 50px)",
|
||||||
|
height: "calc(100% - 7px)",
|
||||||
|
zIndex: -998,
|
||||||
|
overflow: "clip",
|
||||||
|
}}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0, transition: { duration: 0, delay: 0.1 } }}
|
||||||
|
>
|
||||||
|
<video ref={vd} muted>
|
||||||
|
<source src="/video/1to2.webm" type="video/mp4" />
|
||||||
|
</video>
|
||||||
|
|
||||||
|
<BotttomColorBlock />
|
||||||
|
|
||||||
|
{fireCanPlay && fireDir == "东火" && (
|
||||||
|
<video
|
||||||
|
src="/video/fire_top.webm"
|
||||||
|
muted
|
||||||
|
autoPlay
|
||||||
|
loop
|
||||||
|
width={3700}
|
||||||
|
style={{ position: "absolute", top: "18px", left: "72px" }}
|
||||||
|
></video>
|
||||||
|
)}
|
||||||
|
{fireCanPlay && fireDir == "西火" && (
|
||||||
|
// {fireCanPlay && (
|
||||||
|
<video
|
||||||
|
src="/video/fire_down.webm"
|
||||||
|
muted
|
||||||
|
autoPlay
|
||||||
|
loop
|
||||||
|
width={3780}
|
||||||
|
style={{ position: "absolute", top: "-24px", left: "12px" }}
|
||||||
|
></video>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<TemperatureBottom
|
||||||
|
style={{
|
||||||
|
top: "208px",
|
||||||
|
// left: "638px",
|
||||||
|
left: "690px",
|
||||||
|
width: "2380px",
|
||||||
|
zIndex: 0,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<FeederStatus />
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FloorOneToTwo;
|
||||||
@ -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 (
|
||||||
|
<AnimatePresence>
|
||||||
|
{show && (
|
||||||
|
<motion.div
|
||||||
|
className="video-wrapper"
|
||||||
|
style={{
|
||||||
|
position: "fixed",
|
||||||
|
top: "0px",
|
||||||
|
left: "0px",
|
||||||
|
width: "calc(100% - 50px)",
|
||||||
|
height: "calc(100% - 7px)",
|
||||||
|
zIndex: -998,
|
||||||
|
overflow: "clip",
|
||||||
|
}}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0, transition: { duration: 0.2, delay: 0.2 } }}
|
||||||
|
>
|
||||||
|
<video ref={vd} muted>
|
||||||
|
<source src="/video/2to1.webm" type="video/mp4" />
|
||||||
|
</video>
|
||||||
|
|
||||||
|
{fireCanPlay && fireDir == "东火" && (
|
||||||
|
// {fireCanPlay && (
|
||||||
|
<video
|
||||||
|
src="/video/fire_top.webm"
|
||||||
|
muted
|
||||||
|
autoPlay
|
||||||
|
loop
|
||||||
|
width={3800}
|
||||||
|
style={{ position: "absolute", top: "10px", left: "0px" }}
|
||||||
|
></video>
|
||||||
|
)}
|
||||||
|
{fireCanPlay && fireDir == "西火" && (
|
||||||
|
// {fireCanPlay && (
|
||||||
|
<video
|
||||||
|
src="/video/fire_down.webm"
|
||||||
|
muted
|
||||||
|
autoPlay
|
||||||
|
loop
|
||||||
|
width={3800}
|
||||||
|
style={{ position: "absolute", top: "-12px", left: "-10px" }}
|
||||||
|
></video>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<TopColorBlock />
|
||||||
|
|
||||||
|
<TemperatureTop
|
||||||
|
style={{
|
||||||
|
top: "200px",
|
||||||
|
left: "652px",
|
||||||
|
width: "2380px",
|
||||||
|
zIndex: 0,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<FeederStatus style={{ left: "680px" }} />
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FloorTwoToOne;
|
||||||
22
src/components/Modules/KilnOptimize/LeftSide/index.jsx
Normal file
22
src/components/Modules/KilnOptimize/LeftSide/index.jsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import KilnPress from './../components/KilnPress';
|
||||||
|
import LiquidTrend from './../components/LiquidTrend';
|
||||||
|
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
|
||||||
|
import cls from './index.module.scss';
|
||||||
|
|
||||||
|
export default function index() {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className={cls.leftBar}
|
||||||
|
initial={{ opacity: 0, position: 'absolute' }}
|
||||||
|
animate={{ opacity: 1, position: 'relative' }}
|
||||||
|
exit={{ opacity: 0, position: 'relative' }}
|
||||||
|
transition={{ type: 'tween' }}
|
||||||
|
>
|
||||||
|
<KilnPress style={{ flex: 1, width: '100%', marginTop: '24px' }} />
|
||||||
|
<LiquidTrend style={{ flex: 1, width: '100%', marginTop: '24px' }} />
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
.leftBar {
|
||||||
|
width: 625px;
|
||||||
|
height: 966px;
|
||||||
|
// margin-left: 40px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
22
src/components/Modules/KilnOptimize/RightSide/index.jsx
Normal file
22
src/components/Modules/KilnOptimize/RightSide/index.jsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import KilnTop from './../components/KilnTop';
|
||||||
|
import KilnBottom from './../components/KilnBottom';
|
||||||
|
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
|
||||||
|
import cls from './index.module.scss';
|
||||||
|
|
||||||
|
export default function index() {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className={cls.leftBar}
|
||||||
|
initial={{ opacity: 0, position: 'absolute' }}
|
||||||
|
animate={{ opacity: 1, position: 'relative' }}
|
||||||
|
exit={{ opacity: 0, position: 'relative' }}
|
||||||
|
transition={{ type: 'tween' }}
|
||||||
|
>
|
||||||
|
<KilnTop style={{ flex: 1, width: '100%', marginTop: '24px' }} />
|
||||||
|
<KilnBottom style={{ flex: 1, width: '100%', marginTop: '24px' }} />
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
.leftBar {
|
||||||
|
width: 625px;
|
||||||
|
height: 966px;
|
||||||
|
// margin-left: 40px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
@ -0,0 +1,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 (
|
||||||
|
<svg width="2050px" height="700px" style={{position: "absolute", top: "320px", left: "1100px", zIndex:0}}>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="Gradient" x1="0" x2="1" y1="0" y2="0">
|
||||||
|
<stop offset="0%" stop-color={returnColor2('TE302')} />
|
||||||
|
<stop offset="7%" stop-color={returnColor2('TE304')} />
|
||||||
|
<stop offset="14%" stop-color={returnColor2('TE306')} />
|
||||||
|
<stop offset="21%" stop-color={returnColor2('TE308')} />
|
||||||
|
<stop offset="28%" stop-color={returnColor2('TE309')} />
|
||||||
|
<stop offset="35%" stop-color={returnColor2('TE310')} />
|
||||||
|
<stop offset="42%" stop-color={returnColor2('TE312')} />
|
||||||
|
<stop offset="49%" stop-color={returnColor2('TE314')} />
|
||||||
|
<stop offset="56%" stop-color={returnColor2('TE315')} />
|
||||||
|
<stop offset="63%" stop-color={returnColor2('TE316')} />
|
||||||
|
<stop offset="70%" stop-color={returnColor2('TE318')} />
|
||||||
|
<stop offset="77%" stop-color={returnColor2('TE321')} />
|
||||||
|
<stop offset="84%" stop-color={returnColor2('TE331')} />
|
||||||
|
<stop offset="91%" stop-color={returnColor2('TE332')} />
|
||||||
|
<stop offset="100%" stop-color={returnColor2('TE332')} />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<polygon points="65 251,1515 251,1524 311,1640 311,1645 290,1609 90,1650 90,1650 95,1758 95,1760 107,1665 106,1658 130,1669 190,1865 190,1867 200,1685 200,1678 223,1693 313,1990 315,1992 325,1710 325,1703 347,1717 430,1910 430,1915 446,1731 445,1725 470,1738 544,1856 544,1860 562,1755 562,1752 572,1700 572,1655 340,1543 340,1534 360,1540 395,1080 397,1080 390,1024 390,1022 398,962 398,962 390,908 390,908 398,840 398,840 390,786 390,786 398,720 398,720 390,665 390,665 398,598 398,598 390,542 390,542 398,476 398,476 390,420 390,420 398,354 398,354 391,296 391,296 400,228 400,228 392,48 392" fill="url(#Gradient)" />
|
||||||
|
</svg>)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<BigSvg />
|
||||||
|
<B1 style={{fill:returnColor('TE334'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "5px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<B2 style={{fill:returnColor('TE336'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "9px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<B3 style={{fill:returnColor('TE338'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "10px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<B4 style={{fill:returnColor('TE340'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "12px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<B5 style={{fill:returnColor('TE342'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "14px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<B6 style={{fill:returnColor('TE344'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "16px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<B7 style={{fill:returnColor('TE346'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "18px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<B8 style={{fill:returnColor('TE348'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "21px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<T1 style={{fill:returnColor('TE333'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "5px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<T2 style={{fill:returnColor('TE335'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "9px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<T3 style={{fill:returnColor('TE337'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "10px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<T4 style={{fill:returnColor('TE339'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "12px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<T5 style={{fill:returnColor('TE341'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "13px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<T6 style={{fill:returnColor('TE343'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "16px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<T7 style={{fill:returnColor('TE345'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "18px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<T8 style={{fill:returnColor('TE347'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "20px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BotttomColorBlock;
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
.cls-2 {
|
||||||
|
fill: red;
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path class="cls-2" d="M374,684.78c.67-3.25-.17-7.48,1.32-9.68,4.12-6.1,3.08-12.76,3.87-19.21,1.14-9.35,2-18.74,2.83-28.13.46-4.94.68-9.91,1.1-14.86.21-2.35,1.08-4,4-4,8,0,15.88-1.32,23.88-.92,10.47.52,20.87-1.41,31.37-1.09,3.77.12,4.88,1.19,4.72,4.88-.53,12.25-1.55,24.44-2.87,36.62-.32,3,0,6-.28,9-.24,2.31.05,5.21-3.43,5.73-.94.14-1.28.88-1.46,1.77-1.14,5.74-1.63,11.45-.05,17.23.63,2.29,1.68,3,3.93,2.46,5.1-1.14,10.29-.2,15.42-.55,2.83-.19,3.92,1,3.72,3.77-.44,6.11-.48,12.27-1.17,18.35-1.4,12.35-1.89,24.76-2.9,37.13-1.16,14.2-2.68,28.36-3.07,42.61-.11,4.35-1.77,6.43-7,6.29-17.64-.48-35.3-.23-52.94-.25-6.26-1.06-12.57-.31-18.85-.43-9.37-.19-12.74-3.23-12.56-12.59.27-14,2.08-27.79,4-41.61.36-2.63,1.12-5.23.95-7.9-.82-12.7,1.41-25.14,3.1-37.63C371.93,689.25,372.3,686.78,374,684.78Z" transform="translate(277 -158)"/><path class="cls-3" d="M374,684.78c-1,7.35-1.83,14.72-3,22-.48,3-1.14,5.84-.95,8.85,1,15-2.57,29.58-3.76,44.38-.61,7.58-1.82,15.14-1.25,22.8.33,4.37,4.69,7.93,10.3,8.07,5,.12,10,0,15,.05,1.6,0,3.37-.57,4.7.93-14.8,0-29.6,0-44.39.19-3.37,0-4.36-.41-3.87-4.41,1.81-15.11,2.94-30.29,4.34-45.45,1.68-18.12,3.4-36.23,5-54.36.21-2.45,1.31-3.05,3.49-3C364.37,684.9,369.19,684.81,374,684.78Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:#fefefe;}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M480.88,792.94c-3.83,0-7.66,0-11.49,0-2,0-3.19-.13-3-3,1.07-14.33,1.48-28.72,2.72-43,1.11-12.89,2.22-25.76,2.95-38.68.46-8.24,1.27-16.46,2-24.69.14-1.59.47-2,2.68-1.87a181.45,181.45,0,0,0,20.32-.36c1.22-.06,2.78-.14,3.16-2.66.67-4.4,1.28-8.55-.11-12.95-2.19-6.89.21-13.88.14-20.84-.06-6.66,1.64-13.34,1.64-20,0-6,1.56-11.78,1.16-17.74-.14-2,.76-3.13,2.89-3.14,8.5-.05,17-.08,25.49-.22,7.34-.12,14.71-.85,22-.41,4.39.27,8.82.39,13.14.24,3.78-.13,3.73,1.65,3.4,4-1.36,9.61-1.61,19.29-2,29-.3,7.76-.25,15.65-1.79,23.18-1.08,5.35-2.77,10.4-2.64,16.06.08,3.8.43,5.56,4.65,5.27s8.33.06,12.49-.11c2.45-.1,3.59.4,3.38,3.21-1.2,16.07-1.4,32.2-2.92,48.27-.92,9.67-.31,19.48-1.26,29.15-.93,9.47-.5,19-1.35,28.42-.16,1.75-1.07,1.94-2.43,2-9.27.23-18.54.51-27.81.72-6,.14-11.95.24-17.93.26Q505.64,793,480.88,792.94Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M688.32,678.37c6.48-1.08,13,.16,19.42-.34,1.14-.09,1.78.47,1.69,2.11-.34,5.79.05,11.64-.48,17.4-1.39,15-.26,30.1-1.71,45.12-.76,7.79-.07,15.7-.25,23.55s-.81,15.51-.89,23.26c0,3.15-1.9,2.46-3.58,2.46-16.33,0-32.66,0-49,0q-28.53,0-57,.16c-7.62,0-7.43.11-6.55-7.79.62-5.55.56-11.18.83-16.75.42-8.63,1-17.28,1.34-25.92.64-16.17,1.82-32.32,2.47-48.5.12-2.84.93-5.77.35-8.49-1.27-6,2.93-7,6.56-6.37,6.94,1.15,13.84-.2,20.71.67,1.72.22,1.85-.78,1.85-2.09a47.69,47.69,0,0,1,.65-10.39c.2-.92-.46-2.91-.91-3-5.09-.61-2.73-4.41-2.65-6.68.55-15.06.41-30.18,2.86-45.13a7.54,7.54,0,0,0-.17-1.47c-.37-9.21-.37-9.07,8.66-9.27,18.49-.4,37,.7,55.49-.37,2-.11,3.2.49,3.09,2.94-.71,16.32-.84,32.66-1.89,49C688.61,661,687,669.58,688.32,678.37Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M811.77,680c5.44,0,11,.23,16.42-.09,3.78-.22,5,.73,4.93,4.77-.21,26.57-.11,53.14-.11,79.71,0,7.49-.09,15,0,22.48.06,3-.88,4.18-4,4.15-12.62-.12-25.25-.17-37.87,0-8.65.11-17.3.82-26,.91-14.36.16-28.73-.25-43.08.21-5,.16-6-2.93-5.63-5.86.84-6,0-11.89.51-17.79,1.4-16,.48-32.14,1.79-48.2.83-10.23.17-20.57.19-30.86,0-9.47,0-9.24,9.15-8.88,5.28.22,10.57-.91,15.92-.23,2.79.35,4.43-.89,4-4.26-.37-2.95,0-6-.11-9-.08-1.69,1.13-4.1-2.33-4.33-1-.06-.61-2.05-.62-3.18-.2-17.65,1.65-35.27,1-52.93-.13-3.43,1.83-3.66,4.46-3.64,10.66.07,21.34.3,32-.06,8.42-.29,16.85.86,25.28-.69,1.7-.31,4.53.29,4.41,4.08-.6,18.58.32,37.18-.51,55.78C811.35,667.88,811.57,673.78,811.77,680Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M843,740.81q0-22.23,0-44.47c0-10.87,2.11-12.72,13.14-11.72,4.78.43,9.55-1,14.37,0,.89.2,1.52-1.36,1.51-2.65-.06-6.15,1.89-13.19-.44-18.28-4.35-9.47-.72-18.86-2.11-28.22a72.45,72.45,0,0,1,.19-21.69c.18-1.1.56-2.48.1-3.33-1.74-3.2.15-3.45,2.52-3.49,1,0,2,0,3,0,18.19-.06,36.39-.09,54.58-.22,2.19,0,3.08.42,3.2,2.89.7,13.84,1.45,27.68.85,41.51-.44,10.23,1.61,20.32,1.05,30.51-.13,2.24,1,2.33,2.69,2.31,4.33-.07,8.67.09,13-.07,2.46-.1,3.57.4,3.41,3.21a193,193,0,0,0,.27,28.67c1.52,16.25-.37,32.49,1.33,48.72a137.51,137.51,0,0,1,.37,20c-.17,4.23-1,6.62-6.36,6.55-25.32-.34-50.66-.3-76-.07-9,.08-18.1-.43-27.16.48-2.16.22-3.7-1-3.64-4.22C843.17,771.8,843,756.3,843,740.81Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M966,771.59c0-8.14-.48-16.25-.82-24.38-.6-13.94.17-27.94-.31-41.89-.24-7.24-.64-14.48-1-21.72-.18-4.27,1-6,5.52-5.73,7.48.37,15,0,22.49.15,3.54.08,4.3-1.95,3.9-4.62-1.5-10-1.66-20-1.94-30.11-.37-13.11-.87-26.21-1-39.33,0-3,.39-3.1,3.15-3.11q18.24-.06,36.48-.86c6-.27,12,1.1,18.07.12,2.19-.35,2.8,1.9,2.9,3.93.49,9.59,1.12,19.17,1.52,28.75.55,13.51.85,27,1.47,40.52.12,2.8,1,5.22,5.1,4.64s8.35-.18,12.53-.19c2.83,0,4.08,1.18,4,4.23-.47,13.4.72,26.78,1.3,40.13.36,8.46-.59,17.13,1.6,25.53.5,1.93,0,4-.09,6-.37,11,1,21.85,1.2,32.78.06,2.79-.67,3.55-3.53,3.59-12.86.18-25.7.55-38.58.06-9.55-.37-19.15.7-28.73.81-14.17.17-28.36,0-42.54.1-2.31,0-2.75-.84-2.71-2.9C966.08,782.59,966,777.09,966,771.59Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M1150.13,789.94c-15.52.45-34.88-.55-54.23.45-2.17.11-3.91-.9-4-3.81-.22-13.2-.23-26.43-1-39.61-1-16-1.51-32.05-2.15-48.08-.2-5-.3-10.19-.81-15.25-.33-3.28,1-3.82,3.92-3.74,7.49.2,15-.1,22.48.14,3.54.11,4.55-1.46,4.69-4.59a66,66,0,0,0-2-17.46c-1.54-6.78-.47-13.84-1.33-20.68-1.14-9-.41-18.11-1.62-27.14-1-7.47,0-8.5,7.3-8.08,14,.81,27.93-1.05,41.91.44,2.66.29,6.62-1.71,8.24.22s.8,5.62.94,8.55c.52,11.41.24,22.92,1.69,34.2,1.35,10.48-.14,21,1.56,31.41.51,3.2,1.82,3.47,4,3,4.32-.89,8.72.9,13.12-.68,1-.34,4.07,0,4.21,3.73.65,17.54,1.54,35.09,2.93,52.58,1.35,17.11,2.33,34.22,3.33,51.35.14,2.35-.69,3-4,3C1184.28,790,1169.12,789.94,1150.13,789.94Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M1261.82,604c9.2,0,18.42.29,27.61-.14,4-.19,5.26,1.62,5.5,4.78,1.09,14.09,2,28.21,3.06,42.31s2.12,28,3.54,42c.48,4.68.78,9.39,1.3,14.08,1.7,15.25,2.87,30.57,4.07,45.88.84,10.74,1.32,21.51,2.12,32.26.23,3.07-.71,3.87-3.82,3.89-8.89.06-17.77.79-26.66.86-20.14.14-40.29,0-60.43.11-3.19,0-4.15-1.65-4.07-4.1.21-5.8-.68-11.5-1-17.24-1.17-18.88-2.08-37.77-3.78-56.63-.82-9-1.88-18.08-1.3-27.21.12-2,.42-2.6,2.66-3a66.19,66.19,0,0,1,17.75-.73c5.59.57,7.29-2.14,7.6-6.75.27-4.05.41-9.56-1.38-11.76-4-4.87-2.48-10.09-3.42-15-1-5.36-.38-11-1.27-16.41-1.13-6.81-.2-13.74-1.8-20.52-1.29-5.5,0-6.66,5.77-6.66Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.75.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M417,240c17.2,0,34.41.12,51.61-.05,7.73-.08,15.47.23,23.21-.64,2.33-.26,5.77-.17,5.23,4.2-1.93,15.53-2.35,31.19-3.78,46.77-1,10.78-1.72,21.63-2.25,32.47-.49,9.79-1.8,19.51-2.21,29.32-.22,5.29-6.43,4.19-9,3.63-4.49-1-8.86,1.21-13.13-.56-1.19-.49-1.42.54-1.74,1.65-1.71,6-2,12.6.41,17.81,3,6.41,1,12.32,1.09,18.39.17,11.48-4.33,22.59-2.92,34.25.29,2.36-2.21,1.82-3.69,1.79-12.47-.24-24.93-1.51-37.41-.92-6.67.31-13.23-1.65-19.94-.63-1.66.26-2.73-1.11-2.5-3.25,1.73-16.17,3.48-32.34,5-48.54.56-6.17-2.43-12-2.88-18.05-.14-1.88-1.33-1.54-2.43-1.56-2,0-4,0-6,0-5.51,0-6.77-1.11-5.51-6.41s1.17-10.8,1.76-16.19c1.67-15.15,2.33-30.42,4.26-45.53,1.72-13.43,2.65-26.9,3.84-40.35.5-5.64,2-7.06,8.49-7.48H417Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M559,241.07c14.66,0,29.31,0,44,0,3,0,4.49-.27,4.37,4.25-.25,10-1.06,20-1.44,29.94-.8,20.66-2.55,41.28-3.78,61.92-.28,4.65-.11,9.32,0,14,0,3.32-1.27,4.52-4.69,4.07a74.81,74.81,0,0,0-9.48-.16c-6.53,0-6.64,0-6.81,6.83-.08,3.58.71,7.28.67,10.72-.08,7.64-.69,15.32-.91,23-.07,2.27-.89,4.56-.74,6.81.53,7.8-1.48,15.45-1.1,23.24.16,3.14-1.3,4.5-4.74,4.45-12.66-.19-25.33-.22-38,0-5.26.09-10.51.14-15.77,0-3.06-.07-3.8-.46-3.66-4,.28-7.22.67-14.43,1.21-21.64.64-8.43.87-16.94,2.26-25.25.44-2.63,1.7-5.48,2.42-8.29,1.21-4.67-.61-9.11-1.08-13.64-.13-1.24-1.06-2.88-3-2.24-4.79,1.52-9.72-1-14.67.69-1.43.49-4.57-.47-4.1-4.63,1.22-10.83,1.36-21.78,2.25-32.66q2.28-27.82,4.13-55.67c.31-4.75.65-9.5.87-14.27.27-5.93,2-7.43,7.94-7.44Q537,241.05,559,241.07Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.75.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M671.48,239.07c15.49,0,31,.08,46.48-.06,3.08,0,4.28.53,4.14,4-.68,16.69-1.16,33.38-1.55,50.08-.3,12.5.15,25-.74,37.49-.51,7.17-.63,14.31-.77,21.47,0,2.44-1.35,3.07-3.52,3-4.72-.06-9.45.17-14.17-.08-3-.16-3.18.91-3.32,3.65-.54,11,1.74,21.95,1,33-.69,10.29-1.29,20.59-1,30.91.06,1.95-.58,2.56-2.54,2.55q-20.44-.1-40.91,0c-5.52,0-11.05-.34-16.56.43-3.09.43-5.19.1-5.13-4.23.23-14.46.73-28.9,2.11-43.3.08-.82-.06-2.25.26-2.36,7.29-2.56,3.45-8.66,3.44-12.8,0-7.74-.71-7.45-8.57-7.48-5.08,0-10.13-.32-15.22.2-1.75.18-2.7-1.24-2.61-3.16.74-15,1.48-30,1.81-45s1.55-30,2.08-45c.22-6.39.68-12.81.87-19.23,0-1.53-1-3.05,2.71-3.37,16.41-1.44,32.81-.08,49.19-.64C669.81,239.05,670.65,239.07,671.48,239.07Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M744.69,244.07c21.59-.76,43.18.55,64.79-.41,8-.35,16.21.22,24.33.33,2.71,0,3.4.86,3.23,3.39-.54,8-.95,16.13-1.2,24.05-.28,8.9-.22,18.1-.26,27.07,0,10.6-.18,21.28-.53,31.92-.22,7-.26,14,.06,21,.15,3.38-1.16,3.78-4,3.64-4.16-.21-8.34.09-12.49-.11-2.65-.12-3.67.41-3.72,3.43-.34,20.73-1.19,41.45-.93,62.19.08,6.78,0,7.33-6.16,6.95-11.2-.69-22.37.33-33.58-.15a161,161,0,0,0-20.79.57c-2.82.24-3.42-1.9-3.26-3.09,1.37-9.73.53-19.49.81-29.23.16-5.8.31-11.6.51-17.4a2.9,2.9,0,0,1,.52-1.85c5.68-5.22,2-11.94,2.88-17.91.36-2.56-.86-3.69-3.78-3.54-5.86.29-11.74.07-17.62.08-2.85,0-4.43.34-3.84-4.21,1.07-8.3.15-16.84.36-25.28.49-19.18,1.18-38.34,1-57.53-.05-7,.77-14.08.85-21.12,0-2.67,1.11-3,3.26-2.86C738.35,244.17,741.52,244.07,744.69,244.07Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M930,379.68c0,14.68,1.5,29.32,1.06,44-.07,2.45-.46,3.43-3.23,3.41C909,427,890.14,427,871.3,427c-1.55,0-3.25.57-3.35-2.24-.58-15.57-3-31.06-2-46.71.15-2.34,0-4.43,3.31-4,2.23.26,1.71-1.51,1.72-2.71,0-4.33-.13-8.67.07-13,.13-2.58-.62-3.43-3.29-3.34-5.82.21-11.66-.06-17.49.11-3.25.1-4.21-1.12-4.35-4.35-.61-13.2.56-26.39,0-39.56-.54-12.73,0-25.45-.1-38.17-.11-10.06-.47-20.19.14-30.28.17-2.85.78-4.27,4.28-4.2,10.77.19,21.6.33,32.3,0,14.92-.44,29.83,0,44.74-.44,5.14-.16,10.32.29,15.44-.14,3.2-.28,3.83,1.93,3.87,3.62.35,14.83.45,29.66.54,44.49,0,7.38-.79,14.83,0,22.11,1.55,14.42.26,28.83,1,43.22.13,2.75-.71,3.52-3,3.64-.83,0-1.66,0-2.49,0-12.19.05-12.23,0-12.58,12.15C929.9,371.36,930,375.52,930,379.68Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.75.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M972.41,355c-4,0-8-.07-12,0-2.29.05-2.7-1.05-2.84-3.11-1.29-18.17-.09-36.39-1.23-54.58-.86-13.51-.36-27.11-.47-40.66a131.73,131.73,0,0,0-.75-16.49c-.45-3.42-.23-6.2,5-6.33,11-.25,21.89.19,32.84.18,15.53,0,31.06.18,46.58-.11,5.49-.1,11,0,16.43-.17,3.29-.13,2.88,1.07,3.06,3.07,1.31,15,1.78,30.09,2.23,45.16.45,15.27.85,30.55,1.88,45.79.52,7.73.75,15.43.91,23.16.06,3-1,4.32-4,4.1-2.32-.17-4.66,0-7,0-6.12,0-8.13,1.79-8,7.86.41,16.09,1,32.17,1.55,48.25,0,1.22-.78,2.2-.43,3.61,1.62,6.6-.76,9.46-7.28,8.14-7-1.41-13.93-.75-20.87-.74-8.28,0-16.55,1.16-24.82-.07-2.39-.35-6,3.3-6.88-1.14-.42-2.19-2.88-4.8-.51-7.43.24-.27-.29-1.7-.83-2.12-5.69-4.45-3-11-3.09-16.16-.09-7.37-.38-14.71-.82-22.07-.12-2-.62-4.67,3.05-3.15a.72.72,0,0,0,.5,0c1.54-.69,3.85-1.16,2.49-3.54-2.06-3.59,4.1-9.71-3.22-11.3C980.21,354.39,976.24,355,972.41,355Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.75.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M1080.55,225.08c15.33,0,30.65,0,46,0,13.13,0,26.25-.68,39.39-.07,2.93.13,4.16.91,4.12,4-.15,12.67,1.79,25.31,1.6,37.89-.22,15.8,1.33,31.48,1.61,47.23.21,12,1.25,24,1.87,36,.15,3,.7,5.07-4.31,4.71-3.66-.26-7.77-1.48-11.65,0-1.05.41-2,.18-2.24,1.86a52.16,52.16,0,0,0,.29,17.94c1.12,6.34.85,12.7,1.63,19,1,8,.81,16.16,1.16,24.24a8.09,8.09,0,0,0,.39,2.9c1.7,3.69-.67,3.28-3,3.29-7.44,0-14.88.26-22.31.29q-14,.07-27.93-.06c-1.85,0-2.16-1.34-2.17-3.06-.09-8.73-.66-17.47-1.22-26.15-.5-7.77-.5-15.51-.74-23.25-.12-4,.44-8,.43-12,0-6.78-4.37-5-7.54-5.17-6.45-.24-12.94.06-19.4.29-2.43.09-2.65-1.15-3-3.13-1.18-7-.15-14.05-.7-21.06-1.1-14.09-1.22-28.25-2-42.36-.64-12.23-1.25-24.46-1.93-36.69-.43-7.77-1.08-15.52-1-23.33,0-2.91.92-3.69,3.66-3.48C1074.54,225.25,1077.55,225.08,1080.55,225.08Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M1249,426c-9.66,0-19.32-.11-29,.05-3.4.06-4.7-.66-5.19-4.56-1.21-9.43-1.53-18.93-2.46-28.38-.85-8.61-1-17.44,1-26.16.78-3.33-.18-7.06-.34-10.61-.09-2-1.61-1.28-2.59-1.31-6.8-.2-13.65-.92-20.37-.27-4.56.44-4.94-2.66-4.86-4.79.33-8.89-1-17.68-1.41-26.5-.76-15.51-1.84-31-3-46.52-1.06-14.83-2.63-29.62-2.83-44.51-.08-6.39-.14-6.39,6.33-6.39,26.63,0,53.26.08,79.89-.09,4.16,0,5.2,1.13,5.39,5.31.81,17.84,2.49,35.62,3.51,53.45,1.17,20.41,3.3,40.76,4.8,61.15.24,3.29.53,6.57-1.67,10-3,4.58-2.39,11.58.16,14.67,6.59,8,3.45,16.69,4.6,25,1.23,8.95,1.66,18,2,27,.13,2.87-.79,3.59-3.58,3.54C1269.29,425.93,1259.13,426,1249,426Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,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: ''
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -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 (
|
||||||
|
<div className={cls.commonChart}>
|
||||||
|
{data && <ReactECharts
|
||||||
|
option={getOptions(
|
||||||
|
seriesData,
|
||||||
|
pieces
|
||||||
|
)}
|
||||||
|
style={{ height: "100%" }}
|
||||||
|
/>}
|
||||||
|
{!data && (
|
||||||
|
<p
|
||||||
|
style={{
|
||||||
|
paddingTop: "88px",
|
||||||
|
color: "#fffc",
|
||||||
|
textAlign: "center",
|
||||||
|
fontSize: "24px",
|
||||||
|
userSelect: "none",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
暂无数据
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default CommonChart;
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
.commonChart {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
@ -0,0 +1,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 (
|
||||||
|
<BottomBarItem
|
||||||
|
icon="kilnBottom"
|
||||||
|
title="池底温度趋势图"
|
||||||
|
style={props.style}
|
||||||
|
>
|
||||||
|
{/* legend */}
|
||||||
|
<div className={cls.legend}>
|
||||||
|
<span className={cls.item}>
|
||||||
|
<span className={cls.block} style={{backgroundColor:'#FFCB59'}}></span>标准值外
|
||||||
|
</span>
|
||||||
|
<span className={cls.item}>
|
||||||
|
<span className={cls.block} style={{backgroundColor:'#146CFF'}}></span>标准值内
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className={cls.chart}>
|
||||||
|
<CommonChart dataSource={dataSource}/>
|
||||||
|
</div>
|
||||||
|
</BottomBarItem>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default KilnBottom;
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
.chart {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.legend {
|
||||||
|
position: absolute;
|
||||||
|
right: 25px;
|
||||||
|
top: 30px;
|
||||||
|
}
|
||||||
|
.item{
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 10px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #DFF1FE;
|
||||||
|
}
|
||||||
|
.block {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 2px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
@ -0,0 +1,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 (
|
||||||
|
<BottomBarItem
|
||||||
|
icon="kilnPress"
|
||||||
|
title="窑压趋势图"
|
||||||
|
style={props.style}
|
||||||
|
>
|
||||||
|
{/* legend */}
|
||||||
|
<div className={cls.legend}>
|
||||||
|
<span className={cls.item}>
|
||||||
|
<span className={cls.block} style={{backgroundColor:'#FFCB59'}}></span>标准值外
|
||||||
|
</span>
|
||||||
|
<span className={cls.item}>
|
||||||
|
<span className={cls.block} style={{backgroundColor:'#12FFF5'}}></span>标准值内
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className={cls.chart}>
|
||||||
|
<CommonChart dataSource={dataSource}/>
|
||||||
|
</div>
|
||||||
|
</BottomBarItem>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default KilnPress;
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
.chart {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.legend {
|
||||||
|
position: absolute;
|
||||||
|
right: 25px;
|
||||||
|
top: 30px;
|
||||||
|
}
|
||||||
|
.item{
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 10px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #DFF1FE;
|
||||||
|
}
|
||||||
|
.block {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 2px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
@ -0,0 +1,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 (
|
||||||
|
<BottomBarItem
|
||||||
|
icon="kilnTop"
|
||||||
|
title="碹顶温度趋势图"
|
||||||
|
style={props.style}
|
||||||
|
>
|
||||||
|
{/* legend */}
|
||||||
|
<div className={cls.legend}>
|
||||||
|
<span className={cls.item}>
|
||||||
|
<span className={cls.block} style={{backgroundColor:'#FFCB59'}}></span>标准值外
|
||||||
|
</span>
|
||||||
|
<span className={cls.item}>
|
||||||
|
<span className={cls.block} style={{backgroundColor:'#12FFF5'}}></span>标准值内
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className={cls.chart}>
|
||||||
|
<CommonChart dataSource={dataSource}/>
|
||||||
|
</div>
|
||||||
|
</BottomBarItem>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default KilnTop;
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
.chart {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.legend {
|
||||||
|
position: absolute;
|
||||||
|
right: 25px;
|
||||||
|
top: 30px;
|
||||||
|
}
|
||||||
|
.item{
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 10px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #DFF1FE;
|
||||||
|
}
|
||||||
|
.block {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 2px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
@ -0,0 +1,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 (
|
||||||
|
<BottomBarItem
|
||||||
|
icon="liquidTrend"
|
||||||
|
title="液位趋势图"
|
||||||
|
style={props.style}
|
||||||
|
>
|
||||||
|
{/* legend */}
|
||||||
|
<div className={cls.legend}>
|
||||||
|
<span className={cls.item}>
|
||||||
|
<span className={cls.block} style={{backgroundColor:'#FFCB59'}}></span>标准值外
|
||||||
|
</span>
|
||||||
|
<span className={cls.item}>
|
||||||
|
<span className={cls.block} style={{backgroundColor:'#146CFF'}}></span>标准值内
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className={cls.chart}>
|
||||||
|
<CommonChart dataSource={dataSource}/>
|
||||||
|
</div>
|
||||||
|
</BottomBarItem>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default LiquidTrend;
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
.chart {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.legend {
|
||||||
|
position: absolute;
|
||||||
|
right: 25px;
|
||||||
|
top: 30px;
|
||||||
|
}
|
||||||
|
.item{
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 10px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #DFF1FE;
|
||||||
|
}
|
||||||
|
.block {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 2px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
@ -0,0 +1,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 (
|
||||||
|
<svg width="2050px" height="700px" style={{position: "absolute", top: "320px", left: "1100px", zIndex:0}}>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="Gradient" x1="0" x2="1" y1="0" y2="0">
|
||||||
|
<stop offset="0%" stop-color={returnColor2('TE302')} />
|
||||||
|
<stop offset="7%" stop-color={returnColor2('TE304')} />
|
||||||
|
<stop offset="14%" stop-color={returnColor2('TE306')} />
|
||||||
|
<stop offset="21%" stop-color={returnColor2('TE308')} />
|
||||||
|
<stop offset="28%" stop-color={returnColor2('TE309')} />
|
||||||
|
<stop offset="35%" stop-color={returnColor2('TE310')} />
|
||||||
|
<stop offset="42%" stop-color={returnColor2('TE312')} />
|
||||||
|
<stop offset="49%" stop-color={returnColor2('TE314')} />
|
||||||
|
<stop offset="56%" stop-color={returnColor2('TE315')} />
|
||||||
|
<stop offset="63%" stop-color={returnColor2('TE316')} />
|
||||||
|
<stop offset="70%" stop-color={returnColor2('TE318')} />
|
||||||
|
<stop offset="77%" stop-color={returnColor2('TE321')} />
|
||||||
|
<stop offset="84%" stop-color={returnColor2('TE331')} />
|
||||||
|
<stop offset="91%" stop-color={returnColor2('TE332')} />
|
||||||
|
<stop offset="100%" stop-color={returnColor2('TE332')} />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<polygon points="65 251,1515 251,1524 311,1640 311,1645 290,1609 90,1650 90,1650 95,1758 95,1760 107,1665 106,1658 130,1669 190,1865 190,1867 200,1685 200,1678 223,1693 313,1990 315,1992 325,1710 325,1703 347,1717 430,1910 430,1915 446,1731 445,1725 470,1738 544,1856 544,1860 562,1755 562,1752 572,1700 572,1655 340,1543 340,1534 360,1540 395,1080 397,1080 390,1024 390,1022 398,962 398,962 390,908 390,908 398,840 398,840 390,786 390,786 398,720 398,720 390,665 390,665 398,598 398,598 390,542 390,542 398,476 398,476 390,420 390,420 398,354 398,354 391,296 391,296 400,228 400,228 392,48 392" fill="url(#Gradient)" />
|
||||||
|
</svg>)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<BigSvg />
|
||||||
|
<B1 style={{fill:returnColor('TE334'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "5px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<B2 style={{fill:returnColor('TE336'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "9px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<B3 style={{fill:returnColor('TE338'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "10px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<B4 style={{fill:returnColor('TE340'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "12px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<B5 style={{fill:returnColor('TE342'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "14px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<B6 style={{fill:returnColor('TE344'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "16px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<B7 style={{fill:returnColor('TE346'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "18px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<B8 style={{fill:returnColor('TE348'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "21px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<T1 style={{fill:returnColor('TE333'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "5px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<T2 style={{fill:returnColor('TE335'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "9px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<T3 style={{fill:returnColor('TE337'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "10px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<T4 style={{fill:returnColor('TE339'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "12px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<T5 style={{fill:returnColor('TE341'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "13px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<T6 style={{fill:returnColor('TE343'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "16px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<T7 style={{fill:returnColor('TE345'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "18px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
<T8 style={{fill:returnColor('TE347'),width: "100%", height: "100%", position: "absolute", top: "120px", left: "20px", zIndex:0,transform:"scale(0.7)"}}/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TopColorBlock;
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
.cls-2 {
|
||||||
|
fill: red;
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path class="cls-2" d="M374,684.78c.67-3.25-.17-7.48,1.32-9.68,4.12-6.1,3.08-12.76,3.87-19.21,1.14-9.35,2-18.74,2.83-28.13.46-4.94.68-9.91,1.1-14.86.21-2.35,1.08-4,4-4,8,0,15.88-1.32,23.88-.92,10.47.52,20.87-1.41,31.37-1.09,3.77.12,4.88,1.19,4.72,4.88-.53,12.25-1.55,24.44-2.87,36.62-.32,3,0,6-.28,9-.24,2.31.05,5.21-3.43,5.73-.94.14-1.28.88-1.46,1.77-1.14,5.74-1.63,11.45-.05,17.23.63,2.29,1.68,3,3.93,2.46,5.1-1.14,10.29-.2,15.42-.55,2.83-.19,3.92,1,3.72,3.77-.44,6.11-.48,12.27-1.17,18.35-1.4,12.35-1.89,24.76-2.9,37.13-1.16,14.2-2.68,28.36-3.07,42.61-.11,4.35-1.77,6.43-7,6.29-17.64-.48-35.3-.23-52.94-.25-6.26-1.06-12.57-.31-18.85-.43-9.37-.19-12.74-3.23-12.56-12.59.27-14,2.08-27.79,4-41.61.36-2.63,1.12-5.23.95-7.9-.82-12.7,1.41-25.14,3.1-37.63C371.93,689.25,372.3,686.78,374,684.78Z" transform="translate(277 -158)"/><path class="cls-3" d="M374,684.78c-1,7.35-1.83,14.72-3,22-.48,3-1.14,5.84-.95,8.85,1,15-2.57,29.58-3.76,44.38-.61,7.58-1.82,15.14-1.25,22.8.33,4.37,4.69,7.93,10.3,8.07,5,.12,10,0,15,.05,1.6,0,3.37-.57,4.7.93-14.8,0-29.6,0-44.39.19-3.37,0-4.36-.41-3.87-4.41,1.81-15.11,2.94-30.29,4.34-45.45,1.68-18.12,3.4-36.23,5-54.36.21-2.45,1.31-3.05,3.49-3C364.37,684.9,369.19,684.81,374,684.78Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:#fefefe;}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M480.88,792.94c-3.83,0-7.66,0-11.49,0-2,0-3.19-.13-3-3,1.07-14.33,1.48-28.72,2.72-43,1.11-12.89,2.22-25.76,2.95-38.68.46-8.24,1.27-16.46,2-24.69.14-1.59.47-2,2.68-1.87a181.45,181.45,0,0,0,20.32-.36c1.22-.06,2.78-.14,3.16-2.66.67-4.4,1.28-8.55-.11-12.95-2.19-6.89.21-13.88.14-20.84-.06-6.66,1.64-13.34,1.64-20,0-6,1.56-11.78,1.16-17.74-.14-2,.76-3.13,2.89-3.14,8.5-.05,17-.08,25.49-.22,7.34-.12,14.71-.85,22-.41,4.39.27,8.82.39,13.14.24,3.78-.13,3.73,1.65,3.4,4-1.36,9.61-1.61,19.29-2,29-.3,7.76-.25,15.65-1.79,23.18-1.08,5.35-2.77,10.4-2.64,16.06.08,3.8.43,5.56,4.65,5.27s8.33.06,12.49-.11c2.45-.1,3.59.4,3.38,3.21-1.2,16.07-1.4,32.2-2.92,48.27-.92,9.67-.31,19.48-1.26,29.15-.93,9.47-.5,19-1.35,28.42-.16,1.75-1.07,1.94-2.43,2-9.27.23-18.54.51-27.81.72-6,.14-11.95.24-17.93.26Q505.64,793,480.88,792.94Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M688.32,678.37c6.48-1.08,13,.16,19.42-.34,1.14-.09,1.78.47,1.69,2.11-.34,5.79.05,11.64-.48,17.4-1.39,15-.26,30.1-1.71,45.12-.76,7.79-.07,15.7-.25,23.55s-.81,15.51-.89,23.26c0,3.15-1.9,2.46-3.58,2.46-16.33,0-32.66,0-49,0q-28.53,0-57,.16c-7.62,0-7.43.11-6.55-7.79.62-5.55.56-11.18.83-16.75.42-8.63,1-17.28,1.34-25.92.64-16.17,1.82-32.32,2.47-48.5.12-2.84.93-5.77.35-8.49-1.27-6,2.93-7,6.56-6.37,6.94,1.15,13.84-.2,20.71.67,1.72.22,1.85-.78,1.85-2.09a47.69,47.69,0,0,1,.65-10.39c.2-.92-.46-2.91-.91-3-5.09-.61-2.73-4.41-2.65-6.68.55-15.06.41-30.18,2.86-45.13a7.54,7.54,0,0,0-.17-1.47c-.37-9.21-.37-9.07,8.66-9.27,18.49-.4,37,.7,55.49-.37,2-.11,3.2.49,3.09,2.94-.71,16.32-.84,32.66-1.89,49C688.61,661,687,669.58,688.32,678.37Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M811.77,680c5.44,0,11,.23,16.42-.09,3.78-.22,5,.73,4.93,4.77-.21,26.57-.11,53.14-.11,79.71,0,7.49-.09,15,0,22.48.06,3-.88,4.18-4,4.15-12.62-.12-25.25-.17-37.87,0-8.65.11-17.3.82-26,.91-14.36.16-28.73-.25-43.08.21-5,.16-6-2.93-5.63-5.86.84-6,0-11.89.51-17.79,1.4-16,.48-32.14,1.79-48.2.83-10.23.17-20.57.19-30.86,0-9.47,0-9.24,9.15-8.88,5.28.22,10.57-.91,15.92-.23,2.79.35,4.43-.89,4-4.26-.37-2.95,0-6-.11-9-.08-1.69,1.13-4.1-2.33-4.33-1-.06-.61-2.05-.62-3.18-.2-17.65,1.65-35.27,1-52.93-.13-3.43,1.83-3.66,4.46-3.64,10.66.07,21.34.3,32-.06,8.42-.29,16.85.86,25.28-.69,1.7-.31,4.53.29,4.41,4.08-.6,18.58.32,37.18-.51,55.78C811.35,667.88,811.57,673.78,811.77,680Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M843,740.81q0-22.23,0-44.47c0-10.87,2.11-12.72,13.14-11.72,4.78.43,9.55-1,14.37,0,.89.2,1.52-1.36,1.51-2.65-.06-6.15,1.89-13.19-.44-18.28-4.35-9.47-.72-18.86-2.11-28.22a72.45,72.45,0,0,1,.19-21.69c.18-1.1.56-2.48.1-3.33-1.74-3.2.15-3.45,2.52-3.49,1,0,2,0,3,0,18.19-.06,36.39-.09,54.58-.22,2.19,0,3.08.42,3.2,2.89.7,13.84,1.45,27.68.85,41.51-.44,10.23,1.61,20.32,1.05,30.51-.13,2.24,1,2.33,2.69,2.31,4.33-.07,8.67.09,13-.07,2.46-.1,3.57.4,3.41,3.21a193,193,0,0,0,.27,28.67c1.52,16.25-.37,32.49,1.33,48.72a137.51,137.51,0,0,1,.37,20c-.17,4.23-1,6.62-6.36,6.55-25.32-.34-50.66-.3-76-.07-9,.08-18.1-.43-27.16.48-2.16.22-3.7-1-3.64-4.22C843.17,771.8,843,756.3,843,740.81Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M966,771.59c0-8.14-.48-16.25-.82-24.38-.6-13.94.17-27.94-.31-41.89-.24-7.24-.64-14.48-1-21.72-.18-4.27,1-6,5.52-5.73,7.48.37,15,0,22.49.15,3.54.08,4.3-1.95,3.9-4.62-1.5-10-1.66-20-1.94-30.11-.37-13.11-.87-26.21-1-39.33,0-3,.39-3.1,3.15-3.11q18.24-.06,36.48-.86c6-.27,12,1.1,18.07.12,2.19-.35,2.8,1.9,2.9,3.93.49,9.59,1.12,19.17,1.52,28.75.55,13.51.85,27,1.47,40.52.12,2.8,1,5.22,5.1,4.64s8.35-.18,12.53-.19c2.83,0,4.08,1.18,4,4.23-.47,13.4.72,26.78,1.3,40.13.36,8.46-.59,17.13,1.6,25.53.5,1.93,0,4-.09,6-.37,11,1,21.85,1.2,32.78.06,2.79-.67,3.55-3.53,3.59-12.86.18-25.7.55-38.58.06-9.55-.37-19.15.7-28.73.81-14.17.17-28.36,0-42.54.1-2.31,0-2.75-.84-2.71-2.9C966.08,782.59,966,777.09,966,771.59Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M1150.13,789.94c-15.52.45-34.88-.55-54.23.45-2.17.11-3.91-.9-4-3.81-.22-13.2-.23-26.43-1-39.61-1-16-1.51-32.05-2.15-48.08-.2-5-.3-10.19-.81-15.25-.33-3.28,1-3.82,3.92-3.74,7.49.2,15-.1,22.48.14,3.54.11,4.55-1.46,4.69-4.59a66,66,0,0,0-2-17.46c-1.54-6.78-.47-13.84-1.33-20.68-1.14-9-.41-18.11-1.62-27.14-1-7.47,0-8.5,7.3-8.08,14,.81,27.93-1.05,41.91.44,2.66.29,6.62-1.71,8.24.22s.8,5.62.94,8.55c.52,11.41.24,22.92,1.69,34.2,1.35,10.48-.14,21,1.56,31.41.51,3.2,1.82,3.47,4,3,4.32-.89,8.72.9,13.12-.68,1-.34,4.07,0,4.21,3.73.65,17.54,1.54,35.09,2.93,52.58,1.35,17.11,2.33,34.22,3.33,51.35.14,2.35-.69,3-4,3C1184.28,790,1169.12,789.94,1150.13,789.94Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M1261.82,604c9.2,0,18.42.29,27.61-.14,4-.19,5.26,1.62,5.5,4.78,1.09,14.09,2,28.21,3.06,42.31s2.12,28,3.54,42c.48,4.68.78,9.39,1.3,14.08,1.7,15.25,2.87,30.57,4.07,45.88.84,10.74,1.32,21.51,2.12,32.26.23,3.07-.71,3.87-3.82,3.89-8.89.06-17.77.79-26.66.86-20.14.14-40.29,0-60.43.11-3.19,0-4.15-1.65-4.07-4.1.21-5.8-.68-11.5-1-17.24-1.17-18.88-2.08-37.77-3.78-56.63-.82-9-1.88-18.08-1.3-27.21.12-2,.42-2.6,2.66-3a66.19,66.19,0,0,1,17.75-.73c5.59.57,7.29-2.14,7.6-6.75.27-4.05.41-9.56-1.38-11.76-4-4.87-2.48-10.09-3.42-15-1-5.36-.38-11-1.27-16.41-1.13-6.81-.2-13.74-1.8-20.52-1.29-5.5,0-6.66,5.77-6.66Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.75.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M417,240c17.2,0,34.41.12,51.61-.05,7.73-.08,15.47.23,23.21-.64,2.33-.26,5.77-.17,5.23,4.2-1.93,15.53-2.35,31.19-3.78,46.77-1,10.78-1.72,21.63-2.25,32.47-.49,9.79-1.8,19.51-2.21,29.32-.22,5.29-6.43,4.19-9,3.63-4.49-1-8.86,1.21-13.13-.56-1.19-.49-1.42.54-1.74,1.65-1.71,6-2,12.6.41,17.81,3,6.41,1,12.32,1.09,18.39.17,11.48-4.33,22.59-2.92,34.25.29,2.36-2.21,1.82-3.69,1.79-12.47-.24-24.93-1.51-37.41-.92-6.67.31-13.23-1.65-19.94-.63-1.66.26-2.73-1.11-2.5-3.25,1.73-16.17,3.48-32.34,5-48.54.56-6.17-2.43-12-2.88-18.05-.14-1.88-1.33-1.54-2.43-1.56-2,0-4,0-6,0-5.51,0-6.77-1.11-5.51-6.41s1.17-10.8,1.76-16.19c1.67-15.15,2.33-30.42,4.26-45.53,1.72-13.43,2.65-26.9,3.84-40.35.5-5.64,2-7.06,8.49-7.48H417Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M559,241.07c14.66,0,29.31,0,44,0,3,0,4.49-.27,4.37,4.25-.25,10-1.06,20-1.44,29.94-.8,20.66-2.55,41.28-3.78,61.92-.28,4.65-.11,9.32,0,14,0,3.32-1.27,4.52-4.69,4.07a74.81,74.81,0,0,0-9.48-.16c-6.53,0-6.64,0-6.81,6.83-.08,3.58.71,7.28.67,10.72-.08,7.64-.69,15.32-.91,23-.07,2.27-.89,4.56-.74,6.81.53,7.8-1.48,15.45-1.1,23.24.16,3.14-1.3,4.5-4.74,4.45-12.66-.19-25.33-.22-38,0-5.26.09-10.51.14-15.77,0-3.06-.07-3.8-.46-3.66-4,.28-7.22.67-14.43,1.21-21.64.64-8.43.87-16.94,2.26-25.25.44-2.63,1.7-5.48,2.42-8.29,1.21-4.67-.61-9.11-1.08-13.64-.13-1.24-1.06-2.88-3-2.24-4.79,1.52-9.72-1-14.67.69-1.43.49-4.57-.47-4.1-4.63,1.22-10.83,1.36-21.78,2.25-32.66q2.28-27.82,4.13-55.67c.31-4.75.65-9.5.87-14.27.27-5.93,2-7.43,7.94-7.44Q537,241.05,559,241.07Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.75.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M671.48,239.07c15.49,0,31,.08,46.48-.06,3.08,0,4.28.53,4.14,4-.68,16.69-1.16,33.38-1.55,50.08-.3,12.5.15,25-.74,37.49-.51,7.17-.63,14.31-.77,21.47,0,2.44-1.35,3.07-3.52,3-4.72-.06-9.45.17-14.17-.08-3-.16-3.18.91-3.32,3.65-.54,11,1.74,21.95,1,33-.69,10.29-1.29,20.59-1,30.91.06,1.95-.58,2.56-2.54,2.55q-20.44-.1-40.91,0c-5.52,0-11.05-.34-16.56.43-3.09.43-5.19.1-5.13-4.23.23-14.46.73-28.9,2.11-43.3.08-.82-.06-2.25.26-2.36,7.29-2.56,3.45-8.66,3.44-12.8,0-7.74-.71-7.45-8.57-7.48-5.08,0-10.13-.32-15.22.2-1.75.18-2.7-1.24-2.61-3.16.74-15,1.48-30,1.81-45s1.55-30,2.08-45c.22-6.39.68-12.81.87-19.23,0-1.53-1-3.05,2.71-3.37,16.41-1.44,32.81-.08,49.19-.64C669.81,239.05,670.65,239.07,671.48,239.07Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M744.69,244.07c21.59-.76,43.18.55,64.79-.41,8-.35,16.21.22,24.33.33,2.71,0,3.4.86,3.23,3.39-.54,8-.95,16.13-1.2,24.05-.28,8.9-.22,18.1-.26,27.07,0,10.6-.18,21.28-.53,31.92-.22,7-.26,14,.06,21,.15,3.38-1.16,3.78-4,3.64-4.16-.21-8.34.09-12.49-.11-2.65-.12-3.67.41-3.72,3.43-.34,20.73-1.19,41.45-.93,62.19.08,6.78,0,7.33-6.16,6.95-11.2-.69-22.37.33-33.58-.15a161,161,0,0,0-20.79.57c-2.82.24-3.42-1.9-3.26-3.09,1.37-9.73.53-19.49.81-29.23.16-5.8.31-11.6.51-17.4a2.9,2.9,0,0,1,.52-1.85c5.68-5.22,2-11.94,2.88-17.91.36-2.56-.86-3.69-3.78-3.54-5.86.29-11.74.07-17.62.08-2.85,0-4.43.34-3.84-4.21,1.07-8.3.15-16.84.36-25.28.49-19.18,1.18-38.34,1-57.53-.05-7,.77-14.08.85-21.12,0-2.67,1.11-3,3.26-2.86C738.35,244.17,741.52,244.07,744.69,244.07Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M930,379.68c0,14.68,1.5,29.32,1.06,44-.07,2.45-.46,3.43-3.23,3.41C909,427,890.14,427,871.3,427c-1.55,0-3.25.57-3.35-2.24-.58-15.57-3-31.06-2-46.71.15-2.34,0-4.43,3.31-4,2.23.26,1.71-1.51,1.72-2.71,0-4.33-.13-8.67.07-13,.13-2.58-.62-3.43-3.29-3.34-5.82.21-11.66-.06-17.49.11-3.25.1-4.21-1.12-4.35-4.35-.61-13.2.56-26.39,0-39.56-.54-12.73,0-25.45-.1-38.17-.11-10.06-.47-20.19.14-30.28.17-2.85.78-4.27,4.28-4.2,10.77.19,21.6.33,32.3,0,14.92-.44,29.83,0,44.74-.44,5.14-.16,10.32.29,15.44-.14,3.2-.28,3.83,1.93,3.87,3.62.35,14.83.45,29.66.54,44.49,0,7.38-.79,14.83,0,22.11,1.55,14.42.26,28.83,1,43.22.13,2.75-.71,3.52-3,3.64-.83,0-1.66,0-2.49,0-12.19.05-12.23,0-12.58,12.15C929.9,371.36,930,375.52,930,379.68Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.75.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M972.41,355c-4,0-8-.07-12,0-2.29.05-2.7-1.05-2.84-3.11-1.29-18.17-.09-36.39-1.23-54.58-.86-13.51-.36-27.11-.47-40.66a131.73,131.73,0,0,0-.75-16.49c-.45-3.42-.23-6.2,5-6.33,11-.25,21.89.19,32.84.18,15.53,0,31.06.18,46.58-.11,5.49-.1,11,0,16.43-.17,3.29-.13,2.88,1.07,3.06,3.07,1.31,15,1.78,30.09,2.23,45.16.45,15.27.85,30.55,1.88,45.79.52,7.73.75,15.43.91,23.16.06,3-1,4.32-4,4.1-2.32-.17-4.66,0-7,0-6.12,0-8.13,1.79-8,7.86.41,16.09,1,32.17,1.55,48.25,0,1.22-.78,2.2-.43,3.61,1.62,6.6-.76,9.46-7.28,8.14-7-1.41-13.93-.75-20.87-.74-8.28,0-16.55,1.16-24.82-.07-2.39-.35-6,3.3-6.88-1.14-.42-2.19-2.88-4.8-.51-7.43.24-.27-.29-1.7-.83-2.12-5.69-4.45-3-11-3.09-16.16-.09-7.37-.38-14.71-.82-22.07-.12-2-.62-4.67,3.05-3.15a.72.72,0,0,0,.5,0c1.54-.69,3.85-1.16,2.49-3.54-2.06-3.59,4.1-9.71-3.22-11.3C980.21,354.39,976.24,355,972.41,355Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.75.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M1080.55,225.08c15.33,0,30.65,0,46,0,13.13,0,26.25-.68,39.39-.07,2.93.13,4.16.91,4.12,4-.15,12.67,1.79,25.31,1.6,37.89-.22,15.8,1.33,31.48,1.61,47.23.21,12,1.25,24,1.87,36,.15,3,.7,5.07-4.31,4.71-3.66-.26-7.77-1.48-11.65,0-1.05.41-2,.18-2.24,1.86a52.16,52.16,0,0,0,.29,17.94c1.12,6.34.85,12.7,1.63,19,1,8,.81,16.16,1.16,24.24a8.09,8.09,0,0,0,.39,2.9c1.7,3.69-.67,3.28-3,3.29-7.44,0-14.88.26-22.31.29q-14,.07-27.93-.06c-1.85,0-2.16-1.34-2.17-3.06-.09-8.73-.66-17.47-1.22-26.15-.5-7.77-.5-15.51-.74-23.25-.12-4,.44-8,.43-12,0-6.78-4.37-5-7.54-5.17-6.45-.24-12.94.06-19.4.29-2.43.09-2.65-1.15-3-3.13-1.18-7-.15-14.05-.7-21.06-1.1-14.09-1.22-28.25-2-42.36-.64-12.23-1.25-24.46-1.93-36.69-.43-7.77-1.08-15.52-1-23.33,0-2.91.92-3.69,3.66-3.48C1074.54,225.25,1077.55,225.08,1080.55,225.08Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1 @@
|
|||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M960,921.91q-616.2,0-1232.41.09c-3.74,0-4.59-.84-4.59-4.59q.15-377.42,0-754.82c0-3.74.84-4.59,4.59-4.59q1232.42.15,2464.82,0c3.74,0,4.59.84,4.59,4.59q-.15,377.42,0,754.82c0,3.74-.84,4.59-4.59,4.59Q1576.21,921.85,960,921.91Z" transform="translate(277 -158)"/><path d="M1249,426c-9.66,0-19.32-.11-29,.05-3.4.06-4.7-.66-5.19-4.56-1.21-9.43-1.53-18.93-2.46-28.38-.85-8.61-1-17.44,1-26.16.78-3.33-.18-7.06-.34-10.61-.09-2-1.61-1.28-2.59-1.31-6.8-.2-13.65-.92-20.37-.27-4.56.44-4.94-2.66-4.86-4.79.33-8.89-1-17.68-1.41-26.5-.76-15.51-1.84-31-3-46.52-1.06-14.83-2.63-29.62-2.83-44.51-.08-6.39-.14-6.39,6.33-6.39,26.63,0,53.26.08,79.89-.09,4.16,0,5.2,1.13,5.39,5.31.81,17.84,2.49,35.62,3.51,53.45,1.17,20.41,3.3,40.76,4.8,61.15.24,3.29.53,6.57-1.67,10-3,4.58-2.39,11.58.16,14.67,6.59,8,3.45,16.69,4.6,25,1.23,8.95,1.66,18,2,27,.13,2.87-.79,3.59-3.58,3.54C1269.29,425.93,1259.13,426,1249,426Z" transform="translate(277 -158)"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -7,6 +7,10 @@ import IconPuzzle from '../assets/Icon/icon-puzzle.png';
|
|||||||
import IconPause from '../assets/Icon/icon-pause.png';
|
import IconPause from '../assets/Icon/icon-pause.png';
|
||||||
import IconDefault from '../assets/Icon/icon-puzzle.png';
|
import IconDefault from '../assets/Icon/icon-puzzle.png';
|
||||||
import IconTemp from '../assets/Icon/temp.svg';
|
import IconTemp from '../assets/Icon/temp.svg';
|
||||||
|
import IconKilnPress from '../assets/Icon/kilnPress.png';
|
||||||
|
import IconLiquidTrend from '../assets/Icon/liquidTrend.png';
|
||||||
|
import IconKilnTop from '../assets/Icon/kilnTop.png';
|
||||||
|
import IconKilnBottom from '../assets/Icon/kilnBottom.png';
|
||||||
|
|
||||||
function useIcon(iconName) {
|
function useIcon(iconName) {
|
||||||
// const icon = require(`../assets/icons/${iconName}.svg`).default;
|
// const icon = require(`../assets/icons/${iconName}.svg`).default;
|
||||||
@ -27,6 +31,14 @@ function useIcon(iconName) {
|
|||||||
? IconPause
|
? IconPause
|
||||||
: iconName == 'temp'
|
: iconName == 'temp'
|
||||||
? IconTemp
|
? IconTemp
|
||||||
|
: iconName == 'kilnPress'
|
||||||
|
? IconKilnPress
|
||||||
|
: iconName == 'liquidTrend'
|
||||||
|
? IconLiquidTrend
|
||||||
|
: iconName == 'kilnTop'
|
||||||
|
? IconKilnTop
|
||||||
|
: iconName == 'kilnBottom'
|
||||||
|
? IconKilnBottom
|
||||||
: IconDefault;
|
: IconDefault;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -6,10 +6,13 @@ import { AnimatePresence, motion } from "framer-motion"; // 动画
|
|||||||
import KilnCenter from "../../components/Modules/KilnInner/Center"; // 窑炉内部
|
import KilnCenter from "../../components/Modules/KilnInner/Center"; // 窑炉内部
|
||||||
import KilnInnerLeft from "../../components/Modules/KilnInner/LeftSide"; // 窑炉内部左侧内容
|
import KilnInnerLeft from "../../components/Modules/KilnInner/LeftSide"; // 窑炉内部左侧内容
|
||||||
import KilnInnerRight from "../../components/Modules/KilnInner/RightSide"; // 窑炉内部右侧内容
|
import KilnInnerRight from "../../components/Modules/KilnInner/RightSide"; // 窑炉内部右侧内容
|
||||||
|
import OptimizeCenter from "../../components/Modules/KilnOptimize/Center"; // 窑炉优化
|
||||||
|
import KilnOptimizeLeft from "../../components/Modules/KilnOptimize/LeftSide"; // 窑炉优化左侧内容
|
||||||
|
import KilnOptimizeRight from "../../components/Modules/KilnOptimize/RightSide"; // 窑炉优化右侧内容
|
||||||
import FireCheckLeft from "../../components/Modules/FireCheck/LeftSide"; // 退火监测 - 左边
|
import FireCheckLeft from "../../components/Modules/FireCheck/LeftSide"; // 退火监测 - 左边
|
||||||
import QualityCheckLeft from "../../components/Modules/QualityCheck/LeftSide"; // 质检统计 - 左边
|
import QualityCheckLeft from "../../components/Modules/QualityCheck/LeftSide"; // 质检统计 - 左边
|
||||||
import FireCheckRight from "../../components/Modules/FireCheck/RightSide";
|
import FireCheckRight from "../../components/Modules/FireCheck/RightSide";// 退火监测 - 右边
|
||||||
import QualityCheckRight from "../../components/Modules/QualityCheck/RightSide";
|
import QualityCheckRight from "../../components/Modules/QualityCheck/RightSide";// 质检统计 - 右边
|
||||||
import { useSelector } from "react-redux";
|
import { useSelector } from "react-redux";
|
||||||
import { useEffect, useRef } from "react";
|
import { useEffect, useRef } from "react";
|
||||||
import useRefresh from "../../hooks/useRefresh";
|
import useRefresh from "../../hooks/useRefresh";
|
||||||
@ -63,6 +66,7 @@ export default function Home({ active }) {
|
|||||||
>
|
>
|
||||||
{active == "窑炉总览" && <LeftBar key="kiln-total" />}
|
{active == "窑炉总览" && <LeftBar key="kiln-total" />}
|
||||||
{active == "窑炉内部" && <KilnInnerLeft key="kiln-inner" />}
|
{active == "窑炉内部" && <KilnInnerLeft key="kiln-inner" />}
|
||||||
|
{active == "窑炉优化" && <KilnOptimizeLeft key="kiln-optimize" />}
|
||||||
{active == "退火监测" && <FireCheckLeft key="fire-check" />}
|
{active == "退火监测" && <FireCheckLeft key="fire-check" />}
|
||||||
{active == "质检统计" && <QualityCheckLeft key="quality-check" />}
|
{active == "质检统计" && <QualityCheckLeft key="quality-check" />}
|
||||||
</div>
|
</div>
|
||||||
@ -131,6 +135,8 @@ export default function Home({ active }) {
|
|||||||
|
|
||||||
{active == "窑炉内部" && <KilnCenter />}
|
{active == "窑炉内部" && <KilnCenter />}
|
||||||
|
|
||||||
|
{active == "窑炉优化" && <OptimizeCenter />}
|
||||||
|
|
||||||
{active == "退火监测" && <div className="bgFire"></div>}
|
{active == "退火监测" && <div className="bgFire"></div>}
|
||||||
|
|
||||||
{active == "质检统计" && <div className="bgQuality"></div>}
|
{active == "质检统计" && <div className="bgQuality"></div>}
|
||||||
@ -138,6 +144,7 @@ export default function Home({ active }) {
|
|||||||
|
|
||||||
{active == "窑炉总览" && <RightBar key="right-bar" />}
|
{active == "窑炉总览" && <RightBar key="right-bar" />}
|
||||||
{active == "窑炉内部" && <KilnInnerRight key="kiln-inner-right" />}
|
{active == "窑炉内部" && <KilnInnerRight key="kiln-inner-right" />}
|
||||||
|
{active == "窑炉优化" && <KilnOptimizeRight key="kiln-optimize-right" />}
|
||||||
{active == "退火监测" && <FireCheckRight key="kiln-fire-check-right" />}
|
{active == "退火监测" && <FireCheckRight key="kiln-fire-check-right" />}
|
||||||
{active == "质检统计" && <QualityCheckRight key="kiln-quality-right" />}
|
{active == "质检统计" && <QualityCheckRight key="kiln-quality-right" />}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
159
src/store/features/kilnOptimizeSlice.js
Normal file
159
src/store/features/kilnOptimizeSlice.js
Normal file
@ -0,0 +1,159 @@
|
|||||||
|
import { createSlice } from "@reduxjs/toolkit";
|
||||||
|
|
||||||
|
export const initialState = {
|
||||||
|
// info: {
|
||||||
|
// // 余热发电
|
||||||
|
// elecQty1: "0", // kWh
|
||||||
|
// // 电消耗量
|
||||||
|
// elecQty2: "0", // kWh
|
||||||
|
// elecQty3: "0", // kWh
|
||||||
|
// elecQty4: "0", // kWh
|
||||||
|
// elecQty5: "0", // kWh
|
||||||
|
// elecQty6: "0", // kWh
|
||||||
|
// elecQty7: "0", // kWh
|
||||||
|
// // 水消耗量
|
||||||
|
// waterQty: "0", // Km³
|
||||||
|
// // 天然气1
|
||||||
|
// ngQty1: "0", // m³
|
||||||
|
// // 天然气2
|
||||||
|
// ngQty2: "0", // m³
|
||||||
|
// },
|
||||||
|
// trend: {
|
||||||
|
// natGas1: {
|
||||||
|
// // 暂时只存了周数据:
|
||||||
|
// week: [],
|
||||||
|
// month: [],
|
||||||
|
// year: [],
|
||||||
|
// },
|
||||||
|
// natGas2: {
|
||||||
|
// week: [],
|
||||||
|
// month: [],
|
||||||
|
// year: [],
|
||||||
|
// },
|
||||||
|
// elec: {
|
||||||
|
// week: [
|
||||||
|
// // { qty: 10, time: "01" },
|
||||||
|
// // { qty: 20, time: "02" },
|
||||||
|
// // { qty: 30, time: "03" },
|
||||||
|
// // { qty: 40, time: "04" },
|
||||||
|
// // { qty: 50, time: "05" },
|
||||||
|
// // { qty: 60, time: "06" },
|
||||||
|
// // { qty: 70, time: "07" },
|
||||||
|
// ],
|
||||||
|
// month: [
|
||||||
|
// // { qty: 20, time: "02" },
|
||||||
|
// // { qty: 30, time: "03" },
|
||||||
|
// // { qty: 40, time: "04" },
|
||||||
|
// // { qty: 50, time: "05" },
|
||||||
|
// // { qty: 60, time: "06" },
|
||||||
|
// // { qty: 70, time: "07" },
|
||||||
|
// // { qty: 80, time: "08" },
|
||||||
|
// // { qty: 90, time: "09" },
|
||||||
|
// // { qty: 100, time: "10" },
|
||||||
|
// // { qty: 110, time: "11" },
|
||||||
|
// // { qty: 120, time: "12" },
|
||||||
|
// // { qty: 130, time: "13" },
|
||||||
|
// // { qty: 140, time: "14" },
|
||||||
|
// // { qty: 150, time: "15" },
|
||||||
|
// // { qty: 160, time: "16" },
|
||||||
|
// // { qty: 170, time: "17" },
|
||||||
|
// // { qty: 180, time: "18" },
|
||||||
|
// // { qty: 190, time: "19" },
|
||||||
|
// // { qty: 200, time: "20" },
|
||||||
|
// // { qty: 210, time: "21" },
|
||||||
|
// // { qty: 220, time: "22" },
|
||||||
|
// // { qty: 230, time: "23" },
|
||||||
|
// // { qty: 240, time: "24" },
|
||||||
|
// // { qty: 250, time: "25" },
|
||||||
|
// // { qty: 260, time: "26" },
|
||||||
|
// // { qty: 270, time: "27" },
|
||||||
|
// // { qty: 280, time: "28" },
|
||||||
|
// // { qty: 290, time: "29" },
|
||||||
|
// // { qty: 300, time: "30" },
|
||||||
|
// // { qty: 310, time: "31" },
|
||||||
|
// ],
|
||||||
|
// year: [
|
||||||
|
// // { qty: 10, time: "01" },
|
||||||
|
// // { qty: 20, time: "02" },
|
||||||
|
// // { qty: 30, time: "03" },
|
||||||
|
// // { qty: 40, time: "04" },
|
||||||
|
// // { qty: 50, time: "05" },
|
||||||
|
// // { qty: 60, time: "06" },
|
||||||
|
// // { qty: 70, time: "07" },
|
||||||
|
// // { qty: 80, time: "08" },
|
||||||
|
// // { qty: 90, time: "09" },
|
||||||
|
// // { qty: 100, time: "10" },
|
||||||
|
// // { qty: 110, time: "11" },
|
||||||
|
// // { qty: 120, time: "12" },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
pressureAvg:{},
|
||||||
|
liquidAvg:{},
|
||||||
|
bottomTempAvg:{},
|
||||||
|
topTempAvg:{}
|
||||||
|
};
|
||||||
|
|
||||||
|
const kilnOptimizeSlice = createSlice({
|
||||||
|
name: "kilnOptimize",
|
||||||
|
initialState,
|
||||||
|
reducers: {
|
||||||
|
// setInfo: (state, action) => {
|
||||||
|
// state.info = { ...state.info, ...action.payload };
|
||||||
|
// },
|
||||||
|
// setElecTrend: (state, action) => {
|
||||||
|
// if (action.payload.week?.length) {
|
||||||
|
// state.trend.elec.week = action.payload.week;
|
||||||
|
// }
|
||||||
|
// if (action.payload.month?.length) {
|
||||||
|
// state.trend.elec.month = action.payload.month;
|
||||||
|
// }
|
||||||
|
// if (action.payload.year?.length) {
|
||||||
|
// state.trend.elec.year = action.payload.year;
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// setSumGasData: (state, action) => {
|
||||||
|
// if ("sumGas1Now" in action.payload) {
|
||||||
|
// state.info.ngQty1 = action.payload.sumGas1Now;
|
||||||
|
// }
|
||||||
|
// if ("sumGas2Now" in action.payload) {
|
||||||
|
// state.info.ngQty2 = action.payload.sumGas2Now;
|
||||||
|
// }
|
||||||
|
// if ("hisSumGas1For7Day" in action.payload) {
|
||||||
|
// state.trend.natGas1.week = action.payload.hisSumGas1For7Day;
|
||||||
|
// }
|
||||||
|
// if ("hisSumGas2For7Day" in action.payload) {
|
||||||
|
// state.trend.natGas2.week = action.payload.hisSumGas2For7Day;
|
||||||
|
// }
|
||||||
|
// if ("sumGas1ForMonth" in action.payload) {
|
||||||
|
// state.trend.natGas1.month = action.payload.sumGas1ForMonth;
|
||||||
|
// }
|
||||||
|
// if ("sumGas2ForMonth" in action.payload) {
|
||||||
|
// state.trend.natGas2.month = action.payload.sumGas2ForMonth;
|
||||||
|
// }
|
||||||
|
// if ("sumGas1ForYear" in action.payload) {
|
||||||
|
// state.trend.natGas1.year = action.payload.sumGas1ForYear;
|
||||||
|
// }
|
||||||
|
// if ("sumGas2ForYear" in action.payload) {
|
||||||
|
// state.trend.natGas2.year = action.payload.sumGas2ForYear;
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// ====================
|
||||||
|
setPressureAvg: (state, action) => {
|
||||||
|
console.log(action.payload)
|
||||||
|
state.pressureAvg = action.payload;
|
||||||
|
},
|
||||||
|
setLiquidAvg: (state, action) => {
|
||||||
|
state.liquidAvg = action.payload;
|
||||||
|
},
|
||||||
|
setBottomTempAvg: (state, action) => {
|
||||||
|
state.bottomTempAvg = action.payload;
|
||||||
|
},
|
||||||
|
setTopTempAvg: (state, action) => {
|
||||||
|
state.topTempAvg = action.payload;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default kilnOptimizeSlice.reducer;
|
||||||
|
export const { setPressureAvg, setLiquidAvg,setBottomTempAvg,setTopTempAvg} = kilnOptimizeSlice.actions;
|
||||||
@ -15,6 +15,7 @@ import annealFanInfoReducer from "./features/annealFanInfoSlice";
|
|||||||
import cuttingReducer from "./features/cuttingSlice";
|
import cuttingReducer from "./features/cuttingSlice";
|
||||||
import smokeReducer from "./features/smokeSlice";
|
import smokeReducer from "./features/smokeSlice";
|
||||||
import alarmSlice from "./features/alarmSlice";
|
import alarmSlice from "./features/alarmSlice";
|
||||||
|
import kilnOptimizeSlice from "./features/kilnOptimizeSlice";
|
||||||
|
|
||||||
export const store = configureStore({
|
export const store = configureStore({
|
||||||
reducer: {
|
reducer: {
|
||||||
@ -49,6 +50,8 @@ export const store = configureStore({
|
|||||||
// 切割
|
// 切割
|
||||||
cutting: cuttingReducer,
|
cutting: cuttingReducer,
|
||||||
// 烟气
|
// 烟气
|
||||||
smoke: smokeReducer
|
smoke: smokeReducer,
|
||||||
|
// 窑炉优化
|
||||||
|
kilnOptimize: kilnOptimizeSlice
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@ -136,6 +136,38 @@ export default function handler(msg) {
|
|||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
case "pressureAvgFor7Day": {
|
||||||
|
// 窑炉压力
|
||||||
|
store.dispatch({
|
||||||
|
type: "kilnOptimize/setPressureAvg",
|
||||||
|
payload: serializedData.data,
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "liquidAvgFor7Day": {
|
||||||
|
// 液位
|
||||||
|
store.dispatch({
|
||||||
|
type: "kilnOptimize/setLiquidAvg",
|
||||||
|
payload: serializedData.data,
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "bottomTempAvgFor7Day": {
|
||||||
|
// 池底
|
||||||
|
store.dispatch({
|
||||||
|
type: "kilnOptimize/setBottomTempAvg",
|
||||||
|
payload: serializedData.data,
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "topTempAvgFor7Day": {
|
||||||
|
// 碹顶
|
||||||
|
store.dispatch({
|
||||||
|
type: "kilnOptimize/setTopTempAvg",
|
||||||
|
payload: serializedData.data,
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
default: {
|
default: {
|
||||||
console.log("websocket message: [unknown] ---> ", msg.data);
|
console.log("websocket message: [unknown] ---> ", msg.data);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user