#

luxiaotao1123

2024-04-28 8877cd129a4dc36f7848101a78dbefe18263a6f8

#

 package.json

@@ -17,15 +17,15 @@
    "@tweenjs/tween.js": "^21.0.0",
    "antd": "^5.16.4",
    "axios": "^1.6.2",
    "echarts": "^5.4.2",
    "echarts-for-react": "^3.0.2",
    "maath": "0.10.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.15.0",
    "react-spring": "^9.7.1",
    "three": "^0.153.0",
    "valtio": "^1.12.1",
    "echarts": "^5.4.2",
    "echarts-for-react": "^3.0.2"
    "valtio": "^1.12.1"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",

 src/components/panel.jsx

@@ -42,8 +42,6 @@
    });
  };

  console.log(styles);

  return (
    <div className="w-full mt-2" ref={cardRef}>
      {/* <BorderBox8 dur={12}> */}

 src/pages/left/components/AgvPanel.tsx

File was deleted

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

New file
@@ -0,0 +1,34 @@
// import { ScrollBoard } from '@jiaminghi/data-view-react';

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

// export default AgvCharts;

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

File was renamed from src/pages/left/components/Capacity.tsx
@@ -1,19 +1,9 @@
// import { observer } from "mobx-react-lite";
import React, { useEffect, useState } from 'react';
import * as echarts from 'echarts/core';
import ReactECharts from 'echarts-for-react';
import { GetAreaLocationWeekSummary } from 'apis';
import { config } from '../../config';
import { useRequest } from 'ahooks';

function Capacity() {
  const [data, setData] = useState<Record<string, any>[]>([]);
  useRequest(init, { ...config });

  async function init() {
    const res = await GetAreaLocationWeekSummary<Record<string, any>[]>({});
    setData(res.resultData || []);
  }
const CapacityCharts = () => {
  const [data, setData] = useState([]);

  const options = {
    title: {
@@ -85,5 +75,4 @@

  return <ReactECharts option={options} />;
}
// export default observer(Capacity);
export default Capacity;
export default CapacityCharts;

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

File was renamed from src/pages/left/components/Task.tsx
@@ -1,11 +1,8 @@
import React 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';

const Task: React.FC = () => {
const TaskCharts = () => {
  const trafficWay = [
    {
      name: 'HG',
@@ -154,4 +151,4 @@
  );
};

export default Task;
export default TaskCharts;

 src/pages/left/index.jsx

@@ -6,8 +6,9 @@
import Panel from '@/components/panel';

import StockCharts from './components/stock-charts';
// import Task from './modules/Task';
// import AgvPanel from './modules/AgvPanel';
import TaskCharts from './components/task-charts';
// import AgvCharts from './components/agv-charts';
import CapacityCharts from './components/capacity-charts';

const Left = () => {
    const [isExpanded, setIsExpanded] = useState(true);
@@ -33,10 +34,11 @@
                    <StockCharts />
                </Panel>
                <Panel title="库存类型">
                    {/* <Task /> */}
                    <TaskCharts />
                </Panel>
                <Panel title="AGV信息">
                    {/* <AgvPanel /> */}
                    {/* <AgvCharts /> */}
                    <CapacityCharts />
                </Panel>
            </div>
            <div