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

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

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

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

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

backend/src/main/java/io/dataease/controller/panel/PanelViewLinkageController.java

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

backend/src/main/java/io/dataease/controller/request/panel/PanelLinkageRequest.java

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

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

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

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

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

backend/src/main/java/io/dataease/service/panel/PanelViewLinkageService.java

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

backend/src/main/resources/generatorConfig.xml

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

frontend/src/api/panel/linkage.js

+import request from '@/utils/request'
+
+export function getViewLinkageGather(requestInfo) {
+  return request({
+    url: '/linkage/getViewLinkageGather',
+    method: 'post',
+    data: requestInfo,
+    loading: true
+  })
+}
+

frontend/src/components/DeDrag/index.vue

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

frontend/src/components/canvas/components/Editor/EditBar.vue

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

frontend/src/components/canvas/components/Editor/Preview.vue

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

frontend/src/components/canvas/components/Editor/SettingMenu.vue

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

frontend/src/components/canvas/components/Editor/index.vue

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

frontend/src/components/canvas/components/Toolbar.vue

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

frontend/src/store/index.js

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

frontend/src/views/panel/edit/index.vue

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