<script lang="ts" setup>
|
import { ref, onBeforeMount, reactive, inject, nextTick } from 'vue'
|
import { initCanvasData, onInitReady } from '@/utils/canvasUtils'
|
import { interactiveStoreWithOut } from '@/store/modules/interactive'
|
import { useEmbedded } from '@/store/modules/embedded'
|
import { check } from '@/utils/CrossPermission'
|
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 { XpackComponent } from '@/components/plugin'
|
import EmptyBackground from '../../components/empty-background/src/EmptyBackground.vue'
|
import exeRequest from '@/config/axios'
|
const { wsCache } = useCache()
|
const interactiveStore = interactiveStoreWithOut()
|
const embeddedStore = useEmbedded()
|
const embeddedParamsDiv = inject('embeddedParams') as object
|
const config = ref()
|
const viewInfo = ref()
|
const userViewEnlargeRef = ref()
|
const dvMainStore = dvMainStoreWithOut()
|
const { t } = useI18n()
|
const openHandler = ref(null)
|
const state = reactive({
|
canvasDataPreview: null,
|
canvasStylePreview: null,
|
canvasViewInfoPreview: null,
|
dvInfo: null,
|
dvId: null,
|
suffixId: 'common',
|
initState: true
|
})
|
|
const embeddedParams = embeddedParamsDiv?.chartId ? embeddedParamsDiv : embeddedStore
|
|
// 目标校验： 需要校验targetSourceId 是否是当前可视化资源ID
|
const winMsgHandle = event => {
|
const msgInfo = event.data
|
|
// 校验targetSourceId
|
if (
|
msgInfo &&
|
msgInfo.type === 'attachParams' &&
|
msgInfo.targetSourceId === state.dvId + '' &&
|
(!msgInfo.suffixId || msgInfo.suffixId === state.suffixId)
|
) {
|
const attachParams = msgInfo.params
|
state.initState = false
|
dvMainStore.addOuterParamsFilter(attachParams, state.canvasDataPreview, 'outer')
|
state.initState = true
|
}
|
}
|
|
const checkPer = async resourceId => {
|
if (!window.DataEaseBi || !resourceId) {
|
return true
|
}
|
const request = { busiFlag: embeddedParams.busiFlag, resourceTable: 'core' }
|
await interactiveStore.setInteractive(request)
|
const key = embeddedParams.busiFlag === 'dataV' ? 'screen-weight' : 'panel-weight'
|
return check(wsCache.get(key), resourceId, 1)
|
}
|
onBeforeMount(async () => {
|
const checkResult = await checkPer(embeddedParams.dvId)
|
if (!checkResult) {
|
return
|
}
|
state.dvId = embeddedParams.dvId
|
state.suffixId = embeddedParams.suffixId || 'common'
|
window.addEventListener('message', winMsgHandle)
|
|
let tokenInfo = null
|
if (embeddedStore.getToken && !Object.keys((tokenInfo = embeddedStore.getTokenInfo)).length) {
|
const res = await exeRequest.get({ url: '/embedded/getTokenArgs' })
|
embeddedStore.setTokenInfo(res.data)
|
tokenInfo = embeddedStore.getTokenInfo
|
}
|
|
// 添加外部参数
|
let attachParams
|
await getOuterParamsInfo(embeddedParams.dvId).then(rsp => {
|
dvMainStore.setNowPanelOuterParamsInfoV2(rsp.data, embeddedParams.dvId)
|
})
|
|
// 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)
|
}
|
const chartId = embeddedParams?.chartId
|
|
initCanvasData(
|
embeddedParams.dvId,
|
{ busiFlag: embeddedParams.busiFlag },
|
function ({ canvasDataResult, canvasStyleResult, dvInfo, canvasViewInfoPreview }) {
|
state.canvasDataPreview = canvasDataResult
|
state.canvasStylePreview = canvasStyleResult
|
state.canvasViewInfoPreview = canvasViewInfoPreview
|
state.dvInfo = dvInfo
|
state.initState = false
|
dvMainStore.addOuterParamsFilter(attachParams, canvasDataResult)
|
state.initState = true
|
|
viewInfo.value = canvasViewInfoPreview[chartId]
|
;(
|
(canvasDataResult as unknown as Array<{
|
id: string
|
component: string
|
propValue: Array<{ id: string }>
|
}>) || []
|
).some(ele => {
|
if (ele.id === chartId) {
|
config.value = ele
|
return true
|
} else if (ele.component === 'Group') {
|
return (ele.propValue || []).some(itx => {
|
if (itx.id === chartId) {
|
config.value = itx
|
return true
|
}
|
return false
|
})
|
} else if (ele.component === 'DeTabs') {
|
ele.propValue.forEach(tabItem => {
|
return (tabItem.componentData || []).some(itx => {
|
if (itx.id === chartId) {
|
config.value = itx
|
return true
|
}
|
return false
|
})
|
})
|
}
|
return false
|
})
|
nextTick(() => {
|
onInitReady({ resourceId: chartId })
|
})
|
}
|
)
|
})
|
const userViewEnlargeOpen = opt => {
|
userViewEnlargeRef.value.dialogInit(state.canvasStylePreview, viewInfo.value, config.value, opt)
|
}
|
|
const onPointClick = param => {
|
try {
|
console.info('de_inner_params send')
|
if (window['dataease-embedded-host'] && openHandler?.value) {
|
const pm = {
|
methodName: 'embeddedInteractive',
|
args: {
|
eventName: 'de_inner_params',
|
args: param
|
}
|
}
|
openHandler.value.invokeMethod(pm)
|
} else {
|
console.info('de_inner_params send to host')
|
const targetPm = {
|
type: 'dataease-embedded-interactive',
|
eventName: 'de_inner_params',
|
args: param
|
}
|
window.parent.postMessage(targetPm, '*')
|
}
|
} catch (e) {
|
console.warn('de_inner_params send error')
|
}
|
}
|
</script>
|
|
<template>
|
<div class="de-view-wrapper" v-if="!!config && state.initState">
|
<ComponentWrapper
|
style="width: 100%; height: 100%"
|
:view-info="viewInfo"
|
:config="config"
|
:canvas-style-data="state.canvasStylePreview"
|
:dv-info="state.dvInfo"
|
:canvas-view-info="state.canvasViewInfoPreview"
|
@userViewEnlargeOpen="userViewEnlargeOpen"
|
@onPointClick="onPointClick"
|
:suffix-id="state.suffixId"
|
/>
|
<user-view-enlarge ref="userViewEnlargeRef"></user-view-enlarge>
|
</div>
|
<empty-background v-if="!state.initState" description="参数不能为空" img-type="noneWhite" />
|
<XpackComponent ref="openHandler" jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI=" />
|
</template>
|
|
<style lang="less" scoped>
|
.de-view-wrapper {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
}
|
</style>
|
