feat：添加 panel的懒加载

2021-12-21 18:05:36 +08:00
parent 8de08a6ead
commit 5da36256c4
19 changed files with 93 additions and 37 deletions
--- a/nezha-fronted/src/components/chart/chart.vue
+++ b/nezha-fronted/src/components/chart/chart.vue
@@ -265,7 +265,6 @@ export default {
    }
  },
  mounted () {
-    console.log(this.chartInfo.type)
  }
 }
 </script>
--- a/nezha-fronted/src/components/chart/chart/chartBar.vue
+++ b/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>
--- a/nezha-fronted/src/components/chart/chart/chartDiagram.vue
+++ b/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"
--- a/nezha-fronted/src/components/chart/chart/chartGauge.vue
+++ b/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 () {
--- a/nezha-fronted/src/components/chart/chart/chartGroup.vue
+++ b/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
+            }
+          })
        })
      }
    }
--- a/nezha-fronted/src/components/chart/chart/chartLog.vue
+++ b/nezha-fronted/src/components/chart/chart/chartLog.vue
@@ -277,7 +277,7 @@ export default {
    }
  },
  mounted () {
-    this.initChart()
+    this.chartInfo.loaded && this.initChart()
  },
  watch: {
    chartData: {
--- a/nezha-fronted/src/components/chart/chart/chartMap.vue
+++ b/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,
--- a/nezha-fronted/src/components/chart/chart/chartPie.vue
+++ b/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>
--- a/nezha-fronted/src/components/chart/chart/chartStat.vue
+++ b/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>
--- a/nezha-fronted/src/components/chart/chart/chartTable.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTable.vue
@@ -216,7 +216,7 @@ export default {
    }
  },
  mounted () {
-    this.initChart()
+    this.chartInfo.loaded &&  this.initChart()
  }
 }
 </script>
--- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
+++ b/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>
--- a/nezha-fronted/src/components/chart/chart/chartTreemap.vue
+++ b/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>
--- a/nezha-fronted/src/components/chart/chartHeader.vue
+++ b/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')
        }
      }
--- a/nezha-fronted/src/components/chart/chartList.vue
+++ b/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(() => {
-        //   const position = getLayoutPosition(this.copyDataList)
-        //   this.$store.commit('setChartLastPosition', position)
-        // })
+        this.$put('/visual/panel/chart/weights', params).then(() => {
+          const position = getLayoutPosition(this.copyDataList)
+          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
--- a/nezha-fronted/src/components/chart/chartMixin.js
+++ b/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 () {
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/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
--- a/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue
+++ b/nezha-fronted/src/components/common/honeycomb/hexagonFigureSvg.vue
@@ -290,8 +290,8 @@ export default {
            this.firstInit = false
          }, 500)
        })
-      }).catch(() => {
-        console.log(123123)
+      }).catch((res) => {
+        console.info(res)
      })
    },
    reload () {
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/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) {
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -79,9 +79,9 @@
            </div>
          </template>
        </div>
-        <div id="tableList" class="table-list">
-          <div id="dashboardScrollbar" ref="dashboardScrollbar" class="table-list-box">
-            <div class="box-content" v-loading="chartListLoading">
+        <div id="tableList" class="table-list" style='overflow-y: unset'>
+          <div id="dashboardScrollbar" class="table-list-box">
+            <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 () {