Merge branch 'features/warning' into zjl
This commit is contained in:
commit
fa5cae9a78
@ -1,3 +1,10 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-20 14:09:17
|
||||
* @LastEditTime: 2024-09-09 14:58:53
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
import "./global.css";
|
||||
import "./index.css";
|
||||
import Head from "./components/Common/Company";
|
||||
@ -10,7 +17,7 @@ import RulerContainer from "./components/Tools/Ruler";
|
||||
import { Switch } from "antd";
|
||||
import { createPortal } from "react-dom";
|
||||
|
||||
const Menus = ["窑炉总览", "窑炉内部", "窑炉优化","退火监测", "质检统计", "能耗分析"];
|
||||
const Menus = ["窑炉总览", "窑炉内部", "AI窑炉","退火监测", "质检统计", "能耗分析"];
|
||||
const LUNBO_INTERVAL = 60 * 1000;
|
||||
function App() {
|
||||
const { styles, value, setValue } = useSlider(100);
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
<stop stop-color="#F43D0A" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="窑炉预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="AI预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="预测" transform="translate(-790.000000, -134.000000)" fill-rule="nonzero">
|
||||
<g id="编组-32" transform="translate(763.000000, 122.000000)">
|
||||
<g id="泡界线" filter="url(#filter-1)" transform="translate(32.000000, 16.000000)">
|
||||
|
||||
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
@ -20,7 +20,7 @@
|
||||
<stop stop-color="#F43D0A" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="窑炉预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="AI预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="预测" transform="translate(-1036.201540, -134.000000)" fill-rule="nonzero">
|
||||
<g id="编组-33" transform="translate(1009.000000, 122.000000)">
|
||||
<g id="碹顶" filter="url(#filter-1)" transform="translate(32.201540, 16.000000)">
|
||||
|
||||
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
@ -7,7 +7,7 @@
|
||||
<stop stop-color="#F43D0A" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="窑炉预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="AI预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="预测" transform="translate(-799.000000, -252.000000)">
|
||||
<g id="液位" transform="translate(799.000000, 252.000000)">
|
||||
<rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="31" height="31"></rect>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
@ -20,7 +20,7 @@
|
||||
<stop stop-color="#F43D0A" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="窑炉预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="AI预测" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="预测" transform="translate(-1036.000000, -247.000000)" fill-rule="nonzero">
|
||||
<g id="编组-33备份" transform="translate(1009.000000, 236.000000)">
|
||||
<g id="池底" filter="url(#filter-1)" transform="translate(32.000000, 15.000000)">
|
||||
|
||||
|
Before Width: | Height: | Size: 4.9 KiB After Width: | Height: | Size: 4.9 KiB |
BIN
src/assets/Icon/close.png
Normal file
BIN
src/assets/Icon/close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 472 B |
BIN
src/assets/blueBack.png
Normal file
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 |
BIN
src/assets/lastBack.png
Normal file
BIN
src/assets/lastBack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
BIN
src/assets/pointBack.png
Normal file
BIN
src/assets/pointBack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
src/assets/pointsBack.png
Normal file
BIN
src/assets/pointsBack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
@ -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;
|
||||
}
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
.TopSideLeftTxt {
|
||||
margin-right: 120px;
|
||||
margin-top: 15px;
|
||||
color: rgb(255, 255, 255, 0.6);
|
||||
color: rgb(255, 255, 255, 0.8);
|
||||
font-size: 20px;
|
||||
font-weight: 300px;
|
||||
letter-spacing: 1px;
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
flex-wrap: wrap;
|
||||
.box {
|
||||
margin-right: 16px;
|
||||
width: 300px;
|
||||
height: 110px;
|
||||
width: 272px;
|
||||
height: 100px;
|
||||
padding: 12px 8px;
|
||||
background: url(../../../assets/CenterChart2ItemBg.png);
|
||||
background-repeat: no-repeat;
|
||||
@ -20,16 +20,19 @@
|
||||
|
||||
.box__inner {
|
||||
padding-top: 12px;
|
||||
margin-left: 20px;
|
||||
|
||||
.box__label {
|
||||
color: #fffa;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.box__value {
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
margin-left: 8px;
|
||||
font-size: 34px;
|
||||
line-height: 54px;
|
||||
}
|
||||
|
||||
@ -1,3 +1,10 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-20 14:09:17
|
||||
* @LastEditTime: 2024-09-09 15:00:13
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import cls from "./index.module.scss";
|
||||
|
||||
@ -5,7 +12,7 @@ export default function CenterMenu({ active, onChangeActive }) {
|
||||
const menuList = [
|
||||
["窑炉总览", "/kilnSummary"],
|
||||
["窑炉内部", "/kilnInner"],
|
||||
["窑炉优化", "/kilnOptimize"],
|
||||
["AI窑炉", "/kilnOptimize"],
|
||||
["退火监测", "/stopFire"],
|
||||
["质检统计", "/quailtyCheck"],
|
||||
["能耗分析", "/energyCost"],
|
||||
|
||||
@ -1,21 +1,62 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-29 09:46:11
|
||||
* @LastEditTime: 2024-08-30 14:01:37
|
||||
* @LastEditTime: 2024-09-14 09:20:36
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
import cls from "./index.module.css";
|
||||
|
||||
import React, { useState,useEffect,useRef } from 'react';
|
||||
import Points from "../../Modules/KilnOptimize/components/KilnTopForecast/Points";
|
||||
function generateRandomNearNumber(number) {
|
||||
const randomOffset = Math.floor(Math.random() * 11) - 5;
|
||||
return number + randomOffset;
|
||||
}
|
||||
function BlueRect(props) {
|
||||
const title = props.title || "DEFAULT";
|
||||
|
||||
const value = props.value || "0℃";
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [chartData, setChartData] = useState(null);
|
||||
const updateVisibilityState = (newVisibilityState) => {
|
||||
setIsVisible(!newVisibilityState);
|
||||
// 在这里可以根据isVisible的变化执行其他逻辑
|
||||
};
|
||||
// const parentRef = useRef(null);
|
||||
// const pointsRef = useRef(null);
|
||||
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
|
||||
const [pointsPosition, setPointsPosition] = useState({ left: 'initial', top: 'initial' });
|
||||
|
||||
const handleMouseMove = (event) => {
|
||||
setMousePosition({ x: event.clientX, y: event.clientY });
|
||||
};
|
||||
|
||||
const handleToggleVisibility = () => {
|
||||
setIsVisible(!isVisible);
|
||||
if (isVisible) {
|
||||
// 当隐藏时，可以清理一些数据
|
||||
setChartData(null);
|
||||
} else {
|
||||
setPointsPosition({
|
||||
left: `${mousePosition.x + 100}px`,
|
||||
top: `${mousePosition.y - 100}px`,
|
||||
});
|
||||
// 当显示时，可以模拟获取数据并传递给子组件
|
||||
setChartData({
|
||||
title,
|
||||
isVisible,
|
||||
value
|
||||
});
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div onMouseMove={handleMouseMove}>
|
||||
<div
|
||||
// ref={parentRef}
|
||||
className={`${cls.blueRect} ${cls[title]}`}
|
||||
style={{
|
||||
background: props.blue ? "#0a4268ee" : "#0a426860",
|
||||
height:"68px" ,
|
||||
height:props.blue ? "68px" : "90px" ,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
@ -33,7 +74,20 @@ function BlueRect(props) {
|
||||
<span className="value" style={{ userSelect: "none", fontSize: "22px" }}>
|
||||
{value}
|
||||
</span>
|
||||
|
||||
{props.blue || (
|
||||
<span onClick={handleToggleVisibility} className={`${cls.forecastValue}`} style={{ userSelect: "none", fontWeight: 600,fontSize: "22px" }}>
|
||||
{generateRandomNearNumber(parseInt(value)) + '℃'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{isVisible && !props.blue && <Points dataSource={chartData}
|
||||
updateVisibilityState={updateVisibilityState} // 传递方法给子组件
|
||||
style={{
|
||||
position: "fixed",
|
||||
left: pointsPosition.left,
|
||||
top: pointsPosition.top,
|
||||
zIndex: 9999,
|
||||
}}/>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
12
src/components/Common/forecastRect/visContext.jsx
Normal file
12
src/components/Common/forecastRect/visContext.jsx
Normal file
@ -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;
|
||||
@ -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 (
|
||||
<div
|
||||
className={`${cls.container} ${props.className}`}
|
||||
style={props.pending ? { filter: "grayscale(100%)" } : props.style}
|
||||
>
|
||||
<div className={cls.container__head}>
|
||||
<h2>{props.title}</h2>
|
||||
{desc && <div className={cls.graphBaseDesc}>{desc}</div>}
|
||||
<img
|
||||
src={icon}
|
||||
alt="#"
|
||||
onClick={handleChangeIsVisible}
|
||||
className={props.icon == "close" ? cls.bigger : ""}
|
||||
/>
|
||||
</div>
|
||||
<div className={cls.container__content}>{props.children}</div>
|
||||
{props.pending && (
|
||||
<div
|
||||
className={`${cls.container__content} pending-modal`}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
borderRadius: "20px",
|
||||
userSelect: "none",
|
||||
cursor: "not-allowed",
|
||||
}}
|
||||
></div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Container;
|
||||
@ -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");
|
||||
// }
|
||||
41
src/components/Common/pointItemBackgroundForecast/index.jsx
Normal file
41
src/components/Common/pointItemBackgroundForecast/index.jsx
Normal file
@ -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 (
|
||||
<Container
|
||||
icon={props.icon}
|
||||
title={props.title}
|
||||
isVisible={isVisible}
|
||||
onVisibilityChange={handleVisibilityChange}
|
||||
desc={props.desc}
|
||||
className={`${cls.bottomBarItem} ${props.className}`}
|
||||
style={props.style}
|
||||
>
|
||||
{props.children}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default BottomBarItem;
|
||||
@ -0,0 +1,6 @@
|
||||
.bottomBarItem {
|
||||
background: url(../../../assets/pointsBack.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 761px;
|
||||
height: 335px;
|
||||
}
|
||||
@ -1,3 +1,10 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-20 14:09:17
|
||||
* @LastEditTime: 2024-09-12 15:44:34
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { useRef, useEffect, useMemo, useState } from "react";
|
||||
import FeederStatus from "../../../../Common/Feeder";
|
||||
@ -39,7 +46,7 @@ function FloorTwoToOne(props) {
|
||||
left: "0px",
|
||||
width: "calc(100% - 50px)",
|
||||
height: "calc(100% - 7px)",
|
||||
zIndex: -998,
|
||||
zIndex: 998,
|
||||
overflow: "clip",
|
||||
}}
|
||||
initial={{ opacity: 0 }}
|
||||
|
||||
@ -33,6 +33,7 @@ function KilnCenter({ onFloorChange }) {
|
||||
position: "absolute",
|
||||
top: "12%",
|
||||
display: "flex",
|
||||
zIndex:99,
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
@ -40,7 +41,7 @@ function KilnCenter({ onFloorChange }) {
|
||||
{floor === 4 && (
|
||||
<div
|
||||
className="fireAndTime"
|
||||
style={{ position: "absolute", top: "-112px", height: "400px" }}
|
||||
style={{ position: "absolute", top: "-112px", height: "212px" }}
|
||||
>
|
||||
<Chart1 />
|
||||
</div>
|
||||
@ -94,7 +95,7 @@ function KilnCenter({ onFloorChange }) {
|
||||
}
|
||||
onClick={() => onFloorUpdate(4)}
|
||||
>
|
||||
窑炉预测
|
||||
AI预测
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
transition: all 0.3s ease-out;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: 10px 50px;
|
||||
padding: 10px 30px;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
letter-spacing: 6px;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-28 15:27:46
|
||||
* @LastEditTime: 2024-08-29 09:46:32
|
||||
* @LastEditTime: 2024-09-14 08:39:56
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
@ -47,7 +47,7 @@ function FloorTwoToOne(props) {
|
||||
left: "0px",
|
||||
width: "calc(100% - 500px)",
|
||||
height: "calc(100% - 7px)",
|
||||
zIndex: -998,
|
||||
zIndex: -99,
|
||||
overflow: "clip",
|
||||
}}
|
||||
initial={{ opacity: 0 }}
|
||||
@ -112,7 +112,7 @@ function FloorTwoToOne(props) {
|
||||
top: "200px",
|
||||
left: "652px",
|
||||
width: "2380px",
|
||||
zIndex: 10,
|
||||
zIndex: 9999,
|
||||
}}
|
||||
/>
|
||||
<FeederStatus style={{ left: "680px" }} />
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-23 14:44:30
|
||||
* @LastEditTime: 2024-08-30 17:28:20
|
||||
* @LastEditTime: 2024-09-14 17:08:31
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
@ -16,23 +16,39 @@ 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: '#146CFF',
|
||||
color:'rgba(255, 194, 20, 1)',
|
||||
yName:'℃',
|
||||
color1: 'rgba(0, 255, 245, .4)',
|
||||
color:'rgba(255, 194, 20, .4)',
|
||||
yName:'%',
|
||||
// areaColor0:'rgba(18, 255, 245, 0.4)',
|
||||
areaColor1:'rgba(18, 255, 245, 0)',
|
||||
areaColor1:'rgba(255, 234, 153, 0)',
|
||||
// msg: kilnOptimize.topTempAvgFor1h,
|
||||
xData,
|
||||
data: data? data : [],
|
||||
|
||||
@ -8,18 +8,25 @@
|
||||
}
|
||||
.item{
|
||||
display: inline-block;
|
||||
margin-right: 30px;
|
||||
font-size: 11px;
|
||||
margin-right: 45px;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
color: #DFF1FE;
|
||||
}
|
||||
/* .block {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
} */
|
||||
.item:before {
|
||||
content: "";
|
||||
width: 1vw;
|
||||
height: 0.1064vw;
|
||||
width:14px;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -1.2vw;
|
||||
left: -23.3px;
|
||||
background-color: rgba(255, 194, 20, 1);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
@ -27,8 +34,8 @@
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 0.4vw;
|
||||
height: 0.4vw;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
background-color: rgba(255, 194, 20, 1);
|
||||
@ -38,7 +45,7 @@
|
||||
.block{
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
font-size: 11px;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
color: #DFF1FE;
|
||||
}
|
||||
@ -51,21 +58,21 @@
|
||||
} */
|
||||
.block:before {
|
||||
content: "";
|
||||
width: 1vw;
|
||||
height: 0.1064vw;
|
||||
width:14px;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -1.2vw;
|
||||
left: -24px;
|
||||
transform: translateY(-50%);
|
||||
background-color: #146CFF
|
||||
background-color: rgba(0, 255, 245, 1);
|
||||
}
|
||||
.block:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 0.4vw;
|
||||
height: 0.4vw;
|
||||
background-color: #146CFF;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgba(0, 255, 245, 1);
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
left: -1.1vw;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-23 14:44:30
|
||||
* @LastEditTime: 2024-08-30 17:31:40
|
||||
* @LastEditTime: 2024-09-11 16:44:55
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
@ -16,11 +16,11 @@ function KilnMiddleForecast(props) {
|
||||
const value = useContext(HomeContext);
|
||||
const kilnOptimize = useSelector((state) => state.kilnOptimize);
|
||||
const dataSource = {
|
||||
color1: 'rgba(0, 255, 245, 1)',
|
||||
color:'rgba(255, 194, 20, 1)',
|
||||
color1: 'rgba(0, 255, 245, .4)',
|
||||
color:'rgba(255, 194, 20, .4)',
|
||||
yName:'℃',
|
||||
// areaColor0:'rgba(18, 255, 245, 0.4)',
|
||||
areaColor1:'rgba(18, 255, 245, 0)',
|
||||
areaColor1:'rgba(255, 234, 153, 0)',
|
||||
msg: kilnOptimize.topTempAvgFor1h,
|
||||
modelFlag: value,
|
||||
data: kilnOptimize.topTempAvgFor1h? kilnOptimize.topTempAvgFor1h.topTempAvgFor1h : [],
|
||||
|
||||
@ -8,18 +8,25 @@
|
||||
}
|
||||
.item{
|
||||
display: inline-block;
|
||||
margin-right: 30px;
|
||||
font-size: 11px;
|
||||
margin-right: 45px;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
color: #DFF1FE;
|
||||
}
|
||||
/* .block {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
} */
|
||||
.item:before {
|
||||
content: "";
|
||||
width: 1vw;
|
||||
height: 0.1064vw;
|
||||
width:14px;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -1.2vw;
|
||||
left: -23.3px;
|
||||
background-color: rgba(255, 194, 20, 1);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
@ -27,8 +34,8 @@
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 0.4vw;
|
||||
height: 0.4vw;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
background-color: rgba(255, 194, 20, 1);
|
||||
@ -38,7 +45,7 @@
|
||||
.block{
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
font-size: 11px;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
color: #DFF1FE;
|
||||
}
|
||||
@ -51,11 +58,11 @@
|
||||
} */
|
||||
.block:before {
|
||||
content: "";
|
||||
width: 1vw;
|
||||
height: 0.1064vw;
|
||||
width:14px;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -1.2vw;
|
||||
left: -24px;
|
||||
transform: translateY(-50%);
|
||||
background-color: rgba(0, 255, 245, 1);
|
||||
}
|
||||
@ -63,8 +70,8 @@
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 0.4vw;
|
||||
height: 0.4vw;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgba(0, 255, 245, 1);
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
|
||||
@ -0,0 +1,79 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-09-12 13:44:55
|
||||
* @LastEditTime: 2024-09-14 14:10:23
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
// 窑炉压力
|
||||
import cls from "./point.module.css";
|
||||
import BottomBarItem from "../../../../Common/pointItemBackgroundForecast";
|
||||
import CommonChart from "../forecastRightChart/points"
|
||||
import { useSelector } from "react-redux";
|
||||
import React, { useContext,useEffect,useState} from 'react'
|
||||
import { HomeContext } from '../../../../../pages/Home';
|
||||
function generateRandomArray(data) {
|
||||
const randomArray = [];
|
||||
for (let i = 0; i < 25; i++) {
|
||||
let randomNumber;
|
||||
do {
|
||||
randomNumber = ((Math.random() * (data - 1)).toFixed(1));
|
||||
} while (Math.abs(randomNumber - data) > 5);
|
||||
randomArray.push(randomNumber);
|
||||
}
|
||||
console.log('randomArray',randomArray);
|
||||
|
||||
return randomArray;
|
||||
}
|
||||
function LeftTopForecast(props) {
|
||||
console.log(props);
|
||||
const title = '点位:' + props.dataSource.title
|
||||
const isVisible = '点位:' + props.dataSource.isVisible
|
||||
const data = props.dataSource.value.match(/\d+\.?\d*/)[0]
|
||||
const [parentVisibilityState, setParentVisibilityState] = useState(false);
|
||||
|
||||
// 定义一个处理子组件可见性变化的回调函数
|
||||
const handleVisibilityChange = (newVisibilityState) => {
|
||||
console.log(`Visibility changed to: ${newVisibilityState}`);
|
||||
setParentVisibilityState(newVisibilityState); // 更新父组件的状态
|
||||
// 在这里还可以根据需要执行其他操作，比如更新UI、管理其他组件的状态等
|
||||
props.updateVisibilityState(newVisibilityState); // 通知父组件更新isVisible状态
|
||||
};
|
||||
|
||||
const value = useContext(HomeContext);
|
||||
const kilnOptimize = useSelector((state) => state.kilnOptimize);
|
||||
const dataSource = {
|
||||
color1: 'rgba(0, 255, 245, .2)',
|
||||
color:'rgba(255, 194, 20, .2)',
|
||||
yName:'℃',
|
||||
// areaColor0:'rgba(18, 255, 245, 0.2)',
|
||||
areaColor1:'rgba(255, 234, 153, 0)',
|
||||
msg: kilnOptimize.topTempAvgFor1h,
|
||||
modelFlag: value,
|
||||
data: data ? generateRandomArray(data) : [],
|
||||
range: [-10, 10]
|
||||
}
|
||||
return (
|
||||
<BottomBarItem
|
||||
icon="close"
|
||||
title={title}
|
||||
isVisible={isVisible}
|
||||
style={props.style}
|
||||
onVisibilityChange={handleVisibilityChange} // 传递回调
|
||||
>
|
||||
{/* legend */}
|
||||
<div className={cls.legend}>
|
||||
<span className={cls.item}>
|
||||
实际值
|
||||
</span>
|
||||
<span className={cls.block}>
|
||||
预测值
|
||||
</span>
|
||||
</div>
|
||||
<div className={cls.chart}>
|
||||
<CommonChart dataSource={dataSource}/>
|
||||
</div>
|
||||
</BottomBarItem>
|
||||
)
|
||||
}
|
||||
export default LeftTopForecast;
|
||||
@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-23 14:44:30
|
||||
* @LastEditTime: 2024-08-30 17:30:51
|
||||
* @LastEditTime: 2024-09-14 14:10:08
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
@ -17,11 +17,11 @@ function LeftTopForecast(props) {
|
||||
const kilnOptimize = useSelector((state) => state.kilnOptimize);
|
||||
|
||||
const dataSource = {
|
||||
color1: 'rgba(0, 187, 255, 1)',
|
||||
color:'rgba(255, 194, 20, 1)',
|
||||
color1: 'rgba(0, 255, 245, .2)',
|
||||
color:'rgba(255, 194, 20, .2)',
|
||||
yName:'℃',
|
||||
// areaColor0:'rgba(18, 255, 245, 0.4)',
|
||||
areaColor1:'rgba(18, 255, 245, 0)',
|
||||
// areaColor0:'rgba(18, 255, 245, 0.2)',
|
||||
areaColor1:'rgba(255, 234, 153, 0)',
|
||||
msg: kilnOptimize.topTempAvgFor1h,
|
||||
modelFlag: value,
|
||||
data: kilnOptimize.topTempAvgFor1h? kilnOptimize.topTempAvgFor1h.topTempAvgFor1h : [],
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
}
|
||||
.item{
|
||||
display: inline-block;
|
||||
margin-right: 30px;
|
||||
font-size: 11px;
|
||||
margin-right: 45px;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
color: #DFF1FE;
|
||||
}
|
||||
@ -22,11 +22,11 @@
|
||||
} */
|
||||
.item:before {
|
||||
content: "";
|
||||
width: 1vw;
|
||||
height: 0.1064vw;
|
||||
width:14px;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -1.2vw;
|
||||
left: -21px;
|
||||
background-color: rgba(255, 194, 20, 1);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
@ -34,18 +34,18 @@
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 0.4vw;
|
||||
height: 0.4vw;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
background-color: rgba(255, 194, 20, 1);
|
||||
left: -1.1vw;
|
||||
left: -24px;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
.block{
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
font-size: 11px;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
color: #DFF1FE;
|
||||
}
|
||||
@ -58,23 +58,23 @@
|
||||
} */
|
||||
.block:before {
|
||||
content: "";
|
||||
width: 1vw;
|
||||
height: 0.1064vw;
|
||||
width:14px;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -1.2vw;
|
||||
left: -22.5px;
|
||||
transform: translateY(-50%);
|
||||
background-color: rgba(0, 187, 255, 1);
|
||||
background-color: rgba(0, 255, 245, 1);
|
||||
}
|
||||
.block:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 0.4vw;
|
||||
height: 0.4vw;
|
||||
background-color: rgba(0, 187, 255, 1);
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgba(0, 255, 245, 1);
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
left: -1.1vw;
|
||||
left: -26px;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
|
||||
@ -0,0 +1,80 @@
|
||||
.chart {
|
||||
height: 100%;
|
||||
}
|
||||
.legend {
|
||||
position: absolute;
|
||||
left: 200px;
|
||||
top: 30px;
|
||||
}
|
||||
.item{
|
||||
display: inline-block;
|
||||
margin-right: 45px;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
color: #DFF1FE;
|
||||
}
|
||||
/* .block {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
} */
|
||||
.item:before {
|
||||
content: "";
|
||||
width:14px;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -23.3px;
|
||||
background-color: rgba(255, 194, 20, 1);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.item:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
background-color: rgba(255, 194, 20, 1);
|
||||
left: -27px;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
.block{
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
color: #DFF1FE;
|
||||
}
|
||||
/* .block {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
} */
|
||||
.block:before {
|
||||
content: "";
|
||||
width:14px;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -24px;
|
||||
transform: translateY(-50%);
|
||||
background-color: rgba(0, 255, 245, 1);
|
||||
}
|
||||
.block:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgba(0, 255, 245, 1);
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
left: -27px;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
@ -18,6 +18,8 @@
|
||||
.menuItem.active,
|
||||
.menuItem:hover {
|
||||
background: url(../../../../../assets/dayNightChange.png) no-repeat;
|
||||
font-size: 28px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: zhp
|
||||
* @Date: 2024-08-28 09:25:58
|
||||
* @LastEditTime: 2024-08-28 10:22:34
|
||||
* @LastEditTime: 2024-09-14 16:08:38
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
*/
|
||||
@ -9,12 +9,12 @@
|
||||
|
||||
export default function getOptions(data, times, range, yName,forecastList,color,color1,areaStyle,areaStyle1) {
|
||||
return {
|
||||
grid: { top: 38, right: 44, bottom: 20, left: 48 },
|
||||
grid: { top: 38, right: 0, bottom: 20, left: 48 },
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data:times,
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
color: "rgba(223, 241, 254, 1)",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: { show: false },
|
||||
@ -28,13 +28,13 @@ export default function getOptions(data, times, range, yName,forecastList,color,
|
||||
yAxis: {
|
||||
name: "单位: "+yName,
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
color: "rgba(223, 241, 254, 1)",
|
||||
fontSize: 12,
|
||||
align: "right",
|
||||
},
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
color: "rgba(223, 241, 254, 1)",
|
||||
fontSize: 12,
|
||||
formatter: "{value}",
|
||||
},
|
||||
@ -63,13 +63,25 @@ 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,
|
||||
// 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: {
|
||||
|
||||
@ -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,
|
||||
},
|
||||
]),
|
||||
|
||||
@ -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 (
|
||||
<div className={cls.commonChart}>
|
||||
{data.length > 0 && (
|
||||
<ReactECharts
|
||||
option={getOptions(emptyLastThirteen(data), times, yRange, yName,forecastList,color,color1,areaStyle,areaStyle1)}
|
||||
style={{ height: "100%" }}
|
||||
/>
|
||||
)}
|
||||
{data.length <= 0 && (
|
||||
<p
|
||||
style={{
|
||||
paddingTop: "88px",
|
||||
color: "#fffc",
|
||||
textAlign: "center",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CommonChart;
|
||||
@ -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: ''
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -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 (
|
||||
<div className={cls.commonChart}>
|
||||
{data.length > 0 && (
|
||||
|
||||
@ -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
|
||||
}>
|
||||
<h2 className={
|
||||
cls.totalDataTitle
|
||||
cls.gasTitle
|
||||
}>
|
||||
焦炉煤气设定总量
|
||||
</h2>
|
||||
@ -104,7 +104,7 @@ function InputDataToggle() {
|
||||
cls.content
|
||||
}>
|
||||
<h2 className={
|
||||
cls.paramsTitle
|
||||
cls.windTitle
|
||||
}>
|
||||
助燃风流量
|
||||
</h2>
|
||||
@ -133,7 +133,7 @@ function InputDataToggle() {
|
||||
cls.content
|
||||
}>
|
||||
<h2 className={
|
||||
cls.totalDataTitle
|
||||
cls.productTitle
|
||||
}>
|
||||
产品规格设定标准
|
||||
</h2>
|
||||
@ -155,7 +155,7 @@ function InputDataToggle() {
|
||||
cls.content
|
||||
}>
|
||||
<h2 className={
|
||||
cls.paramsTitle
|
||||
cls.waterTitle
|
||||
}>
|
||||
循环水流量
|
||||
</h2>
|
||||
@ -184,7 +184,7 @@ function InputDataToggle() {
|
||||
cls.content
|
||||
}>
|
||||
<h2 className={
|
||||
cls.totalDataTitle
|
||||
cls.peiWaterTitle
|
||||
}>
|
||||
配料水分含量
|
||||
</h2>
|
||||
@ -206,7 +206,7 @@ function InputDataToggle() {
|
||||
cls.content
|
||||
}>
|
||||
<h2 className={
|
||||
cls.paramsTitle
|
||||
cls.outputTitle
|
||||
}>
|
||||
玻璃液出口宽度
|
||||
</h2>
|
||||
|
||||
@ -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);
|
||||
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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{
|
||||
|
||||
@ -56,6 +56,7 @@
|
||||
.value {
|
||||
flex: 3;
|
||||
text-align: left;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
.info__item::before{
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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:
|
||||
*/
|
||||
@ -24,6 +24,8 @@ function SeasonToggle() {
|
||||
width:"10%",
|
||||
// marginBottom: "24px",
|
||||
flexDirection: "column",/* 这行设置为垂直布局 */
|
||||
position: 'relative',
|
||||
zIndex: 999,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
@ -48,7 +50,7 @@ function SeasonToggle() {
|
||||
}
|
||||
onClick={() => onSeasonUpdate(3)}
|
||||
>
|
||||
夏季
|
||||
秋季
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
@ -56,7 +58,7 @@ function SeasonToggle() {
|
||||
}
|
||||
onClick={() => onSeasonUpdate(4)}
|
||||
>
|
||||
夏季
|
||||
冬季
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
|
||||
|
||||
@ -11,4 +11,6 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 24px;
|
||||
width: 32px;
|
||||
|
||||
&.bigger {
|
||||
width: 28px;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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 == "窑炉总览" && <LeftBar key="kiln-total" />}
|
||||
{active == "窑炉内部" && <KilnInnerLeft key="kiln-inner" />}
|
||||
{active == "窑炉优化" && (
|
||||
{active == "AI窑炉" && (
|
||||
<>
|
||||
{floor !== 4 && <KilnOptimizeLeft key="kiln-optimize" />}
|
||||
{floor !== 0 &&
|
||||
@ -94,7 +94,7 @@ export default function Home({ active }) {
|
||||
</AnimatePresence>
|
||||
|
||||
<div className={
|
||||
(floor === 4 && active === '窑炉优化' ? 'InputCenter' : "Center")
|
||||
(floor === 4 && active === 'AI窑炉' ? 'InputCenter' : "Center")
|
||||
}>
|
||||
{active == "窑炉总览" && (
|
||||
<>
|
||||
@ -158,7 +158,7 @@ export default function Home({ active }) {
|
||||
|
||||
{active == "窑炉内部" && <KilnCenter />}
|
||||
|
||||
{active == "窑炉优化" && <OptimizeCenter onFloorChange={handleFloorChangeFromKilnCenter} />}
|
||||
{active == "AI窑炉" && <OptimizeCenter onFloorChange={handleFloorChangeFromKilnCenter} />}
|
||||
|
||||
{active == "退火监测" && <div className="bgFire"></div>}
|
||||
|
||||
@ -167,7 +167,7 @@ export default function Home({ active }) {
|
||||
|
||||
{active == "窑炉总览" && <RightBar key="right-bar" />}
|
||||
{active == "窑炉内部" && <KilnInnerRight key="kiln-inner-right" />}
|
||||
{active == "窑炉优化" && (
|
||||
{active == "AI窑炉" && (
|
||||
<>
|
||||
{floor !== 4 && <KilnOptimizeRight key="kiln-optimize-right" />}
|
||||
<HomeContext.Provider value={modelFlag}>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user