feat: 增加集成登录中间页

config/proxy.js

 /* eslint-disable */
 // const proxyURL = process.env.NODE_ENV !== 'production' ? 'http://192.168.10.150:8777' : window.location.origin;
 // const proxyURL = 'https://work.panda-water.cn';
- const proxyURL = 'http://192.168.12.3:8082';
+ const proxyURL = 'http://localhost:8085';
 // const proxyURL = 'https://panda-water.cn'
 //const proxyURL = 'http://192.168.12.189:8816/'
 module.exports = {
@@ -81,6 +81,16 @@ module.exports = {
         '/Cityinterface': '/CityInterface',
       },
     },
+    '/center': {
+      target: proxyURL,
+      changeOrigin: true,
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+      },
+      pathRewrite: {
+        '/center': '/center',
+      },
+    },
     '/cityjson': {
       target: 'https://pv.sohu.com',
       // target: 'http://192.168.19.102:8055',

package.json

@@ -115,9 +115,9 @@
         "@wisdom-map/arcgismap": "1.4.0-164",
         "@wisdom-map/basemap": "1.1.0-24",
         "@wisdom-map/util": "^1.0.28-0",
-        "@wisdom-utils/components": "0.1.300",
+        "@wisdom-utils/components": "0.1.319",
         "@wisdom-utils/runtime": "0.0.46",
-        "@wisdom-utils/utils": "0.1.340",
+        "@wisdom-utils/utils": "0.1.359",
         "animate.css": "^4.1.1",
         "antd": "4.21.2",
         "compression": "1.7.4",

src/api/service/base.js

@@ -45,6 +45,8 @@ export const API = {
   GET_InOnLine: '/PandaEnergy/GZshuiwuju/GuangZhou/InOnLine', // 广州登陆接口
   GET_UserMobile: '/PandaEnergy/GZshuiwuju/SingleLogin/SingleLoginByAccess_token', // 获取登录手机号
   GET_JIANGXI_MANAGE: '/PandaWorkFlow/WorkFlow/JiangXiManage/Login', // 江西登录接口
+
+  GET_INTEGRATION_CONFIG: '/PandaCore/GCK/IntegrationAuth/GetIntegrationConfig', // 获取集成站点数据
 };
 
 const services = {
@@ -58,6 +60,11 @@ const services = {
     method: constants.REQUEST_METHOD_GET,
     type: constants.REQUEST_HTTP,
   },
+  GetIntegrationConfig: {
+    url: API.GET_INTEGRATION_CONFIG,
+    method: constants.REQUEST_METHOD_GET,
+    type: constants.REQUEST_HTTP,
+  },
   getUserMobile: {
     url: API.GET_UserMobile,
     method: constants.REQUEST_METHOD_GET,

src/containers/App/store/actions.js

@@ -216,6 +216,9 @@ export function logout(data) {
   Cookies.set('site', '', {
     path: '/',
   });
+  Cookies.set('singleToken', '', {
+    path: '/',
+  });
   localStorage.removeItem('access_token');
   localStorage.removeItem('password_token');
   localStorage.removeItem('password_pwdRegex');

src/layouts/BasicLayout.js

@@ -339,7 +339,7 @@ const Layout = props => {
     return () => {
       const marks = document.querySelectorAll('.pandawatermark_mask_div');
       if (marks && marks.length) {
-        Array.prototype.forEach.call(marks, function(dom, index) {
+        Array.prototype.forEach.call(marks, function (dom, index) {
           document.body.removeChild(dom);
         });
       }
@@ -347,6 +347,11 @@ const Layout = props => {
   }, [props.global.isHaveMark, props.global.userInfo]);
 
   const onMenuHeaderClick = event => {
+    //集成网站
+    if (window.globalConfig.isIntegration >= 1) {
+      // window.qiankunIsCache = false;
+      history.push('/Industry');
+    }
     // 非云平台不做响应
     if (!props.global.get('userInfo.site')) return;
 
@@ -417,7 +422,7 @@ const Layout = props => {
 
     if (url.indexOf('|') > -1) {
       const params = url.split('|')[1];
-      params.split('&').map(function(item) {
+      params.split('&').map(function (item) {
         return (ret[item.split('=')[0]] = item.split('=')[1]);
       });
       return ret;

src/pages/bootpage/index.js

@@ -4,11 +4,14 @@ import SecurityLayout from '@/layouts/SecurityLayout';
 import { appService } from '@/api';
 import { SERVICE_INTERFACE_SUCCESS_CODE } from '@/constants';
 import PandaBootPage from './panda';
+import IntegrationPage from './integration';
 
 const systemItemName = '引导页模板'; // 系统配置项名称
 
 const BootPageTemplate = {
   default: PandaBootPage,
+  integration: IntegrationPage
+
 };
 
 const BootPage = props => {
@@ -18,9 +21,23 @@ const BootPage = props => {
     error: false,
   });
   const [template, setTemplate] = useState('default');
-  const RenderComponent = useMemo(() => BootPageTemplate[template] || BootPageTemplate.default, [template]);
+  
+  const RenderComponent = useMemo(() => {
+    if (window.globalConfig.isIntegration >= 1) {
+      
+      //集成登录
+      return BootPageTemplate.integration
+    } else {
+      //云平台
+      return BootPageTemplate[template] || BootPageTemplate.default
+    }
+  }, [template]);
 
   useEffect(() => {
+    if (window?.globalConfig?.isIntegration >= 1) {
+      setInfo({ first: false, loading: false, error: false });
+      return false;
+    }
     appService
       .sysConfiguration({
         moduleName: systemItemName,

src/pages/bootpage/integration/index.js

+/* 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';
+import LoginAction from '@/pages/user/login/login';
+import { defaultApp } from '@/micro';
+import { appService } from '@/api';
+import { SERVICE_INTERFACE_SUCCESS_CODE } from '@/constants';
+import styles from './index.less';
+
+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('');
+
+
+  const handlePage = (item, loginAction) => {
+    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);
+
+    if (item.subType == '外链') {
+      window.open(item.url, "_blank");
+    } else {
+      let cli = item.url?.indexOf('client=') >= 0 ? item.url.split('client=')[1] : '';
+      setClient(cli);
+      setCurrentType(item.name);
+
+      const config = props.global;
+      config.uiwidgets = [];
+      config.widgets = [];
+      config.allWidgets = [];
+      if (cli) {
+        config.client = cli
+      }
+
+
+      props.instance && props.instance.updateConfig(config);
+      loginAction && loginAction.getUserInfoAndConfig('', true, item.type, cli);
+    }
+  };
+
+  useEffect(() => {
+    const handleToggleIndustry = event => {
+      setPercentBottom(38);
+      clearInterval(process.current);
+      props.history.push(`/?client=${client ? client : props.global.client}`);
+
+      props.updateCurrentIndex(0);
+
+      defaultApp();
+    };
+    loginAction.events.on('toggleIndustry', handleToggleIndustry);
+
+    return () => {
+      loginAction.events.removeListener('toggleIndustry', handleToggleIndustry);
+    };
+  }, [loginAction.events, props, currentType]);
+
+
+  //获取集成站点数据
+  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: '集成站点配置错误' });
+          return;
+        } else {
+          setNum(data.length);
+          setDataList(data);
+          const config = props.global;
+          config.isIntegration = data.length;
+          props.updateConfig && props.updateConfig(config);
+          if (data.length == 1) {
+            handlePage(data[0], loginAction)
+          }
+        }
+      })
+      .catch(err => {
+        notification.error({ message: '提示', duration: 3, description: '集成站点配置错误' });
+      });
+  }, [props.global.token]);
+
+  return (
+    <div className={styles.bootPage}>
+      <div className={styles.bootPageMain}>
+        <header className={styles.bootPageHead}>
+          <img src={require(`@/assets/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')} >
+          <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.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>
+                </div>
+                {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>
+            ),
+            )}
+          </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);

src/pages/bootpage/integration/index.less

+@import '~antd/es/style/themes/default.less';
+
+@-webkit-keyframes move {
+  0% {
+    -webkit-transform: translate(-90px, 0%);
+    transform: translate(-90px, 0%);
+  }
+
+  100% {
+    -webkit-transform: translate(85px, 0%);
+    transform: translate(85px, 0%);
+  }
+}
+
+@keyframes move {
+  0% {
+    -webkit-transform: translate(-90px, 0%);
+    transform: translate(-90px, 0%);
+  }
+
+  100% {
+    -webkit-transform: translate(85px, 0%);
+    transform: translate(85px, 0%);
+  }
+}
+
+.bootPage {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: url('https://panda-water.cn/web4/assets/images/bootPage/背景.jpg') no-repeat top center;
+  background-size: cover;
+
+  .bootPageMain {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+
+    .bootPageHead {
+      height: 150px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #ffffff;
+      flex: none;
+      padding-top: 50px;
+
+      .bootPageTitle {
+        display: flex;
+        flex-direction: column;
+        margin-left: 20px;
+
+        .bootPageZh,
+        .bootPageEn {
+          font-weight: 500;
+        }
+
+        .bootPageZh {
+          font-size: 34px;
+          letter-spacing: 5px;
+        }
+
+        .bootPageEn {
+          font-size: 16px;
+          font-family: -webkit-body;
+          letter-spacing: 1px;
+        }
+      }
+    }
+
+    .bootPageSection {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: 1;
+      height: calc(100% - 160px);
+      margin: 20px 0;
+
+      &::-webkit-scrollbar {
+        width: 0px;
+        height: 0px;
+      }
+
+      .bootPageUl {
+        display: flex;
+        width: 1280px;
+        flex-wrap: wrap;
+        justify-content: center;
+        list-style: none;
+        transition: all .5s ease-out;
+        margin-top: -120px;
+
+        .bootPageLi {
+          position: relative;
+          width: 298px;
+          height: 268.8px;
+          margin: 10px;
+
+          &:hover {
+            .listMain {
+              transform: scale(1.1);
+            }
+
+            .bootProgress {
+              transform: scale(1.1);
+              bottom: -10px;
+            }
+          }
+
+          .bootPageList {
+            width: 100%;
+            height: 100%;
+            border-radius: 4px;
+            transition: all .2s ease-out;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            font-size: 24px;
+            cursor: pointer;
+            position: relative;
+
+            span {
+              margin-top: 20px;
+              font-weight: 500;
+              color: #fff;
+            }
+
+            .listMain {
+              transition: all 0.2s ease-out;
+              display: flex;
+              align-items: center;
+              flex-direction: column;
+              background: url('@/assets/bootPage/bg.png');
+              background-size: 100%;
+              background-repeat: no-repeat;
+              padding: 30px 54px 48px 43px;
+
+              img {
+                // width: 298px;
+                // height: 269px;
+                width: 110px;
+                height: 110px;
+                border-radius: 20px;
+                vertical-align: middle;
+              }
+
+              span {
+                font-weight: 500;
+                color: #fff;
+              }
+
+              .bootPageName {
+                // position: absolute;
+                // bottom: 31px;
+                font-weight: 500;
+                font-size: 22px;
+                margin-top: -4px;
+
+              }
+
+              .bootPageNameEng {
+                font-size: 14px;
+                position: absolute;
+                bottom: 11px;
+              }
+            }
+          }
+        }
+
+        &.bootPageUl_5 {
+          width: 960px;
+        }
+
+        &.bootPageUl_9,
+        &.bootPageUl_10 {
+          width: 1600px;
+        }
+      }
+    }
+  }
+
+  .abs {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .cloudMonitorBtns {
+    position: fixed;
+    height: 120px;
+    width: 100%;
+    bottom: 0px;
+    padding: 0 20px;
+    display: flex;
+    justify-content: end;
+
+    :global {
+      .cloud-using-anaylysis-btn {
+        cursor: pointer;
+        width: 100px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        &>img {
+          width: 50px;
+          margin: 0 25px;
+        }
+
+        &>span {
+          color: #fff;
+          font-size: 14px;
+          width: 100%;
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  :global {
+
+    .@{ant-prefix}-spin-nested-loading,
+    .@{ant-prefix}-spin-container {
+      height: 100%;
+    }
+  }
+
+  .bootProgress {
+    transition: all .2s ease-out;
+    position: absolute;
+    height: 80px;
+    margin: 0;
+    width: 100%;
+    border-radius: 0 0 14% 14%;
+    overflow: hidden;
+    bottom: 0px;
+  }
+
+  .bootProgress .inner {
+    transition: all .2s ease-out;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    bottom: 10%;
+  }
+
+  .bootProgress .wave {
+    display: block;
+    width: 100%;
+    height: 10em;
+    max-height: 100vh;
+    margin: 0;
+  }
+
+  .bootProgress .wave .parallax>use {
+    animation: move 2s linear infinite;
+  }
+
+  .bootProgress .wave .parallax>use:nth-child(2) {
+    animation-delay: -0.1s;
+  }
+}
+
+@media screen and (max-width: 1440px) {
+  .bootPage {
+    .bootPageHead {
+      .bootPageZh {
+        font-size: 26px;
+      }
+
+      .bootPageEn {
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 1440px) and (max-width: 1600px) {
+  .bootPage {
+    .bootPageHead {
+      .bootPageZh {
+        font-size: 30px;
+      }
+
+      .bootPageEn {
+        font-size: 14px;
+      }
+    }
+  }
+}
\ No newline at end of file

src/pages/user/login/login.js

@@ -246,7 +246,7 @@ class Login {
               ? this.globalConfig.userInfo.fullName
               : '',
         })
-        .catch(error => {});
+        .catch(error => { });
     }
 
     if (window.location.host === 'panda-water.com') {
@@ -260,7 +260,7 @@ class Login {
               ? this.globalConfig.userInfo.fullName
               : '',
         })
-        .catch(error => {});
+        .catch(error => { });
     }
   }
 
@@ -273,18 +273,17 @@ class Login {
         }
       });
     }
-    if (
-      !flag &&
-      this.isSignIn &&
-      this.globalConfig.userInfo.Industries.length &&
-      this.globalConfig.userInfo.Industries.length > 1
-    ) {
+    if (!flag && this.isSignIn && this.globalConfig.userInfo.Industries.length && this.globalConfig.userInfo.Industries.length > 1) {
       this.createContext(this);
-      // console.log('云平台');
       this.updateConfig && this.updateConfig(this.globalConfig);
       this.history.push('/industry');
       return false;
     }
+    //跳转到集成登录引导页_xule_2023-08-28
+    if (!flag && this.isSignIn && this.globalConfig.isIntegration >= 1) {
+      this.history.push('/industry');
+      return false;
+    }
     this.getWebConfig(token, getIndustry);
   }
 
@@ -296,6 +295,7 @@ class Login {
       noticeService.getMqttSiteCode({ 'request.preventCache': Date.now() }),
       getWebSiteConfig({
         client: self.globalConfig.client,
+        // client: window.globalConfig.client,
         token,
         'request.preventCache': Date.now(),
       }),
@@ -342,8 +342,7 @@ class Login {
               mqttConfig.mqtt_mess.TcpPort = DEFAULT_TCP_PORT;
               mqttConfig.mqtt_IsSSL = `${mqttConfig.mqtt_mess.TcpIP}:${mqttConfig.mqtt_mess.TcpPort}`;
             }
-            mqttConfig.mqtt_iotIP = `${mqttConfig.mqtt_mess.TcpIP}:${
-              mqttConfig.mqtt_mess.TcpPort ? mqttConfig.mqtt_mess.TcpPort : '443'
+            mqttConfig.mqtt_iotIP = `${mqttConfig.mqtt_mess.TcpIP}:${mqttConfig.mqtt_mess.TcpPort ? mqttConfig.mqtt_mess.TcpPort : '443'
               }`;
 
             self.globalConfig = Object.assign(self.globalConfig, {
@@ -379,6 +378,7 @@ class Login {
             // mapsettings: config.mapsettings
           });
           self.updateConfig && self.updateConfig(self.globalConfig);
+
           self.getProjectItems().then(res => {
             window.subSysCfg = {};
             self.globalConfig = Object.assign(self.globalConfig, {
@@ -670,7 +670,7 @@ class Login {
       height: '400',
     });
 
-    const handleMessage = function(event) {
+    const handleMessage = function (event) {
       const { origin } = event;
       // Logger.log('origin', event.origin);
       if (origin === 'https://login.dingtalk.com') {
@@ -859,11 +859,15 @@ class Login {
       });
   }
 
-  getUserInfoAndConfig(failCallback, flag, industry) {
+  getUserInfoAndConfig(failCallback, flag, industry, client) {
     const { token: tk } = this.globalConfig;
     const token = tk || Cookies.get('token');
     const site = Cookies.get('site');
     const self = this;
+    if (client) {
+      self.globalConfig.client = client;
+    }
+
     /* eslint-disable */
     let _industrySite = null;
     if (industry) {
@@ -901,6 +905,7 @@ class Login {
       };
       self.updateConfig && self.updateConfig(self.globalConfig);
     }
+    console.log('globalConfig', self.globalConfig)
     if (self.isSignIn || !!industry) {
       // eslint-disable-next-line no-undef
       getUserInfo({
@@ -1126,7 +1131,7 @@ class Login {
         'request.preventCache': Date.now(),
       })
       .then(response => {
-          self.transformLoginHander({token: response.data.user_token}, isRememberPWD, pwd);
+        self.transformLoginHander({ token: response.data.user_token }, isRememberPWD, pwd);
       })
       .catch(error => {
         self.hasTry = true;

src/render.js

@@ -45,7 +45,7 @@ function getStyle(prefixCls, theme) {
   `.trim();
 }
 
-const registerTheme = function(prefixCls, theme) {
+const registerTheme = function (prefixCls, theme) {
   const style = getStyle(prefixCls, theme);
   if (canUseDom()) {
     updateCSS(style, `${dynamicStyleMark}-dynamic-theme`);
@@ -139,6 +139,10 @@ export const AppInitState = () => {
           } else {
             localStorage.removeItem('password_pwdRegexTip');
           }
+
+          if (data.webState === '1' || data.webState === '3') {
+            data.isIntegration = '1';
+          }
           store.dispatch(
             actionCreators.getConfig(
               Object.assign(
@@ -229,7 +233,7 @@ export const AppInitState = () => {
   // 语音播报全局拦截
   const initMessageVoice = () => {
     const rawSpeak = window.speechSynthesis.speak;
-    window.speechSynthesis.speak = function(...args) {
+    window.speechSynthesis.speak = function (...args) {
       if (
         window.globalConfig &&
         // eslint-disable-next-line no-prototype-builtins
@@ -256,9 +260,9 @@ export const AppInitState = () => {
       return true;
     };
     store.subscribe(
-      (function() {
+      (function () {
         const preVariableTheme = store.getState().toJS().global?.globalConfig?.variableTheme;
-        return function() {
+        return function () {
           // if (!preVariableTheme)
           const variableTheme = store.getState().toJS().global?.globalConfig?.variableTheme;
           if (!hasThemeChanged(preVariableTheme, variableTheme)) return false;