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

修改

Browse Source
This commit is contained in:
‘937886381’ 2024-09-18 10:55:34 +08:00
parent aa86600a1a
commit 196ad512af
11 changed files with 52 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Common/pointItemBackgroundForecast/container.module.scss
View File

@ -26,7 +26,7 @@
margin: 0; margin: 0;
margin-left: 6px; margin-left: 6px;
font-size: 22px; font-size: 22px;
color: #fff; color:#58E7E9;
letter-spacing: 2px; letter-spacing: 2px;
font-weight: 500; font-weight: 500;
} }

8
src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.module.css
View File

@ -26,7 +26,7 @@
height: 1px; height: 1px;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: -23.3px; left: -21px;
background-color: rgba(255, 194, 20, 1); background-color: rgba(255, 194, 20, 1);
transform: translateY(-50%); transform: translateY(-50%);
} }
@ -39,7 +39,7 @@
border-radius: 100%; border-radius: 100%;
top: 50%; top: 50%;
background-color: rgba(255, 194, 20, 1); background-color: rgba(255, 194, 20, 1);
left: -1.1vw; left: -24px;
transform: translateY(-50%) translateX(50%); transform: translateY(-50%) translateX(50%);
} }
.block{ .block{
@ -62,7 +62,7 @@
height: 1px; height: 1px;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: -24px; left: -22.5px;
transform: translateY(-50%); transform: translateY(-50%);
background-color: rgba(0, 255, 245, 1); background-color: rgba(0, 255, 245, 1);
} }
@ -75,6 +75,6 @@
background-color: rgba(0, 255, 245, 1); background-color: rgba(0, 255, 245, 1);
border-radius: 100%; border-radius: 100%;
top: 50%; top: 50%;
left: -1.1vw; left: -25.5px;
transform: translateY(-50%) translateX(50%); transform: translateY(-50%) translateX(50%);
} }

8
src/components/Modules/KilnOptimize/components/KilnMiddleForecast/index.module.css
View File

@ -26,7 +26,7 @@
height: 1px; height: 1px;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: -23.3px; left: -21px;
background-color: rgba(255, 194, 20, 1); background-color: rgba(255, 194, 20, 1);
transform: translateY(-50%); transform: translateY(-50%);
} }
@ -39,7 +39,7 @@
border-radius: 100%; border-radius: 100%;
top: 50%; top: 50%;
background-color: rgba(255, 194, 20, 1); background-color: rgba(255, 194, 20, 1);
left: -1.1vw; left: -24px;
transform: translateY(-50%) translateX(50%); transform: translateY(-50%) translateX(50%);
} }
.block{ .block{
@ -62,7 +62,7 @@
height: 1px; height: 1px;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: -24px; left: -22.5px;
transform: translateY(-50%); transform: translateY(-50%);
background-color: rgba(0, 255, 245, 1); background-color: rgba(0, 255, 245, 1);
} }
@ -75,6 +75,6 @@
background-color: rgba(0, 255, 245, 1); background-color: rgba(0, 255, 245, 1);
border-radius: 100%; border-radius: 100%;
top: 50%; top: 50%;
left: -1.1vw; left: -25.5px;
transform: translateY(-50%) translateX(50%); transform: translateY(-50%) translateX(50%);
} }

26
src/components/Modules/KilnOptimize/components/KilnTopForecast/Points.jsx
View File

@ -1,7 +1,7 @@
/* /*
* @Author: zhp * @Author: zhp
* @Date: 2024-09-12 13:44:55 * @Date: 2024-09-12 13:44:55
* @LastEditTime: 2024-09-14 14:10:23 * @LastEditTime: 2024-09-18 10:18:09
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
*/ */
@ -25,13 +25,26 @@ function generateRandomArray(data) {
return randomArray; 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) { function LeftTopForecast(props) {
console.log(props); console.log(props);
const title = '点位:' + props.dataSource.title const title = '点位:' + props.dataSource.title
const isVisible = '点位:' + props.dataSource.isVisible const isVisible = '点位:' + props.dataSource.isVisible
const data = props.dataSource.value.match(/\d+\.?\d*/)[0] const data = props.dataSource.value.match(/\d+\.?\d*/)[0]
const [parentVisibilityState, setParentVisibilityState] = useState(false); const [parentVisibilityState, setParentVisibilityState] = useState(false);
const [randomValue, setRandomValue] = useState(generateRandomArray((data)))
// 定义一个处理子组件可见性变化的回调函数 // 定义一个处理子组件可见性变化的回调函数
const handleVisibilityChange = (newVisibilityState) => { const handleVisibilityChange = (newVisibilityState) => {
console.log(`Visibility changed to: ${newVisibilityState}`); console.log(`Visibility changed to: ${newVisibilityState}`);
@ -39,8 +52,12 @@ function LeftTopForecast(props) {
// 在这里还可以根据需要执行其他操作，比如更新UI、管理其他组件的状态等 // 在这里还可以根据需要执行其他操作，比如更新UI、管理其他组件的状态等
props.updateVisibilityState(newVisibilityState); // 通知父组件更新isVisible状态 props.updateVisibilityState(newVisibilityState); // 通知父组件更新isVisible状态
}; };
const dataList = randomValue
const [forecastList, setForecastList] = useState(getForecastList((dataList)))
const value = useContext(HomeContext); const value = useContext(HomeContext);
// let forecastList = [];
console.log('forecastList',forecastList);
const kilnOptimize = useSelector((state) => state.kilnOptimize); const kilnOptimize = useSelector((state) => state.kilnOptimize);
const dataSource = { const dataSource = {
color1: 'rgba(0, 255, 245, .2)', color1: 'rgba(0, 255, 245, .2)',
@ -50,7 +67,8 @@ function LeftTopForecast(props) {
areaColor1:'rgba(255, 234, 153, 0)', areaColor1:'rgba(255, 234, 153, 0)',
msg: kilnOptimize.topTempAvgFor1h, msg: kilnOptimize.topTempAvgFor1h,
modelFlag: value, modelFlag: value,
data: data ? generateRandomArray(data) : [], data: dataList ? dataList : [],
forecastList:forecastList ?forecastList:[],
range: [-10, 10] range: [-10, 10]
} }
return ( return (

2
src/components/Modules/KilnOptimize/components/KilnTopForecast/index.module.css
View File

@ -75,6 +75,6 @@
background-color: rgba(0, 255, 245, 1); background-color: rgba(0, 255, 245, 1);
border-radius: 100%; border-radius: 100%;
top: 50%; top: 50%;
left: -26px; left: -25.5px;
transform: translateY(-50%) translateX(50%); transform: translateY(-50%) translateX(50%);
} }

11
src/components/Modules/KilnOptimize/components/forecastRightChart/points.jsx
View File

@ -1,7 +1,7 @@
/* /*
* @Author: zhp * @Author: zhp
* @Date: 2024-09-13 14:47:50 * @Date: 2024-09-13 14:47:50
* @LastEditTime: 2024-09-14 15:53:14 * @LastEditTime: 2024-09-18 10:13:08
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
*/ */
@ -68,20 +68,13 @@ function CommonChart(props) {
const { dataSource } = props; const { dataSource } = props;
const data = dataSource.data || []; const data = dataSource.data || [];
let forecastList =dataSource.forecastList || [];
// const modelFlag = dataSource.modelFlag || false; // const modelFlag = dataSource.modelFlag || false;
const color1 = dataSource.color1 || []; const color1 = dataSource.color1 || [];
const color = dataSource.color || []; const color = dataSource.color || [];
const yName = dataSource.yName; const yName = dataSource.yName;
const times = getTimeArray(); 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) console.log('times',times)
let areaStyle = { let areaStyle = {
opacity: 0.8, opacity: 0.8,

11
src/components/Modules/KilnOptimize/components/forecastRightChart/pointsChart.js
View File

@ -1,14 +1,7 @@
/* /*
* @Author: zhp * @Author: zhp
* @Date: 2024-09-13 15:39:36 * @Date: 2024-09-13 15:39:36
* @LastEditTime: 2024-09-14 16:02:21 * @LastEditTime: 2024-09-18 10:35:44
* @LastEditors: zhp
* @Description:
*/
/*
* @Author: zhp
* @Date: 2024-08-28 09:25:58
* @LastEditTime: 2024-09-13 14:22:01
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
*/ */
@ -62,7 +55,7 @@ export default function getOptions(data, times, range, yName,forecastList,color,
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: "#F1F9FF", color: "#58E7E9",
}, },
}, },
min:range[0], min:range[0],

4
src/components/Modules/KilnOptimize/components/leftBottomForecast/index.jsx
View File

@ -1,7 +1,7 @@
/* /*
* @Author: zhp * @Author: zhp
* @Date: 2024-08-23 15:31:44 * @Date: 2024-08-23 15:31:44
* @LastEditTime: 2024-09-14 15:18:21 * @LastEditTime: 2024-09-18 10:44:06
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
*/ */
@ -24,7 +24,7 @@ function LeftMiddleForecast() {
<div className={cls.leftBar__middle__content}> <div className={cls.leftBar__middle__content}>
{infos.map((item) => ( {infos.map((item) => (
<div key={item.label} className={`${cls.info__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.label}>{item.label}</span>
<span className={cls.line}></span> <span className={cls.line}></span>
<span className={cls.value}>{ (item.value * 100).toFixed(2) + '%'}</span> <span className={cls.value}>{ (item.value * 100).toFixed(2) + '%'}</span>

9
src/components/Modules/KilnOptimize/components/leftBottomForecast/index.module.css
View File

@ -28,16 +28,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 14px; 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 { .label {
/* flex:1; */ /* flex:1; */
margin-left: 40px;
text-align: left; text-align: left;
/* position: relative; */ /* position: relative; */
} }

4
src/components/Modules/KilnOptimize/forecastRightSide/index.jsx
View File

@ -1,7 +1,7 @@
/* /*
* @Author: zhp * @Author: zhp
* @Date: 2024-08-23 13:56:11 * @Date: 2024-08-23 13:56:11
* @LastEditTime: 2024-09-18 08:52:18 * @LastEditTime: 2024-09-18 10:54:39
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
*/ */
@ -37,7 +37,7 @@ export default function Index() {
</div> </div>
</motion.div> </motion.div>
<motion.div <motion.div
className={cls.leftBar} className={cls.leftBarRight}
initial={{ opacity: 0, position: 'absolute' }} initial={{ opacity: 0, position: 'absolute' }}
animate={{ opacity: 1, position: 'relative' }} animate={{ opacity: 1, position: 'relative' }}
exit={{ opacity: 0, position: 'relative' }} exit={{ opacity: 0, position: 'relative' }}

12
src/components/Modules/KilnOptimize/forecastRightSide/index.module.scss
View File

@ -11,6 +11,16 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 16px; gap: 16px;
position: relative;
}
.leftBarRight {
width: 501px;
height: 966px;
// margin-left: 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
z-index: 99; z-index: 99;
} }