mt-fe-group/xuchang-new
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

Browse Source
This commit is contained in:
lb
2023-12-13 16:59:58 +08:00
parent 19825dcb5f
commit ac711e6f2a
11 changed files with 469 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Common/TodayFaultTotal/1.json Normal file
View File

@@ -0,0 +1 @@
1.json

357
src/components/Common/TodayFaultTotal/index.jsx
View File

@@ -1,163 +1,210 @@
import cls from './index.module.css';
import GraphBase from '../GraphBase';
import ReactECharts from 'echarts-for-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 } from "react";
function FaultTotal(props) {
const options = {
color: [
'#2760FF',
'#5B9BFF',
'#FFD160',
'#8167F6',
'#99D66C',
'#FF8A40',
'#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,
},
},
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',
},
};
const isra = useSelector((state) => state.isra);
const dispatch = useDispatch();
function handleDateChange(v) {
console.log('date ', v);
}
useEffect(() => {
// 设置缺陷
dispatch({
type: "isra/setCheckTypeList",
payload: [
"Lehrer",
"Anwalt",
"Professorin",
"Professor",
"Lehrerin",
"Anwältin",
],
});
// 根据使用的页面决定背景的大小
const bgSize =
props.page == 'home' ? ['middle', 'short'] : ['middle', 'long'];
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 },
],
},
],
});
}, []);
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>
);
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;