update 流量部分

src/components/BottomBar/gasi/index.jsx

@@ -4,7 +4,9 @@ import BottomBarItem from '../BottomBarItem';
 function GasI(props) {
 	return (
 		<BottomBarItem icon="pause" title="助燃风流量" className={cls.gas}>
-			助燃风流量 - linechart - 当前流量 - 0 legends - 1 line
+			{/* 助燃风流量 - linechart - 当前流量 - 0 legends - 1 line */}
+			{/* 当前流量  */}
+			<div className={cls.currentFlow}>当前流量: 280m³</div>
 		</BottomBarItem>
 	);
 }

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

@@ -0,0 +1,51 @@
+.chart {
+	height: 100%;
+	/* background-color: #00ee33; */
+}
+
+.gas {
+	position: relative;
+}
+
+.currentFlow {
+    position: absolute;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 8px 22px;
+    border-radius: 2px;
+    letter-spacing: 2px;
+    box-shadow: inset 0 0 22px 0px hsla(0, 0%, 100%, 0.15);
+    line-height: 18px;
+    font-size: 18px;
+    text-align: center;
+    color: #12FFF5;
+}
+
+.headWidget {
+	position: absolute;
+	/* background: #00ee33; */
+	top: 20px;
+	right: 24px;
+	height: 32px;
+	width: 190px;
+    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;
+}

src/components/BottomBar/gasii/index.jsx

@@ -1,10 +1,31 @@
 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';
 
 function GasII(props) {
 	return (
 		<BottomBarItem icon="pause" title="天然气流量" className={cls.gas}>
-			天然气流量 - linechart - 当前流量 - 2 legends - 2 lines
+			{/* 当前流量  */}
+			<div className={cls.currentFlow}>当前流量: 280m³</div>
+
+			{/* legend */}
+			<div className={cls.headWidget}>
+				<div className={cls.legend}>
+					<span className={cls.gasIcon}></span>
+					<span>天然气I</span>
+				</div>
+				<div className={cls.legend}>
+					<span className={cls.gas2Icon}></span>
+					<span>天然气II</span>
+				</div>
+			</div>
+
+			<div className={cls.chart}>
+				{/* <ReactECharts option={options} style={{ height: '100%' }} /> */}
+			</div>
 		</BottomBarItem>
 	);
 }

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

@@ -0,0 +1,79 @@
+.chart {
+	height: 100%;
+	/* background-color: #00ee33; */
+}
+
+.gas {
+	position: relative;
+}
+
+.currentFlow {
+	position: absolute;
+	top: 20px;
+	left: 50%;
+	transform: translateX(-50%);
+	padding: 8px 22px;
+	border-radius: 2px;
+	letter-spacing: 2px;
+	box-shadow: inset 0 0 22px 0px hsla(0, 0%, 100%, 0.15);
+	line-height: 18px;
+	font-size: 18px;
+	text-align: center;
+	color: #12fff5;
+}
+
+.headWidget {
+	position: absolute;
+	/* background: #00ee33; */
+	top: 20px;
+	right: 24px;
+	height: 32px;
+	width: 190px;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+}
+
+.legend:last-child {
+	margin-left: 8px;
+}
+
+.legend > span {
+	display: inline-block;
+	color: #dff1fe;
+	font-size: 14px;
+    letter-spacing: 2px;
+}
+
+.legend > span:first-child {
+	width: 12px;
+	height: 12px;
+	margin-right: 4px;
+	border-radius: 2px;
+}
+
+.gasIcon {
+	background: #12fff5;
+}
+
+.gas2Icon {
+	background: #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;
+}

src/components/BottomBar/index.jsx

@@ -28,8 +28,8 @@ export default function index() {
 			<div className={`${cls.bottomBar} flex justify-between`}>
 				<FaultTotal />
 				<FaultType />
-				<GasI />
 				<GasII />
+				<GasI />
 			</div>
 		</>
 	);