Reviewed-on: http://git.picaiba.com/mt-fe-group/xuchang-new/pulls/7features/warning
@@ -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> | |||
); | |||
@@ -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%" }} | |||
/> | |||
)} | |||
@@ -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%" }} | |||
/> | |||
)} | |||
@@ -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: | |||
*/ | |||
@@ -13,7 +13,8 @@ import DayNightToggle from "../dayButton"; | |||
import SeasonToggle from "../seasonButton"; | |||
import InputDataToggle from "../inputData"; | |||
function paramsInput(props) { | |||
const handleClick = () => { | |||
const handleClick = () => { | |||
console.log(11111); | |||
props.onSendValueToParent(true); | |||
}; | |||
return ( | |||
@@ -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; | |||