修改

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: 
  */
@@ -25,15 +25,24 @@ function BlueRect(props) {
     // 在这里可以根据isVisible的变化执行其他逻辑
   };
     // 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]}`}
@@ -81,11 +83,12 @@ function BlueRect(props) {
       )}
       </div>
       {isVisible && !props.blue && <Points dataSource={chartData}
-      // ref={pointsRef}
         updateVisibilityState={updateVisibilityState} // 传递方法给子组件
-        style={{
-            position: "fixed",
-            zIndex: 9999,
+          style={{
+          position: "fixed",
+          left: pointsPosition.left,
+          top: pointsPosition.top,
+          zIndex: 9999,
         }}/>}
     </div>
   );