feat(仪表板、数据大屏): 跳转支持携带过滤参数#12866
This commit is contained in:
wangjiahao
parent
d6264c0e1b
commit
3c97aab17a
@ -21,11 +21,11 @@ public class MybatisPlusGenerator {
|
||||
/**
|
||||
* 业务模块例如datasource,dataset,panel等
|
||||
*/
|
||||
private static final String busi = "chart";
|
||||
private static final String busi = "visualization";
|
||||
/**
|
||||
* 这是要生成代码的表名称
|
||||
*/
|
||||
private static final String TABLE_NAME = "core_chart_view";
|
||||
private static final String TABLE_NAME = "visualization_link_jump_target_view_info";
|
||||
|
||||
/**
|
||||
* 下面两个配置基本上不用动
|
||||
|
||||
@ -13,3 +13,5 @@ ALTER TABLE `visualization_link_jump_target_view_info`
|
||||
ALTER TABLE `visualization_link_jump_target_view_info`
|
||||
MODIFY COLUMN `target_view_id` varchar(50) NULL DEFAULT NULL COMMENT '目标图表ID' AFTER `source_field_active_id`,
|
||||
MODIFY COLUMN `target_field_id` varchar(50) NULL DEFAULT NULL COMMENT '目标字段ID' AFTER `target_view_id`;
|
||||
|
||||
update visualization_link_jump_target_view_info set target_type = 'view';
|
||||
@ -17,3 +17,5 @@ ALTER TABLE `visualization_link_jump_target_view_info`
|
||||
ALTER TABLE `visualization_link_jump_target_view_info`
|
||||
MODIFY COLUMN `target_view_id` varchar(50) NULL DEFAULT NULL COMMENT '目标图表ID' AFTER `source_field_active_id`,
|
||||
MODIFY COLUMN `target_field_id` varchar(50) NULL DEFAULT NULL COMMENT '目标字段ID' AFTER `target_view_id`;
|
||||
|
||||
update visualization_link_jump_target_view_info set target_type = 'view';
|
||||
@ -46,6 +46,8 @@
|
||||
<result column="target_view_id" jdbcType="BIGINT" property="targetViewId"/>
|
||||
<result column="target_field_id" jdbcType="BIGINT" property="targetFieldId"/>
|
||||
<result column="source_field_active_id" jdbcType="VARCHAR" property="sourceFieldActiveId"/>
|
||||
<result column="target_type" jdbcType="VARCHAR" property="targetType"/>
|
||||
<result column="outer_params_name" jdbcType="VARCHAR" property="outerParamsName"/>
|
||||
</collection>
|
||||
</resultMap>
|
||||
<resultMap id="ViewTableFieldDetailsMap" type="io.dataease.api.visualization.vo.VisualizationViewTableVO">
|
||||
@ -87,7 +89,9 @@
|
||||
ifnull( visualization_link_jump_info.attach_params, 0 ) AS attach_params,
|
||||
visualization_link_jump_target_view_info.target_view_id,
|
||||
visualization_link_jump_target_view_info.target_field_id,
|
||||
visualization_link_jump_target_view_info.source_field_active_id
|
||||
visualization_link_jump_target_view_info.target_type,
|
||||
visualization_link_jump_target_view_info.source_field_active_id,
|
||||
visualization_outer_params_info.param_name as outer_params_name
|
||||
FROM
|
||||
core_chart_view
|
||||
LEFT JOIN core_dataset_table_field ON core_chart_view.table_id = core_dataset_table_field.dataset_group_id
|
||||
@ -98,6 +102,7 @@
|
||||
LEFT JOIN visualization_link_jump_target_view_info ON visualization_link_jump_info.id = visualization_link_jump_target_view_info.link_jump_info_id
|
||||
LEFT JOIN xpack_share ON xpack_share.creator = #{uid}
|
||||
AND visualization_link_jump_info.target_dv_id = xpack_share.resource_id
|
||||
left join visualization_outer_params_info on visualization_outer_params_info.params_id = visualization_link_jump_target_view_info.target_view_id
|
||||
WHERE
|
||||
core_chart_view.id = #{source_view_id}
|
||||
AND core_chart_view.type != 'VQuery'
|
||||
|
||||
@ -199,7 +199,7 @@
|
||||
<div class="jump-com-list">
|
||||
<el-tabs size="small" v-model="state.activeCollapse">
|
||||
<el-tab-pane label="联动图表" name="view"> </el-tab-pane>
|
||||
<el-tab-pane label="携带查询条件" name="filter-params"> </el-tab-pane>
|
||||
<el-tab-pane label="携带查询条件" name="filter"> </el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<template v-if="state.activeCollapse === 'view'">
|
||||
@ -215,8 +215,11 @@
|
||||
<el-scrollbar height="fit-content" max-height="178px">
|
||||
<div
|
||||
style="display: flex; margin-bottom: 6px"
|
||||
v-for="(targetViewInfo, index) in state.linkJumpInfo
|
||||
.targetViewInfoList"
|
||||
v-for="(
|
||||
targetViewInfo, index
|
||||
) in state.linkJumpInfo.targetViewInfoList.filter(
|
||||
item => item.targetType === 'view'
|
||||
)"
|
||||
:key="index"
|
||||
>
|
||||
<div style="flex: 1">
|
||||
@ -262,7 +265,9 @@
|
||||
@change="viewInfoOnChange(targetViewInfo)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in state.currentLinkPanelViewArray"
|
||||
v-for="item in state.currentLinkPanelViewArray.filter(
|
||||
item => item.type !== 'outerParams'
|
||||
)"
|
||||
:key="item.id"
|
||||
:label="item.title"
|
||||
:value="item.id"
|
||||
@ -335,7 +340,7 @@
|
||||
type="primary"
|
||||
icon="Plus"
|
||||
text
|
||||
@click="addLinkJumpField"
|
||||
@click="addLinkJumpField('view')"
|
||||
>
|
||||
{{ t('visualization.add_jump_field') }}
|
||||
</el-button>
|
||||
@ -343,12 +348,9 @@
|
||||
</template>
|
||||
<template v-if="state.activeCollapse === 'filter'">
|
||||
<el-row style="margin-bottom: 8px" :gutter="8">
|
||||
<el-col :span="7"> 源字段 </el-col>
|
||||
<el-col :span="2"></el-col>
|
||||
<el-col :span="7" style="margin-left: -2.9%">
|
||||
{{ t('visualization.link_view_field') }}
|
||||
</el-col>
|
||||
<el-col :span="8"></el-col>
|
||||
<el-col :span="12"> 源条件 </el-col>
|
||||
<el-col :span="1"></el-col>
|
||||
<el-col :span="10" style="margin-left: -2.9%"> 联动外部参数 </el-col>
|
||||
</el-row>
|
||||
<div class="main-scrollbar-container">
|
||||
<el-scrollbar height="fit-content" max-height="178px">
|
||||
@ -357,7 +359,7 @@
|
||||
v-for="(
|
||||
targetViewInfo, index
|
||||
) in state.linkJumpInfo.targetViewInfoList.filter(
|
||||
item => item.type === 'outerParams'
|
||||
item => item.targetType === 'outerParams'
|
||||
)"
|
||||
:key="index"
|
||||
>
|
||||
@ -368,23 +370,22 @@
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="curViewField in state.linkJumpCurViewFieldArray"
|
||||
:key="curViewField.id"
|
||||
:label="curViewField.name"
|
||||
:value="curViewField.id"
|
||||
v-for="curFilterField in state.linkJumpCurFilterFieldArray"
|
||||
:key="curFilterField.id"
|
||||
:label="curFilterField.name"
|
||||
:value="curFilterField.id"
|
||||
>
|
||||
<span class="custom-option">
|
||||
<Icon
|
||||
><component
|
||||
class="svg-icon"
|
||||
style="width: 14px; height: 14px"
|
||||
:class="`field-icon-${fieldType[curViewField.deType]}`"
|
||||
:is="iconFieldMap[fieldType[curViewField.deType]]"
|
||||
:is="iconChartMap['filter']"
|
||||
></component
|
||||
></Icon>
|
||||
<span
|
||||
style="float: left; margin-left: 4px; font-size: 14px"
|
||||
>{{ curViewField.name }}</span
|
||||
>{{ curFilterField.name }}</span
|
||||
>
|
||||
</span>
|
||||
</el-option>
|
||||
@ -445,7 +446,7 @@
|
||||
type="primary"
|
||||
icon="Plus"
|
||||
text
|
||||
@click="addLinkJumpField"
|
||||
@click="addLinkJumpField('outerParams')"
|
||||
>
|
||||
{{ t('visualization.add_jump_field') }}
|
||||
</el-button>
|
||||
@ -627,6 +628,7 @@ const state = reactive({
|
||||
linkJumpInfoArray: [],
|
||||
linkJumpInfoXArray: [],
|
||||
linkJumpCurViewFieldArray: [],
|
||||
linkJumpCurFilterFieldArray: [], //当前过滤条件明细
|
||||
mapJumpInfoArray: {},
|
||||
panelList: [],
|
||||
linkJumpInfo: null,
|
||||
@ -663,6 +665,7 @@ const dialogInit = viewItem => {
|
||||
const init = viewItem => {
|
||||
state.initState = false
|
||||
state.viewId = viewItem.id
|
||||
state.activeCollapse = 'view'
|
||||
const chartDetails = canvasViewInfo.value[state.viewId] as ChartObj
|
||||
state.curJumpViewInfo = chartDetails
|
||||
let checkAllAxisStr =
|
||||
@ -701,12 +704,27 @@ const init = viewItem => {
|
||||
state.panelList = filterEmptyFolderTree(state.panelList)
|
||||
})
|
||||
|
||||
// 获取当前过滤条件明细 过滤原则：1.在当前仪表板或者大屏 2.作用于当前图表
|
||||
state.linkJumpCurFilterFieldArray = []
|
||||
componentData.value.forEach(componentItem => {
|
||||
if (componentItem.component === 'VQuery') {
|
||||
componentItem.propValue.forEach(filterItem => {
|
||||
if (filterItem.checkedFields.includes(state.viewId)) {
|
||||
state.linkJumpCurFilterFieldArray.push({
|
||||
id: filterItem.id,
|
||||
name: filterItem.name,
|
||||
deType: 'filter'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
if (chartDetails.tableId) {
|
||||
// 获取当前数据集信息
|
||||
getDatasetDetails(chartDetails.tableId).then(res => {
|
||||
state.curDatasetInfo = res || {}
|
||||
})
|
||||
|
||||
// 获取当前图表的字段信息
|
||||
listFieldByDatasetGroup(chartDetails.tableId).then(rsp => {
|
||||
state.linkJumpCurViewFieldArray = []
|
||||
@ -864,9 +882,10 @@ const dvNodeClick = data => {
|
||||
getPanelViewList(data.id)
|
||||
}
|
||||
}
|
||||
const addLinkJumpField = () => {
|
||||
const addLinkJumpField = (type = 'view') => {
|
||||
state.linkJumpInfo.targetViewInfoList.push({
|
||||
targetViewId: '',
|
||||
targetType: type,
|
||||
targetFieldId: ''
|
||||
})
|
||||
}
|
||||
|
||||
@ -254,6 +254,7 @@ export const searchQuery = (queryComponentList, filter, curComponentId, firstLoa
|
||||
if (item.checkedFields.includes(curComponentId) && item.checkedFieldsMap[curComponentId]) {
|
||||
let selectValue
|
||||
const {
|
||||
id,
|
||||
selectValue: value,
|
||||
timeGranularityMultiple,
|
||||
defaultNumValueEnd,
|
||||
@ -471,6 +472,7 @@ export const searchQuery = (queryComponentList, filter, curComponentId, firstLoa
|
||||
}
|
||||
|
||||
filter.push({
|
||||
filterId: id,
|
||||
componentId: ele.id,
|
||||
fieldId,
|
||||
operator,
|
||||
|
||||
@ -466,14 +466,42 @@ const jumpClick = param => {
|
||||
// 内部仪表板跳转
|
||||
if (jumpInfo.linkType === 'inner') {
|
||||
if (jumpInfo.targetDvId) {
|
||||
const filterOuterParams = {}
|
||||
const curFilter = dvMainStore.getLastViewRequestInfo(param.viewId)
|
||||
const targetViewInfoList = jumpInfo.targetViewInfoList
|
||||
if (
|
||||
curFilter &&
|
||||
curFilter.filter &&
|
||||
curFilter.filter.length > 0 &&
|
||||
targetViewInfoList &&
|
||||
targetViewInfoList.length > 0
|
||||
) {
|
||||
// do filter
|
||||
curFilter.filter.forEach(filterItem => {
|
||||
targetViewInfoList.forEach(targetViewInfo => {
|
||||
if (targetViewInfo.sourceFieldActiveId === filterItem.filterId) {
|
||||
filterOuterParams[targetViewInfo.outerParamsName] = filterItem.value
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
let attachParamsInfo
|
||||
if (Object.keys(filterOuterParams).length > 0) {
|
||||
attachParamsInfo =
|
||||
'&attachParams=' + encodeURIComponent(Base64.encode(JSON.stringify(filterOuterParams)))
|
||||
}
|
||||
// 携带外部参数
|
||||
if (publicLinkStatus.value) {
|
||||
// 判断是否有公共链接ID
|
||||
if (jumpInfo.publicJumpId) {
|
||||
const url = `${embeddedBaseUrl}#/de-link/${
|
||||
let url = `${embeddedBaseUrl}#/de-link/${
|
||||
jumpInfo.publicJumpId
|
||||
}?fromLink=true&jumpInfoParam=${encodeURIComponent(
|
||||
Base64.encode(JSON.stringify(param))
|
||||
)}`
|
||||
if (attachParamsInfo) {
|
||||
url = url + attachParamsInfo
|
||||
}
|
||||
const currentUrl = window.location.href
|
||||
localStorage.setItem('beforeJumpUrl', currentUrl)
|
||||
windowsJump(url, jumpInfo.jumpType, jumpInfo.windowSize)
|
||||
@ -481,9 +509,12 @@ const jumpClick = param => {
|
||||
ElMessage.warning(t('visualization.public_link_tips'))
|
||||
}
|
||||
} else {
|
||||
const url = `${embeddedBaseUrl}#/preview?dvId=${
|
||||
let url = `${embeddedBaseUrl}#/preview?dvId=${
|
||||
jumpInfo.targetDvId
|
||||
}&fromLink=true&jumpInfoParam=${encodeURIComponent(Base64.encode(JSON.stringify(param)))}`
|
||||
if (attachParamsInfo) {
|
||||
url = url + attachParamsInfo
|
||||
}
|
||||
const currentUrl = window.location.href
|
||||
localStorage.setItem('beforeJumpUrl', currentUrl)
|
||||
if (isIframe.value || isDataEaseBi.value) {
|
||||
|
||||
@ -30,4 +30,9 @@ public class VisualizationLinkJumpTargetViewInfoVO {
|
||||
* 联动目标类型 view 图表 filter 过滤组件 outParams 外部参数
|
||||
*/
|
||||
private String targetType;
|
||||
|
||||
/**
|
||||
* 外部参数名称 当targetType==outParams时 实时查询对应名称
|
||||
*/
|
||||
private String outerParamsName;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user