DataV
DataV copied to clipboard
dv-scroll-board updateRows()导致轮播抖动和变速
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版本
- 最新版
- 浏览器版本
- 谷歌最新
- 其他