CN-430 DNS Dashboard添加满屏翻页效果

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

@@ -65,7 +65,7 @@
     }
   }
 }
-.cn-panel2 .chart-list > .vue-grid-layout > .vue-grid-item > .panel-chart .chart-header {
+.cn-panel2 .chart-list > .vue-grid-layout > .vue-grid-item > .panel-chart .chart-header,.cn-panel2 .chart-list > .dns-screen> .panel-chart .chart-header {
   border-bottom: 1px solid $--right-box-border-color;
 }
 .cn-panel2 .chart-list > .vue-grid-layout > .vue-grid-item > .panel-chart .chart-header.is-group-collapse {

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

@@ -11,7 +11,7 @@
     }
   }
   .chart-list {
-    &>.vue-grid-layout>.vue-grid-item {
+    &>.vue-grid-layout>.vue-grid-item, &>.dns-screen {
       &>.panel-chart {
         border: 1px solid $--chart-box-border-color;
         background-color: #FFFFFF;

src/views/charts/Panel.vue

@@ -185,7 +185,6 @@ export default {
       this.$refs.panelChartList.groupParentCalcHeight(params.chart, params.childrenList)
     },
     wholeScreenScroll (e) {
-      return
       if (this.scroll.prevent) {
         return
       }

src/views/charts/PanelChart.vue

@@ -206,6 +206,7 @@ export default {
         if (requestUrl && requestUrl.indexOf('dnsServerRole') > -1) {
           this.queryParams.dnsServerRole = extraParams.dnsServerRole || dnsServerRole.RTDNS
         }
+
         if (requestUrl) {
           get(replaceUrlPlaceholder(requestUrl, this.queryParams)).then(response => {
             if (response.code === 200) {

src/views/charts/PanelChartList.vue

@@ -1,12 +1,17 @@
 <template>
-  <div style="height: calc(100vh - 70px);width: 100%;background-color: lightyellow;display: none;" v-if="wholeScreenScroll">
-    <dns-screen v-if="currentPath === wholeScreenRouterMapping.dns"></dns-screen>
+  <div 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 :id='`chartList${(isGroup ? "Group" : "") + timestamp}`' class="chart-list" ref="layoutBox">
     <grid-layout
         ref="layout"
         v-if="gridLayoutShow"
-        v-model:layout="copyDataList"
+        v-model:layout="normalCopyDataList"
         :col-num="30"
         :is-draggable="!panelLock"
         :is-resizable="!panelLock"
@@ -16,7 +21,7 @@
         :use-css-transforms="false"
     >
       <grid-item
-          v-for="item in copyDataList"
+          v-for="item in normalCopyDataList"
           :key="item.id"
           :h="item.h"
           :i="item.i"
@@ -95,7 +100,7 @@ export default {
       gridLayoutLoading: false,
       gridLayoutShow: false,
       rowHeight: 40,
-      copyDataList: [],
+      copyDataList: [], // 所有的图表
       noData: false, // no data
       tempDom: { height: '', width: '' },
       stepWidth: null,
@@ -120,8 +125,12 @@ export default {
     },
     reload () {
       this.copyDataList.forEach(item => {
+        if (this.$refs['chart' + item.id]) {
           this.$refs['chart' + item.id].getChartData()
+        }
       })
+
+      this.$refs.dnsScreen.reload()
     },
     showFullscreen (show, chartInfo) {
       this.fullscreen.chartInfo = chartInfo
@@ -162,6 +171,11 @@ export default {
           return ''
         }
       }
+    },
+    normalCopyDataList: function () {
+      return this.copyDataList.filter(function (item) {
+        return item.y >= 0
+      })
     }
   },
   setup (props) {

src/views/charts/wholeScreenScroll/DnsScreen.vue

@@ -1,9 +1,50 @@
 <template>
-  <div>dns screen</div>
+  <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"
+          :key="item.id"
+          :ref="'grid-item' + item.id"
+          class="dns-screen"
+          :style="'grid-area: '+(item.y+1+30) +'/ '+(item.x+1) +' / '+(item.y+item.h+1+30) +'/ '+(item.x+item.w+1)+';'"
+      >
+        <panel-chart
+                :ref="'chart' + item.id"
+                :chart-info="item"
+                :time-filter="timeFilter"
+                :entity="entity"
+        ></panel-chart>
+    </div>
+  </div>
 </template>
 
 <script>
+import PanelChart from '@/views/charts/PanelChart'
+
 export default {
-  name: 'DnsScreen'
+  name: 'DnsScreen',
+  components: {
+    PanelChart
+  },
+  props: {
+    timeFilter: Object, // 时间范围
+    copyDataList: Array, // 图表信息
+    entity: Object
+  },
+  methods: {
+    reload () {
+      this.copyDataList.forEach(item => {
+        if (this.$refs['chart' + item.id]) {
+          this.$refs['chart' + item.id].getChartData()
+        }
+      })
+    }
+  },
+  computed: {
+    copyDataList: function () {
+      return this.copyDataList.filter(function (item) {
+        return item.y < 0
+      })
+    }
+  }
+
 }
 </script>