refactor:仪表版多组件间联动

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

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

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

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

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<String, List<String>> getPanelAllLinkageInfo(@PathVariable String panelId){
+        return panelViewLinkageService.getPanelAllLinkageInfo(panelId);
+    }
 
 }

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<ChartExtFilterRequest> filter;
+
+    //联动过滤条件
+    private List<ChartExtFilterRequest> linkageFilters;
 }

backend/src/main/java/io/dataease/dto/LinkageInfoDTO.java

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

backend/src/main/java/io/dataease/service/chart/ChartViewService.java

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

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

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'
+  })
+}

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

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

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

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)

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

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
+}

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

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 = []
         }
       })
 

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

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