feat:新增功能

1.dashboard-panel图表加载修改为懒加载
fix:修改BUG
1.dashboard图表全屏去掉cancle和ok按钮

nezha-fronted/src/components/charts/chart-list.vue

@@ -60,17 +60,83 @@ export default {
       },
       panelId: '',
       timer: null,
+      dataTotalList:[],//懒加载：总记录数
+      isPage:true,//是否分页懒加载
+      currentRecordNum:0,//懒加载：本次取记录的index，第一次从0开始取，每次取3行
+      lineNum:3,//每页加载的行数
+      pagePanelId:''//当前分页的panelId
     };
   },
   computed: {},
   watch: {},
   methods: {
+    initCurrentRecordNum(){
+      this.currentRecordNum = 0;
+    },
+    cleanData(){
+      if (this.dataList.length > 0 && this.$refs.editChart) {
+        this.$refs.editChart.forEach((item) => {
+          item.clearData();
+        });
+      }
+      this.dataList = [];
+    },
     initData(filter) {
       this.dataList = [];
       // 内含 panelId,开始时间,结束时间
       this.filter = filter;
+      this.pagePanelId = this.filter.panelId;
       this.getData(this.filter);
     },
+    pageDataList(isAdd,panelId){
+      if(panelId!==this.pagePanelId){
+        this.currentRecordNum = 0;
+      }
+      if(this.dataTotalList && this.dataTotalList.length>0){
+        if(this.currentRecordNum>=this.dataTotalList.length){
+          //alert('数据加载完毕！');
+        }else {
+          let dataTmpList = [];
+          let spanSum = 0;
+          let line = 0;//行数
+          let isDataFull=false;
+          let curRecNum = this.currentRecordNum;
+          let len = this.dataTotalList.length;
+          for(let i=curRecNum;!isDataFull && i<len;i++){
+            if(line<this.lineNum){
+              let item = this.dataTotalList[i];
+              let span = item.span;
+              let sumTmp = spanSum+span;
+              if(sumTmp<=12){
+                spanSum =sumTmp;
+              }else{//大于12表示够1行了，
+                line = line +1;
+                spanSum = span;
+              }
+              if(line<this.lineNum){
+                dataTmpList.push(item);
+                this.currentRecordNum = i+1;
+              }else{
+                this.currentRecordNum = i
+                break;
+              }
+            }else {//数据加载够了
+              isDataFull=true;
+              this.currentRecordNum = i;
+              break;
+            }
+          }
+          if(isAdd){
+            let oldDataListLen = this.dataList.length;
+            let dataListTmp = this.dataList;
+            this.dataList =  dataListTmp.concat(dataTmpList);
+            this.dataSetFirst(dataTmpList,oldDataListLen);
+          }else {
+            this.dataList = dataTmpList;
+          }
+        }
+      }
+    },
     // 获取panel详情数据,获取panel下所有chart列表
     getData(params) {
       //param   目前没有用
@@ -87,25 +153,33 @@ export default {
       this.$get('panel/'+ params.panelId+'/charts'+searchTitleStr).then(response => {
         if (response.code === 200) {
           if(response.data.list){
-            this.dataList = response.data.list;
+            this.dataTotalList =  response.data.list;
           }else {
-            this.dataList = response.data;
+            this.dataTotalList = response.data;
+          }
+          if(this.isPage){
+            this.pageDataList();
+          }else {
+            this.dataList = this.dataTotalList;
           }
           if (this.dataList.length > 0 && this.$refs.editChart) {
             this.$refs.editChart.forEach((item) => {
               item.showLoad();//之后要实现
             });
           }
-          //alert(JSON.stringify(response)); 查着，返回的内容就没有图表表达式了？？
           this.dataSetFirst(this.dataList);
         }
       });
     },
     // arr: 该panel下图表list,生成该看板下所有图表
-    dataSetFirst(arr) {
+    dataSetFirst(arr,oldDataListLen) {
       if (arr.length) {
         arr.forEach((item, index) => {
-          this.getChartData(item, index);
+          let realIndex = index;
+          if(oldDataListLen){
+            realIndex += oldDataListLen;
+          }
+          this.getChartData(item, realIndex);
         });
       }
     },
@@ -136,11 +210,9 @@ export default {
             startTime = this.filter.start_time;
             endTime = this.filter.end_time;
           }
-          //this.$emit('@on-refresh-time', startTime,endTime);
         } else if(filterType==='searchTime'){
           startTime = this.filter.start_time;
           endTime = this.filter.end_time;
-          //this.$emit('@on-refresh-time', startTime,endTime);
           this.$parent.refreshTime(startTime,endTime);
         }else {
            startTime = this.filter.start_time;
@@ -248,7 +320,6 @@ export default {
                   }
                 }
               });
-              // chartData, seriesItem, panelsId, filter
               if (chartItem.type === 'table') {//表格
                 this.$refs.editChart[index].setData(chartItem, tableData,
                   this.filter.panelId, this.filter);
@@ -285,7 +356,6 @@ export default {
       this.$nextTick(() => {
         const chartBox = document.getElementsByClassName('chartBox');
         chartBox[index].style.width = `${(size / 12) * 100}%`;
-        //chartBox[index].style.height = height;
       });
     },
 

nezha-fronted/src/components/charts/chart-table.vue

@@ -43,7 +43,7 @@
         </el-table>
     </div>
     <!--全屏-->
-    <el-dialog :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" >
+      <el-dialog :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%"  @close="screenModal = false" >
         <div class="clearfix element-top-border">
             <div class="float-left table-title">
                 {{data.title}}
@@ -65,10 +65,7 @@
             </el-table>
         </div>
         <div class=" element-bottom-border"></div>
-        <span slot="footer" class="dialog-footer">
+        <span slot="footer" class="dialog-footer"></span>
-            <el-button @click="screenModal = false">{{$t('dashboard.panel.cancel')}}</el-button>
-            <el-button type="primary" @click="screenModal = false">{{$t('dashboard.panel.confirm')}}</el-button>
-        </span>
     </el-dialog>
 </div>
 </template>
@@ -218,6 +215,8 @@ export default {
     computed: {},
     watch: {},
     methods: {
+        clearData(){
+        },
         showLoad() {
             this.tableLoading = true;
         },

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -33,8 +33,8 @@
     <el-dialog class="line-chart-block-modal"
       :title="$t('dashboard.panel.view')"
       :visible.sync="screenModal"
-      width="90%"
+       width="90%"
-      :before-close="handleClose"
+       @close="screenModal = false"
        @opened="initDialog">
      <el-row class="element-top-border" >
         <div class="float-right pt10" >
@@ -53,10 +53,7 @@
       </el-row>
       <div class="line-area " ref="screenShowArea"  id="screenShowArea"></div>
       <div class=" element-bottom-border" ></div>
-      <span slot="footer" class="dialog-footer" >
+      <span slot="footer" class="dialog-footer" ></span>
-        <el-button @click="screenModal = false">{{$t('dashboard.panel.cancel')}}</el-button>
-        <el-button type="primary" @click="screenModal = false">{{$t('dashboard.panel.confirm')}}</el-button>
-      </span>
 
     </el-dialog>
     <!--</Modal>-->
@@ -212,6 +209,11 @@ export default {
   },
   watch: {},
   methods: {
+    clearData(){
+      if(this.echartStore){
+        this.echartStore.clear();
+      }
+    },
     // chartSite用于区分是全屏显示还是局部显示
     initChart(chartInfo, dataArg, ele, chartSite,legend) {
       this.firstShow = true; // 展示操作按键

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -87,7 +87,7 @@
                 </div>
             </div>
         </div>
-        <div class="table-list">
+      <div class="table-list" @scroll="onScroll"  id="tableList">
             <div class="box-content">
                 <chart-list @on-edit-chart="editData" @on-refresh-time="refreshTime" @on-remove-chart="removeData" ref="chartList"></chart-list>
             </div>
@@ -287,6 +287,8 @@ export default {
             //this.$refs.searchInput.select();
             this.showPanel = val
             this.filter.panelId = this.showPanel.id;
+            this.$refs.chartList.initCurrentRecordNum();
+            this.$refs.chartList.cleanData();
             this.getData(this.filter);
             
         },
@@ -513,7 +515,17 @@ export default {
             }
             this.filter.panelId = this.showPanel.id;
             this.getData(this.filter);
-        }
+        },
+        // 滚动事件触发下拉加载
+        onScroll () {
+          let dom = document.getElementById('tableList');
+          let scrollHeight = dom.scrollHeight;//整个可滑动区域高度
+          let clientHeight = dom.clientHeight;//可视高度
+          let scrollTop = dom.scrollTop;//滚动条顶部与整个scrollHeight顶部的距离
+          if (scrollHeight - clientHeight - scrollTop <= 20) {//滚动到底部，才加载新数据
+            this.$refs.chartList.pageDataList(true,this.showPanel.id);
+          }
+        },
     },
     created() {
         this.getTableData();