index.js

/* eslint-disable global-require */
// 云平台引导页
import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';

import { Space, Spin, Progress } from 'antd';
import classNames from 'classnames';
import { connect } from 'react-redux';
import { useIntl } from '@wisdom-utils/components';
import { useDocumentTitle } from '@ant-design/pro-utils';
import { useHistory } from '@wisdom-utils/runtime';
import defaultSetting from '@wisdom-utils/components/lib/AppLayout/layouts/defaultSettings';
import { actionCreators } from '@/containers/App/store';
import LoginAction from '@/pages/user/login/login';
import { defaultApp } from '@/micro';
import usingIcon from '@/assets/bootPage/using-icon.png';
import { appService } from '@/api';
import styles from './index.less';

const industries = [
  { name: '供水', type: '供水', subTitle: 'WATER SUPPLY', color: 'rgb(16,104,239)' },
  { name: '农饮水', type: '农饮水', subTitle: 'RURAL POTABLE WATER', color: 'rgb(4,142,101)' },
  { name: '排水', type: '排水', subTitle: 'DRAINAGE', color: 'rgb(234,117,28)' },
  { name: '水利', type: '水利', subTitle: 'WATER CONSERVANCY', color: 'rgb(0,144,158)' },
  { name: '能源', type: '能源', subTitle: 'ENERGY SOURCES', color: 'rgb(49,139,27)' },
  { name: '高品质水', type: '高品质水', subTitle: 'HIGH QUALITY WATER', color: 'rgb(106,208,218)' },
  // { name: '水资源', type: '水资源', subTitle: 'WATER RESOURCES' },
  { name: '熊猫智能实验室', type: '实验室', subTitle: 'PANDA AI. LAB', color: 'rgb(104,163,242)' },
  { name: '水务大数据', type: '大数据', subTitle: 'WATER BIG DATA', color: 'rgb(85,77,210)' },
  { name: '熊猫新产品', type: '熊猫新产品', subTitle: "PANDA'S NEW PRODUCT", color: 'rgb(12,103,205)' },
  { name: '项目案例', type: '项目案例', subTitle: 'PROJECT CASE', color: 'rgb(107,36,155)' },
];

// let loginAction = null;
const BootPage = props => {
  const dataRef = useRef();
  const process = useRef();
  const [Industries] = useState(props.global.userInfo.Industries);
  const [percentBottom, setPercentBottom] = useState(-40);
  const [percentNum, setPercentNum] = useState(0);
  const [currentType, setCurrentType] = useState('');
  // const [loadding, setLoadding] = useState(false);
  const [hasRole, setHasRole] = useState(false);
  const [scale, setScale] = useState(1);
  const [loginAction, setAction] = useState(() => new LoginAction(props));
  const [num] = useState(Industries.filter(item => !!industries.find(d => d.type === item)).length);
  // const history = useHistory();
  useDocumentTitle(
    { title: defaultSetting.title, id: '', pageName: '行业切换' },
    props.global.title || defaultSetting.title,
  );
  useEffect(() => {
    dataRef.current = percentNum;
  }, [percentNum]);
  // eslint-disable-next-line no-shadow
  const handlePage = (event, type, loginAction) => {
    let count = 1;
    setPercentBottom(-40 + Math.ceil(Math.random() * 8 * count));
    setPercentNum(Math.ceil(Math.random() * 10));
    setCurrentType(type);
    //
    // event.persist();
    // event.preventDefault();
    process.current = setInterval(() => {
      setTimeout(() => {
        const perBottom = -40 + 8 * count + Math.ceil(Math.random() * 8);
        const perNum = 10 * count + Math.ceil(Math.random() * 10);
        if (perNum >= 80 || dataRef.current >= 80 || count === 10) {
          return clearInterval(process.current);
        }
        setPercentBottom(perBottom);
        setPercentNum(perNum);
        count += 1;
      }, 0);
    }, 3000);
    // 新增熊猫新产品引导页
    if (type === '熊猫新产品') {
      setTimeout(() => {
        setPercentBottom(40);
        setPercentNum(100);
        clearInterval(process.current);
        setTimeout(() => {
          props.history.push('/cloud/introduction/newproducts');
          // window.history.pushState('', null, `/cloud/introduction/newproducts`);
        }, 500);
      });

      return;
    }

    // setLoadding(true);
    const config = props.global;
    // const loginAction = new LoginAction(props);
    config.uiwidgets = [];
    config.widgets = [];
    config.allWidgets = [];
    props.instance && props.instance.updateConfig(config);
    // props.instance && props.instance.getUserInfoAndConfig('', true, type);
    loginAction && loginAction.getUserInfoAndConfig('', true, type);
  };

  useEffect(() => {
    // eslint-disable-next-line no-use-before-define
    handleResize();
  }, []);
  const handleResize = () => {
    const width = document.documentElement.clientWidth;
    const height = document.documentElement.clientHeight;
    // eslint-disable-next-line no-shadow
    const scale = width / 1920;
    setScale(scale);
  };
  useEffect(() => {
    window.addEventListener('resize', handleResize);

    const handleToggleIndustry = event => {
      setPercentBottom(38);
      setPercentNum(98);
      clearInterval(process.current);
      setTimeout(() => {
        props.history.push(`/?client=${props.global.client}`);
      }, 1000);

      // window.share.event.emit('triggerMicro', props.global);
      props.updateCurrentIndex(0);

      defaultApp();
    };
    loginAction.events.on('toggleIndustry', handleToggleIndustry);

    return () => {
      window.removeEventListener('resize', handleResize);
      loginAction.events.removeListener('toggleIndustry', handleToggleIndustry);
    };
  }, [loginAction.events, props, currentType]);

  useEffect(() => {
    window.share.event.on('visible', ret => {
      setTimeout(() => {
        setPercentBottom(40);
        setPercentNum(100);
        clearInterval(process.current);
        setTimeout(() => {
          window.history.pushState(null, '', ret);
        }, 500);
      }, 500);
    });
  }, []);

  const intl = useIntl();
  const toOMSUsingAnalysis = e => {
    e && e.stopPropagation();
    props.history.push(`/cloud/analysis/using`);
  };

  // const test = `bootPageUl_${props.global && props.global.userInfo && props.global.userInfo.Industries
  //   ? props.global.userInfo.Industries.filter(item => !!industries.find(d => d.type === item)).length
  //   : 0`

  useEffect(() => {
    appService
      .getUserInfo({
        token: props.global.token,
        subOID: 'subOID',
        site: 'cloud',
        ignoreSite: true,
      })
      .then(res => {
        const roles = res?.data?.roles ?? [];
        // eslint-disable-next-line no-underscore-dangle
        const _hasRole = roles && Array.isArray(roles) && roles.filter(r => r.name === '客户运维管理员').length;
        setHasRole(!!_hasRole);
      });
  }, [props.global.token]);

  return (
    <div className={styles.bootPage}>
      <div className={styles.bootPageMain}>
        <header className={styles.bootPageHead}>
          {/* eslint-disable-next-line jsx-a11y/alt-text */}
          <img src="https://panda-water.cn/web4/assets/images/bootPage/熊猫图标.png" />
          <div className={styles.bootPageTitle}>
            <span className={styles.bootPageZh}>熊猫智慧水务一体化解决方案</span>
            <span className={styles.bootPageEn}>Panda Smart Water Integration Platform & Solution</span>
          </div>
        </header>
        <section
          className={classNames(styles.bootPageSection, 'animate__fadeInDown', 'animate__animated', 'duration-500ms')}
          // style={{
          //   width: `${scale < 1 ? 1280 : Math.ceil(1280 * scale)}px`,
          // }}
        >
          <ul
            className={classNames(styles.bootPageUl, 'animate__animated')}
            style={{
              transform: `scale(${scale})`,
              left: '300px',
              bottom: '105px',
              opacity: 1,
              width: num === 5 ? 960 : num === 9 || num === 10 ? 1600 : 1280,
            }}
          >
            {industries.map(
              item =>
                props.global &&
                Industries.indexOf(item.type) > -1 && (
                  <li
                    className={styles.bootPageLi}
                    key={item.type}
                    onClick={event => handlePage(event, item.type, loginAction)}
                  >
                    <div className={styles.bootPageList}>
                      <div className={styles.listMain}>
                        <img src={require(`@/assets/bootPage/${item.type}.png`)} alt="" />
                        <span className={styles.bootPageName}>{item.name}</span>
                        <span className={styles.bootPageNameEng}>{item.subTitle}</span>
                      </div>
                    </div>
                    {currentType === item.type && (
                      <div className={styles.bootProgress}>
                        <div className={styles.inner} style={{ bottom: percentBottom }}>
                          <svg
                            className={styles.wave}
                            xmlns="http://www.w3.org/2000/svg"
                            xmlnsXlink="http://www.w3.org/1999/xlink"
                            viewBox="0 24 150 68"
                            preserveAspectRatio="none"
                          >
                            <defs>
                              <path
                                id="gentle-wave"
                                d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
                              />
                            </defs>
                            <g className={styles.parallax}>
                              <use xlinkHref="#gentle-wave" x="50" y="0" fill={item.color} opacity="0.1" />
                              <use xlinkHref="#gentle-wave" x="50" y="-1" fill={item.color} opacity="0.2" />
                            </g>
                          </svg>
                        </div>
                      </div>
                    )}
                  </li>
                ),
            )}
          </ul>
        </section>
        {/* <Space className={styles.abs}> */}
        {/*  <Spin spinning={loadding} size="large" /> */}
        {/* </Space> */}
      </div>
      {hasRole ? (
        <div className={styles.cloudMonitorBtns}>
          <div className="cloud-using-anaylysis-btn" onClick={toOMSUsingAnalysis}>
            <img src={usingIcon} alt="" title="点击查看平台使用监控" />
            <span>平台使用分析</span>
          </div>
        </div>
      ) : null}
    </div>
  );
};
const mapStateToProps = state => ({
  global: state.getIn(['global', 'globalConfig']),
  instance: state.getIn(['global', 'instance']),
});
const mapDispatchToProps = dispatch => ({
  updateConfig(config) {
    dispatch(actionCreators.getConfig(config));
  },
  createContext(data) {
    dispatch(actionCreators.createContext(data));
  },
  updateCurrentIndex(index) {
    dispatch(actionCreators.updateCurrentIndex(index));
  },
});
export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(BootPage);