add SmokeHandle

src/components/RightBar/EnergyCost/index.jsx

@@ -1,13 +1,13 @@
 import cls from './index.module.less';
 import Container from '../../Container';
-import TechSplitline from './TechSplitline';
+import TechSplitline from '../TechSplitline';
 import EnergyCostChart from './EnergyCostChart';
 
 function EnergyCost(props) {
 	return (
 		<Container title="能耗" icon="charger" className={cls.energyCost}>
 			<div className={`${cls.cost__info} flex`}>
-				<div className={`${cls.info__item} flex flex-col align-center`}>
+				<div className={`${cls.info__item} flex flex-col items-center`}>
 					<span>余 热 发 电</span>
 					<span>922kwh</span>
 				</div>
@@ -25,3 +25,5 @@ function EnergyCost(props) {
 		</Container>
 	);
 }
+
+export default EnergyCost;

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

@@ -0,0 +1,140 @@
+import cls from './index.module.less';
+
+const SmokeTrendChart = (props) => {
+	const options = {
+		color: ['#FFD160', '#12FFF5', '#2760FF'],
+		grid: { top: 28, right: 12, bottom: 32, left: 48 },
+		xAxis: {
+			type: 'category',
+			data: Array(7)
+				.fill(1)
+				.map((_, index) => {
+					const today = new Date();
+					const dtimestamp = today - index * 24 * 60 * 60 * 1000;
+					return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+						dtimestamp,
+					).getDate()}`;
+				})
+				.reverse(),
+			axisLabel: {
+				color: '#fff',
+				fontSize: 12,
+			},
+			axisTick: { show: false },
+			axisLine: {
+				lineStyle: {
+					width: 1,
+					color: '#213259',
+				},
+			},
+		},
+		yAxis: {
+			type: 'value',
+			axisLabel: {
+				color: '#fff',
+				fontSize: 12,
+				formatter: '{value} %',
+			},
+			axisLine: {
+				show: true,
+				lineStyle: {
+					color: '#213259',
+				},
+			},
+			splitLine: {
+				lineStyle: {
+					color: '#213259a0',
+				},
+			},
+			interval: 10,
+			min: 0,
+			max: 100,
+		},
+		series: [
+			{
+				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: '#FFD16040' },
+						{ offset: 0.5, color: '#FFD16020' },
+						{ offset: 1, color: '#FFD16010' },
+					]),
+				},
+				// smooth: true,
+			},
+		],
+		tooltip: {
+			trigger: 'axis',
+		},
+	};
+
+	function handleSwitchChange(val) {
+		// val: boolean
+		console.log('switch change', val);
+	}
+
+	return (
+		<div className={cls.energyCostChart}>
+			<div className={cls.titleBar}>
+				<h2>能耗趋势图</h2>
+				<Switch defaultChecked onChange={handleSwitchChange} />
+				<div className={cls.legend}>
+					<span className="legend__title">班次详情</span>
+					<ul className="legend__list">
+						<li>总量</li>
+						<li>白班</li>
+						<li>夜班</li>
+					</ul>
+				</div>
+			</div>
+
+			<div className={cls.choiceBar}>
+				<Radio.Group
+					defaultValue="oxygen"
+					buttonStyle="solid"
+					className={`${cls.radioGroup} flex items-center justify-between`}
+				>
+					<Radio.Button value="oxygen" className="radio-group__item">
+						氧气含量
+					</Radio.Button>
+					<Radio.Button value="so2" className="radio-group__item">
+						二氧化硫
+					</Radio.Button>
+					<Radio.Button value="no" className="radio-group__item">
+						一氧化氮
+					</Radio.Button>
+					<Radio.Button value="no2" className="radio-group__item">
+						二氧化氮
+					</Radio.Button>
+				</Radio.Group>
+
+				<Radio.Group
+					defaultValue="week"
+					buttonStyle="solid"
+					className={cls.radioGroup}
+				>
+					<Radio.Button value="day" className="radio-group__item">
+						日
+					</Radio.Button>
+					<Radio.Button value="week" className="radio-group__item">
+						周
+					</Radio.Button>
+					<Radio.Button value="month" className="radio-group__item">
+						月
+					</Radio.Button>
+					<Radio.Button value="year" className="radio-group__item">
+						年
+					</Radio.Button>
+				</Radio.Group>
+			</div>
+			<ReactECharts option={options} />
+		</div>
+	);
+};
+
+export default SmokeTrendChart;

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

@@ -0,0 +1,87 @@
+.EnergyCostChart {
+	margin-top: 12px;
+	height: 1px;
+	flex: 1;
+	padding-top: 8px;
+	background: #ae27276a;
+}
+.EnergyCostChart .titleBar {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	color: white;
+}
+.EnergyCostChart .titleBar h2 {
+	margin: 0;
+	font-size: 18px;
+	line-height: 32px;
+	letter-spacing: 1.2px;
+	color: #52fff8;
+}
+
+.EnergyCostChart .titleBar .legend {
+	display: flex;
+	align-items: center;
+}
+.EnergyCostChart .titleBar .legend * {
+	font-size: 14px;
+	line-height: 14px;
+	color: #dff1fe;
+}
+
+.EnergyCostChart .titleBar .legend ul {
+	display: flex;
+	margin: 0;
+	margin-left: 8px;
+	padding: 0;
+	list-style: none;
+	align-items: center;
+}
+.EnergyCostChart .titleBar .legend ul li {
+	position: relative;
+	margin: 4px;
+	padding-left: 16px;
+}
+.EnergyCostChart .titleBar .legend ul li::before {
+	content: '';
+	position: absolute;
+	left: 2px;
+	top: 2px;
+	display: inline-block;
+	width: 12px;
+	height: 12px;
+	border-radius: 2px;
+}
+
+.EnergyCostChart .titleBar .legend ul li:first-child::before {
+	background-color: #ffd160;
+}
+
+.EnergyCostChart .titleBar .legend ul li:nth-child(2)::before {
+	background-color: #12fff5;
+}
+
+.EnergyCostChart .titleBar .legend ul li:nth-child(3)::before {
+	background-color: #2760ff;
+}
+
+.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;
+}
+
+.radioGroup_button_wrapper.ant-radio-button-wrapper-checked {
+	background: #02457e !important;
+}

src/components/RightBar/SmokeHandle/index.jsx

@@ -0,0 +1,23 @@
+import cls from './index.module.less';
+import Container from '../../Container';
+import TechSplitline from '../TechSplitline';
+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>
+			</div>
+
+			<TechSplitline />
+
+			<SmokeTrendChart />
+		</Container>
+	);
+}
+
+export default SmokeHandle;

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

@@ -0,0 +1,27 @@
+.energyCost {
+	background: #b730305c;
+}
+
+.cost__info {
+	margin-bottom: 12px;
+}
+
+.info__item {
+	border-radius: 2px;
+	color: hsl(0, 0%, 100%, 0.9);
+	box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
+	// width: 288px;
+	height: 43px;
+	font-size: 20px;
+	letter-spacing: 1.43px;
+	line-height: 40px;
+	text-align: center;
+	user-select: none;
+}
+
+.info__item_groups {
+	margin-left: 8px;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 8px;
+}

src/pages/global.less

@@ -1,31 +1,35 @@
 .flex {
-  display: flex;
+	display: flex;
 }
 
 .flex-col {
-  flex-direction: column;
+	flex-direction: column;
 }
 
 .justify-between {
-  justify-content: space-between;
+	justify-content: space-between;
 }
 
 .justify-start {
-  justify-content: start;
+	justify-content: start;
 }
 
 .justify-start {
-  justify-content: center;
+	justify-content: center;
+}
+
+.items-center {
+	align-items: center;
 }
 
 .w-full {
-  width: 100%;
+	width: 100%;
 }
 
 .h-full {
-  height: 100%;
+	height: 100%;
 }
 
 .h-half {
-  height: 50%;
-}
+	height: 50%;
+}