feat: 演示功能入口修改

src/pages/bootpage/demonstration/components/Bottom/index.js

@@ -3,14 +3,14 @@
  * @Author: hongmye
  * @Date: 2023-12-26 18:34:42
  */
-import { ConfigProvider, Image, Tooltip } from 'antd';
+import { Image, Tooltip, message } from 'antd';
 import React, { useMemo, useEffect, useState } from 'react';
 import classNames from 'classnames';
-import zhCN from 'antd/es/locale/zh_CN';
 import DataCarousel from '../DataCarousel';
 import styles from './index.less';
 const BottomItem = props => {
-  const { listData = [], configData = [], onLineUrl, handToPage, handlePage } = props;
+  const { listData = [], configData = [], onLineUrl, handToPage, handlePage, industries = [] } = props;
+  const isJump = industries.includes('项目案例');
   const [list, setList] = useState([]);
   const [infoData, setInfoData] = useState({});
   const renderNum = (num, type) => {
@@ -23,15 +23,25 @@ const BottomItem = props => {
       </div>
     ));
   };
+  const toPage = (e, url) => {
+    if (!isJump) return message.warning('该用户没有权限！');
+    handToPage(url);
+  };
+  const toMore = (e, url) => {
+    if (!isJump) return message.warning('该用户没有权限！');
+    handlePage(e, '项目案例');
+  };
   const renderCol = (row, rindex) => {
     if (!Array.isArray(row)) return null;
     return (
       <div className={styles.list_item_col}>
         {row.map((col, cIndex) => (
+          <Tooltip title={col['项目环境'] && isJump ? '点击体验' : ''} color="#1685FF">
             <div
               key={`${rindex}-${cIndex}`}
-            type={col['项目环境'] ? 'jump' : 'none'}
-            onClick={() => handToPage(col['项目环境'])}
+              type={col['项目环境'] && isJump ? 'jump' : 'none'}
+              onClick={() => toPage(col['项目环境'])}
+              alt="点击体验"
               className={styles.list_item}
             >
               <div className={styles.list_item_img_wrap}>
@@ -42,6 +52,7 @@ const BottomItem = props => {
                     preview={false}
                   />
                 </div>
+
                 {col['重要程度'] === '样板' ? <div className={styles.list_item_img_tip} /> : null}
               </div>
               <div className={styles.list_item_info_wrap}>
@@ -49,11 +60,14 @@ const BottomItem = props => {
                   {col['所属行业']}
                 </div>
                 <div className={styles.list_item_info_name}>
-                <Tooltip title={col['客户名称']}>{col['客户名称']}</Tooltip>
+                  <Tooltip title={col['客户名称']} color="#1685FF">
+                    {col['客户名称']}
+                  </Tooltip>
                 </div>
                 <div className={styles.list_item_info_address}>{col['城市']}</div>
               </div>
             </div>
+          </Tooltip>
         ))}
       </div>
     );
@@ -155,12 +169,13 @@ const BottomItem = props => {
           renderItem={renderCol}
           config={{
             direction: 'horizontal',
-            width: 212,
-            loop: true,
+            width: 1520,
+            loop: false,
+            slidesPerView: 7,
           }}
         />
       </div>
-      <div className={styles.right} onClick={e => handlePage(e, '项目案例')}>
+      <div className={styles.right} onClick={e => toMore(e)}>
         查看全部
       </div>
     </div>

src/pages/bootpage/demonstration/components/Left/index.js

@@ -5,12 +5,13 @@
  */
 import React, { useMemo, useEffect, useState, memo } from 'react';
 
+import { Tooltip } from 'antd';
 import { schemeData } from '../configData';
 
 import styles from './index.less';
 let timer;
 const LeftItem = props => {
-  const { selectKey, onChangeScheme, handlePage } = props;
+  const { selectKey, onChangeScheme, handlePage, industries } = props;
 
   const onMouseEnter = (item, index) => {
     if (timer) {
@@ -32,6 +33,7 @@ const LeftItem = props => {
       </div>
       <div className={styles.l_list}>
         {schemeData.map((item, index) => (
+          <Tooltip title={industries.includes(item.type) ? '点击体验' : ''} color="#1685FF">
             <div
               className={styles.l_list_item}
               key={item.title}
@@ -44,6 +46,7 @@ const LeftItem = props => {
               <div className={styles.l_list_item_title}>- {item.title} -</div>
               <div className={styles.l_list_item_tip} />
             </div>
+          </Tooltip>
         ))}
       </div>
     </div>

src/pages/bootpage/demonstration/components/Right/index.js

@@ -9,20 +9,34 @@ import classNames from 'classnames';
 import DataCarousel from '../DataCarousel';
 import styles from './index.less';
 const RightItem = props => {
-  const { listData, handToPage } = props;
+  const { listData, handToPage, handToProduct } = props;
+  const toPage = row => {
+    if (row.site) {
+      handToProduct(row);
+    } else if (row['产品地址']) {
+      handToPage(row['产品地址']);
+    }
+  };
   const renderRow = (row, index) => {
     const rIndex = `r_${index % 7}`;
     return (
+      <Tooltip
+        placement="left"
+        title={row['产品地址'] || row.site ? '点击体验' : ''}
+        mouseEnterDelay={0.5}
+        color="#1685FF"
+      >
         <div
           className={styles.r_list_item}
           key={row['产品名称']}
           rIndex={rIndex}
-        type={row['产品地址'] ? 'jump' : 'none'}
-        onClick={() => handToPage(row['产品地址'])}
+          type={row['产品地址'] || row.site ? 'jump' : 'none'}
+          onClick={() => toPage(row)}
         >
           <div className={styles.r_list_item_title}>{row['产品名称']}</div>
           <div className={styles.r_list_item_tip} />
         </div>
+      </Tooltip>
     );
   };
 
@@ -36,11 +50,12 @@ const RightItem = props => {
         <DataCarousel
           gap={1}
           autoplay={5000}
-          itemHeight={50}
+          itemHeight={350}
           list={listData}
           renderItem={renderRow}
           config={{
-            loop: true,
+            loop: false,
+            slidesPerView: 7,
           }}
         />
       </div>

src/pages/bootpage/demonstration/components/Right/index.less

@@ -36,7 +36,7 @@
         overflow: hidden;
 
         .r_list_item[type='jump']:hover {
-            bottom: -8px;
+            // bottom: -8px;
             filter: brightness(160%)
         }
 

src/pages/bootpage/demonstration/components/configData.js

@@ -38,43 +38,7 @@ const schemeData = [
     type: '能源',
   },
 ];
-const productData = [
-  {
-    title: '智慧生产调度管控平台',
-    url: '',
-    blank: true,
-  },
-  {
-    title: '智慧水厂数字孪生平台',
-    url: '',
-    blank: true,
-  },
-  {
-    title: '智慧设备资产管理平台',
-    url: '',
-    blank: true,
-  },
-  {
-    title: '智慧工程物资管理平台',
-    url: '',
-    blank: true,
-  },
-  {
-    title: '智慧应急调度指挥中心',
-    url: '',
-    blank: true,
-  },
-  {
-    title: '智慧水厂养殖监控平台',
-    url: '',
-    blank: true,
-  },
-  {
-    title: '智慧水务大数据可视化平台',
-    url: '',
-    blank: true,
-  },
-];
+
 const platformData = [
   {
     title: '水务统一接入平台',
@@ -126,4 +90,4 @@ const platformData = [
     blank: true,
   },
 ];
-export { schemeData, productData, platformData };
+export { schemeData, platformData };

src/pages/bootpage/demonstration/index.js

+/* eslint-disable indent */
+/* eslint-disable no-undef */
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable global-require */
 /*
@@ -7,9 +9,11 @@
  */
 import { FullscreenExitOutlined, FullscreenOutlined, RightOutlined } from '@ant-design/icons';
 import exitImg from '@/assets/demonstration/退出.png';
-import { Button, message } from 'antd';
+import { Button, Spin, message, Tooltip } from 'antd';
 import React, { useMemo, useState, useEffect, useRef } from 'react';
 import { cloneDeep, debounce } from 'lodash';
+import Cookies from 'js-cookie';
+import { encode } from 'js-base64';
 import { appService } from '@/api';
 import { actionCreators } from '@/containers/App/store';
 import { connect } from 'react-redux';
@@ -30,8 +34,8 @@ 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('供水产品');
   const [boxSize, setBoxSize] = useState({
     scale: 1,
@@ -57,6 +61,9 @@ const Demonstration = props => {
       videoRef.current.onSlideToLoop(index);
     }
   };
+  const failCallback = err => {
+    setJumpLoading(false);
+  };
   // 方案跳转
   const handlePage = (event, type, row) => {
     const config = props.global;
@@ -65,15 +72,100 @@ const Demonstration = props => {
       message.error(`该用户未配置${row.title}`);
       return;
     }
+    setJumpLoading(true);
     config.uiwidgets = [];
     config.widgets = [];
     config.allWidgets = [];
     props.instance && props.instance.updateConfig(config);
-    loginAction && loginAction.getUserInfoAndConfig('', true, type);
+    const loginAction = new LoginAction({ ...props, global: config });
+    loginAction && loginAction.getUserInfoAndConfig(failCallback, true, type);
+  };
+  const updateConfig = (config, data) => {
+    props.updateConfig && props.updateConfig(config);
+    const loginAction = new LoginAction({ ...props, global: config });
+    loginAction && loginAction.getUserInfoAndConfig(failCallback, true, data.industry);
+  };
+  // 新产品跳转
+  const handToProduct = data => {
+    if (!data.site) return message.warning('该用户没有权限！');
+    setJumpLoading(true);
+    const userParam = {
+      token: props.global.token,
+      subOID: 'subOID',
+      site: data.site,
+      ignoreSite: true,
+    };
+    const gateWayParam = {
+      _site: data.site,
+    };
+    Promise.all([appService.getUserInfo(userParam), appService.getWateWayConfig(gateWayParam)])
+      .then(results => {
+        const res = results[0];
+        const gatewayRes = results[1];
+        if (res.code !== 0) {
+          setJumpLoading(false);
+          message.error('获取用户信息失败');
+        }
+        // 重置一些环境配置
+        const config = { ...props.global };
+        config.uiwidgets = [];
+        config.widgets = [];
+        config.allWidgets = [];
+        config.userInfo = window?.globalConfig?.transformUserInfo?.(res.data) ?? res.data;
+
+        // 默认有个上次记住的登入企业，存在印象。这里把cookie和localStorage中的都重新设置一下
+        const date = new Date();
+        date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
+        const encodeSite = encode(encodeURIComponent(data.site));
+        localStorage.setItem('loginSite', JSON.stringify({ [config.token]: data.site }));
+        Cookies.set('site', encodeSite, {
+          expires: date,
+          path: '/',
+        });
+        props.updateConfig && props.updateConfig(config);
+        // 重置网关配置
+
+        const hasGateWay =
+          !gatewayRes || !gatewayRes.data
+            ? false
+            : _.isString(gatewayRes.data)
+            ? JSON.parse(gatewayRes.data)
+            : typeof gatewayRes.data === 'boolean'
+            ? gatewayRes.data
+            : false;
+        config.hasGateWay = hasGateWay;
+        config.apiGatewayDomain = `${window.location.origin}${hasGateWay ? '/PandaCore/GateWay' : ''}`;
+        if (hasGateWay) {
+          appService
+            .authorizationToken({
+              loginName: config.userInfo?.loginName || '',
+              type: 'WorkNo',
+            })
+            .then(tokenRes => {
+              if (res.code === 0) {
+                config.access_token = tokenRes.data?.access_token ?? '';
+                localStorage.setItem('access_token', config.access_token);
+              }
+              updateConfig(config, data);
+            })
+            .catch(err => {
+              updateConfig(config, data);
+            });
+        } else {
+          config.access_token = null;
+          localStorage.setItem('access_token', config.access_token);
+          updateConfig(config, data);
+        }
+      })
+      .catch(err => {
+        setJumpLoading(true);
+
+        message.error('获取用户信息失败');
+      });
   };
 
   const handToPage = (url, type) => {
-    if (!url) return;
+    if (!url) return message.warning('该环境未配置，请联系管理员');
     window.open(url, '_blank');
   };
 
@@ -81,10 +173,8 @@ const Demonstration = props => {
     let list = [...platformData];
     list = list.map(l => {
       const item = configData.find(c => c['名称'] === l.title);
-      l.url = item?.['数值'];
-      return l;
+      return { ...l, ...item };
     });
-
     return list.map(col => {
       if (col.isCenter) {
         return (
@@ -94,17 +184,19 @@ const Demonstration = props => {
         );
       }
       return (
+        <Tooltip title={col.site ? '点击体验' : ''} color="#1685FF">
           <div
-          onClick={() => handToPage(col.url)}
+            onClick={() => handToProduct(col)}
             className={styles.center_col}
             style={{ flex: col.flex }}
             type={col.title}
-          isJump={col.url ? 'yes' : 'no'}
+            isJump={col.site ? 'yes' : 'no'}
           >
             <img src={require(`@/assets/demonstration/${col.icon}`)} alt="" />
             {col.title}
             <RightOutlined />
           </div>
+        </Tooltip>
       );
     });
   }, [configData]);
@@ -167,12 +259,30 @@ const Demonstration = props => {
       let data1 = dataStr1 ? JSON.parse(dataStr1) : [];
       data1 = data1.filter(d => projectType.includes(d['所属行业']));
       const dataStr2 = result[1]?.data?.jsonData || '';
-      const data2 = dataStr2 ? JSON.parse(dataStr2) : [];
+      let data2 = dataStr2 ? JSON.parse(dataStr2) : [];
       const dataStr3 = result[2]?.data?.jsonData || '';
-      const data3 = dataStr3 ? JSON.parse(dataStr3) : [];
+      let data3 = dataStr3 ? JSON.parse(dataStr3) : [];
+      const groups = props.global?.userInfo?.Groups || [];
+
+      data3 = data3.map(d => {
+        const item = groups.find(g => g.site === d.site);
+        if (item) {
+          return { ...d, ...item };
+        }
+        delete d.site;
+        return d;
+      });
+      data2 = data2.map(d => {
+        const item = groups.find(g => g.site === d['数值']);
+        if (item) {
+          return { ...d, ...item };
+        }
+        return d;
+      });
       setProjectData(data1);
       setConfigData(data2);
       setProductData(data3);
+
       setLoading(false);
     });
   };
@@ -186,6 +296,11 @@ const Demonstration = props => {
   }, []);
   return (
     <div className={classNames(styles.demonstration)} ref={ref}>
+      {jumpLoading ? (
+        <div className={styles.demonstrationLoad}>
+          <Spin />
+        </div>
+      ) : null}
       {showFullScreen ? (
         <div className={styles.CV_exit} onClick={exit}>
           <Button type="text" style={{ color: '#fff', fontSize: '24px' }}>
@@ -228,13 +343,14 @@ const Demonstration = props => {
                   selectKey={selectKey}
                   onChangeScheme={onChangeScheme}
                   handlePage={handlePage}
+                  industries={props.global?.userInfo?.Industries || []}
                 />
               </div>
               <div className={styles.row_c}>
                 <VideoItem ref={videoRef} selectKey={selectKey} setSelectKey={setSelectKey} />
               </div>
               <div className={styles.row_r}>
-                <RightItem listData={productData} handToPage={handToPage} />
+                <RightItem listData={productData} handToPage={handToPage} handToProduct={handToProduct} />
               </div>
             </div>
             <div className={classNames(styles.center_wrap, 'animate__fadeIn', 'animate__animated', 'duration-500ms')}>
@@ -248,6 +364,7 @@ const Demonstration = props => {
                 onLineUrl={onLineUrl}
                 handToPage={handToPage}
                 handlePage={handlePage}
+                industries={props.global?.userInfo?.Industries || []}
               />
             </div>
           </>

src/pages/bootpage/demonstration/index.less

@@ -15,6 +15,20 @@
   align-items: center;
   justify-content: center;
 
+  .demonstrationLoad {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    left: 0;
+    z-index: 110;
+    background-color: rgba(255, 255, 255, 0.8);
+
+  }
+
   .demonstrationWrap {
     height: 100%;
     width: 100%;

src/pages/bootpage/panda/index.js

 /* eslint-disable global-require */
 // 云平台引导页
 import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
+import enterImg from '@/assets/demonstration/进入.png';
+import { RightOutlined } from '@ant-design/icons';
 
 import { Space, Spin, Progress } from 'antd';
 import classNames from 'classnames';
@@ -15,7 +17,7 @@ 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)' },
@@ -43,6 +45,7 @@ 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: '行业切换' },
@@ -173,7 +176,16 @@ const BootPage = props => {
   }, [props.global.token]);
 
   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>
           <div className={styles.bootPageMain}>
             <header className={styles.bootPageHead}>
               {/* eslint-disable-next-line jsx-a11y/alt-text */}
@@ -184,7 +196,12 @@ const BootPage = props => {
               </div>
             </header>
             <section
-          className={classNames(styles.bootPageSection, 'animate__fadeInDown', 'animate__animated', 'duration-500ms')}
+              className={classNames(
+                styles.bootPageSection,
+                'animate__fadeInDown',
+                'animate__animated',
+                'duration-500ms',
+              )}
               // style={{
               //   width: `${scale < 1 ? 1280 : Math.ceil(1280 * scale)}px`,
               // }}
@@ -257,6 +274,8 @@ const BootPage = props => {
             </div>
           ) : null}
         </div>
+      )}
+    </>
   );
 };
 const mapStateToProps = state => ({