CN-356 fix: 修复panel-chart时间选择器问题

src/views/charts/Chart.vue

@@ -6,6 +6,7 @@
       <chart-tabs
         v-if="isTabs"
         :chart-info="chartInfo"
+        :time-filter="timeFilter"
         :query-params="queryParams"
         :entity="entity"
       ></chart-tabs>
@@ -14,6 +15,7 @@
         v-else-if="isMap && !isIpBasicInfo"
         :chart-info="chartInfo"
         :chart-data="chartData"
+        :time-filter="timeFilter"
         :query-params="queryParams"
         :entity="entity"
         @getChartData="getChartData"
@@ -24,14 +26,16 @@
         v-else-if="isSingleValue"
         :chart-info="chartInfo"
         :chart-data="chartData"
+        :time-filter="timeFilter"
         :query-params="queryParams"
         @showLoading="showLoading"
       ></chart-single-value>
 
       <chart-block
-        v-else-if="isBlock"
         ref="chart"
-        :timeFilter="queryParams"
+        v-else-if="isBlock"
+        :time-filter="timeFilter"
+        :query-params="queryParams"
         :chart-info="chartInfo"
         :chart-data="chartData"
         :entity="entity"
@@ -39,7 +43,8 @@
 
       <chart-group
         v-else-if="isGroup"
-        :timeFilter="queryParams"
+        :query-params="queryParams"
+        :time-filter="timeFilter"
         :chart-info="chartInfo"
         :chart-data="chartData"
         :entity="entity"
@@ -47,6 +52,8 @@
 
       <ip-basic-info
         v-else-if="isIpBasicInfo"
+        :time-filter="timeFilter"
+        :query-params="queryParams"
         :chart-info="chartInfo"
         :chart-data="chartData"
         :entity="entity"
@@ -57,6 +64,7 @@
         :chart-info="chartInfo"
         :chart-data="chartData"
         :result-type="resultType"
+        :time-filter="timeFilter"
         :query-params="queryParams"
         @showLoading="showLoading"
       ></chart-time-bar>
@@ -66,6 +74,7 @@
         :chart-info="chartInfo"
         :chart-data="chartData"
         :result-type="resultType"
+        :time-filter="timeFilter"
         :query-params="queryParams"
         @showLoading="showLoading"
       ></chart-category-bar>
@@ -75,6 +84,7 @@
         :chart-info="chartInfo"
         :chart-data="chartData"
         :result-type="resultType"
+        :time-filter="timeFilter"
         :query-params="queryParams"
         @showLoading="showLoading"
       ></chart-ip-open-port-bar>
@@ -84,6 +94,7 @@
         :chart-info="chartInfo"
         :chart-data="chartData"
         :table="table"
+        :time-filter="timeFilter"
         :query-params="queryParams"
         @showLoading="showLoading"
       ></chart-table>
@@ -93,6 +104,7 @@
         :chart-info="chartInfo"
         :chart-data="chartData"
         :table="table"
+        :time-filter="timeFilter"
         :query-params="queryParams"
       ></chart-active-ip-table>
 
@@ -100,6 +112,7 @@
         v-else-if="isAppBasicInfo"
         :chart-info="chartInfo"
         :chart-data="chartData"
+        :time-filter="timeFilter"
         :query-params="queryParams"
       ></chart-app-basic-info>
 
@@ -107,6 +120,7 @@
         v-else-if="isDomainWhois"
         :chart-info="chartInfo"
         :chart-data="chartData"
+        :time-filter="timeFilter"
         :query-params="queryParams"
       ></chart-domain-whois>
 
@@ -114,6 +128,7 @@
         v-else-if="isDomainDnsRecord"
         :chart-info="chartInfo"
         :chart-data="chartData"
+        :time-filter="timeFilter"
         :query-params="queryParams"
       ></chart-domain-dns-record>
 
@@ -121,6 +136,7 @@
         v-else-if="isCryptocurrencyEventList"
         :chart-info="chartInfo"
         :chart-data="chartData"
+        :time-filter="timeFilter"
         :query-params="queryParams"
       ></chart-cryptocurrency-event-list>
 
@@ -128,6 +144,7 @@
         v-else-if="isRelationShip"
         :chart-info="chartInfo"
         :chart-data="chartData"
+        :time-filter="timeFilter"
         :query-params="queryParams"
       ></chart-relation-ship>
 
@@ -135,6 +152,7 @@
         v-else-if="isSankey"
         :chart-info="chartInfo"
         :chart-data="chartData"
+        :time-filter="timeFilter"
         :query-params="queryParams"
         :entity="entity"
       ></chart-san-key>
@@ -144,6 +162,8 @@
         :chart-info="chartInfo"
         :chart-data="chartData"
         :result-type="resultType"
+        :time-filter="timeFilter"
+        :query-params="queryParams"
         @showLoading="showLoading"
       ></chart-echart>
 
@@ -152,6 +172,8 @@
         :chart-info="chartInfo"
         :chart-data="chartData"
         :result-type="resultType"
+        :time-filter="timeFilter"
+        :query-params="queryParams"
         @showLoading="showLoading"
       ></chart-echart-with-statistics>
 
@@ -160,6 +182,7 @@
         :chart-info="chartInfo"
         :chart-data="chartData"
         :query-params="queryParams"
+        :time-filter="timeFilter"
         :result-type="resultType"
         :order-pie-table="orderPieTable"
         @showLoading="showLoading"
@@ -167,8 +190,10 @@
 
       <chart-echart-ip-hosted-domain
         v-else-if="isIpHostedDomain"
-        :chart-info="chartInfo"
         :chart-data="chartData"
+        :chart-info="chartInfo"
+        :time-filter="timeFilter"
+        :query-params="queryParams"
         @showLoading="showLoading"
         :entity="entity"
       ></chart-echart-ip-hosted-domain>
@@ -179,6 +204,8 @@
         :chart-data="chartData"
         @showLoading="showLoading"
         :entity="entity"
+        :time-filter="timeFilter"
+        :query-params="queryParams"
       ></chart-echart-app-relate-domain>
 
       <chart-one-Situation-Statistics
@@ -186,14 +213,16 @@
         :chart-info="chartInfo"
         :chart-data="chartData"
         :query-params="queryParams"
-        @showLoading="showLoading"
+        :time-filter="timeFilter"
         :entity="entity"
+        @showLoading="showLoading"
       ></chart-one-Situation-Statistics>
 
       <chart-two-Situation-Statistics
         v-else-if="isTwoSupportStatistics"
         :chart-info="chartInfo"
         :chart-data="chartData"
+        :time-filter="timeFilter"
         :query-params="queryParams"
         @showLoading="showLoading"
         :entity="entity"
@@ -203,6 +232,7 @@
         v-else-if="isAlarmInfo"
         :chart-info="chartInfo"
         :chart-data="chartData"
+        :time-filter="timeFilter"
         :query-params="queryParams"
         @showLoading="showLoading"
         :tabHandleClickType="tabHandleClickType"
@@ -212,6 +242,8 @@
       </chart-alarm-info>
       <chart-domain-recursive-resolve
         :chart-data="chartData"
+        :time-filter="timeFilter"
+        :query-params="queryParams"
         v-else-if="isDomainRecursiveResolve"
       ></chart-domain-recursive-resolve>
 
@@ -337,8 +369,9 @@ export default {
     entity: Object,
     isError: Boolean,
     table: Object,
+    timeFilter: Object,
     orderPieTable: Object,
-    tabHandleClickType: String,
+    tabHandleClickType: String
   },
   computed: {
     isNoData() {
@@ -389,19 +422,12 @@ export default {
     },
   },
   watch: {
-    chartData: {
-      deep: true,
-      handler(n) {},
-    },
     tabHandleClickType: {
       deep: true,
       handler(n) {
         this.tabHandleClickType = n
       },
-    },
+    }
-    queryParams: {
-      deep: true,
-    },
   },
   setup(props) {
     return {

src/views/charts/ChartHeader.vue

@@ -311,11 +311,12 @@ export default {
       this.$emit('refresh')
     },
     timeRefreshChange() {
+      // 不是自选时间
       if (!this.$refs.dateTimeRange.isCustom) {
         const value = this.chartTimeFilter.dateRangeValue
         this.$refs.dateTimeRange.quickChange(value)
       } else {
-        this.$emit('refresh')
+        this.$emit('refresh', this.chartTimeFilter)
       }
     },
     reload(s, e, v) {
@@ -326,7 +327,6 @@ export default {
     },
     dateTimeRangeChange(s, e, v) {
       this.chartTimeFilter = { startTime: s, endTime: e, dateRangeValue: v }
-      console.log(this.chartTimeFilter)
       this.$emit('refresh', this.chartTimeFilter)
     },
     tableLimitChange() {

src/views/charts/Panel.vue

@@ -146,6 +146,7 @@ export default {
       callback({ startTime: myStartTime, endTime: myEndTime })
     },
     timeRefreshChange () {
+      // 不是自选时间
       if (!this.$refs.dateTimeRange.isCustom) {
         const value = this.timeFilter.dateRangeValue
         this.$refs.dateTimeRange.quickChange(value)

src/views/charts/PanelChart.vue

@@ -38,6 +38,7 @@
         :table="table"
         :is-fullscreen="isFullscreen"
         :order-pie-table="orderPieTable"
+        :time-filter="timeFilter"
         @getChartData="getChartData"
         @showLoading="showLoading"
         :tabHandleClickType="tabHandleClickType"
@@ -191,7 +192,7 @@ export default {
           ...this.handleQueryParams(),
           ...this.queryTimeRange,
           ...this.entity,
-          
+
           ...extraParams
         }
         const requestUrl = url || (chartParams && chartParams.url)
@@ -288,13 +289,20 @@ export default {
       this.$refs.chart.resize()
     },
     refresh (chartTimeFilter) {
-      const myEndTime = window.$dayJs.tz().valueOf()
+      if (chartTimeFilter) {
-      const myStartTime = myEndTime - this.chartTimeFilter.dateRangeValue * 60 * 1000
+        this.timeFilter.startTime = chartTimeFilter.startTime
-      this.standaloneTimeRange.use = true
+        this.timeFilter.endTime = chartTimeFilter.endTime
-      this.standaloneTimeRange.startTime = myStartTime
+        this.timeFilter.dateRangeValue = chartTimeFilter.dateRangeValue
-      this.standaloneTimeRange.endTime = myEndTime
+        this.getChartData(null, {}, true, chartTimeFilter)
-      this.emitter.emit('chart-pageNo')
+      } else {
-      this.getChartData(null, {}, true, chartTimeFilter)
+        const myEndTime = window.$dayJs.tz().valueOf()
+        const myStartTime = myEndTime - this.timeFilter.dateRangeValue * 60 * 1000
+        this.standaloneTimeRange.use = true
+        this.standaloneTimeRange.startTime = myStartTime
+        this.standaloneTimeRange.endTime = myEndTime
+        this.emitter.emit('chart-pageNo')
+        this.getChartData(null, {}, true)
+      }
     },
     tabHandleClick (value) {
       this.tabHandleClickType = value
@@ -371,9 +379,6 @@ export default {
   mounted () {
     this.showLoading(true)
     this.getChartData()
-    // setTimeout(() => {
-    //   this.getChartData()
-    // }, 200)
   },
   setup (props) {
     const dateRangeValue = 60

src/views/charts/charts/ChartBlock.vue

@@ -14,9 +14,6 @@ import chartMixin from '@/views/charts/charts/chart-mixin'
 export default {
   name: 'ChartBlock',
   mixins: [chartMixin],
-  props: {
-    timeFilter: Object
-  },
   data () {
     return {
       dataList: [],
@@ -26,14 +23,11 @@ export default {
   },
   mounted () {
     this.dataList = JSON.parse(JSON.stringify(this.chartInfo.children))
-    // this.time = JSON.parse(JSON.stringify(this.timeFilter))
     this.firstShow = true
   },
   methods: {
     reload () {
-      console.log(123132)
       this.dataList = JSON.parse(JSON.stringify(this.chartInfo.children))
-      // this.time = JSON.parse(JSON.stringify(this.timeFilter))
     }
   }
 }

src/views/charts/charts/ChartGroup.vue

@@ -1,6 +1,7 @@
 <template>
   <panel-chart-list
       :time-filter="timeFilter"
+      :query-params="queryParams"
       :data-list="chartInfo.children"
       :panel-lock="true"
       :entity="entity"
@@ -15,10 +16,8 @@ export default {
   name: 'ChartGroup',
   mixins: [chartMixin],
   props: {
-    timeFilter: Object
+    timeFilter: Object,
-  },
+    queryParams: Object
-  mounted () {
-    console.info(this.chartInfo)
   }
 }
 </script>

src/views/charts/charts/chart-mixin.js

@@ -3,6 +3,7 @@ export default {
     chartInfo: Object,
     chartData: [Object, Array, String], // 数据在父组件查询后传入，本组件内不查询，只根据接传递的数据来渲染
     entity: Object,
+    timeFilter: Object,
     queryParams: Object // 接口请求参数
   }
 }