From d6f9744dedf96cc15a71bad88cd8d0b052a02fd9 Mon Sep 17 00:00:00 2001
From: lb <lb@znjszx.com>
Date: Wed, 24 Jan 2024 17:01:29 +0800
Subject: [PATCH] 1

---
 .../Common/Energy/EnergyCostChart/index.jsx   |  43 +++++++-
 .../Energy/EnergyCostChart/index.module.css   |  12 +-
 .../SmokeHandle/SmokeTrendChart/index.jsx     |  96 ++++++++++++++--
 .../SmokeTrendChart/index.module.css          | 104 +++++++++---------
 4 files changed, 194 insertions(+), 61 deletions(-)

diff --git a/src/components/Common/Energy/EnergyCostChart/index.jsx b/src/components/Common/Energy/EnergyCostChart/index.jsx
index 3489aed..f9f7945 100644
--- a/src/components/Common/Energy/EnergyCostChart/index.jsx
+++ b/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" }}>
diff --git a/src/components/Common/Energy/EnergyCostChart/index.module.css b/src/components/Common/Energy/EnergyCostChart/index.module.css
index bfb21cc..7b615e4 100644
--- a/src/components/Common/Energy/EnergyCostChart/index.module.css
+++ b/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;
 }
diff --git a/src/components/Common/SmokeHandle/SmokeTrendChart/index.jsx b/src/components/Common/SmokeHandle/SmokeTrendChart/index.jsx
index 465cdf9..7ef118b 100644
--- a/src/components/Common/SmokeHandle/SmokeTrendChart/index.jsx
+++ b/src/components/Common/SmokeHandle/SmokeTrendChart/index.jsx
@@ -1,11 +1,12 @@
 import cls from "./index.module.css";
 import { randomInt } from "../../../../utils";
 import * as echarts from "echarts";
-import { Radio , Select } from "antd";
+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({
-      日: 'day', 周: 'week', 月: 'month', 年: 'year'
-    }[value])
+    setPeriod(
+      {
+        日: "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,
           }))}
diff --git a/src/components/Common/SmokeHandle/SmokeTrendChart/index.module.css b/src/components/Common/SmokeHandle/SmokeTrendChart/index.module.css
index 328e487..725c04a 100644
--- a/src/components/Common/SmokeHandle/SmokeTrendChart/index.module.css
+++ b/src/components/Common/SmokeHandle/SmokeTrendChart/index.module.css
@@ -1,95 +1,101 @@
 .energyCostChart {
-	height: 1px;
-	flex: 1;
-	padding-top: 8px;
+  height: 1px;
+  flex: 1;
+  padding-top: 8px;
 }
 .energyCostChart .titleBar {
-	width: 400px;
-	margin-bottom: 4px;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	color: white;
+  width: 400px;
+  margin-bottom: 4px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: white;
 }
 .energyCostChart .titleBar h2 {
-	margin: 0;
-	font-size: 18px;
-	line-height: 32px;
-	letter-spacing: 1.2px;
-	color: #52fff8;
+  margin: 0;
+  font-size: 18px;
+  line-height: 32px;
+  letter-spacing: 1.2px;
+  color: #52fff8;
 }
 
 .energyCostChart .titleBar .legend {
-	display: flex;
-	align-items: center;
+  display: flex;
+  align-items: center;
 }
 .energyCostChart .titleBar .legend * {
-	font-size: 14px;
-	line-height: 14px;
-	color: #dff1fe;
+  font-size: 14px;
+  line-height: 14px;
+  color: #dff1fe;
 }
 
 .energyCostChart .titleBar .legend ul {
-	display: flex;
-	margin: 0;
-	margin-left: 8px;
-	padding: 0;
-	list-style: none;
-	align-items: center;
+  display: flex;
+  margin: 0;
+  margin-left: 8px;
+  padding: 0;
+  list-style: none;
+  align-items: center;
 }
 .energyCostChart .titleBar .legend ul li {
-	position: relative;
-	margin: 4px;
-	padding-left: 16px;
+  position: relative;
+  margin: 4px;
+  padding-left: 16px;
 }
 .energyCostChart .titleBar .legend ul li::before {
-	content: '';
-	position: absolute;
-	left: 2px;
-	top: 2px;
-	display: inline-block;
-	width: 12px;
-	height: 12px;
-	border-radius: 2px;
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
 }
 
 .energyCostChart .titleBar .legend ul li:first-child::before {
-	background-color: #ffd160;
+  background-color: #ffd160;
 }
 
 .energyCostChart .titleBar .legend ul li:nth-child(2)::before {
-	background-color: #12fff5;
+  background-color: #12fff5;
 }
 
 .energyCostChart .titleBar .legend ul li:nth-child(3)::before {
-	background-color: #2760ff;
+  background-color: #2760ff;
 }
 
 .choiceBar {
-	margin: 4px 0;
+  margin: 4px 0;
 }
 
 .radioGroup * {
-	border: none !important;
-	border-radius: 0 !important;
+  border: none !important;
+  border-radius: 0 !important;
 }
 .radioGroupShort * {
-	border: none !important;
-	border-radius: 6px !important;
+  border: none !important;
+  border-radius: 6px !important;
 }
 .radioGroup *:focus-within {
-	box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 .radioGroup *::before {
-	width: 0 !important;
+  width: 0 !important;
 }
 
 .radioGroup_button_wrapper {
-	color: #fff !important;
-	background: #03233c !important;
+  color: #fff !important;
+  background: #03233c !important;
 }
 
 .radioGroup_button_wrapper.ant-radio-button-wrapper-checked {
-	background: #02457e !important;
+  background: #02457e !important;
+}
+.graphBaseDesc {
+  margin: 0 12px;
+  line-height: 1;
+  color: #76fff9;
+  flex: 1;
 }