dashboard 组件结构
## 目录结构设计
```language
-- index.vue // 主体
-- dashborad-card.vue 面板组件
-- add-widget.vue 编辑 or 新增小部件
-- components
---- edit-dir-modal.vue // 目录弹窗
---- title-content.vue // 卡片标题
---- tab-btn.vue // 可操作按钮集合
...
-- card-components
---- alarm-stats.vue // 告警统计
---- chart-bar.vue // 自定义TOP排序
---- chart-line.vue // 时序图
---- chart-pie.vue // 饼图
---- chart-progress.vue // 进度条
---- chart-table.vue // 表格
---- chart-value.vue // 数值
---- group-view.vue // 分组
---- net-monitor.vue // 网络流量
---- resource-monitor.vue // 资源监控
---- server-health-status.vue // 服务健康状态
---- time-sync.vue // 连续运行时间一致性
...
```
## 初始化数据
```language
{
rate: 6, // 调整布局
activeName: '0',// 当前面板id
catalogueId: null, // 当前目录id
catalogueName: "",//当前目录名称
catalogueTabs: {}, // 面板集合
cardData: [], // 面板组件列表
modalType: '', // 弹窗类型
dashboradName: '', // 面板名称
isEditName: false, // 编辑面板名称
newName: '',// 绑定的面板名称
time: this.getDefaultTime(),
del_id: '', // 需要删除的小部件id
allWidgets: [ //所有小部件类型
'slip_group',
'alarm_stats',
'resource_monitor',
'net_in_monitor',
'net_out_monitor',
'server_health_status',
'time_sync',
'chart_value',
'chart_line',
'chart_progress',
'chart_pie',
'chart_table',
'chart_bar'
],
draggableClass: 'vue-draggable-handle', // 拖拽绑定
timeMap: { // 日期
300: 'minute_5',
600: 'minute_10',
900: 'minute_15',
3600: 'hour_1',
14400: 'hour_4',
86400: 'day_1',
172800: 'day_2',
604800: 'day_7',
2592000: 'day_30'
},
rowHeight: 40 // 高度
}
```