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{
+  }
+
+  .chart-class {
     height: 100%;
-}
-.table-class{
+  }
+
+  .table-class {
     height: 100%;
-}
-.chart-error-class{
+  }
+
+  .chart-error-class {
     text-align: center;
-  height: calc(100% - 84px);
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: #ece7e7;
-}
-.active {
+  }
 
-}
+  .chart-error-message-class {
+    font-size: 12px;
+    color: #9ea6b2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .active {
 
-.active >>> .icon-fangda{
+  }
+
+  .active > > > .icon-fangda {
     z-index: 2;
-  display:block!important;
-}
+    display: block !important;
+  }
 
-.rect-shape > i{
+  .rect-shape > i {
     right: 5px;
     color: gray;
     position: absolute;
-}
+  }
 
-.rect-shape >>> i:hover {
+  .rect-shape > > > i:hover {
     color: red;
-}
+  }
 
-.rect-shape:hover >>> .icon-fangda {
+  .rect-shape:hover > > > .icon-fangda {
     z-index: 2;
-  display:block;
-}
+    display: block;
+  }
 
-.rect-shape>>>.icon-fangda {
-  display:none
-}
+  .rect-shape > > > .icon-fangda {
+    display: none
+  }
 
-.rect-shape:hover >>> .icon-shezhi {
+  .rect-shape:hover > > > .icon-shezhi {
     z-index: 2;
-  display:block;
-}
+    display: block;
+  }
 
-.rect-shape>>>.icon-shezhi {
-  display:none
-}
+  .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/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,18 +180,21 @@ 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

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 = {