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

Compare commits

base: mt-fe-group:248fafdf2c067f84b687c96a287666a159775d3d
Branches Tags
mt-fe-group:master
mt-fe-group:features/warning
mt-fe-group:zjl
mt-fe-group:zhp
mt-fe-group:testing-redux
..
compare: mt-fe-group:e1f95bd009152062b7682a7780153a2368f38868
Branches Tags
mt-fe-group:features/warning
mt-fe-group:zjl
mt-fe-group:zhp
mt-fe-group:master
mt-fe-group:testing-redux

No commits in common. "248fafdf2c067f84b687c96a287666a159775d3d" and "e1f95bd009152062b7682a7780153a2368f38868" have entirely different histories.
248fafdf2c ... e1f95bd009

24 changed files with 160 additions and 150 deletions
Show Stats Expand all files Collapse all files

BIN
src/assets/blueBack.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.2 KiB

BIN
src/assets/forecastBack.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 273 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

2
src/components/Common/BottomItemBackgroundForecastBottom/index.module.css
View File

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

1
src/components/Common/ForecastTemperature/leftbox.module.scss
View File

@ -20,7 +20,6 @@
.box__inner {
padding-top: 12px;
margin-left: 20px;
.box__label {
color: #fffa;

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

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

32
src/components/Modules/KilnOptimize/components/KilnBottomForecast/index.jsx
View File

@ -1,7 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-08-23 14:44:30
* @LastEditTime: 2024-09-14 17:08:31
* @LastEditTime: 2024-09-11 16:45:05
* @LastEditors: zhp
* @Description:
*/
@ -16,33 +16,17 @@ 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 = [];
let latestDataTime;
if (originalData.length !== 0) {
originalData.forEach((ele) => {
console.log('forecastWeeklyChart', kilnInfo.forecastWeeklyChart);
let data = [];
let xData = [];
kilnInfo.forecastWeeklyChart.forEach((ele) => {
data.push(ele.sum);
});
originalData.forEach((ele) => {
if (!latestDataTime || moment(ele.dataTime) > moment(latestDataTime)) {
latestDataTime = ele.dataTime;
}
});
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);
}
const dataSource= {
color1: 'rgba(0, 255, 245, .4)',
color:'rgba(255, 194, 20, .4)',

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

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

8
src/components/Modules/KilnOptimize/components/KilnTopForecast/index.jsx
View File

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

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

@ -26,7 +26,7 @@
height: 1px;
position: absolute;
top: 50%;
left: -21px;
left: -23.3px;
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: -24px;
left: -1.1vw;
transform: translateY(-50%) translateX(50%);
}
.block{
@ -62,7 +62,7 @@
height: 1px;
position: absolute;
top: 50%;
left: -22.5px;
left: -24px;
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: -26px;
left: -1.1vw;
transform: translateY(-50%) translateX(50%);
}

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

@ -3,7 +3,7 @@
}
.legend {
position: absolute;
left: 200px;
right: 200px;
top: 30px;
}
.item{

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

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

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

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

43
src/components/Modules/KilnOptimize/components/forecastRightChart/chart.config.js
View File

@ -1,7 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-08-28 09:25:58
* @LastEditTime: 2024-09-14 16:08:38
* @LastEditTime: 2024-09-14 09:05:44
* @LastEditors: zhp
* @Description:
*/
@ -63,11 +63,7 @@ export default function getOptions(data, times, range, yName,forecastList,color,
label: {
show: true,
position: 'top',
color: 'inherit',
formatter: (params) => {
const index = params.dataIndex;
return index % 2 === 0? params.value : '';
}
color:'inherit'
},
symbol: 'circle',
symbolSize: 6,
@ -102,37 +98,40 @@ export default function getOptions(data, times, range, yName,forecastList,color,
},
{
type: 'line',
stack: 'Total',
label: {
show: true,
position: 'top',
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 '';
}
}
color:'inherit'
},
symbol: 'circle',
symbolSize: 6,
// lineStyle:{
// color:color1
// },
itemStyle: {
color: '#00FFF5', //改变折线点的颜色
normal: {
color: '#00FFF5', //改变折线点的颜色
color: 'rgba(0, 255, 245, 1))', //改变折线点的颜色
lineStyle: {
color: '#00FFF5', //改变折线点的颜色
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: {

37
src/components/Modules/KilnOptimize/components/forecastRightChart/index.jsx
View File

@ -1,7 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-08-28 09:25:58
* @LastEditTime: 2024-09-14 15:53:44
* @LastEditTime: 2024-09-14 10:57:55
* @LastEditors: zhp
* @Description:
*/
@ -26,7 +26,7 @@ function compareArrays(arr1, arr2) {
}
function generateRandomArray(data) {
const result = [];
for (let i = 0; i < 10; i++) {
for (let i = 0; i < 7; i++) {
if (i < data.length) {
let randomNumber;
do {
@ -44,18 +44,6 @@ function generateRandomArray(data) {
}
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;
@ -64,18 +52,21 @@ function CommonChart(props) {
const color1 = dataSource.color1 || [];
const color = dataSource.color || [];
const yName = dataSource.yName;
const times = generateTimeArray();
const currentTime = new Date();
const times = [];
let forecastList = []
if (modelFlag === true) {
forecastList = generateRandomArray(data)
console.log('11111',forecastList)
console.log('11111',compareArrays(data,forecastList))
}
const d = [10, 20, 30];
const f = generateRandomArray(d);
console.log('forRYF',f);
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);
}
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, [
@ -143,7 +134,7 @@ console.log('forRYF',times);
<div className={cls.commonChart}>
{data.length > 0 && (
<ReactECharts
option={getOptions(data, times, yRange, yName,forecastList,color,color1,areaStyle,areaStyle1)}
option={getOptions(data, times, yRange, yName,compareArrays(data,forecastList),color,color1,areaStyle,areaStyle1)}
style={{ height: "100%" }}
/>
)}

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

@ -1,13 +1,13 @@
/*
* @Author: zhp
* @Date: 2024-09-13 14:47:50
* @LastEditTime: 2024-09-14 15:53:14
* @LastEditTime: 2024-09-14 10:47:18
* @LastEditors: zhp
* @Description:
*/
import cls from "./index.module.css";
import ReactECharts from "echarts-for-react";
import getOptions from "./pointsChart.js"
import getOptions from "./pointsChart.config";
import * as echarts from "echarts";
import { useState } from "react";
function getTimeArray() {
@ -105,7 +105,7 @@ function CommonChart(props) {
color:color1,
},
{
offset: 1,
offset: .3,
color: dataSource.areaColor1,
},
]),
@ -150,7 +150,7 @@ function CommonChart(props) {
<div className={cls.commonChart}>
{data.length > 0 && (
<ReactECharts
option={getOptions(emptyLastThirteen(data), times, yRange, yName,forecastList,color,color1,areaStyle,areaStyle1)}
option={getOptions(emptyLastThirteen(data), times, yRange, yName,emptyFirstTwelve(forecastList),color,color1,areaStyle,areaStyle1)}
style={{ height: "100%" }}
/>
)}

69
src/components/Modules/KilnOptimize/components/forecastRightChart/pointsChart.js → src/components/Modules/KilnOptimize/components/forecastRightChart/pointsChart.config.js
View File

@ -1,7 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-09-13 15:39:36
* @LastEditTime: 2024-09-14 16:02:21
* @LastEditTime: 2024-09-14 11:20:39
* @LastEditors: zhp
* @Description:
*/
@ -17,7 +17,6 @@
export default function getOptions(data, times, range, yName,forecastList,color,color1,areaStyle,areaStyle1) {
return {
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,
@ -30,7 +29,7 @@ export default function getOptions(data, times, range, yName,forecastList,color,
axisLine: {
lineStyle: {
width: 1,
color: "#F1F9FF",
color: "#213259",
},
},
},
@ -41,13 +40,6 @@ 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)",
@ -57,12 +49,12 @@ export default function getOptions(data, times, range, yName,forecastList,color,
axisLine: {
show: true,
lineStyle: {
color: "#F1F9FF",
color: "#213259",
},
},
splitLine: {
lineStyle: {
color: "#F1F9FF",
color: "#213259a0",
},
},
min:range[0],
@ -85,6 +77,12 @@ export default function getOptions(data, times, range, yName,forecastList,color,
return index % 2 === 0? params.value : '';
}
},
symbol: 'circle',
symbolSize: 6,
// prettier-ignore
// lineStyle:{
// color:color
// },
itemStyle: {
normal: {
color: 'rgba(255, 194, 20, 1)', //改变折线点的颜色
@ -94,39 +92,62 @@ 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 '';
}
return index % 2 === 0? params.value : '';
}
},
symbol: 'circle',
symbolSize: 6,
// lineStyle:{
// color:color1
// },
itemStyle: {
color: '#00FFF5', //改变折线点的颜色
normal: {
color: '#00FFF5', //改变折线点的颜色
color: 'rgba(0, 255, 245, 1))', //改变折线点的颜色
lineStyle: {
color: '#00FFF5', //改变折线点的颜色
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: {

52
src/components/Modules/KilnOptimize/components/forecastRightChart/yield.jsx
View File

@ -1,7 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-09-02 09:56:13
* @LastEditTime: 2024-09-14 17:07:49
* @LastEditTime: 2024-09-14 10:59:47
* @LastEditors: zhp
* @Description:
*/
@ -11,21 +11,43 @@ 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);
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 nineDigitArray;
}
return result;
}
function generateRandomArray(data) {
const result = [];
for (let i = 0; i < 7; 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 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 || [];
@ -34,7 +56,7 @@ function CommonChart(props) {
console.log('xData',props);
let forecastList = [];
if (modelFlag === true) {
forecastList = convertToNineDigitArray(data)
forecastList = generateRandomArray
// for (let i = 0; i < data.length; i++) {
// let item = data[i];
// let min = item - .5;
@ -42,7 +64,7 @@ function CommonChart(props) {
// let randomValue = Math.random() * (max - min) + min;
// forecastList.push(randomValue.toFixed(1));
// }
console.log('forecastList',forecastList)
// console.log(forecastList)
}
let areaStyle = {
opacity: 0.8,
@ -77,7 +99,7 @@ function CommonChart(props) {
<div className={cls.commonChart}>
{data.length > 0 && (
<ReactECharts
option={getOptions(data, xData, yRange, yName,forecastList,color,color1,areaStyle,areaStyle1)}
option={getOptions(data, xData, yRange, yName,compareArrays(data,forecastList),color,color1,areaStyle,areaStyle1)}
style={{ height: "100%" }}
/>
)}

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

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

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

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

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

@ -10,7 +10,7 @@
padding-top: 6px;
.info__item {
/* width: 100%; */
background: url('../../../../../assets/blueBack.png') no-repeat;
background: url('../../../../../assets/forecastBack.png') no-repeat;
background-size: 100% 100%;
position: relative;
/* width: 220px; */
@ -49,7 +49,6 @@
}
}
.info__item:last-child {
color: #ffff;
/* width: 100%; */
background: url('../../../../../assets/lastBack.png') no-repeat;
background-size: 100% 100%;

3
src/components/Modules/KilnOptimize/components/paramsInput/index.module.css
View File

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

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

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

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

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

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

@ -11,6 +11,4 @@
display: flex;
justify-content: space-between;
gap: 16px;
position: relative;
z-index: 99;
}