index.js 9.9 KB
Newer Older
1 2 3 4 5 6 7 8 9
/* eslint-disable global-require */
// 集成登录引导页
import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
import { notification } from 'antd';
import classNames from 'classnames';
import { connect } from 'react-redux';
import { useDocumentTitle } from '@ant-design/pro-utils';
import defaultSetting from '@wisdom-utils/components/lib/AppLayout/layouts/defaultSettings';
import { actionCreators } from '@/containers/App/store';
10
import { store } from '@wisdom-utils/utils';
11
import LoginAction from '@/pages/user/login/login';
徐乐's avatar
徐乐 committed
12
import Cookies from 'js-cookie';
13 14 15
import { defaultApp } from '@/micro';
import { appService } from '@/api';
import { SERVICE_INTERFACE_SUCCESS_CODE } from '@/constants';
16
import axios from 'axios';
17 18
import imgLogo from '@/assets/bootPage/熊猫图标.png';
import styles from './index.less';
19 20 21 22 23 24 25 26 27 28
const Integration = props => {
  const dataRef = useRef();
  const [percentBottom, setPercentBottom] = useState(-40);
  const [currentType, setCurrentType] = useState('');
  const [scale, setScale] = useState(1);
  const [loginAction, setAction] = useState(() => new LoginAction(props));
  const [num, setNum] = useState(0);
  const [dataList, setDataList] = useState([]);
  const [client, setClient] = useState('');

29 30
  // 子站跳转
  const handlePage = useCallback((item, loginAction) => {
31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
    let count = 1;
    setPercentBottom(-40 + Math.ceil(Math.random() * 8 * count));

    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);
        count += 1;
      }, 0);
    }, 3000);

李纪文's avatar
李纪文 committed
46 47
    if (item.subType === '外链') {
      if (item.paramValue === 'ticket') {
48
        // 获取临时token
徐乐's avatar
徐乐 committed
49 50
        appService.getTicketByToken({ token: window.globalConfig?.token }).then(res => {
          if (res.code === 0) {
51
            const url = `${item.url + (item.url.indexOf('?') > 0 ? '&' : '?') + item.paramName}=${res.data}`;
李纪文's avatar
李纪文 committed
52 53 54 55 56
            if (item?.openOpt === '当前页打开') {
              props.history.push('/thirdParty', { linkUrl: url });
            } else {
              window.open(url, '_blank');
            }
徐乐's avatar
徐乐 committed
57 58 59 60 61 62 63 64 65
          } else {
            notification.error({
              message: '提示',
              duration: 3,
              description: res.msg,
            });
          }
        });
      } else {
66 67 68
        const url = `${item.url + (item.url.indexOf('?') > 0 ? '&' : '?') + item.paramName}=${
          window.globalConfig?.token
        }`;
李纪文's avatar
李纪文 committed
69 70 71 72 73
        if (item?.openOpt === '当前页打开') {
          props.history.push('/thirdParty', { linkUrl: url });
        } else {
          window.open(url, '_blank');
        }
徐乐's avatar
徐乐 committed
74
      }
李纪文's avatar
李纪文 committed
75
    } else if (item.subType === '内链') {
76 77 78 79
      if (window.qiankunIsCache) {
        store.set('event:dropCache');
      }

80
      const cli = item.url?.indexOf('client=') >= 0 ? item.url.split('client=')[1] : '';
徐乐's avatar
徐乐 committed
81 82 83 84 85 86

      Cookies.set('client', cli, {
        expires: 86400000 / (24 * 60 * 60 * 1000),
        path: '/',
      });
      sessionStorage.setItem('client', cli);
87 88
      const currentProduct = `__global__recent_productIndex__micro_${window.location.hostname}_${window.globalConfig
        ?.client ?? 'city'}`;
徐乐's avatar
徐乐 committed
89 90 91 92
      sessionStorage.removeItem(currentProduct);
      const currentProductNew = `__global__recent_productIndex__micro_${window.location.hostname}_${cli || 'city'}`;
      sessionStorage.setItem(currentProductNew, 0);

93 94 95 96 97 98 99
      setClient(cli);
      setCurrentType(item.name);

      const config = props.global;
      config.uiwidgets = [];
      config.widgets = [];
      config.allWidgets = [];
杨思琦's avatar
杨思琦 committed
100
      window.qiankunStarted = false;
101
      if (cli) {
杨思琦's avatar
杨思琦 committed
102
        config.client = cli;
103 104
      }

105 106
      // props.instance && props.instance.updateConfig(config);
      loginAction && loginAction.getUserInfoAndConfig('', true, item.type);
107
    } else {
108
      let { url } = item;
109 110 111 112
      if (url?.indexOf('{userId}') >= 0) {
        url = url.replace('{userId}', window.globalConfig?.userInfo?.OID);
      }
      axios({
113
        url,
114
        method: 'get',
115
        dataType: 'json',
116 117
      }).then(res => {
        if (res?.data?.code === 0) {
118
          // window.location.href = res.data?.data;
李纪文's avatar
李纪文 committed
119 120 121 122 123
          if (item?.openOpt === '当前页打开') {
            props.history.push('/thirdParty', { linkUrl: res.data?.data });
          } else {
            window.open(res.data?.data, '_blank');
          }
124 125
        }
      });
126
    }
127
  });
128 129 130 131 132

  useEffect(() => {
    const handleToggleIndustry = event => {
      setPercentBottom(38);
      clearInterval(process.current);
133
      props.history.push(`/?client=${client || props.global.client}`);
134 135 136 137 138 139 140 141 142 143 144 145

      props.updateCurrentIndex(0);

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

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

146
  // 获取集成站点数据
147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164
  useEffect(() => {
    appService
      .GetIntegrationConfig({
        type: '集成登录',
        userId: window.globalConfig.userInfo?.OID ?? null,
        isEnable: true,
      })
      .then(res => {
        const { code, data } = res;
        if (code !== SERVICE_INTERFACE_SUCCESS_CODE) {
          notification.error({ message: '提示', duration: 3, description: '集成站点配置错误' });
        } else {
          setNum(data.length);
          setDataList(data);
          const config = props.global;
          config.isIntegration = data.length;
          props.updateConfig && props.updateConfig(config);
          if (data.length == 1) {
165
            handlePage(data[0], loginAction);
166 167 168 169 170 171
          }
        }
      })
      .catch(err => {
        notification.error({ message: '提示', duration: 3, description: '集成站点配置错误' });
      });
172
  }, []);
173 174 175 176 177

  return (
    <div className={styles.bootPage}>
      <div className={styles.bootPageMain}>
        <header className={styles.bootPageHead}>
178 179 180 181 182
          {props.global.logo && props.global.transformDevAssetsBaseURL ? (
            <img role="logo" src={props.global.transformDevAssetsBaseURL(props.global.logo)} alt="" />
          ) : (
            <img src={window.globalConfig.logo ? require(window.globalConfig.logo) : imgLogo} alt="" />
          )}
183
          <div className={styles.bootPageTitle}>
184
            <span className={styles.bootPageZh}>{window.globalConfig?.title ?? '熊猫智慧水务一体化解决方案'}</span>
185 186 187 188 189
            <span className={styles.bootPageEn}>
              {window.globalConfig.title
                ? window.globalConfig.subtitle
                : 'Panda Smart Water Integration Platform & Solution'}
            </span>
190 191
          </div>
        </header>
192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216
        <section
          className={classNames(styles.bootPageSection, 'animate__fadeInDown', 'animate__animated', 'duration-500ms')}
        >
          <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,
            }}
          >
            {dataList.length > 1
              ? dataList.map(item => (
                  <li className={styles.bootPageLi} key={item.name} onClick={event => handlePage(item, loginAction)}>
                    <div className={styles.bootPageList}>
                      <div className={styles.listMain}>
                        {/* <img src={require(`@/assets/bootPage/供水.png`)} alt="" /> */}
                        <img
                          src={`${window.location.origin}/${item.icon ? item.icon : 'center/images/科技风/二供.png'}`}
                          alt=""
                        />
                        <span className={styles.bootPageName}>{item.name}</span>
                      </div>
217
                    </div>
218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244
                    {currentType === item.name && (
                      <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="rgb(16,104,239)" opacity="0.1" />
                              <use xlinkHref="#gentle-wave" x="50" y="-1" fill="rgb(16,104,239)" opacity="0.2" />
                            </g>
                          </svg>
                        </div>
                      </div>
                    )}
                  </li>
                ))
              : ''}
245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269
          </ul>
        </section>
      </div>
    </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,
)(Integration);