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-13 16:27:51
  * @LastEditors: zhp
  * @Description: 
  */
@@ -26,14 +26,23 @@ function BlueRect(props) {
   };
     // 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) {
-      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]}`}
@@ -81,10 +83,11 @@ function BlueRect(props) {
       )}
       </div>
       {isVisible && !props.blue && <Points dataSource={chartData}
-      // ref={pointsRef}
         updateVisibilityState={updateVisibilityState} // 传递方法给子组件
           style={{
           position: "fixed",
+          left: pointsPosition.left,
+          top: pointsPosition.top,
           zIndex: 9999,
         }}/>}
     </div>

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-13 16:50:40
  * @LastEditors: zhp
  * @Description: 
  */
@@ -10,7 +10,29 @@ import ReactECharts from "echarts-for-react";
 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]) {
+        result.push(arr2[i]);
+      } else {
+        result.push(null);
+      }
+    }
+    return result;
+  }
+}
 function CommonChart(props) {
   const { dataSource } = props;
 
@@ -23,7 +45,7 @@ function CommonChart(props) {
   const times = [];
   // }
   let forecastList = []
-  if (modelFlag === true) {
+  // if (modelFlag === true) {
     for (let i = 0; i < data.length; i++) {
       let item = data[i];
       let min = item - 5;
@@ -31,7 +53,7 @@ function CommonChart(props) {
       let randomValue = Math.random() * (max - min) + min;
       forecastList.push(randomValue.toFixed(1));
    }
-  }
+  // }
  
   
   for(let i = 0; i < 7; i++) {
@@ -106,7 +128,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(data, times, yRange, yName,compareArrays(data,forecastList),color,color1,areaStyle,areaStyle1)}
           style={{ height: "100%" }}
         />
       )}

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

@@ -11,7 +11,29 @@ import ReactECharts from "echarts-for-react";
 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]) {
+        result.push(arr2[i]);
+      } else {
+        result.push(null);
+      }
+    }
+    return result;
+  }
+}
 function CommonChart(props) {
   const { dataSource } = props;
   const data = dataSource.data || [];
@@ -22,7 +44,7 @@ function CommonChart(props) {
   const xData = dataSource.xData || [];
   console.log('xData',props);
   let forecastList = [];
-  if (modelFlag === true) {
+  // if (modelFlag === true) {
     for (let i = 0; i < data.length; i++) {
       let item = data[i];
       let min = item - .5;
@@ -31,7 +53,7 @@ function CommonChart(props) {
       forecastList.push(randomValue.toFixed(1));
     }
     console.log(forecastList)
-  }
+  // }
   let areaStyle = {
       opacity: 0.8,
       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -65,7 +87,7 @@ function CommonChart(props) {
     <div className={cls.commonChart}>
       {data.length > 0 && (
         <ReactECharts
-          option={getOptions(data, xData, yRange, yName,forecastList,color,color1,areaStyle,areaStyle1)}
+          option={getOptions(data, xData, yRange, yName,compareArrays(data,forecastList),color,color1,areaStyle,areaStyle1)}
           style={{ height: "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-13 16:39:20
  * @LastEditors: zhp
  * @Description: 
  */
@@ -14,6 +14,7 @@ import SeasonToggle from "../seasonButton";
 import InputDataToggle from "../inputData";
 function paramsInput(props) {
   const handleClick = () => {
+    console.log(11111);
     props.onSendValueToParent(true);
   };
   return (

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;