index.js

/*
 * @Title:
 * @Author: hongmye
 * @Date: 2023-12-26 18:34:42
 */
import { Image, Tooltip, message } from 'antd';
import React, { useMemo, useEffect, useState } from 'react';
import classNames from 'classnames';
import DataCarousel from '../DataCarousel';
import styles from './index.less';
const BottomItem = props => {
  const { projectConfig, listData = [], configData = [], onLineUrl, handToPage, handlePage, industries = [] } = props;
  const isJump = industries.includes('项目案例');
  const [list, setList] = useState([]);
  const [infoData, setInfoData] = useState({});
  const renderNum = (num, type) => {
    const numStr = num ? num.toString() : '0';
    const arr = numStr.split('');

    return arr.map(a => (
      <div className={styles.l_item_num_item} type={type}>
        {a}
      </div>
    ));
  };
  const toPage = (url, col) => {
    if (!isJump) return message.warning('该用户没有权限！');
    if (!url.includes('https')) return;
    if (!url.includes('user/noscret') || projectConfig[col['平台名称']]) {
      return handToPage(url);
    }
    handToPage(url.split('user/noscret')[0]);
  };
  const toMore = (e, url) => {
    if (!isJump) return message.warning('该用户没有权限！');
    handlePage(e, '项目案例');
  };
  const renderCol = (row, rindex) => {
    if (!Array.isArray(row)) return null;
    return (
      <div className={styles.list_item_col}>
        {row.map((col, cIndex) => (
          <div
            key={`${rindex}-${cIndex}`}
            type={col['项目环境'] && col['项目环境'].includes('https') && isJump ? 'jump' : 'none'}
            onClick={() => toPage(col['项目环境'], col)}
            alt="点击体验"
            className={styles.list_item}
          >
            <div className={styles.list_item_img_wrap}>
              <div className={classNames(styles.list_item_img, 'list_item_img')}>
                <Image
                  src={`${onLineUrl}CityInterface/rest/services/filedownload.svc/download/${col['项目图片']}`}
                  style={{ height: '100px', width: '100%', overflow: 'hidden' }}
                  preview={false}
                />
              </div>

              {col['重要程度'] === '样板' ? <div className={styles.list_item_img_tip} /> : null}
            </div>
            <div className={styles.list_item_info_wrap}>
              <div className={styles.list_item_info_tip} type={col['所属行业']}>
                {col['所属行业'] === '能源' ? '节水' : col['所属行业'] === '农饮水' ? '农水' : col['所属行业']}
              </div>
              <div className={styles.list_item_info_name}>
                <Tooltip title={col['平台名称']} color="#1685FF">
                  {col['平台名称']}
                </Tooltip>
              </div>
              <div className={styles.list_item_info_address}>{col['城市']}</div>
            </div>
          </div>
        ))}
      </div>
    );
  };
  const spliceArr = (arr, num) => {
    const reArr = [];
    arr.map(item => {
      if (!reArr[reArr.length - 1] || reArr[reArr.length - 1].length === num) {
        // 新行添加
        reArr.push([]);
      }
      if (reArr[reArr.length - 1].length !== num) {
        // 长度不够则直接添加
        reArr[reArr.length - 1].push(item);
      }
      return null;
    });
    return reArr;
  };
  useEffect(() => {
    const arr = [];
    listData.forEach(i => {
      let str = i['所属省份'];
      if (i['所属省份']) {
        if (str[str.length - 1] === '省') {
          str = str.slice(0, str.length - 1);
        }
      }
      i['城市'] = str;
      arr.push(i);
    });
    setList(spliceArr(arr, 2));
  }, [listData]);
  useEffect(() => {
    const obj = {
      项目数量: '',
      服务客户: '',
      覆盖省份: '',
    };
    configData.forEach(c => {
      if (obj[c['名称']] === '') {
        obj[c['名称']] = c['数值'];
      }
    });

    setInfoData(obj);
  }, [configData]);
  return (
    <div className={classNames(styles.bottom_item, 'demo_bottom_item')}>
      <div className={styles.left}>
        <div className={styles.l_title_wrap}>
          <div className={styles.l_title_sub}>熊猫智慧水务</div>
          <div className={styles.l_title}>项目落地保障：</div>
        </div>
        <div className={styles.l_list}>
          <div className={styles.l_item}>
            <div className={styles.l_item_title} type="项目数量">
              项目数量：
            </div>
            <div className={styles.l_item_num_list}>{renderNum(infoData['项目数量'], '项目数量')}</div>
            <div className={styles.l_item_num_unit}>个</div>
          </div>
          <div className={styles.l_item}>
            <div className={styles.l_item_title} type="服务客户">
              服务客户：
            </div>
            <div className={styles.l_item_num_list}>{renderNum(infoData['服务客户'], '服务客户')}</div>
            <div className={styles.l_item_num_unit}>个</div>
          </div>
          <div className={styles.l_item}>
            <div className={styles.l_item_title} type="覆盖省份">
              覆盖省份：
            </div>
            <div className={styles.l_item_num_list}>{renderNum(infoData['覆盖省份'], '覆盖省份')}</div>
            <div className={styles.l_item_num_unit}>个</div>
          </div>
        </div>
      </div>

      <div className={styles.center}>
        <DataCarousel
          gap={1}
          autoplay={5000}
          itemHeight={270}
          list={list}
          renderItem={renderCol}
          config={{
            direction: 'horizontal',
            width: 1520,
            loop: false,
            slidesPerView: 7,
          }}
        />
      </div>
      <div className={styles.right} onClick={e => toMore(e)}>
        查看全部
      </div>
    </div>
  );
};
export default BottomItem;