From 5aa046dc6aed1ddea88b7b6dae02b11f19c1fae8 Mon Sep 17 00:00:00 2001
From: hyx <hanyuxia@iie.ac.cn>
Date: Fri, 22 Apr 2022 17:40:44 +0800
Subject: [PATCH 1/2] =?UTF-8?q?CN-497=20DNS=20Dashboard=E6=95=B4=E5=B1=8F?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=9B=B4=E6=8D=A2=E6=96=B9=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/charts/Chart.vue                    |   4 +
 src/views/charts/Panel.vue                    | 305 +++++++++++++++++-
 src/views/charts/PanelChart.vue               |  25 +-
 src/views/charts/PanelChartList.vue           | 113 ++++---
 src/views/charts/charts/ChartMap.vue          | 114 +++----
 .../charts/charts/ChartTablePagination.vue    |   5 +-
 .../charts/wholeScreenScroll/DnsScreen.vue    |  12 +-
 7 files changed, 453 insertions(+), 125 deletions(-)

diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue
index 9e85538e..62cd54ef 100644
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -21,6 +21,7 @@
         :entity="entity"
         @getChartData="getChartData"
         @showLoading="showLoading"
+        @finishOneMap="finishOneMap"
       ></chart-map>
 
       <chart-single-value
@@ -433,6 +434,9 @@ export default {
     showLoading (show) {
       this.$emit('showLoading', show)
     },
+    finishOneMap (show) {
+      this.$emit('handleSpecialChartFinishState', true)
+    },
     getAlarmInfo (url, extraParams, isRefresh, timeFilter) {
       this.$emit('getChartData', url, extraParams, isRefresh, timeFilter)
     },
diff --git a/src/views/charts/Panel.vue b/src/views/charts/Panel.vue
index 01fa12f8..4637e4c0 100644
--- a/src/views/charts/Panel.vue
+++ b/src/views/charts/Panel.vue
@@ -1,17 +1,45 @@
 <template>
-  <div style="padding: 10px 10px 20px 10px; overflow: auto" v-if="!isEntityDetail" @scroll="wholeScreenScroll">
+  <div id="panelList" 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"/>
         <time-refresh class="date-time-range" @change="timeRefreshChange" :end-time="timeFilter.endTime"/>
       </div>
+      <!--
+      <div v-if="panelType===3" class="nav">
+        <input type="radio" class="wholeScreenChekck" name="radio-set" checked id="nav1">
+        <input type="radio" class="wholeScreenChekck" name="radio-set"  id="nav2">
+        <div class="scroll">
+          <section class="panel" id="panel1">
+            <dns-screen id="dnsScreen" :copy-data-list="chartList"
+                        ref="dnsScreen"
+                        :time-filter="timeFilter"
+                        :entity="entity">
+            </dns-screen>
+          </section>
+          <section class="panel" id="panel2">
+            <dns-screen id="dnsScreen2" :copy-data-list="chartList"
+                        ref="dnsScreen"
+                        :time-filter="timeFilter"
+                        :entity="entity">
+            </dns-screen>
+            <div  style="width:100%;height:500px;border:solid 1px red;padding:10px 10px 20px;">
+              qqq
+            </div>
+          </section>
+
+        </div>
+
+      </div> -->
+
       <panel-chart-list
-          ref="panelChartList"
-          :time-filter="timeFilter"
-          :data-list="chartList"
-          :panel-lock="panelLock"
-          :entity="entity"
-          :whole-screen-scroll="panel.params && panel.params.wholeScreenScroll"
+              ref="panelChartList"
+              :time-filter="timeFilter"
+              :data-list="chartList"
+              :panel-lock="panelLock"
+              :entity="entity"
+              :whole-screen-scroll="panel.params && panel.params.wholeScreenScroll"
+              @finish="finish"
       >
       </panel-chart-list>
     </div>
@@ -20,11 +48,11 @@
     <div class="entity-detail__body">
       <div class="cn-panel2" id="cn-panel">
         <panel-chart-list
-            ref="panelChartList"
-            :time-filter="timeFilter"
-            :data-list="chartList"
-            :panel-lock="panelLock"
-            :entity="entity"
+                ref="panelChartList"
+                :time-filter="timeFilter"
+                :data-list="chartList"
+                :panel-lock="panelLock"
+                :entity="entity"
         >
         </panel-chart-list>
       </div>
@@ -35,7 +63,7 @@
 <script>
 import { useRoute } from 'vue-router'
 import { ref } from 'vue'
-import { panelTypeAndRouteMapping } from '@/utils/constants'
+import { panelTypeAndRouteMapping, wholeScreenRouterMapping } from '@/utils/constants'
 import { api, getPanelList, getChartList } from '@/utils/api'
 import { getNowTime } from '@/utils/date-util'
 import { scrollToTop } from '@/utils/tools'
@@ -44,9 +72,14 @@ import {
   isBlock,
   getGroupHeight
 } from './charts/tools'
+  
+import DnsScreen from '@/views/charts/wholeScreenScroll/DnsScreen'
 
 export default {
   name: 'Panel',
+  components: {
+    DnsScreen
+  },
   props: {
     entity: Object,
     isEntityDetail: Boolean,
@@ -64,7 +97,14 @@ export default {
       scroll: {
         prevent: false, // 阻止滚动
         prevScrollTop: 0 // 前一次滚动条位置
-      }
+      },
+      wholeScreenRouterMapping,
+      isFullScreen: true, // 当前是否为全屏滚动页面
+      // isSecondScreen:false,//当前是否为全屏滚动页面下面的页面
+      screenNum: 1, // 当前屏幕编号
+      wheel: null, // 鼠标滚动事件
+      allDone: false,
+      isReachSecond: false
     }
   },
   async mounted () {
@@ -74,6 +114,39 @@ export default {
     if (!this.$_.isEmpty(this.detailTabs)) {
       this.currentTab = this.detailTabs[0].id + ''
     }
+
+    this.$nextTick(() => {
+      if (this.panelType === 3) {
+        const self = this
+        const panelList = document.getElementById('panelList')// ie不兼容，换成id会成功
+        self.wheel = function (event) {
+          event.stopPropagation()// 阻止冒泡事件
+          if (!self.allDone) {
+            if (event && event.preventDefault) {
+              event.preventDefault()
+            } else {
+              event.returnValue = false
+            }
+            return false
+          }
+          let delta = 0
+          if (!event)// for ie
+          { event = window.event }
+          if (event.wheelDelta) { // ie,opera
+            delta = event.wheelDelta / 120
+          } else if (event.detail) {
+            delta = -event.detail / 3
+          }
+          if (delta) {
+            self.handle(delta, self, event)
+          }
+        }
+        if (panelList.addEventListener) {
+          panelList.addEventListener('DOMMouseScroll', self.wheel, { passive: false })
+        }
+        panelList.onmousewheel = self.wheel
+      }
+    })
   },
   setup (props, ctx) {
     const panel = ref({})
@@ -123,14 +196,24 @@ export default {
       this.currentTab = this.detailTabs[index].id + ''
       this.detailChartList = this.detailTabs[index].children
     },
+    finish () {
+      this.allDone = true
+    },
+    preventWheel (event) {
+      if (event && event.preventDefault) {
+        event.preventDefault()
+      } else {
+        event.returnValue = false
+      }
+    },
     recursionParamsConvert (chart) {
       chart.params = chart.params ? JSON.parse(chart.params) : {}
       chart.firstShow = false
       if (isGroup(chart.type)) {
         chart.oldH = chart.h
         /* chart.params = {
-          collapse: false
-        } */
+            collapse: false
+          } */
         chart.h = getGroupHeight(chart.children) + 1.5
         if (chart.params.collapse) {
           chart.h = 1
@@ -185,7 +268,7 @@ export default {
       this.$refs.panelChartList.groupParentCalcHeight(params.chart, params.childrenList)
     },
     wholeScreenScroll (e) {
-      if (this.scroll.prevent || !this.panel.params || !this.panel.params.wholeScreenScroll) {
+      if (this.scroll.prevent) {
         return
       }
       this.scroll.prevent = true
@@ -214,7 +297,195 @@ export default {
       setTimeout(() => {
         vm.scroll.prevent = false
       }, 210)
+    },
+    scrollIntoDown () {
+      const anchorEle = document.getElementById('gridLayout')
+      console.log('down....')
+      if (anchorEle) {
+        console.log('down')
+        anchorEle.scrollIntoView({ block: 'start', behavior: 'smooth' })
+      }
+    },
+    scrollIntoUp (id) {
+      const anchorEle = document.getElementById(id)
+      if (anchorEle) {
+        anchorEle.scrollIntoView({ block: 'start', behavior: 'smooth' })
+      }
+    },
+    scrollInto (id, event) {
+      const anchorEle = document.getElementById(id)
+      if (anchorEle) {
+        const panelList = document.getElementById('panelList')// ie不兼容，换成id会成功
+        panelList.onmousewheel = null
+        panelList.removeEventListener('DOMMouseScroll', this.wheel)
+        anchorEle.scrollIntoView({ block: 'start', behavior: 'smooth' })
+        this.preventWheel(event)
+        console.log('scrolling。。。。')
+
+        setTimeout(() => {
+          const panelList = document.getElementById('panelList')// ie不兼容，换成id会成功
+          if (panelList.addEventListener) {
+            panelList.addEventListener('DOMMouseScroll', this.wheel, { passive: false })
+          }
+          panelList.onmousewheel = this.wheel
+          console.log('add event。。。。')
+        }, 200)
+      }
+    },
+    preventDefault (event) {
+      if (event && event.preventDefault) {
+        event.preventDefault()
+      } else {
+        event.returnValue = false
+      }
+    },
+    handle (delta, self, event) {
+      const panelList = document.getElementById('panelList')// ie不兼容，换成id会成功
+      const currentScrollTop = panelList.scrollTop
+      console.log('****************开始******************')
+      console.log('self.screenNum=' + self.screenNum)
+      console.log('panelList.offsetHeight=' + panelList.offsetHeight)
+      console.log('self.isFullScreen=' + self.isFullScreen)
+      console.log('self.isReachSecond =' + self.isReachSecond)
+      console.log('currentScrollTop=' + currentScrollTop)
+      if (delta < 0) {
+        if (self.isFullScreen || self.screenNum === 1 || currentScrollTop < panelList.offsetHeight - 15) {
+          console.log('1下')
+          self.isFullScreen = false
+          self.screenNum = 2
+          self.scrollIntoDown()
+          self.preventWheel(event)
+          self.isReachSecond = true
+          // panelList.removeEventListener('DOMMouseScroll',self.wheel)
+          // panelList.onmousewheel=null
+        } else if (!self.isFullScreen || self.screenNum === 2 || currentScrollTop > panelList.offsetHeight - 10) {
+          console.log('else下')
+          self.screenNum = 3
+          self.isFullScreen = false
+          self.isReachSecond = false
+          // self.scrollIntoDown()
+        } else {
+          self.isReachSecond = false
+        }
+      } else if (delta > 0) {
+        if (self.screenNum === 3 || (currentScrollTop < panelList.offsetHeight + 100 && currentScrollTop > panelList.offsetHeight - 10)) {
+          console.log('上1')
+          self.isReachSecond = true
+          self.scrollIntoUp('gridLayout')
+          self.screenNum = 2
+          self.isFullScreen = false
+          self.preventWheel(event)
+        } else if (self.isFullScreen || self.screenNum === 2 || self.screenNum === 1 || currentScrollTop <= panelList.offsetHeight + 100) {
+          console.log('上2')
+          self.scrollIntoUp('dnsScreenAnchor')
+          self.screenNum = 1
+          self.isFullScreen = true
+          self.isReachSecond = false
+          self.preventWheel(event)
+        } else {
+          console.log('上3')
+          self.isFullScreen = false
+          self.isReachSecond = false
+        }
+      }
     }
   }
 }
 </script>
+
+<style scoped >
+  body{
+    -webkit-font-smoothing:antialiased;
+  }
+  .nav{
+    width:100%;
+    position:absolute;
+    left:0;
+    bottom:0;
+  }
+  .nav input{
+    opacity:0;
+    z-index:1000;
+  }
+  #nav1,#nav1 + a{
+    left:0%;
+  }
+  #nav2,#nav2 + a{
+    left:20%;
+  }
+  .nav input:checked + a:after{
+    content:"";
+    width:0;
+    height:0;
+    overflow:hidden;
+    border:20px solid transparent;
+    border-bottom-color:#821134;
+    position:absolute;
+    bottom:100%;
+    left:50%;
+    margin-left:-20px;
+  }
+  .scroll,.panel{
+    width:100%;
+    height:100%;
+    position:relative;
+    text-align:center;
+    padding-top:0px;
+  }
+  .scroll{
+    left:0;
+    top:0;
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    -o-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    backface-visibility: hidden;
+    -webkit-transition: all 0.6s ease-in-out;
+    -moz-transition: all 0.6s ease-in-out;
+    -o-transition: all 0.6s ease-in-out;
+    transition: all 0.6s ease-in-out;
+    color:#e23a6e;
+    font-weight:bold;
+  }
+  .panel{
+    overflow: hidden;
+  }
+  #nav1:checked ~ .scroll{
+    -webkit-transform: translateY(100%);
+    -moz-transform: translateY(100%);
+    -ms-transform: translateY(100%);
+    -o-transform: translateY(100%);
+    transform: translateY(100%);
+  }
+  #nav2:checked ~ .scroll{
+    -webkit-transform: translateY(-20%);
+    -moz-transform: translateY(-20%);
+    -ms-transform: translateY(-20%);
+    -o-transform: translateY(-20%);
+    transform: translateY(-20%);
+  }
+  [data-icon]:after{
+    content:attr(data-icon);
+    width:200px;
+    height:200px;
+    color:#fff;
+    font-size:90px;
+    text-align:center;
+    line-height:200px;
+    position:absolute;
+    left:18%;
+    top:18%;
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -ms-transform: rotate(-45deg);
+    -o-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+  }
+  @media screen and (max-device-width: 520px){
+
+  }
+
+</style>
diff --git a/src/views/charts/PanelChart.vue b/src/views/charts/PanelChart.vue
index bdec56cd..028a2852 100644
--- a/src/views/charts/PanelChart.vue
+++ b/src/views/charts/PanelChart.vue
@@ -41,6 +41,7 @@
         :time-filter="timeFilter"
         @getChartData="getChartData"
         @showLoading="showLoading"
+        @handleSpecialChartFinishState="handleSpecialChartFinishState"
         :tabHandleClickType="tabHandleClickType"
     ></chart>
   </div>
@@ -150,7 +151,8 @@ export default {
           }
         ] // table的所有数据
       },
-      tabHandleClickType: ''
+      tabHandleClickType: '',
+      isFinish: false
     }
   },
   computed: {
@@ -264,21 +266,38 @@ export default {
             }
           }).finally(() => {
             this.loading = false
+            this.handleFinishState()
           })
         } else if (this.isGroup || this.isTabs) {
           this.$refs.chart.$refs.chart.reload()
+          this.handleFinishState()
         } else if (this.isBlock) {
           if (!this.chartInfo.firstShow) {
             this.chartInfo.firstShow = true
           } else {
             this.$refs.chart.$refs.chart.reload()
           }
+          this.handleFinishState()
         }
       } catch (e) {
         console.error(e)
         setTimeout(() => {
           this.loading = false
+          this.handleFinishState()
         }, 200)
+      } finally {
+        this.handleFinishState()
+      }
+    },
+    handleSpecialChartFinishState () {
+      this.$emit('finishOne')
+    },
+    handleFinishState () {
+      if (!this.isMap) {
+        if (!this.isFinish) {
+          this.isFinish = true
+          this.$emit('finishOne')
+        }
       }
     },
     handleQueryParams () {
@@ -400,9 +419,9 @@ export default {
     const dateRangeValue = 60
     const { startTime, endTime } = getNowTime(dateRangeValue)
     const chartTimeFilter = ref({ startTime, endTime, dateRangeValue })
-    const table = ref({})
+    let table = {}
     if (isBasicTable(props.chartInfo.type)) {
-      table.value = {
+      table = {
         pageSize: chartTableDefaultPageSize,
         limit: chartTableTopOptions[0], // top-n
         orderBy: props.chartInfo.params.columns.order[0],
diff --git a/src/views/charts/PanelChartList.vue b/src/views/charts/PanelChartList.vue
index d3c226b3..5d110976 100644
--- a/src/views/charts/PanelChartList.vue
+++ b/src/views/charts/PanelChartList.vue
@@ -1,14 +1,16 @@
 <template>
-  <div style="height: calc(100vh - 70px);width: 100%;" v-if="wholeScreenScroll">
-    <dns-screen v-if="currentPath === wholeScreenRouterMapping.dns"
-                :copy-data-list="copyDataList"
-                ref="dnsScreen"
-                :time-filter="timeFilter"
-                :entity="entity">
-    </dns-screen>
-  </div>
+   <div style="height: calc(100vh - 70px);width: 100%;" v-if="isWholeScreenScroll" id="dnsScreenAnchor">
+     <dns-screen v-if="currentPath === wholeScreenRouterMapping.dns"
+                 :copy-data-list="copyDataList"
+                 ref="dnsScreen"
+                 :time-filter="timeFilter"
+                 @finishOne="finishOne"
+                 :entity="entity">
+     </dns-screen>
+   </div>
   <div :id='`chartList${(isGroup ? "Group" : "") + timestamp}`' class="chart-list" ref="layoutBox">
     <grid-layout
+            id="gridLayout"
         ref="layout"
         v-if="gridLayoutShow"
         v-model:layout="normalCopyDataList"
@@ -42,6 +44,7 @@
             :entity="entity"
             @groupShow="groupShow"
             @showFullscreen="showFullscreen"
+            @finishOne="finishOne"
         ></panel-chart>
       </grid-item>
     </grid-layout>
@@ -114,7 +117,10 @@ export default {
       },
       scrollTop: 0,
       scrollTopTimer: null,
-      wholeScreenRouterMapping
+      wholeScreenRouterMapping,
+      isWholeScreenScroll: false,
+      haveDoneChartNum: 0,
+      allDone: false
     }
   },
   methods: {
@@ -137,6 +143,16 @@ export default {
       this.fullscreen.chartInfo = chartInfo
       this.fullscreen.visible = show
     },
+    finishOne () {
+      this.haveDoneChartNum++
+      // console.log("this.haveDoneChartNum="+this.haveDoneChartNum)
+      if (this.haveDoneChartNum >= this.copyDataList.length) {
+        // this.allDone = true
+        setTimeout(() => {
+          this.$emit('finish')
+        }, 200)
+      }
+    },
     groupShow (chart) {
       this.copyDataList.forEach((item, index) => {
         if (item.id === chart.id) {
@@ -194,46 +210,53 @@ export default {
       handler (n, o) {
         this.gridLayoutShow = false
         this.gridLayoutLoading = true
+
+        this.isWholeScreenScroll = false
+
         // const arr = this.$_.cloneDeep(n)
         this.noData = !n || n.length < 1
-        const tempList = n.map(item => {
-          if (item.params) {
-            item.params.showHeader = true
-          }
-          const height = item.h
-          return {
-            ...item,
-            i: item.id,
-            w: item.w,
-            h: height,
-            x: item.x || 0,
-            y: item.y || 0,
-            params: item.params,
-            category: getTypeCategory(item.type) // 类别，是echarts还是map等等
-          }
-        })
-        this.$nextTick(() => {
-          this.copyDataList = JSON.parse(JSON.stringify(tempList))
-          this.normalCopyDataList = this.copyDataList.filter(function (item) {
-            return item.y >= -1
+        if (n) {
+          const tempList = n.map(item => {
+            if (item.params) {
+              item.params.showHeader = true
+            }
+            const height = item.h
+            return {
+              ...item,
+              i: item.id,
+              w: item.w,
+              h: height,
+              x: item.x || 0,
+              y: item.y || 0,
+              params: item.params,
+              category: getTypeCategory(item.type) // 类别，是echarts还是map等等
+            }
           })
-          setTimeout(() => {
-            this.gridLayoutShow = true
-          })
-          setTimeout(() => {
-            this.copyDataList.forEach(item => {
-              if (isGroup(item.type) && !item.firstShow) {
-                item.firstShow = true
-                this.copyDataList = [...this.copyDataList]
-                this.normalCopyDataList = this.copyDataList.filter(function (item) {
-                  return item.y >= -1
-                })
-                this.emitter.emit('groupParentCalcHeight', { chart: item, childrenList: this.copyDataList })
-              }
+          this.$nextTick(() => {
+            this.copyDataList = JSON.parse(JSON.stringify(tempList))
+            this.normalCopyDataList = this.copyDataList.filter(function (item) {
+              return item.y >= -1
             })
-          }, 200)
-          this.gridLayoutLoading = false
-        })
+            setTimeout(() => {
+              this.gridLayoutShow = true
+              this.isWholeScreenScroll = this.wholeScreenScroll// 为了解决加载页面时，滚动条先长后短的问题，即 数据要一起显示
+            })
+
+            setTimeout(() => {
+              this.copyDataList.forEach(item => {
+                if (isGroup(item.type) && !item.firstShow) {
+                  item.firstShow = true
+                  this.copyDataList = [...this.copyDataList]
+                  this.normalCopyDataList = this.copyDataList.filter(function (item) {
+                    return item.y >= -1
+                  })
+                  this.emitter.emit('groupParentCalcHeight', { chart: item, childrenList: this.copyDataList })
+                }
+              })
+            }, 200)
+            this.gridLayoutLoading = false
+          })
+        }
       }
     }
   }
diff --git a/src/views/charts/charts/ChartMap.vue b/src/views/charts/charts/ChartMap.vue
index 640588c5..e0f11962 100644
--- a/src/views/charts/charts/ChartMap.vue
+++ b/src/views/charts/charts/ChartMap.vue
@@ -157,68 +157,72 @@ export default {
   methods: {
     unitConvert,
     initMap (id) {
-      const chart = am4Core.create(id, am4Maps.MapChart)
-      chart.geodata = getGeoData(storageKey.iso36112WorldLow)
-      chart.projection = new am4Maps.projections.Miller()
-      this.myChart = shallowRef(chart)
-      this.polygonSeries = shallowRef(this.polygonSeriesFactory())
+      try {
+        const chart = am4Core.create(id, am4Maps.MapChart)
+        chart.geodata = getGeoData(storageKey.iso36112WorldLow)
+        chart.projection = new am4Maps.projections.Miller()
+        this.myChart = shallowRef(chart)
+        this.polygonSeries = shallowRef(this.polygonSeriesFactory())
 
-      if (this.isMapPoint) {
-        this.worldImageSeries = shallowRef(this.imageSeriesFactory())
-      }
+        if (this.isMapPoint) {
+          this.worldImageSeries = shallowRef(this.imageSeriesFactory())
+        }
 
-      this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
+        this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
 
-      // 地图点击事件
-      if (this.isMapBlock) {
-        this.polygonSeries.mapPolygons.template.events.on('hit', async ev => {
-          const countryId = ev.target.dataItem.dataContext.id
-          if (countryId) {
-            ev.target.series.chart.zoomToMapObject(ev.target)
+        // 地图点击事件
+        if (this.isMapBlock) {
+          this.polygonSeries.mapPolygons.template.events.on('hit', async ev => {
+            const countryId = ev.target.dataItem.dataContext.id
+            if (countryId) {
+              ev.target.series.chart.zoomToMapObject(ev.target)
+              ev.target.isHover = false
+              const geoData = getGeoData(countryId)
+              if (geoData) {
+                this.countrySeries = shallowRef(this.polygonSeriesFactory())
+                this.countrySeries.geodata = geoData
+                this.polygonSeries.hide()
+                const country = ev.target.dataItem.dataContext.serverCountry
+                const queryParams = { ...this.queryParams, country }
+                const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams))
+                this.loadAm4ChartMap(this.countrySeries, null, country, chartData)
+              }
+            }
+          })
+        } else if (this.isMapPoint) {
+          this.worldImageSeries.mapImages.template.events.on('hit', async ev => {
+            const countryId = ev.target.dataItem.dataContext.id
             ev.target.isHover = false
-            const geoData = getGeoData(countryId)
-            if (geoData) {
-              this.countrySeries = shallowRef(this.polygonSeriesFactory())
-              this.countrySeries.geodata = geoData
-              this.polygonSeries.hide()
-              const country = ev.target.dataItem.dataContext.serverCountry
-              const queryParams = { ...this.queryParams, country }
-              const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams))
-              this.loadAm4ChartMap(this.countrySeries, null, country, chartData)
+            if (countryId) {
+              const targetMapObject = this.polygonSeries.getPolygonById(countryId)
+              targetMapObject.series.chart.zoomToMapObject(targetMapObject)
+              const geoData = getGeoData(countryId)
+              if (geoData) {
+                this.countrySeries = shallowRef(this.polygonSeriesFactory())
+                this.countrySeries.geodata = geoData
+                this.countryImageSeries = shallowRef(this.imageSeriesFactory())
+                this.polygonSeries.hide()
+                this.worldImageSeries.hide()
+                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)
+              }
             }
-          }
-        })
-      } else if (this.isMapPoint) {
-        this.worldImageSeries.mapImages.template.events.on('hit', async ev => {
-          const countryId = ev.target.dataItem.dataContext.id
-          ev.target.isHover = false
-          if (countryId) {
-            const targetMapObject = this.polygonSeries.getPolygonById(countryId)
-            targetMapObject.series.chart.zoomToMapObject(targetMapObject)
-            const geoData = getGeoData(countryId)
-            if (geoData) {
-              this.countrySeries = shallowRef(this.polygonSeriesFactory())
-              this.countrySeries.geodata = geoData
-              this.countryImageSeries = shallowRef(this.imageSeriesFactory())
-              this.polygonSeries.hide()
-              this.worldImageSeries.hide()
-              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)
-            }
-          }
-        })
-      }
-      // dns地图legend上的数据
-      if (!_.isEmpty(this.chartInfo.params.legendUrl)) {
-        setTimeout(() => {
-          this.chartInfo.params.legendUrl.forEach((url, i) => {
-            getData(url).then(data => {
-              this.legends[i].value = data
+          })
+        }
+        // dns地图legend上的数据
+        if (!_.isEmpty(this.chartInfo.params.legendUrl)) {
+          setTimeout(() => {
+            this.chartInfo.params.legendUrl.forEach((url, i) => {
+              getData(url).then(data => {
+                this.legends[i].value = data
+              })
             })
           })
-        })
+        }
+      } finally {
+        this.$emit('finishOneMap')
       }
     },
     polygonSeriesFactory () {
diff --git a/src/views/charts/charts/ChartTablePagination.vue b/src/views/charts/charts/ChartTablePagination.vue
index 894fe5a7..907a2b58 100644
--- a/src/views/charts/charts/ChartTablePagination.vue
+++ b/src/views/charts/charts/ChartTablePagination.vue
@@ -58,7 +58,10 @@ export default {
     this.emitter.on('chart-pageNo', function () {
       _this.resetPageNo()
     })
-    this.$el.querySelector('.el-pagination__jump').childNodes[0].nodeValue = ''
+    // console.log('this.$el==='+this.$el)
+    if (this.$el.querySelector) {
+      this.$el.querySelector('.el-pagination__jump').childNodes[0].nodeValue = ''
+    }
   }
 }
 </script>
diff --git a/src/views/charts/wholeScreenScroll/DnsScreen.vue b/src/views/charts/wholeScreenScroll/DnsScreen.vue
index b1eef377..c076f222 100644
--- a/src/views/charts/wholeScreenScroll/DnsScreen.vue
+++ b/src/views/charts/wholeScreenScroll/DnsScreen.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="chart-list" style="display:grid;height:calc(100vh - 70px);width:100%;grid-template-columns:repeat(30,1fr);grid-template-rows:repeat(19,1fr);grid-gap:10px;padding-left: 10px;padding-right: 10px;">
-    <div v-for="item in copyDataList"
+  <div class="chart-list scroll-hide" style="display:grid;height:calc(100vh - 70px);width:100%;grid-template-columns:repeat(30,1fr);grid-template-rows:repeat(19,1fr);grid-gap:10px;padding-left: 10px;padding-right: 10px;">
+    <div v-for="item in dnsScreenDataList"
           :key="item.id"
           :ref="'grid-item' + item.id"
           class="dns-screen"
@@ -11,6 +11,7 @@
                 :chart-info="item"
                 :time-filter="timeFilter"
                 :entity="entity"
+                @finishOne="finishOne"
         ></panel-chart>
     </div>
   </div>
@@ -31,15 +32,18 @@ export default {
   },
   methods: {
     reload () {
-      this.copyDataList.forEach(item => {
+      this.dnsScreenDataList.forEach(item => {
         if (this.$refs['chart' + item.id]) {
           this.$refs['chart' + item.id].getChartData()
         }
       })
+    },
+    finishOne () {
+      this.$emit('finishOne')
     }
   },
   computed: {
-    copyDataList: function () {
+    dnsScreenDataList: function () {
       return this.copyDataList.filter(function (item) {
         return item.y < 0
       })

From 80f146858576bd3bad25c6378bb57f3aef795d98 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Sun, 24 Apr 2022 14:05:47 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E8=A1=A5=E5=85=85=E5=9C=B0=E5=9B=BE?=
 =?UTF-8?q?=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/constants.js               |  1 -
 src/views/charts/charts/ChartMap.vue | 16 +++++++++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/utils/constants.js b/src/utils/constants.js
index 241fdb86..e6e448d5 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -6,7 +6,6 @@ export const storageKey = {
   i18n: 'cn-i18n',
   languages: 'cn-languages',
   language: 'cn-language',
-  timezone: 'cn-timezone',
   theme: 'cn-theme',
   dateFormat: 'cn-date-format',
   timezoneOffset: 'cn-timezone-offset',
diff --git a/src/views/charts/charts/ChartMap.vue b/src/views/charts/charts/ChartMap.vue
index e0f11962..fbf7c4bf 100644
--- a/src/views/charts/charts/ChartMap.vue
+++ b/src/views/charts/charts/ChartMap.vue
@@ -158,16 +158,18 @@ export default {
     unitConvert,
     initMap (id) {
       try {
+        // 初始化插件
         const chart = am4Core.create(id, am4Maps.MapChart)
         chart.geodata = getGeoData(storageKey.iso36112WorldLow)
         chart.projection = new am4Maps.projections.Miller()
         this.myChart = shallowRef(chart)
+        // 初始化多边形series（即地图series）
         this.polygonSeries = shallowRef(this.polygonSeriesFactory())
-
+        // 如果是散点地图，再初始化散点series。DNS dashboard的地图是散点地图
         if (this.isMapPoint) {
           this.worldImageSeries = shallowRef(this.imageSeriesFactory())
         }
-
+        // 渲染
         this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
 
         // 地图点击事件
@@ -242,12 +244,14 @@ export default {
     },
     imageSeriesFactory (dataField) {
       const vm = this
+      // emcharts实例中增加地图图案series（用来在地图上画圆点、方块、连线等）
       const imageSeries = this.myChart.series.push(new am4Maps.MapImageSeries())
+      // 指定接口数据中哪个字段名代表数值
       imageSeries.dataFields.value = dataField || 'count'
-
+      // 取出图案的默认模板，用来接下来做自定义更改
       const imageTemplate = imageSeries.mapImages.template
       imageTemplate.nonScaling = true
-
+      // 通过地区ID来获取经纬度，设置后无需自己提供经纬度
       imageTemplate.adapter.add('latitude', function (latitude, target) {
         const polygon = vm.polygonSeries.getPolygonById(target.dataItem.dataContext.id)
         if (polygon) {
@@ -255,7 +259,6 @@ export default {
         }
         return latitude
       })
-
       imageTemplate.adapter.add('longitude', function (longitude, target) {
         const polygon = vm.polygonSeries.getPolygonById(target.dataItem.dataContext.id)
         if (polygon) {
@@ -264,6 +267,7 @@ export default {
         return longitude
       })
 
+      // 设置图案样式
       const circle = imageTemplate.createChild(am4Core.Circle)
       circle.propertyFields.fill = 'color'
       circle.propertyFields.stroke = 'border'
@@ -317,6 +321,7 @@ export default {
           const sorted = seriesData.sort((a, b) => b.value - a.value)
           const allZero = this.$_.isEmpty(sorted) || Number(sorted[0].value) === 0
 
+          // 左下角热力图
           polygonSeries.heatRules.push({
             property: 'fill',
             target: polygonSeries.mapPolygons.template,
@@ -335,6 +340,7 @@ export default {
           heatLegend.marginLeft = 15
           heatLegend.valign = 'bottom'
 
+          // 计算热力图的最大值最小值
           const minRange = heatLegend.valueAxis.axisRanges.create()
           minRange.value = heatLegend.minValue
           minRange.label.text = minRange.value === 0 ? 0 : unitConvert(heatLegend.minValue, chartParams.unitType).join(' ')