gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NEZ-290 fix: 修复不能拖拽移位的bug

Browse Source
This commit is contained in:
chenjinsong
2020-06-03 20:45:58 +08:00
parent f8b91ed928
commit 43b179bc27
2 changed files with 19 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -55,7 +55,7 @@
animation:150,
handle:'.chartTitle',
}" >
<div class="chartBox" v-for="(item, index) in dataList" :key="index" :id="'chart-' + item.id" :name="item.title">
<div class="chartBox" v-for="(item, index) in dataList" :key="item.id" :id="'chart-' + item.id" :name="item.title">
<line-chart-block v-if="item.type === 'line' || item.type === 'bar' ||item.type == 'stackArea' || item.type === 4" :key="'inner' + item.id"
:ref="'editChart'+item.id"
@on-refresh-data="refreshChart"
@@ -184,14 +184,12 @@
stepHeight: 50,
};
},
computed: {},
watch: {},
methods: {
change (event) {
console.log('change', event)
},
start (event) {
console.log('start', event, this.dataList);
//console.log('start', event, this.dataList);
event.item.querySelector('.chartTitle').style.background = '#d8dce1';
let projectAndAssetFeatureInfos = event.item.querySelectorAll(".feature-content");
if (projectAndAssetFeatureInfos && projectAndAssetFeatureInfos.length > 0) {
@@ -203,7 +201,7 @@
this.dataListDragTmp = [...this.dataList];
},
end (event) {
console.info("end event:", event)
//console.info("end event:", event)
let item = event.item;
let oldIndex = event.oldIndex;
let newIndex = event.newIndex;
@@ -271,7 +269,7 @@
if(item.id===newPrevItem.id){
prevItemIndexInTotal = index;
}
})
});
//console.log('从前往后移动：prev元素在总列表中之后的元素的index='+prevItemIndexInTotal)
if(prevItemIndexInTotal<this.dataTotalListBak.length-1){//总列表中：移动之后的当前元素前面的元素之后有元素
let nextItem = this.dataTotalListBak[prevItemIndexInTotal+1];
@@ -282,7 +280,6 @@
}else {//oldIndex = newIndex
}
//更新图表prev和next
const modifyParams = {
id:newItem.id,
@@ -307,6 +304,7 @@
}else{//移动到最后一个元素
this.dataTotalListBak.push(newItem);
}
this.dataList = this.dataTotalListBak;
}else {
if(response.msg){
this.$message.error(response.msg);
@@ -318,19 +316,18 @@
}
});
}
let chartTitle = item.querySelector('.chartTitle');
chartTitle.style.background = '';
},
move (event, orgin) {
console.log('move', event, orgin);
//console.log('move', event, orgin);
let dragClass = document.querySelector('.drag-chart-class');//drag-chart-class:yellow chart-ghost:green fallback-class choose-class:purple
console.log('move---class', dragClass);
//console.log('move---class', dragClass);
//dragClass.style.opacity = 1;
//dragClass.style.pointerEvents = 'auto';//设置此属性，end事件里newIndex为 列表长度
let chartTitle = dragClass.querySelector('.chartTitle');
console.log('move-title',chartTitle);
//console.log('move-title',chartTitle);
chartTitle.style.background = '#d8dce1';
},
@@ -582,7 +579,6 @@
},
loadChartData(scrollTop){
if (this.dataList.length > 0 ) {
let chartListInViewport = [];
this.dataList.forEach((item,index) => {
if(!item.isLoaded){
//获得当前显示在浏览器的图表，从后台获取数据
@@ -1393,11 +1389,11 @@
* 第一种情况 由于元素随页面向上滚动, 整个页面滚动的距离 大于 （元素距离页面顶部的距离 + 元素本身的高度 ）-> 超出
* 第二种情况 由于元素随页面向下滚动, 整个页面滚动的距离 小于 （元素距离页面顶部的距离 - 浏览器可见区域高度 ）-> 超出
* */
//console.log("___isInView____","元素距离页面顶部的距离mainOffsetTop="+mainOffsetTop)//不变
//console.log("___isInView____","元素高度mainHeight="+mainHeight)//不变
//console.log("___isInView____","scrollTop页面滚动的距离windowScrollTop="+windowScrollTop)//变
//console.log("___isInView____","浏览器可见区域高度windowHeight="+windowHeight)//不变
//console.log(item.title,(mainOffsetTop+mainHeight),"<",(windowScrollTop+windowHeight),((mainOffsetTop+mainHeight) < (windowScrollTop+windowHeight)))
/*console.log("___isInView____","元素距离页面顶部的距离mainOffsetTop="+mainOffsetTop)//不变
console.log("___isInView____","元素高度mainHeight="+mainHeight)//不变
console.log("___isInView____","scrollTop页面滚动的距离windowScrollTop="+windowScrollTop)//变
console.log("___isInView____","浏览器可见区域高度windowHeight="+windowHeight)//不变
console.log(item.title,(mainOffsetTop+mainHeight/3),"<",(windowScrollTop+windowHeight),((mainOffsetTop+mainHeight/3) < (windowScrollTop+windowHeight)))*/
if((mainOffsetTop+mainHeight/3) < (windowScrollTop+windowHeight)){
let chartType = item.type;
item.isLoaded = true;

3
nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
View File

@@ -388,6 +388,7 @@
} else {
_self.showTopBtn = false;
}
_self.$refs.chartList.loadChartData(scrollbarWrap.scrollTop);
/*if (scrollbarWrap.scrollHeight - scrollbarWrap.scrollTop - scrollbarWrap.offsetHeight < 20) {
_self.$refs.chartList.pageDataList(true, _self.panelId);
}*/
@@ -432,7 +433,7 @@
immediate: true,
handler(n, o) {
setTimeout(() => {
if ((n && !o) || n.id != o.id) {
if (n && n.id) {
this.getTableData(n.id);
}
}, 500);