#

luxiaotao1123

2024-05-16 6d21360f263ae282bfa7ca4533154aad66feeb53

#

 .env

@@ -1 +1,2 @@
COOL_API_BASE_URL = 'http://192.168.4.15:9090'
# COOL_API_BASE_URL = 'http://localhost:9090'

 src/api/report/index.js

@@ -1,5 +1,13 @@
import request from '../../utils/request';

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

export async function getAgvCharts(_params) {
    const res = await request.get('/digital/charts/agvcharts', _params);
    if (res.data.code === 200) {

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

File was renamed from src/pages/left/components/stock-charts.jsx
@@ -1,19 +1,10 @@
import React from 'react';
import { useEffect, useState } from 'react';
import ReactECharts from 'echarts-for-react';
// import { useRequest } from 'ahooks';
// import { config } from '../../config';
import * as echarts from 'echarts/core';
// import { GetCurrentLocationSummary } from 'apis';
import { getActionCount } from '@/api/report';

const StockCharts = () => {
  // const { data } = useRequest(() => GetCurrentLocationSummary({}), {
  //   ...config,
  // });

  // const resultData = data?.resultData || {};

  var barWidth = 3;
  const option3_xdata = [
const ActionCharts = () => {
  const [xdata, setXdata] = useState([
    'A12',
    'A2',
    'A3',
@@ -30,12 +21,38 @@
    'A1',
    'B4',
    'C6',
  ];
  const option3_Ydata = [75, 62, 57, 42, 35, 32, 29, 27, 75, 62, 57, 42, 35, 32, 29, 27];
  ]);
  const [ydata, setYdata] = useState([75, 62, 57, 42, 35, 32, 29, 27, 75, 62, 57, 42, 35, 32, 29, 27]);

  useEffect(() => {
    const fetchChartsData = () => {
      getActionCount().then(res => {
        const dualXdata = [];
        const dualYdata = [];
        res.forEach(item => {
          dualXdata.push(item.name);
          dualYdata.push(item.count);
        })
        setXdata(dualXdata);
        setYdata(dualYdata);
      })
    }

    fetchChartsData();

    const timer = setInterval(() => {
      fetchChartsData();
    }, 1000);

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

  var barWidth = 3;
  const option3_Ydatamax = [];
  var yMax2 = Math.max.apply(null, option3_Ydata);
  for (var i = 0; i < option3_Ydata.length; i++) {
  var yMax2 = Math.max.apply(null, ydata);
  for (var i = 0; i < ydata.length; i++) {
    option3_Ydatamax.push(yMax2);
  }

@@ -50,7 +67,7 @@
      borderWidth: 0,
      top: '10',
      left: '10',
      right: '30',
      right: '50',
      bottom: '3%',
    },
    // color: color,
@@ -68,7 +85,7 @@
          show: false,
          inside: false,
        },
        data: option3_xdata,
        data: xdata,
      },
    ],
    xAxis: {
@@ -97,7 +114,7 @@
        height: '84%',
        top: '7%',
        start: 0,
        end: 50,
        end: 200,
        zoomLock: true,
        // show: false,
        showDetail: false,
@@ -137,7 +154,7 @@
            ]),
          },
        },
        data: option3_Ydata,
        data: ydata,
        animationDuration: 1500,
        label: {
          normal: {
@@ -177,8 +194,7 @@
              color: '#fff',
            },
            formatter: function (a) {
              // console.log(a);
              return option3_Ydata[a.dataIndex];
              return ydata[a.dataIndex];
            },
          },
        },
@@ -199,4 +215,4 @@
  );
};

export default StockCharts;
export default ActionCharts;

 src/pages/left/index.jsx

@@ -5,7 +5,7 @@

import Panel from '@/components/panel';

import StockCharts from './components/stock-charts';
import ActionCharts from './components/action-charts';
import LocCharts from './components/loc-charts';
import AgvCharts from './components/agv-charts';
import CapacityCharts from './components/capacity-charts';
@@ -29,8 +29,8 @@
            className={`absolute top-2 left-2 bottom-2 w-[280px] ${styles.panel}`}
        >
            <div className="h-full overflow-hidden">
                <Panel title="库房情况">
                    <StockCharts />
                <Panel title="动作统计">
                    <ActionCharts />
                </Panel>
                <Panel title="库存类型">
                    <LocCharts />