CN-497 DNS Dashboard整屏滚动更换方案

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>