修改
This commit is contained in:
‘937886381’
@@ -2,4 +2,4 @@
|
||||
background: url(../../../assets/bg-bottom-item.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
18
src/components/Common/BottomItemBackgroundForecast/index.jsx
Normal file
18
src/components/Common/BottomItemBackgroundForecast/index.jsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import cls from './index.module.css';
|
||||
import Container from '../../Container';
|
||||
|
||||
function BottomBarItem(props) {
|
||||
return (
|
||||
<Container
|
||||
icon={props.icon}
|
||||
title={props.title}
|
||||
desc={props.desc}
|
||||
className={`${cls.bottomBarItem} ${props.className}`}
|
||||
style={props.style}
|
||||
>
|
||||
{props.children}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default BottomBarItem;
|
||||
@@ -0,0 +1,5 @@
|
||||
.bottomBarItem {
|
||||
background: url(../../../assets/forecastChartBack.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 506px;
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import cls from './index.module.css';
|
||||
import Container from '../../Container';
|
||||
|
||||
function BottomBarItem(props) {
|
||||
return (
|
||||
<Container
|
||||
icon={props.icon}
|
||||
title={props.title}
|
||||
desc={props.desc}
|
||||
className={`${cls.bottomBarItem} ${props.className}`}
|
||||
style={props.style}
|
||||
>
|
||||
{props.children}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default BottomBarItem;
|
||||
@@ -0,0 +1,5 @@
|
||||
.bottomBarItem {
|
||||
background: url(../../../assets/leftBottomBack.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 506px;
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import cls from './index.module.css';
|
||||
import Container from '../../Container';
|
||||
|
||||
function BottomBarItem(props) {
|
||||
return (
|
||||
<Container
|
||||
icon={props.icon}
|
||||
title={props.title}
|
||||
desc={props.desc}
|
||||
className={`${cls.bottomBarItem} ${props.className}`}
|
||||
style={props.style}
|
||||
>
|
||||
{props.children}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default BottomBarItem;
|
||||
@@ -0,0 +1,5 @@
|
||||
.bottomBarItem {
|
||||
background: url(../../../assets/leftMiddleBack.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 506px;
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import cls from './index.module.css';
|
||||
import Container from '../../Container';
|
||||
|
||||
function BottomBarItem(props) {
|
||||
return (
|
||||
<Container
|
||||
icon={props.icon}
|
||||
title={props.title}
|
||||
desc={props.desc}
|
||||
className={`${cls.bottomBarItem} ${props.className}`}
|
||||
style={props.style}
|
||||
>
|
||||
{props.children}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default BottomBarItem;
|
||||
@@ -0,0 +1,6 @@
|
||||
.bottomBarItem {
|
||||
background: url(../../../assets/lefTopBack.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 506px;
|
||||
height: 100%;
|
||||
}
|
||||
143
src/components/Common/ForecastTemperature/index.jsx
Normal file
143
src/components/Common/ForecastTemperature/index.jsx
Normal file
@@ -0,0 +1,143 @@
|
||||
import cls from "./leftbox.module.scss";
|
||||
import React, { useState, useContext, useEffect } from "react";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
|
||||
import icon1 from "../../../assets/CenterChart1icon1.svg";
|
||||
import icon2 from "../../../assets/CenterChart1icon2.svg";
|
||||
import icon3 from "../../../assets/CenterChart1icon3.svg";
|
||||
import icon4 from "../../../assets/CenterChart1icon4.svg";
|
||||
// import icon4 from "../../../assets/CenterChart2icon4.svg";
|
||||
|
||||
import useTimeCounter from "../../../hooks/useTimeCounter";
|
||||
|
||||
const FireInfo = () => {
|
||||
// const dispatch = useDispatch();
|
||||
const KilnInfo = useSelector((state) => state.kiln);
|
||||
// const time = KilnInfo.lastFireChangeTime || "0分0秒";
|
||||
// const minsec = useTimeCounter(time);
|
||||
// let [min, sec] = [0, 0];
|
||||
// if (minsec) {
|
||||
// min = minsec[0];
|
||||
// sec = minsec[1];
|
||||
// }
|
||||
// useEffect(() => {
|
||||
// const restTime = ctx?.runState?.lastFireChangeTime;
|
||||
// if (restTime == null) return;
|
||||
// let timer = null;
|
||||
// if (/分/.test(restTime) && /秒/.test(restTime)) {
|
||||
// let [min, sec] = restTime.replace(/分/, ":").replace(/秒/, "").split(":");
|
||||
// timer = setInterval(() => {
|
||||
// if (Number(sec) === 0 && Number(min) === 0) {
|
||||
// clearInterval(timer);
|
||||
// return;
|
||||
// }
|
||||
// if (Number(sec) === 0) {
|
||||
// sec = 59;
|
||||
// min--;
|
||||
// } else {
|
||||
// sec--;
|
||||
// }
|
||||
// setTime([min, sec]);
|
||||
// }, 1000);
|
||||
// } else if (/分/.test(restTime)) {
|
||||
// let sec,
|
||||
// min = restTime.replace(/分/, ":");
|
||||
// sec = 0;
|
||||
|
||||
// timer = setInterval(() => {
|
||||
// if (Number(sec) === 0 && Number(min) === 0) {
|
||||
// clearInterval(timer);
|
||||
// return;
|
||||
// }
|
||||
// if (Number(sec) === 0) {
|
||||
// sec = 59;
|
||||
// min--;
|
||||
// } else {
|
||||
// sec--;
|
||||
// }
|
||||
// setTime([min, sec]);
|
||||
// }, 1000);
|
||||
// } else if (/秒/.test(restTime)) {
|
||||
// let min,
|
||||
// sec = restTime.replace(/秒/, "");
|
||||
// min = 0;
|
||||
|
||||
// timer = setInterval(() => {
|
||||
// if (Number(sec) === 0 && Number(min) === 0) {
|
||||
// clearInterval(timer);
|
||||
// return;
|
||||
// }
|
||||
// if (Number(sec) === 0) {
|
||||
// sec = 59;
|
||||
// min--;
|
||||
// } else {
|
||||
// sec--;
|
||||
// }
|
||||
// setTime([min, sec]);
|
||||
// }, 1000);
|
||||
// }
|
||||
// return () => {
|
||||
// clearInterval(timer);
|
||||
// };
|
||||
// }, [ctx?.runState?.lastFireChangeTime]);
|
||||
|
||||
// useEffect(() => {
|
||||
// setInterval(() => {
|
||||
// dispatch({
|
||||
// type: "fireInfo/setFireInfo",
|
||||
// payload: {
|
||||
// fireChangeTime: `${Math.ceil(Math.random() * 10)}:${Math.ceil(
|
||||
// Math.random() * 10
|
||||
// )}`,
|
||||
// fireDirection: Math.random * 10 < 5 ? "东火" : "西火",
|
||||
// lastFireChangeTime: `${Math.ceil(Math.random() * 60)}分${Math.ceil(
|
||||
// Math.random() * 50
|
||||
// )}秒`,
|
||||
// },
|
||||
// });
|
||||
// }, 10000);
|
||||
// }, []);
|
||||
|
||||
const data = [
|
||||
{
|
||||
icon: icon1,
|
||||
label: "泡界线",
|
||||
// value: ctx?.runState?.fireChangeTime || "00:00",
|
||||
// value: KilnInfo.fireChangeTime || "00:00",
|
||||
},
|
||||
{
|
||||
icon: icon2,
|
||||
label: "磴顶加权温度",
|
||||
// value: `${time[0]}分${time[1]}秒`,
|
||||
value: KilnInfo.topTemp|| "℃",
|
||||
},
|
||||
{
|
||||
icon: icon3,
|
||||
label: "液位",
|
||||
// value: ctx?.runState?.fireDirection || "东火",
|
||||
value: KilnInfo.liquidLevel || "0",
|
||||
},
|
||||
{
|
||||
icon: icon4,
|
||||
label: "池底加权温度",
|
||||
// value: ctx?.runState?.fireDirection || "东火",
|
||||
value: KilnInfo.meltTemp || "℃",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={`${cls.leftbox}`}>
|
||||
{data.map((item) => (
|
||||
<div className={cls.box} key={item.label}>
|
||||
<img src={item.icon} alt="Error" className="box__logo" />
|
||||
<div className={cls.box__inner}>
|
||||
<h2 className={cls.box__label}>{item.label}</h2>
|
||||
<h2 className={cls.box__value}> {item.value}</h2>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FireInfo;
|
||||
@@ -0,0 +1,38 @@
|
||||
.leftbox {
|
||||
// height: 128px;
|
||||
height: 230px;
|
||||
display: flex;
|
||||
width: 640px;
|
||||
flex-wrap: wrap;
|
||||
.box {
|
||||
margin-right: 16px;
|
||||
width: 300px;
|
||||
height: 110px;
|
||||
padding: 12px 8px;
|
||||
background: url(../../../assets/CenterChart2ItemBg.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
letter-spacing: 2px;
|
||||
align-items: flex-start;
|
||||
// flex-wrap: wrap;
|
||||
user-select: none;
|
||||
|
||||
.box__inner {
|
||||
padding-top: 12px;
|
||||
|
||||
.box__label {
|
||||
color: #fffa;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.box__value {
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
font-size: 34px;
|
||||
line-height: 54px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,10 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-20 14:08:32
|
||||
* @LastEditTime: 2024-08-30 09:50:51
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
import cls from "./kiln.module.scss";
|
||||
import Container from "../../Container";
|
||||
import { useSelector } from "react-redux";
|
||||
@@ -14,7 +21,7 @@ export default function Kiln() {
|
||||
return (
|
||||
<Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}>
|
||||
<div className={cls.leftBar__top__content}>
|
||||
{infos.map((item) => (
|
||||
{infos.slice(0,infos.length-1).map((item) => (
|
||||
<div key={item.label} className={cls.info__item}>
|
||||
<span className={cls.label}>{item.label}</span>
|
||||
<span className={cls.value}>{item.value}</span>
|
||||
|
||||
58
src/components/Common/TemperatureTop/forecastIndex.jsx
Normal file
58
src/components/Common/TemperatureTop/forecastIndex.jsx
Normal file
@@ -0,0 +1,58 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-27 09:22:58
|
||||
* @LastEditTime: 2024-08-30 09:55:56
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
import BlueRect from "../forecastRect";
|
||||
import { useSelector } from "react-redux";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
|
||||
const blueTe = [
|
||||
"TE271",
|
||||
"TE272",
|
||||
"TE273",
|
||||
"TE274",
|
||||
"TE275",
|
||||
"TE276",
|
||||
"TE277",
|
||||
"TE278",
|
||||
"TE279",
|
||||
"TE280",
|
||||
];
|
||||
|
||||
function TemperatureTop(props) {
|
||||
const tempTop = useSelector((state) => state.temperature.top);
|
||||
console.log('tempTop',tempTop);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="temperature-top"
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "0",
|
||||
left: "0",
|
||||
width: "100%",
|
||||
height: "80vh",
|
||||
zIndex: "-1",
|
||||
...props.style,
|
||||
}}
|
||||
animate={{
|
||||
opacity: [0, 0, 0, 0.6, 1],
|
||||
transition: { duration: 0.3, delay: 1.5 },
|
||||
}}
|
||||
>
|
||||
{Object.keys(tempTop).map((d) => (
|
||||
<BlueRect
|
||||
title={d}
|
||||
key={d + Math.random()}
|
||||
value={tempTop[d]}
|
||||
blue={blueTe.includes(d)}
|
||||
/>
|
||||
))}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TemperatureTop;
|
||||
27
src/components/Common/crownTe/Kiln.jsx
Normal file
27
src/components/Common/crownTe/Kiln.jsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import cls from "./kiln.module.scss";
|
||||
import Container from "../../Container";
|
||||
import { useSelector } from "react-redux";
|
||||
import { stateNameMap } from "../../../store/features/kilnSlice";
|
||||
|
||||
export default function Kiln() {
|
||||
const kilnInfo = useSelector((state) => state.kiln);
|
||||
|
||||
const infos = Object.keys(kilnInfo).map((key) => ({
|
||||
label: stateNameMap[key],
|
||||
value: kilnInfo[key],
|
||||
}));
|
||||
|
||||
return (
|
||||
<Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}>
|
||||
<div className={cls.leftBar__top__content}>
|
||||
{infos.map((item) => (
|
||||
<div key={item.label} className={cls.info__item}>
|
||||
<span className={cls.label}>{item.label}</span>
|
||||
<span className={cls.value}>{item.value}</span>
|
||||
{/* {item.label}: {item.value} */}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
42
src/components/Common/crownTe/kiln.module.scss
Normal file
42
src/components/Common/crownTe/kiln.module.scss
Normal file
@@ -0,0 +1,42 @@
|
||||
.leftBar__top {
|
||||
width: 625px;
|
||||
// height: 305px;
|
||||
height: 300px;
|
||||
background: url('../../../assets/ItemBg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.leftBar__top__content {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
padding-top: 18px;
|
||||
|
||||
.info__item {
|
||||
border-radius: 2px;
|
||||
color: hsl(0, 0%, 100%, 0.9);
|
||||
box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
|
||||
// width: 288px;
|
||||
height: 43px;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1.43px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.label {
|
||||
flex: 6;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 4;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
18
src/components/Common/forecastLargeBackground/index.jsx
Normal file
18
src/components/Common/forecastLargeBackground/index.jsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import cls from './index.module.css';
|
||||
import Container from '../../Container';
|
||||
|
||||
function BottomBarItem(props) {
|
||||
return (
|
||||
<Container
|
||||
icon={props.icon}
|
||||
title={props.title}
|
||||
desc={props.desc}
|
||||
className={`${cls.bottomBarItem} ${props.className}`}
|
||||
style={props.style}
|
||||
>
|
||||
{props.children}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default BottomBarItem;
|
||||
@@ -0,0 +1,5 @@
|
||||
.bottomBarItem {
|
||||
background: url(../../../assets/large.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 600px;
|
||||
}
|
||||
41
src/components/Common/forecastRect/index.jsx
Normal file
41
src/components/Common/forecastRect/index.jsx
Normal file
@@ -0,0 +1,41 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-29 09:46:11
|
||||
* @LastEditTime: 2024-08-30 14:01:37
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
import cls from "./index.module.css";
|
||||
|
||||
function BlueRect(props) {
|
||||
const title = props.title || "DEFAULT";
|
||||
const value = props.value || "0℃";
|
||||
return (
|
||||
<div
|
||||
className={`${cls.blueRect} ${cls[title]}`}
|
||||
style={{
|
||||
background: props.blue ? "#0a4268ee" : "#0a426860",
|
||||
height:"68px" ,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="title"
|
||||
style={{
|
||||
fontSize: "18px",
|
||||
lineHeight: "24px",
|
||||
color: props.blue ? "#40afb8" : "#fff",
|
||||
fontWeight: 600,
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</span>
|
||||
<span className="value" style={{ userSelect: "none", fontSize: "22px" }}>
|
||||
{value}
|
||||
</span>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlueRect;
|
||||
545
src/components/Common/forecastRect/index.module.css
Normal file
545
src/components/Common/forecastRect/index.module.css
Normal file
@@ -0,0 +1,545 @@
|
||||
.blueRect {
|
||||
display: inline-block;
|
||||
width: 106px;
|
||||
height: 68px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 6px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
background: #0a426820;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.blueRect::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
transparent 0%,
|
||||
transparent 50%,
|
||||
#24aebb 100%
|
||||
);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.blueRect::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
#24aebb 0%,
|
||||
transparent 50%,
|
||||
transparent 100%
|
||||
);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/** left **/
|
||||
|
||||
.TE271 {
|
||||
top: 160px;
|
||||
left: 70px;
|
||||
}
|
||||
.TE272 {
|
||||
top: 254px; /* +94px */
|
||||
left: 70px;
|
||||
}
|
||||
.TE273 {
|
||||
top: 348px; /* +94px */
|
||||
left: 70px;
|
||||
}
|
||||
.TE274 {
|
||||
top: 442px;
|
||||
left: 70px;
|
||||
}
|
||||
.TE279 {
|
||||
top: 536px;
|
||||
left: 70px;
|
||||
}
|
||||
.TE275 {
|
||||
top: 160px;
|
||||
left: 206px;
|
||||
}
|
||||
.TE276 {
|
||||
top: 254px;
|
||||
left: 206px; /* +136px */
|
||||
}
|
||||
.TE277 {
|
||||
top: 348px; /* +94px */
|
||||
left: 206px; /* +136px */
|
||||
}
|
||||
.TE278 {
|
||||
top: 442px; /* +94px */
|
||||
left: 206px; /* +136px */
|
||||
}
|
||||
.TE280 {
|
||||
top: 536px; /* +94px */
|
||||
left: 206px; /* +136px */
|
||||
}
|
||||
|
||||
/** center top **/
|
||||
.TE227 {
|
||||
top: 178px;
|
||||
left: 470px;
|
||||
}
|
||||
.TE229 {
|
||||
top: 178px;
|
||||
left: 590px; /* +120px */
|
||||
}
|
||||
.TE231 {
|
||||
top: 178px;
|
||||
left: 700px;
|
||||
}
|
||||
.TE233 {
|
||||
top: 178px;
|
||||
left: 800px;
|
||||
}
|
||||
.TE235 {
|
||||
top: 178px;
|
||||
left: 900px;
|
||||
}
|
||||
.TE237 {
|
||||
top: 178px;
|
||||
left: 1000px;
|
||||
}
|
||||
.TE239 {
|
||||
top: 178px;
|
||||
left: 1100px;
|
||||
}
|
||||
.TE241 {
|
||||
top: 178px;
|
||||
left: 1200px;
|
||||
}
|
||||
|
||||
/** center bottom **/
|
||||
.TE228 {
|
||||
top: 580px;
|
||||
left: 460px;
|
||||
}
|
||||
.TE230 {
|
||||
top: 580px;
|
||||
left: 570px;
|
||||
}
|
||||
.TE232 {
|
||||
top: 580px;
|
||||
left: 680px;
|
||||
}
|
||||
.TE234 {
|
||||
top: 580px;
|
||||
left: 790px;
|
||||
}
|
||||
.TE236 {
|
||||
top: 580px;
|
||||
left: 900px;
|
||||
}
|
||||
.TE238 {
|
||||
top: 580px;
|
||||
left: 1000px;
|
||||
}
|
||||
.TE240 {
|
||||
top: 580px;
|
||||
left: 1100px;
|
||||
}
|
||||
.TE242 {
|
||||
top: 580px;
|
||||
left: 1200px;
|
||||
}
|
||||
|
||||
/** center middle **/
|
||||
.TE201 {
|
||||
top: 380px;
|
||||
/* transform: rotate(-1deg); */
|
||||
left: 360px;
|
||||
}
|
||||
.TE202 {
|
||||
top: 380px;
|
||||
/* transform: rotate(-1deg); */
|
||||
left: 480px;
|
||||
}
|
||||
.TE203 {
|
||||
top: 380px;
|
||||
/* transform: rotate(-1deg); */
|
||||
left: 600px;
|
||||
}
|
||||
.TE204 {
|
||||
top: 380px;
|
||||
/* transform: rotate(-1deg); */
|
||||
left: 720px;
|
||||
}
|
||||
.TE205 {
|
||||
top: 380px;
|
||||
/* transform: rotate(-1deg); */
|
||||
left: 840px;
|
||||
}
|
||||
.TE206 {
|
||||
top: 380px;
|
||||
/* transform: rotate(-1deg); */
|
||||
left: 960px;
|
||||
}
|
||||
.TE207 {
|
||||
top: 270px;
|
||||
/* transform: rotate(-1deg); */
|
||||
left: 1080px;
|
||||
}
|
||||
.TE208 {
|
||||
top: 380px;
|
||||
/* transform: rotate(-1deg); */
|
||||
left: 1080px;
|
||||
}
|
||||
.TE209 {
|
||||
top: 470px;
|
||||
/* transform: rotate(-1deg); */
|
||||
left: 1080px;
|
||||
}
|
||||
.TE210 {
|
||||
top: 380px;
|
||||
/* transform: rotate(-1deg); */
|
||||
left: 1200px;
|
||||
}
|
||||
.TE211 {
|
||||
top: 380px;
|
||||
/* transform: rotate(-1deg); */
|
||||
left: 1320px;
|
||||
}
|
||||
.TE212 {
|
||||
top: 380px;
|
||||
/* transform: rotate(-1deg); */
|
||||
left: 1440px;
|
||||
}
|
||||
.TE213 {
|
||||
top: 380px;
|
||||
/* transform: rotate(-1deg); */
|
||||
left: 1560px;
|
||||
}
|
||||
|
||||
/** right **/
|
||||
.TE214 {
|
||||
top: 128px;
|
||||
left: 1720px;
|
||||
}
|
||||
|
||||
.TE215 {
|
||||
top: 245px;
|
||||
left: 1740px;
|
||||
}
|
||||
.TE216 {
|
||||
top: 380px;
|
||||
left: 1740px;
|
||||
}
|
||||
.TE217 {
|
||||
top: 500px;
|
||||
left: 1760px;
|
||||
}
|
||||
.TE218 {
|
||||
top: 600px;
|
||||
left: 1780px;
|
||||
}
|
||||
.TE219 {
|
||||
top: 128px;
|
||||
left: 1840px;
|
||||
}
|
||||
.TE220 {
|
||||
top: 245px;
|
||||
left: 1860px;
|
||||
}
|
||||
.TE221 {
|
||||
top: 380px;
|
||||
left: 1860px;
|
||||
}
|
||||
.TE222 {
|
||||
top: 500px;
|
||||
left: 1880px;
|
||||
}
|
||||
.TE223 {
|
||||
top: 600px;
|
||||
left: 1900px;
|
||||
}
|
||||
.TE224 {
|
||||
top: 245px;
|
||||
left: 1980px;
|
||||
}
|
||||
.TE225 {
|
||||
top: 380px;
|
||||
left: 1980px;
|
||||
}
|
||||
.TE226 {
|
||||
top: 500px;
|
||||
left: 2000px;
|
||||
}
|
||||
|
||||
/** 一层 --- 窑底 **/
|
||||
.TE401 {
|
||||
top: 420px;
|
||||
left: 20px;
|
||||
}
|
||||
.TE402 {
|
||||
top: 420px;
|
||||
left: 140px;
|
||||
}
|
||||
.TE403 {
|
||||
top: 420px;
|
||||
left: 260px;
|
||||
}
|
||||
.PE401 {
|
||||
top: 320px;
|
||||
left: 20px;
|
||||
}
|
||||
.PE402 {
|
||||
top: 320px;
|
||||
left: 140px;
|
||||
}
|
||||
.PE403 {
|
||||
top: 320px;
|
||||
left: 260px;
|
||||
}
|
||||
|
||||
/** center top **/
|
||||
.TE333 {
|
||||
top: 128px;
|
||||
left: 660px;
|
||||
}
|
||||
.TE335 {
|
||||
top: 128px;
|
||||
left: 775px;
|
||||
}
|
||||
.TE337 {
|
||||
top: 128px;
|
||||
left: 880px;
|
||||
}
|
||||
.TE339 {
|
||||
top: 128px;
|
||||
left: 1000px;
|
||||
}
|
||||
.TE341 {
|
||||
top: 128px;
|
||||
left: 1110px;
|
||||
}
|
||||
.TE343 {
|
||||
top: 128px;
|
||||
left: 1225px;
|
||||
}
|
||||
.TE345 {
|
||||
top: 128px;
|
||||
left: 1335px;
|
||||
}
|
||||
.TE347 {
|
||||
top: 128px;
|
||||
left: 1440px;
|
||||
}
|
||||
|
||||
/** center bottom **/
|
||||
.TE334 {
|
||||
top: 620px;
|
||||
left: 610px;
|
||||
}
|
||||
.TE336 {
|
||||
top: 620px;
|
||||
left: 730px;
|
||||
}
|
||||
.TE338 {
|
||||
top: 620px;
|
||||
left: 860px;
|
||||
}
|
||||
.TE340 {
|
||||
top: 620px;
|
||||
left: 980px;
|
||||
}
|
||||
.TE342 {
|
||||
top: 620px;
|
||||
left: 1110px;
|
||||
}
|
||||
.TE344 {
|
||||
top: 620px;
|
||||
left: 1235px;
|
||||
}
|
||||
.TE346 {
|
||||
top: 620px;
|
||||
left: 1360px;
|
||||
}
|
||||
.TE348 {
|
||||
top: 620px;
|
||||
left: 1480px;
|
||||
}
|
||||
|
||||
/** center middle **/
|
||||
.TE301 {
|
||||
top: 340px;
|
||||
transform: scaleY(0.8);
|
||||
left: 450px;
|
||||
}
|
||||
.TE302 {
|
||||
top: 400px;
|
||||
transform: scaleY(0.8);
|
||||
left: 450px;
|
||||
}
|
||||
.TE303 {
|
||||
top: 460px;
|
||||
transform: scaleY(0.8);
|
||||
left: 450px;
|
||||
}
|
||||
.TE304 {
|
||||
top: 400px;
|
||||
/* transform: scaleY(0.8) skewX(-2deg); */
|
||||
transform: scaleY(0.8);
|
||||
left: 580px;
|
||||
}
|
||||
.TE305 {
|
||||
top: 340px;
|
||||
/* transform: scaleY(0.8) skewX(-2deg); */
|
||||
transform: scaleY(0.8);
|
||||
left: 720px;
|
||||
}
|
||||
.TE306 {
|
||||
top: 400px;
|
||||
/* transform: scaleY(0.8) skewX(-2deg); */
|
||||
/* transform: scaleY(0.8) rotate(-1deg); */
|
||||
transform: scaleY(0.8);
|
||||
left: 720px;
|
||||
}
|
||||
.TE307 {
|
||||
top: 460px;
|
||||
/* transform: scaleY(0.8) rotate(-1deg); */
|
||||
transform: scaleY(0.8);
|
||||
left: 720px;
|
||||
}
|
||||
.TE308 {
|
||||
top: 400px;
|
||||
transform: scaleY(0.8);
|
||||
left: 860px;
|
||||
}
|
||||
.TE309 {
|
||||
top: 400px;
|
||||
transform: scaleY(0.8);
|
||||
left: 1000px;
|
||||
}
|
||||
.TE310 {
|
||||
top: 400px;
|
||||
transform: scaleY(0.8);
|
||||
left: 1140px;
|
||||
}
|
||||
.TE311 {
|
||||
top: 340px;
|
||||
transform: scaleY(0.8);
|
||||
left: 1280px;
|
||||
}
|
||||
.TE312 {
|
||||
top: 400px;
|
||||
transform: scaleY(0.8);
|
||||
left: 1280px;
|
||||
}
|
||||
.TE313 {
|
||||
top: 460px;
|
||||
transform: scaleY(0.8);
|
||||
left: 1280px;
|
||||
}
|
||||
.TE314 {
|
||||
top: 400px;
|
||||
transform: scaleY(0.8);
|
||||
left: 1420px;
|
||||
}
|
||||
.TE315 {
|
||||
top: 400px;
|
||||
transform: scaleY(0.8);
|
||||
left: 1560px;
|
||||
}
|
||||
.TE316 {
|
||||
top: 400px;
|
||||
transform: scaleY(0.8);
|
||||
left: 1700px;
|
||||
}
|
||||
.TE317 {
|
||||
top: 340px;
|
||||
transform: scaleY(0.8);
|
||||
left: 1840px;
|
||||
}
|
||||
.TE318 {
|
||||
top: 400px;
|
||||
transform: scaleY(0.8);
|
||||
left: 1840px;
|
||||
}
|
||||
.TE319 {
|
||||
top: 460px;
|
||||
transform: scaleY(0.8);
|
||||
left: 1840px;
|
||||
}
|
||||
|
||||
/** right **/
|
||||
.TE327 {
|
||||
top: 152px;
|
||||
left: 2000px;
|
||||
transform: scale(0.8) skewX(5deg);
|
||||
}
|
||||
.TE320 {
|
||||
top: 252px;
|
||||
left: 2020px;
|
||||
transform: scale(0.8) skewX(7deg);
|
||||
}
|
||||
.TE321 {
|
||||
top: 400px;
|
||||
left: 2040px;
|
||||
transform: scale(0.8) skewX(7deg);
|
||||
}
|
||||
.TE322 {
|
||||
top: 532px;
|
||||
left: 2060px;
|
||||
transform: scale(0.8) skewX(7deg);
|
||||
}
|
||||
.TE330 {
|
||||
top: 656px;
|
||||
left: 2080px;
|
||||
transform: scale(0.8) skewX(7deg);
|
||||
}
|
||||
.TE323 {
|
||||
top: 152px;
|
||||
left: 2100px;
|
||||
transform: scale(0.8) skewX(7deg);
|
||||
}
|
||||
.TE328 {
|
||||
top: 252px;
|
||||
left: 2120px;
|
||||
transform: scale(0.8) skewX(7deg);
|
||||
}
|
||||
.TE331 {
|
||||
top: 400px;
|
||||
left: 2140px;
|
||||
transform: scale(0.8) skewX(7deg);
|
||||
}
|
||||
.TE329 {
|
||||
top: 532px;
|
||||
left: 2160px;
|
||||
transform: scale(0.8) skewX(7deg);
|
||||
}
|
||||
.TE326 {
|
||||
top: 656px;
|
||||
left: 2180px;
|
||||
transform: scale(0.8) skewX(7deg);
|
||||
}
|
||||
.TE324 {
|
||||
top: 252px;
|
||||
left: 2220px;
|
||||
transform: scale(0.8) skewX(7deg);
|
||||
}
|
||||
.TE332 {
|
||||
top: 400px;
|
||||
left: 2260px;
|
||||
transform: scale(0.8) skewX(7deg);
|
||||
}
|
||||
.TE325 {
|
||||
top: 532px;
|
||||
left: 2260px;
|
||||
transform: scale(0.8) skewX(7deg);
|
||||
}
|
||||
@@ -3,6 +3,7 @@ import EnterToFloorOne from "./videoComponents/EnterToFloor1";
|
||||
import EnterToFloorTwo from "./videoComponents/EnterToFloor2";
|
||||
import FloorOneToTwo from "./videoComponents/Floor1To2";
|
||||
import FloorTwoToOne from "./videoComponents/Floor2To1";
|
||||
import FloorToFour from "./videoComponents/FloorToFour";
|
||||
import { useRef, useEffect, useReducer } from "react";
|
||||
import { AnimatePresence } from "framer-motion";
|
||||
|
||||
@@ -47,6 +48,17 @@ const opacityReducer = (state, action) => {
|
||||
enterVideo: 0,
|
||||
};
|
||||
}
|
||||
case "to-4": {
|
||||
return {
|
||||
...initOpacity,
|
||||
// FloorToFour: 1,
|
||||
enterToFloorTwo: 0,
|
||||
floorOneToTwo: 0,
|
||||
enterVideo: 0,
|
||||
floorToFour:1,
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
@@ -61,7 +73,7 @@ function VideoContainer(props) {
|
||||
if (floor == 1) {
|
||||
if (lastFloor.current == 2 || lastFloor.current == 3) {
|
||||
dispatch({ type: "floor-2-to-1" });
|
||||
} else {
|
||||
} else if (lastFloor.current == 4) {
|
||||
dispatch({ type: "enter-to-1" });
|
||||
}
|
||||
} else if (floor == 2) {
|
||||
@@ -69,17 +81,19 @@ function VideoContainer(props) {
|
||||
dispatch({ type: "floor-1-to-2" });
|
||||
} else if (lastFloor.current == 3) {
|
||||
// 视频不变画面隐藏,通过判断floor的值隐藏3显示2
|
||||
} else {
|
||||
dispatch({ type: "enter-to-2" });
|
||||
} else if (lastFloor.current == 4) {
|
||||
dispatch({ type: "floor-1-to-2" });
|
||||
}
|
||||
} else if (floor == 3) {
|
||||
if (lastFloor.current == 1) {
|
||||
dispatch({ type: "floor-1-to-2" });
|
||||
} else if (lastFloor.current == 2) {
|
||||
// 视频不变画面隐藏，通过判断floor的值隐藏2显示3
|
||||
} else {
|
||||
dispatch({ type: "enter-to-2" });
|
||||
} else if (lastFloor.current == 4) {
|
||||
dispatch({ type: "floor-1-to-2" });
|
||||
}
|
||||
} else if (floor == 4) {
|
||||
dispatch({ type: "to-4" });
|
||||
}
|
||||
lastFloor.current = floor;
|
||||
}
|
||||
@@ -113,6 +127,7 @@ function VideoContainer(props) {
|
||||
preFloor={preFloor}
|
||||
/>
|
||||
<FloorTwoToOne key="2-to-1" opacity={opacity.floorTwoToOne} />
|
||||
<FloorToFour key="to-4" opacity={opacity.floorToFour} />
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,16 +1,30 @@
|
||||
import { useState, useRef } from "react";
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import cls from "./index.module.css";
|
||||
import Chart2 from "../../../Common/TimeFireDir";
|
||||
import Chart1 from "../../../Common/ForecastTemperature";
|
||||
import VideoContainer from "./VideoContainer";
|
||||
|
||||
function KilnCenter() {
|
||||
const [floor, setFloor] = useState(0);
|
||||
function KilnCenter({ onFloorChange }) {
|
||||
const [floor, setFloor] = useState(1); // 初始值设置为 1
|
||||
const preFloor = useRef();
|
||||
|
||||
useEffect(() => {
|
||||
onFloorChange(floor);
|
||||
}, [floor, onFloorChange]);
|
||||
|
||||
function onFloorUpdate(flr) {
|
||||
preFloor.current = floor;
|
||||
setFloor(flr);
|
||||
onFloorChange(flr);
|
||||
}
|
||||
|
||||
const subMenuStyle = {
|
||||
marginLeft: floor === 4? "400px" : "0",
|
||||
};
|
||||
|
||||
const colorStyle = {
|
||||
right: floor === 4? "0px" : "400px",
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="bgKilnInner"
|
||||
@@ -23,12 +37,22 @@ function KilnCenter() {
|
||||
}}
|
||||
>
|
||||
{/* 时间火向数据 */}
|
||||
<div
|
||||
className="fireAndTime"
|
||||
style={{ position: "absolute", top: "-112px", height: "212px" }}
|
||||
>
|
||||
<Chart2 />
|
||||
</div>
|
||||
{floor === 4 && (
|
||||
<div
|
||||
className="fireAndTime"
|
||||
style={{ position: "absolute", top: "-112px", height: "400px" }}
|
||||
>
|
||||
<Chart1 />
|
||||
</div>
|
||||
)}
|
||||
{floor!== 4 && (
|
||||
<div
|
||||
className="fireAndTime"
|
||||
style={{ position: "absolute", top: "-112px", height: "212px" }}
|
||||
>
|
||||
<Chart2 />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* menu */}
|
||||
<div
|
||||
@@ -36,10 +60,11 @@ function KilnCenter() {
|
||||
style={{
|
||||
display: "flex",
|
||||
marginBottom: "24px",
|
||||
justifyContent: "center",
|
||||
...subMenuStyle,
|
||||
justifyContent: "center"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
<div
|
||||
className={
|
||||
"flr flr1 " + cls.menuItem + " " + (floor === 1 ? cls.active : "")
|
||||
}
|
||||
@@ -49,7 +74,7 @@ function KilnCenter() {
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
"flr flr2 " + cls.menuItem + " " + (floor === 2 ? cls.active : "")
|
||||
"flr flr2 " + cls.menuItem + " " + (floor === 2? cls.active : "")
|
||||
}
|
||||
onClick={() => onFloorUpdate(2)}
|
||||
>
|
||||
@@ -57,12 +82,20 @@ function KilnCenter() {
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
"flr flr2 " + cls.menuItem + " " + (floor === 3 ? cls.active : "")
|
||||
"flr flr2 " + cls.menuItem + " " + (floor === 3? cls.active : "")
|
||||
}
|
||||
onClick={() => onFloorUpdate(3)}
|
||||
>
|
||||
溶液速度
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
"flr flr1 " + cls.menuItem + " " + (floor === 4? cls.active : "")
|
||||
}
|
||||
onClick={() => onFloorUpdate(4)}
|
||||
>
|
||||
窑炉预测
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 颜色指示图 */}
|
||||
@@ -70,7 +103,7 @@ function KilnCenter() {
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "30px",
|
||||
right: "450px",
|
||||
...colorStyle,
|
||||
width: "300px",
|
||||
height: "41px",
|
||||
}}
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
}
|
||||
|
||||
.menuItem:not(:first-child) {
|
||||
margin-left: 50px;
|
||||
margin-left:20px;
|
||||
}
|
||||
|
||||
.videoLayer2 {
|
||||
@@ -43,4 +43,4 @@
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,118 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-27 08:38:07
|
||||
* @LastEditTime: 2024-08-28 15:28:39
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
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/forecastIndex";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import TopColorBlock from "../../components/forecastTopColorBlock";
|
||||
import myImage from '../../../../../assets/toFourBack.png';
|
||||
function FloorToFour(props) {
|
||||
const fireInfo = useSelector((state) => state.fireInfo);
|
||||
const fireDir = fireInfo?.fireDirection || null;
|
||||
const [fireCanPlay, setFireCanPlay] = useState(false);
|
||||
|
||||
// const vd = useRef(null);
|
||||
const show = props.opacity || 0;
|
||||
|
||||
// useEffect(() => {
|
||||
// if (show) {
|
||||
// vd.current.play();
|
||||
// setTimeout(() => {
|
||||
// // console.log("开启2-1的火播放");
|
||||
// setFireCanPlay(true);
|
||||
// }, 1800);
|
||||
// }
|
||||
// if (!show) setFireCanPlay(false);
|
||||
// return () => {
|
||||
// // console.log("关闭2-1的火播放");
|
||||
// setFireCanPlay(false);
|
||||
// };
|
||||
// }, [show]);
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{show && (
|
||||
<motion.div
|
||||
className="video-wrapper"
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: "0px",
|
||||
left: "0px",
|
||||
width: "calc(100% - 50px)",
|
||||
height: "calc(100% - 7px)",
|
||||
zIndex: -998,
|
||||
overflow: "clip",
|
||||
}}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0, transition: { duration: 0.2, delay: 0.2 } }}
|
||||
>
|
||||
<div>
|
||||
<img src={myImage} style={{ width: '1726px', height: '695px',position: "absolute",
|
||||
top: "300px",
|
||||
left: "950px",
|
||||
|
||||
zIndex: -9, }} alt="Example" />
|
||||
</div>
|
||||
{/* <video ref={vd} muted>
|
||||
<source src="/video/2to1.webm" type="video/mp4" />
|
||||
</video>
|
||||
|
||||
{fireCanPlay && fireDir == "东火" && (
|
||||
// {fireCanPlay && (
|
||||
<video
|
||||
src="/video/fire_top.webm"
|
||||
muted
|
||||
autoPlay
|
||||
loop
|
||||
width={3800}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "10px",
|
||||
left: "0px",
|
||||
zIndex: 9,
|
||||
}}
|
||||
></video>
|
||||
)}
|
||||
{fireCanPlay && fireDir == "西火" && (
|
||||
// {fireCanPlay && (
|
||||
<video
|
||||
src="/video/fire_down.webm"
|
||||
muted
|
||||
autoPlay
|
||||
loop
|
||||
width={3800}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "-12px",
|
||||
left: "-10px",
|
||||
zIndex: 9,
|
||||
}}
|
||||
></video>
|
||||
)} */}
|
||||
|
||||
<TopColorBlock />
|
||||
|
||||
<TemperatureTop
|
||||
style={{
|
||||
top: "200px",
|
||||
left: "652px",
|
||||
width: "2380px",
|
||||
zIndex: 10,
|
||||
}}
|
||||
/>
|
||||
<FeederStatus style={{ left: "680px" }} />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
export default FloorToFour;
|
||||
@@ -0,0 +1,125 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-28 15:27:46
|
||||
* @LastEditTime: 2024-08-29 09:46:32
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
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/forecastIndex";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
// import TopColorBlock from "../../components/TopColorBlock";
|
||||
import TopColorBlock from "../../components/forecastTopColorBlock";
|
||||
function FloorTwoToOne(props) {
|
||||
const fireInfo = useSelector((state) => state.fireInfo);
|
||||
const fireDir = fireInfo?.fireDirection || null;
|
||||
const [fireCanPlay, setFireCanPlay] = useState(false);
|
||||
|
||||
const vd = useRef(null);
|
||||
const show = props.opacity || 0;
|
||||
|
||||
useEffect(() => {
|
||||
if (show) {
|
||||
vd.current.play();
|
||||
setTimeout(() => {
|
||||
// console.log("开启2-1的火播放");
|
||||
setFireCanPlay(true);
|
||||
}, 1800);
|
||||
}
|
||||
if (!show) setFireCanPlay(false);
|
||||
return () => {
|
||||
// console.log("关闭2-1的火播放");
|
||||
setFireCanPlay(false);
|
||||
};
|
||||
}, [show]);
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{show && (
|
||||
<motion.div
|
||||
className="video-wrapper"
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: "0px",
|
||||
left: "0px",
|
||||
width: "calc(100% - 500px)",
|
||||
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 style={{
|
||||
position: "fixed",
|
||||
top: "10px",
|
||||
left: "70px",
|
||||
width: "calc(100% - 600px)",
|
||||
height: "calc(100% - 7px)",
|
||||
zIndex: -998,
|
||||
overflow: "clip",
|
||||
}} 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",
|
||||
width: "calc(100% - 500px)",
|
||||
height: "calc(100% - 7px)",
|
||||
left: "240px",
|
||||
zIndex: 9,
|
||||
}}
|
||||
></video>
|
||||
)}
|
||||
{fireCanPlay && fireDir == "西火" && (
|
||||
// {fireCanPlay && (
|
||||
<video
|
||||
src="/video/fire_down.webm"
|
||||
muted
|
||||
autoPlay
|
||||
loop
|
||||
width={3800}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "-12px",
|
||||
left: "-100px",
|
||||
width: "calc(100% - 500px)",
|
||||
height: "calc(100% - 7px)",
|
||||
left: "240px",
|
||||
zIndex: 9,
|
||||
}}
|
||||
></video>
|
||||
)}
|
||||
|
||||
<TopColorBlock />
|
||||
|
||||
<TemperatureTop
|
||||
style={{
|
||||
top: "200px",
|
||||
left: "652px",
|
||||
width: "2380px",
|
||||
zIndex: 10,
|
||||
}}
|
||||
/>
|
||||
<FeederStatus style={{ left: "680px" }} />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
export default FloorTwoToOne;
|
||||
@@ -0,0 +1,28 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-21 16:31:53
|
||||
* @LastEditTime: 2024-08-30 14:45:54
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
import React from 'react';
|
||||
import KilnPress from '../components/paramsInput';
|
||||
// import LiquidTrend from '../components/LiquidTrend';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
import cls from './index.module.scss';
|
||||
export default function Index({ onGetValueFromGrandChild }) {
|
||||
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 onSendValueToParent={onGetValueFromGrandChild} style={{ flex: 1, width: '100%', marginTop: '24px' }} />
|
||||
{/* <LiquidTrend style={{ flex: 1, width: '100%', marginTop: '24px' }} /> */}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-23 14:44:30
|
||||
* @LastEditTime: 2024-08-30 17:14:19
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
// 窑炉压力
|
||||
import cls from "./index.module.css";
|
||||
import BottomBarItem from "../../../../Common/BottomItemBackgroundForecast";
|
||||
import CommonChart from "../forecastRightChart/yield"
|
||||
import { useSelector } from "react-redux";
|
||||
import moment from "moment";
|
||||
import React, { useContext,useEffect,useState} from 'react'
|
||||
import { HomeContext } from '../../../../../pages/Home';
|
||||
function KilnBottomForecast(props) {
|
||||
const value = useContext(HomeContext);
|
||||
const kilnInfo = useSelector((state) => state.cutting);
|
||||
|
||||
console.log('forecastWeeklyChart', kilnInfo.forecastWeeklyChart);
|
||||
|
||||
let data = [];
|
||||
let xData = [];
|
||||
|
||||
kilnInfo.forecastWeeklyChart.forEach((ele) => {
|
||||
data.push(ele.sum);
|
||||
xData.push(moment(ele.dataTime).format('MM-DD'));
|
||||
});
|
||||
const [dataSource, setDataSource] = useState({
|
||||
color1: '#146CFF',
|
||||
color:'rgba(255, 194, 20, 1)',
|
||||
yName:'℃',
|
||||
// areaColor0:'rgba(18, 255, 245, 0.4)',
|
||||
areaColor1:'rgba(18, 255, 245, 0)',
|
||||
// msg: kilnOptimize.topTempAvgFor1h,
|
||||
xData,
|
||||
data: data? data : [],
|
||||
range:[-10,10],
|
||||
modelFlag: false
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setDataSource(prevDataSource => ({
|
||||
...prevDataSource,
|
||||
modelFlag: value
|
||||
}));
|
||||
}, [value]);
|
||||
|
||||
return (
|
||||
<BottomBarItem
|
||||
icon="yieldRate"
|
||||
title="综合良品率趋势"
|
||||
style={props.style}
|
||||
>
|
||||
{/* legend */}
|
||||
<div className={cls.legend}>
|
||||
<span className={cls.item}>
|
||||
实际值
|
||||
</span>
|
||||
<span className={cls.block}>
|
||||
预测值
|
||||
</span>
|
||||
</div>
|
||||
<div className={cls.chart}>
|
||||
<CommonChart dataSource={dataSource}/>
|
||||
</div>
|
||||
</BottomBarItem>
|
||||
)
|
||||
}
|
||||
export default KilnBottomForecast;
|
||||
@@ -0,0 +1,73 @@
|
||||
.chart {
|
||||
height: 100%;
|
||||
}
|
||||
.legend {
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
top: 30px;
|
||||
}
|
||||
.item{
|
||||
display: inline-block;
|
||||
margin-right: 30px;
|
||||
font-size: 11px;
|
||||
position: relative;
|
||||
color: #DFF1FE;
|
||||
}
|
||||
.item:before {
|
||||
content: "";
|
||||
width: 1vw;
|
||||
height: 0.1064vw;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -1.2vw;
|
||||
background-color: rgba(255, 194, 20, 1);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.item:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 0.4vw;
|
||||
height: 0.4vw;
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
background-color: rgba(255, 194, 20, 1);
|
||||
left: -1.1vw;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
.block{
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
font-size: 11px;
|
||||
position: relative;
|
||||
color: #DFF1FE;
|
||||
}
|
||||
/* .block {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
} */
|
||||
.block:before {
|
||||
content: "";
|
||||
width: 1vw;
|
||||
height: 0.1064vw;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -1.2vw;
|
||||
transform: translateY(-50%);
|
||||
background-color: #146CFF
|
||||
}
|
||||
.block:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 0.4vw;
|
||||
height: 0.4vw;
|
||||
background-color: #146CFF;
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
left: -1.1vw;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-23 14:44:30
|
||||
* @LastEditTime: 2024-08-30 17:03:44
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
// 窑炉压力
|
||||
import cls from "./index.module.css";
|
||||
import BottomBarItem from "../../../../Common/BottomItemBackgroundForecast";
|
||||
import CommonChart from "../forecastRightChart"
|
||||
import { useSelector } from "react-redux";
|
||||
import React, { useContext,useEffect,useState} from 'react'
|
||||
import { HomeContext } from '../../../../../pages/Home';
|
||||
function KilnMiddleForecast(props) {
|
||||
const value = useContext(HomeContext);
|
||||
const kilnOptimize = useSelector((state) => state.kilnOptimize);
|
||||
|
||||
const [dataSource, setDataSource] = useState({
|
||||
color1: 'rgba(0, 255, 245, 1)',
|
||||
color:'rgba(255, 194, 20, 1)',
|
||||
yName:'℃',
|
||||
// areaColor0:'rgba(18, 255, 245, 0.4)',
|
||||
areaColor1:'rgba(18, 255, 245, 0)',
|
||||
msg: kilnOptimize.topTempAvgFor1h,
|
||||
modelFlag: null,
|
||||
data: kilnOptimize.topTempAvgFor1h? kilnOptimize.topTempAvgFor1h.topTempAvgFor1h : [],
|
||||
range: [-10, 10]
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setDataSource(prevDataSource => ({
|
||||
...prevDataSource,
|
||||
modelFlag: value
|
||||
}));
|
||||
}, [value]);
|
||||
return (
|
||||
<BottomBarItem
|
||||
icon="kilnBottom"
|
||||
title="池底加权温度趋势"
|
||||
style={props.style}
|
||||
>
|
||||
{/* legend */}
|
||||
<div className={cls.legend}>
|
||||
<span className={cls.item}>
|
||||
实际值
|
||||
</span>
|
||||
<span className={cls.block}>
|
||||
预测值
|
||||
</span>
|
||||
</div>
|
||||
<div className={cls.chart}>
|
||||
<CommonChart dataSource={dataSource}/>
|
||||
</div>
|
||||
</BottomBarItem>
|
||||
)
|
||||
}
|
||||
export default KilnMiddleForecast;
|
||||
@@ -0,0 +1,73 @@
|
||||
.chart {
|
||||
height: 100%;
|
||||
}
|
||||
.legend {
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
top: 30px;
|
||||
}
|
||||
.item{
|
||||
display: inline-block;
|
||||
margin-right: 30px;
|
||||
font-size: 11px;
|
||||
position: relative;
|
||||
color: #DFF1FE;
|
||||
}
|
||||
.item:before {
|
||||
content: "";
|
||||
width: 1vw;
|
||||
height: 0.1064vw;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -1.2vw;
|
||||
background-color: rgba(255, 194, 20, 1);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.item:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 0.4vw;
|
||||
height: 0.4vw;
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
background-color: rgba(255, 194, 20, 1);
|
||||
left: -1.1vw;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
.block{
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
font-size: 11px;
|
||||
position: relative;
|
||||
color: #DFF1FE;
|
||||
}
|
||||
/* .block {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
} */
|
||||
.block:before {
|
||||
content: "";
|
||||
width: 1vw;
|
||||
height: 0.1064vw;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -1.2vw;
|
||||
transform: translateY(-50%);
|
||||
background-color: rgba(0, 255, 245, 1);
|
||||
}
|
||||
.block:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 0.4vw;
|
||||
height: 0.4vw;
|
||||
background-color: rgba(0, 255, 245, 1);
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
left: -1.1vw;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
@@ -1,3 +1,10 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-20 14:09:17
|
||||
* @LastEditTime: 2024-08-22 08:51:03
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
// 窑炉压力
|
||||
import cls from "./index.module.css";
|
||||
import BottomBarItem from "./../../../../../components/Common/BottomItemBackground";
|
||||
|
||||
@@ -1,3 +1,10 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-20 14:09:17
|
||||
* @LastEditTime: 2024-08-23 14:45:08
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
// 窑炉压力
|
||||
import cls from "./index.module.css";
|
||||
import BottomBarItem from "./../../../../../components/Common/BottomItemBackground";
|
||||
@@ -35,4 +42,4 @@ function KilnTop(props) {
|
||||
</BottomBarItem>
|
||||
)
|
||||
}
|
||||
export default KilnTop;
|
||||
export default KilnTop;
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-23 14:44:30
|
||||
* @LastEditTime: 2024-08-30 16:56:21
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
// 窑炉压力
|
||||
import cls from "./index.module.css";
|
||||
import BottomBarItem from "../../../../Common/BottomItemBackgroundForecast";
|
||||
import CommonChart from "../forecastRightChart"
|
||||
import { useSelector } from "react-redux";
|
||||
import React, { useContext,useEffect,useState} from 'react'
|
||||
import { HomeContext } from '../../../../../pages/Home';
|
||||
function LeftTopForecast(props) {
|
||||
const value = useContext(HomeContext);
|
||||
const kilnOptimize = useSelector((state) => state.kilnOptimize);
|
||||
|
||||
const [dataSource, setDataSource] = useState({
|
||||
color1: 'rgba(0, 187, 255, 1)',
|
||||
color:'rgba(255, 194, 20, 1)',
|
||||
yName:'℃',
|
||||
// areaColor0:'rgba(18, 255, 245, 0.4)',
|
||||
areaColor1:'rgba(18, 255, 245, 0)',
|
||||
msg: kilnOptimize.topTempAvgFor1h,
|
||||
modelFlag: null,
|
||||
data: kilnOptimize.topTempAvgFor1h? kilnOptimize.topTempAvgFor1h.topTempAvgFor1h : [],
|
||||
range: [-10, 10]
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setDataSource(prevDataSource => ({
|
||||
...prevDataSource,
|
||||
modelFlag: value
|
||||
}));
|
||||
}, [value]);
|
||||
return (
|
||||
<BottomBarItem
|
||||
icon="kilnTop"
|
||||
title="碹顶加权温度趋势"
|
||||
style={props.style}
|
||||
>
|
||||
{/* legend */}
|
||||
<div className={cls.legend}>
|
||||
<span className={cls.item}>
|
||||
实际值
|
||||
</span>
|
||||
<span className={cls.block}>
|
||||
预测值
|
||||
</span>
|
||||
</div>
|
||||
<div className={cls.chart}>
|
||||
<CommonChart dataSource={dataSource}/>
|
||||
</div>
|
||||
</BottomBarItem>
|
||||
)
|
||||
}
|
||||
export default LeftTopForecast;
|
||||
@@ -0,0 +1,80 @@
|
||||
.chart {
|
||||
height: 100%;
|
||||
}
|
||||
.legend {
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
top: 30px;
|
||||
}
|
||||
.item{
|
||||
display: inline-block;
|
||||
margin-right: 30px;
|
||||
font-size: 11px;
|
||||
position: relative;
|
||||
color: #DFF1FE;
|
||||
}
|
||||
/* .block {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
} */
|
||||
.item:before {
|
||||
content: "";
|
||||
width: 1vw;
|
||||
height: 0.1064vw;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -1.2vw;
|
||||
background-color: rgba(255, 194, 20, 1);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.item:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 0.4vw;
|
||||
height: 0.4vw;
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
background-color: rgba(255, 194, 20, 1);
|
||||
left: -1.1vw;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
.block{
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
font-size: 11px;
|
||||
position: relative;
|
||||
color: #DFF1FE;
|
||||
}
|
||||
/* .block {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
} */
|
||||
.block:before {
|
||||
content: "";
|
||||
width: 1vw;
|
||||
height: 0.1064vw;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -1.2vw;
|
||||
transform: translateY(-50%);
|
||||
background-color: rgba(0, 187, 255, 1);
|
||||
}
|
||||
.block:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 0.4vw;
|
||||
height: 0.4vw;
|
||||
background-color: rgba(0, 187, 255, 1);
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
left: -1.1vw;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-22 09:09:25
|
||||
* @LastEditTime: 2024-08-22 14:39:13
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
import React, { useState } from'react';
|
||||
import cls from "./index.module.css";
|
||||
|
||||
function DayNightToggle() {
|
||||
const [day, setDay] = useState(1);
|
||||
// const preFloor = useRef();
|
||||
function onDayUpdate(day) {
|
||||
// preFloor.current = floor;
|
||||
setDay(day);
|
||||
// onFloorChange(flr);
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className="subMenu"
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
"day day1 " + cls.menuItem + " " + (day === 1 ? cls.active : "")
|
||||
}
|
||||
onClick={() => onDayUpdate(1)}
|
||||
>
|
||||
白天
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
"day day2 " + cls.menuItem + " " + (day === 2 ? cls.active : "")
|
||||
}
|
||||
onClick={() => onDayUpdate(2)}
|
||||
>
|
||||
夜晚
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DayNightToggle;
|
||||
@@ -0,0 +1,26 @@
|
||||
.menuItem {
|
||||
/* transition: all 0.3s ease-out; */
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding:5px 40px;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
letter-spacing: 6px;
|
||||
background: url(../../../../../assets/dayNight.png) no-repeat;
|
||||
background-size: 100% 90%;
|
||||
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 {
|
||||
background: url(../../../../../assets/dayNightChange.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.menuItem:not(:first-child) {
|
||||
margin-left:20px;
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-28 09:25:58
|
||||
* @LastEditTime: 2024-08-28 10:22:34
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
// import * as echarts from "echarts";
|
||||
|
||||
export default function getOptions(data, times, range, yName,forecastList,color,color1,areaStyle,areaStyle1) {
|
||||
return {
|
||||
grid: { top: 38, right: 44, bottom: 20, left: 48 },
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data:times,
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: "#213259",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位: "+yName,
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
align: "right",
|
||||
},
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
formatter: "{value}",
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#213259",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#213259a0",
|
||||
},
|
||||
},
|
||||
min:range[0],
|
||||
max:range[1]
|
||||
},
|
||||
// visualMap: {
|
||||
// show: false,
|
||||
// dimension: 1,
|
||||
// pieces: pieces
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color:'inherit'
|
||||
},
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
// prettier-ignore
|
||||
lineStyle:{
|
||||
color:color
|
||||
},
|
||||
data: data,
|
||||
// markLine: {
|
||||
// symbol: 'none',
|
||||
// label:{
|
||||
// show:true,
|
||||
// position:'end',
|
||||
// formatter:'标准线',
|
||||
// color:'#FFCB59',
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// lineStyle:{
|
||||
// color:'#FFCB59'
|
||||
// },
|
||||
// data: seriesData.markLineData
|
||||
// },
|
||||
areaStyle:areaStyle
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color:'inherit'
|
||||
},
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle:{
|
||||
color:color1
|
||||
},
|
||||
areaStyle:areaStyle1,
|
||||
// prettier-ignore
|
||||
data: forecastList,
|
||||
// markLine: {
|
||||
// symbol: 'none',
|
||||
// label:{
|
||||
// show:true,
|
||||
// position:'end',
|
||||
// formatter:'标准线',
|
||||
// color:'#FFCB59',
|
||||
// fontSize: 12,
|
||||
// },
|
||||
|
||||
// data: seriesData.markLineData
|
||||
// },
|
||||
// areaStyle: seriesData.areaStyle
|
||||
}
|
||||
],
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
},
|
||||
className: "xc-chart-tooltip",
|
||||
// backgroundColor: ''
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-28 09:25:58
|
||||
* @LastEditTime: 2024-08-30 16:57:38
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
import cls from "./index.module.css";
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import getOptions from "./chart.config";
|
||||
import * as echarts from "echarts";
|
||||
import { useState } from "react";
|
||||
|
||||
function CommonChart(props) {
|
||||
const { dataSource } = props;
|
||||
|
||||
const data = dataSource.data || [];
|
||||
const modelFlag = dataSource.modelFlag || false;
|
||||
const color1 = dataSource.color1 || [];
|
||||
const color = dataSource.color || [];
|
||||
const yName = dataSource.yName;
|
||||
const currentTime = new Date();
|
||||
const times = [];
|
||||
// }
|
||||
let forecastList = []
|
||||
if (modelFlag === true) {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let item = data[i];
|
||||
let min = item - 5;
|
||||
let max = item + 5;
|
||||
let randomValue = Math.random() * (max - min) + min;
|
||||
forecastList.push(randomValue.toFixed(1));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
for(let i = 0; i < 7; i++) {
|
||||
currentTime.setMinutes(currentTime.getMinutes() - 10);
|
||||
const timeString = `${currentTime.getHours()}:${currentTime.getMinutes().toString().padStart(2, '0')}`;
|
||||
times.unshift(timeString);
|
||||
}
|
||||
let areaStyle= {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: color,
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: dataSource.areaColor1,
|
||||
},
|
||||
]),
|
||||
origin: "start",
|
||||
}
|
||||
let areaStyle1 = {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color:color1,
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: dataSource.areaColor1,
|
||||
},
|
||||
]),
|
||||
origin: "start",
|
||||
}
|
||||
// let pieces = [
|
||||
// {
|
||||
// lte: dataSource.msg ? dataSource.msg.lte : 0,
|
||||
// color: "#FFCB59",
|
||||
// },
|
||||
// {
|
||||
// gt: dataSource.msg ? dataSource.msg.lte : 0,
|
||||
// lte: dataSource.msg ? dataSource.msg.gt : 0,
|
||||
// color: dataSource.color,
|
||||
// },
|
||||
// {
|
||||
// gt: dataSource.msg ? dataSource.msg.gt : 0,
|
||||
// color: "#FFCB59",
|
||||
// },
|
||||
// ];
|
||||
|
||||
const [yRange] = useState([]);
|
||||
// useEffect(() => {
|
||||
// if (data.length > 0) {
|
||||
// var standardValue = dataSource.msg.sp;
|
||||
// var maxY = (standardValue * 100 + dataSource.range[1] * 100) / 100;
|
||||
// var minY = (standardValue * 100 + dataSource.range[0] * 100) / 100;
|
||||
// // 计算最大最小值是否超标
|
||||
// const maxValue = Math.max(...data);
|
||||
// const minValue = Math.min(...data);
|
||||
// if (maxValue > maxY) {
|
||||
// maxY = Math.ceil(maxValue);
|
||||
// }
|
||||
// if (minValue < minY) {
|
||||
// minY = Math.floor(minValue);
|
||||
// }
|
||||
// setYRange([minY, maxY]);
|
||||
// }
|
||||
// }, [dataSource, data]);
|
||||
|
||||
return (
|
||||
<div className={cls.commonChart}>
|
||||
{data.length > 0 && (
|
||||
<ReactECharts
|
||||
option={getOptions(data, times, yRange, yName,forecastList,color,color1,areaStyle,areaStyle1)}
|
||||
style={{ height: "100%" }}
|
||||
/>
|
||||
)}
|
||||
{data.length <= 0 && (
|
||||
<p
|
||||
style={{
|
||||
paddingTop: "88px",
|
||||
color: "#fffc",
|
||||
textAlign: "center",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CommonChart;
|
||||
@@ -0,0 +1,3 @@
|
||||
.commonChart {
|
||||
height: 100%;
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
|
||||
import cls from "./index.module.css";
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import getOptions from "./chart.config";
|
||||
import * as echarts from "echarts";
|
||||
import { useState } from "react";
|
||||
|
||||
function CommonChart(props) {
|
||||
const { dataSource } = props;
|
||||
const data = dataSource.data || [];
|
||||
const modelFlag = dataSource.modelFlag || false
|
||||
const color1 = dataSource.color1 || [];
|
||||
const color = dataSource.color || [];
|
||||
const yName = dataSource.yName;
|
||||
const xData = dataSource.xData || [];
|
||||
console.log('xData',xData);
|
||||
let forecastList = [];
|
||||
if (modelFlag === true) {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let item = data[i];
|
||||
let min = item - 5;
|
||||
let max = item + 5;
|
||||
let randomValue = Math.random() * (max - min) + min;
|
||||
forecastList.push(randomValue.toFixed(1));
|
||||
}
|
||||
}
|
||||
let areaStyle= {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: color,
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: dataSource.areaColor1,
|
||||
},
|
||||
]),
|
||||
origin: "start",
|
||||
}
|
||||
let areaStyle1 = {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color:color1,
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: dataSource.areaColor1,
|
||||
},
|
||||
]),
|
||||
origin: "start",
|
||||
}
|
||||
// let pieces = [
|
||||
// {
|
||||
// lte: dataSource.msg ? dataSource.msg.lte : 0,
|
||||
// color: "#FFCB59",
|
||||
// },
|
||||
// {
|
||||
// gt: dataSource.msg ? dataSource.msg.lte : 0,
|
||||
// lte: dataSource.msg ? dataSource.msg.gt : 0,
|
||||
// color: dataSource.color,
|
||||
// },
|
||||
// {
|
||||
// gt: dataSource.msg ? dataSource.msg.gt : 0,
|
||||
// color: "#FFCB59",
|
||||
// },
|
||||
// ];
|
||||
|
||||
const [yRange] = useState([]);
|
||||
// useEffect(() => {
|
||||
// if (data.length > 0) {
|
||||
// var standardValue = dataSource.msg.sp;
|
||||
// var maxY = (standardValue * 100 + dataSource.range[1] * 100) / 100;
|
||||
// var minY = (standardValue * 100 + dataSource.range[0] * 100) / 100;
|
||||
// // 计算最大最小值是否超标
|
||||
// const maxValue = Math.max(...data);
|
||||
// const minValue = Math.min(...data);
|
||||
// if (maxValue > maxY) {
|
||||
// maxY = Math.ceil(maxValue);
|
||||
// }
|
||||
// if (minValue < minY) {
|
||||
// minY = Math.floor(minValue);
|
||||
// }
|
||||
// setYRange([minY, maxY]);
|
||||
// }
|
||||
// }, [dataSource, data]);
|
||||
|
||||
return (
|
||||
<div className={cls.commonChart}>
|
||||
{data.length > 0 && (
|
||||
<ReactECharts
|
||||
option={getOptions(data, xData, yRange, yName,forecastList,color,color1,areaStyle,areaStyle1)}
|
||||
style={{ height: "100%" }}
|
||||
/>
|
||||
)}
|
||||
{data.length <= 0 && (
|
||||
<p
|
||||
style={{
|
||||
paddingTop: "88px",
|
||||
color: "#fffc",
|
||||
textAlign: "center",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CommonChart;
|
||||
@@ -0,0 +1,366 @@
|
||||
import { useSelector } from "react-redux";
|
||||
import React from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { ReactComponent as B1 } from "./pic/b1.svg";
|
||||
import { ReactComponent as B2 } from "./pic/b2.svg";
|
||||
import { ReactComponent as B3 } from "./pic/b3.svg";
|
||||
import { ReactComponent as B4 } from "./pic/b4.svg";
|
||||
import { ReactComponent as B5 } from "./pic/b5.svg";
|
||||
import { ReactComponent as B6 } from "./pic/b6.svg";
|
||||
import { ReactComponent as B7 } from "./pic/b7.svg";
|
||||
import { ReactComponent as B8 } from "./pic/b8.svg";
|
||||
import { ReactComponent as T1 } from "./pic/t1.svg";
|
||||
import { ReactComponent as T2 } from "./pic/t2.svg";
|
||||
import { ReactComponent as T3 } from "./pic/t3.svg";
|
||||
import { ReactComponent as T4 } from "./pic/t4.svg";
|
||||
import { ReactComponent as T5 } from "./pic/t5.svg";
|
||||
import { ReactComponent as T6 } from "./pic/t6.svg";
|
||||
import { ReactComponent as T7 } from "./pic/t7.svg";
|
||||
import { ReactComponent as T8 } from "./pic/t8.svg";
|
||||
|
||||
const TopColorBlock = ({ condition }) => {
|
||||
const tempTop = useSelector((state) => state.temperature.top);
|
||||
function returnColor(n) {
|
||||
let num = Number(tempTop[n].slice(0, tempTop[n].length - 1));
|
||||
if (num <= 100) {
|
||||
return "rgba(96, 0, 189, 0.7)";
|
||||
} else if (num > 100 && num <= 200) {
|
||||
return "rgba(102, 7, 255, 0.7)";
|
||||
} else if (num > 200 && num <= 300) {
|
||||
return "rgba(10, 20, 255, 0.7)";
|
||||
} else if (num > 300 && num <= 400) {
|
||||
return "rgba(7, 89, 255, 0.7)";
|
||||
} else if (num > 400 && num <= 500) {
|
||||
return "rgba(7, 139, 255, 0.7)";
|
||||
} else if (num > 500 && num <= 600) {
|
||||
return "rgba(7, 194, 255, 0.7)";
|
||||
} else if (num > 600 && num <= 700) {
|
||||
return "rgba(7, 255, 253, 0.7)";
|
||||
} else if (num > 700 && num <= 800) {
|
||||
return "rgba(7, 255, 205, 0.7)";
|
||||
} else if (num > 800 && num <= 900) {
|
||||
return "rgba(20, 237, 127, 0.7)";
|
||||
} else if (num > 900 && num <= 1000) {
|
||||
return "rgba(0, 193, 39, 0.7)";
|
||||
} else if (num > 1000 && num <= 1100) {
|
||||
return "rgba(147, 210, 1, 0.7)";
|
||||
} else if (num > 1100 && num <= 1200) {
|
||||
return "rgba(206, 206, 0, 0.7)";
|
||||
} else if (num > 1200 && num <= 1300) {
|
||||
return "rgba(255, 226, 13, 0.7)";
|
||||
} else if (num > 1300 && num <= 1400) {
|
||||
return "rgba(249, 240, 146, 0.7)";
|
||||
} else if (num > 1400 && num <= 1500) {
|
||||
return "rgba(250, 204, 93, 0.7)";
|
||||
} else if (num > 1500 && num <= 1600) {
|
||||
return "rgba(240, 139, 32, 0.7)";
|
||||
} else if (num > 1600 && num <= 1700) {
|
||||
return "rgba(241, 88, 26, 0.7)";
|
||||
} else if (num > 1700 && num <= 1800) {
|
||||
return "rgba(255, 0, 0, 0.7)";
|
||||
} else if (num > 1800 && num <= 1900) {
|
||||
return "rgba(182, 0, 0, 0.7)";
|
||||
} else if (num > 1900) {
|
||||
return "rgba(140, 0, 33, 0.7)";
|
||||
}
|
||||
}
|
||||
function returnColor2(n) {
|
||||
let num = Number(tempTop[n].slice(0, tempTop[n].length - 1));
|
||||
if (num <= 100) {
|
||||
return "rgba(96, 0, 189, 0.9)";
|
||||
} else if (num > 100 && num <= 200) {
|
||||
return "rgba(102, 7, 255, 0.9)";
|
||||
} else if (num > 200 && num <= 300) {
|
||||
return "rgba(10, 20, 255, 0.9)";
|
||||
} else if (num > 300 && num <= 400) {
|
||||
return "rgba(7, 89, 255, 0.9)";
|
||||
} else if (num > 400 && num <= 500) {
|
||||
return "rgba(7, 139, 255, 0.9)";
|
||||
} else if (num > 500 && num <= 600) {
|
||||
return "rgba(7, 194, 255, 0.9)";
|
||||
} else if (num > 600 && num <= 700) {
|
||||
return "rgba(7, 255, 253, 0.9)";
|
||||
} else if (num > 700 && num <= 800) {
|
||||
return "rgba(7, 255, 205, 0.9)";
|
||||
} else if (num > 800 && num <= 900) {
|
||||
return "rgba(20, 237, 127, 0.9)";
|
||||
} else if (num > 900 && num <= 1000) {
|
||||
return "rgba(0, 193, 39, 0.9)";
|
||||
} else if (num > 1000 && num <= 1100) {
|
||||
return "rgba(147, 210, 1, 0.9)";
|
||||
} else if (num > 1100 && num <= 1200) {
|
||||
return "rgba(206, 206, 0, 0.9)";
|
||||
} else if (num > 1200 && num <= 1300) {
|
||||
return "rgba(255, 226, 13, 0.9)";
|
||||
} else if (num > 1300 && num <= 1400) {
|
||||
return "rgba(249, 240, 146, 0.9)";
|
||||
} else if (num > 1400 && num <= 1500) {
|
||||
return "rgba(250, 204, 93, 0.9)";
|
||||
} else if (num > 1500 && num <= 1600) {
|
||||
return "rgba(240, 139, 32, 0.9)";
|
||||
} else if (num > 1600 && num <= 1700) {
|
||||
return "rgba(241, 88, 26, 0.9)";
|
||||
} else if (num > 1700 && num <= 1800) {
|
||||
return "rgba(255, 0, 0, 0.9)";
|
||||
} else if (num > 1800 && num <= 1900) {
|
||||
return "rgba(182, 0, 0, 0.9)";
|
||||
} else if (num > 1900) {
|
||||
return "rgba(140, 0, 33, 0.9))";
|
||||
}
|
||||
}
|
||||
// 窑炉内部svg变色
|
||||
function BigSvg() {
|
||||
return (
|
||||
<svg
|
||||
width="2050px"
|
||||
height="700px"
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "320px",
|
||||
left: "970px",
|
||||
zIndex: 0,
|
||||
}}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="Gradient1" x1="0" x2="1" y1="0" y2="0">
|
||||
<stop offset="0%" stopColor={returnColor2("TE201")} />
|
||||
<stop offset="9%" stopColor={returnColor2("TE202")} />
|
||||
<stop offset="18%" stopColor={returnColor2("TE203")} />
|
||||
<stop offset="27%" stopColor={returnColor2("TE204")} />
|
||||
<stop offset="36%" stopColor={returnColor2("TE205")} />
|
||||
<stop offset="45%" stopColor={returnColor2("TE206")} />
|
||||
<stop offset="54%" stopColor={returnColor2("TE208")} />
|
||||
<stop offset="63%" stopColor={returnColor2("TE210")} />
|
||||
<stop offset="72%" stopColor={returnColor2("TE211")} />
|
||||
<stop offset="81%" stopColor={returnColor2("TE212")} />
|
||||
<stop offset="90%" stopColor={returnColor2("TE213")} />
|
||||
<stop offset="100%" stopColor={returnColor2("TE213")} />
|
||||
</linearGradient>
|
||||
<linearGradient id="Gradient2" x1="0" x2="1" y1="0" y2="0">
|
||||
<stop offset="0%" stopColor={returnColor2("TE216")} />
|
||||
<stop offset="33%" stopColor={returnColor2("TE221")} />
|
||||
<stop offset="66%" stopColor={returnColor2("TE225")} />
|
||||
<stop offset="100%" stopColor={returnColor2("TE225")} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<polygon
|
||||
points="27 238,1310 238,1320 310,1330 310,1330 351,1320 361,1320 395,1076 395,1076 400,1020 400,1020 400,958 400,958 400,900 400,900 400,832 400,775 400,775 400,170 400,170 380,12 380"
|
||||
fill="url(#Gradient1)"
|
||||
/>
|
||||
<polygon
|
||||
points="1345 300,1410 296,1420 290,1390 76,1434 76,1434 83,1434 90,1530 88,1528 88,1530 120,1438 120,1446 178,1616 178,1620 210,1450 210,1462 300,1720 300,1726 333,1470 336,1480 415,1652 414,1658 444,1480 448,1490 523,1590 520, 1593 553,1448 553,1425 335,1424 342,1345 344"
|
||||
fill="url(#Gradient2)"
|
||||
/>
|
||||
{/* <polygon
|
||||
points="1350 300,1355 460,1670 290,1640 50,1688 50,1688 58,1800 58,1804 93,1692 93,1700 168,1900 168,1906 201,1706 200,1718 312,2024 311,2029 343,1724 344,1736 445,1940 444,1946 478,1740 478,1753 573,1874 573, 1878 608,1710 608,1678 349,1668 360,1590 360"
|
||||
fill="url(#Gradient2)"
|
||||
/> */}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
animate={{
|
||||
opacity: [0, 0, 0, 0.6, 1],
|
||||
transition: { duration: 0.3, delay: 1.5 },
|
||||
}}
|
||||
>
|
||||
<BigSvg />
|
||||
<B1
|
||||
style={{
|
||||
fill: returnColor("TE228"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "100px",
|
||||
left: "56px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.68,0.64)",
|
||||
}}
|
||||
/>
|
||||
<B2
|
||||
style={{
|
||||
fill: returnColor("TE230"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "100px",
|
||||
left: "48px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.68,0.64)",
|
||||
}}
|
||||
/>
|
||||
<B3
|
||||
style={{
|
||||
fill: returnColor("TE232"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "100px",
|
||||
left: "29px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.66,0.64)",
|
||||
}}
|
||||
/>
|
||||
<B4
|
||||
style={{
|
||||
fill: returnColor("TE234"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "100px",
|
||||
left: "21px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.66,0.64)",
|
||||
}}
|
||||
/>
|
||||
<B5
|
||||
style={{
|
||||
fill: returnColor("TE236"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "100px",
|
||||
left: "16px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.66,0.64)",
|
||||
}}
|
||||
/>
|
||||
<B6
|
||||
style={{
|
||||
fill: returnColor("TE238"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "100px",
|
||||
left: "10px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.66,0.64)",
|
||||
}}
|
||||
/>
|
||||
<B7
|
||||
style={{
|
||||
fill: returnColor("TE240"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "100px",
|
||||
left: "3px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.66,0.64)",
|
||||
}}
|
||||
/>
|
||||
<B8
|
||||
style={{
|
||||
fill: returnColor("TE242"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "100px",
|
||||
left: "-8px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.68,0.64)",
|
||||
}}
|
||||
/>
|
||||
<T1
|
||||
style={{
|
||||
fill: returnColor("TE227"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "110px",
|
||||
left: "48px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.68,0.64)",
|
||||
}}
|
||||
/>
|
||||
<T2
|
||||
style={{
|
||||
fill: returnColor("TE229"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "110px",
|
||||
left: "44px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.68,0.64)",
|
||||
}}
|
||||
/>
|
||||
<T3
|
||||
style={{
|
||||
fill: returnColor("TE231"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "110px",
|
||||
left: "36px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.68,0.64)",
|
||||
}}
|
||||
/>
|
||||
<T4
|
||||
style={{
|
||||
fill: returnColor("TE233"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "110px",
|
||||
left: "20px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.66,0.64)",
|
||||
}}
|
||||
/>
|
||||
<T5
|
||||
style={{
|
||||
fill: returnColor("TE235"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "110px",
|
||||
left: "16px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.66,0.64)",
|
||||
}}
|
||||
/>
|
||||
<T6
|
||||
style={{
|
||||
fill: returnColor("TE237"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "110px",
|
||||
left: "10px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.66,0.64)",
|
||||
}}
|
||||
/>
|
||||
<T7
|
||||
style={{
|
||||
fill: returnColor("TE239"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "110px",
|
||||
left: "4px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.66,0.64)",
|
||||
}}
|
||||
/>
|
||||
<T8
|
||||
style={{
|
||||
fill: returnColor("TE241"),
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: "110px",
|
||||
left: "-10px",
|
||||
zIndex: 0,
|
||||
transform: "scale(0.68,0.64)",
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TopColorBlock;
|
||||
@@ -0,0 +1 @@
|
||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM421.92,703.81c-2.21-.15-4-.39-5.76-.37-26.5.16-53,.46-79.48.44-4.48,0-5.5,1.52-5.71,5.7-.59,11.58-.8,11.57-12.2,11.61-1,0-2,.09-3,0-2.63-.22-3.4,1.09-3.54,3.56-.57,10-1.28,19.93-2,29.9-1.54,22.09-3.13,44.17-4.65,66.26-.56,8.08-1,16.16-1.46,24.91h6.08l60-.14c13.16,0,26.33-.19,39.49,0,3.89,0,5.23-1.25,5.21-5.17,0-5.82.55-11.64.86-17.46q1.85-34.66,3.69-69.34C420.3,737.36,421.07,721.06,421.92,703.81Z" transform="translate(277 -158)"/><path d="M421.92,703.81c-.85,17.25-1.62,33.55-2.46,49.84q-1.8,34.67-3.69,69.34c-.31,5.82-.9,11.64-.86,17.46,0,3.92-1.32,5.21-5.21,5.17-13.16-.14-26.33,0-39.49,0l-60,.14h-6.08c.5-8.75.9-16.83,1.46-24.91,1.52-22.09,3.11-44.17,4.65-66.26.7-10,1.41-19.93,2-29.9.14-2.47.91-3.78,3.54-3.56,1,.09,2,0,3,0,11.4,0,11.61,0,12.2-11.61.21-4.18,1.23-5.71,5.71-5.7,26.49,0,53-.28,79.48-.44C417.93,703.42,419.71,703.66,421.92,703.81Z" transform="translate(277 -158)"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1 @@
|
||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM544.59,703.38q-53.33,0-106.49,0c-2.87,0-3.72,1.28-3.8,3.94-.17,5.65-.58,11.3-.87,17-2,38.74-3.87,77.48-5.95,116.21-.21,3.84,1.08,5,4.69,5q51.72-.4,103.43-.61c2.88,0,4.18-.76,4.23-3.91.1-7.15.55-14.3.85-21.46,1.31-30.6,2.68-61.21,3.86-91.82C544.85,719.69,544.59,711.75,544.59,703.38Z" transform="translate(277 -158)"/><path d="M544.59,703.38c0,8.37.26,16.31-.05,24.24-1.18,30.61-2.55,61.22-3.86,91.82-.3,7.16-.75,14.31-.85,21.46-.05,3.15-1.35,3.89-4.23,3.91q-51.71.2-103.43.61c-3.61,0-4.9-1.14-4.69-5,2.08-38.73,4-77.47,5.95-116.21.29-5.65.7-11.3.87-17,.08-2.66.93-3.94,3.8-3.94Q491.3,703.43,544.59,703.38Z" transform="translate(277 -158)"/></svg>
|
||||
|
After Width: | Height: | Size: 872 B |
@@ -0,0 +1 @@
|
||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM558.89,703.13a13,13,0,0,0-.55,1.88q-2.9,68.16-5.8,136.31c-.11,2.69,1,3.48,3.53,3.43,6.33-.12,12.66,0,19-.08,29.5-.18,59-.44,88.49-.51,3.93,0,5.81-1,5.65-5.28-.18-4.65.31-9.32.41-14q1-48.24,2-96.46c.15-8.43,0-16.87,0-25.31Z" transform="translate(277 -158)"/><path d="M558.89,703.13H671.6c0,8.44.13,16.88,0,25.31q-.9,48.22-2,96.46c-.1,4.66-.59,9.33-.41,14,.16,4.3-1.72,5.27-5.65,5.28-29.49.07-59,.33-88.49.51-6.33,0-12.66,0-19,.08-2.53,0-3.64-.74-3.53-3.43q2.94-68.15,5.8-136.31A13,13,0,0,1,558.89,703.13Z" transform="translate(277 -158)"/></svg>
|
||||
|
After Width: | Height: | Size: 770 B |
@@ -0,0 +1 @@
|
||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM799.81,702.69a17.56,17.56,0,0,0-2.32-.43c-36,0-72,.14-107.93.1-3.94,0-4.13,2-4.18,5q-1,65.19-2.27,130.37c-.09,4.72,1,6.33,6,6.28q52-.46,103.93-.34c4.29,0,5.72-1,5.75-5.53.21-43.3.66-86.6,1-129.9C799.83,706.5,799.81,704.71,799.81,702.69Z" transform="translate(277 -158)"/><path d="M799.81,702.69c0,2,0,3.81,0,5.6-.37,43.3-.82,86.6-1,129.9,0,4.5-1.46,5.53-5.75,5.53q-52-.09-103.93.34c-5,.05-6.08-1.56-6-6.28q1.35-65.17,2.27-130.37c0-3,.24-5.06,4.18-5,36,0,72-.06,107.93-.1A17.56,17.56,0,0,1,799.81,702.69Z" transform="translate(277 -158)"/></svg>
|
||||
|
After Width: | Height: | Size: 770 B |
@@ -0,0 +1 @@
|
||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM812.91,702.15a15.47,15.47,0,0,0-.55,2.23q-.57,67.73-1.18,135.46c0,3.33,1.61,3.79,4.34,3.77q52-.43,104-.7c3.43,0,4.28-1.39,4.16-4.48q-.42-11-.52-22-.5-54.74-.9-109.46c0-3.3-.12-5.49-4.73-5.44-32.82.38-65.65.44-98.47.6Z" transform="translate(277 -158)"/><path d="M812.91,702.15H819c32.82-.16,65.65-.22,98.47-.6,4.61,0,4.71,2.14,4.73,5.44q.4,54.74.9,109.46.11,11,.52,22c.12,3.09-.73,4.47-4.16,4.48q-52,.23-104,.7c-2.73,0-4.37-.44-4.34-3.77q.68-67.73,1.18-135.46A15.47,15.47,0,0,1,812.91,702.15Z" transform="translate(277 -158)"/></svg>
|
||||
|
After Width: | Height: | Size: 758 B |
@@ -0,0 +1 @@
|
||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM1049,701.25h-5.47c-33.82.06-67.64.21-101.47.07-5,0-6.07,1.61-6,6.32q.85,65,1.21,129.94c0,4.25,1.39,5.3,5.44,5.27,34.83-.23,69.65-.25,104.47-.37,1.77,0,3.54-.24,5.76-.4C1051.66,795,1050.36,748.47,1049,701.25Z" transform="translate(277 -158)"/><path d="M1049,701.25c1.32,47.22,2.62,93.77,3.93,140.83-2.22.16-4,.4-5.76.4-34.82.12-69.64.14-104.47.37-4,0-5.41-1-5.44-5.27q-.37-65-1.21-129.94c-.06-4.71,1.06-6.34,6-6.32,33.83.14,67.65,0,101.47-.07Z" transform="translate(277 -158)"/></svg>
|
||||
|
After Width: | Height: | Size: 709 B |
@@ -0,0 +1 @@
|
||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197ZM1064.31,778.29c.47,14.73,1.29,36.54,1.76,58.35.1,4.49,1.63,5.57,5.87,5.53q49.23-.4,98.47-.33c4.88,0,5.77-1.64,5.58-6.05q-2.76-65.14-5.13-130.32c-.15-4.41-2.31-4.67-5.7-4.65-32.49.18-65,.35-97.48.27-4.51,0-5.63,1.33-5.47,5.68C1063,728.24,1063.51,749.73,1064.31,778.29Z" transform="translate(277 -158)"/><path d="M1064.31,778.29c-.8-28.56-1.31-50-2.1-71.52-.16-4.35,1-5.69,5.47-5.68,32.49.08,65-.09,97.48-.27,3.39,0,5.55.24,5.7,4.65q2.36,65.17,5.13,130.32c.19,4.41-.7,6.06-5.58,6.05q-49.23-.15-98.47.33c-4.24,0-5.77-1-5.87-5.53C1065.6,814.83,1064.78,793,1064.31,778.29Z" transform="translate(277 -158)"/></svg>
|
||||
|
After Width: | Height: | Size: 834 B |
@@ -0,0 +1 @@
|
||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M2197,922H-277V158H2197Zm-957.31-80.35v-.58c14.66,0,29.33,0,44,0,6.49,0,6.37-.09,6-6.4q-2.54-44.4-4.93-88.81-1.08-20-2.1-39.92c-.17-3.37-.58-5.82-5.3-5.76q-43.48.55-87,.44c-4.84,0-6.29,1.43-6.06,6.27,1.25,25.62,2.18,51.26,3.28,76.88.75,17.48,1.77,34.94,2.3,52.42.14,4.78,2,5.64,6.29,5.57C1210.69,841.5,1225.19,841.65,1239.69,841.65Z" transform="translate(277 -158)"/><path d="M1239.69,841.65c-14.5,0-29-.15-43.49.1-4.3.07-6.15-.79-6.29-5.57-.53-17.48-1.55-34.94-2.3-52.42-1.1-25.62-2-51.26-3.28-76.88-.23-4.84,1.22-6.28,6.06-6.27q43.48.09,87-.44c4.72-.06,5.13,2.39,5.3,5.76q1,20,2.1,39.92,2.43,44.42,4.93,88.81c.35,6.31.47,6.38-6,6.4-14.66,0-29.33,0-44,0Z" transform="translate(277 -158)"/></svg>
|
||||
|
After Width: | Height: | Size: 897 B |
@@ -0,0 +1 @@
|
||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM447.62,225.07h-5.18c-29.8,0-59.61.19-89.41-.13-5.6-.06-7.34,1.6-7,6.89.18,3.46-.48,7-.72,10.45q-2.34,33.61-4.66,67.22c-.84,12.29-1.53,24.58-2.46,36.86-.26,3.46.79,5,4.38,4.66,2.48-.21,5,.1,7.48-.08,3.39-.24,4.84.88,4.5,4.53s-.07,7.58-.07,11.49a8.13,8.13,0,0,0,2,.57c26.8,0,53.61,0,80.42,0,3.26,0,3.72-1.73,3.87-4.41,2.26-40.38,4.63-80.75,6.87-121.13C447.88,236.59,447.62,231.14,447.62,225.07Z" transform="translate(277 -158)"/><path d="M447.62,225.07c0,6.07.26,11.52,0,16.94-2.24,40.38-4.61,80.75-6.87,121.13-.15,2.68-.61,4.42-3.87,4.41-26.81-.05-53.62,0-80.42,0a8.13,8.13,0,0,1-2-.57c0-3.91-.27-7.73.07-11.49s-1.11-4.77-4.5-4.53c-2.48.18-5-.13-7.48.08-3.59.3-4.64-1.2-4.38-4.66.93-12.28,1.62-24.57,2.46-36.86q2.29-33.62,4.66-67.22c.24-3.49.9-7,.72-10.45-.29-5.29,1.45-7,7-6.89,29.8.32,59.61.14,89.41.13Z" transform="translate(277 -158)"/></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1 @@
|
||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM562.48,225.44H460.77a10,10,0,0,0-.48,1.8q-2.06,35.67-4.06,71.34c-1.2,21.13-2.28,42.26-3.69,63.36-.29,4.21.77,5.67,5,5.64q48.24-.34,96.49-.39c3.27,0,4.74-.86,4.79-4.5.13-10.83.58-21.65,1-32.47.86-22.14,1.94-44.28,2.59-66.43C562.79,251.18,562.48,238.55,562.48,225.44Z" transform="translate(277 -158)"/><path d="M562.48,225.44c0,13.11.31,25.74-.06,38.35-.65,22.15-1.73,44.29-2.59,66.43-.42,10.82-.87,21.64-1,32.47-.05,3.64-1.52,4.49-4.79,4.5q-48.24.07-96.49.39c-4.24,0-5.3-1.43-5-5.64,1.41-21.1,2.49-42.23,3.69-63.36q2-35.67,4.06-71.34a10,10,0,0,1,.48-1.8Z" transform="translate(277 -158)"/></svg>
|
||||
|
After Width: | Height: | Size: 819 B |
@@ -0,0 +1 @@
|
||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM683.28,225.41a26.54,26.54,0,0,0-2.82-.39c-33.48,0-67,.06-100.43-.05-4.14,0-4.52,2.22-4.62,5.35-1.41,43.6-2.78,87.2-4.4,130.79-.19,5.09,1.58,6.09,6.21,6.06,32.31-.22,64.62-.18,96.93-.25,1.75,0,3.5-.24,5.49-.39C680.86,319.23,682.07,272.5,683.28,225.41Z" transform="translate(277 -158)"/><path d="M683.28,225.41c-1.21,47.09-2.42,93.82-3.64,141.12-2,.15-3.74.39-5.49.39-32.31.07-64.62,0-96.93.25-4.63,0-6.4-1-6.21-6.06,1.62-43.59,3-87.19,4.4-130.79.1-3.13.48-5.37,4.62-5.35,33.47.11,67,0,100.43.05A26.54,26.54,0,0,1,683.28,225.41Z" transform="translate(277 -158)"/></svg>
|
||||
|
After Width: | Height: | Size: 792 B |
@@ -0,0 +1 @@
|
||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM802,296.2h.7c0-21.82-.14-43.65.11-65.47,0-4.63-1.31-5.91-5.85-5.88q-47.47.27-95,0c-4.37,0-6,1-6.06,5.77Q694.7,295.86,692.84,361c-.13,4.59,1.14,6,5.8,6q49-.31,98-.08c4.62,0,5.54-1.59,5.5-5.75C801.94,339.51,802,317.86,802,296.2Z" transform="translate(277 -158)"/><path d="M802,296.2c0,21.66-.09,43.31.07,65,0,4.16-.88,5.77-5.5,5.75q-49-.27-98,.08c-4.66,0-5.93-1.37-5.8-6q1.8-65.19,3.13-130.39c.1-4.74,1.69-5.79,6.06-5.77q47.47.21,95,0c4.54,0,5.9,1.25,5.85,5.88-.25,21.82-.11,43.65-.11,65.47Z" transform="translate(277 -158)"/></svg>
|
||||
|
After Width: | Height: | Size: 755 B |
@@ -0,0 +1 @@
|
||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM919.16,296.12H918c0-22-.08-44,.07-66,0-4.15-1.36-5.36-5.47-5.34q-46.47.24-93,0c-3.95,0-5.48.88-5.47,5.24q.13,65.72-.21,131.43c0,4.11,1.12,5.38,5.32,5.36q47.22-.27,94.45,0c4.62,0,5.52-1.61,5.49-5.76C919.08,339.43,919.16,317.78,919.16,296.12Z" transform="translate(277 -158)"/><path d="M919.16,296.12c0,21.66-.08,43.31.08,65,0,4.15-.87,5.79-5.49,5.76q-47.22-.28-94.45,0c-4.2,0-5.34-1.25-5.32-5.36q.32-65.71.21-131.43c0-4.36,1.52-5.25,5.47-5.24q46.49.18,93,0c4.11,0,5.5,1.19,5.47,5.34-.15,22-.07,44-.07,66Z" transform="translate(277 -158)"/></svg>
|
||||
|
After Width: | Height: | Size: 769 B |
@@ -0,0 +1 @@
|
||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM1039.17,296.21h-1.4c0-21.66-.16-43.32.11-65,.06-5-1.2-6.55-6.35-6.51q-47,.36-94,.05c-4.82,0-6.59,1-6.51,6.31q.94,65.23,1.21,130.48c0,4.29,1.44,5.22,5.45,5.2q48.75-.24,97.49,0c4.34,0,5.74-1,5.59-5.56C1040.05,339.53,1039.67,317.87,1039.17,296.21Z" transform="translate(277 -158)"/><path d="M1039.17,296.21c.5,21.66.88,43.32,1.6,65,.15,4.52-1.25,5.58-5.59,5.56q-48.75-.23-97.49,0c-4,0-5.42-.91-5.45-5.2q-.35-65.24-1.21-130.48c-.08-5.33,1.69-6.34,6.51-6.31q47,.25,94-.05c5.15,0,6.41,1.54,6.35,6.51-.27,21.66-.11,43.32-.11,65Z" transform="translate(277 -158)"/></svg>
|
||||
|
After Width: | Height: | Size: 787 B |
@@ -0,0 +1 @@
|
||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM1052.49,366.17c2.8.22,4.1.41,5.4.41q46.2,0,92.4,0c6.58,0,6.7,0,6.46-6.5-1.66-43.57-3.43-87.14-5-130.72-.16-4.51-2.54-4.59-5.8-4.58-30,.06-59.94.15-89.9,0-4.86,0-6.18,1.46-6.06,6.27,1,37.78,1.7,75.56,2.45,113.34C1052.61,351.47,1052.49,358.61,1052.49,366.17Z" transform="translate(277 -158)"/><path d="M1052.49,366.17c0-7.56.12-14.7,0-21.84-.75-37.78-1.48-75.56-2.45-113.34-.12-4.81,1.2-6.3,6.06-6.27,30,.17,59.93.08,89.9,0,3.26,0,5.64.07,5.8,4.58,1.54,43.58,3.31,87.15,5,130.72.24,6.49.12,6.5-6.46,6.5q-46.2,0-92.4,0C1056.59,366.58,1055.29,366.39,1052.49,366.17Z" transform="translate(277 -158)"/></svg>
|
||||
|
After Width: | Height: | Size: 827 B |
@@ -0,0 +1 @@
|
||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2474 764"><defs><style>.cls-1{fill:rgba(255,255,255,0);}.cls-2{fill:#none;}</style></defs><path class="cls-1" d="M-277,922V158H2197V922ZM1170.17,366.09c2.38.16,4.33.4,6.28.39,25.5-.09,51-.1,76.49-.38,12.29-.14,11.28,2.73,10.53-11.71-2.13-41.26-4.59-82.49-6.63-123.75-.25-5-2-6-6.57-6-26.17.18-52.33.1-78.5.11-7.79,0-7.65,0-7.31,7.67q2,43.69,3.77,87.38C1168.88,335.1,1169.51,350.4,1170.17,366.09Z" transform="translate(277 -158)"/><path d="M1170.17,366.09c-.66-15.69-1.29-31-1.94-46.28q-1.86-43.68-3.77-87.38c-.34-7.65-.48-7.66,7.31-7.67,26.17,0,52.33.07,78.5-.11,4.52,0,6.32.95,6.57,6,2,41.26,4.5,82.49,6.63,123.75.75,14.44,1.76,11.57-10.53,11.71-25.5.28-51,.29-76.49.38C1174.5,366.49,1172.55,366.25,1170.17,366.09Z" transform="translate(277 -158)"/></svg>
|
||||
|
After Width: | Height: | Size: 844 B |
@@ -0,0 +1,232 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-22 14:00:57
|
||||
* @LastEditTime: 2024-08-30 13:55:33
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
import React from'react';
|
||||
import cls from "./index.module.css";
|
||||
|
||||
function InputDataToggle() {
|
||||
// const [season, setSeason] = useState(1);
|
||||
// const preFloor = useRef()
|
||||
return (
|
||||
<div
|
||||
className="dataContent"
|
||||
style={{
|
||||
display: "flex",
|
||||
width:"100%",
|
||||
// marginBottom: "24px",
|
||||
flexDirection: "column",/* 这行设置为垂直布局 */
|
||||
gap:'30px'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
cls.item
|
||||
}
|
||||
>
|
||||
<div className={
|
||||
cls.content
|
||||
}>
|
||||
<h2 className={
|
||||
cls.paramsTitle
|
||||
}>
|
||||
投料速度
|
||||
</h2>
|
||||
<div className={
|
||||
cls.paramsData
|
||||
}>
|
||||
<div className={
|
||||
cls.data
|
||||
}>
|
||||
363
|
||||
</div> <div className={
|
||||
cls.unit
|
||||
}>
|
||||
m/s
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={
|
||||
cls.content
|
||||
}>
|
||||
<h2 className={
|
||||
cls.totalDataTitle
|
||||
}>
|
||||
天然气设定总量
|
||||
</h2>
|
||||
<div className={
|
||||
cls.paramsData
|
||||
}>
|
||||
<div className={
|
||||
cls.data
|
||||
}>
|
||||
631
|
||||
</div> <div className={
|
||||
cls.unit
|
||||
}>
|
||||
m³/s
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={
|
||||
cls.item
|
||||
}
|
||||
>
|
||||
<div className={
|
||||
cls.content
|
||||
}>
|
||||
<h2 className={
|
||||
cls.totalDataTitle
|
||||
}>
|
||||
焦炉煤气设定总量
|
||||
</h2>
|
||||
<div className={
|
||||
cls.paramsData
|
||||
}>
|
||||
<div className={
|
||||
cls.data
|
||||
}>
|
||||
11111
|
||||
</div> <div className={
|
||||
cls.unit
|
||||
}>
|
||||
m³/s
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={
|
||||
cls.content
|
||||
}>
|
||||
<h2 className={
|
||||
cls.paramsTitle
|
||||
}>
|
||||
助燃风流量
|
||||
</h2>
|
||||
<div className={
|
||||
cls.paramsData
|
||||
}>
|
||||
<div className={
|
||||
cls.data
|
||||
}>
|
||||
432
|
||||
</div> <div className={
|
||||
cls.unit
|
||||
}>
|
||||
m³/s
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={
|
||||
cls.item
|
||||
}
|
||||
>
|
||||
<div className={
|
||||
cls.content
|
||||
}>
|
||||
<h2 className={
|
||||
cls.totalDataTitle
|
||||
}>
|
||||
产品规格设定标准
|
||||
</h2>
|
||||
<div className={
|
||||
cls.paramsData
|
||||
}>
|
||||
<div className={
|
||||
cls.data
|
||||
}>
|
||||
11111
|
||||
</div> <div className={
|
||||
cls.unit
|
||||
}>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={
|
||||
cls.content
|
||||
}>
|
||||
<h2 className={
|
||||
cls.paramsTitle
|
||||
}>
|
||||
循环水流量
|
||||
</h2>
|
||||
<div className={
|
||||
cls.paramsData
|
||||
}>
|
||||
<div className={
|
||||
cls.data
|
||||
}>
|
||||
562
|
||||
</div> <div className={
|
||||
cls.unit
|
||||
}>
|
||||
m³/s
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={
|
||||
cls.item
|
||||
}
|
||||
>
|
||||
<div className={
|
||||
cls.content
|
||||
}>
|
||||
<h2 className={
|
||||
cls.totalDataTitle
|
||||
}>
|
||||
配料水分含量
|
||||
</h2>
|
||||
<div className={
|
||||
cls.paramsData
|
||||
}>
|
||||
<div className={
|
||||
cls.data
|
||||
}>
|
||||
60
|
||||
</div> <div className={
|
||||
cls.unit
|
||||
}>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={
|
||||
cls.content
|
||||
}>
|
||||
<h2 className={
|
||||
cls.paramsTitle
|
||||
}>
|
||||
玻璃液出口宽度
|
||||
</h2>
|
||||
<div className={
|
||||
cls.paramsData
|
||||
}>
|
||||
<div className={
|
||||
cls.data
|
||||
}>
|
||||
11
|
||||
</div> <div className={
|
||||
cls.unit
|
||||
}>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default InputDataToggle;
|
||||
@@ -0,0 +1,108 @@
|
||||
.dataContent{
|
||||
width: 100%;
|
||||
}
|
||||
.item{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;/* 这行设置为垂直布局 */
|
||||
gap: 35px;
|
||||
}
|
||||
.content{
|
||||
height: 56px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.paramsData{
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding:5px 10px;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
letter-spacing: 6px;
|
||||
background: url(../../../../../assets/paramsData.png) no-repeat;
|
||||
background-size: 100% 90%;
|
||||
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;
|
||||
}
|
||||
/* 下划线 */
|
||||
.paramsTitle{
|
||||
flex: 1;
|
||||
height: 56px;
|
||||
position: relative;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
color: #FFFFFF;
|
||||
line-height: 56px;
|
||||
letter-spacing: 1px;
|
||||
text-align: right;
|
||||
}
|
||||
.paramsTitle::after {
|
||||
content: "";
|
||||
top: 73%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 50%; /* 调整此处的宽度值来改变下划线的宽度，例如 50% 表示占文字宽度的一半 */
|
||||
height: 4px; /* 调整下划线的高度 */
|
||||
background-image: linear-gradient(173deg, rgba(47, 47, 49, 0) 0%, #2BFFDF 100%);
|
||||
box-shadow: 0px 2px 6px 0px rgba(43,255,223,0.55);
|
||||
backdrop-filter: blur(0px);
|
||||
}
|
||||
.totalDataTitle{
|
||||
flex: 1;
|
||||
height: 56px;
|
||||
position: relative;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
color: #FFFFFF;
|
||||
line-height: 56px;
|
||||
letter-spacing: 1px;
|
||||
text-align: right;
|
||||
}
|
||||
.totalDataTitle::after {
|
||||
content: "";
|
||||
top: 73%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 20%;
|
||||
width: 80%; /* 调整此处的宽度值来改变下划线的宽度，例如 50% 表示占文字宽度的一半 */
|
||||
height: 4px; /* 调整下划线的高度 */
|
||||
background-image: linear-gradient(173deg, rgba(47, 47, 49, 0) 0%, #2BFFDF 100%);
|
||||
box-shadow: 0px 2px 6px 0px rgba(43,255,223,0.55);
|
||||
backdrop-filter: blur(0px);
|
||||
}
|
||||
|
||||
.outTitle{
|
||||
flex: 1;
|
||||
height: 56px;
|
||||
position: relative;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
color: #FFFFFF;
|
||||
line-height: 56px;
|
||||
letter-spacing: 1px;
|
||||
text-align: right;
|
||||
}
|
||||
.outTitle::after {
|
||||
content: "";
|
||||
top: 73%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 20%;
|
||||
width: 80%; /* 调整此处的宽度值来改变下划线的宽度，例如 50% 表示占文字宽度的一半 */
|
||||
height: 4px; /* 调整下划线的高度 */
|
||||
background-image: linear-gradient(173deg, rgba(47, 47, 49, 0) 0%, #2BFFDF 100%);
|
||||
box-shadow: 0px 2px 6px 0px rgba(43,255,223,0.55);
|
||||
backdrop-filter: blur(0px);
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-23 15:31:44
|
||||
* @LastEditTime: 2024-08-28 13:31:32
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
|
||||
import cls from "./index.module.css";
|
||||
import BottomBarItem from "../../../../Common/BottomItemBackgroundForecastTop";
|
||||
import { useSelector } from "react-redux";
|
||||
function LeftMiddleForecast() {
|
||||
const kilnInfo = useSelector((state) => state.cutting);
|
||||
console.log('kilnInfo',kilnInfo);
|
||||
|
||||
const infos = kilnInfo.forecastDayChart.map((ele) => {
|
||||
return {
|
||||
label:ele.lineName,
|
||||
value: ele.yield,
|
||||
}
|
||||
})
|
||||
return (
|
||||
<BottomBarItem title="预期结果" icon="forecast" className={cls.leftBar__middle}>
|
||||
<div className={cls.leftBar__middle__content}>
|
||||
{infos.map((item) => (
|
||||
<div key={item.label} className={`${cls.info__item}`}>
|
||||
<span className={cls.square}></span>
|
||||
<span className={cls.label}>{item.label}</span>
|
||||
<span className={cls.line}></span>
|
||||
<span className={cls.value}>{ (item.value * 100).toFixed(2) + '%'}</span>
|
||||
{/* {item.label}: {item.value} */}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</BottomBarItem>
|
||||
);
|
||||
}
|
||||
export default LeftMiddleForecast;
|
||||
@@ -0,0 +1,51 @@
|
||||
.leftBar__middle {
|
||||
width: 100%;
|
||||
height: 422px;
|
||||
.leftBar__middle__content {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr 1fr;
|
||||
gap: 10px;
|
||||
padding-top: 18px;
|
||||
.info__item {
|
||||
/* width: 100%; */
|
||||
background: url('../../../../../assets/forecastBack.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
/* width: 220px; */
|
||||
height: 45px;
|
||||
/* background: rgba(10,154,255,0.15); */
|
||||
/* box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5); */
|
||||
/* border: 1px solid; */
|
||||
color: #58E7E9;
|
||||
/* border-image: linear-gradient(80deg, rgba(0, 255, 245, 0.55), rgba(0, 255, 245, 0)) 1 1; */
|
||||
font-size: 20px;
|
||||
letter-spacing: 1.43px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
.square{
|
||||
/* flex: 1; */
|
||||
margin-left: 20px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #00FFF5;
|
||||
box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5), 0px 0px 4px 1px #58E7E9;
|
||||
}
|
||||
.label {
|
||||
/* flex:1; */
|
||||
text-align: left;
|
||||
/* position: relative; */
|
||||
}
|
||||
.value {
|
||||
width: 320px;
|
||||
/* flex: 1; */
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-23 15:31:44
|
||||
* @LastEditTime: 2024-08-30 10:05:40
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
|
||||
import cls from "./index.module.css";
|
||||
import BottomBarItem from "../../../../Common/BottomItemBackgroundForecastTop";
|
||||
import { useSelector } from "react-redux";
|
||||
import { stateNameMap } from "../../../../../store/features/bottomTe";
|
||||
function LeftMiddleForecast() {
|
||||
const kilnInfo = useSelector((state) => state.temperature.top);
|
||||
console.log(kilnInfo);
|
||||
|
||||
const infos = Object.keys(kilnInfo).map((key) => ({
|
||||
label: key,
|
||||
value: kilnInfo[key],
|
||||
}));
|
||||
const infoList = [infos[1], infos[5], infos[10], infos[16],infos[19]]
|
||||
console.log('infoList',infoList);
|
||||
return (
|
||||
<BottomBarItem title="池底温度" icon="kilnBottom" className={cls.leftBar__middle}>
|
||||
<div className={cls.leftBar__middle__content}>
|
||||
{/* {infos.map((item) => ( */}
|
||||
<div key={infoList[0].label} className={`${cls.span}`}>
|
||||
<span className={cls.square}></span>
|
||||
<span className={cls.label}>{infos[0].label}</span>
|
||||
<span className={cls.line}></span>
|
||||
<span className={cls.value}>{infos[0].label}</span>
|
||||
{/* {item.label}: {item.value} */}
|
||||
</div>
|
||||
{/* ))} */}
|
||||
{infoList.slice(1).map((item) => (
|
||||
<div key={item.label} className={`${cls.info__item}`}>
|
||||
<span className={cls.square}></span>
|
||||
<span className={cls.label}>{item.label}</span>
|
||||
<span className={cls.line}></span>
|
||||
<span className={cls.value}>{item.value}</span>
|
||||
{/* {item.label}: {item.value} */}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</BottomBarItem>
|
||||
);
|
||||
}
|
||||
export default LeftMiddleForecast;
|
||||
@@ -0,0 +1,130 @@
|
||||
.leftBar__middle {
|
||||
width: 100%;
|
||||
height: 261px;
|
||||
/* height: 261px; */
|
||||
/* background: url('../../../../../assets/ItemBg.png') no-repeat; */
|
||||
.leftBar__middle__content {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(4, 1fr);
|
||||
gap: 10px;
|
||||
padding-top: 18px;
|
||||
.span{
|
||||
grid-column: span 2;
|
||||
position: relative;
|
||||
/* width: 220px; */
|
||||
height: 45px;
|
||||
background: rgba(10,154,255,0.15);
|
||||
/* box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5); */
|
||||
border: 1px solid;
|
||||
color: #58E7E9;
|
||||
border-image: linear-gradient(80deg, rgba(0, 255, 245, 0.55), rgba(0, 255, 245, 0)) 1 1;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1.43px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
.square{
|
||||
/* flex: 1; */
|
||||
margin-left: 20px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #00FFF5;
|
||||
box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5), 0px 0px 4px 1px #58E7E9;
|
||||
}
|
||||
.label {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
position: relative;
|
||||
}
|
||||
.label::after{
|
||||
content: '';
|
||||
position:absolute;
|
||||
/* width: 3px; */
|
||||
left: 110%;
|
||||
width: 3px;
|
||||
top: 30%;
|
||||
height: 24px;
|
||||
background: linear-gradient( 360deg, rgba(0,187,255,0) 0%, #00BBFF 100%);
|
||||
box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5);
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
.value {
|
||||
flex: 5;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.info__item {
|
||||
position: relative;
|
||||
/* width: 220px; */
|
||||
height: 45px;
|
||||
background: rgba(10,154,255,0.15);
|
||||
/* box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5); */
|
||||
border: 1px solid;
|
||||
color: #58E7E9;
|
||||
border-image: linear-gradient(80deg, rgba(0, 255, 245, 0.55), rgba(0, 255, 245, 0)) 1 1;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1.43px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
.square{
|
||||
/* flex: 1; */
|
||||
margin-left: 20px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #00FFF5;
|
||||
box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5), 0px 0px 4px 1px #58E7E9;
|
||||
}
|
||||
.label {
|
||||
flex: 2;
|
||||
text-align: right;
|
||||
position: relative;
|
||||
}
|
||||
.label::after{
|
||||
content: '';
|
||||
position:absolute;
|
||||
/* width: 3px; */
|
||||
left: 110%;
|
||||
width: 3px;
|
||||
top: 30%;
|
||||
height: 24px;
|
||||
background: linear-gradient( 360deg, rgba(0,187,255,0) 0%, #00BBFF 100%);
|
||||
box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5);
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
.value {
|
||||
flex: 3;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.info__item::before{
|
||||
content: '';
|
||||
position:absolute;
|
||||
width: 3px;
|
||||
left: -5%;
|
||||
height: 45px;
|
||||
background: linear-gradient( 360deg, rgba(0,187,255,0) 0%, #00BBFF 100%);
|
||||
box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5);
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
.span::before{
|
||||
content: '';
|
||||
position:absolute;
|
||||
width: 3px;
|
||||
left: -2.3%;
|
||||
height: 45px;
|
||||
background: linear-gradient( 360deg, rgba(0,187,255,0) 0%, #00BBFF 100%);
|
||||
box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5);
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-23 15:31:44
|
||||
* @LastEditTime: 2024-08-30 10:03:33
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
|
||||
import cls from "./index.module.css";
|
||||
import BottomBarItem from "../../../../Common/BottomItemBackgroundForecastTop";
|
||||
import { useSelector } from "react-redux";
|
||||
// import { stateNameMap } from "../../../../../store/features/crownTe";
|
||||
function LeftTopForecast() {
|
||||
const kilnInfo = useSelector((state) => state.temperature.top);
|
||||
console.log(kilnInfo);
|
||||
|
||||
const infos = Object.keys(kilnInfo).map((key) => ({
|
||||
label: key,
|
||||
value: kilnInfo[key],
|
||||
}));
|
||||
const infoList = [infos[1], infos[5], infos[10], infos[16]]
|
||||
console.log('infoList',infoList);
|
||||
return (
|
||||
<BottomBarItem title="碹顶温度" icon="kilnTop" className={cls.leftBar__top}>
|
||||
<div className={cls.leftBar__top__content}>
|
||||
{infoList.map((item) => (
|
||||
<div key={item.label} className={cls.info__item}>
|
||||
<span className={cls.square}></span>
|
||||
<span className={cls.label}>{item.label}</span>
|
||||
<span className={cls.line}></span>
|
||||
<span className={cls.value}>{item.value}</span>
|
||||
{/* {item.label}: {item.value} */}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</BottomBarItem>
|
||||
);
|
||||
}
|
||||
export default LeftTopForecast;
|
||||
@@ -0,0 +1,72 @@
|
||||
.leftBar__top {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
/* background: url('../../../../../assets/ItemBg.png') no-repeat; */
|
||||
/* background-size: 100% 100%; */
|
||||
|
||||
.leftBar__top__content {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
padding-top: 18px;
|
||||
.info__item {
|
||||
position: relative;
|
||||
/* width: 220px; */
|
||||
height: 45px;
|
||||
background: rgba(10,207,255,0.15);
|
||||
/* box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5); */
|
||||
border: 1px solid;
|
||||
color: #58E7E9;
|
||||
border-image: linear-gradient(80deg, rgba(0, 255, 245, 0.55), rgba(0, 255, 245, 0)) 1 1;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1.43px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
.square{
|
||||
/* flex: 1; */
|
||||
margin-left: 20px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #00FFF5;
|
||||
box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5), 0px 0px 4px 1px #58E7E9;
|
||||
}
|
||||
.label {
|
||||
flex: 2;
|
||||
text-align: right;
|
||||
position: relative;
|
||||
}
|
||||
.label::after{
|
||||
content: '';
|
||||
position:absolute;
|
||||
/* width: 3px; */
|
||||
left: 110%;
|
||||
width: 3px;
|
||||
top: 30%;
|
||||
height: 24px;
|
||||
background: linear-gradient( 360deg, rgba(0,255,251,0) 0%, #00FFF5 100%);
|
||||
box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5);
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
.value {
|
||||
flex: 3;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.info__item::before{
|
||||
content: '';
|
||||
position:absolute;
|
||||
width: 3px;
|
||||
left: -5%;
|
||||
height: 45px;
|
||||
background: linear-gradient( 360deg, rgba(0,255,251,0) 0%, #00FFF5 100%);
|
||||
box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5);
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-20 14:09:17
|
||||
* @LastEditTime: 2024-08-30 14:53:39
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
// 窑炉预测控制参数输入
|
||||
import cls from "./index.module.css";
|
||||
import BottomBarItem from "../../../../Common/forecastLargeBackground";
|
||||
// import CommonChart from "../CommonChart";
|
||||
import DayNightToggle from "../dayButton";
|
||||
import SeasonToggle from "../seasonButton";
|
||||
import InputDataToggle from "../inputData";
|
||||
function paramsInput(props) {
|
||||
const handleClick = () => {
|
||||
props.onSendValueToParent(true);
|
||||
};
|
||||
return (
|
||||
<BottomBarItem icon="kilnPress" title="控制参数输入" style={props.style}>
|
||||
<div className={cls.legend}>
|
||||
<DayNightToggle style={{ flex: 1, width: '100%', marginTop: '24px' }} />
|
||||
</div>
|
||||
<div className={cls.middle}>
|
||||
<SeasonToggle style={{ flex: 1, width: '100%', }} />
|
||||
<InputDataToggle style={{ flex: 1, width: '100%', }} />
|
||||
</div>
|
||||
<div className={cls.bottom}>
|
||||
<div className={cls.bottomButton} onClick={handleClick}>
|
||||
执行模拟
|
||||
</div>
|
||||
</div>
|
||||
</BottomBarItem>
|
||||
);
|
||||
}
|
||||
export default paramsInput;
|
||||
@@ -0,0 +1,52 @@
|
||||
/* .chart {
|
||||
height: 100%;
|
||||
} */
|
||||
.legend {
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
top: 40px;
|
||||
}
|
||||
.middle {
|
||||
margin-top: 70px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
/* width: 10%; */
|
||||
/* position: absolute;
|
||||
left: 225px;
|
||||
top: 40px; */
|
||||
}
|
||||
.bottom{
|
||||
/* height: 100%; */
|
||||
margin-top: 20px;
|
||||
/* display: flex; */
|
||||
/* justify-content: center; */
|
||||
}
|
||||
.bottomButton{
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding:15px 10px;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
letter-spacing: 6px;
|
||||
background: url(../../../../../assets/modelButton.png) no-repeat;
|
||||
background-size: 100% 90%;
|
||||
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;
|
||||
}
|
||||
/* .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,65 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-22 14:00:57
|
||||
* @LastEditTime: 2024-08-22 14:33:33
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
import React, { useState } from'react';
|
||||
import cls from "./index.module.css";
|
||||
|
||||
function SeasonToggle() {
|
||||
const [season, setSeason] = useState(1);
|
||||
// const preFloor = useRef();
|
||||
function onSeasonUpdate(season) {
|
||||
// preFloor.current = floor;
|
||||
setSeason(season);
|
||||
// onFloorChange(flr);
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className="subMenu"
|
||||
style={{
|
||||
display: "flex",
|
||||
width:"10%",
|
||||
// marginBottom: "24px",
|
||||
flexDirection: "column",/* 这行设置为垂直布局 */
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
"season season1 " + cls.menuItem + " " + (season === 1 ? cls.active : "")
|
||||
}
|
||||
onClick={() => onSeasonUpdate(1)}
|
||||
>
|
||||
春季
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
"season season2 " + cls.menuItem + " " + (season === 2 ? cls.active : "")
|
||||
}
|
||||
onClick={() => onSeasonUpdate(2)}
|
||||
>
|
||||
夏季
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
"season season3 " + cls.menuItem + " " + (season === 3 ? cls.active : "")
|
||||
}
|
||||
onClick={() => onSeasonUpdate(3)}
|
||||
>
|
||||
夏季
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
"season season4 " + cls.menuItem + " " + (season === 4 ? cls.active : "")
|
||||
}
|
||||
onClick={() => onSeasonUpdate(4)}
|
||||
>
|
||||
夏季
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SeasonToggle;
|
||||
@@ -0,0 +1,30 @@
|
||||
.menuItem {
|
||||
/* transition: all 0.3s ease-out; */
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding:40px 35px;
|
||||
font-size: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
writing-mode: vertical-lr;
|
||||
line-height: 48px;
|
||||
letter-spacing: 6px;
|
||||
background: url(../../../../../assets/seasonChange.png) no-repeat;
|
||||
background-size: 90% 100%;
|
||||
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 {
|
||||
background: url(../../../../../assets/seasonActive.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.menuItem:not(:first-child) {
|
||||
margin-top:20px;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-30 15:22:59
|
||||
* @LastEditTime: 2024-08-30 15:22:59
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
import React from'react';
|
||||
|
||||
export const ValueContext = React.createContext();
|
||||
@@ -0,0 +1,53 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-23 13:56:11
|
||||
* @LastEditTime: 2024-08-30 16:30:35
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
import React, { useContext } from'react';
|
||||
import KilnTopForecast from '../components/KilnTopForecast';
|
||||
import KilnBottomForecast from '../components/KilnBottomForecast';
|
||||
import KilnMiddleForecast from '../components/KilnMiddleForecast';
|
||||
import LeftBottomForecast from '../components/leftBottomForecast';
|
||||
import LeftTopForecast from '../components/leftTopForecast';
|
||||
import LeftMiddleForecast from '../components/leftMiddleForecast';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ValueContext } from './contextFile';
|
||||
import cls from './index.module.scss';
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<div className={cls.forecast}>
|
||||
<motion.div
|
||||
className={cls.leftBar}
|
||||
initial={{ opacity: 0, position: 'absolute' }}
|
||||
animate={{ opacity: 1, position: 'relative' }}
|
||||
exit={{ opacity: 0, position: 'relative' }}
|
||||
transition={{ type: 'tween' }}
|
||||
>
|
||||
<div style={{ height: '200px', marginTop: '24px' }}>
|
||||
<LeftTopForecast/>
|
||||
</div>
|
||||
<div style={{ height: '261px', marginTop: '24px' }}>
|
||||
<LeftMiddleForecast />
|
||||
</div>
|
||||
<div style={{ flex: 1,marginTop: '24px' }}>
|
||||
<LeftBottomForecast/>
|
||||
</div>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
className={cls.leftBar}
|
||||
initial={{ opacity: 0, position: 'absolute' }}
|
||||
animate={{ opacity: 1, position: 'relative' }}
|
||||
exit={{ opacity: 0, position: 'relative' }}
|
||||
transition={{ type: 'tween' }}
|
||||
>
|
||||
<KilnTopForecast style={{ flex: 1, width: '100%', marginTop: '24px' }} />
|
||||
<KilnMiddleForecast style={{ flex: 1, width: '100%', marginTop: '24px' }} />
|
||||
<KilnBottomForecast style={{ flex: 1, width: '100%', marginTop: '24px' }} />
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
.leftBar {
|
||||
width: 501px;
|
||||
height: 966px;
|
||||
// margin-left: 40px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.forecast{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
Reference in New Issue
Block a user