- 优化进入子应用过渡效果

src/app.js

@@ -15,5 +15,5 @@ import 'antd/dist/antd.less';
 // const namespace = `__PANDA_STORE__${location.hostname}`;
 // window.createStoreage = new Storeage(namespace);
 ;(() => {
-  render();
-})();
\ No newline at end of file
+  render({loading: true });
+})();

src/components/Loading/index.js

+import { Spin } from 'antd';
+
+export default (props) => {
+  const { loading } = props;
+
+  const style = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+  }
+
+  return (
+    <Spin spinning={loading} size="large" style={style} tip="子应用正在加载..." />
+  );
+}
+

src/containers/App/index.js

@@ -3,24 +3,29 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
 import { Router, Switch } from '@wisdom-utils/runtime';
-import { helpers } from '@wisdom-utils/utils';
+import { helpers, event } from '@wisdom-utils/utils';
 import defaultSetting from '@wisdom-utils/components/lib/AppLayout/layouts/defaultSettings';
 // eslint-disable-next-line import/extensions
 import { dyRoutes } from '../../routes/config';
+
 const pkg = require('../../../package.json');
 const { renderRoutes } = helpers;
 const config = require('../../../config/config');
+
 function App(props) {
+  event.emit('loading' ,  props.loading);
+
   const metaSecurity = /https/.test(window.location.protocol) ? (
-    <meta httpEquiv="Content-Security-Policy" content="upgrade-insecure-requests" />
+    <meta httpEquiv='Content-Security-Policy' content='upgrade-insecure-requests' />
   ) : null;
   return (
     <>
       <Helmet title={`${(props.global && props.global.title) || defaultSetting.title}`}>
         <title>{`${(props.global && props.global.title) || defaultSetting.title}`}</title>
-        <link rel="shortcut icon" href={`${window.location.origin}/web4/${props.global && props.global.shortcutIcon}`} />
+        <link rel='shortcut icon'
+              href={`${window.location.origin}/web4/${props.global && props.global.shortcutIcon}`} />
         {metaSecurity}
-        <meta name="description" content={`${(props.global && props.global.title) || defaultSetting.title}`} />
+        <meta name='description' content={`${(props.global && props.global.title) || defaultSetting.title}`} />
       </Helmet>
       <Router basename={config.base || pkg.name.toLocaleLowerCase() || ''}>
         <Switch>
@@ -32,7 +37,7 @@ function App(props) {
               (props.global && props.global.theme) || 'dark',
             ).routes,
           )}
-          
+
         </Switch>
       </Router>
     </>
@@ -41,7 +46,7 @@ function App(props) {
 
 const mapStateToProps = state => ({
   global: state.getIn(['global', 'globalConfig']),
-  menu: state.getIn(['global', 'menu'])
+  menu: state.getIn(['global', 'menu']),
 });
 export default connect(
   mapStateToProps,

src/layouts/BasicLayout.js

@@ -19,8 +19,9 @@ import memoized from 'nano-memoize';
 import KeepAlive from 'react-activation';
 import { connect } from 'react-redux';
 import { matchRoutes } from 'react-router-dom';
-
+import Loading from '../components/Loading';
 import RightContent from '@/components/GlobalHeader/SimpleRiightContent';
+import BootPage from '../pages/bootpage';
 import defaultSetting from '@wisdom-utils/components/lib/AppLayout/layouts/defaultSettings';
 // import SettingDrawer from '@wisdom-utils/components/lib/layout/components/SettingDrawer';
 import { actionCreators } from '@/containers/App/store';
@@ -33,6 +34,7 @@ import {
 import {
   helpers,
   store,
+  event,
 } from '@wisdom-utils/utils';
 
 import { waterMark } from '../utils/mark';
@@ -47,7 +49,7 @@ const { getParamsV1 } = params;
 // const AMap = React.lazy(() => import('../pages/map/amap'));
 const CesiumMap = React.lazy(() => import('../pages/map/cesiumMap'));
 
-const waitTime = (time= 100) => {
+const waitTime = (time = 100) => {
   return new Promise((resolve) => {
     setTimeout(() => {
       resolve(true);
@@ -57,17 +59,17 @@ const waitTime = (time= 100) => {
 const antIcon = <LoadingOutlined style={{ fontSize: 12 }} spin />;
 const arrowSvg = ({ fillColor = '#fff' }) => (
   <svg
-    t="1543324489942"
-    className="icon"
-    viewBox="0 0 1024 1024"
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
+    t='1543324489942'
+    className='icon'
+    viewBox='0 0 1024 1024'
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    width='16'
+    height='16'
   >
     <path
-      d="M511.700683 639.423111 191.917496 319.596945 319.830771 319.596945 511.700683 511.715521 703.570595 319.596945 831.48387 319.596945Z"
-      p-id="8626"
+      d='M511.700683 639.423111 191.917496 319.596945 319.830771 319.596945 511.700683 511.715521 703.570595 319.596945 831.48387 319.596945Z'
+      p-id='8626'
       // fill={fillColor}
     />
   </svg>
@@ -99,13 +101,13 @@ const StationsItem = (item, action, onChangeVisible, actionRef, setMenuLoading)
 const OnlyFocusStations = props => {
   const data = props.data.stations;
   return (
-    <Spin spinning={props.loading} tip="加载中" size="small">
-      <div className={layoutStyles.focusStations} style={{border: 'none'}}>
+    <Spin spinning={props.loading} tip='加载中' size='small'>
+      <div className={layoutStyles.focusStations} style={{ border: 'none' }}>
         <ul>{Array.isArray(data) ? data.map(item => StationsItem(item, props.action, props.setVisible, props.actionRef, props.setMenuLoading)) : null}</ul>
       </div>
     </Spin>
-  )
-}
+  );
+};
 
 const AllStations = props => {
   const data = props.data.stations;
@@ -125,15 +127,15 @@ const AllStations = props => {
     setDefaultTab(event.target.value);
   };
   return (
-    <Spin spinning={props.loading} tip="加载中">
+    <Spin spinning={props.loading} tip='加载中'>
       <div className={layoutStyles.focusStations}>
         <ul>{Array.isArray(data) ? data.map(item => StationsItem(item, props.action, props.setVisible, props.actionRef, props.setMenuLoading)) : null}</ul>
       </div>
       <Radio.Group
         options={optionsWith}
-        optionType="button"
-        buttonStyle="solid"
-        size="small"
+        optionType='button'
+        buttonStyle='solid'
+        size='small'
         value={defaultTab}
         onChange={handleTabChange}
         style={{ marginTop: '6px' }}
@@ -156,7 +158,7 @@ const AllStations = props => {
             </Anchor>
           </div>
         ) : (
-          <div className="city_pane city_container">{props.data.citySelector}</div>
+          <div className='city_pane city_container'>{props.data.citySelector}</div>
         )}
       </div>
     </Spin>
@@ -164,13 +166,13 @@ const AllStations = props => {
 };
 
 const Stations = props => {
-  const isAll = 
+  const isAll =
     props.data &&
     props.data.siteCityList &&
     ((props.data.siteCityList.letters && props.data.siteCityList.letters.length) ||
       (props.data.siteCityList.content && props.data.siteCityList.content.length));
-  return isAll ? <AllStations {...props}/> : <OnlyFocusStations {...props}/>;
-}
+  return isAll ? <AllStations {...props} /> : <OnlyFocusStations {...props} />;
+};
 
 const renderSite = ({ data, config, loading, setLoading, action, actionRef, setMenuLoading }) => {
   const [visible, setVisible] = useState(false);
@@ -178,25 +180,26 @@ const renderSite = ({ data, config, loading, setLoading, action, actionRef, setM
   if (config && config.userInfo && config.userInfo.site === '') {
     loaded = false;
   }
-  if(!data.allStation || !_.isArray(data.allStation) || data.allStation.length <= 1)
+  if (!data.allStation || !_.isArray(data.allStation) || data.allStation.length <= 1)
     return <></>;
   return (
     <>
       <Spin
         indicator={antIcon}
         spinning={loaded}
-        size="small"
+        size='small'
         style={{ marginLeft: '10px' }}
-        tip=""
+        tip=''
         wrapperClassName={layoutStyles.spinLoadding}
       >
         <>
           <Popover
-            placement="bottomLeft"
-            trigger="click"
+            placement='bottomLeft'
+            trigger='click'
             visible={visible}
             content={
-              <Stations data={data} loading={loading} setLoading={setLoading} setVisible={setVisible} action={action} actionRef={actionRef} setMenuLoading={setMenuLoading} />
+              <Stations data={data} loading={loading} setLoading={setLoading} setVisible={setVisible} action={action}
+                        actionRef={actionRef} setMenuLoading={setMenuLoading} />
             }
             arrowPointAtCenter
             overlayClassName={classNames(layoutStyles.stationsWrapper, layoutStyles.stationsTop)}
@@ -225,28 +228,29 @@ const renderSite = ({ data, config, loading, setLoading, action, actionRef, setM
 // import defaultProps from '../defaultProps';
 const pickRoutes = memoized((routes, pathname, locale) => {
 
-    const matches = matchRoutes(routes, { pathname });
-    const routeConfig = matches ? matches[matches.length - 1].route : null;
+  const matches = matchRoutes(routes, { pathname });
+  const routeConfig = matches ? matches[matches.length - 1].route : null;
 
-    return {
-      locale, // just for cache
-      routeConfig,
-      // matchPath: matches ? matches.map(match => _.replace(match.route.path,'/*','')).join('/') : null // 解决下微端/*路径的问题
-      matchPath: routeConfig ? _.replace(routeConfig.key, "/*", "") : '',
-    };
+  return {
+    locale, // just for cache
+    routeConfig,
+    // matchPath: matches ? matches.map(match => _.replace(match.route.path,'/*','')).join('/') : null // 解决下微端/*路径的问题
+    matchPath: routeConfig ? _.replace(routeConfig.key, '/*', '') : '',
+  };
 });
 
 const transformFloatMenu = (routes, homepage) => {
   const route = routes.find(route => route.path === `/${homepage}`);
-  console.log("route", route);
+  console.log('route', route);
   return routes.concat(route);
-}
+};
 
 const Layout = (props) => {
   const [cityData, setCityData] = useState({});
   const [siteLoading, setSiteLoading] = useState(false);
   const [siteAction, setSiteAction] = useState(() => new Site(props, setSiteLoading));
   const [menuLoading, setMenuLoading] = useState(true);
+  const [subLoading, setSubLoading] = useState(true);
   // const [settings, setSetting] = useState({});
   // const [routeConfig, setRouteConfig] = useState(null);
   // const [matchPath, setMatchPath] = useState('');
@@ -254,13 +258,34 @@ const Layout = (props) => {
   const history = useHistory();
   const location = useLocation();
   const { routeConfig = {}, matchPath } = pickRoutes(props.flatMenu, location.pathname);
+  const [visible, setVisible] = useState(true);
   // useEffect(() => {
 
   //   setRouteConfig(routeConfig);
   //   setMatchPath(match)
   // }, [location.pathname])
 
+  useEffect(() => {
+    event.on('loading', ret => {
+      setSubLoading(ret);
+    });
 
+    event.on('visible', (ret) => {
+      setTimeout(() => {
+        setVisible(ret);
+      }, 2000)
+    })
+  }, []);
+
+  useEffect(() => {
+    let flag = false;
+
+    if(props.location.pathname.indexOf('industry') !== -1) {
+      flag = true;
+    }
+
+    setVisible(flag);
+  }, [])
 
   useEffect(() => {
     siteAction.setGlobalConfig(props.global);
@@ -307,31 +332,32 @@ const Layout = (props) => {
     const needMark = () =>
       (props.global.isHaveMark || window.location.origin.replace(/^(http|https):\/\//, '') === 'panda-water.cn') &&
       document.querySelectorAll('.pandawatermark_mask_div').length <= 0 &&
-      props.global.userInfo
-    if(needMark()) {
+      props.global.userInfo;
+    if (needMark()) {
       waterMark({
-        watermark_txt: `${props.global.userInfo.fullName}（${props.global.userInfo.loginName}）`
+        watermark_txt: `${props.global.userInfo.fullName}（${props.global.userInfo.loginName}）`,
       });
     }
     return () => {
-      const marks = document.querySelectorAll('.pandawatermark_mask_div')
-      if(marks && marks.length) {
+      const marks = document.querySelectorAll('.pandawatermark_mask_div');
+      if (marks && marks.length) {
         Array.prototype.forEach.call(marks, function(dom, index) {
-          document.body.removeChild(dom)
-        })
+          document.body.removeChild(dom);
+        });
       }
-    }
+    };
   }, [props.global.userInfo]);
 
 
   const onMenuHeaderClick = event => {
     // 非云平台不做响应
-    if(!props.global.get('userInfo.site')) return;
+    if (!props.global.get('userInfo.site')) return;
 
     // 至少2个行业才能回到引导页
     const Industries = props.global.get('userInfo.Industries');
-    if(Industries && Industries.length > 1) {
-      history.push(`/industry`)
+    if (Industries && Industries.length > 1) {
+      history.push('/Industry');
+      setVisible(true);
     }
   };
   // useEffect(async () => {
@@ -347,8 +373,8 @@ const Layout = (props) => {
   const logo =
     props.global && _.isFunction(props.global.get) && props.global.get('bannerLogo')
       ? props.global &&
-        _.isFunction(props.global.transformDevAssetsBaseURL) &&
-        props.global.transformDevAssetsBaseURL(props.global.get('bannerLogo'))
+      _.isFunction(props.global.transformDevAssetsBaseURL) &&
+      props.global.transformDevAssetsBaseURL(props.global.get('bannerLogo'))
       : defaultSetting.logo;
 
   // 添加一个路由跳转事件
@@ -372,97 +398,115 @@ const Layout = (props) => {
     };
     const skipHandler = (data, title, url) => {
       const targetMenuPath = findMenuPath(props.flatMenu, url);
+
       if (targetMenuPath) {
         history.pushState(data, title, `/civbase/${targetMenuPath}`);
       }
-    }
+    };
     share && share.event && share.event.on('route:pushState', skipHandler);
     return () => {
       share && share.event && share.event.removeListener('route:pushState', skipHandler);
-    }
+    };
   }, []);
 
   return (
-    <SecurityLayout {...props}>
-      <BasicLayout
-        title={props.global.title}
-        route={props.route}
-        location={location}
-        navTheme={props.global?.variableTheme?.navTheme ?? 'dark'}
-        mode="MDI"
-        fixedHeader
-        headerHeight={52}
-        routeConfig={routeConfig}
-        matchPath={matchPath}
-        actionRef={actionRef}
-        menu={{
-          loading: menuLoading
-          // onLoadingChange: (loading) => setMenuLoading(loading)
-        }}
-        logo={logo}
-        topMenuActiveKey={props.currentMenuIndex}
-        rightContentRender={() => <RightContent/>}
-        onPageChange={() => {
-          // if(!props.global.token) {
-          //   history.push('/user/login')
-          // }
-        }}
-        onMenuHeaderClick={onMenuHeaderClick}
-        onTopMenuHeaderClick={onTopMenuHeaderClick}
-        menuProps = {{
-          popupClassName: 'testpop',
-          popupOffset: [0, 15]
-        }}
-        headerSiteRender={() =>
-          renderSite({
-            data: cityData,
-            config: props.global,
-            loading: siteLoading,
-            setLoading: setSiteLoading,
-            action: siteAction,
-            actionRef,
-            setMenuLoading,
-          })
-        }
-        menuItemRender={(item, dom) => (
-
-          <a
-            onClick={(event) => {
-              event.preventDefault()
-              window.history.pushState(null, '', '/civbase' + item.path);
+    <>
+      <div style={{
+        position:'absolute',
+        top:'0',
+        right:'0',
+        bottom:'0',
+        left:'0',
+        zIndex:1000,
+        display: visible ? 'block' : 'none'
+      }}>
+        <BootPage visible={visible} />
+      </div>
+
+      <div style={{display: visible ? 'none' : 'block'}}>
+        <SecurityLayout {...props}>
+          <BasicLayout
+            title={props.global.title}
+            route={props.route}
+            location={location}
+            navTheme={props.global?.variableTheme?.navTheme ?? 'dark'}
+            mode='MDI'
+            fixedHeader
+            headerHeight={52}
+            routeConfig={routeConfig}
+            matchPath={matchPath}
+            actionRef={actionRef}
+            menu={{
+              loading: menuLoading,
+              // onLoadingChange: (loading) => setMenuLoading(loading)
+            }}
+            logo={logo}
+            topMenuActiveKey={props.currentMenuIndex}
+            rightContentRender={() => <RightContent />}
+            onPageChange={() => {
+              // if(!props.global.token) {
+              //   history.push('/user/login')
+              // }
             }}
+            onMenuHeaderClick={onMenuHeaderClick}
+            onTopMenuHeaderClick={onTopMenuHeaderClick}
+            menuProps={{
+              popupClassName: 'testpop',
+              popupOffset: [0, 15],
+            }}
+            headerSiteRender={() =>
+              renderSite({
+                data: cityData,
+                config: props.global,
+                loading: siteLoading,
+                setLoading: setSiteLoading,
+                action: siteAction,
+                actionRef,
+                setMenuLoading,
+              })
+            }
+            menuItemRender={(item, dom) => (
+
+              <a
+                onClick={(event) => {
+                  event.preventDefault();
+                  window.history.pushState(null, '', '/civbase' + item.path);
+                }}
+              >
+                {dom}
+              </a>
+            )}
           >
-            {dom}
-          </a>
-        )}
-      >
 
-        <Suspense fallback={<></>}>
-          {/* {window.location.pathname.startsWith('/civbase/civ_3d') ? ( */}
-          {/*  <KeepAlive> */}
-          {/*    <CesiumMap /> */}
-          {/*  </KeepAlive> */}
-          {/* ) : window.location.pathname.startsWith('/civbase/civ_webgis') ? ( */}
-          {/*  mapMode === 'AMap' ? ( */}
-          {/*    <AMap /> */}
-          {/*  ) : ( */}
-          {/*    <ArcgisMap options={{ type: 'ArcgisMap' }} /> */}
-          {/*  ) */}
-          {/* ) : null} */}
-          {window.location.pathname.startsWith('/civbase/civ_3d/map') ? (
-            <KeepAlive>
-              <CesiumMap />
-            </KeepAlive>
-          ) : (
-            window.location.pathname.startsWith('/civbase/civ_webgis') && null
-          )}
-        </Suspense>
-         <div id="micro-container" className="subapp-container">
-            {props.children}
-
-          </div>
-      </BasicLayout>
-    </SecurityLayout>
+            <Suspense fallback={<></>}>
+              {/* {window.location.pathname.startsWith('/civbase/civ_3d') ? ( */}
+              {/*  <KeepAlive> */}
+              {/*    <CesiumMap /> */}
+              {/*  </KeepAlive> */}
+              {/* ) : window.location.pathname.startsWith('/civbase/civ_webgis') ? ( */}
+              {/*  mapMode === 'AMap' ? ( */}
+              {/*    <AMap /> */}
+              {/*  ) : ( */}
+              {/*    <ArcgisMap options={{ type: 'ArcgisMap' }} /> */}
+              {/*  ) */}
+              {/* ) : null} */}
+              {window.location.pathname.startsWith('/civbase/civ_3d/map') ? (
+                <KeepAlive>
+                  <CesiumMap />
+                </KeepAlive>
+
+              ) : (
+                window.location.pathname.startsWith('/civbase/civ_webgis') && null
+              )}
+            </Suspense>
+            {subLoading && <Loading loading={subLoading} />}
+            <div id='micro-container' className='subapp-container'>
+              {props.children}
+            </div>
+          </BasicLayout>
+        </SecurityLayout>
+      </div>
+    </>
   );
 };
 

src/micro.js

@@ -62,25 +62,32 @@ export const initMicroApps = () => {
             micorConfig.dev :
             products;
 
-    registerMicroApps(
-        entrys.map(item => {
-            item.loader = loader;
-            item.props = {
-                emitter: window.share.event,
-                baseRoot: item.name,
-                event: event,
-                store: microStore,
-                // eslint-
-                // disable-next-line no-undef
-                globalConfig: /civweb4/.test(item.name) ? Object.assign({}, config, {
-                    homepage: config.homepage ? config.homepage.replace(/civweb\//, '') : config.homepage
-                }) : config,
-                //createStoreage.get('globalConfig'),
-                XMLHttpRequest: window.XMLHttpRequest,
-                // offGlobalStateChange: actions.offGlobalStateChange
-            };
-            return item;
-        }), {
+    const apps = entrys.map(item => {
+      return  {
+        ...item,
+        props: {
+          emitter: window.share.event,
+          baseRoot: item.name,
+          event: event,
+          store: microStore,
+          // eslint-
+          // disable-next-line no-undef
+          globalConfig: /civweb4/.test(item.name) ? Object.assign({}, config, {
+            homepage: config.homepage ? config.homepage.replace(/civweb\//, '') : config.homepage
+          }) : config,
+          //createStoreage.get('globalConfig'),
+          XMLHttpRequest: window.XMLHttpRequest,
+          // offGlobalStateChange: actions.offGlobalStateChange
+        }
+      }
+    })
+
+   const microApps = apps.map((app => ({
+    ...app,
+    loader,
+   })))
+
+    registerMicroApps(microApps, {
         beforeLoad: [
             app => {
                 store.dispatch(actionCreators.updateMicroMounted(true));
@@ -208,17 +215,20 @@ export const initMicroApps = () => {
 };
 
 export const defaultApp = () => {
-    
-    const globalStore = store.getState().toJS();
+  const globalStore = store.getState().toJS();
     // eslint-disable-next-line no-undef
     const config = window.globalConfig;
     // const flatMenu = globalStore.global.flatMenu;
     // const current = flatMenu.find(item => item.name === '首页');
     // config.homepage = current.path;
     if (config && config.token) {
-        let url = !config.home ? 
+        let url = !config.home ?
         ((config.homepage === '' || _.isNull(config.homepage)) ? `/civbase/civweb4`: (`/civbase/${config.homepage.replace(/^\//, '')}`)) :  `/civbase/${config.homepage.replace(/^\//, '')}`;
         setDefaultMountApp(url);
+
+        window.history.pushState(null, '', url);
+
+        event.emit('visible', false);
     }
 };
 

src/pages/bootpage/panda/index.js

 // 云平台引导页
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { Space, Spin } from 'antd';
+import { Space, Spin, Progress } from 'antd';
 import classNames from 'classnames';
 import { connect } from 'react-redux';
 import { useIntl } from '@wisdom-utils/components';
@@ -16,44 +16,25 @@ import usingIcon from '@/assets/bootPage/using-icon.png';
 import { appService } from '@/api';
 
 const industries = [
-  { name: '供水', type: '供水', subTitle: 'WATER SUPPLY' },
-  { name: '农饮水', type: '农饮水', subTitle: 'RURAL POTABLE WATER' },
-  { name: '排水', type: '排水', subTitle: 'DRAINAGE' },
-  { name: '水利', type: '水利', subTitle: 'WATER CONSERVANCY' },
-  { name: '能源', type: '能源', subTitle: 'ENERGY SOURCES' },
-  { name: '高品质水', type: '高品质水', subTitle: 'HIGH QUALITY WATER' },
+  { name: '供水', type: '供水', subTitle: 'WATER SUPPLY' , color: 'rgb(16,104,239)'},
+  { name: '农饮水', type: '农饮水', subTitle: 'RURAL POTABLE WATER' , color: 'rgb(4,142,101)'},
+  { name: '排水', type: '排水', subTitle: 'DRAINAGE' , color: 'rgb(234,117,28)'},
+  { name: '水利', type: '水利', subTitle: 'WATER CONSERVANCY' , color: 'rgb(0,144,158)'},
+  { name: '能源', type: '能源', subTitle: 'ENERGY SOURCES', color: 'rgb(16,104,239)' },
+  { name: '高品质水', type: '高品质水', subTitle: 'HIGH QUALITY WATER' , color: 'rgb(16,104,239)'},
   // { name: '水资源', type: '水资源', subTitle: 'WATER RESOURCES' },
-  { name: '熊猫智能实验室', type: '实验室', subTitle: 'PANDA AI. LAB' },
-  { name: '水务大数据', type: '大数据', subTitle: 'WATER BIG DATA' },
-  { name: '熊猫新产品', type: '熊猫新产品', subTitle: "PANDA'S NEW PRODUCT" },
-  { name: '项目案例', type: '项目案例', subTitle: 'PROJECT CASE' },
+  { name: '熊猫智能实验室', type: '实验室', subTitle: 'PANDA AI. LAB', color: 'rgb(16,104,239)' },
+  { name: '水务大数据', type: '大数据', subTitle: 'WATER BIG DATA' , color: 'rgb(85,77,210)'},
+  { name: '熊猫新产品', type: '熊猫新产品', subTitle: "PANDA'S NEW PRODUCT" , color: 'rgb(12,103,205)'},
+  { name: '项目案例', type: '项目案例', subTitle: 'PROJECT CASE' , color: 'rgb(107,36,155)'},
 ];
-const renderIndustries = (config, callback) =>
-  industries.map(item => {
-    if (
-      config &&
-      config.userInfo &&
-      config.userInfo.Industries &&
-      config.userInfo.Industries instanceof Array &&
-      config.userInfo.Industries.indexOf(item.type) > -1
-    ) {
-      return (
-        <li className={styles.bootPageLi} key={item.type} onClick={event => callback(event, item.type)}>
-          <div className={styles.bootPageList}>
-            <div className={styles.listMain}>
-              <img src={require(`@/assets/bootPage/${item.type}.png`)} alt="" />
-              <span className={styles.bootPageName}>{item.name}</span>
-              <span className={styles.bootPageNameEng}>{item.subTitle}</span>
-            </div>
-          </div>
-        </li>
-      );
-    }
-  });
 
 // let loginAction = null;
 const BootPage = props => {
-  const [loadding, setLoadding] = useState(false);
+  const {visible} = props;
+  const [percentNum, setPercentNum] = useState(10);
+  const [currentType, setCurrentType] = useState('');
+  // const [loadding, setLoadding] = useState(false);
   const [hasRole, setHasRole] = useState(false);
   const [scale, setScale] = useState(1);
   const [loginAction, setAction] = useState(() => new LoginAction(props));
@@ -62,8 +43,11 @@ const BootPage = props => {
     { title: defaultSetting.title, id: '', pageName: '行业切换' },
     props.global.title || defaultSetting.title,
   );
+
   const handlePage = useCallback(
     (event, type) => {
+      setPercentNum(Math.ceil(Math.random()*50));
+
       event.persist();
       event.preventDefault();
 
@@ -73,7 +57,7 @@ const BootPage = props => {
         return;
       }
 
-      setLoadding(true);
+      // setLoadding(true);
       const config = props.global;
       // const loginAction = new LoginAction(props);
       config.uiwidgets = [];
@@ -82,9 +66,56 @@ const BootPage = props => {
       props.instance && props.instance.updateConfig(config);
       // props.instance && props.instance.getUserInfoAndConfig('', true, type);
       loginAction && loginAction.getUserInfoAndConfig('', true, type);
-    },
+
+       setCurrentType(type);
+      },
     [loginAction, props.global.token, props.instance],
   );
+
+
+  const renderIndustries = (config, callback) =>
+    industries.map(item => {
+      if (
+        config &&
+        config.userInfo &&
+        config.userInfo.Industries &&
+        config.userInfo.Industries instanceof Array &&
+        config.userInfo.Industries.indexOf(item.type) > -1
+      ) {
+
+
+        return (
+          <li className={styles.bootPageLi} key={item.type} onClick={event => callback(event, item.type)}>
+            <div className={styles.bootPageList}>
+              <div className={styles.listMain}>
+                <img src={require(`@/assets/bootPage/${item.type}.png`)} alt="" />
+                <span className={styles.bootPageName}>{item.name}</span>
+                <span className={styles.bootPageNameEng}>{item.subTitle}</span>
+              </div>
+            </div>
+            {
+              currentType === item.type &&   <Progress
+                style={{width: '98%'}}
+                strokeColor={item.color}
+                percent={percentNum}
+                status="active"
+                format={percent => <span style={{color: '#fff'}}>{percent}%</span>}
+                className={styles.bootProgress}
+              />
+            }
+
+          </li>
+        );
+      }
+    });
+
+  useEffect(() => {
+    if(visible){
+      setCurrentType('');
+      setPercentNum(10);
+    }
+  } , [visible])
+
   useEffect(() => {
     // eslint-disable-next-line no-use-before-define
     handleResize();
@@ -100,11 +131,16 @@ const BootPage = props => {
     window.addEventListener('resize', handleResize);
 
     const handleToggleIndustry = event => {
-      setLoadding(false);
-      props.history.push(`/?client=${props.global.client}`);
+
+      // props.history.push(`/?client=${props.global.client}`);
       defaultApp();
+
       // window.share.event.emit('triggerMicro', props.global);
       props.updateCurrentIndex(0);
+
+      setPercentNum(100);
+
+      // setLoadding(false);
     };
     loginAction.events.on('toggleIndustry', handleToggleIndustry);
     return () => {
@@ -114,7 +150,7 @@ const BootPage = props => {
   }, [loginAction.events, props]);
 
   const [IndustryNum, setIndustryNum] = useState(0);
-  const renderIndustr = useMemo(() => renderIndustries(props.global, handlePage), [handlePage, props.global.token]);
+  const renderIndustr = useMemo(() => renderIndustries(props.global, handlePage), [handlePage, props.global.token, currentType, percentNum]);
   useEffect(() => {
     const NewIndustryNum =
       props.global && props.global.userInfo && props.global.userInfo.Industries
@@ -172,9 +208,9 @@ const BootPage = props => {
             {renderIndustr}
           </ul>
         </section>
-        <Space className={styles.abs}>
-          <Spin spinning={loadding} size="large" />
-        </Space>
+        {/*<Space className={styles.abs}>*/}
+        {/*  <Spin spinning={loadding} size="large" />*/}
+        {/*</Space>*/}
       </div>
       {hasRole ? (
         <div className={styles.cloudMonitorBtns}>

src/pages/bootpage/panda/index.less

@@ -61,6 +61,7 @@
         transition: all .5s ease-out;
         padding-top: 10px;
         .bootPageLi {
+          position: relative;
           width: 298px;
           height: 268.8px;
           margin: 10px;
@@ -166,7 +167,12 @@
     .@{ant-prefix}-spin-nested-loading,
     .@{ant-prefix}-spin-container {
       height: 100%;
-    }  
+    }
+  }
+
+  .bootProgress {
+    position: absolute;
+    bottom: -5px;
   }
 }
 

src/render.js

@@ -81,7 +81,7 @@ export const AppInitState = () => {
 
   let config = window.globalConfig || {};
   createStoreage.remove(`__PANDA_STORE__${location.hostname}`);
-  
+
   window.globalConfig = {};
   window.__INITIAL_STATE__ = {};
 
@@ -233,11 +233,11 @@ export const AppInitState = () => {
     store.subscribe((function() {
       let preVariableTheme = store.getState().toJS().global?.globalConfig?.variableTheme;
       return function() {
-        // if (!preVariableTheme) 
+        // if (!preVariableTheme)
         const variableTheme = store.getState().toJS().global?.globalConfig?.variableTheme;
         if(!hasThemeChanged(preVariableTheme, variableTheme)) return false
-        const { 
-          primaryColor: prePrimaryColor, 
+        const {
+          primaryColor: prePrimaryColor,
           navTheme: preNavTheme,
           headerPrimaryColor: preHeaderPrimaryColor,
         } = (preVariableTheme || {});
@@ -265,7 +265,8 @@ export const AppInitState = () => {
   initAppTheme();
 }
 
-const RootContainer = () => {
+const RootContainer = (props) => {
+  const { loading } = props;
 
   useEffect(() => {
     AppInitState();
@@ -275,43 +276,46 @@ const RootContainer = () => {
     ...{
       prefixCls: customPrefixCls,
       theme: {
-        "root-entry-name": "default",
+        'root-entry-name': 'default',
         ...getThemeVariables({}),
         primaryColor: defaultSetting.primaryColor,
       },
-    }
-  }
+    },
+  };
 
-  if(finalConfig.prefixCls) {
+  if (finalConfig.prefixCls) {
     Modal.config({
-      rootPrefixCls: customPrefixCls
+      rootPrefixCls: customPrefixCls,
     });
     message.config({
-      rootPrefixCls: `${finalConfig.prefixCls}-message`
+      rootPrefixCls: `${finalConfig.prefixCls}-message`,
     });
     notification.config({
-      rootPrefixCls: `${finalConfig.prefixCls}-notification`
+      rootPrefixCls: `${finalConfig.prefixCls}-notification`,
     });
   }
 
   return React.createElement(Provider, {
-    store: store
+    store: store,
   }, React.createElement(ConnectedRouter, {
-    history: history
+    history: history,
   }, React.createElement(LocaleContainer, {
-    prefixCls: customPrefixCls
+    prefixCls: customPrefixCls,
   }, React.createElement(ConfigProvider, {
-    prefixCls: customPrefixCls
-  }, React.createElement(Container, null, React.createElement(App))))))
-}
+    prefixCls: customPrefixCls,
+  }, React.createElement(Container, null, React.createElement(App , {
+    loading,
+  }))))));
+};
+
 
+export const render = ({ loading }) => {
 
-export const render = () => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  ReactDOM.render(<RootContainer/>, MOUNT_NODE);
+  ReactDOM.render(<RootContainer loading={loading}  />, MOUNT_NODE);
 };
 
 // updateTheme('#ff9600');
-const loader = (appContent, loading) => render({ appContent, loading });
+const loader = (loading) => render({ loading });
 
 export default loader;

src/routes/config.js

@@ -41,10 +41,10 @@ export const dyRoutes = (routes, layout, theme) => {
           },
         ],
       },
-      {
-        path: '/industry',
-        component: BootPage,
-      },
+      // {
+      //   path: '/industry',
+      //   component: BootPage,
+      // },
       {
         path: '/cloud/analysis/using',
         component: UsingAnalysis,
@@ -64,7 +64,7 @@ export const dyRoutes = (routes, layout, theme) => {
             component: CommonMenu,
             // name: '菜单收藏'
           },
-          { 
+          {
             // 历史消息箱
             path: '/system/notifications',
             component: Notifications,