127 lines
2.5 KiB
JavaScript
127 lines
2.5 KiB
JavaScript
import cls from './index.module.css';
|
|
import BottomBarItem from '../BottomBarItem';
|
|
import { Switch, Radio } from 'antd';
|
|
import ReactECharts from 'echarts-for-react';
|
|
import * as echarts from 'echarts';
|
|
import { randomInt } from '../../../utils';
|
|
import { useState } from 'react';
|
|
|
|
function FaultType(props) {
|
|
const options = {
|
|
colors: [
|
|
'#2760FF',
|
|
'#5B9BFF',
|
|
'#FFD160',
|
|
'#8167F6',
|
|
'#99D66C',
|
|
'#FF8A40',
|
|
'#12FFF5',
|
|
],
|
|
grid: {
|
|
left: 0,
|
|
top: 0,
|
|
bottom: 0,
|
|
right: 0,
|
|
},
|
|
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: 16,
|
|
rich: {
|
|
sub: {
|
|
color: '#fff9',
|
|
fontSize: 16,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
center: ['26%', '54%'],
|
|
radius: ['55%', '75%'],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: true,
|
|
formatter: '{d}%',
|
|
fontSize: 14,
|
|
color: 'inherit',
|
|
},
|
|
labelLine: {
|
|
length: 0,
|
|
},
|
|
// emphasis: {
|
|
// label: {
|
|
// show: true,
|
|
// fontSize: 40,
|
|
// fontWeight: 'bold',
|
|
// },
|
|
// },
|
|
// labelLine: {
|
|
// show: false,
|
|
// },
|
|
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([
|
|
{ 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' },
|
|
]);
|
|
return (
|
|
<BottomBarItem
|
|
icon="puzzle"
|
|
title="产线当日缺陷分类"
|
|
className={cls.faultType}
|
|
>
|
|
<div className={cls.headWidget}>
|
|
{/* 日周月年 */}
|
|
<Radio.Group
|
|
defaultValue="l1"
|
|
buttonStyle="solid"
|
|
className={cls.radioGroup}
|
|
>
|
|
{lines.map((l, index) => (
|
|
<Radio.Button
|
|
key={l.label}
|
|
value={l.value}
|
|
className={`radio-group__item ${cls['radio-group__item']}`}
|
|
>
|
|
{l.label}
|
|
</Radio.Button>
|
|
))}
|
|
</Radio.Group>
|
|
</div>
|
|
<div className={cls.chart}>
|
|
<ReactECharts option={options} style={{ height: '100%' }} />
|
|
</div>
|
|
</BottomBarItem>
|
|
);
|
|
}
|
|
|
|
export default FaultType;
|