| | |
|---|
| | | </div> |
|---|
| | | <el-row :gutter="15"> |
|---|
| | | <el-col v-for="(item, index) in grid.layout" v-bind:key="index" :md="item" :xs="24"> |
|---|
| | | <draggable v-model="grid.copmsList[index]" animation="200" handle=".customize-overlay" group="people" item-key="com" dragClass="aaaaa" force-fallback fallbackOnBody class="draggable-box"> |
|---|
| | | <draggable v-model="grid.copmsList[index]" animation="200" handle=".customize-overlay" group="people" item-key="com" dragClass="aaaaa" force-fallback fallbackOnBody class="draggable-box" @add="endDraggable"> |
|---|
| | | <template #item="{ element }"> |
|---|
| | | <div class="widgets-item"> |
|---|
| | | <div class="widgets-item" :ref="element"> |
|---|
| | | <component :is="allComps[element]"></component> |
|---|
| | | <div v-if="customizing" class="customize-overlay"> |
|---|
| | | <el-button class="close" type="danger" plain icon="el-icon-close" size="small" @click="remove(element)"></el-button> |
|---|
| | |
|---|
| | | </el-header> |
|---|
| | | <el-header style="height:auto"> |
|---|
| | | <div class="selectLayout"> |
|---|
| | | <div class="selectLayout-item item01" :class="{active:grid.layout.join(',')=='12,6,6'}" @click="setLayout([12,6,6])"> |
|---|
| | | <!-- <div class="selectLayout-item item01" :class="{active:grid.layout.join(',')=='12,6,6'}" @click="setLayout([12,6,6])"> |
|---|
| | | <el-row :gutter="2"> |
|---|
| | | <el-col :span="12"><span></span></el-col> |
|---|
| | | <el-col :span="6"><span></span></el-col> |
|---|
| | |
|---|
| | | <el-col :span="24"><span></span></el-col> |
|---|
| | | <el-col :span="24"><span></span></el-col> |
|---|
| | | </el-row> |
|---|
| | | </div> |
|---|
| | | </div> --> |
|---|
| | | <div class="selectLayout-item item04" :class="{active:grid.layout.join(',').indexOf('24,12,6,6')>-1}" @click="setLayout([24,12,6,6])"> |
|---|
| | | <el-row :gutter="2"> |
|---|
| | | <el-col :span="24"><span></span></el-col> |
|---|
| | |
|---|
| | | description: allComps[key].description |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | var myCopmsList = this.grid.copmsList.reduce(function(a, b){return a.concat(b)}) |
|---|
| | | for(let comp of allCompsList){ |
|---|
| | | const _item = myCopmsList.find((item)=>{return item === comp.key}) |
|---|
| | | if(_item){ |
|---|
| | | comp.disabled = true |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return allCompsList |
|---|
| | | return allCompsList; |
|---|
| | | }, |
|---|
| | | myCompsList(){ |
|---|
| | | var copmsList = []; |
|---|
| | |
|---|
| | | }) |
|---|
| | | var myGrid = copmsList; |
|---|
| | | this.$TOOL.data.set("DASHBOARDGRID", copmsList); |
|---|
| | | //return this.allCompsList.filter(item => !item.disabled && myGrid.includes(item.key)) |
|---|
| | | return this.allCompsList; |
|---|
| | | }, |
|---|
| | | nowCompsList(){ |
|---|
| | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | endDraggable(e) { |
|---|
| | | console.log(e,this.grid) |
|---|
| | | }, |
|---|
| | | getWorkbenchCarList() { |
|---|
| | | var data = this.$TOOL.data.get("MENU"); |
|---|
| | | this.workid = data[0].children[0].id; //记录第一个children的id |
|---|
| | |
|---|
| | | return 0; |
|---|
| | | }); |
|---|
| | | var layout = [...new Set(cards.map(v => v.cardWide *2))]; //布局 |
|---|
| | | if(layout.length < 3) { |
|---|
| | | layout = [24,12,6,6]; |
|---|
| | | } |
|---|
| | | var result = {} |
|---|
| | | //排序 |
|---|
| | | cards.forEach(v=> { |
|---|
| | |
|---|
| | | return obj.cardKey; |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | //保证有4个数组，才能拖拽 |
|---|
| | | var neededLength = 4 - copmsList.length; |
|---|
| | | for (var i = 0; i < neededLength; i++) { |
|---|
| | | copmsList.push([]); |
|---|
| | | } |
|---|
| | | this.$CONFIG.DEFAULT_GRID.copmsList = copmsList; |
|---|
| | | this.$CONFIG.DEFAULT_GRID.layout = layout; |
|---|
| | | this.$CONFIG.DEFAULT_GRID.data = cards; |
|---|
| | | this.defaultGrid = this.$CONFIG.DEFAULT_GRID; |
|---|
| | | this.grid = this.$TOOL.data.get("grid") || JSON.parse(JSON.stringify(this.defaultGrid)); |
|---|
| | | console.log(this.$TOOL.data.get("grid"),JSON.parse(JSON.stringify(this.defaultGrid)),555) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | //开启自定义 |
|---|
| | | custom(){ |
|---|
| | | this.customizing = true |
|---|
| | | this.customizing = true; |
|---|
| | | const oldWidth = this.$refs.widgets.offsetWidth |
|---|
| | | this.$nextTick(() => { |
|---|
| | | const scale = this.$refs.widgets.offsetWidth / oldWidth |
|---|
| | |
|---|
| | | }, |
|---|
| | | //追加 |
|---|
| | | push(item){ |
|---|
| | | let target = this.grid.copmsList[0] |
|---|
| | | target.push(item.key) |
|---|
| | | var that = this; |
|---|
| | | var target = this.grid; |
|---|
| | | if(this.grid.copmsList.length == 0) { |
|---|
| | | target.copmsList.push([item.key]); |
|---|
| | | }else { |
|---|
| | | target.copmsList[0].push(item.key) |
|---|
| | | } |
|---|
| | | this.$nextTick(()=> { |
|---|
| | | var height = String(Math.floor(this.$refs.Access[0].offsetHeight/ 57)); |
|---|
| | | item.cardLength = height; |
|---|
| | | item.cardWide = '12'; |
|---|
| | | item.xcoordinate = '0'; |
|---|
| | | //item.ycoordinate = '4'; |
|---|
| | | item.cardKey = item.key; |
|---|
| | | item.workbenchId = that.workid; |
|---|
| | | target.data.push(item); |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | //隐藏组件 |
|---|
| | | remove(item){ |
|---|
| | |
|---|
| | | this.$message.success("操作成功"); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | console.log(this.grid,111) |
|---|
| | | }, |
|---|
| | | //恢复默认 |
|---|
| | | backDefaul(){ |
|---|
