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

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

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

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

@ -2,15 +2,16 @@
<div>
<div style="width: 100%">
<el-popover
v-model="isSetting"
placement="right"
width="400"
trigger="click"
>
<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>
<!-- <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>-->
<el-form-item :label="$t('chart.position')" class="form-item">
<el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle">
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
@ -29,7 +30,15 @@
</el-form>
</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>
</div>
</div>
@ -48,7 +57,8 @@ export default {
},
data() {
return {
axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE))
axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE)),
isSetting: false
}
},
watch: {
@ -73,6 +83,9 @@ export default {
},
methods: {
changeXAxisStyle() {
if (!this.axisForm.show) {
this.isSetting = false
}
this.$emit('onChangeXAxisForm', this.axisForm)
}
}
@ -104,4 +117,10 @@ export default {
.el-form-item{
margin-bottom: 6px;
}
.switch-style{
position: absolute;
right: 10px;
margin-top: -4px;
}
</style>

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

@ -2,15 +2,16 @@
<div>
<div style="width: 100%">
<el-popover
v-model="isSetting"
placement="right"
width="400"
trigger="click"
>
<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>
<!-- <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>-->
<el-form-item :label="$t('chart.position')" class="form-item">
<el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
@ -29,7 +30,15 @@
</el-form>
</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>
</div>
</div>
@ -48,7 +57,8 @@ export default {
},
data() {
return {
axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE))
axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE)),
isSetting: false
}
},
watch: {
@ -73,6 +83,9 @@ export default {
},
methods: {
changeYAxisStyle() {
if (!this.axisForm.show) {
this.isSetting = false
}
this.$emit('onChangeYAxisForm', this.axisForm)
}
}
@ -104,4 +117,10 @@ export default {
.el-form-item{
margin-bottom: 6px;
}
.switch-style{
position: absolute;
right: 10px;
margin-top: -4px;
}
</style>

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

@ -2,15 +2,16 @@
<div>
<div style="width: 100%">
<el-popover
v-model="isSetting"
placement="right"
width="400"
trigger="click"
>
<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-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-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" />
@ -67,7 +68,15 @@
</el-form>
</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>
</div>
</div>
@ -87,7 +96,8 @@ export default {
data() {
return {
labelForm: JSON.parse(JSON.stringify(DEFAULT_LABEL)),
fontSize: []
fontSize: [],
isSetting: false
}
},
watch: {
@ -123,6 +133,9 @@ export default {
this.fontSize = arr
},
changeLabelAttr() {
if (!this.labelForm.show) {
this.isSetting = false
}
this.$emit('onLabelChange', this.labelForm)
}
}
@ -154,4 +167,10 @@ export default {
.el-form-item{
margin-bottom: 6px;
}
.switch-style{
position: absolute;
right: 10px;
margin-top: -4px;
}
</style>

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

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

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

@ -73,23 +73,23 @@
<el-col
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">
<el-row>
<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-row>
<el-form>
<el-form-item class="form-item">
<el-input
v-model="view.title"
size="mini"
:placeholder="$t('chart.title')"
prefix-icon="el-icon-search"
clearable
/>
</el-form-item>
</el-form>
</div>
<!-- <div style="border-bottom: 1px solid #E6E6E6;overflow-y:hidden;height: 62px;" class="padding-lr">-->
<!-- <el-row>-->
<!-- <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-row>-->
<!-- <el-form>-->
<!-- <el-form-item class="form-item">-->
<!-- <el-input-->
<!-- v-model="view.title"-->
<!-- size="mini"-->
<!-- :placeholder="$t('chart.title')"-->
<!-- prefix-icon="el-icon-search"-->
<!-- clearable-->
<!-- />-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- </div>-->
<div style="height: 25vh;overflow:auto" class="padding-lr">
<span>{{ $t('chart.chart_type') }}</span>
<el-row>
@ -736,6 +736,7 @@ export default {
onTextChange(val) {
this.view.customStyle.text = val
this.view.title = val.title
this.save()
},