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

feat: 仪表板预览页交互设计优化

Browse Source
This commit is contained in:
dataeaseShu 2022-12-12 18:13:00 +08:00
parent 294a7b209d
commit 17060f00f3
11 changed files with 215 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/icons/svg/cancel_release.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1670839640319" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3603" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M858.528537 988.072043C858.528537 990.471701 858.238844 992.802927 857.706981 995.039871 856.758447 1010.772228 843.705175 1023.239652 827.734449 1023.239652L195.505204 1023.239652C178.918215 1023.239652 165.471463 1009.7929 165.471463 993.205912 165.471463 992.340256 165.516324 991.485625 165.588177 990.638977 165.516324 989.79195 165.471463 988.937319 165.471463 988.072043L165.471463 155.491137 165.471463 155.491137 165.471463 125.457397C165.471463 108.870028 178.917835 95.423656 195.505204 95.423656L384.831821 95.423656 384.831821 155.491137 225.538944 155.491137 225.538944 963.172171 798.461056 963.172171 798.461056 155.110963 639.168179 155.110963 639.168179 95.043482 828.494796 95.043482C845.081785 95.043482 858.528537 108.489854 858.528537 125.077223L858.528537 125.455116C858.528537 125.455876 858.528537 125.456636 858.528537 125.457397L858.528537 988.072043ZM613.536473 894.664069 512.010645 793.137861 410.603051 894.545455 368.107969 852.049993 469.515183 750.642779 368.369529 649.497125 410.843701 607.022953 511.989355 708.168607 613.396569 606.761393 655.892031 649.256855 554.484437 750.664069 656.010645 852.189897 613.536473 894.664069ZM698.095139 190.086965C716.992064 190.086965 732.310792 205.405693 732.310792 224.302618L732.310792 282.849404 289.02799 282.849404 289.02799 224.302618C289.02799 205.405693 304.346719 190.086965 323.243644 190.086965L416.714727 190.086965C416.505251 189.550159 416.386257 188.968113 416.386257 188.357173L416.386257 96.184004C416.386257 43.483154 459.108682 0.760348 511.809913 0.760348 564.510764 0.760348 607.233569 43.483154 607.233569 96.184004L607.233569 188.357173C607.233569 188.968113 607.114575 189.550159 606.905099 190.086965L698.095139 190.086965ZM511.809913 93.522787C493.123224 93.522787 477.974433 108.671577 477.974433 127.358266 477.974433 146.044956 493.123224 161.193746 511.809913 161.193746 530.496602 161.193746 545.645393 146.044956 545.645393 127.358266 545.645393 108.671577 530.496602 93.522787 511.809913 93.522787Z" p-id="3604"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

4
frontend/src/icons/svg/icon_bottom-align_outlined.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M1.66683 13.9999C1.48273 13.9999 1.3335 13.8506 1.3335 13.6665V12.9999C1.3335 12.8158 1.48273 12.6665 1.66683 12.6665H14.3335C14.5176 12.6665 14.6668 12.8158 14.6668 12.9999V13.6665C14.6668 13.8506 14.5176 13.9999 14.3335 13.9999H1.66683Z"/>
<path d="M4.12772 6.36885L7.33349 9.57463V1.68856C7.33349 1.4922 7.49268 1.33301 7.68905 1.33301H8.31127C8.50764 1.33301 8.66683 1.4922 8.66683 1.68856V9.5902L11.8882 6.36885C12.027 6.23 12.2521 6.23 12.391 6.36886L12.831 6.80883C12.9698 6.94769 12.9698 7.17281 12.831 7.31166L8.3055 11.8371C8.22431 11.9183 8.11363 11.9521 8.00795 11.9383C7.90226 11.9521 7.79158 11.9183 7.71039 11.8371L3.18491 7.31166C3.04606 7.17281 3.04606 6.94769 3.18491 6.80883L3.62489 6.36886C3.76374 6.23 3.98887 6.23 4.12772 6.36885Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 856 B

3
frontend/src/icons/svg/icon_pc_outlined_copy.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3333 1.33325H1.66667C1.29848 1.33325 1 1.63173 1 1.99992V11.3333C1 11.7014 1.29848 11.9999 1.66667 11.9999H14.3333C14.7015 11.9999 15 11.7014 15 11.3333V1.99992C15 1.63173 14.7015 1.33325 14.3333 1.33325ZM2.33333 8.66659V2.66659H13.6667V8.66659H2.33333ZM2.33333 9.99992H13.6667V10.6666H2.33333V9.99992ZM4.66667 13.3333H11.3333V14.6666H4.66667V13.3333Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 459 B

3
frontend/src/icons/svg/icon_share-label_outlined.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M13 6C13 6.38511 13.0544 6.7575 13.156 7.10992L8.82562 9.66877C8.10199 8.94656 7.10314 8.5 6 8.5C3.79086 8.5 2 10.2909 2 12.5C2 14.7091 3.79086 16.5 6 16.5C7.22712 16.5 8.32519 15.9474 9.05894 15.0775L14.575 17.7252C14.5258 17.9759 14.5 18.2349 14.5 18.5C14.5 20.7091 16.2909 22.5 18.5 22.5C20.7091 22.5 22.5 20.7091 22.5 18.5C22.5 16.2909 20.7091 14.5 18.5 14.5C17.2729 14.5 16.1748 15.0526 15.4411 15.9225L9.92502 13.2748C9.97422 13.0241 10 12.7651 10 12.5C10 12.1149 9.94558 11.7425 9.844 11.3901L14.1744 8.83123C14.898 9.55344 15.8969 10 17 10C19.2091 10 21 8.20914 21 6C21 3.79086 19.2091 2 17 2C14.7909 2 13 3.79086 13 6ZM19 6C19 7.10457 18.1046 8 17 8C15.8954 8 15 7.10457 15 6C15 4.89543 15.8954 4 17 4C18.1046 4 19 4.89543 19 6ZM18.5 20.5C17.3954 20.5 16.5 19.6046 16.5 18.5C16.5 17.3954 17.3954 16.5 18.5 16.5C19.6046 16.5 20.5 17.3954 20.5 18.5C20.5 19.6046 19.6046 20.5 18.5 20.5ZM8 12.5C8 13.6046 7.10457 14.5 6 14.5C4.89543 14.5 4 13.6046 4 12.5C4 11.3954 4.89543 10.5 6 10.5C7.10457 10.5 8 11.3954 8 12.5Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

3
frontend/src/icons/svg/icon_yes_outlined.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23ZM10.84 14.2799L16.1433 8.97665C16.3386 8.78138 16.6551 8.78138 16.8504 8.97665L17.5575 9.68375C17.7528 9.87901 17.7528 10.1956 17.5575 10.3909L11.1936 16.7548C10.9983 16.9501 10.6817 16.9501 10.4864 16.7548L6.82603 13.0944C6.63077 12.8991 6.63077 12.5826 6.82603 12.3873L7.53314 11.6802C7.7284 11.4849 8.04498 11.4849 8.24024 11.6802L10.84 14.2799Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 678 B

1
frontend/src/icons/svg/release.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1670839669696" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5388" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M858.528537 988.072043C858.528537 990.471701 858.238844 992.802927 857.706981 995.039871 856.758447 1010.772228 843.705175 1023.239652 827.734449 1023.239652L195.505204 1023.239652C178.918215 1023.239652 165.471463 1009.7929 165.471463 993.205912 165.471463 992.340256 165.516324 991.485625 165.588177 990.638977 165.516324 989.79195 165.471463 988.937319 165.471463 988.072043L165.471463 155.491137 165.471463 155.491137 165.471463 125.457397C165.471463 108.870028 178.917835 95.423656 195.505204 95.423656L384.831821 95.423656 384.831821 155.491137 225.538944 155.491137 225.538944 963.172171 798.461056 963.172171 798.461056 155.110963 639.168179 155.110963 639.168179 95.043482 828.494796 95.043482C845.081785 95.043482 858.528537 108.489854 858.528537 125.077223L858.528537 125.455116C858.528537 125.455876 858.528537 125.456636 858.528537 125.457397L858.528537 988.072043ZM648.944352 549.349427 694.292259 596.282659 452.068241 822.696003 330.084113 696.442903 377.585705 651.639785 454.221546 730.959654 648.944352 549.349427ZM698.095139 190.086965C716.992064 190.086965 732.310792 205.405693 732.310792 224.302618L732.310792 282.849404 289.02799 282.849404 289.02799 224.302618C289.02799 205.405693 304.346719 190.086965 323.243644 190.086965L416.714727 190.086965C416.505251 189.550159 416.386257 188.968113 416.386257 188.357173L416.386257 96.184004C416.386257 43.483154 459.108682 0.760348 511.809913 0.760348 564.510764 0.760348 607.233569 43.483154 607.233569 96.184004L607.233569 188.357173C607.233569 188.968113 607.114575 189.550159 606.905099 190.086965L698.095139 190.086965ZM511.809913 93.522787C493.123224 93.522787 477.974433 108.671577 477.974433 127.358266 477.974433 146.044956 493.123224 161.193746 511.809913 161.193746 530.496602 161.193746 545.645393 146.044956 545.645393 127.358266 545.645393 108.671577 530.496602 93.522787 511.809913 93.522787Z" p-id="5389"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

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

@ -2060,6 +2060,7 @@ export default {
who_share: 'Who share',
when_share: 'When share',
share_to: 'Share to',
share_to_some: 'Share [{some}] to',
org: 'Orgnization',
role: 'Role',
user: 'User',

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

@ -2054,6 +2054,7 @@ export default {
who_share: '分享人',
when_share: '分享時間',
share_to: '分享對象',
share_to_some: '把[{some}]分享給',
org: '組織',
role: '角色',
user: '用戶',

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

@ -2054,6 +2054,7 @@ export default {
who_share: '分享人',
when_share: '分享时间',
share_to: '分享对象',
share_to_some: '把[{some}]分享给',
org: '组织',
role: '角色',
user: '用户',

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

@ -1407,6 +1407,10 @@ div:focus {
}
}
.de-card-dropdown-right {
margin: 0px !important;
}
.de-search-table {
.top-operate {
margin-bottom: 16px;
@ -1458,13 +1462,7 @@ div:focus {
}
}
.el-tree-node__content {
height: 40px;
border-radius: 4px;
&:hover {
background: rgba(31, 35, 41, 0.1);
}
.el-tree-node__content, .de-el-tree-node__content {
.el-icon-more,
.el-icon-plus {
@ -1489,6 +1487,25 @@ div:focus {
border-radius: 4px;
}
}
.el-tree-node__content {
height: 40px;
border-radius: 4px;
&:hover {
background: rgba(31, 35, 41, 0.1);
}
}
.de-el-tree-node__content {
.el-button--text {
padding: 0 !important;
}
.el-icon-more {
width: 32px;
height: 32px;
line-height: 32px;
}
}
}
.de-text-btn {

298
frontend/src/views/panel/list/PanelViewShow.vue
View File

@ -59,139 +59,155 @@
v-if="hasDataPermission('manage',panelInfo.privileges)&&activeTab==='PanelList'&&!panelInfo.sourcePanelName"
style="float: right;margin-right: 10px"
>
<el-button
size="mini"
<de-btn
type="primary"
@click="editPanel"
>
{{ $t('commons.edit') }}
</el-button>
</span>
<span
v-if="hasDataPermission('manage',panelInfo.privileges)&&activeTab==='PanelList'&&!panelInfo.sourcePanelName"
style="float: right;margin-right: 10px"
>
<el-button
size="mini"
type="primary"
@click="changePublishState"
>
<span v-if="panelInfo.status==='publish'">{{ $t('commons.unpublished') }}</span>
<span v-if="panelInfo.status!=='publish'">{{ $t('commons.publish') }}</span>
</el-button>
</span>
<span
v-if="hasDataPermission('export',panelInfo.privileges)&&panelInfo.status==='publish'"
style="float: right;margin-right: 10px"
>
<el-tooltip :content="$t('panel.save_to_panel')">
<el-button
class="el-icon-folder-checked"
size="mini"
circle
@click="saveToTemplate"
/>
</el-tooltip>
</span>
<span
v-if="hasDataPermission('export',panelInfo.privileges)&&panelInfo.status==='publish'"
style="float: right;margin-right: 10px"
>
<el-dropdown>
<el-button
size="mini"
class="el-icon-download"
circle
/>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
icon="el-icon-copy-document"
@click.native="downloadToTemplate"
>{{ $t('panel.export_to_panel') }}</el-dropdown-item>
<el-dropdown-item
icon="el-icon-notebook-2"
@click.native="downloadAsPDF"
>{{ $t('panel.export_to_pdf') }}</el-dropdown-item>
<el-dropdown-item
icon="el-icon-picture-outline"
@click.native="downloadAsImage"
>{{ $t('panel.export_to_img') }}</el-dropdown-item>
<el-dropdown-item
icon="el-icon-s-data"
@click.native="downLoadToAppPre"
>{{ $t('panel.export_to_app') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
<span
v-if="panelInfo.status==='publish'"
style="float: right;margin-right: 10px"
>
<el-tooltip :content="$t('panel.fullscreen_preview')">
<el-button
class="el-icon-view"
size="mini"
circle
@click="clickFullscreen"
/>
</el-tooltip>
</span>
<span
v-if="panelInfo.status==='publish'"
style="float: right;margin-right: 10px"
>
<el-tooltip :content="$t('panel.new_tab_preview')">
<el-button
class="el-icon-data-analysis"
size="mini"
circle
@click="newTab"
/>
</el-tooltip>
</span>
<span
v-if="!hasStar && panelInfo && showType !== 1&&panelInfo.status==='publish'"
style="float: right;margin-right: 10px"
>
<el-tooltip :content="$t('panel.store')">
<el-button
class="el-icon-star-off"
size="mini"
circle
@click="star"
/>
</el-tooltip>
</span>
<span
v-if="hasStar && panelInfo && showType !== 1&&panelInfo.status==='publish'"
style="float: right;margin-right: 10px"
>
<el-tooltip :content="$t('commons.cancel')">
<el-button
class="el-icon-star-on"
size="mini"
circle
@click="unstar"
/>
</el-tooltip>
</de-btn>
</span>
<span style="float: right;margin-right: 10px">
<el-tooltip :content="$t('commons.refresh')">
<el-button
class="el-icon-refresh"
size="mini"
circle
@click="refreshPanel"
/>
</el-tooltip>
<de-btn
secondary
@click="share"
>
{{ $t('panel.share') }}
</de-btn>
</span>
<span
v-if="panelInfo.status==='publish'"
style="float: right;margin-right: 10px"
>
<de-btn
secondary
@click="clickFullscreen"
>
{{ $t('panel.fullscreen_preview') }}
</de-btn>
</span>
<span
style="float: right;margin-right: 10px"
class="de-tree"
>
<el-dropdown
trigger="click"
size="small"
placement="bottom-start"
>
<span class="el-dropdown-link de-el-tree-node__content">
<el-button
icon="el-icon-more"
type="text"
size="small"
/>
</span>
<el-dropdown-menu
slot="dropdown"
class="de-card-dropdown"
>
<el-dropdown-item
v-if="panelInfo.status==='publish'"
@click.native="newTab"
>
<svg-icon
icon-class="icon_pc_outlined_copy"
class="preview-icon-svg"
/>
{{ $t('panel.new_tab_preview') }}
</el-dropdown-item>
<el-dropdown-item
v-if="!hasStar && panelInfo && showType !== 1&&panelInfo.status==='publish'"
icon="el-icon-star-off"
@click.native="star"
>
{{ $t('panel.store') }}
</el-dropdown-item>
<el-dropdown-item
v-if="hasStar && panelInfo && showType !== 1&&panelInfo.status==='publish'"
icon="el-icon-star-on"
@click.native="unstar"
>
{{ $t('commons.cancel') + $t('panel.store') }}
</el-dropdown-item>
<el-dropdown-item
v-if="hasStar && panelInfo && showType !== 1&&panelInfo.status==='publish'"
icon="el-icon-refresh"
@click.native="refreshPanel"
>
{{ $t('commons.refresh') + $t('chart.chart_data') }}
</el-dropdown-item>
<el-dropdown-item
v-if="hasDataPermission('export',panelInfo.privileges)&&panelInfo.status==='publish'"
@click.native="saveToTemplate"
>
<svg-icon
icon-class="icon_yes_outlined"
class="preview-icon-svg"
/>
{{ $t('panel.save_to_panel') }}
</el-dropdown-item>
<el-dropdown-item
v-if="hasDataPermission('manage',panelInfo.privileges)&&activeTab==='PanelList'&&!panelInfo.sourcePanelName"
@click.native="changePublishState"
>
<svg-icon
:icon-class="panelInfo.status==='publish' ? 'cancel_release' : 'release'"
class="preview-icon-svg"
/>
{{ $t(`commons.${ panelInfo.status==='publish' ? 'unpublished' : 'publish'}`) }}
</el-dropdown-item>
<el-dropdown
style="width: 100%"
placement="right-start"
>
<el-dropdown-item
v-if="hasDataPermission('export',panelInfo.privileges)&&panelInfo.status==='publish'"
>
<svg-icon
icon-class="icon_bottom-align_outlined"
class="preview-icon-svg"
/>
导出为
<svg-icon
style="margin-top: 7px;float: right"
icon-class="icon_right_outlined"
class="preview-icon-svg"
/>
</el-dropdown-item>
<el-dropdown-menu
slot="dropdown"
class="de-card-dropdown de-card-dropdown-right"
>
<el-dropdown-item
icon="el-icon-copy-document"
@click.native="downloadToTemplate"
>{{ $t('panel.export_to_panel') }}</el-dropdown-item>
<el-dropdown-item
icon="el-icon-notebook-2"
@click.native="downloadAsPDF"
>{{ $t('panel.export_to_pdf') }}</el-dropdown-item>
<el-dropdown-item
icon="el-icon-picture-outline"
@click.native="downloadAsImage"
>{{ $t('panel.export_to_img') }}</el-dropdown-item>
<el-dropdown-item
icon="el-icon-s-data"
@click.native="downLoadToAppPre"
>{{ $t('panel.export_to_app') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-dropdown-menu>
</el-dropdown>
</span>
</el-col>
</div>
</el-row>
@ -314,6 +330,20 @@
/>
</el-dialog>
<el-dialog
v-dialogDrag
:title="authTitle"
:visible.sync="authVisible"
width="800px"
class="dialog-css"
>
<grant-auth
v-if="authVisible"
:resource-id="authResourceId"
@close-grant="closeGrant"
/>
</el-dialog>
<keep-alive>
<app-export-form
ref="appExportForm"
@ -340,10 +370,11 @@ import { dataURLToBlob, getNowCanvasComponentData } from '@/components/canvas/ut
import { findResourceAsBase64 } from '@/api/staticResource/staticResource'
import PanelDetailInfo from '@/views/panel/list/common/PanelDetailInfo'
import AppExportForm from '@/views/panel/list/AppExportForm'
import GrantAuth from '../grantAuth'
export default {
name: 'PanelViewShow',
components: { AppExportForm, PanelDetailInfo, Preview, SaveToTemplate, PDFPreExport, ShareHead },
components: { AppExportForm, PanelDetailInfo, Preview, SaveToTemplate, PDFPreExport, ShareHead, GrantAuth },
props: {
activeTab: {
type: String,
@ -352,6 +383,9 @@ export default {
},
data() {
return {
authTitle: null,
authResourceId: null,
authVisible: false,
canvasInfoTemp: 'preview-temp-canvas-main',
canvasId: 'canvas-main',
showMain: true,
@ -447,6 +481,15 @@ export default {
clickFullscreen() {
this.fullscreen = true
},
share() {
this.authResourceId = this.panelInfo.id
this.authTitle = this.$t('panel.share_to_some', { some: this.panelInfo.name })
this.authVisible = true
},
closeGrant() {
this.authResourceId = null
this.authVisible = false
},
newTab() {
let url = '#/preview/' + this.$store.state.panel.panelInfo.id
if (this.showType === 1 && this.shareUserId !== null) {
@ -787,4 +830,9 @@ export default {
.dialog-css2 ::v-deep .el-dialog__body {
padding: 0px 20px !important;
}
.preview-icon-svg {
color: inherit;
margin-right: 5px;
}
</style>