update 缺陷分类
This commit is contained in:
lb
parent
ac711e6f2a
commit
68065b612a
@ -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)}
|
||||
|
||||
@ -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: [
|
||||
"#FF8A40",
|
||||
"#FFD160",
|
||||
"#99D66C",
|
||||
"#5B9BFF",
|
||||
"#8167F6",
|
||||
"#2760FF",
|
||||
"#12FFF5",
|
||||
],
|
||||
color: ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160", "#FF8A40"],
|
||||
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)
|
||||
.fill(1)
|
||||
.map((_, index) => {
|
||||
return "产线" + (index + 1);
|
||||
}),
|
||||
data: currentStatistic.map((item) => item.name),
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
@ -116,75 +176,15 @@ function FaultTotal(props) {
|
||||
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],
|
||||
},
|
||||
],
|
||||
series,
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
};
|
||||
|
||||
function handleDateChange(v) {
|
||||
console.log("date ", v);
|
||||
setCurrentSelect(v);
|
||||
}
|
||||
|
||||
// 根据使用的页面决定背景的大小
|
||||
|
||||
@ -1,107 +1,119 @@
|
||||
import cls from './index.module.css';
|
||||
import GraphBase from '../GraphBase';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
import { useState } from 'react';
|
||||
import cls from "./index.module.css";
|
||||
import GraphBase from "../GraphBase";
|
||||
import ReactECharts from "echarts-for-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 = {
|
||||
colors: [
|
||||
'#2760FF',
|
||||
'#5B9BFF',
|
||||
'#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 [init, setInit] = useState(true);
|
||||
const [currentLine, setCurrentLine] = useState("");
|
||||
const isra = useSelector((state) => state.isra);
|
||||
const currentStatistic = isra.dayStatistic || [];
|
||||
|
||||
const [lines, setLines] = useState([
|
||||
{ id: 1, label: '产线1', value: 'l1' },
|
||||
{ id: 2, label: '产线2', value: 'l2' },
|
||||
{ id: 3, label: '产线3', value: 'l3' },
|
||||
{ id: 4, label: '产线4', value: 'l4' },
|
||||
{ id: 5, label: '产线5', value: 'l5' },
|
||||
]);
|
||||
console.log("currentStatistic ", currentStatistic);
|
||||
const lines = currentStatistic.map((item, index) => item.name);
|
||||
useEffect(() => {
|
||||
if (init == false) return;
|
||||
if (lines.length) {
|
||||
setInit(false);
|
||||
setCurrentLine(lines[0]);
|
||||
}
|
||||
}, [lines]);
|
||||
|
||||
function handleDateChange(v) {
|
||||
console.log('date ', v);
|
||||
}
|
||||
const options = init
|
||||
? {}
|
||||
: getOptions(getSeries(currentStatistic, currentLine));
|
||||
|
||||
// 根据使用的页面决定背景的大小
|
||||
const bgSize =
|
||||
props.page == 'home' ? ['middle', 'short'] : ['middle', 'short'];
|
||||
function handleLineChange(line) {
|
||||
setCurrentLine(line);
|
||||
}
|
||||
|
||||
return (
|
||||
<GraphBase
|
||||
icon="battery"
|
||||
title="产线当日缺陷分类"
|
||||
dateOptions={lines.map((item) => item.label)}
|
||||
onDateChange={handleDateChange}
|
||||
size={bgSize}
|
||||
style={{ width: '600px' }}
|
||||
>
|
||||
<div className={cls.chart}>
|
||||
<ReactECharts option={options} style={{ height: '100%' }} />
|
||||
</div>
|
||||
</GraphBase>
|
||||
);
|
||||
// 根据使用的页面决定背景的大小
|
||||
const bgSize =
|
||||
props.page == "home" ? ["middle", "short"] : ["middle", "short"];
|
||||
|
||||
return (
|
||||
<GraphBase
|
||||
icon="battery"
|
||||
title="产线当日缺陷分类"
|
||||
dateOptions={lines}
|
||||
defaultSelect={currentLine}
|
||||
onDateChange={handleLineChange}
|
||||
size={bgSize}
|
||||
style={{ width: "600px" }}
|
||||
>
|
||||
<div className={cls.chart}>
|
||||
<ReactECharts option={options} style={{ height: "100%" }} />
|
||||
</div>
|
||||
</GraphBase>
|
||||
);
|
||||
}
|
||||
|
||||
export default FaultType;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user