update

src/components/Common/GasFlow/index.jsx

@@ -7,45 +7,59 @@ import { Switch } from "antd";
 import { useState, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
 
-// function mockData(type = "runtime") {
-//   const RUNTIME_DATA_LENGTH = 8;
-//   const MAX_HISTORY_DATA_LENGTH = 8;
-//   const WEEK = 7;
-
-//   switch (type) {
-//     case "runtime":
-//       return [
-//         ...Array.from(
-//           { length: RUNTIME_DATA_LENGTH },
-//           () => Math.floor(Math.random() * 100) + "m³/h"
-//         ),
-//       ];
-//     case "history":
-//       return {
-//         ...Array.from(
-//           { length: Math.floor(Math.random() * MAX_HISTORY_DATA_LENGTH) },
-//           (_, index) => ({
-//             ["GAS_" + index]: [
-//               ...Array.from({ length: WEEK }, () =>
-//                 Math.floor(Math.random() * 100)
-//               ),
-//             ],
-//           })
-//         ).reduce((arr, curr) => ({ ...arr, ...curr }), {}),
-//       };
-//     default:
-//       break;
-//   }
-// }
-
 /** 助燃风流量 */
 function GasI(props) {
   const [showChart, setShowChart] = useState(true);
   const runState = useSelector((state) => state.combustionAir.runtime);
   const hisState = useSelector((state) => state.combustionAir.history);
 
-  let dataList = [];
-  let seriesData = [];
+  let [options, dataList] = getOptions(showChart, hisState, runState);
+
+  function handleSwitchChange(val) {
+    if (val) {
+      setShowChart(true);
+    } else {
+      setShowChart(false);
+    }
+  }
+  return (
+    <BottomBarItem
+      icon="pause"
+      title="助燃风流量"
+      className={cls.gas}
+      style={props.style}
+    >
+      <div className={cls.headWidget}>
+        <div className="flex items-center">
+          <Switch size="small" defaultChecked onChange={handleSwitchChange} />
+          {showChart && <span className={cls.switchLabel}>历史详情</span>}
+          {!showChart && <span className={cls.switchLabel}>实时流量</span>}
+        </div>
+      </div>
+
+      <div className={cls.chart}>
+        {showChart && (
+          <ReactECharts option={options} style={{ height: "100%" }} />
+        )}
+        {!showChart && (
+          <div className={cls.gridList}>
+            {dataList.map((item) => (
+              <div key={item.id} className={cls.listItem}>
+                <span className={cls.item_label}>{item.name}</span>
+                <span className={cls.item_value}>{item.value}</span>
+                {/* {item.name}: {item.value} */}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </BottomBarItem>
+  );
+}
+
+export default GasI;
+
+function getOptions(showChart, hisState, runState) {
   const colors = [
     "#12FFF5",
     "#2760FF",
@@ -56,7 +70,10 @@ function GasI(props) {
     "#8cd26d",
     "#2aa1ff",
   ];
+  let seriesData = null;
+  let dataList = null;
   let options = null;
+
   if (showChart) {
     // keys() 结果不是按照顺序，需要 sort()
     seriesData =
@@ -167,44 +184,5 @@ function GasI(props) {
           ];
   }
 
-  function handleSwitchChange(val) {
-    if (val) {
-      setShowChart(true);
-    } else {
-      setShowChart(false);
-    }
-  }
-  return (
-    <BottomBarItem
-      icon="pause"
-      title="助燃风流量"
-      className={cls.gas}
-      style={props.style}
-    >
-      <div className={cls.headWidget}>
-        <div className="flex items-center">
-          <Switch size="small" defaultChecked onChange={handleSwitchChange} />
-          {showChart && <span className={cls.switchLabel}>历史详情</span>}
-          {!showChart && <span className={cls.switchLabel}>实时流量</span>}
-        </div>
-      </div>
-
-      <div className={cls.chart}>
-        {showChart && (
-          <ReactECharts option={options} style={{ height: "100%" }} />
-        )}
-        {!showChart && (
-          <div className={cls.gridList}>
-            {dataList.map((item) => (
-              <div key={item.id} className={cls.listItem}>
-                {item.name}: {item.value}
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </BottomBarItem>
-  );
+  return [options, dataList];
 }
-
-export default GasI;

src/components/Common/GasFlow/index.module.css

@@ -26,9 +26,10 @@
 	position: absolute;
 	/* background: #00ee33; */
 	top: 20px;
+	left: 180px;
 	right: 24px;
 	height: 32px;
-	width: 190px;
+	width: 128px;
 	text-align: right;
 }
 
@@ -62,7 +63,21 @@
 	padding: 12px 0;
 	text-align: center;
 	color: #fff;
-	box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197);
+	box-shadow: inset 0 0 12px 2px rgba(255, 255, 255, 0.197);
+
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.item_label {
+	flex: 5;
+	text-align: right;
+}
+
+.item_value {
+	flex: 4;
+	text-align: left;
 }
 
 .headWidget {