Autor | SHA1 | Wiadomość | Data |
---|---|---|---|
juzi | fd34efc0b4 |
Merge pull request 'zhp' (#6) from zhp into features/warning
Reviewed-on: http://git.picaiba.com/mt-fe-group/xuchang-new/pulls/6 |
6 dni temu |
‘937886381’ | 2d2d6d4c15 | Merge branch 'features/warning' into zhp | 6 dni temu |
‘937886381’ | 696d852cd2 | 修改 | 6 dni temu |
@@ -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); | |||
@@ -16,7 +16,7 @@ | |||
<stop stop-color="#F43D0A" offset="100%"></stop> | |||
</linearGradient> | |||
</defs> | |||
<g id="窑炉预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |||
<g id="AI预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |||
<g id="预测" transform="translate(-790.000000, -134.000000)" fill-rule="nonzero"> | |||
<g id="编组-32" transform="translate(763.000000, 122.000000)"> | |||
<g id="泡界线" filter="url(#filter-1)" transform="translate(32.000000, 16.000000)"> | |||
@@ -26,4 +26,4 @@ | |||
</g> | |||
</g> | |||
</g> | |||
</svg> | |||
</svg> |
@@ -20,7 +20,7 @@ | |||
<stop stop-color="#F43D0A" offset="100%"></stop> | |||
</linearGradient> | |||
</defs> | |||
<g id="窑炉预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |||
<g id="AI预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |||
<g id="预测" transform="translate(-1036.201540, -134.000000)" fill-rule="nonzero"> | |||
<g id="编组-33" transform="translate(1009.000000, 122.000000)"> | |||
<g id="碹顶" filter="url(#filter-1)" transform="translate(32.201540, 16.000000)"> | |||
@@ -33,4 +33,4 @@ | |||
</g> | |||
</g> | |||
</g> | |||
</svg> | |||
</svg> |
@@ -7,7 +7,7 @@ | |||
<stop stop-color="#F43D0A" offset="100%"></stop> | |||
</linearGradient> | |||
</defs> | |||
<g id="窑炉预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |||
<g id="AI预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |||
<g id="预测" transform="translate(-799.000000, -252.000000)"> | |||
<g id="液位" transform="translate(799.000000, 252.000000)"> | |||
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="31" height="31"></rect> | |||
@@ -15,4 +15,4 @@ | |||
</g> | |||
</g> | |||
</g> | |||
</svg> | |||
</svg> |
@@ -20,7 +20,7 @@ | |||
<stop stop-color="#F43D0A" offset="100%"></stop> | |||
</linearGradient> | |||
</defs> | |||
<g id="窑炉预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |||
<g id="AI预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |||
<g id="预测" transform="translate(-1036.000000, -247.000000)" fill-rule="nonzero"> | |||
<g id="编组-33备份" transform="translate(1009.000000, 236.000000)"> | |||
<g id="池底" filter="url(#filter-1)" transform="translate(32.000000, 15.000000)"> | |||
@@ -33,4 +33,4 @@ | |||
</g> | |||
</g> | |||
</g> | |||
</svg> | |||
</svg> |
@@ -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,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; | |||
} | |||
@@ -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"], | |||
@@ -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> | |||
); | |||
} | |||
@@ -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); | |||
} |
@@ -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; |
@@ -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; |
@@ -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"); | |||
// } |
@@ -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; |
@@ -0,0 +1,6 @@ | |||
.bottomBarItem { | |||
background: url(../../../assets/pointsBack.png) no-repeat; | |||
background-size: 100% 100%; | |||
width: 551px; | |||
height: 335px; | |||
} |
@@ -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 }} | |||
@@ -94,7 +94,7 @@ function KilnCenter({ onFloorChange }) { | |||
} | |||
onClick={() => onFloorUpdate(4)} | |||
> | |||
窑炉预测 | |||
AI预测 | |||
</div> | |||
</div> | |||
@@ -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; | |||
@@ -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, | |||
}} | |||
/> | |||
<FeederStatus style={{ left: "680px" }} /> | |||
@@ -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 : [], | |||
@@ -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; | |||
@@ -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 : [], | |||
@@ -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%; | |||
@@ -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 ( | |||
<BottomBarItem | |||
icon="close" | |||
title={title} | |||
isVisible={isVisible} | |||
style={props.style} | |||
onVisibilityChange={handleVisibilityChange} // 传递回调 | |||
> | |||
{/* legend */} | |||
<div className={cls.legend}> | |||
<span className={cls.item}> | |||
实际值 | |||
</span> | |||
<span className={cls.block}> | |||
预测值 | |||
</span> | |||
</div> | |||
<div className={cls.chart}> | |||
<CommonChart dataSource={dataSource}/> | |||
</div> | |||
</BottomBarItem> | |||
) | |||
} | |||
export default LeftTopForecast; |
@@ -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 : [], | |||
@@ -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; | |||
@@ -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%); | |||
} |
@@ -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%; | |||
} | |||
@@ -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 | |||
@@ -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, | |||
}, | |||
]), | |||
@@ -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 ( | |||
<div className={cls.commonChart}> | |||
{data.length > 0 && ( | |||
<ReactECharts | |||
option={getOptions(data, times, yRange, yName,forecastList,color,color1,areaStyle,areaStyle1)} | |||
style={{ height: "100%" }} | |||
/> | |||
)} | |||
{data.length <= 0 && ( | |||
<p | |||
style={{ | |||
paddingTop: "88px", | |||
color: "#fffc", | |||
textAlign: "center", | |||
fontSize: "24px", | |||
userSelect: "none", | |||
}} | |||
> | |||
暂无数据 | |||
</p> | |||
)} | |||
</div> | |||
); | |||
} | |||
export default CommonChart; |
@@ -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: '' | |||
}, | |||
}; | |||
} |
@@ -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 ( | |||
<div className={cls.commonChart}> | |||
{data.length > 0 && ( | |||
@@ -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); | |||
} |
@@ -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%; | |||
} | |||
} | |||
} |
@@ -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 { | |||
@@ -5,7 +5,7 @@ | |||
* @LastEditors: zhp | |||
* @Description: | |||
*/ | |||
// 窑炉预测控制参数输入 | |||
// AI预测控制参数输入 | |||
import cls from "./index.module.css"; | |||
import BottomBarItem from "../../../../Common/forecastLargeBackground"; | |||
// import CommonChart from "../CommonChart"; | |||
@@ -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; | |||
@@ -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%; | |||
} | |||
@@ -11,7 +11,7 @@ | |||
align-items: center; | |||
img { | |||
width: 24px; | |||
width: 32px; | |||
&.bigger { | |||
width: 28px; | |||
@@ -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; | |||
} | |||
@@ -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 == "窑炉总览" && <LeftBar key="kiln-total" />} | |||
{active == "窑炉内部" && <KilnInnerLeft key="kiln-inner" />} | |||
{active == "窑炉优化" && ( | |||
{active == "AI窑炉" && ( | |||
<> | |||
{floor !== 4 && <KilnOptimizeLeft key="kiln-optimize" />} | |||
{floor !== 0 && | |||
@@ -94,7 +94,7 @@ export default function Home({ active }) { | |||
</AnimatePresence> | |||
<div className={ | |||
(floor === 4 && active === '窑炉优化' ? 'InputCenter' : "Center") | |||
(floor === 4 && active === 'AI窑炉' ? 'InputCenter' : "Center") | |||
}> | |||
{active == "窑炉总览" && ( | |||
<> | |||
@@ -158,7 +158,7 @@ export default function Home({ active }) { | |||
{active == "窑炉内部" && <KilnCenter />} | |||
{active == "窑炉优化" && <OptimizeCenter onFloorChange={handleFloorChangeFromKilnCenter} />} | |||
{active == "AI窑炉" && <OptimizeCenter onFloorChange={handleFloorChangeFromKilnCenter} />} | |||
{active == "退火监测" && <div className="bgFire"></div>} | |||
@@ -167,7 +167,7 @@ export default function Home({ active }) { | |||
{active == "窑炉总览" && <RightBar key="right-bar" />} | |||
{active == "窑炉内部" && <KilnInnerRight key="kiln-inner-right" />} | |||
{active == "窑炉优化" && ( | |||
{active == "AI窑炉" && ( | |||
<> | |||
{floor !== 4 && <KilnOptimizeRight key="kiln-optimize-right" />} | |||
<HomeContext.Provider value={modelFlag}> | |||