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