perf: 引导页配置

src/pages/bootpage/index.js

@@ -8,7 +8,7 @@ import { useIntl } from '@wisdom-utils/components';
 import { useDocumentTitle } from '@ant-design/pro-utils';
 
 import { useHistory } from '@wisdom-utils/runtime';
-import defaultSetting from '@wisdom-utils/components/lib/AppLayout/layouts/defaultSettings'
+import defaultSetting from '@wisdom-utils/components/lib/AppLayout/layouts/defaultSettings';
 import { actionCreators } from '../../containers/App/store';
 import SecurityLayout from '../../layouts/SecurityLayout';
 import LoginAction from '../user/login/login';
@@ -21,12 +21,14 @@ 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: 'DRINGKING WATER' },
+  // { name: '直饮水', type: '直饮水', subTitle: 'DRINGKING WATER' },
   // { name: '水资源', type: '水资源', subTitle: 'WATER RESOURCES' },
   { name: '大数据', type: '大数据', subTitle: 'BIG DATA' },
   { name: '熊猫智能实验室', type: '实验室', subTitle: 'PANDA AI. LAB' },
   { name: '项目案例', type: '项目案例', subTitle: 'PROJECT CASE' },
+  { name: '熊猫新产品', type: '熊猫新产品', subTitle: "PANDA'S NEW PRODUCT" },
 ];
 const renderIndustries = (config, callback) =>
   industries.map(item => {
@@ -38,17 +40,10 @@ const renderIndustries = (config, callback) =>
       config.userInfo.Industries.indexOf(item.type) > -1
     ) {
       return (
-        <li
-          className={styles.bootPageLi}
-          key={item.type}
-          onClick={event => callback(event, item.type)}
-        >
+        <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=""
-              />
+              <img src={require(`../../assets/bootPage/${item.type}.png`)} alt="" />
               <span className={styles.bootPageName}>{item.name}</span>
               <span className={styles.bootPageNameEng}>{item.subTitle}</span>
             </div>
@@ -112,10 +107,12 @@ const BootPage = props => {
       loginAction.events.removeListener('toggleIndustry', handleToggleIndustry);
     };
   }, [loginAction.events, props]);
-  const renderIndustr = useMemo(
-    () => renderIndustries(props.global, handlePage),
-    [handlePage, props.global.token],
-    );
+
+  const IndustryNum =
+    props.global && props.global.userInfo && props.global.userInfo.Industries
+      ? props.global.userInfo.Industries.filter(item => !!industries.find(d => d.type === item)).length
+      : 0;
+  const renderIndustr = useMemo(() => renderIndustries(props.global, handlePage), [handlePage, props.global.token]);
   const intl = useIntl();
 
   const toOMSUsingAnalysis = e => {
@@ -133,10 +130,7 @@ const BootPage = props => {
       })
       .then(res => {
         const roles = res && !res.errMsg ? res.roles : null;
-        const _hasRole =
-          roles &&
-          Array.isArray(roles) &&
-          roles.filter(r => r.name == '客户运维管理员').length;
+        const _hasRole = roles && Array.isArray(roles) && roles.filter(r => r.name == '客户运维管理员').length;
         setHasRole(!!_hasRole);
       });
   }, [props.global.token]);
@@ -149,27 +143,18 @@ 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}>
-                {intl.formatMessage({ id: 'app.settings.bootpage.title' })}
-              </span>
-              <span className={styles.bootPageEn}>
-                Panda Smart City Monitoring Management Platform & Solution
-              </span>
+              <span className={styles.bootPageZh}>{intl.formatMessage({ id: 'app.settings.bootpage.title' })}</span>
+              <span className={styles.bootPageEn}>Panda Smart City Monitoring Management Platform & Solution</span>
             </div>
           </header>
           <section
-            className={classNames(
-              styles.bootPageSection,
-              'animate__fadeInDown',
-              'animate__animated',
-              'duration-500ms',
-            )}
-            style={{
-              width: `${ scale < 1 ? 1280 : Math.ceil(1280 * scale)}px`,
-            }}
+            className={classNames(styles.bootPageSection, 'animate__fadeInDown', 'animate__animated', 'duration-500ms')}
+            // style={{
+            //   width: `${scale < 1 ? 1280 : Math.ceil(1280 * scale)}px`,
+            // }}
           >
             <ul
-              className={classNames(styles.bootPageUl, 'animate__animated')}
+              className={classNames(styles.bootPageUl, 'animate__animated', styles[`bootPageUl_${IndustryNum}`])}
               style={{
                 transform: `scale(${scale})`,
                 left: '300px',
@@ -186,10 +171,7 @@ const BootPage = props => {
         </div>
         {hasRole ? (
           <div className={styles.cloudMonitorBtns}>
-            <div
-              className="cloud-using-anaylysis-btn"
-              onClick={toOMSUsingAnalysis}
-            >
+            <div className="cloud-using-anaylysis-btn" onClick={toOMSUsingAnalysis}>
               <img src={usingIcon} alt="" title="点击查看平台使用监控" />
               <span>平台使用分析</span>
             </div>

src/pages/bootpage/index.less

@@ -116,6 +116,12 @@
             }
           }
         }
+        &.bootPageUl_5 {
+          width: 960px;
+        }
+        &.bootPageUl_9 {
+          width: 1600px;
+        }
       }
     }
   }