From 2fb3d05f8c9ba58d3b9a995567b197b252819c95 Mon Sep 17 00:00:00 2001
From: lb <lb@znjszx.com>
Date: Thu, 25 Jan 2024 10:31:51 +0800
Subject: [PATCH] 1

---
 .../Common/AnnealFanRunFrequence/index.jsx    |  1 +
 src/components/Common/Arrow/index.jsx         | 12 +++++
 src/components/Common/Arrow/index.module.css  | 25 ++++++++++
 src/components/Common/CurrentTemp/index.jsx   |  1 +
 .../Common/NatGasFlow/index.module.css        |  4 +-
 .../components/GoodRateChart/index.jsx        |  2 +-
 .../EnergyCostAnalysis/BadGas/index.jsx       | 34 +++++++++++---
 .../ElectricityCost/index.jsx                 | 32 +++++++++++--
 .../Modules/EnergyCostAnalysis/NO/index.jsx   | 45 ++++++++++++++++--
 .../Modules/EnergyCostAnalysis/NO2/index.jsx  | 46 +++++++++++++++++--
 .../EnergyCostAnalysis/NatGas/index.jsx       | 37 ++++++++++++---
 .../Modules/EnergyCostAnalysis/O/index.jsx    | 44 ++++++++++++++++--
 .../Modules/EnergyCostAnalysis/SO2/index.jsx  | 45 ++++++++++++++++--
 13 files changed, 288 insertions(+), 40 deletions(-)
 create mode 100644 src/components/Common/Arrow/index.jsx
 create mode 100644 src/components/Common/Arrow/index.module.css

diff --git a/src/components/Common/AnnealFanRunFrequence/index.jsx b/src/components/Common/AnnealFanRunFrequence/index.jsx
index ea0670a..1c9d8fa 100644
--- a/src/components/Common/AnnealFanRunFrequence/index.jsx
+++ b/src/components/Common/AnnealFanRunFrequence/index.jsx
@@ -171,6 +171,7 @@ function WindFrequence(props) {
       switchPosition={[null, 200]} // [top, left]
       onSwitch={handleSwitchChange}
       dateOptions={["Y61", "Y62", "Y63", "Y64", "Y65"]}
+      selectWidth={70}
       defaultSelect={currLine}
       onDateChange={handleLineChange}
     >
diff --git a/src/components/Common/Arrow/index.jsx b/src/components/Common/Arrow/index.jsx
new file mode 100644
index 0000000..563d35b
--- /dev/null
+++ b/src/components/Common/Arrow/index.jsx
@@ -0,0 +1,12 @@
+import cls from './index.module.css';
+
+const Arrow = ({direction, disabled, onClick}) => {
+    return (
+        <div className={cls["arrow"]}>
+            <div className={cls['arrow-top']}></div>
+            <div className={cls["arrow-bottom"]}></div>
+        </div>
+    )
+}
+
+export default Arrow;
\ No newline at end of file
diff --git a/src/components/Common/Arrow/index.module.css b/src/components/Common/Arrow/index.module.css
new file mode 100644
index 0000000..24251c7
--- /dev/null
+++ b/src/components/Common/Arrow/index.module.css
@@ -0,0 +1,25 @@
+.arrow {
+  width: 16px;
+  height: 48px;
+  background: #ccc;
+  position: relative;
+}
+
+.arrow-top {
+  background: #00f3ed;
+  width: 8px;
+  height: 24px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 12px;
+}
+.arrow-bottom {
+  background: #00f3ed;
+  width: 8px;
+  height: 24px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  border-radius: 12px;
+}
diff --git a/src/components/Common/CurrentTemp/index.jsx b/src/components/Common/CurrentTemp/index.jsx
index a25d0da..de53760 100644
--- a/src/components/Common/CurrentTemp/index.jsx
+++ b/src/components/Common/CurrentTemp/index.jsx
@@ -64,6 +64,7 @@ function WindFrequence(props) {
       icon="temp"
       title="当前温度"
       dateOptions={["Y61", "Y62", "Y63", "Y64", "Y65"]}
+      selectWidth={70}
       defaultSelect={dataSource}
       onDateChange={handleSourceChange}
       size={["middle", "long"]}
diff --git a/src/components/Common/NatGasFlow/index.module.css b/src/components/Common/NatGasFlow/index.module.css
index 68ef262..6eaebda 100644
--- a/src/components/Common/NatGasFlow/index.module.css
+++ b/src/components/Common/NatGasFlow/index.module.css
@@ -24,9 +24,9 @@
 .headWidget {
 	position: absolute;
 	top: 22px;
-	right: 24px;
+	left: 178px;
 	height: 32px;
-	width: 400px;
+	width: calc(100% - 200px);
 	/* background: #12fff5; */
 	display: flex;
 	align-items: center;
diff --git a/src/components/Common/TodayGood/components/GoodRateChart/index.jsx b/src/components/Common/TodayGood/components/GoodRateChart/index.jsx
index 8581b44..57c012e 100644
--- a/src/components/Common/TodayGood/components/GoodRateChart/index.jsx
+++ b/src/components/Common/TodayGood/components/GoodRateChart/index.jsx
@@ -172,7 +172,7 @@ function getOptions(dataList, showMore, dateType) {
   if (list.length === 0 || list.filter((item) => item.sum).length == 0)
     return null;
   const color = ["#FFD160", "#12FFF5", "#2760FF"];
-  const grid = { top: 28, right: 12, bottom: 48, left: 48 };
+  const grid = { top: 28, right: 12, bottom: showMore ? 72 : 64, left: 48 };
   const xAxis = {
     type: "category",
     data: list.map((item) =>
diff --git a/src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx b/src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx
index e61f21c..defdb77 100644
--- a/src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/BadGas/index.jsx
@@ -5,11 +5,16 @@ import { useSelector } from "react-redux";
 import { useState } from "react";
 import * as echarts from "echarts";
 import { lunarYear } from "../../../../utils/energeChartOption";
+import dayjs from "dayjs";
 
 function Gas(props) {
   const elecTrend = useSelector((state) => state.energy.trend.natGas2);
   const [period, setPeriod] = useState("周");
-
+  const [timestr, setTimestr] = useState(
+    dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+      " - " +
+      dayjs().subtract(1, "day").format("YYYY.MM.DD")
+  );
   const options = getOptions(
     { 周: "week", 月: "month", 年: "year" }[period],
     elecTrend ?? { week: [], month: [], year: [] }
@@ -19,16 +24,33 @@ function Gas(props) {
     // console.log('switched ', v);
   }
 
-  function handleDateChange(v) {
-    // console.log('date ', v);
-    setPeriod(v);
-  }
 
+  function handleDateChange(value) {
+    setPeriod(value);
+    setTimestr(
+      {
+        年:
+          dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
+          "29 - " +
+          dayjs().endOf("year").format("YYYY.MM.") +
+          "28",
+        周:
+          dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+          " - " +
+          dayjs().subtract(1, "day").format("YYYY.MM.DD"),
+        月:
+          dayjs().subtract(1, "month").format("YYYY.MM.") +
+          "29 - " +
+          dayjs().format("YYYY.MM.") +
+          "28",
+      }[value]
+    );
+  }
   return (
     <GraphBase
       icon="battery"
       title="天然气II"
-      desc="能耗趋势图"
+      desc={`能耗趋势图  ${timestr}`}
       switchOptions={false}
       onSwitch={handleSwitch}
       defaultSelect={period}
diff --git a/src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx b/src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx
index 1bacf6c..6760591 100644
--- a/src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx
@@ -4,11 +4,16 @@ import ReactECharts from "echarts-for-react";
 import { useSelector } from "react-redux";
 import { useState } from "react";
 import * as echarts from "echarts";
+import dayjs from "dayjs";
 
 function ElecCost(props) {
   const elecTrend = useSelector((state) => state.energy.trend.elec);
   const [period, setPeriod] = useState("周");
-
+  const [timestr, setTimestr] = useState(
+    dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+      " - " +
+      dayjs().subtract(1, "day").format("YYYY.MM.DD")
+  );
   const options = getOptions(
     { 周: "week", 月: "month", 年: "year" }[period],
     elecTrend ?? { week: [], month: [], year: [] }
@@ -18,15 +23,32 @@ function ElecCost(props) {
     // console.log('switched ', v);
   }
 
-  function handleDateChange(v) {
-    setPeriod(v);
+  function handleDateChange(value) {
+    setPeriod(value);
+    setTimestr(
+      {
+        年:
+          dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
+          "29 - " +
+          dayjs().endOf("year").format("YYYY.MM.") +
+          "28",
+        周:
+          dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+          " - " +
+          dayjs().subtract(1, "day").format("YYYY.MM.DD"),
+        月:
+          dayjs().subtract(1, "month").format("YYYY.MM.") +
+          "29 - " +
+          dayjs().format("YYYY.MM.") +
+          "28",
+      }[value]
+    );
   }
-
   return (
     <GraphBase
       icon="battery"
       title="电耗能"
-      desc="能耗趋势图"
+      desc={`能耗趋势图  ${timestr}`}
       switchOptions={false}
       onSwitch={handleSwitch}
       defaultSelect={period}
diff --git a/src/components/Modules/EnergyCostAnalysis/NO/index.jsx b/src/components/Modules/EnergyCostAnalysis/NO/index.jsx
index b1a6f04..49ef742 100644
--- a/src/components/Modules/EnergyCostAnalysis/NO/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/NO/index.jsx
@@ -4,6 +4,7 @@ import ReactECharts from "echarts-for-react";
 import { useSelector } from "react-redux";
 import { useState } from "react";
 import * as echarts from "echarts";
+import dayjs from "dayjs";
 
 function NO(props) {
   const dayTrend = useSelector((state) => state.smoke?.dayTrend);
@@ -11,6 +12,11 @@ function NO(props) {
   const monthTrend = useSelector((state) => state.smoke?.monthTrend);
   const yearTrend = useSelector((state) => state.smoke?.yearTrend);
   const [period, setPeriod] = useState("日");
+  const [timestr, setTimestr] = useState(
+    dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+      " - " +
+      dayjs().subtract(1, "day").format("YYYY.MM.DD")
+  );
 
   const currentTrend =
     period === "日"
@@ -27,16 +33,45 @@ function NO(props) {
     // console.log('switched ', v);
   }
 
-  function handleDateChange(v) {
-    setPeriod(v);
-    // console.log('date ', v);
-  }
 
+  function handleDateChange(value) {
+    setPeriod(
+      {
+        日: "day",
+        周: "week",
+        月: "month",
+        年: "year",
+      }[value]
+    );
+    setTimestr(
+      {
+        日:
+          dayjs().subtract(1, "day").format("YYYY.MM.DD") +
+          " 7点 - " +
+          dayjs().format("YYYY.MM.DD") +
+          " 7点",
+        年:
+          dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
+          "29 - " +
+          dayjs().endOf("year").format("YYYY.MM.") +
+          "28",
+        周:
+          dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+          " - " +
+          dayjs().subtract(1, "day").format("YYYY.MM.DD"),
+        月:
+          dayjs().subtract(1, "month").format("YYYY.MM.") +
+          "29 - " +
+          dayjs().format("YYYY.MM.") +
+          "28",
+      }[value]
+    );
+  }
   return (
     <GraphBase
       icon="smoke"
       title="氮氧化物"
-      desc="能耗趋势图"
+      desc={`能耗趋势图  ${timestr}`}
       switchOptions={false}
       defaultSelect={period}
       onSwitch={handleSwitch}
diff --git a/src/components/Modules/EnergyCostAnalysis/NO2/index.jsx b/src/components/Modules/EnergyCostAnalysis/NO2/index.jsx
index 3326eee..e9ba5a2 100644
--- a/src/components/Modules/EnergyCostAnalysis/NO2/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/NO2/index.jsx
@@ -4,6 +4,7 @@ import ReactECharts from "echarts-for-react";
 import { useSelector } from "react-redux";
 import { useState } from "react";
 import * as echarts from "echarts";
+import dayjs from "dayjs";
 
 function Dust(props) {
   const dayTrend = useSelector((state) => state.smoke?.dayTrend);
@@ -11,7 +12,11 @@ function Dust(props) {
   const monthTrend = useSelector((state) => state.smoke?.monthTrend);
   const yearTrend = useSelector((state) => state.smoke?.yearTrend);
   const [period, setPeriod] = useState("日");
-
+  const [timestr, setTimestr] = useState(
+    dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+      " - " +
+      dayjs().subtract(1, "day").format("YYYY.MM.DD")
+  );
   const currentTrend =
     period === "日"
       ? dayTrend
@@ -27,16 +32,47 @@ function Dust(props) {
     // console.log('switched ', v);
   }
 
-  function handleDateChange(v) {
-    setPeriod(v);
-    // console.log('date ', v);
+
+  function handleDateChange(value) {
+    setPeriod(
+      {
+        日: "day",
+        周: "week",
+        月: "month",
+        年: "year",
+      }[value]
+    );
+    setTimestr(
+      {
+        日:
+          dayjs().subtract(1, "day").format("YYYY.MM.DD") +
+          " 7点 - " +
+          dayjs().format("YYYY.MM.DD") +
+          " 7点",
+        年:
+          dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
+          "29 - " +
+          dayjs().endOf("year").format("YYYY.MM.") +
+          "28",
+        周:
+          dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+          " - " +
+          dayjs().subtract(1, "day").format("YYYY.MM.DD"),
+        月:
+          dayjs().subtract(1, "month").format("YYYY.MM.") +
+          "29 - " +
+          dayjs().format("YYYY.MM.") +
+          "28",
+      }[value]
+    );
   }
 
+
   return (
     <GraphBase
       icon="smoke"
       title="颗粒物"
-      desc="能耗趋势图"
+      desc={`能耗趋势图  ${timestr}`}
       switchOptions={false}
       defaultSelect={period}
       onSwitch={handleSwitch}
diff --git a/src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx b/src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx
index b929e45..59bf0f2 100644
--- a/src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/NatGas/index.jsx
@@ -5,10 +5,16 @@ import { useSelector } from "react-redux";
 import { useState } from "react";
 import * as echarts from "echarts";
 import { lunarYear } from "../../../../utils/energeChartOption";
+import dayjs from "dayjs";
 
 function NatGas(props) {
   const elecTrend = useSelector((state) => state.energy.trend.natGas1);
   const [period, setPeriod] = useState("周");
+  const [timestr, setTimestr] = useState(
+    dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+      " - " +
+      dayjs().subtract(1, "day").format("YYYY.MM.DD")
+  );
 
   const options = getOptions(
     { 周: "week", 月: "month", 年: "year" }[period],
@@ -19,16 +25,33 @@ function NatGas(props) {
     // console.log('switched ', v);
   }
 
-  function handleDateChange(v) {
-    setPeriod(v);
-    // console.log('date ', v);
+  function handleDateChange(value) {
+    setPeriod(value);
+    setTimestr(
+      {
+        年:
+          dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
+          "29 - " +
+          dayjs().endOf("year").format("YYYY.MM.") +
+          "28",
+        周:
+          dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+          " - " +
+          dayjs().subtract(1, "day").format("YYYY.MM.DD"),
+        月:
+          dayjs().subtract(1, "month").format("YYYY.MM.") +
+          "29 - " +
+          dayjs().format("YYYY.MM.") +
+          "28",
+      }[value]
+    );
   }
 
   return (
     <GraphBase
       icon="battery"
       title="天然气I"
-      desc="能耗趋势图"
+      desc={`能耗趋势图  ${timestr}`}
       switchOptions={false}
       onSwitch={handleSwitch}
       defaultSelect={period}
@@ -114,7 +137,7 @@ function getOptions(period, trend) {
         .fill(1)
         .map((_, index) => {
           if (period == "week") {
-            const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
+            const dtimestamp = today - (index + 1) * 24 * 60 * 60 * 1000;
             return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
               dtimestamp
             ).getDate()}`;
@@ -163,7 +186,9 @@ function getOptions(period, trend) {
       },
     },
     series: {
-      data: trend[period].map(item => item != null ? (+item).toFixed(2) : null),
+      data: trend[period].map((item) =>
+        item != null ? (+item).toFixed(2) : null
+      ),
       type: "line",
       symbol: "circle",
       symbolSize: 6,
diff --git a/src/components/Modules/EnergyCostAnalysis/O/index.jsx b/src/components/Modules/EnergyCostAnalysis/O/index.jsx
index 3a48ca4..be89ec7 100644
--- a/src/components/Modules/EnergyCostAnalysis/O/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/O/index.jsx
@@ -4,6 +4,7 @@ import ReactECharts from "echarts-for-react";
 import { useSelector } from "react-redux";
 import { useState } from "react";
 import * as echarts from "echarts";
+import dayjs from "dayjs";
 
 function Oxygen(props) {
   const dayTrend = useSelector((state) => state.smoke?.dayTrend);
@@ -11,6 +12,11 @@ function Oxygen(props) {
   const monthTrend = useSelector((state) => state.smoke?.monthTrend);
   const yearTrend = useSelector((state) => state.smoke?.yearTrend);
   const [period, setPeriod] = useState("日");
+  const [timestr, setTimestr] = useState(
+    dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+      " - " +
+      dayjs().subtract(1, "day").format("YYYY.MM.DD")
+  );
 
   const currentTrend =
     period === "日"
@@ -27,16 +33,44 @@ function Oxygen(props) {
     // console.log('switched ', v);
   }
 
-  function handleDateChange(v) {
-    setPeriod(v);
-    // console.log('date ', v);
+  function handleDateChange(value) {
+    setPeriod(
+      {
+        日: "day",
+        周: "week",
+        月: "month",
+        年: "year",
+      }[value]
+    );
+    setTimestr(
+      {
+        日:
+          dayjs().subtract(1, "day").format("YYYY.MM.DD") +
+          " 7点 - " +
+          dayjs().format("YYYY.MM.DD") +
+          " 7点",
+        年:
+          dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
+          "29 - " +
+          dayjs().endOf("year").format("YYYY.MM.") +
+          "28",
+        周:
+          dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+          " - " +
+          dayjs().subtract(1, "day").format("YYYY.MM.DD"),
+        月:
+          dayjs().subtract(1, "month").format("YYYY.MM.") +
+          "29 - " +
+          dayjs().format("YYYY.MM.") +
+          "28",
+      }[value]
+    );
   }
-
   return (
     <GraphBase
       icon="smoke"
       title="氧气含量"
-      desc="能耗趋势图"
+      desc={`能耗趋势图  ${timestr}`}
       switchOptions={false}
       defaultSelect={period}
       onSwitch={handleSwitch}
diff --git a/src/components/Modules/EnergyCostAnalysis/SO2/index.jsx b/src/components/Modules/EnergyCostAnalysis/SO2/index.jsx
index 37881b7..e66cf64 100644
--- a/src/components/Modules/EnergyCostAnalysis/SO2/index.jsx
+++ b/src/components/Modules/EnergyCostAnalysis/SO2/index.jsx
@@ -4,6 +4,7 @@ import ReactECharts from "echarts-for-react";
 import { useSelector } from "react-redux";
 import { useState } from "react";
 import * as echarts from "echarts";
+import dayjs from "dayjs";
 
 function SO2(props) {
   const dayTrend = useSelector((state) => state.smoke?.dayTrend);
@@ -20,22 +21,56 @@ function SO2(props) {
       : period === "月"
       ? monthTrend
       : yearTrend;
-
+  const [timestr, setTimestr] = useState(
+    dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+      " - " +
+      dayjs().subtract(1, "day").format("YYYY.MM.DD")
+  );
   const options = getOptions("SO2_float", period, currentTrend);
 
   function handleSwitch(v) {
     // console.log('switched ', v);
   }
 
-  function handleDateChange(v) {
-    setPeriod(v);
-    // console.log('date ', v);
+  function handleDateChange(value) {
+    setPeriod(
+      {
+        日: "day",
+        周: "week",
+        月: "month",
+        年: "year",
+      }[value]
+    );
+    setTimestr(
+      {
+        日:
+          dayjs().subtract(1, "day").format("YYYY.MM.DD") +
+          " 7点 - " +
+          dayjs().format("YYYY.MM.DD") +
+          " 7点",
+        年:
+          dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
+          "29 - " +
+          dayjs().endOf("year").format("YYYY.MM.") +
+          "28",
+        周:
+          dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+          " - " +
+          dayjs().subtract(1, "day").format("YYYY.MM.DD"),
+        月:
+          dayjs().subtract(1, "month").format("YYYY.MM.") +
+          "29 - " +
+          dayjs().format("YYYY.MM.") +
+          "28",
+      }[value]
+    );
   }
+
   return (
     <GraphBase
       icon="smoke"
       title="二氧化硫"
-      desc="能耗趋势图"
+      desc={`能耗趋势图  ${timestr}`}
       switchOptions={false}
       defaultSelect={period}
       onSwitch={handleSwitch}