大屏看板前端实现的思路分析
需求点:
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
