update 缺陷分类

src/components/Common/GraphBase/index.jsx

@@ -38,6 +38,7 @@ function GraphBase(props) {
 		onSwitch,
 		dateOptions,
 		onDateChange,
+		defaultSelect,
 		legend,
 	} = props;
 	const iconSrc = useIcon(icon);
@@ -55,6 +56,7 @@ function GraphBase(props) {
 		});
 	}
 	if (dateOptions) {
+		console.log('[Graph Base] ', dateOptions, defaultSelect)
 		dto = dateOptions.map((item) => (
 			<Radio.Button value={item} key={item} className="radio-group__item">
 				{item}
@@ -107,7 +109,7 @@ function GraphBase(props) {
 				)}
 				{dateOptions && (
 					<Radio.Group
-						defaultValue={dateOptions[0]}
+						defaultValue={defaultSelect || dateOptions[0]}
 						buttonStyle="solid"
 						className={cls.graphBaseDate + ' ' + cls.radioGroup}
 						onChange={({ target }) => onDateChange(target.value)}

src/components/Common/TodayFaultTotal/index.jsx

@@ -2,9 +2,42 @@ 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";
+import { useEffect, useState } from "react";
+
+function preHandleStatisticData(data, legend) {
+  const obj = {};
+  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) => {
+      series[index].data.push(obj[d.name][item] || 0);
+    });
+  });
+
+  return series;
+}
 
 function FaultTotal(props) {
+  const [currentSelect, setCurrentSelect] = useState("日");
   const isra = useSelector((state) => state.isra);
   const dispatch = useDispatch();
 
@@ -47,18 +80,49 @@ function FaultTotal(props) {
         },
       ],
     });
+
+    dispatch({
+      type: "isra/setWeekStatistic",
+      payload: [
+        // 产线1
+        {
+          name: "10.1.1.1",
+          sum: 500,
+          data: [
+            { checkType: "Lehrerin", checkNum: 100 },
+            { checkType: "Anwalt", checkNum: 200 },
+            { checkType: "Professor", checkNum: 200 },
+          ],
+        },
+        // 产线2
+        {
+          name: "10.1.1.2",
+          sum: 730,
+          data: [
+            { checkType: "Professor", checkNum: 200 },
+            { checkType: "Anwalt", checkNum: 130 },
+            { checkType: "Lehrerin", checkNum: 400 },
+          ],
+        },
+      ],
+    });
   }, []);
 
+  const currentStatistic =
+    currentSelect == "日"
+      ? isra.dayStatistic
+      : currentSelect == "周"
+      ? isra.weekStatistic
+      : currentSelect == "月"
+      ? isra.monthStatistic
+      : currentSelect == "月"
+      ? isra.yearStatistic
+      : [];
+
+  const series = preHandleStatisticData(currentStatistic, isra.checkTypeList);
+
   const options = {
-    color: [
+    color: ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160", "#FF8A40"],
-      "#FF8A40",
-      "#FFD160",
-      "#99D66C",
-      "#5B9BFF",
-      "#8167F6",
-      "#2760FF",
-      "#12FFF5",
-    ],
     grid: { top: 42, right: 12, bottom: 20, left: 48 },
     legend: {
       top: 10,
@@ -71,15 +135,11 @@ function FaultTotal(props) {
         color: "#DFF1FE",
         fontSize: 12,
       },
-	//   data: isra.checkTypeList,
+      data: isra.checkTypeList,
     },
     xAxis: {
       type: "category",
-      data: Array(5)
+      data: currentStatistic.map((item) => item.name),
-        .fill(1)
-        .map((_, index) => {
-          return "产线" + (index + 1);
-        }),
       axisLabel: {
         color: "#fff",
         fontSize: 12,
@@ -116,75 +176,15 @@ function FaultTotal(props) {
           color: "#213259a0",
         },
       },
-      // interval: 10,
-      // min: 0,
-      // max: 100,
     },
-    series: [
+    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);
+    setCurrentSelect(v);
   }
 
   // 根据使用的页面决定背景的大小

src/components/Common/TodayFaultType/index.jsx

@@ -1,19 +1,12 @@
-import cls from './index.module.css';
+import cls from "./index.module.css";
-import GraphBase from '../GraphBase';
+import GraphBase from "../GraphBase";
-import ReactECharts from 'echarts-for-react';
+import ReactECharts from "echarts-for-react";
-import { useState } from 'react';
+import { useSelector, useDispatch } from "react-redux";
+import { useEffect, useState } from "react";
 
-function FaultType(props) {
+function getOptions(series) {
-	const options = {
+  return {
-		colors: [
+    color: ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160", "#FF8A40"],
-			'#2760FF',
-			'#5B9BFF',
-			'#FFD160',
-			'#8167F6',
-			'#99D66C',
-			'#FF8A40',
-			'#12FFF5',
-		],
     grid: {
       left: 24,
       top: 10,
@@ -21,7 +14,7 @@ function FaultType(props) {
       right: 24,
     },
     legend: {
-			icon: 'circle',
+      icon: "circle",
       top: 32,
       right: 0,
       bottom: 32,
@@ -30,75 +23,94 @@ function FaultType(props) {
       itemGap: 30,
       formatter: function (name) {
         return `${name} {sub|${
-					options.series[0].data.find((o) => o.name == name).value
+          series[0].data.find((o) => o.name == name).value
         }}`;
       },
       textStyle: {
-				color: '#DFF1FE',
+        color: "#DFF1FE",
         fontSize: 18,
         rich: {
           sub: {
-						color: '#fff9',
+            color: "#fff9",
             fontSize: 18,
           },
         },
       },
     },
-		series: [
+    series,
+  };
+}
+
+function getSeries(currentStatistic, currentLine) {
+  console.log("get series", currentStatistic, currentLine);
+  return [
     {
-				type: 'pie',
+      type: "pie",
-				center: ['26%', '54%'],
+      center: ["26%", "54%"],
-				radius: ['55%', '75%'],
+      radius: ["55%", "75%"],
       avoidLabelOverlap: false,
       label: {
         show: true,
-					formatter: '{d}%',
+        formatter: "{d}%",
         fontSize: 14,
-					color: 'inherit',
+        color: "inherit",
       },
       labelLine: {
         length: 0,
       },
       data: [
-					{ value: 1048, name: '缺陷1' },
+        { value: 1048, name: "缺陷1" },
-					{ value: 735, name: '缺陷2' },
+        { value: 735, name: "缺陷2" },
-					{ value: 580, name: '缺陷3' },
+        { value: 580, name: "缺陷3" },
-					{ value: 484, name: '缺陷4' },
+        { value: 484, name: "缺陷4" },
-					{ value: 300, name: '缺陷5' },
+        { value: 300, name: "缺陷5" },
-					{ value: 300, name: '缺陷6' },
+        { value: 300, name: "缺陷6" },
-					{ value: 300, name: '缺陷8' },
+        { value: 300, name: "缺陷8" },
       ],
     },
-		],
+  ];
-	};
+}
 
-	const [lines, setLines] = useState([
+function FaultType(props) {
-		{ id: 1, label: '产线1', value: 'l1' },
+  const [init, setInit] = useState(true);
-		{ id: 2, label: '产线2', value: 'l2' },
+  const [currentLine, setCurrentLine] = useState("");
-		{ id: 3, label: '产线3', value: 'l3' },
+  const isra = useSelector((state) => state.isra);
-		{ id: 4, label: '产线4', value: 'l4' },
+  const currentStatistic = isra.dayStatistic || [];
-		{ id: 5, label: '产线5', value: 'l5' },
-	]);
 
-	function handleDateChange(v) {
+  console.log("currentStatistic ", currentStatistic);
-		console.log('date ', v);
+  const lines = currentStatistic.map((item, index) => item.name);
+  useEffect(() => {
+    if (init == false) return;
+    if (lines.length) {
+      setInit(false);
+      setCurrentLine(lines[0]);
+    }
+  }, [lines]);
+
+  const options = init
+    ? {}
+    : getOptions(getSeries(currentStatistic, currentLine));
+
+  function handleLineChange(line) {
+    setCurrentLine(line);
   }
 
   // 根据使用的页面决定背景的大小
   const bgSize =
-		props.page == 'home' ? ['middle', 'short'] : ['middle', 'short'];
+    props.page == "home" ? ["middle", "short"] : ["middle", "short"];
 
   return (
     <GraphBase
       icon="battery"
       title="产线当日缺陷分类"
-			dateOptions={lines.map((item) => item.label)}
+      dateOptions={lines}
-			onDateChange={handleDateChange}
+      defaultSelect={currentLine}
+      onDateChange={handleLineChange}
       size={bgSize}
-			style={{ width: '600px' }}
+      style={{ width: "600px" }}
     >
       <div className={cls.chart}>
-				<ReactECharts option={options} style={{ height: '100%' }} />
+        <ReactECharts option={options} style={{ height: "100%" }} />
       </div>
     </GraphBase>
   );