fix: 演示功能入口修改

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

@@ -23,7 +23,7 @@ const BottomItem = props => {
       </div>
     ));
   };
-  const toPage = (e, url) => {
+  const toPage = url => {
     if (!isJump) return message.warning('该用户没有权限！');
     handToPage(url);
   };
@@ -57,7 +57,7 @@ const BottomItem = props => {
               </div>
               <div className={styles.list_item_info_wrap}>
                 <div className={styles.list_item_info_tip} type={col['所属行业']}>
-                  {col['所属行业']}
+                  {col['所属行业'] === '能源' ? '节水' : col['所属行业']}
                 </div>
                 <div className={styles.list_item_info_name}>
                   <Tooltip title={col['客户名称']} color="#1685FF">

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

@@ -182,12 +182,11 @@
                 background: url('@{imgSrc}/供水.png') no-repeat center/100% 100%;
             }
 
-            .list_item_info_tip[type='农饮水'] {
+            .list_item_info_tip[type='水利'] {
                 background: url('@{imgSrc}/农水.png') no-repeat center/100% 100%;
-                font-size: 10px;
             }
 
-            .list_item_info_tip[type='水利'] {
+            .list_item_info_tip[type='能源'] {
                 background: url('@{imgSrc}/节水.png') no-repeat center/100% 100%;
             }
 

src/pages/bootpage/demonstration/index.js

@@ -29,7 +29,7 @@ import { platformData } from './components/configData';
 
 const boxWidth = 1920;
 const boxHeight = 911;
-const projectType = ['供水', '排水', '农饮水', '水利'];
+const projectType = ['供水', '排水', '能源', '水利'];
 const Demonstration = props => {
   const onLineUrl = window.globalConfig?.mainserver || 'https://panda-water.cn/';
   const showFullScreen = true;
@@ -85,6 +85,7 @@ const Demonstration = props => {
     const loginAction = new LoginAction({ ...props, global: config });
     loginAction && loginAction.getUserInfoAndConfig(failCallback, true, data.industry);
   };
+
   // 新产品跳转
   const handToProduct = data => {
     if (!data.site) return message.warning('该用户没有权限！');
@@ -164,11 +165,18 @@ const Demonstration = props => {
       });
   };
 
-  const handToPage = (url, type) => {
+  const handToPage = url => {
     if (!url) return message.warning('该环境未配置，请联系管理员');
     window.open(url, '_blank');
   };
 
+  const handToPlatform = col => {
+    if (col['数值'] && col['数值'].includes('http')) {
+      handToPage(col['数值']);
+    }
+    handToProduct(col);
+  };
+
   const renderCenter = useMemo(() => {
     let list = [...platformData];
     list = list.map(l => {
@@ -183,14 +191,15 @@ const Demonstration = props => {
           </div>
         );
       }
+      const isJump = col.site || (col['数值'] && col['数值'].includes('http'));
       return (
-        <Tooltip title={col.site ? '点击体验' : ''} color="#1685FF">
+        <Tooltip title={isJump ? '点击体验' : ''} color="#1685FF">
           <div
-            onClick={() => handToProduct(col)}
+            onClick={() => handToPlatform(col)}
             className={styles.center_col}
             style={{ flex: col.flex }}
             type={col.title}
-            isJump={col.site ? 'yes' : 'no'}
+            isJump={isJump ? 'yes' : 'no'}
           >
             <img src={require(`@/assets/demonstration/${col.icon}`)} alt="" />
             {col.title}
@@ -331,7 +340,7 @@ const Demonstration = props => {
         </div>
         {loading ? (
           <div className={styles.loadingWrap}>
-            <div className={styles.loading} />
+            <div className={styles.loader} />
           </div>
         ) : null}
         {!loading ? (

src/pages/bootpage/demonstration/index.less

@@ -254,52 +254,81 @@
   position: absolute;
   left: 50%;
   top: 40%;
-  transform: translate(-50%, -20px);
+  transform: translate(-50%, -38px);
 }
 
-.loading {
-  display: block;
-  position: relative;
-  width: 6px;
-  height: 10px;
-
-  animation: rectangle infinite 1s ease-in-out -0.2s;
-
-  background-color: #f6ff00;
+.loader {
+  animation: rotate 2s infinite;
+  height: 50px;
+  width: 50px;
 }
 
-.loading:before,
-.loading:after {
-  position: absolute;
-  width: 6px;
-  height: 10px;
+.loader:before,
+.loader:after {
+  border-radius: 50%;
   content: "";
-  background-color: #f6ff00;
+  display: block;
+  height: 20px;
+  width: 20px;
 }
 
-.loading:before {
-  left: -14px;
+.loader:before {
+  animation: ball1 2s infinite;
+  background-color: #fff;
+  box-shadow: 30px 0 0 #1685FF;
+  margin-bottom: 10px;
+}
 
-  animation: rectangle infinite 1s ease-in-out -0.4s;
+.loader:after {
+  animation: ball2 2s infinite;
+  background-color: #1685FF;
+  box-shadow: 30px 0 0 #fff;
 }
 
-.loading:after {
-  right: -14px;
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg) scale(0.8)
+  }
 
-  animation: rectangle infinite 1s ease-in-out;
+  50% {
+    transform: rotate(360deg) scale(1.2)
+  }
+
+  100% {
+    transform: rotate(720deg) scale(0.8)
+  }
 }
 
-@keyframes rectangle {
+@keyframes ball1 {
+  0% {
+    box-shadow: 30px 0 0 #1685FF;
+  }
+
+  50% {
+    box-shadow: 0 0 0 #1685FF;
+    margin-bottom: 0;
+    transform: translate(15px, 15px);
+  }
 
-  0%,
-  80%,
   100% {
-    height: 20px;
-    box-shadow: 0 0 #f6ff00;
+    box-shadow: 30px 0 0 #1685FF;
+    margin-bottom: 10px;
+  }
+}
+
+@keyframes ball2 {
+  0% {
+    box-shadow: 30px 0 0 #fff;
   }
 
-  40% {
-    height: 30px;
-    box-shadow: 0 -20px #f6ff00;
+  50% {
+    box-shadow: 0 0 0 #fff;
+    margin-top: -20px;
+    transform: translate(15px, 15px);
+  }
+
+  100% {
+    box-shadow: 30px 0 0 #fff;
+    margin-top: 0;
   }
 }
\ No newline at end of file