Skip to content

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

refactor: 批量修改样式优化

上级 8f37ee68
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 404 行增加 和 273 行删除
frontend/src/components/canvas/custom-component/UserView.vue
浏览文件 @ 9041866e
......@@ -407,17 +407,17 @@ export default {
const updateParams = { 'id': this.chart.id, 'stylePriority': 'view' }
if (param.custom === 'customAttr') {
const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
sourceCustomAttr[param.property] = param.value
sourceCustomAttr[param.property][param.value.modifyName] = param.value[param.value.modifyName]
this.sourceCustomAttrStr = JSON.stringify(sourceCustomAttr)
this.chart.customAttr = this.sourceCustomAttrStr
updateParams['customAttr'] = this.sourceCustomAttrStr
} else if (param.custom === 'customStyle') {
const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr)
// view's title use history
if (param.property === 'text') {
param.value.title = sourceCustomStyle.text.title
}
sourceCustomStyle[param.property] = param.value
// if (param.property === 'text') {
// param.value.title = sourceCustomStyle.text.title
// }
sourceCustomStyle[param.property][param.value.modifyName] = param.value[param.value.modifyName]
this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle)
this.chart.customStyle = this.sourceCustomStyleStr
updateParams['customStyle'] = this.sourceCustomStyleStr
......
frontend/src/lang/en.js
浏览文件 @ 9041866e
......@@ -2024,5 +2024,8 @@ export default {
port: 'Port',
user: 'User',
passwd: 'Password'
},
plugin_style: {
border: 'Border'
}
}
frontend/src/lang/tw.js
浏览文件 @ 9041866e
......@@ -2035,5 +2035,8 @@ export default {
port: '端口',
user: '用戶名',
passwd: '密碼'
},
plugin_style: {
border: '边框'
}
}
frontend/src/lang/zh.js
浏览文件 @ 9041866e
......@@ -2051,5 +2051,8 @@ export default {
time: '操作时间',
export: '导出',
search_by_key: '搜索详情'
},
plugin_style: {
border: '边框'
}
}
frontend/src/store/index.js
浏览文件 @ 9041866e
......@@ -119,6 +119,7 @@ const data = {
// Currently selected components
curBatchOptComponents: [],
mixProperties: [],
mixPropertiesInner: {},
batchOptChartInfo: null,
batchOptViews: {},
// properties changed
......@@ -552,15 +553,6 @@ const data = {
const viewBaseInfo = state.componentViewsData[id]
// get properties
const viewConfig = state.allViewRender.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')
......@@ -570,16 +562,27 @@ const data = {
setBatchOptChartInfo(state) {
let render = null
let type = null
let allTypes = ''
let isPlugin = null
state.mixProperties = []
state.mixPropertiesInner = {}
let mixPropertiesTemp = []
let mixPropertyInnerTemp = {}
if (state.batchOptViews && JSON.stringify(state.batchOptViews) !== '{}') {
for (const key in state.batchOptViews) {
if (state.mixProperties.length > 0) {
if (mixPropertiesTemp.length > 0) {
// If it exists , taking the intersection
state.mixProperties = state.mixProperties.filter(property => state.batchOptViews[key].properties.indexOf(property) > -1)
mixPropertiesTemp = mixPropertiesTemp.filter(property => state.batchOptViews[key].properties.indexOf(property) > -1)
// 根据当前的mixPropertiesTemp 再对 mixPropertyInnerTemp 进行过滤
mixPropertiesTemp.forEach(propertyInnerItem => {
if (mixPropertyInnerTemp[propertyInnerItem] && state.batchOptViews[key].propertyInner[propertyInnerItem]) {
mixPropertyInnerTemp[propertyInnerItem] = mixPropertyInnerTemp[propertyInnerItem].filter(propertyInnerItemValue => state.batchOptViews[key].propertyInner[propertyInnerItem].indexOf(propertyInnerItemValue) > -1)
}
})
} else {
// If it doesn't exist, assignment directly
state.mixProperties = deepCopy(state.batchOptViews[key].properties)
mixPropertiesTemp = deepCopy(state.batchOptViews[key].properties)
mixPropertyInnerTemp = deepCopy(state.batchOptViews[key].propertyInner)
}
if (render && render !== state.batchOptViews[key].render) {
......@@ -588,6 +591,7 @@ const data = {
render = state.batchOptViews[key].render
}
allTypes = allTypes + '-' + state.batchOptViews[key].value
if (type && type !== state.batchOptViews[key].value) {
type = 'mix'
} else {
......@@ -600,6 +604,16 @@ const data = {
isPlugin = state.batchOptViews[key].isPlugin
}
}
mixPropertiesTemp.forEach(property => {
if (mixPropertyInnerTemp[property] && mixPropertyInnerTemp[property].length) {
state.mixPropertiesInner[property] = mixPropertyInnerTemp[property]
state.mixProperties.push(property)
}
})
// if (type && type === 'mix') {
// type = type + '-' + allTypes
// }
// Assembly history settings 'customAttr' & 'customStyle'
state.batchOptChartInfo = {
'mode': 'batchOpt',
......@@ -618,6 +632,7 @@ const data = {
// Currently selected components
state.curBatchOptComponents = []
state.mixProperties = []
state.mixPropertyInnder = {}
state.batchOptChartInfo = null
state.batchOptViews = {}
state.changeProperties = {
......@@ -636,6 +651,7 @@ const data = {
// Currently selected components
state.curBatchOptComponents = []
state.mixProperties = []
state.mixPropertyInnder = {}
state.batchOptChartInfo = null
state.batchOptViews = {}
state.changeProperties = {
......
frontend/src/views/chart/components/component-style/LegendSelector.vue
浏览文件 @ 9041866e
......@@ -2,12 +2,12 @@
<div style="width: 100%">
<el-col>
<el-form ref="legendForm" :model="legendForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="legendForm.show" @change="changeLegendStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="legendForm.show" @change="changeLegendStyle('show')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="legendForm.show">
<el-form-item :label="$t('chart.icon')" class="form-item">
<el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle">
<div v-show="showProperty('show') && legendForm.show">
<el-form-item v-show="showProperty('icon')" :label="$t('chart.icon')" class="form-item">
<el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle('icon')">
<el-option
v-for="item in iconSymbolOptions"
:key="item.value"
......@@ -16,29 +16,29 @@
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.orient')" class="form-item">
<el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle">
<el-form-item v-show="showProperty('orient')" :label="$t('chart.orient')" class="form-item">
<el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle('orient')">
<el-radio-button label="horizontal">{{ $t('chart.horizontal') }}</el-radio-button>
<el-radio-button label="vertical">{{ $t('chart.vertical') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle">
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle('textStyle')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeLegendStyle" />
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeLegendStyle('textStyle')" />
</el-form-item>
<el-form-item :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">
<el-form-item v-show="showProperty('hPosition')" :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle('hPosition')">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.text_v_position')" class="form-item">
<el-radio-group v-model="legendForm.vPosition" size="mini" @change="changeLegendStyle">
<el-form-item v-show="showProperty('vPosition')" :label="$t('chart.text_v_position')" class="form-item">
<el-radio-group v-model="legendForm.vPosition" size="mini" @change="changeLegendStyle('vPosition')">
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
......@@ -63,6 +63,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
......@@ -117,11 +124,15 @@ export default {
}
this.fontSize = arr
},
changeLegendStyle() {
changeLegendStyle(modifyName) {
if (!this.legendForm.show) {
this.isSetting = false
}
this.legendForm['modifyName'] = modifyName
this.$emit('onLegendChange', this.legendForm)
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}
......
frontend/src/views/chart/components/component-style/LegendSelectorAntV.vue
浏览文件 @ 9041866e
......@@ -2,12 +2,12 @@
<div style="width: 100%">
<el-col>
<el-form ref="legendForm" :model="legendForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="legendForm.show" @change="changeLegendStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="legendForm.show" @change="changeLegendStyle('show')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="legendForm.show">
<el-form-item :label="$t('chart.icon')" class="form-item">
<el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle">
<el-form-item v-show="showProperty('icon')" :label="$t('chart.icon')" class="form-item">
<el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle('icon')">
<el-option
v-for="item in iconSymbolOptions"
:key="item.value"
......@@ -16,29 +16,29 @@
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.orient')" class="form-item">
<el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle">
<el-form-item v-show="showProperty('orient')" :label="$t('chart.orient')" class="form-item">
<el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle('orient')">
<el-radio-button label="horizontal">{{ $t('chart.horizontal') }}</el-radio-button>
<el-radio-button label="vertical">{{ $t('chart.vertical') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle">
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle('textStyle')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeLegendStyle" />
<el-form-item v-show="showProperty('textStyle')" :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="legendForm.textStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeLegendStyle('textStyle')" />
</el-form-item>
<el-form-item :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">
<el-form-item v-show="showProperty('hPosition')" :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle('hPosition')">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button :disabled="legendForm.vPosition === 'center'" label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.text_v_position')" class="form-item">
<el-radio-group v-model="legendForm.vPosition" size="mini" @change="changeLegendStyle">
<el-form-item v-show="showProperty('vPosition')" :label="$t('chart.text_v_position')" class="form-item">
<el-radio-group v-model="legendForm.vPosition" size="mini" @change="changeLegendStyle('vPosition')">
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
<el-radio-button :disabled="legendForm.hPosition === 'center'" label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
......@@ -63,6 +63,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
......@@ -115,11 +122,15 @@ export default {
}
this.fontSize = arr
},
changeLegendStyle() {
changeLegendStyle(modifyName) {
if (!this.legendForm.show) {
this.isSetting = false
}
this.legendForm['modifyName'] = modifyName
this.$emit('onLegendChange', this.legendForm)
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}
......
frontend/src/views/chart/components/component-style/SplitSelector.vue
浏览文件 @ 9041866e
......@@ -2,42 +2,42 @@
<div style="width: 100%">
<el-col>
<el-form ref="splitForm" :model="splitForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.name')" class="form-item">
<el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
<el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle('name')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.color')" class="form-item">
<el-color-picker v-model="splitForm.name.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
<el-form-item v-show="showProperty('name')" :label="$t('chart.color')" class="form-item">
<el-color-picker v-model="splitForm.name.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('name')" />
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
<el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle">
<el-form-item v-show="showProperty('name')" :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
<el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle('name')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.axis_line')" class="form-item">
<el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('axisLine')" :label="$t('chart.axis_line')" class="form-item">
<el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle('axisLine')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
<el-form-item v-show="showProperty('axisLine')" :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('axisLine')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label')" class="form-item">
<el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label')" class="form-item">
<el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle('axisLabel')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="splitForm.axisLabel.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="splitForm.axisLabel.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('axisLabel')" />
</el-form-item>
<el-form-item :label="$t('chart.label_fontsize')" class="form-item form-item-slider">
<el-select v-model="splitForm.axisLabel.fontSize" :placeholder="$t('chart.label_fontsize')" @change="changeSplitStyle">
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.label_fontsize')" class="form-item form-item-slider">
<el-select v-model="splitForm.axisLabel.fontSize" :placeholder="$t('chart.label_fontsize')" @change="changeSplitStyle('axisLabel')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.split_line')" class="form-item">
<el-checkbox v-model="splitForm.splitLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.split_line')" class="form-item">
<el-checkbox v-model="splitForm.splitLine.show" @change="changeSplitStyle('splitLine')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.split_color')" class="form-item">
<el-color-picker v-model="splitForm.splitLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.split_color')" class="form-item">
<el-color-picker v-model="splitForm.splitLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('splitLine')" />
</el-form-item>
<el-form-item :label="$t('chart.shadow')" class="form-item">
<el-checkbox v-model="splitForm.splitArea.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('splitArea')" :label="$t('chart.shadow')" class="form-item">
<el-checkbox v-model="splitForm.splitArea.show" @change="changeSplitStyle('splitArea')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
</el-form>
</el-col>
......@@ -57,6 +57,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
......@@ -105,11 +112,15 @@ export default {
}
this.fontSize = arr
},
changeSplitStyle() {
changeSplitStyle(modifyName) {
if (!this.splitForm.show) {
this.isSetting = false
}
this.splitForm['modifyName'] = modifyName
this.$emit('onChangeSplitForm', this.splitForm)
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}
......
frontend/src/views/chart/components/component-style/SplitSelectorAntV.vue
浏览文件 @ 9041866e
......@@ -2,22 +2,22 @@
<div style="width: 100%">
<el-col>
<el-form ref="splitForm" :model="splitForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.name')" class="form-item">
<el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
<el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle('name')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.color')" class="form-item">
<el-color-picker v-model="splitForm.name.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
<el-form-item v-show="showProperty('name')" :label="$t('chart.color')" class="form-item">
<el-color-picker v-model="splitForm.name.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('name')" />
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
<el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle">
<el-form-item v-show="showProperty('name')" :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
<el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle('name')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<!-- <el-form-item :label="$t('chart.axis_line')" class="form-item">-->
<!-- <el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
<!-- </el-form-item>-->
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle" />
<el-form-item v-show="showProperty('lineStyle')" :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="splitForm.axisLine.lineStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeSplitStyle('axisLine')" />
</el-form-item>
<!-- <el-form-item :label="$t('chart.axis_label')" class="form-item">-->
<!-- <el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>-->
......@@ -57,6 +57,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
......@@ -105,11 +112,15 @@ export default {
}
this.fontSize = arr
},
changeSplitStyle() {
changeSplitStyle(modifyName) {
if (!this.splitForm.show) {
this.isSetting = false
}
this.splitForm['modifyName'] = modifyName
this.$emit('onChangeSplitForm', this.splitForm)
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}
......
frontend/src/views/chart/components/component-style/TitleSelector.vue
浏览文件 @ 9041866e
......@@ -2,45 +2,45 @@
<div style="width: 100%">
<el-col>
<el-form ref="titleForm" :model="titleForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="titleForm.show" @change="changeTitleStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="titleForm.show" @change="changeTitleStyle('show')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="titleForm.show">
<el-form-item v-if="!batchOptStatus" :label="$t('chart.title')" class="form-item">
<div v-show="showProperty('show') && titleForm.show">
<el-form-item v-show="showProperty('title')" v-if="!batchOptStatus" :label="$t('chart.title')" class="form-item">
<el-input
v-model="titleForm.title"
size="mini"
:placeholder="$t('chart.title')"
clearable
@blur="changeTitleStyle"
@blur="changeTitleStyle('title')"
@input="inputOnInput($event)"
/>
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle">
<el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle('fontSize')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="titleForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle" />
<el-form-item v-show="showProperty('color')" :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="titleForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle('color')" />
</el-form-item>
<el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">
<el-form-item v-show="showProperty('hPosition')" :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle('hPosition')">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item v-show="chart.type && !chart.type.includes('table') && chart.type !== 'liquid' && !chart.type.includes('text')" :label="$t('chart.text_v_position')" class="form-item">
<el-radio-group v-model="titleForm.vPosition" size="mini" @change="changeTitleStyle">
<el-form-item v-show="showProperty('vPosition')" :label="$t('chart.text_v_position')" class="form-item">
<el-radio-group v-model="titleForm.vPosition" size="mini" @change="changeTitleStyle('vPosition')">
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.text_style')" class="form-item">
<el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle">{{ $t('chart.italic') }}</el-checkbox>
<el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle">{{ $t('chart.bolder') }}</el-checkbox>
<el-form-item v-show="showProperty('isItalic') || showProperty('isBolder')" :label="$t('chart.text_style')" class="form-item">
<el-checkbox v-show="showProperty('isItalic')" v-model="titleForm.isItalic" @change="changeTitleStyle('isItalic')">{{ $t('chart.italic') }}</el-checkbox>
<el-checkbox v-show="showProperty('isBolder')" v-model="titleForm.isBolder" @change="changeTitleStyle('isBolder')">{{ $t('chart.bolder') }}</el-checkbox>
</el-form-item>
</div>
</el-form>
......@@ -63,6 +63,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
......@@ -117,7 +124,7 @@ export default {
}
this.fontSize = arr
},
changeTitleStyle() {
changeTitleStyle(modifyName) {
if (!this.batchOptStatus) {
if (this.titleForm.title.length < 1) {
this.$error(this.$t('chart.title_cannot_empty'))
......@@ -133,10 +140,14 @@ export default {
if (!this.titleForm.show) {
this.isSetting = false
}
this.titleForm['modifyName'] = modifyName
this.$emit('onTextChange', this.titleForm)
},
inputOnInput: function(e) {
this.$forceUpdate()
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}
......
frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
浏览文件 @ 9041866e
......@@ -2,38 +2,38 @@
<div style="width: 100%">
<el-col>
<el-form ref="titleForm" :model="titleForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="titleForm.show" @change="changeTitleStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="titleForm.show" @change="changeTitleStyle('show')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="titleForm.show">
<el-form-item v-if="!this.batchOptStatus" :label="$t('chart.title')" class="form-item">
<div v-show="showProperty('show') && titleForm.show">
<el-form-item v-show="showProperty('title')" v-if="!batchOptStatus" :label="$t('chart.title')" class="form-item">
<el-input
v-model="titleForm.title"
size="mini"
:placeholder="$t('chart.title')"
clearable
@blur="changeTitleStyle"
@blur="changeTitleStyle('title')"
@input="inputOnInput($event)"
/>
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle">
<el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle('fontSize')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="titleForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle" />
<el-form-item v-show="showProperty('color')" :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="titleForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle('fontSize')" />
</el-form-item>
<el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">
<el-form-item v-show="showProperty('hPosition')" :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle('hPosition')">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.text_style')" class="form-item">
<el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle">{{ $t('chart.italic') }}</el-checkbox>
<el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle">{{ $t('chart.bolder') }}</el-checkbox>
<el-form-item v-show="showProperty('isItalic') || showProperty('isBolder') " :label="$t('chart.text_style')" class="form-item">
<el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle('isItalic')">{{ $t('chart.italic') }}</el-checkbox>
<el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle('isBolder')">{{ $t('chart.bolder') }}</el-checkbox>
</el-form-item>
</div>
</el-form>
......@@ -56,6 +56,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
......@@ -110,7 +117,7 @@ export default {
}
this.fontSize = arr
},
changeTitleStyle() {
changeTitleStyle(modifyName) {
if (!this.batchOptStatus) {
if (this.titleForm.title.length < 1) {
this.$error(this.$t('chart.title_cannot_empty'))
......@@ -123,10 +130,14 @@ export default {
return
}
}
this.titleForm['modifyName'] = modifyName
this.$emit('onTextChange', this.titleForm)
},
inputOnInput: function(e) {
this.$forceUpdate()
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}
......
frontend/src/views/chart/components/component-style/XAxisSelectorAntV.vue
浏览文件 @ 9041866e
......@@ -2,28 +2,28 @@
<div style="width: 100%">
<el-col>
<el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="axisForm.show" @change="changeXAxisStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="axisForm.show" @change="changeXAxisStyle('show')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="axisForm.show">
<el-form-item :label="$t('chart.position')" class="form-item">
<el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle">
<el-form-item v-show="showProperty('position')" :label="$t('chart.position')" class="form-item">
<el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle('position')">
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
<el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.name')" class="form-item">
<el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle" />
<el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
<el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle('name')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeXAxisStyle" />
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeXAxisStyle('nameTextStyle')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle">
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle('nameTextStyle')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<span v-show="chart.type && chart.type.includes('horizontal')">
<span v-show="showProperty('axisValue')">
<el-divider />
<el-form-item class="form-item">
<span slot="label">
......@@ -39,45 +39,45 @@
</el-tooltip>
</span>
</span>
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeXAxisStyle">{{ $t('chart.axis_auto') }}</el-checkbox>
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeXAxisStyle('axisValue')">{{ $t('chart.axis_auto') }}</el-checkbox>
</el-form-item>
<span v-show="!axisForm.axisValue.auto">
<el-form-item :label="$t('chart.axis_value_min')" class="form-item">
<el-input v-model="axisForm.axisValue.min" @blur="changeXAxisStyle" />
<el-input v-model="axisForm.axisValue.min" @blur="changeXAxisStyle('axisValue')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_value_max')" class="form-item">
<el-input v-model="axisForm.axisValue.max" @blur="changeXAxisStyle" />
<el-input @blur="changeXAxisStyle('axisValue')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_value_split_count')" class="form-item">
<el-input v-model="axisForm.axisValue.splitCount" @blur="changeXAxisStyle" />
<el-input v-model="axisForm.axisValue.splitCount" @blur="changeXAxisStyle('axisValue')" />
</el-form-item>
</span>
</span>
<el-divider />
<el-form-item :label="$t('chart.axis_show')" class="form-item">
<el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
<el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
</el-form-item>
<span v-show="axisForm.splitLine.show">
<span v-show="showProperty('splitLine') && axisForm.splitLine.show">
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle('splitLine')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" />
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle('splitLine')" />
</el-form-item>
</span>
<el-divider />
<el-form-item :label="$t('chart.axis_label_show')" class="form-item">
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
<el-form-item v-show="showProperty('axisForm')" :label="$t('chart.axis_label_show')" class="form-item">
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
</el-form-item>
<span v-show="axisForm.axisLabel.show">
<span v-show="showProperty('axisLabel') && axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle" />
<el-color-picker class="el-color-picker" :predefine="predefineColors" @change="changeXAxisStyle('axisLabel')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle('axisLabel')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle">
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle('axisLabel')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
......@@ -101,6 +101,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
......@@ -156,7 +163,7 @@ export default {
}
this.fontSize = arr
},
changeXAxisStyle() {
changeXAxisStyle(modifyName) {
if (!this.axisForm.show) {
this.isSetting = false
}
......@@ -167,8 +174,13 @@ export default {
})
return
}
this.axisForm['modifyName'] = modifyName
this.$emit('onChangeXAxisForm', this.axisForm)
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}
</script>
......
frontend/src/views/chart/components/component-style/YAxisExtSelectorAntV.vue
浏览文件 @ 9041866e
......@@ -2,28 +2,28 @@
<div style="width: 100%">
<el-col>
<el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="axisForm.show" @change="changeYAxisStyle('show')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="axisForm.show">
<el-form-item :label="$t('chart.position')" class="form-item">
<el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">
<el-form-item v-show="showProperty('position')" :label="$t('chart.position')" class="form-item">
<el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle('position')">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.name')" class="form-item">
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
<el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle('name')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle('nameTextStyle')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle('nameTextStyle')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<span v-show="chart.type && !chart.type.includes('horizontal')">
<span v-show="showProperty('axisValue')">
<el-divider />
<el-form-item class="form-item">
<span slot="label">
......@@ -39,45 +39,45 @@
</el-tooltip>
</span>
</span>
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle">{{ $t('chart.axis_auto') }}</el-checkbox>
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle('axisValue')">{{ $t('chart.axis_auto') }}</el-checkbox>
</el-form-item>
<span v-show="!axisForm.axisValue.auto">
<el-form-item :label="$t('chart.axis_value_min')" class="form-item">
<el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle" />
<el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle('axisValue')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_value_max')" class="form-item">
<el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle" />
<el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle('axisValue')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_value_split_count')" class="form-item">
<el-input v-model="axisForm.axisValue.splitCount" @blur="changeYAxisStyle" />
<el-input v-model="axisForm.axisValue.splitCount" @blur="changeYAxisStyle('axisValue')" />
</el-form-item>
</span>
</span>
<el-divider />
<el-form-item :label="$t('chart.axis_show')" class="form-item">
<el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
<el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
</el-form-item>
<span v-show="axisForm.splitLine.show">
<span v-show="showProperty('splitLine') && axisForm.splitLine.show">
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('splitLine')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle('lineStyle')" />
</el-form-item>
</span>
<el-divider />
<el-form-item :label="$t('chart.axis_label_show')" class="form-item">
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_show')" class="form-item">
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
</el-form-item>
<span v-show="axisForm.axisLabel.show">
<span v-show="showProperty('axisLabel') && axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('axisLabel')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle('axisLabel')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle('axisLabel')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
......@@ -101,6 +101,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
......@@ -159,7 +166,7 @@ export default {
}
this.fontSize = arr
},
changeYAxisStyle() {
changeYAxisStyle(modifyName) {
if (!this.axisForm.show) {
this.isSetting = false
}
......@@ -170,7 +177,11 @@ export default {
})
return
}
this.axisForm['modifyName'] = modifyName
this.$emit('onChangeYAxisForm', this.axisForm)
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}
......
frontend/src/views/chart/components/component-style/YAxisSelectorAntV.vue
浏览文件 @ 9041866e
......@@ -2,28 +2,28 @@
<div style="width: 100%">
<el-col>
<el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="axisForm.show" @change="changeYAxisStyle('show')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="axisForm.show">
<el-form-item :label="$t('chart.position')" class="form-item">
<el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">
<el-form-item v-show="showProperty('position')" :label="$t('chart.position')" class="form-item">
<el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle('position')">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.name')" class="form-item">
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
<el-form-item v-show="showProperty('name')" :label="$t('chart.name')" class="form-item">
<el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle('name')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle" />
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_color')" class="form-item">
<el-color-picker v-model="axisForm.nameTextStyle.color" class="color-picker-style" :predefine="predefineColors" @change="changeYAxisStyle('nameTextStyle')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
<el-form-item v-show="showProperty('nameTextStyle')" :label="$t('chart.axis_name_fontsize')" class="form-item">
<el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle('nameTextStyle')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<span v-show="chart.type && !chart.type.includes('horizontal')">
<span v-show="showProperty('axisValue')">
<el-divider />
<el-form-item class="form-item">
<span slot="label">
......@@ -39,14 +39,14 @@
</el-tooltip>
</span>
</span>
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle">{{ $t('chart.axis_auto') }}</el-checkbox>
<el-checkbox v-model="axisForm.axisValue.auto" @change="changeYAxisStyle('axisValue')">{{ $t('chart.axis_auto') }}</el-checkbox>
</el-form-item>
<span v-show="!axisForm.axisValue.auto">
<el-form-item :label="$t('chart.axis_value_min')" class="form-item">
<el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle" />
<el-input v-model="axisForm.axisValue.min" @blur="changeYAxisStyle('axisValue')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_value_max')" class="form-item">
<el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle" />
<el-input v-model="axisForm.axisValue.max" @blur="changeYAxisStyle('axisValue')" />
</el-form-item>
<el-form-item class="form-item">
<span slot="label">
......@@ -60,35 +60,35 @@
</el-tooltip>
</span>
</span>
<el-input v-model="axisForm.axisValue.splitCount" @blur="changeYAxisStyle" />
<el-input v-model="axisForm.axisValue.splitCount" @blur="changeYAxisStyle('axisValue')" />
</el-form-item>
</span>
</span>
<el-divider />
<el-form-item :label="$t('chart.axis_show')" class="form-item">
<el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
<el-form-item v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item">
<el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle('splitLine')">{{ $t('chart.axis_show') }}</el-checkbox>
</el-form-item>
<span v-show="axisForm.splitLine.show">
<span v-show="showProperty('splitLine') && axisForm.splitLine.show">
<el-form-item :label="$t('chart.axis_color')" class="form-item">
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.splitLine.lineStyle.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('splitLine')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
<el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle('splitLine')" />
</el-form-item>
</span>
<el-divider />
<el-form-item :label="$t('chart.axis_label_show')" class="form-item">
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
<el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.axis_label_show')" class="form-item">
<el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle('axisLabel')">{{ $t('chart.axis_label_show') }}</el-checkbox>
</el-form-item>
<span v-show="axisForm.axisLabel.show">
<span v-show="showProperty('axisLabel') && axisForm.axisLabel.show">
<el-form-item :label="$t('chart.axis_label_color')" class="form-item">
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle" />
<el-color-picker v-model="axisForm.axisLabel.color" class="el-color-picker" :predefine="predefineColors" @change="changeYAxisStyle('axisLabel')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_rotate')" class="form-item form-item-slider">
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
<el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle('axisLabel')" />
</el-form-item>
<el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item">
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">
<el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle('axisLabel')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
......@@ -112,6 +112,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
......@@ -167,7 +174,7 @@ export default {
}
this.fontSize = arr
},
changeYAxisStyle() {
changeYAxisStyle(modifyName) {
if (!this.axisForm.show) {
this.isSetting = false
}
......@@ -178,7 +185,11 @@ export default {
})
return
}
this.axisForm['modifyName'] = modifyName
this.$emit('onChangeYAxisForm', this.axisForm)
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}
......
frontend/src/views/chart/components/shape-attr/ColorSelector.vue
浏览文件 @ 9041866e
......@@ -2,8 +2,8 @@
<div style="width: 100%">
<el-col>
<el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
<div v-if="sourceType==='view' || sourceType==='panelEchart'">
<el-form-item v-show="chart.type && !chart.type.includes('table') && !chart.type.includes('text') && chart.type !== 'label'" :label="$t('chart.color_case')" class="form-item">
<div>
<el-form-item v-show="showProperty('value')" :label="$t('chart.color_case')" class="form-item">
<el-popover
placement="bottom"
width="400"
......@@ -12,7 +12,7 @@
<div style="padding: 6px 10px;">
<div>
<span class="color-label">{{ $t('chart.system_case') }}</span>
<el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorOption">
<el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorOption('value')">
<el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
<div style="float: left">
<span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
......@@ -45,34 +45,34 @@
</el-popover>
</el-form-item>
<el-form-item v-show="(chart.type && (chart.type.includes('text') || chart.type === 'label')) || sourceType==='panelTable'" :label="$t('chart.quota_color')" class="form-item">
<el-color-picker v-model="colorForm.quotaColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
<el-form-item v-show="showProperty('quotaColor')" :label="$t('chart.quota_color')" class="form-item">
<el-color-picker v-model="colorForm.quotaColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('quotaColor')" />
</el-form-item>
<el-form-item v-show="(chart.type && chart.type.includes('text') || chart.type === 'label') || sourceType==='panelTable'" :label="$t('chart.dimension_color')" class="form-item">
<el-color-picker v-model="colorForm.dimensionColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
<el-form-item v-show="showProperty('dimensionColor')" :label="$t('chart.dimension_color')" class="form-item">
<el-color-picker v-model="colorForm.dimensionColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('dimensionColor')" />
</el-form-item>
</div>
<div v-if="sourceType==='view' || sourceType==='panelTable'">
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_header_bg')" class="form-item">
<el-color-picker v-model="colorForm.tableHeaderBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
<div>
<el-form-item v-show="showProperty('tableHeaderBgColor')" :label="$t('chart.table_header_bg')" class="form-item">
<el-color-picker v-model="colorForm.tableHeaderBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableHeaderBgColor')" />
</el-form-item>
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_bg')" class="form-item">
<el-color-picker v-model="colorForm.tableItemBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
<el-form-item v-show="showProperty('tableItemBgColor')" :label="$t('chart.table_item_bg')" class="form-item">
<el-color-picker v-model="colorForm.tableItemBgColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableItemBgColor')" />
</el-form-item>
<el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_font_color')" class="form-item">
<el-color-picker v-model="colorForm.tableFontColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
<el-form-item v-show="showProperty('tableFontColor')" :label="$t('chart.table_item_font_color')" class="form-item">
<el-color-picker v-model="colorForm.tableFontColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableFontColor')" />
</el-form-item>
<el-form-item v-show="(chart.render && chart.render === 'antv' && chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_border_color')" class="form-item">
<el-color-picker v-model="colorForm.tableBorderColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
<el-form-item v-show="showProperty('tableBorderColor')" :label="$t('chart.table_border_color')" class="form-item">
<el-color-picker v-model="colorForm.tableBorderColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('tableBorderColor')" />
</el-form-item>
<!-- 暂时不支持该功能-->
<!-- <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.stripe')" class="form-item">-->
<!-- <el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase">{{ $t('chart.stripe') }}</el-checkbox>-->
<!-- <el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase('tableStripe')">{{ $t('chart.stripe') }}</el-checkbox>-->
<!-- </el-form-item>-->
</div>
<el-form-item v-show="chart.type && !chart.type.includes('text') && chart.type !== 'label'" :label="$t('chart.not_alpha')" class="form-item form-item-slider">
<el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeColorCase" />
<el-form-item v-show="showProperty('alpha')" :label="$t('chart.not_alpha')" class="form-item form-item-slider">
<el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeColorCase('alpha')" />
</el-form-item>
</el-form>
</el-col>
......@@ -93,6 +93,13 @@ export default {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
},
sourceType: {
type: String,
default: 'view',
......@@ -206,7 +213,7 @@ export default {
this.init()
},
methods: {
changeColorOption() {
changeColorOption(modifyName = 'value') {
const that = this
const items = this.colorCases.filter(ele => {
return ele.value === that.colorForm.value
......@@ -220,9 +227,12 @@ export default {
this.customColor = this.colorForm.colors[0]
this.colorIndex = 0
this.changeColorCase()
this.changeColorCase(modifyName)
},
changeColorCase() {
changeColorCase(modifyName) {
this.colorForm['modifyName'] = modifyName
this.$emit('onColorChange', this.colorForm)
this.colorForm['modifyName'] = 'colors'
this.$emit('onColorChange', this.colorForm)
// this.customColor = null
// this.colorIndex = 0
......@@ -253,11 +263,16 @@ export default {
},
switchColorCase() {
this.colorForm.colors[this.colorIndex] = this.customColor
this.colorForm['modifyName'] = 'value'
this.$emit('onColorChange', this.colorForm)
this.colorForm['modifyName'] = 'colors'
this.$emit('onColorChange', this.colorForm)
},
resetCustomColor() {
this.changeColorOption()
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}
......
frontend/src/views/chart/components/shape-attr/LabelSelector.vue
浏览文件 @ 9041866e
<template>
<div style="width: 100%;">
<el-col>
<el-form v-show="chart.type && !chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
<el-form ref="labelForm" :model="labelForm" label-width="80px" size="mini">
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="labelForm.show" @change="changeLabelAttr('show')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="labelForm.show">
<el-form-item v-show="chart.type && chart.type.includes('pie')" :label="$t('chart.pie_label_line_show')" class="form-item">
<el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr">{{ $t('chart.pie_label_line_show') }}</el-checkbox>
<el-form-item v-show="showProperty('labelLine')" :label="$t('chart.pie_label_line_show')" class="form-item">
<el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr('labelLine')">{{ $t('chart.pie_label_line_show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
<el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr('fontSize')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
<el-form-item v-show="showProperty('color')" :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr('color')" />
</el-form-item>
<el-form-item v-show="chart.type && chart.type !== 'liquid' && !chart.type.includes('line') && chart.type !== 'treemap' && chart.type !== 'map'" :label="$t('chart.label_position')" class="form-item">
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
<el-form-item v-show="showProperty('position')" :label="$t('chart.label_position')" class="form-item">
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr('position')">
<el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item v-show="chart.type && chart.type !== 'liquid'" class="form-item">
<el-form-item v-show="showProperty('formatter')" class="form-item">
<span slot="label">
<span class="span-box">
<span>{{ $t('chart.content_formatter') }}</span>
......@@ -34,30 +34,16 @@
</el-tooltip>
</span>
</span>
<el-input v-model="labelForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />
<el-input v-model="labelForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr('formatter')" />
</el-form-item>
</div>
</el-form>
<el-form v-show="chart.type && chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
</el-form-item>
<el-form-item class="form-item">
<el-form-item v-show="showProperty('gaugeFormatter')" class="form-item">
<span slot="label">
<span class="span-box">
<span>{{ $t('chart.content_formatter') }}</span>
</span>
</span>
<el-input v-model="labelForm.gaugeFormatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr" />
<el-input v-model="labelForm.gaugeFormatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr('gaugeFormatter')" />
</el-form-item>
</el-form>
</el-col>
......@@ -77,6 +63,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
......@@ -143,10 +136,11 @@ export default {
}
this.fontSize = arr
},
changeLabelAttr() {
changeLabelAttr(modifyName) {
if (!this.labelForm.show) {
this.isSetting = false
}
this.labelForm['modifyName'] = modifyName
this.$emit('onLabelChange', this.labelForm)
},
initOptions() {
......@@ -160,6 +154,9 @@ export default {
this.labelPosition = this.labelPositionV
}
}
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}
......
frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue
浏览文件 @ 9041866e
<template>
<div style="width: 100%;">
<el-col>
<el-form v-show="chart.type && !chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
<el-form ref="labelForm" :model="labelForm" label-width="80px" size="mini">
<el-form-item v-show="showProperty('show')" :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="labelForm.show" @change="changeLabelAttr('show')">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<div v-show="labelForm.show">
<!-- <el-form-item v-show="chart.type && chart.type.includes('pie')" :label="$t('chart.pie_label_line_show')" class="form-item">-->
<!-- <el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr">{{ $t('chart.pie_label_line_show') }}</el-checkbox>-->
<!-- </el-form-item>-->
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
<el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr('fontSize')">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
<el-form-item v-show="showProperty('color')" :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr('color')" />
</el-form-item>
<el-form-item v-show="chart.type && chart.type !== 'liquid' && chart.type !== 'pie-rose' && !chart.type.includes('line') && chart.type !== 'treemap' && !chart.type.includes('scatter')" :label="$t('chart.label_position')" class="form-item">
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
<el-form-item v-show="showProperty('position')" :label="$t('chart.label_position')" class="form-item">
<el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr('position')">
<el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
</div>
</el-form>
<el-form v-show="chart.type && chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
</el-form-item>
</el-form>
</el-col>
</div>
</template>
......@@ -55,6 +38,13 @@ export default {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
......@@ -121,10 +111,11 @@ export default {
}
this.fontSize = arr
},
changeLabelAttr() {
changeLabelAttr(modifyName) {
if (!this.labelForm.show) {
this.isSetting = false
}
this.labelForm['modifyName'] = modifyName
this.$emit('onLabelChange', this.labelForm)
},
initOptions() {
......@@ -138,6 +129,9 @@ export default {
this.labelPosition = this.labelPositionV
}
}
},
showProperty(property) {
return this.propertyInner.includes(property)
}
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论