CN-191 fix: table刷新动画修复、单图表刷新时使用最新时间

2021-10-13 20:01:29 +08:00
parent cc92e5366a
commit 3c492fdad9
3 changed files with 57 additions and 12 deletions
--- a/src/assets/css/chart.scss
+++ b/src/assets/css/chart.scss
@@ -31,6 +31,7 @@
  top: 50px;
  width: 100%;
  background-color: #fefefe;
+  z-index: 1;

  i {
    position: absolute;
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -20,7 +20,15 @@
      :ref="`chart-${chart.id}`"
    >
      <template v-for="chart in tab.children">
-        <chart v-if="activeTab == tab.id" :key="chart.id" :chart="chart" :time-filter="timeFilter" :ref="`chart-${chart.id}`" :entity="entity"></chart>
+        <chart
+            v-if="activeTab == tab.id"
+            :key="chart.id"
+            :chart="chart"
+            :time-filter="timeFilter"
+            :ref="`chart-${chart.id}`"
+            :entity="entity"
+            @getCurrentTimeRange="getCurrentTimeRange"
+        ></chart>
      </template>
    </el-tab-pane>
  </el-tabs>
@@ -552,6 +560,15 @@ export default {
        value: '-',
        icon: ''
      },
+      standaloneTimeRange: { // 单个图表刷新时，重新获取时间范围，且不影响到其他图
+        use: false,
+        startTime: '',
+        endTime: ''
+      },
+      queryTimeRange: { // 实际查询接口时使用的时间
+        startTime: '',
+        endTime: ''
+      },
      activeTab: '',
      groupData: '', // group类型的查询数据，用于传递给子chart，子chart通过params.dataKey取值
      detailData: '', // 详情类型图表的数据
@@ -573,6 +590,9 @@ export default {
  methods: {
    initChart () {
      this.loading = true
+      this.queryTimeRange = this.standaloneTimeRange.use
+        ? { startTime: parseInt(this.standaloneTimeRange.startTime / 1000), endTime: parseInt(this.standaloneTimeRange.endTime / 1000) }
+        : { startTime: parseInt(this.timeFilter.startTime / 1000), endTime: parseInt(this.timeFilter.endTime / 1000) }
      try {
        const chartParams = this.chartInfo.params
        if (this.isMap) {
@@ -630,7 +650,7 @@ export default {
                }
                resolve(result)
              } else {
-                const queryParams = { startTime: parseInt(this.timeFilter.startTime / 1000), endTime: parseInt(this.timeFilter.endTime / 1000), ...this.entity }
+                const queryParams = { ...this.queryTimeRange, ...this.entity }
                get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
                  if (response.code === 200) {
                    result = response.data.result
@@ -707,7 +727,7 @@ export default {
          }
        } else if (this.isGroup) {
          if (chartParams && chartParams.url) {
-            const queryParams = { startTime: parseInt(this.timeFilter.startTime / 1000), endTime: parseInt(this.timeFilter.endTime / 1000), ...this.entity }
+            const queryParams = { ...this.queryTimeRange, ...this.entity }
            get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
              if (response.code === 200) {
                this.groupData = response.data.result
@@ -801,7 +821,7 @@ export default {
    },
    loadMap (polygonSeries) {
      const chartParams = this.chartInfo.params
-      const queryParams = { startTime: parseInt(this.timeFilter.startTime / 1000), endTime: parseInt(this.timeFilter.endTime / 1000), country: '', region: '', ...this.entity } // 统计数据的查询参数
+      const queryParams = { ...this.queryTimeRange, country: '', region: '', ...this.entity } // 统计数据的查询参数
      get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
        if (response.code === 200 && !this.$_.isEmpty(response.data.result)) {
          const data = response.data.result
@@ -949,7 +969,17 @@ export default {
      return this.$_.slice(tableData, (pageNum - 1) * pageSize, pageNum * pageSize)
    },
    refresh () {
+      this.$emit('getCurrentTimeRange', ({ startTime, endTime }) => {
+        this.standaloneTimeRange.use = true
+        this.standaloneTimeRange.startTime = startTime
+        this.standaloneTimeRange.endTime = endTime
        this.initChart()
+      })
+    },
+    getCurrentTimeRange (callback) {
+      this.$emit('getCurrentTimeRange', ({ startTime, endTime }) => {
+        callback({ startTime, endTime })
+      })
    },
    getDataKey (r) {
      let key = ''
@@ -1035,7 +1065,7 @@ export default {
      if (chartParams.showLegend === false) {
        this.chartOption.legend.show = false
      }
-      const queryParams = { startTime: parseInt(this.timeFilter.startTime / 1000), endTime: parseInt(this.timeFilter.endTime / 1000), ...this.entity }
+      const queryParams = { ...this.queryTimeRange, ...this.entity }
      get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
        if (response.code === 200) {
          if (this.$_.isEmpty(response.data.result)) {
@@ -1455,7 +1485,7 @@ export default {
      })
    },
    initEchartsWithStatistics (chartParams) {
-      const queryParams = { startTime: parseInt(this.timeFilter.startTime / 1000), endTime: parseInt(this.timeFilter.endTime / 1000), ...this.entity }
+      const queryParams = { ...this.queryTimeRange, ...this.entity }
      get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
        if (response.code === 200) {
          if (this.$_.isEmpty(response.data.result)) {
@@ -1509,8 +1539,8 @@ export default {
      const self = this
      chartParams.valueColumn = this.orderPieTable
      const unitType = getUnitType(chartParams.valueColumn)
-      const queryParams = { startTime: parseInt(this.timeFilter.startTime / 1000), endTime: parseInt(this.timeFilter.endTime / 1000), limit: 10, order: this.orderPieTable, ...this.entity } // 统计数据的查询参数
-      const tableQueryParams = { startTime: parseInt(this.timeFilter.startTime / 1000), endTime: parseInt(this.timeFilter.endTime / 1000), limit: 10, order: this.orderPieTable, ...this.entity } // 统计数据的查询参数
+      const queryParams = { ...this.queryTimeRange, limit: 10, order: this.orderPieTable, ...this.entity } // 统计数据的查询参数
+      const tableQueryParams = { ...this.queryTimeRange, limit: 10, order: this.orderPieTable, ...this.entity } // 统计数据的查询参数
      tableQueryParams[chartParams.nameColumn] = [] // 处理两个图表不一样的地方
      get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
        if (response.code === 200) {
@@ -1607,7 +1637,7 @@ export default {
      })
    },
    loadPieTableData (name = '') {
-      const childrenParams = { startTime: parseInt(this.timeFilter.startTime / 1000), endTime: parseInt(this.timeFilter.endTime / 1000), limit: 10, order: this.orderPieTable, ...this.entity }
+      const childrenParams = { ...this.queryTimeRange, limit: 10, order: this.orderPieTable, ...this.entity }
      childrenParams[this.chartInfo.params.nameColumn] = name
      get(replaceUrlPlaceholder(this.chartInfo.params.urlTable, childrenParams)).then(response => {
        if (response.code === 200) {
@@ -1620,7 +1650,7 @@ export default {
      this.initChartTable(chartParams)
    },
    initChartTable (chartParams) {
-      const queryParams = { startTime: parseInt(this.timeFilter.startTime / 1000), endTime: parseInt(this.timeFilter.endTime / 1000), limit: this.table.limit, order: this.table.orderBy, ...this.entity }
+      const queryParams = { ...this.queryTimeRange, limit: this.table.limit, order: this.table.orderBy, ...this.entity }
      get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
        if (response.code === 200) {
          if (this.$_.isEmpty(response.data.result)) {
@@ -1711,6 +1741,7 @@ export default {
      deep: true,
      handler (n, o) {
        if (n && o) {
+          this.standaloneTimeRange.use = false
          this.$nextTick(() => {
            this.initChart()
          })
--- a/src/views/charts/Panel.vue
+++ b/src/views/charts/Panel.vue
@@ -5,7 +5,15 @@
        <DateTimeRange class="date-time-range" :start-time="timeFilter.startTime" :end-time="timeFilter.endTime" ref="dateTimeRange" @change="reload"/>
        <TimeRefresh class="date-time-range" @change="timeRefreshChange" :end-time="timeFilter.endTime"/>
      </div>
-      <chart v-for="chart in chartList" :key="chart.id" :chart="chart" :time-filter="timeFilter" :ref="`chart-${chart.id}`" :entity="entity"></chart>
+      <chart
+          v-for="chart in chartList"
+          :key="chart.id"
+          :chart="chart"
+          :time-filter="timeFilter"
+          :ref="`chart-${chart.id}`"
+          :entity="entity"
+          @getCurrentTimeRange="getCurrentTimeRange"
+      ></chart>
      <!--    <grid-layout v-model:layout="chartList"
                       :col-num="12"
                       :row-height="30"
@@ -150,6 +158,11 @@ export default {
        })
      }
    },
+    getCurrentTimeRange (callback) {
+      const myEndTime = window.$dayJs.tz().valueOf()
+      const myStartTime = myEndTime - this.timeFilter.dateRangeValue * 60 * 1000
+      callback({ startTime: myStartTime, endTime: myEndTime })
+    },
    timeRefreshChange () {
      if (!this.$refs.dateTimeRange.isCustom) {
        const value = this.timeFilter.dateRangeValue