init commit
This commit is contained in:
lb
11
src/pages/document.ejs
Normal file
11
src/pages/document.ejs
Normal file
@@ -0,0 +1,11 @@
|
||||
<head>
|
||||
<!-- <script src="<%= context.publicPath %>./v3d.js"></script>
|
||||
<script src="<%= context.publicPath %>./font.css"></script> -->
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root">
|
||||
|
||||
</div>
|
||||
</body>
|
||||
37
src/pages/index.jsx
Normal file
37
src/pages/index.jsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import './global.less';
|
||||
import './index.less';
|
||||
import Head from '../components/公共组件/顶部公司名称';
|
||||
import { SocketContextProvider } from '../store/socket-data-provider';
|
||||
import useSlider, { Slider } from '../hooks/useSlider';
|
||||
import NavMenu from '../components/公共组件/导航菜单';
|
||||
import { useState } from 'react';
|
||||
// import V3D from './V3D';
|
||||
import Home from './总览';
|
||||
import EnergyAnalysis from './能耗分析';
|
||||
import RulerContainer from '../components/工具组件/Ruler';
|
||||
import { createPortal } from 'react-dom';
|
||||
|
||||
export default function index() {
|
||||
const { styles, value, setValue } = useSlider(100);
|
||||
const [navActive, setNavActive] = useState('窑炉总览');
|
||||
|
||||
return (
|
||||
<>
|
||||
<div id="FullScreen" style={styles}>
|
||||
<NavMenu active={navActive} onChangeActive={(v) => setNavActive(v)} />
|
||||
<Head />
|
||||
{/* TODO: 为了不让每切换一次nav就刷新整个页面，将各个页面分别包裹在SocketContextProvider中 */}
|
||||
<SocketContextProvider>
|
||||
{navActive == '能耗分析' && <EnergyAnalysis />}
|
||||
{navActive != '能耗分析' && <Home active={navActive} />}
|
||||
{/* {navActive == '窑炉总览' && <Home />} */}
|
||||
{/* {navActive == '质检统计' && <CheckInfo />}
|
||||
{navActive == '退火监测' && <FireCheck />}
|
||||
{navActive == '窑炉内部' && <KilnInner />} */}
|
||||
</SocketContextProvider>
|
||||
</div>
|
||||
<Slider value={value} setValue={setValue} />
|
||||
{createPortal(<RulerContainer />, document.body)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
99
src/pages/总览/index.jsx
Normal file
99
src/pages/总览/index.jsx
Normal file
@@ -0,0 +1,99 @@
|
||||
import LeftBar from "../../components/模块组件/总览/LeftSide";
|
||||
import BottomBar from "../../components/模块组件/总览/Bottom";
|
||||
import RightBar from "../../components/模块组件/总览/RightSide";
|
||||
import CenterTopData from "../../components/模块组件/总览/CenterTop";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import KilnCenter from "../../components/模块组件/窑炉内部/Center";
|
||||
import KilnInnerLeft from "../../components/模块组件/窑炉内部/LeftSide";
|
||||
import KilnInnerRight from "../../components/模块组件/窑炉内部/RightSide";
|
||||
import FireCheckLeft from "../../components/模块组件/退火监测/LeftSide";
|
||||
import QualityCheckLeft from "../../components/模块组件/质检统计/LeftSide";
|
||||
import FireCheckRight from "../../components/模块组件/退火监测/RightSide";
|
||||
import QualityCheckRight from "../../components/模块组件/质检统计/RightSide";
|
||||
// import SocketContext from '../../store/socket-data-provider';
|
||||
import { useContext } from "react";
|
||||
|
||||
export default function Home({ active }) {
|
||||
// const ctx = useContext(SocketContext);
|
||||
|
||||
const ctx = null;
|
||||
|
||||
const fireDir = ctx?.runState?.fireDirection || null;
|
||||
|
||||
return (
|
||||
<div className="Main">
|
||||
{active != "窑炉总览" && <div className="bgDitu"></div>}
|
||||
{active == "窑炉总览" && <div className="bgOverview"></div>}
|
||||
<AnimatePresence mode="wait">
|
||||
<div
|
||||
className="left-side"
|
||||
style={{
|
||||
marginLeft: "40px",
|
||||
width: "625px",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
{active == "窑炉总览" && <LeftBar key="kiln-total" />}
|
||||
{active == "窑炉内部" && <KilnInnerLeft key="kiln-inner" />}
|
||||
{active == "退火监测" && <FireCheckLeft key="fire-check" />}
|
||||
{active == "质检统计" && <QualityCheckLeft key="quality-check" />}
|
||||
</div>
|
||||
</AnimatePresence>
|
||||
|
||||
<div className="Center">
|
||||
{active == "窑炉总览" && (
|
||||
<>
|
||||
<AnimatePresence>
|
||||
<motion.div
|
||||
key="center-top"
|
||||
className="CenterData"
|
||||
initial={{ visibility: "hidden" }}
|
||||
animate={{ visibility: "visible" }}
|
||||
>
|
||||
<CenterTopData />
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
<div key="v3d" className="V3DBorder"></div>
|
||||
|
||||
{fireDir && fireDir == "东火" && (
|
||||
<video
|
||||
src="/video/fire_little_top.webm"
|
||||
muted
|
||||
autoPlay
|
||||
loop
|
||||
width={4200}
|
||||
style={{ position: "absolute", top: "-160px", left: "-910px" }}
|
||||
></video>
|
||||
)}
|
||||
|
||||
{fireDir && fireDir == "西火" && (
|
||||
<video
|
||||
src="/video/fire_little_down.webm"
|
||||
muted
|
||||
autoPlay
|
||||
loop
|
||||
width={4200}
|
||||
style={{ position: "absolute", top: "-180px", left: "-910px" }}
|
||||
></video>
|
||||
)}
|
||||
|
||||
<div key="bottom-bar" className="Button">
|
||||
<BottomBar />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{active == "窑炉内部" && <KilnCenter />}
|
||||
|
||||
{active == "退火监测" && <div className="bgFire"></div>}
|
||||
|
||||
{active == "质检统计" && <div className="bgQuality"></div>}
|
||||
</div>
|
||||
|
||||
{active == "窑炉总览" && <RightBar key="right-bar" />}
|
||||
{active == "窑炉内部" && <KilnInnerRight key="kiln-inner-right" />}
|
||||
{active == "退火监测" && <FireCheckRight key="kiln-fire-check-right" />}
|
||||
{active == "质检统计" && <QualityCheckRight key="kiln-quality-right" />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
25
src/pages/总览/index.module.css
Normal file
25
src/pages/总览/index.module.css
Normal file
@@ -0,0 +1,25 @@
|
||||
.menuItem {
|
||||
transition: all 0.3s ease-out;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: 10px 50px;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
letter-spacing: 6px;
|
||||
background: url(../../assets/bg_center_menu.png) no-repeat;
|
||||
background-size: 100% 50%;
|
||||
background-position: bottom;
|
||||
color: #00fff788;
|
||||
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;
|
||||
}
|
||||
|
||||
.menuItem.active,
|
||||
.menuItem:hover {
|
||||
color: #00fff7;
|
||||
}
|
||||
|
||||
.menuItem:not(:first-child) {
|
||||
margin-left: 50px;
|
||||
}
|
||||
64
src/pages/能耗分析/index.jsx
Normal file
64
src/pages/能耗分析/index.jsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import cls from './index.module.css';
|
||||
import SmokeHandle from '../../components/模块组件/能耗分析/烟气处理';
|
||||
import Energy from '../../components/模块组件/能耗分析/能源';
|
||||
import NO from '../../components/模块组件/能耗分析/一氧化氮';
|
||||
import NO2 from '../../components/模块组件/能耗分析/二氧化氮';
|
||||
import SO2 from '../../components/模块组件/能耗分析/二氧化硫';
|
||||
import Oxygen from '../../components/模块组件/能耗分析/氧气含量';
|
||||
import NatGas from '../../components/模块组件/能耗分析/天然气';
|
||||
import ElecCost from '../../components/模块组件/能耗分析/电耗能';
|
||||
import WaterCost from '../../components/模块组件/能耗分析/水耗能';
|
||||
import RestHeat from '../../components/模块组件/能耗分析/余热发电';
|
||||
import Gas from '../../components/模块组件/能耗分析/焦炉煤气';
|
||||
|
||||
function EnergyAnalysis(props) {
|
||||
console.log('[rendering...] 加载 能耗分析页面');
|
||||
return (
|
||||
<div className={cls.grid}>
|
||||
<div className={cls.bgDitu}></div>
|
||||
<div className={cls.vgrid + ' col-1'}>
|
||||
<SmokeHandle />
|
||||
<Oxygen />
|
||||
<NO />
|
||||
</div>
|
||||
|
||||
<div className={cls.vgrid + ' col-2'}>
|
||||
<div style={{ gridRow: 3 }}>
|
||||
<NO2 />
|
||||
</div>
|
||||
<div style={{ gridRow: 2 }}>
|
||||
<SO2 />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={' ' + cls.line}></div>
|
||||
|
||||
<div className={cls.vgrid + ' col-3'}>
|
||||
<div style={{ gridRow: 2 }}>
|
||||
<RestHeat />
|
||||
</div>
|
||||
<div style={{ gridRow: 3 }}>
|
||||
<WaterCost />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={cls.vgrid + ' col-4'}>
|
||||
{/* <div className="bgray energy"></div> */}
|
||||
<Energy />
|
||||
<div className={cls.vvgrid}>
|
||||
<div className=" electronic">
|
||||
<ElecCost />
|
||||
</div>
|
||||
<div className=" gas">
|
||||
<NatGas />
|
||||
</div>
|
||||
<div className=" mgas">
|
||||
<Gas />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default EnergyAnalysis;
|
||||
59
src/pages/能耗分析/index.module.css
Normal file
59
src/pages/能耗分析/index.module.css
Normal file
@@ -0,0 +1,59 @@
|
||||
.grid {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
grid-template-columns: 900px 900px 16px 900px 900px;
|
||||
/* grid-template-rows: 128px 389px 389px; */
|
||||
/* height: 100%; */
|
||||
/* overflow: hidden; */
|
||||
}
|
||||
|
||||
.bgDitu {
|
||||
position: fixed;
|
||||
z-index: -1000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* background: #f003; */
|
||||
background: url(../../assets/ditu.png) no-repeat;
|
||||
background-position: -800px 0;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.vgrid {
|
||||
display: grid;
|
||||
gap: 24px;
|
||||
grid-template-rows: 128px 389px 389px;
|
||||
}
|
||||
|
||||
.vvgrid {
|
||||
display: grid;
|
||||
gap: 24px;
|
||||
grid-template-rows: repeat(3, 253px);
|
||||
}
|
||||
|
||||
.shadowBorder {
|
||||
box-shadow: inset 0 0 12px 3px #fff3;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.infoText {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
line-height: 2.2;
|
||||
/* line-height: 20px; */
|
||||
letter-spacing: 1px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.line {
|
||||
background: url(../../assets/line.png) 0 60% no-repeat;
|
||||
}
|
||||
|
||||
.oxygen {
|
||||
}
|
||||
|
||||
.no {
|
||||
}
|
||||
Reference in New Issue
Block a user