forked from github/dataease
Merge pull request #13062 from dataease/pr@dev-v2@feat_preview_show
feat(数据大屏、仪表板): 预览时，增加放大、导出按钮等#9673
This commit is contained in:
王嘉豪
GitHub
commit
9042fa365f
@ -1,4 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.85738 4.85729L9.98911 11.989L2.85738 19.1207C2.66212 19.316 2.66212 19.6326 2.85738 19.8279L3.56449 20.535C3.75975 20.7302 4.07634 20.7302 4.2716 20.535L12.1104 12.6961C12.501 12.3056 12.501 11.6724 12.1104 11.2819L4.2716 3.44308C4.07634 3.24782 3.75975 3.24782 3.56449 3.44308L2.85738 4.15018C2.66212 4.34545 2.66212 4.66203 2.85738 4.85729Z" fill="#1F2329"/>
|
||||
<path d="M11.7431 4.85729L18.8749 11.989L11.7431 19.1207C11.5479 19.316 11.5479 19.6326 11.7431 19.8279L12.4502 20.535C12.6455 20.7302 12.9621 20.7302 13.1573 20.535L20.9962 12.6961C21.3867 12.3056 21.3867 11.6724 20.9962 11.2819L13.1573 3.44308C12.9621 3.24782 12.6455 3.24782 12.4502 3.44308L11.7431 4.15018C11.5479 4.34545 11.5479 4.66203 11.7431 4.85729Z" fill="#1F2329"/>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.85738 4.85729L9.98911 11.989L2.85738 19.1207C2.66212 19.316 2.66212 19.6326 2.85738 19.8279L3.56449 20.535C3.75975 20.7302 4.07634 20.7302 4.2716 20.535L12.1104 12.6961C12.501 12.3056 12.501 11.6724 12.1104 11.2819L4.2716 3.44308C4.07634 3.24782 3.75975 3.24782 3.56449 3.44308L2.85738 4.15018C2.66212 4.34545 2.66212 4.66203 2.85738 4.85729Z" />
|
||||
<path d="M11.7431 4.85729L18.8749 11.989L11.7431 19.1207C11.5479 19.316 11.5479 19.6326 11.7431 19.8279L12.4502 20.535C12.6455 20.7302 12.9621 20.7302 13.1573 20.535L20.9962 12.6961C21.3867 12.3056 21.3867 11.6724 20.9962 11.2819L13.1573 3.44308C12.9621 3.24782 12.6455 3.24782 12.4502 3.44308L11.7431 4.15018C11.5479 4.34545 11.5479 4.66203 11.7431 4.85729Z"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 853 B After Width: | Height: | Size: 812 B |
@ -1,3 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21 18.5V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V18.5C3 18.2239 3.22386 18 3.5 18H4.5C4.77614 18 5 18.2239 5 18.5V20H19V18.5C19 18.2239 19.2239 18 19.5 18H20.5C20.7761 18 21 18.2239 21 18.5ZM13 14.0357L16.0105 11.0252C16.2057 10.83 16.5223 10.83 16.7176 11.0252L17.4247 11.7324C17.6199 11.9276 17.6199 12.2442 17.4247 12.4395L12.4749 17.3892C12.3773 17.4868 12.2493 17.5357 12.1214 17.5357C11.9934 17.5357 11.8655 17.4868 11.7678 17.3892L6.81808 12.4395C6.62282 12.2442 6.62282 11.9276 6.81808 11.7324L7.52519 11.0252C7.72045 10.83 8.03703 10.83 8.2323 11.0252L11 13.793V3C11 2.72386 11.2239 2.5 11.5 2.5H12.5C12.7761 2.5 13 2.72386 13 3V14.0357Z" fill="#1F2329"/>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21 18.5V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V18.5C3 18.2239 3.22386 18 3.5 18H4.5C4.77614 18 5 18.2239 5 18.5V20H19V18.5C19 18.2239 19.2239 18 19.5 18H20.5C20.7761 18 21 18.2239 21 18.5ZM13 14.0357L16.0105 11.0252C16.2057 10.83 16.5223 10.83 16.7176 11.0252L17.4247 11.7324C17.6199 11.9276 17.6199 12.2442 17.4247 12.4395L12.4749 17.3892C12.3773 17.4868 12.2493 17.5357 12.1214 17.5357C11.9934 17.5357 11.8655 17.4868 11.7678 17.3892L6.81808 12.4395C6.62282 12.2442 6.62282 11.9276 6.81808 11.7324L7.52519 11.0252C7.72045 10.83 8.03703 10.83 8.2323 11.0252L11 13.793V3C11 2.72386 11.2239 2.5 11.5 2.5H12.5C12.7761 2.5 13 2.72386 13 3V14.0357Z"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 796 B After Width: | Height: | Size: 769 B |
@ -1,3 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.1518 11.5968C7.31452 11.4341 7.57834 11.4341 7.74106 11.5968L8.33031 12.186C8.49303 12.3487 8.49303 12.6126 8.33031 12.7753L4.99587 16.1086H7.36621C7.59633 16.1086 7.78288 16.2952 7.78288 16.5253V17.3586C7.78288 17.5887 7.59633 17.7753 7.36621 17.7753H3.05555C2.82544 17.7753 2.6171 17.682 2.4663 17.5312C2.3155 17.3804 2.22222 17.1721 2.22222 16.9419V12.6421C2.22222 12.412 2.40877 12.2255 2.63889 12.2255H3.47222C3.70234 12.2255 3.88889 12.412 3.88889 12.6421V14.8586L7.1518 11.5968ZM16.9367 2.22217C17.1668 2.22217 17.3751 2.31544 17.5259 2.46625C17.6767 2.61705 17.77 2.82538 17.77 3.0555V7.35531C17.77 7.58543 17.5835 7.77198 17.3533 7.77198H16.52C16.2899 7.77198 16.1033 7.58543 16.1033 7.35531V5.13888L12.8404 8.40068C12.6777 8.5634 12.4139 8.5634 12.2512 8.40068L11.6619 7.81142C11.4992 7.6487 11.4992 7.38489 11.6619 7.22217L14.9964 3.88883H12.626C12.3959 3.88883 12.2094 3.70229 12.2094 3.47217V2.63883C12.2094 2.40872 12.3959 2.22217 12.626 2.22217H16.9367Z" fill="#1F2329"/>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.1518 11.5968C7.31452 11.4341 7.57834 11.4341 7.74106 11.5968L8.33031 12.186C8.49303 12.3487 8.49303 12.6126 8.33031 12.7753L4.99587 16.1086H7.36621C7.59633 16.1086 7.78288 16.2952 7.78288 16.5253V17.3586C7.78288 17.5887 7.59633 17.7753 7.36621 17.7753H3.05555C2.82544 17.7753 2.6171 17.682 2.4663 17.5312C2.3155 17.3804 2.22222 17.1721 2.22222 16.9419V12.6421C2.22222 12.412 2.40877 12.2255 2.63889 12.2255H3.47222C3.70234 12.2255 3.88889 12.412 3.88889 12.6421V14.8586L7.1518 11.5968ZM16.9367 2.22217C17.1668 2.22217 17.3751 2.31544 17.5259 2.46625C17.6767 2.61705 17.77 2.82538 17.77 3.0555V7.35531C17.77 7.58543 17.5835 7.77198 17.3533 7.77198H16.52C16.2899 7.77198 16.1033 7.58543 16.1033 7.35531V5.13888L12.8404 8.40068C12.6777 8.5634 12.4139 8.5634 12.2512 8.40068L11.6619 7.81142C11.4992 7.6487 11.4992 7.38489 11.6619 7.22217L14.9964 3.88883H12.626C12.3959 3.88883 12.2094 3.70229 12.2094 3.47217V2.63883C12.2094 2.40872 12.3959 2.22217 12.626 2.22217H16.9367Z" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
@ -1,3 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.00839 13.9974C9.28453 13.9974 9.53453 14.1093 9.71549 14.2903C9.89646 14.4712 10.0084 14.7212 10.0084 14.9974V20.1572C10.0084 20.4333 9.78453 20.6572 9.50839 20.6572H8.50839C8.23224 20.6572 8.00839 20.4333 8.00839 20.1572V17.4974L4.09289 21.4116C3.89762 21.6069 3.58104 21.6069 3.38578 21.4116L2.67867 20.7045C2.48341 20.5092 2.48341 20.1927 2.67867 19.9974L6.68001 15.9974H3.83559C3.55945 15.9974 3.33559 15.7735 3.33559 15.4974V14.4974C3.33559 14.2212 3.55945 13.9974 3.83559 13.9974H9.00839ZM19.919 2.58865C20.1142 2.39338 20.4308 2.39338 20.6261 2.58865L21.3332 3.29575C21.5284 3.49102 21.5284 3.8076 21.3332 4.00286L17.3318 8.00286H20.1763C20.4524 8.00286 20.6763 8.22672 20.6763 8.50286V9.50286C20.6763 9.779 20.4524 10.0029 20.1763 10.0029H15.0035C14.7273 10.0029 14.4773 9.89093 14.2964 9.70997C14.1154 9.529 14.0035 9.279 14.0035 9.00286V3.84309C14.0035 3.56695 14.2273 3.34309 14.5035 3.34309H15.5035C15.7796 3.34309 16.0035 3.56695 16.0035 3.84309V6.50281L19.919 2.58865Z" fill="#1F2329"/>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.00839 13.9974C9.28453 13.9974 9.53453 14.1093 9.71549 14.2903C9.89646 14.4712 10.0084 14.7212 10.0084 14.9974V20.1572C10.0084 20.4333 9.78453 20.6572 9.50839 20.6572H8.50839C8.23224 20.6572 8.00839 20.4333 8.00839 20.1572V17.4974L4.09289 21.4116C3.89762 21.6069 3.58104 21.6069 3.38578 21.4116L2.67867 20.7045C2.48341 20.5092 2.48341 20.1927 2.67867 19.9974L6.68001 15.9974H3.83559C3.55945 15.9974 3.33559 15.7735 3.33559 15.4974V14.4974C3.33559 14.2212 3.55945 13.9974 3.83559 13.9974H9.00839ZM19.919 2.58865C20.1142 2.39338 20.4308 2.39338 20.6261 2.58865L21.3332 3.29575C21.5284 3.49102 21.5284 3.8076 21.3332 4.00286L17.3318 8.00286H20.1763C20.4524 8.00286 20.6763 8.22672 20.6763 8.50286V9.50286C20.6763 9.779 20.4524 10.0029 20.1763 10.0029H15.0035C14.7273 10.0029 14.4773 9.89093 14.2964 9.70997C14.1154 9.529 14.0035 9.279 14.0035 9.00286V3.84309C14.0035 3.56695 14.2273 3.34309 14.5035 3.34309H15.5035C15.7796 3.34309 16.0035 3.56695 16.0035 3.84309V6.50281L19.919 2.58865Z" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
@ -1,4 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.2496 19.1355L5.11783 12.0038L12.2496 4.87206C12.4448 4.6768 12.4448 4.36022 12.2496 4.16495L11.5424 3.45785C11.3472 3.26259 11.0306 3.26259 10.8353 3.45785L2.99651 11.2967C2.60598 11.6872 2.60598 12.3204 2.99651 12.7109L10.8353 20.5497C11.0306 20.745 11.3472 20.745 11.5424 20.5497L12.2496 19.8426C12.4448 19.6474 12.4448 19.3308 12.2496 19.1355Z" fill="#1F2329"/>
|
||||
<path d="M21.1497 19.1355L14.018 12.0038L21.1497 4.87206C21.345 4.6768 21.345 4.36022 21.1497 4.16495L20.4426 3.45785C20.2473 3.26259 19.9307 3.26259 19.7355 3.45785L11.8967 11.2967C11.5061 11.6872 11.5061 12.3204 11.8967 12.7109L19.7355 20.5497C19.9307 20.745 20.2473 20.745 20.4426 20.5497L21.1497 19.8426C21.345 19.6474 21.345 19.3308 21.1497 19.1355Z" fill="#1F2329"/>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.2496 19.1355L5.11783 12.0038L12.2496 4.87206C12.4448 4.6768 12.4448 4.36022 12.2496 4.16495L11.5424 3.45785C11.3472 3.26259 11.0306 3.26259 10.8353 3.45785L2.99651 11.2967C2.60598 11.6872 2.60598 12.3204 2.99651 12.7109L10.8353 20.5497C11.0306 20.745 11.3472 20.745 11.5424 20.5497L12.2496 19.8426C12.4448 19.6474 12.4448 19.3308 12.2496 19.1355Z"/>
|
||||
<path d="M21.1497 19.1355L14.018 12.0038L21.1497 4.87206C21.345 4.6768 21.345 4.36022 21.1497 4.16495L20.4426 3.45785C20.2473 3.26259 19.9307 3.26259 19.7355 3.45785L11.8967 11.2967C11.5061 11.6872 11.5061 12.3204 11.8967 12.7109L19.7355 20.5497C19.9307 20.745 20.2473 20.745 20.4426 20.5497L21.1497 19.8426C21.345 19.6474 21.345 19.3308 21.1497 19.1355Z"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 854 B After Width: | Height: | Size: 813 B |
@ -180,6 +180,26 @@
|
||||
:disabled="canvasStyleData.dashboard.resultMode === 'all'"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-top: 16px; margin-bottom: 8px" :class="'form-item-' + themes">
|
||||
<el-checkbox
|
||||
:effect="themes"
|
||||
size="small"
|
||||
v-model="canvasStyleData.suspensionButtonAvailable"
|
||||
@change="themeChange"
|
||||
>
|
||||
<span class="data-area-label">
|
||||
<span style="margin-right: 4px"> 显示放大、导出等悬浮按钮 </span>
|
||||
<el-tooltip class="item" :effect="toolTip" placement="bottom">
|
||||
<template #content>
|
||||
<div>预览时启用</div>
|
||||
</template>
|
||||
<el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
|
||||
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
|
||||
@ -395,7 +395,7 @@ const fullScreenPreview = () => {
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button v-else class="preview-button" @click="fullScreenPreview" style="float: right">
|
||||
{{ t('template_manage.preview') }}
|
||||
预览
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="saveCanvasWithCheck()"
|
||||
|
||||
@ -19,6 +19,7 @@ import { useEmitt } from '@/hooks/web/useEmitt'
|
||||
import DatasetParamsComponent from '@/components/visualization/DatasetParamsComponent.vue'
|
||||
import DeFullscreen from '@/components/visualization/common/DeFullscreen.vue'
|
||||
import EmptyBackground from '../../empty-background/src/EmptyBackground.vue'
|
||||
import LinkOptBar from '@/components/data-visualization/canvas/LinkOptBar.vue'
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
const { pcMatrixCount, curComponent, mobileInPc, canvasState } = storeToRefs(dvMainStore)
|
||||
const openHandler = ref(null)
|
||||
@ -393,6 +394,14 @@ const datasetParamsInit = item => {
|
||||
const dataVPreview = computed(
|
||||
() => dvInfo.value.type === 'dataV' && canvasId.value === 'canvas-main'
|
||||
)
|
||||
|
||||
const linkOptBarShow = computed(() => {
|
||||
return Boolean(canvasStyleData.value.suspensionButtonAvailable)
|
||||
})
|
||||
|
||||
const downloadAsPDF = () => {
|
||||
// test
|
||||
}
|
||||
defineExpose({
|
||||
restore
|
||||
})
|
||||
@ -455,6 +464,13 @@ defineExpose({
|
||||
<de-fullscreen ref="fullScreeRef"></de-fullscreen>
|
||||
<dataset-params-component ref="customDatasetParamsRef"></dataset-params-component>
|
||||
<XpackComponent ref="openHandler" jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI=" />
|
||||
<link-opt-bar
|
||||
v-if="linkOptBarShow"
|
||||
ref="link-opt-bar"
|
||||
:terminal="'pc'"
|
||||
:canvas-style-data="canvasStyleData"
|
||||
@link-export-pdf="downloadAsPDF"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<div
|
||||
id="fullscreenElement"
|
||||
ref="widget-div"
|
||||
class="link-bar-main bar-light"
|
||||
:class="[{ ['link-bar-main-active']: state.barActive }, functionClass]"
|
||||
:style="{
|
||||
'--fullWidth': state.fullWidth + 'px',
|
||||
'--fullContent': 28 - state.fullWidth + 'px',
|
||||
'--firstHoveMove': 32 - state.fullWidth + 'px'
|
||||
}"
|
||||
>
|
||||
<div class="bar-first">
|
||||
<el-tooltip :content="state.barActive ? '收起' : '展开'">
|
||||
<el-icon style="width: 16px; height: 16px" @click="firstBarClick">
|
||||
<Icon name="icon_down_right_outlined" v-if="state.barActive">
|
||||
<icon_down_right_outlined />
|
||||
</Icon>
|
||||
<Icon name="icon_up_left_outlined" v-else>
|
||||
<icon_up_left_outlined />
|
||||
</Icon>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="bar-content">
|
||||
<div class="bar-diver" />
|
||||
<div v-show="fromLink" class="link-icon-active">
|
||||
<el-tooltip content="返回上一级">
|
||||
<el-icon style="width: 16px; height: 16px" @click="back2Last">
|
||||
<Icon name="icon_left_outlined">
|
||||
<icon_left_outlined class="svg-icon" />
|
||||
</Icon>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="link-icon-active">
|
||||
<el-tooltip content="导出PDF">
|
||||
<el-icon style="width: 16px; height: 16px" @click="exportPDF">
|
||||
<Icon name="icon_download_outlined">
|
||||
<icon_download_outlined class="svg-icon" />
|
||||
</Icon>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div id="fullscreenElement" class="link-icon-active" style="padding-right: 4px">
|
||||
<el-tooltip :content="fullscreenFlag ? '退出全屏' : '全屏'">
|
||||
<el-icon style="width: 16px; height: 16px" @click="toggleFullscreen">
|
||||
<Icon name="icon_minify_outlined" v-if="fullscreenFlag">
|
||||
<icon_minify_outlined class="svg-icon" />
|
||||
</Icon>
|
||||
<Icon name="icon_magnify_outlined" v-else>
|
||||
<icon_magnify_outlined class="svg-icon" />
|
||||
</Icon>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, reactive, toRefs } from 'vue'
|
||||
import router from '@/router'
|
||||
import { ElIcon } from 'element-plus-secondary'
|
||||
import Icon from '../../icon-custom/src/Icon.vue'
|
||||
import icon_down_right_outlined from '@/assets/svg/icon_down-right_outlined.svg'
|
||||
import icon_up_left_outlined from '@/assets/svg/icon_up-left_outlined.svg'
|
||||
import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'
|
||||
import icon_download_outlined from '@/assets/svg/icon_download_outlined.svg'
|
||||
import icon_minify_outlined from '@/assets/svg/icon_minify_outlined.svg'
|
||||
import icon_magnify_outlined from '@/assets/svg/icon_magnify_outlined.svg'
|
||||
import { useEmitt } from '@/hooks/web/useEmitt'
|
||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||
import { storeToRefs } from 'pinia'
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
const props = defineProps({
|
||||
canvasStyleData: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const { canvasStyleData } = toRefs(props)
|
||||
const { fullscreenFlag } = storeToRefs(dvMainStore)
|
||||
|
||||
const state = reactive({
|
||||
fullscreenElement: null,
|
||||
barActive: false,
|
||||
fullWidth: router.currentRoute.value.query?.fromLink === 'true' ? 126 : 94
|
||||
})
|
||||
|
||||
const functionClass = computed(() => {
|
||||
let result = 'link-bar-main-light'
|
||||
if (canvasStyleData.value?.dashboard?.themeColor === 'dark') {
|
||||
result = 'link-bar-main-dark'
|
||||
}
|
||||
return result
|
||||
})
|
||||
|
||||
const fromLink = computed(() => {
|
||||
return router.currentRoute.value.query?.fromLink === 'true'
|
||||
})
|
||||
|
||||
const firstBarClick = () => {
|
||||
state.barActive = !state.barActive
|
||||
}
|
||||
const toggleFullscreen = () => {
|
||||
if (!document.fullscreenElement) {
|
||||
// 如果当前不是全屏状态，则启动全屏
|
||||
useEmitt().emitter.emit('canvasFullscreen')
|
||||
} else {
|
||||
// 如果当前是全屏状态，则退出全屏
|
||||
document.exitFullscreen().catch(error => {
|
||||
console.error('Exit fullscreen failed:', error)
|
||||
})
|
||||
}
|
||||
}
|
||||
const back2Last = () => {
|
||||
const parentUrl = localStorage.getItem('beforeJumpUrl')
|
||||
localStorage.removeItem('beforeJumpUrl')
|
||||
window.location.href = parentUrl
|
||||
window.location.reload()
|
||||
}
|
||||
const exportPDF = () => {
|
||||
useEmitt().emitter.emit('canvasDownload')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.link-bar-main {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
z-index: 10;
|
||||
height: 30px;
|
||||
width: var(--fullWidth);
|
||||
bottom: 24px;
|
||||
right: var(--fullContent);
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
|
||||
&:hover {
|
||||
right: var(--firstHoveMove);
|
||||
}
|
||||
|
||||
transition: 0.2s; /* 添加过渡动画 */
|
||||
}
|
||||
|
||||
.link-bar-main-light {
|
||||
color: rgba(31, 35, 41, 1);
|
||||
|
||||
.bar-first {
|
||||
border-left: 1px solid rgba(222, 224, 227, 1);
|
||||
border-top: 1px solid rgba(222, 224, 227, 1);
|
||||
border-bottom: 1px solid rgba(222, 224, 227, 1);
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.bar-content {
|
||||
border-top: 1px solid rgba(222, 224, 227, 1);
|
||||
border-bottom: 1px solid rgba(222, 224, 227, 1);
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
|
||||
.bar-diver {
|
||||
background: rgba(187, 191, 196, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link-bar-main-dark {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
|
||||
.bar-first {
|
||||
border-left: 1px solid rgba(67, 67, 67, 1);
|
||||
border-top: 1px solid rgba(67, 67, 67, 1);
|
||||
border-bottom: 1px solid rgba(67, 67, 67, 1);
|
||||
background-color: rgba(26, 26, 26, 1);
|
||||
}
|
||||
|
||||
.bar-content {
|
||||
border-top: 1px solid rgba(67, 67, 67, 1);
|
||||
border-bottom: 1px solid rgba(67, 67, 67, 1);
|
||||
background-color: rgba(26, 26, 26, 1);
|
||||
|
||||
.bar-diver {
|
||||
background: rgba(95, 95, 95, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link-bar-main-active {
|
||||
right: 0px !important;
|
||||
transition: 0.2s; /* 添加过渡动画 */
|
||||
}
|
||||
|
||||
.bar-first {
|
||||
width: 36px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
padding: 4px 0 4px 8px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: rgba(31, 35, 41, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.bar-diver {
|
||||
width: 1px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.bar-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.link-icon-active {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
transition: 0.1s;
|
||||
border-radius: 3px;
|
||||
padding-top: 2px;
|
||||
padding-left: 2px;
|
||||
padding-right: 2px;
|
||||
margin-left: 4px;
|
||||
text-align: center;
|
||||
|
||||
&:active {
|
||||
color: #000;
|
||||
border-color: #3a8ee6;
|
||||
background-color: red;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(31, 35, 41, 0.1);
|
||||
color: #3a8ee6;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -21,6 +21,27 @@
|
||||
</div>
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
|
||||
<el-checkbox
|
||||
size="small"
|
||||
:effect="themes"
|
||||
v-model="canvasStyleData.suspensionButtonAvailable"
|
||||
@change="onPopButtonChange"
|
||||
>
|
||||
<div style="display: flex; line-height: 14px">
|
||||
<span style="margin-right: 4px">显示放大、导出等悬浮按钮</span>
|
||||
<el-tooltip class="item" :effect="themes" placement="bottom">
|
||||
<template #content>
|
||||
<div>预览时启用</div>
|
||||
</template>
|
||||
<el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
|
||||
<Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -217,6 +217,10 @@ export function historyAdaptor(
|
||||
//历史字段适配
|
||||
canvasStyleResult.component['seniorStyleSetting'] =
|
||||
canvasStyleResult.component['seniorStyleSetting'] || deepCopy(SENIOR_STYLE_SETTING_LIGHT)
|
||||
canvasStyleResult['suspensionButtonAvailable'] =
|
||||
canvasStyleResult['suspensionButtonAvailable'] === undefined
|
||||
? false
|
||||
: canvasStyleResult['suspensionButtonAvailable']
|
||||
canvasStyleResult['screenAdaptor'] = canvasStyleResult['screenAdaptor'] || 'widthFirst'
|
||||
canvasStyleResult['refreshBrowserEnable'] =
|
||||
canvasStyleResult['refreshBrowserEnable'] === undefined
|
||||
|
||||
@ -89,6 +89,7 @@ export const DEFAULT_CANVAS_STYLE_DATA_BASE = {
|
||||
refreshTime: 5, // 仪表板刷新时间 默认5分钟
|
||||
popupAvailable: true, // 弹窗区域是否可用 默认为true
|
||||
popupButtonAvailable: true, // 弹框区域显示按钮是否可用 默认为true
|
||||
suspensionButtonAvailable: false, // 悬浮按钮是否可用 默认false
|
||||
screenAdaptor: 'widthFirst', // 屏幕适配方式 widthFirst=宽度优先 heightFirst=高度优先 full=铺满全屏 keepSize=不缩放
|
||||
scale: 60,
|
||||
scaleWidth: 60,
|
||||
|
||||
@ -470,7 +470,9 @@ const jumpClick = param => {
|
||||
if (jumpInfo.publicJumpId) {
|
||||
const url = `${embeddedBaseUrl}#/de-link/${
|
||||
jumpInfo.publicJumpId
|
||||
}?jumpInfoParam=${encodeURIComponent(Base64.encode(JSON.stringify(param)))}`
|
||||
}?fromLink=true&jumpInfoParam=${encodeURIComponent(
|
||||
Base64.encode(JSON.stringify(param))
|
||||
)}`
|
||||
const currentUrl = window.location.href
|
||||
localStorage.setItem('beforeJumpUrl', currentUrl)
|
||||
windowsJump(url, jumpInfo.jumpType, jumpInfo.windowSize)
|
||||
@ -480,8 +482,9 @@ const jumpClick = param => {
|
||||
} else {
|
||||
const url = `${embeddedBaseUrl}#/preview?dvId=${
|
||||
jumpInfo.targetDvId
|
||||
}&jumpInfoParam=${encodeURIComponent(Base64.encode(JSON.stringify(param)))}`
|
||||
|
||||
}&fromLink=true&jumpInfoParam=${encodeURIComponent(Base64.encode(JSON.stringify(param)))}`
|
||||
const currentUrl = window.location.href
|
||||
localStorage.setItem('beforeJumpUrl', currentUrl)
|
||||
if (isIframe.value || isDataEaseBi.value) {
|
||||
embeddedStore.clearState()
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user