此文具体代码在文末语雀链接,需额外付费
b站效果演示地址 https://www.bilibili.com/video/BV1dK4y1P7hX

前言

PE版本有CSV/XLS数据导出功能，具体视频演示查看官方文档地址。

PE版本对此功能的描述如下：
ThingsBoard允许您将数据从小部件导出到CSV或XLS。几乎任何小部件都支持此功能。
导出数据集中的列列表与您在数据集配置中配置的参数列表相对应。

CE版本实现演示

ThingsBoard CE添加Excel数据导出功能演示

注意：
调试前端代码在ui-ngx目录下打开命令行执行yarn start 进行调试，更改后自动重新编译前端，不需要重复启动项目。
thingsboard版本 3.2.0

组件设置页面修改

添加「启用数据导出选项」

可通过此选项启用或关闭数据导出功能

源码实现

主要修改下列文件（添加注释部分代码。官方源码部分有省略，减少篇幅）
ui-ngx/src/app/modules/home/components/widget/
widget-config.component.html
377行

<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="8px" fxFlex.sm="40%" fxFlex.gt-sm="30%"><mat-checkbox formControlName="enableFullscreen">{{ 'widget-config.enable-fullscreen' | translate }}</mat-checkbox><!--添加数据导出按钮↓↓↓--><mat-checkbox formControlName="enableDataExport">{{ 'widget-config.enable-data-export' | translate }}</mat-checkbox>
</div>

widget-config.component.ts
208行

this.widgetSettings = this.fb.group({dropShadow: [null, []],enableFullscreen: [null, []],//添加是否允许数据导出变量enableDataExport: [null, []],backgroundColor: [null, []],...
});

379行

this.widgetSettings.patchValue({dropShadow: isDefined(config.dropShadow) ? config.dropShadow : true,enableFullscreen: isDefined(config.enableFullscreen) ? config.enableFullscreen : true,//是否允许数据导出 设置默认值enableDataExport: isDefined(config.enableDataExport) ? config.enableDataExport : true,backgroundColor: config.backgroundColor,...
},

ui-ngx/src/app/shared/models/widget.models.ts
369行

export interface WidgetConfig {dropShadow?: boolean;enableFullscreen?: boolean;//添加是否允许数据导出变量enableDataExport?: boolean;useDashboardTimewindow?: boolean;...
}

组件右上角导出数据按钮实现

源码实现

ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html
123行添加俩个注释中间部分

注意：<mat-icon>{{'archive'}}</mat-icon> 中的archive代表图标样式，其他mat-icon标签同理可替换图标
可以在https://www.materialpalette.com/icons中找到喜欢的进行替换。

<button mat-button mat-icon-button *ngFor="let action of widget.widgetActions"[fxShow]="!isEdit && action.show"(click)="action.onAction($event)"matTooltip="{{ action.name | translate }}"matTooltipPosition="above"><mat-icon>{{ action.icon }}</mat-icon>
</button>
<!--数据导出按钮实现 开始↓-->
<button mat-button mat-icon-button[matMenuTriggerFor]="menu"#menuTrigger="matMenuTrigger"[fxShow]="!isEdit && widget.enableDataExport"matTooltip="{{ 'widget.data-export' | translate }}"matTooltipPosition="above"><mat-icon>{{'archive'}}</mat-icon>
</button>
<mat-menu #menu="matMenu"><button mat-menu-item (click)="exportData($event, widgetComponent.widgetContext,'csv');"><mat-icon>insert_drive_file</mat-icon><span>{{ 'widget.data-export-csv' | translate }}</span></button><button mat-menu-item (click)="exportData($event, widgetComponent.widgetContext,'xls');"><mat-icon>insert_drive_file</mat-icon><span>{{ 'widget.data-export-xls' | translate }}</span></button><button mat-menu-item (click)="exportData($event, widgetComponent.widgetContext,'xlsx');"><mat-icon>insert_drive_file</mat-icon><span>{{ 'widget.data-export-xlsx' | translate }}</span></button>
</mat-menu>
<!--数据导出按钮实现 结束↑-->
<button mat-button mat-icon-button[fxShow]="!isEdit && widget.enableFullscreen"(click)="$event.stopPropagation(); widget.isFullscreen = !widget.isFullscreen"matTooltip="{{(widget.isFullscreen ? 'fullscreen.exit' : 'fullscreen.expand') | translate}}"matTooltipPosition="above"><mat-icon>{{ widget.isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
</button>

ui-ngx/src/app/modules/home/models/dashboard-component.models.ts
添加注释部分代码

export class DashboardWidget implements GridsterItem, IDashboardWidget {dropShadow: boolean;enableFullscreen: boolean;//308行后 添加变量enableDataExport: boolean;hasTimewindow: boolean;
}//379行后 添加默认值
this.enableDataExport = isDefined(this.widget.config.enableDataExport) ? this.widget.config.enableDataExport : true;

ui-ngx/src/app/shared/models/ace/widget-completion.models.ts
217行

enableDataExport: {description: 'Whether to enable data export button on widget.',meta: 'property',type: 'boolean'
},

ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts
添加方法

import { MatMenuTrigger } from '@angular/material/menu';
//手动触发菜单切换
@ViewChild('menuTrigger') trigger: MatMenuTrigger;exportData($event: Event, ctx: WidgetContext, fileType) {if ($event) {$event.stopPropagation();}const export_data = this.data_format(ctx.datasources, ctx.data);this.export(export_data, fileType, ctx.widgetConfig.title);//下载结束关闭菜单this.trigger.toggleMenu();
}

console.log(fileType);可以看出点击的哪个文件类型的导出按钮
console.log(ctx.datasources);可以看出数据键

console.log(ctx.data);可以看到具体数据，格式是二维数据[[时间戳，值]，[时间戳，值]，[时间戳，值]]，还有每条数据对应的数据键

this.data_format(ctx.datasources, ctx.data);是对数据做格式转换
转化后执行console.log(export_data);结果如下

最后执行this.export(export_data, fileType, ctx.widgetConfig.title);导出数据到浏览器下载。
文件名格式小部件标题-时间戳.文件后缀

translate相关

ui-ngx/src/assets/locale/locale.constant-zh_CN.json
添加widget中的内容

"widget": {"data-export": "导出数据","data-export-csv": "数据导出为CSV格式","data-export-xls": "数据导出为XLS格式","data-export-xlsx": "数据导出为XLSX格式",
}

添加widget-config中的内容

"widget-config": {"enable-data-export": "启用数据导出",
}

时间段选择

如果勾选了「使用仪表板的时间窗口」

则导出数据的时间段就是仪表板上的时间段内的数据

可以根据自己需求得时间段进行修改

如果没有勾选「使用仪表板的时间窗口」
那么组件上会有时间选择器

可以根据自己需求得时间段进行修改

测试

新建俩种实体
实体Timer A Timer B 有数据点 bili ali
实体Bus A Bus B 有数据点 long lat
规则链生成测试数据,红框内的节点复制后共8份。
每一个节点:1条数据/s,四个节点8份 = 32条数据/s。
测试导出10分钟数据：10分钟60秒*32条 = 1.92w条

注意：测试节点生成数据无数量限制message-count = 0,但是根规则链的保存时序节点TTL设置600s（10分钟）有效期，防止测试数据无限多。

1.92w条近10分钟的数据瞬间导出，数据结构开头视频中有演示，包含不同实体的不同字段。

到这里，毫无保留的数据及功能已经全部拿到，基本可以自己实现了，就差数据格式转换和导出浏览器下载，有动手能力的自己实现一下也是不错的。
不想掉头发的可以继续看下面的内容：

下面俩个方法的具体实现
const export_data = this.data_format(ctx.datasources, ctx.data);
this.export(export_data, fileType, ctx.widgetConfig.title);
导出excel的单元格样式及首行冻结等实现思路（是思路，思路，思路）

具体实现到我的语雀知识库查看

ThingsBoard CE添加数据导出excel功能相关推荐

vue表单中批量导入功能_vue实战(11)——vue+element UI实现表格数据导出Excel功能
一.应用场景按照需求导出功能分为勾选批量导出及按照查询结果导出,考虑到接口操作导出的复杂性,因此实现了js控制导出的功能导出功能截图二.安装相关依赖 cnpm install --save xl ...
ThingsBoard CE添加Excel导出功能-优化篇
文章目录前言 rpc,static,alarm去掉图例中的启用数据导出选项效果前言如何添加Excel导出功能请跳转上一篇ThingsBoard CE数据导出excel,这篇做优化. 按照Thi ...
django excel 导出页面_Django Admin中增加导出Excel功能过程解析
在使用Django Admin时, 对于列表我们有时需要提供数据导出功能, 如下图: 增加导出Excel功能在Django Admin中每个模型的Admin类(继承至admin.ModelAdmin ...
vue+iView实现导入与导出excel功能
vue+iView实现导入与导出excel功能一,需求: 1,导入导出的必要性导入与导出在日常项目开发中经常用到, 批量导入功能可以快速插入添加数据. 导出功能则可方便直观明了拿到所需展示的重要数 ...
假导出Excel功能实现，按CSV格式快速导出功能代码参考（追求代码追求简洁复用）...
我们辛苦录入的数据都希望能有重复利用的价值,一方面这些基础数据需要有数据库级的重复利用,程序级别的重复利用,另一方面还需要直接可以方便的导出倒入的功能比较好,虽然我们自己制作的统计分析功能很强大,但是 ...
将页面中表格数据导出excel格式的文件（vue）
近期由于项目需要,需要将页面中的表格数据导出excel格式的文件,折腾了许久,在网上各种百度,虽然资料不少,但是大都不全,踩了许多坑,总算是皇天不负有心人,最后圆满解决了. 1.安装相关依赖(npm安 ...
Java程序员从笨鸟到菜鸟之（一百零四）java操作office和pdf文件（二）利用POI实现数据导出excel报表...
在上一篇博客中,我们简单介绍了java读取word,excel和pdf文档内容 ,但在实际开发中,我们用到最多的是把数据库中数据导出excel报表形式.不仅仅简单的读取office中的数据.尤其是在生 ...
php数据的导出到excel,php 数据的导出到excel表格-怎么将php数据导出excel
怎么使用php把表格中的数据导入到excel中下面写的一个PHP导出数据到CSV问价的函数,你到时候直接调用了 /** * 导出CSV * @param string $fileName文件名字 * ...
Java集成Hutool实现导出Excel功能
原文来自:https://www.j1angrui.cn/article/2019081623 在工作中刚完成项目集成Hutool实现导出Excel功能,现在记录一下实现过程,方便以后作为例子参考. ...

ThingsBoard CE添加数据导出excel功能

目录

前言

CE版本实现演示

组件设置页面修改

添加「启用数据导出选项」

源码实现

组件右上角导出数据按钮实现

源码实现

translate相关

时间段选择

测试

ThingsBoard CE添加数据导出excel功能相关推荐

最新文章

热门文章