feat: 仪表板支持统一设置视图结果显示数量

backend/src/main/java/io/dataease/commons/constants/CommonConstants.java

@@ -9,7 +9,7 @@ public class CommonConstants {
 
 
     //操作类型
-    public static final class OPT_TYPE{
+    public static final class OPT_TYPE {
 
         public static final String INSERT = "insert";
 
@@ -22,19 +22,36 @@ public class CommonConstants {
     }
 
     //操作类型
-    public static final class CHECK_RESULT{
+    public static final class CHECK_RESULT {
 
         // 不存在
         public static final String NONE = "none";
 
         // 全局存在
-        public static final String EXIST_ALL= "exist_all";
+        public static final String EXIST_ALL = "exist_all";
 
         // 当前用户存在
-        public static final String EXIST_USER= "exist_user";
+        public static final String EXIST_USER = "exist_user";
 
         // 其他用户存在
-        public static final String EXIST_OTHER= "exist_other";
+        public static final String EXIST_OTHER = "exist_other";
 
     }
+
+    //视图数据查询来源
+    public static final class VIEW_QUERY_FROM {
+
+        // 仪表板
+        public static final String PANEL = "panel";
+    }
+
+    //视图数据查询模式
+    public static final class VIEW_RESULT_MODE {
+
+        // 所有
+        public static final String ALL = "all";
+
+        // 自定义
+        public static final String CUSTOM = "custom";
+    }
 }

backend/src/main/java/io/dataease/controller/request/chart/ChartExtRequest.java

@@ -22,4 +22,16 @@ public class ChartExtRequest {
 
     @ApiModelProperty("下钻维度集合")
     private List<ChartDrillRequest> drill;
+
+    @ApiModelProperty("数据查询来源")
+    private String queryFrom;
+
+    @ApiModelProperty("视图结果展示模式")
+    private String resultMode;
+
+    @ApiModelProperty("视图结果展示数量")
+    private Integer resultCount;
+
+    @ApiModelProperty("使用缓存:默认使用")
+    private boolean cache = true;
 }

backend/src/main/java/io/dataease/service/chart/ChartViewService.java

@@ -6,6 +6,7 @@ import io.dataease.base.domain.*;
 import io.dataease.base.mapper.ChartViewMapper;
 import io.dataease.base.mapper.ext.ExtChartGroupMapper;
 import io.dataease.base.mapper.ext.ExtChartViewMapper;
+import io.dataease.commons.constants.CommonConstants;
 import io.dataease.commons.constants.JdbcConstants;
 import io.dataease.commons.utils.AuthUtils;
 import io.dataease.commons.utils.BeanUtils;
@@ -182,9 +183,14 @@ public class ChartViewService {
         chartViewMapper.deleteByExample(chartViewExample);
     }
 
-    public ChartViewDTO getData(String id, ChartExtRequest requestList) throws Exception {
+    public ChartViewDTO getData(String id, ChartExtRequest request) throws Exception {
         ChartViewWithBLOBs view = chartViewMapper.selectByPrimaryKey(id);
-        return calcData(view, requestList, true);
+        // 如果是从仪表板获取视图数据，则仪表板的查询模式，查询结果的数量，覆盖视图对应的属性
+        if (CommonConstants.VIEW_QUERY_FROM.PANEL.equals(request.getQueryFrom()) && CommonConstants.VIEW_RESULT_MODE.CUSTOM.equals(request.getResultMode())) {
+            view.setResultMode(request.getResultMode());
+            view.setResultCount(request.getResultCount());
+        }
+        return calcData(view, request, request.isCache());
     }
 
     public ChartViewDTO calcData(ChartViewWithBLOBs view, ChartExtRequest requestList, boolean cache) throws Exception {
@@ -1383,10 +1389,10 @@ public class ChartViewService {
         return extChartViewMapper.searchAdviceSceneId(AuthUtils.getUser().getUserId().toString(), panelId);
     }
 
-    public String checkSameDataSet(String viewIdSource,String viewIdTarget) {
-        if(extChartViewMapper.checkSameDataSet(viewIdSource,viewIdTarget)==1){
+    public String checkSameDataSet(String viewIdSource, String viewIdTarget) {
+        if (extChartViewMapper.checkSameDataSet(viewIdSource, viewIdTarget) == 1) {
             return "YES";
-        }else{
+        } else {
             return "NO";
         }
     }

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

@@ -9,16 +9,40 @@
     ]"
   >
     <div v-if="requestStatus==='error'" class="chart-error-class">
-      <div style="font-size: 12px; color: #9ea6b2;height: 100%;display: flex;align-items: center;justify-content: center;">
+      <div class="chart-error-message-class">
         {{ message }},{{ $t('chart.chart_show_error') }}
         <br>
         {{ $t('chart.chart_error_tips') }}
       </div>
     </div>
-    <chart-component v-if="httpRequest.status &&chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'echarts'" :ref="element.propValue.id" class="chart-class" :chart="chart" :track-menu="trackMenu" :search-count="searchCount" @onChartClick="chartClick" @onJumpClick="jumpClick" />
-    <chart-component-g2 v-if="httpRequest.status &&chart.type && !chart.type.includes('table') && !chart.type.includes('text') && renderComponent() === 'antv'" :ref="element.propValue.id" class="chart-class" :chart="chart" :track-menu="trackMenu" :search-count="searchCount" @onChartClick="chartClick" @onJumpClick="jumpClick" />
-    <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" />
+    <chart-component
+      v-if="charViewShowFlag"
+      :ref="element.propValue.id"
+      class="chart-class"
+      :chart="chart"
+      :track-menu="trackMenu"
+      :search-count="searchCount"
+      @onChartClick="chartClick"
+      @onJumpClick="jumpClick"
+    />
+    <chart-component-g2
+      v-if="charViewG2ShowFlag"
+      :ref="element.propValue.id"
+      class="chart-class"
+      :chart="chart"
+      :track-menu="trackMenu"
+      :search-count="searchCount"
+      @onChartClick="chartClick"
+      @onJumpClick="jumpClick"
+    />
+    <table-normal
+      v-if="tableShowFlag"
+      :ref="element.propValue.id"
+      :show-summary="chart.type === 'table-normal'"
+      :chart="chart"
+      class="table-class"
+    />
+    <label-normal v-if="labelShowFlag" :ref="element.propValue.id" :chart="chart" class="table-class" />
     <div style="position: absolute;left: 20px;bottom:14px;">
       <drill-path :drill-filters="drillFilters" @onDrillJump="drillJump" />
     </div>
@@ -43,7 +67,7 @@ import { getToken, getLinkToken } from '@/utils/auth'
 import DrillPath from '@/views/chart/view/DrillPath'
 import { areaMapping } from '@/api/map/map'
 import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
-import { Base64 } from 'js-base64'
+
 export default {
   name: 'UserView',
   components: { ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
@@ -89,10 +113,24 @@ export default {
         msg: ''
       },
       timeMachine: null,
-      changeIndex: 0
+      changeIndex: 0,
+      pre: null,
+      preCanvasPanel: null
     }
   },
   computed: {
+    charViewShowFlag() {
+      return this.httpRequest.status && this.chart.type && !this.chart.type.includes('table') && !this.chart.type.includes('text') && this.renderComponent() === 'echarts'
+    },
+    charViewG2ShowFlag() {
+      return this.httpRequest.status && this.chart.type && !this.chart.type.includes('table') && !this.chart.type.includes('text') && this.renderComponent() === 'antv'
+    },
+    tableShowFlag() {
+      return this.httpRequest.status && this.chart.type && this.chart.type.includes('table')
+    },
+    labelShowFlag() {
+      return this.httpRequest.status && this.chart.type && this.chart.type.includes('text')
+    },
     loadingFlag() {
       return (this.canvasStyleData.refreshViewLoading || this.searchCount === 0) && this.requestStatus === 'waiting'
     },
@@ -104,6 +142,9 @@ export default {
       filter.filter = this.element.filters
       filter.linkageFilters = this.element.linkageFilters
       filter.drill = this.drillClickDimensionList
+      filter.resultCount = this.resultCount
+      filter.resultMode = this.resultMode
+      filter.queryFrom = 'panel'
       return filter
     },
     filters() {
@@ -111,11 +152,9 @@ export default {
       if (!this.element.filters) return []
       return JSON.parse(JSON.stringify(this.element.filters))
     },
-
     linkageFilters() {
       // 必要 勿删勿该  watch数组，哪怕发生变化 oldValue等于newValue ，深拷贝解决
       if (!this.element.linkageFilters) return []
-      // console.log('linkageFilters:' + JSON.stringify(this.element.linkageFilters))
       return JSON.parse(JSON.stringify(this.element.linkageFilters))
     },
     trackMenu() {
@@ -145,6 +184,12 @@ export default {
     hw() {
       return this.outStyle.width * this.outStyle.height
     },
+    resultMode() {
+      return this.canvasStyleData.panel.resultMode
+    },
+    resultCount() {
+      return this.canvasStyleData.panel.resultCount
+    },
     ...mapState([
       'canvasStyleData',
       'nowPanelTrackInfo',
@@ -168,13 +213,17 @@ export default {
     canvasStyleData: {
       handler(newVal, oldVla) {
         this.mergeStyle()
+        // 如果视图结果模式模式 或者 视图结果获取数量改变 刷新视图
+        if (!this.preCanvasPanel || this.preCanvasPanel.resultCount !== newVal.panel.resultCount || this.preCanvasPanel.resultMode !== newVal.panel.resultMode) {
+          this.getData(this.element.propValue.viewId, false)
+        }
+        this.preCanvasPanel = deepCopy(newVal.panel)
       },
       deep: true
     },
     // 监听外部的样式变化 （非实时性要求）
     'hw': {
       handler(newVal, oldVla) {
-        // console.log('hw:' + newVal + '---' + oldVla)
         if (newVal !== oldVla && this.$refs[this.element.propValue.id]) {
           if (this.chart.type === 'map') {
             this.destroyTimeMachine()
@@ -205,27 +254,19 @@ export default {
       }
     }
   },
-
   created() {
     this.refId = uuid.v1
     if (this.element && this.element.propValue && this.element.propValue.viewId) {
-      this.getData(this.element.propValue.viewId)
+      this.getData(this.element.propValue.viewId, false)
     }
-
-    // this.initAreas()
-  },
-  mounted() {
   },
   methods: {
     mergeStyle() {
       if ((this.requestStatus === 'success' || this.requestStatus === 'merging') && this.chart.stylePriority === 'panel' && this.canvasStyleData.chart) {
         const customAttrChart = JSON.parse(this.chart.customAttr)
         const customStyleChart = JSON.parse(this.chart.customStyle)
-
         const customAttrPanel = JSON.parse(this.canvasStyleData.chart.customAttr)
         const customStylePanel = JSON.parse(this.canvasStyleData.chart.customStyle)
-
-        // 组件样式-标题设置 - 标题修改为组件自己控制
         // 组件样式-背景设置
         customStyleChart.background = customStylePanel.background
         // 图形属性-颜色设置
@@ -234,7 +275,6 @@ export default {
         } else {
           customAttrChart.color = customAttrPanel.color
         }
-
         this.chart = {
           ...this.chart,
           customAttr: JSON.stringify(customAttrChart),
@@ -242,7 +282,7 @@ export default {
         }
       }
     },
-    getData(id) {
+    getData(id, cache = true) {
       if (id) {
         this.requestStatus = 'waiting'
         this.message = null
@@ -254,8 +294,11 @@ export default {
         if (!token && linkToken) {
           method = viewInfo
         }
-
-        method(id, this.filter).then(response => {
+        const requestInfo = {
+          ...this.filter,
+          cache: cache
+        }
+        method(id, requestInfo).then(response => {
           // 将视图传入echart组件
           if (response.success) {
             this.chart = response.data
@@ -477,59 +520,72 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.rect-shape {
+  .rect-shape {
     width: 100%;
     height: 100%;
     overflow: hidden;
-}
-.chart-class{
-  height: 100%;
-}
-.table-class{
-  height: 100%;
-}
-.chart-error-class{
-  text-align: center;
-  height: calc(100% - 84px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #ece7e7;
-}
-.active {
+  }
 
-}
+  .chart-class {
+    height: 100%;
+  }
 
-.active >>> .icon-fangda{
-  z-index: 2;
-  display:block!important;
-}
+  .table-class {
+    height: 100%;
+  }
 
-.rect-shape > i{
-  right: 5px;
-  color: gray;
-  position: absolute;
-}
+  .chart-error-class {
+    text-align: center;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #ece7e7;
+  }
 
-.rect-shape >>> i:hover {
-  color: red;
-}
+  .chart-error-message-class {
+    font-size: 12px;
+    color: #9ea6b2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
-.rect-shape:hover >>> .icon-fangda {
-  z-index: 2;
-  display:block;
-}
+  .active {
 
-.rect-shape>>>.icon-fangda {
-  display:none
-}
+  }
 
-.rect-shape:hover >>> .icon-shezhi {
-  z-index: 2;
-  display:block;
-}
+  .active > > > .icon-fangda {
+    z-index: 2;
+    display: block !important;
+  }
 
-.rect-shape>>>.icon-shezhi {
-  display:none
-}
+  .rect-shape > i {
+    right: 5px;
+    color: gray;
+    position: absolute;
+  }
+
+  .rect-shape > > > i:hover {
+    color: red;
+  }
+
+  .rect-shape:hover > > > .icon-fangda {
+    z-index: 2;
+    display: block;
+  }
+
+  .rect-shape > > > .icon-fangda {
+    display: none
+  }
+
+  .rect-shape:hover > > > .icon-shezhi {
+    z-index: 2;
+    display: block;
+  }
+
+  .rect-shape > > > .icon-shezhi {
+    display: none
+  }
 </style>

frontend/src/lang/en.js

@@ -954,6 +954,7 @@ export default {
     table_page_size_unit: 'Item/Page',
     result_count: 'Result',
     result_mode_all: 'ALL',
+    result_mode_custom: 'Custom',
     chart_word_cloud: 'Word Cloud',
     drag_block_word_cloud_label: 'Word Label',
     drag_block_word_cloud_size: 'Word Size',
@@ -1410,7 +1411,9 @@ export default {
     play_once: 'Once',
     play_circle: 'Circle',
     video_links: 'Video Links',
-    video_add_tips: 'Please Add Video Info...'
+    video_add_tips: 'Please Add Video Info...',
+    panel_view_result_show: 'View Result Show',
+    panel_view_result_tips: 'Chose "Panel" Will Overwrite View`s Result,Range 1~10000'
   },
   plugin: {
     local_install: 'Local installation',

frontend/src/lang/tw.js

@@ -9,14 +9,14 @@ export default {
       please_input: '請輸入',
       like: '包含',
       not_like: '不包含',
-      in: '屬于',
-      not_in: '不屬于',
-      gt: '大于',
-      ge: '大于等于',
-      lt: '小于',
-      le: '小于等于',
-      eq: '等于',
-      ne: '不等于',
+      in: '屬於',
+      not_in: '不屬於',
+      gt: '大於',
+      ge: '大於等於',
+      lt: '小於',
+      le: '小於等於',
+      eq: '等於',
+      ne: '不等於',
       between: '之間',
       select_date: '選擇日期',
       start_date: '開始日期',
@@ -25,7 +25,7 @@ export default {
       start_date_time: '開始日期時間',
       end_date_time: '結束日期時間',
       range_separator: '至',
-      data_time_error: '開始日期不能大于結束日期',
+      data_time_error: '開始日期不能大於結束日期',
       clean: '清空',
       refresh: '刷新'
     },
@@ -91,7 +91,7 @@ export default {
     errorPages: '錯誤頁面',
     page401: '401',
     page404: '404',
-    errorLog: '錯誤日志',
+    errorLog: '錯誤日誌',
     excel: 'Excel',
     exportExcel: '導出 Excel',
     selectExcel: '導出 已選擇項',
@@ -126,7 +126,7 @@ export default {
     expires: '登錄信息過期，請重新登錄',
     tokenError: '登陸信息錯誤，請重新登錄',
     username_error: '請輸入正確的 ID',
-    password_error: '密碼不小于 8 位',
+    password_error: '密碼不小於 8 位',
     re_login: '重新登錄',
     default_login: '普通登錄'
   },
@@ -169,17 +169,17 @@ export default {
     menu: '菜單',
     setting: '設置',
     project: '項目',
-    about_us: '關于',
+    about_us: '關於',
     current_project: '當前項目',
     name: '名稱',
     description: '描述',
-    annotation: '注釋',
+    annotation: '註釋',
     clear: '清空',
     save: '保存',
     update: '更新',
     save_success: '保存成功',
     delete_success: '刪除成功',
-    copy_success: '複制成功',
+    copy_success: '複製成功',
     modify_success: '修改成功',
     delete_cancel: '已取消刪除',
     confirm: '確定',
@@ -188,7 +188,7 @@ export default {
     operating: '操作',
     input_limit: '長度在 {0} 到 {1} 個字符',
     login: '登錄',
-    welcome: '一站式開源數據分析平台',
+    welcome: '一站式開源數據分析平臺',
     username: '姓名',
     password: '密碼',
     input_username: '請輸入用戶姓名',
@@ -216,9 +216,9 @@ export default {
     input_content: '請輸入內容',
     create: '新建',
     edit: '編輯',
-    copy: '複制',
+    copy: '複製',
     refresh: '刷新',
-    remark: '備注',
+    remark: '備註',
     delete: '刪除',
     reduction: '恢複',
     not_filled: '未填寫',
@@ -291,7 +291,7 @@ export default {
       start_date_time: '開始日期時間',
       end_date_time: '結束日期時間',
       range_separator: '至',
-      data_time_error: '開始日期不能大于結束日期'
+      data_time_error: '開始日期不能大於結束日期'
     },
     adv_search: {
       title: '高級搜索',
@@ -307,14 +307,14 @@ export default {
         is_not_empty: '非空',
         like: '包含',
         not_like: '不包含',
-        in: '屬于',
-        not_in: '不屬于',
-        gt: '大于',
-        ge: '大于等于',
-        lt: '小于',
-        le: '小于等于',
-        equals: '等于',
-        not_equals: '不等于',
+        in: '屬於',
+        not_in: '不屬於',
+        gt: '大於',
+        ge: '大於等於',
+        lt: '小於',
+        le: '小於等於',
+        equals: '等於',
+        not_equals: '不等於',
         between: '之間',
         current_user: '是當前用戶'
       },
@@ -358,17 +358,17 @@ export default {
     cancel: '取消'
   },
   guide: {
-    description: '引導頁對于一些第一次進入項目的人很有用，你可以簡單介紹下項目的功能。本 Demo 是基于',
+    description: '引導頁對於一些第一次進入項目的人很有用，你可以簡單介紹下項目的功能。本 Demo 是基於',
     button: '打開引導'
   },
   components: {
     documentation: '文檔',
-    tinymceTips: '富文本是管理後台一個核心的功能，但同時又是一個有很多坑的地方。在選擇富文本的過程中我也走了不少的彎路，市面上常見的富文本都基本用過了，最終權衡了一下選擇了Tinymce。更詳細的富文本比較和介紹見',
-    dropzoneTips: '由于我司業務有特殊需求，而且要傳七牛 所以沒用第三方，選擇了自己封裝。代碼非常的簡單，具體代碼你可以在這裏看到 @/components/Dropzone',
+    tinymceTips: '富文本是管理後臺一個核心的功能，但同時又是一個有很多坑的地方。在選擇富文本的過程中我也走了不少的彎路，市面上常見的富文本都基本用過了，最終權衡了一下選擇了Tinymce。更詳細的富文本比較和介紹見',
+    dropzoneTips: '由於我司業務有特殊需求，而且要傳七牛 所以沒用第三方，選擇了自己封裝。代碼非常的簡單，具體代碼你可以在這裏看到 @/components/Dropzone',
     stickyTips: '當頁面滾動到預設的位置會吸附在頂部',
     backToTopTips1: '頁面滾動到指定位置會在右下角出現返回頂部按鈕',
     backToTopTips2: '可自定義按鈕的樣式、show/hide、出現的高度、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素',
-    imageUploadTips: '由于我在使用時它只有vue@1版本，而且和mockjs不兼容，所以自己改造了一下，如果大家要使用的話，優先還是使用官方版本。'
+    imageUploadTips: '由於我在使用時它只有vue@1版本，而且和mockjs不兼容，所以自己改造了一下，如果大家要使用的話，優先還是使用官方版本。'
   },
   table: {
     dynamicTips1: '固定表頭, 按照表頭順序排序',
@@ -401,11 +401,11 @@ export default {
     selectview: '選擇視圖'
   },
   example: {
-    warning: '創建和編輯頁面是不能被 keep-alive 緩存的，因爲keep-alive 的 include 目前不支持根據路由來緩存，所以目前都是基于 component name 來進行緩存的。如果你想類似的實現緩存效果，可以使用 localStorage 等浏覽器緩存方案。或者不要使用 keep-alive 的 include，直接緩存所有頁面。詳情見'
+    warning: '創建和編輯頁面是不能被 keep-alive 緩存的，因爲keep-alive 的 include 目前不支持根據路由來緩存，所以目前都是基於 component name 來進行緩存的。如果你想類似的實現緩存效果，可以使用 localStorage 等瀏覽器緩存方案。或者不要使用 keep-alive 的 include，直接緩存所有頁面。詳情見'
   },
   errorLog: {
     tips: '請點擊右上角bug小圖標',
-    description: '現在的管理後台基本都是spa的形式了，它增強了用戶體驗，但同時也會增加頁面出問題的可能性，可能一個小小的疏忽就導致整個頁面的死鎖。好在 Vue 官網提供了一個方法來捕獲處理異常，你可以在其中進行錯誤處理或者異常上報。',
+    description: '現在的管理後臺基本都是spa的形式了，它增強了用戶體驗，但同時也會增加頁面出問題的可能性，可能一個小小的疏忽就導致整個頁面的死鎖。好在 Vue 官網提供了一個方法來捕獲處理異常，你可以在其中進行錯誤處理或者異常上報。',
     documentation: '文檔介紹'
   },
   excel: {
@@ -423,7 +423,7 @@ export default {
   theme: {
     change: '換膚',
     documentation: '換膚文檔',
-    tips: 'Tips: 它區別于 navbar 上的 theme-pick, 是兩種不同的換膚方法，各自有不同的應用場景，具體請參考文檔。',
+    tips: 'Tips: 它區別於 navbar 上的 theme-pick, 是兩種不同的換膚方法，各自有不同的應用場景，具體請參考文檔。',
     base: '基礎配色',
     font: '字體顏色',
     border: '邊框顏色',
@@ -616,7 +616,7 @@ export default {
     test_connection: '測試連接',
     SMTP_host: 'SMTP主機',
     basic_setting: '基礎設置',
-    front_time_out: '請求超時時間(單位:秒, 注意:保存後刷新瀏覽器生效)',
+    front_time_out: '請求超時時間(單位:秒, 註意:保存後刷新瀏覽器生效)',
     msg_time_out: '消息保留時間(單位:天)',
     empty_front: '為空則默認取值10秒',
     empty_msg: '為空則默認取值30天',
@@ -684,7 +684,7 @@ export default {
     avg: '平均',
     max: '最大值',
     min: '最小值',
-    stddev_pop: '標准差',
+    stddev_pop: '標準差',
     var_pop: '方差',
     quick_calc: '快速計算',
     show_name_set: '顯示名設置',
@@ -770,13 +770,13 @@ export default {
     border_radius: '邊框半徑',
     alpha: '透明度',
     add_filter: '添加過濾',
-    no_limit: '無限制',
-    filter_eq: '等于',
-    filter_not_eq: '不等于',
-    filter_lt: '小于',
-    filter_le: '小于等于',
-    filter_gt: '大于',
-    filter_ge: '大于等于',
+    no_limit: '無限製',
+    filter_eq: '等於',
+    filter_not_eq: '不等於',
+    filter_lt: '小於',
+    filter_le: '小於等於',
+    filter_gt: '大於',
+    filter_ge: '大於等於',
     filter_null: '為空',
     filter_not_null: '不為空',
     filter_empty: '空字符串',
@@ -812,7 +812,7 @@ export default {
     only_one_result: '僅顯示第1個計算結果',
     dimension_show: '名稱顯示',
     quota_show: '值顯示',
-    title_limit: '標題不能大于50個字符',
+    title_limit: '標題不能大於50個字符',
     filter_condition: '過濾條件',
     filter_field_can_null: '過濾字段必填',
     preview_100_data: '預覽前100條記錄',
@@ -860,7 +860,7 @@ export default {
     text_style: '字體樣式',
     bolder: '加粗',
     change_ds: '更換數據集',
-    change_ds_tip: '提示：更換數據集將導致字段發生變化，需重新制作視圖',
+    change_ds_tip: '提示：更換數據集將導致字段發生變化，需重新製作視圖',
     axis_name_color: '名稱顔色',
     axis_name_fontsize: '名稱字體',
     pie_label_line_show: '引導線',
@@ -955,6 +955,7 @@ export default {
     table_page_size_unit: '條/頁',
     result_count: '結果展示',
     result_mode_all: '全部',
+    result_mode_custom: '自定義',
     chart_word_cloud: '詞雲',
     drag_block_word_cloud_label: '詞標簽',
     drag_block_word_cloud_size: '詞大小',
@@ -1037,7 +1038,7 @@ export default {
     execute_once: '立即執行',
     simple_cron: '簡單重複',
     cron_config: '表達式設定',
-    no_limit: '無限制',
+    no_limit: '無限製',
     set_end_time: '設定結束時間',
     operate: '操作',
     save_success: '保存成功',
@@ -1202,7 +1203,7 @@ export default {
     please_input_max_idle_time: '請輸入最大空閑(秒)',
     please_input_acquire_increment: '請輸入增長數',
     please_input_connect_timeout: '請輸入連接超時(秒)',
-    no_less_then_0: '高級設置中的參數不能小于零',
+    no_less_then_0: '高級設置中的參數不能小於零',
     port_no_less_then_0: '端口不能小於零',
     priority: '高級設置',
     extra_params: '額外的JDBC連接字符串'
@@ -1219,10 +1220,10 @@ export default {
     auth_role: '已分享角色',
     picture_limit: '只能插入圖片',
     drag_here: '請將左側字段拖至此處',
-    copy_link_passwd: '複制鏈接及密碼',
-    copy_link: '複制鏈接',
-    copy_short_link: '複制短鏈接',
-    copy_short_link_passwd: '複制短鏈接及密碼',
+    copy_link_passwd: '複製鏈接及密碼',
+    copy_link: '複製鏈接',
+    copy_short_link: '複製短鏈接',
+    copy_short_link_passwd: '複製短鏈接及密碼',
     passwd_protect: '密碼保護',
     link: '鏈接',
     link_share: '鏈接分享',
@@ -1270,8 +1271,8 @@ export default {
     gap: '有間隙',
     no_gap: '無間隙',
     component_gap: '組件間隙',
-    refresh_time: '刷新时间',
-    minute: '分钟',
+    refresh_time: '刷新時間',
+    minute: '分鐘',
     second: '秒',
     photo: '圖片',
     default_panel: '默認儀表板',
@@ -1286,7 +1287,7 @@ export default {
     fullscreen_preview: '全屏預覽',
     new_tab_preview: '新Tab頁預覽',
     select_panel_from_left: '請從左側選擇儀表板',
-    template_nale: '模板名稱',
+    template_name: '模板名稱',
     template: '模板',
     category: '分類',
     all_org: '所有組織',
@@ -1300,7 +1301,7 @@ export default {
     select_by_table: '按表選擇',
     data_list: '數據列表',
     component_list: '組件列表',
-    custom_scope: '自定義控制範圍',
+    custom_scope: '自定義控製範圍',
     multiple_choice: '多選',
     single_choice: '單選',
     field: '字段',
@@ -1315,7 +1316,7 @@ export default {
     redo: '重做',
     undo: '撤銷',
     panelNull: '這是個空的儀表板，可以通過編輯來豐富內容',
-    copy: '複制',
+    copy: '複製',
     paste: '粘貼',
     cut: '剪切',
     lock: '鎖定',
@@ -1368,52 +1369,54 @@ export default {
     save: '保存',
     drill: '下鑽',
     linkage: '聯動',
-    jump: '跳转',
+    jump: '跳轉',
     cancel_linkage: '取消聯動',
     remove_all_linkage: '清除所有聯動',
     exit_un_march_linkage_field: '存在未匹配聯動關系的字段',
     details: '詳情',
     setting: '設置',
     no_drill_field: '缺少關聯字段',
-    matrix: '矩阵',
-    suspension: '悬浮',
-    new_element_distribution: '当前元素移入分布方式',
-    subject_no_edit: '系统主题不能修改',
-    subject_name_not_null: '主题名称需要1~20字符',
-    is_enable: '是否启用',
-    open_mode: '打开方式',
+    matrix: '矩陣',
+    suspension: '懸浮',
+    new_element_distribution: '當前元素移入分布方式',
+    subject_no_edit: '系統主題不能修改',
+    subject_name_not_null: '主題名稱需要1~20字符',
+    is_enable: '是否啟用',
+    open_mode: '打開方式',
     new_window: '新窗口',
-    now_window: '当前窗口',
-    hyperLinks: '超链接',
-    link_open_tips: '仪表板非编辑状态可打开链接',
-    data_loading: '数据准备中...',
-    export_loading: '导出中...',
-    export_pdf: '导出PDF',
-    jump_set: '跳转设置',
-    enable_jump: '启用跳转',
-    column_name: '字段名称',
-    enable_column: '启用字段',
-    open_model: '打开方式',
-    link_type: '链接类型',
-    link_outer: '外部链接',
-    link_panel: '仪表板',
-    select_jump_panel: '选择关联的仪表板',
-    link_view: '联动视图',
-    link_view_field: '联动视图字段',
-    add_jump_field: '追加跳转联动依赖字段',
-    input_jump_link: '请输入跳转连接',
-    select_dimension: '请选择维度...',
-    please_select: '请选择',
-    video_type: '视频类型',
-    online_video: '在线视频',
-    streaming_media: '流媒体',
-    auto_play: '自动播放',
-    video_tips: '优先HTTPS链接；当前支持格式mp4,webm',
-    play_frequency: '播放频率',
+    now_window: '當前窗口',
+    hyperLinks: '超鏈接',
+    link_open_tips: '儀表板非編輯狀態可打開鏈接',
+    data_loading: '數據準備中...',
+    export_loading: '導出中...',
+    export_pdf: '導出PDF',
+    jump_set: '跳轉設置',
+    enable_jump: '啟用跳轉',
+    column_name: '字段名稱',
+    enable_column: '啟用字段',
+    open_model: '打開方式',
+    link_type: '鏈接類型',
+    link_outer: '外部鏈接',
+    link_panel: '儀表板',
+    select_jump_panel: '選擇關聯的儀表板',
+    link_view: '聯動視圖',
+    link_view_field: '聯動視圖字段',
+    add_jump_field: '追加跳轉聯動依賴字段',
+    input_jump_link: '請輸入跳轉連接',
+    select_dimension: '請選擇維度...',
+    please_select: '請選擇',
+    video_type: '視頻類型',
+    online_video: '在線視頻',
+    streaming_media: '流媒體',
+    auto_play: '自動播放',
+    video_tips: '優先HTTPS鏈接；當前支持格式mp4,webm',
+    play_frequency: '播放頻率',
     play_once: '播放一次',
-    play_circle: '循环播放',
-    video_links: '视频链接',
-    video_add_tips: '请点击添加配置视频信息...'
+    play_circle: '循環播放',
+    video_links: '視頻鏈接',
+    video_add_tips: '請點擊添加配置視頻信息...',
+    panel_view_result_show: '視圖結果展示',
+    panel_view_result_tips: '選擇儀表板會覆蓋視圖的結果展示數量，取值範圍1~10000'
   },
   plugin: {
     local_install: '本地安裝',
@@ -1484,7 +1487,7 @@ export default {
     auth_num: '授權數量',
     version: '版本',
     version_num: '版本號',
-    standard: '標准版',
+    standard: '標準版',
     enterprise: '企業版',
     suport: '獲取技術支持',
     update_success: '更新成功'
@@ -1506,8 +1509,8 @@ export default {
     month: '月',
     week: '周',
     year: '年',
-    d_w_cant_not_set: '日期與星期不可以同時爲“不指定”',
-    d_w_must_one_set: '日期與星期必須有一個爲“不指定”',
+    d_w_cant_not_set: '日期與星期不可以同時爲「不指定」',
+    d_w_must_one_set: '日期與星期必須有一個爲「不指定」',
     every_day: '每日',
     cycle: '周期',
     not_set: '不指定',
@@ -1535,9 +1538,9 @@ export default {
     week_end: '至星期',
     every_year: '每年',
     week_tips: '說明：1-7 分別對應 周日-周六',
-    minute_limit: '分鍾不能小于1，大于59',
-    hour_limit: '小時不能小于1，大于23',
-    day_limit: '天不能小于1，大于31'
+    minute_limit: '分鍾不能小於1，大於59',
+    hour_limit: '小時不能小於1，大於23',
+    day_limit: '天不能小於1，大於31'
   },
   dept: {
     can_not_move_change_sort: '不能移動以改變排序',
@@ -1576,11 +1579,11 @@ export default {
     split_placeholder: '至',
     please_key_min: '請輸入最小值',
     please_key_max: '請輸入最大值',
-    out_of_min: '最小值不能小于最小整數-2³²',
-    out_of_max: '最大值不能大于最大整數2³²-1',
+    out_of_min: '最小值不能小於最小整數-2³²',
+    out_of_max: '最大值不能大於最大整數2³²-1',
     must_int: '請輸入整數',
-    min_out_max: '最小值必須小于最大值',
-    max_out_min: '最大值必須大于最小值'
+    min_out_max: '最小值必須小於最大值',
+    max_out_min: '最大值必須大於最小值'
   },
   denumberselect: {
     label: '數字下拉',
@@ -1638,4 +1641,3 @@ export default {
 
   }
 }
-

frontend/src/lang/zh.js

@@ -958,6 +958,7 @@ export default {
     table_page_size_unit: '条/页',
     result_count: '结果展示',
     result_mode_all: '全部',
+    result_mode_custom: '自定义',
     chart_word_cloud: '词云',
     drag_block_word_cloud_label: '词标签',
     drag_block_word_cloud_size: '词大小',
@@ -1422,7 +1423,9 @@ export default {
     play_once: '播放一次',
     play_circle: '循环播放',
     video_links: '视频链接',
-    video_add_tips: '请点击添加配置视频信息...'
+    video_add_tips: '请点击添加配置视频信息...',
+    panel_view_result_show: '视图结果展示',
+    panel_view_result_tips: '选择仪表板会覆盖视图的结果展示数量，取值范围1~10000'
   },
   plugin: {
     local_install: '本地安装',

frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentGap.vue

@@ -7,25 +7,24 @@
         trigger="click"
       >
         <el-col>
-          <el-radio v-model="panel.gap" label="yes" @change="onChangePanelStyle">{{ $t('panel.gap') }} </el-radio>
+          <el-radio v-model="panel.gap" label="yes" @change="onChangePanelStyle">{{ $t('panel.gap') }}</el-radio>
           <el-radio v-model="panel.gap" label="no" @change="onChangePanelStyle">{{ $t('panel.no_gap') }}</el-radio>
         </el-col>
-        <el-button slot="reference" size="mini" class="shape-item">{{ $t('panel.component_gap') }} <i class="el-icon-setting el-icon--right" /></el-button>
+        <el-button slot="reference" size="mini" class="shape-item">{{ $t('panel.component_gap') }} <i
+          class="el-icon-setting el-icon--right"
+        /></el-button>
       </el-popover>
     </div>
   </div>
 </template>
 
 <script>
-// eslint-disable-next-line no-unused-vars
-import { DEFAULT_PANEL_STYLE } from '@/views/panel/panel'
 import { mapState } from 'vuex'
 import { deepCopy } from '@/components/canvas/utils/utils'
 
 export default {
   name: 'ComponentGap',
-  props: {
-  },
+  props: {},
   data() {
     return {
       panel: null
@@ -44,26 +43,29 @@ export default {
       const canvasStyleData = deepCopy(this.canvasStyleData)
       canvasStyleData.panel = this.panel
       this.$store.commit('setCanvasStyle', canvasStyleData)
-      this.$store.commit('recordSnapshot','onChangePanelStyle')
+      this.$store.commit('recordSnapshot', 'onChangePanelStyle')
     }
   }
 }
 </script>
 
 <style scoped>
-  .avatar-uploader>>>.el-upload {
+  .avatar-uploader >>> .el-upload {
     width: 100px;
     height: 60px;
     line-height: 70px;
   }
-  .avatar-uploader>>>.el-upload-list li{
+
+  .avatar-uploader >>> .el-upload-list li {
     width: 100px !important;
     height: 60px !important;
   }
-  .disabled>>>.el-upload--picture-card {
+
+  .disabled >>> .el-upload--picture-card {
     display: none;
   }
-  .shape-item{
+
+  .shape-item {
     padding: 6px;
     border: none;
     width: 100%;
@@ -71,20 +73,25 @@ export default {
     justify-content: space-between;
     align-items: center;
   }
-  .form-item-slider>>>.el-form-item__label{
+
+  .form-item-slider >>> .el-form-item__label {
     font-size: 12px;
     line-height: 38px;
   }
-  .form-item>>>.el-form-item__label{
+
+  .form-item >>> .el-form-item__label {
     font-size: 12px;
   }
-  .el-select-dropdown__item{
+
+  .el-select-dropdown__item {
     padding: 0 20px;
   }
-  span{
+
+  span {
     font-size: 12px
   }
-  .el-form-item{
+
+  .el-form-item {
     margin-bottom: 6px;
   }
 </style>

frontend/src/views/panel/SubjectSetting/PanelStyle/PanelRefreshTime.vue

@@ -18,37 +18,37 @@
               </el-radio-group>
             </el-form-item>
             <el-form-item :label="'刷新时间频率'" class="form-item form-item-slider">
-              <el-slider v-model="canvasStyleData.refreshTime" show-input :show-input-controls="false" input-size="mini" :min="1" :max="3600" @change="onChangePanelStyle" />
+              <el-slider
+                v-model="canvasStyleData.refreshTime"
+                show-input
+                :show-input-controls="false"
+                input-size="mini"
+                :min="1"
+                :max="3600"
+                @change="onChangePanelStyle"
+              />
             </el-form-item>
           </el-form>
         </el-col>
-        <el-button slot="reference" size="mini" class="shape-item">{{ $t('panel.refresh_time') }} <i class="el-icon-setting el-icon--right" /></el-button>
+        <el-button slot="reference" size="mini" class="shape-item">{{ $t('panel.refresh_time') }} <i
+          class="el-icon-setting el-icon--right"
+        /></el-button>
       </el-popover>
     </div>
   </div>
 </template>
 
 <script>
-// eslint-disable-next-line no-unused-vars
-import { deepCopy } from '@/components/canvas/utils/utils'
-import {
-  CANVAS_STYLE
-} from '@/views/panel/panel'
 
 export default {
   name: 'PanelRefreshTime',
-  props: {
-  },
+  props: {},
   computed: {
     canvasStyleData() {
       return this.$store.state.canvasStyleData
     }
   },
   created() {
-    // 初始化赋值
-    // if (!this.canvasStyleData.refreshTime) {
-    //   this.canvasStyleData['refreshTime'] = CANVAS_STYLE.refreshTime
-    // }
   },
   methods: {
     onChangePanelStyle() {
@@ -59,19 +59,22 @@ export default {
 </script>
 
 <style scoped>
-  .avatar-uploader>>>.el-upload {
+  .avatar-uploader >>> .el-upload {
     width: 100px;
     height: 60px;
     line-height: 70px;
   }
-  .avatar-uploader>>>.el-upload-list li{
+
+  .avatar-uploader >>> .el-upload-list li {
     width: 100px !important;
     height: 60px !important;
   }
-  .disabled>>>.el-upload--picture-card {
+
+  .disabled >>> .el-upload--picture-card {
     display: none;
   }
-  .shape-item{
+
+  .shape-item {
     padding: 6px;
     border: none;
     width: 100%;
@@ -79,20 +82,25 @@ export default {
     justify-content: space-between;
     align-items: center;
   }
-  .form-item-slider>>>.el-form-item__label{
+
+  .form-item-slider >>> .el-form-item__label {
     font-size: 12px;
     line-height: 38px;
   }
-  .form-item>>>.el-form-item__label{
+
+  .form-item >>> .el-form-item__label {
     font-size: 12px;
   }
-  .el-select-dropdown__item{
+
+  .el-select-dropdown__item {
     padding: 0 20px;
   }
-  span{
+
+  span {
     font-size: 12px
   }
-  .el-form-item{
+
+  .el-form-item {
     margin-bottom: 6px;
   }
 </style>

frontend/src/views/panel/SubjectSetting/PanelStyle/PanelViewResult.vue

+<template>
+  <div>
+    <div style="width: 100%;">
+      <el-popover
+        placement="right"
+        width="400"
+        trigger="click"
+      >
+        <el-row>
+          <el-col :span="16">
+            <el-radio-group v-model="panel.resultMode" class="radio-span" size="mini" @change="onChangePanelStyle">
+              <el-radio label="all"><span>{{ $t('panel.view') }}</span></el-radio>
+              <el-radio label="custom">
+                <span>{{ $t('panel.panel') }} </span>
+              </el-radio>
+            </el-radio-group>
+          </el-col>
+          <el-col :span="8" class="slider-area">
+            <el-slider
+              v-model="panel.resultCount"
+              :disabled="panel.resultMode==='all'"
+              style="margin-left: 5px"
+              show-input
+              :show-input-controls="false"
+              :show-tooltip="false"
+              input-size="mini"
+              :min="1"
+              :max="10000"
+              @change="onChangePanelStyle"
+            />
+          </el-col>
+        </el-row>
+        <el-row>
+          <span style="color: #909399; font-size: 8px;margin-left: 3px">
+            Tips: {{ $t('panel.panel_view_result_tips') }}
+          </span>
+        </el-row>
+        <el-button slot="reference" size="mini" class="shape-item">{{ $t('panel.panel_view_result_show') }}<i
+          class="el-icon-setting el-icon--right"
+        /></el-button>
+      </el-popover>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PanelViewResult',
+  props: {},
+  data() {
+    return {
+      panel: null
+    }
+  },
+  computed: {
+    canvasStyleData() {
+      return this.$store.state.canvasStyleData
+    }
+  },
+
+  created() {
+    // 初始化赋值
+    this.panel = this.canvasStyleData.panel
+  },
+  methods: {
+    onChangePanelStyle() {
+      this.$store.state.styleChangeTimes++
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .avatar-uploader >>> .el-upload {
+    width: 100px;
+    height: 60px;
+    line-height: 70px;
+  }
+
+  .avatar-uploader >>> .el-upload-list li {
+    width: 100px !important;
+    height: 60px !important;
+  }
+
+  .disabled >>> .el-upload--picture-card {
+    display: none;
+  }
+
+  .shape-item {
+    padding: 6px;
+    border: none;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .form-item-slider >>> .el-form-item__label {
+    font-size: 12px;
+    line-height: 38px;
+  }
+
+  .form-item >>> .el-form-item__label {
+    font-size: 12px;
+  }
+
+  .el-select-dropdown__item {
+    padding: 0 20px;
+  }
+
+  span {
+    font-size: 12px
+  }
+
+  .el-form-item {
+    margin-bottom: 6px;
+  }
+
+  .radio-span {
+    margin-top: 10px;
+  }
+
+  .radio-span >>> .el-radio__label {
+    margin-left: 4px;
+  }
+
+  .slider-area >>> .el-slider__runway {
+    display: none;
+  }
+
+  .result-count {
+    width: 80px;
+  }
+
+</style>

frontend/src/views/panel/SubjectSetting/index.vue

 <template>
   <el-row class="slider-container">
-    <div style="height: 40px; line-height: 40px; padding-left: 15px; text-align: left; white-space: pre; text-overflow: ellipsis; left: 0px; right: 0px; top: 0px; font-weight: 700">{{ $t('panel.dashboard_theme') }} </div>
-    <div style="height: 1px; position: absolute; left: 15px; right: 15px; top: 40px; box-sizing:border-box;border-bottom: 1px solid #e8eaed" />
+    <div
+      style="height: 40px; line-height: 40px; padding-left: 15px; text-align: left; white-space: pre; text-overflow: ellipsis; left: 0px; right: 0px; top: 0px; font-weight: 700"
+    >
+      {{ $t('panel.dashboard_theme') }}
+    </div>
+    <div
+      style="height: 1px; position: absolute; left: 15px; right: 15px; top: 40px; box-sizing:border-box;border-bottom: 1px solid #e8eaed"
+    />
     <div>
       <slider />
     </div>
@@ -9,38 +15,42 @@
     <div v-if="collapseShow" style="margin: 10px;overflow-y: auto">
       <el-collapse v-model="activeNames" @change="handleChange">
         <el-collapse-item :title="$t('panel.panel')" name="panel">
-          <!--          <el-row class="shape-item">-->
-          <!--            <span class="shape-item" style="margin-left: 10px">{{ $t('panel.new_element_distribution') }}:</span>-->
-          <!--            &lt;!&ndash;            <el-switch v-model="canvasStyleData.auxiliaryMatrix" :width="35" name="auxiliaryMatrix" />&ndash;&gt;-->
-          <!--            <el-radio-group v-model="canvasStyleData.auxiliaryMatrix" size="mini" name="auxiliaryMatrix" @change="styleChange">-->
-          <!--              <el-radio-button :label="true">-->
-          <!--                {{ $t('panel.matrix') }}<i class="icon iconfont icon-shujujuzhen" />-->
-          <!--              </el-radio-button>-->
-          <!--              <el-radio-button :label="false">-->
-          <!--                {{ $t('panel.suspension') }}<i class="icon iconfont icon-xuanfuanniu" />-->
-          <!--              </el-radio-button>-->
-          <!--            </el-radio-group>-->
-          <!--          </el-row>-->
           <el-row class="selector-div">
             <background-selector class="attr-selector" />
             <component-gap class="attr-selector" />
-            <Panel-Refresh-Time class="attr-selector" />
+            <panel-refresh-time class="attr-selector" />
+            <panel-view-result class="attr-selector" />
           </el-row>
         </el-collapse-item>
         <el-collapse-item :title="$t('chart.module_style')" name="component">
           <el-row class="selector-div">
-            <!--            <title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />-->
-            <panel-background-color-selector v-if="chart" class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
+            <panel-background-color-selector
+              v-if="chart"
+              class="attr-selector"
+              :chart="chart"
+              @onChangeBackgroundForm="onChangeBackgroundForm"
+            />
           </el-row>
         </el-collapse-item>
         <el-collapse-item :title="$t('chart.shape_attr')" name="graphical">
           <el-row class="selector-div">
-            <panel-color-selector :source-type="'panelEchart'" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
+            <panel-color-selector
+              :source-type="'panelEchart'"
+              class="attr-selector"
+              :chart="chart"
+              @onColorChange="onColorChange"
+            />
           </el-row>
         </el-collapse-item>
         <el-collapse-item :title="$t('panel.table')" name="table">
           <el-row class="selector-div">
-            <panel-color-selector index="10002" :source-type="'panelTable'" class="attr-selector" :chart="tableChart" @onColorChange="onTableColorChange" />
+            <panel-color-selector
+              index="10002"
+              :source-type="'panelTable'"
+              class="attr-selector"
+              :chart="tableChart"
+              @onColorChange="onTableColorChange"
+            />
           </el-row>
         </el-collapse-item>
       </el-collapse>
@@ -59,9 +69,11 @@ import PanelRefreshTime from './PanelStyle/PanelRefreshTime'
 import { mapState } from 'vuex'
 import { deepCopy } from '@/components/canvas/utils/utils'
 import bus from '@/utils/bus'
+import PanelViewResult from '@/views/panel/SubjectSetting/PanelStyle/PanelViewResult'
 
 export default {
   components: {
+    PanelViewResult,
     slider,
     BackgroundSelector,
     ComponentGap,
@@ -82,8 +94,7 @@ export default {
     'canvasStyleData'
   ]),
 
-  watch: {
-  },
+  watch: {},
 
   mounted() {
     bus.$on('onSubjectChange', () => {
@@ -119,10 +130,8 @@ export default {
       this.tableChart.customAttr.color = this.tableChart.customAttr.tableColor
     },
     handleChange(val) {
-      // console.log(val)
     },
     onChangePanelStyle(parma) {
-      // console.log('parma:' + JSON.stringify(parma))
     },
     onColorChange(val) {
       this.chart.customAttr.color = val
@@ -171,21 +180,24 @@ export default {
     color: #3d4d66;
     font-size: 12px;
   }
-  .attr-selector{
+
+  .attr-selector {
     background-color: white;
     height: 32px;
     margin: 5px 5px 5px 5px;
-    padding:0 4px;
+    padding: 0 4px;
     display: flex;
     align-items: center;
     z-index: 10001;
   }
-  .blackTheme .attr-selector{
+
+  .blackTheme .attr-selector {
     background-color: var(--MainBG)
   }
+
   .selector-div {
-      background-color: var(--MainBG, #f7f8fa);
-      margin: 5px
+    background-color: var(--MainBG, #f7f8fa);
+    margin: 5px
   }
 
 </style>

frontend/src/views/panel/panel.js

-
 // eslint-disable-next-line no-unused-vars
 import { BASE_CHART, BASE_CHART_STRING } from '@/views/chart/chart/chart'
 import { deepCopy } from '@/components/canvas/utils/utils'
@@ -7,7 +6,9 @@ export const DEFAULT_PANEL_STYLE = {
   color: '#ffffff',
   imageUrl: null,
   backgroundType: 'image',
-  gap: 'yes'
+  gap: 'yes',
+  resultMode: 'all', // 视图结果显示模式 all 视图 custom 仪表板自定义
+  resultCount: 1000 // 视图结果显示条数
 }
 
 export const CANVAS_STYLE = {