'update'

package.json

@@ -1,6 +1,7 @@
 {
     "private": true,
     "scripts": {
+        "server": "nodemon --watch websocket/**/*.ts --exec ts-node websocket/server.ts",
         "start": "umi dev",
         "build": "umi build",
         "postinstall": "umi generate tmp",
@@ -28,6 +29,7 @@
         "framer-motion": "^6.3.3",
         "less": "^4.1.3",
         "less-loader": "^11.0.0",
+        "moment": "^2.29.4",
         "react": "^16.8.6",
         "react-dom": "^16.8.6",
         "react-router-dom": "^6.3.0",
@@ -36,6 +38,11 @@
         "umi": "^3.5.23"
     },
     "devDependencies": {
+        "@types/node": "^20.6.0",
+        "@types/ws": "^8.5.5",
+        "nodemon": "^3.0.1",
+        "ws": "^8.14.1",
+        "ts-node": "^10.9.1",
         "@babel/runtime": "^7.18.0",
         "@types/react": "^17.0.0",
         "@types/react-dom": "^17.0.0",
@@ -43,7 +50,7 @@
         "@umijs/test": "^3.5.23",
         "lint-staged": "^10.0.7",
         "prettier": "^2.2.0",
-        "typescript": "^4.1.2",
+        "typescript": "^5.2.2",
         "yorkie": "^2.0.0"
     }
 }

src/components/BottomBar/BottomBarItem/index.jsx

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

src/components/BottomBar/BottomBarItem/index.module.css

@@ -1,5 +1 @@
-.bottomBarItem {
+ 
-    background: url(../../../assets/bg-bottom-item.png) no-repeat;
-    background-size: 100% 100%;
-    width: 600px;
-}

src/components/BottomBar/FaultTotal/index.module.css

@@ -4,13 +4,14 @@
 }
 
 .faultTotal {
+	height: 100%;
 	position: relative;
 }
 
 .headWidget {
 	position: absolute;
 	/* background: #00ee33; */
-	top: 20px;
+	top: 28px;
 	right: 24px;
 	height: 32px;
 	width: 190px;

src/components/BottomBar/FaultType/index.jsx

@@ -38,11 +38,11 @@ function FaultType(props) {
 			},
 			textStyle: {
 				color: '#DFF1FE',
-				fontSize: 18,
+				fontSize: 16,
 				rich: {
 					sub: {
 						color: '#fff9',
-						fontSize: 18,
+						fontSize: 16,
 					},
 				},
 			},
@@ -109,7 +109,7 @@ function FaultType(props) {
 						<Radio.Button
 							key={l.label}
 							value={l.value}
-							className="radio-group__item"
+							className={`radio-group__item ${cls['radio-group__item']}`}
 						>
 							{l.label}
 						</Radio.Button>

src/components/BottomBar/FaultType/index.module.css

@@ -4,11 +4,12 @@
 
 .faultType {
 	position: relative;
+	height: 100%;
 }
 
 .headWidget {
 	position: absolute;
-	top: 20px;
+	top: 28px;
 	right: 24px;
 	height: 32px;
 	width: 340px;
@@ -32,3 +33,7 @@
 	color: #fff !important;
 	background: #03233c !important;
 }
+
+.radio-group__item {
+	padding: 0 8px;
+}

src/components/BottomBar/SpecPL/index.jsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import cls from './index.module.less';
+import { ScrollBoard } from '@jiaminghi/data-view-react';
+import BottomBarItem from '../BottomBarItem';
+
+const TodayTableData = (props) => {
+	const [config, setConfig] = useState({
+		// headerBGC: 'rgba(4, 44, 76, 0.3)',
+		// headerBGC: 'rgba(4, 44, 76, .8)',
+		headerBGC: '#044A8425',
+		header: [
+			'<span style="color:#fff">产线名<span/>',
+			'<span style="color:#fff">原板宽度<span/>',
+			'<span style="color:#fff">净板宽度<span/>',
+			'<span style="color:#fff">玻璃厚度<span/>',
+		],
+		// oddRowBGC: '#042444',
+		oddRowBGC: '#044A8425',
+		// evenRowBGC: '#042c4c',
+		evenRowBGC: '#0B549945',
+		columnWidth: [90],
+		headerHeight: 40,
+		hoverPause: false,
+		data: [
+			['产线1', '1000mm', '1000mm', '3.2mm'],
+			['产线2', '100mm', '100mm', '2.2mm'],
+			['产线3', '100mm', '100mm', '2.0mm'],
+			['产线4', '100mm', '100mm', '2.1mm'],
+			['产线5', '100mm', '100mm', '2.2mm'],
+		],
+	});
+	return (
+		<BottomBarItem icon="signal" title="当前产线生产规格" className={cls.spec}>
+			<div className={cls.todayTableData}>
+				<ScrollBoard
+					config={config}
+					className={cls.tableClass}
+					style={{ height: '100%' }}
+				/>
+			</div>
+		</BottomBarItem>
+	);
+};
+
+export default TodayTableData;

src/components/BottomBar/SpecPL/index.module.less

@@ -0,0 +1,7 @@
+.spec {
+	height: 100%;
+}
+
+.todayTableData {
+	height: 100%;
+}

src/components/BottomBar/gasi/index.jsx

@@ -10,7 +10,7 @@ import SocketContext from '../../../store/socket-data-provider';
 
 function GasI(props) {
 	const [showChart, setShowChart] = useState(true);
-	const { runState, hisState } = useContext(SocketContext);
+	const { realtimeState, hisState } = useContext(SocketContext);
 
 	let dataList = [];
 	let seriesData = [];
@@ -27,23 +27,36 @@ function GasI(props) {
 	let options = null;
 	if (showChart) {
 		// keys() 结果不是按照顺序，需要 sort()
-		seriesData = hisState?.combustionAir
+		seriesData = hisState?.wind
-			? Object.keys(hisState.combustionAir)
+			? Object.keys(hisState.wind)
 					.sort()
-					.map((key) => hisState.combustionAir[key])
+					.map((key) => hisState.wind[key])
 			: Array(8)
 					.fill(1)
 					.map((_) => Array(7).fill(0));
+		seriesData.unshift(hisState?.wind['FE_totalair'] || 1);
+		seriesData.splice(8, 1);
 
 		// debug
-		console.log(
+		// console.log('助燃风 chart series data', hisState?.wind, seriesData);
-			'助燃风 chart series data',
-			hisState?.combustionAir,
-			seriesData,
-		);
 		options = {
 			color: colors,
 			grid: { top: 32, right: 12, bottom: 20, left: 48 },
+			legend: {
+				show: true,
+				icon: 'roundRect',
+				top: 10,
+				right: 10,
+				padding: 0,
+				itemWidth: 8,
+				itemHeight: 8,
+				itemGap: 3,
+				height: 8,
+				textStyle: {
+					color: '#DFF1FE',
+					fontSize: 10,
+				},
+			},
 			xAxis: {
 				type: 'category',
 				data: Array(7)
@@ -64,12 +77,13 @@ function GasI(props) {
 				axisLine: {
 					lineStyle: {
 						width: 1,
-						color: '#213259',
+						color: '#4561AE',
+						// color: '#213259',
 					},
 				},
 			},
 			yAxis: {
-				name: '单位/m³',
+				name: '单位m³/h',
 				nameTextStyle: {
 					color: '#fff',
 					fontSize: 10,
@@ -83,12 +97,14 @@ function GasI(props) {
 				axisLine: {
 					show: true,
 					lineStyle: {
-						color: '#213259',
+						color: '#4561AE',
+						// color: '#213259',
 					},
 				},
 				splitLine: {
 					lineStyle: {
-						color: '#213259a0',
+						color: '#4561AEa0',
+						// color: '#213259a0',
 					},
 				},
 				// interval: 10,
@@ -96,7 +112,7 @@ function GasI(props) {
 				// max: 100,
 			},
 			series: seriesData.map((v, i) => ({
-				name: i + 1 + '#助燃风',
+				name: i ? i + '#助燃风' : '助燃风总流量',
 				data: v,
 				type: 'line',
 				symbol: 'circle',
@@ -113,8 +129,9 @@ function GasI(props) {
 			},
 		};
 	} else {
-		dataList = runState?.combustionAirPressureArr
+		dataList = realtimeState?.wind
 			? [
+					{ id: 0, name: '助燃风总流量', value: '0m³/h' },
 					{ id: 1, name: '1#助燃风', value: '0m³/h' },
 					{ id: 2, name: '2#助燃风', value: '0m³/h' },
 					{ id: 3, name: '3#助燃风', value: '0m³/h' },
@@ -122,12 +139,12 @@ function GasI(props) {
 					{ 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' },
 			  ].map((item, index) => ({
 					...item,
-					value: runState.combustionAirPressureArr[index] ?? '/',
+					value: realtimeState.wind[index] ?? '/',
 			  }))
 			: [
+					{ id: 0, name: '助燃风总流量', value: '0m³/h' },
 					{ id: 1, name: '1#助燃风', value: '0m³/h' },
 					{ id: 2, name: '2#助燃风', value: '0m³/h' },
 					{ id: 3, name: '3#助燃风', value: '0m³/h' },
@@ -135,10 +152,7 @@ function GasI(props) {
 					{ 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' },
 			  ];
-		// debug
-		console.log('助燃风 实时 data', runState?.combustionAirPressureArr);
 	}
 
 	function handleSwitchChange(val) {

src/components/BottomBar/gasi/index.module.css

@@ -5,6 +5,7 @@
 
 .gas {
 	position: relative;
+	height: 100%;
 }
 
 .currentFlow {
@@ -25,7 +26,7 @@
 .headWidget {
 	position: absolute;
 	/* background: #00ee33; */
-	top: 20px;
+	top: 28px;
 	right: 24px;
 	height: 32px;
 	width: 190px;
@@ -68,7 +69,7 @@
 .headWidget {
 	position: absolute;
 	/* background: #00ee33; */
-	top: 22px;
+	top: 28px;
 	right: 24px;
 	height: 32px;
 	width: 410px;

src/components/BottomBar/gasii/gasChart/chart.config.js

@@ -50,12 +50,13 @@ export default function getOptions(seriesData, name) {
 			axisLine: {
 				lineStyle: {
 					width: 1,
-					color: '#213259',
+					// color: '#213259',
+					color: '#4561AE',
 				},
 			},
 		},
 		yAxis: {
-			name: '单位m³/h',
+			name: '单位Nm³/h',
 			nameTextStyle: {
 				color: '#fff',
 				fontSize: 10,
@@ -69,18 +70,22 @@ export default function getOptions(seriesData, name) {
 			},
 			axisLine: {
 				show: true,
+				// lineStyle: {
+				// 	color: '#213259',
+				// },
 				lineStyle: {
-					color: '#213259',
+					color: '#4561AE',
 				},
 			},
 			splitLine: {
 				lineStyle: {
-					color: '#213259a0',
+					// color: '#213259a0',
+					color: '#4561AEa0',
 				},
 			},
 		},
 		series: seriesData.map((arr, index) => ({
-			name: index + 1 + '#' + name,
+			name: index !== 0 ? index + '#' + name : '天然气总流量',
 			data: arr,
 			type: 'line',
 			areaStyle: {

src/components/BottomBar/gasii/gasChart/index.jsx

@@ -8,8 +8,8 @@ function GasChart(props) {
 	const { dataSource } = props;
 	const { hisState } = useContext(SocketContext);
 
-	const dataName = dataSource == 'gas-i' ? 'kilnGasT1' : 'kilnGasT2';
+	// const dataName = dataSource == 'gas-i' ? 'kilnGasT1' : 'kilnGasT2';
-
+	const dataName = 'gas';
 	// keys() 的结果不是按照顺序的，需要 sort()
 	const seriesData = hisState?.[dataName]
 		? Object.keys(hisState?.[dataName])
@@ -18,7 +18,7 @@ function GasChart(props) {
 		: Array(dataSource == 'gas-i' ? 8 : 4).fill(Array(7).fill(0));
 
 	// debug
-	console.log('天然气 series data', dataName, hisState?.[dataName], seriesData);
+	// console.log('天然气 series data', dataName, hisState?.[dataName], seriesData);
 
 	return (
 		<div className={cls.gasChart}>
@@ -26,7 +26,7 @@ function GasChart(props) {
 				key={Math.random()}
 				option={getOptions(
 					seriesData,
-					dataSource == 'gas-i' ? '天然气I' : '天然气II',
+					dataSource == 'gas-i' ? '天然气' : '天然气II',
 				)}
 				style={{ height: '100%' }}
 			/>

src/components/BottomBar/gasii/gridList/index.jsx

@@ -7,14 +7,14 @@ function getData(type) {
 	switch (type) {
 		case 'gas-i':
 			data = [
-				{ id: 1, name: '1#天然气I', value: '0m³/h' },
+				{ id: 0, name: '天然气总流量', value: '0Nm³/h' },
-				{ id: 2, name: '2#天然气I', value: '0m³/h' },
+				{ id: 1, name: '1#天然气', value: '0Nm³/h' },
-				{ id: 3, name: '3#天然气I', value: '0m³/h' },
+				{ id: 2, name: '2#天然气', value: '0Nm³/h' },
-				{ id: 4, name: '4#天然气I', value: '0m³/h' },
+				{ id: 3, name: '3#天然气', value: '0Nm³/h' },
-				{ id: 5, name: '5#天然气I', value: '0m³/h' },
+				{ id: 4, name: '4#天然气', value: '0Nm³/h' },
-				{ id: 6, name: '6#天然气I', value: '0m³/h' },
+				{ id: 5, name: '5#天然气', value: '0Nm³/h' },
-				{ id: 7, name: '7#天然气I', value: '0m³/h' },
+				{ id: 6, name: '6#天然气', value: '0Nm³/h' },
-				{ id: 8, name: '8#天然气I', value: '0m³/h' },
+				{ id: 7, name: '7#天然气', value: '0Nm³/h' },
 			];
 			break;
 		case 'gas-ii':
@@ -31,12 +31,16 @@ function getData(type) {
 }
 
 function GridList(props) {
-	const { runState } = useContext(SocketContext);
+	const { realtimeState } = useContext(SocketContext);
-	const key = props.dataSource == 'gas-i' ? 'gasFlowArr' : 'furnaceGasFlowArr';
+	// const key = props.dataSource == 'gas-i' ? 'gasFlowArr' : 'furnaceGasFlowArr';
 
 	let dataList = getData(props.dataSource);
-	dataList = runState?.[key]
+	// dataList = realtimeState?.[key]
-		? dataList.map((v, i) => ({ ...v, value: runState[key][i] ?? '/' }))
+	dataList = realtimeState?.['gasii']
+		? dataList.map((v, i) => ({
+				...v,
+				value: realtimeState['gasii'][i] ?? '/',
+		  }))
 		: dataList;
 
 	return (

src/components/BottomBar/gasii/index.jsx

@@ -19,16 +19,16 @@ function GasII(props) {
 		}
 	}
 
-	function handleSourceChange(e) {
+	// function handleSourceChange(e) {
-		console.log('val', e.target.value);
+	// 	console.log('val', e.target.value);
-		if (e.target.value == 'ii') {
+	// 	if (e.target.value == 'ii') {
-			// 天然气II
+	// 		// 天然气II
-			setDataSource('gas-ii');
+	// 		setDataSource('gas-ii');
-		} else if (e.target.value == 'i') {
+	// 	} else if (e.target.value == 'i') {
-			// 天然气 I
+	// 		// 天然气 I
-			setDataSource('gas-i');
+	// 		setDataSource('gas-i');
-		}
+	// 	}
-	}
+	// }
 
 	return (
 		<BottomBarItem icon="pause" title="天然气流量" className={cls.gas}>
@@ -40,7 +40,7 @@ function GasII(props) {
 					{!showChart && <span className={cls.switchLabel}>实时流量</span>}
 				</div>
 
-				<Radio.Group
+				{/* <Radio.Group
 					defaultValue="i"
 					buttonStyle="solid"
 					className={cls.radioGroup}
@@ -52,7 +52,7 @@ function GasII(props) {
 					<Radio.Button value="ii" className="radio-group__item">
 						天然气 II
 					</Radio.Button>
-				</Radio.Group>
+				</Radio.Group> */}
 			</div>
 
 			<div className={cls.chart}>

src/components/BottomBar/gasii/index.module.css

@@ -4,11 +4,12 @@
 
 .gas {
 	position: relative;
+	height: 100%;
 }
 
 .currentFlow {
 	position: absolute;
-	top: 20px;
+	top: 28px;
 	left: 50%;
 	transform: translateX(-50%);
 	padding: 8px 22px;
@@ -23,7 +24,7 @@
 
 .headWidget {
 	position: absolute;
-	top: 22px;
+	top: 28px;
 	right: 24px;
 	height: 32px;
 	width: 410px;

src/components/CenterTopData/LeftBoxes/index.jsx

@@ -1,18 +1,21 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState, useContext, useEffect, useMemo } from 'react';
 import SocketContext from '../../../store/socket-data-provider';
 import icon1 from '@/assets/CenterChart2icon1.svg';
 import icon2 from '@/assets/CenterChart2icon2.svg';
 import icon3 from '@/assets/CenterChart2icon3.svg';
-import icon4 from '@/assets/CenterChart2icon4.svg';
+// import icon4 from '@/assets/CenterChart2icon4.svg';
 
 import cls from './leftbox.module.less';
 
 const Chart2 = () => {
-	const ctx = useContext(SocketContext);
+	const { runState } = useContext(SocketContext);
-	let [time, setTime] = useState([0, 0]);
+	const [time, setTime] = useState([0, 0]);
+
+	// console.clear();
+	// console.log('>>>>>>>> runstate 更新 (', runState, ')');
 
 	useEffect(() => {
-		const restTime = ctx.runState?.lastFireChangeTime;
+		const restTime = runState?.lastFireChangeTime;
 		if (restTime == null) return;
 		console.log('restTime is:', restTime);
 		let timer = null;
@@ -71,23 +74,38 @@ const Chart2 = () => {
 		return () => {
 			clearInterval(timer);
 		};
-	}, [ctx.runState?.lastFireChangeTime]);
+	}, [runState?.lastFireChangeTime, runState?.updateKey]);
+
+	const lastFireChangeTime = {
+		icon: icon3,
+		label: '剩余时间',
+		value: `${time[0]}分${time[1]}秒`,
+	};
+
+	const fireChangeTime = useMemo(() => {
+		return runState?.fireChangeTime || '00:00';
+	}, [runState?.fireChangeTime]);
+
+	const fireDirection = useMemo(() => {
+		// let lastValue = null;
+		// if (runState?.fireDirection) {
+		// 	lastValue = runState?.fireDirection;
+		// }
+		// console.log('换火方向： <', runState?.fireDirection, '>')
+		return runState?.fireDirection || '南火';
+	}, [runState?.fireDirection]);
 
 	const data = [
 		{
 			icon: icon1,
 			label: '换火时间',
-			value: ctx.runState?.fireChangeTime || '00:00',
+			value: fireChangeTime,
-		},
-		{
-			icon: icon3,
-			label: '剩余时间',
-			value: `${time[0]}分${time[1]}秒`,
 		},
+		lastFireChangeTime,
 		{
 			icon: icon2,
 			label: '当前火向',
-			value: ctx.runState?.fireDirection || '东火',
+			value: fireDirection,
 		},
 	];
 

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

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

src/components/Container.jsx

@@ -9,6 +9,7 @@ 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';
+import IconSignal from '../assets/Icon/icon-signal.png';
 
 const Container = (props) => {
 	let icon = useRef(null);
@@ -35,6 +36,9 @@ const Container = (props) => {
 		case 'pause':
 			icon.current = IconPause;
 			break;
+		case 'signal':
+			icon.current = IconSignal;
+			break;
 	}
 
 	return (

src/components/LeftBar/Kiln.jsx

@@ -8,17 +8,17 @@ export default function Kiln() {
 	const ctx = useContext(SocketContext);
 
 	const infos = [
-		{ label: '窑炉压力', value: ctx.runState?.kilnPressure || '0Pa' },
+		{ label: '窑炉压力', value: ctx.kilnInfo?.kilnPressure || '0Pa' },
-		{ label: '循环水温度', value: ctx.runState?.waterTemp || '0℃' },
+		{ label: '循环水温度', value: ctx.kilnInfo?.waterLoopTemperature || '0℃' },
-		{ label: '循环水流量', value: ctx.runState?.waterFlow || '0㎡/h' },
+		{ label: '循环水流量', value: ctx.kilnInfo?.waterLoopFlow || '0㎡/h' },
-		{ label: '循环水压力', value: ctx.runState?.waterPressure || '0Pa' },
+		{ label: '循环水压力', value: ctx.kilnInfo?.waterLoopPressure || '0Pa' },
-		{ label: '助燃风压力', value: ctx.runState?.combustionAirPressure || '0℃' },
+		{ label: '助燃风压力', value: ctx.kilnInfo?.windPressure || '0℃' },
-		{ label: '碹顶加权温度', value: ctx.runState?.topTemp || '0℃' },
+		{ label: '碹顶加权温度', value: ctx.kilnInfo?.topTemperature || '0℃' },
 		{
 			label: '压缩气压力',
-			value: ctx.runState?.compressedAirPressure || '0Pa',
+			value: ctx.kilnInfo?.gasPressure || '0Pa',
 		},
-		{ label: '融化加权温度', value: ctx.runState?.meltTemp || '0℃' },
+		{ label: '熔化加权温度', value: ctx.kilnInfo?.meltTemperature || '0℃' },
 	];
 
 	return (

src/components/LeftBar/good.module.less

@@ -1,11 +1,7 @@
 .goodProd {
-	background: url(../../assets/good.png) no-repeat;
+	background: url(../../assets/good-bg.png) no-repeat;
 	background-size: 100% 100%;
-	width: 625px;
+	height: 610px;
-	// height: 626px;
-	flex: 1;
-	height: 1px;
-	margin-top: 24px;
 
 	.goodProd__content {
 		display: flex;

src/components/LeftBar/index.module.less

@@ -1,9 +1,8 @@
 .leftBar {
 	width: 625px;
-	height: 966px;
+	height: 100%;
 	margin-left: 40px;
-
 	display: flex;
 	flex-direction: column;
-	justify-content: space-between;
+	gap: 22px;
 }

src/components/LeftBar/kiln.module.less

@@ -1,9 +1,7 @@
 .leftBar__top {
-	width: 625px;
+	background: url('../../assets/kiln-bg.png') no-repeat;
-	// height: 305px;
-	height: 300px;
-	background: url('../../assets/ItemBg.png') no-repeat;
 	background-size: 100% 100%;
+	height: 306px;
 
 	.leftBar__top__content {
 		flex: 1;
@@ -11,7 +9,7 @@
 		display: grid;
 		grid-template-columns: 1fr 1fr;
 		gap: 10px;
-		padding-top: 18px;
+		padding-top: 8px;
 
 		.info__item {
 			border-radius: 2px;

src/components/LeftBar/substitutionCharts/GoodRateChart/index.jsx

@@ -8,7 +8,7 @@ import { randomInt } from '../../../../utils';
 const GoodRateChart = (props) => {
 	const options = {
 		color: ['#FFD160', '#12FFF5', '#2760FF'],
-		grid: { top: 28, right: 12, bottom: 32, left: 48 },
+		grid: { top: 28, right: 12, bottom: 48, left: 48 },
 		xAxis: {
 			type: 'category',
 			data: Array(7)
@@ -29,7 +29,7 @@ const GoodRateChart = (props) => {
 			axisLine: {
 				lineStyle: {
 					width: 1,
-					color: '#213259',
+					color: '#4561AE',
 				},
 			},
 		},
@@ -43,12 +43,12 @@ const GoodRateChart = (props) => {
 			axisLine: {
 				show: true,
 				lineStyle: {
-					color: '#213259',
+					color: '#4561AE',
 				},
 			},
 			splitLine: {
 				lineStyle: {
-					color: '#213259a0',
+					color: '#4561AEa0',
 				},
 			},
 			interval: 10,
@@ -112,16 +112,16 @@ const GoodRateChart = (props) => {
 
 	function handleSwitchChange(val) {
 		// val: boolean
-		console.log('switch change', val);
+		// console.log('switch change', val);
 	}
 
 	return (
 		<div className={cls.GoodRateChart}>
 			<div className={cls.titleBar}>
 				<h2>生产良品率</h2>
-				<Switch defaultChecked onChange={handleSwitchChange} />
+				{/* <Switch defaultChecked onChange={handleSwitchChange} /> */}
 				<div className={cls.legend}>
-					<span className="legend__title">班次详情</span>
+					{/* <span className="legend__title">班次详情</span> */}
 					<ul className="legend__list">
 						<li>总量</li>
 						<li>白班</li>
@@ -147,7 +147,7 @@ const GoodRateChart = (props) => {
 					</Radio.Button>
 				</Radio.Group>
 			</div>
-			<ReactECharts option={options} />
+			<ReactECharts option={options} style={{ height: '100%' }} />
 		</div>
 	);
 };

src/components/LeftBar/substitutionCharts/TodayTableData/index.jsx

@@ -5,7 +5,8 @@ import { ScrollBoard } from '@jiaminghi/data-view-react';
 const TodayTableData = (props) => {
 	const [config, setConfig] = useState({
 		// headerBGC: 'rgba(4, 44, 76, 0.3)',
-		headerBGC: 'rgba(4, 44, 76, .8)',
+		// headerBGC: 'rgba(4, 44, 76, .8)',
+		headerBGC: '#044A8425',
 		header: [
 			'<span style="color:#fff">产线<span/>',
 			'<span style="color:#fff">一等率<span/>',
@@ -13,8 +14,10 @@ const TodayTableData = (props) => {
 			'<span style="color:#fff">成品率<span/>',
 			'<span style="color:#fff">废品率<span/>',
 		],
-		oddRowBGC: '#042444',
+		// oddRowBGC: '#042444',
-		evenRowBGC: '#042c4c',
+		oddRowBGC: '#044A8425',
+		// evenRowBGC: '#042c4c',
+		evenRowBGC: '#0B549945',
 		columnWidth: [90],
 		headerHeight: 40,
 		hoverPause: false,
@@ -28,7 +31,11 @@ const TodayTableData = (props) => {
 	});
 	return (
 		<div className={cls.todayTableData}>
-			<ScrollBoard config={config} style={{ width: '100%' }} />
+			<ScrollBoard
+				config={config}
+				className={cls.tableClass}
+				style={{ width: '100%' }}
+			/>
 		</div>
 	);
 };

src/components/RightBar/EnergyCost/EnergyCostChart/index.jsx

@@ -7,7 +7,7 @@ import ReactECharts from 'echarts-for-react';
 const EnergyCostChart = (props) => {
 	const options = {
 		color: ['#FFD160', '#12FFF5', '#2760FF'],
-		grid: { top: 32, right: 12, bottom: 20, left: 48 },
+		grid: { top: 26, right: 12, bottom: 18, left: 48 },
 		xAxis: {
 			type: 'category',
 			data: Array(7)
@@ -33,7 +33,7 @@ const EnergyCostChart = (props) => {
 			},
 		},
 		yAxis: {
-			name: '单位/m³',
+			name: '单位/kWh',
 			nameTextStyle: {
 				color: '#fff',
 				fontSize: 10,
@@ -43,7 +43,7 @@ const EnergyCostChart = (props) => {
 			axisLabel: {
 				color: '#fff',
 				fontSize: 12,
-				formatter: '{value} %',
+				formatter: '{value}',
 			},
 			axisLine: {
 				show: true,
@@ -85,20 +85,43 @@ const EnergyCostChart = (props) => {
 
 	function handleSwitchChange(val) {
 		// val: boolean
-		console.log('switch change', val);
+		// console.log('switch change', val);
 	}
 
 	return (
 		<div className={cls.energyCostChart}>
 			<div className={cls.titleBar}>
 				<h2>能耗趋势图</h2>
-				<Switch defaultChecked onChange={handleSwitchChange} />
+				{/* <Switch defaultChecked onChange={handleSwitchChange} /> */}
 				<div className={cls.legend}>
-					<span className="legend__title">班次详情</span>
+					{/* <span className="legend__title">班次详情</span> */}
 					<ul className="legend__list">
 						<li>总量</li>
 					</ul>
 				</div>
+			</div>
+			<div className={cls.radioGroupWrapper}>
+				<Radio.Group
+					defaultValue="elecCost"
+					buttonStyle="solid"
+					className={cls.radioGroup}
+				>
+					<Radio.Button value="elecCost" className="radio-group__item">
+						电耗能
+					</Radio.Button>
+					<Radio.Button value="restHeat" className="radio-group__item">
+						余热发电
+					</Radio.Button>
+					<Radio.Button value="waterCost" className="radio-group__item">
+						水耗能
+					</Radio.Button>
+					<Radio.Button value="gasCost" className="radio-group__item">
+						天然气
+					</Radio.Button>
+					{/* <Radio.Button value="gasiiCost" className="radio-group__item">
+						焦炉煤气
+					</Radio.Button> */}
+				</Radio.Group>
 				<Radio.Group
 					defaultValue="week"
 					buttonStyle="solid"
@@ -119,7 +142,7 @@ const EnergyCostChart = (props) => {
 				</Radio.Group>
 			</div>
 			<div className="flex-1">
-				<ReactECharts option={options} style={{ height: '180px' }} />
+				<ReactECharts option={options} style={{ height: '145px' }} />
 			</div>
 		</div>
 	);

src/components/RightBar/EnergyCost/EnergyCostChart/index.module.css

@@ -5,7 +5,7 @@
 }
 .energyCostChart .titleBar {
 	display: flex;
-	justify-content: space-between;
+	gap: 12px;
 	align-items: center;
 	color: white;
 }
@@ -63,6 +63,13 @@
 	background-color: #2760ff;
 }
 
+.radioGroupWrapper {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin: 4px 0;
+}
+
 .radioGroup * {
 	border: none !important;
 	border-radius: 0 !important;

src/components/RightBar/EnergyCost/index.jsx

@@ -2,8 +2,25 @@ import cls from './index.module.less';
 import Container from '../../Container';
 import TechSplitline from '../TechSplitline';
 import EnergyCostChart from './EnergyCostChart';
+import SocketContext from '../../../store/socket-data-provider';
+import { useContext } from 'react';
 
 function EnergyCost(props) {
+	const { energyState = {} } = useContext(SocketContext);
+	// console.log('energyState', energyState);
+	// let {
+	// 	restHeat = '0kWh',
+	// 	water = '0Km³',
+	// 	gasi = '0m³',
+	// 	gasii = '0m³',
+	// 	electricity = '0kWh',
+	// } = energyState;
+	let restHeat = energyState?.restHeat || '0kWh';
+	let water = energyState?.water || '0m³';
+	let gasi = energyState?.gasi || '0m³';
+	let gasii = energyState?.gasii || '0m³';
+	let electricity = energyState?.electricity || '0kWh';
+
 	return (
 		<Container title="能耗" icon="charger" className={cls.energyCost}>
 			<div className={`flex flex-col`}>
@@ -12,13 +29,13 @@ function EnergyCost(props) {
 						className={`${cls.info__item} ${cls.hAuto} flex flex-col justify-center items-center self-stretch`}
 					>
 						<span>余 热 发 电</span>
-						<span>922kWh</span>
+						<span>{restHeat}</span>
 					</div>
 					<div className={cls.info__item_groups}>
-						<div className={cls.info__item}>水 耗 量 : 32Km³</div>
+						<div className={cls.info__item}>水 耗 量 : {water}</div>
-						<div className={cls.info__item}>天 然 气 I : 83m³</div>
+						<div className={cls.info__item}>天 然 气 : {gasi}</div>
-						<div className={cls.info__item}>电 耗 量 : 52kWh</div>
+						<div className={cls.info__item}>电 耗 量 : {electricity}</div>
-						<div className={cls.info__item}>天 然 气 II: 32m³</div>
+						{/* <div className={cls.info__item}>天 然 气 II: {gasii}</div> */}
 					</div>
 				</div>
 

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

@@ -1,13 +1,13 @@
 .energyCost {
-	background: url(../../../assets/energy.png) no-repeat;
+	background: url(../../../assets/energy-bg.png) no-repeat;
 	background-size: 100% 100%;
 	width: 626px;
-	height: 400px;
+	height: 395px;
 }
 
 .cost__info {
 	margin-top: 4px;
-	margin-bottom: 12px;
+	// margin-bottom: 12px;
 
 	div {
 		flex-grow: 1;
@@ -19,7 +19,7 @@
 	color: hsl(0, 0%, 100%, 0.9);
 	box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
 	// width: 288px;
-	height: 43px;
+	height: 40px;
 	font-size: 20px;
 	letter-spacing: 1.43px;
 	line-height: 40px;
@@ -35,5 +35,5 @@
 	margin-left: 8px;
 	display: grid;
 	grid-template-columns: 1fr 1fr;
-	gap: 8px;
+	gap: 6px;
 }

src/components/RightBar/SmokeHandle/SmokeTrendChart/index.jsx

@@ -8,7 +8,7 @@ import ReactECharts from 'echarts-for-react';
 const SmokeTrendChart = (props) => {
 	const options = {
 		color: ['#FFD160', '#12FFF5', '#2760FF'],
-		grid: { top: 38, right: 12, bottom: 20, left: 48 },
+		grid: { top: 32, right: 12, bottom: 18, left: 48 },
 		xAxis: {
 			type: 'category',
 			data: Array(7)
@@ -34,7 +34,7 @@ const SmokeTrendChart = (props) => {
 			},
 		},
 		yAxis: {
-			name: '单位m³/h',
+			name: '单位mg/m³',
 			nameTextStyle: {
 				color: '#fff',
 				fontSize: 10,
@@ -44,7 +44,7 @@ const SmokeTrendChart = (props) => {
 			axisLabel: {
 				color: '#fff',
 				fontSize: 12,
-				formatter: '{value} %',
+				formatter: '{value}',
 			},
 			axisLine: {
 				show: true,
@@ -125,9 +125,9 @@ const SmokeTrendChart = (props) => {
 		<div className={cls.energyCostChart}>
 			<div className={cls.titleBar}>
 				<h2>烟气趋势图</h2>
-				<Switch defaultChecked onChange={handleSwitchChange} />
+				{/* <Switch defaultChecked onChange={handleSwitchChange} /> */}
 				<div className={cls.legend}>
-					<span className="legend__title">班次详情</span>
+					{/* <span className="legend__title">班次详情</span> */}
 					<ul className="legend__list">
 						<li>总量</li>
 						<li>白班</li>
@@ -138,13 +138,10 @@ const SmokeTrendChart = (props) => {
 
 			<div className={`${cls.choiceBar} flex items-center justify-between`}>
 				<Radio.Group
-					defaultValue="oxygen"
+					defaultValue="so2"
 					buttonStyle="solid"
 					className={`${cls.radioGroup} flex items-center justify-between`}
 				>
-					<Radio.Button value="oxygen" className="radio-group__item">
-						氧气含量
-					</Radio.Button>
 					<Radio.Button value="so2" className="radio-group__item">
 						二氧化硫
 					</Radio.Button>
@@ -154,6 +151,9 @@ const SmokeTrendChart = (props) => {
 					<Radio.Button value="no2" className="radio-group__item">
 						二氧化氮
 					</Radio.Button>
+					<Radio.Button value="oxygen" className="radio-group__item">
+						氧气含量
+					</Radio.Button>
 				</Radio.Group>
 
 				<Radio.Group
@@ -175,7 +175,7 @@ const SmokeTrendChart = (props) => {
 					</Radio.Button>
 				</Radio.Group>
 			</div>
-			<ReactECharts option={options} style={{ height: '240px' }} />
+			<ReactECharts option={options} style={{ height: '220px' }} />
 		</div>
 	);
 };

src/components/RightBar/SmokeHandle/SmokeTrendChart/index.module.css

@@ -7,7 +7,7 @@
 	width: 400px;
 	margin-bottom: 4px;
 	display: flex;
-	justify-content: space-between;
+	/* justify-content: space-between; */
 	align-items: center;
 	color: white;
 }

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

@@ -1,9 +1,9 @@
 .smokeHandle {
 	// background: #b730305c;
-	background: url(../../../assets/smoke.png) no-repeat;
+	background: url(../../../assets/smoke-bg.png) no-repeat;
 	background-size: 100% 100%;
 	width: 626px;
-	height: 540px;
+	height: 512px;
 	.smokeHandle__content {
 		margin-top: 8px;
 	}
@@ -14,7 +14,7 @@
 	color: hsl(0, 0%, 100%, 0.9);
 	box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
 	// width: 288px;
-	height: 56px;
+	height: 52px;
 	font-size: 20px;
 	letter-spacing: 1.43px;
 	line-height: 56px;
@@ -23,7 +23,7 @@
 }
 
 .info__item_groups {
-	margin-bottom: 12px;
+	// margin-bottom: 12px;
 	margin-left: 8px;
 	display: grid;
 	grid-template-columns: 1fr 1fr;

src/components/container.module.less

@@ -10,7 +10,7 @@
 		align-items: center;
 
 		img {
-			width: 20px;
+			width: 24px;
 
 			&.bigger {
 				width: 24px;
@@ -24,7 +24,7 @@
 				sans-serif;
 			margin: 0;
 			margin-left: 6px;
-			font-size: 18px;
+			font-size: 24px;
 			color: #fff;
 			letter-spacing: 2px;
 			font-weight: 500;

src/components/yx-dark/Bottom.jsx

@@ -0,0 +1,5 @@
+import './styles/bottom.module.css';
+
+export default (props) => {
+	return <div className={`bottom ${props.className}`}>{props.children}</div>;
+};

src/components/yx-dark/Header.jsx

@@ -0,0 +1,26 @@
+import React, { useEffect, useState, useRef } from 'react';
+import './styles/header.module.css';
+import moment from 'moment';
+
+export default (props) => {
+	let [today, setToday] = useState(new Date());
+	moment.locale('zh-cn');
+	setTimeout(() => {
+		setToday(new Date());
+	}, 1000);
+
+	return (
+		<header className="header">
+			<div>
+				<span className="header--logo"></span>
+				<h1>宜兴新能源生产线大数据指挥中心</h1>
+			</div>
+			<span className="header--wing absolute company">
+				设计单位：中建材智能自动化研究院
+			</span>
+			<span className="header--wing absolute datetime">
+				{moment(today).format('YYYY.M.D dddd HH:mm:ss')}
+			</span>
+		</header>
+	);
+};

src/components/yx-dark/LeftContent.jsx

@@ -0,0 +1,13 @@
+import './styles/left.module.css';
+
+import Kiln from '../LeftBar/Kiln';
+import GoodProduction from '../LeftBar/GoodProduction';
+
+export default (props) => {
+	return (
+		<div className={`left-content ${props.className}`}>
+			<Kiln />
+			<GoodProduction />
+		</div>
+	);
+};

src/components/yx-dark/MainContainer.jsx

@@ -0,0 +1,38 @@
+import Bottom from './Bottom';
+import LeftContent from './LeftContent';
+import RightContent from './RightContent';
+import './styles/main.module.css';
+
+import FaultTotal from '../BottomBar/FaultTotal';
+import FaultType from '../BottomBar/FaultType';
+import GasFlow from '../BottomBar/gasii';
+import WindFlow from '../BottomBar/gasi';
+import SpecPL from '../BottomBar/SpecPL';
+import CenterTopBox from '../CenterTopData/LeftBoxes';
+
+export default (props) => {
+	return (
+		<div className="main-container">
+			<LeftContent className="left"></LeftContent>
+			<div className="main-center">
+				<CenterTopBox />
+			</div>
+			<Bottom title="产线缺陷统计" className="bottom-1">
+				<FaultTotal />
+			</Bottom>
+			<Bottom title="产线当日缺陷分类" className="bottom-2">
+				<FaultType />
+			</Bottom>
+			<Bottom title="天然气流量" className="bottom-3">
+				<GasFlow />
+			</Bottom>
+			<Bottom title="助燃风流量" className="bottom-4">
+				<WindFlow />
+			</Bottom>
+			<Bottom title="当前产线生产风格" className="bottom-5">
+				<SpecPL />
+			</Bottom>
+			<RightContent className="right"></RightContent>
+		</div>
+	);
+};

src/components/yx-dark/RightContent.jsx

@@ -0,0 +1,13 @@
+import './styles/right.module.css';
+
+import Energy from '../RightBar/EnergyCost';
+import Smoke from '../RightBar/SmokeHandle';
+
+export default (props) => {
+	return (
+		<div className={`right-content ${props.className}`}>
+			<Energy />
+			<Smoke />
+		</div>
+	);
+};

src/components/yx-dark/styles/bottom.module.css

@@ -0,0 +1,3 @@
+.bottom {
+    background: #f0f3;
+}

src/components/yx-dark/styles/header.module.css

@@ -0,0 +1,53 @@
+header {
+	height: 121px;
+	width: 100%;
+	position: absolute;
+	z-index: 10000;
+	background: url(../images/header.png) 100% 100% / contain no-repeat;
+	display: grid;
+	place-content: center;
+}
+header > div {
+	display: flex;
+	align-items: center;
+	margin-bottom: 0;
+}
+header > div .header--logo {
+	margin-top: 12px;
+	width: 48px;
+	height: 67px;
+	background: url(../images/logo.png) center/contain no-repeat;
+}
+
+header h1 {
+	margin-bottom: 0;
+	margin-left: 36px;
+	font-size: 52px;
+	/* line-height: 97px; */
+	user-select: none;
+	letter-spacing: 9px;
+	font-weight: 400;
+	color: #6bf2ff;
+	font-family: '微软雅黑', sans-serif;
+}
+
+.header--wing {
+	left: 0;
+	bottom: -12px;
+	height: 48px;
+	font-size: 28px;
+	line-height: 48px;
+	color: #51f0ff;
+}
+
+.company {
+	margin-left: 960px;
+	letter-spacing: 1px;
+}
+
+.datetime {
+	text-align: center;
+	left: unset;
+	right: 1100px; 
+	letter-spacing: 1px;
+}

src/components/yx-dark/styles/left.module.css

@@ -0,0 +1,7 @@
+.left-content {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    /* background: #fcc3; */
+}

src/components/yx-dark/styles/main.module.css

@@ -0,0 +1,54 @@
+.main-container {
+	height: 1px;
+	flex: 1;
+	/* background: #ccc4; */
+	display: grid;
+	grid-template-columns: 626px 576px 580px 626px 626px 450px 626px;
+	grid-template-rows: 600px 306px;
+	gap: 20px;
+	grid-template-areas:
+		'left    main    main    main    main    main    right' 
+		'left    bottom1 bottom2 bottom3 bottom4 bottom5 right';
+	place-content: end center;
+	margin-bottom: 20px;
+}
+
+.main-center {
+	grid-area: main;
+	background: url(../images/3d.png) 100% 80% / contain no-repeat;
+	display: flex;
+	justify-content: center;
+}
+
+.left {
+	grid-area: left;
+}
+
+.bottom-1 {
+	grid-area: bottom1;
+	background: url('../images/tongji-bg.png') 100% / contain no-repeat;
+}
+
+.bottom-2 {
+	grid-area: bottom2;
+	background: url('../images/fenlei-bg.png') 100% / contain no-repeat;
+}
+
+.bottom-3 {
+	grid-area: bottom3;
+	background: url('../images/gas-bg.png') 100% / contain no-repeat;
+}
+
+.bottom-4 {
+	grid-area: bottom4;
+	background: url('../images/gas-bg.png') 100% / contain no-repeat;
+}
+
+.bottom-5 {
+	grid-area: bottom5;
+	background: url('../images/spec-bg.png') 100% / contain no-repeat;
+}
+
+.right {
+	grid-area: right;
+}

src/components/yx-dark/styles/right.module.css

@@ -0,0 +1,7 @@
+.right-content {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    /* background: #fcc3; */
+}

src/pages/index.jsx

@@ -1,36 +1,32 @@
 import { useEffect, useState } from 'react';
 import './global.less';
 import './index.less';
-import Head from '../components/Head';
+import Header from '../components/yx-dark/Header';
-import LeftBar from '../components/LeftBar';
+// import LeftBar from '../components/LeftBar';
-import BottomBar from '../components/BottomBar';
+// import BottomBar from '../components/BottomBar';
-import RightBar from '../components/RightBar';
+// import RightBar from '../components/RightBar';
-import CenterTopData from '../components/CenterTopData';
+// import CenterTopData from '../components/CenterTopData';
 import Slider from '../components/Slider';
 import { SocketContextProvider } from '../store/socket-data-provider';
-
+import MainContainer from '../components/yx-dark/MainContainer';
-import V3DBG from '../assets/V3DBG.png';
-// import V3D from './V3D';
 
 export default function index() {
 	const [value, setValue] = useState(100);
 
 	const v = (value / 100).toFixed(2);
 	const styles = {
-		transform: `scale(${v})`,
+		transform: `scale(${(v * 3840) / 4320}, ${v})`,
 		// transform: `scale(${v * 24 / 33}, ${v})`,
 		transformOrigin: 'top left',
 	};
 
 	useEffect(() => {
 		let fn = (e) => {
-			console.log('add fn');
 			if (e.shiftKey && e.key === 'L') {
 				document.getElementById('slider').classList.toggle('show');
 			}
 		};
 		let fn2 = () => {
-			console.log('add fn2');
 			setTimeout(() => {
 				document.getElementById('slider').classList.remove('show');
 			}, 200);
@@ -40,7 +36,6 @@ export default function index() {
 		document.getElementById('slider').addEventListener('mouseleave', fn2);
 
 		return () => {
-			console.log('remove fn, fn2');
 			document.removeEventListener('keydown', fn);
 			document.getElementById('slider').removeEventListener('mouseleave', fn2);
 		};
@@ -50,21 +45,21 @@ export default function index() {
 		// <FullScreenContainer>
 		<SocketContextProvider>
 			<div id="FullScreen" style={styles}>
-				<Head />
+				<Header />
-				<div className="Main">
+				<MainContainer />
+				{/* <div className="Main">
 					<LeftBar />
 					<div className="Center">
 						<div className="CenterData">
 							<CenterTopData />
 						</div>
-						<img src={V3DBG} alt="图片加载错误" className="V3DBG" />
+						<div className="V3DBorder"></div>
-						<div className="V3DBorder">{/* <V3D /> */}</div>
 						<div className="Button">
 							<BottomBar />
 						</div>
 					</div>
 					<RightBar />
-				</div>
+				</div> */}
 			</div>
 			<Slider handleSlide={setValue} />
 		</SocketContextProvider>

src/pages/index.less

@@ -1,20 +1,25 @@
 #FullScreen {
-	width: 3840px;
+	width: 4320px;
 	height: 1080px;
-	transform-origin: 'lefttop';
+	background: url(../components/yx-dark/images/bg.png) 100% / cover no-repeat;
-	background-color: #040c1c;
+	display: flex;
+	flex-direction: column;
+	position: relative;
 
 	.Main {
+		margin-top: 100px;
 		// background: #a935355f;
-		width: 3840px;
+		width: 4320px;
-		height: 996px;
+		height: 1px;
+		flex: 1;
+		background: #ccc3;
 		display: flex;
 		flex-direction: row;
 
 		.Center {
-			margin: 22px;
+			height: 100%;
-			width: 2472px;
+			width: 1px;
-			height: 940px;
+			flex: 1;
 
 			.CenterData {
 				position: absolute;
@@ -28,7 +33,6 @@
 				width: 2472px;
 				height: 640px;
 				z-index: 1;
-				box-shadow: inset 0 0 128px 64px #0a2859;
 			}
 
 			.V3DBorder {

src/store/socket-data-provider.js

@@ -3,29 +3,45 @@ import { useState, useEffect } from 'react';
 const SocketContext = React.createContext();
 
 export const SocketContextProvider = (props) => {
+	const [kilnInfo, setkilnInfo] = useState(null);
 	const [runState, setRunState] = useState(null);
+	const [energyState, setEnergyState] = useState(null);
 	const [hisState, setHisState] = useState(null);
+	const [realtimeState, setRealtimeState] = useState(null);
 
 	useEffect(() => {
 		// const socket = new WebSocket('ws://172.16.1.55:8081/xc-screen/websocket/1');
 		const socket = new WebSocket(
-			'ws://192.168.1.12:8081/xc-screen/websocket/1',
+			// 'ws://192.168.1.12:8081/xc-screen/websocket/1',
+			'ws://127.0.0.1:9800',
 		);
 		socket.onopen = () => {
 			console.log('[*] socket connected!');
 		};
 		socket.onmessage = (e) => {
 			if ('data' in e) {
-				console.log('[ws] data ===> ', e.data);
 				if (e.data == '连接成功') return;
+
 				let incommingData = JSON.parse(e.data);
 				switch (incommingData.type) {
-					case 'RunData':
+					case 'kiln-info':
-						console.log('run data arrived, set 运行时数据');
+						console.log('设置窑炉信息');
-						setRunState(incommingData.data);
+						setkilnInfo(incommingData.data);
 						break;
-					case 'HisData':
+					case 'run-state':
-						console.log('his data arrived, set 历史数据');
+						console.log('设置运行时数据');
+						setRunState({ ...incommingData.data, updateKey: Math.random() });
+						break;
+					case 'energy-cost':
+						console.log('设置能耗数据');
+						setEnergyState(incommingData.data);
+						break;
+					case 'realtime':
+						console.log('设置流量实时数据');
+						setRealtimeState(incommingData.data);
+						break;
+					case 'his-trend':
+						console.log('设置历史数据');
 						setHisState(incommingData.data);
 						break;
 				}
@@ -34,7 +50,9 @@ export const SocketContextProvider = (props) => {
 	}, []);
 
 	return (
-		<SocketContext.Provider value={{ runState, hisState }}>
+		<SocketContext.Provider
+			value={{ kilnInfo, energyState, runState, hisState, realtimeState }}
+		>
 			{props.children}
 		</SocketContext.Provider>
 	);

websocket/d.txt

@@ -0,0 +1,458 @@
+推送火向,剩余换火时间,压力,换火时间等信息
+
+目前缺少四个温度
+循环水温
+
+熔化温度
+
+碹顶温度
+
+支通路温度
+{
+  "data": {
+    "waterFlow": "99.0m³/h",
+    "fireChangeTime": "46.0S",
+    "compressedAirPressure": "95.0MPa",
+    "combustionAirPressure": "73.0Pa",
+    "waterPressure": "29.0MPa",
+    "lastFireChangeTime": "10分20秒",
+    "combustionAirPressureArr": [
+      "1.0m³/h",
+      "16.0m³/h",
+      "23.0m³/h",
+      "65.0m³/h",
+      "70.0m³/h",
+      "78.0m³/h",
+      "9.0m³/h",
+      "94.0m³/h"
+    ],
+    "kilnPressure": "99.0Pa",
+    "fireDirection": "东火"
+  },
+  "type": "RunData"
+}左右投料机信息{"rightFeeder":"运行","leftFeeder":"运行"}
+
+
+天然气流量历史趋势
+{
+  "kilnGasT1": {
+    "FE111R": [
+      53.02,
+      69.84,
+      99.33,
+      17.21,
+      1.17,
+      27.84,
+      95.44,
+      30.72,
+      32.24,
+      64.16,
+      59.65,
+      14.59,
+      78.58,
+      99.15,
+      58.91,
+      34.13,
+      99.62,
+      2.23,
+      28.31,
+      91.17,
+      97.15,
+      60.62,
+      94.12,
+      23.24
+    ],
+    "FE113R": [
+      22.04,
+      40.78,
+      75.62,
+      61.01,
+      72.7,
+      48.46,
+      32.44,
+      42.51,
+      59.61,
+      22.86,
+      32.95,
+      21.32,
+      23.59,
+      84.16,
+      55.14,
+      55.71,
+      10.81,
+      56.53,
+      75.51,
+      2.85,
+      27.77,
+      52.42,
+      43.34,
+      22.04
+    ],
+    "FE112R": [
+      77.02,
+      13.83,
+      1.71,
+      53.99,
+      4.03,
+      1,
+      22.17,
+      61.73,
+      11.25,
+      31.69,
+      90.31,
+      69.26,
+      68.72,
+      80.79,
+      3.08,
+      39.17,
+      12.6,
+      35.31,
+      97.2,
+      38.77,
+      27.5,
+      11.78,
+      72.32,
+      23.13
+    ],
+    "FE115R": [
+      28.31,
+      10.16,
+      13.22,
+      41.44,
+      97.19,
+      60.08,
+      34.13,
+      16.75,
+      92.7,
+      79.48,
+      3.08,
+      14.71,
+      4.4,
+      0.88,
+      77.6,
+      57,
+      31,
+      86.14,
+      44.31,
+      45.7,
+      6.85,
+      65.62,
+      77.97,
+      49.2
+    ],
+    "FE114R": [
+      17.72,
+      32.45,
+      1.42,
+      24.51,
+      68.57,
+      61.48,
+      2.08,
+      3.1,
+      38.27,
+      20.07,
+      25.71,
+      85.58,
+      48.31,
+      78.14,
+      22.43,
+      87.47,
+      83.78,
+      17.66,
+      72.36,
+      19,
+      20.69,
+      33.92,
+      25.66,
+      91.28
+    ],
+    "FE117R": [
+      47.8,
+      62.27,
+      90.23,
+      28.31,
+      73.09,
+      34.04,
+      9.03,
+      44.69,
+      32.62,
+      25.78,
+      27.79,
+      25.42,
+      28.96,
+      56.52,
+      75.43,
+      50.56,
+      90.22,
+      11.85,
+      4.56,
+      39.9,
+      9.83,
+      65.98,
+      91.22,
+      92.43
+    ],
+    "FE116R": [
+      64.79,
+      46.14,
+      58.67,
+      54.46,
+      15.67,
+      72.02,
+      15.06,
+      5.88,
+      38.19,
+      66.98,
+      89.24,
+      33.13,
+      87.57,
+      43.95,
+      55.06,
+      93.26,
+      96.91,
+      56.5,
+      20.75,
+      83.76,
+      60.88,
+      62.04,
+      22.34,
+      82.43
+    ],
+    "FE118R": [
+      94.32,
+      86.26,
+      5.13,
+      47.33,
+      40.01,
+      34.97,
+      18.69,
+      81.81,
+      87.37,
+      96.47,
+      16.04,
+      23.33,
+      0.66,
+      16.86,
+      13.19,
+      67.32,
+      37.63,
+      13.74,
+      22.85,
+      78.89,
+      9.52,
+      75.46,
+      0.2,
+      1.51
+    ]
+  },
+  "kilnGasT2": {
+    "FE124R": [
+      53.02,
+      69.84,
+      99.33,
+      17.21,
+      1.17,
+      27.84,
+      95.44,
+      30.72,
+      32.24,
+      64.16,
+      59.65,
+      14.59,
+      78.58,
+      99.15,
+      58.91,
+      34.13,
+      99.62,
+      2.23,
+      28.31,
+      91.17,
+      97.15,
+      60.62,
+      94.12,
+      23.24
+    ],
+    "FE123aR": [
+      17.72,
+      32.45,
+      1.42,
+      24.51,
+      68.57,
+      61.48,
+      2.08,
+      3.1,
+      38.27,
+      20.07,
+      25.71,
+      85.58,
+      48.31,
+      78.14,
+      22.43,
+      87.47,
+      83.78,
+      17.66,
+      72.36,
+      19,
+      20.69,
+      33.92,
+      25.66,
+      91.28
+    ],
+    "FE123R": [
+      77.02,
+      13.83,
+      1.71,
+      53.99,
+      4.03,
+      1,
+      22.17,
+      61.73,
+      11.25,
+      31.69,
+      90.31,
+      69.26,
+      68.72,
+      80.79,
+      3.08,
+      39.17,
+      12.6,
+      35.31,
+      97.2,
+      38.77,
+      27.5,
+      11.78,
+      72.32,
+      23.13
+    ],
+    "FE124aR": [
+      22.04,
+      40.78,
+      75.62,
+      61.01,
+      72.7,
+      48.46,
+      32.44,
+      42.51,
+      59.61,
+      22.86,
+      32.95,
+      21.32,
+      23.59,
+      84.16,
+      55.14,
+      55.71,
+      10.81,
+      56.53,
+      75.51,
+      2.85,
+      27.77,
+      52.42,
+      43.34,
+      22.04
+    ],
+    "FE126R": [
+      64.79,
+      46.14,
+      58.67,
+      54.46,
+      15.67,
+      72.02,
+      15.06,
+      5.88,
+      38.19,
+      66.98,
+      89.24,
+      33.13,
+      87.57,
+      43.95,
+      55.06,
+      93.26,
+      96.91,
+      56.5,
+      20.75,
+      83.76,
+      60.88,
+      62.04,
+      22.34,
+      82.43
+    ],
+    "FE125aR": [
+      47.8,
+      62.27,
+      90.23,
+      28.31,
+      73.09,
+      34.04,
+      9.03,
+      44.69,
+      32.62,
+      25.78,
+      27.79,
+      25.42,
+      28.96,
+      56.52,
+      75.43,
+      50.56,
+      90.22,
+      11.85,
+      4.56,
+      39.9,
+      9.83,
+      65.98,
+      91.22,
+      92.43
+    ],
+    "FE125R": [
+      28.31,
+      10.16,
+      13.22,
+      41.44,
+      97.19,
+      60.08,
+      34.13,
+      16.75,
+      92.7,
+      79.48,
+      3.08,
+      14.71,
+      4.4,
+      0.88,
+      77.6,
+      57,
+      31,
+      86.14,
+      44.31,
+      45.7,
+      6.85,
+      65.62,
+      77.97,
+      49.2
+    ],
+    "FE126aR": [
+      94.32,
+      86.26,
+      5.13,
+      47.33,
+      40.01,
+      34.97,
+      18.69,
+      81.81,
+      87.37,
+      96.47,
+      16.04,
+      23.33,
+      0.66,
+      16.86,
+      13.19,
+      67.32,
+      37.63,
+      13.74,
+      22.85,
+      78.89,
+      9.52,
+      75.46,
+      0.2,
+      1.51
+    ]
+  }
+}

websocket/response-example.json

@@ -0,0 +1,112 @@
+[
+	/** 窑炉信息下的8个字段 **/
+	{
+		"type": "kiln-info",
+		"data": {
+			/** 窑炉压力 **/
+			"kilnPressure": "***Kpa",
+			/** 循环水温度 **/
+			"waterLoopTemperature": "...℃",
+			/** 循环水流量 **/
+			"waterLoopFlow": "+++m³/h",
+			/** 循环水压力 **/
+			"waterLoopPressure": "***Kpa",
+			/** 助燃风压力 **/
+			"windPressure": "***Kpa",
+			/** 压缩气压力 **/
+			"gasPressure": "***Kpa",
+			/** 碹顶加权温度 **/
+			"topTemperature": "...℃",
+			/** 融化加权温度 **/
+			"meltTemperature": "...℃"
+		}
+	},
+
+	/** 运行状态数据 **/
+	{
+		"type": "run-state",
+		"data": {
+			/** 剩余时间 **/
+			"lastFireChangeTime": "3分28秒",
+			/** 换火时间 **/
+			"fireChangeTime": "20:00",
+			/** 当前火向 **/
+			"fireDirection": "东火"
+		}
+	},
+
+	/** 能源数据 **/
+	{
+		"type": "energy-cost",
+		"data": {
+			/** 余热发电 **/
+			"restHeat": "***kWh",
+			/** 水耗量 **/
+			"water": "+++Km³",
+			/** 电耗量 **/
+			"electricity": "+++kWh",
+			/** 天然气I **/
+			"gasi": "...m³",
+			/** 天然气II **/
+			"gasii": "...m³"
+		}
+	},
+
+	/** 实时数据 gasii 代表天然气流量实时数据， wind 代表助燃风实时数据 **/
+	{
+		"type": "realtime",
+		"data": {
+			/** 天然气 **/
+			"gasii": [
+				"...m³/h",
+				"...m³/h",
+				"...m³/h",
+				"...m³/h",
+				"...m³/h",
+				"...m³/h",
+				"...m³/h",
+				"...m³/h"
+			],
+			/** 助燃风 **/
+			"wind": [
+				"...m³/h",
+				"...m³/h",
+				"...m³/h",
+				"...m³/h",
+				"...m³/h",
+				"...m³/h",
+				"...m³/h",
+				"...m³/h"
+			]
+		}
+	},
+
+	/** 历史趋势数据 gas 代表天然气流量历史趋势数据， wind 代表助燃风历史趋势数据 **/
+	{
+		"type": "his-trend",
+		"data": {
+			/** 天然气 **/
+			"gas": {
+				"FE111R": [],
+				"FE113R": [],
+				"FE112R": [],
+				"FE115R": [],
+				"FE116R": [],
+				"FE117R": [],
+				"FE114R": [],
+				"FE118R": []
+			},
+			/** 助燃风 **/
+			"wind": {
+				"FE124R": [],
+				"FE124aR": [],
+				"FE123R": [],
+				"FE123aR": [],
+				"FE125R": [],
+				"FE125aR": [],
+				"FE126R": [],
+				"FE126aR": []
+			}
+		}
+	}
+]

websocket/server.ts

@@ -0,0 +1,133 @@
+import { WebSocket, WebSocketServer } from 'ws';
+import template from './template.json';
+import utils from './utils';
+
+const wss = new WebSocketServer({ port: 9800 });
+const frequency = 10; // seconds
+const frequency1 = 1200; // seconds
+wss.on('connection', function (ws, req) {
+	// console.log("ws", ws);
+	console.log(
+		'Client in: ',
+		req.socket.remoteAddress,
+		'current users:',
+		wss.clients.size,
+	);
+	// ws.on("error", console.error);
+	// ws.emit("message", "connected");
+	ws.on('open', function () {
+		console.log('connected');
+		ws.send('connected');
+	});
+	ws.on('message', function (msg) {
+		console.log('message from client', msg);
+		ws.send('echo ' + msg.toString());
+	});
+	ws.on('error', console.error);
+
+	const timer = setInterval(() => {
+		sendMsg(ws, 'kiln-info'); // 窑炉信息
+		sendMsg(ws, 'energy-cost'); // 运行状态
+		sendMsg(ws, 'run-state'); // 运行状态
+		sendMsg(ws, 'realtime');
+		sendMsg(ws, 'his-trend');
+		// sendMsg(ws, 'gas');
+		// sendMsg(ws, 'kiln-top');
+		// sendMsg(ws, 'kiln-bottom');
+	}, frequency * 1000);
+
+	const timer1 = setInterval(() => {
+		// sendMsg(ws, 'run-state'); // 运行状态
+	}, frequency1 * 1000);
+
+	ws.on('close', function () {
+		console.log('停止监听');
+		clearInterval(timer);
+		clearInterval(timer1);
+	});
+});
+
+type MsgType =
+	| 'kiln-info'
+	| 'run-state'
+	| 'energy-cost'
+	| 'realtime'
+	| 'his-trend'
+	| 'fan'
+	| 'gas'
+	| 'kiln-top'
+	| 'kiln-bottom';
+
+type ResponseData = {
+	[key: string]: string | string[];
+};
+
+type ResponseDataComplex = {
+	[key: string]: ResponseData;
+};
+
+function sendMsg(ws: WebSocket, type: MsgType) {
+	let data: ResponseData | ResponseDataComplex = {};
+	switch (type) {
+		case 'kiln-info':
+			for (const key in template.kilnInfo) {
+				data[key] = utils.getRandom(
+					template.kilnInfo[key as keyof typeof template.kilnInfo],
+				);
+			}
+			break;
+		case 'energy-cost':
+			for (const key in template.energyCost) {
+				data[key] = utils.getRandom(
+					template.energyCost[key as keyof typeof template.energyCost],
+				);
+			}
+			break;
+		case 'run-state':
+			data = template.runState;
+			data.fireDirection =
+				Math.floor(Math.random() * 10) % 2 === 0 ? '南火' : '北火';
+			break;
+		case 'realtime':
+			/** 天然气 实时流量 */
+			data.gasii = template.realtime.gasii.map((v) => utils.getRandom(v));
+			/** 助燃风 实时流量 */
+			data.wind = template.realtime.wind.map((v) => utils.getRandom(v));
+			break;
+		case 'his-trend':
+			const hisTrend: {
+				gas: ResponseData;
+				wind: ResponseData;
+			} = {
+				gas: {},
+				wind: {},
+			};
+			Object.keys(template.hisTrend.gas).forEach((key) => {
+				hisTrend.gas[key] = template.hisTrend.gas[
+					key as keyof typeof template.hisTrend.gas
+				].map((v) => utils.getRandom(v));
+			});
+			Object.keys(template.hisTrend.wind).forEach((key) => {
+				hisTrend.wind[key] = template.hisTrend.wind[
+					key as keyof typeof template.hisTrend.wind
+				].map((v) => utils.getRandom(v));
+			});
+			data = hisTrend;
+			break;
+		case 'gas':
+			// data = template.gas;
+			break;
+		case 'kiln-top':
+			// data = template.kilnTop;
+			break;
+		case 'kiln-bottom':
+			// data = template.kilnBottom;
+			break;
+		default:
+			// data = 'You are connected!';
+			break;
+	}
+	// console.log("sendMsg: ", ws);
+	// ws.emit("message", JSON.stringify(data));
+	ws.send(JSON.stringify({ type, data }));
+}

websocket/template.json

@@ -0,0 +1,892 @@
+{
+	"kilnInfo": {
+		"kilnPressure": "***Kpa",
+		"waterLoopTemperature": "...℃",
+		"waterLoopFlow": "+++m³/h",
+		"waterLoopPressure": "***Kpa",
+		"windPressure": "***Kpa",
+		"gasPressure": "***Kpa",
+		"topTemperature": "...℃",
+		"meltTemperature": "...℃"
+	},
+	"energyCost": {
+		"restHeat": "***kWh",
+		"water": "+++Km³",
+		"electricity": "+++kWh",
+		"gasi": "...m³",
+		"gasii": "...m³"
+	},
+	"runState": {
+		"lastFireChangeTime": "19分28秒",
+		"fireChangeTime": "19:56",
+		"fireDirection": "南火"
+	},
+	"fan": [
+		["8#压延冷却风机", "4373Hz", "正常"],
+		["7#压延冷却风机", "4772Hz", "正常"],
+		["6#压延冷却风机", "1704Hz", "正常"],
+		["5#压延冷却风机", "3109Hz", "正常"],
+		["4#压延冷却风机", "2595Hz", "正常"],
+		["3#压延冷却风机", "8903Hz", "正常"],
+		["2#压延冷却风机", "3741Hz", "正常"],
+		["1#压延冷却风机", "9035Hz", "正常"],
+		["4#熔化部风机", "5223Hz", "正常"],
+		["3#熔化部风机", "9722Hz", "正常"],
+		["2#熔化部风机", "9617Hz", "正常"],
+		["1#熔化部风机", "7135Hz", "正常"],
+		["4#澄清部风机", "1699Hz", "正常"],
+		["3#澄清部风机", "2511Hz", "正常"],
+		["2#澄清部风机", "9780Hz", "正常"],
+		["1#澄清部风机", "3809Hz", "正常"],
+		["2#助燃风机", "435Hz", "正常"],
+		["1#助燃风机", "6270Hz", "正常"],
+		["2#L吊墙风机", "8181Hz", "正常"],
+		["1#L吊墙风机", "5587Hz", "正常"],
+		["2#钢碹碴池壁风机", "6652Hz", "正常"],
+		["1#钢碹碴池壁风机", "2000Hz", "正常"],
+		["2#池壁拐角风机", "1972Hz", "正常"],
+		["1#池壁拐角风机", "7730Hz", "正常"]
+	],
+	"realtime": {
+		"gasii": [
+			"...m³/h",
+			"...m³/h",
+			"...m³/h",
+			"...m³/h",
+			"...m³/h",
+			"...m³/h",
+			"...m³/h",
+			"...m³/h"
+		],
+		"wind": [
+			"...m³/h",
+			"...m³/h",
+			"...m³/h",
+			"...m³/h",
+			"...m³/h",
+			"...m³/h",
+			"...m³/h",
+			"...m³/h"
+		]
+	},
+	"hisTrend": {
+		"gas": {
+			"FE111R": [
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$"
+			],
+			"FE113R": [
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$"
+			],
+			"FE112R": [
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$"
+			],
+			"FE115R": [
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$"
+			],
+			"FE114R": [
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$"
+			],
+			"FE117R": [
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$"
+			],
+			"FE116R": [
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$"
+			],
+			"FE118R": [
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$"
+			]
+		},
+		"wind": {
+			"FE124R": [
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$"
+			],
+			"FE123aR": [
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$"
+			],
+			"FE123R": [
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$"
+			],
+			"FE124aR": [
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$"
+			],
+			"FE126R": [
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$"
+			],
+			"FE125aR": [
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$"
+			],
+			"FE125R": [
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$"
+			],
+			"FE126aR": [
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$",
+				"$$$"
+			]
+		}
+	},
+	"kilnBottom": {
+		"kilnTempBottomT1": {
+			"TE316": [
+				44,
+				49,
+				20,
+				29,
+				96,
+				76,
+				20,
+				82,
+				28,
+				86,
+				69,
+				18,
+				23,
+				58,
+				83,
+				84,
+				94,
+				99,
+				36,
+				51,
+				32
+			],
+			"TE315": [
+				84,
+				61,
+				87,
+				82,
+				33,
+				9,
+				20,
+				23,
+				81,
+				0,
+				16,
+				81,
+				9,
+				78,
+				30,
+				16,
+				49,
+				16,
+				95,
+				53,
+				19
+			],
+			"TE314": [
+				45,
+				93,
+				11,
+				47,
+				27,
+				69,
+				91,
+				17,
+				0,
+				67,
+				60,
+				15,
+				84,
+				36,
+				89,
+				30,
+				36,
+				90,
+				38,
+				94,
+				87
+			],
+			"TE313": [
+				60,
+				9,
+				59,
+				15,
+				43,
+				41,
+				83,
+				93,
+				99,
+				91,
+				29,
+				47,
+				2,
+				40,
+				65,
+				39,
+				12,
+				20,
+				57,
+				64,
+				95
+			],
+			"TE312": [
+				22,
+				46,
+				93,
+				69,
+				44,
+				3,
+				62,
+				49,
+				4,
+				18,
+				87,
+				76,
+				36,
+				16,
+				50,
+				36,
+				54,
+				90,
+				1,
+				66,
+				68
+			]
+		},
+		"kilnTempBottomT2": {
+			"TE319": [
+				48,
+				56,
+				40,
+				44,
+				31,
+				82,
+				35,
+				36,
+				0,
+				84,
+				49,
+				38,
+				28,
+				34,
+				98,
+				60,
+				4,
+				69,
+				15,
+				86,
+				19
+			],
+			"TE318": [
+				7,
+				30,
+				57,
+				78,
+				47,
+				99,
+				1,
+				98,
+				47,
+				86,
+				55,
+				10,
+				98,
+				27,
+				97,
+				85,
+				54,
+				41,
+				27,
+				85,
+				44
+			],
+			"TE317": [
+				72,
+				13,
+				7,
+				69,
+				77,
+				36,
+				6,
+				34,
+				97,
+				48,
+				75,
+				29,
+				75,
+				4,
+				70,
+				80,
+				31,
+				10,
+				39,
+				86,
+				52
+			],
+			"TE321": [
+				6,
+				60,
+				32,
+				19,
+				79,
+				99,
+				98,
+				81,
+				82,
+				68,
+				3,
+				94,
+				7,
+				29,
+				48,
+				52,
+				36,
+				59,
+				28,
+				77,
+				17
+			],
+			"TE320": [
+				23,
+				47,
+				4,
+				15,
+				7,
+				74,
+				75,
+				60,
+				78,
+				89,
+				15,
+				95,
+				74,
+				85,
+				20,
+				48,
+				79,
+				51,
+				63,
+				82,
+				68
+			]
+		}
+	},
+	"kilnTop": {
+		"kilnTempTopT2": {
+			"TE215": [
+				81,
+				12,
+				86,
+				55,
+				50,
+				59,
+				20,
+				67,
+				66,
+				29,
+				17,
+				74,
+				11,
+				12,
+				63,
+				23,
+				34,
+				86,
+				9,
+				38,
+				99,
+				3,
+				33,
+				77
+			],
+			"TE214": [
+				51,
+				12,
+				49,
+				60,
+				3,
+				67,
+				95,
+				62,
+				22,
+				89,
+				69,
+				14,
+				41,
+				79,
+				77,
+				27,
+				26,
+				34,
+				69,
+				44,
+				89,
+				86,
+				92,
+				1
+			],
+			"TE213": [
+				76,
+				14,
+				35,
+				1,
+				36,
+				67,
+				40,
+				5,
+				53,
+				98,
+				46,
+				29,
+				71,
+				12,
+				43,
+				42,
+				53,
+				56,
+				9,
+				17,
+				34,
+				42,
+				82,
+				73
+			]
+		},
+		"kilnTempTopT1": {
+			"TE209": [
+				51,
+				12,
+				49,
+				60,
+				3,
+				67,
+				95,
+				62,
+				22,
+				89,
+				69,
+				14,
+				41,
+				79,
+				77,
+				27,
+				26,
+				34,
+				69,
+				44,
+				89,
+				86,
+				92,
+				1
+			],
+			"TE208": [
+				76,
+				14,
+				35,
+				1,
+				36,
+				67,
+				40,
+				5,
+				53,
+				98,
+				46,
+				29,
+				71,
+				12,
+				43,
+				42,
+				53,
+				56,
+				9,
+				17,
+				34,
+				42,
+				82,
+				73
+			],
+			"TE210": [
+				81,
+				12,
+				86,
+				55,
+				50,
+				59,
+				20,
+				67,
+				66,
+				29,
+				17,
+				74,
+				11,
+				12,
+				63,
+				23,
+				34,
+				86,
+				9,
+				38,
+				99,
+				3,
+				33,
+				77
+			]
+		}
+	}
+}

websocket/tsconfig.json

@@ -0,0 +1,109 @@
+{
+	"compilerOptions": {
+		/* Visit https://aka.ms/tsconfig to read more about this file */
+
+		/* Projects */
+		// "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+		// "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+		// "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+		// "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+		// "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+		// "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+
+		/* Language and Environment */
+		"target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+		// "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+		// "jsx": "preserve",                                /* Specify what JSX code is generated. */
+		// "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
+		// "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+		// "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+		// "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+		// "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+		// "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+		// "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+		// "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+		// "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+
+		/* Modules */
+		"module": "commonjs" /* Specify what module code is generated. */,
+		// "rootDir": "./",                                  /* Specify the root folder within your source files. */
+		// "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
+		// "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+		// "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+		// "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+		// "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+		// "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+		// "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+		// "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+		// "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
+		// "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
+		// "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
+		// "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
+		"resolveJsonModule": true /* Enable importing .json files. */,
+		// "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
+		// "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+
+		/* JavaScript Support */
+		// "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+		// "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+		// "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+
+		/* Emit */
+		// "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+		// "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+		// "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+		// "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+		// "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+		// "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+		// "outDir": "./",                                   /* Specify an output folder for all emitted files. */
+		// "removeComments": true,                           /* Disable emitting comments. */
+		// "noEmit": true,                                   /* Disable emitting files from a compilation. */
+		// "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+		// "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
+		// "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+		// "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+		// "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+		// "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+		// "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+		// "newLine": "crlf",                                /* Set the newline character for emitting files. */
+		// "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+		// "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+		// "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+		// "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+		// "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+		// "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+
+		/* Interop Constraints */
+		// "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+		// "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
+		// "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+		"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+		// "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+		"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+
+		/* Type Checking */
+		"strict": true /* Enable all strict type-checking options. */,
+		// "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+		// "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+		// "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+		// "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+		// "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+		// "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+		// "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+		// "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+		// "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+		// "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+		// "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+		// "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+		// "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+		// "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+		// "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+		// "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+		// "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+		// "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+
+		/* Completeness */
+		// "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+		"skipLibCheck": true /* Skip type checking all .d.ts files. */
+	}
+}

websocket/utils.ts

@@ -0,0 +1,48 @@
+export default {
+	// 生成随机数
+	randomNum({ min, max }: { min: number; max: number }, isFloat = false) {
+		if (isFloat) return (Math.random() * (max - min) + min).toFixed(2);
+		return Math.floor(Math.random() * (max - min + 1) + min);
+	},
+	getMinmax(type: '*' | '.' | '+' | '$') {
+		let min: number, max: number;
+		switch (type) {
+			case '*':
+				min = 30;
+				max = 150;
+				break;
+			case '.':
+				min = 60;
+				max = 200;
+				break;
+			case '+':
+				min = 20;
+				max = 70;
+				break;
+			case '$':
+				min = 1;
+				max = 100;
+				break;
+		}
+		return { min, max };
+	},
+	getRandom(value: string) {
+		value = value.replace(
+			'***',
+			'' + this.randomNum({ ...this.getMinmax('*') }),
+		);
+		value = value.replace(
+			'...',
+			'' + this.randomNum({ ...this.getMinmax('.') }),
+		);
+		value = value.replace(
+			'+++',
+			'' + this.randomNum({ ...this.getMinmax('+') }),
+		);
+		value = value.replace(
+			'$$$',
+			'' + this.randomNum({ ...this.getMinmax('$') }, true),
+		);
+		return value;
+	},
+};