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

执行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>

datavane / tis

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