add SpecPL

src/components/BottomBar/SpecPL/index.jsx

@@ -1,126 +1,45 @@
-import cls from './index.module.css';
-import BottomBarItem from '../BottomBarItem';
-import { Switch, Radio } from 'antd';
-import ReactECharts from 'echarts-for-react';
-import * as echarts from 'echarts';
-import { randomInt } from '../../../utils';
 import { useState } from 'react';
+import cls from './index.module.less';
+import { ScrollBoard } from '@jiaminghi/data-view-react';
+import BottomBarItem from '../BottomBarItem';
 
-function FaultType(props) {
-	const options = {
-		colors: [
-			'#2760FF',
-			'#5B9BFF',
-			'#FFD160',
-			'#8167F6',
-			'#99D66C',
-			'#FF8A40',
-			'#12FFF5',
+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/>',
 		],
-		grid: {
-			left: 0,
-			top: 0,
-			bottom: 0,
-			right: 0,
-		},
-		legend: {
-			icon: 'circle',
-			top: 32,
-			right: 0,
-			bottom: 32,
-			width: 296,
-			height: 130,
-			itemGap: 30,
-			formatter: function (name) {
-				return `${name} {sub|${
-					options.series[0].data.find((o) => o.name == name).value
-				}}`;
-			},
-			textStyle: {
-				color: '#DFF1FE',
-				fontSize: 16,
-				rich: {
-					sub: {
-						color: '#fff9',
-						fontSize: 16,
-					},
-				},
-			},
-		},
-		series: [
-			{
-				type: 'pie',
-				center: ['26%', '54%'],
-				radius: ['55%', '75%'],
-				avoidLabelOverlap: false,
-				label: {
-					show: true,
-					formatter: '{d}%',
-					fontSize: 14,
-					color: 'inherit',
-				},
-				labelLine: {
-					length: 0,
-				},
-				// emphasis: {
-				// 	label: {
-				// 		show: true,
-				// 		fontSize: 40,
-				// 		fontWeight: 'bold',
-				// 	},
-				// },
-				// labelLine: {
-				// 	show: false,
-				// },
-				data: [
-					{ value: 1048, name: '缺陷1' },
-					{ value: 735, name: '缺陷2' },
-					{ value: 580, name: '缺陷3' },
-					{ value: 484, name: '缺陷4' },
-					{ value: 300, name: '缺陷5' },
-					{ value: 300, name: '缺陷6' },
-					{ value: 300, name: '缺陷8' },
-				],
-			},
+		// 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'],
 		],
-	};
-
-	const [lines, setLines] = useState([
-		{ id: 1, label: '产线1', value: 'l1' },
-		{ id: 2, label: '产线2', value: 'l2' },
-		{ id: 3, label: '产线3', value: 'l3' },
-		{ id: 4, label: '产线4', value: 'l4' },
-		{ id: 5, label: '产线5', value: 'l5' },
-	]);
+	});
 	return (
-		<BottomBarItem
-			icon="puzzle"
-			title="产线当日缺陷分类"
-			className={cls.faultType}
-		>
-			<div className={cls.headWidget}>
-				{/* 日周月年 */}
-				<Radio.Group
-					defaultValue="l1"
-					buttonStyle="solid"
-					className={cls.radioGroup}
-				>
-					{lines.map((l, index) => (
-						<Radio.Button
-							key={l.label}
-							value={l.value}
-							className={`radio-group__item ${cls['radio-group__item']}`}
-						>
-							{l.label}
-						</Radio.Button>
-					))}
-				</Radio.Group>
-			</div>
-			<div className={cls.chart}>
-				<ReactECharts option={options} style={{ height: '100%' }} />
+		<BottomBarItem icon="signal" title="当前产线生产规格" className={cls.spec}>
+			<div className={cls.todayTableData}>
+				<ScrollBoard
+					config={config}
+					className={cls.tableClass}
+					style={{ height: '100%' }}
+				/>
 			</div>
 		</BottomBarItem>
 	);
-}
+};
 
-export default FaultType;
+export default TodayTableData;

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

@@ -1,39 +0,0 @@
-.chart {
-	height: 100%;
-}
-
-.faultType {
-	position: relative;
-	height: 100%;
-}
-
-.headWidget {
-	position: absolute;
-	top: 28px;
-	right: 24px;
-	height: 32px;
-	width: 340px;
-	text-align: right;
-}
-
-.radioGroup * {
-	border: none !important;
-	border-radius: 0 !important;
-}
-
-.radioGroup *:focus-within {
-	box-shadow: none !important;
-}
-
-.radioGroup *::before {
-	width: 0 !important;
-}
-
-.radioGroup_button_wrapper {
-	color: #fff !important;
-	background: #03233c !important;
-}
-
-.radio-group__item {
-	padding: 0 8px;
-}

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

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

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 (