数据管道导入实时导入可视化增强 #353

baisui1981 · 2024-09-05T00:18:24Z

执行TIS数据管道可视化增强，让用户实时直观感受到导入数据执行进度状态

实时显示导入数据量，加入导入总数实时显示，使用以下html效果，特别指出数字每次变动会闪烁一下

            <html>
        <head>
        
         <style>
         #numberIndicator {
          font-size: 24px;
          color:white;
          padding: 10px;
          background-color: #fff; /* 初始背景颜色 */
          animation: blink 0.5s linear infinite; /* 应用闪烁动画，但默认不执行，通过类控制 */
          transition: background-color 0.5s; /* 添加平滑的颜色过渡效果 */
        }
        
        /* 定义闪烁动画 */
        @keyframes blink {
          0% {background-color: #fff;}
          50% {background-color: black;} /* 闪烁时的颜色，这里设置为红色 */
          100% {background-color: #fff;}
        }
        /* 当添加highlight类时，停止闪烁并改变背景颜色 */
        #numberIndicator.highlight {
          animation: none;
          background-color: black; /* 或者你希望的其他颜色 */
        }
         </style>
        
        
        </head>
        <body>
        
        <div id="numberIndicator">0</div>
        </body>
         <script>
        
        let currentValue = 0;
        
        function updateNumber(newValue) {
          if (newValue !== currentValue) { // 只有当数值变化时才执行动画
            currentValue = newValue;
            document.getElementById('numberIndicator').innerText = newValue;
            document.getElementById('numberIndicator').classList.remove('highlight'); // 添加高亮类以停止闪烁并改变背景色
        
            // 使用setTimeout在一段时间后移除高亮效果，模拟闪烁
            setTimeout(() => {
             
              try{
              document.getElementById('numberIndicator').classList.add('highlight');
              }catch(e){
  	             console.log(e);
              }
              // 这里可以重新开启闪烁动画，如果需要的话，不过通常一次变化后保持静止更常见
            }, 500); // 0.5秒后移除高亮，根据需要调整时间
          }
        }
        
        // 示例：更新数字
        
        setInterval(function(){
          updateNumber(Math.random()*1000);
        },2000);
        
        
         </script>
        </html>

baisui1981 added this to the V4.1.0 milestone Sep 5, 2024

baisui1981 added the enhancement New feature or request label Sep 5, 2024

baisui1981 mentioned this issue Dec 1, 2024

提供实时任务限流&执行状态可视化功能 #397

Open

baisui1981 modified the milestones: v4.1.0, v4.2.0 Dec 1, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

数据管道导入实时导入可视化增强 #353

数据管道导入实时导入可视化增强 #353

baisui1981 commented Sep 5, 2024 •

edited

Loading

数据管道导入实时导入可视化增强 #353

数据管道导入实时导入可视化增强 #353

Comments

baisui1981 commented Sep 5, 2024 • edited Loading

baisui1981 commented Sep 5, 2024 •

edited

Loading