<script lang="ts" setup>
|
import { ref, reactive, onBeforeMount, nextTick, inject } from 'vue'
|
import { initCanvasData, initCanvasDataMobile, onInitReady } from '@/utils/canvasUtils'
|
import { interactiveStoreWithOut } from '@/store/modules/interactive'
|
import router from '@/router/mobile'
|
import { useEmbedded } from '@/store/modules/embedded'
|
import { isMobile } from '@/utils/utils'
|
import { check } from '@/utils/CrossPermission'
|
import { useEmitt } from '@/hooks/web/useEmitt'
|
import { useCache } from '@/hooks/web/useCache'
|
import { getOuterParamsInfo } from '@/api/visualization/outerParams'
|
import { ElMessage } from 'element-plus-secondary'
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
import { useI18n } from '@/hooks/web/useI18n'
|
import request from '@/config/axios'
|
import 'vant/es/nav-bar/style'
|
import 'vant/es/sticky/style'
|
import EmptyBackground from '../../components/empty-background/src/EmptyBackground.vue'
|
const { wsCache } = useCache()
|
const interactiveStore = interactiveStoreWithOut()
|
const embeddedStore = useEmbedded()
|
const dashboardPreview = ref(null)
|
const embeddedParamsDiv = inject('embeddedParams') as object
|
|
const embeddedParams = embeddedParamsDiv?.dvId ? embeddedParamsDiv : embeddedStore
|
const { t } = useI18n()
|
const state = reactive({
|
canvasDataPreview: null,
|
canvasStylePreview: null,
|
canvasViewInfoPreview: null,
|
dvInfo: null,
|
curPreviewGap: 0,
|
initState: true
|
})
|
const dvMainStore = dvMainStoreWithOut()
|
|
const checkPer = async resourceId => {
|
if (!window.DataEaseBi || !resourceId) {
|
return true
|
}
|
const request = { busiFlag: embeddedParams.busiFlag }
|
await interactiveStore.setInteractive(request)
|
const key = embeddedParams.busiFlag === 'dataV' ? 'screen-weight' : 'panel-weight'
|
return check(wsCache.get(key), resourceId, 1)
|
}
|
const isPc = ref(true)
|
onBeforeMount(async () => {
|
const checkResult = await checkPer(embeddedParams.dvId)
|
if (!checkResult) {
|
return
|
}
|
let tokenInfo = null
|
if (embeddedStore.getToken && !Object.keys((tokenInfo = embeddedStore.getTokenInfo)).length) {
|
const res = await request.get({ url: '/embedded/getTokenArgs' })
|
embeddedStore.setTokenInfo(res.data)
|
tokenInfo = embeddedStore.getTokenInfo
|
}
|
// 添加外部参数
|
let attachParams
|
try {
|
await getOuterParamsInfo(embeddedParams.dvId).then(rsp => {
|
dvMainStore.setNowPanelOuterParamsInfoV2(rsp.data, embeddedParams.dvId)
|
})
|
} catch (error) {
|
if (error.status === 401) {
|
return
|
}
|
}
|
|
// div嵌入
|
if (embeddedParams.outerParams) {
|
try {
|
const outerPramsParse = JSON.parse(embeddedParams.outerParams)
|
attachParams = outerPramsParse.attachParams
|
dvMainStore.setEmbeddedCallBack(outerPramsParse.callBackFlag || 'no')
|
} catch (e) {
|
console.error(e)
|
ElMessage.error(t('visualization.outer_param_decode_error'))
|
return
|
}
|
}
|
if (tokenInfo && Object.keys(tokenInfo).length) {
|
attachParams = Object.assign({}, attachParams, tokenInfo)
|
}
|
|
isPc.value = !isMobile()
|
const req = isPc.value ? initCanvasData : initCanvasDataMobile
|
|
req(
|
embeddedParams.dvId,
|
{ busiFlag: embeddedParams.busiFlag },
|
function ({
|
canvasDataResult,
|
canvasStyleResult,
|
dvInfo,
|
canvasViewInfoPreview,
|
curPreviewGap
|
}) {
|
if (!isPc.value) {
|
if (dvInfo.mobileLayout) {
|
dvMainStore.setMobileInPc(true)
|
dvMainStore.setInMobile(true)
|
}
|
}
|
state.canvasDataPreview = canvasDataResult
|
state.canvasStylePreview = canvasStyleResult
|
state.canvasViewInfoPreview = canvasViewInfoPreview
|
state.dvInfo = dvInfo
|
state.curPreviewGap = curPreviewGap
|
nextTick(() => {
|
dashboardPreview.value.restore()
|
onInitReady({ resourceId: embeddedParams.dvId })
|
})
|
state.initState = false
|
dvMainStore.addOuterParamsFilter(attachParams, canvasDataResult, 'outer')
|
state.initState = true
|
}
|
)
|
})
|
</script>
|
|
<template>
|
<div
|
:class="isPc ? 'dashboard-preview' : 'dv-common-layout-mobile_embedded'"
|
v-if="state.canvasStylePreview && state.initState"
|
>
|
<de-preview
|
ref="dashboardPreview"
|
:dv-info="state.dvInfo"
|
:cur-gap="state.curPreviewGap"
|
:component-data="state.canvasDataPreview"
|
:canvas-style-data="state.canvasStylePreview"
|
:canvas-view-info="state.canvasViewInfoPreview"
|
show-position="preview"
|
></de-preview>
|
</div>
|
<empty-background v-if="!state.initState" description="参数不能为空" img-type="noneWhite" />
|
</template>
|
|
<style lang="less" scoped>
|
.dashboard-preview {
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
<style lang="less">
|
.dv-common-layout-mobile_embedded {
|
width: 100%;
|
height: 100%;
|
overflow-y: auto;
|
--van-nav-bar-height: 44px;
|
--van-nav-bar-arrow-size: 20px;
|
--van-nav-bar-icon-color: #1f2329;
|
--van-nav-bar-title-text-color: #1f2329;
|
--van-font-bold: 500;
|
--van-nav-bar-title-font-size: 17px;
|
}
|
</style>
|
