Merge branch 'features/warning' into zhp

Reviewed-on: #11

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

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

src/components/Common/Company/index.jsx

@@ -36,7 +36,7 @@ export default function CompanyName() {
 			</div>
 			<div>
 				<h2 className={cls.TopTitleText}>
-					许昌安彩新能科技&ensp;&ensp;4800万方光伏轻质基板生产线{' '}
+					许昌安彩新能科技&ensp;&ensp;许昌安彩窑炉生产指挥调度中心{' '}
 				</h2>
 				<img src={ButtonLine} alt="图片加载错误" className={cls.TopButtonLine}/>
 			</div>

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

@@ -20,6 +20,7 @@
 
     .box__inner {
       padding-top: 12px;
+      margin-left: 20px;
 
       .box__label {
         color: #fffa;

src/components/Common/forecastRect/index.jsx

@@ -1,7 +1,7 @@
 /*
  * @Author: zhp
  * @Date: 2024-08-29 09:46:11
- * @LastEditTime: 2024-09-13 14:35:10
+ * @LastEditTime: 2024-09-18 09:10:19
  * @LastEditors: zhp
  * @Description: 
  */
@@ -9,8 +9,9 @@ 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;
+  const minRandom = -0.5;
-  return number + randomOffset;
+  const maxRandom = 0.5;
+  return (number + Math.random() * (maxRandom - minRandom) + minRandom).toFixed(1);
 }
 function BlueRect(props) {
   const title = props.title || "DEFAULT";
@@ -19,21 +20,29 @@ 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 [randomValue, setRandomValue] = useState(generateRandomNearNumber(parseInt(value)));
     // const parentRef = useRef(null);
-    // const pointsRef = 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) {
-      console.log(props)
       // 当隐藏时，可以清理一些数据
       setChartData(null);
     } else {
-      console.log('props',props)
+      setPointsPosition({
+        left: `${mousePosition.x + 100}px`,
+        top: `${mousePosition.y - 100}px`,
+      });
       // 当显示时，可以模拟获取数据并传递给子组件
       setChartData({
         title,
@@ -42,15 +51,8 @@ function BlueRect(props) {
       });
     }
   }
-    // 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>
+    <div onMouseMove={handleMouseMove}>
       <div
         // ref={parentRef}
         className={`${cls.blueRect} ${cls[title]}`}
@@ -70,22 +72,31 @@ function BlueRect(props) {
         }}
       >
         {title}
-      </span>
+        </span>
-      <span className="value" style={{ userSelect: "none", fontSize: "22px" }}>
+      {props.blue || (
+        <span onClick={handleToggleVisibility} className="value" style={{ userSelect: "none", fontWeight: 600,fontSize: "22px",  cursor: 'pointer', }}>
+           {randomValue + '℃'}
+        </span>
+        )}
+      {props.blue? (
+       <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" }}>
+                <span  className={`${cls.forecastValue}`}  style={{ userSelect: "none", fontSize: "22px" }}>
-         {generateRandomNearNumber(parseInt(value)) + '℃'}
+        {value}
-        </span>
+      </span>
+   
       )}
+    
       </div>
       {isVisible && !props.blue && <Points dataSource={chartData}
-      // ref={pointsRef}
         updateVisibilityState={updateVisibilityState} // 传递方法给子组件
-        style={{
+          style={{
-            position: "fixed",
+          position: "fixed",
-            zIndex: 9999,
+          left: pointsPosition.left,
+          top: pointsPosition.top,
+          zIndex: 9999,
         }}/>}
     </div>
   );

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

@@ -551,6 +551,5 @@
   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/pointItemBackgroundForecast/container.module.scss

@@ -26,7 +26,7 @@
       margin: 0;
       margin-left: 6px;
       font-size: 22px;
-      color: #fff;
+      color:#58E7E9;
       letter-spacing: 2px;
       font-weight: 500;
     }

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/index.module.css

@@ -2,7 +2,7 @@
 	transition: all 0.3s ease-out;
 	cursor: pointer;
 	user-select: none;
-	padding: 10px 40px;
+	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-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/KilnBottomForecast/index.jsx

@@ -1,7 +1,7 @@
 /*
  * @Author: zhp
  * @Date: 2024-08-23 14:44:30
- * @LastEditTime: 2024-09-11 16:45:05
+ * @LastEditTime: 2024-09-14 17:08:31
  * @LastEditors: zhp
  * @Description: 
  */
@@ -16,17 +16,33 @@ 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) {
+      originalData.forEach((ele) => {
+          data.push(ele.sum);
+      });
+          originalData.forEach((ele) => {
+        if (!latestDataTime || moment(ele.dataTime) > moment(latestDataTime)) {
+          latestDataTime = ele.dataTime;
+        }
+      });
 
-  let data = [];
+      originalData.forEach((ele) => {
-  let xData = [];
+        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);
+  }
 
-  kilnInfo.forecastWeeklyChart.forEach((ele) => {
-    data.push(ele.sum);
-    xData.push(moment(ele.dataTime).format('MM-DD'));
-  })
-  console.log('data',data);
  const dataSource=  {
      color1: 'rgba(0, 255, 245, .4)',
     color:'rgba(255, 194, 20, .4)',

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

@@ -26,7 +26,7 @@
       height: 1px;
       position: absolute;
       top: 50%;
-      left: -23.3px;
+      left: -21px;
       background-color: rgba(255, 194, 20, 1);
       transform: translateY(-50%);
     }
@@ -39,7 +39,7 @@
       border-radius: 100%;
       top: 50%;
       background-color: rgba(255, 194, 20, 1);
-      left: -1.1vw;
+      left: -24px;
       transform: translateY(-50%) translateX(50%);
 }
 .block{
@@ -62,7 +62,7 @@
       height: 1px;
       position: absolute;
       top: 50%;
-      left: -24px;
+      left: -22.5px;
       transform: translateY(-50%);
       background-color: rgba(0, 255, 245, 1);
     }
@@ -75,6 +75,6 @@
       background-color: rgba(0, 255, 245, 1);
       border-radius: 100%;
       top: 50%;
-      left: -1.1vw;
+      left: -25.5px;
       transform: translateY(-50%) translateX(50%);
 }

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

@@ -26,7 +26,7 @@
       height: 1px;
       position: absolute;
       top: 50%;
-      left: -23.3px;
+      left: -21px;
       background-color: rgba(255, 194, 20, 1);
       transform: translateY(-50%);
     }
@@ -39,7 +39,7 @@
       border-radius: 100%;
       top: 50%;
       background-color: rgba(255, 194, 20, 1);
-      left: -1.1vw;
+      left: -24px;
       transform: translateY(-50%) translateX(50%);
 }
 .block{
@@ -62,7 +62,7 @@
       height: 1px;
       position: absolute;
       top: 50%;
-      left: -24px;
+      left: -22.5px;
       transform: translateY(-50%);
       background-color: rgba(0, 255, 245, 1);
     }
@@ -75,6 +75,6 @@
       background-color: rgba(0, 255, 245, 1);
       border-radius: 100%;
       top: 50%;
-      left: -1.1vw;
+      left: -25.5px;
       transform: translateY(-50%) translateX(50%);
 }

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-18 10:18:09
  * @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));
@@ -25,13 +25,26 @@ function generateRandomArray(data) {
   
   return randomArray;
 }
+function getForecastList(data) {
+  console.log('ryfdata',data);
+  
+  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))
+  }
+     return forecastList
+}
 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 [randomValue, setRandomValue] = useState(generateRandomArray((data)))
   // 定义一个处理子组件可见性变化的回调函数
   const handleVisibilityChange = (newVisibilityState) => {
     console.log(`Visibility changed to: ${newVisibilityState}`);
@@ -39,18 +52,23 @@ function LeftTopForecast(props) {
     // 在这里还可以根据需要执行其他操作，比如更新UI、管理其他组件的状态等
     props.updateVisibilityState(newVisibilityState); // 通知父组件更新isVisible状态
   };
-  
+  const dataList = randomValue
+  const [forecastList, setForecastList] = useState(getForecastList((dataList)))
   const value = useContext(HomeContext);
+    // let forecastList = [];
+   console.log('forecastList',forecastList);
+   
   const kilnOptimize = useSelector((state) => state.kilnOptimize);
   const dataSource  = {
-    color1: 'rgba(0, 255, 245, .4)',
+    color1: 'rgba(0, 255, 245, .2)',
-    color:'rgba(255, 194, 20, .4)',
+    color:'rgba(255, 194, 20, .2)',
     yName:'℃',
-    // areaColor0:'rgba(18, 255, 245, 0.4)',
+    // areaColor0:'rgba(18, 255, 245, 0.2)',
     areaColor1:'rgba(255, 234, 153, 0)',
     msg: kilnOptimize.topTempAvgFor1h,
     modelFlag: value,
-    data: data ? generateRandomArray(data) : [],
+    data: dataList ? dataList : [],
+    forecastList:forecastList ?forecastList:[],
     range: [-10, 10]
   }
   return (

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

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

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

@@ -26,7 +26,7 @@
       height: 1px;
       position: absolute;
       top: 50%;
-      left: -23.3px;
+      left: -21px;
       background-color: rgba(255, 194, 20, 1);
       transform: translateY(-50%);
     }
@@ -39,7 +39,7 @@
       border-radius: 100%;
       top: 50%;
       background-color: rgba(255, 194, 20, 1);
-      left: -1.1vw;
+      left: -24px;
       transform: translateY(-50%) translateX(50%);
 }
 .block{
@@ -62,7 +62,7 @@
       height: 1px;
       position: absolute;
       top: 50%;
-      left: -24px;
+      left: -22.5px;
       transform: translateY(-50%);
       background-color: rgba(0, 255, 245, 1);
     }
@@ -75,6 +75,6 @@
       background-color: rgba(0, 255, 245, 1);
       border-radius: 100%;
       top: 50%;
-      left: -1.1vw;
+      left: -25.5px;
       transform: translateY(-50%) translateX(50%);
 }

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

@@ -3,7 +3,7 @@
 }
 .legend {
 	position: absolute;
-	right: 200px;
+	left: 200px;
 	top: 30px;
 }
 .item{
@@ -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/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;

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 16:08:38
  * @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,
@@ -63,7 +63,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,
@@ -98,40 +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: {
-          itemStyle: {
+              color: '#00FFF5', //改变折线点的颜色
-            normal: {
-              color: 'rgba(0, 255, 245, 1))', //改变折线点的颜色
               lineStyle: {
-                color: 'rgba(0, 255, 245, 1)' //改变折线颜色
+                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-09-13 14:30:06
+ * @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,26 +64,18 @@ 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));
-   }
-  }
- 
-  
-  for(let i = 0; i < 7; i++) {
-     currentTime.setMinutes(currentTime.getMinutes() - 10);
-    const timeString = `${currentTime.getHours()}:${currentTime.getMinutes().toString().padStart(2, '0')}`;
-    times.unshift(timeString);
   }
+console.log('forRYF',times);
+  // for(let i = 0; i < 7; i++) {
+  //    currentTime.setMinutes(currentTime.getMinutes() - 10);
+  //   const timeString = `${currentTime.getHours()}:${currentTime.getMinutes().toString().padStart(2, '0')}`;
+  //   times.unshift(timeString);
+  // }
   let areaStyle = {
       opacity: 0.8,
       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

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

@@ -1,13 +1,13 @@
 /*
  * @Author: zhp
  * @Date: 2024-09-13 14:47:50
- * @LastEditTime: 2024-09-13 15:44:40
+ * @LastEditTime: 2024-09-18 10:13:08
  * @LastEditors: zhp
  * @Description: 
  */
 import cls from "./index.module.css";
 import ReactECharts from "echarts-for-react";
-import getOptions from "./pointsChart.config";
+import getOptions from "./pointsChart.js"
 import * as echarts from "echarts";
 import { useState } from "react";
 function getTimeArray() {
@@ -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,24 +28,54 @@ 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;
 
   const data = dataSource.data || [];
+  let forecastList =dataSource.forecastList || [];
   // const modelFlag = dataSource.modelFlag || false;
   const color1 = dataSource.color1 || [];
   const color = dataSource.color || [];
   const yName = dataSource.yName;
   const times = getTimeArray();
   // }
-  let forecastList = []
+  console.log('times',times)
-    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, [
@@ -68,7 +98,7 @@ function CommonChart(props) {
           color:color1,
         },
         {
-          offset: .3,
+          offset: 1,
           color: dataSource.areaColor1,
         },
       ]),
@@ -113,7 +143,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,forecastList,color,color1,areaStyle,areaStyle1)}
           style={{ height: "100%" }}
         />
       )}

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

@@ -1,14 +1,7 @@
 /*
  * @Author: zhp
  * @Date: 2024-09-13 15:39:36
- * @LastEditTime: 2024-09-13 15:45:40
+ * @LastEditTime: 2024-09-18 11:21:11
- * @LastEditors: zhp
- * @Description: 
- */
-/*
- * @Author: zhp
- * @Date: 2024-08-28 09:25:58
- * @LastEditTime: 2024-09-13 14:22:01
  * @LastEditors: zhp
  * @Description: 
  */
@@ -16,7 +9,8 @@
 
 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 },
+    color:['rgba(255, 194, 20, 1)','rgba(0, 255, 245, 1)'],
     xAxis: {
       type: "category",
       data:times,
@@ -29,7 +23,7 @@ export default function getOptions(data, times, range, yName,forecastList,color,
       axisLine: {
         lineStyle: {
           width: 1,
-          color: "#213259",
+          color: "#F1F9FF",
         },
       },
     },
@@ -40,6 +34,13 @@ export default function getOptions(data, times, range, yName,forecastList,color,
         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)",
@@ -49,12 +50,12 @@ export default function getOptions(data, times, range, yName,forecastList,color,
       axisLine: {
         show: true,
         lineStyle: {
-          color: "#213259",
+          color: "#F1F9FF",
         },
       },
       splitLine: {
         lineStyle: {
-          color: "#213259a0",
+          color: "#58E7E9",
         },
       },
       min:range[0],
@@ -71,14 +72,12 @@ 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:{
-        //     color:color
-        // },
        itemStyle: {
             normal: {
               color: 'rgba(255, 194, 20, 1)', //改变折线点的颜色
@@ -88,67 +87,48 @@ export default function getOptions(data, times, range, yName,forecastList,color,
             }
         },
         data: data,
-        // markLine: {
-        //   symbol: 'none',
-        //   label:{
-        //     show:true,
-        //     position:'end',
-        //     formatter:'标准线',
-        //     color:'#FFCB59',
-        //     fontSize: 12,
-        //   },
-        //   lineStyle:{
-        //     color:'#FFCB59'
-        //   },
-        //   data: seriesData.markLineData
-        // },
         areaStyle:areaStyle
       },
       {
         type: 'line',
+        stack: 'Total',
         label: {
           show: true,
+          color: '#00FFF5', //改变折线点的颜色
           position: 'top',
-          color:'inherit'
+          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,
-        // lineStyle:{
+        itemStyle: {
-        //   color:color1
+          color: '#00FFF5', //改变折线点的颜色
-        // },
+          normal: {
-          itemStyle: {
+              color: '#00FFF5', //改变折线点的颜色
-            normal: {
-              color: 'rgba(0, 255, 245, 1))', //改变折线点的颜色
               lineStyle: {
-                color: 'rgba(0, 255, 245, 1)' //改变折线颜色
+                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: {
+  tooltip: {
-      trigger: "axis",
+        trigger: "axis",
-      axisPointer: {
+        axisPointer: {
-        type: 'cross'
+          type: "shadow",
+        },
+        className: "xc-chart-tooltip",
+        // backgroundColor: ''
       },
-      className: "xc-chart-tooltip",
+    };
-      // backgroundColor: ''
-    },
-  };
 }

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 17:07:49
  * @LastEditors: zhp
  * @Description: 
  */
@@ -11,10 +11,21 @@ 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 || [];
@@ -23,14 +34,15 @@ 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)
+    // }
+    console.log('forecastList',forecastList)
   }
   let areaStyle = {
       opacity: 0.8,

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

@@ -27,7 +27,7 @@
 	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;

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-18 10:44:06
  * @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);
@@ -24,7 +24,7 @@ function LeftMiddleForecast() {
       <div className={cls.leftBar__middle__content}>
         {infos.map((item) => (
           <div key={item.label} className={`${cls.info__item}`}>
-            <span className={cls.square}></span>
+            {/* <span className={cls.square}></span> */}
             <span className={cls.label}>{item.label}</span>
             <span className={cls.line}></span>
             <span className={cls.value}>{ (item.value * 100).toFixed(2) + '%'}</span>

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

@@ -7,10 +7,10 @@
 		display: grid;
 	  grid-template-rows: auto 1fr 1fr;
 		/* gap: 4px; */
-		padding-top: 6px;
+		padding-top: 4px;
 		.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; */
@@ -28,16 +28,9 @@
 			display: flex;
 			align-items: center;
 			gap: 14px;
-      .square{
-        /* flex: 1; */
-        margin-left: 20px;
-        width: 6px;
-        height: 6px;
-        background: #00FFF5;
-        box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5), 0px 0px 4px 1px #58E7E9;
-      }
 			.label {
 				/* flex:1; */
+        margin-left: 40px;
 				text-align: left;
         /* position: relative; */
 			}
@@ -49,6 +42,7 @@
 			}
 		}
     		.info__item:last-child {
+        color: #ffff;
 	    /* width: 100%; */
       background: url('../../../../../assets/lastBack.png') no-repeat;
       background-size: 100% 100%;

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

@@ -1,7 +1,7 @@
 /*
  * @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: 
  */
@@ -13,7 +13,7 @@ import DayNightToggle from "../dayButton";
 import SeasonToggle from "../seasonButton";
 import InputDataToggle from "../inputData";
 function paramsInput(props) {
-    const handleClick = () => {
+  const handleClick = () => {
     props.onSendValueToParent(true);
   };
   return (

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; */
 }

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

@@ -1,7 +1,7 @@
 /*
  * @Author: zhp
  * @Date: 2024-08-22 14:00:57
- * @LastEditTime: 2024-09-02 09:30:37
+ * @LastEditTime: 2024-09-14 14:40:14
  * @LastEditors: zhp
  * @Description: 
  */
@@ -23,7 +23,9 @@ function SeasonToggle() {
           display: "flex",
           width:"10%",
           // marginBottom: "24px",
-           flexDirection: "column",/* 这行设置为垂直布局 */
+          flexDirection: "column",/* 这行设置为垂直布局 */
+          position: 'relative',
+          zIndex: 999,
         }}
       >
         <div

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

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

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

@@ -1,7 +1,7 @@
 /*
  * @Author: zhp
  * @Date: 2024-08-23 13:56:11
- * @LastEditTime: 2024-08-30 16:30:35
+ * @LastEditTime: 2024-09-18 10:54:39
  * @LastEditors: zhp
  * @Description: 
  */
@@ -32,12 +32,12 @@ export default function Index() {
         <div style={{ height: '261px', marginTop: '24px' }}>
 			    <LeftMiddleForecast />
         </div>
-        <div style={{ flex: 1,marginTop: '24px' }}>
+        <div style={{ height: '422px',marginTop: '24px' }}>
 	          <LeftBottomForecast/>
 			</div>
         </motion.div>
       <motion.div
-          className={cls.leftBar}
+          className={cls.leftBarRight}
           initial={{ opacity: 0, position: 'absolute' }}
           animate={{ opacity: 1, position: 'relative' }}
           exit={{ opacity: 0, position: 'relative' }}

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

@@ -11,4 +11,14 @@
   display: flex;
   justify-content: space-between;
   gap: 16px;
+
+}
+.leftBarRight {
+	width: 501px;
+	height: 966px;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+  position: relative;
+  z-index: 99;
 }

src/pages/Home/index.jsx

@@ -37,7 +37,7 @@ export default function Home({ active }) {
 
   const handleValueFromGrandChild = (value) => {
     setModelFlag(value);
-    console.log('modelFlag',modelFlag);
+    console.log('modelFlag',value);
   };
   const ctx = useSelector((state) => state.fireInfo);
   const fireDir = ctx.fireDirection || null;