From e2fdfe540eaf160dc7d063c60667041edcc64e86 Mon Sep 17 00:00:00 2001
From: gaoshp <291585735@qq.com>
Date: 星期二, 05 十一月 2024 22:55:14 +0800
Subject: [PATCH] 处理显示名称
---
src/views/home/widgets/index.vue | 198 +++++++++++++++++++++++++++++++++++++++----------
1 files changed, 157 insertions(+), 41 deletions(-)
diff --git a/src/views/home/widgets/index.vue b/src/views/home/widgets/index.vue
index d7cebf5..837a33b 100644
--- a/src/views/home/widgets/index.vue
+++ b/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; //璁板綍绗竴涓猚hildren鐨刬d
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寮�濮嬫暟
+ //鎸墆coordinate杩涜浠庡皬鍒板ぇ鎺掑簭锛屽鏋測coordinate涓�鏍锋椂锛屾寜鐓coordinate浠庡皬鍒板ぇ鎺掑簭
+ //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);}
--
Gitblit v1.9.3