From e5c12fff9c21285575f0bb5c92b71b411bbe26e0 Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Fri, 13 Oct 2023 10:46:19 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-3222=20fix=EF=BC=9Anotebook=20=E4=B8=AD=20t?=
 =?UTF-8?q?able=20=E4=B8=8D=E4=BD=BF=E7=94=A8=E5=88=86=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/page/notebook/notebook.scss    | 12 +++++++++++
 nezha-fronted/src/components/chart/chart.vue  |  3 ++-
 .../src/components/chart/chart/chartTable.vue | 20 +++++++++++++------
 .../common/bottomBox/tabs/notebookTab.vue     |  2 +-
 .../common/rightBox/chart/chartConfig.vue     |  4 ++++
 .../common/rightBox/chart/chartRightBox.vue   |  6 +++---
 .../rightBox/chart/systemChartConfig.vue      |  4 ++++
 .../components/page/notebook/notebookList.vue |  5 ++++-
 nezha-fronted/src/entrance/exportHtml/App.vue |  3 +++
 9 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/page/notebook/notebook.scss b/nezha-fronted/src/assets/css/components/page/notebook/notebook.scss
index f1cf5020e..131d428e7 100644
--- a/nezha-fronted/src/assets/css/components/page/notebook/notebook.scss
+++ b/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;
diff --git a/nezha-fronted/src/components/chart/chart.vue b/nezha-fronted/src/components/chart/chart.vue
index 269e14606..0e8be79b7 100644
--- a/nezha-fronted/src/components/chart/chart.vue
+++ b/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"
diff --git a/nezha-fronted/src/components/chart/chart/chartTable.vue b/nezha-fronted/src/components/chart/chart/chartTable.vue
index a0a22807f..c95566d1e 100644
--- a/nezha-fronted/src/components/chart/chart/chartTable.vue
+++ b/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)
-      const defaultSort = lodash.get(this, 'chartInfo.param.tableOptions.defaultSort', 'asc')
-      const order = defaultSort === 'asc' ? 'ascending' : 'descending'
-      this.$refs.dataTable.sort(defaultSortColumn, order)
+      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 () {
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/notebookTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/notebookTab.vue
index e6c701e71..98d103b6d 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/notebookTab.vue
+++ b/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>
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
index 4bb9224f0..938298b9f 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
+++ b/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') {
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
index b510a54f8..3f6181ea5 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/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' }
diff --git a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
index d58db8254..5cc528fc0 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
+++ b/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
diff --git a/nezha-fronted/src/components/page/notebook/notebookList.vue b/nezha-fronted/src/components/page/notebook/notebookList.vue
index 9288a32f2..548171b5d 100644
--- a/nezha-fronted/src/components/page/notebook/notebookList.vue
+++ b/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
diff --git a/nezha-fronted/src/entrance/exportHtml/App.vue b/nezha-fronted/src/entrance/exportHtml/App.vue
index c9b64ce2e..b843694f9 100644
--- a/nezha-fronted/src/entrance/exportHtml/App.vue
+++ b/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>