📟 组件设计
## 目录结构设计
```language
-- index.vue // 主体
-- dashborad-card.vue 面板组件
-- add-widget.vue 编辑 or 新增小部件
-- components
---- modal-box.vue // 弹窗集合
---- monitor-form.vue // 动态表单集合
---- title-content.vue // 卡片标题
---- tab-btn.vue // 可操作按钮集合
...
-- card-components
---- alarm-stats.vue // 告警统计
---- resource-monitor.vue // 资源监控
---- group-view.vue // 分组
...
```
## 组件细节
#### index.vue
>w ◆ keepAlive 组件缓存
◆ 主体数据控制中心
#### dashborad-card.vue
`参数配置:`
```javascript
// 组件调用
<dashborad-card
v-if="activeName===item.id&&cardData.length"
:rate="rate" // 布局设置占比
:catalogueEdit="catalogueEdit" // 编辑状态
:gutter="gutter" // 间隙
:cardData="cardData" // 小部件数据集合
:tabId="item.id" // 面板id
:height="height" // 1*1单卡片高度
@changeShow="changeShow" // 分组 收起、展开
@updateLayout="updateLayout" // 拖拽小部件更新视图
@updateGroup="updateGroup" // 拖拽分组更新视图
@editCard="editCard" // 编辑小部件
/>
// 组件内容
sortable: null, // 排序实例
is_put_away: false, // 是否展开，逻辑变量
isChooseGroup: false, // 拖拽选择组，逻辑变量
isRefresh: false // echart 防止变形
```
#### add-widget.vue
`system/overview/addWidget?id=2&cardId=1`
<span style="color:#ff0000">id:面板id,cardId：小部件id</span>
>w ◆ 浏览器刷新 根据 编辑状态 返回主面板与否
◆ 编辑小部件主体数据控制中心
#### modal-box.vue
`参数配置`
```javascript
// 组件调用
<modal-box
:type="modalType" // 弹窗类型
@clearType="clearType" // 关闭弹窗
/>
// 组件内容：
dialogVisible: false, // 弹窗打开状态
dialogMap: { // 弹窗集合
ADD_DB: {
title: "新增面板",
width: "20%",
btns: [
{ type: 'default', name: '取消', handleClick: this.clearType },
{ type: 'primary', name: '确定', handleClick: this.submit }]
},
EDIT_DIR: {
title: "切换目录",
width: "30%",
btns: []
}
},
```
#### monitor-form.vue
`参数配置`
```javascript
// 组件调用
<monitor-form
v-for="item in monitorForm" // 动态表单数据
v-bind="item"
:key="item.id"
@changeValue="changeValue" // 更新数据
/>
// 组件内容：
watch: {
value(val) {
this.$emit('changeValue', { val, id: this.id })
}
},
created() {
this.value = _.cloneDeep(this.val)
},
```
#### title-content.vue
`参数配置`
```javascript
// 组件调用
<title-content
v-bind="$attrs" // 参数传递
v-on="$listeners" // 事件传递
:catalogueEdit='catalogueEdit' // 编辑状态
/>
// 组件内容：
editCard(name) { // 编辑卡片
this.$emit('editCard', { name, id: this.id })
}
```
#### tab-btn.vue
`参数配置`
```javascript
// 组件调用
<tab-btn
:catalogueEdit="catalogueEdit" // 编辑状态
@onIcon="onIcon" // icons 按钮 多个
/>
// 组件内容：
btnList: [
{ icon: 'icon-aw-add-to2', text: '', name: 'add', show: true },
{ icon: 'icon-aw-tb', text: '', name: 'tab', show: true },
{ icon: 'icon-aw-tsbaob', text: '', name: 'screen', show: true },
{ icon: 'icon-aw-setting', text: '', name: 'edit', show: true },
{ icon: 'icon-aw-add-to2', text: '添加小部件', name: 'addWidget', show: false },
{ icon: 'icon-aw-storage', text: '保存', name: 'save', show: false },
{ icon: 'icon-aw-delete', text: '删除', name: 'delete', show: false }
],
time: [], // 面板数据范围时间
pickerOptions: { // 时间枚举配置
shortcuts: this.getShortcuts()
}
onIcon(name) {
this.$emit('onIcon', name)
},
getShortcuts() {
let arr = ['minute_5', 'minute_10', 'minute_15', 'hour_1', 'hour_4', 'day_1', 'day_2', 'day_7', 'day_30']
let newArr = []
arr.forEach(item => {
const value = item.split("_")
newArr.push({
text: this.$t('global.timeType', { num: value[1], type: this.$t(`units.${value[0]}`) }),
onClick(picker) {
const end = moment().format('YYYY-MM-DD HH:mm:ss');
const start = moment().subtract(1, 'months').format('YYYY-MM-DD HH:mm:ss');
picker.$emit("pick", [start, end]);
}
})
})
return newArr
}
```
### card-components
`多个，单例扼要：`
#### alarm-stats.vue
`参数配置`
```javascript
// 组件调用
<alarm-stats
v-if="item.widget_type==='alarm_stats'"
v-bind="item"
v-on="$listeners" // 事件传递
:catalogueEdit='catalogueEdit' // 编辑状态
:isRefresh="isRefresh" // echart 防止变形
/>
// 组件内容：
alarmMessageMap: { // 状态枚举
'4': 'urgency',
'3': 'serious',
'2': "common",
'1': 'slight'
},
alarmMessageList: [], // 状态
option: {}, // 趋势
```