From 22d32aafaab7b3b7ec991edf88b516e11f8a328d Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 10 Aug 2021 17:45:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=80=8E=E8=AE=B2=E4=BB=AA=E8=A1=A8?=
 =?UTF-8?q?=E6=9D=BF=E8=81=94=E5=8A=A8=E6=B8=85=E9=99=A4=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/Editor/CanvasOptBar.vue | 49 +++++++++++++++++++
 .../canvas/components/Editor/Preview.vue      |  4 +-
 .../canvas/components/Editor/index.vue        |  7 ++-
 frontend/src/store/index.js                   |  7 +++
 4 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/canvas/components/Editor/CanvasOptBar.vue

diff --git a/frontend/src/components/canvas/components/Editor/CanvasOptBar.vue b/frontend/src/components/canvas/components/Editor/CanvasOptBar.vue
new file mode 100644
index 0000000000..d3e9a299f1
--- /dev/null
+++ b/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>
diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue
index 9eda38c7c8..d40a4ae3ed 100644
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/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'
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index 46412a47ad..f988791ad4 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/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,
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index ad150e7fa4..fcef0eab68 100644
--- a/frontend/src/store/index.js
+++ b/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: {