center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge pull request #8465 from dataease/pr@dev-v2@refactor_outerparams

Browse Source 
refactor(仪表板): 外部参数设置逻辑优化
This commit is contained in:
王嘉豪 2024-03-13 09:17:25 +08:00 committed by GitHub
commit 793ea2ef49
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 792 additions and 570 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
core/core-backend/src/main/java/io/dataease/visualization/server/VisualizationOuterParamsService.java Normal file
View File

@ -0,0 +1,88 @@
package io.dataease.visualization.server;
import io.dataease.api.visualization.VisualizationOuterParamsApi;
import io.dataease.api.visualization.dto.VisualizationOuterParamsDTO;
import io.dataease.api.visualization.dto.VisualizationOuterParamsInfoDTO;
import io.dataease.api.visualization.response.VisualizationOuterParamsBaseResponse;
import io.dataease.utils.BeanUtils;
import io.dataease.visualization.dao.auto.entity.VisualizationOuterParams;
import io.dataease.visualization.dao.auto.entity.VisualizationOuterParamsInfo;
import io.dataease.visualization.dao.auto.entity.VisualizationOuterParamsTargetViewInfo;
import io.dataease.visualization.dao.auto.mapper.VisualizationOuterParamsInfoMapper;
import io.dataease.visualization.dao.auto.mapper.VisualizationOuterParamsMapper;
import io.dataease.visualization.dao.auto.mapper.VisualizationOuterParamsTargetViewInfoMapper;
import io.dataease.visualization.dao.ext.mapper.ExtVisualizationOuterParamsMapper;
import jakarta.annotation.Resource;
import org.springframework.util.Assert;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.List;
import java.util.Optional;
import java.util.UUID;
import java.util.stream.Collectors;
/**
* @author : WangJiaHao
* @date : 2024/3/11 09:44
*/
@RestController
@RequestMapping("outerParams")
public class VisualizationOuterParamsService implements VisualizationOuterParamsApi {
@Resource
private ExtVisualizationOuterParamsMapper extOuterParamsMapper;
@Resource
private VisualizationOuterParamsMapper outerParamsMapper;
@Resource
private VisualizationOuterParamsInfoMapper outerParamsInfoMapper;
@Resource
private VisualizationOuterParamsTargetViewInfoMapper outerParamsTargetViewInfoMapper;
@Override
public VisualizationOuterParamsDTO queryWithVisualizationId(String visualizationId) {
VisualizationOuterParamsDTO visualizationOuterParamsDTO = extOuterParamsMapper.queryWithVisualizationId(visualizationId);
return visualizationOuterParamsDTO;
}
@Override
public void updateOuterParamsSet(VisualizationOuterParamsDTO outerParamsDTO) {
String visualizationId = outerParamsDTO.getVisualizationId();
Assert.notNull(visualizationId, "visualizationId cannot be null");
//清理原有数据
extOuterParamsMapper.deleteOuterParamsTargetWithVisualizationId(visualizationId);
extOuterParamsMapper.deleteOuterParamsInfoWithVisualizationId(visualizationId);
extOuterParamsMapper.deleteOuterParamsWithVisualizationId(visualizationId);
// 插入新的数据
String paramsId = UUID.randomUUID().toString();
outerParamsDTO.setParamsId(paramsId);
VisualizationOuterParams newOuterParams = new VisualizationOuterParams();
BeanUtils.copyBean(newOuterParams,outerParamsDTO);
outerParamsMapper.insert(newOuterParams);
Optional.ofNullable(outerParamsDTO.getOuterParamsInfoArray()).orElse(new ArrayList<>()).forEach(outerParamsInfo -> {
String paramsInfoId = UUID.randomUUID().toString();
outerParamsInfo.setParamsInfoId(paramsInfoId);
outerParamsInfo.setParamsId(paramsId);
VisualizationOuterParamsInfo newOuterParamsInfo = new VisualizationOuterParamsInfo();
BeanUtils.copyBean(newOuterParamsInfo,outerParamsInfo);
outerParamsInfoMapper.insert(newOuterParamsInfo);
Optional.ofNullable(outerParamsInfo.getTargetViewInfoList()).orElse(new ArrayList<>()).forEach(targetViewInfo -> {
String targetViewInfoId = UUID.randomUUID().toString();
targetViewInfo.setTargetId(targetViewInfoId);
targetViewInfo.setParamsInfoId(paramsInfoId);
VisualizationOuterParamsTargetViewInfo newOuterParamsTargetViewInfo = new VisualizationOuterParamsTargetViewInfo();
BeanUtils.copyBean(newOuterParamsTargetViewInfo,targetViewInfo);
outerParamsTargetViewInfoMapper.insert(newOuterParamsTargetViewInfo);
});
});
}
@Override
public VisualizationOuterParamsBaseResponse getOuterParamsInfo(String visualizationId) {
List<VisualizationOuterParamsInfoDTO> result = extOuterParamsMapper.getVisualizationOuterParamsInfo(visualizationId);
return new VisualizationOuterParamsBaseResponse(Optional.ofNullable(result).orElse(new ArrayList<>()).stream().collect(Collectors.toMap(VisualizationOuterParamsInfoDTO::getSourceInfo, VisualizationOuterParamsInfoDTO::getTargetInfoList)));
}
}

36
core/core-backend/src/main/resources/db/desktop/V2.5__ddl.sql Normal file
View File

@ -0,0 +1,36 @@
DROP TABLE IF EXISTS `visualization_outer_params`;
CREATE TABLE `visualization_outer_params` (
`params_id` varchar(50) NOT NULL COMMENT '主键',
`visualization_id` varchar(50) DEFAULT NULL COMMENT '可视化资源ID',
`checked` tinyint(1) DEFAULT NULL COMMENT '是否启用外部参数标识（1-是，0-否）',
`remark` varchar(255) DEFAULT NULL COMMENT '备注',
`copy_from` varchar(50) DEFAULT NULL COMMENT '复制来源',
`copy_id` varchar(50) DEFAULT NULL COMMENT '复制来源ID',
PRIMARY KEY (`params_id`) USING BTREE
) COMMENT='外部参数关联关系表';
DROP TABLE IF EXISTS `visualization_outer_params_info`;
CREATE TABLE `visualization_outer_params_info` (
`params_info_id` varchar(50) NOT NULL COMMENT '主键',
`params_id` varchar(50) DEFAULT NULL COMMENT 'visualization_outer_params 表的 ID',
`param_name` varchar(255) DEFAULT NULL COMMENT '参数名',
`checked` tinyint(1) DEFAULT NULL COMMENT '是否启用',
`copy_from` varchar(255) DEFAULT NULL COMMENT '复制来源',
`copy_id` varchar(50) DEFAULT NULL COMMENT '复制来源ID',
PRIMARY KEY (`params_info_id`) USING BTREE
) COMMENT='外部参数配置表';
DROP TABLE IF EXISTS `visualization_outer_params_target_view_info`;
CREATE TABLE `visualization_outer_params_target_view_info` (
`target_id` varchar(50) NOT NULL COMMENT '主键',
`params_info_id` varchar(50) DEFAULT NULL COMMENT 'visualization_outer_params_info 表的 ID',
`target_view_id` varchar(50) DEFAULT NULL COMMENT '联动视图ID',
`target_field_id` varchar(50) DEFAULT NULL COMMENT '联动字段ID',
`copy_from` varchar(255) DEFAULT NULL COMMENT '复制来源',
`copy_id` varchar(50) DEFAULT NULL COMMENT '复制来源ID',
PRIMARY KEY (`target_id`)
) COMMENT='外部参数联动视图字段信息表';

36
core/core-backend/src/main/resources/db/migration/V2.5__ddl.sql Normal file
View File

@ -0,0 +1,36 @@
DROP TABLE IF EXISTS `visualization_outer_params`;
CREATE TABLE `visualization_outer_params` (
`params_id` varchar(50) NOT NULL COMMENT '主键',
`visualization_id` varchar(50) DEFAULT NULL COMMENT '可视化资源ID',
`checked` tinyint(1) DEFAULT NULL COMMENT '是否启用外部参数标识（1-是，0-否）',
`remark` varchar(255) DEFAULT NULL COMMENT '备注',
`copy_from` varchar(50) DEFAULT NULL COMMENT '复制来源',
`copy_id` varchar(50) DEFAULT NULL COMMENT '复制来源ID',
PRIMARY KEY (`params_id`) USING BTREE
) COMMENT='外部参数关联关系表';
DROP TABLE IF EXISTS `visualization_outer_params_info`;
CREATE TABLE `visualization_outer_params_info` (
`params_info_id` varchar(50) NOT NULL COMMENT '主键',
`params_id` varchar(50) DEFAULT NULL COMMENT 'visualization_outer_params 表的 ID',
`param_name` varchar(255) DEFAULT NULL COMMENT '参数名',
`checked` tinyint(1) DEFAULT NULL COMMENT '是否启用',
`copy_from` varchar(255) DEFAULT NULL COMMENT '复制来源',
`copy_id` varchar(50) DEFAULT NULL COMMENT '复制来源ID',
PRIMARY KEY (`params_info_id`) USING BTREE
) COMMENT='外部参数配置表';
DROP TABLE IF EXISTS `visualization_outer_params_target_view_info`;
CREATE TABLE `visualization_outer_params_target_view_info` (
`target_id` varchar(50) NOT NULL COMMENT '主键',
`params_info_id` varchar(50) DEFAULT NULL COMMENT 'visualization_outer_params_info 表的 ID',
`target_view_id` varchar(50) DEFAULT NULL COMMENT '联动视图ID',
`target_field_id` varchar(50) DEFAULT NULL COMMENT '联动字段ID',
`copy_from` varchar(255) DEFAULT NULL COMMENT '复制来源',
`copy_id` varchar(50) DEFAULT NULL COMMENT '复制来源ID',
PRIMARY KEY (`target_id`)
) COMMENT='外部参数联动视图字段信息表';

1
core/core-frontend/src/assets/svg/icon_params_setting.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1710226920526" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8695" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M384 576a128 128 0 0 1 123.968 96H896v64l-388.032 0.064a128 128 0 0 1-247.936 0L128 736v-64h132.032A128 128 0 0 1 384 576z m0 73.152a54.848 54.848 0 1 0 0 109.696 54.848 54.848 0 0 0 0-109.696zM640 192a128 128 0 0 1 123.968 96H896v64l-132.032 0.064a128 128 0 0 1-247.936 0L128 352v-64h388.032A128 128 0 0 1 640 192z m0 73.152a54.848 54.848 0 1 0 0 109.696 54.848 54.848 0 0 0 0-109.696z" p-id="8696"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 747 B

7
core/core-frontend/src/components/dashboard/DbToolbar.vue
View File

@ -24,6 +24,7 @@ import { useEmitt } from '@/hooks/web/useEmitt'
import { copyStoreWithOut } from '@/store/modules/data-visualization/copy'
import TabsGroup from '@/custom-component/component-group/TabsGroup.vue'
import DeResourceGroupOpt from '@/views/common/DeResourceGroupOpt.vue'
import OuterParamsSet from '@/components/visualization/OuterParamsSet.vue'
const { t } = useI18n()
const dvMainStore = dvMainStoreWithOut()
const snapshotStore = snapshotStoreWithOut()
@ -50,6 +51,7 @@ const state = reactive({
preBatchCanvasViewInfo: {}
})
const resourceGroupOpt = ref(null)
const outerParamsSetRef = ref(null)
const editCanvasName = () => {
nameEdit.value = true
@ -256,6 +258,10 @@ const batchOptStatusChange = value => {
dvMainStore.setBatchOptStatus(value)
}
const openOuterParamsSet = () => {
outerParamsSetRef.value.optInit()
}
const saveBatchChange = () => {
batchOptStatusChange(false)
}
@ -555,6 +561,7 @@ const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
cur-canvas-type="dashboard"
ref="resourceGroupOpt"
/>
<outer-params-set ref="outerParamsSetRef"> </outer-params-set>
</div>
</template>

596
core/core-frontend/src/components/visualization/OuterParamsSet.vue Normal file
View File

@ -0,0 +1,596 @@
<template>
<el-dialog
class="params-class"
width="900px"
title="外部参数设置"
v-model="state.outerParamsSetVisible"
@submit.prevent
>
<el-row style="height: 430px">
<el-row>
<span style="margin-right: 20px; font-weight: 600">{{
t('visualization.outer_param_set')
}}</span>
<el-checkbox v-model="state.outerParams.checked">{{
t('visualization.enable_outer_param_set')
}}</el-checkbox>
</el-row>
<el-row v-loading="state.loading">
<el-row class="preview">
<el-col :span="8" style="height: 100%; overflow-y: hidden">
<el-row class="tree-head">
<span style="float: left; margin-left: 30px">{{
t('visualization.param_name')
}}</span>
<span style="float: right; margin-right: 10px">{{
t('visualization.enable_param')
}}</span>
</el-row>
<el-row class="tree-content">
<el-tree
ref="outerParamsInfoTree"
:data="state.outerParamsInfoArray"
node-key="id"
highlight-current
:props="state.treeProp"
@node-click="nodeClick"
>
<template v-slot="{ node, data }">
<span class="custom-tree-node">
<span>
<span style="margin-left: 6px"
><el-input
v-model="data.paramName"
size="mini"
:placeholder="t('visualization.input_param_name')"
/></span>
</span>
<span @click.stop>
<div>
<span class="auth-span">
<el-checkbox
v-model="data.checked"
style="margin-right: 10px"
@change="sourceFieldCheckedChange(data)"
/>
<el-button
icon="el-icon-delete"
type="text"
size="small"
@click="removeOuterParamsInfo(node, data)"
/>
</span>
</div>
</span>
</span>
</template>
</el-tree>
</el-row>
<el-row class="tree-bottom">
<el-button
size="mini"
type="success"
icon="el-icon-plus"
round
@click="addOuterParamsInfo"
>{{ t('visualization.add_param') }}
</el-button>
</el-row>
</el-col>
<el-col :span="16" class="preview-show">
<el-row v-if="state.outerParamsInfo">
<el-row class="top_border">
<el-row style="margin-top: 10px">
<el-col :span="11">
<div class="ellip">{{ t('visualization.link_component') }}</div>
</el-col>
<el-col :span="11">
<div class="ellip">{{ t('visualization.link_component_field') }}</div>
</el-col>
</el-row>
<el-row style="height: 266px; overflow-y: auto">
<el-row
v-for="(targetViewInfo, index) in state.outerParamsInfo.targetViewInfoList"
:key="index"
>
<el-col :span="11">
<div class="select-filed">
<el-select
v-model="targetViewInfo.targetViewId"
filterable
style="width: 100%"
size="mini"
:placeholder="t('fu.search_bar.please_select')"
@change="viewInfoOnChange(targetViewInfo)"
>
<el-option
v-for="item in state.currentLinkPanelViewArray.filter(
curItem =>
!viewSelectedField.includes(curItem.id) ||
curItem.id === targetViewInfo.targetViewId
)"
:key="item.id"
:label="item.name"
:value="item.id"
>
<span style="float: left; font-size: 12px"> {{ item.name }}</span>
</el-option>
</el-select>
</div>
</el-col>
<el-col :span="11">
<div class="select-filed">
<el-select
v-model="targetViewInfo.targetFieldId"
filterable
:disabled="fieldIdDisabledCheck(targetViewInfo)"
style="width: 100%"
size="mini"
:placeholder="t('fu.search_bar.please_select')"
>
<el-option
v-for="viewField in getFieldArray(targetViewInfo.targetViewId)"
:key="viewField.id"
:label="viewField.name"
:value="viewField.id"
>
<span style="float: left">
<svg-icon
v-if="viewField.deType === 0"
icon-class="field_text"
class="field-icon-text"
/>
<svg-icon
v-if="viewField.deType === 1"
icon-class="field_time"
class="field-icon-time"
/>
<svg-icon
v-if="viewField.deType === 2 || viewField.deType === 3"
icon-class="field_value"
class="field-icon-value"
/>
<svg-icon
v-if="viewField.deType === 5"
icon-class="field_location"
class="field-icon-location"
/>
</span>
<span style="float: left; font-size: 12px">{{ viewField.name }}</span>
</el-option>
</el-select>
</div>
</el-col>
<el-col :span="2">
<div>
<el-button
icon="el-icon-delete"
type="text"
size="small"
style="float: left"
@click="deleteOuterParamsField(index)"
/>
</div>
</el-col>
</el-row>
</el-row>
<el-row class="bottom">
<el-button
size="mini"
type="success"
icon="el-icon-plus"
round
@click="addOuterParamsField"
>{{ t('visualization.add_param_link_field') }}
</el-button>
</el-row>
</el-row>
<el-row v-if="state.outerParamsInfo.linkType === 'outer'" style="height: 300px">
<el-input
v-model="state.outerParamsInfo.content"
:autosize="{ minRows: 14 }"
type="textarea"
:placeholder="t('visualization.input_jump_link')"
/>
</el-row>
</el-row>
<el-row v-else style="height: 100%" class="custom-position">
{{ t('visualization.select_param') }}
</el-row>
</el-col>
</el-row>
</el-row>
<el-row class="root-class">
<el-button size="mini" @click="cancel()">{{ t('commons.cancel') }} </el-button>
<el-button type="primary" size="mini" @click="save()"
>{{ t('commons.confirm') }}
</el-button>
</el-row>
</el-row>
</el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, computed, nextTick } from 'vue'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'
import { ElMessage } from 'element-plus-secondary'
import { useI18n } from '@/hooks/web/useI18n'
import { deepCopy } from '@/utils/utils'
import generateID from '@/utils/generateID'
import { queryWithDvId, updateOuterParamsSet } from '@/api/visualization/outerParams'
import { detailList } from '@/api/visualization/dataVisualization'
import checkArrayRepeat from '@/utils/check'
const dvMainStore = dvMainStoreWithOut()
const { dvInfo, componentData, canvasStyleData } = storeToRefs(dvMainStore)
const outerParamsInfoTree = ref(null)
const emits = defineEmits(['outerParamsSetVisibleChange'])
const { t } = useI18n()
const state = reactive({
loading: false,
outerParamsSetVisible: false,
treeProp: {
id: 'paramsInfoId',
label: 'paramName',
children: 'children'
},
outerParams: {
checked: false,
outerParamsInfoArray: []
},
outerParamsInfoArray: null,
mapOuterParamsInfoArray: {},
panelList: [],
outerParamsInfo: {
content: '',
linkType: '',
targetViewInfoList: [],
paramsInfoId: null
},
currentFiledTreeNode: null,
defaultOuterParamsInfo: {
paramName: '',
checked: true,
targetViewInfoList: []
},
defaultTargetViewInfo: {
targetViewId: null,
targetFieldId: null
},
currentLinkPanelViewArray: [],
viewIdFieldArrayMap: {},
widgetSubjectsTrans: {
timeYearWidget: '年份过滤组件',
timeMonthWidget: '年月过滤组件',
timeDateWidget: '日期过滤组件',
timeDateRangeWidget: '日期范围过滤组件',
textSelectWidget: '文本下拉过滤组件',
textSelectGridWidget: '文本列表过滤组件',
textInputWidget: '文本搜索过滤组件',
textSelectTreeWidget: '下拉树过滤组件',
numberSelectWidget: '数字下拉过滤组件',
numberSelectGridWidget: '数字列表过滤组件',
numberRangeWidget: '数值区间过滤组件'
}
})
const viewSelectedField = computed(() =>
state.outerParamsInfo?.targetViewInfoList?.map(targetViewInfo => targetViewInfo.targetViewId)
)
const fieldIdDisabledCheck = targetViewInfo => {
return (
state.viewIdFieldArrayMap[targetViewInfo.targetViewId] &&
state.viewIdFieldArrayMap[targetViewInfo.targetViewId].length === 1 &&
state.viewIdFieldArrayMap[targetViewInfo.targetViewId][0].id === 'empty'
)
}
const getFieldArray = id => {
return state.viewIdFieldArrayMap[id]
}
const init = () => {
// 获取当前仪表板外部跳转蚕食信息
queryWithDvId(dvInfo['id']).then(rsp => {
state.outerParams = rsp.data
state.outerParamsInfoArray = state.outerParams?.outerParamsInfoArray
if (state.outerParamsInfoArray.length > 0) {
state.outerParamsInfoArray.forEach(outerParamsInfo => {
state.mapOuterParamsInfoArray[outerParamsInfo.paramsInfoId] = outerParamsInfo
})
const firstNode = state.outerParamsInfoArray[0]
nextTick(() => {
outerParamsInfoTree.value.setCurrentKey(firstNode.paramsInfoId)
nodeClick(firstNode)
})
}
})
getPanelViewList(dvInfo['id'])
}
const cancel = () => {
emits('outerParamsSetVisibleChange', false)
}
const save = () => {
if (checkArrayRepeat(state.outerParams.outerParamsInfoArray, 'paramName')) {
ElMessage.warning({
message: t('visualization.repeat_params'),
showClose: true
})
return
}
updateOuterParamsSet(state.outerParams).then(rsp => {
ElMessage({
message: t('commons.save_success'),
type: 'success',
showClose: true
})
cancel()
})
}
const nodeClick = data => {
state.outerParamsInfo = state.mapOuterParamsInfoArray[data.paramsInfoId]
}
// 获取当前视图字段 关联仪表板的视图信息列表
const getPanelViewList = dvId => {
detailList(dvId).then(rsp => {
state.viewIdFieldArrayMap = {}
state.currentLinkPanelViewArray = rsp.data
if (state.currentLinkPanelViewArray) {
state.currentLinkPanelViewArray.forEach(view => {
state.viewIdFieldArrayMap[view.id] = view.tableFields
})
}
// 增加过滤组件匹配
componentData.value.forEach(componentItem => {
if (componentItem.type === 'custom') {
state.currentLinkPanelViewArray.push({
id: componentItem.id,
type: 'filter',
name: componentItem.options.attrs.title
? componentItem.options.attrs.title
: state.widgetSubjectsTrans[componentItem.serviceName]
})
state.viewIdFieldArrayMap[componentItem.id] = [
{ id: 'empty', name: t('visualization.filter_no_select') }
]
}
})
})
}
const panelNodeClick = (data, node) => {
state.outerParamsInfo.targetViewInfoList = []
getPanelViewList(data.id)
}
const inputVal = value => {
if (!value) {
state.outerParamsInfo.targetViewInfoList = []
state.viewIdFieldArrayMap = {}
state.currentLinkPanelViewArray = []
}
}
const addOuterParamsField = () => {
state.outerParamsInfo.targetViewInfoList.push({
targetViewId: '',
targetFieldId: ''
})
}
const deleteOuterParamsField = index => {
state.outerParamsInfo.targetViewInfoList.splice(index, 1)
}
const normalizer = node => {
// 去掉children=null的属性
if (node.children === null || node.children === 'null') {
delete node.children
}
}
const viewInfoOnChange = targetViewInfo => {
if (
state.viewIdFieldArrayMap[targetViewInfo.targetViewId] &&
state.viewIdFieldArrayMap[targetViewInfo.targetViewId].length === 1 &&
state.viewIdFieldArrayMap[targetViewInfo.targetViewId][0].id === 'empty'
) {
targetViewInfo.targetFieldId = 'empty'
} else {
targetViewInfo.targetFieldId = null
}
}
const sourceFieldCheckedChange = data => {
if (data.checked) {
state.outerParams.checked = true
}
nextTick(() => {
outerParamsInfoTree.value.setCurrentKey(data.paramsInfoId)
nodeClick(data)
})
}
const addOuterParamsInfo = () => {
outerParamsInfoTree.value.checked = true
const outerParamsInfo = deepCopy(state.defaultOuterParamsInfo)
outerParamsInfo['paramsInfoId'] = generateID()
state.outerParamsInfoArray.push(outerParamsInfo)
state.mapOuterParamsInfoArray[outerParamsInfo.paramsInfoId] = outerParamsInfo
}
const removeOuterParamsInfo = (node, data) => {
const parent = node.parent
const children = parent.data.children || parent.data
const index = children.findIndex(d => d.paramsInfoId === data.paramsInfoId)
children.splice(index, 1)
if (data.paramsInfoId === state.outerParamsInfo.paramsInfoId) {
delete state.mapOuterParamsInfoArray[data.paramsInfoId]
state.outerParamsInfo = null
}
}
const optInit = () => {
state.outerParamsSetVisible = true
}
defineExpose({
optInit
})
</script>
<style scoped lang="less">
.root-class {
margin: 15px 0px 5px;
text-align: center;
}
.preview {
margin-top: 5px;
border: 1px solid #e6e6e6;
height: 350px !important;
overflow: hidden;
background-size: 100% 100% !important;
}
.preview-show {
border-left: 1px solid #e6e6e6;
height: 350px;
background-size: 100% 100% !important;
}
.slot-class {
color: white;
}
.bottom {
margin-top: 15px;
text-align: center;
}
.ellip {
/*width: 100%;*/
margin-left: 10px;
margin-right: 10px;
overflow: hidden; /*超出部分隐藏*/
white-space: nowrap; /*不换行*/
text-overflow: ellipsis; /*超出部分文字以...显示*/
text-align: center;
background-color: #f7f8fa;
color: #3d4d66;
font-size: 12px;
line-height: 24px;
height: 24px;
border-radius: 3px;
}
.select-filed {
/*width: 100%;*/
margin-left: 10px;
margin-right: 10px;
overflow: hidden; /*超出部分隐藏*/
white-space: nowrap; /*不换行*/
text-overflow: ellipsis; /*超出部分文字以...显示*/
color: #3d4d66;
font-size: 12px;
line-height: 35px;
height: 35px;
border-radius: 3px;
}
v-deep(.ed-popover) {
height: 200px;
overflow: auto;
}
.custom-position {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
flex-flow: row nowrap;
color: #9ea6b2;
}
.tree-style {
padding: 10px 15px;
height: 100%;
overflow-y: auto;
}
v-deep(.vue-treeselect__control) {
height: 28px;
}
v-deep(.vue-treeselect__single-value) {
color: #606266;
line-height: 28px !important;
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
}
.auth-span {
float: right;
width: 40px;
margin-right: 5px;
}
.tree-head {
height: 30px;
line-height: 30px;
border-bottom: 1px solid var(--TableBorderColor, #e6e6e6);
background-color: var(--SiderBG, #f7f8fa);
font-size: 12px;
color: var(--TableColor, #3d4d66);
}
.tree-content {
height: calc(100% - 70px);
overflow-y: auto;
}
.tree-bottom {
margin-top: 7px;
text-align: center;
}
v-deep(.vue-treeselect__placeholder) {
line-height: 28px;
}
v-deep(.ed-tree--highlight-current .ed-tree-node.is-current > .ed-tree-node__content) {
background-color: #8dbbef !important;
}
.tree-content ::v-deep(.ed-input__inner) {
background: transparent;
border: 0px !important;
}
.params-class ::v-deep(.ed-dialog__title) {
font-size: 14px;
}
.params-class ::v-deep(.ed-dialog__headerbtn) {
z-index: 2;
}
.params-class ::v-deep(.ed-dialog__header) {
padding: 20px 20px 0;
}
.params-class ::v-deep(.ed-dialog__body) {
padding: 10px 20px 20px;
}
</style>

567
core/core-frontend/src/components/visualization/outer-params-set/index.vue
View File

@ -1,567 +0,0 @@
<template>
<el-row style="height: 430px">
<el-row>
<span style="font-weight: 600; margin-right: 20px">{{
t('visualization.outer_param_set')
}}</span>
<el-checkbox v-model="state.outerParams?.checked">{{
t('visualization.enable_outer_param_set')
}}</el-checkbox>
</el-row>
<el-row v-loading="state.loading">
<el-row class="preview">
<el-col :span="8" style="height: 100%; overflow-y: hidden">
<el-row class="tree-head">
<span style="float: left; margin-left: 30px">{{ t('visualization.param_name') }}</span>
<span style="float: right; margin-right: 10px">{{
t('visualization.enable_param')
}}</span>
</el-row>
<el-row class="tree-content">
<el-tree
ref="outerParamsInfoTree"
:data="state.outerParamsInfoArray"
node-key="id"
highlight-current
:props="state.treeProp"
@node-click="nodeClick"
>
<template v-slot="{ node, data }">
<span class="custom-tree-node">
<span>
<span style="margin-left: 6px"
><el-input
v-model="data.paramName"
size="mini"
:placeholder="t('visualization.input_param_name')"
/></span>
</span>
<span @click.stop>
<div>
<span class="auth-span">
<el-checkbox
v-model="data.checked"
style="margin-right: 10px"
@change="sourceFieldCheckedChange(data)"
/>
<el-button
icon="el-icon-delete"
type="text"
size="small"
@click="removeOuterParamsInfo(node, data)"
/>
</span>
</div>
</span>
</span>
</template>
</el-tree>
</el-row>
<el-row class="tree-bottom">
<el-button
size="mini"
type="success"
icon="el-icon-plus"
round
@click="addOuterParamsInfo"
>{{ t('visualization.add_param') }}
</el-button>
</el-row>
</el-col>
<el-col :span="16" class="preview-show">
<el-row v-if="state.outerParamsInfo">
<el-row class="top_border">
<el-row style="margin-top: 10px">
<el-col :span="11">
<div class="ellip">{{ t('visualization.link_component') }}</div>
</el-col>
<el-col :span="11">
<div class="ellip">{{ t('visualization.link_component_field') }}</div>
</el-col>
</el-row>
<el-row style="height: 266px; overflow-y: auto">
<el-row
v-for="(targetViewInfo, index) in state.outerParamsInfo.targetViewInfoList"
:key="index"
>
<el-col :span="11">
<div class="select-filed">
<el-select
v-model="targetViewInfo.targetViewId"
filterable
style="width: 100%"
size="mini"
:placeholder="t('fu.search_bar.please_select')"
@change="viewInfoOnChange(targetViewInfo)"
>
<el-option
v-for="item in state.currentLinkPanelViewArray.filter(
curItem =>
!viewSelectedField.includes(curItem.id) ||
curItem.id === targetViewInfo.targetViewId
)"
:key="item.id"
:label="item.name"
:value="item.id"
>
<span v-if="item.isPlugin" style="float: left">
<svg-icon
:icon-class="
item.type !== 'buddle-map'
? '/api/pluginCommon/staticInfo/' + item.type + '/svg'
: item.type
"
style="width: 14px; height: 14px"
/>
</span>
<span v-else style="float: left">
<svg-icon :icon-class="item.type" style="width: 14px; height: 14px" />
</span>
<span style="float: left; font-size: 12px"> {{ item.name }}</span>
</el-option>
</el-select>
</div>
</el-col>
<el-col :span="11">
<div class="select-filed">
<el-select
v-model="targetViewInfo.targetFieldId"
filterable
:disabled="
state.viewIdFieldArrayMap[targetViewInfo.targetViewId] &&
state.viewIdFieldArrayMap[targetViewInfo.targetViewId].length === 1 &&
state.viewIdFieldArrayMap[targetViewInfo.targetViewId][0].id === 'empty'
"
style="width: 100%"
size="mini"
:placeholder="t('fu.search_bar.please_select')"
>
<el-option
v-for="viewField in state.viewIdFieldArrayMap[
targetViewInfo.targetViewId
]"
:key="viewField.id"
:label="viewField.name"
:value="viewField.id"
>
<span style="float: left">
<svg-icon
v-if="viewField.deType === 0"
icon-class="field_text"
class="field-icon-text"
/>
<svg-icon
v-if="viewField.deType === 1"
icon-class="field_time"
class="field-icon-time"
/>
<svg-icon
v-if="viewField.deType === 2 || viewField.deType === 3"
icon-class="field_value"
class="field-icon-value"
/>
<svg-icon
v-if="viewField.deType === 5"
icon-class="field_location"
class="field-icon-location"
/>
</span>
<span style="float: left; font-size: 12px">{{ viewField.name }}</span>
</el-option>
</el-select>
</div>
</el-col>
<el-col :span="2">
<div>
<el-button
icon="el-icon-delete"
type="text"
size="small"
style="float: left"
@click="deleteOuterParamsField(index)"
/>
</div>
</el-col>
</el-row>
</el-row>
<el-row class="bottom">
<el-button
size="mini"
type="success"
icon="el-icon-plus"
round
@click="addOuterParamsField"
>{{ t('visualization.add_param_link_field') }}
</el-button>
</el-row>
<!-- <el-button slot="reference">T</el-button>-->
<template v-slot:reference>
<i class="icon iconfont icon-edit slot-class" />
</template>
</el-row>
<el-row v-if="state.outerParamsInfo.linkType === 'outer'" style="height: 300px">
<el-input
v-model="state.outerParamsInfo.content"
:autosize="{ minRows: 14 }"
type="textarea"
:placeholder="t('visualization.input_jump_link')"
/>
</el-row>
</el-row>
<el-row
v-else
style="height: 100%; background-color: var(--MainContentBG)"
class="custom-position"
>
{{ t('visualization.select_param') }}
</el-row>
</el-col>
</el-row>
</el-row>
<el-row class="root-class">
<el-button size="mini" @click="cancel()">{{ t('commons.cancel') }} </el-button>
<el-button type="primary" size="mini" @click="save()">{{ t('commons.confirm') }} </el-button>
</el-row>
</el-row>
</template>
<script setup lang="ts">
import { ref, reactive, computed, nextTick } from 'vue'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'
import { ElMessage } from 'element-plus-secondary'
import { useI18n } from '@/hooks/web/useI18n'
import { deepCopy } from '@/utils/utils'
import generateID from '@/utils/generateID'
import { queryWithDvId, updateOuterParamsSet } from '@/api/visualization/outerParams'
import { detailList } from '@/api/visualization/dataVisualization'
import checkArrayRepeat from '@/utils/check'
const dvMainStore = dvMainStoreWithOut()
const { dvInfo, componentData, canvasStyleData } = storeToRefs(dvMainStore)
const outerParamsInfoTree = ref(null)
const emits = defineEmits(['outerParamsSetVisibleChange'])
const { t } = useI18n()
const state = reactive({
loading: false,
treeProp: {
id: 'paramsInfoId',
label: 'paramName',
children: 'children'
},
outerParams: {},
outerParamsInfoArray: null,
mapOuterParamsInfoArray: {},
panelList: [],
outerParamsInfo: null,
currentFiledTreeNode: null,
defaultOuterParamsInfo: {
paramName: '',
checked: true,
targetViewInfoList: []
},
defaultTargetViewInfo: {
targetViewId: null,
targetFieldId: null
},
currentLinkPanelViewArray: [],
viewIdFieldArrayMap: {},
widgetSubjectsTrans: {
timeYearWidget: '年份过滤组件',
timeMonthWidget: '年月过滤组件',
timeDateWidget: '日期过滤组件',
timeDateRangeWidget: '日期范围过滤组件',
textSelectWidget: '文本下拉过滤组件',
textSelectGridWidget: '文本列表过滤组件',
textInputWidget: '文本搜索过滤组件',
textSelectTreeWidget: '下拉树过滤组件',
numberSelectWidget: '数字下拉过滤组件',
numberSelectGridWidget: '数字列表过滤组件',
numberRangeWidget: '数值区间过滤组件'
}
})
const viewSelectedField = computed(() =>
state.outerParamsInfo?.targetViewInfoList?.map(targetViewInfo => targetViewInfo.targetViewId)
)
const init = () => {
// 获取当前仪表板外部跳转蚕食信息
queryWithDvId(dvInfo.id).then(rsp => {
state.outerParams = rsp.data
state.outerParamsInfoArray = state.outerParams?.outerParamsInfoArray
if (state.outerParamsInfoArray.length > 0) {
state.outerParamsInfoArray.forEach(outerParamsInfo => {
state.mapOuterParamsInfoArray[outerParamsInfo.paramsInfoId] = outerParamsInfo
})
const firstNode = state.outerParamsInfoArray[0]
nextTick(() => {
outerParamsInfoTree.value.setCurrentKey(firstNode.paramsInfoId)
nodeClick(firstNode)
})
}
})
getPanelViewList(dvInfo.id)
}
const cancel = () => {
emits('outerParamsSetVisibleChange', false)
}
const save = () => {
if (checkArrayRepeat(state.outerParams.outerParamsInfoArray, 'paramName')) {
ElMessage.warning({
message: t('visualization.repeat_params'),
showClose: true
})
return
}
updateOuterParamsSet(state.outerParams).then(rsp => {
ElMessage({
message: t('commons.save_success'),
type: 'success',
showClose: true
})
cancel()
})
}
const nodeClick = data => {
state.outerParamsInfo = state.mapOuterParamsInfoArray[data.paramsInfoId]
}
// 获取当前视图字段 关联仪表板的视图信息列表
const getPanelViewList = dvId => {
detailList(dvId).then(rsp => {
state.viewIdFieldArrayMap = {}
state.currentLinkPanelViewArray = rsp.data
if (state.currentLinkPanelViewArray) {
state.currentLinkPanelViewArray.forEach(view => {
state.viewIdFieldArrayMap[view.id] = view.tableFields
})
}
// 增加过滤组件匹配
componentData.value.forEach(componentItem => {
if (componentItem.type === 'custom') {
state.currentLinkPanelViewArray.push({
id: componentItem.id,
type: 'filter',
name: componentItem.options.attrs.title
? componentItem.options.attrs.title
: state.widgetSubjectsTrans[componentItem.serviceName]
})
state.viewIdFieldArrayMap[componentItem.id] = [
{ id: 'empty', name: t('visualization.filter_no_select') }
]
}
})
})
}
const panelNodeClick = (data, node) => {
state.outerParamsInfo.targetViewInfoList = []
getPanelViewList(data.id)
}
const inputVal = value => {
if (!value) {
state.outerParamsInfo.targetViewInfoList = []
state.viewIdFieldArrayMap = {}
state.currentLinkPanelViewArray = []
}
}
const addOuterParamsField = () => {
state.outerParamsInfo.targetViewInfoList.push({
targetViewId: '',
targetFieldId: ''
})
}
const deleteOuterParamsField = index => {
state.outerParamsInfo.targetViewInfoList.splice(index, 1)
}
const normalizer = node => {
// 去掉children=null的属性
if (node.children === null || node.children === 'null') {
delete node.children
}
}
const viewInfoOnChange = targetViewInfo => {
if (
state.viewIdFieldArrayMap[targetViewInfo.targetViewId] &&
state.viewIdFieldArrayMap[targetViewInfo.targetViewId].length === 1 &&
state.viewIdFieldArrayMap[targetViewInfo.targetViewId][0].id === 'empty'
) {
targetViewInfo.targetFieldId = 'empty'
} else {
targetViewInfo.targetFieldId = null
}
}
const sourceFieldCheckedChange = data => {
if (data.checked) {
state.outerParams?.checked = true
}
nextTick(() => {
outerParamsInfoTree.value.setCurrentKey(data.paramsInfoId)
nodeClick(data)
})
}
const addOuterParamsInfo = () => {
outerParamsInfoTree.value.checked = true
const outerParamsInfo = deepCopy(state.defaultOuterParamsInfo)
outerParamsInfo['paramsInfoId'] = generateID()
state.outerParamsInfoArray.push(outerParamsInfo)
state.mapOuterParamsInfoArray[outerParamsInfo.paramsInfoId] = outerParamsInfo
}
const removeOuterParamsInfo = (node, data) => {
const parent = node.parent
const children = parent.data.children || parent.data
const index = children.findIndex(d => d.paramsInfoId === data.paramsInfoId)
children.splice(index, 1)
if (data.paramsInfoId === state.outerParamsInfo.paramsInfoId) {
delete state.mapOuterParamsInfoArray[data.paramsInfoId]
state.outerParamsInfo = null
}
}
</script>
<style scoped lang="less">
.root-class {
margin: 15px 0px 5px;
text-align: center;
}
.preview {
margin-top: 5px;
border: 1px solid #e6e6e6;
height: 350px !important;
overflow: hidden;
background-size: 100% 100% !important;
}
.preview-show {
border-left: 1px solid #e6e6e6;
height: 350px;
background-size: 100% 100% !important;
}
.slot-class {
color: white;
}
.bottom {
margin-top: 15px;
text-align: center;
}
.ellip {
/*width: 100%;*/
margin-left: 10px;
margin-right: 10px;
overflow: hidden; /*超出部分隐藏*/
white-space: nowrap; /*不换行*/
text-overflow: ellipsis; /*超出部分文字以...显示*/
text-align: center;
background-color: #f7f8fa;
color: #3d4d66;
font-size: 12px;
line-height: 24px;
height: 24px;
border-radius: 3px;
}
.select-filed {
/*width: 100%;*/
margin-left: 10px;
margin-right: 10px;
overflow: hidden; /*超出部分隐藏*/
white-space: nowrap; /*不换行*/
text-overflow: ellipsis; /*超出部分文字以...显示*/
color: #3d4d66;
font-size: 12px;
line-height: 35px;
height: 35px;
border-radius: 3px;
}
v-deep(.el-popover) {
height: 200px;
overflow: auto;
}
.custom-position {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
flex-flow: row nowrap;
color: #9ea6b2;
}
.tree-style {
padding: 10px 15px;
height: 100%;
overflow-y: auto;
}
v-deep(.vue-treeselect__control) {
height: 28px;
}
v-deep(.vue-treeselect__single-value) {
color: #606266;
line-height: 28px !important;
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
}
.auth-span {
float: right;
width: 40px;
margin-right: 5px;
}
.tree-head {
height: 30px;
line-height: 30px;
border-bottom: 1px solid var(--TableBorderColor, #e6e6e6);
background-color: var(--SiderBG, #f7f8fa);
font-size: 12px;
color: var(--TableColor, #3d4d66);
}
.tree-content {
height: calc(100% - 70px);
overflow-y: auto;
}
.tree-bottom {
margin-top: 7px;
text-align: center;
}
v-deep(.vue-treeselect__placeholder {
line-height: 28px;
}
v-deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
background-color: #8dbbef !important;
}
.tree-content v-deep(.el-input__inner) {
background: transparent;
border: 0px !important;
}
</style>

2
sdk/api/api-base/src/main/java/io/dataease/api/visualization/VisualizationOuterParamsApi.java
View File

@ -4,8 +4,6 @@ import io.dataease.api.visualization.dto.VisualizationOuterParamsDTO;
import io.dataease.api.visualization.response.VisualizationOuterParamsBaseResponse;
import org.springframework.web.bind.annotation.*;
@RestController
@RequestMapping("outerParams")
public interface VisualizationOuterParamsApi {

14
sdk/api/api-base/src/main/java/io/dataease/api/visualization/dto/VisualizationOuterParamsDTO.java
View File

@ -1,9 +1,21 @@
package io.dataease.api.visualization.dto;
import io.dataease.api.visualization.vo.VisualizationOuterParamsVO;
import lombok.Data;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Data
public class VisualizationOuterParamsDTO extends VisualizationOuterParamsVO {
private List<String> targetInfoList;
private List<VisualizationOuterParamsInfoDTO> outerParamsInfoArray = new ArrayList<>();
private Map<String,VisualizationOuterParamsInfoDTO> mapOuterParamsInfoArray = new HashMap<>();
}

15
sdk/api/api-base/src/main/java/io/dataease/api/visualization/dto/VisualizationOuterParamsInfoDTO.java
View File

@ -1,8 +1,23 @@
package io.dataease.api.visualization.dto;
import io.dataease.api.visualization.vo.VisualizationOuterParamsInfoVO;
import io.dataease.api.visualization.vo.VisualizationOuterParamsTargetViewInfoVO;
import lombok.Data;
import java.util.ArrayList;
import java.util.List;
@Data
public class VisualizationOuterParamsInfoDTO extends VisualizationOuterParamsInfoVO {
private String dvId;
private List<VisualizationOuterParamsTargetViewInfoVO> targetViewInfoList=new ArrayList<>();
//仪表板外部参数信息 dvId#paramName
private String sourceInfo;
//目标联动参数 targetViewId#targetFieldId
private List<String> targetInfoList;
}