diff --git a/src/assets/pointsBack.png b/src/assets/pointsBack.png index 172cac9..e431a00 100644 Binary files a/src/assets/pointsBack.png and b/src/assets/pointsBack.png differ diff --git a/src/components/Common/forecastRect/index.jsx b/src/components/Common/forecastRect/index.jsx index 1a27843..42f0417 100644 --- a/src/components/Common/forecastRect/index.jsx +++ b/src/components/Common/forecastRect/index.jsx @@ -1,7 +1,7 @@ /* * @Author: zhp * @Date: 2024-08-29 09:46:11 - * @LastEditTime: 2024-09-13 16:27:51 + * @LastEditTime: 2024-09-14 09:20:36 * @LastEditors: zhp * @Description: */ @@ -19,9 +19,7 @@ function BlueRect(props) { const [isVisible, setIsVisible] = useState(false); const [chartData, setChartData] = useState(null); const updateVisibilityState = (newVisibilityState) => { - console.log(newVisibilityState) setIsVisible(!newVisibilityState); - console.log(`Parent's isVisible updated to: ${newVisibilityState}`); // 在这里可以根据isVisible的变化执行其他逻辑 }; // const parentRef = useRef(null); diff --git a/src/components/Common/pointItemBackgroundForecast/index.module.css b/src/components/Common/pointItemBackgroundForecast/index.module.css index 49cc192..0a6fc56 100644 --- a/src/components/Common/pointItemBackgroundForecast/index.module.css +++ b/src/components/Common/pointItemBackgroundForecast/index.module.css @@ -1,6 +1,6 @@ .bottomBarItem { background: url(../../../assets/pointsBack.png) no-repeat; background-size: 100% 100%; - width: 551px; + width: 761px; height: 335px; } diff --git a/src/components/Modules/KilnOptimize/Center/index.jsx b/src/components/Modules/KilnOptimize/Center/index.jsx index a36371f..102abf0 100644 --- a/src/components/Modules/KilnOptimize/Center/index.jsx +++ b/src/components/Modules/KilnOptimize/Center/index.jsx @@ -33,6 +33,7 @@ function KilnCenter({ onFloorChange }) { position: "absolute", top: "12%", display: "flex", + zIndex:99, flexDirection: "column", }} > @@ -40,7 +41,7 @@ function KilnCenter({ onFloorChange }) { {floor === 4 && (
diff --git a/src/components/Modules/KilnOptimize/Center/videoComponents/FloorToFour.jsx b/src/components/Modules/KilnOptimize/Center/videoComponents/FloorToFour.jsx index fa4b150..77ed23d 100644 --- a/src/components/Modules/KilnOptimize/Center/videoComponents/FloorToFour.jsx +++ b/src/components/Modules/KilnOptimize/Center/videoComponents/FloorToFour.jsx @@ -1,7 +1,7 @@ /* * @Author: zhp * @Date: 2024-08-28 15:27:46 - * @LastEditTime: 2024-09-12 15:28:17 + * @LastEditTime: 2024-09-14 08:39:56 * @LastEditors: zhp * @Description: */ @@ -47,7 +47,7 @@ function FloorTwoToOne(props) { left: "0px", width: "calc(100% - 500px)", height: "calc(100% - 7px)", - zIndex: 998, + zIndex: -99, overflow: "clip", }} initial={{ opacity: 0 }} diff --git a/src/components/Modules/KilnOptimize/components/KilnTopForecast/Points.jsx b/src/components/Modules/KilnOptimize/components/KilnTopForecast/Points.jsx index 6d2c5e6..5a1f1c4 100644 --- a/src/components/Modules/KilnOptimize/components/KilnTopForecast/Points.jsx +++ b/src/components/Modules/KilnOptimize/components/KilnTopForecast/Points.jsx @@ -1,7 +1,7 @@ /* * @Author: zhp * @Date: 2024-09-12 13:44:55 - * @LastEditTime: 2024-09-13 14:53:34 + * @LastEditTime: 2024-09-14 09:21:16 * @LastEditors: zhp * @Description: */ @@ -14,7 +14,7 @@ import React, { useContext,useEffect,useState} from 'react' import { HomeContext } from '../../../../../pages/Home'; function generateRandomArray(data) { const randomArray = []; - for (let i = 0; i < 24; i++) { + for (let i = 0; i < 25; i++) { let randomNumber; do { randomNumber = ((Math.random() * (data - 1)).toFixed(1)); diff --git a/src/components/Modules/KilnOptimize/components/KilnTopForecast/point.module.css b/src/components/Modules/KilnOptimize/components/KilnTopForecast/point.module.css index a1e74d6..2506447 100644 --- a/src/components/Modules/KilnOptimize/components/KilnTopForecast/point.module.css +++ b/src/components/Modules/KilnOptimize/components/KilnTopForecast/point.module.css @@ -39,7 +39,7 @@ border-radius: 100%; top: 50%; background-color: rgba(255, 194, 20, 1); - left: -1.1vw; + left: -27px; transform: translateY(-50%) translateX(50%); } .block{ @@ -75,6 +75,6 @@ background-color: rgba(0, 255, 245, 1); border-radius: 100%; top: 50%; - left: -1.1vw; + left: -27px; transform: translateY(-50%) translateX(50%); } diff --git a/src/components/Modules/KilnOptimize/components/forecastRightChart/chart.config.js b/src/components/Modules/KilnOptimize/components/forecastRightChart/chart.config.js index fe39b6a..cf27323 100644 --- a/src/components/Modules/KilnOptimize/components/forecastRightChart/chart.config.js +++ b/src/components/Modules/KilnOptimize/components/forecastRightChart/chart.config.js @@ -1,7 +1,7 @@ /* * @Author: zhp * @Date: 2024-08-28 09:25:58 - * @LastEditTime: 2024-09-13 14:22:01 + * @LastEditTime: 2024-09-14 09:05:44 * @LastEditors: zhp * @Description: */ @@ -9,7 +9,7 @@ export default function getOptions(data, times, range, yName,forecastList,color,color1,areaStyle,areaStyle1) { return { - grid: { top: 38, right: 44, bottom: 20, left: 48 }, + grid: { top: 38, right: 0, bottom: 20, left: 48 }, xAxis: { type: "category", data:times, @@ -108,7 +108,7 @@ export default function getOptions(data, times, range, yName,forecastList,color, // lineStyle:{ // color:color1 // }, - itemStyle: { + itemStyle: { normal: { color: 'rgba(0, 255, 245, 1))', //改变折线点的颜色 lineStyle: { diff --git a/src/components/Modules/KilnOptimize/components/forecastRightChart/index.jsx b/src/components/Modules/KilnOptimize/components/forecastRightChart/index.jsx index 7f97b7c..d676945 100644 --- a/src/components/Modules/KilnOptimize/components/forecastRightChart/index.jsx +++ b/src/components/Modules/KilnOptimize/components/forecastRightChart/index.jsx @@ -1,7 +1,7 @@ /* * @Author: zhp * @Date: 2024-08-28 09:25:58 - * @LastEditTime: 2024-09-13 16:50:40 + * @LastEditTime: 2024-09-14 10:57:55 * @LastEditors: zhp * @Description: */ @@ -11,27 +11,38 @@ 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; + const result = []; + const longerLength = arr2.length; + for (let i = 0; i < longerLength; i++) { + if (i < arr1.length && arr1[i]) { + result.push(null); + } else if (i < arr1.length &&!arr1[i]) { + result.push(arr2[i]); + } else { + result.push(arr2[i]); } } - - 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 generateRandomArray(data) { + const result = []; + for (let i = 0; i < 7; i++) { + if (i < data.length) { + let randomNumber; + do { + randomNumber = data[i] + Math.floor(Math.random() * 11) - 5; + } while (randomNumber < 0); + result.push(randomNumber); + } else { + let lastDataValue = data[data.length - 1]; + let randomNumber; + do { + randomNumber = lastDataValue + Math.floor(Math.random() * 11) - 5; + } while (randomNumber < 0); + result.push(randomNumber); } - return result; } + return result; } function CommonChart(props) { const { dataSource } = props; @@ -43,19 +54,14 @@ function CommonChart(props) { const yName = dataSource.yName; const currentTime = new Date(); const times = []; - // } let forecastList = [] - // if (modelFlag === true) { - for (let i = 0; i < data.length; i++) { - let item = data[i]; - let min = item - 5; - let max = item + 5; - let randomValue = Math.random() * (max - min) + min; - forecastList.push(randomValue.toFixed(1)); - } - // } - - + if (modelFlag === true) { + forecastList = generateRandomArray(data) + console.log('11111',compareArrays(data,forecastList)) + } + const d = [10, 20, 30]; +const f = generateRandomArray(d); +console.log('forRYF',f); for(let i = 0; i < 7; i++) { currentTime.setMinutes(currentTime.getMinutes() - 10); const timeString = `${currentTime.getHours()}:${currentTime.getMinutes().toString().padStart(2, '0')}`; diff --git a/src/components/Modules/KilnOptimize/components/forecastRightChart/points.jsx b/src/components/Modules/KilnOptimize/components/forecastRightChart/points.jsx index 60e0bea..711c51c 100644 --- a/src/components/Modules/KilnOptimize/components/forecastRightChart/points.jsx +++ b/src/components/Modules/KilnOptimize/components/forecastRightChart/points.jsx @@ -1,7 +1,7 @@ /* * @Author: zhp * @Date: 2024-09-13 14:47:50 - * @LastEditTime: 2024-09-13 15:44:40 + * @LastEditTime: 2024-09-14 10:47:18 * @LastEditors: zhp * @Description: */ @@ -17,7 +17,7 @@ function getTimeArray() { const timeArray = []; let currentTime = todaySeven; - while (currentTime < tomorrowSeven) { + while (currentTime <= tomorrowSeven) { const hours = currentTime.getHours(); const minutes = currentTime.getMinutes(); if (minutes === 0) { @@ -28,6 +28,42 @@ function getTimeArray() { return timeArray; } +// function compareArrays(arr1, arr2) { +// let hasMissingDataInFirstArray = false; +// for (let i = 0; i < arr1.length; i++) { +// if (!arr1[i]) { +// hasMissingDataInFirstArray = true; +// break; +// } +// } + +// if (hasMissingDataInFirstArray) { +// const result = new Array(arr2.length).fill(null); +// for (let i = 0; i < arr1.length; i++) { +// if (!arr1[i]) { +// result[i] = arr2[i]; +// } +// } +// return result; +// } else { +// return arr2.map(() => null); +// } +// } +function emptyFirstTwelve(arr) { + const newArr = [...arr]; + for (let i = 0; i < 12 && i < newArr.length; i++) { + newArr[i] = null; + } + return newArr; +} +function emptyLastThirteen(arr) { + const newArr = [...arr]; + const startIndex = Math.max(0, newArr.length - 13); + for (let i = startIndex; i < newArr.length; i++) { + newArr[i] = null; + } + return newArr; +} function CommonChart(props) { const { dataSource } = props; @@ -46,6 +82,7 @@ function CommonChart(props) { let randomValue = Math.random() * (max - min) + min; forecastList.push(randomValue.toFixed(1)); } + console.log('times',times) let areaStyle = { opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ @@ -113,7 +150,7 @@ function CommonChart(props) {
{data.length > 0 && ( )} diff --git a/src/components/Modules/KilnOptimize/components/forecastRightChart/pointsChart.config.js b/src/components/Modules/KilnOptimize/components/forecastRightChart/pointsChart.config.js index b8dbe1a..cd1b27d 100644 --- a/src/components/Modules/KilnOptimize/components/forecastRightChart/pointsChart.config.js +++ b/src/components/Modules/KilnOptimize/components/forecastRightChart/pointsChart.config.js @@ -1,7 +1,7 @@ /* * @Author: zhp * @Date: 2024-09-13 15:39:36 - * @LastEditTime: 2024-09-13 15:45:40 + * @LastEditTime: 2024-09-14 11:20:39 * @LastEditors: zhp * @Description: */ @@ -16,7 +16,7 @@ export default function getOptions(data, times, range, yName,forecastList,color,color1,areaStyle,areaStyle1) { return { - grid: { top: 38, right: 44, bottom: 40, left: 48 }, + grid: { top: 38, right: 0, bottom: 40, left: 48 }, xAxis: { type: "category", data:times, @@ -71,7 +71,11 @@ export default function getOptions(data, times, range, yName,forecastList,color, label: { show: true, position: 'top', - color:'inherit' + color: 'inherit', + formatter: (params) => { + const index = params.dataIndex; + return index % 2 === 0? params.value : ''; + } }, symbol: 'circle', symbolSize: 6, @@ -109,7 +113,11 @@ export default function getOptions(data, times, range, yName,forecastList,color, label: { show: true, position: 'top', - color:'inherit' + color: 'inherit', + formatter: (params) => { + const index = params.dataIndex; + return index % 2 === 0? params.value : ''; + } }, symbol: 'circle', symbolSize: 6, diff --git a/src/components/Modules/KilnOptimize/components/forecastRightChart/yield.jsx b/src/components/Modules/KilnOptimize/components/forecastRightChart/yield.jsx index 40366a5..7c9b023 100644 --- a/src/components/Modules/KilnOptimize/components/forecastRightChart/yield.jsx +++ b/src/components/Modules/KilnOptimize/components/forecastRightChart/yield.jsx @@ -1,7 +1,7 @@ /* * @Author: zhp * @Date: 2024-09-02 09:56:13 - * @LastEditTime: 2024-09-13 15:36:42 + * @LastEditTime: 2024-09-14 10:59:47 * @LastEditors: zhp * @Description: */ @@ -12,27 +12,38 @@ 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; + const result = []; + const longerLength = arr2.length; + for (let i = 0; i < longerLength; i++) { + if (i < arr1.length && arr1[i]) { + result.push(null); + } else if (i < arr1.length &&!arr1[i]) { + result.push(arr2[i]); + } else { + result.push(arr2[i]); } } - - 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 generateRandomArray(data) { + const result = []; + for (let i = 0; i < 7; i++) { + if (i < data.length) { + let randomNumber; + do { + randomNumber = data[i] + Math.floor(Math.random() * 11) - .5; + } while (randomNumber < 0); + result.push(randomNumber); + } else { + let lastDataValue = data[data.length - 1]; + let randomNumber; + do { + randomNumber = lastDataValue + Math.floor(Math.random() * 11) - .5; + } while (randomNumber < 0); + result.push(randomNumber); } - return result; } + return result; } function CommonChart(props) { const { dataSource } = props; @@ -44,16 +55,17 @@ function CommonChart(props) { const xData = dataSource.xData || []; console.log('xData',props); let forecastList = []; - // if (modelFlag === true) { - for (let i = 0; i < data.length; i++) { - let item = data[i]; - let min = item - .5; - let max = item + .5; - let randomValue = Math.random() * (max - min) + min; - forecastList.push(randomValue.toFixed(1)); - } - console.log(forecastList) - // } + if (modelFlag === true) { + forecastList = generateRandomArray + // for (let i = 0; i < data.length; i++) { + // let item = data[i]; + // let min = item - .5; + // let max = item + .5; + // let randomValue = Math.random() * (max - min) + min; + // forecastList.push(randomValue.toFixed(1)); + // } + // console.log(forecastList) + } let areaStyle = { opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ diff --git a/src/components/Modules/KilnOptimize/components/paramsInput/index.jsx b/src/components/Modules/KilnOptimize/components/paramsInput/index.jsx index 6716e88..8873b27 100644 --- a/src/components/Modules/KilnOptimize/components/paramsInput/index.jsx +++ b/src/components/Modules/KilnOptimize/components/paramsInput/index.jsx @@ -1,7 +1,7 @@ /* * @Author: zhp * @Date: 2024-08-20 14:09:17 - * @LastEditTime: 2024-09-13 16:39:20 + * @LastEditTime: 2024-09-14 09:09:29 * @LastEditors: zhp * @Description: */ @@ -14,7 +14,6 @@ import SeasonToggle from "../seasonButton"; import InputDataToggle from "../inputData"; function paramsInput(props) { const handleClick = () => { - console.log(11111); props.onSendValueToParent(true); }; return ( diff --git a/src/components/Modules/KilnOptimize/components/paramsInput/index.module.css b/src/components/Modules/KilnOptimize/components/paramsInput/index.module.css index 0c54063..edea507 100644 --- a/src/components/Modules/KilnOptimize/components/paramsInput/index.module.css +++ b/src/components/Modules/KilnOptimize/components/paramsInput/index.module.css @@ -18,6 +18,9 @@ .bottom{ /* height: 100%; */ margin-top: 20px; + position: absolute; + z-index:100; + width: 92%; /* display: flex; */ /* justify-content: center; */ }