NEZ-3222 fix：notebook 中 table 不使用分页

nezha-fronted/src/assets/css/components/page/notebook/notebook.scss

@@ -118,6 +118,18 @@
         }
       }
     }
+    .table-chart-wrap{
+      height: auto !important;
+      min-height: 100px;
+      display: flex;
+      flex-direction: column;
+      .panel-chart{
+        flex: 1;
+        .tabel-chart-box{
+          height: auto !important;
+        }
+      }
+    }
     .no-data{
       text-align: center;
       position: absolute;

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

@@ -2,7 +2,7 @@
  <template>
   <!-- <div :style="showHeader&&chartInfo.param.showHeader ? '' : 'padding-top: 15px;'" class="nz-chart" :class="showHeader&&chartInfo.param.showHeader ? '' : 'no-header'" > -->
   <div class="nz-chart" :class="chartInfo.param.showHeader===0 ? 'no-header' : ''">
-    <loading :loading="loading"></loading>
+    <!-- <loading :loading="loading"></loading> -->
     <chart-no-data  v-if="isNoData || isError || chartChildrenData || (isExportHtml&&(isAutotopology(chartInfo.type) || isDiagram(chartInfo.type) || isMap(chartInfo.type)))"></chart-no-data>
     <template v-else>
       <chart-time-series
@@ -174,6 +174,7 @@
         :globalVariables="globalVariables"
       ></chart-endpoint-info>
       <chart-table
+        :from="from"
         :ref="'chart' + chartInfo.id"
         v-if="isTable(chartInfo.type)"
         :chart-data="chartData"

nezha-fronted/src/components/chart/chart/chartTable.vue

@@ -4,7 +4,7 @@
       ref="dataTable"
       class="chart-table"
       :data="tableData"
-      :height="'100%'"
+      :height="from==='notebook'?undefined:'100%'"
       :width="'100%'"
       border
       @sort-change="tableDataSort"
@@ -92,6 +92,9 @@ import lodash from 'lodash'
 export default {
   name: 'chart-table',
   mixins: [chartMixin, chartFormat],
+  props: {
+    from: String
+  },
   data () {
     return {
       tableData: [],
@@ -116,7 +119,7 @@ export default {
       }
     },
     showPagination () {
-      if (this.chartInfo.param.tableOptions && this.chartInfo.param.tableOptions.pagination === 'disabled') {
+      if ((this.chartInfo.param.tableOptions && this.chartInfo.param.tableOptions.pagination === 'disabled') || this.from === 'notebook') {
         return false
       } else {
         return true
@@ -141,10 +144,15 @@ export default {
     // 设置默认排序
     setDefaultSort () {
       const columns = this.chartInfo.param.columns
-      const defaultSortColumn = lodash.get(this, 'chartInfo.param.tableOptions.defaultSortColumn', columns[0].title)
+      if (columns.length) {
+        let defaultSortColumn = lodash.get(this, 'chartInfo.param.tableOptions.defaultSortColumn', undefined)
+        if (!defaultSortColumn) {
+          defaultSortColumn = columns[0].title
+        }
         const defaultSort = lodash.get(this, 'chartInfo.param.tableOptions.defaultSort', 'asc')
         const order = defaultSort === 'asc' ? 'ascending' : 'descending'
         this.$refs.dataTable.sort(defaultSortColumn, order)
+      }
     },
     // 设置pageSize
     setPageSize () {

nezha-fronted/src/components/common/bottomBox/tabs/notebookTab.vue

@@ -29,7 +29,7 @@
               <div @click="download('pdf')">{{$t('notebook.downloadAs',{format:'PDF'})}}</div>
             </el-dropdown-item>
             <el-dropdown-item v-has="'notebook_view'">
-              <div @click="download('markdown')">{{$t('notebook.downloadAs',{format:'markdown'})}}</div>
+              <div @click="download('html')">{{$t('notebook.downloadAs',{format:'markdown'})}}</div>
             </el-dropdown-item>
             <el-dropdown-item v-has="'notebook_view'">
               <div @click="downloadJson()">{{$t('notebook.downloadNotebook')}} JSON</div>

nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue

@@ -859,6 +859,7 @@
               popper-class="right-box-select-top prevent-clickoutside"
               size="small"
               @change="change"
+              :disabled="from==='notebook'"
               >
               <el-option :label="$t('overall.enabled')" value="enabled"></el-option>
               <el-option :label="$t('overall.disabled')" value="disabled"></el-option>
@@ -1565,6 +1566,9 @@ export default {
             },
             dataLink: this.chartConfig.param.dataLink
           }
+          if (this.from === 'notebook') {
+            this.chartConfig.param.tableOptions.pagination = 'disabled'
+          }
           break
         case 'log':
           if (this.oldType === 'log') {

nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue

@@ -557,9 +557,6 @@ export default {
         }
         delete this.editChart.elements
       }
-      if (this.from === 'notebook') {
-        this.editChart.span = 12
-      }
     },
     editChartChange (newEditChart) {
       this.editChart = {
@@ -725,6 +722,9 @@ export default {
                 defaultSort: null
               }
             }
+            if (this.from === 'notebook') {
+              obj.param.tableOptions.pagination = 'disabled'
+            }
           }
           if (obj.type === 'stat') {
             if (!obj.param.sparklineMode) { obj.param.sparklineMode = 'none' }

nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue

@@ -510,6 +510,7 @@
               popper-class="right-box-select-top prevent-clickoutside"
               size="small"
               @change="change"
+              :disabled="from==='notebook'"
               >
               <el-option :label="$t('overall.enabled')" value="enabled"></el-option>
               <el-option :label="$t('overall.disabled')" value="disabled"></el-option>
@@ -1193,6 +1194,9 @@ export default {
             },
             dataLink: this.chartConfig.param.dataLink
           }
+          if (this.from === 'notebook') {
+            this.chartConfig.param.tableOptions.pagination = 'disabled'
+          }
           break
       }
       this.oldType = type

nezha-fronted/src/components/page/notebook/notebookList.vue

@@ -18,7 +18,10 @@
     >
       <div
         class="panel-chart-wrap"
-        :class="{'text-chart-wrap':item.type==='text'}"
+        :class="{
+          'text-chart-wrap':item.type==='text',
+          'table-chart-wrap':item.type==='table'
+        }"
         v-for="item in copyDataList"
         :key="item.id">
         <panel-chart

nezha-fronted/src/entrance/exportHtml/App.vue

@@ -163,5 +163,8 @@ export default {
     body {
       height: auto !important;
     }
+    .panel-chart-wrap{
+      page-break-inside: avoid;
+    }
   }
 </style>