feat:仪表板联动设置

frontend/src/components/DeDrag/index.vue

@@ -19,7 +19,7 @@
     @mouseenter="enter"
     @mouseleave="leave"
   >
-    <edit-bar v-if="active" :active-model="'edit'" @showViewDetails="showViewDetails" />
+    <edit-bar v-if="active||linkageSettingStatus" :active-model="'edit'" :element="element" @showViewDetails="showViewDetails" />
     <div
       v-for="(handlei, indexi) in actualHandles"
       :key="indexi"
@@ -463,7 +463,8 @@ export default {
       'curComponent',
       'editor',
       'curCanvasScale',
-      'canvasStyleData'
+      'canvasStyleData',
+      'linkageSettingStatus'
     ])
   },
   watch: {

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

@@ -6,7 +6,7 @@
     @click="handleClick"
     @mousedown="elementMouseDown"
   >
-    <edit-bar v-if="config === curComponent" @showViewDetails="showViewDetails" />
+    <edit-bar v-if="config === curComponent" :element="config" @showViewDetails="showViewDetails" />
     <de-out-widget
       v-if="config.type==='custom'"
       :id="'component' + config.id"

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

@@ -1,22 +1,34 @@
 <template>
   <div class="bar-main">
-    <setting-menu v-if="activeModel==='edit'" style="float: right;height: 24px!important;">
+    <div v-if="linkageSettingStatus" style="margin-right: 0px;width: 18px">
-      <i slot="icon" class="icon iconfont icon-shezhi" />
+      <el-checkbox v-model="linkageActiveStatus" />
-    </setting-menu>
+      <i v-if="linkageActiveStatus" class="icon iconfont icon-edit" @click.stop="linkageEdit" />
-    <i v-if="curComponent.type==='view'" class="icon iconfont icon-fangda" @click.stop="showViewDetails" />
+    </div>
-    <!--    <el-checkbox />-->
+    <div v-else>
+      <setting-menu v-if="activeModel==='edit'" style="float: right;height: 24px!important;">
+        <i slot="icon" class="icon iconfont icon-shezhi" />
+      </setting-menu>
+      <i v-if="activeModel==='edit'&&curComponent&&editFilter.includes(curComponent.type)" class="icon iconfont icon-edit" @click.stop="edit" />
+      <i v-if="curComponent.type==='view'" class="icon iconfont icon-fangda" @click.stop="showViewDetails" />
+    </div>
+
   </div>
 </template>
 
 <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'
 
 export default {
   components: { SettingMenu },
 
   props: {
+    element: {
+      type: Object,
+      required: true
+    },
     active: {
       type: Boolean,
       required: false,
@@ -32,6 +44,7 @@ export default {
   data() {
     return {
       componentType: null,
+      linkageActiveStatus: false,
       editFilter: [
         'view',
         'custom'
@@ -44,11 +57,34 @@ export default {
     'menuShow',
     'curComponent',
     'componentData',
-    'canvasStyleData'
+    'canvasStyleData',
+    'linkageSettingStatus'
   ]),
   methods: {
     showViewDetails() {
       this.$emit('showViewDetails')
+    },
+    edit() {
+      // 编辑时临时保存 当前修改的画布
+      this.$store.dispatch('panel/setComponentDataTemp', JSON.stringify(this.componentData))
+      this.$store.dispatch('panel/setCanvasStyleDataTemp', JSON.stringify(this.canvasStyleData))
+      if (this.curComponent.type === 'view') {
+        this.$store.dispatch('chart/setViewId', null)
+        this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)
+        bus.$emit('PanelSwitchComponent', { name: 'ChartEdit', param: { 'id': this.curComponent.propValue.viewId, 'optType': 'edit' }})
+      }
+      if (this.curComponent.type === 'custom') {
+        bus.$emit('component-dialog-edit')
+      }
+
+      // 编辑样式组件
+
+      if (this.curComponent.type === 'v-text' || this.curComponent.type === 'rect-shape') {
+        bus.$emit('component-dialog-style')
+      }
+    },
+    linkageEdit() {
+
     }
   }
 }

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

@@ -153,6 +153,7 @@ export default {
       this.searchCount++
     }, refreshTime)
     eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
+    this.$store.commit('setLinkageSettingStatus', false)
   },
   beforeDestroy() {
     clearInterval(this.timer)

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

@@ -8,7 +8,7 @@
     @mousedown="handleMouseDown"
   >
     <!-- 网格线 -->
-    <Grid v-if="canvasStyleData.auxiliaryMatrix" :matrix-style="matrixStyle" />
+    <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />
     <!--页面组件列表展示-->
     <de-drag
       v-for="(item, index) in componentData"
@@ -29,6 +29,7 @@
       :snap="true"
       :snap-tolerance="2"
       :change-style="customStyle"
+      :draggable="!linkageSettingStatus"
       @refLineParams="getRefLineParams"
       @showViewDetails="showViewDetails(index)"
     >
@@ -249,7 +250,8 @@ export default {
       'componentData',
       'curComponent',
       'canvasStyleData',
-      'editor'
+      'editor',
+      'linkageSettingStatus'
     ])
   },
   watch: {

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

@@ -1,6 +1,17 @@
 <template>
   <div>
-    <div class="toolbar">
+    <!--    linkageActiveStatus:{{ linkageActiveStatus }}-->
+    <div v-if="linkageSettingStatus" class="toolbar">
+      <span style="float: right;">
+        <el-button size="mini" @click="saveLinkage">
+          {{ $t('commons.confirm') }}
+        </el-button>
+        <el-button size="mini" @click="cancelLinkage">
+          {{ $t('commons.cancel') }}
+        </el-button>
+      </span>
+    </div>
+    <div v-else class="toolbar">
 
       <div class="canvas-config" style="margin-right: 10px">
         <el-switch v-model="canvasStyleData.auxiliaryMatrix" :width="35" name="auxiliaryMatrix" />
@@ -125,7 +136,8 @@ export default {
     'curComponent',
     'changeTimes',
     'snapshotIndex',
-    'lastSaveSnapshotIndex'
+    'lastSaveSnapshotIndex',
+    'linkageSettingStatus'
   ]),
 
   created() {
@@ -302,6 +314,15 @@ export default {
     },
     closeNotSave() {
       this.close()
+    },
+    saveLinkage() {
+      this.cancelLinkageSettingStatus()
+    },
+    cancelLinkage() {
+      this.cancelLinkageSettingStatus()
+    },
+    cancelLinkageSettingStatus() {
+      this.$store.commit('setLinkageSettingStatus', false)
     }
   }
 }

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

@@ -21,7 +21,7 @@
     <de-container>
       <!--左侧导航栏-->
       <de-aside-container class="ms-aside-container">
-        <div style="width: 60px; left: 0px; top: 0px; bottom: 0px;  position: absolute">
+        <div v-if="!linkageSettingStatus" style="width: 60px; left: 0px; top: 0px; bottom: 0px;  position: absolute">
           <div style="width: 60px;height: 100%;overflow: hidden auto;position: relative;margin: 0px auto; font-size: 14px">
             <!-- 视图图表 start -->
             <div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 16px auto 0px;">
@@ -290,7 +290,8 @@ export default {
       'isClickComponent',
       'canvasStyleData',
       'curComponentIndex',
-      'componentData'
+      'componentData',
+      'linkageSettingStatus'
     ])
   },
 
@@ -322,6 +323,7 @@ export default {
     listenGlobalKeyDown()
 
     this.$store.commit('setCurComponent', { component: null, index: null })
+    this.$store.commit('setLinkageSettingStatus', false)
   },
   mounted() {
     // this.insertToBody()