Merge pull request #571 from dataease/pr@dev@feat_panel-linkage-toobar

feat:怎讲仪表板联动清除按钮

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

@@ -0,0 +1,49 @@
+<template>
+  <div v-show="existLinkage" class="bar-main">
+    <div>
+      <el-button size="mini" type="info" @click="clearAllLinkage">清除所有联动</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  computed: {
+    existLinkage() {
+      let linkageFiltersCount = 0
+      this.componentData.forEach(item => {
+        if (item.linkageFilters && item.linkageFilters.length > 0) {
+          linkageFiltersCount++
+        }
+      })
+      return linkageFiltersCount
+    },
+    ...mapState([
+      'componentData'
+    ])
+  },
+  methods: {
+    clearAllLinkage() {
+      this.$store.commit('clearPanelLinkageInfo')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .bar-main{
+    position: absolute;
+    left: 0px;
+    z-index: 10;
+    height: 20px;
+    border-radius:2px;
+    padding-left: 5px;
+    padding-right: 2px;
+    cursor:pointer!important;
+    opacity: 0.8;
+    /*background-color: #0a7be0;*/
+  }
+
+</style>

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

@@ -3,6 +3,7 @@
     <el-row v-if="componentDataShow.length===0" style="height: 100%;" class="custom-position">
       {{ $t('panel.panelNull') }}
     </el-row>
+    <canvas-opt-bar />
     <ComponentWrapper
       v-for="(item, index) in componentDataInfo"
       :key="index"
@@ -39,9 +40,10 @@ import { deepCopy } from '@/components/canvas/utils/utils'
 import eventBus from '@/components/canvas/utils/eventBus'
 import elementResizeDetectorMaker from 'element-resize-detector'
 import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
+import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar'
 
 export default {
-  components: { ComponentWrapper, UserViewDialog },
+  components: { ComponentWrapper, UserViewDialog, CanvasOptBar },
   model: {
     prop: 'show',
     event: 'change'

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

@@ -9,6 +9,9 @@
   >
     <!-- 网格线 -->
     <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />
+
+    <!-- 仪表板联动清除按钮-->
+    <canvas-opt-bar />
     <!--页面组件列表展示-->
     <de-drag
       v-for="(item, index) in componentData"
@@ -156,8 +159,10 @@ import { changeStyleWithScale } from '@/components/canvas/utils/translate'
 import { deepCopy } from '@/components/canvas/utils/utils'
 import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
 import DeOutWidget from '@/components/dataease/DeOutWidget'
+import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar'
+
 export default {
-  components: { Shape, ContextMenu, MarkLine, Area, Grid, DeDrag, UserViewDialog, DeOutWidget },
+  components: { Shape, ContextMenu, MarkLine, Area, Grid, DeDrag, UserViewDialog, DeOutWidget, CanvasOptBar },
   props: {
     isEdit: {
       type: Boolean,

frontend/src/store/index.js

@@ -237,6 +237,13 @@ const data = {
     },
     setNowPanelTrackInfo(state, trackInfo) {
       state.nowPanelTrackInfo = trackInfo
+    },
+    clearPanelLinkageInfo(state) {
+      state.componentData.forEach(item => {
+        if (item.linkageFilters && item.linkageFilters.length > 0) {
+          item.linkageFilters.splice(0, item.linkageFilters.length)
+        }
+      })
     }
   },
   modules: {