1

src/components/Common/NatGasFlow/index.jsx

@@ -1,11 +1,12 @@
 // 天然气流量
 import cls from "./index.module.css";
 import BottomBarItem from "../BottomItemBackground";
-
-import { Switch, Radio } from "antd";
+import triangle from "../../../assets/Icon/triangle.svg";
+import { Switch, Select, Radio } from "antd";
 import { useState } from "react";
 import GridList from "./gridList";
 import GasChart from "./gasChart";
+import dayjs from "dayjs";
 
 function GasII(props) {
   const [dataSource, setDataSource] = useState("gas-i"); // gas-i , gas-ii
@@ -19,20 +20,33 @@ function GasII(props) {
     }
   }
 
-  function handleSourceChange(e) {
-    if (e.target.value == "ii") {
-      // 天然气II
-      setDataSource("gas-ii");
-    } else if (e.target.value == "i") {
-      // 天然气 I
+  // function handleSourceChange(e) {
+  //   if (e.target.value == "ii") {
+  //     // 天然气II
+  //     setDataSource("gas-ii");
+  //   } else if (e.target.value == "i") {
+  //     // 天然气 I
+  //     setDataSource("gas-i");
+  //   }
+  // }
+
+  function handleDateChange(value) {
+    if (value == "天然气I") {
       setDataSource("gas-i");
+    } else {
+      setDataSource("gas-ii");
     }
   }
 
+  const desc =
+    dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+    " - " +
+    dayjs().subtract(1, "day").format("YYYY.MM.DD");
   return (
     <BottomBarItem
       icon="pause"
       title="天然气流量"
+      desc={desc}
       className={`${cls.gas} ${props.className}`}
       style={props.style}
     >
@@ -44,7 +58,32 @@ function GasII(props) {
           {!showChart && <span className={cls.switchLabel}>实时流量</span>}
         </div>
 
-        <Radio.Group
+        <Select
+          defaultValue={"天然气I"}
+          style={{ width: 90 }}
+          popupClassName="xc-date-selector-menu"
+          className={cls.radioGroup}
+          options={["天然气I", "天然气II"].map((item) => ({
+            label: item,
+            value: item,
+          }))}
+          suffixIcon={<img src={triangle} alt="#" />}
+          notFoundContent={
+            <span
+              style={{
+                color: "#fff",
+                fontSize: "14px",
+                lineHeight: 1,
+                paddingLeft: "12px",
+              }}
+            >
+              - 无 -
+            </span>
+          }
+          onChange={(value, option) => handleDateChange(value)}
+        />
+
+        {/* <Radio.Group
           defaultValue="i"
           buttonStyle="solid"
           className={cls.radioGroup}
@@ -56,7 +95,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/Common/NatGasFlow/index.module.css

@@ -70,7 +70,7 @@
 
 .radioGroup * {
 	border: none !important;
-	border-radius: 0 !important;
+	border-radius: 6px !important;
 }
 
 .radioGroup *:focus-within {