setup

2023-11-09 15:34:52 +08:00
parent b0431e4a33
commit b4eb30d76f
146 changed files with 2988 additions and 1328 deletions
--- a/src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx
@@ -0,0 +1,37 @@
+import GraphBase from '../../../Common/GraphBase';
+import ReactECharts from 'echarts-for-react';
+import getOptions from '../../../../hooks/getChartOption';
+
+function Gas(props) {
+	function handleSwitch(v) {
+		console.log('switched ', v);
+	}
+
+	function handleDateChange(v) {
+		console.log('date ', v);
+	}
+
+	return (
+		<GraphBase
+			icon="battery"
+			title="焦炉煤气"
+			desc="能耗趋势图"
+			switchOptions={true}
+			onSwitch={handleSwitch}
+			dateOptions={['日', '周', '月', '年']}
+			legend={['总量']}
+			onDateChange={handleDateChange}
+			size={['long', 'short']}
+		>
+			{/* real echarts here */}
+			<ReactECharts
+				key={Math.random()}
+				option={getOptions([[21, 4, 74, 72, 9, 59, 63]], '氧气')}
+				style={{ height: '100%' }}
+			/>
+			{/* real table data here  */}
+		</GraphBase>
+	);
+}
+
+export default Gas;
--- a/src/components/Modules/EnergyCostAnalysis/BadGas/index.module.css
+++ b/src/components/Modules/EnergyCostAnalysis/BadGas/index.module.css
--- a/src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx
@@ -0,0 +1,37 @@
+import GraphBase from '../../../Common/GraphBase';
+import ReactECharts from 'echarts-for-react';
+import getOptions from '../../../../hooks/getChartOption';
+
+function ElecCost(props) {
+	function handleSwitch(v) {
+		console.log('switched ', v);
+	}
+
+	function handleDateChange(v) {
+		console.log('date ', v);
+	}
+
+	return (
+		<GraphBase
+			icon="battery"
+			title="电耗能"
+			desc="能耗趋势图"
+			switchOptions={true}
+			onSwitch={handleSwitch}
+			dateOptions={['日', '周', '月', '年']}
+			legend={['总量']}
+			onDateChange={handleDateChange}
+			size={['long', 'short']}
+		>
+			{/* real echarts here */}
+			<ReactECharts
+				key={Math.random()}
+				option={getOptions([[112, 73, 79, 82, 30, 105, 87]], '氧气')}
+				style={{ height: '100%' }}
+			/>
+			{/* real table data here  */}
+		</GraphBase>
+	);
+}
+
+export default ElecCost;
--- a/src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.module.css
+++ b/src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.module.css
--- a/src/components/Modules/EnergyCostAnalysis/Energy/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/Energy/index.jsx
@@ -0,0 +1,44 @@
+import cls from './index.module.css';
+import GradientText from '../../../Common/GradientText';
+
+function Energy(props) {
+	return (
+		<div className={' ' + cls.layout} style={{ color: '#fff' }}>
+			<span
+				className={cls.shadowBorder}
+				style={{
+					gridRow: '1 / 3',
+					paddingTop: '38px',
+					paddingLeft: '32px',
+					userSelect: 'none',
+				}}
+			>
+				<GradientText text="能源" />
+			</span>
+			<span
+				className={cls.shadowBorder + ' ' + cls.infoText}
+				style={{
+					gridRow: '1 / 3',
+				}}
+			>
+				<span style={{ lineHeight: 2.5 }}>余热发电</span>
+				<span style={{ lineHeight: 2.5 }}>992Kwh</span>
+			</span>
+
+			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+				水耗量: 32Km³
+			</span>
+			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+				天然气I: 92m³
+			</span>
+			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+				电耗量: 92Km³
+			</span>
+			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+				天然气II: 92m³
+			</span>
+		</div>
+	);
+}
+
+export default Energy;
--- a/src/components/Modules/EnergyCostAnalysis/Energy/index.module.css
+++ b/src/components/Modules/EnergyCostAnalysis/Energy/index.module.css
@@ -0,0 +1,21 @@
+.layout {
+	display: grid;
+	gap: 6px;
+	grid-template-columns: 133px 158px 292px 292px ;
+	grid-template-rows: 60px 60px;
+}
+
+.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;
+}
--- a/src/components/Modules/EnergyCostAnalysis/NO/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/NO/index.jsx
@@ -0,0 +1,44 @@
+import GraphBase from '../../../Common/GraphBase';
+import ReactECharts from 'echarts-for-react';
+import getOptions from '../../../../hooks/getChartOption';
+
+function NO(props) {
+	function handleSwitch(v) {
+		console.log('switched ', v);
+	}
+
+	function handleDateChange(v) {
+		console.log('date ', v);
+	}
+
+	return (
+		<GraphBase
+			icon="battery"
+			title="一氧化氮"
+			desc="能耗趋势图"
+			switchOptions={true}
+			onSwitch={handleSwitch}
+			dateOptions={['日', '周', '月', '年']}
+			legend={['总量', '白班', '夜班']}
+			onDateChange={handleDateChange}
+			size={['long', 'middle']}
+		>
+			{/* real echarts here */}
+			<ReactECharts
+				key={Math.random()}
+				option={getOptions(
+					[
+						[148, 110, 140, 122, 84, 153, 89],
+						[88, 79, 75, 73, 33, 54, 31],
+						[60, 31, 65, 49, 51, 99, 58],
+					],
+					'氧气',
+				)}
+				style={{ height: '100%' }}
+			/>
+			{/* real table data here  */}
+		</GraphBase>
+	);
+}
+
+export default NO;
--- a/src/components/Modules/EnergyCostAnalysis/NO/index.module.css
+++ b/src/components/Modules/EnergyCostAnalysis/NO/index.module.css
--- a/src/components/Modules/EnergyCostAnalysis/NO2/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/NO2/index.jsx
@@ -0,0 +1,44 @@
+import GraphBase from '../../../Common/GraphBase';
+import ReactECharts from 'echarts-for-react';
+import getOptions from '../../../../hooks/getChartOption';
+
+function NO2(props) {
+	function handleSwitch(v) {
+		console.log('switched ', v);
+	}
+
+	function handleDateChange(v) {
+		console.log('date ', v);
+	}
+
+	return (
+		<GraphBase
+			icon="battery"
+			title="二氧化氮"
+			desc="能耗趋势图"
+			switchOptions={true}
+			onSwitch={handleSwitch}
+			dateOptions={['日', '周', '月', '年']}
+			legend={['总量', '白班', '夜班']}
+			onDateChange={handleDateChange}
+			size={['long', 'middle']}
+		>
+			{/* real echarts here */}
+			<ReactECharts
+				key={Math.random()}
+				option={getOptions(
+					[
+						[91, 164, 88, 120, 167, 158, 43],
+						[30, 75, 52, 43, 73, 66, 36],
+						[61, 89, 36, 77, 94, 92, 7],
+					],
+					'氧气',
+				)}
+				style={{ height: '100%' }}
+			/>
+			{/* real table data here  */}
+		</GraphBase>
+	);
+}
+
+export default NO2;
--- a/src/components/Modules/EnergyCostAnalysis/NO2/index.module.css
+++ b/src/components/Modules/EnergyCostAnalysis/NO2/index.module.css
--- a/src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx
@@ -0,0 +1,37 @@
+import GraphBase from '../../../Common/GraphBase';
+import ReactECharts from 'echarts-for-react';
+import getOptions from '../../../../hooks/getChartOption';
+
+function NatGas(props) {
+	function handleSwitch(v) {
+		console.log('switched ', v);
+	}
+
+	function handleDateChange(v) {
+		console.log('date ', v);
+	}
+
+	return (
+		<GraphBase
+			icon="battery"
+			title="天然气"
+			desc="能耗趋势图"
+			switchOptions={true}
+			onSwitch={handleSwitch}
+			dateOptions={['日', '周', '月', '年']}
+			legend={['总量']}
+			onDateChange={handleDateChange}
+			size={['long', 'short']}
+		>
+			{/* real echarts here */}
+			<ReactECharts
+				key={Math.random()}
+				option={getOptions([[91, 69, 5, 10, 21, 46, 24]], '氧气')}
+				style={{ height: '100%' }}
+			/>
+			{/* real table data here  */}
+		</GraphBase>
+	);
+}
+
+export default NatGas;
--- a/src/components/Modules/EnergyCostAnalysis/NatGas/index.module.css
+++ b/src/components/Modules/EnergyCostAnalysis/NatGas/index.module.css
--- a/src/components/Modules/EnergyCostAnalysis/O/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/O/index.jsx
@@ -0,0 +1,65 @@
+import GraphBase from '../../../Common/GraphBase';
+import ReactECharts from 'echarts-for-react';
+import getOptions from '../../../../hooks/getChartOption';
+
+// function rand(max) {
+// 	return Math.ceil(Math.random() * max);
+// }
+// function getArr(len) {
+// 	return Array(len).fill(1).map(() => rand(100))
+// }
+// function getArrs(len) {
+// 	return Array(len).fill(1).map(() => getArr(7))
+// }
+// function fan4(...arrs) {
+// 	const total = arrs[0].map((_, i) =>
+// 		arrs.reduce((sum, arr) => sum + arr[i], 0),
+// 	);
+// 	arrs.unshift(total);
+// 	return arrs;
+// }
+// function main() {
+// 	// console.log(JSON.stringify(fan(getArrs(3))))
+// 	console.log(fan(getArrs(3)))
+// }
+
+function Oxygen(props) {
+	function handleSwitch(v) {
+		console.log('switched ', v);
+	}
+
+	function handleDateChange(v) {
+		console.log('date ', v);
+	}
+
+	return (
+		<GraphBase
+			icon="battery"
+			title="氧气含量"
+			desc="能耗趋势图"
+			switchOptions={true}
+			onSwitch={handleSwitch}
+			dateOptions={['日', '周', '月', '年']}
+			legend={['总量', '白班', '夜班']}
+			onDateChange={handleDateChange}
+			size={['long', 'middle']}
+		>
+			{/* real echarts here */}
+			<ReactECharts
+				key={Math.random()}
+				option={getOptions(
+					[
+						[172, 165, 135, 35, 101, 53, 68], // 总量
+						[87, 68, 81, 33, 35, 44, 38], // 白班
+						[85, 97, 54, 2, 66, 9, 30], // 夜班
+					],
+					'氧气',
+				)}
+				style={{ height: '100%' }}
+			/>
+			{/* real table data here  */}
+		</GraphBase>
+	);
+}
+
+export default Oxygen;
--- a/src/components/Modules/EnergyCostAnalysis/O/index.module.css
+++ b/src/components/Modules/EnergyCostAnalysis/O/index.module.css
--- a/src/components/Modules/EnergyCostAnalysis/RestHeat/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/RestHeat/index.jsx
@@ -0,0 +1,44 @@
+import GraphBase from '../../../Common/GraphBase';
+import ReactECharts from 'echarts-for-react';
+import getOptions from '../../../../hooks/getChartOption';
+
+function RestHeat(props) {
+	function handleSwitch(v) {
+		console.log('switched ', v);
+	}
+
+	function handleDateChange(v) {
+		console.log('date ', v);
+	}
+
+	return (
+		<GraphBase
+			icon="battery"
+			title="余热发电"
+			desc="能耗趋势图"
+			switchOptions={true}
+			onSwitch={handleSwitch}
+			dateOptions={['日', '周', '月', '年']}
+			legend={['总量', '白班', '夜班']}
+			onDateChange={handleDateChange}
+			size={['long', 'middle']}
+		>
+			{/* real echarts here */}
+			<ReactECharts
+				key={Math.random()}
+				option={getOptions(
+					[
+						[138, 136, 29, 104, 101, 93, 128],
+						[69, 52, 18, 57, 22, 88, 46],
+						[69, 84, 11, 47, 79, 5, 82],
+					],
+					'氧气',
+				)}
+				style={{ height: '100%' }}
+			/>
+			{/* real table data here  */}
+		</GraphBase>
+	);
+}
+
+export default RestHeat;
--- a/src/components/Modules/EnergyCostAnalysis/RestHeat/index.module.css
+++ b/src/components/Modules/EnergyCostAnalysis/RestHeat/index.module.css
--- a/src/components/Modules/EnergyCostAnalysis/SO2/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/SO2/index.jsx
@@ -0,0 +1,44 @@
+import GraphBase from '../../../Common/GraphBase';
+import ReactECharts from 'echarts-for-react';
+import getOptions from '../../../../hooks/getChartOption';
+
+function SO2(props) {
+	function handleSwitch(v) {
+		console.log('switched ', v);
+	}
+
+	function handleDateChange(v) {
+		console.log('date ', v);
+	}
+
+	return (
+		<GraphBase
+			icon="battery"
+			title="二氧化硫"
+			desc="能耗趋势图"
+			switchOptions={true}
+			onSwitch={handleSwitch}
+			dateOptions={['日', '周', '月', '年']}
+			legend={['总量', '白班', '夜班']}
+			onDateChange={handleDateChange}
+			size={['long', 'middle']}
+		>
+			{/* real echarts here */}
+			<ReactECharts
+				key={Math.random()}
+				option={getOptions(
+					[
+						[132, 155, 140, 83, 180, 67, 136],
+						[83, 58, 60, 22, 80, 64, 43],
+						[49, 97, 80, 61, 100, 3, 93],
+					],
+					'氧气',
+				)}
+				style={{ height: '100%' }}
+			/>
+			{/* real table data here  */}
+		</GraphBase>
+	);
+}
+
+export default SO2;
--- a/src/components/Modules/EnergyCostAnalysis/SO2/index.module.css
+++ b/src/components/Modules/EnergyCostAnalysis/SO2/index.module.css
--- a/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.jsx
@@ -0,0 +1,37 @@
+import cls from './index.module.css';
+import GradientText from '../../../Common/GradientText';
+
+function SmokeHandle(props) {
+	return (
+		<div className={' ' + cls.smoke} style={{ color: '#fff' }}>
+			<span
+				className={cls.shadowBorder}
+				style={{
+					gridRow: '1 / 3',
+					paddingTop: '38px',
+					paddingLeft: '32px',
+					userSelect: 'none',
+				}}
+			>
+				<GradientText text="烟气处理" />
+			</span>
+			<span
+				className={cls.shadowBorder + ' ' + cls.infoText}
+				style={{ letterSpacing: '12px' }}
+			>
+				氧气含量: <span style={{ letterSpacing: '1px' }}>80%</span>
+			</span>
+			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+				一氧化氮排放浓度: 20mg/m³
+			</span>
+			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+				二氧化硫排放浓度: 20mg/m³
+			</span>
+			<span className={cls.shadowBorder + ' ' + cls.infoText}>
+				二氧化氮排放浓度: 20mg/m³
+			</span>
+		</div>
+	);
+}
+
+export default SmokeHandle;
--- a/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.module.css
+++ b/src/components/Modules/EnergyCostAnalysis/SmokeHandle/index.module.css
@@ -0,0 +1,21 @@
+.smoke {
+	display: grid;
+	gap: 6px;
+	grid-template-columns: 187px 347px 347px ;
+	grid-template-rows: 60px 60px;
+}
+
+.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;
+}
--- a/src/components/Modules/EnergyCostAnalysis/WaterCost/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/WaterCost/index.jsx
@@ -0,0 +1,44 @@
+import GraphBase from '../../../Common/GraphBase';
+import ReactECharts from 'echarts-for-react';
+import getOptions from '../../../../hooks/getChartOption';
+
+function WaterCost(props) {
+	function handleSwitch(v) {
+		console.log('switched ', v);
+	}
+
+	function handleDateChange(v) {
+		console.log('date ', v);
+	}
+
+	return (
+		<GraphBase
+			icon="battery"
+			title="水耗能"
+			desc="能耗趋势图"
+			switchOptions={true}
+			onSwitch={handleSwitch}
+			dateOptions={['日', '周', '月', '年']}
+			legend={['总量', '白班', '夜班']}
+			onDateChange={handleDateChange}
+			size={['long', 'middle']}
+		>
+			{/* real echarts here */}
+			<ReactECharts
+				key={Math.random()}
+				option={getOptions(
+					[
+						[9, 119, 56, 80, 75, 145, 66],
+						[7, 100, 14, 54, 63, 62, 11],
+						[2, 19, 42, 26, 12, 83, 55],
+					],
+					'氧气',
+				)}
+				style={{ height: '100%' }}
+			/>
+			{/* real table data here  */}
+		</GraphBase>
+	);
+}
+
+export default WaterCost;
--- a/src/components/Modules/EnergyCostAnalysis/WaterCost/index.module.css
+++ b/src/components/Modules/EnergyCostAnalysis/WaterCost/index.module.css
--- a/src/components/Modules/FireCheck/LeftSide/index.jsx
+++ b/src/components/Modules/FireCheck/LeftSide/index.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import CurrentTemp from '../../../Common/CurrentTemp';
+import WindFrequence from '../../../Common/FanRunFrequence';
+
+import { motion } from 'framer-motion';
+
+import cls from './index.module.scss';
+
+export default function index() {
+	return (
+		<motion.div
+			className={cls.leftBar}
+			initial={{ opacity: 0, position: 'absolute' }}
+			animate={{ opacity: 1, position: 'relative' }}
+			exit={{ opacity: 0, position: 'relative' }}
+			transition={{ type: 'tween' }}
+		>
+			<div style={{ flex: 1 }}>
+				<CurrentTemp style={{ width: '100%' }} />
+			</div>
+			<div style={{ flex: 1, marginTop: '24px', width: '100%' }}>
+				<WindFrequence />
+			</div>
+		</motion.div>
+	);
+}
--- a/src/components/Modules/FireCheck/LeftSide/index.module.scss
+++ b/src/components/Modules/FireCheck/LeftSide/index.module.scss
@@ -0,0 +1,9 @@
+.leftBar {
+	width: 625px;
+	height: 966px;
+	// margin-left: 40px;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
--- a/src/components/Modules/FireCheck/RightSide/index.jsx
+++ b/src/components/Modules/FireCheck/RightSide/index.jsx
@@ -0,0 +1,25 @@
+import { motion } from 'framer-motion';
+import FanInfo from '../../../Common/FanInfo';
+import cls from './index.module.scss';
+
+export default function index() {
+	return (
+		<motion.div
+			style={{
+				width: '625px',
+				height: '966px',
+				// background: '#fff3',
+				display: 'flex',
+				flexDirection: 'column',
+			}}
+			initial={{ opacity: 0, position: 'absolute' }}
+			animate={{ opacity: 1, position: 'relative' }}
+			exit={{ opacity: 0, position: 'absolute' }}
+			transition={{ type: 'tween' }}
+		>
+			<div style={{ flex: 1 }}>
+				<FanInfo longBg={true} rows={24} />
+			</div>
+		</motion.div>
+	);
+}
--- a/src/components/Modules/FireCheck/RightSide/index.module.scss
+++ b/src/components/Modules/FireCheck/RightSide/index.module.scss
@@ -0,0 +1,9 @@
+.leftBar {
+	width: 625px;
+	height: 966px;
+	// margin-left: 40px;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
--- a/src/components/Modules/Home/Bottom/index.jsx
+++ b/src/components/Modules/Home/Bottom/index.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { useEffect, useState } from 'react';
+
+import GasI from '../../../Common/GasFlow';
+import GasII from '../../../Common/NatGasFlow';
+import FaultTotal from '../../../Common/TodayFaultTotal';
+import FaultType from '../../../Common/TodayFaultType';
+
+import './index.scss';
+import cls from './index.module.css';
+
+export default function index() {
+	return (
+		<div className={`${cls.bottomBar} flex justify-between`}>
+			<FaultTotal page="home" />
+			<FaultType page="home" />
+			<GasII />
+			<GasI />
+		</div>
+	);
+}
--- a/src/components/Modules/Home/Bottom/index.module.css
+++ b/src/components/Modules/Home/Bottom/index.module.css
@@ -0,0 +1,6 @@
+.bottomBar {
+	/* background-color: #3894; */
+	width: 100%;
+	height: 100%;
+	overflow: visible;
+}
--- a/src/components/Modules/Home/Bottom/index.scss
+++ b/src/components/Modules/Home/Bottom/index.scss
@@ -0,0 +1,16 @@
+.ButtonBorder {
+	// width: 100%;
+	// height: 100%;
+
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
+
+	position: fixed;
+	bottom: 0px;
+	left: 200px;
+
+	z-index: 10000;
+
+	background-color: #000;
+}
--- a/src/components/Modules/Home/CenterTop/CenterMenu/index.jsx
+++ b/src/components/Modules/Home/CenterTop/CenterMenu/index.jsx
@@ -0,0 +1,20 @@
+import cls from './index.module.scss';
+
+export default function CenterMenu() {
+	const menuList = [
+		['窑炉总览', '/kilnSummary'],
+		['窑炉内部', '/kilnInner'],
+		['退火监测', '/stopFire'],
+		['质检统计', '/quailtyCheck'],
+		['能耗分析', '/energyCost'],
+	];
+	return (
+		<div className={`${cls.centerMenu} flex`}>
+			{menuList.map((menu) => (
+				<div key={menu[0]} className={cls.menuItem}>
+					{menu[0]}
+				</div>
+			))}
+		</div>
+	);
+}
--- a/src/components/Modules/Home/CenterTop/CenterMenu/index.module.scss
+++ b/src/components/Modules/Home/CenterTop/CenterMenu/index.module.scss
@@ -0,0 +1,32 @@
+.centerMenu {
+	position: fixed;
+	top: 120px;
+	left: 1340px;
+	color: white;
+	z-index: 10000;
+}
+
+.menuItem {
+	transition: all 0.3s ease-out;
+	cursor: pointer;
+	user-select: none;
+	padding: 10px 20px;
+	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:hover {
+	color: #00fff7;
+}
+
+.menuItem:not(:first-child) {
+	margin-left: 50px;
+}
--- a/src/components/Modules/Home/CenterTop/RightTable/index.jsx
+++ b/src/components/Modules/Home/CenterTop/RightTable/index.jsx
@@ -0,0 +1,65 @@
+import React, { Component } from "react";
+import "./righttable.module.scss";
+
+// import { ScrollBoard } from '@jiaminghi/data-view-react';
+
+let data = [
+  ["产线0", "10mm", "10mm", "10mm"],
+  ["产线2", "8mm", "8mm", "8mm"],
+  ["产线3", "15mm", "15mm", "15mm"],
+  ["产线4", "15mm", "15mm", "15mm"],
+];
+
+let header = ["产线名", "原板宽度", "净板宽", "玻璃厚度"];
+
+let config = {
+  headerBGC: "rgba(4, 44, 76, 0.3)",
+  header: [
+    '<span style="color:#fff">产线名<span/>',
+    '<span style="color:#fff">原板宽度<span/>',
+    '<span style="color:#fff">净板宽<span/>',
+    '<span style="color:#fff">玻璃厚度<span/>',
+  ],
+  oddRowBGC: "#042444",
+  evenRowBGC: "#042c4c",
+  columnWidth: [90],
+  headerHeight: 40,
+  hoverPause: false,
+  data: replaceStyle(data, 0.7),
+};
+
+function replaceStyle(Arr, opencity) {
+  let temp = [];
+
+  for (let i = 0; i < Arr.length; i++) {
+    temp[i] = [];
+    for (let j = 0; j < Arr[i].length; j++) {
+      temp[i][
+        j
+      ] = ` <span style="color:rgba(255, 255, 255,${opencity})">${Arr[i][j]}<span/>`;
+    }
+  }
+
+  return temp;
+}
+
+class Chart1 extends Component {
+  render() {
+    return (
+      <div className="CenterChart1itemDetailBorder" style={{ opacity: 0.75 }}>
+        <h2 className="CenterChart1itemTXT"> 当前产线生产规格</h2>
+        <div className="CenterChart1itemContainer">
+          <span className="CenterFormitemDetailBorderLine1"></span>
+          <span className="CenterFormitemDetailBorderLine2"></span>
+          <span className="CenterFormitemDetailBorderLine3"></span>
+          {/* <ScrollBoard
+						config={config}
+						style={{ width: '105%', height: '240%' }}
+					/> */}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Chart1;
--- a/src/components/Modules/Home/CenterTop/RightTable/righttable.module.scss
+++ b/src/components/Modules/Home/CenterTop/RightTable/righttable.module.scss
@@ -0,0 +1,50 @@
+.CenterChart1itemDetailBorder {
+	width: 100%;
+	height: 240px;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+
+	background-color: rgba(4, 44, 76, 0.2);
+	.CenterChart1itemTXT {
+		width: 100%;
+		height: 10%;
+		font-size: 20px;
+		color: rgba(255, 255, 255, 0.8);
+		text-align: center;
+		margin-top: 2%;
+	}
+	.CenterChart1itemContainer {
+		width: 95%;
+		height: 100px;
+		position: relative;
+
+		.CenterFormitemDetailBorderLine1 {
+			width: 1px;
+			height: 200px;
+			background-color: #041c2c;
+			float: left;
+			margin-left: 18%;
+			z-index: 10;
+			position: absolute;
+		}
+		.CenterFormitemDetailBorderLine2 {
+			width: 1px;
+			height: 200px;
+			background-color: #041c2c;
+			float: left;
+			margin-left: 46%;
+			z-index: 10;
+			position: absolute;
+		}
+		.CenterFormitemDetailBorderLine3 {
+			width: 1px;
+			height: 200px;
+			background-color: #041c2c;
+			float: left;
+			margin-left: 72%;
+			z-index: 10;
+			position: absolute;
+		}
+	}
+}
--- a/src/components/Modules/Home/CenterTop/index.jsx
+++ b/src/components/Modules/Home/CenterTop/index.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import Item2 from './RightTable';
+import Item1 from '../../../Common/TimeFireDir';
+
+import cls from './index.module.scss';
+
+export default function index() {
+	return (
+		<>
+			<div className="flex justify-between w-full h-full">
+				<div className={cls.leftGrid}>
+					<Item1 />
+				</div>
+				<div className={cls.rightTable}>
+					<Item2 />
+				</div>
+			</div>
+		</>
+	);
+}
--- a/src/components/Modules/Home/CenterTop/index.module.scss
+++ b/src/components/Modules/Home/CenterTop/index.module.scss
@@ -0,0 +1,8 @@
+.leftGrid {
+	// width: 416px;
+	height: 212px;
+}
+.rightTable {
+	width: 410px;
+	height: 240px;
+}
--- a/src/components/Modules/Home/LeftSide/index.jsx
+++ b/src/components/Modules/Home/LeftSide/index.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import Kiln from '../../../Common/KilnInfo/Kiln';
+import GoodProduction from '../../../Common/TodayGood/GoodProduction';
+import { motion } from 'framer-motion';
+
+import cls from './index.module.scss';
+
+export default function index() {
+	return (
+		<motion.div
+			className={cls.leftBar}
+			initial={{ opacity: 0, position: 'absolute' }}
+			animate={{ opacity: 1, position: 'relative' }}
+			exit={{ opacity: 0, position: 'relative' }}
+			transition={{ type: 'tween' }}
+		>
+			<Kiln />
+			<GoodProduction />
+		</motion.div>
+	);
+}
--- a/src/components/Modules/Home/LeftSide/index.module.scss
+++ b/src/components/Modules/Home/LeftSide/index.module.scss
@@ -0,0 +1,7 @@
+.leftBar {
+	width: 625px;
+	height: 966px;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
--- a/src/components/Modules/Home/RightSide/index.jsx
+++ b/src/components/Modules/Home/RightSide/index.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import SmokeHandle from '../../../Common/SmokeHandle';
+import EnergyCost from '../../../Common/Energy';
+
+import cls from './index.module.scss';
+
+export default function index() {
+	return (
+		<div className={`${cls.rightBar} flex flex-col`}>
+			<EnergyCost />
+			<SmokeHandle />
+		</div>
+	);
+}
--- a/src/components/Modules/Home/RightSide/index.module.scss
+++ b/src/components/Modules/Home/RightSide/index.module.scss
@@ -0,0 +1,14 @@
+.rightBar {
+	> div {
+		&:first-child {
+			margin-bottom: 24px;
+		}
+	}
+}
+
+.demoFloat {
+	position: fixed;
+	top: 100px;
+	right: 600px;
+	z-index: 10000;
+}
--- a/src/components/Modules/KilnInner/Center/VideoContainer.jsx
+++ b/src/components/Modules/KilnInner/Center/VideoContainer.jsx
@@ -0,0 +1,104 @@
+import EnterVideo from './videoComponents/EnterVideo';
+import EnterToFloorOne from './videoComponents/EnterToFloor1';
+import EnterToFloorTwo from './videoComponents/EnterToFloor2';
+import FloorOneToTwo from './videoComponents/Floor1To2';
+import FloorTwoToOne from './videoComponents/Floor2To1';
+import { useRef, useEffect, useReducer } from 'react';
+import { AnimatePresence } from 'framer-motion';
+
+const initOpacity = {
+	enterVideo: 1,
+	enterToFloorOne: 0,
+	enterToFloorTwo: 0,
+	floorOneToTwo: 0,
+	floorTwoToOne: 0,
+};
+const opacityReducer = (state, action) => {
+	switch (action.type) {
+		case 'enter-to-1': {
+			return {
+				...initOpacity,
+				enterToFloorOne: 1,
+				enterVideo: 0,
+			};
+		}
+		case 'enter-to-2': {
+			return {
+				...initOpacity,
+				enterToFloorTwo: 1,
+				enterVideo: 0,
+			};
+		}
+		case 'floor-1-to-2': {
+			return {
+				...initOpacity,
+				floorOneToTwo: 1,
+				enterToFloorOne: 0,
+				enterVideo: 0,
+				floorTwoToOne: 0,
+			};
+		}
+		case 'floor-2-to-1': {
+			return {
+				...initOpacity,
+				floorTwoToOne: 1,
+				enterToFloorTwo: 0,
+				floorOneToTwo: 0,
+				enterVideo: 0,
+			};
+		}
+	}
+};
+
+function VideoContainer(props) {
+	const floor = props.floor || null;
+	const lastFloor = useRef(null);
+	const [opacity, dispatch] = useReducer(opacityReducer, initOpacity);
+
+	useEffect(() => {
+		if (floor) {
+			if (floor == 1) {
+				if (lastFloor.current == 2) {
+					dispatch({ type: 'floor-2-to-1' });
+				} else {
+					dispatch({ type: 'enter-to-1' });
+				}
+			} else if (floor == 2) {
+				if (lastFloor.current == 1) {
+					dispatch({ type: 'floor-1-to-2' });
+				} else {
+					dispatch({ type: 'enter-to-2' });
+				}
+			}
+			lastFloor.current = floor;
+		}
+	}, [floor]);
+
+	const enterToFloorOne = () => {
+		// 更新层数
+		props.onFloorUpdate(1);
+		// floor1 one 立即显示，enter 延迟点消失
+		dispatch({ type: 'enter-to-1' });
+	};
+
+	function handleEnterVideoEnd() {
+		console.log('video end');
+		enterToFloorOne();
+	}
+
+	return (
+		<AnimatePresence>
+			<EnterVideo
+				key="enter"
+				onVideoEnd={handleEnterVideoEnd}
+				opacity={opacity.enterVideo}
+			/>
+			<EnterToFloorOne key="enter-to-1" opacity={opacity.enterToFloorOne} />
+			<EnterToFloorTwo key="enter-to-2" opacity={opacity.enterToFloorTwo} />
+			<FloorOneToTwo key="1-to-2" opacity={opacity.floorOneToTwo} />
+			<FloorTwoToOne key="2-to-1" opacity={opacity.floorTwoToOne} />
+		</AnimatePresence>
+	);
+}
+
+export default VideoContainer;
--- a/src/components/Modules/KilnInner/Center/index.jsx
+++ b/src/components/Modules/KilnInner/Center/index.jsx
@@ -0,0 +1,125 @@
+import { useState } from 'react';
+import cls from './index.module.css';
+import Chart2 from '../../../Common/TimeFireDir';
+import VideoContainer from './VideoContainer';
+
+function KilnCenter() {
+	const [floor, setFloor] = useState(0);
+
+	function onFloorUpdate(flr) {
+		setFloor(flr);
+	}
+
+	return (
+		<div
+			className="bgKilnInner"
+			style={{
+				width: '100%',
+				position: 'absolute',
+				top: '12%',
+				display: 'flex',
+				flexDirection: 'column',
+			}}
+		>
+			{/* 时间火向数据 */}
+			<div
+				className="fireAndTime"
+				style={{ position: 'absolute', top: '-112px', height: '212px' }}
+			>
+				<Chart2 />
+			</div>
+
+			{/* menu  */}
+			<div
+				className="subMenu"
+				style={{
+					display: 'flex',
+					marginBottom: '24px',
+					justifyContent: 'center',
+				}}
+			>
+				<div
+					className={
+						'flr flr1 ' + cls.menuItem + ' ' + (floor == 1 ? cls.active : '')
+					}
+					onClick={() => onFloorUpdate(1)}
+				>
+					一层
+				</div>
+				<div
+					className={
+						'flr flr2 ' + cls.menuItem + ' ' + (floor == 2 ? cls.active : '')
+					}
+					onClick={() => onFloorUpdate(2)}
+				>
+					二层
+				</div>
+			</div>
+
+			{/* video  */}
+			<VideoContainer onFloorUpdate={onFloorUpdate} floor={floor} />
+
+			{/* <div className={cls.videoLayer2}></div> */}
+
+			{/* left side  */}
+			{/* <div
+				className="leftSide"
+				style={{
+					position: 'absolute',
+					left: '88px',
+					top: '24%',
+					display: 'grid',
+					gridTemplateColumns: '100px 100px',
+					gap: '20px 18px',
+					gridAutoRows: '64px',
+				}}
+			>
+				{data.map((item) => (
+					<div
+						className="leftSideItem"
+						style={{
+							background: '#fff3',
+							display: 'flex',
+							flexDirection: 'column',
+							alignItems: 'center',
+							justifyContent: 'center',
+							background: '#32535d',
+						}}
+					>
+						<span style={{ fontSize: '18px', lineHeight: 1, color: '#2EE4E6' }}>
+							{item.name}
+						</span>
+						<span
+							style={{ fontSize: '24px', lineHeight: '32px', color: '#fff' }}
+						>
+							{item.value} ℃
+						</span>
+					</div>
+				))}
+			</div>
+
+			<div
+				className="toolbox"
+				style={{
+					position: 'absolute',
+					bottom: '32px',
+					left: '64px',
+					display: 'flex',
+					alignItems: 'center',
+					gap: '24px',
+				}}
+			>
+				<div
+					className="tlj tlj1"
+					style={{ background: '#ccc', width: '200px', height: '100px' }}
+				></div>
+				<div
+					className="tlj tlj2"
+					style={{ background: '#ccc', width: '200px', height: '100px' }}
+				></div>
+			</div> */}
+		</div>
+	);
+}
+
+export default KilnCenter;
--- a/src/components/Modules/KilnInner/Center/index.module.css
+++ b/src/components/Modules/KilnInner/Center/index.module.css
@@ -0,0 +1,46 @@
+.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;
+}
+
+.videoLayer2 {
+	width: 2440px;
+	height: 720px;
+	background: url(../../../../assets/video-layer-2.png) no-repeat;
+	background-size: 100% 100%;
+	background-position: 0 0;
+	position: fixed;
+	top: 0;
+	left: 0;
+}
+.videoLayer1 {
+	width: 2440px;
+	height: 720px;
+	background: url(../../../../assets/floor1-status.png) no-repeat;
+	background-size: 100% 100%;
+	background-position: 0 0;
+	position: fixed;
+	top: 0;
+	left: 0;
+}
--- a/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx
+++ b/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx
@@ -0,0 +1,92 @@
+import { motion, AnimatePresence } from "framer-motion";
+import { useRef, useEffect, useMemo, useCallback, useState } from "react";
+import cls from "../index.module.css";
+// import SocketContext from '../../../../../store/socket-data-provider';
+import { useContext } from "react";
+
+function EnterToFloorOne(props) {
+  // const ctx = useContext(SocketContext);
+  const ctx = null;
+
+  const fireDir = ctx?.runState?.fireDirection || null;
+  const [fireCanPlay, setFireCanPlay] = useState(false);
+  const vd = useRef(null);
+  const show = props.opacity || 0;
+
+  useEffect(() => {
+    if (show) {
+      vd.current.play();
+      setTimeout(() => {
+        console.log("开启enter的火播放");
+        setFireCanPlay(true);
+      }, 5000);
+    }
+    return () => {
+      console.log("关闭enter的火播放");
+      setFireCanPlay(false);
+    };
+  }, [show]);
+
+  return (
+    <AnimatePresence>
+      {show && (
+        <motion.div
+          className="video-wrapper"
+          style={{
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            zIndex: -999,
+            overflow: "hidden",
+          }}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }}
+        >
+          <video ref={vd} muted width={"100%"}>
+            <source src="/video/floor1.webm" type="video/mp4" />
+          </video>
+
+          {fireCanPlay && fireDir == "东火" && (
+            <video
+              src="/video/fire_top.webm"
+              muted
+              autoPlay
+              loop
+              width={3900}
+              style={{ position: "absolute", top: "-20px", left: "-20px" }}
+            ></video>
+          )}
+          {fireCanPlay && fireDir == "西火" && (
+            <video
+              src="/video/fire_down.webm"
+              muted
+              autoPlay
+              loop
+              width={3900}
+              style={{ position: "absolute", top: "-20px", left: "-20px" }}
+            ></video>
+          )}
+
+          <motion.div
+            className={cls.videoLayer1}
+            key="eto1div"
+            style={{
+              top: "336px",
+              left: "730px",
+              width: "2380px",
+            }}
+            animate={{
+              opacity: [0, 0, 0, 0.6, 1],
+              transition: { duration: 0.3, delay: 2 },
+            }}
+          ></motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+export default EnterToFloorOne;
--- a/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor2.jsx
+++ b/src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor2.jsx
@@ -0,0 +1,44 @@
+import { motion } from 'framer-motion';
+import { useRef, useEffect } from 'react';
+
+function EnterToFloorTwo(props) {
+	const vd = useRef(null);
+	const opacity = props.opacity || 0;
+
+	if (opacity == 1) {
+		setTimeout(() => {
+			vd.current.play();
+		}, 100);
+	}
+
+	useEffect(() => {
+		vd.current.addEventListener('ended', () => {
+			setTimeout(() => {
+				vd.current.currentTime = 0;
+			}, 1000);
+		});
+	}, []);
+
+	return (
+		<motion.div
+			className="video-wrapper"
+			style={{
+				position: 'fixed',
+				top: 0,
+				left: 0,
+				width: '100%',
+				height: '100%',
+				zIndex: -1000,
+				opacity: opacity,
+				zIndex: -999,
+			}}
+			transition={{ type: 'tween', duration: 1 }}
+		>
+			<video ref={vd} muted width={'100%'}>
+				<source src="/video/floor2.webm" type="video/mp4" />
+			</video>
+		</motion.div>
+	);
+}
+
+export default EnterToFloorTwo;
--- a/src/components/Modules/KilnInner/Center/videoComponents/EnterVideo.jsx
+++ b/src/components/Modules/KilnInner/Center/videoComponents/EnterVideo.jsx
@@ -0,0 +1,38 @@
+import { motion, AnimatePresence } from 'framer-motion';
+import { useEffect, useRef, useMemo } from 'react';
+
+function EnterVideo(props) {
+	const show = props.opacity || 0;
+	const vd = useRef(null);
+
+	useEffect(() => {
+		vd.current.addEventListener('ended', props.onVideoEnd);
+	}, []);
+
+	return (
+		<AnimatePresence>
+			{show && (
+				<motion.div
+					className="video-wrapper"
+					style={{
+						position: 'fixed',
+						top: 0,
+						left: 0,
+						width: '100%',
+						height: '100%',
+						zIndex: -1000,
+					}}
+					initial={{ opacity: 0 }}
+					animate={{ opacity: 1 }}
+					exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }}
+				>
+					<video ref={vd} muted autoPlay={true} width={'100%'}>
+						<source src="/video/enter.webm" type="video/mp4" />
+					</video>
+				</motion.div>
+			)}
+		</AnimatePresence>
+	);
+}
+
+export default EnterVideo;
--- a/src/components/Modules/KilnInner/Center/videoComponents/Floor1To2.jsx
+++ b/src/components/Modules/KilnInner/Center/videoComponents/Floor1To2.jsx
@@ -0,0 +1,97 @@
+import { motion, AnimatePresence } from "framer-motion";
+import { useRef, useEffect, useMemo, useState } from "react";
+import cls from "../index.module.css";
+// import SocketContext from '../../../../../store/socket-data-provider';
+import { useContext } from "react";
+
+function FloorOneToTwo(props) {
+  // const ctx = useContext(SocketContext);
+
+  const ctx = null;
+
+  const fireDir = ctx?.runState?.fireDirection || null;
+  const [fireCanPlay, setFireCanPlay] = useState(false);
+
+  const vd = useRef(null);
+  const show = props.opacity || 0;
+
+  useEffect(() => {
+    if (show) {
+      vd.current.play();
+      setTimeout(() => {
+        console.log("开启1-2的火播放");
+        setFireCanPlay(true);
+      }, 3000);
+    }
+    if (!show) setFireCanPlay(false);
+    return () => {
+      console.log("关闭1-2的火播放");
+      setFireCanPlay(false);
+    };
+  }, [show]);
+
+  return (
+    <AnimatePresence>
+      {show && (
+        <motion.div
+          className="video-wrapper"
+          style={{
+            position: "fixed",
+            top: "7px",
+            left: "50px",
+            width: "calc(100% - 50px)",
+            height: "calc(100% - 7px)",
+            zIndex: -998,
+            overflow: "clip",
+          }}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0, transition: { duration: 0, delay: 0.1 } }}
+        >
+          <video ref={vd} muted>
+            <source src="/video/1to2.webm" type="video/mp4" />
+          </video>
+
+          {fireCanPlay && fireDir == "东火" && (
+            <video
+              src="/video/fire_top.webm"
+              muted
+              autoPlay
+              loop
+              width={3700}
+              style={{ position: "absolute", top: "18px", left: "56px" }}
+            ></video>
+          )}
+          {fireCanPlay && fireDir == "西火" && (
+            // {fireCanPlay && (
+            <video
+              src="/video/fire_down.webm"
+              muted
+              autoPlay
+              loop
+              width={3780}
+              style={{ position: "absolute", top: "-24px", left: "12px" }}
+            ></video>
+          )}
+
+          <motion.div
+            className={cls.videoLayer2}
+            key="1to2div"
+            style={{
+              top: "360px",
+              left: "740px",
+              width: "2415px",
+              height: "690px",
+            }}
+            animate={{
+              opacity: [0, 0, 0, 0.6, 1],
+              transition: { duration: 0.3, delay: 2 },
+            }}
+          ></motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+export default FloorOneToTwo;
--- a/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx
+++ b/src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx
@@ -0,0 +1,97 @@
+import { motion, AnimatePresence } from "framer-motion";
+import { useRef, useEffect, useMemo, useState } from "react";
+import cls from "../index.module.css";
+// import SocketContext from '../../../../../store/socket-data-provider';
+import { useContext } from "react";
+
+function FloorTwoToOne(props) {
+  // const ctx = useContext(SocketContext);
+
+  const ctx = null;
+
+  const fireDir = ctx?.runState?.fireDirection || null;
+  const [fireCanPlay, setFireCanPlay] = useState(false);
+
+  const vd = useRef(null);
+  const show = props.opacity || 0;
+
+  useEffect(() => {
+    if (show) {
+      vd.current.play();
+      setTimeout(() => {
+        console.log("开启2-1的火播放");
+        setFireCanPlay(true);
+      }, 3000);
+    }
+    if (!show) setFireCanPlay(false);
+    return () => {
+      console.log("关闭2-1的火播放");
+      setFireCanPlay(false);
+    };
+  }, [show]);
+
+  return (
+    <AnimatePresence>
+      {show && (
+        <motion.div
+          className="video-wrapper"
+          style={{
+            position: "fixed",
+            top: "7px",
+            left: "50px",
+            width: "calc(100% - 50px)",
+            height: "calc(100% - 7px)",
+            zIndex: -998,
+            overflow: "clip",
+          }}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0, transition: { duration: 0.2, delay: 0.2 } }}
+        >
+          <video ref={vd} muted>
+            <source src="/video/2to1.webm" type="video/mp4" />
+          </video>
+
+          {fireCanPlay && fireDir == "东火" && (
+            // {fireCanPlay && (
+            <video
+              src="/video/fire_top.webm"
+              muted
+              autoPlay
+              loop
+              width={3800}
+              style={{ position: "absolute", top: "10px", left: "-26px" }}
+            ></video>
+          )}
+          {fireCanPlay && fireDir == "西火" && (
+            // {fireCanPlay && (
+            <video
+              src="/video/fire_down.webm"
+              muted
+              autoPlay
+              loop
+              width={3800}
+              style={{ position: "absolute", top: "-12px", left: "-26px" }}
+            ></video>
+          )}
+
+          <motion.div
+            className={cls.videoLayer1}
+            key="eto1div"
+            style={{
+              top: "336px",
+              left: "730px",
+              width: "2380px",
+            }}
+            animate={{
+              opacity: [0, 0, 0, 0.6, 1],
+              transition: { duration: 0.3, delay: 2 },
+            }}
+          ></motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+export default FloorTwoToOne;
--- a/src/components/Modules/KilnInner/LeftSide/index.jsx
+++ b/src/components/Modules/KilnInner/LeftSide/index.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import Kiln from '../../../Common/KilnInfo/Kiln';
+import GasFlow from '../../../Common/NatGasFlow';
+import WindFlow from '../../../Common/GasFlow';
+
+import { motion } from 'framer-motion';
+
+import cls from './index.module.scss';
+
+export default function index() {
+	return (
+		<motion.div
+			className={cls.leftBar}
+			initial={{ opacity: 0, position: 'absolute' }}
+			animate={{ opacity: 1, position: 'relative' }}
+			exit={{ opacity: 0, position: 'relative' }}
+			transition={{ type: 'tween' }}
+		>
+			<Kiln />
+			<GasFlow style={{ flex: 1, width: '100%', marginTop: '24px' }} />
+			<WindFlow style={{ flex: 1, width: '100%', marginTop: '24px' }} />
+		</motion.div>
+	);
+}
--- a/src/components/Modules/KilnInner/LeftSide/index.module.scss
+++ b/src/components/Modules/KilnInner/LeftSide/index.module.scss
@@ -0,0 +1,9 @@
+.leftBar {
+	width: 625px;
+	height: 966px;
+	// margin-left: 40px;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
--- a/src/components/Modules/KilnInner/RightSide/index.jsx
+++ b/src/components/Modules/KilnInner/RightSide/index.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import FanInfo from '../../../Common/FanInfo';
+import WindFrequence from '../../../Common/FanRunFrequence';
+import { motion } from 'framer-motion';
+
+import cls from './index.module.scss';
+
+export default function index() {
+	return (
+		<motion.div
+			style={{
+				width: '625px',
+				height: '966px',
+				// background: '#fff3',
+				display: 'flex',
+				flexDirection: 'column',
+			}}
+			initial={{ opacity: 0, position: 'absolute' }}
+			animate={{ opacity: 1, position: 'relative' }}
+			exit={{ opacity: 0, position: 'absolute' }}
+			transition={{ type: 'tween' }}
+		>
+			<div style={{ height: '380px' }}>
+				<FanInfo />
+			</div>
+			<div style={{ flex: 1, marginTop: '24px' }}>
+				<WindFrequence />
+			</div>
+		</motion.div>
+	);
+}
--- a/src/components/Modules/KilnInner/RightSide/index.module.scss
+++ b/src/components/Modules/KilnInner/RightSide/index.module.scss
--- a/src/components/Modules/QualityCheck/LeftSide/index.jsx
+++ b/src/components/Modules/QualityCheck/LeftSide/index.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import Spec from '../../../Common/CurrentLineSpec';
+import GoodRate from '../../../Common/TodayGood/GoodProduction';
+
+import { motion } from 'framer-motion';
+
+import cls from './index.module.scss';
+
+export default function index() {
+	return (
+		<motion.div
+			className={cls.leftBar}
+			initial={{ opacity: 0, position: 'absolute' }}
+			animate={{ opacity: 1, position: 'relative' }}
+			exit={{ opacity: 0, position: 'relative' }}
+			transition={{ type: 'tween' }}
+		>
+			<Spec style={{ width: '100%' }} />
+			<GoodRate style={{ flex: 1, marginTop: '24px', width: '100%' }} />
+		</motion.div>
+	);
+}
--- a/src/components/Modules/QualityCheck/LeftSide/index.module.scss
+++ b/src/components/Modules/QualityCheck/LeftSide/index.module.scss
@@ -0,0 +1,9 @@
+.leftBar {
+	width: 625px;
+	height: 966px;
+	// margin-left: 40px;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
--- a/src/components/Modules/QualityCheck/RightSide/index.jsx
+++ b/src/components/Modules/QualityCheck/RightSide/index.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import FanInfo from '../../../Common/FanInfo';
+import WindFrequence from '../../../Common/FanRunFrequence';
+import FaultType from '../../../Common/TodayFaultType';
+import FaultTotal from '../../../Common/TodayFaultTotal';
+import { motion } from 'framer-motion';
+
+import cls from './index.module.scss';
+
+export default function index() {
+	return (
+		<motion.div
+			style={{
+				width: '625px',
+				height: '966px',
+				// background: '#fff3',
+				display: 'flex',
+				flexDirection: 'column',
+			}}
+			initial={{ opacity: 0, position: 'absolute' }}
+			animate={{ opacity: 1, position: 'relative' }}
+			exit={{ opacity: 0, position: 'absolute' }}
+			transition={{ type: 'tween' }}
+		>
+			<div style={{ height: '357px' }}>
+				<FaultType page="fault-total" />
+			</div>
+			<div style={{ flex: 1, marginTop: '24px' }}>
+				<FaultTotal page="fault-total" />
+			</div>
+		</motion.div>
+	);
+}
--- a/src/components/Modules/QualityCheck/RightSide/index.module.scss
+++ b/src/components/Modules/QualityCheck/RightSide/index.module.scss