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

Merge pull request #568 from dataease/pr@dev@refactor_panel-more-linkage

Browse Source 
refactor:仪表版多组件间联动
This commit is contained in:
王嘉豪 2021-08-10 15:51:34 +08:00 committed by GitHub
commit 9bbe0af8d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 200 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelViewLinkageMapper.java
View File

@ -1,15 +1,19 @@
package io.dataease.base.mapper.ext;
import io.dataease.base.domain.DatasetTableField;
import io.dataease.dto.LinkageInfoDTO;
import io.dataease.dto.PanelViewLinkageDTO;
import org.apache.ibatis.annotations.Param;
import java.util.List;
import java.util.Map;
public interface ExtPanelViewLinkageMapper {
List<PanelViewLinkageDTO> getViewLinkageGather(@Param("panelId") String panelId,@Param("sourceViewId") String sourceViewId,@Param("targetViewIds") List<String> targetViewIds);
List<LinkageInfoDTO> getPanelAllLinkageInfo(@Param("panelId") String panelId);
List<DatasetTableField> queryTableField(@Param("table_id") String tableId);
void deleteViewLinkage(@Param("panelId") String panelId,@Param("sourceViewId") String sourceViewId);

20
backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelViewLinkageMapper.xml
View File

@ -24,6 +24,14 @@
</collection>
</resultMap>
<resultMap id="AllLinkageMap" type="io.dataease.dto.LinkageInfoDTO">
<result column="sourceInfo" jdbcType="VARCHAR" property="sourceInfo"/>
<collection property="targetInfoList" ofType="String">
<result column="targetInfo" jdbcType="VARCHAR"/>
</collection>
</resultMap>
<select id="getViewLinkageGather" resultMap="LinkageGatherMap">
SELECT
chart_view.`name` as 'targetViewName',
@ -78,4 +86,16 @@
(#{menu.menuId},#{menu.title},#{menu.pid},#{menu.subCount},#{menu.permission},#{menu.hidden},ifnull(#{menu.hidden},0))
</foreach>
</insert>
<select id="getPanelAllLinkageInfo" resultMap="AllLinkageMap">
SELECT
distinct
CONCAT( panel_view_linkage.source_view_id, '#', panel_view_linkage_field.source_field ) AS 'sourceInfo',
CONCAT( panel_view_linkage.target_view_id, '#', panel_view_linkage_field.target_field ) AS 'targetInfo'
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}
</select>
</mapper>

6
backend/src/main/java/io/dataease/controller/panel/PanelViewLinkageController.java
View File

@ -9,6 +9,7 @@ import io.swagger.annotations.ApiOperation;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
import java.util.Map;
/**
@ -39,5 +40,10 @@ public class PanelViewLinkageController {
}
@ApiOperation("获取当前仪表板所有联动信息")
@GetMapping("/getPanelAllLinkageInfo/{panelId}")
public Map<String, List<String>> getPanelAllLinkageInfo(@PathVariable String panelId){
return panelViewLinkageService.getPanelAllLinkageInfo(panelId);
}
}

3
backend/src/main/java/io/dataease/controller/request/chart/ChartExtRequest.java
View File

@ -13,4 +13,7 @@ import java.util.List;
@Setter
public class ChartExtRequest {
private List<ChartExtFilterRequest> filter;
//联动过滤条件
private List<ChartExtFilterRequest> linkageFilters;
}

31
backend/src/main/java/io/dataease/dto/LinkageInfoDTO.java Normal file
View File

@ -0,0 +1,31 @@
package io.dataease.dto;
import java.util.List;
/**
* Author: wangjiahao
* Date: 8/10/21
* Description:
*/
public class LinkageInfoDTO {
private String sourceInfo;
private List<String> targetInfoList;
public String getSourceInfo() {
return sourceInfo;
}
public void setSourceInfo(String sourceInfo) {
this.sourceInfo = sourceInfo;
}
public List<String> getTargetInfoList() {
return targetInfoList;
}
public void setTargetInfoList(List<String> targetInfoList) {
this.targetInfoList = targetInfoList;
}
}

21
backend/src/main/java/io/dataease/service/chart/ChartViewService.java
View File

@ -225,6 +225,8 @@ public class ChartViewService {
// 过滤来自仪表板的条件
List<ChartExtFilterRequest> extFilterList = new ArrayList<>();
//组件过滤条件
if (ObjectUtils.isNotEmpty(requestList.getFilter())) {
for (ChartExtFilterRequest request : requestList.getFilter()) {
DatasetTableField datasetTableField = dataSetTableFieldsService.get(request.getFieldId());
@ -241,6 +243,23 @@ public class ChartViewService {
}
}
//联动过滤条件联动条件全部加上
if (ObjectUtils.isNotEmpty(requestList.getLinkageFilters())) {
for (ChartExtFilterRequest request : requestList.getLinkageFilters()) {
DatasetTableField datasetTableField = dataSetTableFieldsService.get(request.getFieldId());
request.setDatasetTableField(datasetTableField);
if (StringUtils.equalsIgnoreCase(datasetTableField.getTableId(), view.getTableId())) {
if (CollectionUtils.isNotEmpty(request.getViewIds())) {
if (request.getViewIds().contains(view.getId())) {
extFilterList.add(request);
}
} else {
extFilterList.add(request);
}
}
}
}
// 获取数据集,需校验权限
DatasetTable table = dataSetTableService.get(view.getTableId());
if (ObjectUtils.isEmpty(table)) {
@ -339,7 +358,7 @@ public class ChartViewService {
data = (List<String[]>) cache;
}*/
// 仪表板有参数不实用缓存
if (CollectionUtils.isNotEmpty(requestList.getFilter())) {
if (CollectionUtils.isNotEmpty(requestList.getFilter()) || CollectionUtils.isNotEmpty(requestList.getLinkageFilters())) {
data = datasourceProvider.getData(datasourceRequest);
} else {
try {

16
backend/src/main/java/io/dataease/service/panel/PanelViewLinkageService.java
View File

@ -8,6 +8,7 @@ import io.dataease.base.mapper.PanelViewLinkageMapper;
import io.dataease.base.mapper.ext.ExtPanelViewLinkageMapper;
import io.dataease.commons.utils.AuthUtils;
import io.dataease.controller.request.panel.PanelLinkageRequest;
import io.dataease.dto.LinkageInfoDTO;
import io.dataease.dto.PanelViewLinkageDTO;
import io.dataease.dto.PanelViewLinkageFieldDTO;
import org.apache.commons.collections4.CollectionUtils;
@ -89,19 +90,12 @@ public class PanelViewLinkageService {
});
}
}
}
public Map<String, List<String>> getPanelAllLinkageInfo(String panelId) {
List<LinkageInfoDTO> info = extPanelViewLinkageMapper.getPanelAllLinkageInfo(panelId);
return Optional.ofNullable(info).orElse(new ArrayList<>()).stream().collect(Collectors.toMap(LinkageInfoDTO::getSourceInfo,LinkageInfoDTO::getTargetInfoList));
}
}

6
frontend/src/api/panel/linkage.js
View File

@ -18,3 +18,9 @@ export function saveLinkage(requestInfo) {
})
}
export function getPanelAllLinkageInfo(panelId) {
return request({
url: '/linkage/getPanelAllLinkageInfo/' + panelId,
method: 'get'
})
}

1
frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
View File

@ -102,7 +102,6 @@ export default {
})
},
elementMouseDown(e) {
debugger
// private 设置当前组件数据及状态
this.$store.commit('setClickComponentStatus', true)
if (this.config.component !== 'v-text' && this.config.component !== 'rect-shape' && this.config.component !== 'de-input-search' && this.config.component !== 'de-number-range') {

1
frontend/src/components/canvas/components/Editor/Preview.vue
View File

@ -209,7 +209,6 @@ export default {
this.$refs['userViewDialog'].exportExcel()
},
deselectCurComponent(e) {
debugger
if (!this.isClickComponent) {
this.$store.commit('setCurComponent', { component: null, index: null })
}

15
frontend/src/components/canvas/custom-component/UserView.vue
View File

@ -84,6 +84,7 @@ export default {
filter() {
const filter = {}
filter.filter = this.element.filters
filter.linkageFilters = this.element.linkageFilters
return filter
},
filters() {
@ -91,6 +92,13 @@ export default {
if (!this.element.filters) return []
return JSON.parse(JSON.stringify(this.element.filters))
},
linkageFilters() {
// 必要 勿删勿该 watch数组，哪怕发生变化 oldValue等于newValue ，深拷贝解决
if (!this.element.linkageFilters) return []
console.log('linkageFilters:' + JSON.stringify(this.element.linkageFilters))
return JSON.parse(JSON.stringify(this.element.linkageFilters))
},
...mapState([
'canvasStyleData'
])
@ -101,6 +109,13 @@ export default {
// this.getData(this.element.propValue.viewId)
isChange(val1, val2) && this.getData(this.element.propValue.viewId)
},
linkageFilters: {
handler(newVal, oldVal) {
debugger
isChange(newVal, oldVal) && this.getData(this.element.propValue.viewId)
},
deep: true
},
// deep监听panel 如果改变 提交到 store
canvasStyleData: {
handler(newVal, oldVla) {

1
frontend/src/components/canvas/store/copy.js
View File

@ -41,7 +41,6 @@ export default {
data.id = generateID()
// 如果是用户视图 测先进行底层复制
debugger
if (data.type === 'view') {
chartCopy(data.propValue.viewId).then(res => {
const newView = deepCopy(data)

53
frontend/src/store/index.js
View File

@ -21,7 +21,9 @@ import event from '@/components/canvas/store/event'
import layer from '@/components/canvas/store/layer'
import snapshot from '@/components/canvas/store/snapshot'
import lock from '@/components/canvas/store/lock'
import { valueValid, formatCondition } from '@/utils/conditionUtil'
import { valueValid, formatCondition, formatLinkageCondition } from '@/utils/conditionUtil'
import { Condition } from '@/components/widget/bean/Condition'
import {
DEFAULT_COMMON_CANVAS_STYLE_STRING
} from '@/views/panel/panel'
@ -54,7 +56,9 @@ const data = {
// 当前设置联动的组件
curLinkageView: null,
// 和当前组件联动的目标组件
targetLinkageInfo: []
targetLinkageInfo: [],
// 当前仪表板联动 下钻 上卷等信息
nowPanelTrackInfo: {}
},
mutations: {
...animation.mutations,
@ -154,6 +158,48 @@ const data = {
state.componentData[index] = element
}
},
// 添加联动 下钻 等过滤组件
addViewTrackFilter(state, data) {
console.log('联动信息', JSON.stringify(data))
debugger
const viewId = data.viewId
const trackInfo = state.nowPanelTrackInfo
for (let index = 0; index < state.componentData.length; index++) {
const element = state.componentData[index]
if (!element.type || element.type !== 'view') continue
const currentFilters = element.linkageFilters || [] // 当前联动filter
data.dimensionList.forEach(dimension => {
const sourceInfo = viewId + '#' + dimension.id
// 获取所有目标联动信息
const targetInfoList = trackInfo[sourceInfo] || []
targetInfoList.forEach(targetInfo => {
const targetInfoArray = targetInfo.split('#')
const targetViewId = targetInfoArray[0] // 目标视图
if (element.propValue.viewId === targetViewId) { // 如果目标视图 和 当前循环组件id相等 则进行条件增减
const targetFieldId = targetInfoArray[1] // 目标视图列ID
const condition = new Condition('', targetFieldId, 'eq', [dimension.value], [targetViewId])
let j = currentFilters.length
while (j--) {
const filter = currentFilters[j]
// 兼容性准备 viewIds 只会存放一个值
if (targetFieldId === filter.fieldId && filter.viewIds.includes(targetViewId)) {
currentFilters.splice(j, 1)
}
}
// 不存在该条件 且 条件有效 直接保存该条件
// !filterExist && vValid && currentFilters.push(condition)
currentFilters.push(condition)
}
})
})
element.linkageFilters = currentFilters
state.componentData[index] = element
}
},
setComponentWithId(state, component) {
for (let index = 0; index < state.componentData.length; index++) {
const element = state.componentData[index]
@ -189,6 +235,9 @@ const data = {
state.linkageSettingStatus = false
state.curLinkageView = null
state.targetLinkageInfo = []
},
setNowPanelTrackInfo(state, trackInfo) {
state.nowPanelTrackInfo = trackInfo
}
},
modules: {

6
frontend/src/utils/conditionUtil.js
View File

@ -30,3 +30,9 @@ export const formatCondition = obj => {
const condition = new Condition(component.id, fieldId, operator, value, viewIds)
return condition
}
export const formatLinkageCondition = obj => {
const { viewIds, fieldId, value, operator } = obj
const condition = new Condition(null, fieldId, operator, value, viewIds)
return condition
}

12
frontend/src/views/chart/components/ChartComponent.vue
View File

@ -60,6 +60,8 @@ export default {
},
methods: {
preDraw() {
const viewId = this.chart.id
const _store = this.$store
// 基于准备好的dom，初始化echarts实例
// 渲染echart等待dom加载完毕,渲染之前先尝试销毁具有相同id的echart 放置多次切换仪表板有重复id情况
new Promise((resolve) => { resolve() }).then(() => {
@ -69,6 +71,16 @@ export default {
this.myChart = this.$echarts.init(document.getElementById(this.chartId))
}
this.drawEcharts()
this.myChart.on('click', function(param) {
debugger
console.log(JSON.stringify(param.data))
const trackFilter = {
viewId: viewId,
dimensionList: param.data.dimensionList,
quotaList: param.data.quotaList
}
_store.commit('addViewTrackFilter', trackFilter)
})
})
},
drawEcharts() {

9
frontend/src/views/panel/edit/index.vue
View File

@ -192,6 +192,7 @@ import { mapState } from 'vuex'
import { uuid } from 'vue-uuid'
import Toolbar from '@/components/canvas/components/Toolbar'
import { findOne } from '@/api/panel/panel'
import { getPanelAllLinkageInfo } from '@/api/panel/linkage'
import PreviewFullScreen from '@/components/canvas/components/Editor/PreviewFullScreen'
import Preview from '@/components/canvas/components/Editor/Preview'
import AttrList from '@/components/canvas/components/AttrList'
@ -363,6 +364,7 @@ export default {
const componentDatas = JSON.parse(componentDataTemp)
componentDatas.forEach(item => {
item.filters = (item.filters || [])
item.linkageFilters = (item.linkageFilters || [])
})
this.$store.commit('setComponentData', this.resetID(componentDatas))
// this.$store.commit('setComponentData', this.resetID(JSON.parse(componentDataTemp)))
@ -375,12 +377,17 @@ export default {
const componentDatas = JSON.parse(response.data.panelData)
componentDatas.forEach(item => {
item.filters = (item.filters || [])
item.linkageFilters = (item.linkageFilters || [])
})
this.$store.commit('setComponentData', this.resetID(componentDatas))
// this.$store.commit('setComponentData', this.resetID(JSON.parse(response.data.panelData)))
const panelStyle = JSON.parse(response.data.panelStyle)
this.$store.commit('setCanvasStyle', panelStyle)
this.$store.commit('recordSnapshot')// 记录快照
// 刷新联动信息
getPanelAllLinkageInfo(panelId).then(rsp => {
this.$store.commit('setNowPanelTrackInfo', rsp.data)
})
})
}
},
@ -463,6 +470,7 @@ export default {
}
component.propValue = propValue
component.filters = []
component.linkageFilters = []
}
})
} else {
@ -660,6 +668,7 @@ export default {
}
component.propValue = propValue
component.filters = []
component.linkageFilters = []
}
})

1
frontend/src/views/panel/list/EditPanel/index.vue
View File

@ -134,7 +134,6 @@ export default {
return false
}
debugger
if (this.editPanel.panelInfo.name.length > 50) {
this.$warning(this.$t('commons.char_can_not_more_50'))
return false

13
frontend/src/views/panel/list/PanelList.vue
View File

@ -177,6 +177,8 @@ import { uuid } from 'vue-uuid'
import bus from '@/utils/bus'
import EditPanel from './EditPanel'
import { addGroup, delGroup, groupTree, defaultTree, findOne } from '@/api/panel/panel'
import { getPanelAllLinkageInfo } from '@/api/panel/linkage'
import { mapState } from 'vuex'
import {
DEFAULT_COMMON_CANVAS_STYLE_STRING
} from '@/views/panel/panel'
@ -274,7 +276,10 @@ export default {
computed: {
panelDialogTitle() {
return this.editPanel.titlePre + this.editPanel.titleSuf
}
},
...mapState([
'nowPanelTrackInfo'
])
},
watch: {
// 切换展示页面后 重新点击一下当前节点
@ -517,12 +522,18 @@ export default {
const componentDatas = JSON.parse(response.data.panelData)
componentDatas.forEach(item => {
item.filters = (item.filters || [])
item.linkageFilters = (item.linkageFilters || [])
})
this.$store.commit('setComponentData', this.resetID(componentDatas))
// this.$store.commit('setComponentData', sourceInfo.type === 'custom' ? sourceInfo : this.resetID(sourceInfo))
const temp = JSON.parse(response.data.panelStyle)
this.$store.commit('setCanvasStyle', temp)
this.$store.dispatch('panel/setPanelInfo', data)
// 刷新联动信息
getPanelAllLinkageInfo(data.id).then(rsp => {
this.$store.commit('setNowPanelTrackInfo', rsp.data)
})
})
}
if (node.expanded) {