update 烟气

src/components/Container.jsx

@@ -5,6 +5,7 @@ import cls from './container.module.less';
 import IconStack from '../assets/Icon/icon-stack.png';
 import IconGood from '../assets/Icon/icon-good.png';
 import IconCharger from '../assets/Icon/icon-charge.png';
+import IconSmoke from '../assets/Icon/icon-taiji.png';
 
 const Container = (props) => {
 	let icon = useRef(null);
@@ -19,6 +20,9 @@ const Container = (props) => {
 		case 'charger':
 			icon.current = IconCharger;
 			break;
+		case 'smoke':
+			icon.current = IconSmoke;
+			break;
 	}
 
 	return (

src/components/RightBar/SmokeHandle/SmokeTrendChart/index.jsx

@@ -8,7 +8,7 @@ import ReactECharts from 'echarts-for-react';
 const SmokeTrendChart = (props) => {
 	const options = {
 		color: ['#FFD160', '#12FFF5', '#2760FF'],
-		grid: { top: 28, right: 12, bottom: 32, left: 48 },
+		grid: { top: 38, right: 12, bottom: 20, left: 48 },
 		xAxis: {
 			type: 'category',
 			data: Array(7)
@@ -34,6 +34,12 @@ const SmokeTrendChart = (props) => {
 			},
 		},
 		yAxis: {
+			name: '单位m³/h',
+			nameTextStyle: {
+				color: '#fff',
+				fontSize: 10,
+				align: 'right',
+			},
 			type: 'value',
 			axisLabel: {
 				color: '#fff',
@@ -72,6 +78,38 @@ const SmokeTrendChart = (props) => {
 				},
 				// smooth: true,
 			},
+			{
+				data: Array(7)
+					.fill(1)
+					.map((_) => {
+						return randomInt(60, 100);
+					}),
+				type: 'line',
+				areaStyle: {
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{ offset: 0, color: '#12FFF540' },
+						{ offset: 0.5, color: '#12FFF520' },
+						{ offset: 1, color: '#12FFF510' },
+					]),
+				},
+				// smooth: true,
+			},
+			{
+				data: Array(7)
+					.fill(1)
+					.map((_) => {
+						return randomInt(60, 100);
+					}),
+				type: 'line',
+				areaStyle: {
+					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{ offset: 0, color: '#2760FF40' },
+						{ offset: 0.5, color: '#2760FF20' },
+						{ offset: 1, color: '#2760FF10' },
+					]),
+				},
+				// smooth: true,
+			},
 		],
 		tooltip: {
 			trigger: 'axis',
@@ -98,7 +136,7 @@ const SmokeTrendChart = (props) => {
 				</div>
 			</div>
 
-			<div className={cls.choiceBar}>
+			<div className={`${cls.choiceBar} flex items-center justify-between`}>
 				<Radio.Group
 					defaultValue="oxygen"
 					buttonStyle="solid"

src/components/RightBar/SmokeHandle/SmokeTrendChart/index.module.css

@@ -1,11 +1,11 @@
 .energyCostChart {
-	margin-top: 12px;
 	height: 1px;
 	flex: 1;
 	padding-top: 8px;
-	background: #ae27276a;
 }
 .energyCostChart .titleBar {
+	width: 400px;
+	margin-bottom: 4px;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -65,6 +65,9 @@
 	background-color: #2760ff;
 }
 
+.choiceBar {
+}
+
 .radioGroup * {
 	border: none !important;
 	border-radius: 0 !important;

src/components/RightBar/SmokeHandle/index.jsx

@@ -5,17 +5,19 @@ import SmokeTrendChart from './SmokeTrendChart';
 
 function SmokeHandle(props) {
 	return (
-		<Container title="能耗" icon="charger" className={cls.energyCost}>
-			<div className={cls.info__item_groups}>
-				<div className={cls.info__item}>氧 气 含 量 : 72%</div>
-				<div className={cls.info__item}>一氧化氮排放浓度:59mg/m³</div>
-				<div className={cls.info__item}>二氧化硫排放浓度:59mg/m³</div>
-				<div className={cls.info__item}>二氧化氮排放浓度:59mg/m³</div>
+		<Container title="烟气处理" icon="smoke" className={cls.smokeHandle}>
+			<div className={`${cls.smokeHandle__content} flex flex-col`}>
+				<div className={cls.info__item_groups}>
+					<div className={cls.info__item}>氧 气 含 量 : 72%</div>
+					<div className={cls.info__item}>一氧化氮排放浓度:59mg/m³</div>
+					<div className={cls.info__item}>二氧化硫排放浓度:59mg/m³</div>
+					<div className={cls.info__item}>二氧化氮排放浓度:59mg/m³</div>
+				</div>
+
+				<TechSplitline />
+
+				<SmokeTrendChart />
 			</div>
-
-			<TechSplitline />
-
-			<SmokeTrendChart />
 		</Container>
 	);
 }

src/components/RightBar/SmokeHandle/index.module.less

@@ -1,9 +1,12 @@
-.energyCost {
-	background: #b730305c;
-}
+.smokeHandle {
+	// background: #b730305c;
+	background: url(../../../assets/smoke.png) no-repeat;
+	background-size: 100% 100%;
+	width: 626px;
 
-.cost__info {
-	margin-bottom: 12px;
+	.smokeHandle__content {
+		margin-top: 8px;
+	}
 }
 
 .info__item {
@@ -20,6 +23,7 @@
 }
 
 .info__item_groups {
+	margin-bottom: 12px;
 	margin-left: 8px;
 	display: grid;
 	grid-template-columns: 1fr 1fr;

src/components/RightBar/index.module.less

@@ -5,6 +5,5 @@
 	position: fixed;
 	top: 100px;
 	right: 600px;
-	background: #77777737;
 	z-index: 10000;
 }