refactor:更换仪表板视图设置组件

frontend/src/components/DeDrag/index.vue

@@ -19,9 +19,7 @@
     @mouseenter="enter"
     @mouseleave="leave"
   >
-    <setting-menu style="right:5px;position: absolute;z-index: 2">
+    <edit-bar v-if="active" :active-model="'edit'" @showViewDetails="showViewDetails" />
-      <i slot="icon" class="icon iconfont icon-shezhi" />
-    </setting-menu>
     <div
       v-for="(handlei, indexi) in actualHandles"
       :key="indexi"
@@ -46,11 +44,12 @@ let eventsFor = events.mouse
 import eventBus from '@/components/canvas/utils/eventBus'
 import { mapState } from 'vuex'
 import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
+import EditBar from '@/components/canvas/components/Editor/EditBar'
 
 export default {
   replace: true,
   name: 'VueDragResizeRotate',
-  components: { SettingMenu },
+  components: { EditBar },
   props: {
     className: {
       type: String,
@@ -1540,6 +1539,9 @@ export default {
       removeEvent(document.documentElement, 'mouseup', this.handleUp)
       removeEvent(document.documentElement, 'touchend touchcancel', this.deselect)
       removeEvent(window, 'resize', this.checkParentSize)
+    },
+    showViewDetails() {
+      this.$emit('showViewDetails')
     }
   }
 

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

@@ -18,9 +18,9 @@
     />
 
     <component
-      ref="wrapperChild"
       :is="config.component"
       v-else
+      ref="wrapperChild"
       :out-style="config.style"
       :style="getComponentStyleDefault(config.style)"
       :prop-value="config.propValue"
@@ -112,8 +112,8 @@ export default {
       e.stopPropagation()
       this.$store.commit('setCurComponent', { component: this.config, index: this.index })
     },
-    showViewDetails(){
+    showViewDetails() {
-      this.$refs.wrapperChild.openChartDetailsDialog();
+      this.$refs.wrapperChild.openChartDetailsDialog()
     }
   }
 }

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

@@ -1,15 +1,20 @@
 <template>
   <div class="bar-main">
+    <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="curComponent.type==='view'" class="icon iconfont icon-fangda" @click.stop="showViewDetails" />
-    <i v-if="activeModel==='edit'" class="icon iconfont icon-shezhi" @click.stop="showViewDetails" />
+    <!--    <el-checkbox />-->
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
 import eventBus from '@/components/canvas/utils/eventBus'
+import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
 
 export default {
+  components: { SettingMenu },
 
   props: {
     active: {

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

@@ -30,11 +30,13 @@
       :snap-tolerance="2"
       :change-style="customStyle"
       @refLineParams="getRefLineParams"
+      @showViewDetails="showViewDetails(index)"
     >
       <component
         :is="item.component"
         v-if="item.type==='v-text'"
         :id="'component' + item.id"
+        ref="wrapperChild"
         class="component"
         :style="getComponentStyleDefault(item.style)"
         :prop-value="item.propValue"
@@ -69,6 +71,7 @@
         :is="item.component"
         v-else-if="item.type==='other'"
         :id="'component' + item.id"
+        ref="wrapperChild"
         class="component"
         :style="getComponentStyle(item.style)"
         :prop-value="item.propValue"
@@ -80,6 +83,7 @@
         :is="item.component"
         v-else
         :id="'component' + item.id"
+        ref="wrapperChild"
         class="component"
         :style="getComponentStyleDefault(item.style)"
         :prop-value="item.propValue"
@@ -603,6 +607,9 @@ export default {
     },
     exportExcel() {
       this.$refs['userViewDialog'].exportExcel()
+    },
+    showViewDetails(index) {
+      this.$refs.wrapperChild[index].openChartDetailsDialog()
     }
   }
 }