diff --git a/src/assets/blueBack.png b/src/assets/blueBack.png new file mode 100644 index 0000000..905083c Binary files /dev/null and b/src/assets/blueBack.png differ diff --git a/src/assets/forecastBack.png b/src/assets/forecastBack.png index 905083c..7c75798 100644 Binary files a/src/assets/forecastBack.png and b/src/assets/forecastBack.png differ diff --git a/src/components/Common/BottomItemBackgroundForecastBottom/index.module.css b/src/components/Common/BottomItemBackgroundForecastBottom/index.module.css index d1eb937..20408e8 100644 --- a/src/components/Common/BottomItemBackgroundForecastBottom/index.module.css +++ b/src/components/Common/BottomItemBackgroundForecastBottom/index.module.css @@ -1,5 +1,5 @@ .bottomBarItem { - background: url(../../../assets/leftBottomBack.png) no-repeat; + background: url(../../../assets/forecastBack.png) no-repeat; background-size: 100% 100%; width: 506px; } diff --git a/src/components/Common/ForecastTemperature/leftbox.module.scss b/src/components/Common/ForecastTemperature/leftbox.module.scss index 97790a6..f1d2892 100644 --- a/src/components/Common/ForecastTemperature/leftbox.module.scss +++ b/src/components/Common/ForecastTemperature/leftbox.module.scss @@ -20,6 +20,7 @@ .box__inner { padding-top: 12px; + margin-left: 20px; .box__label { color: #fffa; diff --git a/src/components/Modules/KilnOptimize/Center/index.module.css b/src/components/Modules/KilnOptimize/Center/index.module.css index a17cb0c..67b9142 100644 --- a/src/components/Modules/KilnOptimize/Center/index.module.css +++ b/src/components/Modules/KilnOptimize/Center/index.module.css @@ -2,7 +2,7 @@ transition: all 0.3s ease-out; cursor: pointer; user-select: none; - padding: 10px 40px; + padding: 10px 30px; font-size: 32px; line-height: 48px; letter-spacing: 6px; diff --git a/src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.jsx b/src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.jsx index 27d4763..0c9f4cd 100644 --- a/src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.jsx +++ b/src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.jsx @@ -1,7 +1,7 @@ /* * @Author: zhp * @Date: 2024-08-23 14:44:30 - * @LastEditTime: 2024-09-11 16:45:05 + * @LastEditTime: 2024-09-14 17:08:31 * @LastEditors: zhp * @Description: */ @@ -16,17 +16,33 @@ import { HomeContext } from '../../../../../pages/Home'; function KilnBottomForecast(props) { const value = useContext(HomeContext); const kilnInfo = useSelector((state) => state.cutting); + const originalData = kilnInfo.forecastWeeklyChart; +const data = []; +const xData = []; - console.log('forecastWeeklyChart', kilnInfo.forecastWeeklyChart); + let latestDataTime; + if (originalData.length !== 0) { + originalData.forEach((ele) => { + data.push(ele.sum); + }); + originalData.forEach((ele) => { + if (!latestDataTime || moment(ele.dataTime) > moment(latestDataTime)) { + latestDataTime = ele.dataTime; + } + }); - let data = []; - let xData = []; + originalData.forEach((ele) => { + xData.push(moment(ele.dataTime).format('MM-DD')); + }); + + const oneDayLater = moment(latestDataTime).add(1, 'days') + xData.push(oneDayLater.format('MM-DD')); + + const twoDaysLater = moment(latestDataTime).add(2, 'days'); + xData.push(twoDaysLater.format('MM-DD')); + console.log('data',data); + } - kilnInfo.forecastWeeklyChart.forEach((ele) => { - data.push(ele.sum); - xData.push(moment(ele.dataTime).format('MM-DD')); - }) - console.log('data',data); const dataSource= { color1: 'rgba(0, 255, 245, .4)', color:'rgba(255, 194, 20, .4)', diff --git a/src/components/Modules/KilnOptimize/components/KilnTopForecast/Points.jsx b/src/components/Modules/KilnOptimize/components/KilnTopForecast/Points.jsx index 5a1f1c4..f07eec2 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 09:21:16 + * @LastEditTime: 2024-09-14 14:10:23 * @LastEditors: zhp * @Description: */ @@ -43,10 +43,10 @@ function LeftTopForecast(props) { const value = useContext(HomeContext); const kilnOptimize = useSelector((state) => state.kilnOptimize); const dataSource = { - color1: 'rgba(0, 255, 245, .4)', - color:'rgba(255, 194, 20, .4)', + color1: 'rgba(0, 255, 245, .2)', + color:'rgba(255, 194, 20, .2)', yName:'℃', - // areaColor0:'rgba(18, 255, 245, 0.4)', + // areaColor0:'rgba(18, 255, 245, 0.2)', areaColor1:'rgba(255, 234, 153, 0)', msg: kilnOptimize.topTempAvgFor1h, modelFlag: value, diff --git a/src/components/Modules/KilnOptimize/components/KilnTopForecast/index.jsx b/src/components/Modules/KilnOptimize/components/KilnTopForecast/index.jsx index 20605c7..893c54d 100644 --- a/src/components/Modules/KilnOptimize/components/KilnTopForecast/index.jsx +++ b/src/components/Modules/KilnOptimize/components/KilnTopForecast/index.jsx @@ -1,7 +1,7 @@ /* * @Author: zhp * @Date: 2024-08-23 14:44:30 - * @LastEditTime: 2024-09-10 14:46:21 + * @LastEditTime: 2024-09-14 14:10:08 * @LastEditors: zhp * @Description: */ @@ -17,10 +17,10 @@ function LeftTopForecast(props) { const kilnOptimize = useSelector((state) => state.kilnOptimize); const dataSource = { - color1: 'rgba(0, 255, 245, .4)', - color:'rgba(255, 194, 20, .4)', + color1: 'rgba(0, 255, 245, .2)', + color:'rgba(255, 194, 20, .2)', yName:'℃', - // areaColor0:'rgba(18, 255, 245, 0.4)', + // areaColor0:'rgba(18, 255, 245, 0.2)', areaColor1:'rgba(255, 234, 153, 0)', msg: kilnOptimize.topTempAvgFor1h, modelFlag: value, diff --git a/src/components/Modules/KilnOptimize/components/KilnTopForecast/index.module.css b/src/components/Modules/KilnOptimize/components/KilnTopForecast/index.module.css index a3c43c0..f5acbfb 100644 --- a/src/components/Modules/KilnOptimize/components/KilnTopForecast/index.module.css +++ b/src/components/Modules/KilnOptimize/components/KilnTopForecast/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: -26px; transform: translateY(-50%) translateX(50%); } diff --git a/src/components/Modules/KilnOptimize/components/KilnTopForecast/point.module.css b/src/components/Modules/KilnOptimize/components/KilnTopForecast/point.module.css index 2506447..0ee3a12 100644 --- a/src/components/Modules/KilnOptimize/components/KilnTopForecast/point.module.css +++ b/src/components/Modules/KilnOptimize/components/KilnTopForecast/point.module.css @@ -3,7 +3,7 @@ } .legend { position: absolute; - right: 200px; + left: 200px; top: 30px; } .item{ diff --git a/src/components/Modules/KilnOptimize/components/dayButton/index.jsx b/src/components/Modules/KilnOptimize/components/dayButton/index.jsx index cf13573..0bc59c8 100644 --- a/src/components/Modules/KilnOptimize/components/dayButton/index.jsx +++ b/src/components/Modules/KilnOptimize/components/dayButton/index.jsx @@ -1,7 +1,7 @@ /* * @Author: zhp * @Date: 2024-08-22 09:09:25 - * @LastEditTime: 2024-08-22 14:39:13 + * @LastEditTime: 2024-09-14 14:38:47 * @LastEditors: zhp * @Description: */ @@ -22,6 +22,8 @@ function DayNightToggle() { style={{ display: "flex", justifyContent: "center", + position: 'relative', + zIndex: 999, }} >