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

zhp #9

Merged
juzi merged 2 commits from zhp into features/warning 2024-09-15 13:14:52 +08:00
Conversation 0 Commits 2 Files Changed 24 +150 -160
24 changed files with 150 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/blueBack.png Normal file
View File

Binary file not shown.
Side by Side

After

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: 8.2 KiB

After

Width:  |  Height:  |  Size: 273 KiB

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

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

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

@ -20,6 +20,7 @@
.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 40px;
padding: 10px 30px;
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-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 data = [];
let xData = [];
kilnInfo.forecastWeeklyChart.forEach((ele) => {
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;
}
});
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 09:21:16
* @LastEditTime: 2024-09-14 14:10:23
* @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, .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,

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-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,

8
src/components/Modules/KilnOptimize/components/KilnTopForecast/index.module.css
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: -26px;
transform: translateY(-50%) translateX(50%);
}

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

@ -3,7 +3,7 @@
}
.legend {
position: absolute;
right: 200px;
left: 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-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

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: #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;

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 09:05:44
* @LastEditTime: 2024-09-14 16:08:38
* @LastEditors: zhp
* @Description:
*/
@ -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: {
color: '#00FFF5', //改变折线点的颜色
normal: {
color: 'rgba(0, 255, 245, 1))', //改变折线点的颜色
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: {

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 10:57:55
* @LastEditTime: 2024-09-14 15:53:44
* @LastEditors: zhp
* @Description:
*/
@ -26,7 +26,7 @@ function compareArrays(arr1, arr2) {
}
function generateRandomArray(data) {
const result = [];
for (let i = 0; i < 7; i++) {
for (let i = 0; i < 10; i++) {
if (i < data.length) {
let randomNumber;
do {
@ -44,6 +44,18 @@ 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;
@ -52,21 +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) {
forecastList = generateRandomArray(data)
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('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, [
@ -134,7 +143,7 @@ console.log('forRYF',f);
<div className={cls.commonChart}>
{data.length > 0 && (
<ReactECharts
option={getOptions(data, times, yRange, yName,compareArrays(data,forecastList),color,color1,areaStyle,areaStyle1)}
option={getOptions(data, times, yRange, yName,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 10:47:18
* @LastEditTime: 2024-09-14 15:53:14
* @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() {
@ -105,7 +105,7 @@ function CommonChart(props) {
color:color1,
},
{
offset: .3,
offset: 1,
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,emptyFirstTwelve(forecastList),color,color1,areaStyle,areaStyle1)}
option={getOptions(emptyLastThirteen(data), times, yRange, yName,forecastList,color,color1,areaStyle,areaStyle1)}
style={{ height: "100%" }}
/>
)}

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

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

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

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-08-28 13:31:32
* @LastEditTime: 2024-09-14 15:18:21
* @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);

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/forecastBack.png') no-repeat;
background: url('../../../../../assets/blueBack.png') no-repeat;
background-size: 100% 100%;
position: relative;
/* width: 220px; */
@ -49,6 +49,7 @@
}
}
.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,9 +18,8 @@
.bottom{
/* height: 100%; */
margin-top: 20px;
position: absolute;
position: relative;
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-02 09:30:37
* @LastEditTime: 2024-09-14 14:40:14
* @LastEditors: zhp
* @Description:
*/
@ -24,6 +24,8 @@ 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: #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;

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

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