#

luxiaotao1123

2024-08-20 9d71e24e7982f6915e5f832512925bee9b245f35

 src/pages/left/components/agv-charts.jsx

@@ -1,32 +1,49 @@
import { useEffect, useState } from 'react';
import { ScrollBoard } from '@jiaminghi/data-view-react';
import { getAgvCharts } from '@/api/report';

const AgvCharts = () => {
  const config = {
    header: ['编号', '电量', '位置', '速度'],
    data: [
      ['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'],
    ],
    headerBGC: '#00fff138',
    oddRowBGC: '#00000017',
    evenRowBGC: '#ededed13',
    headerHeight: 28,
    rowNum: 8,
    columnWidth: [80, 70, 60, 100],
  };
  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={config}
      style={{ width: '100%', height: '220px', fontSize: '12px', marginBottom: '8px' }}
      config={{
        header: ['No', 'QRCode', 'Theta', 'Height'],
        data: apiData,
        headerBGC: '#00fff138',
        oddRowBGC: '#00000017',
        evenRowBGC: '#ededed13',
        headerHeight: 28,
        rowNum: 10,
        columnWidth: [60, 140, 100, 70],
      }}
      style={{ width: '100%', height: '400px', fontSize: '12px', marginBottom: '8px' }}
    />
  );
};