feat:仪表板联动增加源联动视图虚化样式,过滤非视图组件等

This commit is contained in:
wangjiahao 2021-08-04 16:52:49 +08:00
parent bbb80f1210
commit 1c91e0e831
17 changed files with 310 additions and 25 deletions

View File

@ -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);
}

View File

@ -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>

View File

@ -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);
}
}

View File

@ -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;
}
}

View File

@ -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;
}
}

View File

@ -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;
}
}

View File

@ -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<>();
}
}

View File

@ -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"/>-->

View 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
})
}

View File

@ -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;*/

View File

@ -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')

View File

@ -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)

View File

@ -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)
})
}
}
}

View File

@ -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: {

View File

@ -322,7 +322,7 @@ export default {
this.cancelLinkageSettingStatus()
},
cancelLinkageSettingStatus() {
this.$store.commit('setLinkageSettingStatus', false)
this.$store.commit('clearLinkageSettingInfo')
}
}
}

View File

@ -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: {

View File

@ -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()