fix：修改问题

1 panel页面渲染chart时直接显示占好位置，不根据滚动条监测懒加载chart图表。只有当chart 出现在 浏览器窗口后才请求prom接口获取数据。

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.$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.dataList.forEach((item,index) => {
-                this.$refs['editChart'+item.id][0].showLoad(item);//之后要实现
+                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>

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');

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) {
+        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.loadChartData(scrollbarWrap.scrollTop);
-            _self.$refs.chartList.pageDataList(true, _self.showPanel.id);
+          //if (scrollbarWrap.scrollHeight - scrollbarWrap.scrollTop - scrollbarWrap.offsetHeight < 20) {
-          }
+            //_self.$refs.chartList.pageDataList(true, _self.showPanel.id);
-        }
+          //}
-        /*let dom = document.getElementById('tableList');
+        },300);
-        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);
-        }*/
       },
       focusInput:function(){
         let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");

nezha-fronted/src/libs/bus.js

@@ -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();
   },