update

package.json

@@ -25,7 +25,7 @@
         "antd": "^4.20.6",
         "echarts": "^5.3.2",
         "echarts-for-react": "^3.0.2",
-        "framer-motion": "^6.3.3",
+        "framer-motion": "^6.5.1",
         "less": "^4.1.3",
         "less-loader": "^11.0.0",
         "react": "^16.8.6",
@@ -37,13 +37,15 @@
     },
     "devDependencies": {
         "@babel/runtime": "^7.18.0",
+        "@types/node": "^20.8.10",
         "@types/react": "^17.0.0",
         "@types/react-dom": "^17.0.0",
+        "@types/ws": "^8.5.8",
         "@umijs/preset-react": "1.x",
         "@umijs/test": "^3.5.23",
         "lint-staged": "^10.0.7",
         "prettier": "^2.2.0",
-        "typescript": "^4.1.2",
+        "typescript": "^4.9.5",
         "yorkie": "^2.0.0"
     }
 }

src/components/BottomBar/index.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { useEffect, useState } from 'react';
-
-import GasI from './gasi';
-import GasII from './gasii';
-import FaultTotal from './FaultTotal';
-import FaultType from './FaultType';
-
-import './index.less';
-import cls from './index.module.css';
-
-export default function index() {
-	return (
-		<div className={`${cls.bottomBar} flex justify-between`}>
-			<FaultTotal />
-			<FaultType />
-			<GasII />
-			<GasI />
-		</div>
-	);
-}

src/components/CenterTopData/LeftBoxes/leftbox.module.less

@@ -1,33 +0,0 @@
-.leftbox {
-  // width: 440px;
-  // background: rgb(127, 202, 42);
-  
-  .box {
-    margin-right: 16px;
-    width: 200px;
-    padding: 8px;
-    background: url(../../../assets/CenterChart2ItemBg.png);
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    display: flex;
-    align-items: flex-start;
-    user-select: none;
-
-    .box__inner {
-      padding-top: 12px;
-
-      .box__label {
-        color: #fffa;
-        font-size: 18px;
-        line-height: 14px;
-      }
-      
-      .box__value {
-        color: #fff;
-        font-weight: 400;
-        font-size: 30px;
-        line-height: 34px;
-      }
-    }
-  }
-}

src/components/CenterTopData/RightTable/righttable.module.less

@@ -1,52 +0,0 @@
-.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;
-    }
-  }
-}

src/components/CenterTopData/index.module.less

@@ -1,8 +0,0 @@
-.leftGrid {
-  // width: 416px;
-  height: 212px;
-}
-.rightTable {
-  width: 410px;
-  height: 240px;
-}

src/components/Container.jsx

@@ -1,47 +1,15 @@
 import { useEffect, useRef } from 'react';
-
+import useIcon from '../hooks/useIcon';
 import cls from './container.module.less';
 
-import IconStack from '../assets/Icon/icon-stack.png';
-import IconGood from '../assets/Icon/icon-good.png';
-import IconCharger from '../assets/Icon/icon-charge.png';
-import IconSmoke from '../assets/Icon/icon-taiji.png';
-import IconChart from '../assets/Icon/icon-chart.png';
-import IconPuzzle from '../assets/Icon/icon-puzzle.png';
-import IconPause from '../assets/Icon/icon-pause.png';
-
 const Container = (props) => {
-	let icon = useRef(null);
-
-	switch (props.icon) {
-		case 'kiln':
-			icon.current = IconStack;
-			break;
-		case 'good': // 良品率
-			icon.current = IconGood;
-			break;
-		case 'charger':
-			icon.current = IconCharger;
-			break;
-		case 'smoke':
-			icon.current = IconSmoke;
-			break;
-		case 'chart':
-			icon.current = IconChart;
-			break;
-		case 'puzzle':
-			icon.current = IconPuzzle;
-			break;
-		case 'pause':
-			icon.current = IconPause;
-			break;
-	}
+	let icon = useIcon(props.icon);
 
 	return (
-		<div className={`${cls.container} ${props.className}`}>
+		<div className={`${cls.container} ${props.className}`} style={props.style}>
 			<div className={cls.container__head}>
 				<img
-					src={icon.current}
+					src={icon}
 					alt="#"
 					className={props.icon == 'kiln' ? cls.bigger : ''}
 				/>

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,14 +0,0 @@
-import React from 'react';
-import Kiln from './Kiln';
-import GoodProduction from './GoodProduction';
-
-import cls from './index.module.less';
-
-export default function index() {
-	return (
-		<div className={cls.leftBar}>
-			<Kiln />
-			<GoodProduction />
-		</div>
-	);
-}

src/components/RightBar/TechSplitline/index.jsx

@@ -1,7 +0,0 @@
-import cls from './index.module.less';
-
-const TechSplitline = (props) => {
-	return <div className={cls.techSplitline}></div>;
-};
-
-export default TechSplitline;

src/components/RightBar/TechSplitline/index.module.less

@@ -1,5 +0,0 @@
-.techSplitline {
-	height: 2px;
-	width: 100%;
-	background: radial-gradient(#3ce7ff, #3ce8ff92, #3ce8ff32, transparent);
-}

src/components/Slider/index.jsx

@@ -1,17 +0,0 @@
-import './slider.css';
-import { useState } from 'react';
-
-const Slider = (props) => {
-	const [v, setV] = useState(100);
-	const handleInput = (e) => {
-		setV(e.target.value);
-		props.handleSlide(e.target.value);
-	};
-	return (
-		<div id="slider" className="slider">
-			<input type="range" value={v} onInput={handleInput} onChange={() => {}} />
-		</div>
-	);
-};
-
-export default Slider;

src/components/公共组件/BottomItemBackground/index.jsx

@@ -7,6 +7,7 @@ function BottomBarItem(props) {
 			icon={props.icon}
 			title={props.title}
 			className={`${cls.bottomBarItem} ${props.className}`}
+			style={props.style}
 		>
 			{props.children}
 		</Container>

src/components/公共组件/GradientText/index.jsx

@@ -0,0 +1,25 @@
+const GradientText = ({ text, spacing }) => {
+	return (
+		<svg>
+			<defs>
+				<linearGradient id="smoke-text" x1="0%" y1="0%" x2="0%" y2="100%">
+					<stop offset="0%" style={{ stopColor: '#4EFFF6', stopOpacity: 1 }} />
+					<stop
+						offset="100%"
+						style={{ stopColor: '#00B2F9', stopOpacity: 1 }}
+					/>
+				</linearGradient>
+			</defs>
+			<text
+				x={0}
+				y={36}
+				fill="url(#smoke-text)"
+				style={{ fontSize: '28px', letterSpacing: spacing || '2px' }}
+			>
+				{text}
+			</text>
+		</svg>
+	);
+};
+
+export default GradientText;

src/components/公共组件/GraphBase/index.jsx

@@ -0,0 +1,124 @@
+// TODO: 通用组件 - 按钮 菜单控制层
+import useIcon from '../../../hooks/useIcon';
+import cls from './index.module.css';
+import { useMemo, useState } from 'react';
+import { Switch, Radio } from 'antd';
+
+function choseBg(size) {
+	const [width, height] = size;
+	return width === 'long' && height === 'middle'
+		? 'long-middle'
+		: width === 'long' && height === 'short'
+		? 'long-short'
+		: width === 'short' && height === 'middle'
+		? 'short-middle'
+		: width === 'short' && height === 'short'
+		? 'short-short'
+		: width === 'short' && height === 'long'
+		? 'short-long'
+		: width === 'middle' && height === 'middle'
+		? 'middle-middle'
+		: width === 'middle' && height === 'short'
+		? 'middle-short'
+		: width === 'middle' && height === 'long'
+		? 'middle-long'
+		: width === 'middle' && height === 'full'
+		? 'middle-full'
+		: 'middle-middle';
+}
+
+function GraphBase(props) {
+	const size = props.size || ['middle', 'middle'];
+	const bgClass = choseBg(size);
+	const {
+		icon,
+		title,
+		desc,
+		switchOptions,
+		onSwitch,
+		dateOptions,
+		onDateChange,
+		legend,
+	} = props;
+	const iconSrc = useIcon(icon);
+	const colors = useMemo(() => ['#ffd160', '#2760ff', '#15e8f5'], []);
+	const [showChart, setShowChart] = useState(true);
+
+	let dto = null;
+	const switchStyle = {};
+
+	if (props.switchPosition) {
+		props.switchPosition.forEach((item, index) => {
+			if (item != null) {
+				switchStyle[index == 0 ? 'top' : 'left'] = item + 'px';
+			}
+		});
+	}
+	if (dateOptions) {
+		dto = dateOptions.map((item) => (
+			<Radio.Button value={item} key={item} className="radio-group__item">
+				{item}
+			</Radio.Button>
+		));
+	}
+
+	function handleSwitchChange(v) {
+		v ? setShowChart(true) : setShowChart(false);
+		onSwitch(v);
+	}
+
+	return (
+		<div
+			className={
+				'graph-base ' +
+				cls[bgClass] +
+				' ' +
+				cls.graphBase +
+				' ' +
+				props.className
+			}
+			style={{ ...props.style }}
+		>
+			<div className={cls.graphBaseTitle}>
+				<img src={iconSrc} alt="#" />
+				<h2>{title}</h2>
+			</div>
+			<div className={cls.graphBaseContent}>
+				{desc && <div className={cls.graphBaseDesc}>{desc}</div>}
+				{switchOptions && (
+					<div className={cls.graphBaseSwitch} style={switchStyle}>
+						<Switch size="small" defaultChecked onChange={handleSwitchChange} />
+						{showChart && <span className={cls.switchLabel}>历史详情</span>}
+						{!showChart && <span className={cls.switchLabel}>实时流量</span>}
+					</div>
+				)}
+				{legend && showChart && (
+					<div className={cls.legend}>
+						{legend.map((item, index) => (
+							<div className={cls.legendItem} key={item}>
+								<span
+									className={cls.lengedItemPrefix}
+									style={{ backgroundColor: colors[index] }}
+								></span>
+								<span className={cls.legendItemLabel}>{item}</span>
+							</div>
+						))}
+					</div>
+				)}
+				{dateOptions && (
+					<Radio.Group
+						defaultValue={dateOptions[0]}
+						buttonStyle="solid"
+						className={cls.graphBaseDate + ' ' + cls.radioGroup}
+						onChange={({ target }) => onDateChange(target.value)}
+					>
+						{dto}
+					</Radio.Group>
+				)}
+				{props.children}
+			</div>
+		</div>
+	);
+}
+
+export default GraphBase;

src/components/公共组件/GraphBase/index.module.css

@@ -0,0 +1,153 @@
+/* .long-long {
+    background: url('../../../../assets/long-long.png') no-repeat;
+    background-size: 100% 100%;
+    background-position: 0 0;
+} */
+
+.long-middle {
+	background: url('../../../assets/long-middle.png') no-repeat;
+	background-size: 100% 100%;
+	background-position: 0 0;
+}
+
+.long-short {
+	background: url('../../../assets/long-short.png') no-repeat;
+	background-size: 100% 100%;
+	background-position: 0 0;
+}
+
+.middle-long {
+	background: url('../../../assets/middle-middle.png') no-repeat;
+	background-size: 100% 100%;
+	background-position: 0 0;
+}
+
+.middle-full {
+	background: url('../../../assets/middle-long.png') no-repeat;
+	background-size: 100% 100%;
+	background-position: 0 0;
+}
+
+.middle-middle {
+	background: url('../../../assets/middle-middle-2.png') no-repeat;
+	background-size: 100% 100%;
+	background-position: 0 0;
+}
+
+.middle-short {
+	/* background: url('../../../assets/middle-short.png') no-repeat; */
+	/* background: url('../../../assets/energy.png') no-repeat; */
+	background: url('../../../assets/bg-bottom-item.png') no-repeat;
+	background-size: 100% 100%;
+	background-position: 0 0;
+}
+
+/*
+ * more...
+ */
+
+.graphBase {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	/* justify-content: flex-end;
+    align-items: center; */
+	position: relative;
+	padding: 24px;
+}
+
+.graphBaseTitle {
+	display: flex;
+	align-items: center;
+}
+
+.graphBaseTitle > img {
+	width: 20px;
+}
+
+.graphBaseTitle > 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: 20px;
+	color: #fff;
+	letter-spacing: 2px;
+	font-weight: 500;
+}
+
+.graphBaseContent {
+	height: 1px;
+	flex: 1;
+	/* background: #fff3; */
+}
+
+.graphBaseDesc {
+	position: absolute;
+	top: 25px;
+	left: 150px;
+	font-size: 19px;
+	color: #76fff9;
+}
+
+.graphBaseSwitch {
+	position: absolute;
+	top: 30px;
+	left: 258px;
+	display: flex;
+	align-items: center;
+}
+
+.graphBaseDate {
+	position: absolute;
+	right: 0;
+	top: 24px;
+	color: #fff;
+	margin-right: 24px;
+}
+
+.radioGroup {
+	user-select: none;
+}
+
+.radioGroup * {
+	border: none !important;
+	border-radius: 0 !important;
+}
+
+.radioGroup *:focus-within {
+	box-shadow: none !important;
+}
+
+.radioGroup *::before {
+	width: 0 !important;
+}
+
+.switchLabel {
+	color: white;
+	margin-left: 6px;
+}
+
+.legend {
+	position: absolute;
+	top: 30px;
+	left: 360px;
+	color: #fff;
+	display: flex;
+	align-items: center;
+}
+
+.legendItem {
+	display: flex;
+	align-items: center;
+	margin-left: 8px;
+}
+
+.lengedItemPrefix {
+	width: 12px;
+	height: 12px;
+	border-radius: 2px;
+    margin-right: 4px;
+}

src/components/公共组件/产线当日缺陷分类/index.jsx

@@ -1,9 +1,6 @@
 import cls from './index.module.css';
-import BottomBarItem from '../BottomBarItem';
-import { Switch, Radio } from 'antd';
+import GraphBase from '../GraphBase';
 import ReactECharts from 'echarts-for-react';
-import * as echarts from 'echarts';
-import { randomInt } from '../../../utils';
 import { useState } from 'react';
 
 function FaultType(props) {
@@ -18,10 +15,10 @@ function FaultType(props) {
 			'#12FFF5',
 		],
 		grid: {
-			left: 0,
-			top: 0,
-			bottom: 0,
-			right: 0,
+			left: 24,
+			top: 10,
+			bottom: 10,
+			right: 24,
 		},
 		legend: {
 			icon: 'circle',
@@ -62,16 +59,6 @@ function FaultType(props) {
 				labelLine: {
 					length: 0,
 				},
-				// emphasis: {
-				// 	label: {
-				// 		show: true,
-				// 		fontSize: 40,
-				// 		fontWeight: 'bold',
-				// 	},
-				// },
-				// labelLine: {
-				// 	show: false,
-				// },
 				data: [
 					{ value: 1048, name: '缺陷1' },
 					{ value: 735, name: '缺陷2' },
@@ -92,34 +79,28 @@ function FaultType(props) {
 		{ id: 4, label: '产线4', value: 'l4' },
 		{ id: 5, label: '产线5', value: 'l5' },
 	]);
+
+	function handleDateChange(v) {
+		console.log('date ', v);
+	}
+
+	// 根据使用的页面决定背景的大小
+	const bgSize =
+		props.page == 'home' ? ['middle', 'short'] : ['middle', 'short'];
+
 	return (
-		<BottomBarItem
-			icon="puzzle"
+		<GraphBase
+			icon="battery"
 			title="产线当日缺陷分类"
-			className={cls.faultType}
+			dateOptions={lines.map((item) => item.label)}
+			onDateChange={handleDateChange}
+			size={bgSize}
+			style={{ width: '600px' }}
 		>
-			<div className={cls.headWidget}>
-				{/* 日周月年 */}
-				<Radio.Group
-					defaultValue="l1"
-					buttonStyle="solid"
-					className={cls.radioGroup}
-				>
-					{lines.map((l, index) => (
-						<Radio.Button
-							key={l.label}
-							value={l.value}
-							className="radio-group__item"
-						>
-							{l.label}
-						</Radio.Button>
-					))}
-				</Radio.Group>
-			</div>
 			<div className={cls.chart}>
 				<ReactECharts option={options} style={{ height: '100%' }} />
 			</div>
-		</BottomBarItem>
+		</GraphBase>
 	);
 }
 

src/components/公共组件/产线缺陷统计/index.jsx

@@ -1,9 +1,6 @@
 import cls from './index.module.css';
-import BottomBarItem from '../BottomBarItem';
-import { Switch, Radio } from 'antd';
+import GraphBase from '../GraphBase';
 import ReactECharts from 'echarts-for-react';
-import * as echarts from 'echarts';
-import { randomInt } from '../../../utils';
 
 function FaultTotal(props) {
 	const options = {
@@ -139,33 +136,27 @@ function FaultTotal(props) {
 		},
 	};
 
+	function handleDateChange(v) {
+		console.log('date ', v);
+	}
+
+	// 根据使用的页面决定背景的大小
+	const bgSize =
+		props.page == 'home' ? ['middle', 'short'] : ['middle', 'long'];
+
 	return (
-		<BottomBarItem icon="chart" title="产线缺陷统计" className={cls.faultTotal}>
-			<div className={cls.headWidget}>
-				{/* 日周月年 */}
-				<Radio.Group
-					defaultValue="week"
-					buttonStyle="solid"
-					className={cls.radioGroup}
-				>
-					<Radio.Button value="day" className="radio-group__item">
-						日
-					</Radio.Button>
-					<Radio.Button value="week" className="radio-group__item">
-						周
-					</Radio.Button>
-					<Radio.Button value="month" className="radio-group__item">
-						月
-					</Radio.Button>
-					<Radio.Button value="year" className="radio-group__item">
-						年
-					</Radio.Button>
-				</Radio.Group>
-			</div>
+		<GraphBase
+			icon="battery"
+			title="产线当日缺陷分类"
+			dateOptions={['日', '周', '月', '年']}
+			onDateChange={handleDateChange}
+			size={bgSize}
+			style={{ width: '600px' }}
+		>
 			<div className={cls.chart}>
 				<ReactECharts option={options} style={{ height: '100%' }} />
 			</div>
-		</BottomBarItem>
+		</GraphBase>
 	);
 }
 

src/components/公共组件/助燃风流量/index.jsx

@@ -1,6 +1,6 @@
 // 助燃风流量
 import cls from './index.module.css';
-import BottomBarItem from '../BottomBarItem';
+import BottomBarItem from '../BottomItemBackground';
 import ReactECharts from 'echarts-for-react';
 import * as echarts from 'echarts';
 import { randomInt } from '../../../utils';
@@ -149,7 +149,12 @@ function GasI(props) {
 		}
 	}
 	return (
-		<BottomBarItem icon="pause" title="助燃风流量" className={cls.gas}>
+		<BottomBarItem
+			icon="pause"
+			title="助燃风流量"
+			className={cls.gas}
+			style={props.style}
+		>
 			<div className={cls.headWidget}>
 				<div className="flex items-center">
 					<Switch size="small" defaultChecked onChange={handleSwitchChange} />

src/components/公共组件/天然气流量/index.jsx

@@ -1,6 +1,6 @@
 // 天然气流量
 import cls from './index.module.css';
-import BottomBarItem from '../BottomBarItem';
+import BottomBarItem from '../BottomItemBackground';
 
 import { Switch, Radio } from 'antd';
 import { useState } from 'react';
@@ -31,7 +31,12 @@ function GasII(props) {
 	}
 
 	return (
-		<BottomBarItem icon="pause" title="天然气流量" className={cls.gas}>
+		<BottomBarItem
+			icon="pause"
+			title="天然气流量"
+			className={`${cls.gas} ${props.className}`}
+			style={props.style}
+		>
 			{/* legend */}
 			<div className={cls.headWidget}>
 				<div className="flex items-center">

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

@@ -0,0 +1,25 @@
+import { useCallback, useState } from 'react';
+import cls from './index.module.less';
+
+export default function CenterMenu({ active, onChangeActive }) {
+	const menuList = [
+		['窑炉总览', '/kilnSummary'],
+		['窑炉内部', '/kilnInner'],
+		['退火监测', '/stopFire'],
+		['质检统计', '/quailtyCheck'],
+		['能耗分析', '/energyCost'],
+	];
+	return (
+		<div className={`${cls.centerMenu} flex`}>
+			{menuList.map((menu) => (
+				<div
+					key={menu[0]}
+					className={`${cls.menuItem} ${active == menu[0] ? cls.active : ''}`}
+					onClick={() => onChangeActive(menu[0])}
+				>
+					{menu[0]}
+				</div>
+			))}
+		</div>
+	);
+}

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

@@ -0,0 +1,33 @@
+.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.active,
+.menuItem:hover {
+	color: #00fff7;
+}
+
+.menuItem:not(:first-child) {
+	margin-left: 50px;
+}

src/components/公共组件/当前产线生产规格/index.jsx

@@ -0,0 +1,78 @@
+import BottomBarItem from '../BottomItemBackground';
+import React, { Component } from 'react';
+import './righttable.module.less';
+
+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'],
+	['产线42', '15mm', '15mm', '15mm'],
+	['产线5', '15mm', '15mm', '15mm'],
+	['产线6', '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: [128],
+	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 (
+			<BottomBarItem
+				icon="pause"
+				title="当前产线生产规格"
+				className={this.props.className}
+				style={this.props.style}
+			>
+				<div
+					className="CenterChart1itemDetailBorder"
+					style={{ paddingTop: '6px' }}
+				>
+					<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>
+			</BottomBarItem>
+		);
+	}
+}
+
+export default Chart1;

src/components/公共组件/当前产线生产规格/righttable.module.less

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

src/components/公共组件/当前温度/index.jsx

@@ -0,0 +1,138 @@
+import BottomBarItem from '../BottomItemBackground';
+import GraphBase from '../GraphBase';
+import { Radio } from 'antd';
+import cls from './index.module.css';
+import { useState } from 'react';
+
+const SmallBox = (props) => {
+	return (
+		<div
+			className="small-box"
+			style={{
+				boxShadow: 'inset 0 0 18px 10px #fff1',
+				borderRadius: '3px',
+				padding: '6px',
+				display: 'flex',
+				alignItems: 'center',
+				justifyContent: 'center',
+				color: '#fff',
+				position: 'relative',
+				userSelect: 'none',
+			}}
+		>
+			{props.split !== false && (
+				<span
+					className="vertical-line"
+					style={{
+						position: 'absolute',
+						display: 'inline-block',
+						width: '2px',
+						height: '80%',
+						top: '10%',
+						left: '50%',
+						background:
+							'linear-gradient(to bottom, transparent, #fff3, #fffa, #fff3, transparent)',
+					}}
+				></span>
+			)}
+			{props.children}
+		</div>
+	);
+};
+
+function WindFrequence(props) {
+	const [dataSource, setDataSource] = useState('风机');
+
+	function handleSourceChange(v) {
+		console.log('val', v);
+	}
+
+	return (
+		<GraphBase
+			icon="pause"
+			title="当前温度"
+			dateOptions={['风机', '风阀', '电加热']}
+			onDateChange={handleSourceChange}
+			size={['middle', 'long']}
+		>
+			<div className={cls.mainContent + ' ' + cls.grid}>
+				<SmallBox>
+					<h1 className={cls.areaName}>A1区板上</h1>
+					<div className={cls.areaContent}>
+						<span className={cls.areaValue}>123.8℃</span>
+						<span className={cls.areaValue}>123.8℃</span>
+						<span className={cls.areaValue}>123.8℃</span>
+					</div>
+				</SmallBox>
+				<SmallBox>
+					<h1 className={cls.areaName}>A1区板上</h1>
+					<div className={cls.areaContent}>
+						<span className={cls.areaValue}>123.8℃</span>
+						<span className={cls.areaValue}>123.8℃</span>
+						<span className={cls.areaValue}>123.8℃</span>
+					</div>
+				</SmallBox>
+				<SmallBox>
+					<h1 className={cls.areaName}>A1区板上</h1>
+					<div className={cls.areaContent}>
+						<span className={cls.areaValue}>123.8℃</span>
+						<span className={cls.areaValue}>123.8℃</span>
+						<span className={cls.areaValue}>123.8℃</span>
+					</div>
+				</SmallBox>
+				<SmallBox>
+					<h1 className={cls.areaName}>A1区板上</h1>
+					<div className={cls.areaContent}>
+						<span className={cls.areaValue}>123.8℃</span>
+						<span className={cls.areaValue}>123.8℃</span>
+						<span className={cls.areaValue}>123.8℃</span>
+					</div>
+				</SmallBox>
+				<SmallBox>
+					<h1 className={cls.areaName}>A1区板上</h1>
+					<div className={cls.areaContent}>
+						<span className={cls.areaValue}>123.8℃</span>
+						<span className={cls.areaValue}>123.8℃</span>
+						<span className={cls.areaValue}>123.8℃</span>
+					</div>
+				</SmallBox>
+				<SmallBox split={false}>
+					<div className={cls.areaPureContent}>
+						<span className={cls.areaPureValue}>123.8℃</span>
+						<span className={cls.areaPureValue}>123.8℃</span>
+						<span className={cls.areaPureValue}>123.8℃</span>
+					</div>
+				</SmallBox>
+				<SmallBox>
+					<h1 className={cls.areaName}>A1区板上</h1>
+					<div className={cls.areaContent}>
+						<span className={cls.areaValue}>123.8℃</span>
+						<span className={cls.areaValue}>123.8℃</span>
+						<span className={cls.areaValue}>123.8℃</span>
+					</div>
+				</SmallBox>
+				<SmallBox split={false}>
+					<div className={cls.areaPureContent}>
+						<span className={cls.areaPureValue}>123.8℃</span>
+						<span className={cls.areaPureValue}>123.8℃</span>
+						<span className={cls.areaPureValue}>123.8℃</span>
+					</div>
+				</SmallBox>
+				<SmallBox>
+					<h1 className={cls.areaName}>A1区板上</h1>
+					<div className={cls.areaContent}>
+						<span className={cls.areaValue}>123.8℃</span>
+					</div>
+				</SmallBox>
+				<SmallBox>
+					<h1 className={cls.areaName}>A1区板上</h1>
+					<div className={cls.areaContent}>
+						<span className={cls.areaValue}>123.8℃</span>
+					</div>
+				</SmallBox>
+			</div>
+		</GraphBase>
+	);
+}
+
+export default WindFrequence;

src/components/公共组件/当前温度/index.module.css

@@ -0,0 +1,139 @@
+.chart {
+	height: 100%;
+}
+
+.gas {
+	position: relative;
+}
+
+.currentFlow {
+	position: absolute;
+	top: 20px;
+	left: 50%;
+	transform: translateX(-50%);
+	padding: 8px 22px;
+	border-radius: 2px;
+	letter-spacing: 2px;
+	box-shadow: inset 0 0 22px 0px hsla(0, 0%, 100%, 0.15);
+	line-height: 18px;
+	font-size: 18px;
+	text-align: center;
+	color: #12fff5;
+}
+
+.floatHead {
+	position: absolute;
+	top: 22px;
+	right: 24px;
+	height: 32px;
+	width: 410px;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+}
+
+.mainContent {
+	padding-top: 16px;
+}
+
+.alignRight {
+	text-align: right;
+	justify-self: flex-end;
+}
+
+.grid {
+	display: grid;
+	gap: 6px;
+	grid-template-columns: repeat(2, minmax(100px, 1fr));
+	grid-auto-rows: minmax(64px, min-content);
+}
+
+.areaName {
+	color: #fff;
+	font-size: 20px;
+	line-height: 1;
+	letter-spacing: 1.5px;
+	margin: 0;
+	padding-left: 20px;
+	width: 50%;
+}
+
+.areaPureContent {
+	display: flex;
+}
+
+.areaPureValue {
+	padding: 0 8px;
+}
+
+.areaPureValue:not(:first-child) {
+	border-left: 2px solid #fff6;
+}
+
+.areaContent {
+	width: 50%;
+	padding-left: 12px;
+	display: flex;
+	flex-direction: column;
+}
+
+.areaPureValue,
+.areaValue {
+	display: inline-block;
+	font-size: 17px;
+	line-height: 22px;
+	letter-spacing: 1.2px;
+}
+
+.switchLabel {
+	color: white;
+	margin-left: 6px;
+}
+
+.legend:last-child {
+	margin-left: 8px;
+}
+
+.legend > span {
+	display: inline-block;
+	color: #dff1fe;
+	font-size: 14px;
+	letter-spacing: 2px;
+}
+
+.legend > span:first-child {
+	width: 12px;
+	height: 12px;
+	margin-right: 4px;
+	border-radius: 2px;
+}
+
+.gasIcon {
+	background: #12fff5;
+}
+
+.gas2Icon {
+	background: #2760ff;
+}
+
+.radioGroup {
+	user-select: none;
+}
+
+.radioGroup * {
+	border: none !important;
+	border-radius: 0 !important;
+}
+
+.radioGroup *:focus-within {
+	box-shadow: none !important;
+}
+
+.radioGroup *::before {
+	width: 0 !important;
+}
+
+.radioGroup_button_wrapper {
+	color: #fff !important;
+	background: #03233c !important;
+}

src/components/公共组件/时间火向数据/leftbox.module.less

@@ -0,0 +1,33 @@
+.leftbox {
+	// width: 440px;
+	// background: rgb(127, 202, 42);
+
+	.box {
+		margin-right: 16px;
+		width: 200px;
+		padding: 8px;
+		background: url(../../../assets/CenterChart2ItemBg.png);
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
+		display: flex;
+		align-items: flex-start;
+		user-select: none;
+
+		.box__inner {
+			padding-top: 12px;
+
+			.box__label {
+				color: #fffa;
+				font-size: 18px;
+				line-height: 14px;
+			}
+
+			.box__value {
+				color: #fff;
+				font-weight: 400;
+				font-size: 30px;
+				line-height: 34px;
+			}
+		}
+	}
+}

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 '../TechSplitline';
 
 const GoodProduction = () => {
 	return (

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/公共组件/本日生产良品率/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/公共组件/烟气处理/index.jsx

@@ -13,9 +13,7 @@ function SmokeHandle(props) {
 					<div className={cls.info__item}>二氧化硫排放浓度:59mg/m³</div>
 					<div className={cls.info__item}>二氧化氮排放浓度:59mg/m³</div>
 				</div>
-
 				<TechSplitline />
-
 				<SmokeTrendChart />
 			</div>
 		</Container>

src/components/公共组件/窑炉信息/Kiln.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { useState, useEffect, useContext } from 'react';
-import Container from '../Container';
-import SocketContext from '../../store/socket-data-provider';
+import { useContext } from 'react';
+import Container from '../../Container';
+import SocketContext from '../../../store/socket-data-provider';
 import cls from './kiln.module.less';
 
 export default function Kiln() {

src/components/公共组件/窑炉信息/kiln.module.less

@@ -2,7 +2,7 @@
 	width: 625px;
 	// height: 305px;
 	height: 300px;
-	background: url('../../assets/ItemBg.png') no-repeat;
+	background: url('../../../assets/ItemBg.png') no-repeat;
 	background-size: 100% 100%;
 
 	.leftBar__top__content {

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/公共组件/风机信息/index.jsx

@@ -0,0 +1,115 @@
+import GraphBase from '../../公共组件/GraphBase';
+import './index.module.less';
+
+import { ScrollBoard } from '@jiaminghi/data-view-react';
+
+function getRandomRow() {
+	const idx = Math.ceil(Math.random() * 100);
+	return [idx, `${idx}#风机`, Math.ceil(Math.random() * 2) - 1];
+}
+
+function getRandomRows(rows) {
+	return Array(rows)
+		.fill(0)
+		.map(() => getRandomRow());
+}
+
+// let data = [
+// 	[1, '1#风机', 1], // 1 正常 2 故障 0 离线
+// 	[2, '2#风机', 1],
+// 	[3, '3#风机', 1],
+// 	[4, '4#风机', 0],
+// 	[5, '5#风机', 1],
+// 	[6, '6#风机', 1],
+// 	[7, '7#风机', 0],
+// 	[8, '8#风机', 1],
+// 	[9, '9#风机', 1],
+// 	[10, '10#风机', 1],
+// ];
+
+// let header = ['序号', '风机名称', '故障情况'];
+
+function attachStyle(data) {
+	return data.map((arr) => {
+		return arr.map((item, index) => {
+			if (index == arr.length - 1) {
+				return `<div style="display: flex; align-items: center">
+							<span style="box-shadow: 0 0 4px 4px ${
+								item == 1 ? '#2760ff55' : '#a81b2655'
+							}; margin-right: 8px; width: 8px; height: 8px; border-radius: 8px; background: ${
+					item == 1 ? '#2760ff' : '#a81b26'
+				}"></span><span style="color: ${item == 1 ? '#2760ff' : '#a81b26'}">${
+					item == 1 ? '正常' : '故障'
+				}</span></div>`;
+			}
+			return `<span style='color: #fffa'>${item}</span>`;
+		});
+	});
+}
+
+function FanInfo(props) {
+	const rowNum = props.rows || 8;
+	let data = getRandomRows(100);
+
+	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/>',
+		],
+		oddRowBGC: '#042444',
+		evenRowBGC: '#042c4c',
+		columnWidth: [70, 96],
+		rowNum,
+		// headerHeight: 40,
+		hoverPause: false,
+		// data: replaceStyle(data, 0.7),
+		data: attachStyle(data),
+	};
+
+	return (
+		<GraphBase
+			icon="kiln"
+			title="风机信息"
+			size={props.longBg ? ['middle', 'full'] : ['middle', 'short']}
+		>
+			<div
+				className="flex"
+				style={{
+					display: 'flex',
+					gap: '20px',
+					height: '100%',
+					position: 'relative',
+				}}
+			>
+				<div className="flex-1" style={{ flex: 1 }}>
+					<ScrollBoard
+						config={config}
+						style={{ width: '280px', height: '100%' }}
+					/>
+				</div>
+				<div
+					className="verticalLine"
+					style={{
+						position: 'absolute',
+						top: '10%',
+						left: '50%',
+						height: '80%',
+						width: '2px',
+						background:
+							'linear-gradient(transparent, #15E8F563, #15E8F599, #15E8F563, transparent)',
+					}}
+				></div>
+				<div className="flex-1" style={{ flex: 1 }}>
+					<ScrollBoard
+						config={config}
+						style={{ width: '280px', height: '100%' }}
+					/>
+				</div>
+			</div>
+		</GraphBase>
+	);
+}
+
+export default FanInfo;

src/components/公共组件/风机信息/index.module.less

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

src/components/公共组件/风机运行频率/index.jsx

@@ -0,0 +1,191 @@
+// 风机运行频率
+import cls from './index.module.css';
+import ReactECharts from 'echarts-for-react';
+import * as echarts from 'echarts';
+import { Switch } from 'antd';
+import GraphBase from '../../公共组件/GraphBase';
+import { useState, useContext } from 'react';
+import SocketContext from '../../../store/socket-data-provider';
+
+function WindFrequence(props) {
+	const [showChart, setShowChart] = useState(true);
+	const { runState, hisState } = useContext(SocketContext);
+
+	let dataList = [];
+	let seriesData = [];
+	const colors = [
+		'#12FFF5',
+		'#2760FF',
+		'#FFD160',
+		'#E80091',
+		'#8064ff',
+		'#ff8a3b',
+		'#8cd26d',
+		'#2aa1ff',
+	];
+	let options = null;
+	if (showChart) {
+		// keys() 结果不是按照顺序，需要 sort()
+		seriesData = hisState?.combustionAir
+			? Object.keys(hisState.combustionAir)
+					.sort()
+					.map((key) => hisState.combustionAir[key])
+			: Array(8)
+					.fill(1)
+					.map((_) => Array(7).fill(0));
+
+		// debug
+		console.log(
+			'助燃风 chart series data',
+			hisState?.combustionAir,
+			seriesData,
+		);
+		options = {
+			color: colors,
+			grid: { top: 32, right: 12, bottom: 20, left: 48 },
+			xAxis: {
+				type: 'category',
+				data: Array(7)
+					.fill(1)
+					.map((_, index) => {
+						const today = new Date();
+						const dtimestamp = today - index * 24 * 60 * 60 * 1000;
+						return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+							dtimestamp,
+						).getDate()}`;
+					})
+					.reverse(),
+				axisLabel: {
+					color: '#fff',
+					fontSize: 12,
+				},
+				axisTick: { show: false },
+				axisLine: {
+					lineStyle: {
+						width: 1,
+						color: '#213259',
+					},
+				},
+			},
+			yAxis: {
+				name: '单位/m³',
+				nameTextStyle: {
+					color: '#fff',
+					fontSize: 10,
+					align: 'right',
+				},
+				type: 'value',
+				axisLabel: {
+					color: '#fff',
+					fontSize: 12,
+				},
+				axisLine: {
+					show: true,
+					lineStyle: {
+						color: '#213259',
+					},
+				},
+				splitLine: {
+					lineStyle: {
+						color: '#213259a0',
+					},
+				},
+				// interval: 10,
+				// min: 0,
+				// max: 100,
+			},
+			series: seriesData.map((v, i) => ({
+				name: i + 1 + '#风机',
+				data: v,
+				type: 'line',
+				symbol: 'circle',
+				areaStyle: {
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{ offset: 0, color: colors[i] + '40' },
+						{ offset: 0.5, color: colors[i] + '20' },
+						{ offset: 1, color: colors[i] + '00' },
+					]),
+				},
+			})),
+			tooltip: {
+				trigger: 'axis',
+			},
+		};
+	} else {
+		dataList = runState?.combustionAirPressureArr
+			? [
+					{ id: 1, name: '1#风机', value: '0m³/h' },
+					{ id: 2, name: '2#风机', value: '0m³/h' },
+					{ id: 3, name: '3#风机', value: '0m³/h' },
+					{ id: 4, name: '4#风机', value: '0m³/h' },
+					{ id: 5, name: '5#风机', value: '0m³/h' },
+					{ id: 6, name: '6#风机', value: '0m³/h' },
+					{ id: 7, name: '7#风机', value: '0m³/h' },
+					{ id: 8, name: '8#风机', value: '0m³/h' },
+					{ id: 9, name: '9#风机', value: '0m³/h' },
+					{ id: 10, name: '10#风机', value: '0m³/h' },
+					{ id: 11, name: '11#风机', value: '0m³/h' },
+					{ id: 12, name: '12#风机', value: '0m³/h' },
+					{ id: 13, name: '13#风机', value: '0m³/h' },
+					{ id: 14, name: '14#风机', value: '0m³/h' },
+					{ id: 15, name: '15#风机', value: '0m³/h' },
+					{ id: 16, name: '16#风机', value: '0m³/h' },
+			  ].map((item, index) => ({
+					...item,
+					value: runState.combustionAirPressureArr[index] ?? '/',
+			  }))
+			: [
+					{ id: 1, name: '1#风机', value: '0m³/h' },
+					{ id: 2, name: '2#风机', value: '0m³/h' },
+					{ id: 3, name: '3#风机', value: '0m³/h' },
+					{ id: 4, name: '4#风机', value: '0m³/h' },
+					{ id: 5, name: '5#风机', value: '0m³/h' },
+					{ id: 6, name: '6#风机', value: '0m³/h' },
+					{ id: 7, name: '7#风机', value: '0m³/h' },
+					{ id: 8, name: '8#风机', value: '0m³/h' },
+					{ id: 9, name: '9#风机', value: '0m³/h' },
+					{ id: 10, name: '10#风机', value: '0m³/h' },
+					{ id: 11, name: '11#风机', value: '0m³/h' },
+					{ id: 12, name: '12#风机', value: '0m³/h' },
+					{ id: 13, name: '13#风机', value: '0m³/h' },
+					{ id: 14, name: '14#风机', value: '0m³/h' },
+					{ id: 15, name: '15#风机', value: '0m³/h' },
+					{ id: 16, name: '16#风机', value: '0m³/h' },
+			  ];
+	}
+
+	function handleSwitchChange(val) {
+		if (val) {
+			setShowChart(true);
+		} else {
+			setShowChart(false);
+		}
+	}
+	return (
+		<GraphBase
+			icon="kiln"
+			title="风机运行频率"
+			size={['middle', 'long']}
+			switchOptions={true}
+			switchPosition={[null, 200]} // [top, left]
+			onSwitch={handleSwitchChange}
+		>
+			<div className={cls.chart}>
+				{showChart && (
+					<ReactECharts option={options} style={{ height: '100%' }} />
+				)}
+				{!showChart && (
+					<div className={cls.gridList}>
+						{dataList.map((item) => (
+							<div key={item.id} className={cls.listItem}>
+								{item.name}: {item.value}
+							</div>
+						))}
+					</div>
+				)}
+			</div>
+		</GraphBase>
+	);
+}
+
+export default WindFrequence;

src/components/公共组件/风机运行频率/index.module.css

@@ -0,0 +1,29 @@
+.gridList {
+	margin-top: 12px;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	/* grid-auto-row: ; */
+	gap: 6px;
+}
+
+.listItem {
+	border-radius: 2px;
+	padding: 9px 0;
+	text-align: center;
+	color: #fff;
+	box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197);
+}
+.headWidget {
+	position: absolute;
+	top: 22px;
+	right: 24px;
+	height: 32px;
+	width: 410px;
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	color: #fff;
+}
+.relative {
+	position: relative;
+}

src/components/工具组件/Ruler.jsx

@@ -0,0 +1,115 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { motion } from 'framer-motion';
+
+function Ruler(props) {
+	const ruler = useRef(null);
+	const [left, setLeft] = useState(props.left || '100px');
+	const [top, setTop] = useState(props.top || '100px');
+	const [dragging, setDragging] = useState(false);
+	const isVertical = props.type == 'vertical';
+	const handleUp = useCallback(() => {
+		setDragging(false);
+	}, []);
+	const handleMove = useCallback(
+		(e) => {
+			if (!dragging) return;
+			const v = isVertical ? e.clientX : e.clientY;
+			isVertical ? setLeft(v + 'px') : setTop(v + 'px');
+		},
+		[dragging],
+	);
+
+	useEffect(() => {
+		document.addEventListener('mouseup', handleUp);
+		document.addEventListener('mousemove', handleMove);
+
+		return () => {
+			document.removeEventListener('mouseup', handleUp);
+			document.removeEventListener('mousemove', handleMove);
+		};
+	}, [dragging]);
+
+	function handleMouseDown() {
+		setDragging(true);
+	}
+
+	return (
+		<motion.div
+			ref={ruler}
+			className="ruler-line"
+			style={{
+				position: 'fixed',
+				top: isVertical ? 0 : top,
+				left: isVertical ? left : 0,
+				overflow: 'visible',
+				height: isVertical ? '100vh' : '1px',
+				width: isVertical ? '1px' : '100vw',
+				cursor: 'pointer',
+				userSelect: 'none',
+				background: props.background || '#ccc',
+			}}
+			onMouseDown={handleMouseDown}
+		>
+			<div
+				className="ruler-tooltip"
+				style={{
+					position: 'absolute',
+					top: isVertical ? '200px' : '20px',
+					right: isVertical ? '-132px' : '50px',
+					width: '128px',
+					border: '1px solid #0008',
+					padding: '0 12px',
+					background: '#ecc100',
+					color: '#0008',
+				}}
+			>
+				{isVertical ? `left: ${left}` : `top: ${top}`}
+			</div>
+		</motion.div>
+	);
+}
+
+function RulerContainer(props) {
+	const [rulers, setRulers] = useState([]);
+
+	// 监听事件
+	useEffect(() => {
+		let fn = (e) => {
+			if (e.shiftKey && e.key === 'R') {
+				setRulers((rulers) => [
+					...rulers,
+					{
+						width: '1px',
+						height: '100vh',
+						background: '#ccc',
+						type: 'vertical',
+					},
+				]);
+			}
+			if (e.shiftKey && e.key === 'H') {
+				setRulers((rulers) => [
+					...rulers,
+					{ width: '100vw', height: '1px', background: '#ccc' },
+				]);
+			}
+			if (e.shiftKey && e.key === 'Q') {
+				setRulers((rulers) => []);
+			}
+		};
+
+		document.addEventListener('keydown', fn);
+	}, []);
+
+	return (
+		<div
+			id="ruler-container"
+			style={{ position: 'fixed', top: 0, left: 0, width: 0, height: 0 }}
+		>
+			{rulers.map((ruler) => (
+				<Ruler key={Math.random()} {...ruler} />
+			))}
+		</div>
+	);
+}
+
+export default RulerContainer;

src/components/模块组件/总览/Bottom/index.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useEffect, useState } from 'react';
+
+import GasI from '../../../公共组件/助燃风流量';
+import GasII from '../../../公共组件/天然气流量';
+import FaultTotal from '../../../公共组件/产线缺陷统计';
+import FaultType from '../../../公共组件/产线当日缺陷分类';
+
+import './index.less';
+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>
+	);
+}

src/components/模块组件/总览/CenterTop/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/模块组件/总览/CenterTop/RightTable/index.jsx

@@ -46,7 +46,7 @@ function replaceStyle(Arr, opencity) {
 class Chart1 extends Component {
 	render() {
 		return (
-			<div className="CenterChart1itemDetailBorder">
+			<div className="CenterChart1itemDetailBorder" style={{ opacity: 0.75 }}>
 				<h2 className="CenterChart1itemTXT"> 当前产线生产规格</h2>
 				<div className="CenterChart1itemContainer">
 					<span className="CenterFormitemDetailBorderLine1"></span>

src/components/模块组件/总览/CenterTop/RightTable/righttable.module.less

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

src/components/模块组件/总览/CenterTop/index.jsx

@@ -1,14 +1,12 @@
 import React from 'react';
-import CenterMenu from './CenterMenu';
 import Item2 from './RightTable';
-import Item1 from './LeftBoxes';
+import Item1 from '../../../公共组件/时间火向数据';
 
 import cls from './index.module.less';
 
 export default function index() {
 	return (
 		<>
-			<CenterMenu />
 			<div className="flex justify-between w-full h-full">
 				<div className={cls.leftGrid}>
 					<Item1 />

src/components/模块组件/总览/CenterTop/index.module.less

@@ -0,0 +1,8 @@
+.leftGrid {
+	// width: 416px;
+	height: 212px;
+}
+.rightTable {
+	width: 410px;
+	height: 240px;
+}

src/components/模块组件/总览/LeftSide/index.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import Kiln from '../../../公共组件/窑炉信息/Kiln';
+import GoodProduction from '../../../公共组件/本日生产良品率/GoodProduction';
+import { motion } from 'framer-motion';
+
+import cls from './index.module.less';
+
+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>
+	);
+}

src/components/模块组件/总览/LeftSide/index.module.less

@@ -1,7 +1,7 @@
 .leftBar {
 	width: 625px;
 	height: 966px;
-	margin-left: 40px;
+	// margin-left: 40px;
 
 	display: flex;
 	flex-direction: column;

src/components/模块组件/总览/RightSide/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import SmokeHandle from './SmokeHandle';
-import EnergyCost from './EnergyCost';
+import SmokeHandle from '../../../公共组件/烟气处理';
+import EnergyCost from '../../../公共组件/能耗';
 
 import cls from './index.module.less';