Skip to content

D
dataease
Unverified 提交 866a840d authored 作者: fit2cloudrd's avatar fit2cloudrd 提交者： GitHub
浏览文件
操作

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

* feat: 仪表板编辑视图支持多选 * feat: 仪表板编辑视图支持批量设置样式 Co-authored-by: 's avatarwangjiahao <1522128093@qq.com>
上级 a9a28329
显示空白字符变更
内嵌 并排
正在显示 包含 1536 行增加 和 135 行删除
backend/src/main/java/io/dataease/controller/chart/ChartViewController.java
浏览文件 @ 866a840d
...@@ -173,4 +173,11 @@ public class ChartViewController { ...@@ -173,4 +173,11 @@ public class ChartViewController {
return chartViewService.getFieldData(id, requestList, false, fieldId); return chartViewService.getFieldData(id, requestList, false, fieldId);
} }
@ApiIgnore
@ApiOperation("更新视图属性")
@PostMapping("/viewPropsSave/{panelId}")
public void viewPropsSave(@PathVariable String panelId, @RequestBody ChartViewWithBLOBs chartViewWithBLOBs) {
chartViewService.viewPropsSave(chartViewWithBLOBs);
}
} }
backend/src/main/java/io/dataease/service/chart/ChartViewService.java
浏览文件 @ 866a840d
...@@ -1423,4 +1423,14 @@ public class ChartViewService { ...@@ -1423,4 +1423,14 @@ public class ChartViewService {
return res; 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);
}
} }
frontend/src/api/chart/chart.js
浏览文件 @ 866a840d
...@@ -125,3 +125,12 @@ export function checkTitle(data) { ...@@ -125,3 +125,12 @@ export function checkTitle(data) {
loading: false loading: false
}) })
} }
export function viewPropsSave(panelId, data) {
return request({
url: '/chart/view/viewPropsSave/' + panelId,
method: 'post',
loading: false,
data
})
}
frontend/src/components/DeDrag/index.vue
浏览文件 @ 866a840d
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
[classNameRotatable]: rotatable, [classNameRotatable]: rotatable,
[classNameActive]: enabled , [classNameActive]: enabled ,
['linkageSetting']:linkageActive, ['linkageSetting']:linkageActive,
['batchSetting']:batchOptActive,
['positionChange']:!(dragging || resizing||rotating) ['positionChange']:!(dragging || resizing||rotating)
}, },
className className
...@@ -332,6 +333,11 @@ export default { ...@@ -332,6 +333,11 @@ export default {
linkageActive: { linkageActive: {
type: Boolean, type: Boolean,
default: false default: false
},
// batch operation
batchOptActive: {
type: Boolean,
default: false
} }
}, },
data: function() { data: function() {
...@@ -381,8 +387,8 @@ export default { ...@@ -381,8 +387,8 @@ export default {
computed: { computed: {
// 编辑组件显示 // 编辑组件显示
editBarShow() { editBarShow() {
// 编辑组件显示条件：1.当前组件存在 2.组件是激活状态或者当前在联动设置撞他 3.当前不在移动端画布编辑状态 // 编辑组件显示条件：1.当前组件存在 2.组件是激活状态或者当前在联动设置状态 3.当前不在移动端画布编辑状态 4.或者批量操作状态
return this.curComponent && (this.active || this.linkageSettingStatus) && !this.mobileLayoutStatus return (this.curComponent && (this.active || this.linkageSettingStatus) && !this.mobileLayoutStatus) || this.batchOptStatus
}, },
// 移动端编辑组件选择按钮显示 // 移动端编辑组件选择按钮显示
mobileCheckBarShow() { mobileCheckBarShow() {
...@@ -580,7 +586,8 @@ export default { ...@@ -580,7 +586,8 @@ export default {
'linkageSettingStatus', 'linkageSettingStatus',
'mobileLayoutStatus', 'mobileLayoutStatus',
'componentGap', 'componentGap',
'scrollAutoMove' 'scrollAutoMove',
'batchOptStatus'
]) ])
}, },
watch: { watch: {
...@@ -1858,6 +1865,10 @@ export default { ...@@ -1858,6 +1865,10 @@ export default {
opacity: 0.5; opacity: 0.5;
} }
.batchSetting{
opacity: 0.7;
}
.positionChange{ .positionChange{
transition: 0.2s transition: 0.2s
} }
......
frontend/src/components/canvas/components/Editor/EditBar.vue
浏览文件 @ 866a840d
...@@ -5,6 +5,9 @@ ...@@ -5,6 +5,9 @@
<el-checkbox v-model="linkageInfo.linkageActive" /> <el-checkbox v-model="linkageInfo.linkageActive" />
<linkage-field v-if="linkageInfo.linkageActive" :element="element" /> <linkage-field v-if="linkageInfo.linkageActive" :element="element" />
</div> </div>
<div v-if="batchOptAreaShow" style="margin-right: -1px;width: 18px;z-index: 5">
<el-checkbox @change="batchOptChange" />
</div>
<div v-if="normalAreaShow"> <div v-if="normalAreaShow">
<setting-menu v-if="activeModel==='edit'" style="float: right;height: 24px!important;" @amRemoveItem="amRemoveItem" @linkJumpSet="linkJumpSet" @boardSet="boardSet"> <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')"> <span slot="icon" :title="$t('panel.setting')">
...@@ -44,10 +47,9 @@ import bus from '@/utils/bus' ...@@ -44,10 +47,9 @@ import bus from '@/utils/bus'
import SettingMenu from '@/components/canvas/components/Editor/SettingMenu' import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
import LinkageField from '@/components/canvas/components/Editor/LinkageField' import LinkageField from '@/components/canvas/components/Editor/LinkageField'
import toast from '@/components/canvas/utils/toast' import toast from '@/components/canvas/utils/toast'
import Hyperlinks from '@/components/canvas/components/Editor/Hyperlinks'
export default { export default {
components: { Hyperlinks, SettingMenu, LinkageField }, components: { SettingMenu, LinkageField },
props: { props: {
element: { element: {
...@@ -87,13 +89,17 @@ export default { ...@@ -87,13 +89,17 @@ export default {
showJumpFlag() { showJumpFlag() {
return this.curComponent && this.curComponent.hyperlinks && this.curComponent.hyperlinks.enable return this.curComponent && this.curComponent.hyperlinks && this.curComponent.hyperlinks.enable
}, },
// batch operation area
batchOptAreaShow() {
return this.batchOptStatus && this.element.type === 'view'
},
// 联动区域按钮显示 // 联动区域按钮显示
linkageAreaShow() { linkageAreaShow() {
return this.linkageSettingStatus && this.element !== this.curLinkageView && this.element.type === 'view' return this.linkageSettingStatus && this.element !== this.curLinkageView && this.element.type === 'view'
}, },
// 编辑或预览区域显示 // 编辑或预览区域显示
normalAreaShow() { normalAreaShow() {
return !this.linkageSettingStatus return !this.linkageSettingStatus && !this.batchOptStatus
}, },
existLinkage() { existLinkage() {
let linkageFiltersCount = 0 let linkageFiltersCount = 0
...@@ -131,7 +137,9 @@ export default { ...@@ -131,7 +137,9 @@ export default {
'linkageSettingStatus', 'linkageSettingStatus',
'targetLinkageInfo', 'targetLinkageInfo',
'curLinkageView', 'curLinkageView',
'curCanvasScale' 'curCanvasScale',
'batchOptStatus',
'curBatchOptComponents'
]) ])
}, },
beforeDestroy() { beforeDestroy() {
...@@ -264,6 +272,17 @@ export default { ...@@ -264,6 +272,17 @@ export default {
}, },
boardSet() { boardSet() {
this.$emit('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 { ...@@ -279,7 +298,7 @@ export default {
padding-left: 5px; padding-left: 5px;
padding-right: 2px; padding-right: 2px;
cursor:pointer!important; cursor:pointer!important;
background-color: #0a7be0; background-color: rgba(10,123,224, 1);
} }
.bar-main i{ .bar-main i{
color: white; color: white;
......
frontend/src/components/canvas/components/Editor/index.vue
浏览文件 @ 866a840d
...@@ -41,9 +41,10 @@ ...@@ -41,9 +41,10 @@
:snap="true" :snap="true"
:snap-tolerance="2" :snap-tolerance="2"
:change-style="customStyle" :change-style="customStyle"
:draggable="!linkageSettingStatus" :draggable="deDraggable"
:resizable="!linkageSettingStatus" :resizable="deResizable"
:linkage-active="linkageSettingStatus&&item===curLinkageView" :linkage-active="linkageActiveCheck(item)"
:batch-opt-active="batchOptActiveCheck(item)"
@refLineParams="getRefLineParams" @refLineParams="getRefLineParams"
@showViewDetails="showViewDetails(index)" @showViewDetails="showViewDetails(index)"
@resizeView="resizeView(index,item)" @resizeView="resizeView(index,item)"
...@@ -955,6 +956,12 @@ export default { ...@@ -955,6 +956,12 @@ export default {
} }
}, },
computed: { computed: {
deDraggable() {
return !this.linkageSettingStatus && !this.batchOptStatus
},
deResizable() {
return !this.linkageSettingStatus && !this.batchOptStatus
},
showExportImgButton() { showExportImgButton() {
// if the chart type belong to table,'export image' button should be hidden // if the chart type belong to table,'export image' button should be hidden
return this.showChartInfo.type && !this.showChartInfo.type.includes('table') return this.showChartInfo.type && !this.showChartInfo.type.includes('table')
...@@ -1016,7 +1023,8 @@ export default { ...@@ -1016,7 +1023,8 @@ export default {
'doSnapshotIndex', 'doSnapshotIndex',
'componentGap', 'componentGap',
'mobileLayoutStatus', 'mobileLayoutStatus',
'curCanvasScale' 'curCanvasScale',
'batchOptStatus'
]), ]),
filterMap() { filterMap() {
return buildFilterMap(this.componentData) return buildFilterMap(this.componentData)
...@@ -1090,6 +1098,12 @@ export default { ...@@ -1090,6 +1098,12 @@ export default {
created() { created() {
}, },
methods: { methods: {
linkageActiveCheck(item) {
return this.linkageSettingStatus && item === this.curLinkageView
},
batchOptActiveCheck(item) {
return this.batchOptStatus && item.type === 'view'
},
canvasInit() { canvasInit() {
this.editShow = false this.editShow = false
setTimeout(() => { setTimeout(() => {
......
frontend/src/components/canvas/components/Toolbar.vue
浏览文件 @ 866a840d
...@@ -47,6 +47,9 @@ ...@@ -47,6 +47,9 @@
<el-tooltip v-if="canvasStyleData.aidedDesign.showGrid" :content="$t('panel.aided_grid')+':'+$t('panel.aided_grid_open')"> <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-button class="icon iconfont-tb icon-wangge-open" size="mini" circle @click="showGridChange" />
</el-tooltip> </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"> <span style="float: right;margin-left: 10px">
<el-button size="mini" :disabled="saveButtonDisabled" @click="save(false)"> <el-button size="mini" :disabled="saveButtonDisabled" @click="save(false)">
{{ $t('commons.save') }} {{ $t('commons.save') }}
...@@ -135,7 +138,8 @@ export default { ...@@ -135,7 +138,8 @@ export default {
'targetLinkageInfo', 'targetLinkageInfo',
'mobileLayoutStatus', 'mobileLayoutStatus',
'mobileComponentData', 'mobileComponentData',
'componentDataCache' 'componentDataCache',
'batchOptStatus'
]) ])
}, },
created() { created() {
...@@ -382,6 +386,11 @@ export default { ...@@ -382,6 +386,11 @@ export default {
this.$store.state.styleChangeTimes++ this.$store.state.styleChangeTimes++
this.canvasStyleData.aidedDesign.showGrid = !this.canvasStyleData.aidedDesign.showGrid 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() { openMobileLayout() {
this.$store.commit('openMobileLayout') this.$store.commit('openMobileLayout')
......
frontend/src/components/canvas/custom-component/UserView.vue
浏览文件 @ 866a840d
...@@ -115,6 +115,7 @@ import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/componen ...@@ -115,6 +115,7 @@ import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/componen
import ChartComponentS2 from '@/views/chart/components/ChartComponentS2' import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
import PluginCom from '@/views/system/plugin/PluginCom' import PluginCom from '@/views/system/plugin/PluginCom'
import LabelNormalText from '@/views/chart/components/normal/LabelNormalText' import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
import { viewPropsSave } from '@/api/chart/chart'
export default { export default {
name: 'UserView', name: 'UserView',
components: { LabelNormalText, PluginCom, ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 }, components: { LabelNormalText, PluginCom, ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
...@@ -185,8 +186,14 @@ export default { ...@@ -185,8 +186,14 @@ export default {
changeScaleIndex: 0, changeScaleIndex: 0,
pre: null, pre: null,
preCanvasPanel: null, preCanvasPanel: null,
// string
sourceCustomAttrStr: null, sourceCustomAttrStr: null,
// obj
sourceCustomAttr: null,
// string
sourceCustomStyleStr: null, sourceCustomStyleStr: null,
// obj
sourceCustomStyle: null,
scale: 1 scale: 1
} }
}, },
...@@ -299,7 +306,8 @@ export default { ...@@ -299,7 +306,8 @@ export default {
'mobileLayoutStatus', 'mobileLayoutStatus',
'componentData', 'componentData',
'panelViewDetailsInfo', 'panelViewDetailsInfo',
'componentViewsData' 'componentViewsData',
'curBatchOptComponents'
]) ])
}, },
...@@ -392,6 +400,30 @@ export default { ...@@ -392,6 +400,30 @@ export default {
} }
}, },
methods: { 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() { resizeChart() {
if (this.chart.type === 'map') { if (this.chart.type === 'map') {
this.destroyTimeMachine() this.destroyTimeMachine()
...@@ -416,6 +448,9 @@ export default { ...@@ -416,6 +448,9 @@ export default {
bus.$on('view-in-cache', param => { bus.$on('view-in-cache', param => {
param.viewId && param.viewId === this.element.propValue.viewId && this.getDataEdit(param) param.viewId && param.viewId === this.element.propValue.viewId && this.getDataEdit(param)
}) })
bus.$on('batch-opt-change', param => {
this.batchOptChange(param)
})
}, },
addViewTrackFilter(linkageParam) { addViewTrackFilter(linkageParam) {
...@@ -488,7 +523,10 @@ export default { ...@@ -488,7 +523,10 @@ export default {
this.chart = response.data this.chart = response.data
if (this.isEdit) { if (this.isEdit) {
this.componentViewsData[this.chart.id] = { 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' this.chart['position'] = this.inTab ? 'tab' : 'panel'
...@@ -797,7 +835,6 @@ export default { ...@@ -797,7 +835,6 @@ export default {
this.sourceCustomAttrStr = this.chart.customAttr this.sourceCustomAttrStr = this.chart.customAttr
this.sourceCustomStyleStr = this.chart.customStyle this.sourceCustomStyleStr = this.chart.customStyle
this.mergeScale() this.mergeScale()
this.mergeStyle()
} }
} }
} }
......
frontend/src/lang/en.js
浏览文件 @ 866a840d
...@@ -1430,6 +1430,7 @@ export default { ...@@ -1430,6 +1430,7 @@ export default {
sure_bt: 'Confirm' sure_bt: 'Confirm'
}, },
panel: { panel: {
batch_opt: 'Batch Operation',
edit_leave_tips: 'Do You Want To Abandon And Leave The Current Page?', edit_leave_tips: 'Do You Want To Abandon And Leave The Current Page?',
hyperlinks: 'Hyperlinks', hyperlinks: 'Hyperlinks',
is_live: 'Is Live', is_live: 'Is Live',
......
frontend/src/lang/tw.js
浏览文件 @ 866a840d
...@@ -1431,6 +1431,7 @@ export default { ...@@ -1431,6 +1431,7 @@ export default {
sure_bt: '確定' sure_bt: '確定'
}, },
panel: { panel: {
batch_opt: '批量操作',
edit_leave_tips: '是否放弃编辑离开当前界面？', edit_leave_tips: '是否放弃编辑离开当前界面？',
hyperlinks: '超鏈接', hyperlinks: '超鏈接',
is_live: '是否直播', is_live: '是否直播',
......
frontend/src/lang/zh.js
浏览文件 @ 866a840d
...@@ -1438,6 +1438,7 @@ export default { ...@@ -1438,6 +1438,7 @@ export default {
sure_bt: '确定' sure_bt: '确定'
}, },
panel: { panel: {
batch_opt: '批量操作',
edit_leave_tips: '是否放弃编辑离开当前界面？', edit_leave_tips: '是否放弃编辑离开当前界面？',
hyperlinks: '超链接', hyperlinks: '超链接',
is_live: '是否直播', is_live: '是否直播',
......
frontend/src/store/index.js
浏览文件 @ 866a840d
...@@ -29,6 +29,8 @@ import { ...@@ -29,6 +29,8 @@ import {
} from '@/views/panel/panel' } from '@/views/panel/panel'
import bus from '@/utils/bus' import bus from '@/utils/bus'
import { BASE_MOBILE_STYLE } from '@/components/canvas/custom-component/component-list' 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) Vue.use(Vuex)
...@@ -111,7 +113,19 @@ const data = { ...@@ -111,7 +113,19 @@ const data = {
// 当前tab页内组件 // 当前tab页内组件
curActiveTabInner: null, curActiveTabInner: null,
// static resource local path // 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: { mutations: {
...animation.mutations, ...animation.mutations,
...@@ -512,6 +526,115 @@ const data = { ...@@ -512,6 +526,115 @@ const data = {
}, },
resetViewEditInfo(state) { resetViewEditInfo(state) {
state.panelViewEditInfo = {} 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: { modules: {
......
frontend/src/views/chart/chart/util.js
浏览文件 @ 866a840d
...@@ -33,65 +33,121 @@ export const TYPE_CONFIGS = [ ...@@ -33,65 +33,121 @@ export const TYPE_CONFIGS = [
category: 'chart.chart_type_table', category: 'chart.chart_type_table',
value: 'table-normal', value: 'table-normal',
title: 'chart.chart_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', render: 'antv',
category: 'chart.chart_type_table', category: 'chart.chart_type_table',
value: 'table-info', value: 'table-info',
title: 'chart.chart_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', render: 'antv',
category: 'chart.chart_type_table', category: 'chart.chart_type_table',
value: 'table-pivot', value: 'table-pivot',
title: 'chart.chart_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', render: 'antv',
category: 'chart.chart_type_quota', category: 'chart.chart_type_quota',
value: 'label', value: 'label',
title: 'chart.chart_label', title: 'chart.chart_label',
icon: 'label' icon: 'label',
properties: [
'color-selector',
'size-selector-ant-v',
'title-selector-ant-v'
]
}, },
{ {
render: 'antv', render: 'antv',
category: 'chart.chart_type_quota', category: 'chart.chart_type_quota',
value: 'text', value: 'text',
title: 'chart.chart_card', title: 'chart.chart_card',
icon: 'text' icon: 'text',
properties: [
'color-selector',
'size-selector-ant-v',
'title-selector-ant-v'
]
}, },
{ {
render: 'antv', render: 'antv',
category: 'chart.chart_type_quota', category: 'chart.chart_type_quota',
value: 'gauge', value: 'gauge',
title: 'chart.chart_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', render: 'antv',
category: 'chart.chart_type_quota', category: 'chart.chart_type_quota',
value: 'liquid', value: 'liquid',
title: 'chart.chart_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', render: 'antv',
category: 'chart.chart_type_trend', category: 'chart.chart_type_trend',
value: 'line', value: 'line',
title: 'chart.chart_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', render: 'antv',
category: 'chart.chart_type_trend', category: 'chart.chart_type_trend',
value: 'line-stack', value: 'line-stack',
title: 'chart.chart_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 = [ ...@@ -99,35 +155,82 @@ export const TYPE_CONFIGS = [
category: 'chart.chart_type_compare', category: 'chart.chart_type_compare',
value: 'bar', value: 'bar',
title: 'chart.chart_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', render: 'antv',
category: 'chart.chart_type_compare', category: 'chart.chart_type_compare',
value: 'bar-stack', value: 'bar-stack',
title: 'chart.chart_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', render: 'antv',
category: 'chart.chart_type_compare', category: 'chart.chart_type_compare',
value: 'waterfall', value: 'waterfall',
title: 'chart.chart_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', render: 'antv',
category: 'chart.chart_type_compare', category: 'chart.chart_type_compare',
value: 'bar-horizontal', value: 'bar-horizontal',
title: 'chart.chart_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', render: 'antv',
category: 'chart.chart_type_compare', category: 'chart.chart_type_compare',
value: 'bar-stack-horizontal', value: 'bar-stack-horizontal',
title: 'chart.chart_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 = [ ...@@ -135,35 +238,72 @@ export const TYPE_CONFIGS = [
category: 'chart.chart_type_distribute', category: 'chart.chart_type_distribute',
value: 'pie', value: 'pie',
title: 'chart.chart_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', render: 'antv',
category: 'chart.chart_type_distribute', category: 'chart.chart_type_distribute',
value: 'pie-rose', value: 'pie-rose',
title: 'chart.chart_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', render: 'antv',
category: 'chart.chart_type_distribute', category: 'chart.chart_type_distribute',
value: 'radar', value: 'radar',
title: 'chart.chart_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', render: 'antv',
category: 'chart.chart_type_distribute', category: 'chart.chart_type_distribute',
value: 'treemap', value: 'treemap',
title: 'chart.chart_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', render: 'antv',
category: 'chart.chart_type_distribute', category: 'chart.chart_type_distribute',
value: 'word-cloud', value: 'word-cloud',
title: 'chart.chart_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 = [ ...@@ -171,14 +311,31 @@ export const TYPE_CONFIGS = [
category: 'chart.chart_type_relation', category: 'chart.chart_type_relation',
value: 'scatter', value: 'scatter',
title: 'chart.chart_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', render: 'antv',
category: 'chart.chart_type_relation', category: 'chart.chart_type_relation',
value: 'funnel', value: 'funnel',
title: 'chart.chart_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图表类型 */ /* 下面是echarts图表类型 */
{ {
...@@ -186,14 +343,24 @@ export const TYPE_CONFIGS = [ ...@@ -186,14 +343,24 @@ export const TYPE_CONFIGS = [
category: 'chart.chart_type_table', category: 'chart.chart_type_table',
value: 'table-normal', value: 'table-normal',
title: 'chart.chart_table_normal', title: 'chart.chart_table_normal',
icon: 'table-normal' icon: 'table-normal',
properties: [
'color-selector',
'size-selector',
'title-selector'
]
}, },
{ {
render: 'echarts', render: 'echarts',
category: 'chart.chart_type_table', category: 'chart.chart_type_table',
value: 'table-info', value: 'table-info',
title: 'chart.chart_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 = [ ...@@ -201,21 +368,37 @@ export const TYPE_CONFIGS = [
category: 'chart.chart_type_quota', category: 'chart.chart_type_quota',
value: 'label', value: 'label',
title: 'chart.chart_label', title: 'chart.chart_label',
icon: 'label' icon: 'label',
properties: [
'color-selector',
'size-selector',
'title-selector'
]
}, },
{ {
render: 'echarts', render: 'echarts',
category: 'chart.chart_type_quota', category: 'chart.chart_type_quota',
value: 'text', value: 'text',
title: 'chart.chart_card', title: 'chart.chart_card',
icon: 'text' icon: 'text',
properties: [
'color-selector',
'size-selector',
'title-selector'
]
}, },
{ {
render: 'echarts', render: 'echarts',
category: 'chart.chart_type_quota', category: 'chart.chart_type_quota',
value: 'gauge', value: 'gauge',
title: 'chart.chart_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 = [ ...@@ -223,21 +406,52 @@ export const TYPE_CONFIGS = [
category: 'chart.chart_type_trend', category: 'chart.chart_type_trend',
value: 'line', value: 'line',
title: 'chart.chart_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', render: 'echarts',
category: 'chart.chart_type_trend', category: 'chart.chart_type_trend',
value: 'line-stack', value: 'line-stack',
title: 'chart.chart_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', render: 'echarts',
category: 'chart.chart_type_trend', category: 'chart.chart_type_trend',
value: 'chart-mix', value: 'chart-mix',
title: 'chart.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 = [ ...@@ -245,28 +459,68 @@ export const TYPE_CONFIGS = [
category: 'chart.chart_type_compare', category: 'chart.chart_type_compare',
value: 'bar', value: 'bar',
title: 'chart.chart_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', render: 'echarts',
category: 'chart.chart_type_compare', category: 'chart.chart_type_compare',
value: 'bar-stack', value: 'bar-stack',
title: 'chart.chart_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', render: 'echarts',
category: 'chart.chart_type_compare', category: 'chart.chart_type_compare',
value: 'bar-horizontal', value: 'bar-horizontal',
title: 'chart.chart_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', render: 'echarts',
category: 'chart.chart_type_compare', category: 'chart.chart_type_compare',
value: 'bar-stack-horizontal', value: 'bar-stack-horizontal',
title: 'chart.chart_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 = [ ...@@ -274,28 +528,60 @@ export const TYPE_CONFIGS = [
category: 'chart.chart_type_distribute', category: 'chart.chart_type_distribute',
value: 'pie', value: 'pie',
title: 'chart.chart_pie', title: 'chart.chart_pie',
icon: 'pie' icon: 'pie',
properties: [
'color-selector',
'size-selector',
'label-selector',
'tooltip-selector',
'title-selector',
'legend-selector'
]
}, },
{ {
render: 'echarts', render: 'echarts',
category: 'chart.chart_type_distribute', category: 'chart.chart_type_distribute',
value: 'pie-rose', value: 'pie-rose',
title: 'chart.chart_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', render: 'echarts',
category: 'chart.chart_type_distribute', category: 'chart.chart_type_distribute',
value: 'radar', value: 'radar',
title: 'chart.chart_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', render: 'echarts',
category: 'chart.chart_type_distribute', category: 'chart.chart_type_distribute',
value: 'treemap', value: 'treemap',
title: 'chart.chart_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 = [ ...@@ -303,14 +589,32 @@ export const TYPE_CONFIGS = [
category: 'chart.chart_type_relation', category: 'chart.chart_type_relation',
value: 'scatter', value: 'scatter',
title: 'chart.chart_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', render: 'echarts',
category: 'chart.chart_type_relation', category: 'chart.chart_type_relation',
value: 'funnel', value: 'funnel',
title: 'chart.chart_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 = [ ...@@ -318,7 +622,14 @@ export const TYPE_CONFIGS = [
category: 'chart.chart_type_space', category: 'chart.chart_type_space',
value: 'map', value: 'map',
title: 'chart.chart_map', title: 'chart.chart_map',
icon: 'map' icon: 'map',
properties: [
'color-selector',
'size-selector',
'label-selector',
'tooltip-selector',
'title-selector'
]
} }
] ]
......
frontend/src/views/chart/components/shape-attr/SizeSelectorCommon.vue 0 → 100644
浏览文件 @ 866a840d
<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>
frontend/src/views/chart/view/ChartEdit.vue
浏览文件 @ 866a840d
...@@ -652,9 +652,11 @@ ...@@ -652,9 +652,11 @@
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('chart.chart_style')" class="padding-tab" style="width: 300px"> <el-tab-pane :label="$t('chart.chart_style')" class="padding-tab" style="width: 300px">
<chart-style <chart-style
v-if="chartProperties"
:param="param" :param="param"
:view="view" :view="view"
:chart="chart" :chart="chart"
:properties="chartProperties"
@calcStyle="calcStyle" @calcStyle="calcStyle"
@onColorChange="onColorChange" @onColorChange="onColorChange"
@onSizeChange="onSizeChange" @onSizeChange="onSizeChange"
...@@ -1015,9 +1017,12 @@ import { pluginTypes } from '@/api/chart/chart' ...@@ -1015,9 +1017,12 @@ import { pluginTypes } from '@/api/chart/chart'
import ValueFormatterEdit from '@/views/chart/components/value-formatter/ValueFormatterEdit' import ValueFormatterEdit from '@/views/chart/components/value-formatter/ValueFormatterEdit'
import ChartStyle from '@/views/chart/view/ChartStyle' import ChartStyle from '@/views/chart/view/ChartStyle'
import CustomSortEdit from '@/views/chart/components/compare/CustomSortEdit' 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 { export default {
name: 'ChartEdit', name: 'ChartEdit',
components: { components: {
ChartStyleBack,
CustomSortEdit, CustomSortEdit,
ChartStyle, ChartStyle,
ValueFormatterEdit, ValueFormatterEdit,
...@@ -1159,6 +1164,19 @@ export default { ...@@ -1159,6 +1164,19 @@ export default {
} }
}, },
computed: { 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() { chartType() {
return this.chart.type return this.chart.type
}, },
......
frontend/src/views/chart/view/ChartStyle.vue
浏览文件 @ 866a840d
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;padding-right: 6px" style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;padding-right: 6px"
class="attr-style theme-border-class" 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> <span class="title-text">{{ $t('chart.style_priority') }}</span>
<el-row> <el-row>
<el-radio-group <el-radio-group
...@@ -34,11 +34,11 @@ ...@@ -34,11 +34,11 @@
:param="param" :param="param"
class="attr-selector" class="attr-selector"
:chart="chart" :chart="chart"
@onColorChange="onColorChange" @onColorChange="onColorChange($event,'color-selector')"
/> />
</el-collapse-item> </el-collapse-item>
<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" name="size"
:title="$t('chart.size')" :title="$t('chart.size')"
> >
...@@ -46,11 +46,11 @@ ...@@ -46,11 +46,11 @@
:param="param" :param="param"
class="attr-selector" class="attr-selector"
:chart="chart" :chart="chart"
@onSizeChange="onSizeChange" @onSizeChange="onSizeChange($event,'size-selector')"
/> />
</el-collapse-item> </el-collapse-item>
<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" name="size"
:title="(chart.type && chart.type.includes('table')) ? $t('chart.table_config') : $t('chart.size')" :title="(chart.type && chart.type.includes('table')) ? $t('chart.table_config') : $t('chart.size')"
> >
...@@ -58,51 +58,51 @@ ...@@ -58,51 +58,51 @@
:param="param" :param="param"
class="attr-selector" class="attr-selector"
:chart="chart" :chart="chart"
@onSizeChange="onSizeChange" @onSizeChange="onSizeChange($event,'size-selector-ant-v')"
/> />
</el-collapse-item> </el-collapse-item>
<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" name="label"
:title="$t('chart.label')" :title="$t('chart.label')"
> >
<label-selector <label-selector
v-if="view.render && view.render === 'echarts'" v-if="showProperties('label-selector')"
:param="param" :param="param"
class="attr-selector" class="attr-selector"
:chart="chart" :chart="chart"
@onLabelChange="onLabelChange" @onLabelChange="onLabelChange($event,'label-selector')"
/> />
<label-selector-ant-v <label-selector-ant-v
v-else-if="view.render && view.render === 'antv'" v-else-if="showProperties('label-selector-ant-v')"
:param="param" :param="param"
class="attr-selector" class="attr-selector"
:chart="chart" :chart="chart"
@onLabelChange="onLabelChange" @onLabelChange="onLabelChange($event,'label-selector-ant-v')"
/> />
</el-collapse-item> </el-collapse-item>
<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" name="tooltip"
:title="$t('chart.tooltip')" :title="$t('chart.tooltip')"
> >
<tooltip-selector <tooltip-selector
v-if="view.render && view.render === 'echarts'" v-if="showProperties('tooltip-selector')"
:param="param" :param="param"
class="attr-selector" class="attr-selector"
:chart="chart" :chart="chart"
@onTooltipChange="onTooltipChange" @onTooltipChange="onTooltipChange($event,'tooltip-selector')"
/> />
<tooltip-selector-ant-v <tooltip-selector-ant-v
v-else-if="view.render && view.render === 'antv'" v-else-if="showProperties('tooltip-selector-ant-v')"
:param="param" :param="param"
class="attr-selector" class="attr-selector"
:chart="chart" :chart="chart"
@onTooltipChange="onTooltipChange" @onTooltipChange="onTooltipChange($event,'tooltip-selector-ant-v')"
/> />
</el-collapse-item> </el-collapse-item>
<el-collapse-item <el-collapse-item
v-show="view.type === 'table-pivot'" v-show="showPropertiesCollapse(['total-cfg'])"
name="totalCfg" name="totalCfg"
:title="$t('chart.total_cfg')" :title="$t('chart.total_cfg')"
> >
...@@ -110,7 +110,7 @@ ...@@ -110,7 +110,7 @@
:param="param" :param="param"
class="attr-selector" class="attr-selector"
:chart="chart" :chart="chart"
@onTotalCfgChange="onTotalCfgChange" @onTotalCfgChange="onTotalCfgChange($event,'total-cfg')"
/> />
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
...@@ -119,119 +119,119 @@ ...@@ -119,119 +119,119 @@
<span class="padding-lr">{{ $t('chart.module_style') }}</span> <span class="padding-lr">{{ $t('chart.module_style') }}</span>
<el-collapse v-model="styleActiveNames" class="style-collapse"> <el-collapse v-model="styleActiveNames" class="style-collapse">
<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(['x-axis-selector','x-axis-selector-ant-v'])"
name="xAxis" name="xAxis"
:title="$t('chart.xAxis')" :title="$t('chart.xAxis')"
> >
<x-axis-selector <x-axis-selector
v-if="view.render && view.render === 'echarts'" v-if="showProperties('x-axis-selector')"
:param="param" :param="param"
class="attr-selector" class="attr-selector"
:chart="chart" :chart="chart"
@onChangeXAxisForm="onChangeXAxisForm" @onChangeXAxisForm="onChangeXAxisForm($event,'x-axis-selector')"
/> />
<x-axis-selector-ant-v <x-axis-selector-ant-v
v-else-if="view.render && view.render === 'antv'" v-else-if="showProperties('x-axis-selector-ant-v')"
:param="param" :param="param"
class="attr-selector" class="attr-selector"
:chart="chart" :chart="chart"
@onChangeXAxisForm="onChangeXAxisForm" @onChangeXAxisForm="onChangeXAxisForm($event,'x-axis-selector-ant-v')"
/> />
</el-collapse-item> </el-collapse-item>
<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" name="yAxis"
:title="view.type === 'chart-mix' ? $t('chart.yAxis_main') : $t('chart.yAxis')" :title="view.type === 'chart-mix' ? $t('chart.yAxis_main') : $t('chart.yAxis')"
> >
<y-axis-selector <y-axis-selector
v-if="view.render && view.render === 'echarts'" v-if="showProperties('y-axis-selector')"
:param="param" :param="param"
class="attr-selector" class="attr-selector"
:chart="chart" :chart="chart"
@onChangeYAxisForm="onChangeYAxisForm" @onChangeYAxisForm="onChangeYAxisForm($event,'y-axis-selector')"
/> />
<y-axis-selector-ant-v <y-axis-selector-ant-v
v-else-if="view.render && view.render === 'antv'" v-else-if="showProperties('y-axis-selector-ant-v')"
:param="param" :param="param"
class="attr-selector" class="attr-selector"
:chart="chart" :chart="chart"
@onChangeYAxisForm="onChangeYAxisForm" @onChangeYAxisForm="onChangeYAxisForm($event,'y-axis-selector-ant-v')"
/> />
</el-collapse-item> </el-collapse-item>
<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" name="yAxisExt"
:title="$t('chart.yAxis_ext')" :title="$t('chart.yAxis_ext')"
> >
<y-axis-ext-selector <y-axis-ext-selector
v-if="view.render && view.render === 'echarts'" v-if="showProperties('y-axis-ext-selector')"
:param="param" :param="param"
class="attr-selector" class="attr-selector"
:chart="chart" :chart="chart"
@onChangeYAxisForm="onChangeYAxisExtForm" @onChangeYAxisForm="onChangeYAxisExtForm($event,'y-axis-ext-selector')"
/> />
<y-axis-ext-selector-ant-v <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" :param="param"
class="attr-selector" class="attr-selector"
:chart="chart" :chart="chart"
@onChangeYAxisForm="onChangeYAxisExtForm" @onChangeYAxisForm="onChangeYAxisExtForm($event,'y-axis-ext-selector-ant-v')"
/> />
</el-collapse-item> </el-collapse-item>
<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" name="split"
:title="$t('chart.split')" :title="$t('chart.split')"
> >
<split-selector <split-selector
v-if="view.render && view.render === 'echarts'" v-if="showProperties('split-selector')"
:param="param" :param="param"
class="attr-selector" class="attr-selector"
:chart="chart" :chart="chart"
@onChangeSplitForm="onChangeSplitForm" @onChangeSplitForm="onChangeSplitForm($event,'split-selector')"
/> />
<size-selector-ant-v <split-selector-ant-v
v-else-if="view.render && view.render === 'antv'" v-else-if="showProperties('split-selector-ant-v')"
:param="param" :param="param"
class="attr-selector" class="attr-selector"
:chart="chart" :chart="chart"
@onChangeSplitForm="onChangeSplitForm" @onChangeSplitForm="onChangeSplitForm($event,'split-selector-ant-v')"
/> />
</el-collapse-item> </el-collapse-item>
<el-collapse-item v-show="view.type" name="title" :title="$t('chart.title')"> <el-collapse-item v-show="view.type" name="title" :title="$t('chart.title')">
<title-selector <title-selector
v-if="view.render && view.render === 'echarts'" v-if="showProperties('title-selector')"
:param="param" :param="param"
class="attr-selector" class="attr-selector"
:chart="chart" :chart="chart"
@onTextChange="onTextChange" @onTextChange="onTextChange($event,'title-selector')"
/> />
<title-selector-ant-v <title-selector-ant-v
v-else-if="view.render && view.render === 'antv'" v-else-if="showProperties('title-selector-ant-v')"
:param="param" :param="param"
class="attr-selector" class="attr-selector"
:chart="chart" :chart="chart"
@onTextChange="onTextChange" @onTextChange="onTextChange($event,'title-selector-ant-v')"
/> />
</el-collapse-item> </el-collapse-item>
<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" name="legend"
:title="$t('chart.legend')" :title="$t('chart.legend')"
> >
<legend-selector <legend-selector
v-if="view.render && view.render === 'echarts'" v-if="showProperties('legend-selector')"
:param="param" :param="param"
class="attr-selector" class="attr-selector"
:chart="chart" :chart="chart"
@onLegendChange="onLegendChange" @onLegendChange="onLegendChange($event,'legend-selector')"
/> />
<legend-selector-ant-v <legend-selector-ant-v
v-else-if="view.render && view.render === 'antv'" v-else-if="showProperties('legend-selector-ant-v')"
:param="param" :param="param"
class="attr-selector" class="attr-selector"
:chart="chart" :chart="chart"
@onLegendChange="onLegendChange" @onLegendChange="onLegendChange($event,'legend-selector-ant-v')"
/> />
</el-collapse-item> </el-collapse-item>
<el-collapse-item <el-collapse-item
...@@ -243,7 +243,7 @@ ...@@ -243,7 +243,7 @@
:param="param" :param="param"
class="attr-selector" class="attr-selector"
:chart="chart" :chart="chart"
@onChangeBackgroundForm="onChangeBackgroundForm" @onChangeBackgroundForm="onChangeBackgroundForm($event,'background-color-selector')"
/> />
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
...@@ -267,22 +267,24 @@ import YAxisSelector from '@/views/chart/components/component-style/YAxisSelecto ...@@ -267,22 +267,24 @@ import YAxisSelector from '@/views/chart/components/component-style/YAxisSelecto
import YAxisSelectorAntV from '@/views/chart/components/component-style/YAxisSelectorAntV' import YAxisSelectorAntV from '@/views/chart/components/component-style/YAxisSelectorAntV'
import YAxisExtSelector from '@/views/chart/components/component-style/YAxisExtSelector' import YAxisExtSelector from '@/views/chart/components/component-style/YAxisExtSelector'
import YAxisExtSelectorAntV from '@/views/chart/components/component-style/YAxisExtSelectorAntV' 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 TitleSelector from '@/views/chart/components/component-style/TitleSelector'
import TitleSelectorAntV from '@/views/chart/components/component-style/TitleSelectorAntV' import TitleSelectorAntV from '@/views/chart/components/component-style/TitleSelectorAntV'
import LegendSelector from '@/views/chart/components/component-style/LegendSelector' import LegendSelector from '@/views/chart/components/component-style/LegendSelector'
import LegendSelectorAntV from '@/views/chart/components/component-style/LegendSelectorAntV' import LegendSelectorAntV from '@/views/chart/components/component-style/LegendSelectorAntV'
import BackgroundColorSelector from '@/views/chart/components/component-style/BackgroundColorSelector' 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 { export default {
name: 'ChartStyle', name: 'ChartStyle',
components: { components: {
SplitSelectorAntV,
SplitSelector,
BackgroundColorSelector, BackgroundColorSelector,
LegendSelectorAntV, LegendSelectorAntV,
LegendSelector, LegendSelector,
TitleSelectorAntV, TitleSelectorAntV,
TitleSelector, TitleSelector,
SplitSelector,
YAxisExtSelectorAntV, YAxisExtSelectorAntV,
YAxisExtSelector, YAxisExtSelector,
YAxisSelectorAntV, YAxisSelectorAntV,
...@@ -306,6 +308,10 @@ export default { ...@@ -306,6 +308,10 @@ export default {
view: { view: {
type: Object, type: Object,
required: true required: true
},
properties: {
type: Array,
required: true
} }
}, },
data() { data() {
...@@ -313,48 +319,78 @@ export default { ...@@ -313,48 +319,78 @@ export default {
attrActiveNames: [], attrActiveNames: [],
styleActiveNames: [] styleActiveNames: []
} }
},
computed: {
}, },
created() { created() {
}, },
methods: { 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() { calcStyle() {
this.$emit('calcStyle') this.$emit('calcStyle')
}, },
onColorChange(val) { onColorChange(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onColorChange', val) this.$emit('onColorChange', val)
}, },
onSizeChange(val) { onSizeChange(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onSizeChange', val) this.$emit('onSizeChange', val)
}, },
onLabelChange(val) { onLabelChange(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onLabelChange', val) this.$emit('onLabelChange', val)
}, },
onTooltipChange(val) { onTooltipChange(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onTooltipChange', val) this.$emit('onTooltipChange', val)
}, },
onTotalCfgChange(val) { onTotalCfgChange(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onTotalCfgChange', val) this.$emit('onTotalCfgChange', val)
}, },
onChangeXAxisForm(val) { onChangeXAxisForm(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onChangeXAxisForm', val) this.$emit('onChangeXAxisForm', val)
}, },
onChangeYAxisForm(val) { onChangeYAxisForm(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onChangeYAxisForm', val) this.$emit('onChangeYAxisForm', val)
}, },
onChangeYAxisExtForm(val) { onChangeYAxisExtForm(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onChangeYAxisExtForm', val) this.$emit('onChangeYAxisExtForm', val)
}, },
onChangeSplitForm(val) { onChangeSplitForm(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onChangeSplitForm', val) this.$emit('onChangeSplitForm', val)
}, },
onTextChange(val) { onTextChange(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onTextChange', val) this.$emit('onTextChange', val)
}, },
onLegendChange(val) { onLegendChange(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onLegendChange', val) this.$emit('onLegendChange', val)
}, },
onChangeBackgroundForm(val) { onChangeBackgroundForm(val, propertyName) {
val['propertyName'] = propertyName
this.$emit('onChangeBackgroundForm', val) this.$emit('onChangeBackgroundForm', val)
} }
} }
......
frontend/src/views/chart/view/ChartStyleBack.vue 0 → 100644
浏览文件 @ 866a840d
<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>
frontend/src/views/chart/view/ChartStyleBatchSet.vue 0 → 100644
浏览文件 @ 866a840d
<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>
frontend/src/views/panel/edit/index.vue
浏览文件 @ 866a840d
...@@ -226,11 +226,14 @@ ...@@ -226,11 +226,14 @@
</el-row> </el-row>
</de-main-container> </de-main-container>
<div v-if="!mobileLayoutStatus&&rightDrawOpen" class="tools-window-main"> <div v-show="!mobileLayoutStatus&&rightDrawOpen" class="tools-window-main">
<div v-if="showViewToolsAside"> <div v-show="showViewToolsAside">
<chart-edit v-if="curComponent" ref="chartEditRef" :edit-from="'panel'" :param="chartEditParam" /> <chart-edit ref="chartEditRef" :edit-from="'panel'" :param="chartEditParam" />
</div> </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-row style="height: 40px">
<el-tooltip :content="$t('chart.draw_back')"> <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)" /> <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' ...@@ -368,10 +371,12 @@ import ComponentWait from '@/views/panel/edit/ComponentWait'
import { deleteEnshrine, saveEnshrine, starStatus } from '@/api/panel/enshrine' import { deleteEnshrine, saveEnshrine, starStatus } from '@/api/panel/enshrine'
import ChartEdit from '@/views/chart/view/ChartEdit' import ChartEdit from '@/views/chart/view/ChartEdit'
import OuterParamsSet from '@/views/panel/OuterParamsSet/index' import OuterParamsSet from '@/views/panel/OuterParamsSet/index'
import ChartStyleBatchSet from '@/views/chart/view/ChartStyleBatchSet'
export default { export default {
name: 'PanelEdit', name: 'PanelEdit',
components: { components: {
ChartStyleBatchSet,
OuterParamsSet, OuterParamsSet,
ComponentWait, ComponentWait,
DeMainContainer, DeMainContainer,
...@@ -473,7 +478,10 @@ export default { ...@@ -473,7 +478,10 @@ export default {
}, },
// 显示视图工具栏 // 显示视图工具栏
showViewToolsAside() { 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() { showViewToolAsideType() {
if (this.curComponent) { if (this.curComponent) {
...@@ -571,7 +579,8 @@ export default { ...@@ -571,7 +579,8 @@ export default {
'pcMatrixCount', 'pcMatrixCount',
'mobileMatrixCount', 'mobileMatrixCount',
'mobileLayoutStyle', 'mobileLayoutStyle',
'scrollAutoMove' 'scrollAutoMove',
'batchOptStatus'
]) ])
}, },
...@@ -598,13 +607,6 @@ export default { ...@@ -598,13 +607,6 @@ export default {
}, },
created() { created() {
this.init(this.$store.state.panel.panelInfo.id) 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() { mounted() {
// this.insertToBody() // this.insertToBody()
...@@ -657,6 +659,7 @@ export default { ...@@ -657,6 +659,7 @@ export default {
init(panelId) { init(panelId) {
const _this = this const _this = this
_this.initHasStar() _this.initHasStar()
this.$store.commit('initCanvas')
if (panelId) { if (panelId) {
initPanelData(panelId, function() { initPanelData(panelId, function() {
// 初始化视图缓存 // 初始化视图缓存
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论