<template>
|
<div :class="['widgets-home', customizing?'customizing':'']" ref="main">
|
<div class="widgets-content">
|
<div class="widgets-top">
|
<div class="widgets-top-title">
|
工作台
|
</div>
|
<div class="widgets-top-actions">
|
<el-button v-if="customizing" type="primary" icon="el-icon-check" round @click="save">完成</el-button>
|
<el-button v-else type="primary" icon="el-icon-edit" round @click="custom">自定义</el-button>
|
</div>
|
</div>
|
<div class="widgets" ref="widgets">
|
<div class="widgets-wrapper">
|
<div v-if="nowCompsList.length<=0" class="no-widgets">
|
<el-empty image="img/no-widgets.svg" description="没有部件啦" :image-size="280"></el-empty>
|
</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">
|
<template #item="{ element }">
|
<div class="widgets-item">
|
<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>
|
<label><el-icon><component :is="allComps[element].icon" /></el-icon>{{ allComps[element].title }}</label>
|
</div>
|
</div>
|
</template>
|
</draggable>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</div>
|
<div v-if="customizing" class="widgets-aside">
|
<el-container>
|
<el-header>
|
<div class="widgets-aside-title"><el-icon><el-icon-circle-plus-filled/></el-icon>添加部件</div>
|
<div class="widgets-aside-close" @click="close()"><el-icon><el-icon-close /></el-icon></div>
|
</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])">
|
<el-row :gutter="2">
|
<el-col :span="12"><span></span></el-col>
|
<el-col :span="6"><span></span></el-col>
|
<el-col :span="6"><span></span></el-col>
|
</el-row>
|
</div>
|
<div class="selectLayout-item item02" :class="{active:grid.layout.join(',')=='24,16,8'}" @click="setLayout([24,16,8])">
|
<el-row :gutter="2">
|
<el-col :span="24"><span></span></el-col>
|
<el-col :span="16"><span></span></el-col>
|
<el-col :span="8"><span></span></el-col>
|
</el-row>
|
</div>
|
<div class="selectLayout-item item03" :class="{active:grid.layout.join(',')=='24'}" @click="setLayout([24])">
|
<el-row :gutter="2">
|
<el-col :span="24"><span></span></el-col>
|
<el-col :span="24"><span></span></el-col>
|
<el-col :span="24"><span></span></el-col>
|
</el-row>
|
</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>
|
<el-col :span="12"><span></span></el-col>
|
<el-col :span="6"><span></span></el-col>
|
<el-col :span="6"><span></span></el-col>
|
</el-row>
|
</div>
|
</div>
|
</el-header>
|
<el-main class="nopadding">
|
<div class="widgets-list">
|
<!-- <div v-if="myCompsList.length<=0" class="widgets-list-nodata">
|
<el-empty description="没有部件啦" :image-size="60"></el-empty>
|
</div> -->
|
<div v-for="item in myCompsList" :key="item.title" class="widgets-list-item">
|
<div class="item-logo"><el-icon><component :is="item.icon" /></el-icon></div>
|
<div class="item-info">
|
<h2>{{ item.title }}</h2>
|
<p>{{ item.description }}</p>
|
</div>
|
<div class="item-actions">
|
<el-button type="primary" icon="el-icon-plus" size="small" @click="push(item)"></el-button>
|
</div>
|
</div>
|
</div>
|
</el-main>
|
<el-footer style="height:51px;">
|
<el-button size="small" @click="backDefaul()">恢复默认</el-button>
|
</el-footer>
|
</el-container>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import draggable from 'vuedraggable'
|
import allComps from './components'
|
import { arrow } from '@popperjs/core';
|
|
export default {
|
components: {
|
draggable
|
},
|
data() {
|
return {
|
customizing: false,
|
allComps: allComps,
|
selectLayout: [],
|
defaultGrid: this.$CONFIG.DEFAULT_GRID,
|
grid: []
|
}
|
},
|
created(){
|
//this.grid = this.$TOOL.data.get("grid") || JSON.parse(JSON.stringify(this.defaultGrid))
|
this.getWorkbenchCarList();
|
},
|
mounted() {
|
this.$emit('on-mounted');
|
},
|
computed: {
|
allCompsList(){
|
var allCompsList = []
|
for(var key in this.allComps){
|
allCompsList.push({
|
key: key,
|
title: allComps[key].title,
|
icon: allComps[key].icon,
|
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
|
},
|
myCompsList(){
|
var copmsList = [];
|
if(this.defaultGrid.copmsList == undefined) return [];
|
this.defaultGrid.copmsList.forEach(item=> {
|
copmsList = copmsList.concat([...item])
|
})
|
var myGrid = copmsList;
|
this.$TOOL.data.set("DASHBOARDGRID", copmsList);
|
//return this.allCompsList.filter(item => !item.disabled && myGrid.includes(item.key))
|
return this.allCompsList;
|
},
|
nowCompsList(){
|
var copmsList = [];
|
if(this.grid.copmsList == undefined) return [];
|
this.grid.copmsList.forEach(item=> {
|
copmsList = copmsList.concat([...item])
|
})
|
return copmsList;
|
}
|
},
|
methods: {
|
getWorkbenchCarList() {
|
var data = this.$TOOL.data.get("MENU");
|
this.workid = data[0].children[0].id; //记录第一个children的id
|
this.$HTTP.get(`/api/blade-system/workbench-card/list?workbenchId=${this.workid}`).then(res=> {
|
if(res.code == 200) {
|
let cards = res.data;
|
//ycoordinate表示从上往下从第几个开始，从0开始数
|
//xcoordinate表示从左往右从第几个开始，从0开始数
|
//按ycoordinate进行从小到大排序，如果ycoordinate一样时，按照xcoordinate从小到大排序
|
//cardWide代表宽度
|
//cardKey代表组件名称
|
cards.sort((a, b) => {
|
// 先比较 ycoordinate
|
if (a.ycoordinate < b.ycoordinate) {
|
return -1;
|
}
|
if (a.ycoordinate > b.ycoordinate) {
|
return 1;
|
}
|
// 如果 ycoordinate 相同，则比较 xcoordinate
|
if (a.xcoordinate < b.xcoordinate) {
|
return -1;
|
}
|
if (a.xcoordinate > b.xcoordinate) {
|
return 1;
|
}
|
// 如果 xcoordinate 也相同，则不交换位置
|
return 0;
|
});
|
var layout = [...new Set(cards.map(v => v.cardWide *2))]; //布局
|
var result = {}
|
//排序
|
cards.forEach(v=> {
|
if(!result[`${v.cardWide}-${v.xcoordinate}`]) {
|
result[`${v.cardWide}-${v.xcoordinate}`] = []
|
}
|
result[`${v.cardWide}-${v.xcoordinate}`].push(v)
|
})
|
let resdata = []
|
Object.values(result).forEach(v => {
|
let min = v.sort((a,b) => a.ycoordinate - b.ycoordinate)[0];
|
let minYX = Number(min.ycoordinate)*10 + Number(min.xcoordinate);
|
let obj = {};
|
obj[minYX] = v;
|
resdata.push(obj);
|
})
|
var lastData = resdata.map(v => Object.values(v));
|
//转化
|
var copmsList = lastData.map(function(outerArray) {
|
// 访问最内层的对象数组
|
var innerArray = outerArray[0];
|
return innerArray.map(function(obj) {
|
return obj.cardKey;
|
});
|
});
|
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));
|
}
|
})
|
},
|
//开启自定义
|
custom(){
|
this.customizing = true
|
const oldWidth = this.$refs.widgets.offsetWidth
|
this.$nextTick(() => {
|
const scale = this.$refs.widgets.offsetWidth / oldWidth
|
this.$refs.widgets.style.setProperty('transform', `scale(${scale})`)
|
})
|
},
|
//设置布局
|
setLayout(layout){
|
this.grid.layout = layout
|
if(layout.join(',')=='24'){
|
this.grid.copmsList[0] = [...this.grid.copmsList[0],...this.grid.copmsList[1],...this.grid.copmsList[2]]
|
this.grid.copmsList[1] = []
|
this.grid.copmsList[2] = []
|
}
|
},
|
//追加
|
push(item){
|
let target = this.grid.copmsList[0]
|
target.push(item.key)
|
},
|
//隐藏组件
|
remove(item){
|
var newCopmsList = this.grid.copmsList
|
newCopmsList.forEach((obj, index) => {
|
var newObj = obj.filter(o=>o!=item)
|
newCopmsList[index] = newObj;
|
})
|
},
|
//保存
|
save(){
|
this.customizing = false
|
this.$refs.widgets.style.removeProperty('transform')
|
this.$TOOL.data.set("grid", this.grid)
|
//保存接口
|
var copmsList = this.grid.copmsList;
|
var flattened = copmsList.reduce((acc, val) => acc.concat(val), []); //扁平化
|
var data = this.grid.data.filter(item=>flattened.includes(item.cardKey));
|
var obj = {
|
workbenchCardAddVOList: data,
|
workbenchId: this.workid
|
}
|
this.$HTTP.post(`/api/blade-system/workbench-card/create-workbench-card`,obj).then(res=> {
|
if(res.code == 200) {
|
this.$message.success("操作成功");
|
}
|
})
|
console.log(this.grid,111)
|
},
|
//恢复默认
|
backDefaul(){
|
this.customizing = false
|
this.$refs.widgets.style.removeProperty('transform')
|
this.grid = JSON.parse(JSON.stringify(this.defaultGrid))
|
this.$TOOL.data.remove("grid")
|
},
|
//关闭
|
close(){
|
//this.customizing = false
|
//this.$refs.widgets.style.removeProperty('transform')
|
this.backDefaul();
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.widgets-home {display: flex;flex-direction: row;flex: 1;height: 100%;}
|
.widgets-content {flex: 1;overflow: auto;overflow-x:hidden;padding:15px;}
|
.widgets-aside {width: 360px;background: #fff;box-shadow: 0 0 10px rgba(0,0,0,.1);position: relative;overflow: auto;}
|
.widgets-aside-title {font-size: 14px;display: flex;align-items: center;justify-content: center;}
|
.widgets-aside-title i {margin-right: 10px;font-size: 18px;}
|
.widgets-aside-close {font-size: 18px;width:30px;height: 30px;display: flex;align-items: center;justify-content: center;border-radius: 3px;cursor: pointer;}
|
.widgets-aside-close:hover {background: rgba(180,180,180,0.1);}
|
|
.widgets-top {margin-bottom: 15px;display: flex;justify-content: space-between;align-items: center;}
|
.widgets-top-title {font-size: 18px;font-weight: bold;}
|
|
.widgets {transform-origin: top left;transition: transform .15s;}
|
|
.draggable-box {height: 100%;}
|
|
.customizing .widgets-wrapper {margin-right:-360px}
|
.customizing .widgets-wrapper .el-col {padding-bottom:15px;}
|
.customizing .widgets-wrapper .draggable-box {border: 1px dashed var(--el-color-primary);padding:15px;}
|
.customizing .widgets-wrapper .no-widgets {display: none;}
|
.customizing .widgets-item {position: relative;margin-bottom: 15px;}
|
.customize-overlay {position: absolute;top:0;right:0;bottom:0;left:0;z-index: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;background: rgba(255,255,255,0.9);cursor: move;}
|
.customize-overlay label {background: var(--el-color-primary);color: #fff;height:40px;padding:0 30px;border-radius: 40px;font-size: 18px;display: flex;align-items: center;justify-content: center;cursor: move;}
|
.customize-overlay label i {margin-right: 15px;font-size: 24px;}
|
.customize-overlay .close {position: absolute;top:15px;right:15px;}
|
.customize-overlay .close:focus, .customize-overlay .close:hover {background: var(--el-button-hover-color);}
|
|
.widgets-list {}
|
.widgets-list-item {display: flex;flex-direction: row;padding:15px;align-items: center;}
|
.widgets-list-item .item-logo {width: 40px;height: 40px;border-radius: 50%;background: rgba(180,180,180,0.1);display: flex;align-items: center;justify-content: center;font-size: 18px;margin-right: 15px;color: #6a8bad;}
|
.widgets-list-item .item-info {flex: 1;}
|
.widgets-list-item .item-info h2 {font-size: 16px;font-weight: normal;cursor: default;}
|
.widgets-list-item .item-info p {font-size: 12px;color: #999;cursor: default;}
|
.widgets-list-item:hover {background: rgba(180,180,180,0.1);}
|
|
.widgets-wrapper .sortable-ghost {opacity: 0.5;}
|
|
.selectLayout {width: 100%;display: flex;}
|
.selectLayout-item {width:60px;height:60px;border: 2px solid var(--el-border-color-light);padding:5px;cursor: pointer;margin-right: 15px;}
|
.selectLayout-item span {display: block;background: var(--el-border-color-light);height:46px;}
|
.selectLayout-item.item02 span,.selectLayout-item.item04 span {height:30px;}
|
.selectLayout-item.item02 .el-col:nth-child(1) span,.selectLayout-item.item04 .el-col:nth-child(1) span {height:14px;margin-bottom: 2px;}
|
.selectLayout-item.item03 span {height:14px;margin-bottom: 2px;}
|
.selectLayout-item:hover {border-color: var(--el-color-primary);}
|
.selectLayout-item.active {border-color: var(--el-color-primary);}
|
.selectLayout-item.active span {background: var(--el-color-primary);}
|
|
|
.dark {
|
.widgets-aside {background: #2b2b2b;}
|
.customize-overlay {background: rgba(43,43,43,0.9);}
|
}
|
|
@media (max-width: 992px){
|
.customizing .widgets {transform: scale(1) !important;}
|
.customizing .widgets-aside {width: 100%;position: absolute;top:50%;right:0;bottom:0;}
|
.customizing .widgets-wrapper {margin-right:0;}
|
}
|
|
</style>
|
