update 风机信息

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

@@ -29,7 +29,8 @@
 }
 
 .middle-short {
-	background: url('../../../assets/middle-short.png') no-repeat;
+	/* background: url('../../../assets/middle-short.png') no-repeat; */
+	background: url('../../../assets/energy.png') no-repeat;
 	background-size: 100% 100%;
 	background-position: 0 0;
 }

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

@@ -0,0 +1,97 @@
+import GraphBase from '../../公共组件/GraphBase';
+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],
+];
+
+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/>',
+	],
+	oddRowBGC: '#042444',
+	evenRowBGC: '#042c4c',
+	columnWidth: [70, 96],
+	rowNum: 8,
+	// headerHeight: 40,
+	hoverPause: false,
+	// data: replaceStyle(data, 0.7),
+	data: attachStyle(data),
+};
+
+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) {
+	return (
+		<GraphBase icon="kiln" title="风机信息" size={['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/模块组件/窑炉内部/RightSide/index.jsx

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

src/pages/总览/index.jsx

@@ -5,6 +5,7 @@ import CenterTopData from '../../components/模块组件/总览/CenterTop';
 import { AnimatePresence, motion } from 'framer-motion';
 
 import KilnInnerLeft from '../../components/模块组件/窑炉内部/LeftSide';
+import KilnInnerRight from '../../components/模块组件/窑炉内部/RightSide';
 import FireCheckLeft from '../../components/模块组件/退火监测/LeftSide';
 import QualityCheckLeft from '../../components/模块组件/质检统计/LeftSide';
 
@@ -28,23 +29,6 @@ const KilnTotalRight = (props) => {
 	);
 };
 
-const KilnInnerRight = (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 FireCheckRight = (props) => {
 	return (
 		<motion.div