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

feat(视图):属性、样式中，是否显示放到外面控制，不显示则禁用属性编辑；外侧标题移入到标题的样式中

Browse Source
This commit is contained in:
junjie 2021-05-31 16:20:28 +08:00
parent ca67be9426
commit 7838dface2
7 changed files with 173 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/views/chart/components/component-style/LegendSelector.vue
View File

@ -2,15 +2,16 @@
<div> <div>
<div style="width: 100%"> <div style="width: 100%">
<el-popover <el-popover
v-model="isSetting"
placement="right" placement="right"
width="400" width="400"
trigger="click" trigger="click"
> >
<el-col> <el-col>
<el-form ref="legendForm" :model="legendForm" label-width="80px" size="mini"> <el-form ref="legendForm" :model="legendForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item"> <!-- <el-form-item :label="$t('chart.show')" class="form-item">-->
<el-checkbox v-model="legendForm.show" @change="changeLegendStyle">{{ $t('chart.show') }}</el-checkbox> <!-- <el-checkbox v-model="legendForm.show" @change="changeLegendStyle">{{ $t('chart.show') }}</el-checkbox>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item :label="$t('chart.icon')" class="form-item"> <el-form-item :label="$t('chart.icon')" class="form-item">
<el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle"> <el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle">
<el-option <el-option
@ -52,7 +53,15 @@
</el-form> </el-form>
</el-col> </el-col>
<el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.legend') }}<i class="el-icon-setting el-icon--right" /></el-button> <el-button slot="reference" size="mini" class="shape-item" :disabled="!legendForm.show">
{{ $t('chart.legend') }}<i class="el-icon-setting el-icon--right" />
<el-switch
v-model="legendForm.show"
class="switch-style"
@click.stop.native
@change="changeLegendStyle"
/>
</el-button>
</el-popover> </el-popover>
</div> </div>
</div> </div>
@ -80,7 +89,8 @@ export default {
{ name: this.$t('chart.line_symbol_roundRect'), value: 'roundRect' }, { name: this.$t('chart.line_symbol_roundRect'), value: 'roundRect' },
{ name: this.$t('chart.line_symbol_triangle'), value: 'triangle' }, { name: this.$t('chart.line_symbol_triangle'), value: 'triangle' },
{ name: this.$t('chart.line_symbol_diamond'), value: 'diamond' } { name: this.$t('chart.line_symbol_diamond'), value: 'diamond' }
] ],
isSetting: false
} }
}, },
watch: { watch: {
@ -116,6 +126,9 @@ export default {
this.fontSize = arr this.fontSize = arr
}, },
changeLegendStyle() { changeLegendStyle() {
if (!this.legendForm.show) {
this.isSetting = false
}
this.$emit('onLegendChange', this.legendForm) this.$emit('onLegendChange', this.legendForm)
} }
} }
@ -147,4 +160,10 @@ export default {
.el-form-item{ .el-form-item{
margin-bottom: 6px; margin-bottom: 6px;
} }
.switch-style{
position: absolute;
right: 10px;
margin-top: -4px;
}
</style> </style>

40
frontend/src/views/chart/components/component-style/TitleSelector.vue
View File

@ -2,14 +2,24 @@
<div> <div>
<div style="width: 100%"> <div style="width: 100%">
<el-popover <el-popover
v-model="isSetting"
placement="right" placement="right"
width="400" width="400"
trigger="click" trigger="click"
> >
<el-col> <el-col>
<el-form ref="titleForm" :model="titleForm" label-width="80px" size="mini"> <el-form ref="titleForm" :model="titleForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item"> <!-- <el-form-item :label="$t('chart.show')" class="form-item">-->
<el-checkbox v-model="titleForm.show" @change="changeTitleStyle">{{ $t('chart.show') }}</el-checkbox> <!-- <el-checkbox v-model="titleForm.show" @change="changeTitleStyle">{{ $t('chart.show') }}</el-checkbox>-->
<!-- </el-form-item>-->
<el-form-item :label="$t('chart.title')" class="form-item">
<el-input
v-model="titleForm.title"
size="mini"
:placeholder="$t('chart.title')"
clearable
@blur="changeTitleStyle"
/>
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="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-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle">
@ -39,7 +49,15 @@
</el-form> </el-form>
</el-col> </el-col>
<el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.title') }}<i class="el-icon-setting el-icon--right" /></el-button> <el-button slot="reference" size="mini" class="shape-item" :disabled="!titleForm.show">
{{ $t('chart.title') }}<i class="el-icon-setting el-icon--right" />
<el-switch
v-model="titleForm.show"
class="switch-style"
@click.stop.native
@change="changeTitleStyle"
/>
</el-button>
</el-popover> </el-popover>
</div> </div>
</div> </div>
@ -59,7 +77,8 @@ export default {
data() { data() {
return { return {
titleForm: JSON.parse(JSON.stringify(DEFAULT_TITLE_STYLE)), titleForm: JSON.parse(JSON.stringify(DEFAULT_TITLE_STYLE)),
fontSize: [] fontSize: [],
isSetting: false
} }
}, },
watch: { watch: {
@ -76,13 +95,11 @@ export default {
if (customStyle.text) { if (customStyle.text) {
this.titleForm = customStyle.text this.titleForm = customStyle.text
} }
this.titleForm.title = this.chart.title
} }
} }
} }
}, },
created() {
console.log(JSON.stringify(this.chart))
},
mounted() { mounted() {
this.init() this.init()
}, },
@ -98,6 +115,9 @@ export default {
this.fontSize = arr this.fontSize = arr
}, },
changeTitleStyle() { changeTitleStyle() {
if (!this.titleForm.show) {
this.isSetting = false
}
this.$emit('onTextChange', this.titleForm) this.$emit('onTextChange', this.titleForm)
} }
} }
@ -129,4 +149,10 @@ export default {
.el-form-item{ .el-form-item{
margin-bottom: 6px; margin-bottom: 6px;
} }
.switch-style{
position: absolute;
right: 10px;
margin-top: -4px;
}
</style> </style>

31
frontend/src/views/chart/components/component-style/XAxisSelector.vue
View File

@ -2,15 +2,16 @@
<div> <div>
<div style="width: 100%"> <div style="width: 100%">
<el-popover <el-popover
v-model="isSetting"
placement="right" placement="right"
width="400" width="400"
trigger="click" trigger="click"
> >
<el-col> <el-col>
<el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini"> <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item"> <!-- <el-form-item :label="$t('chart.show')" class="form-item">-->
<el-checkbox v-model="axisForm.show" @change="changeXAxisStyle">{{ $t('chart.show') }}</el-checkbox> <!-- <el-checkbox v-model="axisForm.show" @change="changeXAxisStyle">{{ $t('chart.show') }}</el-checkbox>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item :label="$t('chart.position')" class="form-item"> <el-form-item :label="$t('chart.position')" class="form-item">
<el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle"> <el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle">
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button> <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
@ -24,12 +25,20 @@
<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" />
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.content_formatter')" class="form-item"> <el-form-item :label="$t('chart.content_formatter')" class="form-item">
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle"/> <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle" />
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-col> </el-col>
<el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.xAxis') }}<i class="el-icon-setting el-icon--right" /></el-button> <el-button slot="reference" size="mini" class="shape-item" :disabled="!axisForm.show">
{{ $t('chart.xAxis') }}<i class="el-icon-setting el-icon--right" />
<el-switch
v-model="axisForm.show"
class="switch-style"
@click.stop.native
@change="changeXAxisStyle"
/>
</el-button>
</el-popover> </el-popover>
</div> </div>
</div> </div>
@ -48,7 +57,8 @@ export default {
}, },
data() { data() {
return { return {
axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE)) axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE)),
isSetting: false
} }
}, },
watch: { watch: {
@ -73,6 +83,9 @@ export default {
}, },
methods: { methods: {
changeXAxisStyle() { changeXAxisStyle() {
if (!this.axisForm.show) {
this.isSetting = false
}
this.$emit('onChangeXAxisForm', this.axisForm) this.$emit('onChangeXAxisForm', this.axisForm)
} }
} }
@ -104,4 +117,10 @@ export default {
.el-form-item{ .el-form-item{
margin-bottom: 6px; margin-bottom: 6px;
} }
.switch-style{
position: absolute;
right: 10px;
margin-top: -4px;
}
</style> </style>

31
frontend/src/views/chart/components/component-style/YAxisSelector.vue
View File

@ -2,15 +2,16 @@
<div> <div>
<div style="width: 100%"> <div style="width: 100%">
<el-popover <el-popover
v-model="isSetting"
placement="right" placement="right"
width="400" width="400"
trigger="click" trigger="click"
> >
<el-col> <el-col>
<el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini"> <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item"> <!-- <el-form-item :label="$t('chart.show')" class="form-item">-->
<el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox> <!-- <el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item :label="$t('chart.position')" class="form-item"> <el-form-item :label="$t('chart.position')" class="form-item">
<el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle"> <el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button> <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
@ -24,12 +25,20 @@
<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" />
</el-form-item> </el-form-item>
<el-form-item :label="$t('chart.content_formatter')" class="form-item"> <el-form-item :label="$t('chart.content_formatter')" class="form-item">
<el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle"/> <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle" />
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-col> </el-col>
<el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.yAxis') }}<i class="el-icon-setting el-icon--right" /></el-button> <el-button slot="reference" size="mini" class="shape-item" :disabled="!axisForm.show">
{{ $t('chart.yAxis') }}<i class="el-icon-setting el-icon--right" />
<el-switch
v-model="axisForm.show"
class="switch-style"
@click.stop.native
@change="changeYAxisStyle"
/>
</el-button>
</el-popover> </el-popover>
</div> </div>
</div> </div>
@ -48,7 +57,8 @@ export default {
}, },
data() { data() {
return { return {
axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE)) axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE)),
isSetting: false
} }
}, },
watch: { watch: {
@ -73,6 +83,9 @@ export default {
}, },
methods: { methods: {
changeYAxisStyle() { changeYAxisStyle() {
if (!this.axisForm.show) {
this.isSetting = false
}
this.$emit('onChangeYAxisForm', this.axisForm) this.$emit('onChangeYAxisForm', this.axisForm)
} }
} }
@ -104,4 +117,10 @@ export default {
.el-form-item{ .el-form-item{
margin-bottom: 6px; margin-bottom: 6px;
} }
.switch-style{
position: absolute;
right: 10px;
margin-top: -4px;
}
</style> </style>

29
frontend/src/views/chart/components/shape-attr/LabelSelector.vue
View File

@ -2,15 +2,16 @@
<div> <div>
<div style="width: 100%"> <div style="width: 100%">
<el-popover <el-popover
v-model="isSetting"
placement="right" placement="right"
width="400" width="400"
trigger="click" trigger="click"
> >
<el-col> <el-col>
<el-form v-show="chart.type && !chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini"> <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-form-item :label="$t('chart.show')" class="form-item">-->
<el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox> <!-- <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item :label="$t('chart.text_fontsize')" class="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-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-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
@ -67,7 +68,15 @@
</el-form> </el-form>
</el-col> </el-col>
<el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.label') }}<i class="el-icon-setting el-icon--right" /></el-button> <el-button slot="reference" size="mini" class="shape-item" :disabled="!labelForm.show">
{{ $t('chart.label') }}<i class="el-icon-setting el-icon--right" />
<el-switch
v-model="labelForm.show"
class="switch-style"
@click.stop.native
@change="changeLabelAttr"
/>
</el-button>
</el-popover> </el-popover>
</div> </div>
</div> </div>
@ -87,7 +96,8 @@ export default {
data() { data() {
return { return {
labelForm: JSON.parse(JSON.stringify(DEFAULT_LABEL)), labelForm: JSON.parse(JSON.stringify(DEFAULT_LABEL)),
fontSize: [] fontSize: [],
isSetting: false
} }
}, },
watch: { watch: {
@ -123,6 +133,9 @@ export default {
this.fontSize = arr this.fontSize = arr
}, },
changeLabelAttr() { changeLabelAttr() {
if (!this.labelForm.show) {
this.isSetting = false
}
this.$emit('onLabelChange', this.labelForm) this.$emit('onLabelChange', this.labelForm)
} }
} }
@ -154,4 +167,10 @@ export default {
.el-form-item{ .el-form-item{
margin-bottom: 6px; margin-bottom: 6px;
} }
.switch-style{
position: absolute;
right: 10px;
margin-top: -4px;
}
</style> </style>

29
frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
View File

@ -2,15 +2,16 @@
<div> <div>
<div style="width: 100%"> <div style="width: 100%">
<el-popover <el-popover
v-model="isSetting"
placement="right" placement="right"
width="400" width="400"
trigger="click" trigger="click"
> >
<el-col> <el-col>
<el-form ref="tooltipForm" :model="tooltipForm" label-width="80px" size="mini"> <el-form ref="tooltipForm" :model="tooltipForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item"> <!-- <el-form-item :label="$t('chart.show')" class="form-item">-->
<el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr">{{ $t('chart.show') }}</el-checkbox> <!-- <el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr">{{ $t('chart.show') }}</el-checkbox>-->
</el-form-item> <!-- </el-form-item>-->
<el-form-item :label="$t('chart.trigger_position')" class="form-item"> <el-form-item :label="$t('chart.trigger_position')" class="form-item">
<el-radio-group v-model="tooltipForm.trigger" size="mini" @change="changeTooltipAttr"> <el-radio-group v-model="tooltipForm.trigger" size="mini" @change="changeTooltipAttr">
<el-radio-button label="item">{{ $t('chart.tooltip_item') }}</el-radio-button> <el-radio-button label="item">{{ $t('chart.tooltip_item') }}</el-radio-button>
@ -54,7 +55,15 @@
</el-form> </el-form>
</el-col> </el-col>
<el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.tooltip') }}<i class="el-icon-setting el-icon--right" /></el-button> <el-button slot="reference" size="mini" class="shape-item" :disabled="!tooltipForm.show">
{{ $t('chart.tooltip') }}<i class="el-icon-setting el-icon--right" />
<el-switch
v-model="tooltipForm.show"
class="switch-style"
@click.stop.native
@change="changeTooltipAttr"
/>
</el-button>
</el-popover> </el-popover>
</div> </div>
</div> </div>
@ -74,7 +83,8 @@ export default {
data() { data() {
return { return {
tooltipForm: JSON.parse(JSON.stringify(DEFAULT_TOOLTIP)), tooltipForm: JSON.parse(JSON.stringify(DEFAULT_TOOLTIP)),
fontSize: [] fontSize: [],
isSetting: false
} }
}, },
watch: { watch: {
@ -110,6 +120,9 @@ export default {
this.fontSize = arr this.fontSize = arr
}, },
changeTooltipAttr() { changeTooltipAttr() {
if (!this.tooltipForm.show) {
this.isSetting = false
}
this.$emit('onTooltipChange', this.tooltipForm) this.$emit('onTooltipChange', this.tooltipForm)
} }
} }
@ -141,4 +154,10 @@ export default {
.el-form-item{ .el-form-item{
margin-bottom: 6px; margin-bottom: 6px;
} }
.switch-style{
position: absolute;
right: 10px;
margin-top: -4px;
}
</style> </style>

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

@ -73,23 +73,23 @@
<el-col <el-col
style="height: 100%;width: 30%;min-width: 200px;max-width:220px;border: 1px solid #E6E6E6;border-left: 0 solid;" style="height: 100%;width: 30%;min-width: 200px;max-width:220px;border: 1px solid #E6E6E6;border-left: 0 solid;"
> >
<div style="border-bottom: 1px solid #E6E6E6;overflow-y:hidden;height: 62px;" class="padding-lr"> <!-- <div style="border-bottom: 1px solid #E6E6E6;overflow-y:hidden;height: 62px;" class="padding-lr">-->
<el-row> <!-- <el-row>-->
<span>{{ $t('chart.title') }}</span> <!-- <span>{{ $t('chart.title') }}</span>-->
<el-button style="float: right;padding: 0;margin: 8px 0 0 0;font-size: 12px;" type="text" @click="save">{{ $t('chart.confirm') }}</el-button> <!-- <el-button style="float: right;padding: 0;margin: 8px 0 0 0;font-size: 12px;" type="text" @click="save">{{ $t('chart.confirm') }}</el-button>-->
</el-row> <!-- </el-row>-->
<el-form> <!-- <el-form>-->
<el-form-item class="form-item"> <!-- <el-form-item class="form-item">-->
<el-input <!-- <el-input-->
v-model="view.title" <!-- v-model="view.title"-->
size="mini" <!-- size="mini"-->
:placeholder="$t('chart.title')" <!-- :placeholder="$t('chart.title')"-->
prefix-icon="el-icon-search" <!-- prefix-icon="el-icon-search"-->
clearable <!-- clearable-->
/> <!-- />-->
</el-form-item> <!-- </el-form-item>-->
</el-form> <!-- </el-form>-->
</div> <!-- </div>-->
<div style="height: 25vh;overflow:auto" class="padding-lr"> <div style="height: 25vh;overflow:auto" class="padding-lr">
<span>{{ $t('chart.chart_type') }}</span> <span>{{ $t('chart.chart_type') }}</span>
<el-row> <el-row>
@ -736,6 +736,7 @@ export default {
onTextChange(val) { onTextChange(val) {
this.view.customStyle.text = val this.view.customStyle.text = val
this.view.title = val.title
this.save() this.save()
}, },