src/components/Common/forecastRect/index.jsx

@@ -1,7 +1,7 @@
 /*
  * @Author: zhp
  * @Date: 2024-08-29 09:46:11
- * @LastEditTime: 2024-09-13 16:27:51
+ * @LastEditTime: 2024-09-14 09:20:36
  * @LastEditors: zhp
  * @Description: 
  */
@@ -19,9 +19,7 @@ function BlueRect(props) {
  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);

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

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

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>

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

@@ -1,7 +1,7 @@
 /*
  * @Author: zhp
  * @Date: 2024-08-28 15:27:46
- * @LastEditTime: 2024-09-12 15:28:17
+ * @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 }}

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

@@ -1,7 +1,7 @@
 /*
  * @Author: zhp
  * @Date: 2024-09-12 13:44:55
- * @LastEditTime: 2024-09-13 14:53:34
+ * @LastEditTime: 2024-09-14 09:21:16
  * @LastEditors: zhp
  * @Description: 
  */
@@ -14,7 +14,7 @@ import React, { useContext,useEffect,useState} from 'react'
 import { HomeContext } from '../../../../../pages/Home';
 function generateRandomArray(data) {
   const randomArray = [];
-  for (let i = 0; i < 24; i++) {
+  for (let i = 0; i < 25; i++) {
     let randomNumber;
     do {
       randomNumber = ((Math.random() * (data - 1)).toFixed(1));

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

@@ -39,7 +39,7 @@
       border-radius: 100%;
       top: 50%;
       background-color: rgba(255, 194, 20, 1);
-      left: -1.1vw;
+      left: -27px;
       transform: translateY(-50%) translateX(50%);
 }
 .block{
@@ -75,6 +75,6 @@
       background-color: rgba(0, 255, 245, 1);
       border-radius: 100%;
       top: 50%;
-      left: -1.1vw;
+      left: -27px;
       transform: translateY(-50%) translateX(50%);
 }

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

@@ -1,7 +1,7 @@
 /*
  * @Author: zhp
  * @Date: 2024-08-28 09:25:58
- * @LastEditTime: 2024-09-13 14:22:01
+ * @LastEditTime: 2024-09-14 09:05:44
  * @LastEditors: zhp
  * @Description: 
  */
@@ -9,7 +9,7 @@
 
 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,

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

@@ -1,7 +1,7 @@
 /*
  * @Author: zhp
  * @Date: 2024-08-28 09:25:58
- * @LastEditTime: 2024-09-13 16:50:40
+ * @LastEditTime: 2024-09-14 10:57:55
  * @LastEditors: zhp
  * @Description: 
  */
@@ -11,27 +11,38 @@ import getOptions from "./chart.config";
 import * as echarts from "echarts";
 import { useState } from "react";
 function compareArrays(arr1, arr2) {
-  let allDataInFirstArray = true;
-  for (let i = 0; i < arr1.length; i++) {
-    if (!arr1[i]) {
-      allDataInFirstArray = false;
-      break;
-    }
-  }
-
-  if (allDataInFirstArray) {
-    return [];
-  } else {
   const result = [];
-    for (let i = 0; i < arr1.length; i++) {
-      if (!arr1[i]) {
+  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(null);
+      result.push(arr2[i]);
     }
   }
   return result;
+}
+function generateRandomArray(data) {
+  const result = [];
+  for (let i = 0; i < 7; 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 CommonChart(props) {
   const { dataSource } = props;
@@ -43,19 +54,14 @@ function CommonChart(props) {
   const yName = dataSource.yName;
   const currentTime = new Date();
   const times = [];
-  // }
   let forecastList = []
-  // if (modelFlag === true) {
-    for (let i = 0; i < data.length; i++) {
-      let item = data[i];
-      let min = item - 5;
-      let max = item + 5;
-      let randomValue = Math.random() * (max - min) + min;
-      forecastList.push(randomValue.toFixed(1));
+  if (modelFlag === true) {
+    forecastList = generateRandomArray(data)
+    console.log('11111',compareArrays(data,forecastList))
   }
-  // }
- 
-  
+  const d = [10, 20, 30];
+const f = generateRandomArray(d);
+console.log('forRYF',f);
   for(let i = 0; i < 7; i++) {
      currentTime.setMinutes(currentTime.getMinutes() - 10);
     const timeString = `${currentTime.getHours()}:${currentTime.getMinutes().toString().padStart(2, '0')}`;

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

@@ -1,7 +1,7 @@
 /*
  * @Author: zhp
  * @Date: 2024-09-13 14:47:50
- * @LastEditTime: 2024-09-13 15:44:40
+ * @LastEditTime: 2024-09-14 10:47:18
  * @LastEditors: zhp
  * @Description: 
  */
@@ -17,7 +17,7 @@ function getTimeArray() {
 
   const timeArray = [];
   let currentTime = todaySeven;
-  while (currentTime < tomorrowSeven) {
+  while (currentTime <= tomorrowSeven) {
     const hours = currentTime.getHours();
     const minutes = currentTime.getMinutes();
     if (minutes === 0) {
@@ -28,6 +28,42 @@ function getTimeArray() {
 
   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;
 
@@ -46,6 +82,7 @@ function CommonChart(props) {
       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, [
@@ -113,7 +150,7 @@ function CommonChart(props) {
     <div className={cls.commonChart}>
       {data.length > 0 && (
         <ReactECharts
-          option={getOptions(data, times, yRange, yName,forecastList,color,color1,areaStyle,areaStyle1)}
+          option={getOptions(emptyLastThirteen(data), times, yRange, yName,emptyFirstTwelve(forecastList),color,color1,areaStyle,areaStyle1)}
           style={{ height: "100%" }}
         />
       )}

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

@@ -1,7 +1,7 @@
 /*
  * @Author: zhp
  * @Date: 2024-09-13 15:39:36
- * @LastEditTime: 2024-09-13 15:45:40
+ * @LastEditTime: 2024-09-14 11:20:39
  * @LastEditors: zhp
  * @Description: 
  */
@@ -16,7 +16,7 @@
 
 export default function getOptions(data, times, range, yName,forecastList,color,color1,areaStyle,areaStyle1) {
   return {
-    grid: { top: 38, right: 44, bottom: 40, left: 48 },
+    grid: { top: 38, right: 0, bottom: 40, left: 48 },
     xAxis: {
       type: "category",
       data:times,
@@ -71,7 +71,11 @@ 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,
@@ -109,7 +113,11 @@ 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,

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

@@ -1,7 +1,7 @@
 /*
  * @Author: zhp
  * @Date: 2024-09-02 09:56:13
- * @LastEditTime: 2024-09-13 15:36:42
+ * @LastEditTime: 2024-09-14 10:59:47
  * @LastEditors: zhp
  * @Description: 
  */
@@ -12,27 +12,38 @@ import getOptions from "./chart.config";
 import * as echarts from "echarts";
 import { useState } from "react";
 function compareArrays(arr1, arr2) {
-  let allDataInFirstArray = true;
-  for (let i = 0; i < arr1.length; i++) {
-    if (!arr1[i]) {
-      allDataInFirstArray = false;
-      break;
-    }
-  }
-
-  if (allDataInFirstArray) {
-    return [];
-  } else {
   const result = [];
-    for (let i = 0; i < arr1.length; i++) {
-      if (!arr1[i]) {
+  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(null);
+      result.push(arr2[i]);
     }
   }
   return result;
+}
+function generateRandomArray(data) {
+  const result = [];
+  for (let i = 0; i < 7; 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 CommonChart(props) {
   const { dataSource } = props;
@@ -44,16 +55,17 @@ function CommonChart(props) {
   const xData = dataSource.xData || [];
   console.log('xData',props);
   let forecastList = [];
-  // if (modelFlag === true) {
-    for (let i = 0; i < data.length; i++) {
-      let item = data[i];
-      let min = item - .5;
-      let max = item + .5;
-      let randomValue = Math.random() * (max - min) + min;
-      forecastList.push(randomValue.toFixed(1));
-    }
-    console.log(forecastList)
+  if (modelFlag === true) {
+    forecastList = generateRandomArray
+    // 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(forecastList)
+  }
   let areaStyle = {
       opacity: 0.8,
       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

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

@@ -1,7 +1,7 @@
 /*
  * @Author: zhp
  * @Date: 2024-08-20 14:09:17
- * @LastEditTime: 2024-09-13 16:39:20
+ * @LastEditTime: 2024-09-14 09:09:29
  * @LastEditors: zhp
  * @Description: 
  */
@@ -14,7 +14,6 @@ import SeasonToggle from "../seasonButton";
 import InputDataToggle from "../inputData";
 function paramsInput(props) {
   const handleClick = () => {
-    console.log(11111);
     props.onSendValueToParent(true);
   };
   return (

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

@@ -18,6 +18,9 @@
 .bottom{
   /* height: 100%; */
   margin-top: 20px;
+  position: absolute;
+  z-index:100;
+  width: 92%;
   /* display: flex; */
   /* justify-content: center; */
 }