此二次开发主要是基于 ThingsBoard UI 界面上的 js 脚本开发,熟悉 js 开发的朋友应该很容易理解。
从 Dashboard 导出 csv 其实有好几种情况,1是 telemetry 数据导出,2是 attributes 数据导出。

准备工作

  • Chrome 浏览器
  • javascript 基础知识
  • ThingsBoard UI 二次开发基础知识
  • Dashbaord 开发经验

新建Dashboard

Telemetry 数据导出

1.png

导出csv文件内容:

timestamp,GasCon
2022-3-21 21:29:0,800
2022-3-21 21:44:0,800
2022-3-25 19:59:0,0

自定义 action,js脚本:

let $injector = widgetContext.$scope.$injector;
let attributeService = $injector.get(widgetContext
    .servicesMap.get('attributeService'));
let deviceService = $injector.get(widgetContext.servicesMap
    .get('deviceService'));

console.log(widgetContext);
let data = widgetContext.data;

let dataKeys = [];
// get all data keys to array
widgetContext.datasources[0].dataKeys.forEach(function(
    item) {
    dataKeys.push(item.name);
});

let fileTitle = "export-from-list-" + entityName;

function timeConverter(UNIX_timestamp) {
    var a = new Date(UNIX_timestamp);
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ];
    var year = a.getFullYear();
    var month = a.getMonth()+1;
    var date = a.getDate();
    var hour = a.getHours();
    var min = a.getMinutes();
    var sec = a.getSeconds();
    var time = year + '-' + month + '-' + date + ' ' +
        hour + ':' + min + ':' + sec;
    return time;
}

function exportCSV() {
    // first line: header
    var allLine = "";
    dataKeys.unshift("timestamp");
    allLine += dataKeys;
    allLine += "\n";

    var key_length = data.length; // 字段数目
    var limit = data[0]["data"].length; // 数据行数
    var line = new Array(limit + 1); // 包括首行
    for (var l = 0; l < limit; l++)
        line[l] = "";
    data.forEach(
        (item, idx) => {
            var item_data = item["data"];
            var dataKey = item["dataKey"];
            for (var j = 0; j < limit; j++) {
                if (idx == 0) {

                    line[j] += timeConverter(item_data[
                        j][0]);
                    line[j] += ",";
                }
                line[j] += item_data[j][1];
                if (idx < key_length - 1)
                    line[j] += ",";
            }
            line[j] += "\n";
        }
    );
    for (var k = 0; k < limit; k++) {
        allLine += line[k];
        allLine += "\n";
    }

    var exportedFilenmae = fileTitle + '.csv' ||
        'export.csv';

    var blob = new Blob([allLine], {
        type: 'text/csv;charset=utf-8;'
    });
    if (navigator.msSaveBlob) { // IE 10+
        navigator.msSaveBlob(blob,
            exportedFilenmae);
    } else {
        var link = document.createElement("a");
        if (link.download !==
            undefined) { // feature detection
            // Browsers that support HTML5 download attribute
            var url = URL.createObjectURL(blob);
            link.setAttribute("href", url);
            link.setAttribute("download",
                exportedFilenmae);
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }
}

exportCSV();

Attributes 数据导出

2.png

导出csv文件内容:

timestamp,name,detector_tag,area,floor,location,department,equipment_name,gas,setup_date,sensor_date,cal_date,cal_result,ip,hub_port,sub_hub_port,maintenance
2022-3-28 21:25:9,CL96-06,,,,,,,,,,,,,,,
2022-3-28 21:25:9,F-CL96-SRD013-HF,,,,,,,,,,,,,,,
2022-3-28 21:25:9,F-CL96-SRD033-C-NH3,,,,,,,,,,,,,,,
2022-3-28 21:25:9,F-CL96-SRD033-D-NH3,,,,,,,,,,,,,,,
2022-3-28 21:25:9,F-CL96-SRD037-CLF3,,,,,,,,,,,,,,,

自定义 action,js 脚本:

let $injector = widgetContext.$scope.$injector;
let attributeService = $injector.get(widgetContext
    .servicesMap.get('attributeService'));
let deviceService = $injector.get(widgetContext.servicesMap
    .get('deviceService'));

let data = widgetContext.data;
console.log(data);

let dataKeys = [];
// get all data keys to array
widgetContext.datasources[0].dataKeys.forEach(function(
    item) {
    dataKeys.push(item.name);
});

let fileTitle = "export-device-list";

function timeConverter(UNIX_timestamp) {
    var a = new Date(UNIX_timestamp);
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ];
    var year = a.getFullYear();
    var month = a.getMonth()+1;
    var date = a.getDate();
    var hour = a.getHours();
    var min = a.getMinutes();
    var sec = a.getSeconds();
    var time = year + '-' + month + '-' + date + ' ' +
        hour + ':' + min + ':' + sec;
    return time;
}

function exportCSV() {
    // first line: header
    var allLine = "";
    var key_length = dataKeys
        .length; // csv字段数目, 不含timestamp
    dataKeys.unshift("timestamp");
    allLine += dataKeys;
    // allLine += "\n";

    var limit = data.length / key_length; // csv数据行数
    var line = new Array(limit + 1); // csv总行数,包括首行
    for (var l = 0; l < limit; l++)
        line[l] = "";

    //var j = 0;
    data.forEach(
        (item, idx) => {
            var item_data = item["data"];

            if (idx % key_length == 0) {
                allLine += "\n"; // 换行
                allLine += timeConverter(item_data[0][0]); // timestamp
                allLine += ",";
            }

            allLine += item_data[0][1]; // value/值

            if ((idx+1) % key_length != 0)
                allLine += ",";
        }
    );
    
    allLine += "\n";
    // for (var k = 0; k < key_length; k++) {
    //     allLine += line[k];
    //     allLine += "\n";
    // }

    var exportedFilenmae = fileTitle + '.csv' ||
        'export.csv';

    var blob = new Blob([allLine], {
        type: 'text/csv;charset=utf-8;'
    });
    if (navigator.msSaveBlob) { // IE 10+
        navigator.msSaveBlob(blob,
            exportedFilenmae);
    } else {
        var link = document.createElement("a");
        if (link.download !==
            undefined) { // feature detection
            // Browsers that support HTML5 download attribute
            var url = URL.createObjectURL(blob);
            link.setAttribute("href", url);
            link.setAttribute("download",
                exportedFilenmae);
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }
}

exportCSV();

标签: UI, 二次开发, Thingsboard

添加新评论