💻 业务&数据结构
## 目录
- 功能：`重命名`，`切换`，`新增`，`删除`
- <span style="color:#ff0000">默认目录，不可删除</span>
- 数据结构设计：
```javascript
tableInfo: {
//表格表头
tableCols: [
{ field: "name", title: '目录', show: true, disable: true, type: 'slot' },
],
tableDataList: [
{
id: 1,
name: "默认面板目录",
is_default: 1,
is_del: false
},
{
id: 2,
name: "xxx目录",
is_default: -1,
is_del: false
}
],
handle: {
fixed: false,
show: true,
label: this.$t('action.operate'),
width: "240",
btList: [
{
label: '切换',
className: "btn-span",
event: "tab",
show: true,
slot: true, //设置按钮的插槽 true标识按钮使用插槽
},
{
label: '重命名',
className: "btn-span",
event: "rename",
show: true,
slot: true,
},
{
label: '删除',
event: "del",
show: true,
slot: true,
}
],
},
//分页
showPage: false
},
```
## 面板
>w ◆ 一个目录下，删除，新增且不超过10个。
◆ 一个面板由多个小部件(card)，以卡片的形式呈现。
◆ 数据结构：
```javascript
activeName: '1', // 当前面板id
catalogueId: '1', // 当前目录id
catalogueEdit: '', // 聚焦面板id，隐藏其他面板,放vuex
catalogueMap: { // 目录数据集合缓存
1: [{ // 面板
title: "主面板",
id: '1',
data:[] //小部件数据 },
{
title: "个人面板",
id: '2'
}]
}
```
## 小部件
- 数据结构：
```javascript
cardData: [ // 卡片数据
{
id: '1',
widget_type: "alarm_stats", // 组件类型
is_hide: true, // 隐藏与否
title: '告警统计',
x: 1, 比例
y: 2,
put_away: false, // 是否收起
sort: 1,
data: { // 主要数据
range_url: '/monitor/api/v1/alarm/realtime/alarm/trend/7',
alarm_stat: '/monitor/api/v1/call/alarm/realtime/stats'
}
},
{
id: '11',
widget_type: "fixed_group",
is_hide: false,
title: '分组1',
x: 1,
y: 6,
put_away: false // 是否收起
},
{
id: '2',
widget_type: "resource_monitor",
is_hide: false,
title: '资源监控',
x: 1,
y: 3,
put_away: false,
data: {
params: [
{
key: "device_type",
itmes: [
{
value: "",
text: "全部设备类型",
},
{
value: "compute",
text: "计算节点",
}]
},
{
key: "cpu_instruction_set",
itmes: [
{
value: "",
text: "全部CPU架构",
},
{
value: "X86",
text: "X86",
},
{
value: "ARM",
text: "ARM",
}]
},
],
url: "/monitor/api/v1/mon/overview/resource",
pie_charts: [
{
title: "总物理CPU",
total: 1000,
used: 10,
unit: "核"
},
{
title: "总超分物理CPU",
total: 1000,
used: 10,
unit: "核"
},
{
title: "总内存",
total: 1000,
used: 10,
unit: "B"
},
{
title: "总超分内存",
total: 1000,
used: 10,
unit: "B"
},
{
title: "总裸磁盘空间",
total: 1000,
used: 10,
unit: "B"
}
]
}
}]
```
## 编辑小部件
三部分组成
>w ◆ 左：小部件列表（编辑小部件时，隐藏）
◆ 中：小部件视图
◆ 右：小部件配置（编辑小部件时，回显数据）
<span style="color:#ff0000">根据不同的小部件类型，展示不同的小部件视图，渲染不同的配置</span>
#### 其左：
```javascript
input: '', // 搜索小部件
type: '', // 选中的小部件类型
localList: [{
name: '自定义小部件',
id: '1',
children: [
{
id: '11',
type: 'diy_chart',
name: "自定义图表"
},
{
id: '12',
type: 'top_sort',
name: "自定义TOP排序"
}
]
},
{
name: '分组框',
id: '2',
children: [
{
id: '21',
type: 'default_group',
name: "默认组"
},
{
id: '22',
type: 'key_group',
name: "重点组"
}
]
}],
```
#### 其中：
暂无，未确定视图数据来源；
#### 其右：
`小部件配置`：
```javascript
form: { // 数据集合，包含动态表单的数据选中值，用作表单提交
name: '',
...
},
monitorObj: { // 监控对象 （通用配置，若无，数据内容，数据范围均不展示）
val: '',
data: []
},
monitorIndex: { // 监控指标（依赖监控对象）
val: '',
data: []
},
monitorForm: [ // 数据内容（依赖监控对象，监控指标）
{
id: '1',
type: 'select',
data: [{
label: '最大值',
value: '12'
},
{
label: '最小值',
value: '13'
}],
val: '13',
name: '统计方式'
},
{
id: '2',
type: 'input',
val: '',
name: '统计方式2'
}
]，
monitorRange: [], // 数据范围（依赖监控对象，监控指标）
```