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:
ulleo 2024-01-22 17:11:15 +08:00
parent e105f811b6
commit 230384e2b1
5 changed files with 153 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
core/core-frontend/src/custom-component/indicator/DeIndicator.vue
View File

@ -194,6 +194,8 @@ const indicatorSuffixClass = ref<CSSProperties>({
'font-synthesis': 'weight style'
})
const showSuffix = ref<boolean>(DEFAULT_INDICATOR_STYLE.suffixEnable)
const suffixContent = ref('')
const indicatorNameShow = ref(false)
@ -293,6 +295,7 @@ const renderChart = async view => {
'font-synthesis': 'weight style'
}
showSuffix.value = customAttr.indicator.suffixEnable
suffixContent.value = defaultTo(customAttr.indicator.suffix, '')
}
if (customAttr.indicatorName && customAttr.indicatorName.show) {
@ -359,7 +362,7 @@ defineExpose({
<div :style="contentStyle">
<div>
<span :style="indicatorClass">{{ formattedResult }}</span>
<span :style="indicatorSuffixClass">{{ suffixContent }}</span>
<span :style="indicatorSuffixClass" v-if="showSuffix">{{ suffixContent }}</span>
</div>
<div v-if="indicatorNameShow">
<span :style="indicatorNameClass">{{ resultName }}</span>

1
core/core-frontend/src/models/chart/chart-style.d.ts vendored
View File

@ -44,6 +44,7 @@ declare interface ChartIndicatorStyle {
letterSpace: string
fontShadow: boolean
suffixEnable: boolean
suffix: string
suffixFontSize: string
suffixColor: string

1
core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue
View File

@ -149,6 +149,7 @@ watch(
<el-form-item class="form-item" :class="'form-item-' + themes" style="padding-left: 4px">
<el-select
size="small"
:effect="themes"
v-model="state.indicatorNameForm.letterSpace"
:placeholder="t('chart.quota_letter_space')"

26
core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue
View File

@ -360,12 +360,21 @@ watch(
<el-divider class="m-divider" :class="{ 'divider-dark': themes === 'dark' }" />
<el-form-item
class="form-item"
:class="'form-item-' + themes"
:label="t('chart.indicator_suffix')"
<el-form-item class="form-item" :class="'form-item-' + themes">
<el-checkbox
size="small"
:effect="themes"
v-model="state.indicatorValueForm.suffixEnable"
@change="changeTitleStyle('suffixEnable')"
>
{{ t('chart.indicator_suffix') }}
</el-checkbox>
</el-form-item>
<div style="padding-left: 22px">
<el-form-item class="form-item" :class="'form-item-' + themes">
<el-input
:disabled="!state.indicatorValueForm.suffixEnable"
v-model="state.indicatorValueForm.suffix"
:placeholder="t('chart.indicator_suffix_placeholder')"
maxlength="10"
@ -375,6 +384,7 @@ watch(
<el-form-item class="form-item" :class="'form-item-' + themes" :effect="themes">
<el-select
:disabled="!state.indicatorValueForm.suffixEnable"
:effect="themes"
v-model="state.indicatorValueForm.suffixFontFamily"
:placeholder="t('chart.font_family')"
@ -392,6 +402,7 @@ watch(
<div style="display: flex">
<el-form-item class="form-item" :class="'form-item-' + themes" style="padding-right: 4px">
<el-color-picker
:disabled="!state.indicatorValueForm.suffixEnable"
:effect="themes"
v-model="state.indicatorValueForm.suffixColor"
class="color-picker-style"
@ -403,6 +414,7 @@ watch(
<el-form-item class="form-item" :class="'form-item-' + themes" style="padding: 0 4px">
<el-tooltip content="字号" :effect="toolTip" placement="top">
<el-select
:disabled="!state.indicatorValueForm.suffixEnable"
style="width: 56px"
:effect="themes"
v-model="state.indicatorValueForm.suffixFontSize"
@ -422,6 +434,8 @@ watch(
<el-form-item class="form-item" :class="'form-item-' + themes" style="padding-left: 4px">
<el-select
size="small"
:disabled="!state.indicatorValueForm.suffixEnable"
:effect="themes"
v-model="state.indicatorValueForm.suffixLetterSpace"
:placeholder="t('chart.quota_letter_space')"
@ -445,6 +459,7 @@ watch(
<el-space>
<el-form-item class="form-item" :class="'form-item-' + themes">
<el-checkbox
:disabled="!state.indicatorValueForm.suffixEnable"
:effect="themes"
class="icon-checkbox"
v-model="state.indicatorValueForm.suffixIsBolder"
@ -471,6 +486,7 @@ watch(
<el-form-item class="form-item" :class="'form-item-' + themes">
<el-checkbox
:disabled="!state.indicatorValueForm.suffixEnable"
:effect="themes"
class="icon-checkbox"
v-model="state.indicatorValueForm.suffixIsItalic"
@ -498,6 +514,7 @@ watch(
<el-form-item class="form-item" :class="'form-item-' + themes">
<el-checkbox
:disabled="!state.indicatorValueForm.suffixEnable"
size="small"
:effect="themes"
v-model="state.indicatorValueForm.suffixFontShadow"
@ -506,6 +523,7 @@ watch(
{{ t('chart.font_shadow') }}
</el-checkbox>
</el-form-item>
</div>
</el-form>
</div>
</template>

1
core/core-frontend/src/views/chart/components/editor/util/chart.ts
View File

@ -359,6 +359,7 @@ export const DEFAULT_INDICATOR_STYLE: ChartIndicatorStyle = {
letterSpace: '0',
fontShadow: false,
suffixEnable: true,
suffix: '',
suffixFontSize: '14',
suffixColor: '#5470C6',