github/dataease
github/dataease
3
0
Fork 1
mirror of https://github.com/dataease/dataease.git synced 2025-02-24 11:32:57 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

refactor(图表): 图表拖拽字段样式优化

Browse Source
This commit is contained in:
wisonic 2025-01-20 18:36:27 +08:00 committed by wisonic-s
parent cee117e0f2
commit a893bcdb52
3 changed files with 72 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue
View File

@ -279,14 +279,18 @@ onMounted(() => {
</tbody>
</table>
</template>
<span class="item-span-style">
<span
class="item-span-style"
:class="{
'hidden-status': showHideIcon,
'sort-status': showSort() && item.sort !== 'none'
}"
>
<span class="item-name">{{ item.chartShowName ? item.chartShowName : item.name }}</span>
</span>
</el-tooltip>
<el-icon style="margin-left: 8px">
<Icon
><icon_invisible_outlined v-show="showHideIcon" class="svg-icon inner-class"
/></Icon>
<el-icon v-if="showHideIcon" style="margin-left: 4px">
<Icon><icon_invisible_outlined class="svg-icon inner-class" /></Icon>
</el-icon>
<el-tooltip :effect="toolTip" placement="top">
<template #content>
@ -691,6 +695,7 @@ onMounted(() => {
position: relative;
width: 100%;
display: block;
overflow: hidden;
.ed-dropdown {
display: flex;
}
@ -703,7 +708,7 @@ onMounted(() => {
.item-axis {
padding: 1px 8px;
margin: 0 3px 2px 3px;
margin-bottom: 3px;
height: 28px;
line-height: 28px;
display: flex;
@ -767,10 +772,18 @@ span {
.item-span-style {
display: flex;
max-width: 180px;
max-width: 170px;
color: #1f2329;
margin-left: 4px;
&.hidden-status,
&.sort-status {
max-width: 150px;
}
&.hidden-status[class*='sort-status'] {
max-width: 135px !important;
}
.item-name {
flex: 1;
white-space: nowrap;
@ -821,7 +834,7 @@ span {
.remove-icon {
position: absolute;
top: 7px;
right: 26px;
right: 24px;
cursor: pointer;
.inner-class {
font-size: 14px;
@ -851,7 +864,14 @@ span {
}
.father:hover .item-span-style {
max-width: 150px;
max-width: 130px;
&.hidden-status,
&.sort-status {
max-width: 120px;
}
&.hidden-status[class*='sort-status'] {
max-width: 100px !important;
}
}
</style>
<style lang="less">

21
core/core-frontend/src/views/chart/components/editor/drag-item/DrillItem.vue
View File

@ -182,7 +182,10 @@ onMounted(() => {
</tbody>
</table>
</template>
<span class="item-span-style">
<span
class="item-span-style"
:class="{ 'sort-status': index !== 0 && item.sort !== 'none' }"
>
<span class="item-name">{{ item.chartShowName ? item.chartShowName : item.name }}</span>
</span>
</el-tooltip>
@ -329,6 +332,7 @@ onMounted(() => {
position: relative;
width: 100%;
display: block;
overflow: hidden;
.ed-dropdown {
display: flex;
}
@ -341,7 +345,7 @@ onMounted(() => {
.item-axis {
padding: 1px 8px;
margin: 0 3px 2px 3px;
margin-bottom: 3px;
height: 28px;
line-height: 28px;
display: flex;
@ -405,10 +409,14 @@ span {
.item-span-style {
display: flex;
max-width: 180px;
max-width: 170px;
color: #1f2329;
margin-left: 4px;
&.sort-status {
max-width: 150px;
}
.item-name {
flex: 1;
white-space: nowrap;
@ -459,7 +467,7 @@ span {
.remove-icon {
position: absolute;
top: 7px;
right: 26px;
right: 24px;
cursor: pointer;
.inner-class {
font-size: 14px;
@ -489,7 +497,10 @@ span {
}
.father:hover .item-span-style {
max-width: 150px;
max-width: 140px;
&.sort-status {
max-width: 120px;
}
}
</style>
<style lang="less">

35
core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue
View File

@ -369,7 +369,13 @@ onMounted(() => {
</tbody>
</table>
</template>
<span class="item-span-style">
<span
class="item-span-style"
:class="{
'hidden-status': showHideIcon,
'sort-status': showSort && item.sort !== 'none'
}"
>
<span class="item-name">{{ item.chartShowName ? item.chartShowName : item.name }}</span>
<span v-if="item.summary !== ''" class="item-right-summary">
({{ t('chart.' + item.summary) }})
@ -392,10 +398,9 @@ onMounted(() => {
-{{ t('chart.' + item.compareCalc.type) }}
</span>
</span>
<el-icon style="margin-left: 8px">
<el-icon v-if="showHideIcon" style="margin-left: 4px">
<Icon>
<icon_invisible_outlined
v-show="showHideIcon"
:class="`field-icon-${fieldType[[2, 3].includes(item.deType) ? 2 : 0]}`"
class="svg-icon inner-class"
/>
@ -827,7 +832,7 @@ onMounted(() => {
position: relative;
width: 100%;
display: block;
overflow: hidden;
.ed-dropdown {
display: flex;
}
@ -841,7 +846,7 @@ onMounted(() => {
.item-axis {
padding: 1px 8px;
margin: 0 3px 2px 3px;
margin-bottom: 3px;
height: 28px;
line-height: 28px;
display: flex;
@ -905,7 +910,7 @@ span {
.item-span-style {
display: flex;
max-width: 180px;
max-width: 170px;
color: #1f2329;
margin-left: 4px;
@ -920,6 +925,13 @@ span {
flex-shrink: 0;
margin-left: 4px;
}
&.hidden-status,
&.sort-status {
max-width: 150px;
}
&.hidden-status[class*='sort-status'] {
max-width: 135px !important;
}
}
.editor-dark {
@ -965,7 +977,7 @@ span {
.remove-icon {
position: absolute;
top: 7px;
right: 26px;
right: 24px;
cursor: pointer;
.inner-class {
@ -996,7 +1008,14 @@ span {
}
.father:hover .item-span-style {
max-width: 150px;
max-width: 130px;
&.hidden-status,
&.sort-status {
max-width: 120px;
}
&.hidden-status[class*='sort-status'] {
max-width: 100px !important;
}
}
</style>
<style lang="less">