1

lzhe

2024-09-30 1988d77f4df3c01a9137303e0c959b3442c14377

 src/views/home/widgets/index.vue

@@ -62,13 +62,21 @@
                        <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">
                  <!-- <div v-if="myCompsList.length<=0" class="widgets-list-nodata">
                     <el-empty description="没有部件啦" :image-size="60"></el-empty>
                  </div>
                  </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">
@@ -92,6 +100,7 @@
<script>
   import draggable from 'vuedraggable'
   import allComps from './components'
import { arrow } from '@popperjs/core';

   export default {
      components: {
@@ -111,8 +120,7 @@
         this.getWorkbenchCarList();
      },
      mounted() {
         console.log(this.allComps,this.element,this.grid.layout)
         this.$emit('on-mounted')
         this.$emit('on-mounted');
      },
      computed: {
         allCompsList(){
@@ -142,7 +150,8 @@
            })
            var myGrid = copmsList;
            this.$TOOL.data.set("DASHBOARDGRID", copmsList);
            return this.allCompsList.filter(item => !item.disabled && myGrid.includes(item.key))
            //return this.allCompsList.filter(item => !item.disabled && myGrid.includes(item.key))
            return this.allCompsList;
         },
         nowCompsList(){
            var copmsList = [];
@@ -160,16 +169,60 @@
            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) => {  
                     return parseInt(a.xcoordinate, 10) - parseInt(b.xcoordinate, 10);  
                  });  
                  cards.forEach((item,index)=> {
                     this.$CONFIG.DEFAULT_GRID.copmsList[index] = [item.cardKey];
                     this.$CONFIG.DEFAULT_GRID.layout[index] = item.cardWide * 2;
                     // 先比较 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))
                  this.grid = this.$TOOL.data.get("grid") || JSON.parse(JSON.stringify(this.defaultGrid));
               }
            })
         },
@@ -209,6 +262,20 @@
            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(){
@@ -219,8 +286,9 @@
         },
         //关闭
         close(){
            this.customizing = false
            this.$refs.widgets.style.removeProperty('transform')
            //this.customizing = false
            //this.$refs.widgets.style.removeProperty('transform')
            this.backDefaul();
         }
      }
   }
@@ -266,8 +334,8 @@
   .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 {height:30px;}
   .selectLayout-item.item02 .el-col:nth-child(1) span {height:14px;margin-bottom: 2px;}
   .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);}