github/dataease
github/dataease
3
0
Fork 1
mirror of https://github.com/dataease/dataease.git synced 2025-02-25 03:52:59 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix: UI 调整

Browse Source
This commit is contained in:
wangjiahao 2021-05-27 18:54:06 +08:00
parent 47608dd732
commit 836fde170c
4 changed files with 45 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/components/canvas/components/Toolbar.vue
View File

@ -1,20 +1,19 @@
<template>
<div>
<div class="toolbar">
<div class="canvas-config">
<div class="canvas-config" style="margin-right: 10px">
<span> {{ $t('panel.canvas_size') }} </span>
<input v-model="canvasStyleData.width">
<span>*</span>
<input v-model="canvasStyleData.height">
</div>
<div class="canvas-config" style="margin-right: 10px">
<span> {{ $t('panel.canvas_scale') }} </span>
<input v-model="scale" @input="handleScaleChange"> %
</div>
<!-- <div class="canvas-config" style="margin-right: 10px">-->
<!-- <span> {{ $t('panel.canvas_scale') }} </span>-->
<!-- <input v-model="scale" @input="handleScaleChange"> %-->
<!-- </div>-->
<el-tooltip :content="$t('panel.style')">
<el-button class="el-icon-magic-stick" size="mini" circle @click="showPanel" />
<el-button :class="buttonActive?'button-show':'button-closed'" class="el-icon-magic-stick" size="mini" circle @click="showPanel" />
</el-tooltip>
<el-tooltip :content="$t('panel.undo') ">
<el-button class="el-icon-refresh-right" size="mini" circle @click="undo" />
@ -59,6 +58,14 @@ import {
} from '@/views/panel/panel'
export default {
name: 'Toolbar',
props: {
buttonActive: {
type: Boolean,
required: false,
default: false
}
},
data() {
return {
isShowPreview: false,
@ -291,4 +298,13 @@ export default {
}
}
}
.button-show{
background-color: #ebf2fe
}
.button-closed{
background-color: #ffffff
}
</style>

1
frontend/src/styles/index.scss
View File

@ -237,3 +237,4 @@ div:focus {
.el-popper{
position: fixed!important;
}

21
frontend/src/views/panel/edit/index.vue
View File

@ -8,7 +8,7 @@
</el-col>
<!--横向工具栏-->
<el-col :span="16">
<Toolbar @showPanel="showPanel" @close-left-panel="closeLeftPanel" @previewFullScreen="previewFullScreen" />
<Toolbar :button-active="show&&showIndex===2" @showPanel="showPanel" @close-left-panel="closeLeftPanel" @previewFullScreen="previewFullScreen" />
</el-col>
</el-header>
<de-container>
@ -17,10 +17,10 @@
<div style="width: 60px;height: 100%;overflow: hidden auto;position: relative;margin: 0px auto;">
<!-- 视图图表 -->
<div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 32px auto 0px;font-size:150%;">
<el-button circle class="el-icon-circle-plus-outline" size="mini" @click="showPanel(0)" />
<el-button :class="show&&showIndex===0? 'button-show':'button-closed'" circle class="el-icon-circle-plus-outline" size="mini" @click="showPanel(0)" />
</div>
<!-- 视图文字 -->
<div style="position: relative; margin: 18px auto 30px">
<div style="position: relative; margin: 18px auto 30px;">
<div style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
{{ $t('panel.view') }}
</div>
@ -33,7 +33,7 @@
<div tabindex="-1" style="position: relative; margin: 20px auto">
<div style="height: 60px; position: relative">
<div class="button-div-class" style=" text-align: center;line-height: 1;position: absolute;inset: 0px 0px 45px; ">
<el-button circle class="el-icon-s-tools" size="mini" @click="showPanel(1)" />
<el-button circle :class="show&&showIndex===1? 'button-show':'button-closed'" class="el-icon-s-tools" size="mini" @click="showPanel(1)" />
</div>
<div style=" position: absolute;left: 0px;right: 0px;bottom: 10px; height: 16px;">
<div style=" max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
@ -42,6 +42,10 @@
</div>
</div>
</div>
<!-- 视图分割线 -->
<div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
<div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
</div>
</div>
</div>
<!-- <div ref="leftPanel" :class="{show:show}" class="leftPanel-container">-->
@ -72,7 +76,7 @@
>
<view-select v-show=" show && showIndex===0" />
<filter-group v-show=" show &&showIndex===1" />
<subject-setting v-show=" show &&showIndex===2" />
<subject-setting v-show=" show &&showIndex===2" />
</el-drawer>
<div
@ -479,5 +483,12 @@ export default {
.el-main >>> .el-drawer__body{
overflow-y: auto;
}
.button-show{
background-color: #ebf2fe
}
.button-closed{
background-color: #ffffff
}
</style>

5
frontend/src/views/panel/list/PanelList.vue
View File

@ -5,6 +5,7 @@
<span class="header-title">{{ $t('panel.default_panel') }}</span>
<div class="block">
<el-tree
ref="default_panel_tree"
:default-expanded-keys="expandedArray"
:data="defaultData"
node-key="id"
@ -631,6 +632,8 @@ export default {
this.$nextTick(() => {
// 延迟设置CurrentKey
this.$refs.panel_list_tree.setCurrentKey(panelInfo.id)
// 去除default_tree 的影响
this.$refs.default_panel_tree.setCurrentKey(null)
this.$nextTick(() => {
document.querySelector('.is-current').firstChild.click()
// 如果是仪表盘列表的仪表盘 直接进入编辑界面
@ -647,6 +650,8 @@ export default {
this.$nextTick(() => {
// 延迟设置CurrentKey
this.$refs.panel_list_tree.setCurrentKey(panelInfo.id)
// 去除default_tree 的影响
this.$refs.default_panel_tree.setCurrentKey(null)
this.$nextTick(() => {
document.querySelector('.is-current').firstChild.click()
})