time-series - 在thingboard中单击自定义时间序列小部件的行时如何在对话框中获取并显示特定数据键的值

Question

我希望每当我单击自定义时间序列小部件的行时，它应该打开对话框并显示属性/时间序列键的值。

例如：我创建了一个自定义时间序列小部件，如图 [1] 所示：https : //i.stack.imgur.com/YPGtc.png [自定义时间序列小部件][1] 其中实体的 dataKey 的名称是“链接”，它的类型是“时间序列”，我的要求是，每当我点击时间序列小部件的行时，就会打开一个对话框，在对话框中它将显示 dataKey 的值，即链接的值（写在图片中的“https://”）

我已尝试使用下面提到的自定义操作代码，但这不起作用

var
    types = $injector.get('types'),
    attributeService = $injector.get('attributeService'),
    $q = $injector.get('$q'),
    $mdDialog = $injector.get('$mdDialog'),
    $filter = $injector.get('$filter'),
    $document = $injector.get('$document');
getInfoAttributes().then((attributes) =>{
    showInfoDialog(attributes);
}
,
() =>{showFailedDialog('Unable to get info attributes.');})
;

function
showInfoDialog(attributes) {
    $mdDialog.show({
        controller: ['attributes', '$mdDialog', InfoDialogController],
        controllerAs: 'vm',
        template: infoDialogTemplate,
        parent: angular.element($document[0].body),
        locals: {
            attributes: attributes
        }
        ,
        targetEvent: $event,
        clickOutsideToClose: false,
        fullscreen: true
    }).then(() => { openUrlDetails();});
}

var
    infoDialogTemplate = '<md-dialog aria-label="Info">' +
        '<form name="theForm">' +
        '<md-toolbar>' +
        '<div class="md-toolbar-tools">' +
        '<h2>{{vm.entityTitle}}</h2>' +
        '<span flex></span>' +
        '<md-button class="md-icon-button" ng-click="vm.close()">' +
        '<ng-md-icon icon="close" aria-label="Close"></ng-md-icon>' +
        '</md-button>' +
        '</div>' +
        '</md-toolbar>' +
        '<md-dialog-content>' +
        '<md-content class="md-padding">' +
        '<div layout="column" flex>' +
        '<div><h3>{{vm.link}}</h3></div>' +
        '<div layout="row">' +
        '<md-button class="md-raised md-primary" ng-click="vm.openDetails()">' +
        'Url details' +
        '</md-button>' +
        '<span flex></span>' +
        '</div>' +
        '</div>' +
        '</md-content>' +
        '</md-dialog-content>' +
        '<md-dialog-actions layout="row">' +
        '<span flex></span>' +
        '<md-button ng-click="vm.close()" style="margin-right:20px;">Close</md-button>' +
        '</md-dialog-actions>' +
        '</form>' +
        '</md-dialog>';

function
InfoDialogController(attributes, $mdDialog) {
    let vm = this;
    vm.entityTitle = entityName;
    vm.link = getAttributeValue(attributes, 'link');
    vm.close = () =>
    {
        $mdDialog.cancel();
    }
    vm.openDetails = () =>
    {
        $mdDialog.hide();
    }
}

function
getAttributeValue(attributes, key) {
    var foundAttributes = $filter('filter')(attributes, {key: key}, true);
    if (foundAttributes.length > 0) {
        return foundAttributes[0].value;
    } else {
        return null;
    }
}

function
openUrlDetails() {
    var params = {
        entityId: entityId,
        entityName: entityName
    }
    widgetContext.stateController.openState('default', params, false);
}

function
getInfoAttributes() {
    var deferred = $q.defer();
    attributeService.getEntityAttributesValues(entityId.entityType, entityId.id,
        types.attributesScope.server.value, 'link',
        {
            ignoreLoading: true
        }
    ).then((attributes) => {
        if(attributes && attributes.length
)
    {
        deferred.resolve(attributes);
    }
else
    {
        deferred.reject();
    }
}
,
    () =>
    {
        deferred.reject();
    }
)
    ;
    return deferred.promise;
}

function
showFailedDialog(content) {
    $mdDialog.show(
        $mdDialog.alert().parent(angular.element($document[0].body)).clickOutsideToClose(true).title(`Unable to display info for ${entityName}`).textContent(content).ariaLabel('Action Demo Dialog').ok('Close').targetEvent($event)
    )
    ;
}```


  

标签： time-seriesthingsboardtimeserieschart