新增过渡页

package.json

@@ -117,9 +117,9 @@
         "@wisdom-map/arcgismap": "1.4.0-300",
         "@wisdom-map/basemap": "1.1.0-41",
         "@wisdom-map/util": "1.2.9",
-        "@wisdom-utils/components": "0.1.357",
+        "@wisdom-utils/components": "0.1.358",
         "@wisdom-utils/runtime": "0.0.48",
-        "@wisdom-utils/utils": "0.1.397",
+        "@wisdom-utils/utils": "0.1.398",
         "animate.css": "^4.1.1",
         "antd": "4.21.2",
         "bcryptjs": "2.4.3",

src/api/service/base.js

@@ -43,6 +43,7 @@ export const API = {
   GET_INTEGRATION_CONFIG: '/PandaCore/GCK/IntegrationAuth/GetIntegrationConfig', // 获取集成站点数据
   GET_YANSHI_AUTHORITY: '/PandaCore/GCK/Demonstrate/GetYanshiAuthority', // 获取当前用户开始演示模式的所有菜单ID
   IS_OPEN_YANSHI: '/PandaCore/GCK/Demonstrate/IsOpenYanshi', // 获取是否开启演示模式服务
+  GET_TRANSITIONPAGE_PAGE: '/PandaOMS/OMS/WebSite/GetTransitionPage', // 获取过渡页
   GET_WEB_CONFIG: '/PandaOMS/OMS/GetIntegratedLoginbyName',
   GET_WEB_TICKET: '/PandaOMS/OMS/GetTicketByToken',
 
@@ -225,6 +226,11 @@ const services = {
     method: constants.REQUEST_METHOD_GET,
     type: constants.REQUEST_HTTP,
   },
+  getTransitionPage: {
+    url: API.GET_TRANSITIONPAGE_PAGE,
+    method: constants.REQUEST_METHOD_GET,
+    type: constants.REQUEST_HTTP,
+  },
   getIntegratedLoginbyName: {
     url: API.GET_WEB_CONFIG,
     method: constants.REQUEST_METHOD_GET,

src/layouts/BasicLayout.js

@@ -459,7 +459,18 @@ const Layout = props => {
       history.push('/Industry');
     }
     // 非云平台不做响应
-    if (!props.global.get('userInfo.site')) return;
+    if (!props.global.get('userInfo.site')) {
+      if(window.globalConfig.isOpenTransitionPage) {
+        if (window.qiankunIsCache) {
+          store.set('event:refreshCurrentMenu', {
+            dropCache: true,
+            action: 'closeAllTabs'
+          })
+        }
+        history.push('/homePage');
+      }
+      return;
+    }
 
     // 至少2个行业才能回到引导页
     const Industries = props.global.get('userInfo.Industries');
@@ -697,6 +708,7 @@ const Layout = props => {
         redirect={props.global?.redirect ?? ''}
         openAnnouncement={props.global?.openAnnouncement ?? ''}
         announcementContent={props.global?.announcementContent ?? ''}
+        isOpenTransitionPage={props.global?.isOpenTransitionPage ?? ''}
         mode="MDI"
         fixedHeader
         headerHeight={52}

src/layouts/TransitionPage/index.js

+/* eslint-disable indent */
+/* eslint-disable global-require */
+// 云平台引导页
+import React, { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
+import { actionCreators } from '@/containers/App/store';
+import classNames from 'classnames';
+import styles from './index.less';
+import bgImage from './images/背景.png';
+import iconImage from './images/图层 12@2x.png';
+import leftTiltle from './images/组 11@2x.png';
+import rightTiltle from './images/组 11@2x(1).png';
+import SecurityLayout from '../SecurityLayout';
+import { defaultApp } from '../../micro';
+
+const HomePage = props => {
+  const { global: globalConfig, updateConfig } = props || {};
+  const { transitionPage = {}, title } = globalConfig;
+  const { title: name = '', content: industries = [], background = null, icon } = transitionPage;
+  const [scale, setScale] = useState(1);
+  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(() => {
+    handleResize();
+  }, []);
+  useEffect(() => {
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  const handlePage = (target, index) => {
+    target.updateCurrentIndex && target.updateCurrentIndex(index);
+    target.updateSystemIndex && target.updateSystemIndex(index);
+    target.history.push(`/?client=${props.global.client}`);
+    window.share.event.emit('triggerMicro', target.global);
+
+    defaultApp();
+  };
+  return (
+    <SecurityLayout loading {...props}>
+      <div className={styles.transitionPage} style={{ backgroundImage: `url(${background || bgImage})` }}>
+        <div className={styles.transitionPageContainer}>
+          <section
+            className={classNames(styles.bootPageSection, 'animate__fadeInDown', 'animate__animated', 'duration-500ms')}
+            style={{
+              height: '22%',
+            }}
+          >
+            <ul
+              className={classNames(styles.bootPageUl, 'animate__animated')}
+              style={{
+                transform: `scale(${scale})`,
+                left: '300px',
+                bottom: '105px',
+                opacity: 1,
+                width: 'auto',
+                flexDirection: 'column',
+              }}
+            >
+              <div className={styles.title}>
+                <img src={icon || iconImage} alt="" />
+                <span>{title}</span>
+              </div>
+              <div className={styles.sub}>
+                <img src={leftTiltle} alt="" />
+                <span>{name}</span>
+                <img src={rightTiltle} alt="" />
+              </div>
+            </ul>
+          </section>
+        </div>
+        <div className={styles.transitionPageContainer}>
+          <section
+            className={classNames(styles.bootPageSection, 'animate__fadeInDown', 'animate__animated', 'duration-500ms')}
+            style={{
+              marginTop: '8%',
+            }}
+          >
+            <ul
+              className={classNames(styles.bootPageUl, 'animate__animated')}
+              style={{
+                transform: `scale(${scale})`,
+                left: '300px',
+                bottom: '105px',
+                opacity: 1,
+                width:
+                  industries.length === 4
+                    ? 1400
+                    : industries.length === 5
+                    ? 960
+                    : industries.length === 6
+                    ? 1045
+                    : 1280,
+                height: industries.length > 4 ? 640 : '',
+              }}
+            >
+              {industries && industries.length < 5
+                ? industries.map((item, index) => (
+                    <div
+                      className={styles.container}
+                      onClick={() => handlePage(props, index)}
+                      key={`${item.name}-${index}`}
+                    >
+                      <div className={styles.imageContainer} style={{ backgroundImage: `url(${item.image})` }}>
+                        <img src={item.icon} alt="" className={styles.icon} />
+                      </div>
+                      <div className={styles.textContainer}>
+                        <span className={styles.textName}>{item.name}</span>
+                        <span className={styles.text}>{item.subTitle}</span>
+                      </div>
+                    </div>
+                  ))
+                : industries.map((item, index) => (
+                    <div
+                      className={styles.multiContainer}
+                      onClick={() => handlePage(props, index)}
+                      key={`${item.name}-${index}`}
+                    >
+                      <div className={styles.textContainer} style={{ backgroundImage: `url(${item.image})` }}>
+                        <span className={styles.textName}>{item.name}</span>
+                        <span className={styles.text}>{item.subTitle}</span>
+                      </div>
+                    </div>
+                  ))}
+            </ul>
+          </section>
+        </div>
+      </div>
+    </SecurityLayout>
+  );
+};
+const mapStateToProps = state => ({
+  global: state.getIn(['global', 'globalConfig']),
+  instance: state.getIn(['global', 'instance']),
+  currentSystemIndex: state.getIn(['global', 'currentSystemIndex']),
+});
+const mapDispatchToProps = dispatch => ({
+  updateConfig(config) {
+    dispatch(actionCreators.getConfig(config));
+  },
+  createContext(data) {
+    dispatch(actionCreators.createContext(data));
+  },
+  updateCurrentIndex(index) {
+    dispatch(actionCreators.updateCurrentIndex(index));
+  },
+  updateCurrentSystem(index) {
+    dispatch(actionCreators.updateCurrentSystem(index));
+  },
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(HomePage);

src/layouts/TransitionPage/index.less

+.transitionPage{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  .transitionPageContainer {
+    display: flex;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    .title {
+      display: flex;
+      img {
+        height: 29px;
+        width: 56px;
+        margin: auto 20px auto auto;
+      }
+      span {
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        font-size: 36px;
+        color: #FFFFFF;
+        line-height: 64px;
+        margin: auto auto auto 0;
+      }
+    }
+    .sub {
+      display: flex;
+      img {
+        width: 115px;
+        height: 1px;
+        margin: auto;
+      }
+      span {
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        font-size: 14px;
+        color: #FFFFFF;
+        line-height: 22px;
+        opacity: 0.75;
+        margin: auto 10px;
+      }
+    }
+    .bootPageSection {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: 1;
+      height: 75%;
+      &::-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;
+        padding-top: 10px;
+        .container {
+          display: flex;
+          width: 300px;
+          height: 480px;
+          margin: auto;
+          background: rgba(63,70,85,0.6);
+          box-shadow: 0px 30px 32px 0px rgba(15,26,42,0.6);
+          border-radius: 40px;
+          overflow: hidden;
+          flex-direction: column;
+          backdrop-filter: blur(3px);
+          cursor: pointer;
+          transition: all .2s ease-out;
+          &:hover {
+            transform: scale(1.1);
+          }
+          .imageContainer {
+            display: flex;
+            width: 300px;
+            height: 362px;
+            background-size: 100% 100%;
+            background-position: center;
+            background-repeat: no-repeat;
+            .icon {
+              margin: auto auto 7px auto;
+              width: 56px;
+              height: 60px;
+            }
+          }
+          .textContainer {
+            flex: 1;
+            display: flex;
+            width: 100%;
+            flex-direction: column;
+            .textName {
+              font-family: Microsoft YaHei;
+              font-weight: bold;
+              font-size: 24px;
+              color: #FFFFFF;
+              margin: auto auto 16px auto;
+            }
+            .text {
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              font-size: 14px;
+              color: #FFFFFF;
+              opacity: 0.65;
+              margin: 0 auto auto auto;
+            }
+          }
+        }
+        .multiContainer {
+          display: flex;
+          margin: auto;
+          background: rgba(63,70,85,0.6);
+          box-shadow: 0px 30px 32px 0px rgba(15,26,42,0.6);
+          border-radius: 40px;
+          overflow: hidden;
+          flex-direction: column;
+          backdrop-filter: blur(3px);
+          cursor: pointer;
+          transition: all .2s ease-out;
+          width: 270px;
+          height: 280px;
+          border-radius: 50px;
+          &:hover {
+            transform: scale(1.1);
+          }
+          .textContainer {
+            flex: 1;
+            display: flex;
+            width: 100%;
+            flex-direction: column;
+            background-size: 100% 100%;
+            background-position: center;
+            background-repeat: no-repeat;
+            .textName {
+              font-family: Microsoft YaHei;
+              font-weight: bold;
+              font-size: 24px;
+              color: #FFFFFF;
+              margin: auto auto 5px auto;
+            }
+            .text {
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              font-size: 14px;
+              color: #FFFFFF;
+              opacity: 0.65;
+              margin: 0 auto 15px auto;
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

src/pages/user/login/login.js

@@ -537,12 +537,18 @@ class Login {
               : false;
           const openAnnouncement = config.OpenAnnouncement;
           const announcementContent = config.AnnouncementContent;
+          const isOpenTransitionPage =
+            ['panda-water.cn', 'panda-water.com'].indexOf(window.location.origin.replace(/^(http|https):\/\//, '')) ===
+              -1 && config.IsOpenTransitionPage
+              ? config.IsOpenTransitionPage
+              : false;
           self.globalConfig = Object.assign(self.globalConfig, config, {
             theme: self.globalConfig.theme,
             menu: self.globalConfig.menu,
             style: self.globalConfig.style,
             homepage: homepage || '',
             products: self.globalConfig.products,
+            isOpenTransitionPage,
             hideFeedback,
             openAnnouncement,
             announcementContent,
@@ -695,6 +701,12 @@ class Login {
       });
   }
 
+  finish(self, getIndustry) {
+    getIndustry ? self.events.emit('toggleIndustry') : self.events.emit('loginSuccess');
+    window.share.event = self.events;
+    self.callback && self.callback();
+  }
+
   getYanshiAuthority(self, getIndustry) {
     self.updateConfig && self.updateConfig(self.globalConfig);
     if (self.globalConfig.widgets.length === 0) {
@@ -706,9 +718,45 @@ class Login {
       self.handleLoginError();
       return;
     }
-    getIndustry ? self.events.emit('toggleIndustry') : self.events.emit('loginSuccess', self.history);
-    window.share.event = self.events;
-    self.callback && self.callback();
+    if (self.globalConfig.isOpenTransitionPage) {
+      appService
+        .getTransitionPage()
+        .then(res => {
+          const { allWidgets } = self.globalConfig || [];
+          if (res && res.data && res.data.content && allWidgets.length < 9) {
+            const transitionPage = {
+              ...res.data,
+              content: [],
+            };
+            allWidgets.forEach((item, index) => {
+              const page = res.data.content[index];
+              if (page) {
+                transitionPage.content.push({
+                  name: item.label,
+                  subTitle: page.alias,
+                  image: page.icon,
+                  icon:
+                    item.icon?.indexOf('CityTemp') > -1
+                      ? `${window.location.origin}/${item.icon}`
+                      : `${window.location.origin}/civweb4/${item.icon}`,
+                });
+              }
+            });
+            self.globalConfig.transitionPage = transitionPage;
+            self.updateConfig && self.updateConfig(self.globalConfig);
+            self.events.emit('loginHomePage');
+            window.share.event = self.events;
+            self.callback && self.callback();
+          } else {
+            self.finish(self, getIndustry);
+          }
+        })
+        .catch(error => {
+          self.finish(self, getIndustry);
+        });
+    } else {
+      self.finish(self, getIndustry);
+    }
   }
 
   getProjectItems() {

src/pages/user/login/template/baseLogin.js

@@ -83,11 +83,15 @@ const Login = forwardRef((props, _ref) => {
       action.events.on('loginVisible', status => {
         setVisible(status);
       });
+      action.events.on('loginHomePage', () => {
+        props.history.push(`/homePage`);
+      })
     // }
     return () => {
       action && action.events && action.events.removeAllListeners('loginSuccess');
       action && action.events && action.events.removeAllListeners('loginError');
       action && action.events && action.events.removeAllListeners('loginVisible');
+      action && action.events && action.events.removeAllListeners('loginHomePage');
     }
   }, [props.loginMode]);
 

src/routes/config.js

@@ -4,6 +4,7 @@ import LoadingComponent from '@wisdom-utils/components/lib/AppLayout/components/
 import { dynamic } from '@wisdom-utils/runtime';
 
 import BasicLayout from '../layouts/BasicLayout';
+import HomePage from '../layouts/TransitionPage';
 import BootPage from '../pages/bootpage';
 import UsingAnalysis from '../pages/cloud/analysis/using';
 import NewProducts from '../pages/cloud/introduction/newproducts';
@@ -46,6 +47,10 @@ export const dyRoutes = (routes, layout, theme) => {
           },
         ],
       },
+      {
+        path: '/homePage',
+        component: HomePage,
+      },
       {
         path: '/industry',
         component: BootPage,