index.js 4.25 KB
Newer Older
邓晓峰's avatar
邓晓峰 committed
1
import React, { useCallback, useState, useEffect } from 'react';
邓晓峰's avatar
邓晓峰 committed
2

邓晓峰's avatar
邓晓峰 committed
3
import { Space, Spin } from 'antd';
邓晓峰's avatar
邓晓峰 committed
4 5 6
import classNames from 'classnames';
import { connect } from 'react-redux';

邓晓峰's avatar
邓晓峰 committed
7
import { actionCreators } from '../../containers/App/store';
邓晓峰's avatar
邓晓峰 committed
8
import SecurityLayout from '../../layouts/SecurityLayout';
邓晓峰's avatar
邓晓峰 committed
9
import LoginAction from '../user/login/login';
邓晓峰's avatar
邓晓峰 committed
10 11 12
import styles from './index.less';

const industries = ['供水', '排水', '消防', '暖通', '节水', '实验室'];
邓晓峰's avatar
邓晓峰 committed
13 14 15 16 17 18 19 20 21 22 23 24 25 26
const renderIndustries = (config, callback) =>
  industries.map(item => (
    <li
      className={styles.bootPageLi}
      key={item}
      onClick={event => callback(event, item)}
    >
      <div className={styles.bootPageList}>
        <div className={styles.listMain}>
          <img
            src={`https://panda-water.cn/web4/assets/images/bootPage/${item}.png`}
            alt=""
          />
          <span>{item}</span>
邓晓峰's avatar
邓晓峰 committed
27
        </div>
邓晓峰's avatar
邓晓峰 committed
28 29 30
      </div>
    </li>
  ));
邓晓峰's avatar
邓晓峰 committed
31 32
const BootPage = props => {
  const [loadding, setLoadding] = useState(false);
邓晓峰's avatar
邓晓峰 committed
33
  const [scale, setScale] = useState(1);
邓晓峰's avatar
邓晓峰 committed
34 35
  const handlePage = useCallback((event, type) => {
    event.persist();
叶飞's avatar
叶飞 committed
36
    setLoadding(true);
邓晓峰's avatar
邓晓峰 committed
37
    const config = props.global;
邓晓峰's avatar
邓晓峰 committed
38
    const loginAction = new LoginAction(props);
邓晓峰's avatar
邓晓峰 committed
39 40 41 42
    config.uiwidgets = [];
    config.widgets = [];
    config.allWidgets = [];
    props.instance && props.instance.updateConfig(config);
邓晓峰's avatar
邓晓峰 committed
43
    // props.instance && props.instance.getUserInfoAndConfig('', true, type);
叶飞's avatar
叶飞 committed
44
    loginAction.getUserInfoAndConfig('', true, type);
邓晓峰's avatar
邓晓峰 committed
45

邓晓峰's avatar
邓晓峰 committed
46
    // eslint-disable-next-line no-shadow
邓晓峰's avatar
邓晓峰 committed
47 48 49 50
    loginAction.events.on('toggleIndustry', event => {
      setLoadding(false);
      props.history.push(`/?client=${props.global.client}`);
      window.share.event.emit('triggerMicro', props.global);
邓晓峰's avatar
邓晓峰 committed
51 52
      props.updateCurrentIndex(0);
      // eslint-disable-next-line no-restricted-globals
邓晓峰's avatar
邓晓峰 committed
53 54
      location.reload();
    });
邓晓峰's avatar
邓晓峰 committed
55
  }, []);
邓晓峰's avatar
邓晓峰 committed
56
  useEffect(() => {
邓晓峰's avatar
邓晓峰 committed
57
    // eslint-disable-next-line no-use-before-define
邓晓峰's avatar
邓晓峰 committed
58 59 60 61 62
    handleResize();
  }, []);
  const handleResize = () => {
    const width = document.documentElement.clientWidth;
    const height = document.documentElement.clientHeight;
邓晓峰's avatar
邓晓峰 committed
63
    // eslint-disable-next-line no-shadow
邓晓峰's avatar
邓晓峰 committed
64 65
    const scale = width / 1920;
    setScale(scale);
邓晓峰's avatar
邓晓峰 committed
66
  };
邓晓峰's avatar
邓晓峰 committed
67
  useEffect(() => {
邓晓峰's avatar
邓晓峰 committed
68
    window.addEventListener('resize', handleResize);
邓晓峰's avatar
邓晓峰 committed
69
    return () => {
邓晓峰's avatar
邓晓峰 committed
70 71 72
      window.removeEventListener('resize', handleResize);
    };
  });
邓晓峰's avatar
邓晓峰 committed
73 74 75 76 77
  return (
    <SecurityLayout>
      <div className={styles.bootPage}>
        <div className={styles.bootPageMain}>
          <header className={styles.bootPageHead}>
邓晓峰's avatar
邓晓峰 committed
78
            {/* eslint-disable-next-line jsx-a11y/alt-text */}
叶飞's avatar
叶飞 committed
79
            <img src="https://panda-water.cn/web4/assets/images/bootPage/熊猫图标.png" />
邓晓峰's avatar
邓晓峰 committed
80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98
            <div className={styles.bootPageTitle}>
              <span className={styles.bootPageZh}>
                熊猫智慧城市监控管理解决方案
              </span>
              <span className={styles.bootPageEn}>
                Panda Smart City Monitoring Management Platform & Solution
              </span>
            </div>
          </header>
          <section
            className={classNames(
              styles.bootPageSection,
              'animate__fadeInDown',
              'animate__animated',
            )}
          >
            <ul
              className={classNames(styles.bootPageUl, 'animate__animated')}
              style={{
邓晓峰's avatar
邓晓峰 committed
99
                transform: `scale(${scale})`,
邓晓峰's avatar
邓晓峰 committed
100 101 102 103 104 105 106 107
                left: '300px',
                bottom: '105px',
                opacity: 1,
              }}
            >
              {renderIndustries(props.global, handlePage)}
            </ul>
          </section>
邓晓峰's avatar
邓晓峰 committed
108
          <Space className={styles.abs}>
叶飞's avatar
叶飞 committed
109
            <Spin spinning={loadding} size="large" />
邓晓峰's avatar
邓晓峰 committed
110
          </Space>
邓晓峰's avatar
邓晓峰 committed
111 112 113 114 115
        </div>
      </div>
    </SecurityLayout>
  );
};
叶飞's avatar
叶飞 committed
116 117 118 119
const mapStateToProps = state => ({
  global: state.getIn(['global', 'globalConfig']),
  instance: state.getIn(['global', 'instance']),
});
邓晓峰's avatar
邓晓峰 committed
120 121 122 123 124 125 126 127 128 129 130
const mapDispatchToProps = dispatch => ({
  updateConfig(config) {
    dispatch(actionCreators.getConfig(config));
  },
  createContext(data) {
    dispatch(actionCreators.createContext(data));
  },
  updateCurrentIndex(index) {
    dispatch(actionCreators.updateCurrentIndex(index));
  },
});
邓晓峰's avatar
邓晓峰 committed
131 132
export default connect(
  mapStateToProps,
邓晓峰's avatar
邓晓峰 committed
133
  mapDispatchToProps,
邓晓峰's avatar
邓晓峰 committed
134
)(BootPage);