center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

feat: 仪表板编辑视图支持批量设置样式 (#2238)

Browse Source 
* feat: 仪表板编辑视图支持多选

* feat: 仪表板编辑视图支持批量设置样式

Co-authored-by: wangjiahao <1522128093@qq.com>
This commit is contained in:
fit2cloudrd 2022-05-15 22:22:54 +08:00 committed by GitHub
parent a9a2832932
commit 866a840dc5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 1536 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
backend/src/main/java/io/dataease/controller/chart/ChartViewController.java
View File

@ -173,4 +173,11 @@ public class ChartViewController {
return chartViewService.getFieldData(id, requestList, false, fieldId);
}
@ApiIgnore
@ApiOperation("更新视图属性")
@PostMapping("/viewPropsSave/{panelId}")
public void viewPropsSave(@PathVariable String panelId, @RequestBody ChartViewWithBLOBs chartViewWithBLOBs) {
chartViewService.viewPropsSave(chartViewWithBLOBs);
}
}

10
backend/src/main/java/io/dataease/service/chart/ChartViewService.java
View File

@ -1423,4 +1423,14 @@ public class ChartViewService {
return res;
}
/**
* @param chartView
* @Description Save the properties and style information of the view
*/
public void viewPropsSave(ChartViewWithBLOBs chartView) {
long timestamp = System.currentTimeMillis();
chartView.setUpdateTime(timestamp);
chartViewMapper.updateByPrimaryKeySelective(chartView);
}
}

9
frontend/src/api/chart/chart.js
View File

@ -125,3 +125,12 @@ export function checkTitle(data) {
loading: false
})
}
export function viewPropsSave(panelId, data) {
return request({
url: '/chart/view/viewPropsSave/' + panelId,
method: 'post',
loading: false,
data
})
}

17
frontend/src/components/DeDrag/index.vue
View File

@ -11,6 +11,7 @@
[classNameRotatable]: rotatable,
[classNameActive]: enabled ,
['linkageSetting']:linkageActive,
['batchSetting']:batchOptActive,
['positionChange']:!(dragging || resizing||rotating)
},
className
@ -332,6 +333,11 @@ export default {
linkageActive: {
type: Boolean,
default: false
},
// batch operation
batchOptActive: {
type: Boolean,
default: false
}
},
data: function() {
@ -381,8 +387,8 @@ export default {
computed: {
// 编辑组件显示
editBarShow() {
// 编辑组件显示条件：1.当前组件存在 2.组件是激活状态或者当前在联动设置撞他 3.当前不在移动端画布编辑状态
return this.curComponent && (this.active || this.linkageSettingStatus) && !this.mobileLayoutStatus
// 编辑组件显示条件：1.当前组件存在 2.组件是激活状态或者当前在联动设置状态 3.当前不在移动端画布编辑状态 4.或者批量操作状态
return (this.curComponent && (this.active || this.linkageSettingStatus) && !this.mobileLayoutStatus) || this.batchOptStatus
},
// 移动端编辑组件选择按钮显示
mobileCheckBarShow() {
@ -580,7 +586,8 @@ export default {
'linkageSettingStatus',
'mobileLayoutStatus',
'componentGap',
'scrollAutoMove'
'scrollAutoMove',
'batchOptStatus'
])
},
watch: {
@ -1858,6 +1865,10 @@ export default {
opacity: 0.5;
}
.batchSetting{
opacity: 0.7;
}
.positionChange{
transition: 0.2s
}

29
frontend/src/components/canvas/components/Editor/EditBar.vue
View File

@ -5,6 +5,9 @@
<el-checkbox v-model="linkageInfo.linkageActive" />
<linkage-field v-if="linkageInfo.linkageActive" :element="element" />
</div>
<div v-if="batchOptAreaShow" style="margin-right: -1px;width: 18px;z-index: 5">
<el-checkbox @change="batchOptChange" />
</div>
<div v-if="normalAreaShow">
<setting-menu v-if="activeModel==='edit'" style="float: right;height: 24px!important;" @amRemoveItem="amRemoveItem" @linkJumpSet="linkJumpSet" @boardSet="boardSet">
<span slot="icon" :title="$t('panel.setting')">
@ -44,10 +47,9 @@ import bus from '@/utils/bus'
import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
import LinkageField from '@/components/canvas/components/Editor/LinkageField'
import toast from '@/components/canvas/utils/toast'
import Hyperlinks from '@/components/canvas/components/Editor/Hyperlinks'
export default {
components: { Hyperlinks, SettingMenu, LinkageField },
components: { SettingMenu, LinkageField },
props: {
element: {
@ -87,13 +89,17 @@ export default {
showJumpFlag() {
return this.curComponent && this.curComponent.hyperlinks && this.curComponent.hyperlinks.enable
},
// batch operation area
batchOptAreaShow() {
return this.batchOptStatus && this.element.type === 'view'
},
// 联动区域按钮显示
linkageAreaShow() {
return this.linkageSettingStatus && this.element !== this.curLinkageView && this.element.type === 'view'
},
// 编辑或预览区域显示
normalAreaShow() {
return !this.linkageSettingStatus
return !this.linkageSettingStatus && !this.batchOptStatus
},
existLinkage() {
let linkageFiltersCount = 0
@ -131,7 +137,9 @@ export default {
'linkageSettingStatus',
'targetLinkageInfo',
'curLinkageView',
'curCanvasScale'
'curCanvasScale',
'batchOptStatus',
'curBatchOptComponents'
])
},
beforeDestroy() {
@ -264,6 +272,17 @@ export default {
},
boardSet() {
this.$emit('boardSet')
},
batchOptChange(val) {
if (val) {
// push
this.$store.commit('addCurBatchComponent', this.element.propValue.viewId)
console.log('push')
} else {
// remove
this.$store.commit('removeCurBatchComponentWithId', this.element.propValue.viewId)
console.log('remove')
}
}
}
}
@ -279,7 +298,7 @@ export default {
padding-left: 5px;
padding-right: 2px;
cursor:pointer!important;
background-color: #0a7be0;
background-color: rgba(10,123,224, 1);
}
.bar-main i{
color: white;

22
frontend/src/components/canvas/components/Editor/index.vue
View File

@ -41,9 +41,10 @@
:snap="true"
:snap-tolerance="2"
:change-style="customStyle"
:draggable="!linkageSettingStatus"
:resizable="!linkageSettingStatus"
:linkage-active="linkageSettingStatus&&item===curLinkageView"
:draggable="deDraggable"
:resizable="deResizable"
:linkage-active="linkageActiveCheck(item)"
:batch-opt-active="batchOptActiveCheck(item)"
@refLineParams="getRefLineParams"
@showViewDetails="showViewDetails(index)"
@resizeView="resizeView(index,item)"
@ -955,6 +956,12 @@ export default {
}
},
computed: {
deDraggable() {
return !this.linkageSettingStatus && !this.batchOptStatus
},
deResizable() {
return !this.linkageSettingStatus && !this.batchOptStatus
},
showExportImgButton() {
// if the chart type belong to table,'export image' button should be hidden
return this.showChartInfo.type && !this.showChartInfo.type.includes('table')
@ -1016,7 +1023,8 @@ export default {
'doSnapshotIndex',
'componentGap',
'mobileLayoutStatus',
'curCanvasScale'
'curCanvasScale',
'batchOptStatus'
]),
filterMap() {
return buildFilterMap(this.componentData)
@ -1090,6 +1098,12 @@ export default {
created() {
},
methods: {
linkageActiveCheck(item) {
return this.linkageSettingStatus && item === this.curLinkageView
},
batchOptActiveCheck(item) {
return this.batchOptStatus && item.type === 'view'
},
canvasInit() {
this.editShow = false
setTimeout(() => {

11
frontend/src/components/canvas/components/Toolbar.vue
View File

@ -47,6 +47,9 @@
<el-tooltip v-if="canvasStyleData.aidedDesign.showGrid" :content="$t('panel.aided_grid')+':'+$t('panel.aided_grid_open')">
<el-button class="icon iconfont-tb icon-wangge-open" size="mini" circle @click="showGridChange" />
</el-tooltip>
<el-tooltip :content="$t('panel.batch_opt')">
<el-button class="icon iconfont-tb icon-piliang-copy" size="mini" circle @click="batchOption" />
</el-tooltip>
<span style="float: right;margin-left: 10px">
<el-button size="mini" :disabled="saveButtonDisabled" @click="save(false)">
{{ $t('commons.save') }}
@ -135,7 +138,8 @@ export default {
'targetLinkageInfo',
'mobileLayoutStatus',
'mobileComponentData',
'componentDataCache'
'componentDataCache',
'batchOptStatus'
])
},
created() {
@ -382,6 +386,11 @@ export default {
this.$store.state.styleChangeTimes++
this.canvasStyleData.aidedDesign.showGrid = !this.canvasStyleData.aidedDesign.showGrid
},
// batch option
batchOption() {
bus.$emit('change_panel_right_draw', !this.batchOptStatus)
this.$store.commit('setBatchOptStatus', !this.batchOptStatus)
},
// 启用移动端布局
openMobileLayout() {
this.$store.commit('openMobileLayout')

43
frontend/src/components/canvas/custom-component/UserView.vue
View File

@ -115,6 +115,7 @@ import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/componen
import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
import PluginCom from '@/views/system/plugin/PluginCom'
import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
import { viewPropsSave } from '@/api/chart/chart'
export default {
name: 'UserView',
components: { LabelNormalText, PluginCom, ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
@ -185,8 +186,14 @@ export default {
changeScaleIndex: 0,
pre: null,
preCanvasPanel: null,
// string
sourceCustomAttrStr: null,
// obj
sourceCustomAttr: null,
// string
sourceCustomStyleStr: null,
// obj
sourceCustomStyle: null,
scale: 1
}
},
@ -299,7 +306,8 @@ export default {
'mobileLayoutStatus',
'componentData',
'panelViewDetailsInfo',
'componentViewsData'
'componentViewsData',
'curBatchOptComponents'
])
},
@ -392,6 +400,30 @@ export default {
}
},
methods: {
batchOptChange(param) {
if (this.curBatchOptComponents.includes(this.element.propValue.viewId)) {
this.$store.state.styleChangeTimes++
// stylePriority change to 'view'
const updateParams = { 'id': this.chart.id, 'stylePriority': 'view' }
if (param.custom === 'customAttr') {
const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
sourceCustomAttr[param.property] = param.value
this.sourceCustomAttrStr = JSON.stringify(sourceCustomAttr)
this.chart.customAttr = this.sourceCustomAttrStr
updateParams['customAttr'] = this.sourceCustomAttrStr
} else if (param.custom === 'customStyle') {
this.sourceCustomStyleStr = this.chart.customStyle
const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr)
sourceCustomStyle[param.property] = param.value
this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle)
this.chart.customStyle = this.sourceCustomStyleStr
updateParams['customStyle'] = this.sourceCustomStyleStr
}
viewPropsSave(this.panelInfo.id, updateParams)
this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
this.mergeScale()
}
},
resizeChart() {
if (this.chart.type === 'map') {
this.destroyTimeMachine()
@ -416,6 +448,9 @@ export default {
bus.$on('view-in-cache', param => {
param.viewId && param.viewId === this.element.propValue.viewId && this.getDataEdit(param)
})
bus.$on('batch-opt-change', param => {
this.batchOptChange(param)
})
},
addViewTrackFilter(linkageParam) {
@ -488,7 +523,10 @@ export default {
this.chart = response.data
if (this.isEdit) {
this.componentViewsData[this.chart.id] = {
'title': this.chart.title
'title': this.chart.title,
'render': this.chart.render,
'type': this.chart.type,
'isPlugin': this.chart.isPlugin
}
}
this.chart['position'] = this.inTab ? 'tab' : 'panel'
@ -797,7 +835,6 @@ export default {
this.sourceCustomAttrStr = this.chart.customAttr
this.sourceCustomStyleStr = this.chart.customStyle
this.mergeScale()
this.mergeStyle()
}
}
}

1
frontend/src/lang/en.js
View File

@ -1430,6 +1430,7 @@ export default {
sure_bt: 'Confirm'
},
panel: {
batch_opt: 'Batch Operation',
edit_leave_tips: 'Do You Want To Abandon And Leave The Current Page?',
hyperlinks: 'Hyperlinks',
is_live: 'Is Live',

1
frontend/src/lang/tw.js
View File

@ -1431,6 +1431,7 @@ export default {
sure_bt: '確定'
},
panel: {
batch_opt: '批量操作',
edit_leave_tips: '是否放弃编辑离开当前界面？',
hyperlinks: '超鏈接',
is_live: '是否直播',

1
frontend/src/lang/zh.js
View File

@ -1438,6 +1438,7 @@ export default {
sure_bt: '确定'
},
panel: {
batch_opt: '批量操作',
edit_leave_tips: '是否放弃编辑离开当前界面？',
hyperlinks: '超链接',
is_live: '是否直播',

125
frontend/src/store/index.js
View File

@ -29,6 +29,8 @@ import {
} from '@/views/panel/panel'
import bus from '@/utils/bus'
import { BASE_MOBILE_STYLE } from '@/components/canvas/custom-component/component-list'
import { TYPE_CONFIGS } from '@/views/chart/chart/util'
import { deepCopy } from '@/components/canvas/utils/utils'
Vue.use(Vuex)
@ -111,7 +113,19 @@ const data = {
// 当前tab页内组件
curActiveTabInner: null,
// static resource local path
staticResourcePath: '/static-resource/'
staticResourcePath: '/static-resource/',
// panel edit batch operation status
batchOptStatus: false,
// Currently selected components
curBatchOptComponents: [],
mixProperties: [],
batchOptChartInfo: null,
batchOptViews: {},
// properties changed
changeProperties: {
customStyle: {},
customAttr: {}
}
},
mutations: {
...animation.mutations,
@ -512,6 +526,115 @@ const data = {
},
resetViewEditInfo(state) {
state.panelViewEditInfo = {}
},
removeCurBatchComponentWithId(state, id) {
for (let index = 0; index < state.curBatchOptComponents.length; index++) {
const element = state.curBatchOptComponents[index]
if (element === id) {
delete state.batchOptViews[id]
state.curBatchOptComponents.splice(index, 1)
this.commit('setBatchOptChartInfo')
break
}
}
},
addCurBatchComponent(state, id) {
if (id) {
state.curBatchOptComponents.push(id)
// get view base info
const viewBaseInfo = state.componentViewsData[id]
// get properties
const viewConfig = TYPE_CONFIGS.filter(item => item.render === viewBaseInfo.render && item.value === viewBaseInfo.type)
const viewProperties = viewConfig ? viewConfig[0].properties : []
if (state.mixProperties.length > 0) {
// If it exists , taking the intersection
state.mixProperties = state.mixProperties.filter(property => viewProperties.indexOf(property) > -1)
} else {
// If it doesn't exist, assignment directly
state.mixProperties = deepCopy(viewProperties)
}
if (viewConfig && viewConfig.length > 0) {
state.batchOptViews[id] = viewConfig[0]
this.commit('setBatchOptChartInfo')
}
}
},
setBatchOptChartInfo(state) {
let render = null
let type = null
let isPlugin = null
state.mixProperties = []
if (state.batchOptViews && JSON.stringify(state.batchOptViews) !== '{}') {
for (const key in state.batchOptViews) {
if (state.mixProperties.length > 0) {
// If it exists , taking the intersection
state.mixProperties = state.mixProperties.filter(property => state.batchOptViews[key].properties.indexOf(property) > -1)
} else {
// If it doesn't exist, assignment directly
state.mixProperties = deepCopy(state.batchOptViews[key].properties)
}
if (render && render !== state.batchOptViews[key].render) {
render = 'mix'
} else {
render = state.batchOptViews[key].render
}
if (type && type !== state.batchOptViews[key].value) {
type = 'mix'
} else {
type = state.batchOptViews[key].value
}
if (isPlugin && isPlugin !== state.batchOptViews[key].isPlugin) {
isPlugin = 'mix'
} else {
isPlugin = state.batchOptViews[key].isPlugin
}
}
// Assembly history settings 'customAttr' & 'customStyle'
state.batchOptChartInfo = {
'mode': 'batchOpt',
'render': render,
'type': type,
'isPlugin': isPlugin,
'customAttr': state.changeProperties.customAttr,
'customStyle': state.changeProperties.customStyle
}
} else {
state.batchOptChartInfo = null
}
},
setBatchOptStatus(state, status) {
state.batchOptStatus = status
// Currently selected components
state.curBatchOptComponents = []
state.mixProperties = []
state.batchOptChartInfo = null
state.batchOptViews = {}
state.changeProperties = {
customStyle: {},
customAttr: {}
}
},
setChangeProperties(state, propertyInfo) {
state.changeProperties[propertyInfo.custom][propertyInfo.property] = propertyInfo.value
},
initCanvas(state) {
this.commit('setCurComponent', { component: null, index: null })
this.commit('clearLinkageSettingInfo', false)
this.commit('resetViewEditInfo')
state.batchOptStatus = false
// Currently selected components
state.curBatchOptComponents = []
state.mixProperties = []
state.batchOptChartInfo = null
state.batchOptViews = {}
state.changeProperties = {
customStyle: {},
customAttr: {}
}
}
},
modules: {

395
frontend/src/views/chart/chart/util.js
View File

@ -33,65 +33,121 @@ export const TYPE_CONFIGS = [
category: 'chart.chart_type_table',
value: 'table-normal',
title: 'chart.chart_table_normal',
icon: 'table-normal'
icon: 'table-normal',
properties: [
'color-selector',
'size-selector-ant-v',
'title-selector-ant-v'
]
},
{
render: 'antv',
category: 'chart.chart_type_table',
value: 'table-info',
title: 'chart.chart_table_info',
icon: 'table-info'
icon: 'table-info',
properties: [
'color-selector',
'size-selector-ant-v',
'title-selector-ant-v'
]
},
{
render: 'antv',
category: 'chart.chart_type_table',
value: 'table-pivot',
title: 'chart.chart_table_pivot',
icon: 'table-pivot'
icon: 'table-pivot',
properties: [
'color-selector',
'size-selector-ant-v',
'total-cfg',
'title-selector-ant-v'
]
},
{
render: 'antv',
category: 'chart.chart_type_quota',
value: 'label',
title: 'chart.chart_label',
icon: 'label'
icon: 'label',
properties: [
'color-selector',
'size-selector-ant-v',
'title-selector-ant-v'
]
},
{
render: 'antv',
category: 'chart.chart_type_quota',
value: 'text',
title: 'chart.chart_card',
icon: 'text'
icon: 'text',
properties: [
'color-selector',
'size-selector-ant-v',
'title-selector-ant-v'
]
},
{
render: 'antv',
category: 'chart.chart_type_quota',
value: 'gauge',
title: 'chart.chart_gauge',
icon: 'gauge'
icon: 'gauge',
properties: [
'color-selector',
'size-selector-ant-v',
'label-selector-ant-v',
'title-selector-ant-v'
]
},
{
render: 'antv',
category: 'chart.chart_type_quota',
value: 'liquid',
title: 'chart.chart_liquid',
icon: 'liquid'
icon: 'liquid',
properties: [
'color-selector',
'size-selector-ant-v',
'label-selector-ant-v',
'title-selector-ant-v'
]
},
{
render: 'antv',
category: 'chart.chart_type_trend',
value: 'line',
title: 'chart.chart_line',
icon: 'line'
icon: 'line',
properties: [
'color-selector',
'size-selector-ant-v',
'label-selector-ant-v',
'tooltip-selector-ant-v',
'x-axis-selector-ant-v',
'y-axis-selector-ant-v',
'title-selector-ant-v',
'legend-selector-ant-v'
]
},
{
render: 'antv',
category: 'chart.chart_type_trend',
value: 'line-stack',
title: 'chart.chart_line_stack',
icon: 'line-stack'
icon: 'line-stack',
properties: [
'color-selector',
'size-selector-ant-v',
'label-selector-ant-v',
'tooltip-selector-ant-v',
'x-axis-selector-ant-v',
'y-axis-selector-ant-v',
'title-selector-ant-v',
'legend-selector-ant-v'
]
},
{
@ -99,35 +155,82 @@ export const TYPE_CONFIGS = [
category: 'chart.chart_type_compare',
value: 'bar',
title: 'chart.chart_bar',
icon: 'bar'
icon: 'bar',
properties: [
'color-selector',
'size-selector-ant-v',
'label-selector-ant-v',
'tooltip-selector-ant-v',
'x-axis-selector-ant-v',
'y-axis-selector-ant-v',
'title-selector-ant-v',
'legend-selector-ant-v'
]
},
{
render: 'antv',
category: 'chart.chart_type_compare',
value: 'bar-stack',
title: 'chart.chart_bar_stack',
icon: 'bar-stack'
icon: 'bar-stack',
properties: [
'color-selector',
'label-selector-ant-v',
'tooltip-selector-ant-v',
'x-axis-selector-ant-v',
'y-axis-selector-ant-v',
'title-selector-ant-v',
'legend-selector-ant-v'
]
},
{
render: 'antv',
category: 'chart.chart_type_compare',
value: 'waterfall',
title: 'chart.chart_waterfall',
icon: 'waterfall'
icon: 'waterfall',
properties: [
'color-selector',
'label-selector-ant-v',
'tooltip-selector-ant-v',
'x-axis-selector-ant-v',
'y-axis-selector-ant-v',
'title-selector-ant-v'
]
},
{
render: 'antv',
category: 'chart.chart_type_compare',
value: 'bar-horizontal',
title: 'chart.chart_bar_horizontal',
icon: 'bar-horizontal'
icon: 'bar-horizontal',
properties: [
'color-selector',
'size-selector-ant-v',
'label-selector-ant-v',
'tooltip-selector-ant-v',
'x-axis-selector-ant-v',
'y-axis-selector-ant-v',
'title-selector-ant-v',
'legend-selector-ant-v'
]
},
{
render: 'antv',
category: 'chart.chart_type_compare',
value: 'bar-stack-horizontal',
title: 'chart.chart_bar_stack_horizontal',
icon: 'bar-stack-horizontal'
icon: 'bar-stack-horizontal',
properties: [
'color-selector',
'size-selector-ant-v',
'label-selector-ant-v',
'tooltip-selector-ant-v',
'x-axis-selector-ant-v',
'y-axis-selector-ant-v',
'title-selector-ant-v',
'legend-selector-ant-v'
]
},
{
@ -135,35 +238,72 @@ export const TYPE_CONFIGS = [
category: 'chart.chart_type_distribute',
value: 'pie',
title: 'chart.chart_pie',
icon: 'pie'
icon: 'pie',
properties: [
'color-selector',
'size-selector-ant-v',
'label-selector-ant-v',
'tooltip-selector-ant-v',
'title-selector-ant-v',
'legend-selector-ant-v'
]
},
{
render: 'antv',
category: 'chart.chart_type_distribute',
value: 'pie-rose',
title: 'chart.chart_pie_rose',
icon: 'pie-rose'
icon: 'pie-rose',
properties: [
'color-selector',
'size-selector-ant-v',
'label-selector-ant-v',
'tooltip-selector-ant-v',
'title-selector-ant-v',
'legend-selector-ant-v'
]
},
{
render: 'antv',
category: 'chart.chart_type_distribute',
value: 'radar',
title: 'chart.chart_radar',
icon: 'radar'
icon: 'radar',
properties: [
'color-selector',
'size-selector-ant-v',
'label-selector-ant-v',
'tooltip-selector-ant-v',
'split-selector-ant-v',
'title-selector-ant-v',
'legend-selector-ant-v'
]
},
{
render: 'antv',
category: 'chart.chart_type_distribute',
value: 'treemap',
title: 'chart.chart_treemap',
icon: 'treemap'
icon: 'treemap',
properties: [
'color-selector',
'label-selector-ant-v',
'tooltip-selector-ant-v',
'title-selector-ant-v',
'legend-selector-ant-v'
]
},
{
render: 'antv',
category: 'chart.chart_type_distribute',
value: 'word-cloud',
title: 'chart.chart_word_cloud',
icon: 'word-cloud'
icon: 'word-cloud',
properties: [
'color-selector',
'tooltip-selector-ant-v',
'title-selector-ant-v'
]
},
{
@ -171,14 +311,31 @@ export const TYPE_CONFIGS = [
category: 'chart.chart_type_relation',
value: 'scatter',
title: 'chart.chart_scatter',
icon: 'scatter'
icon: 'scatter',
properties: [
'color-selector',
'size-selector-ant-v',
'label-selector-ant-v',
'tooltip-selector-ant-v',
'x-axis-selector-ant-v',
'y-axis-selector-ant-v',
'title-selector-ant-v',
'legend-selector-ant-v'
]
},
{
render: 'antv',
category: 'chart.chart_type_relation',
value: 'funnel',
title: 'chart.chart_funnel',
icon: 'funnel'
icon: 'funnel',
properties: [
'color-selector',
'label-selector-ant-v',
'tooltip-selector-ant-v',
'title-selector-ant-v',
'legend-selector-ant-v'
]
},
/* 下面是echarts图表类型 */
{
@ -186,14 +343,24 @@ export const TYPE_CONFIGS = [
category: 'chart.chart_type_table',
value: 'table-normal',
title: 'chart.chart_table_normal',
icon: 'table-normal'
icon: 'table-normal',
properties: [
'color-selector',
'size-selector',
'title-selector'
]
},
{
render: 'echarts',
category: 'chart.chart_type_table',
value: 'table-info',
title: 'chart.chart_table_info',
icon: 'table-info'
icon: 'table-info',
properties: [
'color-selector',
'size-selector',
'title-selector'
]
},
{
@ -201,21 +368,37 @@ export const TYPE_CONFIGS = [
category: 'chart.chart_type_quota',
value: 'label',
title: 'chart.chart_label',
icon: 'label'
icon: 'label',
properties: [
'color-selector',
'size-selector',
'title-selector'
]
},
{
render: 'echarts',
category: 'chart.chart_type_quota',
value: 'text',
title: 'chart.chart_card',
icon: 'text'
icon: 'text',
properties: [
'color-selector',
'size-selector',
'title-selector'
]
},
{
render: 'echarts',
category: 'chart.chart_type_quota',
value: 'gauge',
title: 'chart.chart_gauge',
icon: 'gauge'
icon: 'gauge',
properties: [
'color-selector',
'size-selector',
'label-selector',
'title-selector',
]
},
{
@ -223,21 +406,52 @@ export const TYPE_CONFIGS = [
category: 'chart.chart_type_trend',
value: 'line',
title: 'chart.chart_line',
icon: 'line'
icon: 'line',
properties: [
'color-selector',
'size-selector',
'label-selector',
'tooltip-selector',
'x-axis-selector',
'y-axis-selector',
'title-selector',
'legend-selector'
]
},
{
render: 'echarts',
category: 'chart.chart_type_trend',
value: 'line-stack',
title: 'chart.chart_line_stack',
icon: 'line-stack'
icon: 'line-stack',
properties: [
'color-selector',
'size-selector',
'label-selector',
'tooltip-selector',
'x-axis-selector',
'y-axis-selector',
'title-selector',
'legend-selector'
]
},
{
render: 'echarts',
category: 'chart.chart_type_trend',
value: 'chart-mix',
title: 'chart.chart_mix',
icon: 'chart-mix'
icon: 'chart-mix',
properties: [
'color-selector',
'size-selector',
'label-selector',
'tooltip-selector',
'x-axis-selector',
'y-axis-selector',
'y-axis-ext-selector',
'title-selector',
'legend-selector'
]
},
{
@ -245,28 +459,68 @@ export const TYPE_CONFIGS = [
category: 'chart.chart_type_compare',
value: 'bar',
title: 'chart.chart_bar',
icon: 'bar'
icon: 'bar',
properties: [
'color-selector',
'size-selector',
'label-selector',
'tooltip-selector',
'x-axis-selector',
'y-axis-selector',
'title-selector',
'legend-selector'
]
},
{
render: 'echarts',
category: 'chart.chart_type_compare',
value: 'bar-stack',
title: 'chart.chart_bar_stack',
icon: 'bar-stack'
icon: 'bar-stack',
properties: [
'color-selector',
'size-selector',
'label-selector',
'tooltip-selector',
'x-axis-selector',
'y-axis-selector',
'title-selector',
'legend-selector'
]
},
{
render: 'echarts',
category: 'chart.chart_type_compare',
value: 'bar-horizontal',
title: 'chart.chart_bar_horizontal',
icon: 'bar-horizontal'
icon: 'bar-horizontal',
properties: [
'color-selector',
'size-selector',
'label-selector',
'tooltip-selector',
'x-axis-selector',
'y-axis-selector',
'title-selector',
'legend-selector'
]
},
{
render: 'echarts',
category: 'chart.chart_type_compare',
value: 'bar-stack-horizontal',
title: 'chart.chart_bar_stack_horizontal',
icon: 'bar-stack-horizontal'
icon: 'bar-stack-horizontal',
properties: [
'color-selector',
'size-selector',
'label-selector',
'tooltip-selector',
'x-axis-selector',
'y-axis-selector',
'title-selector',
'legend-selector'
]
},
{
@ -274,28 +528,60 @@ export const TYPE_CONFIGS = [
category: 'chart.chart_type_distribute',
value: 'pie',
title: 'chart.chart_pie',
icon: 'pie'
icon: 'pie',
properties: [
'color-selector',
'size-selector',
'label-selector',
'tooltip-selector',
'title-selector',
'legend-selector'
]
},
{
render: 'echarts',
category: 'chart.chart_type_distribute',
value: 'pie-rose',
title: 'chart.chart_pie_rose',
icon: 'pie-rose'
icon: 'pie-rose',
properties: [
'color-selector',
'size-selector',
'label-selector',
'tooltip-selector',
'title-selector',
'legend-selector'
]
},
{
render: 'echarts',
category: 'chart.chart_type_distribute',
value: 'radar',
title: 'chart.chart_radar',
icon: 'radar'
icon: 'radar',
properties: [
'color-selector',
'size-selector',
'label-selector',
'tooltip-selector',
'split-selector',
'title-selector',
'legend-selector'
]
},
{
render: 'echarts',
category: 'chart.chart_type_distribute',
value: 'treemap',
title: 'chart.chart_treemap',
icon: 'treemap'
icon: 'treemap',
properties: [
'color-selector',
'size-selector',
'label-selector',
'tooltip-selector',
'title-selector'
]
},
{
@ -303,14 +589,32 @@ export const TYPE_CONFIGS = [
category: 'chart.chart_type_relation',
value: 'scatter',
title: 'chart.chart_scatter',
icon: 'scatter'
icon: 'scatter',
properties: [
'color-selector',
'size-selector',
'label-selector',
'tooltip-selector',
'x-axis-selector',
'y-axis-selector',
'title-selector',
'legend-selector'
]
},
{
render: 'echarts',
category: 'chart.chart_type_relation',
value: 'funnel',
title: 'chart.chart_funnel',
icon: 'funnel'
icon: 'funnel',
properties: [
'color-selector',
'size-selector',
'label-selector',
'tooltip-selector',
'title-selector',
'legend-selector'
]
},
{
@ -318,7 +622,14 @@ export const TYPE_CONFIGS = [
category: 'chart.chart_type_space',
value: 'map',
title: 'chart.chart_map',
icon: 'map'
icon: 'map',
properties: [
'color-selector',
'size-selector',
'label-selector',
'tooltip-selector',
'title-selector'
]
}
]

39
frontend/src/views/chart/components/shape-attr/SizeSelectorCommon.vue Normal file
View File

@ -0,0 +1,39 @@
<template>
<div style="width: 100%" >
</div>
</template>
<script>
export default {
name: 'SizeSelector',
props: {
param: {
type: Object,
required: true
},
chart: {
type: Object,
required: true
}
},
data() {
return {
}
},
watch: {
},
mounted() {
},
methods: {
}
}
</script>
<style scoped>
</style>

18
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -652,9 +652,11 @@
</el-tab-pane>
<el-tab-pane :label="$t('chart.chart_style')" class="padding-tab" style="width: 300px">
<chart-style
v-if="chartProperties"
:param="param"
:view="view"
:chart="chart"
:properties="chartProperties"
@calcStyle="calcStyle"
@onColorChange="onColorChange"
@onSizeChange="onSizeChange"
@ -1015,9 +1017,12 @@ import { pluginTypes } from '@/api/chart/chart'
import ValueFormatterEdit from '@/views/chart/components/value-formatter/ValueFormatterEdit'
import ChartStyle from '@/views/chart/view/ChartStyle'
import CustomSortEdit from '@/views/chart/components/compare/CustomSortEdit'
import { TYPE_CONFIGS } from '@/views/chart/chart/util'
import ChartStyleBack from '@/views/chart/view/ChartStyleBack'
export default {
name: 'ChartEdit',
components: {
ChartStyleBack,
CustomSortEdit,
ChartStyle,
ValueFormatterEdit,
@ -1159,6 +1164,19 @@ export default {
}
},
computed: {
chartProperties() {
const _this = this
if (_this.chart && _this.chart.render) {
const viewConfig = TYPE_CONFIGS.filter(item => item.render === _this.chart.render && item.value === _this.chart.type)
if (viewConfig) {
return viewConfig[0].properties
} else {
return null
}
} else {
return null
}
},
chartType() {
return this.chart.type
},

162
frontend/src/views/chart/view/ChartStyle.vue
View File

@ -12,7 +12,7 @@
style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;padding-right: 6px"
class="attr-style theme-border-class"
>
<el-row class="padding-lr">
<el-row v-if="chart.mode!=='batchOpt'" class="padding-lr">
<span class="title-text">{{ $t('chart.style_priority') }}</span>
<el-row>
<el-radio-group
@ -34,11 +34,11 @@
:param="param"
class="attr-selector"
:chart="chart"
@onColorChange="onColorChange"
@onColorChange="onColorChange($event,'color-selector')"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.render && view.render === 'echarts' && chart.type !== 'map' && chart.type !== 'waterfall' && chart.type !== 'word-cloud'"
v-show="showPropertiesCollapse(['size-selector','no-mix'])"
name="size"
:title="$t('chart.size')"
>
@ -46,11 +46,11 @@
:param="param"
class="attr-selector"
:chart="chart"
@onSizeChange="onSizeChange"
@onSizeChange="onSizeChange($event,'size-selector')"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.render && view.render === 'antv' && chart.type !== 'map' && chart.type !== 'waterfall' && chart.type !== 'word-cloud' && chart.type !== 'treemap' && chart.type !== 'funnel' && chart.type !== 'bar-stack'"
v-show="showPropertiesCollapse(['size-selector-ant-v'])"
name="size"
:title="(chart.type && chart.type.includes('table')) ? $t('chart.table_config') : $t('chart.size')"
>
@ -58,51 +58,51 @@
:param="param"
class="attr-selector"
:chart="chart"
@onSizeChange="onSizeChange"
@onSizeChange="onSizeChange($event,'size-selector-ant-v')"
/>
</el-collapse-item>
<el-collapse-item
v-show="!view.type.includes('table') && !view.type.includes('text') && view.type !== 'word-cloud' && view.type !== 'label'"
v-show="showPropertiesCollapse(['label-selector','label-selector-ant-v'])"
name="label"
:title="$t('chart.label')"
>
<label-selector
v-if="view.render && view.render === 'echarts'"
v-if="showProperties('label-selector')"
:param="param"
class="attr-selector"
:chart="chart"
@onLabelChange="onLabelChange"
@onLabelChange="onLabelChange($event,'label-selector')"
/>
<label-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
v-else-if="showProperties('label-selector-ant-v')"
:param="param"
class="attr-selector"
:chart="chart"
@onLabelChange="onLabelChange"
@onLabelChange="onLabelChange($event,'label-selector-ant-v')"
/>
</el-collapse-item>
<el-collapse-item
v-show="!view.type.includes('table') && !view.type.includes('text') && view.type !== 'liquid' && view.type !== 'gauge' && view.type !== 'label'"
v-show="showPropertiesCollapse(['tooltip-selector','tooltip-selector-ant-v'])"
name="tooltip"
:title="$t('chart.tooltip')"
>
<tooltip-selector
v-if="view.render && view.render === 'echarts'"
v-if="showProperties('tooltip-selector')"
:param="param"
class="attr-selector"
:chart="chart"
@onTooltipChange="onTooltipChange"
@onTooltipChange="onTooltipChange($event,'tooltip-selector')"
/>
<tooltip-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
v-else-if="showProperties('tooltip-selector-ant-v')"
:param="param"
class="attr-selector"
:chart="chart"
@onTooltipChange="onTooltipChange"
@onTooltipChange="onTooltipChange($event,'tooltip-selector-ant-v')"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.type === 'table-pivot'"
v-show="showPropertiesCollapse(['total-cfg'])"
name="totalCfg"
:title="$t('chart.total_cfg')"
>
@ -110,7 +110,7 @@
:param="param"
class="attr-selector"
:chart="chart"
@onTotalCfgChange="onTotalCfgChange"
@onTotalCfgChange="onTotalCfgChange($event,'total-cfg')"
/>
</el-collapse-item>
</el-collapse>
@ -119,119 +119,119 @@
<span class="padding-lr">{{ $t('chart.module_style') }}</span>
<el-collapse v-model="styleActiveNames" class="style-collapse">
<el-collapse-item
v-show="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall')"
v-show="showPropertiesCollapse(['x-axis-selector','x-axis-selector-ant-v'])"
name="xAxis"
:title="$t('chart.xAxis')"
>
<x-axis-selector
v-if="view.render && view.render === 'echarts'"
v-if="showProperties('x-axis-selector')"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeXAxisForm="onChangeXAxisForm"
@onChangeXAxisForm="onChangeXAxisForm($event,'x-axis-selector')"
/>
<x-axis-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
v-else-if="showProperties('x-axis-selector-ant-v')"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeXAxisForm="onChangeXAxisForm"
@onChangeXAxisForm="onChangeXAxisForm($event,'x-axis-selector-ant-v')"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall')"
v-show="showPropertiesCollapse(['y-axis-selector','y-axis-selector-ant-v'])"
name="yAxis"
:title="view.type === 'chart-mix' ? $t('chart.yAxis_main') : $t('chart.yAxis')"
>
<y-axis-selector
v-if="view.render && view.render === 'echarts'"
v-if="showProperties('y-axis-selector')"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeYAxisForm="onChangeYAxisForm"
@onChangeYAxisForm="onChangeYAxisForm($event,'y-axis-selector')"
/>
<y-axis-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
v-else-if="showProperties('y-axis-selector-ant-v')"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeYAxisForm="onChangeYAxisForm"
@onChangeYAxisForm="onChangeYAxisForm($event,'y-axis-selector-ant-v')"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.type && view.type === 'chart-mix'"
v-show="showPropertiesCollapse(['y-axis-ext-selector','y-axis-ext-selector-ant-v'])"
name="yAxisExt"
:title="$t('chart.yAxis_ext')"
>
<y-axis-ext-selector
v-if="view.render && view.render === 'echarts'"
v-if="showProperties('y-axis-ext-selector')"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeYAxisForm="onChangeYAxisExtForm"
@onChangeYAxisForm="onChangeYAxisExtForm($event,'y-axis-ext-selector')"
/>
<y-axis-ext-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
v-else-if="showProperties('y-axis-ext-selector-ant-v')"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeYAxisForm="onChangeYAxisExtForm"
@onChangeYAxisForm="onChangeYAxisExtForm($event,'y-axis-ext-selector-ant-v')"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.type && view.type.includes('radar')"
v-show="showPropertiesCollapse(['split-selector','split-selector-ant-v'])"
name="split"
:title="$t('chart.split')"
>
<split-selector
v-if="view.render && view.render === 'echarts'"
v-if="showProperties('split-selector')"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeSplitForm="onChangeSplitForm"
@onChangeSplitForm="onChangeSplitForm($event,'split-selector')"
/>
<size-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
<split-selector-ant-v
v-else-if="showProperties('split-selector-ant-v')"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeSplitForm="onChangeSplitForm"
@onChangeSplitForm="onChangeSplitForm($event,'split-selector-ant-v')"
/>
</el-collapse-item>
<el-collapse-item v-show="view.type" name="title" :title="$t('chart.title')">
<title-selector
v-if="view.render && view.render === 'echarts'"
v-if="showProperties('title-selector')"
:param="param"
class="attr-selector"
:chart="chart"
@onTextChange="onTextChange"
@onTextChange="onTextChange($event,'title-selector')"
/>
<title-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
v-else-if="showProperties('title-selector-ant-v')"
:param="param"
class="attr-selector"
:chart="chart"
@onTextChange="onTextChange"
@onTextChange="onTextChange($event,'title-selector-ant-v')"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.type && view.type !== 'map' && !view.type.includes('table') && !view.type.includes('text') && view.type !== 'label' && (chart.type !== 'treemap' || chart.render === 'antv') && view.type !== 'liquid' && view.type !== 'waterfall' && chart.type !== 'gauge' && chart.type !== 'word-cloud'"
v-show="showPropertiesCollapse(['legend-selector','legend-selector-ant-v'])"
name="legend"
:title="$t('chart.legend')"
>
<legend-selector
v-if="view.render && view.render === 'echarts'"
v-if="showProperties('legend-selector')"
:param="param"
class="attr-selector"
:chart="chart"
@onLegendChange="onLegendChange"
@onLegendChange="onLegendChange($event,'legend-selector')"
/>
<legend-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
v-else-if="showProperties('legend-selector-ant-v')"
:param="param"
class="attr-selector"
:chart="chart"
@onLegendChange="onLegendChange"
@onLegendChange="onLegendChange($event,'legend-selector-ant-v')"
/>
</el-collapse-item>
<el-collapse-item
@ -243,7 +243,7 @@
:param="param"
class="attr-selector"
:chart="chart"
@onChangeBackgroundForm="onChangeBackgroundForm"
@onChangeBackgroundForm="onChangeBackgroundForm($event,'background-color-selector')"
/>
</el-collapse-item>
</el-collapse>
@ -267,22 +267,24 @@ import YAxisSelector from '@/views/chart/components/component-style/YAxisSelecto
import YAxisSelectorAntV from '@/views/chart/components/component-style/YAxisSelectorAntV'
import YAxisExtSelector from '@/views/chart/components/component-style/YAxisExtSelector'
import YAxisExtSelectorAntV from '@/views/chart/components/component-style/YAxisExtSelectorAntV'
import SplitSelector from '@/views/chart/components/component-style/SplitSelector'
import TitleSelector from '@/views/chart/components/component-style/TitleSelector'
import TitleSelectorAntV from '@/views/chart/components/component-style/TitleSelectorAntV'
import LegendSelector from '@/views/chart/components/component-style/LegendSelector'
import LegendSelectorAntV from '@/views/chart/components/component-style/LegendSelectorAntV'
import BackgroundColorSelector from '@/views/chart/components/component-style/BackgroundColorSelector'
import SplitSelector from '@/views/chart/components/component-style/SplitSelector'
import SplitSelectorAntV from '@/views/chart/components/component-style/SplitSelectorAntV'
export default {
name: 'ChartStyle',
components: {
SplitSelectorAntV,
SplitSelector,
BackgroundColorSelector,
LegendSelectorAntV,
LegendSelector,
TitleSelectorAntV,
TitleSelector,
SplitSelector,
YAxisExtSelectorAntV,
YAxisExtSelector,
YAxisSelectorAntV,
@ -306,6 +308,10 @@ export default {
view: {
type: Object,
required: true
},
properties: {
type: Array,
required: true
}
},
data() {
@ -313,48 +319,78 @@ export default {
attrActiveNames: [],
styleActiveNames: []
}
},
computed: {
},
created() {
},
methods: {
showProperties(property) {
return this.properties.includes(property)
},
showPropertiesCollapse(propertiesInfo) {
let includeCount = 0
// Property does not support mixed mode
if (propertiesInfo.includes('no-mix') && this.chart.type === 'mix') {
return false
} else {
propertiesInfo.forEach(property => {
this.properties.includes(property) && includeCount++
})
return includeCount > 0
}
},
calcStyle() {
this.$emit('calcStyle')
},
onColorChange(val) {
onColorChange(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onColorChange', val)
},
onSizeChange(val) {
onSizeChange(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onSizeChange', val)
},
onLabelChange(val) {
onLabelChange(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onLabelChange', val)
},
onTooltipChange(val) {
onTooltipChange(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onTooltipChange', val)
},
onTotalCfgChange(val) {
onTotalCfgChange(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onTotalCfgChange', val)
},
onChangeXAxisForm(val) {
onChangeXAxisForm(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onChangeXAxisForm', val)
},
onChangeYAxisForm(val) {
onChangeYAxisForm(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onChangeYAxisForm', val)
},
onChangeYAxisExtForm(val) {
onChangeYAxisExtForm(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onChangeYAxisExtForm', val)
},
onChangeSplitForm(val) {
onChangeSplitForm(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onChangeSplitForm', val)
},
onTextChange(val) {
onTextChange(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onTextChange', val)
},
onLegendChange(val) {
onLegendChange(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onLegendChange', val)
},
onChangeBackgroundForm(val) {
onChangeBackgroundForm(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onChangeBackgroundForm', val)
}
}

609
frontend/src/views/chart/view/ChartStyleBack.vue Normal file
View File

@ -0,0 +1,609 @@
<template>
<el-row class="view-panel">
<plugin-com
v-if="view.isPlugin"
style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;"
class="attr-style theme-border-class"
:component-name="view.type + '-style'"
:obj="{view, param, chart}"
/>
<div
v-else
style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;padding-right: 6px"
class="attr-style theme-border-class"
>
<el-row class="padding-lr">
<span class="title-text">{{ $t('chart.style_priority') }}</span>
<br>
<span class="title-text">{{ view.render }}</span>
<br>
<span class="title-text">{{ view.type }}</span>
<el-row>
<el-radio-group
v-model="view.stylePriority"
class="radio-span"
size="mini"
@change="calcStyle"
>
<el-radio label="view"><span>{{ $t('chart.chart') }}</span></el-radio>
<el-radio label="panel"><span>{{ $t('chart.dashboard') }}</span></el-radio>
</el-radio-group>
</el-row>
</el-row>
<el-row>
<span class="padding-lr">{{ $t('chart.shape_attr') }}</span>
<el-collapse v-model="attrActiveNames" class="style-collapse">
<el-collapse-item name="color" :title="$t('chart.color')">
{{ 'color-selector' }}
<color-selector
:param="param"
class="attr-selector"
:chart="chart"
@onColorChange="onColorChange"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.render && view.render === 'echarts' && chart.type !== 'map' && chart.type !== 'waterfall' && chart.type !== 'word-cloud'"
name="size"
:title="$t('chart.size')"
>
{{ 'size-selector' }}
<size-selector
:param="param"
class="attr-selector"
:chart="chart"
@onSizeChange="onSizeChange"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.render && view.render === 'antv' && chart.type !== 'map' && chart.type !== 'waterfall' && chart.type !== 'word-cloud' && chart.type !== 'treemap' && chart.type !== 'funnel' && chart.type !== 'bar-stack'"
name="size"
:title="(chart.type && chart.type.includes('table')) ? $t('chart.table_config') : $t('chart.size')"
>
{{ 'size-selector-ant-v' }}
<size-selector-ant-v
:param="param"
class="attr-selector"
:chart="chart"
@onSizeChange="onSizeChange"
/>
</el-collapse-item>
<el-collapse-item
v-show="!view.type.includes('table') && !view.type.includes('text') && view.type !== 'word-cloud' && view.type !== 'label'"
name="label"
:title="$t('chart.label')"
>
<span v-show="view.render && view.render === 'echarts'">
{{ 'label-selector' }}
</span>
<span v-show="view.render && view.render === 'antv'">
{{ 'label-selector-ant-v' }}
</span>
<label-selector
v-if="view.render && view.render === 'echarts'"
:param="param"
class="attr-selector"
:chart="chart"
@onLabelChange="onLabelChange"
/>
<label-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
:param="param"
class="attr-selector"
:chart="chart"
@onLabelChange="onLabelChange"
/>
</el-collapse-item>
<el-collapse-item
v-show="!view.type.includes('table') && !view.type.includes('text') && view.type !== 'liquid' && view.type !== 'gauge' && view.type !== 'label'"
name="tooltip"
:title="$t('chart.tooltip')"
>
<span v-show="view.render && view.render === 'echarts'">
{{ 'tooltip-selector' }}
</span>
<span v-show="view.render && view.render === 'antv'">
{{ 'tooltip-selector-ant-v' }}
</span>
<tooltip-selector
v-if="view.render && view.render === 'echarts'"
:param="param"
class="attr-selector"
:chart="chart"
@onTooltipChange="onTooltipChange"
/>
<tooltip-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
:param="param"
class="attr-selector"
:chart="chart"
@onTooltipChange="onTooltipChange"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.type === 'table-pivot'"
name="totalCfg"
:title="$t('chart.total_cfg')"
>
{{ 'total-cfg' }}
<total-cfg
:param="param"
class="attr-selector"
:chart="chart"
@onTotalCfgChange="onTotalCfgChange"
/>
</el-collapse-item>
</el-collapse>
</el-row>
<el-row>
<span class="padding-lr">{{ $t('chart.module_style') }}</span>
<el-collapse v-model="styleActiveNames" class="style-collapse">
<el-collapse-item
v-show="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall')"
name="xAxis"
:title="$t('chart.xAxis')"
>
<span v-show="view.render && view.render === 'echarts'">
{{ 'x-axis-selector' }}
</span>
<span v-show="view.render && view.render === 'antv'">
{{ 'x-axis-selector-ant-v' }}
</span>
<x-axis-selector
v-if="view.render && view.render === 'echarts'"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeXAxisForm="onChangeXAxisForm"
/>
<x-axis-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeXAxisForm="onChangeXAxisForm"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall')"
name="yAxis"
:title="view.type === 'chart-mix' ? $t('chart.yAxis_main') : $t('chart.yAxis')"
>
<span v-show="view.render && view.render === 'echarts'">
{{ 'y-axis-selector' }}
</span>
<span v-show="view.render && view.render === 'antv'">
{{ 'y-axis-selector-ant-v' }}
</span>
<y-axis-selector
v-if="view.render && view.render === 'echarts'"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeYAxisForm="onChangeYAxisForm"
/>
<y-axis-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeYAxisForm="onChangeYAxisForm"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.type && view.type === 'chart-mix'"
name="yAxisExt"
:title="$t('chart.yAxis_ext')"
>
<span v-show="view.render && view.render === 'echarts'">
{{ 'y-axis-ext-selector' }}
</span>
<span v-show="view.render && view.render === 'antv'">
{{ 'y-axis-ext-selector-ant-v' }}
</span>
<y-axis-ext-selector
v-if="view.render && view.render === 'echarts'"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeYAxisForm="onChangeYAxisExtForm"
/>
<y-axis-ext-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeYAxisForm="onChangeYAxisExtForm"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.type && view.type.includes('radar')"
name="split"
:title="$t('chart.split')"
>
<span v-show="view.render && view.render === 'echarts'">
{{ 'split-selector' }}
</span>
<span v-show="view.render && view.render === 'antv'">
{{ 'split-selector-ant-v' }}
</span>
<split-selector
v-if="view.render && view.render === 'echarts'"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeSplitForm="onChangeSplitForm"
/>
<split-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
:param="param"
class="attr-selector"
:chart="chart"
@onChangeSplitForm="onChangeSplitForm"
/>
</el-collapse-item>
<el-collapse-item v-show="view.type" name="title" :title="$t('chart.title')">
<span v-show="view.render && view.render === 'echarts'">
{{ 'title-selector' }}
</span>
<span v-show="view.render && view.render === 'antv'">
{{ 'title-selector-ant-v' }}
</span>
<title-selector
v-if="view.render && view.render === 'echarts'"
:param="param"
class="attr-selector"
:chart="chart"
@onTextChange="onTextChange"
/>
<title-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
:param="param"
class="attr-selector"
:chart="chart"
@onTextChange="onTextChange"
/>
</el-collapse-item>
<el-collapse-item
v-show="view.type && view.type !== 'map' && !view.type.includes('table') && !view.type.includes('text') && view.type !== 'label' && (chart.type !== 'treemap' || chart.render === 'antv') && view.type !== 'liquid' && view.type !== 'waterfall' && chart.type !== 'gauge' && chart.type !== 'word-cloud'"
name="legend"
:title="$t('chart.legend')"
>
<span v-show="view.render && view.render === 'echarts'">
{{ 'legend-selector' }}
</span>
<span v-show="view.render && view.render === 'antv'">
{{ 'legend-selector-ant-v' }}
</span>
<legend-selector
v-if="view.render && view.render === 'echarts'"
:param="param"
class="attr-selector"
:chart="chart"
@onLegendChange="onLegendChange"
/>
<legend-selector-ant-v
v-else-if="view.render && view.render === 'antv'"
:param="param"
class="attr-selector"
:chart="chart"
@onLegendChange="onLegendChange"
/>
</el-collapse-item>
<el-collapse-item
v-if="view.customStyle && view.customStyle.background"
name="background"
:title="$t('chart.background')"
>
{{ background-color-selector }}
<background-color-selector
:param="param"
class="attr-selector"
:chart="chart"
@onChangeBackgroundForm="onChangeBackgroundForm"
/>
</el-collapse-item>
</el-collapse>
</el-row>
</div>
</el-row>
</template>
<script>
import PluginCom from '@/views/system/plugin/PluginCom'
import ColorSelector from '@/views/chart/components/shape-attr/ColorSelector'
import SizeSelector from '@/views/chart/components/shape-attr/SizeSelector'
import SizeSelectorAntV from '@/views/chart/components/shape-attr/SizeSelectorAntV'
import LabelSelector from '@/views/chart/components/shape-attr/LabelSelector'
import LabelSelectorAntV from '@/views/chart/components/shape-attr/LabelSelectorAntV'
import TooltipSelector from '@/views/chart/components/shape-attr/TooltipSelector'
import TooltipSelectorAntV from '@/views/chart/components/shape-attr/TooltipSelectorAntV'
import TotalCfg from '@/views/chart/components/shape-attr/TotalCfg'
import XAxisSelector from '@/views/chart/components/component-style/XAxisSelector'
import XAxisSelectorAntV from '@/views/chart/components/component-style/XAxisSelectorAntV'
import YAxisSelector from '@/views/chart/components/component-style/YAxisSelector'
import YAxisSelectorAntV from '@/views/chart/components/component-style/YAxisSelectorAntV'
import YAxisExtSelector from '@/views/chart/components/component-style/YAxisExtSelector'
import YAxisExtSelectorAntV from '@/views/chart/components/component-style/YAxisExtSelectorAntV'
import TitleSelector from '@/views/chart/components/component-style/TitleSelector'
import TitleSelectorAntV from '@/views/chart/components/component-style/TitleSelectorAntV'
import LegendSelector from '@/views/chart/components/component-style/LegendSelector'
import LegendSelectorAntV from '@/views/chart/components/component-style/LegendSelectorAntV'
import BackgroundColorSelector from '@/views/chart/components/component-style/BackgroundColorSelector'
import SplitSelector from "@/views/chart/components/component-style/SplitSelector";
import SplitSelectorAntV from "@/views/chart/components/component-style/SplitSelectorAntV";
export default {
name: 'ChartStyleBack',
components: {
SplitSelectorAntV,
SplitSelector,
BackgroundColorSelector,
LegendSelectorAntV,
LegendSelector,
TitleSelectorAntV,
TitleSelector,
YAxisExtSelectorAntV,
YAxisExtSelector,
YAxisSelectorAntV,
YAxisSelector,
XAxisSelectorAntV,
XAxisSelector,
TotalCfg,
TooltipSelectorAntV,
TooltipSelector,
LabelSelectorAntV, LabelSelector, SizeSelectorAntV, SizeSelector, ColorSelector, PluginCom
},
props: {
chart: {
type: Object,
required: true
},
param: {
type: Object,
required: true
},
view: {
type: Object,
required: true
},
properties: {
type: Array,
required: false
}
},
data() {
return {
attrActiveNames: [],
styleActiveNames: []
}
},
created() {
},
methods: {
calcStyle() {
this.$emit('calcStyle')
},
onColorChange(val) {
this.$emit('onColorChange', val)
},
onSizeChange(val) {
this.$emit('onSizeChange', val)
},
onLabelChange(val) {
this.$emit('onLabelChange', val)
},
onTooltipChange(val) {
this.$emit('onTooltipChange', val)
},
onTotalCfgChange(val) {
this.$emit('onTotalCfgChange', val)
},
onChangeXAxisForm(val) {
this.$emit('onChangeXAxisForm', val)
},
onChangeYAxisForm(val) {
this.$emit('onChangeYAxisForm', val)
},
onChangeYAxisExtForm(val) {
this.$emit('onChangeYAxisExtForm', val)
},
onChangeSplitForm(val) {
this.$emit('onChangeSplitForm', val)
},
onTextChange(val) {
this.$emit('onTextChange', val)
},
onLegendChange(val) {
this.$emit('onLegendChange', val)
},
onChangeBackgroundForm(val) {
this.$emit('onChangeBackgroundForm', val)
}
}
}
</script>
<style lang='scss' scoped>
.padding-lr {
padding: 0 6px;
}
.col {
width: 40%;
flex: 1;
padding: 10px;
border: solid 1px #eee;
border-radius: 5px;
float: left;
}
.col + .col {
margin-left: 10px;
}
.view-panel {
display: flex;
height: 100%;
background-color: #f7f8fa;
}
.blackTheme .view-panel {
background-color: var(--MainBG);
}
.el-form-item {
margin-bottom: 0;
}
span {
font-size: 12px;
}
.tab-header > > > .el-tabs__header {
border-top: solid 1px #eee;
border-right: solid 1px #eee;
}
.tab-header > > > .el-tabs__item {
font-size: 12px;
padding: 0 20px !important;
}
.blackTheme .tab-header > > > .el-tabs__item {
background-color: var(--MainBG);
}
.tab-header > > > .el-tabs__nav-scroll {
padding-left: 0 !important;
}
.tab-header > > > .el-tabs__header {
margin: 0 !important;
}
.tab-header > > > .el-tabs__content {
height: calc(100% - 40px);
}
.chart-icon {
width: 20px;
height: 20px;
}
.el-radio {
margin: 5px;
}
.el-radio > > > .el-radio__label {
padding-left: 0;
}
.attr-style {
height: calc(100vh - 56px - 60px - 40px - 40px);
}
.blackTheme .attr-style {
color: var(--TextPrimary);
}
.attr-selector {
width: 100%;
height: 100%;
margin: 6px 0;
padding: 0 4px;
display: flex;
align-items: center;
background-color: white
}
.blackTheme .attr-selector {
background-color: var(--MainBG)
}
.dialog-css > > > .el-dialog__title {
font-size: 14px;
}
.dialog-css > > > .el-dialog__header {
padding: 20px 20px 0;
}
.dialog-css > > > .el-dialog__body {
padding: 10px 20px 20px;
}
.blackTheme .theme-border-class {
color: var(--TextPrimary) !important;
background-color: var(--ContentBG);
}
.blackTheme .padding-lr {
border-color: var(--TableBorderColor) !important;
}
.blackTheme .theme-item-class {
background-color: var(--MainBG) !important;
border-color: var(--TableBorderColor) !important;
}
.icon-class {
color: #6c6c6c;
}
.blackTheme .icon-class {
color: #cccccc;
}
.radio-span > > > .el-radio__label {
margin-left: 4px;
}
.view-title-name {
display: -moz-inline-box;
display: inline-block;
width: 130px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 45px;
}
::v-deep .item-axis {
width: 128px !important;
}
::v-deep .el-slider__input {
width: 80px !important;
}
::v-deep .el-input-number--mini {
width: 100px !important;
}
::v-deep .el-slider__runway.show-input{
width: 80px!important;
}
.no-senior {
width: 100%;
text-align: center;
font-size: 12px;
padding-top: 40px;
overflow: auto;
border-right: 1px solid #e6e6e6;
height: 100%;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
</style>

143
frontend/src/views/chart/view/ChartStyleBatchSet.vue Normal file
View File

@ -0,0 +1,143 @@
<template>
<div class="batch-opt-main">
<el-row style="height: 40px">
<span class="title-text view-title-name" style="line-height: 40px;">{{ $t('panel.batch_opt') }}</span>
</el-row>
<chart-style
v-if="mixProperties&&batchOptChartInfo"
:param="param"
:view="batchOptChartInfo"
:chart="batchOptChartInfo"
:properties="mixProperties"
@calcStyle="calcStyle"
@onColorChange="onColorChange"
@onSizeChange="onSizeChange"
@onLabelChange="onLabelChange"
@onTooltipChange="onTooltipChange"
@onTotalCfgChange="onTotalCfgChange"
@onChangeXAxisForm="onChangeXAxisForm"
@onChangeYAxisForm="onChangeYAxisForm"
@onChangeYAxisExtForm="onChangeYAxisExtForm"
@onChangeSplitForm="onChangeSplitForm"
@onTextChange="onTextChange"
@onLegendChange="onLegendChange"
/>
<el-row v-else>
<div class="view-selected-message-class">
<span style="font-size: 14px;margin-left: 10px;font-weight: bold;line-height: 20px">{{ $t('panel.select_view') }}</span>
</div>
</el-row>
</div>
</template>
<script>
import ChartStyle from '@/views/chart/view/ChartStyle'
import { mapState } from 'vuex'
import bus from '@/utils/bus'
export default {
name: 'ChartStyleBatchSet',
components: { ChartStyle },
props: {
},
data() {
return {
param: { 'id': 'mixId', 'optType': 'edit' }
}
},
computed: {
...mapState([
'batchOptChartInfo',
'mixProperties'
])
},
watch: {
},
mounted() {
},
methods: {
calcStyle() {
this.$emit('calcStyle')
},
onColorChange(val) {
this.batchOptChange('customAttr', 'color', val)
},
onSizeChange(val) {
this.batchOptChange('customAttr', 'size', val)
},
onLabelChange(val) {
this.batchOptChange('customAttr', 'label', val)
},
onTooltipChange(val) {
this.batchOptChange('customAttr', 'tooltip', val)
},
onTotalCfgChange(val) {
this.batchOptChange('customAttr', 'totalCfg', val)
},
onChangeXAxisForm(val) {
this.batchOptChange('customStyle', 'xAxis', val)
},
onChangeYAxisForm(val) {
this.batchOptChange('customStyle', 'xAxis', val)
},
onChangeYAxisExtForm(val) {
this.batchOptChange('customStyle', 'yAxis', val)
},
onChangeSplitForm(val) {
this.batchOptChange('customStyle', 'split', val)
},
onTextChange(val) {
this.batchOptChange('customStyle', 'text', val)
},
onLegendChange(val) {
this.batchOptChange('customStyle', 'legend', val)
},
batchOptChange(custom, property, value) {
this.$store.commit('setChangeProperties', {
'custom': custom,
'property': property,
'value': value
})
bus.$emit('batch-opt-change', {
'custom': custom,
'property': property,
'value': value
})
}
}
}
</script>
<style scoped>
.view-selected-message-class {
font-size: 12px;
color: #9ea6b2;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
height: calc(100vh - 35px);
}
.batch-opt-main{
height: calc(100vh - 35px);
overflow-y: hidden;
width: 100%;
border-left: 1px solid #E6E6E6
}
.view-title-name {
display: -moz-inline-box;
display: inline-block;
width: 130px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 10px;
font-size: 14px;
font-weight: bold;
color: #9ea6b2;
}
</style>

29
frontend/src/views/panel/edit/index.vue
View File

@ -226,11 +226,14 @@
</el-row>
</de-main-container>
<div v-if="!mobileLayoutStatus&&rightDrawOpen" class="tools-window-main">
<div v-if="showViewToolsAside">
<chart-edit v-if="curComponent" ref="chartEditRef" :edit-from="'panel'" :param="chartEditParam" />
<div v-show="!mobileLayoutStatus&&rightDrawOpen" class="tools-window-main">
<div v-show="showViewToolsAside">
<chart-edit ref="chartEditRef" :edit-from="'panel'" :param="chartEditParam" />
</div>
<div v-if="!showViewToolsAside">
<div v-show="showBatchViewToolsAside">
<chart-style-batch-set />
</div>
<div v-show="!showViewToolsAside&&!showBatchViewToolsAside">
<el-row style="height: 40px">
<el-tooltip :content="$t('chart.draw_back')">
<el-button class="el-icon-d-arrow-right" style="position:absolute;left: 4px;top: 5px;" size="mini" circle @click="changeRightDrawOpen(false)" />
@ -368,10 +371,12 @@ import ComponentWait from '@/views/panel/edit/ComponentWait'
import { deleteEnshrine, saveEnshrine, starStatus } from '@/api/panel/enshrine'
import ChartEdit from '@/views/chart/view/ChartEdit'
import OuterParamsSet from '@/views/panel/OuterParamsSet/index'
import ChartStyleBatchSet from '@/views/chart/view/ChartStyleBatchSet'
export default {
name: 'PanelEdit',
components: {
ChartStyleBatchSet,
OuterParamsSet,
ComponentWait,
DeMainContainer,
@ -473,7 +478,10 @@ export default {
},
// 显示视图工具栏
showViewToolsAside() {
return this.curComponent && (this.curComponent.type === 'view' || this.curComponent.type === 'de-tabs')
return !this.batchOptStatus && this.curComponent && (this.curComponent.type === 'view' || this.curComponent.type === 'de-tabs')
},
showBatchViewToolsAside() {
return this.batchOptStatus
},
showViewToolAsideType() {
if (this.curComponent) {
@ -571,7 +579,8 @@ export default {
'pcMatrixCount',
'mobileMatrixCount',
'mobileLayoutStyle',
'scrollAutoMove'
'scrollAutoMove',
'batchOptStatus'
])
},
@ -598,13 +607,6 @@ export default {
},
created() {
this.init(this.$store.state.panel.panelInfo.id)
// this.restore()
// 全局监听按键事件
// listenGlobalKeyDown()
this.$store.commit('setCurComponent', { component: null, index: null })
this.$store.commit('clearLinkageSettingInfo', false)
this.$store.commit('resetViewEditInfo')
},
mounted() {
// this.insertToBody()
@ -657,6 +659,7 @@ export default {
init(panelId) {
const _this = this
_this.initHasStar()
this.$store.commit('initCanvas')
if (panelId) {
initPanelData(panelId, function() {
// 初始化视图缓存