24 Commits

Author SHA1 Message Date
9b8e3734fa 1 2024-09-18 14:56:01 +08:00
904b9212b8 Merge branch 'features/warning' into zjl 2024-09-18 13:21:45 +08:00
zhp
1852bdc17f Merge pull request 'zhp' (#12) from zhp into features/warning
Reviewed-on: #12
2024-09-18 11:25:10 +08:00
‘937886381’
e2f8d9860a Merge branch 'features/warning' into zhp 2024-09-18 11:24:29 +08:00
‘937886381’
37c0c77078 修改 2024-09-18 11:23:50 +08:00
9382cb4cf5 Merge branch 'features/warning' into zjl 2024-09-18 11:10:53 +08:00
zhp
2325dc0373 Merge pull request '修改' (#11) from zhp into features/warning
Reviewed-on: #11
2024-09-18 10:59:38 +08:00
‘937886381’
196ad512af 修改 2024-09-18 10:55:34 +08:00
fa03a0b329 Merge branch 'features/warning' into zjl 2024-09-18 09:57:23 +08:00
zhp
29f8e96a2a Merge pull request 'zhp' (#10) from zhp into features/warning
Reviewed-on: #10
2024-09-18 09:55:13 +08:00
‘937886381’
aa86600a1a Merge branch 'features/warning' into zhp 2024-09-18 09:13:14 +08:00
‘937886381’
379de8fda0 修改 2024-09-18 09:12:26 +08:00
fa5cae9a78 Merge branch 'features/warning' into zjl 2024-09-18 08:32:31 +08:00
50aada1223 装软件 2024-09-18 08:30:49 +08:00
248fafdf2c Merge pull request 'zhp' (#9) from zhp into features/warning
Reviewed-on: #9
2024-09-15 13:14:52 +08:00
‘937886381’
9589fba7c2 Merge branch 'features/warning' into zhp 2024-09-14 17:10:30 +08:00
‘937886381’
0739f8cf00 修改 2024-09-14 17:09:38 +08:00
e1f95bd009 Merge pull request 'zhp' (#8) from zhp into features/warning
Reviewed-on: #8
2024-09-14 13:21:58 +08:00
‘937886381’
6de0fe4753 Merge branch 'features/warning' into zhp 2024-09-14 13:19:13 +08:00
‘937886381’
a8b5e57f38 修改 2024-09-14 13:18:13 +08:00
a4985a5379 Merge pull request 'zhp' (#7) from zhp into features/warning
Reviewed-on: #7
2024-09-13 16:58:48 +08:00
‘937886381’
f9dde6e159 Merge branch 'features/warning' into zhp 2024-09-13 16:53:19 +08:00
‘937886381’
b27d70f0fc 修改 2024-09-13 16:52:40 +08:00
fd34efc0b4 Merge pull request 'zhp' (#6) from zhp into features/warning
Reviewed-on: #6
2024-09-13 15:52:17 +08:00
39 changed files with 20217 additions and 275 deletions

19921
package-lock.json generated

File diff suppressed because it is too large Load Diff

BIN
src/assets/blueBack.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 273 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 113 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 43 KiB

View File

@@ -1,5 +1,6 @@
.bottomBarItem {
background: url(../../../assets/leftBottomBack.png) no-repeat;
background: url(../../../assets/forecastBack.png) no-repeat;
background-size: 100% 100%;
width: 506px;
height: 422px;
}

View File

@@ -36,7 +36,7 @@ export default function CompanyName() {
</div>
<div>
<h2 className={cls.TopTitleText}>
许昌安彩新能科技&ensp;&ensp;4800万方光伏轻质基板生产线{' '}
许昌安彩新能科技&ensp;&ensp;许昌安彩窑炉生产指挥调度中心{' '}
</h2>
<img src={ButtonLine} alt="图片加载错误" className={cls.TopButtonLine}/>
</div>

View File

@@ -8,7 +8,7 @@
margin-right: 16px;
width: 272px;
height: 100px;
padding: 12px 8px;
padding: 12px 16px;
background: url(../../../assets/CenterChart2ItemBg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
@@ -20,6 +20,7 @@
.box__inner {
padding-top: 12px;
margin-left: 20px;
.box__label {
color: #fffa;

View File

@@ -1,7 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-08-29 09:46:11
* @LastEditTime: 2024-09-13 14:35:10
* @LastEditTime: 2024-09-18 09:10:19
* @LastEditors: zhp
* @Description:
*/
@@ -9,8 +9,9 @@ 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;
const minRandom = -0.5;
const maxRandom = 0.5;
return (number + Math.random() * (maxRandom - minRandom) + minRandom).toFixed(1);
}
function BlueRect(props) {
const title = props.title || "DEFAULT";
@@ -19,21 +20,29 @@ function BlueRect(props) {
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 [randomValue, setRandomValue] = useState(generateRandomNearNumber(parseInt(value)));
// const parentRef = useRef(null);
// const pointsRef = useRef(null);
// const pointsRef = useRef(null);
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
const [pointsPosition, setPointsPosition] = useState({ left: 'initial', top: 'initial' });
const handleMouseMove = (event) => {
setMousePosition({ x: event.clientX, y: event.clientY });
};
const handleToggleVisibility = () => {
setIsVisible(!isVisible);
if (isVisible) {
console.log(props)
// 当隐藏时,可以清理一些数据
setChartData(null);
} else {
console.log('props',props)
setPointsPosition({
left: `${mousePosition.x + 100}px`,
top: `${mousePosition.y - 100}px`,
});
// 当显示时,可以模拟获取数据并传递给子组件
setChartData({
title,
@@ -42,15 +51,8 @@ function BlueRect(props) {
});
}
}
// 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>
<div onMouseMove={handleMouseMove}>
<div
// ref={parentRef}
className={`${cls.blueRect} ${cls[title]}`}
@@ -70,22 +72,31 @@ function BlueRect(props) {
}}
>
{title}
</span>
<span className="value" style={{ userSelect: "none", fontSize: "22px" }}>
</span>
{props.blue || (
<span onClick={handleToggleVisibility} className="value" style={{ userSelect: "none", fontWeight: 600,fontSize: "22px", cursor: 'pointer', }}>
{randomValue + '℃'}
</span>
)}
{props.blue? (
<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>
): (
<span className={`${cls.forecastValue}`} style={{ userSelect: "none", fontSize: "22px" }}>
{value}
</span>
)}
</div>
{isVisible && !props.blue && <Points dataSource={chartData}
// ref={pointsRef}
updateVisibilityState={updateVisibilityState} // 传递方法给子组件
style={{
position: "fixed",
zIndex: 9999,
style={{
position: "fixed",
left: pointsPosition.left,
top: pointsPosition.top,
zIndex: 9999,
}}/>}
</div>
);

View File

@@ -551,6 +551,5 @@
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);
}

View File

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

View File

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

View File

@@ -33,6 +33,7 @@ function KilnCenter({ onFloorChange }) {
position: "absolute",
top: "12%",
display: "flex",
zIndex:99,
flexDirection: "column",
}}
>
@@ -40,7 +41,7 @@ function KilnCenter({ onFloorChange }) {
{floor === 4 && (
<div
className="fireAndTime"
style={{ position: "absolute", top: "-112px", height: "400px" }}
style={{ position: "absolute", top: "-112px", height: "212px" }}
>
<Chart1 />
</div>

View File

@@ -2,7 +2,7 @@
transition: all 0.3s ease-out;
cursor: pointer;
user-select: none;
padding: 10px 40px;
padding: 10px 30px;
font-size: 32px;
line-height: 48px;
letter-spacing: 6px;

View File

@@ -1,7 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-08-28 15:27:46
* @LastEditTime: 2024-09-12 15:28:17
* @LastEditTime: 2024-09-14 08:39:56
* @LastEditors: zhp
* @Description:
*/
@@ -47,7 +47,7 @@ function FloorTwoToOne(props) {
left: "0px",
width: "calc(100% - 500px)",
height: "calc(100% - 7px)",
zIndex: 998,
zIndex: -99,
overflow: "clip",
}}
initial={{ opacity: 0 }}

View File

@@ -1,7 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-08-23 14:44:30
* @LastEditTime: 2024-09-11 16:45:05
* @LastEditTime: 2024-09-14 17:08:31
* @LastEditors: zhp
* @Description:
*/
@@ -16,17 +16,33 @@ import { HomeContext } from '../../../../../pages/Home';
function KilnBottomForecast(props) {
const value = useContext(HomeContext);
const kilnInfo = useSelector((state) => state.cutting);
const originalData = kilnInfo.forecastWeeklyChart;
const data = [];
const xData = [];
console.log('forecastWeeklyChart', kilnInfo.forecastWeeklyChart);
let latestDataTime;
if (originalData.length !== 0) {
originalData.forEach((ele) => {
data.push(ele.sum);
});
originalData.forEach((ele) => {
if (!latestDataTime || moment(ele.dataTime) > moment(latestDataTime)) {
latestDataTime = ele.dataTime;
}
});
let data = [];
let xData = [];
originalData.forEach((ele) => {
xData.push(moment(ele.dataTime).format('MM-DD'));
});
const oneDayLater = moment(latestDataTime).add(1, 'days')
xData.push(oneDayLater.format('MM-DD'));
const twoDaysLater = moment(latestDataTime).add(2, 'days');
xData.push(twoDaysLater.format('MM-DD'));
console.log('data',data);
}
kilnInfo.forecastWeeklyChart.forEach((ele) => {
data.push(ele.sum);
xData.push(moment(ele.dataTime).format('MM-DD'));
})
console.log('data',data);
const dataSource= {
color1: 'rgba(0, 255, 245, .4)',
color:'rgba(255, 194, 20, .4)',

View File

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

View File

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

View File

@@ -1,7 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-09-12 13:44:55
* @LastEditTime: 2024-09-13 14:53:34
* @LastEditTime: 2024-09-18 10:18:09
* @LastEditors: zhp
* @Description:
*/
@@ -14,7 +14,7 @@ import React, { useContext,useEffect,useState} from 'react'
import { HomeContext } from '../../../../../pages/Home';
function generateRandomArray(data) {
const randomArray = [];
for (let i = 0; i < 24; i++) {
for (let i = 0; i < 25; i++) {
let randomNumber;
do {
randomNumber = ((Math.random() * (data - 1)).toFixed(1));
@@ -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,18 +52,23 @@ 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, .4)',
color:'rgba(255, 194, 20, .4)',
color1: 'rgba(0, 255, 245, .2)',
color:'rgba(255, 194, 20, .2)',
yName:'℃',
// areaColor0:'rgba(18, 255, 245, 0.4)',
// areaColor0:'rgba(18, 255, 245, 0.2)',
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 (

View File

@@ -1,7 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-08-23 14:44:30
* @LastEditTime: 2024-09-10 14:46:21
* @LastEditTime: 2024-09-14 14:10:08
* @LastEditors: zhp
* @Description:
*/
@@ -17,10 +17,10 @@ function LeftTopForecast(props) {
const kilnOptimize = useSelector((state) => state.kilnOptimize);
const dataSource = {
color1: 'rgba(0, 255, 245, .4)',
color:'rgba(255, 194, 20, .4)',
color1: 'rgba(0, 255, 245, .2)',
color:'rgba(255, 194, 20, .2)',
yName:'℃',
// areaColor0:'rgba(18, 255, 245, 0.4)',
// areaColor0:'rgba(18, 255, 245, 0.2)',
areaColor1:'rgba(255, 234, 153, 0)',
msg: kilnOptimize.topTempAvgFor1h,
modelFlag: value,

View File

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

View File

@@ -3,7 +3,7 @@
}
.legend {
position: absolute;
right: 200px;
left: 200px;
top: 30px;
}
.item{
@@ -39,7 +39,7 @@
border-radius: 100%;
top: 50%;
background-color: rgba(255, 194, 20, 1);
left: -1.1vw;
left: -27px;
transform: translateY(-50%) translateX(50%);
}
.block{
@@ -75,6 +75,6 @@
background-color: rgba(0, 255, 245, 1);
border-radius: 100%;
top: 50%;
left: -1.1vw;
left: -27px;
transform: translateY(-50%) translateX(50%);
}

View File

@@ -1,7 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-08-22 09:09:25
* @LastEditTime: 2024-08-22 14:39:13
* @LastEditTime: 2024-09-14 14:38:47
* @LastEditors: zhp
* @Description:
*/
@@ -22,6 +22,8 @@ function DayNightToggle() {
style={{
display: "flex",
justifyContent: "center",
position: 'relative',
zIndex: 999,
}}
>
<div

View File

@@ -9,7 +9,7 @@
background: url(../../../../../assets/dayNight.png) no-repeat;
background-size: 100% 90%;
background-position: bottom;
color: #00fff788;
color: rgba(255, 255, 255, 1);
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;

View File

@@ -1,7 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-08-28 09:25:58
* @LastEditTime: 2024-09-13 14:22:01
* @LastEditTime: 2024-09-14 16:08:38
* @LastEditors: zhp
* @Description:
*/
@@ -9,7 +9,7 @@
export default function getOptions(data, times, range, yName,forecastList,color,color1,areaStyle,areaStyle1) {
return {
grid: { top: 38, right: 44, bottom: 20, left: 48 },
grid: { top: 38, right: 0, bottom: 20, left: 48 },
xAxis: {
type: "category",
data:times,
@@ -63,7 +63,11 @@ export default function getOptions(data, times, range, yName,forecastList,color,
label: {
show: true,
position: 'top',
color:'inherit'
color: 'inherit',
formatter: (params) => {
const index = params.dataIndex;
return index % 2 === 0? params.value : '';
}
},
symbol: 'circle',
symbolSize: 6,
@@ -98,40 +102,37 @@ export default function getOptions(data, times, range, yName,forecastList,color,
},
{
type: 'line',
stack: 'Total',
label: {
show: true,
position: 'top',
color:'inherit'
color: '#00FFF5', //改变折线点的颜色
formatter: (params) => {
const index = params.dataIndex;
if (data[index] && forecastList[index]) {
return '';
} else if (forecastList[index]) {
// 判断是否为奇数索引,隔一个显示一个
return index % 2 === 1? forecastList[index] : '';
} else {
return '';
}
}
},
symbol: 'circle',
symbolSize: 6,
// lineStyle:{
// color:color1
// },
itemStyle: {
normal: {
color: 'rgba(0, 255, 245, 1))', //改变折线点的颜色
itemStyle: {
color: '#00FFF5', //改变折线点的颜色
normal: {
color: '#00FFF5', //改变折线点的颜色
lineStyle: {
color: 'rgba(0, 255, 245, 1)' //改变折线颜色
color: '#00FFF5', //改变折线点的颜色
}
}
},
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: {

View File

@@ -1,7 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-08-28 09:25:58
* @LastEditTime: 2024-09-13 14:30:06
* @LastEditTime: 2024-09-14 15:53:44
* @LastEditors: zhp
* @Description:
*/
@@ -10,7 +10,52 @@ import ReactECharts from "echarts-for-react";
import getOptions from "./chart.config";
import * as echarts from "echarts";
import { useState } from "react";
function compareArrays(arr1, arr2) {
const result = [];
const longerLength = arr2.length;
for (let i = 0; i < longerLength; i++) {
if (i < arr1.length && arr1[i]) {
result.push(null);
} else if (i < arr1.length &&!arr1[i]) {
result.push(arr2[i]);
} else {
result.push(arr2[i]);
}
}
return result;
}
function generateRandomArray(data) {
const result = [];
for (let i = 0; i < 10; i++) {
if (i < data.length) {
let randomNumber;
do {
randomNumber = data[i] + Math.floor(Math.random() * 11) - 5;
} while (randomNumber < 0);
result.push(randomNumber);
} else {
let lastDataValue = data[data.length - 1];
let randomNumber;
do {
randomNumber = lastDataValue + Math.floor(Math.random() * 11) - 5;
} while (randomNumber < 0);
result.push(randomNumber);
}
}
return result;
}
function generateTimeArray() {
const now = new Date();
const timeArray = [];
for (let i = -7; i <= 2; i++) {
const newDate = new Date(now.getTime());
newDate.setMinutes(now.getMinutes() + i * 10);
const hours = newDate.getHours();
const minutes = newDate.getMinutes();
timeArray.push(`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`);
}
return timeArray;
}
function CommonChart(props) {
const { dataSource } = props;
@@ -19,26 +64,18 @@ function CommonChart(props) {
const color1 = dataSource.color1 || [];
const color = dataSource.color || [];
const yName = dataSource.yName;
const currentTime = new Date();
const times = [];
// }
const times = generateTimeArray();
let forecastList = []
if (modelFlag === true) {
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));
}
}
for(let i = 0; i < 7; i++) {
currentTime.setMinutes(currentTime.getMinutes() - 10);
const timeString = `${currentTime.getHours()}:${currentTime.getMinutes().toString().padStart(2, '0')}`;
times.unshift(timeString);
forecastList = generateRandomArray(data)
console.log('11111',forecastList)
}
console.log('forRYF',times);
// for(let i = 0; i < 7; i++) {
// currentTime.setMinutes(currentTime.getMinutes() - 10);
// const timeString = `${currentTime.getHours()}:${currentTime.getMinutes().toString().padStart(2, '0')}`;
// times.unshift(timeString);
// }
let areaStyle = {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

View File

@@ -1,13 +1,13 @@
/*
* @Author: zhp
* @Date: 2024-09-13 14:47:50
* @LastEditTime: 2024-09-13 15:44:40
* @LastEditTime: 2024-09-18 10:13:08
* @LastEditors: zhp
* @Description:
*/
import cls from "./index.module.css";
import ReactECharts from "echarts-for-react";
import getOptions from "./pointsChart.config";
import getOptions from "./pointsChart.js"
import * as echarts from "echarts";
import { useState } from "react";
function getTimeArray() {
@@ -17,7 +17,7 @@ function getTimeArray() {
const timeArray = [];
let currentTime = todaySeven;
while (currentTime < tomorrowSeven) {
while (currentTime <= tomorrowSeven) {
const hours = currentTime.getHours();
const minutes = currentTime.getMinutes();
if (minutes === 0) {
@@ -28,24 +28,54 @@ function getTimeArray() {
return timeArray;
}
// function compareArrays(arr1, arr2) {
// let hasMissingDataInFirstArray = false;
// for (let i = 0; i < arr1.length; i++) {
// if (!arr1[i]) {
// hasMissingDataInFirstArray = true;
// break;
// }
// }
// if (hasMissingDataInFirstArray) {
// const result = new Array(arr2.length).fill(null);
// for (let i = 0; i < arr1.length; i++) {
// if (!arr1[i]) {
// result[i] = arr2[i];
// }
// }
// return result;
// } else {
// return arr2.map(() => null);
// }
// }
function emptyFirstTwelve(arr) {
const newArr = [...arr];
for (let i = 0; i < 12 && i < newArr.length; i++) {
newArr[i] = null;
}
return newArr;
}
function emptyLastThirteen(arr) {
const newArr = [...arr];
const startIndex = Math.max(0, newArr.length - 13);
for (let i = startIndex; i < newArr.length; i++) {
newArr[i] = null;
}
return newArr;
}
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,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -68,7 +98,7 @@ function CommonChart(props) {
color:color1,
},
{
offset: .3,
offset: 1,
color: dataSource.areaColor1,
},
]),
@@ -113,7 +143,7 @@ function CommonChart(props) {
<div className={cls.commonChart}>
{data.length > 0 && (
<ReactECharts
option={getOptions(data, times, yRange, yName,forecastList,color,color1,areaStyle,areaStyle1)}
option={getOptions(emptyLastThirteen(data), times, yRange, yName,forecastList,color,color1,areaStyle,areaStyle1)}
style={{ height: "100%" }}
/>
)}

View File

@@ -1,14 +1,7 @@
/*
* @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
* @LastEditTime: 2024-09-18 11:21:11
* @LastEditors: zhp
* @Description:
*/
@@ -16,7 +9,8 @@
export default function getOptions(data, times, range, yName,forecastList,color,color1,areaStyle,areaStyle1) {
return {
grid: { top: 38, right: 44, bottom: 40, left: 48 },
grid: { top: 38, right: 0, bottom: 40, left: 48 },
color:['rgba(255, 194, 20, 1)','rgba(0, 255, 245, 1)'],
xAxis: {
type: "category",
data:times,
@@ -29,7 +23,7 @@ export default function getOptions(data, times, range, yName,forecastList,color,
axisLine: {
lineStyle: {
width: 1,
color: "#213259",
color: "#F1F9FF",
},
},
},
@@ -40,6 +34,13 @@ export default function getOptions(data, times, range, yName,forecastList,color,
fontSize: 12,
align: "right",
},
min: function(value) {//取最小值向下取整为最小刻度
return Math.floor(value.min)
},
max: function(value) {//取最大值向上取整为最大刻度
return Math.ceil(value.max)
},
scale: true, //自适应
type: "value",
axisLabel: {
color: "rgba(223, 241, 254, 1)",
@@ -49,12 +50,12 @@ export default function getOptions(data, times, range, yName,forecastList,color,
axisLine: {
show: true,
lineStyle: {
color: "#213259",
color: "#F1F9FF",
},
},
splitLine: {
lineStyle: {
color: "#213259a0",
color: "#58E7E9",
},
},
min:range[0],
@@ -71,14 +72,12 @@ export default function getOptions(data, times, range, yName,forecastList,color,
label: {
show: true,
position: 'top',
color:'inherit'
color: 'inherit',
formatter: (params) => {
const index = params.dataIndex;
return index % 2 === 0? params.value : '';
}
},
symbol: 'circle',
symbolSize: 6,
// prettier-ignore
// lineStyle:{
// color:color
// },
itemStyle: {
normal: {
color: 'rgba(255, 194, 20, 1)', //改变折线点的颜色
@@ -88,67 +87,48 @@ export default function getOptions(data, times, range, yName,forecastList,color,
}
},
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',
stack: 'Total',
label: {
show: true,
color: '#00FFF5', //改变折线点的颜色
position: 'top',
color:'inherit'
formatter: (params) => {
const index = params.dataIndex;
if (index < 11) {
return '';
} else if ((index - 11) % 2 === 1) {
return params.value;
} else {
return '';
}
}
},
symbol: 'circle',
symbolSize: 6,
// lineStyle:{
// color:color1
// },
itemStyle: {
normal: {
color: 'rgba(0, 255, 245, 1))', //改变折线点的颜色
itemStyle: {
color: '#00FFF5', //改变折线点的颜色
normal: {
color: '#00FFF5', //改变折线点的颜色
lineStyle: {
color: 'rgba(0, 255, 245, 1)' //改变折线颜色
color: '#00FFF5', //改变折线点的颜色
}
}
},
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'
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "xc-chart-tooltip",
// backgroundColor: ''
},
className: "xc-chart-tooltip",
// backgroundColor: ''
},
};
};
}

View File

@@ -1,7 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-09-02 09:56:13
* @LastEditTime: 2024-09-13 15:36:42
* @LastEditTime: 2024-09-14 17:07:49
* @LastEditors: zhp
* @Description:
*/
@@ -11,10 +11,21 @@ import ReactECharts from "echarts-for-react";
import getOptions from "./chart.config";
import * as echarts from "echarts";
import { useState } from "react";
function convertToNineDigitArray(sevenDigitArray) {
const nineDigitArray = [...sevenDigitArray];
while (nineDigitArray.length < 9) {
const lastValue = nineDigitArray[nineDigitArray.length - 1];
const minRandom = Math.max(-0.5, -lastValue);
const maxRandom = Math.min(0.5, 1 - lastValue);
const randomValue = lastValue + Math.random() * (maxRandom - minRandom) + minRandom;
const roundedValue = Math.min(1, Math.round(randomValue * 10) / 10);
nineDigitArray.push(roundedValue);
}
return nineDigitArray;
}
function CommonChart(props) {
const { dataSource } = props;
const data = dataSource.data || [];
const data = dataSource.data || []
const modelFlag = dataSource.modelFlag || false
const color1 = dataSource.color1 || [];
const color = dataSource.color || [];
@@ -23,14 +34,15 @@ function CommonChart(props) {
console.log('xData',props);
let forecastList = [];
if (modelFlag === true) {
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(forecastList)
forecastList = convertToNineDigitArray(data)
// 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('forecastList',forecastList)
}
let areaStyle = {
opacity: 0.8,

View File

@@ -27,7 +27,7 @@
background: url(../../../../../assets/paramsData.png) no-repeat;
background-size: 100% 90%;
background-position: bottom;
color: #00fff788;
color: rgba(255, 255, 255, 1);
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;

View File

@@ -1,13 +1,13 @@
/*
* @Author: zhp
* @Date: 2024-08-23 15:31:44
* @LastEditTime: 2024-08-28 13:31:32
* @LastEditTime: 2024-09-18 10:44:06
* @LastEditors: zhp
* @Description:
*/
import cls from "./index.module.css";
import BottomBarItem from "../../../../Common/BottomItemBackgroundForecastTop";
import BottomBarItem from "../../../../Common/BottomItemBackgroundForecastBottom";
import { useSelector } from "react-redux";
function LeftMiddleForecast() {
const kilnInfo = useSelector((state) => state.cutting);
@@ -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>

View File

@@ -7,10 +7,10 @@
display: grid;
grid-template-rows: auto 1fr 1fr;
/* gap: 4px; */
padding-top: 6px;
padding-top: 4px;
.info__item {
/* width: 100%; */
background: url('../../../../../assets/forecastBack.png') no-repeat;
background: url('../../../../../assets/blueBack.png') no-repeat;
background-size: 100% 100%;
position: relative;
/* width: 220px; */
@@ -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; */
}
@@ -49,6 +42,7 @@
}
}
.info__item:last-child {
color: #ffff;
/* width: 100%; */
background: url('../../../../../assets/lastBack.png') no-repeat;
background-size: 100% 100%;

View File

@@ -1,7 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-08-20 14:09:17
* @LastEditTime: 2024-08-30 14:53:39
* @LastEditTime: 2024-09-14 09:09:29
* @LastEditors: zhp
* @Description:
*/
@@ -13,7 +13,7 @@ import DayNightToggle from "../dayButton";
import SeasonToggle from "../seasonButton";
import InputDataToggle from "../inputData";
function paramsInput(props) {
const handleClick = () => {
const handleClick = () => {
props.onSendValueToParent(true);
};
return (

View File

@@ -18,6 +18,8 @@
.bottom{
/* height: 100%; */
margin-top: 20px;
position: relative;
z-index:100;
/* display: flex; */
/* justify-content: center; */
}

View File

@@ -1,7 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-08-22 14:00:57
* @LastEditTime: 2024-09-02 09:30:37
* @LastEditTime: 2024-09-14 14:40:14
* @LastEditors: zhp
* @Description:
*/
@@ -23,7 +23,9 @@ function SeasonToggle() {
display: "flex",
width:"10%",
// marginBottom: "24px",
flexDirection: "column",/* 这行设置为垂直布局 */
flexDirection: "column",/* 这行设置为垂直布局 */
position: 'relative',
zIndex: 999,
}}
>
<div

View File

@@ -13,7 +13,7 @@
background: url(../../../../../assets/seasonChange.png) no-repeat;
background-size: 90% 100%;
background-position: bottom;
color: #00fff788;
color: rgba(255, 255, 255, 1);
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;

View File

@@ -1,7 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-08-23 13:56:11
* @LastEditTime: 2024-08-30 16:30:35
* @LastEditTime: 2024-09-18 10:54:39
* @LastEditors: zhp
* @Description:
*/
@@ -32,12 +32,12 @@ export default function Index() {
<div style={{ height: '261px', marginTop: '24px' }}>
<LeftMiddleForecast />
</div>
<div style={{ flex: 1,marginTop: '24px' }}>
<div style={{ height: '422px',marginTop: '24px' }}>
<LeftBottomForecast/>
</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' }}

View File

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

View File

@@ -37,7 +37,7 @@ export default function Home({ active }) {
const handleValueFromGrandChild = (value) => {
setModelFlag(value);
console.log('modelFlag',modelFlag);
console.log('modelFlag',value);
};
const ctx = useSelector((state) => state.fireInfo);
const fireDir = ctx.fireDirection || null;