#

luxiaotao1123

2024-05-15 3f41ad8cf82b08585e89815feadb5a17938b3033

 src/pages/right/components/inout-charts.jsx

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

const InOutCharts = () => {
  const config = {
    header: ['编号', '时间', '类型', '区域', '单号'],
    data: [
      ['1', '2023-06-01 12:00:00', '入库', 'A1', 'b12c3'],
      ['2', '2023-06-01 12:00:00', '出库', 'A2', 'b12c3'],
      ['3', '2023-06-01 12:00:00', '入库', 'A3', 'b12c3'],
      ['4', '2023-06-01 12:00:00', '出库', 'A4', 'b12c3'],
      ['5', '2023-06-01 12:00:00', '入库', 'A5', 'b12c3'],
      ['6', '2023-06-01 12:00:00', '出库', 'A6', 'b12c3'],
      ['7', '2023-06-01 12:00:00', '入库', 'A7', 'b12c3'],
      ['8', '2023-06-01 12:00:00', '出库', 'A8', 'b12c3'],
    ],
    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 ["AGV" + item.agvNo, item.loaderTheta + "°", item.forkLength, item.inOutFlag]
        }))
      })
    }, 1000);

    return () => {
      clearInterval(timer);
    }
  }, []);

  return (
    <ScrollBoard
      config={config}
      style={{ width: '100%', height: '280px', fontSize: '12px', marginBottom: '8px' }}
      config={{
        header: ['编号', '载货台', '货叉', '作业'],
        data: apiData,
        headerBGC: '#00fff138',
        oddRowBGC: '#00000017',
        evenRowBGC: '#ededed13',
        headerHeight: 28,
        rowNum: 10,
        columnWidth: [80, 120, 100, 130],
      }}
      style={{ width: '100%', height: '400px', fontSize: '12px', marginBottom: '8px' }}
    />
  );
};