Skip to content

D
dataease
提交 abb58954 authored 作者: wangjiahao's avatar wangjiahao
浏览文件
操作

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

上级 16e807bc
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 407 行增加 和 147 行删除
backend/src/main/java/io/dataease/commons/constants/CommonConstants.java
浏览文件 @ abb58954
......@@ -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
浏览文件 @ abb58954
......@@ -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
浏览文件 @ abb58954
......@@ -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
浏览文件 @ abb58954
......@@ -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
浏览文件 @ abb58954
......@@ -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
浏览文件 @ abb58954
差异被折叠。
frontend/src/lang/zh.js
浏览文件 @ abb58954
......@@ -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
浏览文件 @ abb58954
......@@ -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
浏览文件 @ abb58954
......@@ -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 0 → 100644
浏览文件 @ abb58954
<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
浏览文件 @ abb58954
<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
浏览文件 @ abb58954
// 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 = {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论