add SpecPL
This commit is contained in:
parent
e9153c3b41
commit
3e7205e5b4
BIN
src/assets/Icon/icon-signal.png
Normal file
BIN
src/assets/Icon/icon-signal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 777 B |
@ -1,126 +1,45 @@
|
||||
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';
|
||||
import cls from './index.module.less';
|
||||
import { ScrollBoard } from '@jiaminghi/data-view-react';
|
||||
import BottomBarItem from '../BottomBarItem';
|
||||
|
||||
function FaultType(props) {
|
||||
const options = {
|
||||
colors: [
|
||||
'#2760FF',
|
||||
'#5B9BFF',
|
||||
'#FFD160',
|
||||
'#8167F6',
|
||||
'#99D66C',
|
||||
'#FF8A40',
|
||||
'#12FFF5',
|
||||
const TodayTableData = (props) => {
|
||||
const [config, setConfig] = useState({
|
||||
// headerBGC: 'rgba(4, 44, 76, 0.3)',
|
||||
// headerBGC: 'rgba(4, 44, 76, .8)',
|
||||
headerBGC: '#044A8425',
|
||||
header: [
|
||||
'<span style="color:#fff">产线名<span/>',
|
||||
'<span style="color:#fff">原板宽度<span/>',
|
||||
'<span style="color:#fff">净板宽度<span/>',
|
||||
'<span style="color:#fff">玻璃厚度<span/>',
|
||||
],
|
||||
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' },
|
||||
],
|
||||
},
|
||||
// oddRowBGC: '#042444',
|
||||
oddRowBGC: '#044A8425',
|
||||
// evenRowBGC: '#042c4c',
|
||||
evenRowBGC: '#0B549945',
|
||||
columnWidth: [90],
|
||||
headerHeight: 40,
|
||||
hoverPause: false,
|
||||
data: [
|
||||
['产线1', '1000mm', '1000mm', '3.2mm'],
|
||||
['产线2', '100mm', '100mm', '2.2mm'],
|
||||
['产线3', '100mm', '100mm', '2.0mm'],
|
||||
['产线4', '100mm', '100mm', '2.1mm'],
|
||||
['产线5', '100mm', '100mm', '2.2mm'],
|
||||
],
|
||||
};
|
||||
|
||||
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%' }} />
|
||||
<BottomBarItem icon="signal" title="当前产线生产规格" className={cls.spec}>
|
||||
<div className={cls.todayTableData}>
|
||||
<ScrollBoard
|
||||
config={config}
|
||||
className={cls.tableClass}
|
||||
style={{ height: '100%' }}
|
||||
/>
|
||||
</div>
|
||||
</BottomBarItem>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default FaultType;
|
||||
export default TodayTableData;
|
||||
|
||||
@ -1,39 +0,0 @@
|
||||
.chart {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.faultType {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.headWidget {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
right: 24px;
|
||||
height: 32px;
|
||||
width: 340px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.radioGroup * {
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.radioGroup *:focus-within {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.radioGroup *::before {
|
||||
width: 0 !important;
|
||||
}
|
||||
|
||||
.radioGroup_button_wrapper {
|
||||
color: #fff !important;
|
||||
background: #03233c !important;
|
||||
}
|
||||
|
||||
.radio-group__item {
|
||||
padding: 0 8px;
|
||||
}
|
||||
7
src/components/BottomBar/SpecPL/index.module.less
Normal file
7
src/components/BottomBar/SpecPL/index.module.less
Normal file
@ -0,0 +1,7 @@
|
||||
.spec {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.todayTableData {
|
||||
height: 100%;
|
||||
}
|
||||
@ -9,6 +9,7 @@ import IconSmoke from '../assets/Icon/icon-taiji.png';
|
||||
import IconChart from '../assets/Icon/icon-chart.png';
|
||||
import IconPuzzle from '../assets/Icon/icon-puzzle.png';
|
||||
import IconPause from '../assets/Icon/icon-pause.png';
|
||||
import IconSignal from '../assets/Icon/icon-signal.png';
|
||||
|
||||
const Container = (props) => {
|
||||
let icon = useRef(null);
|
||||
@ -35,6 +36,9 @@ const Container = (props) => {
|
||||
case 'pause':
|
||||
icon.current = IconPause;
|
||||
break;
|
||||
case 'signal':
|
||||
icon.current = IconSignal;
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user