3 Commits

5 arquivos alterados com 74 adições e 26 exclusões
Visão unificada
  1. +19
    -16
      src/components/Common/forecastRect/index.jsx
  2. +26
    -4
      src/components/Modules/KilnOptimize/components/forecastRightChart/index.jsx
  3. +25
    -3
      src/components/Modules/KilnOptimize/components/forecastRightChart/yield.jsx
  4. +3
    -2
      src/components/Modules/KilnOptimize/components/paramsInput/index.jsx
  5. +1
    -1
      src/pages/Home/index.jsx

+ 19
- 16
src/components/Common/forecastRect/index.jsx Ver arquivo

@@ -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>
); );


+ 26
- 4
src/components/Modules/KilnOptimize/components/forecastRightChart/index.jsx Ver arquivo

@@ -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%" }}
/> />
)} )}


+ 25
- 3
src/components/Modules/KilnOptimize/components/forecastRightChart/yield.jsx Ver arquivo

@@ -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%" }}
/> />
)} )}


+ 3
- 2
src/components/Modules/KilnOptimize/components/paramsInput/index.jsx Ver arquivo

@@ -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 (


+ 1
- 1
src/pages/Home/index.jsx Ver arquivo

@@ -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;


Carregando…
Cancelar
Salvar