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

frontend/src/api/panel/linkage.js

@@ -0,0 +1,11 @@
+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

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

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