变更目录结构

src/components/CenterTopData/CenterMenu/index.module.less

@@ -1,8 +1,9 @@
 .centerMenu {
-	position: absolute;
-	top: 20px;
-	left: 680px;
+	position: fixed;
+	top: 120px;
+	left: 1340px;
 	color: white;
+	z-index: 10000;
 }
 
 .menuItem {

src/components/CenterTopData/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import CenterMenu from './CenterMenu';
+import NavMenu from '../公共组件/导航菜单';
 import Item2 from './RightTable';
 import Item1 from './LeftBoxes';
 
@@ -8,7 +8,7 @@ import cls from './index.module.less';
 export default function index() {
 	return (
 		<>
-			<CenterMenu />
+			<NavMenu />
 			<div className="flex justify-between w-full h-full">
 				<div className={cls.leftGrid}>
 					<Item1 />

src/components/Head/index.less

@@ -1,88 +0,0 @@
-.TopTitleBoder {
-  width: 3840px;
-  height: 84px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-
-  .TopSideRight {
-    margin-top: 40px;
-    margin-right: 40px;
-    width: 493px;
-    height: 16px;
-  }
-
-  .TopSideLeft {
-    margin-left: 40px;
-    margin-top: 40px;
-    width: 493px;
-    height: 16px;
-  }
-
-  .TopSideLeftLine {
-    background: url('../../assets/TopTitleLeft.png');
-    width: 899px;
-    height: 40px;
-    margin-top: 42px;
-    display: flex;
-    flex-direction: row;
-    justify-content: right;
-
-    .TopSideLeftLineicon {
-      margin-right: 40px;
-      margin-top: 25px;
-      width: 204.32px;
-      height: 2.79px;
-    }
-
-    .TopSideLeftTxt {
-      margin-right: 120px;
-      margin-top: 15px;
-      color: rgb(255, 255, 255, 0.8);
-      font-size: 20px;
-      font-weight: 300px;
-      line-height: 22.174976px;
-    }
-  }
-
-  .TopSiderightLine {
-    background: url('../../assets/TopTitleRight.png');
-    width: 899px;
-    height: 40px;
-    margin-top: 42px;
-    display: flex;
-    flex-direction: row;
-    justify-content: left;
-
-    .TopSideRightLineicon {
-      margin-left: 40px;
-      margin-top: 25px;
-      width: 204.32px;
-      height: 2.79px;
-    }
-
-    .TopSideRightTxt {
-      margin-left: 120px;
-      margin-top: 15px;
-      color: rgb(255, 255, 255, 0.8);
-      font-size: 20px;
-      font-weight: 600px;
-      line-height: 22.174976px;
-    }
-  }
-
-  .TopButtonLine {
-    margin-top: -9px;
-    width: 760px;
-    height: 14px;
-  }
-
-  .TopTitleText {
-    margin-top: 16px;
-    letter-spacing: 8px;
-    font-size: 32px;
-    color: #00fff7;
-    text-align: center;
-    letter-spacing: 2px;
-  }
-}

src/components/LeftBar/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Kiln from './Kiln';
-import GoodProduction from './GoodProduction';
+import GoodProduction from '../公共组件/本日生产良品率/GoodProduction';
 
 import cls from './index.module.less';
 

src/components/公共组件/产线当日缺陷分类/1

@@ -0,0 +1 @@
+1

src/components/公共组件/产线缺陷统计/1

@@ -0,0 +1 @@
+1

src/components/公共组件/助燃风流量/1

@@ -0,0 +1 @@
+1

src/components/公共组件/天然气流量/1

@@ -0,0 +1 @@
+1

src/components/公共组件/导航菜单/index.jsx

@@ -0,0 +1,20 @@
+import cls from './index.module.less';
+
+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>
+	);
+}

src/components/公共组件/导航菜单/index.module.less

@@ -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;
+}

src/components/公共组件/时间火向数据/1

@@ -0,0 +1 @@
+1

src/components/LeftBar/GoodProduction.jsx → src/components/公共组件/本日生产良品率/GoodProduction.jsx

@@ -1,8 +1,8 @@
 import cls from './good.module.less';
-import Container from '../Container';
-import TodayTableData from './substitutionCharts/TodayTableData';
-import GoodRateChart from './substitutionCharts/GoodRateChart';
-import TechSplitline from './substitutionCharts/TechSplitline';
+import Container from '../../Container';
+import TodayTableData from './components/TodayTableData';
+import GoodRateChart from './components/GoodRateChart';
+import TechSplitline from './components/TechSplitline';
 
 const GoodProduction = () => {
 	return (

src/components/LeftBar/substitutionCharts/GoodRateChart/index.jsx → src/components/公共组件/本日生产良品率/components/GoodRateChart/index.jsx

@@ -3,7 +3,7 @@ import './overwrite.css'; // 覆写 antd 默认样式，全局
 import ReactECharts from 'echarts-for-react';
 import * as echarts from 'echarts';
 import { Switch, Radio } from 'antd';
-import { randomInt } from '../../../../utils';
+import { randomInt } from '../../../../../utils';
 
 const GoodRateChart = (props) => {
 	const options = {

src/components/LeftBar/good.module.less → src/components/公共组件/本日生产良品率/good.module.less

@@ -1,5 +1,5 @@
 .goodProd {
-	background: url(../../assets/good.png) no-repeat;
+	background: url(../../../assets/good.png) no-repeat;
 	background-size: 100% 100%;
 	width: 625px;
 	// height: 626px;

src/components/公共组件/烟气处理/1

@@ -0,0 +1 @@
+1

src/components/公共组件/能耗/1

@@ -0,0 +1 @@
+1

src/components/Head/index.jsx → src/components/公共组件/顶部公司名称/index.jsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState, useRef } from 'react';
 
-import TopSide from '../../assets/TopSide.png';
-import LeftLine from '../../assets/TopTitleLeftIcon.png';
-import RightLine from '../../assets/TopTitleRightIcon.png';
-import ButtonLine from '../../assets/TopButtonLine.png';
+import TopSide from '../../../assets/TopSide.png';
+import LeftLine from '../../../assets/TopTitleLeftIcon.png';
+import RightLine from '../../../assets/TopTitleRightIcon.png';
+import ButtonLine from '../../../assets/TopButtonLine.png';
 import './index.less';
 
 export default function index() {

src/components/公共组件/顶部公司名称/index.less

@@ -0,0 +1,88 @@
+.TopTitleBoder {
+	width: 3840px;
+	height: 84px;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+
+	.TopSideRight {
+		margin-top: 40px;
+		margin-right: 40px;
+		width: 493px;
+		height: 16px;
+	}
+
+	.TopSideLeft {
+		margin-left: 40px;
+		margin-top: 40px;
+		width: 493px;
+		height: 16px;
+	}
+
+	.TopSideLeftLine {
+		background: url('../../../assets/TopTitleLeft.png');
+		width: 899px;
+		height: 40px;
+		margin-top: 42px;
+		display: flex;
+		flex-direction: row;
+		justify-content: right;
+
+		.TopSideLeftLineicon {
+			margin-right: 40px;
+			margin-top: 25px;
+			width: 204.32px;
+			height: 2.79px;
+		}
+
+		.TopSideLeftTxt {
+			margin-right: 120px;
+			margin-top: 15px;
+			color: rgb(255, 255, 255, 0.8);
+			font-size: 20px;
+			font-weight: 300px;
+			line-height: 22.174976px;
+		}
+	}
+
+	.TopSiderightLine {
+		background: url('../../../assets/TopTitleRight.png');
+		width: 899px;
+		height: 40px;
+		margin-top: 42px;
+		display: flex;
+		flex-direction: row;
+		justify-content: left;
+
+		.TopSideRightLineicon {
+			margin-left: 40px;
+			margin-top: 25px;
+			width: 204.32px;
+			height: 2.79px;
+		}
+
+		.TopSideRightTxt {
+			margin-left: 120px;
+			margin-top: 15px;
+			color: rgb(255, 255, 255, 0.8);
+			font-size: 20px;
+			font-weight: 600px;
+			line-height: 22.174976px;
+		}
+	}
+
+	.TopButtonLine {
+		margin-top: -9px;
+		width: 760px;
+		height: 14px;
+	}
+
+	.TopTitleText {
+		margin-top: 16px;
+		letter-spacing: 8px;
+		font-size: 32px;
+		color: #00fff7;
+		text-align: center;
+		letter-spacing: 2px;
+	}
+}

src/components/总览/1

@@ -0,0 +1 @@
+1

src/components/窑炉信息/1

@@ -0,0 +1 @@
+1

src/components/窑炉内部/1

@@ -0,0 +1 @@
+1

src/components/能耗分析/1

@@ -0,0 +1 @@
+1

src/components/质检统计/1

@@ -0,0 +1 @@
+1

src/components/退火监测/1

@@ -0,0 +1 @@
+1

src/pages/index.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import './global.less';
 import './index.less';
-import Head from '../components/Head';
+import Head from '../components/公共组件/顶部公司名称';
 import LeftBar from '../components/LeftBar';
 import BottomBar from '../components/BottomBar';
 import RightBar from '../components/RightBar';