feat(视图): 增加明细表

frontend/src/components/canvas/custom-component/UserView.vue

@@ -18,7 +18,7 @@
     </div>
     <chart-component v-if="httpRequest.status &&chart.type && !chart.type.includes('table') && !chart.type.includes('text')" :ref="element.propValue.id" class="chart-class" :chart="chart" :track-menu="trackMenu" @onChartClick="chartClick" />
     <!--    <chart-component :ref="element.propValue.id" class="chart-class" :chart="chart" :track-menu="trackMenu" @onChartClick="chartClick" />-->
-    <table-normal v-if="httpRequest.status &&chart.type && chart.type.includes('table')" :ref="element.propValue.id" :chart="chart" class="table-class" />
+    <table-normal v-if="httpRequest.status &&chart.type && chart.type.includes('table')" :ref="element.propValue.id" :show-summary="chart.type === 'table-normal'" :chart="chart" class="table-class" />
     <label-normal v-if="httpRequest.status && chart.type && chart.type.includes('text')" :ref="element.propValue.id" :chart="chart" class="table-class" />
     <div style="position: absolute;left: 20px;bottom:14px;">
       <drill-path :drill-filters="drillFilters" @onDrillJump="drillJump" />

frontend/src/lang/en.js

@@ -860,7 +860,9 @@ export default {
     drag_block_value_axis_main: 'Main Axis Value',
     drag_block_value_axis_ext: 'Ext Axis Value',
     yAxis_main: 'Main Vertical Axis',
-    yAxis_ext: 'Ext Vertical Axis'
+    yAxis_ext: 'Ext Vertical Axis',
+    total: 'Total',
+    items: 'Items'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

frontend/src/lang/tw.js

@@ -859,7 +859,9 @@ export default {
     drag_block_value_axis_main: '主軸值',
     drag_block_value_axis_ext: '副軸值',
     yAxis_main: '主縱軸',
-    yAxis_ext: '副縱軸'
+    yAxis_ext: '副縱軸',
+    total: '共',
+    items: '條數據'
   },
   dataset: {
     sheet_warn: '有多個sheet頁面，默認抽取第一個',

frontend/src/lang/zh.js

@@ -859,7 +859,9 @@ export default {
     drag_block_value_axis_main: '主轴值',
     drag_block_value_axis_ext: '副轴值',
     yAxis_main: '主纵轴',
-    yAxis_ext: '副纵轴'
+    yAxis_ext: '副纵轴',
+    total: '共',
+    items: '条数据'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',

frontend/src/views/chart/components/table/TableNormal.vue

 <template>
   <div ref="tableContainer" :style="bg_class" style="padding: 8px;width: 100%;height: 100%;overflow: hidden;">
-    <p v-show="title_show" ref="title" :style="title_class">{{ chart.title }}</p>
-    <ux-grid
-      ref="plxTable"
-      size="mini"
-      style="width: 100%;"
-      :height="height"
-      :checkbox-config="{highlight: true}"
-      :width-resize="true"
-      :header-row-style="table_header_class"
-      :row-style="getRowStyle"
-      class="table-class"
-      :class="chart.id"
-      :show-summary="showSummary"
-      :summary-method="summaryMethod"
-    >
-      <ux-table-column
-        v-for="field in fields"
-        :key="Math.random()"
-        :field="field.dataeaseName"
-        :resizable="true"
-        sortable
-        :title="field.name"
+    <el-row style="height: 100%;">
+      <p v-show="title_show" ref="title" :style="title_class">{{ chart.title }}</p>
+      <ux-grid
+        ref="plxTable"
+        size="mini"
+        style="width: 100%;"
+        :height="height"
+        :checkbox-config="{highlight: true}"
+        :width-resize="true"
+        :header-row-style="table_header_class"
+        :row-style="getRowStyle"
+        class="table-class"
+        :class="chart.id"
+        :show-summary="showSummary"
+        :summary-method="summaryMethod"
       >
-        <!--        <template slot="header">-->
-        <!--          <span>{{ field.name }}</span>-->
-        <!--        </template>-->
-      </ux-table-column>
-    </ux-grid>
+        <ux-table-column
+          v-for="field in fields"
+          :key="Math.random()"
+          :field="field.dataeaseName"
+          :resizable="true"
+          sortable
+          :title="field.name"
+        >
+          <!--        <template slot="header">-->
+          <!--          <span>{{ field.name }}</span>-->
+          <!--        </template>-->
+        </ux-table-column>
+      </ux-grid>
 
-    <!--    <el-pagination-->
-    <!--      v-show="chart.type === 'table-info'"-->
-    <!--      :current-page="currentPage.page"-->
-    <!--      :page-sizes="[100]"-->
-    <!--      :page-size="currentPage.pageSize"-->
-    <!--      :pager-count="5"-->
-    <!--      layout="sizes, prev, pager, next"-->
-    <!--      :total="currentPage.show"-->
-    <!--      @current-change="pageChange"-->
-    <!--    />-->
+      <el-row v-show="chart.type === 'table-info'" class="table-page">
+        <span class="total-style">
+          {{ $t('chart.total') }}
+          <span>{{ chart.data.tableRow.length }}</span>
+          {{ $t('chart.items') }}
+        </span>
+        <el-pagination
+          small
+          :current-page="currentPage.page"
+          :page-sizes="[10,20,50,100]"
+          :page-size="currentPage.pageSize"
+          :pager-count="5"
+          layout="sizes, prev, pager, next"
+          :total="currentPage.show"
+          class="page-style"
+          @current-change="pageClick"
+          @size-change="pageChange"
+        />
+      </el-row>
+    </el-row>
   </div>
 </template>
 
@@ -102,12 +113,12 @@ export default {
         height: '36px'
       },
       title_show: true,
-      borderRadius: '0px'
-      // currentPage: {
-      //   page: 1,
-      //   pageSize: 10,
-      //   show: 0
-      // }
+      borderRadius: '0px',
+      currentPage: {
+        page: 1,
+        pageSize: 10,
+        show: 0
+      }
     }
   },
   computed: {
@@ -153,13 +164,17 @@ export default {
       if (this.chart.data) {
         this.fields = JSON.parse(JSON.stringify(this.chart.data.fields))
         datas = JSON.parse(JSON.stringify(this.chart.data.tableRow))
-        // if (this.chart.data.page) {
-        //   this.currentPage = JSON.parse(JSON.stringify(this.chart.data.page))
-        // }
+        if (this.chart.type === 'table-info') {
+          // 计算分页
+          this.currentPage.show = datas.length
+          const pageStart = (this.currentPage.page - 1) * this.currentPage.pageSize
+          const pageEnd = pageStart + this.currentPage.pageSize
+          datas = datas.slice(pageStart, pageEnd)
+        }
       } else {
         this.fields = []
         datas = []
-        // this.resetPage()
+        this.resetPage()
       }
       this.$refs.plxTable.reloadData(datas)
       this.$nextTick(() => {
@@ -172,11 +187,19 @@ export default {
     calcHeightRightNow() {
       this.$nextTick(() => {
         if (this.$refs.tableContainer) {
+          let pageHeight = 0
+          if (this.chart.type === 'table-info') {
+            pageHeight = 36
+          }
           const currentHeight = this.$refs.tableContainer.offsetHeight
-          const tableMaxHeight = currentHeight - this.$refs.title.offsetHeight - 16
+          const tableMaxHeight = currentHeight - this.$refs.title.offsetHeight - 16 - pageHeight
           let tableHeight
           if (this.chart.data) {
-            tableHeight = (this.chart.data.tableRow.length + 2) * 36
+            if (this.chart.type === 'table-info') {
+              tableHeight = (this.currentPage.pageSize + 2) * 36 - pageHeight
+            } else {
+              tableHeight = (this.chart.data.tableRow.length + 2) * 36 - pageHeight
+            }
           } else {
             tableHeight = 0
           }
@@ -301,17 +324,23 @@ export default {
       this.height = 100
     },
 
-    pageChange() {
+    pageChange(val) {
+      this.currentPage.pageSize = val
+      this.init()
+    },
 
-    }
+    pageClick(val) {
+      this.currentPage.page = val
+      this.init()
+    },
 
-    // resetPage() {
-    //   this.currentPage = {
-    //     page: 1,
-    //     pageSize: 10,
-    //     show: 0
-    //   }
-    // }
+    resetPage() {
+      this.currentPage = {
+        page: 1,
+        pageSize: 10,
+        show: 0
+      }
+    }
   }
 }
 </script>
@@ -324,4 +353,25 @@ export default {
     max-height: none!important;
     line-height: normal!important;
   }
+  .table-page{
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    width: 100%;
+    overflow: hidden;
+  }
+  .page-style{
+    margin-right: auto;
+  }
+  .total-style{
+    flex: 1;
+    font-size: 12px;
+    color: #606266;
+    white-space:nowrap;
+  }
+  .page-style >>> .el-input__inner{
+    height: 24px;
+  }
 </style>

frontend/src/views/chart/view/ChartEdit.vue

@@ -77,7 +77,7 @@
                   @add="moveToQuota"
                 >
                   <transition-group>
-                    <span v-for="item in quotaData" :key="item.id" class="item-quota" :title="item.name">
+                    <span v-for="item in quotaData" v-show="chart.type && (chart.type !== 'table-info' || (chart.type === 'table-info' && item.id !=='count'))" :key="item.id" class="item-quota" :title="item.name">
                       <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
                       <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
                       <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />