通过 Forge 对 BIM 360 问题进行排序

Question

所以我正在研究这个锻造样本：https://github.com/Autodesk-Forge/bim360-csharp-issues

我正在努力解决 PropertyPanel 中描述的问题。我在问我应该怎么做，因为我不确定？

目前示例使用查看器加载您的 BIM36O 文档，在查看器上有一个扩展程序，单击该扩展程序会一一显示所有问题。这些问题目前按（Issue1、Issue2、Issue3）排序。

在问题显示在面板上之前，我已手动使用这行代码对问题进行排序：

 _this.issues = _.sortBy(_this.issues, function (i) { return i.attributes.title });

我还介绍了带有 onclick 事件的面板按钮，如何在单击按钮后对问题进行排序并在面板上重新显示现在排序的问题？

这是我的面板代码：

function BIM360IssuePanel(viewer, container, id, title, options) {

    this.viewer = viewer;
    Autodesk.Viewing.UI.PropertyPanel.call(this, container, id, title, options);
    var _this = this;
    this.scrollContainer.style.height = 'calc(100% - 100px)';
    const controlsContainer = document.createElement('div');
    controlsContainer.classList.add('docking-panel-container-solid-color-a');
    controlsContainer.style.height = '30px';
    controlsContainer.style.padding = '4px';

    const titleButton = document.createElement('button');
    const assignedToButton = document.createElement('button');
    const dueDateButton = document.createElement('button');
    const createdAtButton = document.createElement('button');
    const versionButton = document.createElement('button');

    titleButton.innerText = 'Title';
    versionButton.innerText = 'Version';
    assignedToButton.innerText = 'Assigned To';
    dueDateButton.innerText = 'Due Date';
    createdAtButton.innerText = 'Created At';

    titleButton.style.color = 'black';
    versionButton.style.color = 'black';
    assignedToButton.style.color = 'black';
    dueDateButton.style.color = 'black';
    createdAtButton.style.color = 'black';

    controlsContainer.appendChild(titleButton);
    controlsContainer.appendChild(versionButton);
    controlsContainer.appendChild(assignedToButton);
    controlsContainer.appendChild(dueDateButton);
    controlsContainer.appendChild(createdAtButton);
    this.container.appendChild(controlsContainer);    

    assignedToButton.onclick = function (e) {

    };
    titleButton.onclick = function (e) {

    };
    createdAtButton.onclick = function (e) {

    };

    dueDateButton.onclick = function (e) {

    };
    versionButton.onclick = function (e) {
    };

}

showIssues() 代码：

BIM360IssueExtension.prototype.showIssues = function () {
    var _this = this;

    //remove the list of last time
    var pushPinExtension = _this.viewer.getExtension(_this.pushPinExtensionName);
    pushPinExtension.removeAllItems();
    pushPinExtension.showAll();
    var selected = getSelectedNode();




    //sorting issues
    _this.issues = _.sortBy(_this.issues, function (i) { return i.attributes.title });
    //_this.issues = _.sortBy(_this.issues, function (i) { if (i.attributes.due_date === null) return ''; else return Date.parse(i.attributes.due_date) }); 
    //_this.issues = _.sortBy(_this.issues, function (i) { return i.attributes.assigned_to_name });
    //_this.issues = _.sortBy(_this.issues, function (i) { return i.attributes.starting_version });
   // _this.issues = _.sortBy(_this.issues, function (i) { return i.attributes.dateCreated });



    _this.issues.forEach(function (issue) {
        var dateCreated = moment(issue.attributes.created_at);

        // show issue on panel
        if (_this.panel) {

            _this.panel.addProperty('Title', issue.attributes.title, 'Issue ' + issue.attributes.identifier);
            _this.panel.addProperty('Assigned to', issue.attributes.assigned_to_name, 'Issue ' + issue.attributes.identifier);
            _this.panel.addProperty('Version', 'V' + issue.attributes.starting_version + (selected.version != issue.attributes.starting_version ? ' (Not current)' : ''), 'Issue ' + issue.attributes.identifier)
            _this.panel.addProperty('Due Date', issue.attributes.due_date, 'Issue ' + issue.attributes.identifier);
            _this.panel.addProperty('Created at', dateCreated.format('MMMM Do YYYY, h:mm a'), 'Issue ' + issue.attributes.identifier);

        }



        // add the pushpin
        var issueAttributes = issue.attributes;
        var pushpinAttributes = issue.attributes.pushpin_attributes;
        if (pushpinAttributes) {
            issue.type = issue.type.replace('quality_', ''); // temp fix during issues > quality_issues migration
            pushPinExtension.createItem({
                id: issue.id,
                label: issueAttributes.identifier,
                status: issue.type && issueAttributes.status.indexOf(issue.type) === -1 ? `${issue.type}-${issueAttributes.status}` : issueAttributes.status,
                position: pushpinAttributes.location,
                type: issue.type,
                objectId: pushpinAttributes.object_id,
                viewerState: pushpinAttributes.viewer_state
            });




        }

    })
    }

Answer 1

刚刚快速检查了源代码，有 2 个快速想法：

如果点击排序按钮时有一些问题更新，我建议添加当前排序顺序的状态（sortOrder），以及根据 showIssues 方法中的 sortOrder 以不同的方式对问题进行排序，同时单击不同的排序按钮，您可以调用 BIM360IssueExtension.prototype.loadIssues()方法刷新面板中的所有问题。
如果单击排序按钮时问题列表不会更新，我建议缓存当前问题列表，并添加一个新方法，如 sortIssueInPanel()排序按钮，主要步骤应该是清理问题面板，对缓存的问题列表进行排序，并将这些问题一个一个添加到问题面板中，示例代码片段应该如下所示，但要注意的是只是代码片段显示主要步骤，我没有测试或验证它，仅供您参考：

  var sortIssueInPanel = function(sortOrder){
    var issueExtension = NOP_VIEWER.getExtension('BIM360IssueExtension');
    issueExtension.panel.removeAllProperties()

    // Sort the cached issues by sortOrder
    switch(sortOrder){
      case SORT_ORDER.BY_TITLE:
        issuesCached = _.sortBy(issuesCached, function (i) { return i.attributes.title });
        break;

      case SORT_ORDER.BY_DUE_DATE:
      issuesCached = _.sortBy(issuesCached, function (i) { if (i.attributes.due_date === null) return ''; else return Date.parse(i.attributes.due_date) }); 
        break;

      case SORT_ORDER.BY_ASSIGNED_TO_NAME:
      issuesCached = _.sortBy(issuesCached, function (i) { return i.attributes.assigned_to_name });
        break;

      case SORT_ORDER.BY_DATECREATED:
      issuesCached = _.sortBy(issuesCached, function (i) { return i.attributes.dateCreated });
        break;
        
      default:
        break;
    }


    issuesCached.forEach(function (issue) {
      var dateCreated = moment(issue.attributes.created_at);

      // show issue on panel
      if (issueExtension.panel) {

        issueExtension.panel.addProperty('Title', issue.attributes.title, 'Issue ' + issue.attributes.identifier);
        issueExtension.panel.addProperty('Assigned to', issue.attributes.assigned_to_name, 'Issue ' + issue.attributes.identifier);
        issueExtension.panel.addProperty('Version', 'V' + issue.attributes.starting_version + (selected.version != issue.attributes.starting_version ? ' (Not current)' : ''), 'Issue ' + issue.attributes.identifier)
        issueExtension.panel.addProperty('Due Date', issue.attributes.due_date, 'Issue ' + issue.attributes.identifier);
        issueExtension.panel.addProperty('Created at', dateCreated.format('MMMM Do YYYY, h:mm a'), 'Issue ' + issue.attributes.identifier);
      }
    })
  };

希望对您有所帮助。

通过 Forge 对 BIM 360 问题进行排序

Sorting BIM 360Issues through Forge

autodesk

forge

autodesk-forge

autodesk-bim360