DataV icon indicating copy to clipboard operation
DataV copied to clipboard

dv-scroll-board updateRows()导致轮播抖动和变速

Open code00Way opened this issue 1 year ago • 0 comments

Bug report

出现Bug的组件?

dv-scroll-board

组件配置数据?

function getWaringTableDataTemplate() {
    let data = [];
    data.push([''])
    return {
        data: data,
        oddRowBGC: 'FFF-FFF00',
        evenRowBGC: 'FFF-FFF00',
        waitTime: 10000,
        rowNum:3,
        index: true,
        columnWidth: [25],
        align: ['left'],
    }
}

更新数据是通过websocket推送的,推送有可能会连续推多次,且间隔较小。通过观察源码发现,如果一开始动画是停止的,updateRows方法会调用 开启动画方法进行数据更新,但是中间又有阻塞的操作,可能会导致后续定时器多次执行发生动画抽搐和变速。

waringTableRender(data) { const formatDate = 'YYYY-MM-DD HH:mm:ss'; // 定义日期格式 let dataArr = []; let _this = this; data.map(i => { let arr = []; let {ipAddress, warnTitle, createTime,warnRule,warnLevel,appName} = i; let colorClass = 'info-waring' switch (warnLevel) { case 'warn': colorClass='warn-waring'; break; case 'error': colorClass='error-waring' break; } let tip = 服务器${ipAddress}的 ${appName} 在${moment(createTime).format(formatDate)} 触发 ${warnTitle} 预警,告警表达式结果为${warnRule}; arr.push(<div class="${colorClass}">${tip}</div>) dataArr.push(arr) })

                if (this.waringTotal ===0 && dataArr.length>0){
                    _this.$refs['waring-audio'].removeAttribute('muted');
                    _this.$refs['waring-audio'].play();
                }else if (this.waringTotal >0 && dataArr.length===0){
                    _this.$refs['waring-audio'].pause();
                }
                this.waringTotal = dataArr.length;
                _this.$refs['waringTableDataScrollBoard'].updateRows(dataArr);
            },

控制台错误输出?

期望情况?

稳定运行

实际情况?

偶尔发生抖动变速

其他相关信息

  • DataV版本
  • 最新版
  • 浏览器版本
  • 谷歌最新
  • 其他

code00Way avatar May 30 '23 02:05 code00Way