<script setup lang="ts">
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
|
import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
|
import router from '@/router'
|
import { useEmitt } from '@/hooks/web/useEmitt'
|
import { initCanvasData, onInitReady } from '@/utils/canvasUtils'
|
import { queryTargetVisualizationJumpInfo } from '@/api/visualization/linkJump'
|
import { Base64 } from 'js-base64'
|
import { getOuterParamsInfo } from '@/api/visualization/outerParams'
|
import { ElMessage } from 'element-plus-secondary'
|
import { useEmbedded } from '@/store/modules/embedded'
|
import { useI18n } from '@/hooks/web/useI18n'
|
import { XpackComponent } from '@/components/plugin'
|
import { propTypes } from '@/utils/propTypes'
|
import { downloadCanvas2 } from '@/utils/imgUtils'
|
import { isLink, setTitle } from '@/utils/utils'
|
import EmptyBackground from '../../components/empty-background/src/EmptyBackground.vue'
|
import { useRoute } from 'vue-router_2'
|
import { filterEnumMapSync } from '@/utils/componentUtils'
|
import CanvasOptBar from '@/components/visualization/CanvasOptBar.vue'
|
import DvPreview from '@/views/data-visualization/DvPreview.vue'
|
const routeWatch = useRoute()
|
|
const dvMainStore = dvMainStoreWithOut()
|
const { t } = useI18n()
|
const embeddedStore = useEmbedded()
|
const previewCanvasContainer = ref(null)
|
const downloadStatus = ref(false)
|
const state = reactive({
|
canvasDataPreview: null,
|
canvasStylePreview: null,
|
canvasViewInfoPreview: null,
|
dvInfo: null,
|
curPreviewGap: 0,
|
initState: true,
|
editPreview: false,
|
showPosition: 'preview',
|
showOffset: {
|
top: 3,
|
left: 3
|
},
|
containerMainHeight: '1000px'
|
})
|
|
const props = defineProps({
|
publicLinkStatus: {
|
type: Boolean,
|
required: false,
|
default: false
|
},
|
isSelector: {
|
type: Boolean,
|
default: false
|
},
|
outerId: {
|
type: Boolean,
|
default: false
|
},
|
ticketArgs: propTypes.string.def(null)
|
})
|
|
const loadCanvasDataAsync = async (dvId, dvType, ignoreParams = false) => {
|
const jumpInfoParam = embeddedStore.jumpInfoParam || router.currentRoute.value.query.jumpInfoParam
|
let jumpParam
|
// 获取外部跳转参数
|
if (jumpInfoParam) {
|
jumpParam = JSON.parse(Base64.decode(decodeURIComponent(jumpInfoParam)))
|
const jumpRequestParam = {
|
sourceDvId: jumpParam.sourceDvId,
|
sourceViewId: jumpParam.sourceViewId,
|
sourceFieldId: null,
|
targetDvId: dvId,
|
resourceTable: state.editPreview ? 'snapshot' : 'core'
|
}
|
try {
|
// 刷新跳转目标仪表板联动信息
|
await queryTargetVisualizationJumpInfo(jumpRequestParam).then(rsp => {
|
dvMainStore.setNowTargetPanelJumpInfo(rsp.data)
|
})
|
} catch (e) {
|
console.error(e)
|
}
|
}
|
|
let argsObject = null
|
try {
|
argsObject = JSON.parse(props.ticketArgs)
|
} catch (error) {
|
console.error(error)
|
}
|
const hasTicketArgs = argsObject && Object.keys(argsObject)
|
|
// 添加外部参数
|
let attachParam
|
await getOuterParamsInfo(dvId).then(rsp => {
|
dvMainStore.setNowPanelOuterParamsInfoV2(rsp.data, dvId)
|
})
|
|
// 外部参数（iframe 或者 iframe嵌入）
|
const attachParamsEncode = router.currentRoute.value.query.attachParams
|
if (attachParamsEncode || hasTicketArgs) {
|
try {
|
if (!!attachParamsEncode) {
|
attachParam = JSON.parse(Base64.decode(decodeURIComponent(attachParamsEncode)))
|
}
|
if (hasTicketArgs) {
|
attachParam = Object.assign({}, attachParam, argsObject)
|
}
|
} catch (e) {
|
console.error(e)
|
ElMessage.error(t('visualization.outer_param_decode_error'))
|
}
|
}
|
|
const initBrowserTimer = () => {
|
if (state.canvasStylePreview.refreshBrowserEnable && isLink()) {
|
const gap = state.canvasStylePreview.refreshBrowserUnit === 'minute' ? 60 : 1
|
const browserRefreshTime = state.canvasStylePreview.refreshBrowserTime * gap * 1000
|
setTimeout(() => {
|
window.location.reload()
|
}, browserRefreshTime)
|
}
|
}
|
|
await initCanvasData(
|
dvId,
|
{
|
busiFlag: dvType,
|
resourceTable: state.editPreview ? 'snapshot' : 'core',
|
onlyPreview: !!props.outerId
|
},
|
async function ({
|
canvasDataResult,
|
canvasStyleResult,
|
dvInfo,
|
canvasViewInfoPreview,
|
curPreviewGap
|
}) {
|
state.dvInfo = dvInfo
|
if (state.dvInfo.status) {
|
if (jumpParam || (!ignoreParams && attachParam)) {
|
await filterEnumMapSync(canvasDataResult)
|
}
|
}
|
state.canvasDataPreview = canvasDataResult
|
state.canvasStylePreview = canvasStyleResult
|
state.canvasViewInfoPreview = canvasViewInfoPreview
|
if (state.editPreview) {
|
state.dvInfo.status = 1
|
}
|
state.curPreviewGap = curPreviewGap
|
if (state.dvInfo.status) {
|
if (jumpParam) {
|
dvMainStore.addViewTrackFilter(jumpParam)
|
}
|
if (!ignoreParams) {
|
state.initState = false
|
dvMainStore.addOuterParamsFilter(attachParam)
|
state.initState = true
|
}
|
}
|
|
if (props.publicLinkStatus) {
|
// 设置浏览器title为当前仪表板名称
|
document.title = dvInfo.name
|
setTitle(dvInfo.name)
|
}
|
initBrowserTimer()
|
await nextTick(() => {
|
onInitReady({ resourceId: dvId })
|
})
|
}
|
)
|
}
|
|
const downloadH2 = type => {
|
downloadStatus.value = true
|
nextTick(() => {
|
const vueDom = previewCanvasContainer.value.querySelector('.canvas-container')
|
downloadCanvas2(type, vueDom, state.dvInfo.name, () => {
|
downloadStatus.value = false
|
})
|
})
|
}
|
// 监听路由变化
|
// 监听路由变化
|
watch(
|
() => ({ path: routeWatch.path, params: routeWatch.params }),
|
() => {
|
location.reload() // 重新加载浏览器页面
|
},
|
{ deep: true }
|
)
|
|
let p = null
|
let p1 = null
|
const XpackLoaded = () => p(true)
|
const initIframe = () => p1(true)
|
onMounted(async () => {
|
useEmitt({
|
name: 'canvasDownload',
|
callback: function (type = 'img') {
|
downloadH2(type)
|
}
|
})
|
await Promise.all([new Promise(r => (p = r)), new Promise(r => (p1 = r))])
|
let dvId = props.outerId || embeddedStore.dvId || router.currentRoute.value.query.dvId
|
if (router.currentRoute.value.query.jumpInfoParam && router.currentRoute.value.query.dvId) {
|
dvId = router.currentRoute.value.query.dvId
|
}
|
// 检查外部参数
|
const ignoreParams = router.currentRoute.value.query.ignoreParams === 'true'
|
const isPopWindow = router.currentRoute.value.query.popWindow === 'true'
|
const isFrameFlag = window.self !== window.top
|
state.editPreview = router.currentRoute.value.query.editPreview === 'true'
|
dvMainStore.setIframeFlag(isFrameFlag)
|
dvMainStore.setIsPopWindow(isPopWindow)
|
state.showPosition = state.editPreview ? 'edit-preview' : 'preview'
|
const { dvType, callBackFlag, taskId, showWatermark } = router.currentRoute.value.query
|
if (!!taskId) {
|
dvMainStore.setCanvasAttachInfo({ taskId, showWatermark })
|
}
|
if (dvId) {
|
await loadCanvasDataAsync(dvId, dvType, ignoreParams)
|
return
|
}
|
dvMainStore.setEmbeddedCallBack(callBackFlag || 'no')
|
|
window.matchMedia('print').addListener(async mql => {
|
if (mql.matches) {
|
await prepareForPrint()
|
}
|
})
|
})
|
|
const dataVKeepSize = computed(() => {
|
return state.canvasStylePreview?.screenAdaptor === 'keep'
|
})
|
|
const freezeStyle = computed(() => {
|
return [
|
{ '--top-show-offset': state.showOffset.top },
|
{ '--left-show-offset': state.showOffset.left },
|
{ '--print-height': state.containerMainHeight }
|
]
|
})
|
|
const dvPreview = ref(null)
|
const getPrintHeight = async () => {
|
if (dvPreview.value) {
|
state.containerMainHeight = await dvPreview.value.getDownloadStatusMainHeightV2()
|
}
|
}
|
|
// 打印前准备
|
const prepareForPrint = async () => {
|
await getPrintHeight()
|
}
|
|
// 暴露方法给外部调用打印
|
const handlePrint = async () => {
|
await prepareForPrint()
|
window.print()
|
}
|
defineExpose({
|
loadCanvasDataAsync
|
})
|
</script>
|
|
<template>
|
<div
|
class="content"
|
v-loading="!state.initState"
|
:class="{ 'canvas_keep-size': dataVKeepSize }"
|
ref="previewCanvasContainer"
|
:style="freezeStyle"
|
>
|
<canvas-opt-bar
|
style="position: fixed"
|
canvas-id="canvas-main"
|
:canvas-style-data="state.canvasStylePreview || {}"
|
:component-data="state.canvasDataPreview || []"
|
></canvas-opt-bar>
|
<dv-preview
|
ref="dvPreviewRef"
|
style="height: 100vh"
|
v-if="state.canvasStylePreview && state.initState && state.dvInfo?.type === 'dataV'"
|
:canvas-data-preview="state.canvasDataPreview"
|
:canvas-style-preview="state.canvasStylePreview"
|
:canvas-view-info-preview="state.canvasViewInfoPreview"
|
:dv-info="state.dvInfo"
|
:cur-preview-gap="state.curPreviewGap"
|
:is-selector="props.isSelector"
|
:download-status="downloadStatus"
|
:show-pop-bar="true"
|
:show-position="state.showPosition"
|
:show-linkage-button="false"
|
></dv-preview>
|
<de-preview
|
ref="dvPreview"
|
v-if="state.canvasStylePreview && state.initState && state.dvInfo?.type === 'dashboard'"
|
:component-data="state.canvasDataPreview"
|
:canvas-style-data="state.canvasStylePreview"
|
:canvas-view-info="state.canvasViewInfoPreview"
|
:dv-info="state.dvInfo"
|
:cur-gap="state.curPreviewGap"
|
:is-selector="props.isSelector"
|
:download-status="downloadStatus"
|
:show-pop-bar="true"
|
:show-position="state.showPosition"
|
:show-linkage-button="false"
|
></de-preview>
|
<empty-background
|
v-if="!state.initState"
|
:description="t('visualization.no_params_tips')"
|
img-type="noneWhite"
|
/>
|
</div>
|
<XpackComponent
|
jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvTmV3V2luZG93SGFuZGxlcg=="
|
@loaded="XpackLoaded"
|
@load-fail="XpackLoaded"
|
/>
|
|
<XpackComponent
|
jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvRW50cmFuY2Vz"
|
@init-iframe="initIframe"
|
@load-fail="initIframe"
|
/>
|
</template>
|
|
<style lang="less">
|
@media print {
|
html,
|
body {
|
height: auto !important;
|
}
|
.content {
|
height: var(--print-height, auto) !important;
|
min-height: 0 !important;
|
}
|
}
|
</style>
|
|
<style lang="less" scoped>
|
::-webkit-scrollbar {
|
display: none;
|
}
|
.content {
|
position: relative;
|
background-color: #ffffff;
|
width: 100%;
|
height: 100vh;
|
align-items: center;
|
overflow-x: hidden;
|
overflow-y: auto;
|
}
|
</style>
|
