Autor | SHA1 | Mensagem | Data |
---|---|---|---|
juzi | a4985a5379 |
Merge pull request 'zhp' (#7) from zhp into features/warning
Reviewed-on: http://git.picaiba.com/mt-fe-group/xuchang-new/pulls/7 |
6 dias atrás |
‘937886381’ | f9dde6e159 | Merge branch 'features/warning' into zhp | 6 dias atrás |
‘937886381’ | b27d70f0fc | 修改 | 6 dias atrás |
@@ -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: | ||||
*/ | */ | ||||
@@ -25,15 +25,24 @@ function BlueRect(props) { | |||||
// 在这里可以根据isVisible的变化执行其他逻辑 | // 在这里可以根据isVisible的变化执行其他逻辑 | ||||
}; | }; | ||||
// 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,11 +83,12 @@ function BlueRect(props) { | |||||
)} | )} | ||||
</div> | </div> | ||||
{isVisible && !props.blue && <Points dataSource={chartData} | {isVisible && !props.blue && <Points dataSource={chartData} | ||||
// ref={pointsRef} | |||||
updateVisibilityState={updateVisibilityState} // 传递方法给子组件 | updateVisibilityState={updateVisibilityState} // 传递方法给子组件 | ||||
style={{ | |||||
position: "fixed", | |||||
zIndex: 9999, | |||||
style={{ | |||||
position: "fixed", | |||||
left: pointsPosition.left, | |||||
top: pointsPosition.top, | |||||
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: | ||||
*/ | */ | ||||
@@ -13,7 +13,8 @@ import DayNightToggle from "../dayButton"; | |||||
import SeasonToggle from "../seasonButton"; | 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; | ||||