- 修复引导页闪动

src/components/Loading/index.js

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

src/pages/bootpage/panda/index.js

@@ -10,27 +10,28 @@ import { useHistory } from '@wisdom-utils/runtime';
 import defaultSetting from '@wisdom-utils/components/lib/AppLayout/layouts/defaultSettings';
 import { actionCreators } from '@/containers/App/store';
 import LoginAction from '@/pages/user/login/login';
-import styles from './index.less';
 import { defaultApp } from '@/micro';
 import usingIcon from '@/assets/bootPage/using-icon.png';
 import { appService } from '@/api';
+import styles from './index.less';
 
 const industries = [
-  { 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: '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(49,139,27)' },
-  { name: '高品质水', type: '高品质水', subTitle: 'HIGH QUALITY WATER' , color: 'rgb(106,208,218)'},
+  { name: '高品质水', type: '高品质水', subTitle: 'HIGH QUALITY WATER', color: 'rgb(106,208,218)' },
   // { name: '水资源', type: '水资源', subTitle: 'WATER RESOURCES' },
   { name: '熊猫智能实验室', type: '实验室', subTitle: 'PANDA AI. LAB', color: 'rgb(104,163,242)' },
-  { 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)'},
+  { 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)' },
 ];
 
 // let loginAction = null;
 const BootPage = props => {
+  const [Industries] = useState(props.global.userInfo.Industries);
   const [percentNum, setPercentNum] = useState(0);
   const [currentType, setCurrentType] = useState('');
   // const [loadding, setLoadding] = useState(false);
@@ -45,23 +46,21 @@ const BootPage = props => {
 
   const handlePage = useCallback(
     (event, type) => {
-      setPercentNum(Math.ceil(Math.random()*50));
+      setPercentNum(Math.ceil(Math.random() * 50));
       setCurrentType(type);
 
       event.persist();
       event.preventDefault();
 
-
       // 新增熊猫新产品引导页
-      if(type === '熊猫新产品') {
-
+      if (type === '熊猫新产品') {
         setTimeout(() => {
           setPercentNum(100);
 
           setTimeout(() => {
-            window.history.pushState('', null , `/cloud/introduction/newproducts`);
+            window.history.pushState('', null, `/cloud/introduction/newproducts`);
           }, 500);
-        })
+        });
 
         return;
       }
@@ -75,11 +74,10 @@ const BootPage = props => {
       props.instance && props.instance.updateConfig(config);
       // props.instance && props.instance.getUserInfoAndConfig('', true, type);
       loginAction && loginAction.getUserInfoAndConfig('', true, type);
-      },
-    [loginAction, props.global.token, props.instance],
+    },
+    [loginAction, props.global, props.instance],
   );
 
-
   const renderIndustries = (config, callback) =>
     industries.map(item => {
       if (
@@ -98,17 +96,16 @@ const BootPage = props => {
                 <span className={styles.bootPageNameEng}>{item.subTitle}</span>
               </div>
             </div>
-            {
-              currentType === item.type &&   <Progress
-                style={{width: '98%'}}
+            {currentType === item.type && (
+              <Progress
+                style={{ width: '98%' }}
                 strokeColor={item.color}
                 percent={percentNum}
                 status="active"
-                format={percent => <span style={{color: '#fff'}}>{percent}%</span>}
+                format={percent => <span style={{ color: '#fff' }}>{percent}%</span>}
                 className={styles.bootProgress}
               />
-            }
-
+            )}
           </li>
         );
       }
@@ -129,19 +126,16 @@ const BootPage = props => {
     window.addEventListener('resize', handleResize);
 
     const handleToggleIndustry = event => {
-      setPercentNum(98)
+      setPercentNum(98);
 
       setTimeout(() => {
-        props.history.push(`/?client=${props.global.client}`)
-      }, 1000)
+        props.history.push(`/?client=${props.global.client}`);
+      }, 1000);
 
       // window.share.event.emit('triggerMicro', props.global);
       props.updateCurrentIndex(0);
 
       defaultApp();
-
-
-
     };
     loginAction.events.on('toggleIndustry', handleToggleIndustry);
 
@@ -152,27 +146,26 @@ const BootPage = props => {
   }, [loginAction.events, props, currentType]);
 
   useEffect(() => {
-    window.share.event.on('visible' , ret => {
+    window.share.event.on('visible', ret => {
       setTimeout(() => {
         setPercentNum(100);
 
         setTimeout(() => {
           window.history.pushState(null, '', ret);
         }, 500);
-      }, 500)
-    })
-
-  }, [])
+      }, 500);
+    });
+  }, []);
 
   const [IndustryNum, setIndustryNum] = useState(0);
-  const renderIndustr = useMemo(() => renderIndustries(props.global, handlePage), [handlePage, props.global.token, currentType, percentNum]);
+  // const renderIndustr = useMemo(() => renderIndustries(props.global, handlePage), [handlePage, props.global.token, percentNum, currentType]);
   useEffect(() => {
     const NewIndustryNum =
       props.global && props.global.userInfo && props.global.userInfo.Industries
         ? props.global.userInfo.Industries.filter(item => !!industries.find(d => d.type === item)).length
         : 0;
     setIndustryNum(NewIndustryNum);
-  }, [handlePage, props.global.token]);
+  }, [handlePage, props.global, props.global.token]);
   const intl = useIntl();
   const toOMSUsingAnalysis = e => {
     e && e.stopPropagation();
@@ -201,7 +194,7 @@ const BootPage = props => {
           {/* eslint-disable-next-line jsx-a11y/alt-text */}
           <img src="https://panda-water.cn/web4/assets/images/bootPage/熊猫图标.png" />
           <div className={styles.bootPageTitle}>
-            <span className={styles.bootPageZh}>{'熊猫智慧水务一体化解决方案'}</span>
+            <span className={styles.bootPageZh}>熊猫智慧水务一体化解决方案</span>
             <span className={styles.bootPageEn}>Panda Smart Water Integration Platform & Solution</span>
           </div>
         </header>
@@ -220,12 +213,40 @@ const BootPage = props => {
               opacity: 1,
             }}
           >
-            {renderIndustr}
+            {industries.map(
+              item =>
+              props.global &&
+                  <li
+                    className={styles.bootPageLi}
+                    key={item.type}
+                    style={{display: Industries.indexOf(item.type) > -1 ? 'block' : 'none'}}
+                    onClick={event => handlePage(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>
+            ),
+            )}
+            )}
           </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}>