#

luxiaotao1123

2024-04-28 9ae47a72e8f73ad8105799801f7c0fbd72213374

#

 src/pages/base.jsx

@@ -10,6 +10,7 @@
import House from '../components/house'
import Warehouse from '../core/warehouse'
import Left from './left'
import Right from './right'

const Base = (props) => {
    return (
@@ -32,6 +33,7 @@
                <Help />
            </Canvas>
            <Left />
            <Right />
        </div>

    )

 src/pages/left/index.jsx

@@ -11,14 +11,13 @@
import CapacityCharts from './components/capacity-charts';

const Left = () => {
    const [isExpanded, setIsExpanded] = useState(true);
    // 定义动画属性
    const [isExpanded, setIsExpanded] = useState(false);

    const containerAnimation = useSpring({
        transform: isExpanded ? 'translate(0%)' : 'translateX(-100%)',
        config: { precision: 0.01 },
    });

    // 切换容器状态
    const toggleContainer = () => {
        setIsExpanded(!isExpanded);
    };

 src/pages/right/components/Allerway.jsx

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

// const Allerway = () => {
//   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],
//   };
//   return (
//     <ScrollBoard
//       config={config}
//       style={{ width: '100%', height: '220px', fontSize: '12px', marginBottom: '8px' }}
//     />
//   );
// };

// export default Allerway;

 src/pages/right/components/Handles.jsx

New file
@@ -0,0 +1,37 @@
// import { observer, ThreeStoreContext, ThreeStore } from 'mobx-threejs-store';
// import React, { useContext, useState } from 'react';
// import { Button, Form, Input, Radio, Switch } from 'antd';

// const Tools = () => {
//   const mobxStore = useContext(ThreeStoreContext);
//   const [formLayout, setFormLayout] = useState('inline');
//   // console.log('threeStore', ThreeStore.visible);

//   const onFormLayoutChange = (values) => {
//     mobxStore.threeStore.setCameraCtrls({ ...mobxStore.threeStore.cameraCtrls, ...values });
//     // ThreeStore.setVisible(!ThreeStore.visible);
//   };
//   return (
//     <>
//       {/* <p>响应{String(ThreeStore.visible)}</p> */}
//       <Form
//         layout={'inline'}
//         className="absolute bottom-0 left-0 translate-x-[-100%] flex-nowrap w-max"
//         initialValues={{ layout: formLayout }}
//         onValuesChange={onFormLayoutChange}
//       >
//         <Form.Item label="自动巡航" name="autoCruise">
//           <Switch />
//         </Form.Item>
//         <Form.Item label="控制器切换" name="choiceCtrls">
//           <Radio.Group>
//             <Radio value="0">按键控制</Radio>
//             <Radio value="1">自由控制</Radio>
//           </Radio.Group>
//         </Form.Item>
//       </Form>
//     </>
//   );
// };

// export default observer(Tools);

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

New file
@@ -0,0 +1,235 @@
import React from 'react';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts/core';

const StatCharts = () => {
  let chartData = {
    xdata: ['01/01', '01/02', '01/03', '01/04', '01/05'],
    currentYearList: [10, 20, 30, 40, 50],
    lastYearList: [20, 10, 30, 40, 20],
    rateDataOne: [10, 40, 20, 30, 50],
  };
  let dataZoomFlag = false;
  let zoomEnd = 100;
  if (chartData.xdata.length > 6) {
    dataZoomFlag = true;
    zoomEnd = 60;
  }
  let option = {
    grid: {
      top: '10%',
      left: '3%',
      right: '10%',
      bottom: '13%',
    },
    barWidth: 6,
    tooltip: {
      show: true,
      trigger: 'axis',
      formatter: (params) => {
        return (
          params[0].name +
          '<br/>' +
          params[0].seriesName +
          ':' +
          params[0].value +
          '<br/>' +
          params[1].seriesName +
          ':' +
          params[1].value +
          '<br/>' +
          params[2].seriesName +
          ':' +
          params[2].value +
          '%'
        );
      },
    },
    dataZoom: [
      {
        show: dataZoomFlag,
        realtime: true,
        height: 8,
        start: 0,
        textStyle: {
          show: false,
        },
        end: zoomEnd,
        borderColor: 'rgba(255,255,255,0.20)',
        backgroundColor: 'rgba(255,255,255,0.10)',
        bottom: '1%',
      },
      {
        type: 'inside',
        realtime: true,
        start: 0,
        end: 100,
      },
    ],
    xAxis: [
      {
        type: 'category',
        data: chartData.xdata,
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,0.2)',
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          //  改变x轴颜色
          lineStyle: {
            color: 'rgba(255,255,255,0.2)',
            type: 'solid',
          },
        },
        axisLabel: {
          //  改变x轴字体颜色和大小
          show: true,
          textStyle: {
            color: 'rgba(250,250,250,1)',
            fontSize: 12,
          },
        },
      },
    ],
    yAxis: [
      {
        name: '',
        nameTextStyle: {
          color: 'rgb(250,250,250,.7)',
          fontSize: 12,
          padding: [0, 25, 0, 0],
        },
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,0.1)',
            type: 'dotted',
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          //  改变y轴颜色
          show: false,
          lineStyle: {
            color: 'rgba(255,255,255,0.2)',
            type: 'solid',
          },
        },
        axisLabel: {
          //  改变y轴字体颜色和大小
          textStyle: {
            color: 'rgba(250,250,250,0.6)',
            fontSize: 12,
          },
        },
      },
      {
        name: '',
        nameTextStyle: {
          color: 'rgb(250,250,250,.7)',
          fontSize: 12,
          padding: [0, 0, 0, 40],
        },
        show: true,
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            fontSize: 12,
            color: 'rgba(255,255,255, .7)',
          },
        },
      },
    ],
    series: [
      {
        type: 'bar',
        barMinHeight: 0,
        name: '今年',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#1AA0FF',
              },
              {
                offset: 1,
                color: 'rgba(3,14,55,0.6)',
              },
            ]),
            borderWidth: 2,
          },
        },
        data: chartData.currentYearList,
      },
      {
        type: 'bar',
        barMinHeight: 0,
        name: '去年',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#FFBD46',
              },
              {
                offset: 1,
                color: 'rgba(3,14,55,0.6)',
              },
            ]),
            borderWidth: 2,
          },
        },
        data: chartData.lastYearList,
        barCategoryGap: '40%',
      },
      {
        z: 9,
        yAxisIndex: 1,
        name: '增幅',
        type: 'line',
        showAllSymbol: true,
        symbol: 'rect',
        symbolSize: 5,
        itemStyle: {
          color: '#fff',
          width: 1,
          shadowColor: '#fff',
          borderColor: '#44E5BE',
          shadowBlur: 2,
        },
        lineStyle: {
          width: 1,
          color: '#44E5BE',
        },
        data: chartData.rateDataOne,
      },
    ],
  };

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

export default StatCharts;

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

New file
@@ -0,0 +1,140 @@
import React from 'react';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts/core';

const TasksCharts = () => {
  const backgroundColor = '#101736';
  const color = ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05']; //2个以上的series就需要用到color数组
  const legend = {
    //data，就是取得每个series里面的name属性。
    orient: 'horizontal',
    icon: 'circle', //图例形状
    //圆点大小
    padding: 0,
    top: 15,
    right: 10,
    itemWidth: 6, //小圆点宽度
    itemHeight: 6, // 小圆点高度
    itemGap: 6, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
    textStyle: {
      fontSize: 12,
      color: '#ffffff',
    },
  };
  const tooltip = {
    show: true,
    trigger: 'axis',
    axisPointer: {
      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',
      smooth: true,
      symbol: 'emptyCircle', //空心小圆点。线条小圆点形状
      symbolSize: 6, //小圆点大小
      itemStyle: {
        //还是小圆点设置
      },

      label: {
        show: false, //不显示小圆点上的label文字
      },
      lineStyle: {
        width: 1, //线条设置
      },

      areaStyle: {
        //填充线条下面的面积区域颜色。（areaStyle只是锦上添花）
        opacity: 0.4,
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: color[index], // 上处的颜色
            },
            {
              offset: 1,
              color: 'transparent', // 下处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
    };
  };

  seriesData = seriesData.map((item, index) => ({ ...item, ...commonConfigFn(index) }));
  const option = {
    color,
    tooltip,
    legend,
    grid: {
      top: '15%',
      left: '3%',
      right: '4%',
      bottom: '5%',
      containLabel: true,
    },

    xAxis: {
      show: true, //显示x轴+x轴label文字
      type: 'category',
      boundaryGap: false, //从Y轴出发，这个false很好的
      axisLine: {
        show: true, //显示x坐标轴轴线
        lineStyle: {
          color: 'rgba(255,255,255,.4)',
        },
      },
      axisTick: {
        show: false, //不显示x坐标1cm刻度
      },
      axisLabel: {
        color: '#ffffff', //x轴label文字颜色
      },
      splitLine: {
        show: false, //不显示grid竖向分割线
      },

      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#ffffff',
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,.4)',
        },
      },
      splitLine: {
        show: false, //不显示grid水平分割线
      },
    },

    series: seriesData,
  };

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

export default TasksCharts;

 src/pages/right/index.jsx

New file
@@ -0,0 +1,66 @@
import { LeftOutlined, RightOutlined, UnorderedListOutlined } from '@ant-design/icons';
import { useSpring, animated } from 'react-spring';
import { useState } from 'react';
import { Modal } from 'antd';
import styles from '@/styles/panel.module.scss';

import Panel from '@/components/panel';

// import Allerway from './components/Allerway';
import StatCharts from './components/stat-charts';
import TaskCharts from './components/task-charts';
// import Handles from './components/Handles';

const Right = () => {
  const [isExpanded, setIsExpanded] = useState(false);
  
  const containerAnimation = useSpring({
    transform: isExpanded ? 'translate(0%)' : 'translateX(100%)',
    config: { precision: 0.01 },
  });

  const toggleContainer = () => {
    setIsExpanded(!isExpanded);
  };
  return (
    <div>
      <animated.div
        style={{
          ...containerAnimation,
        }}
        className={`absolute top-2 w-[280px] right-2 bottom-2 ${styles.panel}`}
      >
        <div className="overflow-auto h-full">
          <Panel title="出入库信息">
            {/* <Allerway /> */}
          </Panel>
          <Panel title="出入库统计">
            <StatCharts />
          </Panel>
          <Panel title="任务分布">
            <TaskCharts />
          </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'}`}
        >
          {isExpanded ? (
            <RightOutlined
              className="hover:scale-110 transition-transform duration-300"
              onClick={toggleContainer}
            />
          ) : (
            <LeftOutlined
              className="hover:scale-110 transition-transform duration-300 "
              onClick={toggleContainer}
            />
          )}
        </div>
        {/* <Handles /> */}
      </animated.div>

    </div>
  );
};

export default Right;