forked from github/dataease
refactor(数据大屏): 时间组件样式设置区域调整
This commit is contained in:
wangjiahao
parent
5f6a0bde3c
commit
1f1635c434
@ -8,6 +8,7 @@ import BackgroundOverallCommon from '@/components/visualization/component-backgr
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import elementResizeDetectorMaker from 'element-resize-detector'
|
||||
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
||||
import CommonStyleSet from '@/custom-component/common/CommonStyleSet.vue'
|
||||
const snapshotStore = snapshotStoreWithOut()
|
||||
|
||||
const { t } = useI18n()
|
||||
@ -136,126 +137,13 @@ const stopEvent = e => {
|
||||
</el-collapse-item>
|
||||
<slot></slot>
|
||||
<el-collapse-item
|
||||
v-if="showStyle"
|
||||
v-if="element && element.style"
|
||||
:effect="themes"
|
||||
title="样式"
|
||||
name="style"
|
||||
class="common-style-area"
|
||||
>
|
||||
<el-form label-position="top">
|
||||
<el-row :gutter="8">
|
||||
<el-col
|
||||
:span="colSpan"
|
||||
v-for="({ key, label, min, max, step }, index) in styleKeys"
|
||||
:key="index"
|
||||
>
|
||||
<el-form-item class="form-item" :class="'form-item-' + themes" :label="label">
|
||||
<el-color-picker
|
||||
v-if="isIncludesColor(key)"
|
||||
v-model="element.style[key]"
|
||||
:trigger-width="colorPickerWidth"
|
||||
:themes="themes"
|
||||
size="small"
|
||||
show-alpha
|
||||
is-custom
|
||||
@change="onStyleAttrChange($event, key)"
|
||||
/>
|
||||
<el-radio-group
|
||||
:effect="themes"
|
||||
style="width: 100%"
|
||||
class="icon-radio-group"
|
||||
v-else-if="horizontalPosition.includes(key)"
|
||||
v-model="element.style[key]"
|
||||
@change="onStyleAttrChange($event, key)"
|
||||
>
|
||||
<el-radio :effect="themes" label="left">
|
||||
<el-tooltip effect="dark" placement="top">
|
||||
<template #content>
|
||||
{{ t('chart.text_pos_left') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{
|
||||
dark: themes === 'dark',
|
||||
active: element.style[key] === 'left'
|
||||
}"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="filter-h-left" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</el-radio>
|
||||
<el-radio :effect="themes" label="center">
|
||||
<el-tooltip effect="dark" placement="top">
|
||||
<template #content>
|
||||
{{ t('chart.text_pos_center') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{
|
||||
dark: themes === 'dark',
|
||||
active: element.style[key] === 'center'
|
||||
}"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="filter-h-center" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</el-radio>
|
||||
<el-radio :effect="themes" label="right">
|
||||
<el-tooltip effect="dark" placement="top">
|
||||
<template #content>
|
||||
{{ t('chart.text_pos_right') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{
|
||||
dark: themes === 'dark',
|
||||
active: element.style[key] === 'right'
|
||||
}"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="filter-h-right" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
<el-select
|
||||
v-else-if="selectKey.includes(key)"
|
||||
style="width: 100%"
|
||||
size="small"
|
||||
:effect="themes"
|
||||
v-model="element.style[key]"
|
||||
@change="onStyleAttrChange($event, key)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in optionMap[key]"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-input-number
|
||||
@keydown="stopEvent"
|
||||
@keyup="stopEvent"
|
||||
v-else
|
||||
size="middle"
|
||||
style="width: 100%"
|
||||
controls-position="right"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:step="step"
|
||||
:effect="themes"
|
||||
v-model="element.style[key]"
|
||||
@change="onStyleAttrChange($event, key)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<common-style-set :element="element"></common-style-set>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
|
||||
@ -1,27 +1,35 @@
|
||||
<template>
|
||||
<el-row class="custom-row">
|
||||
<el-row style="margin-top: 8px">
|
||||
<el-row style="margin: 8px 0px 24px 0px">
|
||||
<el-space wrap>
|
||||
<el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
|
||||
<el-form-item
|
||||
v-if="styleForm.color"
|
||||
class="form-item no-margin-bottom"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-color-picker
|
||||
:title="t('chart.text_color')"
|
||||
v-model="titleForm.color"
|
||||
v-model="styleForm.color"
|
||||
class="color-picker-style"
|
||||
is-custom
|
||||
:predefine="state.predefineColors"
|
||||
@change="changeTitleStyle('color')"
|
||||
@change="changeStyle"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
|
||||
<el-form-item
|
||||
v-if="styleForm.fontSize"
|
||||
class="form-item no-margin-bottom"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-select
|
||||
style="width: 56px"
|
||||
:effect="themes"
|
||||
:title="t('chart.text_fontsize')"
|
||||
v-model="titleForm.fontSize"
|
||||
v-model="styleMounted.fontSize"
|
||||
:placeholder="'大小'"
|
||||
size="small"
|
||||
@change="changeTitleStyle('fontSize')"
|
||||
@change="sizeChange('fontSize')"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in fontSizeList"
|
||||
@ -32,13 +40,36 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-tooltip effect="dark" placement="top">
|
||||
<el-form-item
|
||||
v-if="styleForm.opacity"
|
||||
class="form-item no-margin-bottom"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-select
|
||||
style="width: 56px"
|
||||
:effect="themes"
|
||||
title="透明度"
|
||||
v-model="styleForm.opacity"
|
||||
placeholder="透明度"
|
||||
size="small"
|
||||
@change="sizeChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in opacitySizeList"
|
||||
:key="option"
|
||||
:label="option"
|
||||
:value="option"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-tooltip v-if="styleForm.fontWeight !== undefined" effect="dark" placement="top">
|
||||
<template #content>
|
||||
{{ t('chart.bolder') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{ dark: themes === 'dark', active: titleForm.isBolder }"
|
||||
:class="{ dark: themes === 'dark', active: styleForm.fontWeight === 'bold' }"
|
||||
@click="checkBold"
|
||||
>
|
||||
<el-icon>
|
||||
@ -47,13 +78,13 @@
|
||||
</div>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip effect="dark" placement="top">
|
||||
<el-tooltip v-if="styleForm.fontStyle !== undefined" effect="dark" placement="top">
|
||||
<template #content>
|
||||
{{ t('chart.italic') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{ dark: themes === 'dark', active: titleForm.isItalic }"
|
||||
:class="{ dark: themes === 'dark', active: styleForm.fontStyle === 'italic' }"
|
||||
@click="checkItalic"
|
||||
>
|
||||
<el-icon>
|
||||
@ -64,61 +95,69 @@
|
||||
|
||||
<div class="m-divider"></div>
|
||||
|
||||
<el-tooltip effect="dark" placement="top">
|
||||
<template #content>
|
||||
{{ t('chart.text_pos_left') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{ dark: themes === 'dark', active: titleForm.hPosition === 'left' }"
|
||||
@click="setPosition('left')"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_left-alignment_outlined" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" placement="top">
|
||||
<template #content>
|
||||
{{ t('chart.text_pos_center') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{ dark: themes === 'dark', active: titleForm.hPosition === 'center' }"
|
||||
@click="setPosition('center')"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_center-alignment_outlined" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" placement="top">
|
||||
<template #content>
|
||||
{{ t('chart.text_pos_right') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{ dark: themes === 'dark', active: titleForm.hPosition === 'right' }"
|
||||
@click="setPosition('right')"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_right-alignment_outlined" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<template v-if="styleForm.textAlign">
|
||||
<el-tooltip effect="dark" placement="top">
|
||||
<template #content>
|
||||
{{ t('chart.text_pos_left') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{ dark: themes === 'dark', active: styleForm.textAlign === 'left' }"
|
||||
@click="setPosition('left')"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_left-alignment_outlined" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" placement="top">
|
||||
<template #content>
|
||||
{{ t('chart.text_pos_center') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{ dark: themes === 'dark', active: styleForm.textAlign === 'center' }"
|
||||
@click="setPosition('center')"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_center-alignment_outlined" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" placement="top">
|
||||
<template #content>
|
||||
{{ t('chart.text_pos_right') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{ dark: themes === 'dark', active: styleForm.textAlign === 'right' }"
|
||||
@click="setPosition('right')"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_right-alignment_outlined" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-space>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, reactive, ref, toRefs } from 'vue'
|
||||
import { computed, reactive, ref, toRefs, watch } from 'vue'
|
||||
import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
|
||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import Icon from '@/components/icon-custom/src/Icon.vue'
|
||||
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
||||
import { storeToRefs } from 'pinia'
|
||||
const { t } = useI18n()
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
const snapshotStore = snapshotStoreWithOut()
|
||||
|
||||
const { curComponent, canvasStyleData } = storeToRefs(dvMainStore)
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
themes?: EditorTheme
|
||||
@ -131,8 +170,18 @@ const props = withDefaults(
|
||||
|
||||
const { themes, element } = toRefs(props)
|
||||
const emits = defineEmits(['onTextChange'])
|
||||
const styleMounted = ref({
|
||||
opacity: 1,
|
||||
fontSize: 22,
|
||||
fontWeight: 'normal',
|
||||
fontStyle: 'normal',
|
||||
textAlign: 'center',
|
||||
color: '#000000'
|
||||
})
|
||||
|
||||
const titleForm = computed<any>(() => dvMainStore.canvasStyleData.component.chartTitle)
|
||||
const opacitySizeList = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
|
||||
|
||||
const styleForm = computed<any>(() => element.value.style)
|
||||
const state = reactive({
|
||||
fontSize: [],
|
||||
isSetting: false,
|
||||
@ -149,24 +198,60 @@ const fontSizeList = computed(() => {
|
||||
return arr
|
||||
})
|
||||
|
||||
const changeTitleStyle = modifyName => {
|
||||
titleForm.value['modifyName'] = modifyName
|
||||
emits('onTextChange', titleForm.value)
|
||||
const styleInit = () => {
|
||||
if (curComponent.value) {
|
||||
Object.keys(styleMounted.value).forEach(key => {
|
||||
styleMounted.value[key] = Math.round(
|
||||
(curComponent.value.style[key] * 100) / canvasStyleData.value.scale
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function checkBold() {
|
||||
titleForm.value.isBolder = !titleForm.value.isBolder
|
||||
changeTitleStyle('isBolder')
|
||||
const sizeChange = key => {
|
||||
curComponent.value.style[key] = Math.round(
|
||||
(styleMounted.value[key] * canvasStyleData.value.scale) / 100
|
||||
)
|
||||
changeStyle()
|
||||
}
|
||||
function checkItalic() {
|
||||
titleForm.value.isItalic = !titleForm.value.isItalic
|
||||
changeTitleStyle('isItalic')
|
||||
|
||||
const changeStyle = () => {
|
||||
snapshotStore.recordSnapshotCache()
|
||||
}
|
||||
|
||||
const checkBold = () => {
|
||||
if (styleForm.value.fontWeight === 'normal') {
|
||||
styleForm.value.fontWeight = 'bold'
|
||||
} else {
|
||||
styleForm.value.fontWeight = 'normal'
|
||||
}
|
||||
changeStyle()
|
||||
}
|
||||
|
||||
const checkItalic = () => {
|
||||
if (styleForm.value.fontStyle === 'normal') {
|
||||
styleForm.value.fontStyle = 'italic'
|
||||
} else {
|
||||
styleForm.value.fontStyle = 'normal'
|
||||
}
|
||||
changeStyle()
|
||||
}
|
||||
|
||||
function setPosition(p: 'left' | 'center' | 'right') {
|
||||
titleForm.value.hPosition = p
|
||||
changeTitleStyle('hPosition')
|
||||
styleForm.value.textAlign = p
|
||||
changeStyle()
|
||||
}
|
||||
|
||||
watch(
|
||||
() => curComponent.value,
|
||||
() => {
|
||||
styleInit()
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
@ -149,7 +149,8 @@ const list = [
|
||||
width: 300,
|
||||
height: 100,
|
||||
fontSize: 22,
|
||||
fontWeight: 400,
|
||||
fontWeight: 'normal',
|
||||
fontStyle: 'normal',
|
||||
textAlign: 'center',
|
||||
color: '#000000'
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user