zjl #1
@@ -10,7 +10,7 @@ import RulerContainer from "./components/Tools/Ruler";
|
||||
import { Switch } from "antd";
|
||||
import { createPortal } from "react-dom";
|
||||
|
||||
const Menus = ["窑炉总览", "窑炉内部", "退火监测", "质检统计", "能耗分析"];
|
||||
const Menus = ["窑炉总览", "窑炉内部", "窑炉优化","退火监测", "质检统计", "能耗分析"];
|
||||
const LUNBO_INTERVAL = 60 * 1000;
|
||||
function App() {
|
||||
const { styles, value, setValue } = useSlider(100);
|
||||
|
||||
二进制
src/assets/Icon/kilnBottom.png
普通文件
二进制
src/assets/Icon/kilnBottom.png
普通文件
二进制文件未显示。
|
之后 宽度: | 高度: | 大小: 4.1 KiB |
二进制
src/assets/Icon/kilnPress.png
普通文件
二进制
src/assets/Icon/kilnPress.png
普通文件
二进制文件未显示。
|
之后 宽度: | 高度: | 大小: 4.1 KiB |
二进制
src/assets/Icon/kilnTop.png
普通文件
二进制
src/assets/Icon/kilnTop.png
普通文件
二进制文件未显示。
|
之后 宽度: | 高度: | 大小: 4.0 KiB |
二进制
src/assets/Icon/liquidTrend.png
普通文件
二进制
src/assets/Icon/liquidTrend.png
普通文件
二进制文件未显示。
|
之后 宽度: | 高度: | 大小: 4.1 KiB |
二进制
src/assets/tempIntr.png
普通文件
二进制
src/assets/tempIntr.png
普通文件
二进制文件未显示。
|
之后 宽度: | 高度: | 大小: 34 KiB |
@@ -5,8 +5,9 @@ export default function CenterMenu({ active, onChangeActive }) {
|
||||
const menuList = [
|
||||
["窑炉总览", "/kilnSummary"],
|
||||
["窑炉内部", "/kilnInner"],
|
||||
["窑炉优化", "/kilnOptimize"],
|
||||
["退火监测", "/stopFire"],
|
||||
["质检统计", "/quailtyCheck"],
|
||||
["质检统计", "/quailtyCheck"],
|
||||
["能耗分析", "/energyCost"],
|
||||
];
|
||||
return (
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
position: fixed;
|
||||
top: 120px;
|
||||
// left: 1340px;
|
||||
left: 1460px;
|
||||
left: 1338px;
|
||||
color: white;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
@@ -13,6 +13,8 @@ const blueTe = [
|
||||
|
||||
function TemperatureBottom(props) {
|
||||
const tempBottom = useSelector((state) => state.temperature.bottom);
|
||||
console.log(tempBottom)
|
||||
console.log('==================+++++++++++++')
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 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>
|
||||
|
之后 宽度: | 高度: | 大小: 1.1 KiB |
@@ -7,6 +7,10 @@ import IconPuzzle from '../assets/Icon/icon-puzzle.png';
|
||||
import IconPause from '../assets/Icon/icon-pause.png';
|
||||
import IconDefault from '../assets/Icon/icon-puzzle.png';
|
||||
import IconTemp from '../assets/Icon/temp.svg';
|
||||
import IconKilnPress from '../assets/Icon/kilnPress.png';
|
||||
import IconLiquidTrend from '../assets/Icon/liquidTrend.png';
|
||||
import IconKilnTop from '../assets/Icon/kilnTop.png';
|
||||
import IconKilnBottom from '../assets/Icon/kilnBottom.png';
|
||||
|
||||
function useIcon(iconName) {
|
||||
// const icon = require(`../assets/icons/${iconName}.svg`).default;
|
||||
@@ -27,6 +31,14 @@ function useIcon(iconName) {
|
||||
? IconPause
|
||||
: iconName == 'temp'
|
||||
? IconTemp
|
||||
: iconName == 'kilnPress'
|
||||
? IconKilnPress
|
||||
: iconName == 'liquidTrend'
|
||||
? IconLiquidTrend
|
||||
: iconName == 'kilnTop'
|
||||
? IconKilnTop
|
||||
: iconName == 'kilnBottom'
|
||||
? IconKilnBottom
|
||||
: IconDefault;
|
||||
}
|
||||
|
||||
|
||||
@@ -6,10 +6,13 @@ import { AnimatePresence, motion } from "framer-motion"; // 动画
|
||||
import KilnCenter from "../../components/Modules/KilnInner/Center"; // 窑炉内部
|
||||
import KilnInnerLeft from "../../components/Modules/KilnInner/LeftSide"; // 窑炉内部左侧内容
|
||||
import KilnInnerRight from "../../components/Modules/KilnInner/RightSide"; // 窑炉内部右侧内容
|
||||
import OptimizeCenter from "../../components/Modules/KilnOptimize/Center"; // 窑炉优化
|
||||
import KilnOptimizeLeft from "../../components/Modules/KilnOptimize/LeftSide"; // 窑炉优化左侧内容
|
||||
import KilnOptimizeRight from "../../components/Modules/KilnOptimize/RightSide"; // 窑炉优化右侧内容
|
||||
import FireCheckLeft from "../../components/Modules/FireCheck/LeftSide"; // 退火监测 - 左边
|
||||
import QualityCheckLeft from "../../components/Modules/QualityCheck/LeftSide"; // 质检统计 - 左边
|
||||
import FireCheckRight from "../../components/Modules/FireCheck/RightSide";
|
||||
import QualityCheckRight from "../../components/Modules/QualityCheck/RightSide";
|
||||
import FireCheckRight from "../../components/Modules/FireCheck/RightSide";// 退火监测 - 右边
|
||||
import QualityCheckRight from "../../components/Modules/QualityCheck/RightSide";// 质检统计 - 右边
|
||||
import { useSelector } from "react-redux";
|
||||
import { useEffect, useRef } from "react";
|
||||
import useRefresh from "../../hooks/useRefresh";
|
||||
@@ -63,6 +66,7 @@ export default function Home({ active }) {
|
||||
>
|
||||
{active == "窑炉总览" && <LeftBar key="kiln-total" />}
|
||||
{active == "窑炉内部" && <KilnInnerLeft key="kiln-inner" />}
|
||||
{active == "窑炉优化" && <KilnOptimizeLeft key="kiln-optimize" />}
|
||||
{active == "退火监测" && <FireCheckLeft key="fire-check" />}
|
||||
{active == "质检统计" && <QualityCheckLeft key="quality-check" />}
|
||||
</div>
|
||||
@@ -131,6 +135,8 @@ export default function Home({ active }) {
|
||||
|
||||
{active == "窑炉内部" && <KilnCenter />}
|
||||
|
||||
{active == "窑炉优化" && <OptimizeCenter />}
|
||||
|
||||
{active == "退火监测" && <div className="bgFire"></div>}
|
||||
|
||||
{active == "质检统计" && <div className="bgQuality"></div>}
|
||||
@@ -138,6 +144,7 @@ export default function Home({ active }) {
|
||||
|
||||
{active == "窑炉总览" && <RightBar key="right-bar" />}
|
||||
{active == "窑炉内部" && <KilnInnerRight key="kiln-inner-right" />}
|
||||
{active == "窑炉优化" && <KilnOptimizeRight key="kiln-optimize-right" />}
|
||||
{active == "退火监测" && <FireCheckRight key="kiln-fire-check-right" />}
|
||||
{active == "质检统计" && <QualityCheckRight key="kiln-quality-right" />}
|
||||
</div>
|
||||
|
||||
@@ -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 smokeReducer from "./features/smokeSlice";
|
||||
import alarmSlice from "./features/alarmSlice";
|
||||
import kilnOptimizeSlice from "./features/kilnOptimizeSlice";
|
||||
|
||||
export const store = configureStore({
|
||||
reducer: {
|
||||
@@ -49,6 +50,8 @@ export const store = configureStore({
|
||||
// 切割
|
||||
cutting: cuttingReducer,
|
||||
// 烟气
|
||||
smoke: smokeReducer
|
||||
smoke: smokeReducer,
|
||||
// 窑炉优化
|
||||
kilnOptimize: kilnOptimizeSlice
|
||||
},
|
||||
});
|
||||
|
||||
@@ -136,6 +136,38 @@ export default function handler(msg) {
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "pressureAvgFor7Day": {
|
||||
// 窑炉压力
|
||||
store.dispatch({
|
||||
type: "kilnOptimize/setPressureAvg",
|
||||
payload: serializedData.data,
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "liquidAvgFor7Day": {
|
||||
// 液位
|
||||
store.dispatch({
|
||||
type: "kilnOptimize/setLiquidAvg",
|
||||
payload: serializedData.data,
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "bottomTempAvgFor7Day": {
|
||||
// 池底
|
||||
store.dispatch({
|
||||
type: "kilnOptimize/setBottomTempAvg",
|
||||
payload: serializedData.data,
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "topTempAvgFor7Day": {
|
||||
// 碹顶
|
||||
store.dispatch({
|
||||
type: "kilnOptimize/setTopTempAvg",
|
||||
payload: serializedData.data,
|
||||
});
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
console.log("websocket message: [unknown] ---> ", msg.data);
|
||||
}
|
||||
|
||||
在新工单中引用
屏蔽一个用户