某车辆智能监控系统 VisActor/VTable 实践总结

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

业务场景介绍

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

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

VisActor 实践

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

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

展示轨迹明细数据

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

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

js 复制代码
             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提供的 recttext 图元进行样式的设置,核心代码如下:

js 复制代码
{
                    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的行点击事件,所以监听了单元格事件,通过相关信息进行定位。

核心代码如下:

js 复制代码
 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属性。

核心代码

js 复制代码
    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:

githubgithub.com/VisActor/VT...

更多参考:

  1. VTable------不只是高性能的多维数据分析表格,开源,免费,百万数据秒级渲染
  2. VisActor------面向叙事的智能可视化解决方案 - 掘金
  3. 火山引擎DataWind产品可视化能力揭秘 - 掘金
  4. 更多 VTable 示例

本文为稀土掘金技术社区首发签约文章,30天内禁止转载,30天后未获授权禁止转载,侵权必究!

相关推荐
985小水博一枚呀7 分钟前
【深度学习滑坡制图|论文解读3】基于融合CNN-Transformer网络和深度迁移学习的遥感影像滑坡制图方法
人工智能·深度学习·神经网络·cnn·transformer
AltmanChan8 分钟前
大语言模型安全威胁
人工智能·安全·语言模型
985小水博一枚呀12 分钟前
【深度学习滑坡制图|论文解读2】基于融合CNN-Transformer网络和深度迁移学习的遥感影像滑坡制图方法
人工智能·深度学习·神经网络·cnn·transformer·迁移学习
JerryXZR14 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
数据与后端架构提升之路21 分钟前
从神经元到神经网络:深度学习的进化之旅
人工智能·神经网络·学习
爱技术的小伙子27 分钟前
【ChatGPT】如何通过逐步提示提高ChatGPT的细节描写
人工智能·chatgpt
problc29 分钟前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_91533 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
深度学习实战训练营2 小时前
基于CNN-RNN的影像报告生成
人工智能·深度学习