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 2022-11-25 18:37:33 +08:00
parent 2c36204c60
commit 738c87b819
5 changed files with 52 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/canvas/components/editor/SettingMenu.vue
View File

@ -5,7 +5,7 @@
trigger="click" trigger="click"
@mouseup="handleMouseUp" @mouseup="handleMouseUp"
> >
<slot name="icon" /> <slot name="icon"/>
<el-dropdown-menu v-if="curComponent"> <el-dropdown-menu v-if="curComponent">
<el-dropdown-item <el-dropdown-item
v-if="editFilter.includes(curComponent.type)" v-if="editFilter.includes(curComponent.type)"
@ -33,7 +33,7 @@
<el-dropdown-item v-if="!curComponent.auxiliaryMatrix"> <el-dropdown-item v-if="!curComponent.auxiliaryMatrix">
<el-dropdown placement="right-start"> <el-dropdown placement="right-start">
<span class="el-icon-copy-document"> <span class="el-icon-copy-document">
{{ $t('panel.level') }} <i class="el-icon-arrow-right el-icon--right" /> {{ $t('panel.level') }} <i class="el-icon-arrow-right el-icon--right"/>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item <el-dropdown-item
@ -87,14 +87,14 @@
v-if="curComponent.type != 'custom-button'" v-if="curComponent.type != 'custom-button'"
@click.native="hyperlinksSet" @click.native="hyperlinksSet"
> >
<i class="icon iconfont icon-font icon-chaolianjie1" /> <i class="icon iconfont icon-font icon-chaolianjie1"/>
{{ $t('panel.hyperlinks') }} {{ $t('panel.hyperlinks') }}
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item <el-dropdown-item
v-if="curComponent.type !== 'user-view' && !curComponent.auxiliaryMatrix" v-if="curComponent.type !== 'view' && !curComponent.auxiliaryMatrix"
@click.native="positionAdjust" @click.native="positionAdjust"
> >
<i class="el-icon-map-location" /> <i class="el-icon-map-location"/>
{{ $t('panel.position_adjust') }} {{ $t('panel.position_adjust') }}
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>

1
frontend/src/lang/en.js
View File

@ -1883,6 +1883,7 @@ export default {
back_parent: 'Back to previous' back_parent: 'Back to previous'
}, },
panel: { panel: {
position_adjust_component: 'Position adjust',
active_font_size: 'Active font size', active_font_size: 'Active font size',
carousel: 'Carousel', carousel: 'Carousel',
switch_time: 'Switch time', switch_time: 'Switch time',

1
frontend/src/lang/tw.js
View File

@ -1883,6 +1883,7 @@ export default {
back_parent: '返回上一級' back_parent: '返回上一級'
}, },
panel: { panel: {
position_adjust_component: '位置調整',
active_font_size: '激活字體大小', active_font_size: '激活字體大小',
carousel: '輪播', carousel: '輪播',
switch_time: '切換時間', switch_time: '切換時間',

1
frontend/src/lang/zh.js
View File

@ -1883,6 +1883,7 @@ export default {
back_parent: '返回上一级' back_parent: '返回上一级'
}, },
panel: { panel: {
position_adjust_component: '位置调整',
active_font_size: '激活字体大小', active_font_size: '激活字体大小',
carousel: '轮播', carousel: '轮播',
switch_time: '切换时间', switch_time: '切换时间',

74
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -192,7 +192,7 @@
@command="chartFieldEdit" @command="chartFieldEdit"
> >
<span class="el-dropdown-link"> <span class="el-dropdown-link">
<i class="el-icon-s-tools" /> <i class="el-icon-s-tools"/>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item <el-dropdown-item
@ -267,7 +267,7 @@
@command="chartFieldEdit" @command="chartFieldEdit"
> >
<span class="el-dropdown-link"> <span class="el-dropdown-link">
<i class="el-icon-s-tools" /> <i class="el-icon-s-tools"/>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item <el-dropdown-item
@ -362,7 +362,7 @@
style="padding: 6px;" style="padding: 6px;"
> >
{{ $t('chart.change_chart_type') }} {{ $t('chart.change_chart_type') }}
<i class="el-icon-caret-bottom" /> <i class="el-icon-caret-bottom"/>
</el-button> </el-button>
</el-popover> </el-popover>
</span> </span>
@ -490,8 +490,8 @@
> >
<span class="data-area-label"> <span class="data-area-label">
<span v-if="view.type && view.type.includes('table')">{{ <span v-if="view.type && view.type.includes('table')">{{
$t('chart.drag_block_table_data_column') $t('chart.drag_block_table_data_column')
}}</span> }}</span>
<span <span
v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall' || view.type === 'area')" v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'chart-mix' || view.type === 'waterfall' || view.type === 'area')"
>{{ $t('chart.drag_block_type_axis') }}</span> >{{ $t('chart.drag_block_type_axis') }}</span>
@ -499,18 +499,18 @@
v-else-if="view.type && view.type.includes('pie')" v-else-if="view.type && view.type.includes('pie')"
>{{ $t('chart.drag_block_pie_label') }}</span> >{{ $t('chart.drag_block_pie_label') }}</span>
<span v-else-if="view.type && view.type.includes('funnel')">{{ <span v-else-if="view.type && view.type.includes('funnel')">{{
$t('chart.drag_block_funnel_split') $t('chart.drag_block_funnel_split')
}}</span> }}</span>
<span v-else-if="view.type && view.type.includes('radar')">{{ <span v-else-if="view.type && view.type.includes('radar')">{{
$t('chart.drag_block_radar_label') $t('chart.drag_block_radar_label')
}}</span> }}</span>
<span v-else-if="view.type && view.type === 'map'">{{ $t('chart.area') }}</span> <span v-else-if="view.type && view.type === 'map'">{{ $t('chart.area') }}</span>
<span v-else-if="view.type && view.type.includes('treemap')">{{ <span v-else-if="view.type && view.type.includes('treemap')">{{
$t('chart.drag_block_treemap_label') $t('chart.drag_block_treemap_label')
}}</span> }}</span>
<span v-else-if="view.type && view.type === 'word-cloud'">{{ <span v-else-if="view.type && view.type === 'word-cloud'">{{
$t('chart.drag_block_word_cloud_label') $t('chart.drag_block_word_cloud_label')
}}</span> }}</span>
<span v-else-if="view.type && view.type === 'label'">{{ $t('chart.drag_block_label') }}</span> <span v-else-if="view.type && view.type === 'label'">{{ $t('chart.drag_block_label') }}</span>
<span v-show="view.type !== 'richTextView'"> / </span> <span v-show="view.type !== 'richTextView'"> / </span>
<span v-if="view.type && view.type !== 'table-info'">{{ $t('chart.dimension') }}</span> <span v-if="view.type && view.type !== 'table-info'">{{ $t('chart.dimension') }}</span>
@ -633,8 +633,8 @@
> >
<span class="data-area-label"> <span class="data-area-label">
<span v-if="view.type && view.type.includes('table')">{{ <span v-if="view.type && view.type.includes('table')">{{
$t('chart.drag_block_table_data_column') $t('chart.drag_block_table_data_column')
}}</span> }}</span>
<span <span
v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'waterfall' || view.type === 'area')" v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'waterfall' || view.type === 'area')"
>{{ $t('chart.drag_block_value_axis') }}</span> >{{ $t('chart.drag_block_value_axis') }}</span>
@ -642,30 +642,30 @@
v-else-if="view.type && view.type.includes('pie')" v-else-if="view.type && view.type.includes('pie')"
>{{ $t('chart.drag_block_pie_angel') }}</span> >{{ $t('chart.drag_block_pie_angel') }}</span>
<span v-else-if="view.type && view.type.includes('funnel')">{{ <span v-else-if="view.type && view.type.includes('funnel')">{{
$t('chart.drag_block_funnel_width') $t('chart.drag_block_funnel_width')
}}</span> }}</span>
<span v-else-if="view.type && view.type.includes('radar')">{{ <span v-else-if="view.type && view.type.includes('radar')">{{
$t('chart.drag_block_radar_length') $t('chart.drag_block_radar_length')
}}</span> }}</span>
<span v-else-if="view.type && view.type.includes('gauge')">{{ <span v-else-if="view.type && view.type.includes('gauge')">{{
$t('chart.drag_block_gauge_angel') $t('chart.drag_block_gauge_angel')
}}</span> }}</span>
<span <span
v-else-if="view.type && view.type.includes('text')" v-else-if="view.type && view.type.includes('text')"
>{{ $t('chart.drag_block_label_value') }}</span> >{{ $t('chart.drag_block_label_value') }}</span>
<span v-else-if="view.type && view.type === 'map'">{{ $t('chart.chart_data') }}</span> <span v-else-if="view.type && view.type === 'map'">{{ $t('chart.chart_data') }}</span>
<span v-else-if="view.type && view.type.includes('tree')">{{ <span v-else-if="view.type && view.type.includes('tree')">{{
$t('chart.drag_block_treemap_size') $t('chart.drag_block_treemap_size')
}}</span> }}</span>
<span v-else-if="view.type && view.type === 'chart-mix'">{{ <span v-else-if="view.type && view.type === 'chart-mix'">{{
$t('chart.drag_block_value_axis_main') $t('chart.drag_block_value_axis_main')
}}</span> }}</span>
<span <span
v-else-if="view.type && view.type === 'liquid'" v-else-if="view.type && view.type === 'liquid'"
>{{ $t('chart.drag_block_progress') }}</span> >{{ $t('chart.drag_block_progress') }}</span>
<span v-else-if="view.type && view.type === 'word-cloud'">{{ <span v-else-if="view.type && view.type === 'word-cloud'">{{
$t('chart.drag_block_word_cloud_size') $t('chart.drag_block_word_cloud_size')
}}</span> }}</span>
<span v-show="view.type !== 'richTextView'"> / </span> <span v-show="view.type !== 'richTextView'"> / </span>
<span>{{ $t('chart.quota') }}</span> <span>{{ $t('chart.quota') }}</span>
<i <i
@ -1116,7 +1116,20 @@
class="padding-tab" class="padding-tab"
style="width: 350px;" style="width: 350px;"
> >
<position-adjust /> <div class="attr-style theme-border-class">
<el-collapse
v-model="positionActiveNames"
class="style-collapse"
>
<el-collapse-item
:title="$t('panel.position_adjust_component')"
:name="'positionAdjust'"
>
<position-adjust/>
</el-collapse-item>
</el-collapse>
</div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
@ -1268,7 +1281,7 @@
width="800px" width="800px"
class="dialog-css" class="dialog-css"
> >
<quota-filter-editor :item="quotaItem" /> <quota-filter-editor :item="quotaItem"/>
<div <div
slot="footer" slot="footer"
class="dialog-footer" class="dialog-footer"
@ -1295,7 +1308,7 @@
width="800px" width="800px"
class="dialog-css" class="dialog-css"
> >
<dimension-filter-editor :item="dimensionItem" /> <dimension-filter-editor :item="dimensionItem"/>
<div <div
slot="footer" slot="footer"
class="dialog-footer" class="dialog-footer"
@ -1713,6 +1726,7 @@ export default {
}, },
data() { data() {
return { return {
positionActiveNames: 'positionAdjust',
loading: false, loading: false,
table: {}, table: {},
dimension: [], dimension: [],