feat：优化懒加载事件，添加router的path显示

2021-12-21 19:19:35 +08:00
parent 08a177c9ed
commit c1c5b9541b
11 changed files with 71 additions and 19 deletions
--- a/nezha-fronted/src/components/chart/chart.vue
+++ b/nezha-fronted/src/components/chart/chart.vue
@@ -150,6 +150,7 @@
      <chart-group
        :ref="'chart' + chartInfo.id"
        :from="from"
+        :filter="filter"
        v-if="isGroup(chartInfo.type)"
        :panelLock="panelLock"
        :chart-data="chartData"
@@ -220,7 +221,8 @@ export default {
    loading: Boolean,
    panelLock: Boolean,
    from: String,
-    isError: Boolean
+    isError: Boolean,
+    filter: {}
  },
  data () {
    return {
--- a/nezha-fronted/src/components/chart/chart/chartBar.vue
+++ b/nezha-fronted/src/components/chart/chart/chartBar.vue
@@ -77,15 +77,18 @@ export default {
    }
  },
  methods: {
-    initChart (chartOption) {
+    initChart (chartOption = this.chartOption) {
      const self = this
      this.legends = []
      chartOption.series = this.initBarData(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
-      chartOption.xAxis.data = chartOption.series.data.map(item => item.name)
+      if (this.isNoData) {
+        return
+      }
+      chartOption.xAxis.data = chartOption.series[0].data.map(item => item.name)
      chartOption.axisLabel = {
        margin: 8,
        formatter (params) {
-          const dataLength = chartOption.series.data.length || 1
+          const dataLength = chartOption.series[0].data.length || 1
          const chartWidth = (document.getElementById('chart-canvas-' + self.chartInfo.id).offsetWidth - 80) / dataLength// 容器宽 - padding - 空余
          const length = Math.ceil((chartWidth) / 16)
          let val = ''
@@ -143,7 +146,7 @@ export default {
        })
      })
      this.$emit('chartIsNoData', this.isNoData)
-      return s
+      return [s]
    },
    formatterFunc (params, ticket, callback) {
      const self = this
--- a/nezha-fronted/src/components/chart/chart/chartGroup.vue
+++ b/nezha-fronted/src/components/chart/chart/chartGroup.vue
@@ -25,7 +25,8 @@ export default {
  name: 'chart-group',
  props: {
    panelLock: Boolean,
-    from: String
+    from: String,
+    filter: {}
  },
  mixins: [chartMixin, chartFormat],
  computed: {
@@ -52,7 +53,7 @@ export default {
      this.dataList = this.dataList.map(item => {
        return {
          ...item,
-          hide: item.name.indexOf(this.filter.searchName) === -1, // 搜索条件
+          // hide: item.name.indexOf(this.filter.searchName) === -1, // 搜索条件
          loaded: true
        }
      })
@@ -67,7 +68,7 @@ export default {
          this.dataList = arr.map(item => {
            return {
              ...item,
-              hide: item.name.indexOf(this.filter.searchName) === -1, // 搜索条件
+              // hide: item.name.indexOf(this.filter.searchName) === -1, // 搜索条件
              loaded: false
            }
          })
--- a/nezha-fronted/src/components/chart/chart/chartPie.vue
+++ b/nezha-fronted/src/components/chart/chart/chartPie.vue
@@ -77,9 +77,13 @@ export default {
    }
  },
  methods: {
-    initChart (chartOption) {
+    initChart (chartOption = this.chartOption) {
+      console.log(123123,chartOption,this.chartOption)
      this.legends = []
      chartOption.series = this.initPieData(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
+      if (this.isNoData) {
+        return
+      }
      // chartOption.series.label.formatter = this.pieFormatterLabel
      chartOption.tooltip.formatter = this.formatterFunc
      /* 使用setTimeout延迟渲染图表，避免样式错乱 */
@@ -93,6 +97,7 @@ export default {
    initPieData (chartInfo, seriesTemplate, originalDatas) {
      let colorIndex = 0
      const s = lodash.cloneDeep(seriesTemplate)
+      console.log(s)
      s.data = []
      originalDatas.forEach((originalData, expressionIndex) => {
        originalData.forEach((data, dataIndex) => {
@@ -123,7 +128,7 @@ export default {
        })
      })
      this.$emit('chartIsNoData', this.isNoData)
-      return s
+      return [s]
    },
    formatterFunc: function (params, ticket, callback) {
      const self = this
--- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
@@ -64,7 +64,7 @@ export default {
    }
  },
  methods: {
-    initChart (chartOption) {
+    initChart (chartOption = this.chartOption) {
      this.legends = []
      chartOption.series = this.handleTimeSeries(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends

--- a/nezha-fronted/src/components/chart/chart/chartTreemap.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTreemap.vue
@@ -77,7 +77,7 @@ export default {
    }
  },
  methods: {
-    initChart (chartOption) {
+    initChart (chartOption = this.chartOption) {
      this.legends = []
      chartOption.series[0] = this.initTreeMapData(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
      chartOption.tooltip.formatter = this.formatterFunc
--- a/nezha-fronted/src/components/chart/chartList.vue
+++ b/nezha-fronted/src/components/chart/chartList.vue
@@ -74,6 +74,7 @@
        :ref="'chart-fullscreen' + fullscreen.chartInfo.id"
        :chart-info="fullscreen.chartInfo"
        :from="from"
+        :filter="filter"
        :is-fullscreen="true"
        @groupShow="groupShow"
        :panelLock="panelLock"
--- a/nezha-fronted/src/components/chart/chartMixin.js
+++ b/nezha-fronted/src/components/chart/chartMixin.js
@@ -245,7 +245,7 @@ export default {
      deep: true,
      handler (n) {
        if (n) {
-          this.initChart(this.chartOption)
+          this.initChart && this.initChart(this.chartOption)
        }
      }
    }
--- 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)"  v-loading="loading">
+  <div :class="{'panel-chart--fullscreen': isFullscreen}" class="panel-chart" :id="isFullscreen ? ('chart-screen-' + chartInfo.id ) : ('chart-local-' + chartInfo.id)">
    <!-- title和工具栏，支持浮动 -->
    <chart-header
      v-if="!isFullscreen"
@@ -20,6 +20,7 @@
      :chart-data="chartData"
      :chart-info="chartInfo"
      :panelLock="panelLock"
+      :filter="filter"
      :from="from"
      :isError="isError"
      :loading="loading"
@@ -51,7 +52,8 @@ export default {
    isFullscreen: Boolean,
    panelLock: Boolean,
    chartDetailInfo: Object,
-    from: String
+    from: String,
+    filter: {}
  },
  data () {
    return {
--- a/nezha-fronted/src/components/common/mixin/routerPathParams.js
+++ b/nezha-fronted/src/components/common/mixin/routerPathParams.js
@@ -0,0 +1,31 @@
+import lodash from 'lodash'
+export default {
+  methods: {
+  // 解析请求参数，初始化 searchLabel
+    initQueryFromPath () {
+      const q = this.$route.query
+      const searchKeys = {
+      // key: path 键
+      // value: vue set 参数
+        pageNo: { target: this.pageObj, propertyName: 'pageNo', type: 'number' },
+        pageSize: { target: this.pageObj, propertyName: 'pageSize', type: 'number' },
+        orderBy: { target: this.$data, propertyName: 'orderBy', type: 'string' },
+        id: { target: this.searchLabel, propertyName: 'id', type: 'number' },
+        severityIds: { target: this.searchLabel, propertyName: 'severityIds', type: 'string' },
+        type: { target: this.searchLabel, propertyName: 'type', type: 'number' },
+        name: { target: this.searchLabel, propertyName: 'name', type: 'string' }
+      }
+      lodash.forIn(searchKeys, (val, key) => {
+        let qv = lodash.get(q, key)
+        if (qv && val.type == 'number') {
+          qv = lodash.toNumber(qv)
+        }
+        qv && this.$set(val.target, val.propertyName, qv)
+      })
+    },
+    // 更新path，包含请求参数
+    updatePath (param) {
+      this.$router.replace({ path: this.fromRoute.alertRule, query: param }).catch(err => {})
+    }
+  }
+}
--- a/nezha-fronted/src/components/page/alert/alertRule.vue
+++ b/nezha-fronted/src/components/page/alert/alertRule.vue
@@ -135,7 +135,7 @@
      <alert-rule-box v-if="rightBox.show" ref="alertConfigBox" :alert-rule="object" @close="closeRightBox"></alert-rule-box>
    </transition>
    <transition name="right-box"><alert-silence-box v-if='silenceBoxShow' :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box>
-</transition>
+    </transition>
  </div>
 </template>
 <script>
@@ -152,6 +152,7 @@ import nzDetailView from '@/components/common/detailView/nzDetailView'
 import detailViewMixin from '@/components/common/mixin/detailViewMixin'
 import alertRuleDetail from '@/components/common/detailView/list/alertRule/alertRuleDetail'
 import detailViewTopSearch from '@/components/common/detailView/detailViewTopSearch'
+import routerPathParams from '@/components/common/mixin/routerPathParams'

 export default {
  name: 'alertRule',
@@ -167,11 +168,13 @@ export default {
    alertRuleDetail,
    detailViewTopSearch
  },
-  mixins: [dataListMixin, detailViewMixin],
+  mixins: [dataListMixin, detailViewMixin, routerPathParams],
  data () {
    return {
      url: 'alert/rule',
      tableId: 'alertRuleTable', // 需要分页的table的id，用于记录每页数量
+      orderBy: 'id',
+      searchLabel: {},
      blankObject: {
        id: '',
        alertName: '',
@@ -262,6 +265,7 @@ export default {
      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
      this.tools.loading = true
+      this.updatePath(this.searchLabel)
      this.$get(this.url, this.searchLabel).then(response => {
        this.tools.loading = false
        if (response.code === 200) {
@@ -327,6 +331,9 @@ export default {
      this.edit(u, true)
    }
  },
+  created () {
+    this.initQueryFromPath()
+  },
  mounted () {
  },
  watch: {