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

fix：修改问题

Browse Source 
1 panel页面渲染chart时直接显示占好位置，不根据滚动条监测懒加载chart图表。只有当chart 出现在 浏览器窗口后才请求prom接口获取数据。
This commit is contained in:
hyx
2020-05-21 09:03:30 +08:00
parent 3b67691d79
commit 6bb65cd34e
4 changed files with 134 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -166,7 +166,7 @@ export default {
timer: null,
dataTotalList:[],//懒加载：总记录数
dataTotalListBak:[],//用于查询：懒加载，总记录备份
isPage:true,//是否分页懒加载
isPage:false,//是否分页懒加载
currentRecordNum:0,//懒加载：本次取记录的index，第一次从0开始取，每次取3行
lineNum:3,//每页加载的行数
pagePanelId:'',//当前分页的panelId
@@ -533,16 +533,19 @@ export default {
});
}
this.dataList = [];
//console.log("__map__",JSON.stringify(this.chartDataCacheGroup))
this.chartDataCacheGroup.clear();
//console.log("__map22__",JSON.stringify(this.chartDataCacheGroup))
},
initData(filter) {
this.dataList = [];
//this.dataList = [];
this.cleanData();
// 内含 panelId,开始时间,结束时间
this.filter = filter;
this.pagePanelId = this.filter.panelId;
this.getData(this.filter);
},
searchCharts(searchName){
this.currentRecordNum = 0;
this.dataList = [];
this.dataTotalList = [];
@@ -550,29 +553,34 @@ export default {
if(searchName && searchName.trim()!==''){
this.dataTotalListBak.forEach((item)=>{
if(item.title.indexOf(searchName)>-1){
item.isLoaded = false;
chartListTmp.push(item);
}
});
}else{
this.dataTotalListBak.forEach((item)=>{
item.isLoaded = false;
chartListTmp.push(item);
});
}
this.dataTotalList = [...chartListTmp];
if(this.isPage){
this.pageDataList(null,null,true);
}else {
this.dataList = [...this.dataTotalList];
}
this.$nextTick(() => {
if (this.dataList.length > 0 ) {
this.dataList.forEach((item) => {
this.dataList.forEach((item,index) => {
this.$refs['editChart'+item.id][0].showLoad(item);//之后要实现
this.setSize(item.span, index);//设置该图表宽度
//获得当前显示在浏览器的图表，从后台获取数据
let chartBox = document.getElementById(item.title+'_'+item.id);//this.$refs['editChart'+item.id][0];
//console.log(item.title,"___searchChart___",JSON.stringify(item))
if(!item.isLoaded ){
this.handleElementInViewport(chartBox,0,item,index,true);
}
});
}
this.dataSetFirst(this.dataList,null,true);
});
},
pageDataList(isAdd,panelId,isSearch){
@@ -637,6 +645,10 @@ export default {
//根据panelId获得panel下的所有图表
this.$get('panel/'+ params.panelId+'/charts').then(response => {
if (response.code === 200) {
response.data.list.forEach((item,index)=>{
item.isLoaded = false;
});
if(response.data.list){
this.dataTotalList = response.data.list;
}else {
@@ -655,21 +667,36 @@ export default {
this.dataTotalList = chartListTmp;
}
if(this.isPage){
this.pageDataList();
}else {
this.dataList = this.dataTotalList;
}
this.$nextTick(() => {
if (this.dataList.length > 0 ) {
this.dataList.forEach((item) => {
this.$refs['editChart'+item.id][0].showLoad(item);//之后要实现
});
this.dataList.forEach((item,index) => {
this.$refs['editChart'+item.id][0].showLoad(item);//设置该图表的高度
this.setSize(item.span, index);//设置该图表宽度
//获得当前显示在浏览器的图表，从后台获取数据
let chartBox = document.getElementById(item.title+'_'+item.id);//this.$refs['editChart'+item.id][0];
if( !item.isLoaded ){
this.handleElementInViewport(chartBox,0,item,index);
}
this.dataSetFirst(this.dataList);
});
}
});
}
});
},
loadChartData(scrollTop){
if (this.dataList.length > 0 ) {
let chartListInViewport = [];
this.dataList.forEach((item,index) => {
//获得当前显示在浏览器的图表，从后台获取数据
let chartBox = document.getElementById(item.title+'_'+item.id);//this.$refs['editChart'+item.id][0];
//console.log("loadChartData___",item.title,item.isLoaded)
if(!item.isLoaded){
this.handleElementInViewport(chartBox,scrollTop,item,index);
}
});
}
},
// arr: 该panel下图表list,生成该看板下所有图表
dataSetFirst(arr,oldDataListLen,isSearch) {
@@ -841,7 +868,6 @@ export default {
};
let errorMsg = "";
res.forEach((response, innerPos) => {
//alert(pos+'==response==='+JSON.stringify(chartInfo))
if (response.status === 'success') {
errorMsg = "";
if (response.data.result) {
@@ -1163,19 +1189,62 @@ export default {
this.getChartData(item, index, 'showFullScreen');
}
});
}
},
/*
// 刷新数据
refreshData() {
this.getData(this.filter);
},
*/
handleElementInViewport(ele,scrollTop,item,index,isSearch) {
/*
网页被卷去的高：document.body.scrollTop
网页正文全文高：document.body.scrollHeight
网页可见区域高（包括边线的高）：document.body.offsetHeight；
网页可见区域高：document.body.clientHeight
*/
let that = this;
setTimeout(function () {
let itemHeight = item.height;
//1.元素距离页面顶部的距离
var mainOffsetTop = ele.offsetTop;//offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。
//2.元素的高度
var mainHeight = itemHeight//ele.offsetHeight;//itemHeight;
//3.页面滚动的距离
var windowScrollTop = scrollTop;//document.documentElement.scrollTop || document.body.scrollTop;
//4.浏览器可见区域的高度
var windowHeight = (window.innerHeight || document.documentElement.clientHeight)-50-42;
/*
* 在窗口上下滚动的情况下, 一个页面元素的状态有下面3种：
1.向上滚动超出可见区域
2.向下滚动超出可视区域
3.在可视区域内
* 第一种情况 由于元素随页面向上滚动, 整个页面滚动的距离 大于 （元素距离页面顶部的距离 + 元素本身的高度 ）-> 超出
* 第二种情况 由于元素随页面向下滚动, 整个页面滚动的距离 小于 （元素距离页面顶部的距离 - 浏览器可见区域高度 ）-> 超出
* */
//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)))
if((mainOffsetTop+mainHeight/3) < (windowScrollTop+windowHeight)){
let chartType = item.type;
item.isLoaded = true;
if(chartType!=='url'){
that.getChartDataForSearch(item,index);
}
}
}, 100);
},
},
mounted() {
},
beforeDestroy() {
},
destroyed () {
},
};
</script>

12
nezha-fronted/src/components/common/timePicker.vue
View File

@@ -273,6 +273,18 @@ export default {
}
}
},
getCurrentTime(){
let timeTypeId = this.showTime.id;
if(timeTypeId===0){
return this.searchTime;
}else {
if(!timeTypeId){timeTypeId = 4;}
let currentTime = this.timeData.find(item => item.id === timeTypeId);
this.setSearchTime(currentTime.type,currentTime.value);
return this.searchTime;
}
},
setSearchTime(type,val){
if(type==='minute'){
let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val),'yyyy-MM-dd hh:mm:ss');

30
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -276,6 +276,9 @@
methods: {
//刷新
Refresh() {
let curTime = this.$refs.calendarPanel.getCurrentTime();
this.filter.start_time = bus.timeFormate(curTime[0], 'yyyy-MM-dd hh:mm:ss');
this.filter.end_time = bus.timeFormate(curTime[1], 'yyyy-MM-dd hh:mm:ss');
this.getTableData();
},
//面板相关操作
@@ -287,7 +290,10 @@
//this.$refs.searchInput.select();
this.showPanel = val
this.filter.panelId = this.showPanel.id;
this.$refs.chartList.initCurrentRecordNum();
let curTime = this.$refs.calendarPanel.getCurrentTime();
this.filter.start_time = bus.timeFormate(curTime[0], 'yyyy-MM-dd hh:mm:ss');
this.filter.end_time = bus.timeFormate(curTime[1], 'yyyy-MM-dd hh:mm:ss');
//this.$refs.chartList.initCurrentRecordNum();
this.$refs.chartList.cleanData();
this.getData(this.filter);
@@ -440,7 +446,9 @@
/*时间条件查询--start*/
// 选择日期变化
dateChange(val) {
if(val){
this.searchTime = [...val];
}
this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
this.filter.panelId = this.showPanel.id;
@@ -587,24 +595,18 @@
onScroll() {
let _self = this;
let scrollbarWrap = this.$refs.dashboardScrollbar.wrap;
scrollbarWrap.onscroll = function() {
console.info(scrollbarWrap.scrollTop)
scrollbarWrap.onscroll = bus.debounce(function() {
if (scrollbarWrap.scrollTop > 50) {
_self.showTopBtn = true;
} else {
_self.showTopBtn = false;
}
if (scrollbarWrap.scrollHeight - scrollbarWrap.scrollTop - scrollbarWrap.offsetHeight < 20) {
_self.$refs.chartList.pageDataList(true, _self.showPanel.id);
}
}
/*let dom = document.getElementById('tableList');
let scrollHeight = dom.scrollHeight;//整个可滑动区域高度
let clientHeight = dom.clientHeight;//可视高度
let scrollTop = dom.scrollTop;//滚动条顶部与整个scrollHeight顶部的距离
if (scrollHeight - clientHeight - scrollTop <= 20) {//滚动到底部，才加载新数据
this.$refs.chartList.pageDataList(true, this.showPanel.id);
}*/
_self.$refs.chartList.loadChartData(scrollbarWrap.scrollTop);
//if (scrollbarWrap.scrollHeight - scrollbarWrap.scrollTop - scrollbarWrap.offsetHeight < 20) {
//_self.$refs.chartList.pageDataList(true, _self.showPanel.id);
//}
},300);
},
focusInput:function(){
let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");

15
nezha-fronted/src/libs/bus.js
View File

@@ -266,8 +266,23 @@ export default new Vue({
}else{
return sourceTime;
}
},
debounce(fn, delay) {
// 记录上一次的延时器
var timer = null;
var delay = delay || 200;
return function() {
var args = arguments;
var that = this;
// 清除上一次延时器
clearTimeout(timer)
timer = setTimeout(function() {
fn.apply(that,args)
}, delay);
}
},
},
created() {
this.getDefaultDate();
},