diff --git a/src/components/Common/GraphBase/index.jsx b/src/components/Common/GraphBase/index.jsx index f73f883..8f93317 100644 --- a/src/components/Common/GraphBase/index.jsx +++ b/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) => ( {item} @@ -107,7 +109,7 @@ function GraphBase(props) { )} {dateOptions && ( onDateChange(target.value)} diff --git a/src/components/Common/TodayFaultTotal/index.jsx b/src/components/Common/TodayFaultTotal/index.jsx index 90a3369..c225f6b 100644 --- a/src/components/Common/TodayFaultTotal/index.jsx +++ b/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: [ - "#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); } // 根据使用的页面决定背景的大小 diff --git a/src/components/Common/TodayFaultType/index.jsx b/src/components/Common/TodayFaultType/index.jsx index a4ffb91..70a2bf6 100644 --- a/src/components/Common/TodayFaultType/index.jsx +++ b/src/components/Common/TodayFaultType/index.jsx @@ -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 ( - item.label)} - onDateChange={handleDateChange} - size={bgSize} - style={{ width: '600px' }} - > -
- -
-
- ); + // 根据使用的页面决定背景的大小 + const bgSize = + props.page == "home" ? ["middle", "short"] : ["middle", "short"]; + + return ( + +
+ +
+
+ ); } export default FaultType;