update 退火检测

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

@@ -3,37 +3,31 @@ import './index.module.less';
 
 import { ScrollBoard } from '@jiaminghi/data-view-react';
 
-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],
-];
+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 header = ['序号', '风机名称', '故障情况'];
+// 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 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: 8,
-	// headerHeight: 40,
-	hoverPause: false,
-	// data: replaceStyle(data, 0.7),
-	data: attachStyle(data),
-};
+// let header = ['序号', '风机名称', '故障情况'];
 
 function attachStyle(data) {
 	return data.map((arr) => {
@@ -54,6 +48,26 @@ function attachStyle(data) {
 }
 
 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={['middle', 'short']}>
 			<div

src/components/模块组件/退火监测/RightSide/index.jsx

@@ -0,0 +1,25 @@
+import { motion } from 'framer-motion';
+import FanInfo from '../../../公共组件/风机信息';
+import cls from './index.module.less';
+
+export default function index() {
+	return (
+		<motion.div
+			style={{
+				width: '625px',
+				height: '966px',
+				// background: '#fff3',
+				display: 'flex',
+				flexDirection: 'column',
+			}}
+			initial={{ opacity: 0, position: 'absolute' }}
+			animate={{ opacity: 1, position: 'relative' }}
+			exit={{ opacity: 0, position: 'absolute' }}
+			transition={{ type: 'tween' }}
+		>
+			<div style={{ flex: 1 }}>
+				<FanInfo rows={24} />
+			</div>
+		</motion.div>
+	);
+}

src/components/模块组件/退火监测/RightSide/index.module.less

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

src/pages/总览/index.jsx

@@ -8,6 +8,7 @@ import KilnInnerLeft from '../../components/模块组件/窑炉内部/LeftSide';
 import KilnInnerRight from '../../components/模块组件/窑炉内部/RightSide';
 import FireCheckLeft from '../../components/模块组件/退火监测/LeftSide';
 import QualityCheckLeft from '../../components/模块组件/质检统计/LeftSide';
+import FireCheckRight from '../../components/模块组件/退火监测/RightSide';
 
 import V3DBG from '../../assets/V3DBG.png';
 
@@ -29,23 +30,6 @@ const KilnTotalRight = (props) => {
 	);
 };
 
-const FireCheckRight = (props) => {
-	return (
-		<motion.div
-			style={{
-				width: '625px',
-				height: '900px',
-				background: '#fff3',
-			}}
-			initial={{ opacity: 0, position: 'absolute' }}
-			animate={{ opacity: 1, position: 'relative' }}
-			exit={{ opacity: 0, position: 'absolute' }}
-			transition={{ type: 'tween' }}
-		>
-			退火监测 RIGHT
-		</motion.div>
-	);
-};
 const QualityCheckRight = (props) => {
 	return (
 		<motion.div