feat(仪表板、数据大屏): 支持网页组件向外层仪表板传递参数

This commit is contained in:
wangjiahao 2024-12-06 17:36:58 +08:00
parent 617b0f6c1a
commit 603118b601
7 changed files with 97 additions and 13 deletions

View File

@ -233,6 +233,12 @@ public class ChartDataManage {
filters.addAll(chartExtRequest.getOuterParamsFilters());
}
// web参数条件
if (ObjectUtils.isNotEmpty(chartExtRequest.getOuterParamsFilters())) {
filters.addAll(chartExtRequest.getWebParamsFilters());
}
//联动过滤条件和外部参数过滤条件全部加上
if (ObjectUtils.isNotEmpty(filters)) {
for (ChartExtFilterDTO request : filters) {

View File

@ -78,6 +78,14 @@ public class DatasetSQLManage {
filterParametersAdaptor(parameters, filterDTO, datasetTableId);
}
}
if (chartExtRequest != null && ObjectUtils.isNotEmpty(chartExtRequest.getWebParamsFilters())) {
for (ChartExtFilterDTO filterDTO : chartExtRequest.getWebParamsFilters()) {
if (CollectionUtils.isEmpty(filterDTO.getValue())) {
continue;
}
filterParametersAdaptor(parameters, filterDTO, datasetTableId);
}
}
if (chartExtRequest != null && ObjectUtils.isNotEmpty(chartExtRequest.getFilter())) {
for (ChartExtFilterDTO filterDTO : chartExtRequest.getFilter()) {
if (CollectionUtils.isEmpty(filterDTO.getValue())) {

View File

@ -318,18 +318,25 @@ const initWatermark = (waterDomId = 'preview-canvas-main') => {
// targetSourceId ID
const winMsgHandle = event => {
const msgInfo = event.data
// targetSourceId
if (
msgInfo &&
msgInfo.type === 'attachParams' &&
msgInfo.targetSourceId === dvInfo.value.id + '' &&
isMainCanvas(canvasId.value)
) {
const attachParams = msgInfo.params
state.initState = false
dvMainStore.addOuterParamsFilter(attachParams, baseComponentData.value, 'outer')
state.initState = true
}
if (msgInfo?.targetSourceId === dvInfo.value.id + '' && isMainCanvas(canvasId.value))
if (msgInfo.type === 'attachParams') {
winMsgOuterParamsHandle(event)
} else if (msgInfo.type === 'webParams') {
//
winMsgWebParamsHandle(msgInfo)
}
}
const winMsgWebParamsHandle = msgInfo => {
const params = msgInfo.params
dvMainStore.addWebParamsFilter(params, baseComponentData.value)
}
const winMsgOuterParamsHandle = msgInfo => {
const attachParams = msgInfo.params
state.initState = false
dvMainStore.addOuterParamsFilter(attachParams, baseComponentData.value, 'outer')
state.initState = true
}
onMounted(() => {

View File

@ -15,7 +15,6 @@ import {
import { useEmitt } from '@/hooks/web/useEmitt'
import chartViewManager from '@/views/chart/components/js/panel'
import {
COMMON_COMPONENT_BACKGROUND_BASE,
COMMON_COMPONENT_BACKGROUND_DARK,
COMMON_COMPONENT_BACKGROUND_LIGHT,
defaultStyleValue,
@ -1016,6 +1015,29 @@ export const dvMainStore = defineStore('dataVisualization', {
useEmitt().emitter.emit('query-data-' + viewId)
})
},
addWebParamsFilter(params, curComponentData = this.componentData) {
if (params) {
for (let index = 0; index < curComponentData.length; index++) {
const element = curComponentData[index]
if (['UserView'].includes(element.component)) {
this.trackWebFilterCursor(element, params)
this.componentData[index] = element
} else if (element.component === 'Group') {
element.propValue.forEach((groupItem, index) => {
this.trackWebFilterCursor(groupItem, params)
element.propValue[index] = groupItem
})
} else if (element.component === 'DeTabs') {
element.propValue.forEach(tabItem => {
tabItem.componentData.forEach((tabComponent, index) => {
this.trackWebFilterCursor(tabComponent, params)
tabItem.componentData[index] = tabComponent
})
})
}
}
}
},
// 添加外部参数的过滤条件
addOuterParamsFilter(paramsPre, curComponentData = this.componentData, source = 'inner') {
// params 结构 {key1:value1,key2:value2}
@ -1087,6 +1109,13 @@ export const dvMainStore = defineStore('dataVisualization', {
}
}
},
trackWebFilterCursor(element, params) {
if (params[element.id]) {
const currentFilters = []
currentFilters.push(params[element.id])
element['webParamsFilters'] = currentFilters
}
},
trackOuterFilterCursor(element, params, preActiveComponentIds, trackInfo, source) {
// 弹窗区域禁用时 在弹窗区域的组件不生效
if (

View File

@ -182,6 +182,7 @@ onMounted(async () => {
}
})
window.addEventListener('storage', eventCheck)
window.addEventListener('message', winMsgHandle)
const resourceId = embeddedStore.resourceId || router.currentRoute.value.query.resourceId
const pid = embeddedStore.pid || router.currentRoute.value.query.pid
const opt = embeddedStore.opt || router.currentRoute.value.query.opt
@ -251,8 +252,24 @@ onMounted(async () => {
}
})
// targetSourceId ID
const winMsgHandle = event => {
const msgInfo = event.data
if (msgInfo?.targetSourceId === dvInfo.value.id + '')
if (msgInfo.type === 'webParams') {
//
winMsgWebParamsHandle(msgInfo)
}
}
const winMsgWebParamsHandle = msgInfo => {
const params = msgInfo.params
dvMainStore.addWebParamsFilter(params)
}
onUnmounted(() => {
window.removeEventListener('storage', eventCheck)
window.removeEventListener('message', winMsgHandle)
})
</script>

View File

@ -336,6 +336,20 @@ const checkPer = async resourceId => {
await interactiveStore.setInteractive(request)
return check(wsCache.get('screen-weight'), resourceId, 4)
}
// targetSourceId ID
const winMsgHandle = event => {
const msgInfo = event.data
if (msgInfo?.targetSourceId === dvInfo.value.id + '')
if (msgInfo.type === 'webParams') {
//
winMsgWebParamsHandle(msgInfo)
}
}
const winMsgWebParamsHandle = msgInfo => {
const params = msgInfo.params
dvMainStore.addWebParamsFilter(params)
}
const loadFinish = ref(false)
const newWindowFromDiv = ref(false)
@ -349,6 +363,7 @@ onMounted(async () => {
await new Promise(r => (p = r))
loadFinish.value = true
window.addEventListener('blur', releaseAttachKey)
window.addEventListener('message', winMsgHandle)
if (editMode.value === 'edit') {
window.addEventListener('storage', eventCheck)
}

View File

@ -16,6 +16,8 @@ public class ChartExtRequest {
private List<ChartExtFilterDTO> outerParamsFilters;
private List<ChartExtFilterDTO> webParamsFilters;
private List<ChartDrillRequest> drill;
private String queryFrom;