update

2024-01-24 14:41:24 +08:00
parent 909bd92ee6
commit 446234c2aa
11 changed files with 466 additions and 147 deletions
--- a/src/components/Common/TodayGood/components/GoodRateChart/index.jsx
+++ b/src/components/Common/TodayGood/components/GoodRateChart/index.jsx
@@ -2,9 +2,13 @@ import cls from "./index.module.css";
 import "./overwrite.css"; // 覆写 antd 默认样式，全局
 import ReactECharts from "echarts-for-react";
 import * as echarts from "echarts";
-import { Switch, Radio } from "antd";
+import { Switch, Select, Radio } from "antd";
 import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
+import triangle from "../../../../../assets/Icon/triangle.svg";
+import dayjs from "dayjs";
+
+const dateOptions = { day: "日", week: "周", month: "月", year: "年" };

 const GoodRateChart = (props) => {
  // 是否展示班次数据
@@ -13,8 +17,8 @@ const GoodRateChart = (props) => {
  const [updateKey, setUpdateKey] = useState(Date.now());
  // 默认的日期类型
  const [dateType, setDateType] = useState("day");
+  const [defaultSelect, setDefaultSelect] = useState(dateOptions[dateType]);
  const cutting = useSelector((state) => state.cutting);
-
  useEffect(() => {
    setUpdateKey(Date.now());
  }, [showMore]);
@@ -24,9 +28,47 @@ const GoodRateChart = (props) => {
    setShowMore(val);
  }

-  function handleDateChange({ target }) {
+  const [timestr, setTimestr] = useState("");
+  function handleDateChange(value) {
    // e: Event
-    setDateType(target.value);
+    let v = "day";
+    switch (value) {
+      case "日":
+        setTimestr(
+          dayjs().subtract(1, "day").format("YYYY.MM.DD") +
+            " 7点 - " +
+            dayjs().format("YYYY.MM.DD") +
+            " 7点"
+        );
+        break;
+      case "月":
+        v = "month";
+        setTimestr(
+          dayjs().subtract(8, "day").format("YYYY.MM.DD") +
+            " - " +
+            dayjs().subtract(1, "day").format("YYYY.MM.DD")
+        );
+        break;
+      case "周":
+        v = "week";
+        setTimestr(
+          dayjs().subtract(1, "month").format("YYYY.MM.") +
+            "29 - " +
+            dayjs().format("YYYY.MM.") +
+            "28"
+        );
+        break;
+      case "年":
+        v = "year";
+        setTimestr(
+          dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
+            "29 - " +
+            dayjs().endOf("year").format("YYYY.MM.") +
+            "28"
+        );
+        break;
+    }
+    setDateType(v);
  }

  // 根据日期类型，数据列表，是否展示班次数据，生成对应的 options
@@ -49,7 +91,32 @@ const GoodRateChart = (props) => {
            )}
          </ul>
        </div>
-        <Radio.Group
+        <div className={cls.graphBaseDesc}>{timestr}</div>
+        <Select
+          defaultValue={defaultSelect}
+          style={{ width: 60 }}
+          popupClassName="xc-date-selector-menu"
+          className={cls.radioGroup}
+          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)}
+        />
+        {/* <Radio.Group
          defaultValue="day"
          buttonStyle="solid"
          onChange={handleDateChange}
@@ -68,7 +135,7 @@ const GoodRateChart = (props) => {
          <Radio.Button value="year" className="radio-group__item">
            年
          </Radio.Button>
-        </Radio.Group>
+        </Radio.Group> */}
      </div>
      {options && <ReactECharts key={updateKey} option={options} />}
      {!options && (
@@ -99,16 +166,6 @@ function getOptions(dataList, showMore, dateType) {
  );
  if (list.length === 0 || list.filter((item) => item.sum).length == 0)
    return null;
-  // data: Array(7)
-  //   .fill(1)
-  //   .map((_, index) => {
-  //     const today = new Date();
-  //     const dtimestamp = today - index * 24 * 60 * 60 * 1000;
-  //     return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
-  //       dtimestamp
-  //     ).getDate()}`;
-  //   })
-  //   .reverse(),
  const color = ["#FFD160", "#12FFF5", "#2760FF"];
  const grid = { top: 28, right: 12, bottom: 48, left: 48 };
  const xAxis = {
@@ -118,10 +175,6 @@ function getOptions(dataList, showMore, dateType) {
        ? item.dataTime.split("T")[1]
        : item.dataTime.split("T")[0]
    ),
-    // data: list.map((item) => {
-    //   console.log("datetime", item.dataTime);
-    //   return item.dataTime.split("T")[0];
-    // }),
    axisLabel: {
      color: "#fff",
      fontSize: 10,
@@ -170,7 +223,6 @@ function getOptions(dataList, showMore, dateType) {
          { offset: 1, color: "#12FFF510" },
        ]),
      },
-      // smooth: true,
    },
    {
      name: "夜班",
@@ -183,7 +235,6 @@ function getOptions(dataList, showMore, dateType) {
          { offset: 1, color: "#2760FF10" },
        ]),
      },
-      // smooth: true,
    },
  ];
  return {
@@ -194,7 +245,6 @@ function getOptions(dataList, showMore, dateType) {
    tooltip: {
      trigger: "axis",
      color: "#fff",
-      // formatter: "{b} {c}%",
      formatter: showMore
        ? "{a0} {c0}%<br />{a1} {c1}%<br />{a2} {c2}%"
        : "{b} {c}%",
@@ -205,7 +255,6 @@ function getOptions(dataList, showMore, dateType) {
        color: "#fffc",
      },
      className: "xc-chart-tooltip",
-      // backgroundColor: ''
    },
    series: [
      {
@@ -246,3 +295,14 @@ function getOptions(dataList, showMore, dateType) {
 //     },
 //     // smooth: true,
 //   },
+
+// data: Array(7)
+//   .fill(1)
+//   .map((_, index) => {
+//     const today = new Date();
+//     const dtimestamp = today - index * 24 * 60 * 60 * 1000;
+//     return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+//       dtimestamp
+//     ).getDate()}`;
+//   })
+//   .reverse(),
--- a/src/components/Common/TodayGood/components/GoodRateChart/index.module.css
+++ b/src/components/Common/TodayGood/components/GoodRateChart/index.module.css
@@ -8,14 +8,14 @@
  display: flex;
  justify-content: flex-start;
  align-items: center;
-  gap: 12px;
+  gap: 5px;
  color: white;
 }
 .GoodRateChart .titleBar h2 {
  margin: 0;
-  font-size: 18px;
+  font-size: 16px;
  line-height: 32px;
-  letter-spacing: 1.2px;
+  letter-spacing: 1px;
  color: #52fff8;
 }

@@ -29,10 +29,17 @@
  color: #dff1fe;
 }

+.graphBaseDesc {
+  margin: 0 6px;
+  font-size: 16px;
+  color: #76fff9;
+  flex: 1;
+}
+
 .GoodRateChart .titleBar .legend ul {
  display: flex;
  margin: 0;
-  margin-left: 8px;
+  margin-left: 5px;
  padding: 0;
  list-style: none;
  align-items: center;
@@ -67,7 +74,8 @@

 .radioGroup * {
  border: none !important;
-  border-radius: 0 !important;
+  border-radius: 6px !important;
+  /* transform: translateX(224px) !important; */
 }
 .radioGroup *:focus-within {
  box-shadow: none !important;