Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev

src/views/charts2/Chart.vue

@@ -6,6 +6,7 @@
         v-if="chart.type === typeMapping.networkOverview.line"
         :chart="chart"
         :time-filter="timeFilter"
+        ref="networkLine"
     ></network-overview-line>
     <network-overview-ddos-detection
         v-else-if="chart.type === typeMapping.networkOverview.ddosDetection"
@@ -17,9 +18,12 @@
         :chart="chart"
         :time-filter="timeFilter"
     ></network-overview-performance-event>
-    <network-overview-tabs
+    <network-overview-tabs @getChartData="getChartData"
          v-else-if="chart.type === typeMapping.networkOverview.table"
          :time-filter="timeFilter"
+         :chart="chart"
+         :chartData="chartData"
+         :ref="`tab${chart.id}`"
     ></network-overview-tabs>
     <network-overview-apps
         v-else-if="chart.type === typeMapping.networkOverview.appList"
@@ -87,6 +91,9 @@ import NpmLine from '@/views/charts2/charts/NpmLine'
 import NpmEventsByType from '@/views/charts2/charts/NpmEventsByType'
 import NpmRecentEvents from '@/views/charts2/charts/NpmRecentEvents'
 import NpmEventsHeader from '@/views/charts2/charts/NpmEventsHeader'
+import { get } from '@/utils/http'
+import { getNowTime, getSecond } from '@/utils/date-util'
+import { ref } from 'vue'
 export default {
   name: 'Chart',
   components: {
@@ -115,12 +122,91 @@ export default {
     return {
       typeMapping,
       loading: false,
-      isNoData: false
+      isNoData: false,
+      chartData: null,
+      queryParams: {}
+    }
+  },
+  mounted () {
+    this.getChartData()
+  },
+  setup (props) {
+    const dateRangeValue = 60
+    const { startTime, endTime } = getNowTime(dateRangeValue)
+    const chartTimeFilter = ref({ startTime, endTime, dateRangeValue })
+    const table = ref({})
+    return {
+      table,
+      chartTimeFilter
     }
   },
   methods: {
     npmTabChange (index) {
       this.$emit('npmTabChange', index)
+    },
+    reload () {
+      this.getChartData()
+    },
+    /* 参数 extraParams 额外请求参数 */
+    getChartData (url, extraParams = {}, chartTimeFilter) {
+      try {
+        if (chartTimeFilter) {
+          // 图表自带timeFilter刷新时
+          this.queryTimeRange = {
+            startTime: getSecond(chartTimeFilter.startTime),
+            endTime: getSecond(chartTimeFilter.endTime)
+          }
+        } else if (this.timeFilter) {
+          this.queryTimeRange = {
+            startTime: getSecond(this.timeFilter.startTime),
+            endTime: getSecond(this.timeFilter.endTime)
+          }
+        } else {
+          this.queryTimeRange = {
+            startTime: getSecond(this.chartTimeFilter.startTime),
+            endTime: getSecond(this.chartTimeFilter.endTime)
+          }
+        }
+        const chartParams = this.chart.params
+        // 接口查询参数
+        this.queryParams = {
+          ...this.queryTimeRange,
+          ...extraParams
+        }
+        let requestUrl = url
+
+        if (this.chart.type === 601) {
+          const chartObj = this.$refs['tab' + this.chart.id]
+          requestUrl = url || chartObj.getCurUrl()
+          this.queryParams = {
+            ...chartObj.handleQueryParams(extraParams),
+            ...this.queryTimeRange
+          }
+        }
+        if (requestUrl) {
+          get(requestUrl, this.queryParams).then(response => {
+            if (response.code === 200) {
+              this.chartData = response.data.result
+            } else {
+              if (this.chart.type === 601) {
+                this.$refs['tab' + this.chart.id].loading = false
+              }
+            }
+          })
+        }
+      } catch (e) {
+        console.error(e)
+      }
+    },
+    resizeLine () {
+      this.$nextTick(function () {
+        setTimeout(() => {
+          console.log(this.$refs)
+          if (this.$refs.networkLine) {
+            this.$refs.networkLine.resize()
+          }
+        }, 250)
+      })
     }
   }
 }

src/views/charts2/ChartList.vue

@@ -23,6 +23,7 @@
             :time-filter="timeFilter"
             :extra-params="extraParams"
             :id="item.id"
+            ref="chartGrid"
             @npmTabChange="npmTabChange"
             :chart="item"
         ></chart>
@@ -35,7 +36,7 @@
 import VueGridLayout from 'vue-grid-layout'
 import _ from 'lodash'
 import Chart from '@/views/charts2/Chart'
-import {panelTypeAndRouteMapping, storageKey} from '@/utils/constants'
+import { panelTypeAndRouteMapping, storageKey } from '@/utils/constants'
 import { typeMapping } from '@/views/charts2/chart-tools'
 export default {
   name: 'ChartList',
@@ -90,6 +91,10 @@ export default {
   methods: {
     npmTabChange (index) {
       this.npmTabIndex = parseInt(index)
+    },
+    resizeLine () {
+      console.log(this.$refs)
+      this.$refs.chartGrid.resizeLine()
     }
   }
 }

src/views/charts2/Panel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="panel-box">
     <div class="panel__header">
-      <div class="panel__title">{{panel.i18n ? $t(panel.i18n) : panel.name}}</div>
+      <div class="panel__title">{{panelName?panelName:(panel.i18n ? $t(panel.i18n) : panel.name)}}</div>
       <div class="panel__time">
         <date-time-range
             class="date-time-range"
@@ -38,7 +38,6 @@ import { getPanelList, getChartList } from '@/utils/api'
 import { getNowTime } from '@/utils/date-util'
 import { getTypeCategory } from '@/views/charts/charts/tools'
 import ChartList from '@/views/charts2/ChartList'
-import { typeMapping } from '@/views/charts2/chart-tools'
 
 export default {
   name: 'Panel',
@@ -53,10 +52,12 @@ export default {
     return {
       chartList: [], // 普通panel的chart
       panelLock: true,
-      extraParams: {}
+      extraParams: {},
+      panelName: ''
     }
   },
   async mounted () {
+    this.panelName = this.$store.getters.getPanelName
     await this.init()
     const vm = this
     this.emitter.on('reloadChartList', async function () {
@@ -107,6 +108,16 @@ export default {
           this.initChartAttr(chart)
           return chart
         })
+
+        if (this.$store.getters.getBreadcrumbColumnName || this.$store.getters.getBreadcrumbColumnValue) { // networkOverview页面
+          const list = this.chartList.filter(item => {
+            return (item.type === 102 || item.type === 601)
+          })
+          list.forEach(item => {
+            item.w = 24
+          })
+          this.chartList = ref(list)
+        }
       }
     },
     initChartAttr (chart) {