#

luxiaotao1123

2024-05-15 3f41ad8cf82b08585e89815feadb5a17938b3033

#

 src/api/report/index.js

@@ -14,4 +14,12 @@
        return res.data.data;
    }
    return Promise.reject(new Error(res.data.msg));
}

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

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

@@ -48,6 +48,10 @@
    }
  }, []);

  useEffect(() => {
    console.log(trafficWay);
  }, [trafficWay])


  const data = [];
  const color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00'];

 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' }}
    />
  );
};

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

@@ -1,9 +1,32 @@
import React from 'react';
import { useEffect, useState } from 'react';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts/core';
import { getTaskCharts } from '@/api/report';

const TasksCharts = () => {
  const backgroundColor = '#101736';
  const [seriesData, setSeriesData] = useState([
    { name: 'A1', data: [120, 132, 101, 134, 90, 230, 210] },
    { name: 'C3', data: [220, 182, 191, 234, 290, 330, 310] },
    { name: 'Y2', data: [150, 232, 201, 154, 190, 330, 410] },
    { name: 'A3', data: [320, 332, 301, 334, 390, 330, 320] },
  ]);

  const [week, setWeek] = useState(['周一', '周二', '周三', '周四', '周五', '周六', '周日']);

  useEffect(() => {
    const timer = setInterval(() => {
      getTaskCharts().then(res => {
        setSeriesData(res.data);
        setWeek(res.week);
        console.log(res);
      })
    }, 1000);

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

  const color = ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05']; //2个以上的series就需要用到color数组
  const legend = {
    //data，就是取得每个series里面的name属性。
@@ -28,12 +51,6 @@
      type: 'shadow',
    },
  };
  let seriesData = [
    { name: 'A1', data: [120, 132, 101, 134, 90, 230, 210] },
    { name: 'C3', data: [220, 182, 191, 234, 290, 330, 310] },
    { name: 'Y2', data: [150, 232, 201, 154, 190, 330, 410] },
    { name: 'A3', data: [320, 332, 301, 334, 390, 330, 320] },
  ];
  const commonConfigFn = (index) => {
    return {
      type: 'line',
@@ -76,7 +93,6 @@
    };
  };

  seriesData = seriesData.map((item, index) => ({ ...item, ...commonConfigFn(index) }));
  const option = {
    color,
    tooltip,
@@ -109,7 +125,7 @@
        show: false, //不显示grid竖向分割线
      },

      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      data: week,
    },
    yAxis: {
      type: 'value',
@@ -127,12 +143,12 @@
      },
    },

    series: seriesData,
    series: seriesData.map((item, index) => ({ ...item, ...commonConfigFn(index) })),
  };

  return (
    <div>
      <ReactECharts style={{ height: '280px' }} option={option} />
      <ReactECharts style={{ height: '360px' }} option={option} />
    </div>
  );
};

 src/pages/right/index.jsx

@@ -31,15 +31,15 @@
        className={`absolute top-2 w-[280px] right-2 bottom-2 ${styles.panel}`}
      >
        <div className="overflow-hidden h-full">
          <Panel title="出入库信息">
            <InOutCharts />
          </Panel>
          <Panel title="出入库统计">
            <StatCharts />
          </Panel>
          <Panel title="任务分布">
            <TaskCharts />
          </Panel>
          <Panel title="AGV信息">
            <InOutCharts />
          </Panel>
        </div>
        <div
          className={`${'absolute text-white top-1/2 -translate-y-1/2 left-[-21px] bg-black bg-opacity-20 text-xl font-bold bg'}`}