1

2024-01-24 15:58:16 +08:00
parent b7b2ad2ee5
commit 1ebda5cf6f
9 changed files with 109 additions and 28 deletions
--- a/src/components/Common/BottomItemBackground/index.jsx
+++ b/src/components/Common/BottomItemBackground/index.jsx
@@ -6,7 +6,7 @@ function BottomBarItem(props) {
 		<Container
 			icon={props.icon}
 			title={props.title}
-			desc="hello world"
+			desc={props.desc}
 			className={`${cls.bottomBarItem} ${props.className}`}
 			style={props.style}
 		>
--- a/src/components/Common/GasFlow/index.jsx
+++ b/src/components/Common/GasFlow/index.jsx
@@ -6,6 +6,7 @@ import * as echarts from "echarts";
 import { Switch } from "antd";
 import { useState, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
+import dayjs from "dayjs";

 /** 助燃风流量 */
 function GasI(props) {
@@ -22,10 +23,17 @@ function GasI(props) {
      setShowChart(false);
    }
  }
+
+  const desc =
+    dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+    " - " +
+    dayjs().subtract(1, "day").format("YYYY.MM.DD");
+
  return (
    <BottomBarItem
      icon="pause"
      title="助燃风流量"
+      desc={desc}
      className={cls.gas}
      style={props.style}
    >
@@ -39,10 +47,7 @@ function GasI(props) {

      <div className={cls.chart}>
        {showChart && (
-          <ReactECharts
-            option={options}
-            style={{ height: "100%" }}
-          />
+          <ReactECharts option={options} style={{ height: "100%" }} />
        )}
        {!showChart && (
          <div className={cls.gridList}>
--- a/src/components/Common/NatGasFlow/index.jsx
+++ b/src/components/Common/NatGasFlow/index.jsx
@@ -1,11 +1,12 @@
 // 天然气流量
 import cls from "./index.module.css";
 import BottomBarItem from "../BottomItemBackground";
-
-import { Switch, Radio } from "antd";
+import triangle from "../../../assets/Icon/triangle.svg";
+import { Switch, Select, Radio } from "antd";
 import { useState } from "react";
 import GridList from "./gridList";
 import GasChart from "./gasChart";
+import dayjs from "dayjs";

 function GasII(props) {
  const [dataSource, setDataSource] = useState("gas-i"); // gas-i , gas-ii
@@ -19,20 +20,33 @@ function GasII(props) {
    }
  }

-  function handleSourceChange(e) {
-    if (e.target.value == "ii") {
-      // 天然气II
-      setDataSource("gas-ii");
-    } else if (e.target.value == "i") {
-      // 天然气 I
+  // function handleSourceChange(e) {
+  //   if (e.target.value == "ii") {
+  //     // 天然气II
+  //     setDataSource("gas-ii");
+  //   } else if (e.target.value == "i") {
+  //     // 天然气 I
+  //     setDataSource("gas-i");
+  //   }
+  // }
+
+  function handleDateChange(value) {
+    if (value == "天然气I") {
      setDataSource("gas-i");
+    } else {
+      setDataSource("gas-ii");
    }
  }

+  const desc =
+    dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+    " - " +
+    dayjs().subtract(1, "day").format("YYYY.MM.DD");
  return (
    <BottomBarItem
      icon="pause"
      title="天然气流量"
+      desc={desc}
      className={`${cls.gas} ${props.className}`}
      style={props.style}
    >
@@ -44,7 +58,32 @@ function GasII(props) {
          {!showChart && <span className={cls.switchLabel}>实时流量</span>}
        </div>

-        <Radio.Group
+        <Select
+          defaultValue={"天然气I"}
+          style={{ width: 90 }}
+          popupClassName="xc-date-selector-menu"
+          className={cls.radioGroup}
+          options={["天然气I", "天然气II"].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)}
+        />
+
+        {/* <Radio.Group
          defaultValue="i"
          buttonStyle="solid"
          className={cls.radioGroup}
@@ -56,7 +95,7 @@ function GasII(props) {
          <Radio.Button value="ii" className="radio-group__item">
            天然气 II
          </Radio.Button>
-        </Radio.Group>
+        </Radio.Group> */}
      </div>

      <div className={cls.chart}>
--- a/src/components/Common/NatGasFlow/index.module.css
+++ b/src/components/Common/NatGasFlow/index.module.css
@@ -70,7 +70,7 @@

 .radioGroup * {
 	border: none !important;
-	border-radius: 0 !important;
+	border-radius: 6px !important;
 }

 .radioGroup *:focus-within {
--- a/src/components/Common/SmokeHandle/SmokeTrendChart/index.jsx
+++ b/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 && (
--- a/src/components/Common/SmokeHandle/SmokeTrendChart/index.module.css
+++ b/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;
 }
--- a/src/components/Common/TodayFaultTotal/index.jsx
+++ b/src/components/Common/TodayFaultTotal/index.jsx
@@ -39,7 +39,7 @@ function FaultTotal(props) {
      timeDesc = dayjs().subtract(1, 'day').format('YYYY.MM.DD') + " 7点 - " + dayjs().format('YYYY.MM.DD') + " 7点";
      break;
    case "周":
-      timeDesc = dayjs().subtract(8, 'day').format('YYYY.MM.DD') + " - " + dayjs().subtract(1, 'day').format('YYYY.MM.DD') ;
+      timeDesc = dayjs().subtract(7, 'day').format('YYYY.MM.DD') + " - " + dayjs().subtract(1, 'day').format('YYYY.MM.DD') ;
      break;
    case "月":
      timeDesc = dayjs().subtract(1, 'month').format('YYYY.MM.') + "29 - " + dayjs().format('YYYY.MM.') + '28' ;
--- a/src/components/Common/TodayGood/components/GoodRateChart/index.jsx
+++ b/src/components/Common/TodayGood/components/GoodRateChart/index.jsx
@@ -44,18 +44,18 @@ const GoodRateChart = (props) => {
      case "月":
        v = "month";
        setTimestr(
-          dayjs().subtract(8, "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"
        );
        break;
      case "周":
        v = "week";
        setTimestr(
-          dayjs().subtract(1, "month").format("YYYY.MM.") +
-            "29 - " +
-            dayjs().format("YYYY.MM.") +
-            "28"
+          dayjs().subtract(7, "day").format("YYYY.MM.DD") +
+            " - " +
+            dayjs().subtract(1, "day").format("YYYY.MM.DD")
        );
        break;
      case "年":
--- a/src/components/container.module.scss
+++ b/src/components/container.module.scss
@@ -33,8 +33,9 @@

    .graphBaseDesc {
      margin: 0 6px;
-      margin-left: 110px;
+      margin-left: 108px;
      font-size: 16px;
+      line-height: 1;
      color: #76fff9;
      flex: 1;
    }