CN-497 feat: dns dashboard整屏滚动

src/assets/css/components/views/charts/panel.scss

@@ -1,5 +1,4 @@
 .cn-panel2 {
-  position: relative;
   .panel__time {
     position: absolute;
     right: 10px;
@@ -10,6 +9,7 @@
       margin-left: 10px;
     }
   }
+  position: relative;
   .chart-list {
     &>.vue-grid-layout>.vue-grid-item, &>.dns-screen {
       &>.panel-chart {
@@ -495,7 +495,18 @@
     }
   }
 }
-
+.cn-panel2__whole-screen {
+  height: calc(100vh - 50px);
+  width: 100%;
+  padding: 20px 10px 0 10px;
+  transition: .2s all linear;
+  opacity: 1;
+}
+.cn-panel2__whole-screen.cn-panel2__whole-screen--collapse {
+  height: 0 !important;
+  padding-top: 0;
+  opacity: 0;
+}
 .entity-detail-tool {
   display: flex;
   justify-content: space-between;

src/views/charts/Chart.vue

@@ -21,7 +21,6 @@
         :entity="entity"
         @getChartData="getChartData"
         @showLoading="showLoading"
-        @finishOneMap="finishOneMap"
       ></chart-map>
 
       <chart-single-value
@@ -434,9 +433,6 @@ 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)
     },

src/views/charts/Panel.vue

@@ -1,90 +1,74 @@
 <template>
-  <div id="panelList" style="padding: 10px 10px 20px 10px; overflow: auto" v-if="!isEntityDetail" >  <!--  @scroll="wholeScreenScroll" -->
+  <div class="panel-box">
-    <div id="cn-panel" class="cn-panel2">
+    <div
-      <div class="panel__time">
+        class="cn-panel2 cn-panel2__whole-screen"
-        <date-time-range class="date-time-range" :start-time="timeFilter.startTime" :end-time="timeFilter.endTime" :date-range="timeFilter.dateRangeValue" ref="dateTimeRange" @change="reload"/>
+        v-if="panel.params && panel.params.wholeScreenScroll"
-        <time-refresh class="date-time-range" @change="timeRefreshChange" :end-time="timeFilter.endTime"/>
+        id="wholeScreenBox"
-      </div>
+    >
-      <!--
+      <dns-screen v-if="currentPath === wholeScreenRouterMapping.dns"
-      <div v-if="panelType===3" class="nav">
+                  :copy-data-list="chartList"
-        <input type="radio" class="wholeScreenChekck" name="radio-set" checked id="nav1">
+                  ref="dnsScreen"
-        <input type="radio" class="wholeScreenChekck" name="radio-set"  id="nav2">
+                  :time-filter="timeFilter"
-        <div class="scroll">
+                  :entity="entity">
-          <section class="panel" id="panel1">
+      </dns-screen>
-            <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"
-              @finish="finish"
-      >
-      </panel-chart-list>
     </div>
-  </div>
+    <div id="panelList" style="padding: 10px 10px 20px 10px; overflow: auto; height: 100%;" v-if="!isEntityDetail" >
-  <div class="cn-entity-detail" id="cn-entity-detail" v-else>
+      <div id="cn-panel" class="cn-panel2">
-    <div class="entity-detail__body">
+        <div class="panel__time" :style="scrolledOut ? '' : 'position: fixed; top: 70px; padding-right: 10px;'">
-      <div class="cn-panel2" id="cn-panel">
+          <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>
         <panel-chart-list
                 ref="panelChartList"
                 :time-filter="timeFilter"
                 :data-list="chartList"
                 :panel-lock="panelLock"
                 :entity="entity"
+                :whole-screen-scroll="panel.params && panel.params.wholeScreenScroll"
         >
         </panel-chart-list>
       </div>
     </div>
+    <div class="cn-entity-detail" id="cn-entity-detail" v-else>
+      <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"
+          >
+          </panel-chart-list>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { ref } from 'vue'
+import DnsScreen from '@/views/charts/wholeScreenScroll/DnsScreen'
 import { panelTypeAndRouteMapping, wholeScreenRouterMapping } from '@/utils/constants'
 import { api, getPanelList, getChartList } from '@/utils/api'
 import { getNowTime } from '@/utils/date-util'
-import { scrollToTop } from '@/utils/tools'
 import {
   isGroup,
   isBlock,
   getGroupHeight
 } from './charts/tools'
 
-import DnsScreen from '@/views/charts/wholeScreenScroll/DnsScreen'
-
 export default {
   name: 'Panel',
-  components: {
-    DnsScreen
-  },
   props: {
     entity: Object,
     isEntityDetail: Boolean,
     typeName: String
   },
+  components: {
+    DnsScreen
+  },
   data () {
     return {
       chartList: [], // 普通panel的chart
@@ -93,18 +77,9 @@ export default {
       detailTabs: [],
       detailChartList: [],
       currentTab: '',
+      scrolledOut: false,
       isCryptocurrency: false, // 是否为挖矿列表
-      scroll: {
+      wholeScreenRouterMapping
-        prevent: false, // 阻止滚动
-        prevScrollTop: 0 // 前一次滚动条位置
-      },
-      wholeScreenRouterMapping,
-      isFullScreen: true, // 当前是否为全屏滚动页面
-      // isSecondScreen:false,//当前是否为全屏滚动页面下面的页面
-      screenNum: 1, // 当前屏幕编号
-      wheel: null, // 鼠标滚动事件
-      allDone: false,
-      isReachSecond: false
     }
   },
   async mounted () {
@@ -114,39 +89,7 @@ export default {
     if (!this.$_.isEmpty(this.detailTabs)) {
       this.currentTab = this.detailTabs[0].id + ''
     }
-
+    window.addEventListener('mousewheel', this.handleWholeScreen)
-    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({})
@@ -161,7 +104,11 @@ export default {
     const dateRangeValue = isEntityDetail(panelType) ? 60 * 24 : 60
     const { startTime, endTime } = getNowTime(dateRangeValue)
     const timeFilter = ref({ startTime, endTime, dateRangeValue })
+
+    const { currentRoute } = useRouter()
+
     return {
+      currentPath: currentRoute.value.path,
       panelType,
       panel,
       timeFilter,
@@ -169,6 +116,28 @@ export default {
     }
   },
   methods: {
+    handleWholeScreen (e) {
+      const screenBoxDom = document.getElementById('wholeScreenBox')
+      const panelListDom = document.getElementById('panelList')
+      if (screenBoxDom) {
+        if (screenBoxDom.contains(e.target)) {
+          if (e.deltaY > 0) {
+            this.scrolledOut = true
+            screenBoxDom.classList.add('cn-panel2__whole-screen--collapse')
+          }
+        } else {
+          if (e.deltaY < 0 && panelListDom.scrollTop === 0) {
+            this.scrolledOut = false
+            screenBoxDom.classList.remove('cn-panel2__whole-screen--collapse')
+          }
+        }
+      }/* else {
+        const panelListDom = document.getElementById('panelList')
+        if (panelListDom.scrollTop === 0 && e.deltaY < 0) {
+          this.scrolledOut = false
+        }
+      }*/
+    },
     async init () {
       const panels = await getPanelList({ type: this.panelType })
       if (panels && panels.length > 0) {
@@ -196,9 +165,6 @@ 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()
@@ -266,226 +232,7 @@ export default {
     },
     groupParentCalcHeight (params) {
       this.$refs.panelChartList.groupParentCalcHeight(params.chart, params.childrenList)
-    },
-    wholeScreenScroll (e) {
-      if (this.scroll.prevent) {
-        return
-      }
-      this.scroll.prevent = true
-      const clientHeight = e.target.clientHeight
-      const currentScrollTop = e.target.scrollTop
-      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) {
-          scrollToTop(e.target, 0, 200, 'up')
-          setTimeout(() => {
-            this.scroll.prevScrollTop = e.target.scrollTop
-          }, 210)
-        }
-      }
-      const vm = this
-      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>

src/views/charts/PanelChart.vue

@@ -41,7 +41,6 @@
         :time-filter="timeFilter"
         @getChartData="getChartData"
         @showLoading="showLoading"
-        @handleSpecialChartFinishState="handleSpecialChartFinishState"
         :tabHandleClickType="tabHandleClickType"
     ></chart>
   </div>
@@ -151,8 +150,7 @@ export default {
           }
         ] // table的所有数据
       },
-      tabHandleClickType: '',
+      tabHandleClickType: ''
-      isFinish: false
     }
   },
   computed: {
@@ -266,38 +264,21 @@ 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 () {

src/views/charts/PanelChartList.vue

@@ -1,18 +1,8 @@
 <template>
-   <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"
+        id="gridLayout"
         ref="layout"
-        v-if="gridLayoutShow"
         v-model:layout="normalCopyDataList"
         :col-num="30"
         :is-draggable="!panelLock"
@@ -44,7 +34,6 @@
             :entity="entity"
             @groupShow="groupShow"
             @showFullscreen="showFullscreen"
-            @finishOne="finishOne"
         ></panel-chart>
       </grid-item>
     </grid-layout>
@@ -76,24 +65,19 @@
 <script>
 import PanelChart from '@/views/charts/PanelChart'
 import VueGridLayout from 'vue-grid-layout'
-import { getGroupHeight, getTypeCategory, isGroup } from './charts/tools'
+import { getGroupHeight, isGroup, getTypeCategory } 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 // 看板中所有图表信息
@@ -116,11 +100,7 @@ export default {
         chartInfo: {}
       },
       scrollTop: 0,
-      scrollTopTimer: null,
+      scrollTopTimer: null
-      wholeScreenRouterMapping,
-      isWholeScreenScroll: false,
-      haveDoneChartNum: 0,
-      allDone: false
     }
   },
   methods: {
@@ -136,23 +116,11 @@ export default {
           this.$refs['chart' + item.id].getChartData()
         }
       })
-
-      this.$refs.dnsScreen.reload()
     },
     showFullscreen (show, chartInfo) {
       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) {
@@ -197,12 +165,6 @@ export default {
       }
     }
   },
-  setup (props) {
-    const { currentRoute } = useRouter()
-    return {
-      currentPath: currentRoute.value.path
-    }
-  },
   watch: {
     dataList: {
       deep: true,
@@ -211,52 +173,45 @@ export default {
         this.gridLayoutShow = false
         this.gridLayoutLoading = true
 
-        this.isWholeScreenScroll = false
-
-        // const arr = this.$_.cloneDeep(n)
         this.noData = !n || n.length < 1
-        if (n) {
+        const tempList = n.map(item => {
-          const tempList = n.map(item => {
+          if (item.params) {
-            if (item.params) {
+            item.params.showHeader = true
-              item.params.showHeader = true
+          }
-            }
+          const height = item.h
-            const height = item.h
+          return {
-            return {
+            ...item,
-              ...item,
+            i: item.id,
-              i: item.id,
+            w: item.w,
-              w: item.w,
+            h: height,
-              h: height,
+            x: item.x || 0,
-              x: item.x || 0,
+            y: item.y || 0,
-              y: item.y || 0,
+            params: item.params,
-              params: item.params,
+            category: getTypeCategory(item.type) // 类别，是echarts还是map等等
-              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
           })
-          this.$nextTick(() => {
+          setTimeout(() => {
-            this.copyDataList = JSON.parse(JSON.stringify(tempList))
+            this.gridLayoutShow = true
-            this.normalCopyDataList = this.copyDataList.filter(function (item) {
-              return item.y >= -1
-            })
-            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
           })
-        }
+          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
+        })
       }
     }
   }

src/views/charts/charts/ChartMap.vue

@@ -157,74 +157,70 @@ export default {
   methods: {
     unitConvert,
     initMap (id) {
-      try {
+      // 初始化插件
-        // 初始化插件
+      const chart = am4Core.create(id, am4Maps.MapChart)
-        const chart = am4Core.create(id, am4Maps.MapChart)
+      chart.geodata = getGeoData(storageKey.iso36112WorldLow)
-        chart.geodata = getGeoData(storageKey.iso36112WorldLow)
+      chart.projection = new am4Maps.projections.Miller()
-        chart.projection = new am4Maps.projections.Miller()
+      this.myChart = shallowRef(chart)
-        this.myChart = shallowRef(chart)
+      // 初始化多边形series（即地图series）
-        // 初始化多边形series（即地图series）
+      this.polygonSeries = shallowRef(this.polygonSeriesFactory())
-        this.polygonSeries = shallowRef(this.polygonSeriesFactory())
+      // 如果是散点地图，再初始化散点series。DNS dashboard的地图是散点地图
-        // 如果是散点地图，再初始化散点series。DNS dashboard的地图是散点地图
+      if (this.isMapPoint) {
-        if (this.isMapPoint) {
+        this.worldImageSeries = shallowRef(this.imageSeriesFactory())
-          this.worldImageSeries = shallowRef(this.imageSeriesFactory())
+      }
-        }
+      // 渲染
-        // 渲染
+      this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
-        this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
 
-        // 地图点击事件
+      // 地图点击事件
-        if (this.isMapBlock) {
+      if (this.isMapBlock) {
-          this.polygonSeries.mapPolygons.template.events.on('hit', async ev => {
+        this.polygonSeries.mapPolygons.template.events.on('hit', async ev => {
-            const countryId = ev.target.dataItem.dataContext.id
+          const countryId = ev.target.dataItem.dataContext.id
-            if (countryId) {
+          if (countryId) {
-              ev.target.series.chart.zoomToMapObject(ev.target)
+            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
-            if (countryId) {
+            const geoData = getGeoData(countryId)
-              const targetMapObject = this.polygonSeries.getPolygonById(countryId)
+            if (geoData) {
-              targetMapObject.series.chart.zoomToMapObject(targetMapObject)
+              this.countrySeries = shallowRef(this.polygonSeriesFactory())
-              const geoData = getGeoData(countryId)
+              this.countrySeries.geodata = geoData
-              if (geoData) {
+              this.polygonSeries.hide()
-                this.countrySeries = shallowRef(this.polygonSeriesFactory())
+              const country = ev.target.dataItem.dataContext.serverCountry
-                this.countrySeries.geodata = geoData
+              const queryParams = { ...this.queryParams, country }
-                this.countryImageSeries = shallowRef(this.imageSeriesFactory())
+              const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams))
-                this.polygonSeries.hide()
+              this.loadAm4ChartMap(this.countrySeries, null, country, chartData)
-                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上的数据
+      } else if (this.isMapPoint) {
-        if (!_.isEmpty(this.chartInfo.params.legendUrl)) {
+        this.worldImageSeries.mapImages.template.events.on('hit', async ev => {
-          setTimeout(() => {
+          const countryId = ev.target.dataItem.dataContext.id
-            this.chartInfo.params.legendUrl.forEach((url, i) => {
+          ev.target.isHover = false
-              getData(url).then(data => {
+          if (countryId) {
-                this.legends[i].value = data
+            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
             })
           })
-        }
+        })
-      } finally {
-        this.$emit('finishOneMap')
       }
     },
     polygonSeriesFactory () {

src/views/charts/wholeScreenScroll/DnsScreen.vue

@@ -1,5 +1,5 @@
 <template>
-  <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 class="chart-list" style="display:grid;height:calc(100vh - 90px);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"
@@ -11,7 +11,6 @@
                 :chart-info="item"
                 :time-filter="timeFilter"
                 :entity="entity"
-                @finishOne="finishOne"
         ></panel-chart>
     </div>
   </div>
@@ -37,9 +36,6 @@ export default {
           this.$refs['chart' + item.id].getChartData()
         }
       })
-    },
-    finishOne () {
-      this.$emit('finishOne')
     }
   },
   computed: {