1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
| import { useEffect, useState } from 'react';
| import { ScrollBoard } from '@jiaminghi/data-view-react';
| import { getAgvCharts } from '@/api/report';
|
| const AgvCharts = () => {
| const [apiData, setApiData] = useState([
| ['AGV1', '100%', 'A1', '1m/s'],
| ['AGV2', '100%', 'A2', '1m/s'],
| ['AGV3', '100%', 'A3', '1m/s'],
| ['AGV4', '100%', 'A4', '1m/s'],
| ['AGV5', '100%', 'A5', '1m/s'],
| ['AGV6', '100%', 'A6', '1m/s'],
| ['AGV7', '100%', 'A7', '1m/s'],
| ['AGV8', '100%', 'A8', '1m/s'],
| ['AGV9', '100%', 'A9', '1m/s'],
| ['AGV10', '100%', 'A10', '1m/s'],
| ['AGV11', '100%', 'A11', '1m/s'],
| ]);
|
| useEffect(() => {
| const timer = setInterval(() => {
| getAgvCharts().then(res => {
| setApiData(res.reverse().map(item => {
| return [item.agvNo, item.qrcode, item.angle.toFixed(1) + "°", item.height]
| }))
| })
| }, 1000);
|
| return () => {
| clearInterval(timer);
| }
| }, []);
|
| return (
| <ScrollBoard
| config={{
| header: ['No', '地面码', '角度', '高度'],
| data: apiData,
| headerBGC: '#00fff138',
| oddRowBGC: '#00000017',
| evenRowBGC: '#ededed13',
| headerHeight: 28,
| rowNum: 10,
| columnWidth: [60, 140, 80, 80],
| }}
| style={{ width: '100%', height: '400px', fontSize: '12px', marginBottom: '8px' }}
| />
| );
| };
|
| export default AgvCharts;
|
|
