+
);
}
diff --git a/src/components/Common/forecastRect/index.module.css b/src/components/Common/forecastRect/index.module.css
index 6fd7d4e..4a815d7 100644
--- a/src/components/Common/forecastRect/index.module.css
+++ b/src/components/Common/forecastRect/index.module.css
@@ -543,3 +543,14 @@
left: 2260px;
transform: scale(0.8) skewX(7deg);
}
+.forecastValue{
+ width: 100%;
+ height: 29px;
+ text-align: center;
+ margin-top: 4px;
+ background: linear-gradient( 270deg, rgba(0,255,251,0.67) 0%, rgba(0,255,245,0.64) 100%);
+ box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5);
+ opacity: 0.7;
+ cursor: pointer;
+ backdrop-filter: blur(3px);
+}
diff --git a/src/components/Common/forecastRect/visContext.jsx b/src/components/Common/forecastRect/visContext.jsx
new file mode 100644
index 0000000..a6583aa
--- /dev/null
+++ b/src/components/Common/forecastRect/visContext.jsx
@@ -0,0 +1,12 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-09-12 16:43:21
+ * @LastEditTime: 2024-09-12 16:43:21
+ * @LastEditors: zhp
+ * @Description:
+ */
+import React from 'react';
+
+const VisibilityContext = React.createContext();
+
+export default VisibilityContext;
diff --git a/src/components/Common/pointItemBackgroundForecast/Container.jsx b/src/components/Common/pointItemBackgroundForecast/Container.jsx
new file mode 100644
index 0000000..fdbabc0
--- /dev/null
+++ b/src/components/Common/pointItemBackgroundForecast/Container.jsx
@@ -0,0 +1,64 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-09-12 16:11:31
+ * @LastEditTime: 2024-09-13 13:39:40
+ * @LastEditors: zhp
+ * @Description:
+ */
+import { useEffect } from "react";
+import useIcon from "../../../hooks/useIcon";
+import cls from "./container.module.scss";
+import React, { useState } from 'react';
+const Container = (props) => {
+ let icon = useIcon(props.icon);
+ // console.log(props);
+ // const [visible, setVisible] = useState(props.isVisible);
+ const desc = props.desc;
+ const [localVisible, setLocalVisible] = useState(props.isVisible);
+
+ // 确保局部状态与传入的isVisible同步
+ useEffect(() => {
+ setLocalVisible(props.isVisible);
+ }, [props.isVisible]);
+
+ const handleChangeIsVisible = () => {
+ const newVisibility = !localVisible;
+ setLocalVisible(newVisibility);
+ props.onVisibilityChange(newVisibility);
+ };
+ return (
+
{value}
-
+ {props.blue || (
+
+ {generateRandomNearNumber(parseInt(value)) + '℃'}
+
+ )}
+
+ {isVisible && !props.blue &&
+
+ );
+};
+
+export default Container;
diff --git a/src/components/Common/pointItemBackgroundForecast/container.module.scss b/src/components/Common/pointItemBackgroundForecast/container.module.scss
new file mode 100644
index 0000000..289ade7
--- /dev/null
+++ b/src/components/Common/pointItemBackgroundForecast/container.module.scss
@@ -0,0 +1,59 @@
+.container {
+ padding: 24px;
+ display: flex;
+ flex-direction: column;
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ position: relative;
+
+ .container__head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ img {
+ width: 32px;
+ &.bigger {
+ width: 28px;
+ }
+ }
+
+ h2 {
+ font-family: "微软雅黑", "Microsoft YaHei UI", -apple-system,
+ BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei",
+ "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei",
+ sans-serif;
+ margin: 0;
+ margin-left: 6px;
+ font-size: 22px;
+ color: #fff;
+ letter-spacing: 2px;
+ font-weight: 500;
+ }
+
+ .graphBaseDesc {
+ margin: 0 6px;
+ margin-left: 108px;
+ font-size: 16px;
+ line-height: 1;
+ color: #76fff9;
+ flex: 1;
+ }
+ }
+
+ .container__content {
+ height: 1px;
+ flex: 1;
+ // background: #25a78672;
+ }
+}
+
+// .bgGood {
+// background: url("../assets/good.png");
+// }
+// .bgEnergy {
+// background: url("../assets/energy.png");
+// }
+// .bgSmoke {
+// background: url("../assets/smoke.png");
+// }
diff --git a/src/components/Common/pointItemBackgroundForecast/index.jsx b/src/components/Common/pointItemBackgroundForecast/index.jsx
new file mode 100644
index 0000000..3834866
--- /dev/null
+++ b/src/components/Common/pointItemBackgroundForecast/index.jsx
@@ -0,0 +1,41 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-09-12 15:36:30
+ * @LastEditTime: 2024-09-13 13:51:31
+ * @LastEditors: zhp
+ * @Description:
+ */
+import cls from './index.module.css';
+import Container from './Container';
+import React, { useState } from 'react';
+function BottomBarItem(props) {
+ const [isVisible, setIsVisible] = useState(false);
+
+ // 确保父组件传递了 onVisibilityChange 回调
+ if (typeof props.onVisibilityChange !== 'function') {
+ throw new Error('onVisibilityChange must be a function');
+ }
+
+ // 更新内部状态并通知父组件
+ const handleVisibilityChange = (newVisibilityState) => {
+ console.log(newVisibilityState);
+
+ setIsVisible(newVisibilityState);
+ props.onVisibilityChange(newVisibilityState); // 通知父组件可见性变化
+ };
+ return (
+
+ 
+
+ {props.title}
+ {desc &&{desc}
}
+ {props.children}
+ {props.pending && (
+
+ )}
+
+
+ 实际值
+
+
+ 预测值
+
+
+
+
+
+ {
+ const index = params.dataIndex;
+ return index % 2 === 0? params.value : '';
+ }
},
symbol: 'circle',
symbolSize: 6,
// prettier-ignore
- lineStyle:{
- color:color
+ // lineStyle:{
+ // color:color
+ // },
+ itemStyle: {
+ normal: {
+ color: 'rgba(255, 194, 20, 1)', //改变折线点的颜色
+ lineStyle: {
+ color: 'rgba(255, 194, 20, 1)' //改变折线颜色
+ }
+ }
},
data: data,
// markLine: {
@@ -90,32 +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: '#00FFF5', //改变折线点的颜色
+ lineStyle: {
+ 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: {
diff --git a/src/components/Modules/KilnOptimize/components/forecastRightChart/index.jsx b/src/components/Modules/KilnOptimize/components/forecastRightChart/index.jsx
index a70709c..0c92d84 100644
--- a/src/components/Modules/KilnOptimize/components/forecastRightChart/index.jsx
+++ b/src/components/Modules/KilnOptimize/components/forecastRightChart/index.jsx
@@ -1,7 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-08-28 09:25:58
- * @LastEditTime: 2024-08-30 16:57:38
+ * @LastEditTime: 2024-09-14 15:53:44
* @LastEditors: zhp
* @Description:
*/
@@ -10,7 +10,52 @@ import ReactECharts from "echarts-for-react";
import getOptions from "./chart.config";
import * as echarts from "echarts";
import { useState } from "react";
-
+function compareArrays(arr1, arr2) {
+ const result = [];
+ const longerLength = arr2.length;
+ for (let i = 0; i < longerLength; i++) {
+ if (i < arr1.length && arr1[i]) {
+ result.push(null);
+ } else if (i < arr1.length &&!arr1[i]) {
+ result.push(arr2[i]);
+ } else {
+ result.push(arr2[i]);
+ }
+ }
+ return result;
+}
+function generateRandomArray(data) {
+ const result = [];
+ for (let i = 0; i < 10; i++) {
+ if (i < data.length) {
+ let randomNumber;
+ do {
+ randomNumber = data[i] + Math.floor(Math.random() * 11) - 5;
+ } while (randomNumber < 0);
+ result.push(randomNumber);
+ } else {
+ let lastDataValue = data[data.length - 1];
+ let randomNumber;
+ do {
+ randomNumber = lastDataValue + Math.floor(Math.random() * 11) - 5;
+ } while (randomNumber < 0);
+ result.push(randomNumber);
+ }
+ }
+ return result;
+}
+function generateTimeArray() {
+ const now = new Date();
+ const timeArray = [];
+ for (let i = -7; i <= 2; i++) {
+ const newDate = new Date(now.getTime());
+ newDate.setMinutes(now.getMinutes() + i * 10);
+ const hours = newDate.getHours();
+ const minutes = newDate.getMinutes();
+ timeArray.push(`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`);
+ }
+ return timeArray;
+}
function CommonChart(props) {
const { dataSource } = props;
@@ -19,27 +64,20 @@ function CommonChart(props) {
const color1 = dataSource.color1 || [];
const color = dataSource.color || [];
const yName = dataSource.yName;
- const currentTime = new Date();
- const times = [];
- // }
+ const times = generateTimeArray();
let forecastList = []
if (modelFlag === true) {
- for (let i = 0; i < data.length; i++) {
- let item = data[i];
- let min = item - 5;
- let max = item + 5;
- let randomValue = Math.random() * (max - min) + min;
- forecastList.push(randomValue.toFixed(1));
- }
+ forecastList = generateRandomArray(data)
+ console.log('11111',forecastList)
}
-
-
- 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= {
+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, [
{
offset: 0,
@@ -53,13 +91,14 @@ function CommonChart(props) {
origin: "start",
}
let areaStyle1 = {
+ opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color:color1,
},
{
- offset: 1,
+ offset: .3,
color: dataSource.areaColor1,
},
]),
diff --git a/src/components/Modules/KilnOptimize/components/forecastRightChart/points.jsx b/src/components/Modules/KilnOptimize/components/forecastRightChart/points.jsx
new file mode 100644
index 0000000..898d7cd
--- /dev/null
+++ b/src/components/Modules/KilnOptimize/components/forecastRightChart/points.jsx
@@ -0,0 +1,174 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-09-13 14:47:50
+ * @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.js"
+import * as echarts from "echarts";
+import { useState } from "react";
+function getTimeArray() {
+ const now = new Date();
+ const todaySeven = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 7, 0, 0);
+ const tomorrowSeven = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 7, 0, 0);
+
+ const timeArray = [];
+ let currentTime = todaySeven;
+ while (currentTime <= tomorrowSeven) {
+ const hours = currentTime.getHours();
+ const minutes = currentTime.getMinutes();
+ if (minutes === 0) {
+ timeArray.push(`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`);
+ }
+ currentTime = new Date(currentTime.getTime() + 60 * 60000); // 增加 1 小时
+ }
+
+ return timeArray;
+}
+// function compareArrays(arr1, arr2) {
+// let hasMissingDataInFirstArray = false;
+// for (let i = 0; i < arr1.length; i++) {
+// if (!arr1[i]) {
+// hasMissingDataInFirstArray = true;
+// break;
+// }
+// }
+
+// if (hasMissingDataInFirstArray) {
+// const result = new Array(arr2.length).fill(null);
+// for (let i = 0; i < arr1.length; i++) {
+// if (!arr1[i]) {
+// result[i] = arr2[i];
+// }
+// }
+// return result;
+// } else {
+// return arr2.map(() => null);
+// }
+// }
+function emptyFirstTwelve(arr) {
+ const newArr = [...arr];
+ for (let i = 0; i < 12 && i < newArr.length; i++) {
+ newArr[i] = null;
+ }
+ return newArr;
+}
+function emptyLastThirteen(arr) {
+ const newArr = [...arr];
+ const startIndex = Math.max(0, newArr.length - 13);
+ for (let i = startIndex; i < newArr.length; i++) {
+ newArr[i] = null;
+ }
+ return newArr;
+}
+function CommonChart(props) {
+ const { dataSource } = props;
+
+ const data = dataSource.data || [];
+ // const modelFlag = dataSource.modelFlag || false;
+ const color1 = dataSource.color1 || [];
+ const color = dataSource.color || [];
+ const yName = dataSource.yName;
+ const times = getTimeArray();
+ // }
+ let forecastList = []
+ for (let i = 0; i < data.length; i++) {
+ let item = data[i];
+ let min = item - 5;
+ let max = item + 5;
+ let randomValue = Math.random() * (max - min) + min;
+ forecastList.push(randomValue.toFixed(1));
+ }
+ console.log('times',times)
+ let areaStyle = {
+ opacity: 0.8,
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: color,
+ },
+ {
+ offset: 1,
+ color: dataSource.areaColor1,
+ },
+ ]),
+ origin: "start",
+ }
+ let areaStyle1 = {
+ opacity: 0.8,
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color:color1,
+ },
+ {
+ offset: 1,
+ color: dataSource.areaColor1,
+ },
+ ]),
+ origin: "start",
+ }
+ // let pieces = [
+ // {
+ // lte: dataSource.msg ? dataSource.msg.lte : 0,
+ // color: "#FFCB59",
+ // },
+ // {
+ // gt: dataSource.msg ? dataSource.msg.lte : 0,
+ // lte: dataSource.msg ? dataSource.msg.gt : 0,
+ // color: dataSource.color,
+ // },
+ // {
+ // gt: dataSource.msg ? dataSource.msg.gt : 0,
+ // color: "#FFCB59",
+ // },
+ // ];
+
+ const [yRange] = useState([]);
+ // useEffect(() => {
+ // if (data.length > 0) {
+ // var standardValue = dataSource.msg.sp;
+ // var maxY = (standardValue * 100 + dataSource.range[1] * 100) / 100;
+ // var minY = (standardValue * 100 + dataSource.range[0] * 100) / 100;
+ // // 计算最大最小值是否超标
+ // const maxValue = Math.max(...data);
+ // const minValue = Math.min(...data);
+ // if (maxValue > maxY) {
+ // maxY = Math.ceil(maxValue);
+ // }
+ // if (minValue < minY) {
+ // minY = Math.floor(minValue);
+ // }
+ // setYRange([minY, maxY]);
+ // }
+ // }, [dataSource, data]);
+
+ return (
+
+ {data.length > 0 && (
+
+ );
+}
+
+export default CommonChart;
diff --git a/src/components/Modules/KilnOptimize/components/forecastRightChart/pointsChart.js b/src/components/Modules/KilnOptimize/components/forecastRightChart/pointsChart.js
new file mode 100644
index 0000000..820dd73
--- /dev/null
+++ b/src/components/Modules/KilnOptimize/components/forecastRightChart/pointsChart.js
@@ -0,0 +1,141 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-09-13 15:39:36
+ * @LastEditTime: 2024-09-14 16:02:21
+ * @LastEditors: zhp
+ * @Description:
+ */
+/*
+ * @Author: zhp
+ * @Date: 2024-08-28 09:25:58
+ * @LastEditTime: 2024-09-13 14:22:01
+ * @LastEditors: zhp
+ * @Description:
+ */
+// import * as echarts from "echarts";
+
+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,
+ axisLabel: {
+ color: "rgba(223, 241, 254, 1)",
+ fontSize: 12,
+ rotate:45
+ },
+ axisTick: { show: false },
+ axisLine: {
+ lineStyle: {
+ width: 1,
+ color: "#F1F9FF",
+ },
+ },
+ },
+ yAxis: {
+ name: "单位: "+yName,
+ nameTextStyle: {
+ color: "rgba(223, 241, 254, 1)",
+ 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)",
+ fontSize: 12,
+ formatter: "{value}",
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "#F1F9FF",
+ },
+ },
+ splitLine: {
+ lineStyle: {
+ color: "#F1F9FF",
+ },
+ },
+ min:range[0],
+ max:range[1]
+ },
+ // visualMap: {
+ // show: false,
+ // dimension: 1,
+ // pieces: pieces
+ // },
+ series: [
+ {
+ type: 'line',
+ label: {
+ show: true,
+ position: 'top',
+ color: 'inherit',
+ formatter: (params) => {
+ const index = params.dataIndex;
+ return index % 2 === 0? params.value : '';
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: 'rgba(255, 194, 20, 1)', //改变折线点的颜色
+ lineStyle: {
+ color: 'rgba(255, 194, 20, 1)' //改变折线颜色
+ }
+ }
+ },
+ data: data,
+ areaStyle:areaStyle
+ },
+ {
+ type: 'line',
+ stack: 'Total',
+ label: {
+ show: true,
+ color: '#00FFF5', //改变折线点的颜色
+ position: 'top',
+ formatter: (params) => {
+ const index = params.dataIndex;
+ if (index < 11) {
+ return '';
+ } else if ((index - 11) % 2 === 1) {
+ return params.value;
+ } else {
+ return '';
+ }
+ }
+ },
+ symbol: 'circle',
+ symbolSize: 6,
+ itemStyle: {
+ color: '#00FFF5', //改变折线点的颜色
+ normal: {
+ color: '#00FFF5', //改变折线点的颜色
+ lineStyle: {
+ color: '#00FFF5', //改变折线点的颜色
+ }
+ }
+ },
+ areaStyle:areaStyle1,
+ data: forecastList,
+ }
+ ],
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: 'cross'
+ },
+ className: "xc-chart-tooltip",
+ // backgroundColor: ''
+ },
+ };
+}
diff --git a/src/components/Modules/KilnOptimize/components/forecastRightChart/yield.jsx b/src/components/Modules/KilnOptimize/components/forecastRightChart/yield.jsx
index 6afa3fa..c6c9ee9 100644
--- a/src/components/Modules/KilnOptimize/components/forecastRightChart/yield.jsx
+++ b/src/components/Modules/KilnOptimize/components/forecastRightChart/yield.jsx
@@ -1,13 +1,31 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-09-02 09:56:13
+ * @LastEditTime: 2024-09-14 17:07:49
+ * @LastEditors: zhp
+ * @Description:
+ */
import cls from "./index.module.css";
import ReactECharts from "echarts-for-react";
import getOptions from "./chart.config";
import * as echarts from "echarts";
import { useState } from "react";
-
+function convertToNineDigitArray(sevenDigitArray) {
+ const nineDigitArray = [...sevenDigitArray];
+ while (nineDigitArray.length < 9) {
+ const lastValue = nineDigitArray[nineDigitArray.length - 1];
+ const minRandom = Math.max(-0.5, -lastValue);
+ const maxRandom = Math.min(0.5, 1 - lastValue);
+ const randomValue = lastValue + Math.random() * (maxRandom - minRandom) + minRandom;
+ const roundedValue = Math.min(1, Math.round(randomValue * 10) / 10);
+ nineDigitArray.push(roundedValue);
+ }
+ return nineDigitArray;
+}
function CommonChart(props) {
const { dataSource } = props;
- const data = dataSource.data || [];
+ const data = dataSource.data || []
const modelFlag = dataSource.modelFlag || false
const color1 = dataSource.color1 || [];
const color = dataSource.color || [];
@@ -16,15 +34,18 @@ function CommonChart(props) {
console.log('xData',props);
let forecastList = [];
if (modelFlag === true) {
- for (let i = 0; i < data.length; i++) {
- let item = data[i];
- let min = item - .5;
- let max = item + .5;
- let randomValue = Math.random() * (max - min) + min;
- forecastList.push(randomValue.toFixed(1));
- }
+ forecastList = convertToNineDigitArray(data)
+ // for (let i = 0; i < data.length; i++) {
+ // let item = data[i];
+ // let min = item - .5;
+ // let max = item + .5;
+ // let randomValue = Math.random() * (max - min) + min;
+ // forecastList.push(randomValue.toFixed(1));
+ // }
+ console.log('forecastList',forecastList)
}
- let areaStyle= {
+ let areaStyle = {
+ opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
@@ -38,6 +59,7 @@ function CommonChart(props) {
origin: "start",
}
let areaStyle1 = {
+ opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
@@ -50,41 +72,7 @@ function CommonChart(props) {
]),
origin: "start",
}
- // let pieces = [
- // {
- // lte: dataSource.msg ? dataSource.msg.lte : 0,
- // color: "#FFCB59",
- // },
- // {
- // gt: dataSource.msg ? dataSource.msg.lte : 0,
- // lte: dataSource.msg ? dataSource.msg.gt : 0,
- // color: dataSource.color,
- // },
- // {
- // gt: dataSource.msg ? dataSource.msg.gt : 0,
- // color: "#FFCB59",
- // },
- // ];
-
const [yRange] = useState([]);
- // useEffect(() => {
- // if (data.length > 0) {
- // var standardValue = dataSource.msg.sp;
- // var maxY = (standardValue * 100 + dataSource.range[1] * 100) / 100;
- // var minY = (standardValue * 100 + dataSource.range[0] * 100) / 100;
- // // 计算最大最小值是否超标
- // const maxValue = Math.max(...data);
- // const minValue = Math.min(...data);
- // if (maxValue > maxY) {
- // maxY = Math.ceil(maxValue);
- // }
- // if (minValue < minY) {
- // minY = Math.floor(minValue);
- // }
- // setYRange([minY, maxY]);
- // }
- // }, [dataSource, data]);
-
return (
+ 暂无数据 +
+ )} +
{data.length > 0 && (
diff --git a/src/components/Modules/KilnOptimize/components/inputData/index.jsx b/src/components/Modules/KilnOptimize/components/inputData/index.jsx
index c33b745..194a7d4 100644
--- a/src/components/Modules/KilnOptimize/components/inputData/index.jsx
+++ b/src/components/Modules/KilnOptimize/components/inputData/index.jsx
@@ -1,7 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-08-22 14:00:57
- * @LastEditTime: 2024-08-30 13:55:33
+ * @LastEditTime: 2024-09-02 09:50:49
* @LastEditors: zhp
* @Description:
*/
@@ -82,7 +82,7 @@ function InputDataToggle() {
cls.content
}>
);
diff --git a/src/components/Modules/KilnOptimize/components/seasonButton/index.module.css b/src/components/Modules/KilnOptimize/components/seasonButton/index.module.css
index c6fae7f..6d4af30 100644
--- a/src/components/Modules/KilnOptimize/components/seasonButton/index.module.css
+++ b/src/components/Modules/KilnOptimize/components/seasonButton/index.module.css
@@ -3,7 +3,7 @@
cursor: pointer;
user-select: none;
padding:40px 35px;
- font-size: 32px;
+ font-size: 28px;
display: flex;
align-items: center;
justify-content: center;
@@ -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;
@@ -22,6 +22,8 @@
.menuItem.active,
.menuItem:hover {
background: url(../../../../../assets/seasonActive.png) no-repeat;
+ font-size: 28px;
+ color: rgba(255, 255, 255, 1);
background-size: 100% 100%;
}
diff --git a/src/components/Modules/KilnOptimize/forecastRightSide/index.module.scss b/src/components/Modules/KilnOptimize/forecastRightSide/index.module.scss
index bf01600..c0337f3 100644
--- a/src/components/Modules/KilnOptimize/forecastRightSide/index.module.scss
+++ b/src/components/Modules/KilnOptimize/forecastRightSide/index.module.scss
@@ -11,4 +11,6 @@
display: flex;
justify-content: space-between;
gap: 16px;
+ position: relative;
+ z-index: 99;
}
diff --git a/src/components/container.module.scss b/src/components/container.module.scss
index 73ef39d..50d1c77 100644
--- a/src/components/container.module.scss
+++ b/src/components/container.module.scss
@@ -11,7 +11,7 @@
align-items: center;
img {
- width: 24px;
+ width: 32px;
&.bigger {
width: 28px;
diff --git a/src/hooks/useIcon.js b/src/hooks/useIcon.js
index 17e5602..15c6a81 100644
--- a/src/hooks/useIcon.js
+++ b/src/hooks/useIcon.js
@@ -1,7 +1,7 @@
/*
* @Author: zhp
* @Date: 2024-08-20 14:09:17
- * @LastEditTime: 2024-08-26 15:28:43
+ * @LastEditTime: 2024-09-12 16:27:09
* @LastEditors: zhp
* @Description:
*/
@@ -20,6 +20,7 @@ import IconKilnTop from '../assets/Icon/kilnTop.png';
import IconKilnBottom from '../assets/Icon/kilnBottom.png';
import yieldRate from '../assets/Icon/yieldRate.png';
import forecast from '../assets/Icon/forecast.png';
+import close from '../assets/Icon/close.png';
function useIcon(iconName) {
@@ -53,6 +54,8 @@ function useIcon(iconName) {
? IconKilnBottom
: iconName == 'yieldRate'
? yieldRate
+ : iconName == 'close'
+ ? close
: IconDefault;
}
diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx
index c997812..e9b551f 100644
--- a/src/pages/Home/index.jsx
+++ b/src/pages/Home/index.jsx
@@ -37,7 +37,7 @@ export default function Home({ active }) {
const handleValueFromGrandChild = (value) => {
setModelFlag(value);
- console.log(modelFlag);
+ console.log('modelFlag',value);
};
const ctx = useSelector((state) => state.fireInfo);
const fireDir = ctx.fireDirection || null;
@@ -79,7 +79,7 @@ export default function Home({ active }) {
>
{active == "窑炉总览" && 焦炉煤气设定总量
@@ -104,7 +104,7 @@ function InputDataToggle() { cls.content }>助燃风流量
@@ -133,7 +133,7 @@ function InputDataToggle() { cls.content }>产品规格设定标准
@@ -155,7 +155,7 @@ function InputDataToggle() { cls.content }>循环水流量
@@ -184,7 +184,7 @@ function InputDataToggle() { cls.content }>配料水分含量
@@ -206,7 +206,7 @@ function InputDataToggle() { cls.content }>玻璃液出口宽度
diff --git a/src/components/Modules/KilnOptimize/components/inputData/index.module.css b/src/components/Modules/KilnOptimize/components/inputData/index.module.css index a2f5b97..9baf753 100644 --- a/src/components/Modules/KilnOptimize/components/inputData/index.module.css +++ b/src/components/Modules/KilnOptimize/components/inputData/index.module.css @@ -23,11 +23,11 @@ padding:5px 10px; font-size: 32px; line-height: 48px; - letter-spacing: 6px; + letter-spacing: 2px; 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; @@ -82,7 +82,7 @@ backdrop-filter: blur(0px); } - .outTitle{ + .outputTitle{ flex: 1; height: 56px; position: relative; @@ -94,7 +94,7 @@ letter-spacing: 1px; text-align: right; } - .outTitle::after { + .outputTitle::after { content: ""; top: 73%; position: absolute; @@ -106,3 +106,127 @@ box-shadow: 0px 2px 6px 0px rgba(43,255,223,0.55); backdrop-filter: blur(0px); } +.productTitle{ + flex: 1; + height: 56px; + position: relative; + font-family: PingFangSC, PingFang SC; + font-weight: 400; + font-size: 24px; + color: #FFFFFF; + line-height: 56px; + letter-spacing: 1px; + text-align: right; +} +.productTitle::after { + content: ""; + top: 73%; + position: absolute; + bottom: 0; + left: 14%; + width: 85%; /* 调整此处的宽度值来改变下划线的宽度，例如 50% 表示占文字宽度的一半 */ + height: 4px; /* 调整下划线的高度 */ + background-image: linear-gradient(173deg, rgba(47, 47, 49, 0) 0%, #2BFFDF 100%); + box-shadow: 0px 2px 6px 0px rgba(43,255,223,0.55); + backdrop-filter: blur(0px); + } +.waterTitle{ + flex: 1; + height: 56px; + position: relative; + font-family: PingFangSC, PingFang SC; + font-weight: 400; + font-size: 24px; + color: #FFFFFF; + line-height: 56px; + letter-spacing: 1px; + text-align: right; +} +.waterTitle::after { + content: ""; + top: 73%; + position: absolute; + bottom: 0; + left: 40%; + width: 60%; /* 调整此处的宽度值来改变下划线的宽度，例如 50% 表示占文字宽度的一半 */ + height: 4px; /* 调整下划线的高度 */ + background-image: linear-gradient(173deg, rgba(47, 47, 49, 0) 0%, #2BFFDF 100%); + box-shadow: 0px 2px 6px 0px rgba(43,255,223,0.55); + backdrop-filter: blur(0px); + } +.peiWaterTitle{ + flex: 1; + height: 56px; + position: relative; + font-family: PingFangSC, PingFang SC; + font-weight: 400; + font-size: 24px; + color: #FFFFFF; + line-height: 56px; + letter-spacing: 1px; + text-align: right; +} +.peiWaterTitle::after { + content: ""; + top: 73%; + position: absolute; + bottom: 0; + left: 30%; + width: 68%; /* 调整此处的宽度值来改变下划线的宽度，例如 50% 表示占文字宽度的一半 */ + height: 4px; /* 调整下划线的高度 */ + background-image: linear-gradient(173deg, rgba(47, 47, 49, 0) 0%, #2BFFDF 100%); + box-shadow: 0px 2px 6px 0px rgba(43,255,223,0.55); + backdrop-filter: blur(0px); + } +.windTitle{ + flex: 1; + height: 56px; + position: relative; + font-family: PingFangSC, PingFang SC; + font-weight: 400; + font-size: 24px; + color: #FFFFFF; + line-height: 56px; + letter-spacing: 1px; + text-align: right; +} +.windTitle::after { + content: ""; + top: 73%; + position: absolute; + bottom: 0; + left: 39%; + width: 59%; /* 调整此处的宽度值来改变下划线的宽度，例如 50% 表示占文字宽度的一半 */ + height: 4px; /* 调整下划线的高度 */ + background-image: linear-gradient(173deg, rgba(47, 47, 49, 0) 0%, #2BFFDF 100%); + box-shadow: 0px 2px 6px 0px rgba(43,255,223,0.55); + backdrop-filter: blur(0px); + } +.gasTitle{ + flex: 1; + height: 56px; + position: relative; + font-family: PingFangSC, PingFang SC; + font-weight: 400; + font-size: 24px; + color: #FFFFFF; + line-height: 56px; + letter-spacing: 1px; + text-align: right; +} +.gasTitle::after { + content: ""; + top: 73%; + position: absolute; + bottom: 0; + left: 11%; + width: 88%; /* 调整此处的宽度值来改变下划线的宽度，例如 50% 表示占文字宽度的一半 */ + height: 4px; /* 调整下划线的高度 */ + background-image: linear-gradient(173deg, rgba(47, 47, 49, 0) 0%, #2BFFDF 100%); + box-shadow: 0px 2px 6px 0px rgba(43,255,223,0.55); + backdrop-filter: blur(0px); + } +.unit{ +color: rgba(43, 254, 222, 1); + +} diff --git a/src/components/Modules/KilnOptimize/components/leftBottomForecast/index.jsx b/src/components/Modules/KilnOptimize/components/leftBottomForecast/index.jsx index 98523e0..8c1dbb4 100644 --- a/src/components/Modules/KilnOptimize/components/leftBottomForecast/index.jsx +++ b/src/components/Modules/KilnOptimize/components/leftBottomForecast/index.jsx @@ -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); diff --git a/src/components/Modules/KilnOptimize/components/leftBottomForecast/index.module.css b/src/components/Modules/KilnOptimize/components/leftBottomForecast/index.module.css index 43ff21b..0ea7770 100644 --- a/src/components/Modules/KilnOptimize/components/leftBottomForecast/index.module.css +++ b/src/components/Modules/KilnOptimize/components/leftBottomForecast/index.module.css @@ -6,15 +6,15 @@ height: 1px; display: grid; grid-template-rows: auto 1fr 1fr; - gap: 10px; - padding-top: 18px; + /* gap: 4px; */ + 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; */ - height: 45px; + height: 60px; /* background: rgba(10,154,255,0.15); */ /* box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5); */ /* border: 1px solid; */ @@ -27,7 +27,7 @@ user-select: none; display: flex; align-items: center; - gap: 12px; + gap: 14px; .square{ /* flex: 1; */ margin-left: 20px; @@ -45,7 +45,16 @@ width: 320px; /* flex: 1; */ text-align: right; + color: rgba(255, 255, 255, 1); } } + .info__item:last-child { + color: #ffff; + /* width: 100%; */ + background: url('../../../../../assets/lastBack.png') no-repeat; + background-size: 100% 100%; + + } } + } diff --git a/src/components/Modules/KilnOptimize/components/leftMiddleForecast/index.module.css b/src/components/Modules/KilnOptimize/components/leftMiddleForecast/index.module.css index d864f0c..dec67b0 100644 --- a/src/components/Modules/KilnOptimize/components/leftMiddleForecast/index.module.css +++ b/src/components/Modules/KilnOptimize/components/leftMiddleForecast/index.module.css @@ -19,7 +19,7 @@ background: rgba(10,154,255,0.15); /* box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5); */ border: 1px solid; - color: #58E7E9; + color: rgba(81, 180, 255, 1); border-image: linear-gradient(80deg, rgba(0, 255, 245, 0.55), rgba(0, 255, 245, 0)) 1 1; font-size: 20px; letter-spacing: 1.43px; @@ -34,7 +34,7 @@ margin-left: 20px; width: 6px; height: 6px; - background: #00FFF5; + background: rgba(81, 180, 255, 1); box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5), 0px 0px 4px 1px #58E7E9; } .label { @@ -57,6 +57,7 @@ .value { flex: 5; text-align: left; + color: rgba(255, 255, 255, 1); } } .info__item { @@ -66,7 +67,7 @@ background: rgba(10,154,255,0.15); /* box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5); */ border: 1px solid; - color: #58E7E9; + color: rgba(81, 180, 255, 1); border-image: linear-gradient(80deg, rgba(0, 255, 245, 0.55), rgba(0, 255, 245, 0)) 1 1; font-size: 20px; letter-spacing: 1.43px; @@ -81,7 +82,7 @@ margin-left: 20px; width: 6px; height: 6px; - background: #00FFF5; + background: rgba(81, 180, 255, 1); box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5), 0px 0px 4px 1px #58E7E9; } .label { @@ -104,6 +105,7 @@ .value { flex: 3; text-align: left; + color: rgba(255, 255, 255, 1); } } .info__item::before{ diff --git a/src/components/Modules/KilnOptimize/components/leftTopForecast/index.module.css b/src/components/Modules/KilnOptimize/components/leftTopForecast/index.module.css index 918746f..9efe59f 100644 --- a/src/components/Modules/KilnOptimize/components/leftTopForecast/index.module.css +++ b/src/components/Modules/KilnOptimize/components/leftTopForecast/index.module.css @@ -56,6 +56,7 @@ .value { flex: 3; text-align: left; + color: rgba(255, 255, 255, 1); } } .info__item::before{ diff --git a/src/components/Modules/KilnOptimize/components/paramsInput/index.jsx b/src/components/Modules/KilnOptimize/components/paramsInput/index.jsx index 13ff2c4..8873b27 100644 --- a/src/components/Modules/KilnOptimize/components/paramsInput/index.jsx +++ b/src/components/Modules/KilnOptimize/components/paramsInput/index.jsx @@ -1,11 +1,11 @@ /* * @Author: zhp * @Date: 2024-08-20 14:09:17 - * @LastEditTime: 2024-08-30 14:53:39 + * @LastEditTime: 2024-09-14 09:09:29 * @LastEditors: zhp * @Description: */ -// 窑炉预测控制参数输入 +// AI预测控制参数输入 import cls from "./index.module.css"; import BottomBarItem from "../../../../Common/forecastLargeBackground"; // import CommonChart from "../CommonChart"; @@ -13,7 +13,7 @@ import DayNightToggle from "../dayButton"; import SeasonToggle from "../seasonButton"; import InputDataToggle from "../inputData"; function paramsInput(props) { - const handleClick = () => { + const handleClick = () => { props.onSendValueToParent(true); }; return ( diff --git a/src/components/Modules/KilnOptimize/components/paramsInput/index.module.css b/src/components/Modules/KilnOptimize/components/paramsInput/index.module.css index 205a554..a51e7b3 100644 --- a/src/components/Modules/KilnOptimize/components/paramsInput/index.module.css +++ b/src/components/Modules/KilnOptimize/components/paramsInput/index.module.css @@ -18,6 +18,8 @@ .bottom{ /* height: 100%; */ margin-top: 20px; + position: relative; + z-index:100; /* display: flex; */ /* justify-content: center; */ } @@ -32,7 +34,7 @@ background: url(../../../../../assets/modelButton.png) no-repeat; background-size: 100% 90%; background-position: bottom; - color: #00fff788; + color: #ffffff; 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; diff --git a/src/components/Modules/KilnOptimize/components/seasonButton/index.jsx b/src/components/Modules/KilnOptimize/components/seasonButton/index.jsx index abdd654..9774f9d 100644 --- a/src/components/Modules/KilnOptimize/components/seasonButton/index.jsx +++ b/src/components/Modules/KilnOptimize/components/seasonButton/index.jsx @@ -1,7 +1,7 @@ /* * @Author: zhp * @Date: 2024-08-22 14:00:57 - * @LastEditTime: 2024-08-22 14:33:33 + * @LastEditTime: 2024-09-14 14:40:14 * @LastEditors: zhp * @Description: */ @@ -23,7 +23,9 @@ function SeasonToggle() { display: "flex", width:"10%", // marginBottom: "24px", - flexDirection: "column",/* 这行设置为垂直布局 */ + flexDirection: "column",/* 这行设置为垂直布局 */ + position: 'relative', + zIndex: 999, }} > onSeasonUpdate(3)}
>
- 夏季
+ 秋季
onSeasonUpdate(4)}
>
- 夏季
+ 冬季
{active == "窑炉总览" && (
<>
@@ -158,7 +158,7 @@ export default function Home({ active }) {
{active == "窑炉内部" &&