add spec product line

src/components/BottomBar/SpecPL/index.jsx

@@ -0,0 +1,126 @@
+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';
+
+function FaultType(props) {
+	const options = {
+		colors: [
+			'#2760FF',
+			'#5B9BFF',
+			'#FFD160',
+			'#8167F6',
+			'#99D66C',
+			'#FF8A40',
+			'#12FFF5',
+		],
+		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' },
+				],
+			},
+		],
+	};
+
+	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%' }} />
+			</div>
+		</BottomBarItem>
+	);
+}
+
+export default FaultType;

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

@@ -0,0 +1,39 @@
+.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/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/index.jsx

@@ -19,16 +19,16 @@ function GasII(props) {
 		}
 	}
 
-	function handleSourceChange(e) {
-		console.log('val', e.target.value);
-		if (e.target.value == 'ii') {
-			// 天然气II
-			setDataSource('gas-ii');
-		} else if (e.target.value == 'i') {
-			// 天然气 I
-			setDataSource('gas-i');
-		}
-	}
+	// function handleSourceChange(e) {
+	// 	console.log('val', e.target.value);
+	// 	if (e.target.value == 'ii') {
+	// 		// 天然气II
+	// 		setDataSource('gas-ii');
+	// 	} else if (e.target.value == 'i') {
+	// 		// 天然气 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/yx-dark/MainContainer.jsx

@@ -5,6 +5,9 @@ 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';
 
 export default (props) => {
 	return (
@@ -17,9 +20,15 @@ export default (props) => {
 			<Bottom title="产线当日缺陷分类" className="bottom-2">
 				<FaultType />
 			</Bottom>
-			<Bottom title="天然气流量" className="bottom-3"></Bottom>
-			<Bottom title="助燃风流量" className="bottom-4"></Bottom>
-			<Bottom title="当前产线生产风格" className="bottom-5"></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>
 	);