1

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;
 }