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,37 +1,23 @@
 <template>
-  <div id="panelList" style="padding: 10px 10px 20px 10px; overflow: auto" v-if="!isEntityDetail" >  <!--  @scroll="wholeScreenScroll" -->
+  <div class="panel-box">
+    <div
+        class="cn-panel2 cn-panel2__whole-screen"
+        v-if="panel.params && panel.params.wholeScreenScroll"
+        id="wholeScreenBox"
+    >
+      <dns-screen v-if="currentPath === wholeScreenRouterMapping.dns"
+                  :copy-data-list="chartList"
+                  ref="dnsScreen"
+                  :time-filter="timeFilter"
+                  :entity="entity">
+      </dns-screen>
+    </div>
+    <div id="panelList" style="padding: 10px 10px 20px 10px; overflow: auto; height: 100%;" v-if="!isEntityDetail" >
       <div id="cn-panel" class="cn-panel2">
-      <div class="panel__time">
+        <div class="panel__time" :style="scrolledOut ? '' : 'position: fixed; top: 70px; padding-right: 10px;'">
           <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"
@@ -39,7 +25,6 @@
                 :panel-lock="panelLock"
                 :entity="entity"
                 :whole-screen-scroll="panel.params && panel.params.wholeScreenScroll"
-              @finish="finish"
         >
         </panel-chart-list>
       </div>
@@ -58,33 +43,32 @@
         </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"
         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,11 +173,7 @@ 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 => {
           if (item.params) {
             item.params.showHeader = true
@@ -239,9 +197,7 @@ export default {
           })
           setTimeout(() => {
             this.gridLayoutShow = true
-              this.isWholeScreenScroll = this.wholeScreenScroll// 为了解决加载页面时，滚动条先长后短的问题，即 数据要一起显示
           })
-
           setTimeout(() => {
             this.copyDataList.forEach(item => {
               if (isGroup(item.type) && !item.firstShow) {
@@ -259,6 +215,5 @@ export default {
       }
     }
   }
-  }
 }
 </script>

src/views/charts/charts/ChartMap.vue

@@ -157,7 +157,6 @@ export default {
   methods: {
     unitConvert,
     initMap (id) {
-      try {
       // 初始化插件
       const chart = am4Core.create(id, am4Maps.MapChart)
       chart.geodata = getGeoData(storageKey.iso36112WorldLow)
@@ -223,9 +222,6 @@ export default {
           })
         })
       }
-      } finally {
-        this.$emit('finishOneMap')
-      }
     },
     polygonSeriesFactory () {
       const polygonSeries = this.myChart.series.push(new am4Maps.MapPolygonSeries())

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: {