feat： 添加 panel的懒加载

nezha-fronted/src/components/chart/chart.vue

@@ -265,7 +265,6 @@ export default {
     }
   },
   mounted () {
-    console.log(this.chartInfo.type)
   }
 }
 </script>

nezha-fronted/src/components/chart/chart/chartBar.vue

@@ -168,7 +168,7 @@ export default {
     try {
       this.isStack = this.chartInfo.param.stack
     } catch (e) {}
-    this.initChart(this.chartOption)
+    this.chartInfo.loaded && this.initChart(this.chartOption)
   }
 }
 </script>

nezha-fronted/src/components/chart/chart/chartDiagram.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-diagram">
+  <div class="chart-diagram" v-if="chartInfo.loaded">
     <diagram
       style="height: 100%;width: 100%"
       :topoData="chartInfo.param.topo"

nezha-fronted/src/components/chart/chart/chartGauge.vue

@@ -3,7 +3,7 @@
     <div
       v-for="(item,index) in gaugeData" :key="index"
       class="chart-gauge-item"
-      :id="'chart-gauge-' + chartInfo.id + '-' + index"
+      :id="this.isFullscreen?('chart-gauge-screen-' + chartInfo.id + '-' + index):('chart-gauge-' + chartInfo.id + '-' + index)"
       :style="{height:item.height+'px',width:item.width + 'px'}"
     >
 <!--      :style="{background:item.mapping ? item.mapping.color.bac : false,height:item.height+'px',width:item.width + 'px'}"-->
@@ -156,7 +156,8 @@ export default {
       this.chartInstances = []
       const self = this
       this.gaugeData.forEach((item, index) => {
-        const myChart = echarts.init(document.getElementById('chart-gauge-' + this.chartInfo.id + '-' + index))
+        const chartId = this.isFullScreen ? 'chart-gauge-screen-' : 'chart-gauge-'
+        const myChart = echarts.init(document.getElementById(chartId + this.chartInfo.id + '-' + index))
         const option = lodash.cloneDeep(this.chartOption)
         option.tooltip = {}
         option.series[0].data.push(item)
@@ -166,7 +167,6 @@ export default {
           fontWeight: 'bolder',
           formatter: (params) => {
             let showValue = chartDataFormat.getUnit(self.chartInfo.unit ? self.chartInfo.unit : 2).compute(params, null, -1, 2).trim()
-            console.log(showValue)
             if (item.mapping) {
               showValue = self.handleDisplay(item.mapping.display, { ...item.label, value: showValue })
             }
@@ -222,7 +222,7 @@ export default {
   mounted () {
     this.chartOption.color || (this.chartOption.color = initColor(20))
     this.colorList = this.chartOption.color
-    this.initChart()
+    this.chartInfo.loaded && this.initChart()
     console.log(this.isFullscreen , 'isFullscreen')
   },
   beforeDestroy () {

nezha-fronted/src/components/chart/chart/chartGroup.vue

@@ -47,6 +47,15 @@ export default {
   methods: {
     refreshTime () {
 
+    },
+    initChart () {
+      this.dataList = this.dataList.map(item => {
+        return {
+          ...item,
+          hide: item.name.indexOf(this.filter.searchName) === -1, // 搜索条件
+          loaded: true
+        }
+      })
     }
   },
   watch: {
@@ -54,7 +63,14 @@ export default {
       immediate: true,
       handler (n) {
         this.$nextTick(() => {
-          this.dataList = JSON.parse(JSON.stringify(n))
+          const arr = JSON.parse(JSON.stringify(n))
+          this.dataList = arr.map(item => {
+            return {
+              ...item,
+              hide: item.name.indexOf(this.filter.searchName) === -1, // 搜索条件
+              loaded: false
+            }
+          })
         })
       }
     }

nezha-fronted/src/components/chart/chart/chartLog.vue

@@ -277,7 +277,7 @@ export default {
     }
   },
   mounted () {
-    this.initChart()
+    this.chartInfo.loaded && this.initChart()
   },
   watch: {
     chartData: {

nezha-fronted/src/components/chart/chart/chartMap.vue

@@ -38,9 +38,12 @@ export default {
     }
   },
   mounted () {
-    this.initMap()
+    this.chartInfo.loaded && this.initChart()
   },
   methods: {
+    initChart () {
+      this.initMap()
+    },
     initMap () {
       if (this.timer) {
         clearTimeout(this.timer)
@@ -72,7 +75,6 @@ export default {
               this.map.remove()
               this.map = null
             }
-            console.log(1212)
             const mapId = document.getElementById('map' + this.chartInfo.id)
             const map = L.map(mapId, {
               minZoom: mapConfig.minZoom,

nezha-fronted/src/components/chart/chart/chartPie.vue

@@ -151,7 +151,7 @@ export default {
     try {
       this.isStack = this.chartInfo.param.stack
     } catch (e) {}
-    this.initChart(this.chartOption)
+    this.chartInfo.loaded &&  this.initChart(this.chartOption)
   }
 }
 </script>

nezha-fronted/src/components/chart/chart/chartStat.vue

@@ -46,6 +46,9 @@ export default {
   methods: {
     initChart () {
       this.initStatData(this.chartInfo, this.chartData).then(() => {
+        if (this.isNoData) {
+          return
+        }
         this.getLayout().then(layout => {
           this.renderStat(layout)
         })
@@ -54,7 +57,6 @@ export default {
     initStatData (chartInfo, originalDatas) {
       return new Promise(resolve => {
         let colorIndex = 0
-        console.log(originalDatas)
         originalDatas.forEach((originalData, expressionIndex) => {
           originalData.forEach((data, dataIndex) => {
             this.isNoData = false
@@ -137,7 +139,7 @@ export default {
     }
   },
   mounted () {
-    this.initChart()
+    this.chartInfo.loaded && this.initChart()
   }
 }
 </script>

nezha-fronted/src/components/chart/chart/chartTable.vue

@@ -216,7 +216,7 @@ export default {
     }
   },
   mounted () {
-    this.initChart()
+    this.chartInfo.loaded &&  this.initChart()
   }
 }
 </script>

nezha-fronted/src/components/chart/chart/chartTimeSeries.vue

@@ -256,7 +256,7 @@ export default {
     try {
       this.isStack = this.chartInfo.param.stack
     } catch (e) {}
-    this.initChart(this.chartOption)
+    this.chartInfo.loaded && this.initChart(this.chartOption)
   }
 }
 </script>

nezha-fronted/src/components/chart/chart/chartTreemap.vue

@@ -159,7 +159,7 @@ export default {
     try {
       this.isStack = this.chartInfo.param.stack
     } catch (e) {}
-    this.initChart(this.chartOption)
+    this.chartInfo.loaded && this.initChart(this.chartOption)
   }
 }
 </script>

nezha-fronted/src/components/chart/chartHeader.vue

@@ -126,7 +126,6 @@ export default {
       immediate: true,
       handler (n) {
         if (n) {
-          console.log(this.chartData)
           this.errorText = this.chartData.filter(item => item.error).map(item => item.error).join('\n')
         }
       }

nezha-fronted/src/components/chart/chartList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id='`chartList${(isGroup ? "Group" : "") + timestamp}`' class="chart-list" :loading="gridLayoutLoading">
+  <div :id='`chartList${(isGroup ? "Group" : "") + timestamp}`' class="chart-list" :loading="gridLayoutLoading" ref="layoutBox">
     <grid-layout
       ref="layout"
       v-if="gridLayoutShow"
@@ -32,6 +32,7 @@
           'group-hide-header':item.type === 'group' && item.param.collapse,
           'opacityItem': item.static
         }"
+        :ref="'grid-item' + item.id"
         :isResizable = "item.type === 'group' ? false: null"
         dragAllowFrom=".chart-header"
         dragIgnoreFrom=".chart-header__tools"
@@ -268,11 +269,42 @@ export default {
           charts: charts
         }
         // console.log(this.copyDataList)
-        // this.$put('/visual/panel/chart/weights', params).then(() => {
+        this.$put('/visual/panel/chart/weights', params).then(() => {
-        //   const position = getLayoutPosition(this.copyDataList)
+          const position = getLayoutPosition(this.copyDataList)
-        //   this.$store.commit('setChartLastPosition', position)
+          this.$store.commit('setChartLastPosition', position)
-        // })
+        })
       }, 300)
+    },
+    onScroll (scrollTop = 0) {
+      this.$nextTick(() => {
+        this.copyDataList.forEach(item => {
+          if (item.loaded) {
+            return
+          }
+          const dom = this.$refs['grid-item' + item.id][0].$el
+          if (dom) {
+            const itemHeight = dom.offsetHeight
+            // 1.元素距离页面顶部的距离
+            // console.log(dom.style.transform)
+
+            let top = dom.style.transform.split(',')[1]
+            top = top.substring(0, top.length - 2)
+            const mainOffsetTop = top - this.stepWidth + 14// transform: grid组件 通过 tranfrom 控制位置 中间的为y的值 通过截取获得 - 父元素 marginTop的 值。
+            // console.log(mainOffsetTop)
+            // 2.元素的高度
+            const mainHeight = itemHeight // ele.offsetHeight;//itemHeight;
+            // 3.页面滚动的距离
+            const windowScrollTop = scrollTop// document.documentElement.scrollTop || document.body.scrollTop;
+            // 4.浏览器可见区域的高度
+            const windowHeight = (window.innerHeight || document.documentElement.clientHeight) - 50 - 70
+            // console.log(this.$refs['chart' + item.id][0].$el.offsetHeight, scrollTop,'scrollTop',windowHeight,mainOffsetTop + mainHeight / 4,(windowScrollTop + windowHeight))
+            if ((mainOffsetTop + mainHeight / 4) < (windowScrollTop + windowHeight)) {
+              item.loaded = true
+              this.$refs['chart' + item.id][0].getChartData()
+            }
+          }
+        })
+      })
     }
   },
   created () {
@@ -335,6 +367,7 @@ export default {
           this.copyDataList = JSON.parse(JSON.stringify(tempList))
           setTimeout(() => {
             this.gridLayoutShow = true
+            this.onScroll()
           })
           setTimeout(() => {
             this.firstInit = false

nezha-fronted/src/components/chart/chartMixin.js

@@ -38,7 +38,6 @@ export default {
     handleTimeSeries (chartInfo, seriesTemplate, originalDatas) {
       const series = []
       let colorIndex = 0
-      console.log(this.chartData)
       originalDatas.forEach((originalData, expressionIndex) => {
         originalData.forEach((data, dataIndex) => {
           if (colorIndex >= 20 && !this.showAllData) {
@@ -53,7 +52,6 @@ export default {
             if (chartInfo.param.stack) { // 堆叠
               s.stack = 'Total'
             }
-            console.log(chartInfo.param.enable && chartInfo.param.enable.thresholds && !lodash.isEmpty(chartInfo.param.thresholds) && chartInfo.param.thresholds.length)
             if (chartInfo.param.enable && chartInfo.param.enable.thresholds && !lodash.isEmpty(chartInfo.param.thresholds) && chartInfo.param.thresholds.length) { // 阈值
               s.markLine = {
                 symbol: 'circle',
@@ -75,7 +73,6 @@ export default {
           }
         })
       })
-      console.log(this.isNoData)
       this.$emit('chartIsNoData', this.isNoData)
       return series
     },
@@ -191,7 +188,6 @@ export default {
       const boxHeight = size.contentSize[1]
       if (!this.isFullscreen) { // 本地显示
         const chartDom = document.getElementById('chart-local-' + this.chartInfo.id)
-        console.log(point, params, dom, rect, size)
         if (chartDom) {
           if (windowMouse.x < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
             x = pointX + 15
@@ -243,6 +239,15 @@ export default {
           this.initChart(this.chartOption)
         }
       }
+    },
+    'chartInfo.loaded': {
+      immediate: true,
+      deep: true,
+      handler (n) {
+        if (n) {
+          this.initChart(this.chartOption)
+        }
+      }
     }
   },
   mounted () {

nezha-fronted/src/components/chart/panelChart.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- chart外层箱子 -->
-  <div :class="{'panel-chart--fullscreen': isFullscreen}" class="panel-chart" :id="isFullscreen ? ('chart-screen-' + chartInfo.id ) : ('chart-local-' + chartInfo.id)">
+  <div :class="{'panel-chart--fullscreen': isFullscreen}" class="panel-chart" :id="isFullscreen ? ('chart-screen-' + chartInfo.id ) : ('chart-local-' + chartInfo.id)"  v-loading="loading">
     <!-- title和工具栏，支持浮动 -->
     <chart-header
       v-if="!isFullscreen"
@@ -22,8 +22,8 @@
       :panelLock="panelLock"
       :from="from"
       :isError="isError"
-      :is-fullscreen="isFullscreen"
       :loading="loading"
+      :is-fullscreen="isFullscreen"
       v-if="!isGroup(chartInfo.type) || !chartInfo.param.collapse"
     ></chart>
   </div>
@@ -96,7 +96,7 @@ export default {
       endTime = this.$stringTimeParseToUnix(endTime)
 
       const elements = this.chartInfo.elements || []
-      this.query(elements, startTime, endTime, step)
+      this.chartInfo.loaded && this.query(elements, startTime, endTime, step)
     },
     query (elements, startTime, endTime, step) {
       this.isError = false

nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue

@@ -290,8 +290,8 @@ export default {
             this.firstInit = false
           }, 500)
         })
-      }).catch(() => {
+      }).catch((res) => {
-        console.log(123123)
+        console.info(res)
       })
     },
     reload () {

nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue

@@ -208,7 +208,7 @@ export default {
           })
         }
       }).catch(res => {
-        console.log(res)
+        console.info(res)
       })
     },
     selectPanel (panel) {

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -79,9 +79,9 @@
             </div>
           </template>
         </div>
-        <div id="tableList" class="table-list">
+        <div id="tableList" class="table-list" style='overflow-y: unset'>
-          <div id="dashboardScrollbar" ref="dashboardScrollbar" class="table-list-box">
+          <div id="dashboardScrollbar" class="table-list-box">
-            <div class="box-content" v-loading="chartListLoading">
+            <div class="box-content" v-loading="chartListLoading"  ref="dashboardScrollbar" style='overflow-y: auto'>
               <chart-list
                 ref="chartList"
                 name="panel"
@@ -715,7 +715,7 @@ export default {
       this.scrollbarWrap.addEventListener('scroll', bus.debounce(function () {
         _self.showTopBtn = _self.scrollbarWrap.scrollTop > 50
         _self.overScroll10 = _self.scrollbarWrap.scrollTop > 50
-        // _self.$refs.chartList.loadChartData(_self.scrollbarWrap.scrollTop)
+        _self.$refs.chartList.onScroll(_self.scrollbarWrap.scrollTop)
       }, 300))
     },
     focusInput () {