fix: 引导 页修改

src/api/service/base.js

@@ -49,6 +49,7 @@ export const API = {
 
   GET_ACCOUNT_PAGE_LIST: '/PandaWorkFlow/WorkFlow/AccountManage/GetAccountPageList',
   GET_VIDEO_PLAY_LIST_BY_DEVICE_CODE: '/PandaMonitor/Monitor/Video/GetVideoPlayListByDeviceCode',
+  HealthCheckUrl: '/PandaCore/GCK/HealthCheck/ApiCheck', // 检查环境是否能访问
 };
 
 const services = {
@@ -251,6 +252,11 @@ const services = {
     method: constants.REQUEST_METHOD_GET,
     type: constants.REQUEST_HTTP,
   },
+  HealthCheckUrl: {
+    url: API.HealthCheckUrl,
+    method: constants.REQUEST_METHOD_GET,
+    type: constants.REQUEST_HTTP,
+  },
 };
 
 export const searchAutoCity = keywords => {

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

@@ -132,7 +132,7 @@ const BottomItem = props => {
               服务客户：
             </div>
             <div className={styles.l_item_num_list}>{renderNum(infoData['服务客户'], '服务客户')}</div>
-            <div className={styles.l_item_num_unit}>个</div>
+            <div className={styles.l_item_num_unit}>+</div>
           </div>
           <div className={styles.l_item}>
             <div className={styles.l_item_title} type="覆盖省份">

src/pages/demonstration/components/Bottom/index.less

 @imgSrc: '@/assets/images/demonstration';
 
+
+
 .bottom_item {
     display: flex;
-    width: 100%;
+    width: calc(100% - 27px);
     height: 100%;
     overflow: hidden;
-    padding: 0 28px 10px;
-    background: url('@{imgSrc}/bottom_bg.png') no-repeat left top;
-    background-size: calc(100% - 27px) 42px;
+    padding: 0 15px 10px 28px;
+    background: url('@{imgSrc}/bottom_bg.png') no-repeat left top,
+    url('@{imgSrc}/bottom_right_bg.png') no-repeat right 5px;
+    background-size: calc(100% - 10px) 42px, auto calc(100% - 5px);
 
     .left {
         flex: none;

src/pages/demonstration/components/Iframe/index.js

@@ -7,32 +7,32 @@ import React, { memo, useEffect } from 'react';
 import Iframe from 'react-iframe';
 import Empty from '@wisdom-components/empty';
 import axios from 'axios';
-
+import classNames from 'classnames';
+import { appService } from '@/api';
+import { decode, encode } from 'js-base64';
 import styles from './index.less';
 const IframeContainer = props => {
   const { linkUrl, onMessageBack, loading } = props;
 
   const onMessage = e => {
-    console.log('🚀 ~ e:', e);
-    onMessageBack && onMessageBack(e);
+    onMessageBack && onMessageBack(e?.data);
   };
   const onError = e => {
-    console.log('🚀 ~ e:', e);
     // onMessageBack && onMessageBack({ type: '无法连接' });
   };
   useEffect(() => {
     if (linkUrl) {
-      console.log('🚀 ~ linkUrl:', linkUrl);
+      // console.log(decodeURIComponent(decode('aHR0cHMlM0ElMkYlMkZzbHlzLnBhbmRhLXdhdGVyLmNuJTJG')), 'decode');
       const url = linkUrl;
       const baseUrl = url.split('civbase')[0];
-      axios({
-        url: `${baseUrl}PandaCore/GCK/Basis/GetUserInfo`,
-        method: 'get',
-        params: {},
-        ignoreSite: true,
-      })
+      appService
+        .HealthCheckUrl({
+          address: encode(baseUrl),
+        })
         .then(res => {
-          console.log(res, 'res');
+          if (res?.data !== 1) {
+            onMessageBack && onMessageBack({ type: '无法连接' });
+          }
         })
         .catch(err => {
           onMessageBack && onMessageBack({ type: '无法连接' });
@@ -50,11 +50,10 @@ const IframeContainer = props => {
     };
   }, [linkUrl, onError, onMessage, onMessageBack]);
   return (
-    <div className={styles['tab-iframe']} style={{ left: loading ? '-100%' : '0' }}>
+    <div className={classNames(styles['tab-iframe'])}>
       {linkUrl ? (
         <Iframe
           url={linkUrl}
-          // url="http://127.0.0.1:8082/civbase/user/noscret/?client=city&token=fc6f4fb33eec42e2bded7d4a47218af8"
           width="100%"
           height="100%"
           display="block"

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

@@ -11,6 +11,7 @@ import styles from './index.less';
 const RightItem = props => {
   const { listData, handToProduct } = props;
   const toPage = row => {
+    if (row.ID === 0) return;
     if (!row['产品地址']) return message.warning('未配置产品地址，请联系管理人员');
     if (!row['产品地址'].includes('https')) return message.warning('产品地址配置错误，请联系管理人员');
 

src/pages/demonstration/index.js

@@ -11,6 +11,7 @@ import { DoubleLeftOutlined, FullscreenExitOutlined, FullscreenOutlined, RightOu
 import backImg from '@/assets/images/demonstration/返回.png';
 import arrowLeftImg from '@/assets/images/demonstration/左箭头.png';
 import Cookies from 'js-cookie';
+import QueueAnim from 'rc-queue-anim';
 
 import { Button, Spin, message, Progress } from 'antd';
 import React, { useMemo, useState, useEffect, useRef } from 'react';
@@ -46,6 +47,7 @@ const Demonstration = props => {
   const [progressValue, setProgressValue] = useState(0);
   const progressRef2 = useRef(0);
   const timer2 = useRef(null);
+  const timer3 = useRef(null);
   const [progressValue2, setProgressValue2] = useState(0);
   const [loading, setLoading] = useState(true);
   const [projectConfig, setProjectConfig] = useState({}); // 项目案例是否可免密跳转
@@ -87,29 +89,42 @@ const Demonstration = props => {
     progressRef2.current = 0;
     setProgressValue2(0);
     timer2.current = setInterval(() => {
-      if (progressRef2.current < 95) {
-        progressRef2.current += 5;
+      if (progressRef2.current < 97.5) {
+        progressRef2.current += 2.5;
         setProgressValue2(progressRef2.current);
       } else {
         setProgressValue2(99);
         timer2.current && clearInterval(timer2.current);
         timer2.current = null;
       }
-    }, 300);
+    }, 100);
   };
   const jumpProgressEnd = () => {
     setProgressValue2(100);
     timer2.current && clearInterval(timer2.current);
     timer2.current = null;
   };
-
+  const startTiming = (time = 2) => {
+    if (timer3.current) {
+      clearInterval(timer3.current);
+      timer3.current = null;
+    }
+    timer3.current = setTimeout(() => {
+      setJumpLoading(false);
+      timer2.current && clearInterval(timer2.current);
+      timer2.current = null;
+    }, time * 1000);
+  };
   const handToProduct = (url, name) => {
     console.log('🚀 ~ url, name:', url, name, productConfig);
-    if (!productConfig[name]) return message.warning('该账号没有权限，请联系管理员');
+    if (!productConfig?.[name]) return message.warning('该账号没有权限，请联系管理员');
     setJumpLoading(true);
     jumpProgressStart();
+
     setLinkUrl(url);
+    startTiming(15);
   };
+
   const handError = err => {
     if (err) {
       message.error(err);
@@ -118,8 +133,9 @@ const Demonstration = props => {
     setJumpLoading(false);
     jumpProgressEnd();
   };
-  const onMessageBack = info => {
-    const { data } = info || {};
+  const onMessageBack = data => {
+    if (!data?.type) return;
+    console.log('🚀 ~ data:', data);
     if (data?.type === 'runAfterFirstMounted' || data?.type === 'loginSuccess') {
       jumpProgressEnd();
       setTimeout(() => {
@@ -130,13 +146,19 @@ const Demonstration = props => {
       handError();
     } else if (data?.type === '无法连接') {
       message.warning('该站点无法连接，请联系管理人员');
-      handError();
+      setTimeout(() => {
+        handError();
+      }, 100);
     }
   };
+
   const handToPage = url => {
     if (!url) return message.warning('该环境未配置，请联系管理员');
     if (!url.includes('https')) return;
+    setJumpLoading(true);
+    jumpProgressStart();
     setLinkUrl(url);
+    startTiming(4);
   };
 
   const renderCenter = useMemo(() => {
@@ -196,15 +218,12 @@ const Demonstration = props => {
       ],
     };
     const oid = props.global.userInfo?.cloudStationOID || props.global.userInfo?.OID;
-    if (oid) {
-      params.queryWheres.push({
-        field: '账号',
-        type: '等于',
-        value: oid.toString(),
-      });
-    } else {
-      return;
-    }
+    if (!oid) return;
+    params.queryWheres.push({
+      field: '账号',
+      type: '等于',
+      value: oid.toString(),
+    });
 
     appService.getAccountPageList(params).then(res => {
       let data = res?.data?.list || [];
@@ -256,13 +275,11 @@ const Demonstration = props => {
     };
     const oid = props.global.userInfo?.cloudStationOID || props.global.userInfo?.OID;
     if (!oid) return;
-    if (oid) {
-      params.queryWheres.push({
-        field: '账号',
-        type: '模糊查询',
-        value: oid.toString(),
-      });
-    }
+    params.queryWheres.push({
+      field: '账号',
+      type: '模糊查询',
+      value: oid.toString(),
+    });
 
     appService.getAccountPageList(params).then(res => {
       const data = res?.data?.list || [];
@@ -384,8 +401,8 @@ const Demonstration = props => {
             返回
           </div>
         </div>
-        <div className={classNames('animate__fadeIn', 'animate__animated', 'duration-500ms')}>
-          <Iframe loading={jumpLoading} linkUrl={linkUrl} onMessageBack={onMessageBack} />
+        <div className={classNames(!jumpLoading ? styles.scaleInCenter : styles.hide, 'animate__animated')}>
+          <Iframe linkUrl={linkUrl} onMessageBack={onMessageBack} />
         </div>
       </>
     );
@@ -450,10 +467,10 @@ const Demonstration = props => {
   }, [props.global]);
   useEffect(() => {
     const tk = Cookies.get('token') || props.global.token;
-    const isLogin = !!tk;
-    console.log('🚀 ~ isLogin:', isLogin);
+    const isLogin = tk !== null && tk !== 'undefined' && tk !== void 0;
     let client = props?.global?.client || sessionStorage.getItem('client') || null;
     client = client !== 'undefined' && !_.isNull(client) && !_.isUndefined(client) ? client : 'city';
+    // eslint-disable-next-line no-prototype-builtins
     const generateType = props.global && props.global.hasOwnProperty('get') ? props.global.get('generateType') : null;
     if (!isLogin) {
       history.push(`/user/login?client=${client}${generateType || ''}`, { reload: true });
@@ -464,21 +481,20 @@ const Demonstration = props => {
   return (
     <div className={classNames(styles.demonstration)} ref={ref}>
       {jumpLoading ? (
-        <div className={styles.demonstrationLoad}>
+        <div className={styles.demonstrationLoad} key="jumpLoading">
           <div style={{ width: '285px' }}>
-            <LoadPage percent={progressValue2 / 100} text="加载中~" />
+            <LoadPage percent={progressValue2 / 100} text="页面加载中~" />
           </div>
         </div>
       ) : null}
-
       {loading || progressValue !== 100 ? (
-        <div className={styles.loadingWrap}>
+        <div className={styles.loadingWrap} key="loading">
           <div style={{ width: '285px' }}>
-            <LoadPage percent={progressValue / 100} text="加载中~" />
+            <LoadPage percent={progressValue / 100} text="数据加载中~" />
           </div>
         </div>
       ) : null}
-      {showFullScreen ? (
+      {showFullScreen && !linkUrl ? (
         <div className={styles.CV_exit} onClick={exit}>
           <Button type="text" style={{ color: '#fff', fontSize: '24px' }}>
             {isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
@@ -560,6 +576,9 @@ const mapDispatchToProps = dispatch => ({
   updateCurrentIndex(index) {
     dispatch(actionCreators.updateCurrentIndex(index));
   },
+  logout() {
+    dispatch(actionCreators.logout());
+  },
 });
 export default connect(
   mapStateToProps,

src/pages/demonstration/index.less

@@ -369,4 +369,44 @@
   left: 0;
   z-index: 1080;
   padding-bottom: 50px;
+}
+
+.hide {
+  visibility: hidden;
+}
+
+
+
+@-webkit-keyframes scale-in-center {
+  0% {
+    -webkit-transform: scaleY(0);
+    transform: scaleY(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: scaleY(1);
+    transform: scaleY(1);
+    opacity: 1;
+  }
+}
+
+@keyframes scale-in-center {
+  0% {
+    -webkit-transform: scaleY(0);
+    transform: scaleY(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: scaleY(1);
+    transform: scaleY(1);
+    opacity: 1;
+  }
+}
+
+.scaleInCenter {
+  visibility: visible;
+  -webkit-animation: scale-in-center .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+  animation: scale-in-center .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 }
\ No newline at end of file