修改 #11
@ -26,7 +26,7 @@
|
||||
margin: 0;
|
||||
margin-left: 6px;
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
color:#58E7E9;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
@ -26,7 +26,7 @@
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -23.3px;
|
||||
left: -21px;
|
||||
background-color: rgba(255, 194, 20, 1);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
@ -39,7 +39,7 @@
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
background-color: rgba(255, 194, 20, 1);
|
||||
left: -1.1vw;
|
||||
left: -24px;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
.block{
|
||||
@ -62,7 +62,7 @@
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -24px;
|
||||
left: -22.5px;
|
||||
transform: translateY(-50%);
|
||||
background-color: rgba(0, 255, 245, 1);
|
||||
}
|
||||
@ -75,6 +75,6 @@
|
||||
background-color: rgba(0, 255, 245, 1);
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
left: -1.1vw;
|
||||
left: -25.5px;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
|
@ -26,7 +26,7 @@
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -23.3px;
|
||||
left: -21px;
|
||||
background-color: rgba(255, 194, 20, 1);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
@ -39,7 +39,7 @@
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
background-color: rgba(255, 194, 20, 1);
|
||||
left: -1.1vw;
|
||||
left: -24px;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
.block{
|
||||
@ -62,7 +62,7 @@
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -24px;
|
||||
left: -22.5px;
|
||||
transform: translateY(-50%);
|
||||
background-color: rgba(0, 255, 245, 1);
|
||||
}
|
||||
@ -75,6 +75,6 @@
|
||||
background-color: rgba(0, 255, 245, 1);
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
left: -1.1vw;
|
||||
left: -25.5px;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
|
@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-09-12 13:44:55
|
||||
* @LastEditTime: 2024-09-14 14:10:23
|
||||
* @LastEditTime: 2024-09-18 10:18:09
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
@ -25,13 +25,26 @@ function generateRandomArray(data) {
|
||||
|
||||
return randomArray;
|
||||
}
|
||||
function getForecastList(data) {
|
||||
console.log('ryfdata',data);
|
||||
|
||||
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))
|
||||
}
|
||||
return forecastList
|
||||
}
|
||||
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 [randomValue, setRandomValue] = useState(generateRandomArray((data)))
|
||||
// 定义一个处理子组件可见性变化的回调函数
|
||||
const handleVisibilityChange = (newVisibilityState) => {
|
||||
console.log(`Visibility changed to: ${newVisibilityState}`);
|
||||
@ -39,8 +52,12 @@ function LeftTopForecast(props) {
|
||||
// 在这里还可以根据需要执行其他操作,比如更新UI、管理其他组件的状态等
|
||||
props.updateVisibilityState(newVisibilityState); // 通知父组件更新isVisible状态
|
||||
};
|
||||
|
||||
const dataList = randomValue
|
||||
const [forecastList, setForecastList] = useState(getForecastList((dataList)))
|
||||
const value = useContext(HomeContext);
|
||||
// let forecastList = [];
|
||||
console.log('forecastList',forecastList);
|
||||
|
||||
const kilnOptimize = useSelector((state) => state.kilnOptimize);
|
||||
const dataSource = {
|
||||
color1: 'rgba(0, 255, 245, .2)',
|
||||
@ -50,7 +67,8 @@ function LeftTopForecast(props) {
|
||||
areaColor1:'rgba(255, 234, 153, 0)',
|
||||
msg: kilnOptimize.topTempAvgFor1h,
|
||||
modelFlag: value,
|
||||
data: data ? generateRandomArray(data) : [],
|
||||
data: dataList ? dataList : [],
|
||||
forecastList:forecastList ?forecastList:[],
|
||||
range: [-10, 10]
|
||||
}
|
||||
return (
|
||||
|
@ -75,6 +75,6 @@
|
||||
background-color: rgba(0, 255, 245, 1);
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
left: -26px;
|
||||
left: -25.5px;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
|
@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-09-13 14:47:50
|
||||
* @LastEditTime: 2024-09-14 15:53:14
|
||||
* @LastEditTime: 2024-09-18 10:13:08
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
@ -68,20 +68,13 @@ function CommonChart(props) {
|
||||
const { dataSource } = props;
|
||||
|
||||
const data = dataSource.data || [];
|
||||
let forecastList =dataSource.forecastList || [];
|
||||
// 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));
|
||||
}
|
||||
console.log('times',times)
|
||||
let areaStyle = {
|
||||
opacity: 0.8,
|
||||
|
@ -1,14 +1,7 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-09-13 15:39:36
|
||||
* @LastEditTime: 2024-09-14 16:02:21
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-28 09:25:58
|
||||
* @LastEditTime: 2024-09-13 14:22:01
|
||||
* @LastEditTime: 2024-09-18 10:35:44
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
@ -62,7 +55,7 @@ export default function getOptions(data, times, range, yName,forecastList,color,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#F1F9FF",
|
||||
color: "#58E7E9",
|
||||
},
|
||||
},
|
||||
min:range[0],
|
||||
|
@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-23 15:31:44
|
||||
* @LastEditTime: 2024-09-14 15:18:21
|
||||
* @LastEditTime: 2024-09-18 10:44:06
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
@ -24,7 +24,7 @@ function LeftMiddleForecast() {
|
||||
<div className={cls.leftBar__middle__content}>
|
||||
{infos.map((item) => (
|
||||
<div key={item.label} className={`${cls.info__item}`}>
|
||||
<span className={cls.square}></span>
|
||||
{/* <span className={cls.square}></span> */}
|
||||
<span className={cls.label}>{item.label}</span>
|
||||
<span className={cls.line}></span>
|
||||
<span className={cls.value}>{ (item.value * 100).toFixed(2) + '%'}</span>
|
||||
|
@ -28,16 +28,9 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
.square{
|
||||
/* flex: 1; */
|
||||
margin-left: 20px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #00FFF5;
|
||||
box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5), 0px 0px 4px 1px #58E7E9;
|
||||
}
|
||||
.label {
|
||||
/* flex:1; */
|
||||
margin-left: 40px;
|
||||
text-align: left;
|
||||
/* position: relative; */
|
||||
}
|
||||
|
@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-23 13:56:11
|
||||
* @LastEditTime: 2024-09-18 08:52:18
|
||||
* @LastEditTime: 2024-09-18 10:54:39
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
@ -37,7 +37,7 @@ export default function Index() {
|
||||
</div>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
className={cls.leftBar}
|
||||
className={cls.leftBarRight}
|
||||
initial={{ opacity: 0, position: 'absolute' }}
|
||||
animate={{ opacity: 1, position: 'relative' }}
|
||||
exit={{ opacity: 0, position: 'relative' }}
|
||||
|
@ -11,6 +11,16 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
|
||||
}
|
||||
.leftBarRight {
|
||||
width: 501px;
|
||||
height: 966px;
|
||||
// margin-left: 40px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user