NEZ-2903 feat：dashboard 表格图表增加默认排序等配置项

nezha-fronted/src/assets/css/components/chart/chart.scss

@@ -805,6 +805,27 @@
 
 .tabel-chart-box{
   position: relative;
+  display: flex;
+  flex-direction: column;
+  .chart-table{
+    .value-mapping-table {
+      padding: 10px;
+      color: $--color-text-primary !important;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+  .tabel-chart-pagination{
+    height: auto !important;
+    padding-top: 6px;
+    overflow: hidden;
+    overflow-x: auto;
+    overflow-y: hidden;
+    .el-pagination{
+      text-align: center;
+    }
+  }
   .chart-canvas-tooltip{
     height: auto !important;
   }

nezha-fronted/src/assets/css/components/charts/chart.scss

@@ -520,24 +520,21 @@
   border: unset !important;
 }
 .chart-table ,.chart-preview-dialog {
-  .nz-table .el-table__row .costom-value .cell{
+  .nz-table .el-table__row .custom-value .cell{
     padding: 1px 0;
   }
 }
 .chart-table {
-  .costom-value{
+  .custom-value{
     padding: 0 !important;
   }
-  .el-table__row .costom-value .cell{
+  .el-table__row .custom-value .cell{
     padding: 2px 1px;
+    display: block;
   }
   div{
     padding: 0;
   }
-  .value-mapping-table {
-    padding: 10px;
-    color: $--color-text-primary !important;
-  }
 }
 .line-area-box{
   height: 100%;

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

@@ -66,7 +66,7 @@
                 {{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
               </template>
             </el-table-column>
-            <el-table-column :label="$t('overall.value')" class-name="costom-value" min-width="90" prop="value"
+            <el-table-column :label="$t('overall.value')" class-name="custom-value" min-width="90" prop="value"
                              :resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
               <template slot-scope="scope">
                 <div :style="{color:scope.row.mapping?scope.row.mapping.color.text:'#000',background:scope.row.mapping?scope.row.mapping.color.bac:'#fff'}" >
@@ -99,7 +99,7 @@
                 {{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
               </template>
             </el-table-column>
-            <el-table-column :label="$t('overall.value')" class-name="costom-value" min-width="90" prop="value"
+            <el-table-column :label="$t('overall.value')" class-name="custom-value" min-width="90" prop="value"
                              :resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
               <template slot-scope="scope">
                 <div :style="{color:scope.row.mapping?scope.row.mapping.color.text:'#000',background:scope.row.mapping?scope.row.mapping.color.bac:'#fff'}" >

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

@@ -4,20 +4,21 @@
       ref="dataTable"
       class="chart-table"
       :data="tableData"
-      :height="'calc(100% - 0px)'"
+      :height="'100%'"
       :width="'100%'"
       border
       @sort-change="tableDataSort"
+      :show-header="showHeader"
     >
       <el-table-column
         v-for="(col, index) in columns"
         :prop="col.title"
         :key="`col-${index}`"
-        :min-width="160"
-        :sort-orders="['ascending', 'descending']"
         class="data-column"
-        class-name="costom-value"
+        class-name="custom-value"
-        sortable
+        :sort-orders="['ascending', 'descending']"
+        sortable="custom"
+        :min-width="160"
       >
         <template slot="header">
           <span class="data-column__span">{{col.title}}</span>
@@ -46,6 +47,18 @@
         </template>
       </el-table-column>
     </el-table>
+    <!-- pagination -->
+    <div class="tabel-chart-pagination" v-if="showPagination">
+      <el-pagination
+        @current-change="pageNo"
+        :page-size="pageObj.pageSize"
+        :current-page.sync="pageObj.pageNo"
+        :total="pageObj.total"
+        layout="prev, pager, next"
+        :pager-count="5"
+      >
+      </el-pagination>
+    </div>
     <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout">
       <div class="chart-canvas-tooltip-title tooltip-title">{{tooltip.title}}</div>
       <div class="chart-canvas-tooltip-content">
@@ -78,10 +91,71 @@ export default {
       oldTableData: [],
       columns: [],
       valueMapping: {},
-      tableTimer: null
+      tableTimer: null,
+      pageObj: {
+        pageNo: 1,
+        pageSize: 1,
+        total: 0
+      },
+      orderBy: {}
+    }
+  },
+  computed: {
+    showHeader () {
+      if (this.chartInfo.param.tableOptions && this.chartInfo.param.tableOptions.showTableHeader === 'disabled') {
+        return false
+      } else {
+        return true
+      }
+    },
+    showPagination () {
+      if (this.chartInfo.param.tableOptions && this.chartInfo.param.tableOptions.pagination === 'disabled') {
+        return false
+      } else {
+        return true
+      }
     }
   },
   methods: {
+    resize () {
+      this.$nextTick(async () => {
+        this.$refs.dataTable && this.$refs.dataTable.doLayout()
+        await this.setPageSize()
+        this.tableData = this.sortShowData()
+      })
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.tableData = this.sortShowData()
+    },
+    filterShowData (source, pageObj) {
+      if (source) return source.slice((pageObj.pageNo - 1) * pageObj.pageSize, pageObj.pageNo * pageObj.pageSize)
+    },
+    // 设置默认排序
+    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)
+    },
+    // 设置pageSize
+    setPageSize () {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          // 有分页时根据表格高度计算显示条数
+          if (this.showPagination) {
+            const trHeight = 48
+            const tableHeight = this.$refs.dataTable.bodyWrapper.clientHeight
+            const pageSize = Math.floor(tableHeight / trHeight) || 1
+            this.pageObj.pageSize = pageSize
+          } else {
+            this.pageObj.pageSize = this.oldTableData.length
+          }
+          resolve()
+        }, 200)
+      })
+    },
     initChart () {
       this.setDataLink()
       if (this.tableTimer) {
@@ -108,9 +182,14 @@ export default {
         arr.forEach(item => {
           item.valueMapping = this.selectTableMapping(item, this.valueMapping)
         })
-        this.tableData = arr
         this.oldTableData = lodash.cloneDeep(arr)
+        this.pageObj.pageNo = 1
+        this.$nextTick(async () => {
           this.$refs.dataTable && this.$refs.dataTable.doLayout()
+          await this.setPageSize()
+          this.setDefaultSort()
+          this.pageObj.total = this.oldTableData.length
+        })
         this.isInit = false
       }, 200)
     },
@@ -168,23 +247,6 @@ export default {
       this.$emit('chartIsNoData', this.isNoData)
       return returnData
     },
-    filterShowData (source) {
-      let orderBy = null
-      let sourceData = null
-      sourceData = this.oldTableData
-      orderBy = this.orderBy
-      if (!orderBy || !orderBy.order) { // 没有排序 恢复默认值
-        source = Object.assign([], sourceData)
-      } else { // 排序之后的顺序
-        if (orderBy.order === 'ascending') {
-          source = source.sort(this.asce(orderBy.prop))
-        }
-        if (orderBy.order === 'descending') {
-          source = source.sort(this.desc(orderBy.prop))
-        }
-      }
-      return source
-    },
     selectTableMapping (row, valueMapping) {
       const obj = {}
       this.columns.forEach((column) => {
@@ -347,7 +409,23 @@ export default {
     },
     tableDataSort (orderBy) {
       this.orderBy = { order: orderBy.order, prop: orderBy.prop }
-      this.tableData = this.filterShowData(this.tableData)
+      this.tableData = this.sortShowData()
+    },
+    sortShowData () {
+      const orderBy = this.orderBy
+      const originalData = lodash.cloneDeep(this.oldTableData)
+      let data = null
+      if (!orderBy || !orderBy.order) { // 没有排序 恢复默认值
+        data = Object.assign([], originalData)
+      } else { // 排序之后的顺序
+        if (orderBy.order === 'ascending') {
+          data = originalData.sort(this.asce(orderBy.prop))
+        }
+        if (orderBy.order === 'descending') {
+          data = originalData.sort(this.desc(orderBy.prop))
+        }
+      }
+      return this.filterShowData(data, this.pageObj)
     },
     // 本地正序
     asce (prop) {
@@ -377,9 +455,9 @@ export default {
           val2 = Number(val2)
         }
         if (val1 < val2) {
-          return -1
-        } else if (val1 > val2) {
           return 1
+        } else if (val1 > val2) {
+          return -1
         } else {
           return 0
         }
@@ -447,10 +525,14 @@ export default {
   },
   mounted () {
     this.chartInfo.loaded && this.initChart()
+    if (this.isFullscreen) {
+      window.addEventListener('resize', this.resize)
+    }
   },
   beforeDestroy () {
     clearTimeout(this.tableTimer)
     this.tableTimer = null
+    window.removeEventListener('resize', this.resize)
   }
 }
 </script>

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

@@ -438,6 +438,16 @@ export default {
         if (!this.chart.param.dataLink) {
           this.chart.param.dataLink = []
         }
+        if (this.chart.type == 'table') {
+          if (!this.chart.param.tableOptions) {
+            this.chart.param.tableOptions = {
+              showTableHeader: 'enabled',
+              pagination: 'enabled',
+              defaultSortColumn: null,
+              defaultSort: null
+            }
+          }
+        }
       } else {
         this.rightBox.loading = true
         this.$get('visual/dashboard/chart/' + data.id).then(res => {
@@ -480,6 +490,14 @@ export default {
                   tiClasses: ['ti-valid']
                 }
               })
+              if (!this.chart.param.tableOptions) {
+                this.chart.param.tableOptions = {
+                  showTableHeader: 'enabled',
+                  pagination: 'enabled',
+                  defaultSortColumn: null,
+                  defaultSort: null
+                }
+              }
             }
             this.$nextTick(() => {
               this.$refs.addChartModal.isStable = 'stable'

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

@@ -777,6 +777,90 @@
         </div>
       </div>
 
+      <!-- table options -->
+      <div v-if="isTable(chartConfig.type)">
+        <div class="form__sub-title">
+          <span>{{$t('dashboard.dashboard.chartForm.tableOptions')}}</span>
+        </div>
+        <div class="form-items--half-width-group">
+          <!-- show table header -->
+          <el-form-item
+            :label="$t('dashboard.dashboard.chartForm.showTableHeader')"
+            class="form-item--half-width"
+            prop="param.tableOptions.showTableHeader"
+          >
+            <el-select
+              id="chart-box-type"
+              v-model="chartConfig.param.tableOptions.showTableHeader"
+              popper-class="right-box-select-top prevent-clickoutside"
+              size="small"
+              @change="change"
+              >
+              <el-option :label="$t('overall.enabled')" value="enabled"></el-option>
+              <el-option :label="$t('overall.disabled')" value="disabled"></el-option>
+            </el-select>
+          </el-form-item>
+          <!-- pagination -->
+          <el-form-item
+            :label="$t('dashboard.dashboard.chartForm.pagination')"
+            class="form-item--half-width"
+            prop="param.tableOptions.pagination"
+          >
+            <el-select
+              id="chart-box-type"
+              v-model="chartConfig.param.tableOptions.pagination"
+              popper-class="right-box-select-top prevent-clickoutside"
+              size="small"
+              @change="change"
+              >
+              <el-option :label="$t('overall.enabled')" value="enabled"></el-option>
+              <el-option :label="$t('overall.disabled')" value="disabled"></el-option>
+            </el-select>
+          </el-form-item>
+          <!-- default sort column-->
+          <el-form-item
+            :label="$t('dashboard.dashboard.chartForm.defaultSortColumn')"
+            class="form-item--half-width"
+            prop="param.tableOptions.defaultSortColumn"
+          >
+            <el-select
+              id="chart-box-type"
+              v-model="chartConfig.param.tableOptions.defaultSortColumn"
+              :placeholder="$t('overall.auto')"
+              popper-class="right-box-select-top prevent-clickoutside"
+              size="small"
+              @change="change"
+              >
+              <el-option
+                v-for="item in chartConfig.param.columns.filter(item=> item.title)"
+                :value="item.title"
+                :label="item.title"
+                :key="item.title"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <!-- default sort-->
+          <el-form-item
+            :label="$t('dashboard.dashboard.chartForm.defaultSort')"
+            class="form-item--half-width"
+            prop="param.tableOptions.defaultSort"
+          >
+            <el-select
+              id="chart-box-type"
+              v-model="chartConfig.param.tableOptions.defaultSort"
+              :placeholder="$t('overall.auto')"
+              popper-class="right-box-select-top prevent-clickoutside"
+              size="small"
+              @change="change"
+              >
+              <el-option :label="$t('dashboard.dashboard.chartForm.asc')" value="asc"></el-option>
+              <el-option :label="$t('dashboard.dashboard.chartForm.desc')" value="desc"></el-option>
+            </el-select>
+          </el-form-item>
+        </div>
+      </div>
+
       <!-- valueMapping  -->
       <div v-if="isShowValueMapping(chartConfig.type) || isTable(chartConfig.type)">
         <div class="form__sub-title">
@@ -1155,6 +1239,7 @@
                   <el-select
                     v-model="item.openIn"
                     size="small"
+                    popper-class="right-box-select-top prevent-clickoutside"
                     @change="change"
                   >
                     <el-option value="newTab" :label="$t('dashboard.dashboard.chartForm.newTab')"></el-option>
@@ -1416,6 +1501,12 @@ export default {
               varValue: '',
               result: 'show'
             },
+            tableOptions: {
+              showTableHeader: 'enabled',
+              pagination: 'enabled',
+              defaultSortColumn: null,
+              defaultSort: null
+            },
             dataLink: this.chartConfig.param.dataLink
           }
           break

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

@@ -528,6 +528,90 @@
         </div>
       </div>
 
+      <!-- table options -->
+      <div v-if="isTable(chartConfig.type)">
+        <div class="form__sub-title">
+          <span>{{$t('dashboard.dashboard.chartForm.tableOptions')}}</span>
+        </div>
+        <div class="form-items--half-width-group">
+          <!-- show table header -->
+          <el-form-item
+            :label="$t('dashboard.dashboard.chartForm.showTableHeader')"
+            class="form-item--half-width"
+            prop="param.tableOptions.showTableHeader"
+          >
+            <el-select
+              id="chart-box-type"
+              v-model="chartConfig.param.tableOptions.showTableHeader"
+              popper-class="right-box-select-top prevent-clickoutside"
+              size="small"
+              @change="change"
+              >
+              <el-option :label="$t('overall.enabled')" value="enabled"></el-option>
+              <el-option :label="$t('overall.disabled')" value="disabled"></el-option>
+            </el-select>
+          </el-form-item>
+          <!-- pagination -->
+          <el-form-item
+            :label="$t('dashboard.dashboard.chartForm.pagination')"
+            class="form-item--half-width"
+            prop="param.tableOptions.pagination"
+          >
+            <el-select
+              id="chart-box-type"
+              v-model="chartConfig.param.tableOptions.pagination"
+              popper-class="right-box-select-top prevent-clickoutside"
+              size="small"
+              @change="change"
+              >
+              <el-option :label="$t('overall.enabled')" value="enabled"></el-option>
+              <el-option :label="$t('overall.disabled')" value="disabled"></el-option>
+            </el-select>
+          </el-form-item>
+          <!-- default sort column-->
+          <el-form-item
+            :label="$t('dashboard.dashboard.chartForm.defaultSortColumn')"
+            class="form-item--half-width"
+            prop="param.tableOptions.defaultSortColumn"
+          >
+            <el-select
+              id="chart-box-type"
+              v-model="chartConfig.param.tableOptions.defaultSortColumn"
+              :placeholder="$t('overall.auto')"
+              popper-class="right-box-select-top prevent-clickoutside"
+              size="small"
+              @change="change"
+              >
+              <el-option
+                v-for="item in chartConfig.param.columns.filter(item=> item.title)"
+                :value="item.title"
+                :label="item.title"
+                :key="item.title"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <!-- default sort-->
+          <el-form-item
+            :label="$t('dashboard.dashboard.chartForm.defaultSort')"
+            class="form-item--half-width"
+            prop="param.tableOptions.defaultSort"
+          >
+            <el-select
+              id="chart-box-type"
+              v-model="chartConfig.param.tableOptions.defaultSort"
+              :placeholder="$t('overall.auto')"
+              popper-class="right-box-select-top prevent-clickoutside"
+              size="small"
+              @change="change"
+              >
+              <el-option :label="$t('dashboard.dashboard.chartForm.asc')" value="asc"></el-option>
+              <el-option :label="$t('dashboard.dashboard.chartForm.desc')" value="desc"></el-option>
+            </el-select>
+          </el-form-item>
+        </div>
+      </div>
+
       <!-- valueMapping  -->
       <div v-if="isShowValueMapping(chartConfig.type) || isTable(chartConfig.type)">
         <div class="form__sub-title">
@@ -1154,6 +1238,12 @@ export default {
               varValue: '',
               result: 'show'
             },
+            tableOptions: {
+              showTableHeader: 'enabled',
+              pagination: 'enabled',
+              defaultSortColumn: null,
+              defaultSort: null
+            },
             dataLink: this.chartConfig.param.dataLink
           }
           break

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

@@ -611,6 +611,16 @@ export default {
         if (!this.chart.param.dataLink) {
           this.chart.param.dataLink = []
         }
+        if (this.chart.type == 'table') {
+          if (!this.chart.param.tableOptions) {
+            this.chart.param.tableOptions = {
+              showTableHeader: 'enabled',
+              pagination: 'enabled',
+              defaultSortColumn: null,
+              defaultSort: null
+            }
+          }
+        }
       } else {
         this.rightBox.loading = true
         this.$get('visual/dashboard/chart/' + data.id).then(res => {
@@ -653,6 +663,14 @@ export default {
                   tiClasses: ['ti-valid']
                 }
               })
+              if (!this.chart.param.tableOptions) {
+                this.chart.param.tableOptions = {
+                  showTableHeader: 'enabled',
+                  pagination: 'enabled',
+                  defaultSortColumn: null,
+                  defaultSort: null
+                }
+              }
             }
             setTimeout(() => {
               this.$refs.addChartModal.isStable = 'stable'