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, useDispatch } from "react-redux";
import { useEffect } from "react";

function FaultTotal(props) {
  const isra = useSelector((state) => state.isra);
  const dispatch = useDispatch();

  useEffect(() => {
    // 设置缺陷
    dispatch({
      type: "isra/setCheckTypeList",
      payload: [
        "Lehrer",
        "Anwalt",
        "Professorin",
        "Professor",
        "Lehrerin",
        "Anwältin",
      ],
    });

    dispatch({
      type: "isra/setDayStatistic",
      payload: [
        // 产线1
        {
          name: "10.1.1.1",
          sum: 500,
          data: [
            { checkType: "Lehrer", checkNum: 100 },
            { checkType: "Anwalt", checkNum: 200 },
            { checkType: "Professor", checkNum: 200 },
          ],
        },
        // 产线2
        {
          name: "10.1.1.2",
          sum: 730,
          data: [
            { checkType: "Lehrer", checkNum: 200 },
            { checkType: "Anwalt", checkNum: 130 },
            { checkType: "Lehrerin", checkNum: 400 },
          ],
        },
      ],
    });
  }, []);

  const options = {
    color: [
      "#FF8A40",
      "#FFD160",
      "#99D66C",
      "#5B9BFF",
      "#8167F6",
      "#2760FF",
      "#12FFF5",
    ],
    grid: { top: 42, right: 12, bottom: 20, left: 48 },
    legend: {
      top: 10,
      padding: 5,
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 12,
      height: 12,
      textStyle: {
        color: "#DFF1FE",
        fontSize: 12,
      },
	//   data: isra.checkTypeList,
    },
    xAxis: {
      type: "category",
      data: Array(5)
        .fill(1)
        .map((_, index) => {
          return "产线" + (index + 1);
        }),
      axisLabel: {
        color: "#fff",
        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",
        },
      },
      // interval: 10,
      // min: 0,
      // max: 100,
    },
    series: [
      {
        name: "缺陷1",
        type: "bar",
        stack: "abcd",
        emphasis: {
          focus: "series",
        },
        data: [320, 332, 301, 334, 390, 330, 320],
      },
      {
        name: "缺陷2",
        type: "bar",
        stack: "abcd",
        emphasis: {
          focus: "series",
        },
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: "缺陷3",
        type: "bar",
        stack: "abcd",
        emphasis: {
          focus: "series",
        },
        data: [220, 182, 191, 234, 290, 330, 310],
      },
      {
        name: "缺陷4",
        type: "bar",
        stack: "abcd",
        emphasis: {
          focus: "series",
        },
        data: [150, 232, 201, 154, 190, 330, 410],
      },
      {
        name: "缺陷5",
        type: "bar",
        stack: "abcd",
        emphasis: {
          focus: "series",
        },
        data: [862, 1018, 964, 1026, 1679, 1600, 1570],
      },
      {
        name: "缺陷6",
        type: "bar",
        barGap: 20,
        barWidth: 12,
        stack: "abcd",
        emphasis: {
          focus: "series",
        },
        data: [620, 732, 701, 734, 1090, 1130, 1120],
      },
    ],
    tooltip: {
      trigger: "axis",
    },
  };

  function handleDateChange(v) {
    console.log("date ", v);
  }

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

  return (
    <GraphBase
      icon="battery"
      title="产线缺陷统计"
      dateOptions={["日", "周", "月", "年"]}
      onDateChange={handleDateChange}
      size={bgSize}
      style={{ width: "600px" }}
    >
      <div className={cls.chart}>
        <ReactECharts option={options} style={{ height: "100%" }} />
      </div>
    </GraphBase>
  );
}

export default FaultTotal;