基本完成左侧边栏

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

@@ -0,0 +1,72 @@
+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'],
+];
+
+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: [90],
+	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">
+					<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/模块组件/质检统计/1

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

src/components/模块组件/质检统计/LeftSide/index.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Spec from '../../../公共组件/当前产线生产规格';
+import GoodRate 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' }}
+		>
+			<Spec style={{ width: '100%' }} />
+			<GoodRate style={{ flex: 1, marginTop: '24px', width: '100%' }} />
+		</motion.div>
+	);
+}

src/components/模块组件/质检统计/LeftSide/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

@@ -6,35 +6,10 @@ import { AnimatePresence, motion } from 'framer-motion';
 
 import KilnInnerLeft from '../../components/模块组件/窑炉内部/LeftSide';
 import FireCheckLeft from '../../components/模块组件/退火监测/LeftSide';
+import QualityCheckLeft from '../../components/模块组件/质检统计/LeftSide';
 
 import V3DBG from '../../assets/V3DBG.png';
 
-const KilnTotalLeft = (props) => {
-	return (
-		<motion.div
-			initial={{ opacity: 0, position: 'absolute' }}
-			animate={{ opacity: 1, position: 'relative' }}
-			exit={{ opacity: 0, position: 'relative' }}
-			transition={{ type: 'tween' }}
-		>
-			窑炉总览LEFT
-		</motion.div>
-	);
-};
-
-const QualityCheckLeft = (props) => {
-	return (
-		<motion.div
-			initial={{ opacity: 0, position: 'absolute' }}
-			animate={{ opacity: 1, position: 'relative' }}
-			exit={{ opacity: 0, position: 'relative' }}
-			transition={{ type: 'tween' }}
-		>
-			质检统计LEfT
-		</motion.div>
-	);
-};
-
 const KilnTotalRight = (props) => {
 	return (
 		<motion.div