Compare commits

..

3 Commits

Author SHA1 Message Date
‘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
24 changed files with 150 additions and 160 deletions

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

View File

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

View File

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

View File

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

View File

@ -1,7 +1,7 @@
/* /*
* @Author: zhp * @Author: zhp
* @Date: 2024-08-23 14:44:30 * @Date: 2024-08-23 14:44:30
* @LastEditTime: 2024-09-11 16:45:05 * @LastEditTime: 2024-09-14 17:08:31
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
*/ */
@ -16,17 +16,33 @@ import { HomeContext } from '../../../../../pages/Home';
function KilnBottomForecast(props) { function KilnBottomForecast(props) {
const value = useContext(HomeContext); const value = useContext(HomeContext);
const kilnInfo = useSelector((state) => state.cutting); 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 = []; originalData.forEach((ele) => {
let xData = []; 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= { const dataSource= {
color1: 'rgba(0, 255, 245, .4)', color1: 'rgba(0, 255, 245, .4)',
color:'rgba(255, 194, 20, .4)', color:'rgba(255, 194, 20, .4)',

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

View File

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

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: -26px;
transform: translateY(-50%) translateX(50%); transform: translateY(-50%) translateX(50%);
} }

View File

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

View File

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

View File

@ -9,7 +9,7 @@
background: url(../../../../../assets/dayNight.png) no-repeat; background: url(../../../../../assets/dayNight.png) no-repeat;
background-size: 100% 90%; background-size: 100% 90%;
background-position: bottom; background-position: bottom;
color: #00fff788; color: rgba(255, 255, 255, 1);
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
'PingFang SC', 'Microsoft YaHei', '微软雅黑', 'Microsoft YaHei UI', 'PingFang SC', 'Microsoft YaHei', '微软雅黑', 'Microsoft YaHei UI',
'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif; 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;

View File

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

View File

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

View File

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

View File

@ -1,7 +1,7 @@
/* /*
* @Author: zhp * @Author: zhp
* @Date: 2024-09-13 15:39:36 * @Date: 2024-09-13 15:39:36
* @LastEditTime: 2024-09-14 11:20:39 * @LastEditTime: 2024-09-14 16:02:21
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
*/ */
@ -17,6 +17,7 @@
export default function getOptions(data, times, range, yName,forecastList,color,color1,areaStyle,areaStyle1) { export default function getOptions(data, times, range, yName,forecastList,color,color1,areaStyle,areaStyle1) {
return { return {
grid: { top: 38, right: 0, 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: { xAxis: {
type: "category", type: "category",
data:times, data:times,
@ -29,7 +30,7 @@ export default function getOptions(data, times, range, yName,forecastList,color,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
width: 1, width: 1,
color: "#213259", color: "#F1F9FF",
}, },
}, },
}, },
@ -40,6 +41,13 @@ export default function getOptions(data, times, range, yName,forecastList,color,
fontSize: 12, fontSize: 12,
align: "right", align: "right",
}, },
min: function(value) {//取最小值向下取整为最小刻度
return Math.floor(value.min)
},
max: function(value) {//取最大值向上取整为最大刻度
return Math.ceil(value.max)
},
scale: true, //自适应
type: "value", type: "value",
axisLabel: { axisLabel: {
color: "rgba(223, 241, 254, 1)", color: "rgba(223, 241, 254, 1)",
@ -49,12 +57,12 @@ export default function getOptions(data, times, range, yName,forecastList,color,
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "#213259", color: "#F1F9FF",
}, },
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: "#213259a0", color: "#F1F9FF",
}, },
}, },
min:range[0], min:range[0],
@ -77,12 +85,6 @@ export default function getOptions(data, times, range, yName,forecastList,color,
return index % 2 === 0? params.value : ''; return index % 2 === 0? params.value : '';
} }
}, },
symbol: 'circle',
symbolSize: 6,
// prettier-ignore
// lineStyle:{
// color:color
// },
itemStyle: { itemStyle: {
normal: { normal: {
color: 'rgba(255, 194, 20, 1)', //改变折线点的颜色 color: 'rgba(255, 194, 20, 1)', //改变折线点的颜色
@ -92,62 +94,39 @@ export default function getOptions(data, times, range, yName,forecastList,color,
} }
}, },
data: data, data: data,
// markLine: {
// symbol: 'none',
// label:{
// show:true,
// position:'end',
// formatter:'标准线',
// color:'#FFCB59',
// fontSize: 12,
// },
// lineStyle:{
// color:'#FFCB59'
// },
// data: seriesData.markLineData
// },
areaStyle:areaStyle areaStyle:areaStyle
}, },
{ {
type: 'line', type: 'line',
stack: 'Total',
label: { label: {
show: true, show: true,
color: '#00FFF5', //改变折线点的颜色
position: 'top', position: 'top',
color: 'inherit',
formatter: (params) => { formatter: (params) => {
const index = params.dataIndex; 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', symbol: 'circle',
symbolSize: 6, symbolSize: 6,
// lineStyle:{ itemStyle: {
// color:color1 color: '#00FFF5', //改变折线点的颜色
// }, normal: {
itemStyle: { color: '#00FFF5', //改变折线点的颜色
normal: {
color: 'rgba(0, 255, 245, 1))', //改变折线点的颜色
lineStyle: { lineStyle: {
color: 'rgba(0, 255, 245, 1)' //改变折线颜色 color: '#00FFF5', //改变折线点的颜色
} }
} }
}, },
areaStyle:areaStyle1, areaStyle:areaStyle1,
// prettier-ignore
data: forecastList, data: forecastList,
// markLine: {
// symbol: 'none',
// label:{
// show:true,
// position:'end',
// formatter:'标准线',
// color:'#FFCB59',
// fontSize: 12,
// },
// data: seriesData.markLineData
// },
// areaStyle: seriesData.areaStyle
} }
], ],
tooltip: { tooltip: {

View File

@ -1,7 +1,7 @@
/* /*
* @Author: zhp * @Author: zhp
* @Date: 2024-09-02 09:56:13 * @Date: 2024-09-02 09:56:13
* @LastEditTime: 2024-09-14 10:59:47 * @LastEditTime: 2024-09-14 17:07:49
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
*/ */
@ -11,43 +11,21 @@ import ReactECharts from "echarts-for-react";
import getOptions from "./chart.config"; import getOptions from "./chart.config";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { useState } from "react"; import { useState } from "react";
function compareArrays(arr1, arr2) { function convertToNineDigitArray(sevenDigitArray) {
const result = []; const nineDigitArray = [...sevenDigitArray];
const longerLength = arr2.length; while (nineDigitArray.length < 9) {
for (let i = 0; i < longerLength; i++) { const lastValue = nineDigitArray[nineDigitArray.length - 1];
if (i < arr1.length && arr1[i]) { const minRandom = Math.max(-0.5, -lastValue);
result.push(null); const maxRandom = Math.min(0.5, 1 - lastValue);
} else if (i < arr1.length &&!arr1[i]) { const randomValue = lastValue + Math.random() * (maxRandom - minRandom) + minRandom;
result.push(arr2[i]); const roundedValue = Math.min(1, Math.round(randomValue * 10) / 10);
} else { nineDigitArray.push(roundedValue);
result.push(arr2[i]);
}
} }
return result; return nineDigitArray;
}
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) { function CommonChart(props) {
const { dataSource } = props; const { dataSource } = props;
const data = dataSource.data || []; const data = dataSource.data || []
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 || [];
@ -56,7 +34,7 @@ function CommonChart(props) {
console.log('xData',props); console.log('xData',props);
let forecastList = []; let forecastList = [];
if (modelFlag === true) { if (modelFlag === true) {
forecastList = generateRandomArray forecastList = convertToNineDigitArray(data)
// for (let i = 0; i < data.length; i++) { // for (let i = 0; i < data.length; i++) {
// let item = data[i]; // let item = data[i];
// let min = item - .5; // let min = item - .5;
@ -64,7 +42,7 @@ function CommonChart(props) {
// let randomValue = Math.random() * (max - min) + min; // let randomValue = Math.random() * (max - min) + min;
// forecastList.push(randomValue.toFixed(1)); // forecastList.push(randomValue.toFixed(1));
// } // }
// console.log(forecastList) console.log('forecastList',forecastList)
} }
let areaStyle = { let areaStyle = {
opacity: 0.8, opacity: 0.8,
@ -99,7 +77,7 @@ function CommonChart(props) {
<div className={cls.commonChart}> <div className={cls.commonChart}>
{data.length > 0 && ( {data.length > 0 && (
<ReactECharts <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%" }} style={{ height: "100%" }}
/> />
)} )}

View File

@ -27,7 +27,7 @@
background: url(../../../../../assets/paramsData.png) no-repeat; background: url(../../../../../assets/paramsData.png) no-repeat;
background-size: 100% 90%; background-size: 100% 90%;
background-position: bottom; background-position: bottom;
color: #00fff788; color: rgba(255, 255, 255, 1);
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
'PingFang SC', 'Microsoft YaHei', '微软雅黑', 'Microsoft YaHei UI', 'PingFang SC', 'Microsoft YaHei', '微软雅黑', 'Microsoft YaHei UI',
'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif; 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;

View File

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

View File

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

View File

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

View File

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

View File

@ -13,7 +13,7 @@
background: url(../../../../../assets/seasonChange.png) no-repeat; background: url(../../../../../assets/seasonChange.png) no-repeat;
background-size: 90% 100%; background-size: 90% 100%;
background-position: bottom; background-position: bottom;
color: #00fff788; color: rgba(255, 255, 255, 1);
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
'PingFang SC', 'Microsoft YaHei', '微软雅黑', 'Microsoft YaHei UI', 'PingFang SC', 'Microsoft YaHei', '微软雅黑', 'Microsoft YaHei UI',
'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif; 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;

View File

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