zjl #13
Binary file not shown.
@ -2,4 +2,5 @@
|
|||||||
background: url(../../../assets/forecastBack.png) no-repeat;
|
background: url(../../../assets/forecastBack.png) no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
width: 506px;
|
width: 506px;
|
||||||
|
height: 422px;
|
||||||
}
|
}
|
||||||
|
@ -36,7 +36,7 @@ export default function CompanyName() {
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h2 className={cls.TopTitleText}>
|
<h2 className={cls.TopTitleText}>
|
||||||
许昌安彩新能科技  4800万方光伏轻质基板生产线{' '}
|
许昌安彩新能科技  许昌安彩窑炉生产指挥调度中心{' '}
|
||||||
</h2>
|
</h2>
|
||||||
<img src={ButtonLine} alt="图片加载错误" className={cls.TopButtonLine}/>
|
<img src={ButtonLine} alt="图片加载错误" className={cls.TopButtonLine}/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-08-29 09:46:11
|
* @Date: 2024-08-29 09:46:11
|
||||||
* @LastEditTime: 2024-09-14 09:20:36
|
* @LastEditTime: 2024-09-18 09:10:19
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
@ -9,8 +9,9 @@ import cls from "./index.module.css";
|
|||||||
import React, { useState,useEffect,useRef } from 'react';
|
import React, { useState,useEffect,useRef } from 'react';
|
||||||
import Points from "../../Modules/KilnOptimize/components/KilnTopForecast/Points";
|
import Points from "../../Modules/KilnOptimize/components/KilnTopForecast/Points";
|
||||||
function generateRandomNearNumber(number) {
|
function generateRandomNearNumber(number) {
|
||||||
const randomOffset = Math.floor(Math.random() * 11) - 5;
|
const minRandom = -0.5;
|
||||||
return number + randomOffset;
|
const maxRandom = 0.5;
|
||||||
|
return (number + Math.random() * (maxRandom - minRandom) + minRandom).toFixed(1);
|
||||||
}
|
}
|
||||||
function BlueRect(props) {
|
function BlueRect(props) {
|
||||||
const title = props.title || "DEFAULT";
|
const title = props.title || "DEFAULT";
|
||||||
@ -22,6 +23,7 @@ function BlueRect(props) {
|
|||||||
setIsVisible(!newVisibilityState);
|
setIsVisible(!newVisibilityState);
|
||||||
// 在这里可以根据isVisible的变化执行其他逻辑
|
// 在这里可以根据isVisible的变化执行其他逻辑
|
||||||
};
|
};
|
||||||
|
const [randomValue, setRandomValue] = useState(generateRandomNearNumber(parseInt(value)));
|
||||||
// const parentRef = useRef(null);
|
// const parentRef = useRef(null);
|
||||||
// const pointsRef = useRef(null);
|
// const pointsRef = useRef(null);
|
||||||
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
|
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
|
||||||
@ -71,14 +73,22 @@ function BlueRect(props) {
|
|||||||
>
|
>
|
||||||
{title}
|
{title}
|
||||||
</span>
|
</span>
|
||||||
<span className="value" style={{ userSelect: "none", fontSize: "22px" }}>
|
|
||||||
{value}
|
|
||||||
</span>
|
|
||||||
{props.blue || (
|
{props.blue || (
|
||||||
<span onClick={handleToggleVisibility} className={`${cls.forecastValue}`} style={{ userSelect: "none", fontWeight: 600,fontSize: "22px" }}>
|
<span onClick={handleToggleVisibility} className="value" style={{ userSelect: "none", fontWeight: 600,fontSize: "22px", cursor: 'pointer', }}>
|
||||||
{generateRandomNearNumber(parseInt(value)) + '℃'}
|
{randomValue + '℃'}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
{props.blue? (
|
||||||
|
<span className='value' style={{ userSelect: "none", fontSize: "22px" }}>
|
||||||
|
{value}
|
||||||
|
</span>
|
||||||
|
): (
|
||||||
|
<span className={`${cls.forecastValue}`} style={{ userSelect: "none", fontSize: "22px" }}>
|
||||||
|
{value}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
)}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
{isVisible && !props.blue && <Points dataSource={chartData}
|
{isVisible && !props.blue && <Points dataSource={chartData}
|
||||||
updateVisibilityState={updateVisibilityState} // 传递方法给子组件
|
updateVisibilityState={updateVisibilityState} // 传递方法给子组件
|
||||||
|
@ -551,6 +551,5 @@
|
|||||||
background: linear-gradient( 270deg, rgba(0,255,251,0.67) 0%, rgba(0,255,245,0.64) 100%);
|
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);
|
box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5);
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
cursor: pointer;
|
|
||||||
backdrop-filter: blur(3px);
|
backdrop-filter: blur(3px);
|
||||||
}
|
}
|
||||||
|
@ -7,7 +7,7 @@
|
|||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: auto 1fr 1fr;
|
grid-template-rows: auto 1fr 1fr;
|
||||||
/* gap: 4px; */
|
/* gap: 4px; */
|
||||||
padding-top: 6px;
|
padding-top: 4px;
|
||||||
.info__item {
|
.info__item {
|
||||||
/* width: 100%; */
|
/* width: 100%; */
|
||||||
background: url('../../../../../assets/blueBack.png') no-repeat;
|
background: url('../../../../../assets/blueBack.png') no-repeat;
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-08-23 13:56:11
|
* @Date: 2024-08-23 13:56:11
|
||||||
* @LastEditTime: 2024-08-30 16:30:35
|
* @LastEditTime: 2024-09-18 08:52:18
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
@ -32,7 +32,7 @@ export default function Index() {
|
|||||||
<div style={{ height: '261px', marginTop: '24px' }}>
|
<div style={{ height: '261px', marginTop: '24px' }}>
|
||||||
<LeftMiddleForecast />
|
<LeftMiddleForecast />
|
||||||
</div>
|
</div>
|
||||||
<div style={{ flex: 1,marginTop: '24px' }}>
|
<div style={{ height: '422px',marginTop: '24px' }}>
|
||||||
<LeftBottomForecast/>
|
<LeftBottomForecast/>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
Loading…
Reference in New Issue
Block a user