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

2023-06-27 11:29:37 +08:00
parent 7ac443915a
commit c6e4c17fa2
8 changed files with 358 additions and 41 deletions
--- a/nezha-fronted/src/assets/css/components/chart/chart.scss
+++ b/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;
  }
--- a/nezha-fronted/src/assets/css/components/charts/chart.scss
+++ b/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%;
--- a/nezha-fronted/src/components/chart/chart/chart-table.vue
+++ b/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'}" >
--- a/nezha-fronted/src/components/chart/chart/chartTable.vue
+++ b/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"
-        sortable
+        class-name="custom-value"
+        :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>
--- a/nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue
+++ b/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'
--- a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
+++ b/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
--- a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
+++ b/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
--- a/nezha-fronted/src/components/page/dashboard/dashboard.vue
+++ b/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'