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,7 +16,13 @@
 	letter-spacing: 1.2px;
 	color: #52fff8;
 }
-
+.graphBaseDesc {
+	margin: 0 12px;
+	line-height: 1;
+	color: #76fff9;
+	flex: 1;
+  }
+  
 .energyCostChart .titleBar .legend {
 	display: flex;
 	align-items: center;
@@ -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;
 }