pref: 演示功能进度条

src/pages/bootpage/demonstration/index.js

@@ -38,7 +38,9 @@ const Demonstration = props => {
   const progressRef = useRef(0);
   const timer = useRef(null);
   const [progressValue, setProgressValue] = useState(0);
-
+  const progressRef2 = useRef(0);
+  const timer2 = useRef(null);
+  const [progressValue2, setProgressValue2] = useState(0);
   const [loading, setLoading] = useState(true);
   const [showContent, setShowContent] = useState(false);
   const [jumpLoading, setJumpLoading] = useState(false);
@@ -67,9 +69,34 @@ const Demonstration = props => {
       videoRef.current.onSlideToLoop(index);
     }
   };
+  const jumpProgressStart = () => {
+    if (timer2.current) {
+      clearInterval(timer2.current);
+      timer2.current = null;
+    }
+    progressRef2.current = 0;
+    setProgressValue2(0);
+    timer2.current = setInterval(() => {
+      if (progressRef2.current < 95) {
+        progressRef2.current += 5;
+        setProgressValue2(progressRef2.current);
+      } else {
+        setProgressValue2(99);
+        timer2.current && clearInterval(timer2.current);
+        timer2.current = null;
+      }
+    }, 300);
+  };
+  const jumpProgressEnd = () => {
+    setProgressValue2(100);
+    timer2.current && clearInterval(timer2.current);
+    timer2.current = null;
+  };
   const failCallback = err => {
     setJumpLoading(false);
+    jumpProgressEnd();
   };
+
   // 方案跳转
   const handlePage = (event, type, row) => {
     const config = props.global;
@@ -79,6 +106,7 @@ const Demonstration = props => {
       return;
     }
     setJumpLoading(true);
+    jumpProgressStart();
     config.uiwidgets = [];
     config.widgets = [];
     config.allWidgets = [];
@@ -96,6 +124,7 @@ const Demonstration = props => {
   const handToProduct = data => {
     if (!data.site) return message.warning('该用户没有权限！');
     setJumpLoading(true);
+    jumpProgressStart();
     const userParam = {
       token: props.global.token,
       subOID: 'subOID',
@@ -111,6 +140,7 @@ const Demonstration = props => {
         const gatewayRes = results[1];
         if (res.code !== 0) {
           setJumpLoading(false);
+          jumpProgressEnd();
           message.error('获取用户信息失败');
         }
         // 重置一些环境配置
@@ -165,8 +195,8 @@ const Demonstration = props => {
         }
       })
       .catch(err => {
-        setJumpLoading(true);
-
+        setJumpLoading(false);
+        jumpProgressEnd();
         message.error('获取用户信息失败');
       });
   };
@@ -302,6 +332,7 @@ const Demonstration = props => {
 
   const handError = err => {
     setJumpLoading(false);
+    jumpProgressEnd();
   };
   useEffect(() => {
     if (loading && !timer.current) {
@@ -348,13 +379,21 @@ const Demonstration = props => {
     onResize();
     return () => {
       window.removeEventListener('resize', onResize);
+      timer2.current && clearInterval(timer2.current);
+      timer2.current = null;
     };
   }, []);
   return (
     <div className={classNames(styles.demonstration)} ref={ref}>
       {jumpLoading ? (
         <div className={styles.demonstrationLoad}>
-          <div className={styles.jumpLoader} />
+          <Progress
+            style={{ width: '30%' }}
+            trailColor="rgba(255,255,255,0.5)"
+            strokeColor="#1685FF"
+            percent={progressValue2}
+            showInfo={false}
+          />
         </div>
       ) : null}
       {loading || progressValue !== 100 ? (

src/pages/bootpage/demonstration/index.less

@@ -25,7 +25,8 @@
     top: 0;
     left: 0;
     z-index: 1080;
-    background-color: rgba(0, 0, 0, 0.4);
+    background-color: rgba(0, 0, 0, 0.6);
+
 
   }
 
@@ -250,141 +251,15 @@
   }
 }
 
-.loadingWrap {
-  position: absolute;
-  left: 50%;
-  top: 40%;
-  transform: translate(-50%, -38px);
-}
-
-.loader {
-  animation: rotate 1s infinite;
-  height: 50px;
-  width: 50px;
-}
-
-.loader:before,
-.loader:after {
-  border-radius: 50%;
-  content: "";
-  display: block;
-  height: 20px;
-  width: 20px;
-}
-
-.loader:before {
-  animation: ball1 1s infinite;
-  background-color: #fff;
-  box-shadow: 30px 0 0 #1685FF;
-  margin-bottom: 10px;
-}
-
-.loader:after {
-  animation: ball2 1s infinite;
-  background-color: #1685FF;
-  box-shadow: 30px 0 0 #fff;
-}
-
-@keyframes rotate {
-  0% {
-    transform: rotate(0deg) scale(0.8)
-  }
-
-  50% {
-    transform: rotate(360deg) scale(1.2)
-  }
-
-  100% {
-    transform: rotate(720deg) scale(0.8)
-  }
-}
-
-@keyframes ball1 {
-  0% {
-    box-shadow: 30px 0 0 #1685FF;
-  }
-
-  50% {
-    box-shadow: 0 0 0 #1685FF;
-    margin-bottom: 0;
-    transform: translate(15px, 15px);
-  }
-
-  100% {
-    box-shadow: 30px 0 0 #1685FF;
-    margin-bottom: 10px;
-  }
-}
-
-@keyframes ball2 {
-  0% {
-    box-shadow: 30px 0 0 #fff;
-  }
-
-  50% {
-    box-shadow: 0 0 0 #fff;
-    margin-top: -20px;
-    transform: translate(15px, 15px);
-  }
-
-  100% {
-    box-shadow: 30px 0 0 #fff;
-    margin-top: 0;
-  }
-}
-
-.jumpLoader {
-  width: 8px;
-  height: 40px;
-  border-radius: 4px;
-  display: block;
-  margin: 20px auto;
-  position: relative;
-  background: currentColor;
-  color: #1685FF;
-  box-sizing: border-box;
-  animation: animloader 0.3s 0.3s linear infinite alternate;
-}
 
-.jumpLoader::after,
-.jumpLoader::before {
-  content: '';
-  width: 8px;
-  height: 40px;
-  border-radius: 4px;
-  background: currentColor;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  left: 20px;
-  box-sizing: border-box;
-  animation: animloader 0.3s 0.45s linear infinite alternate;
-}
-
-.jumpLoader::before {
-  left: -20px;
-  animation-delay: 0s;
-}
-
-@keyframes animloader {
-  0% {
-    height: 48px
-  }
-
-  100% {
-    height: 4px
-  }
-}
 
 .loadingWrap {
-  width: 100%;
-  height: 100%;
   position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   bottom: 20%;
   left: 50%;
   z-index: 10;
   transform: translateX(-50%);
+  width: 100%;
+  display: flex;
+  justify-content: center;
 }
\ No newline at end of file