From 6bb65cd34ef3785aa869618ea6241dffa20963ba Mon Sep 17 00:00:00 2001 From: hyx Date: Thu, 21 May 2020 09:03:30 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=E9=97=AE?= =?UTF-8?q?=E9=A2=98=201=20panel=E9=A1=B5=E9=9D=A2=E6=B8=B2=E6=9F=93chart?= =?UTF-8?q?=E6=97=B6=E7=9B=B4=E6=8E=A5=E6=98=BE=E7=A4=BA=E5=8D=A0=E5=A5=BD?= =?UTF-8?q?=E4=BD=8D=E7=BD=AE=EF=BC=8C=E4=B8=8D=E6=A0=B9=E6=8D=AE=E6=BB=9A?= =?UTF-8?q?=E5=8A=A8=E6=9D=A1=E7=9B=91=E6=B5=8B=E6=87=92=E5=8A=A0=E8=BD=BD?= =?UTF-8?q?chart=E5=9B=BE=E8=A1=A8=E3=80=82=E5=8F=AA=E6=9C=89=E5=BD=93char?= =?UTF-8?q?t=20=E5=87=BA=E7=8E=B0=E5=9C=A8=20=E6=B5=8F=E8=A7=88=E5=99=A8?= =?UTF-8?q?=E7=AA=97=E5=8F=A3=E5=90=8E=E6=89=8D=E8=AF=B7=E6=B1=82prom?= =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=8E=B7=E5=8F=96=E6=95=B0=E6=8D=AE=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/charts/chart-list.vue | 109 ++++++++++++++---- .../src/components/common/timePicker.vue | 12 ++ .../src/components/page/dashboard/panel.vue | 32 ++--- nezha-fronted/src/libs/bus.js | 17 ++- 4 files changed, 134 insertions(+), 36 deletions(-) diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue index 34b41171d..0cf711c52 100644 --- a/nezha-fronted/src/components/charts/chart-list.vue +++ b/nezha-fronted/src/components/charts/chart-list.vue @@ -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.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,22 +667,37 @@ export default { this.dataTotalList = chartListTmp; } - if(this.isPage){ - this.pageDataList(); - }else { - this.dataList = this.dataTotalList; - } + 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) { if (arr.length) { @@ -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 () { + }, }; diff --git a/nezha-fronted/src/components/common/timePicker.vue b/nezha-fronted/src/components/common/timePicker.vue index 0195c9d36..f9eccb1a4 100644 --- a/nezha-fronted/src/components/common/timePicker.vue +++ b/nezha-fronted/src/components/common/timePicker.vue @@ -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'); diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue index 50fdf9a57..26cb7d5d0 100644 --- a/nezha-fronted/src/components/page/dashboard/panel.vue +++ b/nezha-fronted/src/components/page/dashboard/panel.vue @@ -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) { - this.searchTime = [...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"); diff --git a/nezha-fronted/src/libs/bus.js b/nezha-fronted/src/libs/bus.js index c79d85133..ae90b7a3c 100644 --- a/nezha-fronted/src/libs/bus.js +++ b/nezha-fronted/src/libs/bus.js @@ -266,7 +266,22 @@ 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();