forked from github/dataease
refactor(数据大屏): 数据大屏过滤组件功能调整
This commit is contained in:
wangjiahao
parent
502e949048
commit
54578b45b8
@ -27,21 +27,36 @@ const { chart } = toRefs(props)
|
||||
<div class="attr-style">
|
||||
<el-row class="de-collapse-style">
|
||||
<el-collapse v-model="state.styleActiveNames" class="style-collapse">
|
||||
<el-collapse-item :themes="themes" name="component" :title="t('visualization.module')">
|
||||
<el-collapse-item :effect="themes" name="component" :title="t('visualization.module')">
|
||||
<el-form label-position="top">
|
||||
<el-form-item class="form-item margin-bottom-8">
|
||||
<el-checkbox size="small" v-model="chart.customStyle.component.titleShow">
|
||||
<el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
|
||||
<el-checkbox
|
||||
:effect="themes"
|
||||
size="small"
|
||||
v-model="chart.customStyle.component.titleShow"
|
||||
>
|
||||
{{ t('chart.show') + t('chart.title') }}
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item" style="padding-left: 20px">
|
||||
<el-form-item
|
||||
class="form-item"
|
||||
style="padding-left: 20px"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-input
|
||||
:effect="themes"
|
||||
:disabled="!chart.customStyle.component.titleShow"
|
||||
v-model.lazy="chart.customStyle.component.title"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="标题颜色" class="form-item" style="padding-left: 20px">
|
||||
<el-form-item
|
||||
label="标题颜色"
|
||||
class="form-item"
|
||||
style="padding-left: 20px"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-color-picker
|
||||
:effect="themes"
|
||||
v-model="chart.customStyle.component.titleColor"
|
||||
:trigger-width="204"
|
||||
:disabled="!chart.customStyle.component.titleShow"
|
||||
@ -49,13 +64,22 @@ const { chart } = toRefs(props)
|
||||
:predefine="COLOR_PANEL"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item margin-bottom-8">
|
||||
<el-checkbox size="small" v-model="chart.customStyle.component.labelColorShow">
|
||||
<el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
|
||||
<el-checkbox
|
||||
:effect="themes"
|
||||
size="small"
|
||||
v-model="chart.customStyle.component.labelColorShow"
|
||||
>
|
||||
标签颜色
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item" style="padding-left: 20px">
|
||||
<el-form-item
|
||||
class="form-item"
|
||||
style="padding-left: 20px"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-color-picker
|
||||
:effect="themes"
|
||||
:trigger-width="108"
|
||||
is-custom
|
||||
v-model="chart.customStyle.component.labelColor"
|
||||
@ -63,13 +87,22 @@ const { chart } = toRefs(props)
|
||||
:predefine="predefineColors"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item margin-bottom-8">
|
||||
<el-checkbox size="small" v-model="chart.customStyle.component.borderShow">
|
||||
<el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
|
||||
<el-checkbox
|
||||
:effect="themes"
|
||||
size="small"
|
||||
v-model="chart.customStyle.component.borderShow"
|
||||
>
|
||||
{{ t('visualization.board') }}
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item" style="padding-left: 20px">
|
||||
<el-form-item
|
||||
class="form-item"
|
||||
style="padding-left: 20px"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-color-picker
|
||||
:effect="themes"
|
||||
:trigger-width="108"
|
||||
is-custom
|
||||
v-model="chart.customStyle.component.borderColor"
|
||||
@ -77,13 +110,22 @@ const { chart } = toRefs(props)
|
||||
:predefine="predefineColors"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item margin-bottom-8">
|
||||
<el-checkbox size="small" v-model="chart.customStyle.component.textColorShow">
|
||||
<el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
|
||||
<el-checkbox
|
||||
:effect="themes"
|
||||
size="small"
|
||||
v-model="chart.customStyle.component.textColorShow"
|
||||
>
|
||||
提示文字颜色
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item" style="padding-left: 20px">
|
||||
<el-form-item
|
||||
class="form-item"
|
||||
style="padding-left: 20px"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-color-picker
|
||||
:effect="themes"
|
||||
:trigger-width="108"
|
||||
is-custom
|
||||
v-model="chart.customStyle.component.text"
|
||||
@ -91,13 +133,22 @@ const { chart } = toRefs(props)
|
||||
:predefine="predefineColors"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item margin-bottom-8">
|
||||
<el-checkbox size="small" v-model="chart.customStyle.component.bgColorShow">
|
||||
<el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
|
||||
<el-checkbox
|
||||
:effect="themes"
|
||||
size="small"
|
||||
v-model="chart.customStyle.component.bgColorShow"
|
||||
>
|
||||
{{ t('chart.custom_case') + t('chart.backgroundColor') }}
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item" style="padding-left: 20px">
|
||||
<el-form-item
|
||||
class="form-item"
|
||||
style="padding-left: 20px"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-color-picker
|
||||
:effect="themes"
|
||||
:trigger-width="108"
|
||||
is-custom
|
||||
v-model="chart.customStyle.component.bgColor"
|
||||
@ -106,30 +157,47 @@ const { chart } = toRefs(props)
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-divider class="m-divider" />
|
||||
<el-form-item class="form-item" label="展示按钮">
|
||||
<el-checkbox-group v-model="chart.customStyle.component.btnList">
|
||||
<el-checkbox size="small" disabled label="sure">
|
||||
<el-divider :effect="themes" class="m-divider" />
|
||||
<el-form-item
|
||||
:effect="themes"
|
||||
class="form-item"
|
||||
label="展示按钮"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-checkbox-group :effect="themes" v-model="chart.customStyle.component.btnList">
|
||||
<el-checkbox :effect="themes" size="small" disabled label="sure">
|
||||
{{ t('commons.adv_search.search') }}
|
||||
</el-checkbox>
|
||||
<el-checkbox size="small" label="clear">
|
||||
<el-checkbox :effect="themes" size="small" label="clear">
|
||||
{{ t('commons.clear') }}
|
||||
</el-checkbox>
|
||||
<el-checkbox size="small" label="reset">
|
||||
<el-checkbox :effect="themes" size="small" label="reset">
|
||||
{{ t('commons.adv_search.reset') }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item" :label="t('chart.label_position')">
|
||||
<el-radio-group class="icon-radio-group" v-model="chart.customStyle.component.layout">
|
||||
<el-radio label="vertical">
|
||||
<el-form-item
|
||||
:effect="themes"
|
||||
class="form-item"
|
||||
:label="t('chart.label_position')"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-radio-group
|
||||
:effect="themes"
|
||||
class="icon-radio-group"
|
||||
v-model="chart.customStyle.component.layout"
|
||||
>
|
||||
<el-radio :effect="themes" label="vertical">
|
||||
<el-tooltip effect="dark" placement="top">
|
||||
<template #content>
|
||||
{{ t('chart.text_pos_top') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{ active: chart.customStyle.component.layout === 'vertical' }"
|
||||
:class="{
|
||||
dark: themes === 'dark',
|
||||
active: chart.customStyle.component.layout === 'vertical'
|
||||
}"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_title-top-align_outlined" />
|
||||
@ -145,7 +213,10 @@ const { chart } = toRefs(props)
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{ active: chart.customStyle.component.layout === 'horizontal' }"
|
||||
:class="{
|
||||
dark: themes === 'dark',
|
||||
active: chart.customStyle.component.layout === 'horizontal'
|
||||
}"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_title-left-align_outlined" />
|
||||
@ -190,6 +261,26 @@ const { chart } = toRefs(props)
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
:deep(.form-item-dark) {
|
||||
.ed-form-item__label {
|
||||
color: @dv-canvas-main-font-color !important;
|
||||
}
|
||||
|
||||
&.select-append {
|
||||
.ed-input-group__append {
|
||||
background-color: transparent;
|
||||
}
|
||||
.dv-dark {
|
||||
& > .ed-input__wrapper {
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
.ed-input-group__append .ed-select {
|
||||
margin: 0 -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
|
||||
@ -1516,15 +1516,6 @@ const drop = (ev: MouseEvent, type = 'xAxis') => {
|
||||
|
||||
<el-row style="height: calc(100vh - 110px); overflow-y: auto">
|
||||
<div class="query-style-tab" v-if="view.type === 'VQuery'">
|
||||
<div class="tab-container" style="width: 100%">
|
||||
<el-tabs
|
||||
class="tab-header"
|
||||
:class="{ dark: themes === 'dark' }"
|
||||
v-model="tabActiveVQuery"
|
||||
>
|
||||
<el-tab-pane name="style" :label="t('chart.chart_style')"> </el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<div style="padding-top: 1px">
|
||||
<VQueryChartStyle :chart="view" :themes="themes" />
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user