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

feat(图表): 大屏可以切换图表类型 #9601

Browse Source
This commit is contained in:
wisonic 2024-07-23 17:28:07 +08:00
parent b55d41c837
commit def253dd26
1 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1670,10 +1670,7 @@ const deleteChartFieldItem = id => {
<el-tab-pane name="data" :label="t('chart.chart_data')" class="padding-tab"> <el-tab-pane name="data" :label="t('chart.chart_data')" class="padding-tab">
<el-container direction="vertical"> <el-container direction="vertical">
<el-scrollbar class="has-footer drag_main_area attr-style theme-border-class"> <el-scrollbar class="has-footer drag_main_area attr-style theme-border-class">
<el-row <el-row v-if="view.type !== 'rich-text'" class="drag-data padding-lr">
v-if="props.themes !== 'dark' && view.type !== 'rich-text'"
class="drag-data padding-lr"
>
<span class="data-area-label">{{ t('chart.switch_chart') }}</span> <span class="data-area-label">{{ t('chart.switch_chart') }}</span>
<el-popover <el-popover
:offset="4" :offset="4"
@ -1690,6 +1687,7 @@ const deleteChartFieldItem = id => {
popper-class="chart-type-hide-options" popper-class="chart-type-hide-options"
class="chart-type-select" class="chart-type-select"
:suffix-icon="arrowIcon()" :suffix-icon="arrowIcon()"
:effect="themes"
size="small" size="small"
> >
<template #prefix> <template #prefix>
@ -2902,6 +2900,7 @@ const deleteChartFieldItem = id => {
class="padding-lr field-height right-dimension" class="padding-lr field-height right-dimension"
:class="{ dark: themes === 'dark' }" :class="{ dark: themes === 'dark' }"
> >
<div class="divider"></div>
<label>{{ t('chart.quota') }}</label> <label>{{ t('chart.quota') }}</label>
<el-scrollbar class="drag-list"> <el-scrollbar class="drag-list">
<div <div
@ -3331,8 +3330,8 @@ const deleteChartFieldItem = id => {
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
} }
:deep(.field-height) { :deep(.divider) {
border-top: 1px solid @side-outline-border-color-light !important; background-color: @side-outline-border-color-light !important;
} }
:deep(.item-span-style) { :deep(.item-span-style) {
color: @canvas-main-font-color-light!important; color: @canvas-main-font-color-light!important;
@ -3481,7 +3480,7 @@ span {
display: flex; display: flex;
transition: 0.5s; transition: 0.5s;
.padding-lr { .padding-lr {
padding: 0 10px; padding: 0 16px;
&.no-top-border { &.no-top-border {
border-top: none !important; border-top: none !important;
@ -3637,11 +3636,11 @@ span {
&.is-hovering::after, &.is-hovering::after,
&:hover::after { &:hover::after {
width: 100%; width: calc(100% - 32px);
height: 1px; height: 1px;
content: ''; content: '';
position: absolute; position: absolute;
left: 0px; left: 16px;
top: 0; top: 0;
background: var(--ed-color-primary, #3370ff); background: var(--ed-color-primary, #3370ff);
} }
@ -3653,8 +3652,11 @@ span {
} }
} }
&:nth-child(n + 2) { .divider {
border-top: 1px solid rgba(255, 255, 255, 0.15); width: 100%;
height: 1px;
padding: 0 16px;
background-color: rgba(255, 255, 255, 0.15);
} }
} }
@ -4296,7 +4298,7 @@ span {
.chart-type-select { .chart-type-select {
width: 100%; width: 100%;
margin-top: 8px; margin-top: 8px;
:deep(.ed-select__prefix--light) { :deep(.ed-input__prefix-inner > div) {
padding: 0; padding: 0;
margin: 0; margin: 0;
border: none; border: none;