fix: 修改演示功能入口

src/pages/bootpage/demonstration/index.js

@@ -19,6 +19,7 @@ import { actionCreators } from '@/containers/App/store';
 import { connect } from 'react-redux';
 import LoginAction from '@/pages/user/login/login';
 import classNames from 'classnames';
+import { defaultApp } from '@/micro';
 import useFullScreen from './components/useFullScreen';
 import styles from './index.less';
 import LeftItem from './components/Left';
@@ -26,7 +27,6 @@ import VideoItem from './components/VideoItem';
 import RightItem from './components/Right';
 import BottomItem from './components/Bottom';
 import { platformData } from './components/configData';
-
 const boxWidth = 1920;
 const boxHeight = 911;
 const projectType = ['供水', '排水', '能源', '水利'];
@@ -34,6 +34,7 @@ const Demonstration = props => {
   const onLineUrl = window.globalConfig?.mainserver || 'https://panda-water.cn/';
   const showFullScreen = true;
   const videoRef = useRef(null);
+  const [loginAction, setAction] = useState(() => new LoginAction(props));
   const [loading, setLoading] = useState(true);
   const [jumpLoading, setJumpLoading] = useState(false);
   const [selectKey, setSelectKey] = useState('供水产品');
@@ -77,13 +78,13 @@ const Demonstration = props => {
     config.widgets = [];
     config.allWidgets = [];
     props.instance && props.instance.updateConfig(config);
-    const loginAction = new LoginAction({ ...props, global: config });
     loginAction && loginAction.getUserInfoAndConfig(failCallback, true, type);
   };
   const updateConfig = (config, data) => {
+    // props.instance && props.instance.updateConfig(config);
     props.updateConfig && props.updateConfig(config);
-    const loginAction = new LoginAction({ ...props, global: config });
-    loginAction && loginAction.getUserInfoAndConfig(failCallback, true, data.industry);
+    const newLoginAction = new LoginAction({ ...props, global: config });
+    newLoginAction && newLoginAction.getUserInfoAndConfig(failCallback, true, data.industry);
   };
 
   // 新产品跳转
@@ -295,6 +296,17 @@ const Demonstration = props => {
       setLoading(false);
     });
   };
+  useEffect(() => {
+    const handleToggleIndustry = event => {
+      props.history && props.history.push(`/?client=${props.global.client}`);
+      props.updateCurrentIndex(0);
+      defaultApp();
+    };
+    window.share.event.on('toggleIndustry', handleToggleIndustry);
+    return () => {
+      window.share.event.removeListener('toggleIndustry', handleToggleIndustry);
+    };
+  }, [props]);
   useEffect(() => {
     getData();
     window.addEventListener('resize', debounce(onResize, 300));

src/pages/bootpage/index.js

@@ -5,15 +5,14 @@ import { appService } from '@/api';
 import { SERVICE_INTERFACE_SUCCESS_CODE } from '@/constants';
 import PandaBootPage from './panda';
 import IntegrationPage from './integration';
-
+import Demonstration from './demonstration';
 const systemItemName = '引导页模板'; // 系统配置项名称
 
 const BootPageTemplate = {
   default: PandaBootPage,
-  integration: IntegrationPage
-
+  integration: IntegrationPage,
+  demonstration: Demonstration,
 };
-
 const BootPage = props => {
   const [info, setInfo] = useState({
     first: true,
@@ -21,17 +20,18 @@ const BootPage = props => {
     error: false,
   });
   const [template, setTemplate] = useState('default');
-
+  const [pattern, setPattern] = useState(true); // 是否进入演示模式
   const RenderComponent = useMemo(() => {
-
     if (window?.globalConfig?.isIntegration >= 1) {
-      //集成登录
-      return BootPageTemplate.integration
-    } else {
-      //云平台
-      return BootPageTemplate[template] || BootPageTemplate.default
+      // 集成登录
+      return BootPageTemplate.integration;
+    }
+    if (pattern && template !== 'integration') {
+      return BootPageTemplate.demonstration;
     }
-  }, [template]);
+    // 云平台
+    return BootPageTemplate[template] || BootPageTemplate.default;
+  }, [template, pattern]);
 
   useEffect(() => {
     if (window?.globalConfig?.isIntegration >= 1) {
@@ -61,7 +61,9 @@ const BootPage = props => {
   }, []);
 
   return (
-    <SecurityLayout>{info.loading ? <Spin /> : info.error ? <Empty /> : <RenderComponent {...props} />}</SecurityLayout>
+    <SecurityLayout>
+      {info.loading ? <Spin /> : info.error ? <Empty /> : <RenderComponent setPattern={setPattern} {...props} />}
+    </SecurityLayout>
   );
 };
 

src/pages/bootpage/panda/index.js

@@ -17,7 +17,6 @@ import { defaultApp } from '@/micro';
 import usingIcon from '@/assets/bootPage/using-icon.png';
 import { appService } from '@/api';
 import styles from './index.less';
-import Demonstration from '../demonstration';
 const industries = [
   { name: '供水', type: '供水', subTitle: 'WATER SUPPLY', color: 'rgb(16,104,239)' },
   { name: '农饮水', type: '农饮水', subTitle: 'RURAL POTABLE WATER', color: 'rgb(4,142,101)' },
@@ -36,6 +35,7 @@ const industries = [
 const BootPage = props => {
   const dataRef = useRef();
   const process = useRef();
+  const { setPattern } = props;
   const [Industries] = useState(props.global.userInfo.Industries);
   const [percentBottom, setPercentBottom] = useState(-40);
   const [percentNum, setPercentNum] = useState(0);
@@ -45,7 +45,6 @@ const BootPage = props => {
   const [scale, setScale] = useState(1);
   const [loginAction, setAction] = useState(() => new LoginAction(props));
   const [num] = useState(Industries.filter(item => !!industries.find(d => d.type === item)).length);
-  const [pattern, setPattern] = useState(true); // 是否进入演示模式
   // const history = useHistory();
   useDocumentTitle(
     { title: defaultSetting.title, id: '', pageName: '行业切换' },
@@ -177,104 +176,95 @@ const BootPage = props => {
 
   return (
     <>
-      {pattern ? (
-        <Demonstration setPattern={setPattern} />
-      ) : (
-        <div className={styles.bootPage}>
-          <div className={styles.b_top_l}>
-            <div className={styles.b_top_l_btn} onClick={() => setPattern(true)}>
-              <img src={enterImg} alt="" /> 进入演示模式 <RightOutlined />
-            </div>
+      <div className={styles.bootPage}>
+        <div className={styles.b_top_l}>
+          <div className={styles.b_top_l_btn} onClick={() => setPattern(true)}>
+            <img src={enterImg} alt="" /> 进入演示模式 <RightOutlined />
           </div>
-          <div className={styles.bootPageMain}>
-            <header className={styles.bootPageHead}>
-              {/* 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.bootPageEn}>Panda Smart Water Integration 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`,
-              // }}
+        </div>
+        <div className={styles.bootPageMain}>
+          <header className={styles.bootPageHead}>
+            {/* 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.bootPageEn}>Panda Smart Water Integration 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`,
+            // }}
+          >
+            <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,
+              }}
             >
-              <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,
-                }}
-              >
-                {industries.map(
-                  item =>
-                    props.global &&
-                    Industries.indexOf(item.type) > -1 && (
-                      <li
-                        className={styles.bootPageLi}
-                        key={item.type}
-                        onClick={event => handlePage(event, item.type, loginAction)}
-                      >
-                        <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>
+              {industries.map(
+                item =>
+                  props.global &&
+                  Industries.indexOf(item.type) > -1 && (
+                    <li
+                      className={styles.bootPageLi}
+                      key={item.type}
+                      onClick={event => handlePage(event, item.type, loginAction)}
+                    >
+                      <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>
-                        {currentType === item.type && (
-                          <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={item.color} opacity="0.1" />
-                                  <use xlinkHref="#gentle-wave" x="50" y="-1" fill={item.color} opacity="0.2" />
-                                </g>
-                              </svg>
-                            </div>
+                      </div>
+                      {currentType === item.type && (
+                        <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={item.color} opacity="0.1" />
+                                <use xlinkHref="#gentle-wave" x="50" y="-1" fill={item.color} opacity="0.2" />
+                              </g>
+                            </svg>
                           </div>
-                        )}
-                      </li>
-                    ),
-                )}
-              </ul>
-            </section>
-            {/* <Space className={styles.abs}> */}
-            {/*  <Spin spinning={loadding} size="large" /> */}
-            {/* </Space> */}
-          </div>
-          {hasRole ? (
-            <div className={styles.cloudMonitorBtns}>
-              <div className="cloud-using-anaylysis-btn" onClick={toOMSUsingAnalysis}>
-                <img src={usingIcon} alt="" title="点击查看平台使用监控" />
-                <span>平台使用分析</span>
-              </div>
-            </div>
-          ) : null}
+                        </div>
+                      )}
+                    </li>
+                  ),
+              )}
+            </ul>
+          </section>
+          {/* <Space className={styles.abs}> */}
+          {/*  <Spin spinning={loadding} size="large" /> */}
+          {/* </Space> */}
         </div>
-      )}
+        {hasRole ? (
+          <div className={styles.cloudMonitorBtns}>
+            <div className="cloud-using-anaylysis-btn" onClick={toOMSUsingAnalysis}>
+              <img src={usingIcon} alt="" title="点击查看平台使用监控" />
+              <span>平台使用分析</span>
+            </div>
+          </div>
+        ) : null}
+      </div>
     </>
   );
 };