From 196ad512affaadf2416d00e9351d00fe77566e40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=98937886381=E2=80=99?= <‘937886381@qq.com’> Date: Wed, 18 Sep 2024 10:55:34 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../container.module.scss | 2 +- .../KilnBottomForecast/index.module.css | 8 +++--- .../KilnMiddleForecast/index.module.css | 8 +++--- .../components/KilnTopForecast/Points.jsx | 26 ++++++++++++++++--- .../KilnTopForecast/index.module.css | 2 +- .../components/forecastRightChart/points.jsx | 11 ++------ .../forecastRightChart/pointsChart.js | 11 ++------ .../components/leftBottomForecast/index.jsx | 4 +-- .../leftBottomForecast/index.module.css | 9 +------ .../KilnOptimize/forecastRightSide/index.jsx | 4 +-- .../forecastRightSide/index.module.scss | 12 ++++++++- 11 files changed, 52 insertions(+), 45 deletions(-) diff --git a/src/components/Common/pointItemBackgroundForecast/container.module.scss b/src/components/Common/pointItemBackgroundForecast/container.module.scss index 289ade7..2e0f1ad 100644 --- a/src/components/Common/pointItemBackgroundForecast/container.module.scss +++ b/src/components/Common/pointItemBackgroundForecast/container.module.scss @@ -26,7 +26,7 @@ margin: 0; margin-left: 6px; font-size: 22px; - color: #fff; + color:#58E7E9; letter-spacing: 2px; font-weight: 500; } diff --git a/src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.module.css b/src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.module.css index a3c43c0..c0871d8 100644 --- a/src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.module.css +++ b/src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.module.css @@ -26,7 +26,7 @@ height: 1px; position: absolute; top: 50%; - left: -23.3px; + left: -21px; background-color: rgba(255, 194, 20, 1); transform: translateY(-50%); } @@ -39,7 +39,7 @@ border-radius: 100%; top: 50%; background-color: rgba(255, 194, 20, 1); - left: -1.1vw; + left: -24px; transform: translateY(-50%) translateX(50%); } .block{ @@ -62,7 +62,7 @@ height: 1px; position: absolute; top: 50%; - left: -24px; + left: -22.5px; transform: translateY(-50%); background-color: rgba(0, 255, 245, 1); } @@ -75,6 +75,6 @@ background-color: rgba(0, 255, 245, 1); border-radius: 100%; top: 50%; - left: -1.1vw; + left: -25.5px; transform: translateY(-50%) translateX(50%); } diff --git a/src/components/Modules/KilnOptimize/components/KilnMiddleForecast/index.module.css b/src/components/Modules/KilnOptimize/components/KilnMiddleForecast/index.module.css index a3c43c0..c0871d8 100644 --- a/src/components/Modules/KilnOptimize/components/KilnMiddleForecast/index.module.css +++ b/src/components/Modules/KilnOptimize/components/KilnMiddleForecast/index.module.css @@ -26,7 +26,7 @@ height: 1px; position: absolute; top: 50%; - left: -23.3px; + left: -21px; background-color: rgba(255, 194, 20, 1); transform: translateY(-50%); } @@ -39,7 +39,7 @@ border-radius: 100%; top: 50%; background-color: rgba(255, 194, 20, 1); - left: -1.1vw; + left: -24px; transform: translateY(-50%) translateX(50%); } .block{ @@ -62,7 +62,7 @@ height: 1px; position: absolute; top: 50%; - left: -24px; + left: -22.5px; transform: translateY(-50%); background-color: rgba(0, 255, 245, 1); } @@ -75,6 +75,6 @@ background-color: rgba(0, 255, 245, 1); border-radius: 100%; top: 50%; - left: -1.1vw; + left: -25.5px; transform: translateY(-50%) translateX(50%); } diff --git a/src/components/Modules/KilnOptimize/components/KilnTopForecast/Points.jsx b/src/components/Modules/KilnOptimize/components/KilnTopForecast/Points.jsx index f07eec2..c8d2b23 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-14 14:10:23 + * @LastEditTime: 2024-09-18 10:18:09 * @LastEditors: zhp * @Description: */ @@ -25,13 +25,26 @@ function generateRandomArray(data) { return randomArray; } +function getForecastList(data) { + console.log('ryfdata',data); + + let forecastList = [] + 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)) + } + return forecastList +} function LeftTopForecast(props) { console.log(props); const title = '点位:' + props.dataSource.title const isVisible = '点位:' + props.dataSource.isVisible const data = props.dataSource.value.match(/\d+\.?\d*/)[0] const [parentVisibilityState, setParentVisibilityState] = useState(false); - + const [randomValue, setRandomValue] = useState(generateRandomArray((data))) // 定义一个处理子组件可见性变化的回调函数 const handleVisibilityChange = (newVisibilityState) => { console.log(`Visibility changed to: ${newVisibilityState}`); @@ -39,8 +52,12 @@ function LeftTopForecast(props) { // 在这里还可以根据需要执行其他操作，比如更新UI、管理其他组件的状态等 props.updateVisibilityState(newVisibilityState); // 通知父组件更新isVisible状态 }; - + const dataList = randomValue + const [forecastList, setForecastList] = useState(getForecastList((dataList))) const value = useContext(HomeContext); + // let forecastList = []; + console.log('forecastList',forecastList); + const kilnOptimize = useSelector((state) => state.kilnOptimize); const dataSource = { color1: 'rgba(0, 255, 245, .2)', @@ -50,7 +67,8 @@ function LeftTopForecast(props) { areaColor1:'rgba(255, 234, 153, 0)', msg: kilnOptimize.topTempAvgFor1h, modelFlag: value, - data: data ? generateRandomArray(data) : [], + data: dataList ? dataList : [], + forecastList:forecastList ?forecastList:[], range: [-10, 10] } return ( diff --git a/src/components/Modules/KilnOptimize/components/KilnTopForecast/index.module.css b/src/components/Modules/KilnOptimize/components/KilnTopForecast/index.module.css index f5acbfb..c0871d8 100644 --- a/src/components/Modules/KilnOptimize/components/KilnTopForecast/index.module.css +++ b/src/components/Modules/KilnOptimize/components/KilnTopForecast/index.module.css @@ -75,6 +75,6 @@ background-color: rgba(0, 255, 245, 1); border-radius: 100%; top: 50%; - left: -26px; + left: -25.5px; transform: translateY(-50%) translateX(50%); } diff --git a/src/components/Modules/KilnOptimize/components/forecastRightChart/points.jsx b/src/components/Modules/KilnOptimize/components/forecastRightChart/points.jsx index 898d7cd..5682460 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-14 15:53:14 + * @LastEditTime: 2024-09-18 10:13:08 * @LastEditors: zhp * @Description: */ @@ -68,20 +68,13 @@ function CommonChart(props) { const { dataSource } = props; const data = dataSource.data || []; + let forecastList =dataSource.forecastList || []; // const modelFlag = dataSource.modelFlag || false; const color1 = dataSource.color1 || []; const color = dataSource.color || []; const yName = dataSource.yName; const times = getTimeArray(); // } - let forecastList = [] - 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('times',times) let areaStyle = { opacity: 0.8, diff --git a/src/components/Modules/KilnOptimize/components/forecastRightChart/pointsChart.js b/src/components/Modules/KilnOptimize/components/forecastRightChart/pointsChart.js index 820dd73..2963e47 100644 --- a/src/components/Modules/KilnOptimize/components/forecastRightChart/pointsChart.js +++ b/src/components/Modules/KilnOptimize/components/forecastRightChart/pointsChart.js @@ -1,14 +1,7 @@ /* * @Author: zhp * @Date: 2024-09-13 15:39:36 - * @LastEditTime: 2024-09-14 16:02:21 - * @LastEditors: zhp - * @Description: - */ -/* - * @Author: zhp - * @Date: 2024-08-28 09:25:58 - * @LastEditTime: 2024-09-13 14:22:01 + * @LastEditTime: 2024-09-18 10:35:44 * @LastEditors: zhp * @Description: */ @@ -62,7 +55,7 @@ export default function getOptions(data, times, range, yName,forecastList,color, }, splitLine: { lineStyle: { - color: "#F1F9FF", + color: "#58E7E9", }, }, min:range[0], diff --git a/src/components/Modules/KilnOptimize/components/leftBottomForecast/index.jsx b/src/components/Modules/KilnOptimize/components/leftBottomForecast/index.jsx index 8c1dbb4..e82feb4 100644 --- a/src/components/Modules/KilnOptimize/components/leftBottomForecast/index.jsx +++ b/src/components/Modules/KilnOptimize/components/leftBottomForecast/index.jsx @@ -1,7 +1,7 @@ /* * @Author: zhp * @Date: 2024-08-23 15:31:44 - * @LastEditTime: 2024-09-14 15:18:21 + * @LastEditTime: 2024-09-18 10:44:06 * @LastEditors: zhp * @Description: */ @@ -24,7 +24,7 @@ function LeftMiddleForecast() {
{infos.map((item) => (
- + {/* */} {item.label} { (item.value * 100).toFixed(2) + '%'} diff --git a/src/components/Modules/KilnOptimize/components/leftBottomForecast/index.module.css b/src/components/Modules/KilnOptimize/components/leftBottomForecast/index.module.css index 980179a..c562a7e 100644 --- a/src/components/Modules/KilnOptimize/components/leftBottomForecast/index.module.css +++ b/src/components/Modules/KilnOptimize/components/leftBottomForecast/index.module.css @@ -28,16 +28,9 @@ display: flex; align-items: center; gap: 14px; - .square{ - /* flex: 1; */ - margin-left: 20px; - width: 6px; - height: 6px; - background: #00FFF5; - box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5), 0px 0px 4px 1px #58E7E9; - } .label { /* flex:1; */ + margin-left: 40px; text-align: left; /* position: relative; */ } diff --git a/src/components/Modules/KilnOptimize/forecastRightSide/index.jsx b/src/components/Modules/KilnOptimize/forecastRightSide/index.jsx index 952267a..597b1fa 100644 --- a/src/components/Modules/KilnOptimize/forecastRightSide/index.jsx +++ b/src/components/Modules/KilnOptimize/forecastRightSide/index.jsx @@ -1,7 +1,7 @@ /* * @Author: zhp * @Date: 2024-08-23 13:56:11 - * @LastEditTime: 2024-09-18 08:52:18 + * @LastEditTime: 2024-09-18 10:54:39 * @LastEditors: zhp * @Description: */ @@ -37,7 +37,7 @@ export default function Index() {