本文由 VisActor 用户访谈整理而来，文档内容已经脱敏。

业务场景介绍

车辆智能管理监控系统，提供给车辆管理人员和司机使用。主要功能包括如下内容：

• 车辆监控
• 指挥调度
• 统计分析
• 其他功能

VisActor 实践

目前系统中使用的可视化组件是VisActor 的表格可视化组件 VTable，用来展示某一辆车的轨迹数据，并且使用表格和地图进行联动。

下面对几个核心功能进行讲解。

展示轨迹明细数据

由于轨迹数据上报频繁，需要表格支持至少万级别的无分页呈现，通常需要呈现几十万、百万的轨迹数据。 这里对关键数据进行梳理，然后使用VTable的 ListTable 进行数据展示，可以解决dom表格的的性能问题。无卡顿，效果丝滑。

这里使用VTable的方式做简单介绍，首先通过 columns 做行头的定义。

             const  columns=[
                {
                    title: '车牌号',
                    field: 'plateNum',
                    disableSelect:true,
                    disableHeaderSelect:true,
                    headerStyle:{
                        bgColor:"#F5F7FA",
                        fontSize:15,
                        fontWeight:"normal"
                    },
                    style:{
                        color:"#606266",
                    },
                    width: 120,
                },
                (略...)
               ]

             const option = {
                records:this.tableData,
                columns:columns,
                widthMode:'standard',
                select:{
                    disableSelect:true,
                    disableHeaderSelect:true
                },
                hover:{
                    disableHeaderHover:true
                },
                tooltip:{
                    isShowOverflowTextTooltip: true,
                }
            };
            tableInstance = new VTable.ListTable(document.getElementById("tableContainer"), option);

对“车辆位置”一列进行了自定义渲染，需要实现自定义按钮的一个样式。

这里借助列的自定义渲染能力，结合VTable提供的 rect 和 text 图元进行样式的设置，核心代码如下：

{
                    title: '车辆位置',
                    field: 'address',
                    customRender(args){
                            elements.push({
                                type: 'rect',
                                fill: '#143D7D',
                                x: left+40,
                                y: 3,
                                radius:6,
                                width: 55,
                                height:30,
                                pickable:true,
                                cursor:"pointer"
                            });
                            elements.push({
                                type: 'text',
                                font: '14px Helvetica Neue',
                                fill: '#ffffff',
                                x: left+53,
                                y: 22,
                                text: "位置",
                                width: 30,
                                height:30,
                                cursor:"pointer"
                            });
                       
                        }

                        return {
                            elements,
                            expectedHeight:top+20,
                            expectedWidth: maxWidth+20,
                        }
                    },
                
                }；

轨迹定位

该功能要求点击表格行数据进行轨迹线路定位，在地图上展示轨迹和定位信息。

这里没有找到VTable的行点击事件，所以监听了单元格事件，通过相关信息进行定位。

核心代码如下：

 tableInstance.on('click_cell', args => {
                const { col, row,originData,target } = args;
                if(col==4&&target.type=='rect'){
                       that.geo2Address(originData,row)
                }else{
                      this.$refs.bmap.dimensionMarker({lon:originData.longitude,lat:originData.latitude,time:originData.createtime})
                }
            })

轨迹播放

根据车辆行驶轨迹数据在地图上动态演示车辆的轨迹变化，改变表格中对应的行背景色并向上自动滚动。

这里实现方案比较简单，将走过的位置数据保存到数组，调用vtable的updateTheme方法，数组匹配行数据返回背景色，根据表格行高和行驶过的行数计算向上滚动的距离，设置vtable的scrollTop属性。

核心代码

    isChangeBg(pitem,scrolldis){
             requestAnimationFrame(()=>{
                let to=null
                this.scrolldis=scrolldis
                this.colorArr.push({longitude:pitem.lng,latitude:pitem.lat})
                to=this.updateTheme()
                this.tableInstance&&(this.tableInstance.scrollTop=scrolldis)
                to&&this.tableInstance.updateTheme(to)
             })
          },
        updateTheme(){
             let that=this
                const themeobj=VTable.themes.DEFAULT.extends({
                bodyStyle: {
                    bgColor(args) {
                        const { row, col } = args;
                        const record = args.table.getRecordByCell(col, row);
                        const fobj=that.colorArr.find(ele=>ele.longitude==record.longitude&&ele.latitude==record.latitude)
                        if(fobj){
                            return "#13ce66"
                        }
                    }
                }
                })
                return themeobj
        },

存在的问题

更新主题问题

问题描述

可以通过接口更新指定行的样式。

解决方案

后续VTable可能增加针对单元格或者整行整列的样式更新接口，或者是提供刷新单元格或者整行整列的接口。

行操作问题

问题描述

希望可以增加对行的操作，整行的点击事件，选中事件等，行属性配置，单独改变行数据，可以改变列的隐藏显示。

解决方案

VTable已经规划了行选的功能，事件方面也完善。

单独改变行数据已经有了接口updateRecords。

改变列的隐藏显示后续也会增加对应的接口来提供这个能力；

本文作者获得由VisActor 提供的字节新年礼包一份

欢迎交流

欢迎大家与我们进行交流：

1）VisActor 微信订阅号留言（可以通过订阅号菜单加入微信群）：

2）飞书群：

3）VisActor 官网：www.visactor.io/

今夜无月，期待你点亮星空，感谢Star：

github：https://github.com/VisActor/VTable

更多参考：