大屏看板前端实现的思路分析

大屏看板前端实现的思路分析

需求点:

1.提供不同的图表组件列表供用户选择，用户可以自定义添加图表组件配置看板内容；
2.看板页面分为查看模式和编辑模式
查看模式：展示看板内容，部分图表组件需要支持筛选参数；
编辑模式：往看板容器中添加图表组件、支持自定义图表样式、删除组件、组件拖拽移动以及缩放，点击保存按钮将当前的看板页面内容(包括组件类型、组件所处的位置、展示的数据、图表样式等)保存至后台接口，切换至查看模式时能通过接口数据获取该看板并渲染。

难点：

如何保存看板内容？

功能点实现：

看板容器中组件缩放拖拽功能：angular-gridster2
在容器中显示不同的图表组件： ng-dynamic-component

<div nz-row class="grid-box">
  <gridster nz-col nzSpan="24" [options]="options" class="layout">
    <gridster-item [item]="item" *ngFor="let item of dashboard">
      <button nz-button nzType="default" [nzSize]="'small'" *ngIf="ifEditDashboard" class="delete-chart"
        (click)="removeItem($event, item)">
        <i nz-icon nzType="delete"></i>
      </button>
      <ndc-dynamic class="no-drag" [ndcDynamicComponent]="item?.component" [ndcDynamicInputs]="item?.input"
        [ndcDynamicOutputs]="outputEvent">
      </ndc-dynamic>
    </gridster-item>
  </gridster>
</div>

保存布局：

通过GridsterConfig.api.getItemComponent获取看板容器中各个组件的参数，包括组件名称、需要保存至后台的参数等，将这些参数以JSON的格式传给接口保存

图片.png