update isra

2023-12-15 15:20:20 +08:00
parent 0b91868b4f
commit 5107dd8ce8
7 changed files with 181 additions and 78 deletions
--- a/src/components/Common/TodayFaultTotal/index.jsx
+++ b/src/components/Common/TodayFaultTotal/index.jsx
@@ -51,7 +51,7 @@ function getOptions(series, isra, currentStatistic) {
        color: "#DFF1FE",
        fontSize: 12,
      },
-      data: isra.checkTypeList,
+      data: isra.checkType,
    },
    xAxis: {
      type: "category",
@@ -115,7 +115,7 @@ function FaultTotal(props) {
      ? isra.yearStatistic
      : [];

-  const series = preHandleStatisticData(currentStatistic, isra.checkTypeList);
+  const series = preHandleStatisticData(currentStatistic, isra.checkType);
  const options = getOptions(series, isra, currentStatistic);

  function handleDateChange(v) {
--- a/src/components/Common/TodayFaultType/index.jsx
+++ b/src/components/Common/TodayFaultType/index.jsx
@@ -1,77 +1,22 @@
 import cls from "./index.module.css";
 import GraphBase from "../GraphBase";
 import ReactECharts from "echarts-for-react";
-import { useSelector, useDispatch } from "react-redux";
+import { useSelector } from "react-redux";
 import { useEffect, useState } from "react";
-
-function getOptions(series) {
-  return {
-    color: ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160", "#FF8A40"],
-    grid: {
-      left: 24,
-      top: 10,
-      bottom: 10,
-      right: 24,
-    },
-    legend: {
-      icon: "circle",
-      top: 32,
-      right: 0,
-      bottom: 32,
-      width: 296,
-      height: 130,
-      itemGap: 30,
-      formatter: function (name) {
-        return `${name} {sub|${
-          series[0].data.find((o) => o.name == name).value
-        }}`;
-      },
-      textStyle: {
-        color: "#DFF1FE",
-        fontSize: 18,
-        rich: {
-          sub: {
-            color: "#fff9",
-            fontSize: 18,
-          },
-        },
-      },
-    },
-    series,
-  };
-}
-
-function getSeries(currentStatistic, currentLine) {
-  const currentItem = currentStatistic.find((item) => item.name == currentLine);
-  return [
-    {
-      type: "pie",
-      center: ["26%", "54%"],
-      radius: ["55%", "75%"],
-      avoidLabelOverlap: false,
-      label: {
-        show: true,
-        formatter: "{d}%",
-        fontSize: 14,
-        color: "inherit",
-      },
-      labelLine: {
-        length: 0,
-      },
-      data: currentItem.data.map((item) => ({
-        value: item.checkNum,
-        name: item.checkType,
-      })),
-    },
-  ];
-}
+import { randomInt } from "../../../utils";

 function FaultType(props) {
  const [init, setInit] = useState(true);
  const [currentLine, setCurrentLine] = useState("");
  const isra = useSelector((state) => state.isra);
  const currentStatistic = isra.dayStatistic || [];
+  const currentLineStatistic =
+    currentLine != ""
+      ? currentStatistic.find((item) => item.name === currentLine)?.data || []
+      : [];
  const lines = currentStatistic.map((item) => item.name);
+  const CHART_TYPE = "line"; // "pie" | "line";
+
  useEffect(() => {
    if (init == false) return;
    if (lines.length) {
@@ -82,7 +27,12 @@ function FaultType(props) {

  const options = init
    ? {}
-    : getOptions(getSeries(currentStatistic, currentLine));
+    : getOptions(
+        CHART_TYPE == "pie"
+          ? getSeries(currentStatistic, currentLine)
+          : currentLineStatistic,
+        CHART_TYPE
+      );

  function handleLineChange(line) {
    setCurrentLine(line);
@@ -124,3 +74,149 @@ function FaultType(props) {
 }

 export default FaultType;
+
+function getOptions(data, chart_type) {
+  const color = [
+    "#2760FF",
+    "#8167F6",
+    "#5B9BFF",
+    "#99D66C",
+    "#FFD160",
+    "#FF8A40",
+  ];
+  const grid = {
+    left: 24,
+    top: 10,
+    bottom: 10,
+    right: 24,
+  };
+  const legend_common = {
+    icon: "circle",
+    top: 32,
+    right: 0,
+    bottom: 32,
+    width: 296,
+    height: 130,
+    itemGap: 30,
+    textStyle: {
+      color: "#DFF1FE",
+      fontSize: 18,
+      rich: {
+        sub: {
+          color: "#fff9",
+          fontSize: 18,
+        },
+      },
+    },
+  };
+  if (chart_type == "pie") {
+    return {
+      color,
+      grid,
+      legend: {
+        ...legend_common,
+        formatter: function (name) {
+          return `${name} {sub|${
+            data[0].data.find((o) => o.name == name).value
+          }}`;
+        },
+      },
+      series: data,
+    };
+  } else if (chart_type == "line") {
+    const dataList = data.map((item) => ({
+      category: item.checkType,
+      value: item.checkNum,
+    }));
+
+    return {
+      grid: {
+        top: 48,
+        left: 48,
+        bottom: 40,
+        right: 18,
+      },
+      legend: {
+        ...legend_common,
+      },
+      tooltip: {
+        trigger: "item",
+      },
+      xAxis: {
+        type: "category",
+        data: (dataList || []).map((item) => item.category),
+        axisLabel: {
+          color: "#fff",
+          fontSize: 12,
+          rotate: 24,
+        },
+        axisTick: { show: false },
+        axisLine: {
+          lineStyle: {
+            width: 1,
+            color: "#213259",
+          },
+        },
+      },
+      yAxis: {
+        name: "单位/个",
+        nameTextStyle: {
+          color: "#fff",
+          fontSize: 10,
+          align: "right",
+        },
+        type: "value",
+        axisLabel: {
+          color: "#fff",
+          fontSize: 12,
+          formatter: "{value}",
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: "#213259",
+          },
+        },
+        splitLine: {
+          lineStyle: {
+            color: "#213259a0",
+          },
+        },
+      },
+      series: [
+        {
+          type: "bar",
+          itemStyle: {
+            color: color[randomInt(0, color.length - 1)],
+          },
+          data: (dataList || []).map((item) => item.value),
+        },
+      ],
+    };
+  }
+}
+
+function getSeries(currentStatistic, currentLine) {
+  const currentItem = currentStatistic.find((item) => item.name == currentLine);
+  return [
+    {
+      type: "pie",
+      center: ["26%", "54%"],
+      radius: ["55%", "75%"],
+      avoidLabelOverlap: false,
+      label: {
+        show: true,
+        formatter: "{d}%",
+        fontSize: 14,
+        color: "inherit",
+      },
+      labelLine: {
+        length: 0,
+      },
+      data: currentItem.data.map((item) => ({
+        value: item.checkNum,
+        name: item.checkType,
+      })),
+    },
+  ];
+}