mt-fe-group/xuchang-new
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

修改

Browse Source
This commit is contained in:
‘937886381’
2024-09-13 15:47:43 +08:00
parent 6a25d4e30d
commit 696d852cd2
46 changed files with 893 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/App.js
View File

@@ -1,3 +1,10 @@
/*
* @Author: zhp
* @Date: 2024-08-20 14:09:17
* @LastEditTime: 2024-09-09 14:58:53
* @LastEditors: zhp
* @Description:
*/
import "./global.css";
import "./index.css";
import Head from "./components/Common/Company";
@@ -10,7 +17,7 @@ import RulerContainer from "./components/Tools/Ruler";
import { Switch } from "antd";
import { createPortal } from "react-dom";
const Menus = ["窑炉总览", "窑炉内部", "窑炉优化","退火监测", "质检统计", "能耗分析"];
const Menus = ["窑炉总览", "窑炉内部", "AI窑炉","退火监测", "质检统计", "能耗分析"];
const LUNBO_INTERVAL = 60 * 1000;
function App() {
const { styles, value, setValue } = useSlider(100);

4
src/assets/CenterChart1icon1.svg
View File

@@ -16,7 +16,7 @@
<stop stop-color="#F43D0A" offset="100%"></stop>
</linearGradient>
</defs>
<g id="窑炉预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="AI预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="预测" transform="translate(-790.000000, -134.000000)" fill-rule="nonzero">
<g id="编组-32" transform="translate(763.000000, 122.000000)">
<g id="泡界线" filter="url(#filter-1)" transform="translate(32.000000, 16.000000)">
@@ -26,4 +26,4 @@
</g>
</g>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

4
src/assets/CenterChart1icon2.svg
View File

@@ -20,7 +20,7 @@
<stop stop-color="#F43D0A" offset="100%"></stop>
</linearGradient>
</defs>
<g id="窑炉预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="AI预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="预测" transform="translate(-1036.201540, -134.000000)" fill-rule="nonzero">
<g id="编组-33" transform="translate(1009.000000, 122.000000)">
<g id="碹顶" filter="url(#filter-1)" transform="translate(32.201540, 16.000000)">
@@ -33,4 +33,4 @@
</g>
</g>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

4
src/assets/CenterChart1icon3.svg
View File

@@ -7,7 +7,7 @@
<stop stop-color="#F43D0A" offset="100%"></stop>
</linearGradient>
</defs>
<g id="窑炉预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="AI预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="预测" transform="translate(-799.000000, -252.000000)">
<g id="液位" transform="translate(799.000000, 252.000000)">
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="31" height="31"></rect>
@@ -15,4 +15,4 @@
</g>
</g>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

4
src/assets/CenterChart1icon4.svg
View File

@@ -20,7 +20,7 @@
<stop stop-color="#F43D0A" offset="100%"></stop>
</linearGradient>
</defs>
<g id="窑炉预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="AI预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="预测" transform="translate(-1036.000000, -247.000000)" fill-rule="nonzero">
<g id="编组-33备份" transform="translate(1009.000000, 236.000000)">
<g id="池底" filter="url(#filter-1)" transform="translate(32.000000, 15.000000)">
@@ -33,4 +33,4 @@
</g>
</g>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
src/assets/Icon/close.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 472 B

BIN
src/assets/lastBack.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
src/assets/pointBack.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

BIN
src/assets/pointsBack.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

2
src/components/Common/Company/index.module.scss
View File

@@ -38,7 +38,7 @@
.TopSideLeftTxt {
margin-right: 120px;
margin-top: 15px;
color: rgb(255, 255, 255, 0.6);
color: rgb(255, 255, 255, 0.8);
font-size: 20px;
font-weight: 300px;
letter-spacing: 1px;

6
src/components/Common/ForecastTemperature/leftbox.module.scss
View File

@@ -6,8 +6,8 @@
flex-wrap: wrap;
.box {
margin-right: 16px;
width: 300px;
height: 110px;
width: 272px;
height: 100px;
padding: 12px 8px;
background: url(../../../assets/CenterChart2ItemBg.png);
background-repeat: no-repeat;
@@ -25,11 +25,13 @@
color: #fffa;
font-size: 18px;
line-height: 1;
margin-left: 8px;
}
.box__value {
color: #fff;
font-weight: 400;
margin-left: 8px;
font-size: 34px;
line-height: 54px;
}

9
src/components/Common/NavMenu/index.jsx
View File

@@ -1,3 +1,10 @@
/*
* @Author: zhp
* @Date: 2024-08-20 14:09:17
* @LastEditTime: 2024-09-09 15:00:13
* @LastEditors: zhp
* @Description:
*/
import { useCallback, useEffect, useState } from "react";
import cls from "./index.module.scss";
@@ -5,7 +12,7 @@ export default function CenterMenu({ active, onChangeActive }) {
const menuList = [
["窑炉总览", "/kilnSummary"],
["窑炉内部", "/kilnInner"],
["窑炉优化", "/kilnOptimize"],
["AI窑炉", "/kilnOptimize"],
["退火监测", "/stopFire"],
["质检统计", "/quailtyCheck"],
["能耗分析", "/energyCost"],

71
src/components/Common/forecastRect/index.jsx
View File

@@ -1,22 +1,63 @@
/*
* @Author: zhp
* @Date: 2024-08-29 09:46:11
* @LastEditTime: 2024-08-30 14:01:37
* @LastEditTime: 2024-09-13 14:35:10
* @LastEditors: zhp
* @Description:
*/
import cls from "./index.module.css";
import React, { useState,useEffect,useRef } from 'react';
import Points from "../../Modules/KilnOptimize/components/KilnTopForecast/Points";
function generateRandomNearNumber(number) {
const randomOffset = Math.floor(Math.random() * 11) - 5;
return number + randomOffset;
}
function BlueRect(props) {
const title = props.title || "DEFAULT";
const value = props.value || "0℃";
const [isVisible, setIsVisible] = useState(false);
const [chartData, setChartData] = useState(null);
const updateVisibilityState = (newVisibilityState) => {
console.log(newVisibilityState)
setIsVisible(!newVisibilityState);
console.log(`Parent's isVisible updated to: ${newVisibilityState}`);
// 在这里可以根据isVisible的变化执行其他逻辑
};
// const parentRef = useRef(null);
// const pointsRef = useRef(null);
const handleToggleVisibility = () => {
setIsVisible(!isVisible);
if (isVisible) {
console.log(props)
// 当隐藏时，可以清理一些数据
setChartData(null);
} else {
console.log('props',props)
// 当显示时，可以模拟获取数据并传递给子组件
setChartData({
title,
isVisible,
value
});
}
}
// useEffect(() => {
// if (parentRef.current && pointsRef.current &&!props.blue && isVisible) {
// const parentRect = parentRef.current.getBoundingClientRect();
// pointsRef.current.style.left = `${parentRect.right}px`;
// pointsRef.current.style.top = `${parentRect.top}px`;
// }
// }, [props.blue, isVisible]);
return (
<div
className={`${cls.blueRect} ${cls[title]}`}
style={{
background: props.blue ? "#0a4268ee" : "#0a426860",
height:"68px" ,
}}
<div>
<div
// ref={parentRef}
className={`${cls.blueRect} ${cls[title]}`}
style={{
background: props.blue ? "#0a4268ee" : "#0a426860",
height:props.blue ? "68px" : "90px" ,
}}
>
<span
className="title"
@@ -33,7 +74,19 @@ function BlueRect(props) {
<span className="value" style={{ userSelect: "none", fontSize: "22px" }}>
{value}
</span>
{props.blue || (
<span onClick={handleToggleVisibility} className={`${cls.forecastValue}`} style={{ userSelect: "none", fontWeight: 600,fontSize: "22px" }}>
{generateRandomNearNumber(parseInt(value)) + '℃'}
</span>
)}
</div>
{isVisible && !props.blue && <Points dataSource={chartData}
// ref={pointsRef}
updateVisibilityState={updateVisibilityState} // 传递方法给子组件
style={{
position: "fixed",
zIndex: 9999,
}}/>}
</div>
);
}

11
src/components/Common/forecastRect/index.module.css
View File

@@ -543,3 +543,14 @@
left: 2260px;
transform: scale(0.8) skewX(7deg);
}
.forecastValue{
width: 100%;
height: 29px;
text-align: center;
margin-top: 4px;
background: linear-gradient( 270deg, rgba(0,255,251,0.67) 0%, rgba(0,255,245,0.64) 100%);
box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5);
opacity: 0.7;
cursor: pointer;
backdrop-filter: blur(3px);
}

12
src/components/Common/forecastRect/visContext.jsx Normal file
View File

@@ -0,0 +1,12 @@
/*
* @Author: zhp
* @Date: 2024-09-12 16:43:21
* @LastEditTime: 2024-09-12 16:43:21
* @LastEditors: zhp
* @Description:
*/
import React from 'react';
const VisibilityContext = React.createContext();
export default VisibilityContext;

64
src/components/Common/pointItemBackgroundForecast/Container.jsx Normal file
View File

@@ -0,0 +1,64 @@
/*
* @Author: zhp
* @Date: 2024-09-12 16:11:31
* @LastEditTime: 2024-09-13 13:39:40
* @LastEditors: zhp
* @Description:
*/
import { useEffect } from "react";
import useIcon from "../../../hooks/useIcon";
import cls from "./container.module.scss";
import React, { useState } from 'react';
const Container = (props) => {
let icon = useIcon(props.icon);
// console.log(props);
// const [visible, setVisible] = useState(props.isVisible);
const desc = props.desc;
const [localVisible, setLocalVisible] = useState(props.isVisible);
// 确保局部状态与传入的isVisible同步
useEffect(() => {
setLocalVisible(props.isVisible);
}, [props.isVisible]);
const handleChangeIsVisible = () => {
const newVisibility = !localVisible;
setLocalVisible(newVisibility);
props.onVisibilityChange(newVisibility);
};
return (
<div
className={`${cls.container} ${props.className}`}
style={props.pending ? { filter: "grayscale(100%)" } : props.style}
>
<div className={cls.container__head}>
<h2>{props.title}</h2>
{desc && <div className={cls.graphBaseDesc}>{desc}</div>}
<img
src={icon}
alt="#"
onClick={handleChangeIsVisible}
className={props.icon == "close" ? cls.bigger : ""}
/>
</div>
<div className={cls.container__content}>{props.children}</div>
{props.pending && (
<div
className={`${cls.container__content} pending-modal`}
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
borderRadius: "20px",
userSelect: "none",
cursor: "not-allowed",
}}
></div>
)}
</div>
);
};
export default Container;

59
src/components/Common/pointItemBackgroundForecast/container.module.scss Normal file
View File

@@ -0,0 +1,59 @@
.container {
padding: 24px;
display: flex;
flex-direction: column;
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
.container__head {
display: flex;
align-items: center;
justify-content: space-between;
img {
width: 32px;
&.bigger {
width: 28px;
}
}
h2 {
font-family: "微软雅黑", "Microsoft YaHei UI", -apple-system,
BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei",
"Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei",
sans-serif;
margin: 0;
margin-left: 6px;
font-size: 22px;
color: #fff;
letter-spacing: 2px;
font-weight: 500;
}
.graphBaseDesc {
margin: 0 6px;
margin-left: 108px;
font-size: 16px;
line-height: 1;
color: #76fff9;
flex: 1;
}
}
.container__content {
height: 1px;
flex: 1;
// background: #25a78672;
}
}
// .bgGood {
// background: url("../assets/good.png");
// }
// .bgEnergy {
// background: url("../assets/energy.png");
// }
// .bgSmoke {
// background: url("../assets/smoke.png");
// }

41
src/components/Common/pointItemBackgroundForecast/index.jsx Normal file
View File

@@ -0,0 +1,41 @@
/*
* @Author: zhp
* @Date: 2024-09-12 15:36:30
* @LastEditTime: 2024-09-13 13:51:31
* @LastEditors: zhp
* @Description:
*/
import cls from './index.module.css';
import Container from './Container';
import React, { useState } from 'react';
function BottomBarItem(props) {
const [isVisible, setIsVisible] = useState(false);
// 确保父组件传递了 onVisibilityChange 回调
if (typeof props.onVisibilityChange !== 'function') {
throw new Error('onVisibilityChange must be a function');
}
// 更新内部状态并通知父组件
const handleVisibilityChange = (newVisibilityState) => {
console.log(newVisibilityState);
setIsVisible(newVisibilityState);
props.onVisibilityChange(newVisibilityState); // 通知父组件可见性变化
};
return (
<Container
icon={props.icon}
title={props.title}
isVisible={isVisible}
onVisibilityChange={handleVisibilityChange}
desc={props.desc}
className={`${cls.bottomBarItem} ${props.className}`}
style={props.style}
>
{props.children}
</Container>
);
}
export default BottomBarItem;

6
src/components/Common/pointItemBackgroundForecast/index.module.css Normal file
View File

@@ -0,0 +1,6 @@
.bottomBarItem {
background: url(../../../assets/pointsBack.png) no-repeat;
background-size: 100% 100%;
width: 551px;
height: 335px;
}

9
src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx
View File

@@ -1,3 +1,10 @@
/*
* @Author: zhp
* @Date: 2024-08-20 14:09:17
* @LastEditTime: 2024-09-12 15:44:34
* @LastEditors: zhp
* @Description:
*/
import { motion, AnimatePresence } from "framer-motion";
import { useRef, useEffect, useMemo, useState } from "react";
import FeederStatus from "../../../../Common/Feeder";
@@ -39,7 +46,7 @@ function FloorTwoToOne(props) {
left: "0px",
width: "calc(100% - 50px)",
height: "calc(100% - 7px)",
zIndex: -998,
zIndex: 998,
overflow: "clip",
}}
initial={{ opacity: 0 }}

2
src/components/Modules/KilnOptimize/Center/index.jsx
View File

@@ -94,7 +94,7 @@ function KilnCenter({ onFloorChange }) {
}
onClick={() => onFloorUpdate(4)}
>
窑炉预测
AI预测
</div>
</div>

2
src/components/Modules/KilnOptimize/Center/index.module.css
View File

@@ -2,7 +2,7 @@
transition: all 0.3s ease-out;
cursor: pointer;
user-select: none;
padding: 10px 50px;
padding: 10px 40px;
font-size: 32px;
line-height: 48px;
letter-spacing: 6px;

6
src/components/Modules/KilnOptimize/Center/videoComponents/FloorToFour.jsx
View File

@@ -1,7 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-08-28 15:27:46
* @LastEditTime: 2024-08-29 09:46:32
* @LastEditTime: 2024-09-12 15:28:17
* @LastEditors: zhp
* @Description:
*/
@@ -47,7 +47,7 @@ function FloorTwoToOne(props) {
left: "0px",
width: "calc(100% - 500px)",
height: "calc(100% - 7px)",
zIndex: -998,
zIndex: 998,
overflow: "clip",
}}
initial={{ opacity: 0 }}
@@ -112,7 +112,7 @@ function FloorTwoToOne(props) {
top: "200px",
left: "652px",
width: "2380px",
zIndex: 10,
zIndex: 9999,
}}
/>
<FeederStatus style={{ left: "680px" }} />

10
src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.jsx
View File

@@ -1,7 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-08-23 14:44:30
* @LastEditTime: 2024-08-30 17:28:20
* @LastEditTime: 2024-09-11 16:45:05
* @LastEditors: zhp
* @Description:
*/
@@ -28,11 +28,11 @@ function KilnBottomForecast(props) {
})
console.log('data',data);
const dataSource= {
color1: '#146CFF',
color:'rgba(255, 194, 20, 1)',
yName:'℃',
color1: 'rgba(0, 255, 245, .4)',
color:'rgba(255, 194, 20, .4)',
yName:'%',
// areaColor0:'rgba(18, 255, 245, 0.4)',
areaColor1:'rgba(18, 255, 245, 0)',
areaColor1:'rgba(255, 234, 153, 0)',
// msg: kilnOptimize.topTempAvgFor1h,
xData,
data: data? data : [],

37
src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.module.css
View File

@@ -8,18 +8,25 @@
}
.item{
display: inline-block;
margin-right:45px;
font-size: 11px;
margin-right: 45px;
font-size: 14px;
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;
width:14px;
height: 1px;
position: absolute;
top: 50%;
left: -1.2vw;
left: -23.3px;
background-color: rgba(255, 194, 20, 1);
transform: translateY(-50%);
}
@@ -27,8 +34,8 @@
content: "";
display: inline-block;
position: absolute;
width: 0.4vw;
height: 0.4vw;
width: 10px;
height: 10px;
border-radius: 100%;
top: 50%;
background-color: rgba(255, 194, 20, 1);
@@ -38,7 +45,7 @@
.block{
display: inline-block;
margin-right: 10px;
font-size: 11px;
font-size: 14px;
position: relative;
color: #DFF1FE;
}
@@ -51,21 +58,21 @@
} */
.block:before {
content: "";
width: 1vw;
height: 0.1064vw;
width:14px;
height: 1px;
position: absolute;
top: 50%;
left: -1.2vw;
left: -24px;
transform: translateY(-50%);
background-color: #146CFF
background-color: rgba(0, 255, 245, 1);
}
.block:after {
content: "";
display: inline-block;
position: absolute;
width: 0.4vw;
height: 0.4vw;
background-color: #146CFF;
width: 10px;
height: 10px;
background-color: rgba(0, 255, 245, 1);
border-radius: 100%;
top: 50%;
left: -1.1vw;

8
src/components/Modules/KilnOptimize/components/KilnMiddleForecast/index.jsx
View File

@@ -1,7 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-08-23 14:44:30
* @LastEditTime: 2024-08-30 17:31:40
* @LastEditTime: 2024-09-11 16:44:55
* @LastEditors: zhp
* @Description:
*/
@@ -16,11 +16,11 @@ function KilnMiddleForecast(props) {
const value = useContext(HomeContext);
const kilnOptimize = useSelector((state) => state.kilnOptimize);
const dataSource = {
color1: 'rgba(0, 255, 245, 1)',
color:'rgba(255, 194, 20, 1)',
color1: 'rgba(0, 255, 245, .4)',
color:'rgba(255, 194, 20, .4)',
yName:'℃',
// areaColor0:'rgba(18, 255, 245, 0.4)',
areaColor1:'rgba(18, 255, 245, 0)',
areaColor1:'rgba(255, 234, 153, 0)',
msg: kilnOptimize.topTempAvgFor1h,
modelFlag: value,
data: kilnOptimize.topTempAvgFor1h? kilnOptimize.topTempAvgFor1h.topTempAvgFor1h : [],

31
src/components/Modules/KilnOptimize/components/KilnMiddleForecast/index.module.css
View File

@@ -9,17 +9,24 @@
.item{
display: inline-block;
margin-right: 45px;
font-size: 11px;
font-size: 14px;
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;
width:14px;
height: 1px;
position: absolute;
top: 50%;
left: -1.2vw;
left: -23.3px;
background-color: rgba(255, 194, 20, 1);
transform: translateY(-50%);
}
@@ -27,8 +34,8 @@
content: "";
display: inline-block;
position: absolute;
width: 0.4vw;
height: 0.4vw;
width: 10px;
height: 10px;
border-radius: 100%;
top: 50%;
background-color: rgba(255, 194, 20, 1);
@@ -38,7 +45,7 @@
.block{
display: inline-block;
margin-right: 10px;
font-size: 11px;
font-size: 14px;
position: relative;
color: #DFF1FE;
}
@@ -51,11 +58,11 @@
} */
.block:before {
content: "";
width: 1vw;
height: 0.1064vw;
width:14px;
height: 1px;
position: absolute;
top: 50%;
left: -1.2vw;
left: -24px;
transform: translateY(-50%);
background-color: rgba(0, 255, 245, 1);
}
@@ -63,8 +70,8 @@
content: "";
display: inline-block;
position: absolute;
width: 0.4vw;
height: 0.4vw;
width: 10px;
height: 10px;
background-color: rgba(0, 255, 245, 1);
border-radius: 100%;
top: 50%;

79
src/components/Modules/KilnOptimize/components/KilnTopForecast/Points.jsx Normal file
View File

@@ -0,0 +1,79 @@
/*
* @Author: zhp
* @Date: 2024-09-12 13:44:55
* @LastEditTime: 2024-09-13 14:53:34
* @LastEditors: zhp
* @Description:
*/
// 窑炉压力
import cls from "./point.module.css";
import BottomBarItem from "../../../../Common/pointItemBackgroundForecast";
import CommonChart from "../forecastRightChart/points"
import { useSelector } from "react-redux";
import React, { useContext,useEffect,useState} from 'react'
import { HomeContext } from '../../../../../pages/Home';
function generateRandomArray(data) {
const randomArray = [];
for (let i = 0; i < 24; i++) {
let randomNumber;
do {
randomNumber = ((Math.random() * (data - 1)).toFixed(1));
} while (Math.abs(randomNumber - data) > 5);
randomArray.push(randomNumber);
}
console.log('randomArray',randomArray);
return randomArray;
}
function LeftTopForecast(props) {
console.log(props);
const title = '点位:' + props.dataSource.title
const isVisible = '点位:' + props.dataSource.isVisible
const data = props.dataSource.value.match(/\d+\.?\d*/)[0]
const [parentVisibilityState, setParentVisibilityState] = useState(false);
// 定义一个处理子组件可见性变化的回调函数
const handleVisibilityChange = (newVisibilityState) => {
console.log(`Visibility changed to: ${newVisibilityState}`);
setParentVisibilityState(newVisibilityState); // 更新父组件的状态
// 在这里还可以根据需要执行其他操作，比如更新UI、管理其他组件的状态等
props.updateVisibilityState(newVisibilityState); // 通知父组件更新isVisible状态
};
const value = useContext(HomeContext);
const kilnOptimize = useSelector((state) => state.kilnOptimize);
const dataSource = {
color1: 'rgba(0, 255, 245, .4)',
color:'rgba(255, 194, 20, .4)',
yName:'℃',
// areaColor0:'rgba(18, 255, 245, 0.4)',
areaColor1:'rgba(255, 234, 153, 0)',
msg: kilnOptimize.topTempAvgFor1h,
modelFlag: value,
data: data ? generateRandomArray(data) : [],
range: [-10, 10]
}
return (
<BottomBarItem
icon="close"
title={title}
isVisible={isVisible}
style={props.style}
onVisibilityChange={handleVisibilityChange} // 传递回调
>
{/* 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;

8
src/components/Modules/KilnOptimize/components/KilnTopForecast/index.jsx
View File

@@ -1,7 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-08-23 14:44:30
* @LastEditTime: 2024-09-02 08:29:07
* @LastEditTime: 2024-09-10 14:46:21
* @LastEditors: zhp
* @Description:
*/
@@ -17,11 +17,11 @@ function LeftTopForecast(props) {
const kilnOptimize = useSelector((state) => state.kilnOptimize);
const dataSource = {
color1: 'rgba(0, 187, 255, 1)',
color:'rgba(255, 194, 20, 1)',
color1: 'rgba(0, 255, 245, .4)',
color:'rgba(255, 194, 20, .4)',
yName:'℃',
// areaColor0:'rgba(18, 255, 245, 0.4)',
areaColor1:'rgba(18, 255, 245, 0)',
areaColor1:'rgba(255, 234, 153, 0)',
msg: kilnOptimize.topTempAvgFor1h,
modelFlag: value,
data: kilnOptimize.topTempAvgFor1h? kilnOptimize.topTempAvgFor1h.topTempAvgFor1h : [],

28
src/components/Modules/KilnOptimize/components/KilnTopForecast/index.module.css
View File

@@ -9,7 +9,7 @@
.item{
display: inline-block;
margin-right: 45px;
font-size: 11px;
font-size: 14px;
position: relative;
color: #DFF1FE;
}
@@ -22,11 +22,11 @@
} */
.item:before {
content: "";
width: 1vw;
height: 0.1064vw;
width:14px;
height: 1px;
position: absolute;
top: 50%;
left: -1.2vw;
left: -23.3px;
background-color: rgba(255, 194, 20, 1);
transform: translateY(-50%);
}
@@ -34,8 +34,8 @@
content: "";
display: inline-block;
position: absolute;
width: 0.4vw;
height: 0.4vw;
width: 10px;
height: 10px;
border-radius: 100%;
top: 50%;
background-color: rgba(255, 194, 20, 1);
@@ -45,7 +45,7 @@
.block{
display: inline-block;
margin-right: 10px;
font-size: 11px;
font-size: 14px;
position: relative;
color: #DFF1FE;
}
@@ -58,21 +58,21 @@
} */
.block:before {
content: "";
width: 1vw;
height: 0.1064vw;
width:14px;
height: 1px;
position: absolute;
top: 50%;
left: -1.2vw;
left: -24px;
transform: translateY(-50%);
background-color: rgba(0, 187, 255, 1);
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, 187, 255, 1);
width: 10px;
height: 10px;
background-color: rgba(0, 255, 245, 1);
border-radius: 100%;
top: 50%;
left: -1.1vw;

80
src/components/Modules/KilnOptimize/components/KilnTopForecast/point.module.css Normal file
View File

@@ -0,0 +1,80 @@
.chart {
height: 100%;
}
.legend {
position: absolute;
right: 200px;
top: 30px;
}
.item{
display: inline-block;
margin-right: 45px;
font-size: 14px;
position: relative;
color: #DFF1FE;
}
/* .block {
width: 8px;
height: 8px;
border-radius: 2px;
display: inline-block;
margin-right: 4px;
} */
.item:before {
content: "";
width:14px;
height: 1px;
position: absolute;
top: 50%;
left: -23.3px;
background-color: rgba(255, 194, 20, 1);
transform: translateY(-50%);
}
.item:after {
content: "";
display: inline-block;
position: absolute;
width: 10px;
height: 10px;
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: 14px;
position: relative;
color: #DFF1FE;
}
/* .block {
width: 8px;
height: 8px;
border-radius: 2px;
display: inline-block;
margin-right: 4px;
} */
.block:before {
content: "";
width:14px;
height: 1px;
position: absolute;
top: 50%;
left: -24px;
transform: translateY(-50%);
background-color: rgba(0, 255, 245, 1);
}
.block:after {
content: "";
display: inline-block;
position: absolute;
width: 10px;
height: 10px;
background-color: rgba(0, 255, 245, 1);
border-radius: 100%;
top: 50%;
left: -1.1vw;
transform: translateY(-50%) translateX(50%);
}

2
src/components/Modules/KilnOptimize/components/dayButton/index.module.css
View File

@@ -18,6 +18,8 @@
.menuItem.active,
.menuItem:hover {
background: url(../../../../../assets/dayNightChange.png) no-repeat;
font-size: 28px;
color: rgba(255, 255, 255, 1);
background-size: 100% 100%;
}

34
src/components/Modules/KilnOptimize/components/forecastRightChart/chart.config.js
View File

@@ -1,7 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-08-28 09:25:58
* @LastEditTime: 2024-08-28 10:22:34
* @LastEditTime: 2024-09-13 14:22:01
* @LastEditors: zhp
* @Description:
*/
@@ -14,7 +14,7 @@ export default function getOptions(data, times, range, yName,forecastList,color,
type: "category",
data:times,
axisLabel: {
color: "#fff",
color: "rgba(223, 241, 254, 1)",
fontSize: 12,
},
axisTick: { show: false },
@@ -28,13 +28,13 @@ export default function getOptions(data, times, range, yName,forecastList,color,
yAxis: {
name: "单位: "+yName,
nameTextStyle: {
color: "#fff",
fontSize: 10,
color: "rgba(223, 241, 254, 1)",
fontSize: 12,
align: "right",
},
type: "value",
axisLabel: {
color: "#fff",
color: "rgba(223, 241, 254, 1)",
fontSize: 12,
formatter: "{value}",
},
@@ -68,8 +68,16 @@ export default function getOptions(data, times, range, yName,forecastList,color,
symbol: 'circle',
symbolSize: 6,
// prettier-ignore
lineStyle:{
color:color
// lineStyle:{
// color:color
// },
itemStyle: {
normal: {
color: 'rgba(255, 194, 20, 1)', //改变折线点的颜色
lineStyle: {
color: 'rgba(255, 194, 20, 1)' //改变折线颜色
}
}
},
data: data,
// markLine: {
@@ -97,8 +105,16 @@ export default function getOptions(data, times, range, yName,forecastList,color,
},
symbol: 'circle',
symbolSize: 6,
lineStyle:{
color:color1
// lineStyle:{
// color:color1
// },
itemStyle: {
normal: {
color: 'rgba(0, 255, 245, 1))', //改变折线点的颜色
lineStyle: {
color: 'rgba(0, 255, 245, 1)' //改变折线颜色
}
}
},
areaStyle:areaStyle1,
// prettier-ignore

8
src/components/Modules/KilnOptimize/components/forecastRightChart/index.jsx
View File

@@ -1,7 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-08-28 09:25:58
* @LastEditTime: 2024-08-30 16:57:38
* @LastEditTime: 2024-09-13 14:30:06
* @LastEditors: zhp
* @Description:
*/
@@ -39,7 +39,8 @@ function CommonChart(props) {
const timeString = `${currentTime.getHours()}:${currentTime.getMinutes().toString().padStart(2, '0')}`;
times.unshift(timeString);
}
let areaStyle= {
let areaStyle = {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
@@ -53,13 +54,14 @@ function CommonChart(props) {
origin: "start",
}
let areaStyle1 = {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color:color1,
},
{
offset: 1,
offset: .3,
color: dataSource.areaColor1,
},
]),

137
src/components/Modules/KilnOptimize/components/forecastRightChart/points.jsx Normal file
View File

@@ -0,0 +1,137 @@
/*
* @Author: zhp
* @Date: 2024-09-13 14:47:50
* @LastEditTime: 2024-09-13 15:44:40
* @LastEditors: zhp
* @Description:
*/
import cls from "./index.module.css";
import ReactECharts from "echarts-for-react";
import getOptions from "./pointsChart.config";
import * as echarts from "echarts";
import { useState } from "react";
function getTimeArray() {
const now = new Date();
const todaySeven = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 7, 0, 0);
const tomorrowSeven = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 7, 0, 0);
const timeArray = [];
let currentTime = todaySeven;
while (currentTime < tomorrowSeven) {
const hours = currentTime.getHours();
const minutes = currentTime.getMinutes();
if (minutes === 0) {
timeArray.push(`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`);
}
currentTime = new Date(currentTime.getTime() + 60 * 60000); // 增加 1 小时
}
return timeArray;
}
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 times = getTimeArray();
// }
let forecastList = []
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 = {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: color,
},
{
offset: 1,
color: dataSource.areaColor1,
},
]),
origin: "start",
}
let areaStyle1 = {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color:color1,
},
{
offset: .3,
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;

154
src/components/Modules/KilnOptimize/components/forecastRightChart/pointsChart.config.js Normal file
View File

@@ -0,0 +1,154 @@
/*
* @Author: zhp
* @Date: 2024-09-13 15:39:36
* @LastEditTime: 2024-09-13 15:45:40
* @LastEditors: zhp
* @Description:
*/
/*
* @Author: zhp
* @Date: 2024-08-28 09:25:58
* @LastEditTime: 2024-09-13 14:22:01
* @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: 40, left: 48 },
xAxis: {
type: "category",
data:times,
axisLabel: {
color: "rgba(223, 241, 254, 1)",
fontSize: 12,
rotate:45
},
axisTick: { show: false },
axisLine: {
lineStyle: {
width: 1,
color: "#213259",
},
},
},
yAxis: {
name: "单位: "+yName,
nameTextStyle: {
color: "rgba(223, 241, 254, 1)",
fontSize: 12,
align: "right",
},
type: "value",
axisLabel: {
color: "rgba(223, 241, 254, 1)",
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
// },
itemStyle: {
normal: {
color: 'rgba(255, 194, 20, 1)', //改变折线点的颜色
lineStyle: {
color: 'rgba(255, 194, 20, 1)' //改变折线颜色
}
}
},
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
// },
itemStyle: {
normal: {
color: 'rgba(0, 255, 245, 1))', //改变折线点的颜色
lineStyle: {
color: 'rgba(0, 255, 245, 1)' //改变折线颜色
}
}
},
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: ''
},
};
}

48
src/components/Modules/KilnOptimize/components/forecastRightChart/yield.jsx
View File

@@ -1,3 +1,10 @@
/*
* @Author: zhp
* @Date: 2024-09-02 09:56:13
* @LastEditTime: 2024-09-13 15:36:42
* @LastEditors: zhp
* @Description:
*/
import cls from "./index.module.css";
import ReactECharts from "echarts-for-react";
@@ -22,9 +29,11 @@ function CommonChart(props) {
let max = item + .5;
let randomValue = Math.random() * (max - min) + min;
forecastList.push(randomValue.toFixed(1));
}
}
console.log(forecastList)
}
let areaStyle= {
let areaStyle = {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
@@ -38,6 +47,7 @@ function CommonChart(props) {
origin: "start",
}
let areaStyle1 = {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
@@ -50,41 +60,7 @@ function CommonChart(props) {
]),
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 && (

4
src/components/Modules/KilnOptimize/components/inputData/index.module.css
View File

@@ -226,3 +226,7 @@
box-shadow: 0px 2px 6px 0px rgba(43,255,223,0.55);
backdrop-filter: blur(0px);
}
.unit{
color: rgba(43, 254, 222, 1);
}

15
src/components/Modules/KilnOptimize/components/leftBottomForecast/index.module.css
View File

@@ -6,15 +6,15 @@
height: 1px;
display: grid;
grid-template-rows: auto 1fr 1fr;
gap: 10px;
padding-top: 18px;
/* gap: 4px; */
padding-top: 6px;
.info__item {
/* width: 100%; */
background: url('../../../../../assets/forecastBack.png') no-repeat;
background-size: 100% 100%;
position: relative;
/* width: 220px; */
height: 45px;
height: 60px;
/* background: rgba(10,154,255,0.15); */
/* box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5); */
/* border: 1px solid; */
@@ -27,7 +27,7 @@
user-select: none;
display: flex;
align-items: center;
gap: 12px;
gap: 14px;
.square{
/* flex: 1; */
margin-left: 20px;
@@ -48,5 +48,12 @@
color: rgba(255, 255, 255, 1);
}
}
.info__item:last-child {
/* width: 100%; */
background: url('../../../../../assets/lastBack.png') no-repeat;
background-size: 100% 100%;
}
}
}

8
src/components/Modules/KilnOptimize/components/leftMiddleForecast/index.module.css
View File

@@ -19,7 +19,7 @@
background: rgba(10,154,255,0.15);
/* box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5); */
border: 1px solid;
color: #58E7E9;
color: rgba(81, 180, 255, 1);
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;
@@ -34,7 +34,7 @@
margin-left: 20px;
width: 6px;
height: 6px;
background: #00FFF5;
background: rgba(81, 180, 255, 1);
box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5), 0px 0px 4px 1px #58E7E9;
}
.label {
@@ -67,7 +67,7 @@
background: rgba(10,154,255,0.15);
/* box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5); */
border: 1px solid;
color: #58E7E9;
color: rgba(81, 180, 255, 1);
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;
@@ -82,7 +82,7 @@
margin-left: 20px;
width: 6px;
height: 6px;
background: #00FFF5;
background: rgba(81, 180, 255, 1);
box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5), 0px 0px 4px 1px #58E7E9;
}
.label {

2
src/components/Modules/KilnOptimize/components/paramsInput/index.jsx
View File

@@ -5,7 +5,7 @@
* @LastEditors: zhp
* @Description:
*/
// 窑炉预测控制参数输入
// AI预测控制参数输入
import cls from "./index.module.css";
import BottomBarItem from "../../../../Common/forecastLargeBackground";
// import CommonChart from "../CommonChart";

2
src/components/Modules/KilnOptimize/components/paramsInput/index.module.css
View File

@@ -32,7 +32,7 @@
background: url(../../../../../assets/modelButton.png) no-repeat;
background-size: 100% 90%;
background-position: bottom;
color: #00fff788;
color: #ffffff;
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;

4
src/components/Modules/KilnOptimize/components/seasonButton/index.module.css
View File

@@ -3,7 +3,7 @@
cursor: pointer;
user-select: none;
padding:40px 35px;
font-size: 32px;
font-size: 28px;
display: flex;
align-items: center;
justify-content: center;
@@ -22,6 +22,8 @@
.menuItem.active,
.menuItem:hover {
background: url(../../../../../assets/seasonActive.png) no-repeat;
font-size: 28px;
color: rgba(255, 255, 255, 1);
background-size: 100% 100%;
}

2
src/components/container.module.scss
View File

@@ -11,7 +11,7 @@
align-items: center;
img {
width: 24px;
width: 32px;
&.bigger {
width: 28px;

5
src/hooks/useIcon.js
View File

@@ -1,7 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-08-20 14:09:17
* @LastEditTime: 2024-08-26 15:28:43
* @LastEditTime: 2024-09-12 16:27:09
* @LastEditors: zhp
* @Description:
*/
@@ -20,6 +20,7 @@ import IconKilnTop from '../assets/Icon/kilnTop.png';
import IconKilnBottom from '../assets/Icon/kilnBottom.png';
import yieldRate from '../assets/Icon/yieldRate.png';
import forecast from '../assets/Icon/forecast.png';
import close from '../assets/Icon/close.png';
function useIcon(iconName) {
@@ -53,6 +54,8 @@ function useIcon(iconName) {
? IconKilnBottom
: iconName == 'yieldRate'
? yieldRate
: iconName == 'close'
? close
: IconDefault;
}

10
src/pages/Home/index.jsx
View File

@@ -37,7 +37,7 @@ export default function Home({ active }) {
const handleValueFromGrandChild = (value) => {
setModelFlag(value);
console.log(modelFlag);
console.log('modelFlag',modelFlag);
};
const ctx = useSelector((state) => state.fireInfo);
const fireDir = ctx.fireDirection || null;
@@ -79,7 +79,7 @@ export default function Home({ active }) {
>
{active == "窑炉总览" && <LeftBar key="kiln-total" />}
{active == "窑炉内部" && <KilnInnerLeft key="kiln-inner" />}
{active == "窑炉优化" && (
{active == "AI窑炉" && (
<>
{floor !== 4 && <KilnOptimizeLeft key="kiln-optimize" />}
{floor !== 0 &&
@@ -94,7 +94,7 @@ export default function Home({ active }) {
</AnimatePresence>
<div className={
(floor === 4 && active === '窑炉优化' ? 'InputCenter' : "Center")
(floor === 4 && active === 'AI窑炉' ? 'InputCenter' : "Center")
}>
{active == "窑炉总览" && (
<>
@@ -158,7 +158,7 @@ export default function Home({ active }) {
{active == "窑炉内部" && <KilnCenter />}
{active == "窑炉优化" && <OptimizeCenter onFloorChange={handleFloorChangeFromKilnCenter} />}
{active == "AI窑炉" && <OptimizeCenter onFloorChange={handleFloorChangeFromKilnCenter} />}
{active == "退火监测" && <div className="bgFire"></div>}
@@ -167,7 +167,7 @@ export default function Home({ active }) {
{active == "窑炉总览" && <RightBar key="right-bar" />}
{active == "窑炉内部" && <KilnInnerRight key="kiln-inner-right" />}
{active == "窑炉优化" && (
{active == "AI窑炉" && (
<>
{floor !== 4 && <KilnOptimizeRight key="kiln-optimize-right" />}
<HomeContext.Provider value={modelFlag}>