江津数据大屏
专用于江津市场部对外展示的报表类数据大屏项目。原技术为帆软报表,但由于资源消耗过大,因此需要使用其他手段。
总体框架基于Vue,通过结合Echarts、高德地图来复刻帆软软件的效果。
利用Echarts来完成本项目的各种数据图部分,包括柱状图、折线图、雷达图、地图以及两种图的混合展示。
本次表格的关键在于来回滚动,鼠标移入停止滚动,鼠标移出时在暂停位置继续滚动,因此没有使用el-table。通过原生手段自己封装了一个表格组件,并通过监控组件的高度,利用延迟器配合回调来完成表格组件的来回滚动,以及暂停。
引入高德地图,应需求完成路线规划、轨迹动画回放的功能。
国际物流大数据(交运集团内部)
本项目为交运集团内部、用于监控重庆市内各个长线班列中的物流交易数据,展示每个班列的具体订单、运单表格和昨日总体汇总的看板类项目。
前端总体架构基于Vue,配合ElementUI库进行页面设计,通过lib-fexible以及css原生的来配合各个总部以及各个子级公司不同比例的展示设备。
通过Promise手段解决Vue渲染的生命周期与网络请求的异步问题,配合后端实现表格的导出功能。
研究ElementUI中分页器的使用,css中原生的改造ElementUI组件样式。
研究ElementUI中的无限滚动组件,在Vue中通过原生手段将el-table组件改造为可以无限滚动的表格。