1

src/components/Common/BottomItemBackground/index.jsx

@@ -6,7 +6,7 @@ function BottomBarItem(props) {
 		<Container
 			icon={props.icon}
 			title={props.title}
-			desc="hello world"
+			desc={props.desc}
 			className={`${cls.bottomBarItem} ${props.className}`}
 			style={props.style}
 		>

src/components/Common/GasFlow/index.jsx

@@ -6,6 +6,7 @@ import * as echarts from "echarts";
 import { Switch } from "antd";
 import { useState, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
+import dayjs from "dayjs";
 
 /** 助燃风流量 */
 function GasI(props) {
@@ -22,10 +23,17 @@ function GasI(props) {
       setShowChart(false);
     }
   }
+
+  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}
       style={props.style}
     >
@@ -39,10 +47,7 @@ function GasI(props) {
 
       <div className={cls.chart}>
         {showChart && (
-          <ReactECharts
+          <ReactECharts option={options} style={{ height: "100%" }} />
-            option={options}
-            style={{ height: "100%" }}
-          />
         )}
         {!showChart && (
           <div className={cls.gridList}>

src/components/Common/NatGasFlow/index.jsx

@@ -1,11 +1,12 @@
 // 天然气流量
 import cls from "./index.module.css";
 import BottomBarItem from "../BottomItemBackground";
-
+import triangle from "../../../assets/Icon/triangle.svg";
-import { Switch, Radio } from "antd";
+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) {
+  // function handleSourceChange(e) {
-    if (e.target.value == "ii") {
+  //   if (e.target.value == "ii") {
-      // 天然气II
+  //     // 天然气II
-      setDataSource("gas-ii");
+  //     setDataSource("gas-ii");
-    } else if (e.target.value == "i") {
+  //   } else if (e.target.value == "i") {
-      // 天然气 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 {

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

@@ -1,10 +1,11 @@
 import cls from "./index.module.css";
 import { randomInt } from "../../../../utils";
 import * as echarts from "echarts";
-import { Radio } from "antd";
+import { Radio , Select } from "antd";
 import ReactECharts from "echarts-for-react";
 import { useState } from "react";
 import { useSelector } from "react-redux";
+import triangle from "../../../../assets/Icon/triangle.svg";
 
 const SmokeTrendChart = (props) => {
   const dayTrend = useSelector((state) => state.smoke?.dayTrend);
@@ -26,6 +27,12 @@ const SmokeTrendChart = (props) => {
 
   const options = getOptions(source, period, currentTrend);
 
+  function handleDateChange(value) {
+    setPeriod({
+      日: 'day', 周: 'week', 月: 'month', 年: 'year'
+    }[value])
+  }
+
   return (
     <div className={cls.energyCostChart}>
       <div className={cls.titleBar}>
@@ -62,7 +69,7 @@ const SmokeTrendChart = (props) => {
           </Radio.Button>
         </Radio.Group>
 
-        <Radio.Group
+        {/* <Radio.Group
           value={period}
           onChange={(e) => setPeriod(e.target.value)}
           buttonStyle="solid"
@@ -80,7 +87,32 @@ const SmokeTrendChart = (props) => {
           <Radio.Button value="year" className="radio-group__item">
             年
           </Radio.Button>
-        </Radio.Group>
+        </Radio.Group> */}
+
+        <Select
+          defaultValue={"日"}
+          style={{ width: 60 }}
+          popupClassName="xc-date-selector-menu"
+          className={cls.radioGroupShort}
+          options={["日", "周", "月", '年'].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)}
+        />
       </div>
       {options && <ReactECharts option={options} style={{ height: "240px" }} />}
       {!options && (

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

@@ -73,6 +73,10 @@
 	border: none !important;
 	border-radius: 0 !important;
 }
+.radioGroupShort * {
+	border: none !important;
+	border-radius: 6px !important;
+}
 .radioGroup *:focus-within {
 	box-shadow: none !important;
 }

src/components/Common/TodayFaultTotal/index.jsx

@@ -39,7 +39,7 @@ function FaultTotal(props) {
       timeDesc = dayjs().subtract(1, 'day').format('YYYY.MM.DD') + " 7点 - " + dayjs().format('YYYY.MM.DD') + " 7点";
       break;
     case "周":
-      timeDesc = dayjs().subtract(8, 'day').format('YYYY.MM.DD') + " - " + dayjs().subtract(1, 'day').format('YYYY.MM.DD') ;
+      timeDesc = dayjs().subtract(7, 'day').format('YYYY.MM.DD') + " - " + dayjs().subtract(1, 'day').format('YYYY.MM.DD') ;
       break;
     case "月":
       timeDesc = dayjs().subtract(1, 'month').format('YYYY.MM.') + "29 - " + dayjs().format('YYYY.MM.') + '28' ;

src/components/Common/TodayGood/components/GoodRateChart/index.jsx

@@ -44,18 +44,18 @@ const GoodRateChart = (props) => {
       case "月":
         v = "month";
         setTimestr(
-          dayjs().subtract(8, "day").format("YYYY.MM.DD") +
+          dayjs().subtract(1, "month").format("YYYY.MM.") +
-            " - " +
+            "29 - " +
-            dayjs().subtract(1, "day").format("YYYY.MM.DD")
+            dayjs().format("YYYY.MM.") +
+            "28"
         );
         break;
       case "周":
         v = "week";
         setTimestr(
-          dayjs().subtract(1, "month").format("YYYY.MM.") +
+          dayjs().subtract(7, "day").format("YYYY.MM.DD") +
-            "29 - " +
+            " - " +
-            dayjs().format("YYYY.MM.") +
+            dayjs().subtract(1, "day").format("YYYY.MM.DD")
-            "28"
         );
         break;
       case "年":

src/components/container.module.scss

@@ -33,8 +33,9 @@
 
     .graphBaseDesc {
       margin: 0 6px;
-      margin-left: 110px;
+      margin-left: 108px;
       font-size: 16px;
+      line-height: 1;
       color: #76fff9;
       flex: 1;
     }