index.js

/*
 * @Title: 弥勒 集成页
 * @Author: hongmye
 * @Date: 2024-08-26 18:34:42
 */
import { appService } from '@/api';
import { connect } from 'react-redux';
import { actionCreators } from '@/containers/App/store';
import { getUserInfo, getWebSiteConfig } from '@/api/service/base';
import { log, params, encipher } from '@wisdom-utils/utils/lib/helpers';
import axios from 'axios';

import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
import { message, Button } from 'antd';
import classNames from 'classnames';
import { debounce } from 'lodash';
import React, { useRef, useEffect, useState, useMemo } from 'react';
import backImg from '@/assets/images/demonstration/返回.png';
import arrowLeftImg from '@/assets/images/demonstration/左箭头.png';
import LoadPage from '@/components/LoadPage';
import $ from 'jquery';
import { SERVICE_INTERFACE_SUCCESS_CODE } from '@/constants';
import { useHistory, useAliveController } from '@wisdom-utils/runtime';

import { store } from '@wisdom-utils/utils';
import Cookies from 'js-cookie';
import LoginAction from '@/pages/bootpage/demonstration/components/login';
import { defaultApp } from '@/micro';
import useFullScreen from '../../demonstration/components/useFullScreen';
import defaultConfig from './data.json';
import styles from './index.less';
import Iframe from '../../demonstration/components/Iframe';
const boxWidth = 1920;
const boxHeight = 930;
// const Cripples = require('@/assets/js/ripples/jquery.ripples');

const IntegrationMile = props => {
  const [ref, isFullscreen, handleFullScreen, handleExitFullScreen] = useFullScreen(false);
  const history = useHistory();
  let integrationClient = window?.globalConfig?.client || 'city'; // 集成登录client
  const timer2 = useRef(null);
  const timer3 = useRef(null);
  const timer4 = useRef(null);

  const progressRef2 = useRef(0);
  const [loginAction, setAction] = useState(() => new LoginAction(props));
  const [mClient, setMClient] = useState('');
  const { clear } = useAliveController();

  // 退出
  const exit = () => {
    if (isFullscreen) {
      handleExitFullScreen && handleExitFullScreen();
    } else {
      handleFullScreen && handleFullScreen();
    }
  };
  const [boxSize, setBoxSize] = useState({
    scale: 1,
    boxHeight: 930,
  });
  const [integrationData, setIntegrationData] = useState({});
  const [logo, setLogo] = useState(props.global.logo);

  const [linkUrl, setLinkUrl] = useState('');
  // 解决 切换 client 时，updateConfig时，页会刷新，loading会重置
  const [jumpLoading, setJumpLoading] = useState(!!window.jumpLoadingProgress);
  const [progressValue2, setProgressValue2] = useState(window.jumpLoadingProgress || 0);
  const [showBackBtn, setShowBackBtn] = useState(true); // 是否显示iframe 返回按钮，三维平台用

  const configName = '弥勒集成配置文件';

  const [configData, setConfigData] = useState(defaultConfig);

  const jumpProgressStart = () => {
    if (timer2.current) {
      clearInterval(timer2.current);
      timer2.current = null;
    }
    progressRef2.current = 0;
    setProgressValue2(0);
    timer2.current = setInterval(() => {
      if (progressRef2.current < 97.5) {
        progressRef2.current += 2.5;
        setProgressValue2(progressRef2.current);
      } else {
        setProgressValue2(99);
        timer2.current && clearInterval(timer2.current);
        timer2.current = null;
      }
    }, 100);
  };
  const jumpProgressEnd = () => {
    setProgressValue2(100);
    timer2.current && clearInterval(timer2.current);
    timer2.current = null;
  };
  const getData = async () => {
    appService
      .GetConfigJson({
        config: configName,
      })
      .then(res => {
        if (res.code === 0 && res.data) {
          const data = JSON.parse(res.data) || defaultConfig;
          setConfigData(data);
        }
      });
    appService
      .GetIntegratedloginSetting({
        ignoreSite: true,
      })
      .then(res => {
        const { code, data } = res;
        if (data.client) {
          integrationClient = data.client;
          localStorage.setItem('integrationClient', data.client);
          if (integrationClient) {
            if (!data.client) return;
            appService
              .GetIntegrationConfig({
                type: '集成登录',
                userId: window.globalConfig.userInfo?.OID ?? null,
                isEnable: true,
                client: data.client || '',
              })
              .then(res1 => {
                const list = res1.data || [];
                const obj = {};
                list.forEach(d => {
                  obj[d.name] = true;
                });
                setIntegrationData(obj);
              });
          }
        }
      });
    const token = props.global?.token || Cookies.get('token');
    const client = sessionStorage.getItem('client') || props?.global?.client || '';
    getWebSiteConfig({
      identity: token,
      client,
    })
      .then(res => {
        const data = res.data?.[0] || {};
        if (data.logo) setLogo(data.logo);
      })
      .catch(err => {});
  };
  const onResize = () => {
    if (ref?.current) {
      const { clientWidth, clientHeight } = ref.current;
      if (!boxWidth || !boxHeight) return;
      const xScale = clientWidth / boxWidth;
      const yScale = clientHeight / boxHeight;
      const poor = clientHeight / clientWidth - boxHeight / boxWidth;
      let n = Math.min(xScale, yScale);
      let bHeight = boxHeight;
      if (poor > 0.05) {
        bHeight = boxHeight + 30;
      }
      // 高度为偶数
      bHeight = parseInt(bHeight, 10);
      if (bHeight % 2 !== 0) {
        bHeight += 1;
      }
      n = Number(n.toFixed(4));
      setBoxSize({
        scale: n,
        boxHeight: bHeight,
      });
    }
  };
  const handError = err => {
    if (err) {
      message.error(err);
    }
    setLinkUrl('');
    setJumpLoading(false);
    jumpProgressEnd();
  };
  const onMessageBack = data => {
    if (!data?.type) return;
    switch (data?.type) {
      // 页面加载完成
      // 登录成功
      case 'runAfterFirstMounted':
      case 'loginSuccess':
        jumpProgressEnd();
        setTimeout(() => {
          setJumpLoading(false);
        }, 100);
        break;
      case 'loginError':
        message.warning('登录失败，请联系管理人员');
        handError();
        break;
      case '无法连接':
        message.warning('该站点无法连接，请联系管理人员');
        setTimeout(() => {
          handError();
        }, 100);
        break;
      case 'showBack':
        setShowBackBtn(true);
        break;
      case 'hideBack':
        setShowBackBtn(false);
        break;
      default:
        break;
    }
  };
  const iframeItem = useMemo(() => {
    if (!linkUrl) return null;
    return (
      <>
        <div
          className={classNames(!jumpLoading ? styles.scaleInCenter : styles.hide, 'animate__animated')}
          style={{ zIndex: 11 }}
        >
          <Iframe linkUrl={linkUrl} onMessageBack={onMessageBack} />
        </div>
      </>
    );
  }, [linkUrl, jumpLoading]);
  const startTiming = (time = 2) => {
    if (timer3.current) {
      clearInterval(timer3.current);
      timer3.current = null;
    }
    timer3.current = setTimeout(() => {
      setJumpLoading(false);
      timer2.current && clearInterval(timer2.current);
      timer2.current = null;
    }, time * 1000);
  };
  const toRevenue = async item => {
    setJumpLoading(true);
    jumpProgressStart();
    startTiming(6);
    try {
      const res = await appService.getTicketByToken({ token: window.globalConfig?.token });
      if (res.code === 0) {
        // 营收是api-bcs，直饮水是api-ddw
        const apiPath = `${item.url}/api-ddw/sysUser/ssoGCK?sysFlag=0&${item.paramName}=${res.data}`;
        setLinkUrl(apiPath);
        const res2 = await axios({
          url: apiPath,
          method: 'get',
          dataType: 'json',
        });
        if (res2?.data?.resultcode !== 'no') {
          setLinkUrl('');
          setJumpLoading(false);
          jumpProgressEnd();
          message.warning('没权限，请联系管理员');
        }
      } else {
        res.msg && message.error(res.msg);
        setJumpLoading(false);
        jumpProgressEnd();
      }
    } catch (error) {
      setJumpLoading(false);
      jumpProgressEnd();
    }
  };
  const onLink = (item, loginA) => {
    // if (!integrationData[item.name]) {
    //   message.warning('当前账号没有权限，请联系管理人员配置');
    //   return;
    // }
    const { url, client } = item;
    if (!url && !client) return message.warning('未配置功能路径');
    if (url) {
      if (item.paramName) {
        toRevenue(item);
        return;
      }
      setJumpLoading(true);
      jumpProgressStart();
      setLinkUrl(url);
      let time = 15;
      if (!url.includes('user/noscret')) {
        time = 4;
      }
      startTiming(time);
    }
    if (client) {
      if (window.qiankunIsCache) {
        store.set('event:dropCache');
      }
      Cookies.set('client', client, {
        expires: 86400000 / (24 * 60 * 60 * 1000),
        path: '/',
      });
      sessionStorage.setItem('client', client);
      const currentProduct = `__global__recent_productIndex__micro_${window.location.hostname}_${window.globalConfig
        ?.client ?? 'city'}`;
      sessionStorage.removeItem(currentProduct);
      const currentProductNew = `__global__recent_productIndex__micro_${window.location.hostname}_${client || 'city'}`;
      sessionStorage.setItem(currentProductNew, 0);
      setMClient(client);
      const config = props.global;
      window.qiankunStarted = false;
      if (client) {
        config.client = client;
      }

      const token = props.global?.token || Cookies.get('token');

      if (!token) {
        history.push(`/user/login?client=${integrationClient}`, { reload: true });
        clear();
        props.logout();
      } else {
        setJumpLoading(true);
        jumpProgressStart();
        startTiming(15);
        window.jumpLoadingProgress = 99;
        getWebSiteConfig({
          identity: token,
          client,
        })
          .then(res => {
            const data = res.data?.[0] || {};
            config.uiwidgets = data.uiwidgets || [];
            config.widgets = data.widgets || [];
            config.allWidgets = data.widgets || [];
            const homeType = config.productType || 'civweb4';
            const homepage = params.getParams('homepage')
              ? params.getParams('homepage')
              : homeType && data.homepage
              ? `${homeType}/${params.getParams('homepage') || data.homepage}`
              : '';
            config.homepage = homepage;
            config.hideFeedback =
              data.afterSales && typeof data.afterSales === 'string'
                ? data.afterSales.split(',').includes(`${props.global?.userInfo?.OID}`)
                : false;
            config.IsOpenTransitionPage = data.IsOpenTransitionPage || false;
            config.openAnnouncement = data.openAnnouncement;
            config.announcementContent = data.announcementContent;
            if (!config.widgets.length) {
              message.error({
                duration: 3,
                content: '您没有该板块权限，请联系管理员',
              });
              setJumpLoading(false);
              jumpProgressEnd();
              window.jumpLoadingProgress = 0;
              return;
            }
            loginAction.updateConfig && loginAction.updateConfig(config);
            loginAction && loginAction.getIndustry(true, token);
          })
          .catch(err => {
            setJumpLoading(false);
            jumpProgressEnd();
            window.jumpLoadingProgress = 0;
          });
      }
    }
  };

  useEffect(() => {
    getData();
    window.addEventListener('resize', debounce(onResize, 300));
    onResize();
    return () => {
      window.removeEventListener('resize', onResize);
      timer2.current && clearInterval(timer2.current);
      timer2.current = null;
      timer3.current && clearInterval(timer3.current);
      timer3.current = null;
    };
  }, []);
  useEffect(() => {
    if (!linkUrl) {
      if (timer4.current) {
        clearTimeout(timer4.current);
        timer4.current = null;
      }
      timer4.current = setTimeout(() => {
        if ($('.CarouselRipples')?.ripples) {
          $('.CarouselRipples').ripples({
            resolution: 800,
            dropRadius: 20, // px
            perturbance: 2,
          });
        }
      }, 800);
    }

    return () => {
      if (timer4.current) {
        clearTimeout(timer4.current);
        timer4.current = null;
      }
    };
  }, [linkUrl]);
  useEffect(() => {
    const handleToggleIndustry = event => {
      setJumpLoading(false);
      jumpProgressEnd();
      window.jumpLoadingProgress = 0;
      props.updateCurrentIndex && props.updateCurrentIndex(0);

      props.history.push(`/?client=${mClient || props.global.client}`);

      defaultApp();
    };
    const handleError = () => {
      setJumpLoading(false);
      jumpProgressEnd();
    };

    loginAction.events.on('loginSuccess', handleToggleIndustry);
    loginAction.events.on('loginError', handleError);

    return () => {
      loginAction && loginAction.events && loginAction.events.removeListener('loginSuccess', handleToggleIndustry);
      loginAction && loginAction.events && loginAction.events.removeListener('loginError', handleError);
    };
  }, [loginAction.events, props, mClient]);
  return (
    <div className={classNames(styles.integrationMile, 'integrationMile')} ref={ref}>
      {jumpLoading ? (
        <div className={styles.integrationJumpLoad} key="jumpLoading">
          <div style={{ width: '285px' }}>
            <LoadPage percent={progressValue2 / 100} text="页面加载中~" />
          </div>
        </div>
      ) : null}
      {!linkUrl ? (
        <div className={styles.integrationMile_exit} onClick={exit}>
          <Button type="text" style={{ color: '#fff', fontSize: '24px' }}>
            {isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
          </Button>
        </div>
      ) : null}

      <div
        className={styles.integration_content}
        style={{
          width: boxWidth,
          height: boxSize.boxHeight,
          transform: `scale(${boxSize.scale}) translate(-50%,-50%)`,
          zIndex: linkUrl ? 0 : 10,
        }}
      >
        <div className={styles.integrationMile_title}>
          <div className={styles.integrationMile_icon}>
            <img
              src={
                props.global &&
                props.global.transformDevAssetsBaseURL &&
                props.global.transformDevAssetsBaseURL(logo || props.global.logo)
              }
              alt="logo"
            />
          </div>
          <div className={styles.integrationMile_title_text}>
            <span>{configData?.['标题'] || '智慧水务综合监控平台'}</span>
          </div>
        </div>
        <div className={styles.integrationMile_title_sub}>
          {configData?.['副标题'] || 'Mile Water Company Information Platform'}
        </div>
        <div className={styles.IY_list}>
          {configData?.listData
            ? configData?.listData.map(item => (
                <div
                  onClick={() => onLink(item, loginAction)}
                  className={styles.IY_item}
                  key={item.name}
                  type={item.name}
                  style={{ zIndex: linkUrl ? 0 : 10 }}
                >
                  <div className={styles.IY_item_name}>{item.label || item.name}</div>
                  <div className={styles.IY_item_name_sub}>{item.english || ''}</div>
                </div>
              ))
            : null}
        </div>
      </div>
      {!linkUrl ? (
        <div
          className={classNames(styles.iframeBack, 'animate__animated', 'animate__fadeIn')}
          onClick={() => props.logout()}
        >
          <div className={styles.iframeBackLeft}>
            <img src={arrowLeftImg} alt="返回" />
          </div>
          <div className={styles.iframeBackIcon}>
            <img src={backImg} alt="返回" />
            退出
          </div>
        </div>
      ) : null}
      {linkUrl && showBackBtn ? (
        <div
          className={classNames(styles.iframeExit, 'animate__animated', 'animate__fadeIn')}
          onClick={() => setLinkUrl('')}
        >
          <div className={styles.iframeExitLeft}>
            <img src={arrowLeftImg} alt="返回" />
          </div>
          <div className={styles.iframeExitIcon}>
            <img src={backImg} alt="返回" />
            返回
          </div>
        </div>
      ) : null}
      {iframeItem}
      {!linkUrl ? <div className={classNames(styles.CarouselRipples, 'CarouselRipples')} data-ripple="ripple" /> : null}
    </div>
  );
};
const mapStateToProps = state => ({
  global: state.getIn(['global', 'globalConfig']),
});
const mapDispatchToProps = dispatch => ({
  updateConfig(config) {
    dispatch(actionCreators.getConfig(config));
  },
  createContext(data) {
    dispatch(actionCreators.createContext(data));
  },
  updateCurrentIndex(index) {
    dispatch(actionCreators.updateCurrentIndex(index));
  },
  logout() {
    dispatch(actionCreators.logout());
  },
});
export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(IntegrationMile);