diff --git a/src/App.js b/src/App.js index 91985bd..105f3eb 100644 --- a/src/App.js +++ b/src/App.js @@ -1,3 +1,10 @@ +/* + * @Author: zhp + * @Date: 2024-08-20 14:09:17 + * @LastEditTime: 2024-09-09 14:58:53 + * @LastEditors: zhp + * @Description: + */ import "./global.css"; import "./index.css"; import Head from "./components/Common/Company"; @@ -10,7 +17,7 @@ import RulerContainer from "./components/Tools/Ruler"; import { Switch } from "antd"; import { createPortal } from "react-dom"; -const Menus = ["窑炉总览", "窑炉内部", "窑炉优化","退火监测", "质检统计", "能耗分析"]; +const Menus = ["窑炉总览", "窑炉内部", "AI窑炉","退火监测", "质检统计", "能耗分析"]; const LUNBO_INTERVAL = 60 * 1000; function App() { const { styles, value, setValue } = useSlider(100); diff --git a/src/assets/CenterChart1icon1.svg b/src/assets/CenterChart1icon1.svg index f00cb92..4928408 100644 --- a/src/assets/CenterChart1icon1.svg +++ b/src/assets/CenterChart1icon1.svg @@ -16,7 +16,7 @@ - + @@ -26,4 +26,4 @@ - \ No newline at end of file + diff --git a/src/assets/CenterChart1icon2.svg b/src/assets/CenterChart1icon2.svg index 7758949..43b86a8 100644 --- a/src/assets/CenterChart1icon2.svg +++ b/src/assets/CenterChart1icon2.svg @@ -20,7 +20,7 @@ - + @@ -33,4 +33,4 @@ - \ No newline at end of file + diff --git a/src/assets/CenterChart1icon3.svg b/src/assets/CenterChart1icon3.svg index 4b305a5..47abec7 100644 --- a/src/assets/CenterChart1icon3.svg +++ b/src/assets/CenterChart1icon3.svg @@ -7,7 +7,7 @@ - + @@ -15,4 +15,4 @@ - \ No newline at end of file + diff --git a/src/assets/CenterChart1icon4.svg b/src/assets/CenterChart1icon4.svg index 244ad17..04b669b 100644 --- a/src/assets/CenterChart1icon4.svg +++ b/src/assets/CenterChart1icon4.svg @@ -20,7 +20,7 @@ - + @@ -33,4 +33,4 @@ - \ No newline at end of file + diff --git a/src/assets/Icon/close.png b/src/assets/Icon/close.png new file mode 100644 index 0000000..6f7b832 Binary files /dev/null and b/src/assets/Icon/close.png differ diff --git a/src/assets/lastBack.png b/src/assets/lastBack.png new file mode 100644 index 0000000..9851723 Binary files /dev/null and b/src/assets/lastBack.png differ diff --git a/src/assets/pointBack.png b/src/assets/pointBack.png new file mode 100644 index 0000000..172cac9 Binary files /dev/null and b/src/assets/pointBack.png differ diff --git a/src/assets/pointsBack.png b/src/assets/pointsBack.png new file mode 100644 index 0000000..172cac9 Binary files /dev/null and b/src/assets/pointsBack.png differ diff --git a/src/components/Common/Company/index.module.scss b/src/components/Common/Company/index.module.scss index e86e956..098a4ef 100644 --- a/src/components/Common/Company/index.module.scss +++ b/src/components/Common/Company/index.module.scss @@ -38,7 +38,7 @@ .TopSideLeftTxt { margin-right: 120px; margin-top: 15px; - color: rgb(255, 255, 255, 0.6); + color: rgb(255, 255, 255, 0.8); font-size: 20px; font-weight: 300px; letter-spacing: 1px; diff --git a/src/components/Common/ForecastTemperature/leftbox.module.scss b/src/components/Common/ForecastTemperature/leftbox.module.scss index e0bf5dd..97790a6 100644 --- a/src/components/Common/ForecastTemperature/leftbox.module.scss +++ b/src/components/Common/ForecastTemperature/leftbox.module.scss @@ -6,8 +6,8 @@ flex-wrap: wrap; .box { margin-right: 16px; - width: 300px; - height: 110px; + width: 272px; + height: 100px; padding: 12px 8px; background: url(../../../assets/CenterChart2ItemBg.png); background-repeat: no-repeat; @@ -25,11 +25,13 @@ color: #fffa; font-size: 18px; line-height: 1; + margin-left: 8px; } .box__value { color: #fff; font-weight: 400; + margin-left: 8px; font-size: 34px; line-height: 54px; } diff --git a/src/components/Common/NavMenu/index.jsx b/src/components/Common/NavMenu/index.jsx index 3b526fc..a916f6c 100644 --- a/src/components/Common/NavMenu/index.jsx +++ b/src/components/Common/NavMenu/index.jsx @@ -1,3 +1,10 @@ +/* + * @Author: zhp + * @Date: 2024-08-20 14:09:17 + * @LastEditTime: 2024-09-09 15:00:13 + * @LastEditors: zhp + * @Description: + */ import { useCallback, useEffect, useState } from "react"; import cls from "./index.module.scss"; @@ -5,7 +12,7 @@ export default function CenterMenu({ active, onChangeActive }) { const menuList = [ ["窑炉总览", "/kilnSummary"], ["窑炉内部", "/kilnInner"], - ["窑炉优化", "/kilnOptimize"], + ["AI窑炉", "/kilnOptimize"], ["退火监测", "/stopFire"], ["质检统计", "/quailtyCheck"], ["能耗分析", "/energyCost"], diff --git a/src/components/Common/forecastRect/index.jsx b/src/components/Common/forecastRect/index.jsx index 833f5a9..ad4e2f2 100644 --- a/src/components/Common/forecastRect/index.jsx +++ b/src/components/Common/forecastRect/index.jsx @@ -1,22 +1,63 @@ /* * @Author: zhp * @Date: 2024-08-29 09:46:11 - * @LastEditTime: 2024-08-30 14:01:37 + * @LastEditTime: 2024-09-13 14:35:10 * @LastEditors: zhp * @Description: */ import cls from "./index.module.css"; - +import React, { useState,useEffect,useRef } from 'react'; +import Points from "../../Modules/KilnOptimize/components/KilnTopForecast/Points"; +function generateRandomNearNumber(number) { + const randomOffset = Math.floor(Math.random() * 11) - 5; + return number + randomOffset; +} function BlueRect(props) { const title = props.title || "DEFAULT"; + const value = props.value || "0℃"; + 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); + // const pointsRef = useRef(null); + const handleToggleVisibility = () => { + setIsVisible(!isVisible); + if (isVisible) { + console.log(props) + // 当隐藏时，可以清理一些数据 + setChartData(null); + } else { + console.log('props',props) + // 当显示时，可以模拟获取数据并传递给子组件 + setChartData({ + title, + isVisible, + value + }); + } + } + // 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 ( -
+
{value} - + {props.blue || ( + + {generateRandomNearNumber(parseInt(value)) + '℃'} + + )} +
+ {isVisible && !props.blue && }
); } diff --git a/src/components/Common/forecastRect/index.module.css b/src/components/Common/forecastRect/index.module.css index 6fd7d4e..4a815d7 100644 --- a/src/components/Common/forecastRect/index.module.css +++ b/src/components/Common/forecastRect/index.module.css @@ -543,3 +543,14 @@ left: 2260px; transform: scale(0.8) skewX(7deg); } +.forecastValue{ + width: 100%; + height: 29px; + text-align: center; + margin-top: 4px; + background: linear-gradient( 270deg, rgba(0,255,251,0.67) 0%, rgba(0,255,245,0.64) 100%); + box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5); + opacity: 0.7; + cursor: pointer; + backdrop-filter: blur(3px); +} diff --git a/src/components/Common/forecastRect/visContext.jsx b/src/components/Common/forecastRect/visContext.jsx new file mode 100644 index 0000000..a6583aa --- /dev/null +++ b/src/components/Common/forecastRect/visContext.jsx @@ -0,0 +1,12 @@ +/* + * @Author: zhp + * @Date: 2024-09-12 16:43:21 + * @LastEditTime: 2024-09-12 16:43:21 + * @LastEditors: zhp + * @Description: + */ +import React from 'react'; + +const VisibilityContext = React.createContext(); + +export default VisibilityContext; diff --git a/src/components/Common/pointItemBackgroundForecast/Container.jsx b/src/components/Common/pointItemBackgroundForecast/Container.jsx new file mode 100644 index 0000000..fdbabc0 --- /dev/null +++ b/src/components/Common/pointItemBackgroundForecast/Container.jsx @@ -0,0 +1,64 @@ +/* + * @Author: zhp + * @Date: 2024-09-12 16:11:31 + * @LastEditTime: 2024-09-13 13:39:40 + * @LastEditors: zhp + * @Description: + */ +import { useEffect } from "react"; +import useIcon from "../../../hooks/useIcon"; +import cls from "./container.module.scss"; +import React, { useState } from 'react'; +const Container = (props) => { + let icon = useIcon(props.icon); + // console.log(props); + // const [visible, setVisible] = useState(props.isVisible); + const desc = props.desc; + const [localVisible, setLocalVisible] = useState(props.isVisible); + + // 确保局部状态与传入的isVisible同步 + useEffect(() => { + setLocalVisible(props.isVisible); + }, [props.isVisible]); + + const handleChangeIsVisible = () => { + const newVisibility = !localVisible; + setLocalVisible(newVisibility); + props.onVisibilityChange(newVisibility); + }; + return ( +
+
+

{props.title}

+ {desc &&
{desc}
} + # +
+
{props.children}
+ {props.pending && ( +
+ )} +
+ ); +}; + +export default Container; diff --git a/src/components/Common/pointItemBackgroundForecast/container.module.scss b/src/components/Common/pointItemBackgroundForecast/container.module.scss new file mode 100644 index 0000000..289ade7 --- /dev/null +++ b/src/components/Common/pointItemBackgroundForecast/container.module.scss @@ -0,0 +1,59 @@ +.container { + padding: 24px; + display: flex; + flex-direction: column; + background-size: 100% 100%; + background-repeat: no-repeat; + position: relative; + + .container__head { + display: flex; + align-items: center; + justify-content: space-between; + + img { + width: 32px; + &.bigger { + width: 28px; + } + } + + h2 { + font-family: "微软雅黑", "Microsoft YaHei UI", -apple-system, + BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", + "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", + sans-serif; + margin: 0; + margin-left: 6px; + font-size: 22px; + color: #fff; + letter-spacing: 2px; + font-weight: 500; + } + + .graphBaseDesc { + margin: 0 6px; + margin-left: 108px; + font-size: 16px; + line-height: 1; + color: #76fff9; + flex: 1; + } + } + + .container__content { + height: 1px; + flex: 1; + // background: #25a78672; + } +} + +// .bgGood { +// background: url("../assets/good.png"); +// } +// .bgEnergy { +// background: url("../assets/energy.png"); +// } +// .bgSmoke { +// background: url("../assets/smoke.png"); +// } diff --git a/src/components/Common/pointItemBackgroundForecast/index.jsx b/src/components/Common/pointItemBackgroundForecast/index.jsx new file mode 100644 index 0000000..3834866 --- /dev/null +++ b/src/components/Common/pointItemBackgroundForecast/index.jsx @@ -0,0 +1,41 @@ +/* + * @Author: zhp + * @Date: 2024-09-12 15:36:30 + * @LastEditTime: 2024-09-13 13:51:31 + * @LastEditors: zhp + * @Description: + */ +import cls from './index.module.css'; +import Container from './Container'; +import React, { useState } from 'react'; +function BottomBarItem(props) { + const [isVisible, setIsVisible] = useState(false); + + // 确保父组件传递了 onVisibilityChange 回调 + if (typeof props.onVisibilityChange !== 'function') { + throw new Error('onVisibilityChange must be a function'); + } + + // 更新内部状态并通知父组件 + const handleVisibilityChange = (newVisibilityState) => { + console.log(newVisibilityState); + + setIsVisible(newVisibilityState); + props.onVisibilityChange(newVisibilityState); // 通知父组件可见性变化 + }; + return ( + + {props.children} + + ); +} + +export default BottomBarItem; diff --git a/src/components/Common/pointItemBackgroundForecast/index.module.css b/src/components/Common/pointItemBackgroundForecast/index.module.css new file mode 100644 index 0000000..49cc192 --- /dev/null +++ b/src/components/Common/pointItemBackgroundForecast/index.module.css @@ -0,0 +1,6 @@ +.bottomBarItem { + background: url(../../../assets/pointsBack.png) no-repeat; + background-size: 100% 100%; + width: 551px; + height: 335px; +} diff --git a/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx b/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx index d607be8..d9e6f63 100644 --- a/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx +++ b/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx @@ -1,3 +1,10 @@ +/* + * @Author: zhp + * @Date: 2024-08-20 14:09:17 + * @LastEditTime: 2024-09-12 15:44:34 + * @LastEditors: zhp + * @Description: + */ import { motion, AnimatePresence } from "framer-motion"; import { useRef, useEffect, useMemo, useState } from "react"; import FeederStatus from "../../../../Common/Feeder"; @@ -39,7 +46,7 @@ function FloorTwoToOne(props) { left: "0px", width: "calc(100% - 50px)", height: "calc(100% - 7px)", - zIndex: -998, + zIndex: 998, overflow: "clip", }} initial={{ opacity: 0 }} diff --git a/src/components/Modules/KilnOptimize/Center/index.jsx b/src/components/Modules/KilnOptimize/Center/index.jsx index 03db804..a36371f 100644 --- a/src/components/Modules/KilnOptimize/Center/index.jsx +++ b/src/components/Modules/KilnOptimize/Center/index.jsx @@ -94,7 +94,7 @@ function KilnCenter({ onFloorChange }) { } onClick={() => onFloorUpdate(4)} > - 窑炉预测 + AI预测 diff --git a/src/components/Modules/KilnOptimize/Center/index.module.css b/src/components/Modules/KilnOptimize/Center/index.module.css index 9bbe8e2..a17cb0c 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 50px; + padding: 10px 40px; font-size: 32px; line-height: 48px; letter-spacing: 6px; diff --git a/src/components/Modules/KilnOptimize/Center/videoComponents/FloorToFour.jsx b/src/components/Modules/KilnOptimize/Center/videoComponents/FloorToFour.jsx index 2b1e656..fa4b150 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-08-29 09:46:32 + * @LastEditTime: 2024-09-12 15:28:17 * @LastEditors: zhp * @Description: */ @@ -47,7 +47,7 @@ function FloorTwoToOne(props) { left: "0px", width: "calc(100% - 500px)", height: "calc(100% - 7px)", - zIndex: -998, + zIndex: 998, overflow: "clip", }} initial={{ opacity: 0 }} @@ -112,7 +112,7 @@ function FloorTwoToOne(props) { top: "200px", left: "652px", width: "2380px", - zIndex: 10, + zIndex: 9999, }} /> diff --git a/src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.jsx b/src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.jsx index 17b3c58..27d4763 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-08-30 17:28:20 + * @LastEditTime: 2024-09-11 16:45:05 * @LastEditors: zhp * @Description: */ @@ -28,11 +28,11 @@ function KilnBottomForecast(props) { }) console.log('data',data); const dataSource= { - color1: '#146CFF', - color:'rgba(255, 194, 20, 1)', - yName:'℃', + color1: 'rgba(0, 255, 245, .4)', + color:'rgba(255, 194, 20, .4)', + yName:'%', // areaColor0:'rgba(18, 255, 245, 0.4)', - areaColor1:'rgba(18, 255, 245, 0)', + areaColor1:'rgba(255, 234, 153, 0)', // msg: kilnOptimize.topTempAvgFor1h, xData, data: data? data : [], diff --git a/src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.module.css b/src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.module.css index 2b75a3f..a3c43c0 100644 --- a/src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.module.css +++ b/src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.module.css @@ -8,18 +8,25 @@ } .item{ display: inline-block; - margin-right:45px; - font-size: 11px; + margin-right: 45px; + font-size: 14px; position: relative; color: #DFF1FE; } +/* .block { + width: 8px; + height: 8px; + border-radius: 2px; + display: inline-block; + margin-right: 4px; +} */ .item:before { content: ""; - width: 1vw; - height: 0.1064vw; + width:14px; + height: 1px; position: absolute; top: 50%; - left: -1.2vw; + left: -23.3px; background-color: rgba(255, 194, 20, 1); transform: translateY(-50%); } @@ -27,8 +34,8 @@ content: ""; display: inline-block; position: absolute; - width: 0.4vw; - height: 0.4vw; + width: 10px; + height: 10px; border-radius: 100%; top: 50%; background-color: rgba(255, 194, 20, 1); @@ -38,7 +45,7 @@ .block{ display: inline-block; margin-right: 10px; - font-size: 11px; + font-size: 14px; position: relative; color: #DFF1FE; } @@ -51,21 +58,21 @@ } */ .block:before { content: ""; - width: 1vw; - height: 0.1064vw; + width:14px; + height: 1px; position: absolute; top: 50%; - left: -1.2vw; + left: -24px; transform: translateY(-50%); - background-color: #146CFF + background-color: rgba(0, 255, 245, 1); } .block:after { content: ""; display: inline-block; position: absolute; - width: 0.4vw; - height: 0.4vw; - background-color: #146CFF; + width: 10px; + height: 10px; + background-color: rgba(0, 255, 245, 1); border-radius: 100%; top: 50%; left: -1.1vw; diff --git a/src/components/Modules/KilnOptimize/components/KilnMiddleForecast/index.jsx b/src/components/Modules/KilnOptimize/components/KilnMiddleForecast/index.jsx index bb40ebd..6356e97 100644 --- a/src/components/Modules/KilnOptimize/components/KilnMiddleForecast/index.jsx +++ b/src/components/Modules/KilnOptimize/components/KilnMiddleForecast/index.jsx @@ -1,7 +1,7 @@ /* * @Author: zhp * @Date: 2024-08-23 14:44:30 - * @LastEditTime: 2024-08-30 17:31:40 + * @LastEditTime: 2024-09-11 16:44:55 * @LastEditors: zhp * @Description: */ @@ -16,11 +16,11 @@ function KilnMiddleForecast(props) { const value = useContext(HomeContext); const kilnOptimize = useSelector((state) => state.kilnOptimize); const dataSource = { - color1: 'rgba(0, 255, 245, 1)', - color:'rgba(255, 194, 20, 1)', + color1: 'rgba(0, 255, 245, .4)', + color:'rgba(255, 194, 20, .4)', yName:'℃', // areaColor0:'rgba(18, 255, 245, 0.4)', - areaColor1:'rgba(18, 255, 245, 0)', + areaColor1:'rgba(255, 234, 153, 0)', msg: kilnOptimize.topTempAvgFor1h, modelFlag: value, data: kilnOptimize.topTempAvgFor1h? kilnOptimize.topTempAvgFor1h.topTempAvgFor1h : [], diff --git a/src/components/Modules/KilnOptimize/components/KilnMiddleForecast/index.module.css b/src/components/Modules/KilnOptimize/components/KilnMiddleForecast/index.module.css index 6f036d8..a3c43c0 100644 --- a/src/components/Modules/KilnOptimize/components/KilnMiddleForecast/index.module.css +++ b/src/components/Modules/KilnOptimize/components/KilnMiddleForecast/index.module.css @@ -9,17 +9,24 @@ .item{ display: inline-block; margin-right: 45px; - font-size: 11px; + font-size: 14px; position: relative; color: #DFF1FE; } +/* .block { + width: 8px; + height: 8px; + border-radius: 2px; + display: inline-block; + margin-right: 4px; +} */ .item:before { content: ""; - width: 1vw; - height: 0.1064vw; + width:14px; + height: 1px; position: absolute; top: 50%; - left: -1.2vw; + left: -23.3px; background-color: rgba(255, 194, 20, 1); transform: translateY(-50%); } @@ -27,8 +34,8 @@ content: ""; display: inline-block; position: absolute; - width: 0.4vw; - height: 0.4vw; + width: 10px; + height: 10px; border-radius: 100%; top: 50%; background-color: rgba(255, 194, 20, 1); @@ -38,7 +45,7 @@ .block{ display: inline-block; margin-right: 10px; - font-size: 11px; + font-size: 14px; position: relative; color: #DFF1FE; } @@ -51,11 +58,11 @@ } */ .block:before { content: ""; - width: 1vw; - height: 0.1064vw; + width:14px; + height: 1px; position: absolute; top: 50%; - left: -1.2vw; + left: -24px; transform: translateY(-50%); background-color: rgba(0, 255, 245, 1); } @@ -63,8 +70,8 @@ content: ""; display: inline-block; position: absolute; - width: 0.4vw; - height: 0.4vw; + width: 10px; + height: 10px; background-color: rgba(0, 255, 245, 1); border-radius: 100%; top: 50%; diff --git a/src/components/Modules/KilnOptimize/components/KilnTopForecast/Points.jsx b/src/components/Modules/KilnOptimize/components/KilnTopForecast/Points.jsx new file mode 100644 index 0000000..6d2c5e6 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/KilnTopForecast/Points.jsx @@ -0,0 +1,79 @@ +/* + * @Author: zhp + * @Date: 2024-09-12 13:44:55 + * @LastEditTime: 2024-09-13 14:53:34 + * @LastEditors: zhp + * @Description: + */ +// 窑炉压力 +import cls from "./point.module.css"; +import BottomBarItem from "../../../../Common/pointItemBackgroundForecast"; +import CommonChart from "../forecastRightChart/points" +import { useSelector } from "react-redux"; +import React, { useContext,useEffect,useState} from 'react' +import { HomeContext } from '../../../../../pages/Home'; +function generateRandomArray(data) { + const randomArray = []; + for (let i = 0; i < 24; i++) { + let randomNumber; + do { + randomNumber = ((Math.random() * (data - 1)).toFixed(1)); + } while (Math.abs(randomNumber - data) > 5); + randomArray.push(randomNumber); + } + console.log('randomArray',randomArray); + + return randomArray; +} +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 handleVisibilityChange = (newVisibilityState) => { + console.log(`Visibility changed to: ${newVisibilityState}`); + setParentVisibilityState(newVisibilityState); // 更新父组件的状态 + // 在这里还可以根据需要执行其他操作，比如更新UI、管理其他组件的状态等 + props.updateVisibilityState(newVisibilityState); // 通知父组件更新isVisible状态 + }; + + const value = useContext(HomeContext); + const kilnOptimize = useSelector((state) => state.kilnOptimize); + const dataSource = { + color1: 'rgba(0, 255, 245, .4)', + color:'rgba(255, 194, 20, .4)', + yName:'℃', + // areaColor0:'rgba(18, 255, 245, 0.4)', + areaColor1:'rgba(255, 234, 153, 0)', + msg: kilnOptimize.topTempAvgFor1h, + modelFlag: value, + data: data ? generateRandomArray(data) : [], + range: [-10, 10] + } + return ( + + {/* legend */} +
+ + 实际值 + + + 预测值 + +
+
+ +
+ + ) +} +export default LeftTopForecast; diff --git a/src/components/Modules/KilnOptimize/components/KilnTopForecast/index.jsx b/src/components/Modules/KilnOptimize/components/KilnTopForecast/index.jsx index 2bd48e2..20605c7 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-02 08:29:07 + * @LastEditTime: 2024-09-10 14:46:21 * @LastEditors: zhp * @Description: */ @@ -17,11 +17,11 @@ function LeftTopForecast(props) { const kilnOptimize = useSelector((state) => state.kilnOptimize); const dataSource = { - color1: 'rgba(0, 187, 255, 1)', - color:'rgba(255, 194, 20, 1)', + color1: 'rgba(0, 255, 245, .4)', + color:'rgba(255, 194, 20, .4)', yName:'℃', // areaColor0:'rgba(18, 255, 245, 0.4)', - areaColor1:'rgba(18, 255, 245, 0)', + areaColor1:'rgba(255, 234, 153, 0)', msg: kilnOptimize.topTempAvgFor1h, modelFlag: value, data: kilnOptimize.topTempAvgFor1h? kilnOptimize.topTempAvgFor1h.topTempAvgFor1h : [], diff --git a/src/components/Modules/KilnOptimize/components/KilnTopForecast/index.module.css b/src/components/Modules/KilnOptimize/components/KilnTopForecast/index.module.css index 416cda1..a3c43c0 100644 --- a/src/components/Modules/KilnOptimize/components/KilnTopForecast/index.module.css +++ b/src/components/Modules/KilnOptimize/components/KilnTopForecast/index.module.css @@ -9,7 +9,7 @@ .item{ display: inline-block; margin-right: 45px; - font-size: 11px; + font-size: 14px; position: relative; color: #DFF1FE; } @@ -22,11 +22,11 @@ } */ .item:before { content: ""; - width: 1vw; - height: 0.1064vw; + width:14px; + height: 1px; position: absolute; top: 50%; - left: -1.2vw; + left: -23.3px; background-color: rgba(255, 194, 20, 1); transform: translateY(-50%); } @@ -34,8 +34,8 @@ content: ""; display: inline-block; position: absolute; - width: 0.4vw; - height: 0.4vw; + width: 10px; + height: 10px; border-radius: 100%; top: 50%; background-color: rgba(255, 194, 20, 1); @@ -45,7 +45,7 @@ .block{ display: inline-block; margin-right: 10px; - font-size: 11px; + font-size: 14px; position: relative; color: #DFF1FE; } @@ -58,21 +58,21 @@ } */ .block:before { content: ""; - width: 1vw; - height: 0.1064vw; + width:14px; + height: 1px; position: absolute; top: 50%; - left: -1.2vw; + left: -24px; transform: translateY(-50%); - background-color: rgba(0, 187, 255, 1); + background-color: rgba(0, 255, 245, 1); } .block:after { content: ""; display: inline-block; position: absolute; - width: 0.4vw; - height: 0.4vw; - background-color: rgba(0, 187, 255, 1); + width: 10px; + height: 10px; + background-color: rgba(0, 255, 245, 1); border-radius: 100%; top: 50%; left: -1.1vw; diff --git a/src/components/Modules/KilnOptimize/components/KilnTopForecast/point.module.css b/src/components/Modules/KilnOptimize/components/KilnTopForecast/point.module.css new file mode 100644 index 0000000..a1e74d6 --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/KilnTopForecast/point.module.css @@ -0,0 +1,80 @@ +.chart { + height: 100%; +} +.legend { + position: absolute; + right: 200px; + top: 30px; +} +.item{ + display: inline-block; + margin-right: 45px; + font-size: 14px; + position: relative; + color: #DFF1FE; +} +/* .block { + width: 8px; + height: 8px; + border-radius: 2px; + display: inline-block; + margin-right: 4px; +} */ + .item:before { + content: ""; + width:14px; + height: 1px; + position: absolute; + top: 50%; + left: -23.3px; + background-color: rgba(255, 194, 20, 1); + transform: translateY(-50%); + } +.item:after { + content: ""; + display: inline-block; + position: absolute; + width: 10px; + height: 10px; + border-radius: 100%; + top: 50%; + background-color: rgba(255, 194, 20, 1); + left: -1.1vw; + transform: translateY(-50%) translateX(50%); +} +.block{ + display: inline-block; + margin-right: 10px; + font-size: 14px; + position: relative; + color: #DFF1FE; +} +/* .block { + width: 8px; + height: 8px; + border-radius: 2px; + display: inline-block; + margin-right: 4px; +} */ + .block:before { + content: ""; + width:14px; + height: 1px; + position: absolute; + top: 50%; + left: -24px; + transform: translateY(-50%); + background-color: rgba(0, 255, 245, 1); + } +.block:after { + content: ""; + display: inline-block; + position: absolute; + width: 10px; + height: 10px; + background-color: rgba(0, 255, 245, 1); + border-radius: 100%; + top: 50%; + left: -1.1vw; + transform: translateY(-50%) translateX(50%); +} diff --git a/src/components/Modules/KilnOptimize/components/dayButton/index.module.css b/src/components/Modules/KilnOptimize/components/dayButton/index.module.css index 8f71f67..cd16d39 100644 --- a/src/components/Modules/KilnOptimize/components/dayButton/index.module.css +++ b/src/components/Modules/KilnOptimize/components/dayButton/index.module.css @@ -18,6 +18,8 @@ .menuItem.active, .menuItem:hover { background: url(../../../../../assets/dayNightChange.png) no-repeat; + font-size: 28px; + color: rgba(255, 255, 255, 1); background-size: 100% 100%; } diff --git a/src/components/Modules/KilnOptimize/components/forecastRightChart/chart.config.js b/src/components/Modules/KilnOptimize/components/forecastRightChart/chart.config.js index 57b9cfe..fe39b6a 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-08-28 10:22:34 + * @LastEditTime: 2024-09-13 14:22:01 * @LastEditors: zhp * @Description: */ @@ -14,7 +14,7 @@ export default function getOptions(data, times, range, yName,forecastList,color, type: "category", data:times, axisLabel: { - color: "#fff", + color: "rgba(223, 241, 254, 1)", fontSize: 12, }, axisTick: { show: false }, @@ -28,13 +28,13 @@ export default function getOptions(data, times, range, yName,forecastList,color, yAxis: { name: "单位: "+yName, nameTextStyle: { - color: "#fff", - fontSize: 10, + color: "rgba(223, 241, 254, 1)", + fontSize: 12, align: "right", }, type: "value", axisLabel: { - color: "#fff", + color: "rgba(223, 241, 254, 1)", fontSize: 12, formatter: "{value}", }, @@ -68,8 +68,16 @@ export default function getOptions(data, times, range, yName,forecastList,color, symbol: 'circle', symbolSize: 6, // prettier-ignore - lineStyle:{ - color:color + // lineStyle:{ + // color:color + // }, + itemStyle: { + normal: { + color: 'rgba(255, 194, 20, 1)', //改变折线点的颜色 + lineStyle: { + color: 'rgba(255, 194, 20, 1)' //改变折线颜色 + } + } }, data: data, // markLine: { @@ -97,8 +105,16 @@ export default function getOptions(data, times, range, yName,forecastList,color, }, symbol: 'circle', symbolSize: 6, - lineStyle:{ - color:color1 + // lineStyle:{ + // color:color1 + // }, + itemStyle: { + normal: { + color: 'rgba(0, 255, 245, 1))', //改变折线点的颜色 + lineStyle: { + color: 'rgba(0, 255, 245, 1)' //改变折线颜色 + } + } }, areaStyle:areaStyle1, // prettier-ignore diff --git a/src/components/Modules/KilnOptimize/components/forecastRightChart/index.jsx b/src/components/Modules/KilnOptimize/components/forecastRightChart/index.jsx index a70709c..d4d5e8a 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-08-30 16:57:38 + * @LastEditTime: 2024-09-13 14:30:06 * @LastEditors: zhp * @Description: */ @@ -39,7 +39,8 @@ function CommonChart(props) { const timeString = `${currentTime.getHours()}:${currentTime.getMinutes().toString().padStart(2, '0')}`; times.unshift(timeString); } - let areaStyle= { + let areaStyle = { + opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, @@ -53,13 +54,14 @@ function CommonChart(props) { origin: "start", } let areaStyle1 = { + opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color:color1, }, { - offset: 1, + offset: .3, color: dataSource.areaColor1, }, ]), diff --git a/src/components/Modules/KilnOptimize/components/forecastRightChart/points.jsx b/src/components/Modules/KilnOptimize/components/forecastRightChart/points.jsx new file mode 100644 index 0000000..60e0bea --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/forecastRightChart/points.jsx @@ -0,0 +1,137 @@ +/* + * @Author: zhp + * @Date: 2024-09-13 14:47:50 + * @LastEditTime: 2024-09-13 15:44:40 + * @LastEditors: zhp + * @Description: + */ +import cls from "./index.module.css"; +import ReactECharts from "echarts-for-react"; +import getOptions from "./pointsChart.config"; +import * as echarts from "echarts"; +import { useState } from "react"; +function getTimeArray() { + const now = new Date(); + const todaySeven = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 7, 0, 0); + const tomorrowSeven = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 7, 0, 0); + + const timeArray = []; + let currentTime = todaySeven; + while (currentTime < tomorrowSeven) { + const hours = currentTime.getHours(); + const minutes = currentTime.getMinutes(); + if (minutes === 0) { + timeArray.push(`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`); + } + currentTime = new Date(currentTime.getTime() + 60 * 60000); // 增加 1 小时 + } + + return timeArray; +} +function CommonChart(props) { + const { dataSource } = props; + + const data = dataSource.data || []; + // 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)); + } + let areaStyle = { + opacity: 0.8, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: color, + }, + { + offset: 1, + color: dataSource.areaColor1, + }, + ]), + origin: "start", + } + let areaStyle1 = { + opacity: 0.8, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color:color1, + }, + { + offset: .3, + color: dataSource.areaColor1, + }, + ]), + origin: "start", + } + // let pieces = [ + // { + // lte: dataSource.msg ? dataSource.msg.lte : 0, + // color: "#FFCB59", + // }, + // { + // gt: dataSource.msg ? dataSource.msg.lte : 0, + // lte: dataSource.msg ? dataSource.msg.gt : 0, + // color: dataSource.color, + // }, + // { + // gt: dataSource.msg ? dataSource.msg.gt : 0, + // color: "#FFCB59", + // }, + // ]; + + const [yRange] = useState([]); + // useEffect(() => { + // if (data.length > 0) { + // var standardValue = dataSource.msg.sp; + // var maxY = (standardValue * 100 + dataSource.range[1] * 100) / 100; + // var minY = (standardValue * 100 + dataSource.range[0] * 100) / 100; + // // 计算最大最小值是否超标 + // const maxValue = Math.max(...data); + // const minValue = Math.min(...data); + // if (maxValue > maxY) { + // maxY = Math.ceil(maxValue); + // } + // if (minValue < minY) { + // minY = Math.floor(minValue); + // } + // setYRange([minY, maxY]); + // } + // }, [dataSource, data]); + + return ( +
+ {data.length > 0 && ( + + )} + {data.length <= 0 && ( +

+ 暂无数据 +

+ )} +
+ ); +} + +export default CommonChart; diff --git a/src/components/Modules/KilnOptimize/components/forecastRightChart/pointsChart.config.js b/src/components/Modules/KilnOptimize/components/forecastRightChart/pointsChart.config.js new file mode 100644 index 0000000..b8dbe1a --- /dev/null +++ b/src/components/Modules/KilnOptimize/components/forecastRightChart/pointsChart.config.js @@ -0,0 +1,154 @@ +/* + * @Author: zhp + * @Date: 2024-09-13 15:39:36 + * @LastEditTime: 2024-09-13 15:45:40 + * @LastEditors: zhp + * @Description: + */ +/* + * @Author: zhp + * @Date: 2024-08-28 09:25:58 + * @LastEditTime: 2024-09-13 14:22:01 + * @LastEditors: zhp + * @Description: + */ +// import * as echarts from "echarts"; + +export default function getOptions(data, times, range, yName,forecastList,color,color1,areaStyle,areaStyle1) { + return { + grid: { top: 38, right: 44, bottom: 40, left: 48 }, + xAxis: { + type: "category", + data:times, + axisLabel: { + color: "rgba(223, 241, 254, 1)", + fontSize: 12, + rotate:45 + }, + axisTick: { show: false }, + axisLine: { + lineStyle: { + width: 1, + color: "#213259", + }, + }, + }, + yAxis: { + name: "单位: "+yName, + nameTextStyle: { + color: "rgba(223, 241, 254, 1)", + fontSize: 12, + align: "right", + }, + type: "value", + axisLabel: { + color: "rgba(223, 241, 254, 1)", + fontSize: 12, + formatter: "{value}", + }, + axisLine: { + show: true, + lineStyle: { + color: "#213259", + }, + }, + splitLine: { + lineStyle: { + color: "#213259a0", + }, + }, + min:range[0], + max:range[1] + }, + // visualMap: { + // show: false, + // dimension: 1, + // pieces: pieces + // }, + series: [ + { + type: 'line', + label: { + show: true, + position: 'top', + color:'inherit' + }, + symbol: 'circle', + symbolSize: 6, + // prettier-ignore + // lineStyle:{ + // color:color + // }, + itemStyle: { + normal: { + color: 'rgba(255, 194, 20, 1)', //改变折线点的颜色 + lineStyle: { + color: 'rgba(255, 194, 20, 1)' //改变折线颜色 + } + } + }, + data: data, + // markLine: { + // symbol: 'none', + // label:{ + // show:true, + // position:'end', + // formatter:'标准线', + // color:'#FFCB59', + // fontSize: 12, + // }, + // lineStyle:{ + // color:'#FFCB59' + // }, + // data: seriesData.markLineData + // }, + areaStyle:areaStyle + }, + { + type: 'line', + label: { + show: true, + position: 'top', + color:'inherit' + }, + symbol: 'circle', + symbolSize: 6, + // lineStyle:{ + // color:color1 + // }, + itemStyle: { + normal: { + color: 'rgba(0, 255, 245, 1))', //改变折线点的颜色 + lineStyle: { + color: 'rgba(0, 255, 245, 1)' //改变折线颜色 + } + } + }, + areaStyle:areaStyle1, + // prettier-ignore + data: forecastList, + // markLine: { + // symbol: 'none', + // label:{ + // show:true, + // position:'end', + // formatter:'标准线', + // color:'#FFCB59', + // fontSize: 12, + // }, + + // data: seriesData.markLineData + // }, + // areaStyle: seriesData.areaStyle + } + ], + tooltip: { + trigger: "axis", + axisPointer: { + type: 'cross' + }, + className: "xc-chart-tooltip", + // backgroundColor: '' + }, + }; +} diff --git a/src/components/Modules/KilnOptimize/components/forecastRightChart/yield.jsx b/src/components/Modules/KilnOptimize/components/forecastRightChart/yield.jsx index 6afa3fa..b436798 100644 --- a/src/components/Modules/KilnOptimize/components/forecastRightChart/yield.jsx +++ b/src/components/Modules/KilnOptimize/components/forecastRightChart/yield.jsx @@ -1,3 +1,10 @@ +/* + * @Author: zhp + * @Date: 2024-09-02 09:56:13 + * @LastEditTime: 2024-09-13 15:36:42 + * @LastEditors: zhp + * @Description: + */ import cls from "./index.module.css"; import ReactECharts from "echarts-for-react"; @@ -22,9 +29,11 @@ function CommonChart(props) { let max = item + .5; let randomValue = Math.random() * (max - min) + min; forecastList.push(randomValue.toFixed(1)); - } + } + console.log(forecastList) } - let areaStyle= { + let areaStyle = { + opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, @@ -38,6 +47,7 @@ function CommonChart(props) { origin: "start", } let areaStyle1 = { + opacity: 0.8, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, @@ -50,41 +60,7 @@ function CommonChart(props) { ]), origin: "start", } - // let pieces = [ - // { - // lte: dataSource.msg ? dataSource.msg.lte : 0, - // color: "#FFCB59", - // }, - // { - // gt: dataSource.msg ? dataSource.msg.lte : 0, - // lte: dataSource.msg ? dataSource.msg.gt : 0, - // color: dataSource.color, - // }, - // { - // gt: dataSource.msg ? dataSource.msg.gt : 0, - // color: "#FFCB59", - // }, - // ]; - const [yRange] = useState([]); - // useEffect(() => { - // if (data.length > 0) { - // var standardValue = dataSource.msg.sp; - // var maxY = (standardValue * 100 + dataSource.range[1] * 100) / 100; - // var minY = (standardValue * 100 + dataSource.range[0] * 100) / 100; - // // 计算最大最小值是否超标 - // const maxValue = Math.max(...data); - // const minValue = Math.min(...data); - // if (maxValue > maxY) { - // maxY = Math.ceil(maxValue); - // } - // if (minValue < minY) { - // minY = Math.floor(minValue); - // } - // setYRange([minY, maxY]); - // } - // }, [dataSource, data]); - return (
{data.length > 0 && ( diff --git a/src/components/Modules/KilnOptimize/components/inputData/index.module.css b/src/components/Modules/KilnOptimize/components/inputData/index.module.css index 752dc5c..3d12714 100644 --- a/src/components/Modules/KilnOptimize/components/inputData/index.module.css +++ b/src/components/Modules/KilnOptimize/components/inputData/index.module.css @@ -226,3 +226,7 @@ box-shadow: 0px 2px 6px 0px rgba(43,255,223,0.55); backdrop-filter: blur(0px); } +.unit{ +color: rgba(43, 254, 222, 1); + +} diff --git a/src/components/Modules/KilnOptimize/components/leftBottomForecast/index.module.css b/src/components/Modules/KilnOptimize/components/leftBottomForecast/index.module.css index a0dae05..b6f2cf9 100644 --- a/src/components/Modules/KilnOptimize/components/leftBottomForecast/index.module.css +++ b/src/components/Modules/KilnOptimize/components/leftBottomForecast/index.module.css @@ -6,15 +6,15 @@ height: 1px; display: grid; grid-template-rows: auto 1fr 1fr; - gap: 10px; - padding-top: 18px; + /* gap: 4px; */ + padding-top: 6px; .info__item { /* width: 100%; */ background: url('../../../../../assets/forecastBack.png') no-repeat; background-size: 100% 100%; position: relative; /* width: 220px; */ - height: 45px; + height: 60px; /* background: rgba(10,154,255,0.15); */ /* box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5); */ /* border: 1px solid; */ @@ -27,7 +27,7 @@ user-select: none; display: flex; align-items: center; - gap: 12px; + gap: 14px; .square{ /* flex: 1; */ margin-left: 20px; @@ -48,5 +48,12 @@ color: rgba(255, 255, 255, 1); } } + .info__item:last-child { + /* width: 100%; */ + background: url('../../../../../assets/lastBack.png') no-repeat; + background-size: 100% 100%; + + } } + } diff --git a/src/components/Modules/KilnOptimize/components/leftMiddleForecast/index.module.css b/src/components/Modules/KilnOptimize/components/leftMiddleForecast/index.module.css index 6946934..dec67b0 100644 --- a/src/components/Modules/KilnOptimize/components/leftMiddleForecast/index.module.css +++ b/src/components/Modules/KilnOptimize/components/leftMiddleForecast/index.module.css @@ -19,7 +19,7 @@ background: rgba(10,154,255,0.15); /* box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5); */ border: 1px solid; - color: #58E7E9; + color: rgba(81, 180, 255, 1); border-image: linear-gradient(80deg, rgba(0, 255, 245, 0.55), rgba(0, 255, 245, 0)) 1 1; font-size: 20px; letter-spacing: 1.43px; @@ -34,7 +34,7 @@ margin-left: 20px; width: 6px; height: 6px; - background: #00FFF5; + background: rgba(81, 180, 255, 1); box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5), 0px 0px 4px 1px #58E7E9; } .label { @@ -67,7 +67,7 @@ background: rgba(10,154,255,0.15); /* box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5); */ border: 1px solid; - color: #58E7E9; + color: rgba(81, 180, 255, 1); border-image: linear-gradient(80deg, rgba(0, 255, 245, 0.55), rgba(0, 255, 245, 0)) 1 1; font-size: 20px; letter-spacing: 1.43px; @@ -82,7 +82,7 @@ margin-left: 20px; width: 6px; height: 6px; - background: #00FFF5; + background: rgba(81, 180, 255, 1); box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5), 0px 0px 4px 1px #58E7E9; } .label { diff --git a/src/components/Modules/KilnOptimize/components/paramsInput/index.jsx b/src/components/Modules/KilnOptimize/components/paramsInput/index.jsx index 13ff2c4..584c522 100644 --- a/src/components/Modules/KilnOptimize/components/paramsInput/index.jsx +++ b/src/components/Modules/KilnOptimize/components/paramsInput/index.jsx @@ -5,7 +5,7 @@ * @LastEditors: zhp * @Description: */ -// 窑炉预测控制参数输入 +// AI预测控制参数输入 import cls from "./index.module.css"; import BottomBarItem from "../../../../Common/forecastLargeBackground"; // import CommonChart from "../CommonChart"; diff --git a/src/components/Modules/KilnOptimize/components/paramsInput/index.module.css b/src/components/Modules/KilnOptimize/components/paramsInput/index.module.css index 205a554..0c54063 100644 --- a/src/components/Modules/KilnOptimize/components/paramsInput/index.module.css +++ b/src/components/Modules/KilnOptimize/components/paramsInput/index.module.css @@ -32,7 +32,7 @@ background: url(../../../../../assets/modelButton.png) no-repeat; background-size: 100% 90%; background-position: bottom; - color: #00fff788; + color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', '微软雅黑', 'Microsoft YaHei UI', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif; diff --git a/src/components/Modules/KilnOptimize/components/seasonButton/index.module.css b/src/components/Modules/KilnOptimize/components/seasonButton/index.module.css index c6fae7f..c04e7c5 100644 --- a/src/components/Modules/KilnOptimize/components/seasonButton/index.module.css +++ b/src/components/Modules/KilnOptimize/components/seasonButton/index.module.css @@ -3,7 +3,7 @@ cursor: pointer; user-select: none; padding:40px 35px; - font-size: 32px; + font-size: 28px; display: flex; align-items: center; justify-content: center; @@ -22,6 +22,8 @@ .menuItem.active, .menuItem:hover { background: url(../../../../../assets/seasonActive.png) no-repeat; + font-size: 28px; + color: rgba(255, 255, 255, 1); background-size: 100% 100%; } diff --git a/src/components/container.module.scss b/src/components/container.module.scss index 73ef39d..50d1c77 100644 --- a/src/components/container.module.scss +++ b/src/components/container.module.scss @@ -11,7 +11,7 @@ align-items: center; img { - width: 24px; + width: 32px; &.bigger { width: 28px; diff --git a/src/hooks/useIcon.js b/src/hooks/useIcon.js index 17e5602..15c6a81 100644 --- a/src/hooks/useIcon.js +++ b/src/hooks/useIcon.js @@ -1,7 +1,7 @@ /* * @Author: zhp * @Date: 2024-08-20 14:09:17 - * @LastEditTime: 2024-08-26 15:28:43 + * @LastEditTime: 2024-09-12 16:27:09 * @LastEditors: zhp * @Description: */ @@ -20,6 +20,7 @@ import IconKilnTop from '../assets/Icon/kilnTop.png'; import IconKilnBottom from '../assets/Icon/kilnBottom.png'; import yieldRate from '../assets/Icon/yieldRate.png'; import forecast from '../assets/Icon/forecast.png'; +import close from '../assets/Icon/close.png'; function useIcon(iconName) { @@ -53,6 +54,8 @@ function useIcon(iconName) { ? IconKilnBottom : iconName == 'yieldRate' ? yieldRate + : iconName == 'close' + ? close : IconDefault; } diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx index c997812..5e30b56 100644 --- a/src/pages/Home/index.jsx +++ b/src/pages/Home/index.jsx @@ -37,7 +37,7 @@ export default function Home({ active }) { const handleValueFromGrandChild = (value) => { setModelFlag(value); - console.log(modelFlag); + console.log('modelFlag',modelFlag); }; const ctx = useSelector((state) => state.fireInfo); const fireDir = ctx.fireDirection || null; @@ -79,7 +79,7 @@ export default function Home({ active }) { > {active == "窑炉总览" && } {active == "窑炉内部" && } - {active == "窑炉优化" && ( + {active == "AI窑炉" && ( <> {floor !== 4 && } {floor !== 0 && @@ -94,7 +94,7 @@ export default function Home({ active }) {
{active == "窑炉总览" && ( <> @@ -158,7 +158,7 @@ export default function Home({ active }) { {active == "窑炉内部" && } - {active == "窑炉优化" && } + {active == "AI窑炉" && } {active == "退火监测" &&
} @@ -167,7 +167,7 @@ export default function Home({ active }) { {active == "窑炉总览" && } {active == "窑炉内部" && } - {active == "窑炉优化" && ( + {active == "AI窑炉" && ( <> {floor !== 4 && }