Compare commits
3 Commits
2d2d6d4c15
...
f9dde6e159
Author | SHA1 | Date | |
---|---|---|---|
|
f9dde6e159 | ||
|
b27d70f0fc | ||
fd34efc0b4 |
@ -1,7 +1,7 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-08-29 09:46:11
|
* @Date: 2024-08-29 09:46:11
|
||||||
* @LastEditTime: 2024-09-13 14:35:10
|
* @LastEditTime: 2024-09-13 16:27:51
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
@ -26,14 +26,23 @@ function BlueRect(props) {
|
|||||||
};
|
};
|
||||||
// const parentRef = useRef(null);
|
// 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 = () => {
|
const handleToggleVisibility = () => {
|
||||||
setIsVisible(!isVisible);
|
setIsVisible(!isVisible);
|
||||||
if (isVisible) {
|
if (isVisible) {
|
||||||
console.log(props)
|
|
||||||
// 当隐藏时,可以清理一些数据
|
// 当隐藏时,可以清理一些数据
|
||||||
setChartData(null);
|
setChartData(null);
|
||||||
} else {
|
} else {
|
||||||
console.log('props',props)
|
setPointsPosition({
|
||||||
|
left: `${mousePosition.x + 100}px`,
|
||||||
|
top: `${mousePosition.y - 100}px`,
|
||||||
|
});
|
||||||
// 当显示时,可以模拟获取数据并传递给子组件
|
// 当显示时,可以模拟获取数据并传递给子组件
|
||||||
setChartData({
|
setChartData({
|
||||||
title,
|
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 (
|
return (
|
||||||
<div>
|
<div onMouseMove={handleMouseMove}>
|
||||||
<div
|
<div
|
||||||
// ref={parentRef}
|
// ref={parentRef}
|
||||||
className={`${cls.blueRect} ${cls[title]}`}
|
className={`${cls.blueRect} ${cls[title]}`}
|
||||||
@ -81,10 +83,11 @@ function BlueRect(props) {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{isVisible && !props.blue && <Points dataSource={chartData}
|
{isVisible && !props.blue && <Points dataSource={chartData}
|
||||||
// ref={pointsRef}
|
|
||||||
updateVisibilityState={updateVisibilityState} // 传递方法给子组件
|
updateVisibilityState={updateVisibilityState} // 传递方法给子组件
|
||||||
style={{
|
style={{
|
||||||
position: "fixed",
|
position: "fixed",
|
||||||
|
left: pointsPosition.left,
|
||||||
|
top: pointsPosition.top,
|
||||||
zIndex: 9999,
|
zIndex: 9999,
|
||||||
}}/>}
|
}}/>}
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-08-28 09:25:58
|
* @Date: 2024-08-28 09:25:58
|
||||||
* @LastEditTime: 2024-09-13 14:30:06
|
* @LastEditTime: 2024-09-13 16:50:40
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
@ -10,7 +10,29 @@ import ReactECharts from "echarts-for-react";
|
|||||||
import getOptions from "./chart.config";
|
import getOptions from "./chart.config";
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import { useState } from "react";
|
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) {
|
function CommonChart(props) {
|
||||||
const { dataSource } = props;
|
const { dataSource } = props;
|
||||||
|
|
||||||
@ -23,7 +45,7 @@ function CommonChart(props) {
|
|||||||
const times = [];
|
const times = [];
|
||||||
// }
|
// }
|
||||||
let forecastList = []
|
let forecastList = []
|
||||||
if (modelFlag === true) {
|
// if (modelFlag === true) {
|
||||||
for (let i = 0; i < data.length; i++) {
|
for (let i = 0; i < data.length; i++) {
|
||||||
let item = data[i];
|
let item = data[i];
|
||||||
let min = item - 5;
|
let min = item - 5;
|
||||||
@ -31,7 +53,7 @@ function CommonChart(props) {
|
|||||||
let randomValue = Math.random() * (max - min) + min;
|
let randomValue = Math.random() * (max - min) + min;
|
||||||
forecastList.push(randomValue.toFixed(1));
|
forecastList.push(randomValue.toFixed(1));
|
||||||
}
|
}
|
||||||
}
|
// }
|
||||||
|
|
||||||
|
|
||||||
for(let i = 0; i < 7; i++) {
|
for(let i = 0; i < 7; i++) {
|
||||||
@ -106,7 +128,7 @@ function CommonChart(props) {
|
|||||||
<div className={cls.commonChart}>
|
<div className={cls.commonChart}>
|
||||||
{data.length > 0 && (
|
{data.length > 0 && (
|
||||||
<ReactECharts
|
<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%" }}
|
style={{ height: "100%" }}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
@ -11,7 +11,29 @@ import ReactECharts from "echarts-for-react";
|
|||||||
import getOptions from "./chart.config";
|
import getOptions from "./chart.config";
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import { useState } from "react";
|
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) {
|
function CommonChart(props) {
|
||||||
const { dataSource } = props;
|
const { dataSource } = props;
|
||||||
const data = dataSource.data || [];
|
const data = dataSource.data || [];
|
||||||
@ -22,7 +44,7 @@ function CommonChart(props) {
|
|||||||
const xData = dataSource.xData || [];
|
const xData = dataSource.xData || [];
|
||||||
console.log('xData',props);
|
console.log('xData',props);
|
||||||
let forecastList = [];
|
let forecastList = [];
|
||||||
if (modelFlag === true) {
|
// if (modelFlag === true) {
|
||||||
for (let i = 0; i < data.length; i++) {
|
for (let i = 0; i < data.length; i++) {
|
||||||
let item = data[i];
|
let item = data[i];
|
||||||
let min = item - .5;
|
let min = item - .5;
|
||||||
@ -31,7 +53,7 @@ function CommonChart(props) {
|
|||||||
forecastList.push(randomValue.toFixed(1));
|
forecastList.push(randomValue.toFixed(1));
|
||||||
}
|
}
|
||||||
console.log(forecastList)
|
console.log(forecastList)
|
||||||
}
|
// }
|
||||||
let areaStyle = {
|
let areaStyle = {
|
||||||
opacity: 0.8,
|
opacity: 0.8,
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
@ -65,7 +87,7 @@ function CommonChart(props) {
|
|||||||
<div className={cls.commonChart}>
|
<div className={cls.commonChart}>
|
||||||
{data.length > 0 && (
|
{data.length > 0 && (
|
||||||
<ReactECharts
|
<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%" }}
|
style={{ height: "100%" }}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-08-20 14:09:17
|
* @Date: 2024-08-20 14:09:17
|
||||||
* @LastEditTime: 2024-08-30 14:53:39
|
* @LastEditTime: 2024-09-13 16:39:20
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
@ -14,6 +14,7 @@ import SeasonToggle from "../seasonButton";
|
|||||||
import InputDataToggle from "../inputData";
|
import InputDataToggle from "../inputData";
|
||||||
function paramsInput(props) {
|
function paramsInput(props) {
|
||||||
const handleClick = () => {
|
const handleClick = () => {
|
||||||
|
console.log(11111);
|
||||||
props.onSendValueToParent(true);
|
props.onSendValueToParent(true);
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
|
@ -37,7 +37,7 @@ export default function Home({ active }) {
|
|||||||
|
|
||||||
const handleValueFromGrandChild = (value) => {
|
const handleValueFromGrandChild = (value) => {
|
||||||
setModelFlag(value);
|
setModelFlag(value);
|
||||||
console.log('modelFlag',modelFlag);
|
console.log('modelFlag',value);
|
||||||
};
|
};
|
||||||
const ctx = useSelector((state) => state.fireInfo);
|
const ctx = useSelector((state) => state.fireInfo);
|
||||||
const fireDir = ctx.fireDirection || null;
|
const fireDir = ctx.fireDirection || null;
|
||||||
|
Loading…
Reference in New Issue
Block a user