Merge branch 'features/warning' into zjl

src/App.js

@@ -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);

src/assets/CenterChart1icon1.svg

@@ -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)">

src/assets/CenterChart1icon2.svg

@@ -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)">

src/assets/CenterChart1icon3.svg

@@ -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>

src/assets/CenterChart1icon4.svg

@@ -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)">

src/components/Common/BottomItemBackgroundForecastBottom/index.module.css

@@ -1,5 +1,5 @@
 .bottomBarItem {
-      background: url(../../../assets/leftBottomBack.png) no-repeat;
+      background: url(../../../assets/forecastBack.png) no-repeat;
     background-size: 100% 100%;
     width: 506px;
 }

src/components/Common/Company/index.module.scss

@@ -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;

src/components/Common/ForecastTemperature/leftbox.module.scss

@@ -6,8 +6,8 @@
   flex-wrap: wrap;
   .box {
     margin-right: 16px;
-    width: 300px;
+    width: 272px;
-    height: 110px;
+    height: 100px;
     padding: 12px 8px;
     background: url(../../../assets/CenterChart2ItemBg.png);
     background-repeat: no-repeat;
@@ -20,16 +20,19 @@
 
     .box__inner {
       padding-top: 12px;
+      margin-left: 20px;
 
       .box__label {
         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;
       }

src/components/Common/NavMenu/index.jsx

@@ -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"],

src/components/Common/forecastRect/index.jsx

@@ -1,21 +1,62 @@
 /*
  * @Author: zhp
  * @Date: 2024-08-29 09:46:11
- * @LastEditTime: 2024-08-30 14:01:37
+ * @LastEditTime: 2024-09-14 09:20:36
  * @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) => {
+    setIsVisible(!newVisibilityState);
+    // 在这里可以根据isVisible的变化执行其他逻辑
+  };
+    // const parentRef = useRef(null);
+  // const pointsRef = useRef(null);
+    const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+  const [pointsPosition, setPointsPosition] = useState({ left: 'initial', top: 'initial' });
+
+  const handleMouseMove = (event) => {
+    setMousePosition({ x: event.clientX, y: event.clientY });
+  };
+
+  const handleToggleVisibility = () => {
+    setIsVisible(!isVisible);
+    if (isVisible) {
+      // 当隐藏时，可以清理一些数据
+      setChartData(null);
+    } else {
+      setPointsPosition({
+        left: `${mousePosition.x + 100}px`,
+        top: `${mousePosition.y - 100}px`,
+      });
+      // 当显示时，可以模拟获取数据并传递给子组件
+      setChartData({
+        title,
+        isVisible,
+        value
+      });
+    }
+  }
   return (
+    <div onMouseMove={handleMouseMove}>
       <div
+        // ref={parentRef}
         className={`${cls.blueRect} ${cls[title]}`}
         style={{
           background: props.blue ? "#0a4268ee" : "#0a426860",
-        height:"68px" ,
+          height:props.blue ? "68px" : "90px" ,
         }}
     >
       <span
@@ -33,7 +74,20 @@ 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}
+        updateVisibilityState={updateVisibilityState} // 传递方法给子组件
+          style={{
+          position: "fixed",
+          left: pointsPosition.left,
+          top: pointsPosition.top,
+          zIndex: 9999,
+        }}/>}
     </div>
   );
 }

src/components/Common/forecastRect/index.module.css

@@ -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);
+}

src/components/Common/forecastRect/visContext.jsx

@@ -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;

src/components/Common/pointItemBackgroundForecast/Container.jsx

@@ -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;

src/components/Common/pointItemBackgroundForecast/container.module.scss

@@ -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");
+// }

src/components/Common/pointItemBackgroundForecast/index.jsx

@@ -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;

src/components/Common/pointItemBackgroundForecast/index.module.css

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

src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx

@@ -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 }}

src/components/Modules/KilnOptimize/Center/index.jsx

@@ -33,6 +33,7 @@ function KilnCenter({ onFloorChange }) {
         position: "absolute",
         top: "12%",
         display: "flex",
+        zIndex:99,
         flexDirection: "column",
       }}
     >
@@ -40,7 +41,7 @@ function KilnCenter({ onFloorChange }) {
       {floor === 4 && (
           <div
             className="fireAndTime"
-            style={{ position: "absolute", top: "-112px", height: "400px" }}
+            style={{ position: "absolute", top: "-112px", height: "212px" }}
           >
             <Chart1 />
           </div>
@@ -94,7 +95,7 @@ function KilnCenter({ onFloorChange }) {
           }
           onClick={() => onFloorUpdate(4)}
         >
-          窑炉预测
+          AI预测
         </div>
       </div>
 

src/components/Modules/KilnOptimize/Center/index.module.css

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

src/components/Modules/KilnOptimize/Center/videoComponents/FloorToFour.jsx

@@ -1,7 +1,7 @@
 /*
  * @Author: zhp
  * @Date: 2024-08-28 15:27:46
- * @LastEditTime: 2024-08-29 09:46:32
+ * @LastEditTime: 2024-09-14 08:39:56
  * @LastEditors: zhp
  * @Description: 
  */
@@ -47,7 +47,7 @@ function FloorTwoToOne(props) {
             left: "0px",
             width: "calc(100% - 500px)",
             height: "calc(100% - 7px)",
-            zIndex: -998,
+            zIndex: -99,
             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" }} />

src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.jsx

@@ -1,7 +1,7 @@
 /*
  * @Author: zhp
  * @Date: 2024-08-23 14:44:30
- * @LastEditTime: 2024-08-30 17:28:20
+ * @LastEditTime: 2024-09-14 17:08:31
  * @LastEditors: zhp
  * @Description: 
  */
@@ -16,23 +16,39 @@ import { HomeContext } from '../../../../../pages/Home';
 function KilnBottomForecast(props) {
  const value = useContext(HomeContext);
   const kilnInfo = useSelector((state) => state.cutting);
+ const originalData = kilnInfo.forecastWeeklyChart;
+const data = [];
+const xData = [];
 
-  console.log('forecastWeeklyChart', kilnInfo.forecastWeeklyChart);
+  let latestDataTime;
-
+  if (originalData.length !== 0) {
-  let data = [];
+      originalData.forEach((ele) => {
-  let xData = [];
-
-  kilnInfo.forecastWeeklyChart.forEach((ele) => {
           data.push(ele.sum);
+      });
+          originalData.forEach((ele) => {
+        if (!latestDataTime || moment(ele.dataTime) > moment(latestDataTime)) {
+          latestDataTime = ele.dataTime;
+        }
+      });
+
+      originalData.forEach((ele) => {
         xData.push(moment(ele.dataTime).format('MM-DD'));
-  })
+      });
+
+      const oneDayLater = moment(latestDataTime).add(1, 'days')
+      xData.push(oneDayLater.format('MM-DD'));
+
+      const twoDaysLater = moment(latestDataTime).add(2, 'days');
+      xData.push(twoDaysLater.format('MM-DD'));
         console.log('data',data);
+  }
+
  const dataSource=  {
-    color1: '#146CFF',
+     color1: 'rgba(0, 255, 245, .4)',
-    color:'rgba(255, 194, 20, 1)',
+    color:'rgba(255, 194, 20, .4)',
-    yName:'℃',
+    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 : [],

src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.module.css

@@ -8,18 +8,25 @@
 }
 .item{
 	display: inline-block;
-	margin-right: 30px;
+	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;
+      width:14px;
-      height: 0.1064vw;
+      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;
+      width: 10px;
-      height: 0.4vw;
+      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;
+      width:14px;
-      height: 0.1064vw;
+      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;
+      width: 10px;
-      height: 0.4vw;
+      height: 10px;
-      background-color: #146CFF;
+      background-color: rgba(0, 255, 245, 1);
       border-radius: 100%;
       top: 50%;
       left: -1.1vw;

src/components/Modules/KilnOptimize/components/KilnMiddleForecast/index.jsx

@@ -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)',
+    color1: 'rgba(0, 255, 245, .4)',
-    color:'rgba(255, 194, 20, 1)',
+    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 : [],

src/components/Modules/KilnOptimize/components/KilnMiddleForecast/index.module.css

@@ -8,18 +8,25 @@
 }
 .item{
 	display: inline-block;
-	margin-right: 30px;
+	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;
+      width:14px;
-      height: 0.1064vw;
+      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;
+      width: 10px;
-      height: 0.4vw;
+      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;
+      width:14px;
-      height: 0.1064vw;
+      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;
+      width: 10px;
-      height: 0.4vw;
+      height: 10px;
       background-color: rgba(0, 255, 245, 1);
       border-radius: 100%;
       top: 50%;

src/components/Modules/KilnOptimize/components/KilnTopForecast/Points.jsx

@@ -0,0 +1,79 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-09-12 13:44:55
+ * @LastEditTime: 2024-09-14 14:10:23
+ * @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 < 25; 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, .2)',
+    color:'rgba(255, 194, 20, .2)',
+    yName:'℃',
+    // areaColor0:'rgba(18, 255, 245, 0.2)',
+    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;

src/components/Modules/KilnOptimize/components/KilnTopForecast/index.jsx

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

src/components/Modules/KilnOptimize/components/KilnTopForecast/index.module.css

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

src/components/Modules/KilnOptimize/components/KilnTopForecast/point.module.css

@@ -0,0 +1,80 @@
+.chart {
+	height: 100%;
+}
+.legend {
+	position: absolute;
+	left: 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: -27px;
+      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: -27px;
+      transform: translateY(-50%) translateX(50%);
+}

src/components/Modules/KilnOptimize/components/dayButton/index.jsx

@@ -1,7 +1,7 @@
 /*
  * @Author: zhp
  * @Date: 2024-08-22 09:09:25
- * @LastEditTime: 2024-08-22 14:39:13
+ * @LastEditTime: 2024-09-14 14:38:47
  * @LastEditors: zhp
  * @Description: 
  */
@@ -22,6 +22,8 @@ function DayNightToggle() {
         style={{
           display: "flex",
           justifyContent: "center",
+          position: 'relative',
+          zIndex: 999,
         }}
       >
         <div

src/components/Modules/KilnOptimize/components/dayButton/index.module.css

@@ -9,7 +9,7 @@
 	background: url(../../../../../assets/dayNight.png) no-repeat;
   background-size: 100% 90%;
 	background-position: bottom;
-	color: #00fff788;
+	color: rgba(255, 255, 255, 1);
 	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;
@@ -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%;
 }
 

src/components/Modules/KilnOptimize/components/forecastRightChart/chart.config.js

@@ -1,7 +1,7 @@
 /*
  * @Author: zhp
  * @Date: 2024-08-28 09:25:58
- * @LastEditTime: 2024-08-28 10:22:34
+ * @LastEditTime: 2024-09-14 16:08:38
  * @LastEditors: zhp
  * @Description: 
  */
@@ -9,12 +9,12 @@
 
 export default function getOptions(data, times, range, yName,forecastList,color,color1,areaStyle,areaStyle1) {
   return {
-    grid: { top: 38, right: 44, bottom: 20, left: 48 },
+    grid: { top: 38, right: 0, bottom: 20, left: 48 },
     xAxis: {
       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",
+        color: "rgba(223, 241, 254, 1)",
-        fontSize: 10,
+        fontSize: 12,
         align: "right",
       },
       type: "value",
       axisLabel: {
-        color: "#fff",
+        color: "rgba(223, 241, 254, 1)",
         fontSize: 12,
         formatter: "{value}",
       },
@@ -63,13 +63,25 @@ export default function getOptions(data, times, range, yName,forecastList,color,
         label: {
           show: true,
           position: 'top',
-          color:'inherit'
+          color: 'inherit',
+            formatter: (params) => {
+              const index = params.dataIndex;
+              return index % 2 === 0? params.value : '';
+            }
         },
         symbol: 'circle',
         symbolSize: 6,
         // prettier-ignore
-        lineStyle:{
+        // lineStyle:{
-            color:color
+        //     color:color
+        // },
+       itemStyle: {
+            normal: {
+              color: 'rgba(255, 194, 20, 1)', //改变折线点的颜色
+              lineStyle: {
+                color: 'rgba(255, 194, 20, 1)' //改变折线颜色
+              }
+            }
         },
         data: data,
         // markLine: {
@@ -90,32 +102,37 @@ export default function getOptions(data, times, range, yName,forecastList,color,
       },
       {
         type: 'line',
+        stack: 'Total',
         label: {
           show: true,
           position: 'top',
-          color:'inherit'
+            color: '#00FFF5', //改变折线点的颜色
+          formatter: (params) => {
+            const index = params.dataIndex;
+            if (data[index] && forecastList[index]) {
+              return '';
+            } else if (forecastList[index]) {
+              // 判断是否为奇数索引，隔一个显示一个
+              return index % 2 === 1? forecastList[index] : '';
+            } else {
+              return '';
+            }
+            }
         },
         symbol: 'circle',
         symbolSize: 6,
-        lineStyle:{
+        itemStyle: {
-          color:color1
+          color: '#00FFF5', //改变折线点的颜色
+          normal: {
+              color: '#00FFF5', //改变折线点的颜色
+              lineStyle: {
+                color: '#00FFF5', //改变折线点的颜色
+              }
+            }
         },
         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: {

src/components/Modules/KilnOptimize/components/forecastRightChart/index.jsx

@@ -1,7 +1,7 @@
 /*
  * @Author: zhp
  * @Date: 2024-08-28 09:25:58
- * @LastEditTime: 2024-08-30 16:57:38
+ * @LastEditTime: 2024-09-14 15:53:44
  * @LastEditors: zhp
  * @Description: 
  */
@@ -10,7 +10,52 @@ import ReactECharts from "echarts-for-react";
 import getOptions from "./chart.config";
 import * as echarts from "echarts";
 import { useState } from "react";
-
+function compareArrays(arr1, arr2) {
+  const result = [];
+  const longerLength = arr2.length;
+  for (let i = 0; i < longerLength; i++) {
+    if (i < arr1.length && arr1[i]) {
+      result.push(null);
+    } else if (i < arr1.length &&!arr1[i]) {
+      result.push(arr2[i]);
+    } else {
+      result.push(arr2[i]);
+    }
+  }
+  return result;
+}
+function generateRandomArray(data) {
+  const result = [];
+  for (let i = 0; i < 10; i++) {
+    if (i < data.length) {
+      let randomNumber;
+      do {
+        randomNumber = data[i] + Math.floor(Math.random() * 11) - 5;
+      } while (randomNumber < 0);
+      result.push(randomNumber);
+    } else {
+      let lastDataValue = data[data.length - 1];
+      let randomNumber;
+      do {
+        randomNumber = lastDataValue + Math.floor(Math.random() * 11) - 5;
+      } while (randomNumber < 0);
+      result.push(randomNumber);
+    }
+  }
+  return result;
+}
+function generateTimeArray() {
+   const now = new Date();
+  const timeArray = [];
+  for (let i = -7; i <= 2; i++) {
+    const newDate = new Date(now.getTime());
+    newDate.setMinutes(now.getMinutes() + i * 10);
+    const hours = newDate.getHours();
+    const minutes = newDate.getMinutes();
+    timeArray.push(`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`);
+  }
+  return timeArray;
+}
 function CommonChart(props) {
   const { dataSource } = props;
 
@@ -19,27 +64,20 @@ function CommonChart(props) {
   const color1 = dataSource.color1 || [];
   const color = dataSource.color || [];
   const yName = dataSource.yName;
-  const currentTime = new Date();
+  const times = generateTimeArray();
-  const times = [];
-  // }
   let forecastList = []
   if (modelFlag === true) {
-    for (let i = 0; i < data.length; i++) {
+    forecastList = generateRandomArray(data)
-      let item = data[i];
+    console.log('11111',forecastList)
-      let min = item - 5;
-      let max = item + 5;
-      let randomValue = Math.random() * (max - min) + min;
-      forecastList.push(randomValue.toFixed(1));
   }
-  }
+console.log('forRYF',times);
- 
+  // for(let i = 0; i < 7; i++) {
-  
+  //    currentTime.setMinutes(currentTime.getMinutes() - 10);
-  for(let i = 0; i < 7; i++) {
+  //   const timeString = `${currentTime.getHours()}:${currentTime.getMinutes().toString().padStart(2, '0')}`;
-     currentTime.setMinutes(currentTime.getMinutes() - 10);
+  //   times.unshift(timeString);
-    const timeString = `${currentTime.getHours()}:${currentTime.getMinutes().toString().padStart(2, '0')}`;
+  // }
-    times.unshift(timeString);
+  let areaStyle = {
-  }
+      opacity: 0.8,
-  let areaStyle= {
       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
         {
           offset: 0,
@@ -53,13 +91,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,
         },
       ]),

src/components/Modules/KilnOptimize/components/forecastRightChart/points.jsx

@@ -0,0 +1,174 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-09-13 14:47:50
+ * @LastEditTime: 2024-09-14 15:53:14
+ * @LastEditors: zhp
+ * @Description: 
+ */
+import cls from "./index.module.css";
+import ReactECharts from "echarts-for-react";
+import getOptions from "./pointsChart.js"
+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 compareArrays(arr1, arr2) {
+//   let hasMissingDataInFirstArray = false;
+//   for (let i = 0; i < arr1.length; i++) {
+//     if (!arr1[i]) {
+//       hasMissingDataInFirstArray = true;
+//       break;
+//     }
+//   }
+
+//   if (hasMissingDataInFirstArray) {
+//     const result = new Array(arr2.length).fill(null);
+//     for (let i = 0; i < arr1.length; i++) {
+//       if (!arr1[i]) {
+//         result[i] = arr2[i];
+//       }
+//     }
+//     return result;
+//   } else {
+//     return arr2.map(() => null);
+//   }
+// }
+function emptyFirstTwelve(arr) {
+  const newArr = [...arr];
+  for (let i = 0; i < 12 && i < newArr.length; i++) {
+    newArr[i] = null;
+  }
+  return newArr;
+}
+function emptyLastThirteen(arr) {
+  const newArr = [...arr];
+  const startIndex = Math.max(0, newArr.length - 13);
+  for (let i = startIndex; i < newArr.length; i++) {
+    newArr[i] = null;
+  }
+  return newArr;
+}
+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));
+  }
+  console.log('times',times)
+  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: 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(emptyLastThirteen(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;

src/components/Modules/KilnOptimize/components/forecastRightChart/pointsChart.js

@@ -0,0 +1,141 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-09-13 15:39:36
+ * @LastEditTime: 2024-09-14 16:02:21
+ * @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: 0, bottom: 40, left: 48 },
+    color:['rgba(255, 194, 20, 1)','rgba(0, 255, 245, 1)'],
+    xAxis: {
+      type: "category",
+      data:times,
+      axisLabel: {
+        color: "rgba(223, 241, 254, 1)",
+        fontSize: 12,
+        rotate:45
+      },
+      axisTick: { show: false },
+      axisLine: {
+        lineStyle: {
+          width: 1,
+          color: "#F1F9FF",
+        },
+      },
+    },
+    yAxis: {
+      name: "单位: "+yName,
+      nameTextStyle: {
+        color: "rgba(223, 241, 254, 1)",
+        fontSize: 12,
+        align: "right",
+      },
+         min: function(value) {//取最小值向下取整为最小刻度
+            return Math.floor(value.min)
+          },
+          max: function(value) {//取最大值向上取整为最大刻度
+            return  Math.ceil(value.max) 
+      },
+           scale: true, //自适应
+      type: "value",
+      axisLabel: {
+        color: "rgba(223, 241, 254, 1)",
+        fontSize: 12,
+        formatter: "{value}",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#F1F9FF",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: "#F1F9FF",
+        },
+      },
+      min:range[0],
+      max:range[1]
+    },
+    // visualMap: {
+    //   show: false,
+    //   dimension: 1,
+    //   pieces: pieces
+    // },
+    series: [
+      {
+        type: 'line',
+        label: {
+          show: true,
+          position: 'top',
+          color: 'inherit',
+          formatter: (params) => {
+              const index = params.dataIndex;
+              return index % 2 === 0? params.value : '';
+            }
+        },
+       itemStyle: {
+            normal: {
+              color: 'rgba(255, 194, 20, 1)', //改变折线点的颜色
+              lineStyle: {
+                color: 'rgba(255, 194, 20, 1)' //改变折线颜色
+              }
+            }
+        },
+        data: data,
+        areaStyle:areaStyle
+      },
+      {
+        type: 'line',
+        stack: 'Total',
+        label: {
+          show: true,
+          color: '#00FFF5', //改变折线点的颜色
+          position: 'top',
+          formatter: (params) => {
+             const index = params.dataIndex;
+              if (index < 11) {
+                return '';
+              } else if ((index - 11) % 2 === 1) {
+                return params.value;
+              } else {
+                return '';
+              }
+            }
+        },
+        symbol: 'circle',
+        symbolSize: 6,
+        itemStyle: {
+          color: '#00FFF5', //改变折线点的颜色
+          normal: {
+              color: '#00FFF5', //改变折线点的颜色
+              lineStyle: {
+                color: '#00FFF5', //改变折线点的颜色
+              }
+            }
+        },
+        areaStyle:areaStyle1,
+        data: forecastList,
+      }
+    ],
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: 'cross'
+      },
+      className: "xc-chart-tooltip",
+      // backgroundColor: ''
+    },
+  };
+}

src/components/Modules/KilnOptimize/components/forecastRightChart/yield.jsx

@@ -1,13 +1,31 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-09-02 09:56:13
+ * @LastEditTime: 2024-09-14 17:07:49
+ * @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 convertToNineDigitArray(sevenDigitArray) {
+  const nineDigitArray = [...sevenDigitArray];
+  while (nineDigitArray.length < 9) {
+    const lastValue = nineDigitArray[nineDigitArray.length - 1];
+    const minRandom = Math.max(-0.5, -lastValue);
+    const maxRandom = Math.min(0.5, 1 - lastValue);
+    const randomValue = lastValue + Math.random() * (maxRandom - minRandom) + minRandom;
+    const roundedValue = Math.min(1, Math.round(randomValue * 10) / 10);
+    nineDigitArray.push(roundedValue);
+  }
+  return nineDigitArray;
+}
 function CommonChart(props) {
   const { dataSource } = props;
-  const data = dataSource.data || [];
+  const data = dataSource.data || []
   const modelFlag = dataSource.modelFlag || false
   const color1 = dataSource.color1 || [];
   const color = dataSource.color || [];
@@ -16,15 +34,18 @@ function CommonChart(props) {
   console.log('xData',props);
   let forecastList = [];
   if (modelFlag === true) {
-    for (let i = 0; i < data.length; i++) {
+    forecastList = convertToNineDigitArray(data)
-      let item = data[i];
+    // for (let i = 0; i < data.length; i++) {
-      let min = item - .5;
+    //   let item = data[i];
-      let max = item + .5;
+    //   let min = item - .5;
-      let randomValue = Math.random() * (max - min) + min;
+    //   let max = item + .5;
-      forecastList.push(randomValue.toFixed(1));
+    //   let randomValue = Math.random() * (max - min) + min;
+    //   forecastList.push(randomValue.toFixed(1));
+    // }
+    console.log('forecastList',forecastList)
   }
-  }
+  let areaStyle = {
-  let areaStyle= {
+      opacity: 0.8,
       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
         {
           offset: 0,
@@ -38,6 +59,7 @@ function CommonChart(props) {
       origin: "start",
   }
   let areaStyle1 = {
+      opacity: 0.8,
       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
         {
           offset: 0,
@@ -50,41 +72,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 && (

src/components/Modules/KilnOptimize/components/inputData/index.jsx

@@ -1,7 +1,7 @@
 /*
  * @Author: zhp
  * @Date: 2024-08-22 14:00:57
- * @LastEditTime: 2024-08-30 13:55:33
+ * @LastEditTime: 2024-09-02 09:50:49
  * @LastEditors: zhp
  * @Description: 
  */
@@ -82,7 +82,7 @@ function InputDataToggle() {
             cls.content
           }>
            <h2 className={
-            cls.totalDataTitle
+            cls.gasTitle
           }>
             焦炉煤气设定总量
           </h2>
@@ -104,7 +104,7 @@ function InputDataToggle() {
             cls.content
           }>
            <h2 className={
-            cls.paramsTitle
+            cls.windTitle
           }>
             助燃风流量
           </h2>
@@ -133,7 +133,7 @@ function InputDataToggle() {
             cls.content
           }>
            <h2 className={
-            cls.totalDataTitle
+            cls.productTitle
           }>
             产品规格设定标准
           </h2>
@@ -155,7 +155,7 @@ function InputDataToggle() {
             cls.content
           }>
            <h2 className={
-            cls.paramsTitle
+            cls.waterTitle
           }>
             循环水流量
           </h2>
@@ -184,7 +184,7 @@ function InputDataToggle() {
             cls.content
           }>
            <h2 className={
-            cls.totalDataTitle
+            cls.peiWaterTitle
           }>
             配料水分含量
           </h2>
@@ -206,7 +206,7 @@ function InputDataToggle() {
             cls.content
           }>
            <h2 className={
-            cls.paramsTitle
+            cls.outputTitle
           }>
             玻璃液出口宽度
           </h2>

src/components/Modules/KilnOptimize/components/inputData/index.module.css

@@ -23,11 +23,11 @@
 	padding:5px 10px;
 	font-size: 32px;
 	line-height: 48px;
-	letter-spacing: 6px;
+	letter-spacing: 2px;
 	background: url(../../../../../assets/paramsData.png) no-repeat;
   background-size: 100% 90%;
 	background-position: bottom;
-	color: #00fff788;
+	color: rgba(255, 255, 255, 1);
 	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;
@@ -82,7 +82,7 @@
   backdrop-filter: blur(0px);
  }
 
-  .outTitle{
+  .outputTitle{
    flex: 1;
   height: 56px;
   position: relative;
@@ -94,7 +94,7 @@
   letter-spacing: 1px;
   text-align: right;
  }
- .outTitle::after {
+ .outputTitle::after {
   content: "";
   top: 73%;
   position: absolute;
@@ -106,3 +106,127 @@
   box-shadow: 0px 2px 6px 0px rgba(43,255,223,0.55);
   backdrop-filter: blur(0px);
  }
+.productTitle{
+  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;
+} 
+.productTitle::after {
+  content: "";
+  top: 73%;
+  position: absolute;
+  bottom: 0;
+  left: 14%;
+  width: 85%;  /* 调整此处的宽度值来改变下划线的宽度，例如 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);
+ }
+.waterTitle{
+  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;
+}
+.waterTitle::after {
+  content: "";
+  top: 73%;
+  position: absolute;
+  bottom: 0;
+  left: 40%;
+  width: 60%;  /* 调整此处的宽度值来改变下划线的宽度，例如 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);
+ }
+.peiWaterTitle{
+    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;
+}
+.peiWaterTitle::after {
+  content: "";
+  top: 73%;
+  position: absolute;
+  bottom: 0;
+  left: 30%;
+  width: 68%;  /* 调整此处的宽度值来改变下划线的宽度，例如 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);
+ }
+.windTitle{
+  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;
+}
+.windTitle::after {
+  content: "";
+  top: 73%;
+  position: absolute;
+  bottom: 0;
+  left: 39%;
+  width: 59%;  /* 调整此处的宽度值来改变下划线的宽度，例如 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);
+ }
+.gasTitle{
+  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;
+}
+.gasTitle::after {
+  content: "";
+  top: 73%;
+  position: absolute;
+  bottom: 0;
+  left: 11%;
+  width: 88%;  /* 调整此处的宽度值来改变下划线的宽度，例如 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);
+ }
+.unit{
+color: rgba(43, 254, 222, 1);
+
+}

src/components/Modules/KilnOptimize/components/leftBottomForecast/index.jsx

@@ -1,13 +1,13 @@
 /*
  * @Author: zhp
  * @Date: 2024-08-23 15:31:44
- * @LastEditTime: 2024-08-28 13:31:32
+ * @LastEditTime: 2024-09-14 15:18:21
  * @LastEditors: zhp
  * @Description: 
  */
 
 import cls from "./index.module.css";
-import BottomBarItem from "../../../../Common/BottomItemBackgroundForecastTop";
+import BottomBarItem from "../../../../Common/BottomItemBackgroundForecastBottom";
 import { useSelector } from "react-redux";
 function LeftMiddleForecast() {
   const kilnInfo = useSelector((state) => state.cutting);

src/components/Modules/KilnOptimize/components/leftBottomForecast/index.module.css

@@ -6,15 +6,15 @@
 		height: 1px;
 		display: grid;
 	  grid-template-rows: auto 1fr 1fr;
-		gap: 10px;
+		/* gap: 4px; */
-		padding-top: 18px;
+		padding-top: 6px;
 		.info__item {
 	    /* width: 100%; */
-      background: url('../../../../../assets/forecastBack.png') no-repeat;
+      background: url('../../../../../assets/blueBack.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;
@@ -45,7 +45,16 @@
         width: 320px;
 				/* flex: 1; */
 				text-align: right;
+        color: rgba(255, 255, 255, 1);
 			}
 		}
+    		.info__item:last-child {
+        color: #ffff;
+	    /* width: 100%; */
+      background: url('../../../../../assets/lastBack.png') no-repeat;
+      background-size: 100% 100%;
+
 		}
+	}
+  
 }

src/components/Modules/KilnOptimize/components/leftMiddleForecast/index.module.css

@@ -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 {
@@ -57,6 +57,7 @@
 			.value {
 				flex: 5;
 				text-align: left;
+        color: rgba(255, 255, 255, 1);
 			}
     }
 		.info__item {
@@ -66,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;
@@ -81,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 {
@@ -104,6 +105,7 @@
 			.value {
 				flex: 3;
 				text-align: left;
+        color: rgba(255, 255, 255, 1);
 			}
 		}
     .info__item::before{

src/components/Modules/KilnOptimize/components/leftTopForecast/index.module.css

@@ -56,6 +56,7 @@
 			.value {
 				flex: 3;
 				text-align: left;
+        color: rgba(255, 255, 255, 1);
 			}
 		}
     .info__item::before{

src/components/Modules/KilnOptimize/components/paramsInput/index.jsx

@@ -1,11 +1,11 @@
 /*
  * @Author: zhp
  * @Date: 2024-08-20 14:09:17
- * @LastEditTime: 2024-08-30 14:53:39
+ * @LastEditTime: 2024-09-14 09:09:29
  * @LastEditors: zhp
  * @Description: 
  */
-// 窑炉预测控制参数输入
+// AI预测控制参数输入
 import cls from "./index.module.css";
 import BottomBarItem from "../../../../Common/forecastLargeBackground";
 // import CommonChart from "../CommonChart";

src/components/Modules/KilnOptimize/components/paramsInput/index.module.css

@@ -18,6 +18,8 @@
 .bottom{
   /* height: 100%; */
   margin-top: 20px;
+  position: relative;
+  z-index:100;
   /* display: flex; */
   /* justify-content: center; */
 }
@@ -32,7 +34,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;

src/components/Modules/KilnOptimize/components/seasonButton/index.jsx

@@ -1,7 +1,7 @@
 /*
  * @Author: zhp
  * @Date: 2024-08-22 14:00:57
- * @LastEditTime: 2024-08-22 14:33:33
+ * @LastEditTime: 2024-09-14 14:40:14
  * @LastEditors: zhp
  * @Description: 
  */
@@ -24,6 +24,8 @@ function SeasonToggle() {
           width:"10%",
           // marginBottom: "24px",
           flexDirection: "column",/* 这行设置为垂直布局 */
+          position: 'relative',
+          zIndex: 999,
         }}
       >
         <div
@@ -48,7 +50,7 @@ function SeasonToggle() {
           }
           onClick={() => onSeasonUpdate(3)}
         >
-          夏季
+          秋季
       </div>
         <div
           className={
@@ -56,7 +58,7 @@ function SeasonToggle() {
           }
           onClick={() => onSeasonUpdate(4)}
         >
-          夏季
+          冬季
         </div>
       </div>
   );

src/components/Modules/KilnOptimize/components/seasonButton/index.module.css

@@ -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;
@@ -13,7 +13,7 @@
 	background: url(../../../../../assets/seasonChange.png) no-repeat;
   background-size: 90% 100%;
 	background-position: bottom;
-	color: #00fff788;
+	color: rgba(255, 255, 255, 1);
 	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;
@@ -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%;
 }
 

src/components/Modules/KilnOptimize/forecastRightSide/index.module.scss

@@ -11,4 +11,6 @@
   display: flex;
   justify-content: space-between;
   gap: 16px;
+  position: relative;
+  z-index: 99;
 }

src/components/container.module.scss

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

src/hooks/useIcon.js

@@ -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;
 }
 

src/pages/Home/index.jsx

@@ -37,7 +37,7 @@ export default function Home({ active }) {
 
   const handleValueFromGrandChild = (value) => {
     setModelFlag(value);
-    console.log(modelFlag);
+    console.log('modelFlag',value);
   };
   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}>