1

lzhe

2024-09-30 1988d77f4df3c01a9137303e0c959b3442c14377

 src/views/home/widgets/index.vue

@@ -39,7 +39,6 @@
               <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>
            {{grid.layout.join(',')}},xxxx
            <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])">
@@ -61,6 +60,14 @@
                        <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>
@@ -113,7 +120,7 @@
         this.getWorkbenchCarList();
      },
      mounted() {
         this.$emit('on-mounted')
         this.$emit('on-mounted');
      },
      computed: {
         allCompsList(){
@@ -183,16 +190,39 @@
                        return 1;  
                     }  
                     // 如果 xcoordinate 也相同，则不交换位置  
                     return 0;  
                  });
                  cards.forEach((item,index)=> {
                     this.$CONFIG.DEFAULT_GRID.copmsList[index] = [item.cardKey];
                     this.$CONFIG.DEFAULT_GRID.layout[index] = item.cardWide * 2;
                     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)
                  })
                  console.log(this.$CONFIG.DEFAULT_GRID.copmsList,this.$CONFIG.DEFAULT_GRID.layout,234)
                  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));
               }
            })
         },
@@ -304,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);}