🎉 布局&拖拽交互
## 布局
>w ◆ 布局设置占比，一行可放置几张卡片，以最小单位（1*1）来计算（可配置）。
◆ 卡片间距（上下，左右）可配置
◆ 数据结构
```javascript
rate: 6, // 此处为 一行 1*6
gutter: 15, //间距
```
>w ◆ 1*1卡片呈正方形算法，窗口变化后更新
```javascript
// 单张卡片高度
this.height = (this.$refs[`system-overview-tab`].$el.offsetWidth - this.rate * this.gutter) / this.rate;
// 算法：按照设定比例显示对应的尺寸
this.cardData.forEach(item => {
const height = this.height // 可视
const { x, y, id, widget_type } = item
let newHeight = 0;
const ref = `card${this.tabId}${id}`
const rate = y / x // 宽高比
if (!this.isGroup(widget_type)) {
newHeight = x * height // 高<宽 rate >= 1
if (rate < 1) { // 表示高>宽
newHeight += (1 / rate - 1) * this.gutter
}
} else {
newHeight = 30 // 组部件固定高度
}
this.$refs[ref][0].style.height = newHeight + "px"
})
this.isRefresh = true // 用作显隐后echart 渲染宽高问题
```
## 分组&小部件交互
>w ◆ 拖拽组 可排序，（拖拽过程中自动收起，结束后恢复）。
◆ 拖拽卡片可移出，移入组中。
◆ 卡片&组 扁平化结构，且拖拽组的同时组内成员跟随组移动。