forked from github/dataease
feat:仪表板联动增加源联动视图虚化样式,过滤非视图组件等
This commit is contained in:
parent
bbb80f1210
commit
1c91e0e831
@ -0,0 +1,12 @@
|
||||
package io.dataease.base.mapper.ext;
|
||||
|
||||
import io.dataease.dto.PanelViewLinkageDTO;
|
||||
import org.apache.ibatis.annotations.Param;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
public interface ExtPanelViewLinkageMapper {
|
||||
|
||||
List<PanelViewLinkageDTO> getViewLinkageGather(@Param("panelId") String panelId,@Param("sourceViewId") String sourceViewId);
|
||||
|
||||
}
|
@ -0,0 +1,23 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
|
||||
<mapper namespace="io.dataease.base.mapper.ext.ExtPanelViewLinkageMapper">
|
||||
|
||||
<resultMap id="LinkageGatherMap" type="io.dataease.dto.PanelViewLinkageDTO">
|
||||
<result column="target_view_id" jdbcType="VARCHAR" property="targetViewId" />
|
||||
<collection property="linkageFields">
|
||||
<result column="source_filed" jdbcType="VARCHAR" property="sourceFiled" />
|
||||
<result column="target_filed" jdbcType="VARCHAR" property="targetFiled" />
|
||||
</collection>
|
||||
</resultMap>
|
||||
|
||||
<select id ="getViewLinkageGather" resultMap="LinkageGatherMap">
|
||||
SELECT
|
||||
panel_view_linkage.target_view_id,
|
||||
panel_view_linkage_field.source_filed,
|
||||
panel_view_linkage_field.target_filed
|
||||
FROM
|
||||
panel_view_linkage
|
||||
LEFT JOIN panel_view_linkage_field ON panel_view_linkage.id = panel_view_linkage_field.linkage_id
|
||||
where panel_view_linkage.panel_id = #{panelId} and panel_view_linkage.source_view_id =#{sourceViewId}
|
||||
</select>
|
||||
</mapper>
|
@ -0,0 +1,33 @@
|
||||
package io.dataease.controller.panel;
|
||||
|
||||
import com.github.xiaoymin.knife4j.annotations.ApiSupport;
|
||||
import io.dataease.controller.request.panel.PanelLinkageRequest;
|
||||
import io.dataease.service.panel.PanelViewLinkageService;
|
||||
import io.swagger.annotations.Api;
|
||||
import io.swagger.annotations.ApiOperation;
|
||||
import org.springframework.web.bind.annotation.*;
|
||||
|
||||
import javax.annotation.Resource;
|
||||
import java.util.Map;
|
||||
|
||||
/**
|
||||
* Author: wangjiahao
|
||||
* Date: 8/4/21
|
||||
* Description:
|
||||
*/
|
||||
@Api(tags = "仪表板:视图联动")
|
||||
@ApiSupport(order = 171)
|
||||
@RestController
|
||||
@RequestMapping("linkage")
|
||||
public class PanelViewLinkageController {
|
||||
|
||||
@Resource
|
||||
private PanelViewLinkageService panelViewLinkageService;
|
||||
|
||||
@ApiOperation("获取仪表板视图联动信息")
|
||||
@PostMapping("/getViewLinkageGather")
|
||||
public Map getViewLinkageGather(@RequestBody PanelLinkageRequest request){
|
||||
return panelViewLinkageService.getViewLinkageGather(request);
|
||||
}
|
||||
|
||||
}
|
@ -0,0 +1,41 @@
|
||||
package io.dataease.controller.request.panel;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
/**
|
||||
* Author: wangjiahao
|
||||
* Date: 8/4/21
|
||||
* Description:
|
||||
*/
|
||||
public class PanelLinkageRequest {
|
||||
|
||||
private String panelId;
|
||||
|
||||
private String sourceViewId;
|
||||
|
||||
private List<String> targetViewIds;
|
||||
|
||||
public String getPanelId() {
|
||||
return panelId;
|
||||
}
|
||||
|
||||
public void setPanelId(String panelId) {
|
||||
this.panelId = panelId;
|
||||
}
|
||||
|
||||
public String getSourceViewId() {
|
||||
return sourceViewId;
|
||||
}
|
||||
|
||||
public void setSourceViewId(String sourceViewId) {
|
||||
this.sourceViewId = sourceViewId;
|
||||
}
|
||||
|
||||
public List<String> getTargetViewIds() {
|
||||
return targetViewIds;
|
||||
}
|
||||
|
||||
public void setTargetViewIds(List<String> targetViewIds) {
|
||||
this.targetViewIds = targetViewIds;
|
||||
}
|
||||
}
|
@ -0,0 +1,43 @@
|
||||
package io.dataease.dto;
|
||||
|
||||
import io.dataease.base.domain.PanelViewLinkage;
|
||||
|
||||
import java.util.ArrayList;
|
||||
import java.util.List;
|
||||
|
||||
/**
|
||||
* Author: wangjiahao
|
||||
* Date: 8/4/21
|
||||
* Description:
|
||||
*/
|
||||
public class PanelViewLinkageDTO extends PanelViewLinkage {
|
||||
|
||||
//关联状态
|
||||
private boolean linkageActive = true;
|
||||
|
||||
private List<PanelViewLinkageFieldDTO> linkageFields = new ArrayList<>();
|
||||
|
||||
public PanelViewLinkageDTO() {
|
||||
|
||||
}
|
||||
|
||||
public PanelViewLinkageDTO(boolean linkageActive) {
|
||||
this.linkageActive = linkageActive;
|
||||
}
|
||||
|
||||
public boolean isLinkageActive() {
|
||||
return linkageActive;
|
||||
}
|
||||
|
||||
public void setLinkageActive(boolean linkageActive) {
|
||||
this.linkageActive = linkageActive;
|
||||
}
|
||||
|
||||
public List<PanelViewLinkageFieldDTO> getLinkageFields() {
|
||||
return linkageFields;
|
||||
}
|
||||
|
||||
public void setLinkageFields(List<PanelViewLinkageFieldDTO> linkageFields) {
|
||||
this.linkageFields = linkageFields;
|
||||
}
|
||||
}
|
@ -0,0 +1,31 @@
|
||||
package io.dataease.dto;
|
||||
|
||||
import io.dataease.base.domain.PanelViewLinkageField;
|
||||
|
||||
/**
|
||||
* Author: wangjiahao
|
||||
* Date: 8/4/21
|
||||
* Description:
|
||||
*/
|
||||
public class PanelViewLinkageFieldDTO extends PanelViewLinkageField {
|
||||
|
||||
private String sourceViewId;
|
||||
|
||||
private String targetViewId;
|
||||
|
||||
public String getSourceViewId() {
|
||||
return sourceViewId;
|
||||
}
|
||||
|
||||
public void setSourceViewId(String sourceViewId) {
|
||||
this.sourceViewId = sourceViewId;
|
||||
}
|
||||
|
||||
public String getTargetViewId() {
|
||||
return targetViewId;
|
||||
}
|
||||
|
||||
public void setTargetViewId(String targetViewId) {
|
||||
this.targetViewId = targetViewId;
|
||||
}
|
||||
}
|
@ -0,0 +1,48 @@
|
||||
package io.dataease.service.panel;
|
||||
|
||||
import io.dataease.base.mapper.PanelViewLinkageMapper;
|
||||
import io.dataease.base.mapper.ext.ExtPanelViewLinkageMapper;
|
||||
import io.dataease.controller.request.panel.PanelLinkageRequest;
|
||||
import io.dataease.dto.PanelViewLinkageDTO;
|
||||
import org.apache.commons.collections4.CollectionUtils;
|
||||
import org.springframework.stereotype.Service;
|
||||
|
||||
import javax.annotation.Resource;
|
||||
import java.util.*;
|
||||
import java.util.stream.Collectors;
|
||||
|
||||
/**
|
||||
* Author: wangjiahao
|
||||
* Date: 8/4/21
|
||||
* Description:
|
||||
*/
|
||||
@Service
|
||||
public class PanelViewLinkageService {
|
||||
|
||||
@Resource
|
||||
private PanelViewLinkageMapper panelViewLinkageMapper;
|
||||
|
||||
@Resource
|
||||
private ExtPanelViewLinkageMapper extPanelViewLinkageMapper;
|
||||
|
||||
|
||||
public Map<String, PanelViewLinkageDTO> getViewLinkageGather(PanelLinkageRequest request) {
|
||||
if(CollectionUtils.isNotEmpty(request.getTargetViewIds())){
|
||||
Map<String, PanelViewLinkageDTO> result = Optional.ofNullable(extPanelViewLinkageMapper.getViewLinkageGather(request.getPanelId(),request.getSourceViewId()))
|
||||
.orElse(new ArrayList<>()).stream()
|
||||
.collect(Collectors.toMap(PanelViewLinkageDTO::getTargetViewId,PanelViewLinkageDTO->PanelViewLinkageDTO));
|
||||
Set<String> innerTargetIds = result.keySet();
|
||||
|
||||
// 将对应没有建立关联关系的targetId 也补充进去
|
||||
request.getTargetViewIds().stream().forEach(targetId->{
|
||||
if(!innerTargetIds.contains(targetId)){
|
||||
result.put(targetId,new PanelViewLinkageDTO(false));
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
return new HashMap<>();
|
||||
}
|
||||
|
||||
|
||||
}
|
@ -64,7 +64,8 @@
|
||||
|
||||
<!--要生成的数据库表 -->
|
||||
|
||||
<table tableName="dataset_table_function"/>
|
||||
<table tableName="panel_view_linkage"/>
|
||||
<table tableName="panel_view_linkage_field"/>
|
||||
<!-- <table tableName="sys_dict"/>-->
|
||||
<!-- <table tableName="sys_dict_item"/>-->
|
||||
<!-- <table tableName="dataset_table_field"/>-->
|
||||
|
11
frontend/src/api/panel/linkage.js
Normal file
11
frontend/src/api/panel/linkage.js
Normal file
@ -0,0 +1,11 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getViewLinkageGather(requestInfo) {
|
||||
return request({
|
||||
url: '/linkage/getViewLinkageGather',
|
||||
method: 'post',
|
||||
data: requestInfo,
|
||||
loading: true
|
||||
})
|
||||
}
|
||||
|
@ -10,7 +10,8 @@
|
||||
[classNameResizable]: resizable,
|
||||
[classNameRotating]: rotating,
|
||||
[classNameRotatable]: rotatable,
|
||||
[classNameMouseOn]: mouseOn || active
|
||||
[classNameMouseOn]: mouseOn || active,
|
||||
['linkageSetting']:linkageActive
|
||||
},
|
||||
className
|
||||
]"
|
||||
@ -310,6 +311,11 @@ export default {
|
||||
changeStyle: {
|
||||
require: true,
|
||||
type: Object
|
||||
},
|
||||
// 联动设置
|
||||
linkageActive: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
@ -1631,6 +1637,10 @@ export default {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.linkageSetting{
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/*.mouseOn >>> .icon-shezhi{*/
|
||||
/* z-index: 2;*/
|
||||
/* display:block!important;*/
|
||||
|
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="bar-main">
|
||||
<div v-if="linkageSettingStatus" style="margin-right: -1px;width: 18px">
|
||||
<el-checkbox v-model="linkageActiveStatus" />
|
||||
<i v-if="linkageActiveStatus" class="icon iconfont icon-edit" @click.stop="linkageEdit" />
|
||||
<div v-if="linkageSettingStatus&&element!==curLinkageView&&element.type==='view'" style="margin-right: -1px;width: 18px">
|
||||
<el-checkbox v-model="linkageInfo.linkageActive" />
|
||||
<i v-if="linkageInfo.linkageActive" class="icon iconfont icon-edit" @click.stop="linkageEdit" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-else-if="!linkageSettingStatus">
|
||||
<setting-menu v-if="activeModel==='edit'" style="float: right;height: 24px!important;">
|
||||
<i slot="icon" class="icon iconfont icon-shezhi" />
|
||||
</setting-menu>
|
||||
@ -17,7 +17,6 @@
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import eventBus from '@/components/canvas/utils/eventBus'
|
||||
import bus from '@/utils/bus'
|
||||
import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
|
||||
|
||||
@ -51,15 +50,22 @@ export default {
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: mapState([
|
||||
'menuTop',
|
||||
'menuLeft',
|
||||
'menuShow',
|
||||
'curComponent',
|
||||
'componentData',
|
||||
'canvasStyleData',
|
||||
'linkageSettingStatus'
|
||||
]),
|
||||
computed: {
|
||||
linkageInfo() {
|
||||
return this.targetLinkageInfo[this.element.propValue.viewId]
|
||||
},
|
||||
...mapState([
|
||||
'menuTop',
|
||||
'menuLeft',
|
||||
'menuShow',
|
||||
'curComponent',
|
||||
'componentData',
|
||||
'canvasStyleData',
|
||||
'linkageSettingStatus',
|
||||
'targetLinkageInfo',
|
||||
'curLinkageView'
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
showViewDetails() {
|
||||
this.$emit('showViewDetails')
|
||||
|
@ -153,7 +153,7 @@ export default {
|
||||
this.searchCount++
|
||||
}, refreshTime)
|
||||
eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
|
||||
this.$store.commit('setLinkageSettingStatus', false)
|
||||
this.$store.commit('clearLinkageSettingInfo', false)
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer)
|
||||
|
@ -21,6 +21,7 @@
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import bus from '@/utils/bus'
|
||||
import { getViewLinkageGather } from '@/api/panel/linkage'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@ -122,7 +123,19 @@ export default {
|
||||
this.$store.commit('recordSnapshot')
|
||||
},
|
||||
linkageSetting() {
|
||||
this.$store.commit('setLinkageSettingStatus', true)
|
||||
debugger
|
||||
const targetViewIds = this.componentData.filter(item => item.type === 'view' && item.propValue && item.propValue.viewId && item !== this.curComponent)
|
||||
.map(item => item.propValue.viewId)
|
||||
|
||||
// 获取当前仪表板当前视图联动信息
|
||||
const requestInfo = {
|
||||
'panelId': this.$store.state.panel.panelInfo.id,
|
||||
'sourceViewId': this.curComponent.propValue.viewId,
|
||||
'targetViewIds': targetViewIds
|
||||
}
|
||||
getViewLinkageGather(requestInfo).then(rsp => {
|
||||
this.$store.commit('setLinkageInfo', rsp.data)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -30,6 +30,8 @@
|
||||
:snap-tolerance="2"
|
||||
:change-style="customStyle"
|
||||
:draggable="!linkageSettingStatus"
|
||||
:resizable="!linkageSettingStatus"
|
||||
:linkage-active="linkageSettingStatus&&item===curLinkageView"
|
||||
@refLineParams="getRefLineParams"
|
||||
@showViewDetails="showViewDetails(index)"
|
||||
>
|
||||
@ -251,7 +253,8 @@ export default {
|
||||
'curComponent',
|
||||
'canvasStyleData',
|
||||
'editor',
|
||||
'linkageSettingStatus'
|
||||
'linkageSettingStatus',
|
||||
'curLinkageView'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
|
@ -322,7 +322,7 @@ export default {
|
||||
this.cancelLinkageSettingStatus()
|
||||
},
|
||||
cancelLinkageSettingStatus() {
|
||||
this.$store.commit('setLinkageSettingStatus', false)
|
||||
this.$store.commit('clearLinkageSettingInfo')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -50,7 +50,11 @@ const data = {
|
||||
isClickComponent: false,
|
||||
canvasCommonStyleData: DEFAULT_COMMON_CANVAS_STYLE_STRING,
|
||||
// 联动设置状态
|
||||
linkageSettingStatus: false
|
||||
linkageSettingStatus: false,
|
||||
// 当前设置联动的组件
|
||||
curLinkageView: null,
|
||||
// 和当前组件联动的目标组件
|
||||
targetLinkageInfo: []
|
||||
},
|
||||
mutations: {
|
||||
...animation.mutations,
|
||||
@ -176,9 +180,15 @@ const data = {
|
||||
}
|
||||
state.componentData.splice(index, 1)
|
||||
},
|
||||
setLinkageSettingStatus(state, status) {
|
||||
state.linkageSettingStatus = status
|
||||
console.log('linkageSettingStatus:', state.linkageSettingStatus)
|
||||
setLinkageInfo(state, targetLinkageInfo) {
|
||||
state.linkageSettingStatus = true
|
||||
state.curLinkageView = state.curComponent
|
||||
state.targetLinkageInfo = targetLinkageInfo
|
||||
},
|
||||
clearLinkageSettingInfo(state) {
|
||||
state.linkageSettingStatus = false
|
||||
state.curLinkageView = null
|
||||
state.targetLinkageInfo = []
|
||||
}
|
||||
},
|
||||
modules: {
|
||||
|
@ -323,7 +323,7 @@ export default {
|
||||
listenGlobalKeyDown()
|
||||
|
||||
this.$store.commit('setCurComponent', { component: null, index: null })
|
||||
this.$store.commit('setLinkageSettingStatus', false)
|
||||
this.$store.commit('clearLinkageSettingInfo', false)
|
||||
},
|
||||
mounted() {
|
||||
// this.insertToBody()
|
||||
|
Loading…
Reference in New Issue
Block a user