1

src/components/Common/Energy/EnergyCostChart/index.jsx

@@ -1,9 +1,11 @@
 import cls from "./index.module.css";
-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 { getOptions } from "../../../../utils/energeChartOption";
+import triangle from "../../../../assets/Icon/triangle.svg";
+import dayjs from "dayjs";
 
 const EnergyCostChart = (props) => {
   const elecTrend = useSelector((state) => state.energy.trend.elec);
@@ -21,6 +23,17 @@ const EnergyCostChart = (props) => {
     currentTrend ?? { week: [], month: [], year: [] }
   );
 
+  function handleDateChange(value) {
+    setPeriod(
+      {
+        日: "day",
+        周: "week",
+        月: "month",
+        年: "year",
+      }[value]
+    );
+  }
+
   return (
     <div className={cls.energyCostChart}>
       <div className={cls.titleBar}>
@@ -45,7 +58,7 @@ const EnergyCostChart = (props) => {
           </Radio.Button>
         </Radio.Group>
 
-        <Radio.Group
+        {/* <Radio.Group
           value={period}
           buttonStyle="solid"
           onChange={(v) => setPeriod(v.target.value)}
@@ -60,7 +73,31 @@ const EnergyCostChart = (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>
 
       <div className="flex-1" style={{ marginTop: "8px" }}>

src/components/Common/Energy/EnergyCostChart/index.module.css

@@ -16,6 +16,12 @@
 	letter-spacing: 1.2px;
 	color: #52fff8;
 }
+.graphBaseDesc {
+	margin: 0 12px;
+	line-height: 1;
+	color: #76fff9;
+	flex: 1;
+  }
   
 .energyCostChart .titleBar .legend {
 	display: flex;
@@ -67,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/SmokeHandle/SmokeTrendChart/index.jsx

@@ -3,9 +3,10 @@ import { randomInt } from "../../../../utils";
 import * as echarts from "echarts";
 import { Radio, Select } from "antd";
 import ReactECharts from "echarts-for-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import triangle from "../../../../assets/Icon/triangle.svg";
+import dayjs from "dayjs";
 
 const SmokeTrendChart = (props) => {
   const dayTrend = useSelector((state) => state.smoke?.dayTrend);
@@ -27,10 +28,63 @@ const SmokeTrendChart = (props) => {
 
   const options = getOptions(source, period, currentTrend);
 
+  const [desc, setDesc] = useState("");
+
+  useEffect(() => {
+    switch (period) {
+      case "day":
+        setDesc(
+          dayjs().subtract(1, "day").format("YYYY.MM.DD") +
+            " 7点 - " +
+            dayjs().format("YYYY.MM.DD") +
+            " 7点"
+        );
+        break;
+      case "month":
+        setDesc(
+          dayjs().subtract(1, "month").format("YYYY.MM.") +
+            "29 - " +
+            dayjs().format("YYYY.MM.") +
+            "28"
+        );
+        break;
+      case "week":
+        setDesc(
+          dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+            " - " +
+            dayjs().subtract(1, "day").format("YYYY.MM.DD")
+        );
+        break;
+      case "year":
+        setDesc(
+          dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
+            "29 - " +
+            dayjs().endOf("year").format("YYYY.MM.") +
+            "28"
+        );
+        break;
+    }
+  }, [period]);
+
   function handleDateChange(value) {
-    setPeriod({
+    setPeriod(
-      日: 'day', 周: 'week', 月: 'month', 年: 'year'
+      {
-    }[value])
+        日: "day",
+        周: "week",
+        月: "month",
+        年: "year",
+      }[value]
+    );
+  }
+  function handleSourceChange(value) {
+    setPeriod(
+      {
+        氧气: "O2_float",
+        氮氧化物: "NOX_float",
+        二氧化硫: "SO2_float",
+        颗粒物: "dust_float",
+      }[value]
+    );
   }
 
   return (
@@ -49,7 +103,7 @@ const SmokeTrendChart = (props) => {
       </div>
 
       <div className={`${cls.choiceBar} flex items-center justify-between`}>
-        <Radio.Group
+        {/* <Radio.Group
           value={source}
           onChange={(e) => setSource(e.target.value)}
           buttonStyle="solid"
@@ -67,7 +121,33 @@ const SmokeTrendChart = (props) => {
           <Radio.Button value="dust_float" className="radio-group__item">
             颗粒物
           </Radio.Button>
-        </Radio.Group>
+        </Radio.Group> */}
+        <Select
+          defaultValue={"氧气"}
+          style={{ width: 100 }}
+          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) => handleSourceChange(value)}
+        />
+
+        <div className={cls.graphBaseDesc}>{desc}</div>
 
         {/* <Radio.Group
           value={period}
@@ -94,7 +174,7 @@ const SmokeTrendChart = (props) => {
           style={{ width: 60 }}
           popupClassName="xc-date-selector-menu"
           className={cls.radioGroupShort}
-          options={["日", "周", "月", '年'].map((item) => ({
+          options={["日", "周", "月", "年"].map((item) => ({
             label: item,
             value: item,
           }))}

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

@@ -43,7 +43,7 @@
   padding-left: 16px;
 }
 .energyCostChart .titleBar .legend ul li::before {
-	content: '';
+  content: "";
   position: absolute;
   left: 2px;
   top: 2px;
@@ -93,3 +93,9 @@
 .radioGroup_button_wrapper.ant-radio-button-wrapper-checked {
   background: #02457e !important;
 }
+.graphBaseDesc {
+  margin: 0 12px;
+  line-height: 1;
+  color: #76fff9;
+  flex: 1;
+}