CN-37 feat: table功能完善

src/assets/css/common.scss

@@ -14,6 +14,27 @@ body {
   cursor: default !important;
 }
 
+/*---滚动条默认显示样式--*/
+::-webkit-scrollbar-thumb {
+  background-color: #ddd;
+  border-radius: 6px;
+  border: 2px solid #fff;
+}
+/*---鼠标点击滚动条显示样式--*/
+::-webkit-scrollbar-thumb:hover {
+  background-color: #c8c8c8;
+  border-radius: 6px;
+}
+/*---滚动条大小--*/
+::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+/*---滚动框背景样式--*/
+::-webkit-scrollbar-track-piece {
+  background-color: transparent;
+}
+
 .myDatePicker .el-picker-panel__footer{
   .el-button{
     display: none;

src/components/charts/ChartTable.vue

@@ -10,8 +10,9 @@
     </div>
     <div class="cn-chart__body">
       <el-table
-          :data="tableData"
           style="width: 100%"
+          tooltip-effect="light"
+          :data="tableData"
       >
         <el-table-column
             type="index"
@@ -20,6 +21,7 @@
         </el-table-column>
         <el-table-column
             v-for="(c, i) in tableColumns"
+            show-overflow-tooltip
             :key="i"
             :prop="c"
         >
@@ -29,6 +31,7 @@
       </el-table>
     </div>
     <div class="cn-chart__footer">
+      <slot name="footer"></slot>
     </div>
   </div>
 </template>

src/components/charts/ChartTablePagination.vue

@@ -0,0 +1,56 @@
+<template>
+  <el-pagination
+      small
+      layout="prev,jumper,slot,next"
+      class="chart-table-pagination"
+      :total="total"
+      :page-size="pageSize"
+      @current-change="current"
+  >
+    <span>/&nbsp;{{totalPage}}</span>
+  </el-pagination>
+</template>
+
+<script>
+import { chartTableDefaultPageSize } from '@/utils/constants'
+export default {
+  name: 'ChartTablePagination',
+  props: {
+    total: Number
+  },
+  data () {
+    return {
+      pageSize: chartTableDefaultPageSize
+    }
+  },
+  computed: {
+    totalPage () {
+      const remainder = this.total % this.pageSize
+      if (remainder) {
+        return parseInt(this.total / this.pageSize) + 1
+      } else {
+        return parseInt(this.total / this.pageSize)
+      }
+    }
+  },
+  methods: {
+    current (val) {
+      this.$emit('pageJump', val)
+    }
+  },
+  mounted () {
+    this.$el.querySelector('.el-pagination__jump').childNodes[0].nodeValue = ''
+  }
+}
+</script>
+
+<style lang="scss">
+.chart-table-pagination.el-pagination {
+  padding: 12px 0 9px 0;
+  text-align: center;
+
+  .el-pagination__jump {
+    margin-left: 10px;
+  }
+}
+</style>

src/components/charts/panel.scss

@@ -167,6 +167,37 @@
           .option__button.icon-group-item:last-of-type:not(:first-of-type) {
             padding: 0 0 0 5px;
           }
+          .option__select {
+            .el-input__inner {
+              padding-right: 20px;
+              width: 120px;
+              border: none;
+              height: 100%;
+              line-height: 20px;
+              color: $--color-primary;
+            }
+            .el-input__prefix > div {
+              font-weight: normal;
+              line-height: 19px;
+              color: $--color-primary;
+            }
+            .el-input__suffix {
+              display: flex;
+              .el-input__suffix-inner {
+                line-height: 14px;
+                .el-select__caret {
+                  line-height: 14px;
+                  width: 16px;
+                  color: $--color-primary;
+                }
+              }
+            }
+          }
+          .option__select.select__topn {
+            .el-input__inner {
+              width: 80px;
+            }
+          }
           .icon-group-divide {
             height: 14px;
             width: 1px;
@@ -205,3 +236,10 @@
     }
   }
 }
+.option__topn-popper {
+  .el-select-dropdown__item {
+    height: 24px;
+    line-height: 24px;
+    font-size: 12px;
+  }
+}

src/main.js

@@ -1,5 +1,4 @@
 import { createApp } from 'vue'
-import _ from 'lodash'
 import router from '@/router'
 import store from '@/store'
 import App from '@/App.vue'
@@ -16,6 +15,9 @@ import utc from 'dayjs/plugin/utc' // dependent on utc plugin
 import timezone from 'dayjs/plugin/timezone'
 import advancedFormat from 'dayjs/plugin/advancedFormat'
 import weekday from 'dayjs/plugin/weekday'
+
+const _ = require('lodash') // lodash工具
+
 dayjs.extend(utc)
 dayjs.extend(timezone)
 dayjs.extend(advancedFormat)
@@ -29,13 +31,14 @@ app.use(store)
 app.use(ElementPlus)
 app.use(i18n)
 // app.use(VueGridLayout)
-app.use(_)
 
 app.directive('has', hasPermission) // 注册指令
 app.directive('click-outside', clickOutside)
 app.directive('ele-click-outside', ClickOutside)
 app.directive('cancel', cancelWithChange)
 
+app.config.globalProperties.$_ = _
+
 app.mixin(commonMixin)
 
 app.mount('#app')

src/utils/constants.js

@@ -20,3 +20,6 @@ export const position = {
     normal: 'calc(100% - 48px)' // 常规高度，特例在下方定义
   }
 }
+
+export const chartTableDefaultPageSize = 10 // table类型图表默认每页数据量
+export const chartTableTopOptions = [10, 50, 100] // table类型图表的TOP-N选项

src/views/charts/Chart.vue

@@ -21,8 +21,8 @@
   </single-value>
   <chart-table
       v-else-if="isTable"
-      :table-columns="tableColumns"
-      :table-data="tableData"
+      :table-columns="table.tableColumns"
+      :table-data="table.currentPageData"
       :style="computePosition"
   >
     <template #title>{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</template>
@@ -30,8 +30,29 @@
       <div class="header__operation header__operation--table">
         <span class="option__button"><i class="cn-icon cn-icon-download"></i></span>
       </div>
-      <div class="header__operation header__operation--table"><i class="cn-icon cn-icon-download"></i></div>
-      <div class="header__operation header__operation--table"><i class="cn-icon cn-icon-download"></i></div>
+      <div class="header__operation header__operation--table">
+        <el-select
+            size="mini"
+            v-model="table.limit"
+            class="option__select select__topn"
+            placeholder=""
+            popper-class="option__topn-popper"
+        >
+          <el-option v-for="item in chartTableTopOptions" :key="item" :value="item">TOP&nbsp;{{item}}</el-option>
+          <template #prefix>TOP&nbsp;</template>
+        </el-select>
+      </div>
+      <div class="header__operation header__operation--table">
+        <el-select
+            size="mini"
+            v-model="table.orderBy"
+            class="option__select"
+            placeholder=""
+            popper-class="option__topn-popper"
+        >
+          <el-option v-for="item in table.tableColumns" :key="item" :value="item">{{item}}</el-option>
+        </el-select>
+      </div>
       <div class="header__operation header__operation--table">
         <span class="option__button"><i class="cn-icon cn-icon-style"></i></span>
         <div class="icon-group-divide"></div>
@@ -41,6 +62,12 @@
         <span class="option__button"><i class="cn-icon cn-icon-full-screen"></i></span>
       </div>
     </template>
+    <template #footer>
+      <chart-table-pagination
+          :total="table.tableData.length"
+          @pageJump="pageJump"
+      ></chart-table-pagination>
+    </template>
   </chart-table>
 </template>
 
@@ -50,6 +77,8 @@ import { isEcharts, isSingleValue, isTable, getOption, getTypeCategory, getLayou
 import EchartsFrame from '@/components/charts/EchartsFrame'
 import SingleValue from '@/components/charts/ChartSingleValue'
 import Table from '@/components/charts/ChartTable'
+import ChartTablePagination from '@/components/charts/ChartTablePagination'
+import { chartTableDefaultPageSize, chartTableTopOptions } from '@/utils/constants'
 import { get } from '@/utils/http'
 
 let myChart // echarts实例
@@ -62,12 +91,19 @@ export default {
   components: {
     EchartsFrame,
     SingleValue,
+    ChartTablePagination,
     'chart-table': Table
   },
   data () {
     return {
-      tableColumns: [],
-      tableData: []
+      table: {
+        pageSize: chartTableDefaultPageSize,
+        limit: chartTableTopOptions[0], // top-n
+        orderBy: '',
+        tableColumns: [], // table字段
+        tableData: [], // table的所有数据
+        currentPageData: [] // table当前页的数据
+      }
     }
   },
   methods: {
@@ -88,8 +124,10 @@ export default {
               tableColumns.add(k)
             })
           })
-          this.tableColumns = Array.from(tableColumns)
-          this.tableData = tableResponse.data
+          this.table.tableColumns = Array.from(tableColumns)
+          this.table.orderBy = this.table.tableColumns[0]
+          this.table.tableData = tableResponse.data
+          this.table.currentPageData = this.getTargetPageData(1, this.table.pageSize, this.table.tableData)
           /* get(params.url, { startTime: now - 3600000, endTime: now, order: params.order ? params.order : null, limit: params.limit ? params.limit : null }).then(response => {
             if (response.code === 200) {
               const tableColumns = new Set()
@@ -98,13 +136,18 @@ export default {
                   tableColumns.add(k)
                 })
               })
-              this.tableColumns = tableColumns
-              this.tableData = response.data
-              console.info(this.tableColumns, this.tableData)
+              this.table.tableColumns = tableColumns
+              this.table.tableData = response.data
             }
           }) */
         }
       }
+    },
+    pageJump (val) {
+      this.table.currentPageData = this.getTargetPageData(val, this.table.pageSize, this.table.tableData)
+    },
+    getTargetPageData (pageNum, pageSize, tableData) {
+      return this.$_.slice(tableData, (pageNum - 1) * pageSize, pageNum * pageSize)
     }
   },
   computed: {
@@ -126,6 +169,7 @@ export default {
     return {
       chartInfo,
       layoutConstant,
+      chartTableTopOptions,
       chartOption: getOption(props.chart.type),
       isEcharts: isEcharts(props.chart.type),
       isSingleValue: isSingleValue(props.chart.type),