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

feat(图表): 隐藏图表标题的联动跳转等按钮, 鼠标 hover 显示 #8834

Browse Source
This commit is contained in:
wisonic-s 2024-05-29 18:43:22 +08:00
parent 7038bc4fad
commit 282aa823e8
1 changed files with 51 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
core/core-frontend/src/views/chart/components/views/index.vue
View File

@ -254,7 +254,7 @@ const initTitle = () => {
state.title_show = customStyle.text.show
state.title_class.fontSize = customStyle.text.fontSize * scale.value + 'px'
state.title_class.color = customStyle.text.color
state.title_class.textAlign = customStyle.text.hPosition
state.title_class.textAlign = customStyle.text.hPosition as CSSProperties['textAlign']
state.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
state.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
@ -654,6 +654,13 @@ const titleIconStyle = computed(() => {
color: canvasStyleData.value.component.seniorStyleSetting.linkageIconColor
}
})
const chartHover = ref(false)
const showActionIcons = computed(() => {
if (!chartHover.value) {
return false
}
return trackMenu.value.length > 0 || state.title_remark.show
})
</script>
<template>
@ -662,6 +669,8 @@ const titleIconStyle = computed(() => {
:class="{ 'report-load-finish': !loadingFlag }"
v-loading="loadingFlag"
element-loading-background="rgba(0,0,0,0)"
@mouseover="chartHover = true"
@mouseleave="chartHover = false"
>
<div
class="title-container"
@ -684,36 +693,38 @@ const titleIconStyle = computed(() => {
@change="onTitleChange"
/>
</template>
<div
class="icons-container"
:class="{ 'is-editing': titleEditStatus }"
:style="titleIconStyle"
v-if="trackMenu.length > 0 || state.title_remark.show"
>
<el-tooltip :effect="toolTip" placement="top" v-if="state.title_remark.show">
<template #content>
<div style="white-space: pre-wrap" v-html="state.title_remark.remark"></div>
</template>
<el-icon :size="iconSize" class="inner-icon">
<Icon name="icon_info_outlined" />
</el-icon>
</el-tooltip>
<el-tooltip :effect="toolTip" placement="top" content="已设置联动" v-if="hasLinkIcon">
<el-icon :size="iconSize" class="inner-icon">
<Icon name="icon_link-record_outlined" />
</el-icon>
</el-tooltip>
<el-tooltip :effect="toolTip" placement="top" content="已设置跳转" v-if="hasJumpIcon">
<el-icon :size="iconSize" class="inner-icon">
<Icon name="icon_viewinchat_outlined" />
</el-icon>
</el-tooltip>
<el-tooltip :effect="toolTip" placement="top" content="已设置下钻" v-if="hasDrillIcon">
<el-icon :size="iconSize" class="inner-icon">
<Icon name="icon_drilling_outlined" />
</el-icon>
</el-tooltip>
</div>
<transition name="fade">
<div
class="icons-container"
:class="{ 'is-editing': titleEditStatus }"
:style="titleIconStyle"
v-show="showActionIcons"
>
<el-tooltip :effect="toolTip" placement="top" v-if="state.title_remark.show">
<template #content>
<div style="white-space: pre-wrap" v-html="state.title_remark.remark"></div>
</template>
<el-icon :size="iconSize" class="inner-icon">
<Icon name="icon_info_outlined" />
</el-icon>
</el-tooltip>
<el-tooltip :effect="toolTip" placement="top" content="已设置联动" v-if="hasLinkIcon">
<el-icon :size="iconSize" class="inner-icon">
<Icon name="icon_link-record_outlined" />
</el-icon>
</el-tooltip>
<el-tooltip :effect="toolTip" placement="top" content="已设置跳转" v-if="hasJumpIcon">
<el-icon :size="iconSize" class="inner-icon">
<Icon name="icon_viewinchat_outlined" />
</el-icon>
</el-tooltip>
<el-tooltip :effect="toolTip" placement="top" content="已设置下钻" v-if="hasDrillIcon">
<el-icon :size="iconSize" class="inner-icon">
<Icon name="icon_drilling_outlined" />
</el-icon>
</el-tooltip>
</div>
</transition>
</div>
<!--这里去渲染不同图库的图表-->
<div v-if="chartAreaShow" style="flex: 1; overflow: hidden">
@ -816,4 +827,13 @@ const titleIconStyle = computed(() => {
}
}
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>