处理显示名称

gaoshp

2024-11-05 e2fdfe540eaf160dc7d063c60667041edcc64e86

 src/views/home/widgets/index.vue

@@ -17,11 +17,14 @@
               </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>
                                 <label><el-icon><component :is="allComps[element].icon" /></el-icon>{{ allComps[element].title }}</label>
                              </div>
                           </div>
                        </template>
                     </draggable>
@@ -38,7 +41,7 @@
            </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>
@@ -58,14 +61,22 @@
                        <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">
                  <!-- <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">
@@ -79,7 +90,7 @@
               </div>
            </el-main>
            <el-footer style="height:51px;">
               <el-button size="small" @click="backDefaul()">恢复默认</el-button>
               <el-button size="small" @click="backDefaul()">关闭</el-button>
            </el-footer>
         </el-container>
      </div>
@@ -89,6 +100,7 @@
<script>
   import draggable from 'vuedraggable'
   import allComps from './components'
import { arrow } from '@popperjs/core';

   export default {
      components: {
@@ -108,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(){
@@ -122,14 +133,7 @@
                  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 = [];
@@ -139,7 +143,7 @@
            })
            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 = [];
@@ -151,28 +155,97 @@
         }
      },
      methods: {
         endDraggable(e) {
            //console.log(this.grid,e,111)
         },
         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; 
                  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;
                  })
                  this.$CONFIG.DEFAULT_GRID.data = cards;
                  //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))];  //布局
                  // if(layout.length < 3) {
                  //    layout = [24,12,6,6];
                  // } 
                  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;  
                  //    });  
                  // }); 
                  //保证有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.$CONFIG.DEFAULT_GRID.copmsList = [["mdcDeviceStatus"],["mdcRunning","mdcEquipmentRun"],[],[]]
                  if(res.data.length == 0) {
                     this.$CONFIG.DEFAULT_GRID.copmsList = [[],[],[],[]];
                  }else {
                     var layoutConfig = JSON.parse(res.data[0].layoutConfig);
                     //不满足4，补足
                     var newArr = [...layoutConfig];  
                     for (let i = 0; i < (4-newArr.length); i++) {  
                        layoutConfig.push([]);
                     }
                     this.$CONFIG.DEFAULT_GRID.copmsList = res.data[0].layoutConfig == null?[]:layoutConfig;
                  }
                  this.$CONFIG.DEFAULT_GRID.layout = [24,12,6,6];
                  this.$CONFIG.DEFAULT_GRID.data = res.data;
                  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));
               }
            })
         },
         //开启自定义
         custom(){
            this.customizing = true
            this.customizing = true;
            const oldWidth = this.$refs.widgets.offsetWidth
            this.$nextTick(() => {
               const scale =  this.$refs.widgets.offsetWidth / oldWidth
@@ -190,34 +263,77 @@
         },
         //追加
         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){
            var newCopmsList = this.grid.copmsList
            newCopmsList.forEach((obj, index) => {
               var newObj = obj.filter(o=>o!=item)
               newCopmsList[index] = newObj;
            this.$nextTick(()=> {
               var newCopmsList = this.grid.copmsList;
               newCopmsList.forEach((obj, index) => {
                  var newObj = obj.filter(o=>o!=item)
                  newCopmsList[index] = newObj;
               })
               this.grid.data.forEach((item1,index1)=> {
                  if(item1.cardKey == item) {
                     this.grid.data.splice(index1,1);
                  }
               })
            })
         },
         //保存
         save(){
            this.customizing = false
            this.$refs.widgets.style.removeProperty('transform')
            this.$TOOL.data.set("grid", this.grid)
            this.$TOOL.data.set("grid", this.grid);
            //this.apiResource.workStationIdList
            //保存接口
            //var copmsList = this.grid.copmsList;
            //var flattened = copmsList.reduce((acc, val) => acc.concat(val), []); //扁平化 
            //var data = this.grid.data.filter(item=>this.nowCompsList.includes(item.cardKey));
            this.grid.data.forEach(item=> {
               item.layoutConfig = JSON.stringify(this.grid.copmsList);
               if(item.cardKey == "mdcRunning") {
                  item.apiResource = JSON.stringify({workStationIdList: []})
               }
            })
            var obj = {
               workbenchCardAddVOList: this.grid.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("操作成功");
               }
            })
         },
         //恢复默认
         backDefaul(){
            this.customizing = false
            this.$refs.widgets.style.removeProperty('transform')
            this.grid =  JSON.parse(JSON.stringify(this.defaultGrid))
            this.$TOOL.data.remove("grid")
            // this.grid =  JSON.parse(JSON.stringify(this.defaultGrid))
            // this.$TOOL.data.remove("grid")
         },
         //关闭
         close(){
            this.customizing = false
            this.$refs.widgets.style.removeProperty('transform')
            //this.customizing = false
            //this.$refs.widgets.style.removeProperty('transform')
            this.backDefaul();
         }
      }
   }
@@ -263,8 +379,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);}