mt-fe-group/xuchang-new
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

修改

Browse Source
This commit is contained in:
‘937886381’
2024-09-13 15:47:43 +08:00
parent 6a25d4e30d
commit 696d852cd2
46 changed files with 893 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Common/Company/index.module.scss
View File

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

6
src/components/Common/ForecastTemperature/leftbox.module.scss
View File

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

9
src/components/Common/NavMenu/index.jsx
View File

@@ -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"],

71
src/components/Common/forecastRect/index.jsx
View File

@@ -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 (
<div
className={`${cls.blueRect} ${cls[title]}`}
style={{
background: props.blue ? "#0a4268ee" : "#0a426860",
height:"68px" ,
}}
<div>
<div
// ref={parentRef}
className={`${cls.blueRect} ${cls[title]}`}
style={{
background: props.blue ? "#0a4268ee" : "#0a426860",
height:props.blue ? "68px" : "90px" ,
}}
>
<span
className="title"
@@ -33,7 +74,19 @@ function BlueRect(props) {
<span className="value" style={{ userSelect: "none", fontSize: "22px" }}>
{value}
</span>
{props.blue || (
<span onClick={handleToggleVisibility} className={`${cls.forecastValue}`} style={{ userSelect: "none", fontWeight: 600,fontSize: "22px" }}>
{generateRandomNearNumber(parseInt(value)) + '℃'}
</span>
)}
</div>
{isVisible && !props.blue && <Points dataSource={chartData}
// ref={pointsRef}
updateVisibilityState={updateVisibilityState} // 传递方法给子组件
style={{
position: "fixed",
zIndex: 9999,
}}/>}
</div>
);
}

11
src/components/Common/forecastRect/index.module.css
View File

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

12
src/components/Common/forecastRect/visContext.jsx Normal file
View File

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

64
src/components/Common/pointItemBackgroundForecast/Container.jsx Normal file
View File

@@ -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 (
<div
className={`${cls.container} ${props.className}`}
style={props.pending ? { filter: "grayscale(100%)" } : props.style}
>
<div className={cls.container__head}>
<h2>{props.title}</h2>
{desc && <div className={cls.graphBaseDesc}>{desc}</div>}
<img
src={icon}
alt="#"
onClick={handleChangeIsVisible}
className={props.icon == "close" ? cls.bigger : ""}
/>
</div>
<div className={cls.container__content}>{props.children}</div>
{props.pending && (
<div
className={`${cls.container__content} pending-modal`}
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
borderRadius: "20px",
userSelect: "none",
cursor: "not-allowed",
}}
></div>
)}
</div>
);
};
export default Container;

59
src/components/Common/pointItemBackgroundForecast/container.module.scss Normal file
View File

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

41
src/components/Common/pointItemBackgroundForecast/index.jsx Normal file
View File

@@ -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 (
<Container
icon={props.icon}
title={props.title}
isVisible={isVisible}
onVisibilityChange={handleVisibilityChange}
desc={props.desc}
className={`${cls.bottomBarItem} ${props.className}`}
style={props.style}
>
{props.children}
</Container>
);
}
export default BottomBarItem;

6
src/components/Common/pointItemBackgroundForecast/index.module.css Normal file
View File

@@ -0,0 +1,6 @@
.bottomBarItem {
background: url(../../../assets/pointsBack.png) no-repeat;
background-size: 100% 100%;
width: 551px;
height: 335px;
}