index.js

/* eslint-disable prettier/prettier */
/* eslint-disable global-require */
import React, {
  useCallback,
  useEffect,
  useState,
} from 'react';

import {
  Space,
  Spin,
} from 'antd';
import classNames from 'classnames';
import { connect } from 'react-redux';

import { actionCreators } from '../../containers/App/store';
import SecurityLayout from '../../layouts/SecurityLayout';
import LoginAction from '../user/login/login';
import styles from './index.less';

class WaterBox extends React.Component {
  // eslint-disable-next-line no-useless-constructor
  constructor(props) {
    super(props);
  }

  renderList(data) {
    const { callback } = this.props;
    /* eslint-disable */
    return (
      data &&
      data.length &&
      data.map(item => (
        <div
          className={classNames(styles.bootPageltbCase, styles.bootPageitem)}
          type={item}
          key={item}
        >
          <div
            className={styles.bootPageitemBall}
            onClick={event => callback(event, item)}
          >
            <img
              className={styles.bootPageitemb}
              src={require(`../../assets/transitionalpage/${item}球.png`)}
            />
            <img
              className={styles.bootPageitemc}
              src={require(`../../assets/transitionalpage/旋转圆.png`)}
            />
          </div>
          <div>{item}</div>
        </div>
      ))
    );
  }
  render() {
    const data = ['供水', '农饮水', '排水', '节水'];
    return (
      <div className={styles.bootPagelTop}>
        <div className={styles.bootPageltTitle}>
          <b>智慧水务</b>
          <span>SMART WATER</span>
        </div>
        <div className={styles.bootPageltBox}>{this.renderList(data)}</div>
      </div>
    );
  }
}
class ProjectBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      项目案例: false,
      智慧能源: false,
      智慧消防: false,
    };
  }
  mouseOveHandle(type) {
    this.setState({
      [type]: true,
    });
  }
  mouseOutHandle(type) {
    this.setState({
      [type]: false,
    });
  }
  renderList(data) {
    const { callback } = this.props;
    return (
      data &&
      data.length &&
      data.map(item => {
        return (
          <div
            style={{
              background: `url(${require('../../assets/transitionalpage/' +
                item +
                '项目案例.png')})`,
            }}
            key={item}
          >
            <div
              className={classNames(styles.bootPagelbBox, styles.bootPageitem)}
              type={item}
              onClick={event => callback(event, item)}
              style={{
                background: `url(${require('../../assets/transitionalpage/' +
                  item +
                  '图.jpg')})`,
              }}
              onMouseEnter={e => this.mouseOveHandle(item)}
              onMouseLeave={e => this.mouseOutHandle(item)}
            >
              <img
                src={
                  this.state[item]
                    ? require(`../../assets/transitionalpage/${item}图动.gif`)
                    : require(`../../assets/transitionalpage/${item}图.jpg`)
                }
              />
              <div>{item}</div>
            </div>
          </div>
        );
      })
    );
  }
  render() {
    const data = ['项目案例', '智慧能源', '智慧消防'];
    return (
      <div className={styles.bootPagelBottom}>{this.renderList(data)}</div>
    );
  }
}
class RightBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      智能大数据: false,
      智能实验室: false,
    };
  }
  mouseOveHandle(type) {
    this.setState({
      [type]: true,
    });
  }
  mouseOutHandle(type) {
    this.setState({
      [type]: false,
    });
  }
  renderList(data) {
    const { callback } = this.props;
    return (
      data &&
      data.length &&
      data.map(item => {
        return (
          <div
            className={styles.bootPagerBox}
            type={item}
            key={item}
            onClick={event => callback(event, item)}
            style={{
              background: `url(${require('../../assets/transitionalpage/' +
                item +
                '图.jpg')})`,
            }}
            onMouseEnter={e => this.mouseOveHandle(item)}
            onMouseLeave={e => this.mouseOutHandle(item)}
          >
            <img
              src={
                this.state[item]
                  ? require(`../../assets/transitionalpage/${item}图动.gif`)
                  : require(`../../assets/transitionalpage/${item}图.jpg`)
              }
            />
            <div className={styles.bootPagebTitle}>{item}</div>
          </div>
        );
      })
    );
  }
  render() {
    const data = ['智能大数据', '智能实验室'];
    return <div className={styles.bootPageRight}>{this.renderList(data)}</div>;
  }
}
const BootPage = props => {
  const [loadding, setLoadding] = useState(false);
  const [scale, setScale] = useState(1);
  const intl = useIntl();
  const handlePage = useCallback((event, type) => {
    event.persist();
    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.getUserInfoAndConfig('', true, type);

    // eslint-disable-next-line no-shadow
    loginAction.events.on('toggleIndustry', event => {
      setLoadding(false);
      props.history.push(`/?client=${props.global.client}`);
      window.share.event.emit('triggerMicro', props.global);
      props.updateCurrentIndex(0);
      // eslint-disable-next-line no-restricted-globals
      location.reload();
    });
  }, []);
  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);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  });
  return (
    <SecurityLayout>
      <div className={styles.bootPage}>
        <div className={styles.bootPageMain}>
          <header className={styles.bootPageHead}>
            <img
              src={require(`../../assets/transitionalpage/熊猫图标.png`)}
              alt=""
            />
            <div className={styles.bootPageTitle}>
              <span className={styles.bootPageZh}>
                {intl.formatMessage({id: 'pages.settings.bootpage.title'})}
              </span>
            </div>
          </header>
          <section className={styles.bootPageSection}>
            <div
              className={classNames(
                styles.bootPagesContent,
                'animate__animated',
              )}
              style={{
                transform: `scale(${scale})`,
                opacity: 1,
              }}
            >
              <div className={styles.bootPageLeft}>
                <WaterBox callback={handlePage} />
                <ProjectBox callback={handlePage} />
              </div>
              <RightBox callback={handlePage} />
            </div>
          </section>
          <div className={styles.bootPagecopyright}>
            Copyright ©
            <a target="_blank" href="https://panda-water.cn">
              熊猫智慧水务
            </a>
            {new Date().getFullYear()} All Rights Reserved
            <a target="_blank" id="IndexCaseNumber" href="">
              沪ICP备11036640-1
            </a>
          </div>
          <Space className={styles.abs}>
            <Spin spinning={loadding} size="large" />
          </Space>
        </div>
      </div>
    </SecurityLayout>
  );
};
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);