xuchang-new/src/components/Common/TodayFaultTotal/index.jsx

import cls from "./index.module.css";
import GraphBase from "../GraphBase";
import ReactECharts from "echarts-for-react";
import { useSelector } from "react-redux";
import { useState } from "react";
import dayjs from 'dayjs'

function FaultTotal(props) {
  const [currentSelect, setCurrentSelect] = useState("日");
  const isra = useSelector((state) => state.isra);

  const currentStatistic =
    currentSelect == "日"
      ? isra.dayStatistic
      : currentSelect == "周"
      ? isra.weekStatistic
      : currentSelect == "月"
      ? isra.monthStatistic
      : currentSelect == "月"
      ? isra.yearStatistic
      : [];

  const series = preHandleStatisticData(currentStatistic, isra.checkType ?? []);
  const options = getOptions(series, isra, currentStatistic);

  function handleDateChange(v) {
    setCurrentSelect(v);
  }

  // 根据使用的页面决定背景的大小
  const bgSize =
    props.page == "home" ? ["middle", "short"] : ["middle", "long"];

  // time hint
  let timeDesc = "";
  const now = new Date();
  switch (currentSelect) {
    case "日":
      timeDesc = dayjs().subtract(1, 'day').format('YYYY.MM.DD') + " 7点 - " + dayjs().format('YYYY.MM.DD') + " 7点";
      break;
    case "周":
      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' ;
      break;
    case "年":
      timeDesc = dayjs().subtract(1, 'year').endOf('year').format('YYYY.MM.') + "29 - " + dayjs().endOf('year').format('YYYY.MM.') + '28' ;
      break;
  }
  return (
    <GraphBase
      icon="chart"
      title="产线缺陷统计"
      dateOptions={["日", "周", "月", "年"]}
      defaultSelect={currentSelect}
      onDateChange={handleDateChange}
      size={bgSize}
      desc={timeDesc}
      style={{ width: "600px" }}
    >
      <div className={cls.chart}>
        {currentStatistic.length != 0 && (
          <ReactECharts option={options} style={{ height: "100%" }} />
        )}
        {currentStatistic.length == 0 && (
          <p
            style={{
              paddingTop: "72px",
              color: "#fff6",
              textAlign: "center",
              fontSize: "24px",
            }}
          >
            暂无数据
          </p>
        )}
      </div>
    </GraphBase>
  );
}

export default FaultTotal;

function preHandleStatisticData(data, legend) {
  const obj = {};
  if (!data || !Array.isArray(data)) data = [];
  data.forEach((item) => {
    obj[item.name] = {};
    item.data.forEach((d) => {
      obj[item.name][d.checkType] = d.checkNum;
    });
  });

  const series = Array(legend.length)
    .fill(1)
    .map((_) => ({
      name: "",
      type: "bar",
      stack: "true",
      barWidth: 12,
      emphasis: {
        focus: "series",
      },
      data: [],
    }));

  legend.forEach((item, index) => {
    series[index].name = item;
    data.forEach((d, idx) => {
      if (index == legend.length - 1) {
        series[index].label = {
          show: true,
          position: "top",
          distance: 10,
          color: "#fffc",
          formatter: (params) => data[params.dataIndex].sum,
        };
      }
      // const sum = d.sum;
      // console.log("d", d, sum);
      // series[index].label = ((fff) => {
      //   console.log("===>", fff);
      //   return {
      //     show: true,
      //     position: "top",
      //     distance: 10,
      //     color: "#fffc",
      //     formatter: "asdf" + fff,
      //   };
      // })(sum);

      series[index].data.push(obj[d.name][item] || 0);
    });
  });

  return series;
}

function getOptions(series, isra, currentStatistic) {
  return {
    color: ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160", "#FF8A40"],
    grid: {
      top: (isra.checkType || []).length <= 10 ? 80 : 100,
      right: 12,
      bottom: 20,
      left: 48,
    },
    legend: {
      top: 10,
      left: 60,
      padding: 5,
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 12,
      height: 12,
      textStyle: {
        color: "#DFF1FE",
        fontSize: 12,
      },
      data: isra.checkType,
    },
    xAxis: {
      type: "category",
      data: currentStatistic.map((item) => item.name),
      axisLabel: {
        color: "#fffc",
        fontSize: 12,
      },
      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,
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      className: "xc-chart-tooltip",
      // backgroundColor: ''
    },
  };
}