#

luxiaotao1123

2024-08-20 9d71e24e7982f6915e5f832512925bee9b245f35

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

@@ -1,34 +1,51 @@
// import { ScrollBoard } from '@jiaminghi/data-view-react';
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],
//   };
//   return (
//     <ScrollBoard
//       config={config}
//       style={{ width: '100%', height: '220px', fontSize: '12px', marginBottom: '8px' }}
//     />
//   );
// };
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'],
  ]);

// export default AgvCharts;
  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', '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' }}
    />
  );
};

export default AgvCharts;