tqv-data-operation-screen/src/pages/gvc/component/rightBottomView.jsx

/*
 * @Author: dayan_hjm 累计销量客户
 * @Date: 2023-10-23 09:32:12 
 * @Last Modified by: dayan_hjm
 * @Last Modified time: 2023-11-16 17:05:05
 */

import React, { useState, useEffect, Component } from "react";
import styles from "../style.less";
import { useHistory, useLocation, withRouter } from "react-router-dom";
import mod from '../mod';
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import { Progress } from 'antd';
import { getArrMax,sortby } from "@utils/util";
import {
  rollService,
} from "../api";
import { get, } from "lodash";

@withRouter

class RightBottomView extends Component {
  // 构造函数，组件的实例创建时，最先执行
  constructor(props, context) {
    super(props, context);
    this.store = mod;
    this.state = {
      data_item: [],
    };
  }

  componentDidMount() {
    this.getUrl()
  }

  async getUrl() {
    await rollService().then(({ data=[], resultCode }) => {
      if (+resultCode === 0) {
        let data_item = [];
        const max1 = data.sort(sortby('salesQty',false));
        const max2 = max1?.[0]?.salesQty / 0.95 || 0;
        data.map((x,i)=>{  
          data_item.push({
            name: x.customerName,
            num: x.salesQty,
            percent:Number(x.salesQty / max2).toFixed(2) * 100
          })
        });
        this.setState({data_item});
      }
    });

  }

  render() {
    const { data_item } = this.state;
    const settings = {
      dots: false,
      arrows:false,
      infinite: true,
      autoplay: true,
      autoplaySpeed: 2500,//自动播放的时间
      // fade: true,//是否采用淡入淡出的效果  竖着的滚动方式不能添加此动效
      slidesToShow: data_item.length >= 8 ? 8 : data_item.length,
      slidesToScroll: 1,
      vertical: true,
      verticalSwiping: true,
      beforeChange: function (currentSlide, nextSlide) {
        console.log("before change", currentSlide, nextSlide);
      },
      afterChange: function (currentSlide) {
        console.log("after change", currentSlide);
      }
    };
    return (
      <div className={["eacharView cbRightBottomView slider_item_box"]} style={{height: data_item.length > 8 ? 'auto' : "100%"}}>
        <p className="title_">累计销量客户/吨</p>
        <Slider {...settings}>
          {
            data_item.map((x, i) => {
              return (
                <div className="slider_box">
                  <div className="slider_top">
                    <p>{i + 1}.<span>{x.name}</span></p>
                    <p className="p2">{x.num}</p>
                  </div>
                  <Progress
                    strokeColor={{
                      from: '#a98911cf',
                      to: 'rgb(248,204,41,0.9)',
                    }}
                    percent={x.percent}
                    status="active"
                  />
                </div>
              )
            })
          }

        </Slider>
      </div>
    )
  }
}
export default RightBottomView;