#

luxiaotao1123

2024-04-28 201321e7379ebc00a80fd48415ece152481801fb

#

 package-lock.json

@@ -15,6 +15,8 @@
        "@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",
@@ -6633,6 +6635,33 @@
      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
      "dev": true
    },
    "node_modules/echarts": {
      "version": "5.5.0",
      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.0.tgz",
      "integrity": "sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==",
      "dependencies": {
        "tslib": "2.3.0",
        "zrender": "5.5.0"
      }
    },
    "node_modules/echarts-for-react": {
      "version": "3.0.2",
      "resolved": "https://registry.npmmirror.com/echarts-for-react/-/echarts-for-react-3.0.2.tgz",
      "integrity": "sha512-DRwIiTzx8JfwPOVgGttDytBqdp5VzCSyMRIxubgU/g2n9y3VLUmF2FK7Icmg/sNVkv4+rktmrLN9w22U2yy3fA==",
      "dependencies": {
        "fast-deep-equal": "^3.1.3",
        "size-sensor": "^1.0.1"
      },
      "peerDependencies": {
        "echarts": "^3.0.0 || ^4.0.0 || ^5.0.0",
        "react": "^15.0.0 || >=16.0.0"
      }
    },
    "node_modules/echarts/node_modules/tslib": {
      "version": "2.3.0",
      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
    },
    "node_modules/ee-first": {
      "version": "1.1.1",
      "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -7253,8 +7282,7 @@
    "node_modules/fast-deep-equal": {
      "version": "3.1.3",
      "resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
      "dev": true
      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
    },
    "node_modules/fast-glob": {
      "version": "3.3.2",
@@ -12639,6 +12667,11 @@
      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
      "peer": true
    },
    "node_modules/size-sensor": {
      "version": "1.0.2",
      "resolved": "https://registry.npmmirror.com/size-sensor/-/size-sensor-1.0.2.tgz",
      "integrity": "sha512-2NCmWxY7A9pYKGXNBfteo4hy14gWu47rg5692peVMst6lQLPKrVjhY+UTEsPI5ceFRJSl3gVgMYaUi/hKuaiKw=="
    },
    "node_modules/slash": {
      "version": "3.0.0",
      "resolved": "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz",
@@ -14074,6 +14107,19 @@
      "integrity": "sha512-raRj6r0gPzopFm5XWBJZr/NuV4EEnT4iE+U3dp5FV5pCb588Gmm3zLIp/j9yqqcMiHH8VNQlerLTgOqL7krh6w==",
      "peer": true
    },
    "node_modules/zrender": {
      "version": "5.5.0",
      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.5.0.tgz",
      "integrity": "sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==",
      "dependencies": {
        "tslib": "2.3.0"
      }
    },
    "node_modules/zrender/node_modules/tslib": {
      "version": "2.3.0",
      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
    },
    "node_modules/zustand": {
      "version": "3.7.2",
      "resolved": "https://registry.npmmirror.com/zustand/-/zustand-3.7.2.tgz",

 package.json

@@ -23,7 +23,9 @@
    "react-router-dom": "^6.15.0",
    "react-spring": "^9.7.1",
    "three": "^0.153.0",
    "valtio": "^1.12.1"
    "valtio": "^1.12.1",
    "echarts": "^5.4.2",
    "echarts-for-react": "^3.0.2"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",

 src/components/panel.jsx

@@ -42,18 +42,20 @@
    });
  };

  console.log(styles);

  return (
    <div className="w-full mt-2" ref={cardRef}>
      {/* <BorderBox8 dur={12}> */}
      <div>
        <animated.div
          className={`border  border-solid ${styles['animate-border-glow']} ${styles.card} `}
          className={`border border-solid ${styles['animate-border-glow']} ${styles.card} `}
          style={{ transform: xys.to(trans) }}
          onMouseLeave={handleMouseLeave}
          onMouseMove={handleMouseMove}
        >
          {props.title && (
            <p className={`${styles.title} text-sm  flex justify-between border-solid`}>
            <p className={`${styles.title} text-sm flex justify-between`}>
              {props.title} {props.right}
            </p>
          )}

 src/pages/left/components/AgvPanel.tsx

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

const AgvPanel = () => {
  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 AgvPanel;

 src/pages/left/components/Capacity.tsx

New file
@@ -0,0 +1,89 @@
// 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 options = {
    title: {
      text: '一周库容曲线图',
      top: 16,
      left: 16,
      textStyle: {
        color: '#FBFBFB',
        //字体风格,'normal','italic','oblique'
        fontStyle: 'normal',
        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
        fontWeight: 'bold',
        //字体系列
        fontFamily: 'sans-serif',
        //字体大小
        fontSize: 15,
      },
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#414348',
        },
      },
      axisLabel: {
        textStyle: {
          color: 'white',
        },
      },
      axisLine: {
        show: false,
      },
      data: data.map((item) => item.reportDate.split(' ')[0]),
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: false,
      },
    },
    grid: {
      x: 50,
      y: 50,
      x2: 20,
      y2: 30,
    },
    series: [
      {
        data: data.map((item) => item.emptyLocationTotal),
        type: 'line',
        smooth: true,
        lineStyle: {
          color: '#06CDCE',
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#06CDCE' },
              { offset: 1, color: '#06CDCE00' },
            ]),
          },
        },
      },
    ],
  };

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

 src/pages/left/components/Task.tsx

New file
@@ -0,0 +1,157 @@
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 trafficWay = [
    {
      name: 'HG',
      value: 20,
    },
    {
      name: 'RG',
      value: 10,
    },
    {
      name: 'MG',
      value: 20,
    },
    {
      name: 'FM',
      value: 10,
    },
    {
      name: 'PG',
      value: 30,
    },
  ];

  const data = [];
  const color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00'];
  for (let i = 0; i < trafficWay.length; i++) {
    data.push(
      {
        value: trafficWay[i].value,
        name: trafficWay[i].name,
        itemStyle: {
          normal: {
            borderWidth: 5,
            shadowBlur: 20,
            borderColor: color[i],
            shadowColor: color[i],
          },
        },
      },
      {
        value: 2,
        name: '',
        itemStyle: {
          normal: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            color: 'rgba(0, 0, 0, 0)',
            borderColor: 'rgba(0, 0, 0, 0)',
            borderWidth: 0,
          },
        },
      }
    );
  }
  const seriesOption = [
    {
      name: '',
      type: 'pie',
      clockWise: false,
      radius: [35, 39],
      center: ['50%', '35%'],
      hoverAnimation: false,
      itemStyle: {
        normal: {
          label: {
            show: true,
            position: 'outside',
            color: '#ddd',
            formatter: function (params) {
              let percent = 0;
              let total = 0;
              for (let i = 0; i < trafficWay.length; i++) {
                total += trafficWay[i].value;
              }
              percent = ((params.value / total) * 100).toFixed(0);
              if (params.name !== '') {
                return '' + params.name + '\n' + '\n' + '' + percent + '%';
              } else {
                return '';
              }
            },
          },
          labelLine: {
            length: 10,
            length2: 20,
            show: true,
            color: '#00ffff',
          },
        },
      },
      data: data,
    },
  ];
  const option = {
    color: color,
    title: {
      text: '',
      top: '48%',
      textAlign: 'center',
      left: '49%',
      textStyle: {
        color: '#fff',
        fontSize: 18,
        fontWeight: '400',
      },
    },
    tooltip: {
      show: true,
    },
    legend: {
      icon: 'circle',
      // 设置icon大小
      itemWidth: 8,
      orient: 'horizontal',
      // x: 'left',
      data: ['HG', 'RG', 'MG', 'FM', 'PG'],
      left: 10,
      bottom: 20,
      align: 'left',
      textStyle: {
        color: '#fff',
      },
      itemGap: 10,
    },
    toolbox: {
      show: false,
    },
    grid: {
      // left: '25%', // 调整网格左侧位置
      // top: '20%', // 调整网格顶部位置
      // right: '25%', // 调整网格右侧位置
      // bottom: '20%', // 调整网格底部位置
    },
    series: seriesOption,
  };
  return (
    <>
      <div>
        <ReactECharts style={{ height: '200px' }} option={option} />
      </div>
    </>
  );
};

export default Task;

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

New file
@@ -0,0 +1,202 @@
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 StockCharts = () => {
  // const { data } = useRequest(() => GetCurrentLocationSummary({}), {
  //   ...config,
  // });

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

  var barWidth = 3;
  const option3_xdata = [
    'A12',
    'A2',
    'A3',
    'A4',
    'A5',
    'A7',
    'B1',
    'B3',
    'Y2',
    'Y1',
    'C1',
    'C2',
    'C4',
    'A1',
    'B4',
    'C6',
  ];
  const option3_Ydata = [75, 62, 57, 42, 35, 32, 29, 27, 75, 62, 57, 42, 35, 32, 29, 27];

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

  const option = {
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'item',
    },
    grid: {
      borderWidth: 0,
      top: '10',
      left: '10',
      right: '30',
      bottom: '3%',
    },
    // color: color,
    yAxis: [
      {
        inverse: true,
        type: 'category',
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: false,
          inside: false,
        },
        data: option3_xdata,
      },
    ],
    xAxis: {
      type: 'value',

      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
    dataZoom: [
      {
        type: 'slider',
        show: true,
        yAxisIndex: [0],
        right: 0,
        width: 8,
        height: '84%',
        top: '7%',
        start: 0,
        end: 50,
        zoomLock: true,
        // show: false,
        showDetail: false,
        showDataShadow: false,
        brushSelect: false,
        fillerColor: 'rgba(200,200,200,.3)',
        backgroundColor: 'rgba(200,200,200,.05)',
        borderColor: 'transparent',
        handleSize: '0%',
      },
    ],

    series: [
      {
        name: '',
        type: 'bar',
        zlevel: 2,
        barWidth: barWidth,
        itemStyle: {
          normal: {
            barBorderRadius: 2,
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                offset: 0,
                color: '#248ff7',
              },
              {
                offset: 1,
                color: '#6851f1',
              },
            ]),
          },
          emphasis: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#2378f7' },
              { offset: 1, color: '#83bff6' },
            ]),
          },
        },
        data: option3_Ydata,
        animationDuration: 1500,
        label: {
          normal: {
            color: '#555',
            show: true,
            position: [0, '-16px'],
            textStyle: {
              fontSize: 12,
              color: '#fff',
            },
            formatter: function (a, b) {
              return a.name;
            },
          },
        },
      },
      {
        // 背景
        type: 'pictorialBar',
        animationDuration: 0,
        symbolRepeat: 'fixed',
        symbolMargin: '20%',
        symbol: 'roundRect',
        symbolSize: [barWidth * 1.2, barWidth],
        itemStyle: {
          normal: {
            color: 'rgba(200,200,200,.06)',
          },
        },
        label: {
          normal: {
            color: '#fff',
            show: true,
            position: 'right',
            textStyle: {
              fontSize: 12,
              color: '#fff',
            },
            formatter: function (a) {
              // console.log(a);
              return option3_Ydata[a.dataIndex];
            },
          },
        },
        data: option3_Ydatamax,
        z: 0,
        animationEasing: 'elasticOut',
      },
    ],
    animationEasing: 'cubicOut',
  };

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

export default StockCharts;

 src/pages/left/index.jsx

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

import Panel from '@/components/panel';

// import Buffer from './modules/Buffer';
import StockCharts from './components/stock-charts';
// import Task from './modules/Task';
// import AgvPanel from './modules/AgvPanel';

@@ -30,7 +30,7 @@
        >
            <div className="h-full overflow-auto">
                <Panel title="库房情况">
                    {/* <Buffer /> */}
                    <StockCharts />
                </Panel>
                <Panel title="库存类型">
                    {/* <Task /> */}