pref: 演示功能 loading优化

src/components/LoadPage/index.js

+/*
+ * @Title:
+ * @Author: hongmye
+ * @Date: 2024-03-28 13:43:42
+ */
+import React, { useRef, useEffect, isValidElement } from 'react';
+import PandaImage from '@/assets/images/loadPage/熊猫.png';
+import style from './style.less';
+
+export default props => {
+  const { type, percent, text } = props;
+
+  const extra = props.extra ?? {};
+
+  const progresRef = useRef(null);
+  const containerRef = useRef(null);
+  const lastCurrent = useRef(0);
+
+  useEffect(() => {
+    if (percent == undefined) return;
+    if (extra.progressCustom) return;
+    console.log(percent, 'percent');
+    // progresRef.current.style.animationDuration = `${10 * percent}s`;
+    // containerRef.current.style.transitionDuration = `${5 * (percent - lastCurrent.current)}s`;
+    // lastCurrent.current = percent;
+  }, [extra.progressCustom, percent]);
+
+  return (
+    <div className={style.panda_civbase_style_load_page_center_container} data-type={extra.loadCenterStyleType ?? type}>
+      {/* {extra.leftCustom ? (
+        <extra.leftCustom />
+      ) : (
+        <div className={style.panda_civbase_style_load_page_center_container_icon}>
+          <img
+            alt=""
+            src={extra.leftLogo ?? PandaImage}
+            className={style.panda_civbase_style_load_page_center_container_icon_image}
+          />
+          <div className={style.panda_civbase_style_load_page_center_container_icon_bg}>
+            <div />
+            <div />
+            <div />
+          </div>
+        </div>
+      )} */}
+      <div className={style.panda_civbase_style_load_page_center_container_logo}>
+        {extra.progressCustom ? (
+          <extra.progressCustom percent={percent} />
+        ) : (
+          <div className={style.panda_civbase_style_load_page_center_container_logo_progress}>
+            <div
+              ref={containerRef}
+              className={style.panda_civbase_style_load_page_center_container_logo_progress_inside}
+              style={{
+                width: `${(percent == undefined ? 1 : percent) * 100}%`,
+              }}
+            >
+              {percent != undefined ? (
+                <span className={style.panda_civbase_style_load_page_center_container_logo_progress_inside_percent}>
+                  {parseInt(percent * 100)}%
+                </span>
+              ) : null}
+              <div
+                ref={progresRef}
+                className={style.panda_civbase_style_load_page_center_container_logo_progress_inside_current}
+              />
+            </div>
+          </div>
+        )}
+        {text ? <div className={style.panda_civbase_style_load_page_center_container_logo_text}>{text}</div> : null}
+      </div>
+    </div>
+  );
+};

src/components/LoadPage/style.less

+@imageRoot : "@/assets/images/loadPage";
+
+
+
+.panda_civbase_style_load_page_center_container {
+    // display: flex;
+    // flex-direction: row;
+    position: relative;
+
+
+    &_icon {
+        position: relative;
+
+        &_image {
+            position: relative;
+            z-index: 10;
+            width: 239px;
+            height: 219px;
+
+        }
+
+        // &_bg {
+        //     left: 50%;
+        //     transform: translateX(-58%);
+        //     top: 9px;
+        //     position: absolute;
+        //     z-index: 5;
+
+        //     >div {
+        //         border-radius: 50%;
+        //         position: absolute;
+        //         left: 50%;
+        //         top: 50%;
+        //         transform: translate(-50%, -50%);
+        //         background: radial-gradient(rgba(50, 64, 82, 0) 50%, #3e4b5c 100%);
+        //         width: 0;
+        //         height: 0;
+        //     }
+
+        //     >div:nth-child(1) {
+        //         animation: circleFirst 4s linear 0s infinite none running;
+        //     }
+
+        //     >div:nth-child(2) {
+        //         animation: circleFirst 4s linear 1.5s infinite none running;
+        //     }
+
+        //     >div:nth-child(3) {
+        //         animation: circleFirst 4s linear 3s infinite none running;
+        //     }
+
+        // }
+    }
+
+    &_logo {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        position: relative;
+        z-index: 10;
+
+        >img {
+            margin-bottom: 33px;
+            margin-top: 24px;
+        }
+
+        &_progress {
+            position: relative;
+            width: 100%;
+            height: 20px;
+            background: #0A1E36;
+            border: 1px solid #6A798E;
+            border-radius: 10px;
+            white-space: nowrap;
+            overflow: hidden;
+            padding: 3px 5px;
+
+            &_inside {
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+                background: linear-gradient(to right, rgb(6, 164, 246), rgb(24, 178, 150));
+                border-radius: 5px;
+                transition: width 0.1s linear;
+
+                &_percent {
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    transform: translate(-50%, -50%);
+                    font-weight: bold;
+                    color: #fff;
+                    font-size: 20px;
+                    font-family: YouSheBiaoTiHei;
+                    z-index: 10;
+                    -webkit-text-stroke: 1px #091D35;
+                    text-stroke: 1px #091D35;
+                }
+
+                &_current {
+                    left: 0;
+                    top: 0;
+                    height: 100%;
+                    width: 100%;
+                    background: url('@{imageRoot}/小黑条.png') repeat-x center center;
+                    animation: imageMove 3s linear 0s infinite;
+                }
+            }
+        }
+
+        &_text {
+            color: #fff;
+            text-align: center;
+            margin-top: 5px;
+        }
+    }
+
+    &[data-type="mask"] {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+
+        .panda_civbase_style_load_page_center_container_icon {
+            position: relative;
+            margin-right: 0;
+            text-align: center;
+
+            &_image {
+                width: 120px;
+                max-height: 100%;
+            }
+
+            &_bg {
+                >div:nth-child(1) {
+                    animation: smallCircleFirst 4s linear 0s infinite none running;
+                }
+
+                >div:nth-child(2) {
+                    animation: smallCircleFirst 4s linear 1.5s infinite none running;
+                }
+
+                >div:nth-child(3) {
+                    animation: smallCircleFirst 4s linear 3s infinite none running;
+                }
+            }
+        }
+
+        .panda_civbase_style_load_page_center_container_logo {
+            margin-top: 8px;
+
+            &_progress {
+                width: 240px;
+
+                &_inside {
+                    &_percent {
+                        font-size: 18px;
+                        -webkit-text-stroke: 0.5px #091D35;
+                        text-stroke: 0.5px #091D35;
+                    }
+                }
+            }
+
+            &_text {
+                color: #fff;
+                text-align: center;
+                margin-top: 5px;
+            }
+        }
+    }
+
+}
+
+
+
+@keyframes circleFirst {
+    0% {
+        width: 0px;
+        height: 0px;
+    }
+
+    70% {
+        opacity: 1;
+    }
+
+    100% {
+        width: 450px;
+        height: 450px;
+        opacity: 0;
+    }
+}
+
+
+@keyframes smallCircleFirst {
+    0% {
+        width: 0px;
+        height: 0px;
+    }
+
+    70% {
+        opacity: 1;
+    }
+
+    100% {
+        width: 220px;
+        height: 220px;
+        opacity: 0;
+    }
+}
+
+@keyframes imageMove {
+    to {
+        background-position: 100% 0;
+    }
+
+    from {
+        background-position: 0 0;
+    }
+}
+
+@keyframes circleSecond {
+    0% {
+        width: 0px;
+        height: 0px;
+    }
+
+    25% {
+        width: 0px;
+        height: 0px;
+    }
+
+    75% {
+        width: 450px;
+        height: 450px;
+    }
+
+    100% {
+        width: 450px;
+        height: 450px;
+    }
+}
+
+@keyframes circleThrid {
+    0% {
+        width: 0px;
+        height: 0px;
+    }
+
+
+    66% {
+        width: 0px;
+        height: 0px;
+    }
+
+    100% {
+        width: 450px;
+        height: 450px;
+    }
+}
\ No newline at end of file

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

@@ -20,8 +20,10 @@ import styles from './index.less';
 const autoplay = 15000;
 SwiperCore.use([Autoplay, Pagination, Navigation, Mousewheel, EffectCoverflow]);
 const VideoItem = (props, ref) => {
-  const { selectKey = '', setSelectKey } = props;
+  const { selectKey = '', setSelectKey, showContent } = props;
   const swiperRef = useRef(null);
+  const timer = useRef(null);
+  const [showVideo, setShowVideo] = useState(false);
   const onSlideToLoop = index => {
     if (swiperRef.current) {
       swiperRef.current.slideToLoop(index);
@@ -40,7 +42,7 @@ const VideoItem = (props, ref) => {
         {row.title}
       </div>
       <div className={styles.video_wrap}>
-        <video autoPlay="autoPlay" muted controls src={row.video} loop />
+        {showVideo ? <video autoPlay="autoPlay" muted controls src={row.video} loop /> : null}
       </div>
     </div>
   );
@@ -61,10 +63,22 @@ const VideoItem = (props, ref) => {
     }
     if (e.$el[0]) {
       const videoDom = e.$el[0].querySelector('video');
-      videoDom.play && videoDom.play();
+      videoDom?.play && videoDom.play();
     }
   };
-  useEffect(() => {}, []);
+  useEffect(() => {
+    if (showContent) {
+      timer.current = setTimeout(() => {
+        setShowVideo(true);
+      }, 800);
+    }
+    return () => {
+      if (timer.current) {
+        clearTimeout(timer.current);
+        timer.current = null;
+      }
+    };
+  }, [showContent]);
   return (
     <div className={classNames(styles.video_list, 'dt_video_list')}>
       <Swiper

src/pages/bootpage/demonstration/index.js

@@ -22,6 +22,7 @@ import classNames from 'classnames';
 import { defaultApp } from '@/micro';
 import Iframe from '@/components/Container/Iframe';
 import moment from 'moment';
+import LoadPage from '@/components/LoadPage';
 import useFullScreen from './components/useFullScreen';
 import styles from './index.less';
 import LeftItem from './components/Left';
@@ -372,15 +373,15 @@ const Demonstration = props => {
   useEffect(() => {
     if (loading && !timer.current) {
       timer.current = setInterval(() => {
-        if (progressRef.current < 80) {
-          progressRef.current += 20;
+        if (progressRef.current < 95) {
+          progressRef.current += 5;
           setProgressValue(progressRef.current);
         } else {
           setProgressValue(99);
           timer.current && clearInterval(timer.current);
           timer.current = null;
         }
-      }, 100);
+      }, 50);
     }
     if (!loading) {
       setProgressValue(100);
@@ -423,24 +424,17 @@ const Demonstration = props => {
     <div className={classNames(styles.demonstration)} ref={ref}>
       {jumpLoading ? (
         <div className={styles.demonstrationLoad}>
-          <Progress
-            style={{ width: '30%' }}
-            trailColor="rgba(255,255,255,0.5)"
-            strokeColor="#1685FF"
-            percent={progressValue2}
-            showInfo={false}
-          />
+          <div style={{ width: '285px' }}>
+            <LoadPage percent={progressValue2 / 100} text="加载中~" />
+          </div>
         </div>
       ) : null}
+
       {loading || progressValue !== 100 ? (
         <div className={styles.loadingWrap}>
-          <Progress
-            style={{ width: '30%' }}
-            trailColor="rgba(255,255,255,0.5)"
-            strokeColor="#1685FF"
-            percent={progressValue}
-            showInfo={false}
-          />
+          <div style={{ width: '285px' }}>
+            <LoadPage percent={progressValue / 100} text="加载中~" />
+          </div>
         </div>
       ) : null}
       {showFullScreen ? (
@@ -485,7 +479,7 @@ const Demonstration = props => {
                 />
               </div>
               <div className={styles.row_c}>
-                <VideoItem ref={videoRef} selectKey={selectKey} setSelectKey={setSelectKey} />
+                <VideoItem ref={videoRef} selectKey={selectKey} setSelectKey={setSelectKey} showContent={showContent} />
               </div>
               <div className={styles.row_r}>
                 <RightItem

src/pages/bootpage/demonstration/index.less

@@ -92,6 +92,7 @@
     top: 0;
     left: 0;
     z-index: 1080;
+    padding-bottom: 50px;
     background-color: rgba(0, 0, 0, 0.6);
 
 
@@ -322,11 +323,14 @@
 
 .loadingWrap {
   position: absolute;
-  bottom: 20%;
-  left: 50%;
-  z-index: 10;
-  transform: translateX(-50%);
   width: 100%;
+  height: 100%;
+  position: absolute;
   display: flex;
+  align-items: center;
   justify-content: center;
+  top: 0;
+  left: 0;
+  z-index: 1080;
+  padding-bottom: 50px;
 }
\ No newline at end of file

src/pages/bootpage/index.js

+/*
+ * @Title:
+ * @Author: hongmye
+ * @Date: 2023-01-10 11:18:55
+ */
 import React, { useEffect, useMemo, useState } from 'react';
 import { Empty, Spin, notification } from 'antd';
 import SecurityLayout from '@/layouts/SecurityLayout';