This commit is contained in:
lb 2023-12-15 09:58:40 +08:00
parent c3511e1bfe
commit bb541962dd
11 changed files with 54 additions and 33 deletions

View File

@ -9,7 +9,7 @@ function EnergyCost(props) {
if (energyInfo) { if (energyInfo) {
} }
return ( return (
<Container title="能耗" icon="charger" className={cls.energyCost}> <Container title="能耗" icon="charger" className={cls.energyCost} pending={true}>
<div className={`flex flex-col`}> <div className={`flex flex-col`}>
<div className={`${cls.cost__info} flex`}> <div className={`${cls.cost__info} flex`}>
<div <div

View File

@ -7,7 +7,7 @@ export default function CenterMenu({ active, onChangeActive }) {
['窑炉内部', '/kilnInner'], ['窑炉内部', '/kilnInner'],
['退火监测', '/stopFire'], ['退火监测', '/stopFire'],
['质检统计', '/quailtyCheck'], ['质检统计', '/quailtyCheck'],
['能耗分析', '/energyCost'], // ['', '/energyCost'],
]; ];
return ( return (
<div className={`${cls.centerMenu} flex`}> <div className={`${cls.centerMenu} flex`}>

View File

@ -1,7 +1,8 @@
.centerMenu { .centerMenu {
position: fixed; position: fixed;
top: 120px; top: 120px;
left: 1340px; // left: 1340px;
left: 1460px;
color: white; color: white;
z-index: 10000; z-index: 10000;
} }

View File

@ -5,7 +5,7 @@ import SmokeTrendChart from './SmokeTrendChart';
function SmokeHandle(props) { function SmokeHandle(props) {
return ( return (
<Container title="烟气处理" icon="smoke" className={cls.smokeHandle}> <Container title="烟气处理" icon="smoke" className={cls.smokeHandle} pending={true}>
<div className={`${cls.smokeHandle__content} flex flex-col`}> <div className={`${cls.smokeHandle__content} flex flex-col`}>
<div className={cls.info__item_groups}> <div className={cls.info__item_groups}>
<div className={cls.info__item}> : 72%</div> <div className={cls.info__item}> : 72%</div>

View File

@ -19,11 +19,11 @@ const TodayTableData = (props) => {
headerHeight: 40, headerHeight: 40,
hoverPause: false, hoverPause: false,
data: [ data: [
["产线1", "37%", "62%", "97%", "7%"], ["Y61", "37%", "62%", "97%", "7%"],
["产线2", "95%", "10%", "99%", "3%"], ["Y62", "95%", "10%", "99%", "3%"],
["产线3", "68%", "1%", "92%", "4%"], ["Y63", "68%", "1%", "92%", "4%"],
["产线4", "94%", "21%", "97%", "2%"], ["Y64", "94%", "21%", "97%", "2%"],
["产线5", "99%", "30%", "95%", "5%"], ["Y65", "99%", "30%", "95%", "5%"],
], ],
}); });
return ( return (

View File

@ -1,23 +1,41 @@
import { useEffect, useRef } from 'react'; import { useEffect, useRef } from "react";
import useIcon from '../hooks/useIcon'; import useIcon from "../hooks/useIcon";
import cls from './container.module.scss'; import cls from "./container.module.scss";
const Container = (props) => { const Container = (props) => {
let icon = useIcon(props.icon); let icon = useIcon(props.icon);
return ( return (
<div className={`${cls.container} ${props.className}`} style={props.style}> <div
<div className={cls.container__head}> className={`${cls.container} ${props.className}`}
<img style={props.pending ? { filter: "grayscale(100%)" } : props.style}
src={icon} >
alt="#" <div className={cls.container__head}>
className={props.icon == 'kiln' ? cls.bigger : ''} <img
/> src={icon}
<h2>{props.title}</h2> alt="#"
</div> className={props.icon == "kiln" ? cls.bigger : ""}
<div className={cls.container__content}>{props.children}</div> />
</div> <h2>{props.title}</h2>
); </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; export default Container;

View File

@ -11,9 +11,9 @@ export default function index() {
<div className={cls.leftGrid}> <div className={cls.leftGrid}>
<Item1 /> <Item1 />
</div> </div>
<div className={cls.rightTable}> {/* <div className={cls.rightTable}>
<Item2 /> <Item2 />
</div> </div> */}
</div> </div>
</> </>
); );

View File

@ -44,7 +44,7 @@ function KilnCenter() {
} }
onClick={() => onFloorUpdate(1)} onClick={() => onFloorUpdate(1)}
> >
一层 碹顶
</div> </div>
<div <div
className={ className={
@ -52,7 +52,7 @@ function KilnCenter() {
} }
onClick={() => onFloorUpdate(2)} onClick={() => onFloorUpdate(2)}
> >
二层 池底
</div> </div>
</div> </div>

View File

@ -4,6 +4,7 @@
flex-direction: column; flex-direction: column;
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative;
.container__head { .container__head {
display: flex; display: flex;

View File

@ -14,6 +14,7 @@ html,
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow-y: hidden;
} }
#FullScreen { #FullScreen {

View File

@ -10,11 +10,11 @@ import FireCheckLeft from "../../components/Modules/FireCheck/LeftSide";
import QualityCheckLeft from "../../components/Modules/QualityCheck/LeftSide"; import QualityCheckLeft from "../../components/Modules/QualityCheck/LeftSide";
import FireCheckRight from "../../components/Modules/FireCheck/RightSide"; import FireCheckRight from "../../components/Modules/FireCheck/RightSide";
import QualityCheckRight from "../../components/Modules/QualityCheck/RightSide"; import QualityCheckRight from "../../components/Modules/QualityCheck/RightSide";
import { useSelector } from "react-redux";
export default function Home({ active }) { export default function Home({ active }) {
const ctx = null; const ctx = useSelector((state) => state.fireInfo);
const fireDir = ctx.fireDirection || null;
const fireDir = ctx?.runState?.fireDirection || null;
return ( return (
<div className="Main"> <div className="Main">