#

luxiaotao1123

2024-05-14 526eb936b460ee9e6f503e7030d0017b864ae1b8

#

 src/api/report/index.js

New file
@@ -0,0 +1,9 @@
import request from '../../utils/request';

export async function getAgvCharts(_params) {
    const res = await request.get('/digital/charts/agvcharts', _params);
    if (res.data.code === 200) {
        return res.data.data;
    }
    return Promise.reject(new Error(res.data.msg));
}

 src/components/ctrl.jsx

@@ -31,7 +31,7 @@
                    ref={controlsRef}
                    autoRotate
                    autoRotateSpeed={0.5}
                    target={[-200, 0, 0]}
                    target={[-200, 100, 0]}
                />
                {/* <PointerCtrl /> */}
            </group>

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

@@ -1,31 +1,48 @@
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 ["AGV" + item.agvNo, "0000" + Number(item.qrcode), item.angle.toFixed(1) + "°", item.height]
        }))
      })
    }, 1000);

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

  return (
    <ScrollBoard
      config={config}
      config={{
        header: ['编号', '地面码', '角度', '高度'],
        data: apiData,
        headerBGC: '#00fff138',
        oddRowBGC: '#00000017',
        evenRowBGC: '#ededed13',
        headerHeight: 28,
        rowNum: 8,
        columnWidth: [80, 100, 90, 80],
      }}
      style={{ width: '100%', height: '280px', fontSize: '12px', marginBottom: '8px' }}
    />
  );