作者 | SHA1 | 備註 | 提交日期 |
---|---|---|---|
‘937886381’ | 9589fba7c2 | Merge branch 'features/warning' into zhp | 5 天之前 |
‘937886381’ | 0739f8cf00 | 修改 | 5 天之前 |
juzi | e1f95bd009 |
Merge pull request 'zhp' (#8) from zhp into features/warning
Reviewed-on: http://git.picaiba.com/mt-fe-group/xuchang-new/pulls/8 |
5 天之前 |
@@ -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; | ||||
} | } |
@@ -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; | ||||
@@ -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; | ||||
@@ -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 = []; | |||||
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= { | 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)', | ||||
@@ -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)', | |||||
color:'rgba(255, 194, 20, .4)', | |||||
color1: 'rgba(0, 255, 245, .2)', | |||||
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, | ||||
@@ -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)', | |||||
color:'rgba(255, 194, 20, .4)', | |||||
color1: 'rgba(0, 255, 245, .2)', | |||||
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, | ||||
@@ -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%); | ||||
} | } |
@@ -3,7 +3,7 @@ | |||||
} | } | ||||
.legend { | .legend { | ||||
position: absolute; | position: absolute; | ||||
right: 200px; | |||||
left: 200px; | |||||
top: 30px; | top: 30px; | ||||
} | } | ||||
.item{ | .item{ | ||||
@@ -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 | ||||
@@ -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; | ||||
@@ -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: 'rgba(0, 255, 245, 1))', //改变折线点的颜色 | |||||
color: '#00FFF5', //改变折线点的颜色 | |||||
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: { | ||||
@@ -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 = []; | |||||
const times = generateTimeArray(); | |||||
let forecastList = [] | let forecastList = [] | ||||
if (modelFlag === true) { | if (modelFlag === true) { | ||||
forecastList = generateRandomArray(data) | 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 = { | 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%" }} | ||||
/> | /> | ||||
)} | )} | ||||
@@ -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%" }} | ||||
/> | /> | ||||
)} | )} | ||||
@@ -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; | |||||
return index % 2 === 0? params.value : ''; | |||||
const index = params.dataIndex; | |||||
if (index < 11) { | |||||
return ''; | |||||
} else if ((index - 11) % 2 === 1) { | |||||
return params.value; | |||||
} else { | |||||
return ''; | |||||
} | |||||
} | } | ||||
}, | }, | ||||
symbol: 'circle', | symbol: 'circle', | ||||
symbolSize: 6, | symbolSize: 6, | ||||
// lineStyle:{ | |||||
// color:color1 | |||||
// }, | |||||
itemStyle: { | |||||
normal: { | |||||
color: 'rgba(0, 255, 245, 1))', //改变折线点的颜色 | |||||
itemStyle: { | |||||
color: '#00FFF5', //改变折线点的颜色 | |||||
normal: { | |||||
color: '#00FFF5', //改变折线点的颜色 | |||||
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: { |
@@ -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) { | |||||
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 < 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); | |||||
} | |||||
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; | |||||
return nineDigitArray; | |||||
} | } | ||||
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%" }} | ||||
/> | /> | ||||
)} | )} | ||||
@@ -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; | ||||
@@ -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); | ||||
@@ -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%; | ||||
@@ -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; */ | ||||
} | } | ||||
@@ -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 | ||||
@@ -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; | ||||
@@ -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; | |||||
} | } |