From b3c7aa5d167fc44240ce65181aa7eccfbd331615 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Tue, 10 Aug 2021 15:50:00 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=E4=BB=AA=E8=A1=A8=E7=89=88=E5=A4=9A?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E9=97=B4=E8=81=94=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mapper/ext/ExtPanelViewLinkageMapper.java | 4 ++ .../mapper/ext/ExtPanelViewLinkageMapper.xml | 20 +++++++ .../panel/PanelViewLinkageController.java | 6 +++ .../request/chart/ChartExtRequest.java | 3 ++ .../java/io/dataease/dto/LinkageInfoDTO.java | 31 +++++++++++ .../service/chart/ChartViewService.java | 21 +++++++- .../panel/PanelViewLinkageService.java | 16 ++---- frontend/src/api/panel/linkage.js | 6 +++ .../components/Editor/ComponentWrapper.vue | 1 - .../canvas/components/Editor/Preview.vue | 1 - .../canvas/custom-component/UserView.vue | 15 ++++++ frontend/src/components/canvas/store/copy.js | 1 - frontend/src/store/index.js | 53 ++++++++++++++++++- frontend/src/utils/conditionUtil.js | 6 +++ .../views/chart/components/ChartComponent.vue | 12 +++++ frontend/src/views/panel/edit/index.vue | 9 ++++ .../src/views/panel/list/EditPanel/index.vue | 1 - frontend/src/views/panel/list/PanelList.vue | 13 ++++- 18 files changed, 200 insertions(+), 19 deletions(-) create mode 100644 backend/src/main/java/io/dataease/dto/LinkageInfoDTO.java diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelViewLinkageMapper.java b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelViewLinkageMapper.java index 82cea4163a..96ac3fe6a6 100644 --- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelViewLinkageMapper.java +++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelViewLinkageMapper.java @@ -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 getViewLinkageGather(@Param("panelId") String panelId,@Param("sourceViewId") String sourceViewId,@Param("targetViewIds") List targetViewIds); + List getPanelAllLinkageInfo(@Param("panelId") String panelId); + List queryTableField(@Param("table_id") String tableId); void deleteViewLinkage(@Param("panelId") String panelId,@Param("sourceViewId") String sourceViewId); diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelViewLinkageMapper.xml b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelViewLinkageMapper.xml index f81e6c76ea..fb47e5fe23 100644 --- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelViewLinkageMapper.xml +++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelViewLinkageMapper.xml @@ -24,6 +24,14 @@ + + + + + + + + + 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} + diff --git a/backend/src/main/java/io/dataease/controller/panel/PanelViewLinkageController.java b/backend/src/main/java/io/dataease/controller/panel/PanelViewLinkageController.java index b74b33a97f..c994a835f7 100644 --- a/backend/src/main/java/io/dataease/controller/panel/PanelViewLinkageController.java +++ b/backend/src/main/java/io/dataease/controller/panel/PanelViewLinkageController.java @@ -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> getPanelAllLinkageInfo(@PathVariable String panelId){ + return panelViewLinkageService.getPanelAllLinkageInfo(panelId); + } } diff --git a/backend/src/main/java/io/dataease/controller/request/chart/ChartExtRequest.java b/backend/src/main/java/io/dataease/controller/request/chart/ChartExtRequest.java index 3806316bd6..35e310d379 100644 --- a/backend/src/main/java/io/dataease/controller/request/chart/ChartExtRequest.java +++ b/backend/src/main/java/io/dataease/controller/request/chart/ChartExtRequest.java @@ -13,4 +13,7 @@ import java.util.List; @Setter public class ChartExtRequest { private List filter; + + //联动过滤条件 + private List linkageFilters; } diff --git a/backend/src/main/java/io/dataease/dto/LinkageInfoDTO.java b/backend/src/main/java/io/dataease/dto/LinkageInfoDTO.java new file mode 100644 index 0000000000..d1f915b042 --- /dev/null +++ b/backend/src/main/java/io/dataease/dto/LinkageInfoDTO.java @@ -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 targetInfoList; + + public String getSourceInfo() { + return sourceInfo; + } + + public void setSourceInfo(String sourceInfo) { + this.sourceInfo = sourceInfo; + } + + public List getTargetInfoList() { + return targetInfoList; + } + + public void setTargetInfoList(List targetInfoList) { + this.targetInfoList = targetInfoList; + } +} diff --git a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java index 68fa644ab0..709dce5e34 100644 --- a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java +++ b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java @@ -225,6 +225,8 @@ public class ChartViewService { // 过滤来自仪表板的条件 List 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) cache; }*/ // 仪表板有参数不实用缓存 - if (CollectionUtils.isNotEmpty(requestList.getFilter())) { + if (CollectionUtils.isNotEmpty(requestList.getFilter()) || CollectionUtils.isNotEmpty(requestList.getLinkageFilters())) { data = datasourceProvider.getData(datasourceRequest); } else { try { diff --git a/backend/src/main/java/io/dataease/service/panel/PanelViewLinkageService.java b/backend/src/main/java/io/dataease/service/panel/PanelViewLinkageService.java index 792ada85de..20447092a0 100644 --- a/backend/src/main/java/io/dataease/service/panel/PanelViewLinkageService.java +++ b/backend/src/main/java/io/dataease/service/panel/PanelViewLinkageService.java @@ -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> getPanelAllLinkageInfo(String panelId) { + List info = extPanelViewLinkageMapper.getPanelAllLinkageInfo(panelId); + return Optional.ofNullable(info).orElse(new ArrayList<>()).stream().collect(Collectors.toMap(LinkageInfoDTO::getSourceInfo,LinkageInfoDTO::getTargetInfoList)); } } diff --git a/frontend/src/api/panel/linkage.js b/frontend/src/api/panel/linkage.js index 4a0f0ecc4a..6b0bd72fa6 100644 --- a/frontend/src/api/panel/linkage.js +++ b/frontend/src/api/panel/linkage.js @@ -18,3 +18,9 @@ export function saveLinkage(requestInfo) { }) } +export function getPanelAllLinkageInfo(panelId) { + return request({ + url: '/linkage/getPanelAllLinkageInfo/' + panelId, + method: 'get' + }) +} diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue index 4b6da3a6ea..88216e9e1a 100644 --- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue +++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue @@ -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') { diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue index 1fbc589005..9eda38c7c8 100644 --- a/frontend/src/components/canvas/components/Editor/Preview.vue +++ b/frontend/src/components/canvas/components/Editor/Preview.vue @@ -209,7 +209,6 @@ export default { this.$refs['userViewDialog'].exportExcel() }, deselectCurComponent(e) { - debugger if (!this.isClickComponent) { this.$store.commit('setCurComponent', { component: null, index: null }) } diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue index 00cf67d92c..1d61d5893e 100644 --- a/frontend/src/components/canvas/custom-component/UserView.vue +++ b/frontend/src/components/canvas/custom-component/UserView.vue @@ -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) { diff --git a/frontend/src/components/canvas/store/copy.js b/frontend/src/components/canvas/store/copy.js index ef4eb98351..e7daeb98cd 100644 --- a/frontend/src/components/canvas/store/copy.js +++ b/frontend/src/components/canvas/store/copy.js @@ -41,7 +41,6 @@ export default { data.id = generateID() // 如果是用户视图 测先进行底层复制 - debugger if (data.type === 'view') { chartCopy(data.propValue.viewId).then(res => { const newView = deepCopy(data) diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js index 3f299683e8..7114ce2c23 100644 --- a/frontend/src/store/index.js +++ b/frontend/src/store/index.js @@ -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: { diff --git a/frontend/src/utils/conditionUtil.js b/frontend/src/utils/conditionUtil.js index 0e010b8665..7cfee37f9f 100644 --- a/frontend/src/utils/conditionUtil.js +++ b/frontend/src/utils/conditionUtil.js @@ -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 +} diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue index 1cea6ea399..4c2573fcb3 100644 --- a/frontend/src/views/chart/components/ChartComponent.vue +++ b/frontend/src/views/chart/components/ChartComponent.vue @@ -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() { diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue index 070886ad4d..5149e7ab18 100644 --- a/frontend/src/views/panel/edit/index.vue +++ b/frontend/src/views/panel/edit/index.vue @@ -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 = [] } }) diff --git a/frontend/src/views/panel/list/EditPanel/index.vue b/frontend/src/views/panel/list/EditPanel/index.vue index 0aca7f717e..368b7c2e3c 100644 --- a/frontend/src/views/panel/list/EditPanel/index.vue +++ b/frontend/src/views/panel/list/EditPanel/index.vue @@ -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 diff --git a/frontend/src/views/panel/list/PanelList.vue b/frontend/src/views/panel/list/PanelList.vue index d7b5c99bda..6f69d67cde 100644 --- a/frontend/src/views/panel/list/PanelList.vue +++ b/frontend/src/views/panel/list/PanelList.vue @@ -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) {