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

2022-04-12 18:00:12 +08:00
parent 52db120e36 3f0f67b7f3
commit 5d6a69c8c8
6 changed files with 111 additions and 41 deletions
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -198,6 +198,11 @@ export const dnsServerRole = {
  RTDNSM: 'RTDNSM'
 }

+// 整屏滚动的路径映射
+export const wholeScreenRouterMapping = {
+  dns: '/panel/dnsServiceInsights'
+}
+
 export const themeData = [
  { value: 'light', label: 'light' },
  { value: 'dark', label: 'dark' }
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -652,3 +652,35 @@ export function arrayIsEqual (arr1, arr2) {
    }
  }
 }
+
+export function scrollToTop (dom, toTop, duration, direction) {
+  const clientHeight = dom.clientHeight
+  const currentTop = dom.scrollTop
+  const totalScrollDistance = Math.abs(currentTop - toTop)
+  let scrollY = currentTop
+  let oldTimestamp = null
+
+  function step (newTimestamp) {
+    if (oldTimestamp !== null) {
+      if (direction === 'up') {
+        scrollY -= totalScrollDistance * (newTimestamp - oldTimestamp) / duration
+        console.info(scrollY)
+        if (scrollY < 0) {
+          dom.scrollTop = 0
+          return
+        }
+        dom.scrollTop = scrollY
+      } else if (direction === 'down') {
+        scrollY += totalScrollDistance * (newTimestamp - oldTimestamp) / duration
+        if (scrollY > clientHeight) {
+          dom.scrollTop = clientHeight
+          return
+        }
+        dom.scrollTop = scrollY
+      }
+    }
+    oldTimestamp = newTimestamp
+    window.requestAnimationFrame(step)
+  }
+  window.requestAnimationFrame(step)
+}
--- a/src/views/charts/Panel.vue
+++ b/src/views/charts/Panel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="padding: 10px 10px 20px 10px; overflow: auto" v-if="!isEntityDetail">
+  <div style="padding: 10px 10px 20px 10px; overflow: auto" v-if="!isEntityDetail" @scroll="wholeScreenScroll">
    <div id="cn-panel" class="cn-panel2">
      <div class="panel__time">
        <date-time-range class="date-time-range" :start-time="timeFilter.startTime" :end-time="timeFilter.endTime" :date-range="timeFilter.dateRangeValue" ref="dateTimeRange" @change="reload"/>
@@ -11,6 +11,7 @@
          :data-list="chartList"
          :panel-lock="panelLock"
          :entity="entity"
+          :whole-screen-scroll="panel.params && panel.params.wholeScreenScroll"
      >
      </panel-chart-list>
    </div>
@@ -26,14 +27,6 @@
            :entity="entity"
        >
        </panel-chart-list>
-<!--        <template v-for="chart in chartList" :key="chart.id">
-          <chart
-              :chart="chart"
-              :ref="`chart-${chart.id}`"
-              :entity="entity"
-              @getCurrentTimeRange="getCurrentTimeRange"
-          ></chart>
-        </template>-->
      </div>
    </div>
  </div>
@@ -45,6 +38,7 @@ import { ref } from 'vue'
 import { panelTypeAndRouteMapping } from '@/utils/constants'
 import { api, getPanelList, getChartList } from '@/utils/api'
 import { getNowTime } from '@/utils/date-util'
+import { scrollToTop } from '@/utils/tools'
 import {
  isGroup,
  isBlock,
@@ -66,7 +60,11 @@ export default {
      detailTabs: [],
      detailChartList: [],
      currentTab: '',
-      isCryptocurrency: false// 是否为挖矿列表
+      isCryptocurrency: false, // 是否为挖矿列表
+      scroll: {
+        prevent: false, // 阻止滚动
+        prevScrollTop: 0 // 前一次滚动条位置
+      }
    }
  },
  async mounted () {
@@ -104,6 +102,11 @@ export default {
        this.panel = panels[0]
      }
      if (this.panel.id) {
+        if (this.panel.params) {
+          this.panel.params = JSON.parse(this.panel.params)
+        } else {
+          this.panel.params = {}
+        }
        const allCharts = (await getChartList({ panelId: this.panel.id, pageSize: -1 })).map(chart => {
          chart.i = chart.id
          this.recursionParamsConvert(chart)
@@ -180,6 +183,41 @@ export default {
    },
    groupParentCalcHeight (params) {
      this.$refs.panelChartList.groupParentCalcHeight(params.chart, params.childrenList)
+    },
+    wholeScreenScroll (e) {
+      return
+      if (this.scroll.prevent) {
+        return
+      }
+      this.scroll.prevent = true
+      const clientHeight = e.target.clientHeight
+      const currentScrollTop = e.target.scrollTop
+      console.info(this.scroll.prevScrollTop, currentScrollTop)
+      if (currentScrollTop > this.scroll.prevScrollTop) {
+        // 向下滚动，若top在clientHeight内，则整屏滚动下去
+        this.scroll.prevScrollTop = currentScrollTop
+        if (currentScrollTop < clientHeight) {
+          scrollToTop(e.target, clientHeight, 200, 'down')
+          setTimeout(() => {
+            this.scroll.prevScrollTop = e.target.scrollTop
+          }, 210)
+        }
+      } else if (currentScrollTop < this.scroll.prevScrollTop) {
+        // 向上滚动，若top在clientHeight内，则滚动到最顶部
+        this.scroll.prevScrollTop = currentScrollTop
+        if (currentScrollTop < clientHeight) {
+          //console.info('up', this.scroll.prevScrollTop, currentScrollTop)
+          scrollToTop(e.target, 0, 200, 'up')
+          setTimeout(() => {
+            this.scroll.prevScrollTop = e.target.scrollTop
+            //console.info('up2', this.scroll.prevScrollTop, currentScrollTop)
+          }, 210)
+        }
+      }
+      const vm = this
+      setTimeout(() => {
+        vm.scroll.prevent = false
+      }, 210)
    }
  }
 }
--- a/src/views/charts/PanelChartList.vue
+++ b/src/views/charts/PanelChartList.vue
@@ -1,4 +1,7 @@
 <template>
+  <div style="height: calc(100vh - 70px);width: 100%;background-color: lightyellow;display: none;" v-if="wholeScreenScroll">
+    <dns-screen v-if="currentPath === wholeScreenRouterMapping.dns"></dns-screen>
+  </div>
  <div :id='`chartList${(isGroup ? "Group" : "") + timestamp}`' class="chart-list" ref="layoutBox">
    <grid-layout
        ref="layout"
@@ -67,17 +70,22 @@ import PanelChart from '@/views/charts/PanelChart'
 import VueGridLayout from 'vue-grid-layout'
 import { getGroupHeight, getTypeCategory, isGroup } from './charts/tools'
 import _ from 'lodash'
+import { useRouter } from 'vue-router'
+import DnsScreen from '@/views/charts/wholeScreenScroll/DnsScreen'
+import { wholeScreenRouterMapping } from '@/utils/constants'

 export default {
  name: 'PanelChartList',
  components: {
    PanelChart,
+    DnsScreen,
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem
  },
  props: {
    timeFilter: Object, // 时间范围
    panelLock: { type: Boolean, default: true },
+    wholeScreenScroll: { type: Boolean, default: false },
    isGroup: Boolean,
    entity: Object,
    dataList: Array // 看板中所有图表信息
@@ -99,7 +107,8 @@ export default {
        chartInfo: {}
      },
      scrollTop: 0,
-      scrollTopTimer: null
+      scrollTopTimer: null,
+      wholeScreenRouterMapping
    }
  },
  methods: {
@@ -155,6 +164,12 @@ export default {
      }
    }
  },
+  setup (props) {
+    const { currentRoute } = useRouter()
+    return {
+      currentPath: currentRoute.value.path
+    }
+  },
  watch: {
    dataList: {
      deep: true,
--- a/src/views/charts/charts/ChartMap.vue
+++ b/src/views/charts/charts/ChartMap.vue
@@ -202,7 +202,7 @@ export default {
              this.countryImageSeries = this.imageSeriesFactory()
              this.polygonSeries.hide()
              this.worldImageSeries.hide()
-              const country = ev.target.dataItem.dataContext.location
+              const country = ev.target.dataItem.dataContext.name
              const queryParams = { ...this.queryParams, ipLocationCountry: country }
              const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams))
              this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries, country, chartData)
@@ -300,23 +300,6 @@ export default {
        const chartParams = this.chartInfo.params
        const data = chartData || this.chartData
        if (data && this.isMapBlock) {
-          /* const sumData = []
-          data.forEach(r => {
-            const hit = sumData.find(s => s.id === r.serverId)
-            const { key, labelText } = this.getDataKey(r)
-            const value = Number(r[key]) || 0
-            if (hit) {
-              hit.value += value
-            } else {
-              sumData.push({
-                id: r.serverId,
-                serverCountry: r.serverCountry,
-                key,
-                labelText,
-                value
-              })
-            }
-          }) */
          const seriesData = data.map(r => {
            return {
              ...this.convertMapData(r),
@@ -359,18 +342,6 @@ export default {
            return ''
          })
        } else if (data && this.isMapPoint) {
-          /* const seriesData = []
-          data.forEach(d => {
-            seriesData.push({
-              id: d.ipLocationId,
-              count: d.count,
-              dnsServerRole: d.dnsServerRole,
-              location: d.ipLocationCity || d.ipLocationProvince || d.ipLocationCountry,
-              desc: this.$t(this.dnsTypeI18n(d.dnsServerRole)),
-              color: this.circleColor[d.dnsServerRole.toUpperCase()].background,
-              border: this.circleColor[d.dnsServerRole.toUpperCase()].border
-            })
-          }) */
          imageSeries.data = data.map(r => ({
            ...this.convertMapData(r),
            id: r.ipLocationId,
--- a/src/views/charts/wholeScreenScroll/DnsScreen.vue
+++ b/src/views/charts/wholeScreenScroll/DnsScreen.vue
@@ -0,0 +1,9 @@
+<template>
+  <div>dns screen</div>
+</template>
+
+<script>
+export default {
+  name: 'DnsScreen'
+}
+</script>