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

refactor(图表): 图表条件样式优化

Browse Source
This commit is contained in:
wangjiahao 2024-09-30 16:51:41 +08:00
parent 7f116c0271
commit 059c1ef9ed
4 changed files with 142 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
core/core-frontend/src/custom-component/picture-group/PictureItem.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<div class="img-option">
<div class="img-area" :class="{ 'selected-active': active }">
<img draggable="false" :src="imgUrlTrans(urlInfo.url)" />
</div>
<span :title="urlInfo.name" class="name-area">{{ urlInfo.name }}</span>
</div>
</template>
<script setup lang="ts">
import { toRefs } from 'vue'
import { imgUrlTrans } from '@/utils/imgUtils'
const props = withDefaults(
defineProps<{
urlInfo: any
active: boolean
}>(),
{}
)
const { urlInfo, active } = toRefs(props)
</script>
<style scoped lang="less">
.img-option {
margin: 0 5px !important;
width: 88px;
height: 88px;
display: flex;
flex-direction: column;
align-content: center;
.selected-active {
border: 1px solid var(--ed-color-primary-99, rgba(51, 112, 255, 0.6));
}
.img-area {
&:hover {
border: 1px dashed var(--ed-color-primary-99, rgba(51, 112, 255, 0.6));
}
border-radius: 4px;
background-color: #f5f6f7;
width: 80px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
img {
width: 100%;
height: 100%;
}
}
.name-area {
margin: 6px 4px;
width: 80px;
line-height: 20px;
font-size: 12px !important;
font-weight: 400;
text-align: center;
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 隐藏超出的内容 */
text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
color: rgba(100, 106, 115, 1);
}
}
</style>

31
core/core-frontend/src/custom-component/picture-group/PictureOptionPrefix.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div class="img-option-prefix">
<img draggable="false" :src="imgUrlTrans(url)" />
</div>
</template>
<script setup lang="ts">
import { imgUrlTrans } from '@/utils/imgUtils'
withDefaults(
defineProps<{
url: any
}>(),
{}
)
</script>
<style scoped lang="less">
.img-option-prefix {
width: 20px;
height: 20px;
display: flex;
flex-direction: column;
align-content: center;
img {
border-radius: 4px;
width: 100%;
height: 100%;
}
}
</style>

6
core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue
View File

@ -907,7 +907,7 @@ span {
align-items: center;
flex-wrap: nowrap;
:nth-child(1) {
width: 48px !important;
width: 48px;
}
:nth-child(2) {
width: 40px !important;
@ -985,7 +985,7 @@ span {
border-radius: 2px;
}
.pic-group-img {
width: 100%;
height: 100%;
width: 100% !important;
height: 100% !important;
}
</style>

45
core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/PictureGroupThresholdEdit.vue
View File

@ -7,6 +7,8 @@ import { useI18n } from '@/hooks/web/useI18n'
import { COLOR_PANEL } from '../../../util/chart'
import { fieldType } from '@/utils/attr'
import { iconFieldMap } from '@/components/icon-group/field-list'
import PictureItem from '@/custom-component/picture-group/PictureItem.vue'
import PictureOptionPrefix from '@/custom-component/picture-group/PictureOptionPrefix.vue'
const { t } = useI18n()
@ -429,13 +431,25 @@ init()
>
<div class="color-title">展示图片</div>
<el-form-item class="form-item">
<el-select v-model="item.url" @change="changeThreshold">
<el-select
v-model="item.url"
@change="changeThreshold"
popper-class="picture-group-select"
>
<template v-if="item.url" #prefix>
<picture-option-prefix :url="item.url"></picture-option-prefix>
</template>
<el-option
v-for="urlInfo in element.propValue.urlList"
:key="urlInfo.url"
:label="urlInfo.name"
:value="urlInfo.url"
/>
>
<picture-item
:active="item.url === urlInfo.url"
:url-info="urlInfo"
></picture-item>
</el-option>
</el-select>
</el-form-item>
</div>
@ -597,3 +611,30 @@ span {
padding: 0 11px;
}
</style>
<style lang="less">
.picture-group-select {
min-width: 50px !important;
width: 304px;
.ed-scrollbar__view {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
}
.ed-select-dropdown__item {
height: 100px !important;
text-align: center;
padding: 0px 5px;
}
.ed-select-dropdown__item.selected::after {
display: none;
}
.ed-select-dropdown__item.hover {
background-color: rgba(0, 0, 0, 0) !important;
}
.ed-select-dropdown__item.selected {
background-color: rgba(0, 0, 0, 0) !important;
}
}
</style>