fix(嵌入式): 嵌入式局部刷新

This commit is contained in:
dataeaseShu 2024-05-24 16:48:59 +08:00
parent 38369fb648
commit e27a21d957
6 changed files with 127 additions and 23 deletions

View File

@ -1,6 +1,7 @@
<script setup lang="ts">
import { shallowRef, defineAsyncComponent } from 'vue'
import { propTypes } from '@/utils/propTypes'
import { useEmitt } from '@/hooks/web/useEmitt'
const VisualizationEditor = defineAsyncComponent(
() => import('@/views/data-visualization/index.vue')
@ -33,6 +34,15 @@ const componentMap = {
DashboardPanel
}
const changeCurrentComponent = val => {
currentComponent.value = componentMap[val]
}
useEmitt({
name: 'changeCurrentComponent',
callback: changeCurrentComponent
})
currentComponent.value = componentMap[props.componentName]
</script>
<template>

View File

@ -1,5 +1,6 @@
import { defineStore } from 'pinia'
import { store } from '../index'
import { clear } from '@/api/sync/syncTaskLog'
interface AppState {
type: string
token: string
@ -10,6 +11,9 @@ interface AppState {
pid: string
chartId: string
resourceId: string
opt: string
createType: string
templateParams: string
}
export const userStore = defineStore('embedded', {
@ -23,13 +27,22 @@ export const userStore = defineStore('embedded', {
dvId: '',
pid: '',
chartId: '',
resourceId: ''
resourceId: '',
opt: '',
createType: '',
templateParams: ''
}
},
getters: {
getType(): string {
return this.type
},
getCreateType(): string {
return this.createType
},
getTemplateParams(): string {
return this.templateParams
},
getToken(): string {
return this.token
},
@ -54,6 +67,9 @@ export const userStore = defineStore('embedded', {
getResourceId(): string {
return this.resourceId
},
getOpt(): string {
return this.opt
},
getIframeData(): any {
return {
embeddedToken: this.token,
@ -71,6 +87,12 @@ export const userStore = defineStore('embedded', {
setType(type: string) {
this.type = type
},
setCreateType(createType: string) {
this.createType = createType
},
setTemplateParams(templateParams: string) {
this.templateParams = templateParams
},
setToken(token: string) {
this.token = token
},
@ -95,6 +117,9 @@ export const userStore = defineStore('embedded', {
setResourceId(resourceId: string) {
this.resourceId = resourceId
},
setOpt(opt: string) {
this.opt = opt
},
setIframeData(data: any) {
this.type = data['type']
this.token = data['embeddedToken']
@ -104,6 +129,14 @@ export const userStore = defineStore('embedded', {
this.chartId = data['chartId']
this.pid = data['pid']
this.resourceId = data['resourceId']
},
clearState() {
this.setPid('')
this.setOpt('')
this.setCreateType('')
this.setTemplateParams('')
this.setResourceId('')
this.setDvId('')
}
}
})

View File

@ -3,6 +3,7 @@ import { onMounted, reactive, ref, toRefs, watch, nextTick, computed } from 'vue
import { copyResource, deleteLogic, ResourceOrFolder } from '@/api/visualization/dataVisualization'
import { ElIcon, ElMessage, ElMessageBox, ElScrollbar } from 'element-plus-secondary'
import { Icon } from '@/components/icon-custom'
import { useEmitt } from '@/hooks/web/useEmitt'
import { HandleMore } from '@/components/handle-more'
import DeResourceGroupOpt from '@/views/common/DeResourceGroupOpt.vue'
import { useEmbedded } from '@/store/modules/embedded'
@ -283,11 +284,23 @@ const operation = (cmd: string, data: BusiTreeNode, nodeType: string) => {
curCanvasType.value === 'dataV'
? `#/dvCanvas?opt=copy&pid=${params.pid}&dvId=${data.data}`
: `#/dashboard?opt=copy&pid=${params.pid}&resourceId=${data.data}`
let embeddedBaseUrl = ''
if (isDataEaseBi.value) {
embeddedBaseUrl = embeddedStore.baseUrl
embeddedStore.clearState()
embeddedStore.setPid(params.pid as string)
embeddedStore.setOpt('copy')
if (curCanvasType.value === 'dataV') {
embeddedStore.setDvId(data.data)
} else {
embeddedStore.setResourceId(data.data)
}
useEmitt().emitter.emit(
'changeCurrentComponent',
curCanvasType.value === 'dataV' ? 'VisualizationEditor' : 'Dashboard'
)
return
}
const newWindow = window.open(embeddedBaseUrl + baseUrl, '_blank')
const newWindow = window.open(baseUrl, '_blank')
initOpenHandler(newWindow)
})
} else {
@ -306,14 +319,22 @@ const addOperation = (
const baseUrl =
curCanvasType.value === 'dataV' ? '#/dvCanvas?opt=create' : '#/dashboard?opt=create'
let newWindow = null
let embeddedBaseUrl = ''
if (isDataEaseBi.value) {
embeddedBaseUrl = embeddedStore.baseUrl
embeddedStore.clearState()
embeddedStore.setOpt('create')
if (data?.id) {
embeddedStore.setPid(data?.id as string)
}
useEmitt().emitter.emit(
'changeCurrentComponent',
curCanvasType.value === 'dataV' ? 'VisualizationEditor' : 'Dashboard'
)
return
}
if (data?.id) {
newWindow = window.open(embeddedBaseUrl + baseUrl + `&pid=${data.id}`, '_blank')
newWindow = window.open(baseUrl + `&pid=${data.id}`, '_blank')
} else {
newWindow = window.open(embeddedBaseUrl + baseUrl, '_blank')
newWindow = window.open(baseUrl, '_blank')
}
initOpenHandler(newWindow)
} else if (cmd === 'newFromTemplate') {
@ -334,11 +355,20 @@ function createNewObject() {
const resourceEdit = resourceId => {
const baseUrl = curCanvasType.value === 'dataV' ? '#/dvCanvas?dvId=' : '#/dashboard?resourceId='
let embeddedBaseUrl = ''
if (isDataEaseBi.value) {
embeddedBaseUrl = embeddedStore.baseUrl
embeddedStore.clearState()
if (curCanvasType.value === 'dataV') {
embeddedStore.setDvId(resourceId)
} else {
embeddedStore.setResourceId(resourceId)
}
useEmitt().emitter.emit(
'changeCurrentComponent',
curCanvasType.value === 'dataV' ? 'VisualizationEditor' : 'Dashboard'
)
return
}
const newWindow = window.open(embeddedBaseUrl + baseUrl + resourceId, '_blank')
const newWindow = window.open(baseUrl + resourceId, '_blank')
initOpenHandler(newWindow)
}
@ -354,14 +384,23 @@ const resourceCreateFinish = templateData => {
? '#/dvCanvas?opt=create&createType=template'
: '#/dashboard?opt=create&createType=template'
let newWindow = null
let embeddedBaseUrl = ''
if (isDataEaseBi.value) {
embeddedBaseUrl = embeddedStore.baseUrl
embeddedStore.clearState()
embeddedStore.setOpt('create')
embeddedStore.setCreateType('template')
if (state.templateCreatePid) {
embeddedStore.setPid(state.templateCreatePid as unknown as string)
}
useEmitt().emitter.emit(
'changeCurrentComponent',
curCanvasType.value === 'dataV' ? 'VisualizationEditor' : 'Dashboard'
)
return
}
if (state.templateCreatePid) {
newWindow = window.open(embeddedBaseUrl + baseUrl + `&pid=${state.templateCreatePid}`, '_blank')
newWindow = window.open(baseUrl + `&pid=${state.templateCreatePid}`, '_blank')
} else {
newWindow = window.open(embeddedBaseUrl + baseUrl, '_blank')
newWindow = window.open(baseUrl, '_blank')
}
initOpenHandler(newWindow)
}

View File

@ -34,7 +34,7 @@ const canvasCacheOutRef = ref(null)
const eventCheck = e => {
if (e.key === 'panel-weight' && !compareStorage(e.oldValue, e.newValue)) {
const resourceId = embeddedStore.resourceId || router.currentRoute.value.query.resourceId
const { opt } = router.currentRoute.value.query
const opt = embeddedStore.opt || router.currentRoute.value.query.opt
if (!(opt && opt === 'create')) {
check(wsCache.get('panel-weight'), resourceId as string, 4)
}
@ -163,7 +163,10 @@ onMounted(async () => {
window.addEventListener('storage', eventCheck)
const resourceId = embeddedStore.resourceId || router.currentRoute.value.query.resourceId
const pid = embeddedStore.pid || router.currentRoute.value.query.pid
const { opt, createType, templateParams } = router.currentRoute.value.query
const opt = embeddedStore.opt || router.currentRoute.value.query.opt
const createType = embeddedStore.createType || router.currentRoute.value.query.createType
const templateParams =
embeddedStore.templateParams || router.currentRoute.value.query.templateParams
const checkResult = await checkPer(resourceId)
if (!checkResult) {
return

View File

@ -43,7 +43,7 @@ const embeddedStore = useEmbedded()
const { wsCache } = useCache()
const eventCheck = e => {
if (e.key === 'screen-weight' && !compareStorage(e.oldValue, e.newValue)) {
const { opt } = router.currentRoute.value.query
const opt = embeddedStore.opt || router.currentRoute.value.query.opt
if (!(opt && opt === 'create')) {
check(
wsCache.get('screen-weight'),
@ -270,7 +270,10 @@ onMounted(async () => {
}
const dvId = embeddedStore.dvId || router.currentRoute.value.query.dvId
const pid = embeddedStore.pid || router.currentRoute.value.query.pid
const { opt, createType, templateParams } = router.currentRoute.value.query
const templateParams =
embeddedStore.templateParams || router.currentRoute.value.query.templateParams
const createType = embeddedStore.createType || router.currentRoute.value.query.createType
const opt = embeddedStore.opt || router.currentRoute.value.query.opt
const checkResult = await checkPer(dvId)
if (!checkResult) {
return

View File

@ -174,6 +174,7 @@ import { imgUrlTrans } from '@/utils/imgUtils'
import CategoryTemplateV2 from '@/views/template-market/component/CategoryTemplateV2.vue'
import { interactiveStoreWithOut } from '@/store/modules/interactive'
import { XpackComponent } from '@/components/plugin'
import { useEmitt } from '@/hooks/web/useEmitt'
import { Base64 } from 'js-base64'
const { t } = useI18n()
const { wsCache } = useCache()
@ -434,14 +435,29 @@ const apply = template => {
'&templateParams=' +
encodeURIComponent(Base64.encode(JSON.stringify(templateTemplate)))
let newWindow = null
let embeddedBaseUrl = ''
if (isDataEaseBi.value) {
embeddedBaseUrl = embeddedStore.baseUrl
embeddedStore.clearState()
embeddedStore.setCreateType('template')
embeddedStore.setTemplateParams(
encodeURIComponent(Base64.encode(JSON.stringify(templateTemplate)))
)
embeddedStore.setOpt('create')
if (state.pid) {
embeddedStore.setPid(state.pid)
}
useEmitt().emitter.emit(
'changeCurrentComponent',
['dataV', 'SCREEN'].includes(state.dvCreateForm.nodeType)
? 'VisualizationEditor'
: 'Dashboard'
)
return
}
if (state.pid) {
newWindow = window.open(embeddedBaseUrl + baseUrl + `&pid=${state.pid}`, '_blank')
newWindow = window.open(baseUrl + `&pid=${state.pid}`, '_blank')
} else {
newWindow = window.open(embeddedBaseUrl + baseUrl, '_blank')
newWindow = window.open(baseUrl, '_blank')
}
initOpenHandler(newWindow)
}