NEZ-3180 fix：Dashboard 页面 query_range 时间参数与上方时间选择器展示不一致

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

@@ -9,7 +9,18 @@
 <!--      :isPanel="true"-->
 <!--      ref="diagram"-->
 <!--      :chartInfo="chartInfo" />-->
-    <meta2dMain ref="diagram" v-if="iconArrayLoad" :showHeader="false" :meta2dId="chartInfo.id + '-' + isFullscreen" :topoData="chartInfo.param.topo" :querysArray="querysArray" :params="{ timeType: 5}" :iconArray="iconArray" :isChart="true"/>
+    <meta2dMain
+      ref="diagram"
+      v-if="iconArrayLoad"
+      :showHeader="false"
+      :meta2dId="chartInfo.id + '-' + isFullscreen"
+      :topoData="chartInfo.param.topo"
+      :querysArray="querysArray"
+      :params="{ timeType: 5}"
+      :timeRange="timeRange"
+      :iconArray="iconArray"
+      :isChart="true"
+    />
   </div>
 </template>
 
@@ -35,7 +46,8 @@ export default {
         querysArray: {},
         currentProject: {},
         params: {}
-      }
+      },
+      timeRange: ['', '']
     }
   },
   created () {
@@ -43,6 +55,10 @@ export default {
       this.iconArray = [...res.data.list]
       this.iconArrayLoad = true
     })
+    const timeRange = this.$lodash.cloneDeep(this.filterTime)
+    timeRange[0] = this.momentStrToTimestamp(timeRange[0])
+    timeRange[1] = this.momentStrToTimestamp(timeRange[1])
+    this.timeRange = timeRange
   },
   mounted () {
     bus.$on('showMeta2dPreview', (params) => {
@@ -53,6 +69,11 @@ export default {
   methods: {
     resize () {
       this.$refs.diagram.resize()
+    },
+    refresh (timeRange) {
+      console.log(timeRange)
+      this.timeRange = timeRange
+      this.reload(true)
     }
   },
   destroyed () {

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

@@ -191,7 +191,11 @@ export default {
         this.minusTime = ''
         this.multipleTime = false
       }
-      this.chartInfo.loaded && this.query(elements, startTime, endTime, step)
+      if (this.chartInfo.type === 'diagram') {
+        this.chartInfo.loaded && this.query(elements, startTime, endTime, step, '', true)
+      } else {
+        this.chartInfo.loaded && this.query(elements, startTime, endTime, step)
+      }
     },
     // 参数 isRefresh 标识是否是刷新操作
     getChartData (isRefresh, params) { // 获取chart的数据前的准备 主要用于处理时间参数
@@ -235,12 +239,12 @@ export default {
       this.variablesHandle()
       const elements = this.chartInfo.elements || []
       if (this.isExportHtml) {
-        this.chartInfo.loaded && this.queryData(elements, startTime, endTime, step, params)
+        this.chartInfo.loaded && this.queryData(elements, startTime, endTime, step, params, isRefresh)
         return
       }
-      this.chartInfo.loaded && this.query(elements, startTime, endTime, step, params)
+      this.chartInfo.loaded && this.query(elements, startTime, endTime, step, params, isRefresh)
     },
-    query (elements, startTime, endTime, step, params) { // 获取chart的数据
+    query (elements, startTime, endTime, step, params, isRefresh) { // 获取chart的数据
       this.isError = false
       this.allDataLength = 0
       // this.chartData = this.chartInfo.chartData
@@ -508,6 +512,12 @@ export default {
               } else {
                 this.chartData = [this.chartInfo.param.topo]
               }
+              if (isRefresh) {
+                let dom = this.$refs.chart.$refs['chart' + this.chartInfo.id]
+                if (dom) {
+                  dom.refresh([startTime, endTime])
+                }
+              }
             }
             if (this.chartInfo.type === 'group') {
               this.chartData = lodash.get(this, 'chartInfo.children', [])

nezha-fronted/src/components/common/mixin/beforeMeta2d.js

@@ -18,7 +18,7 @@ export default {
     chart: {}
   },
   methods: {
-    reload () {
+    reload (isRefresh) {
       if (this.currentProject && this.currentProject.id) {
         this.$get('monitor/project/topo', { projectId: this.currentProject.id }).then(res => {
           if (res.data && res.data.topo) {
@@ -42,21 +42,34 @@ export default {
         const res = {
           data: this.chartInfo.param
         }
-        if (res.data && res.data.topo) {
+        if (isRefresh) {
-          this.topoData = res.data.topo || {}
+          this.$get('/visual/dashboard/chart/' + this.chartInfo.id).then(response => {
-          if (res.data.topo.topo) {
+            res.data = JSON.parse(response.data.param)
-            this.topoData = res.data.topo.topo || {}
+            console.log(res.data)
-          }
+            this.topoInit(res)
-          this.querysArray = res.data.topo.elements || []
+            this.chartInfo.param.topo = res.data.topo
-          this.params = {
+            this.$refs.diagram && this.$refs.diagram.reload()
-            timeType: res.data.topo.timeType || 5
+          })
-          }
         } else {
-          this.topoData = {}
+          this.topoInit(res)
-          this.querysArray = []
+        }
-          this.params = {
+      }
-            timeType: 5
+    },
-          }
+    topoInit (res) {
+      if (res.data && res.data.topo) {
+        this.topoData = res.data.topo || {}
+        if (res.data.topo.topo) {
+          this.topoData = res.data.topo.topo || {}
+        }
+        this.querysArray = res.data.topo.elements || []
+        this.params = {
+          timeType: res.data.topo.timeType || 5
+        }
+      } else {
+        this.topoData = {}
+        this.querysArray = []
+        this.params = {
+          timeType: 5
         }
       }
     }

nezha-fronted/src/components/common/project/meta2d/js/meta2dMainCalc.js

@@ -124,8 +124,12 @@ export default {
     },
     reload () {
       this.position.show = false
-      const endTime = new Date().getTime()
+      let endTime = new Date().getTime()
-      const startTime = endTime - 60 * this.params.timeType * 1000
+      let startTime = endTime - 60 * this.params.timeType * 1000
+      if (this.isChart) {
+        startTime = this.timeRange[0]
+        endTime = this.timeRange[1]
+      }
       this.getQueryValues(this.querysArray, startTime, endTime).then((arr) => {
         this.clacTopoData(this.$lodash.cloneDeep(this.topoData), arr).then((data) => {
           if (!getTopology(this.meta2dId)) {

nezha-fronted/src/components/common/project/meta2d/meta2dMain.vue

@@ -172,7 +172,9 @@ export default {
     paddingTop: {
       type: Number,
       default: 20
-    }
+    },
+    timeRange: {},
+    nowTimeType: {}
   },
   data () {
     return {
@@ -188,8 +190,6 @@ export default {
       },
     }
   },
-  computed: {
-  },
   components: {
     meta2dHeader,
     meta2dProps,