feat: 仪表板选项卡组件内视图支持放大编辑

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

@@ -5,7 +5,7 @@
     @click="handleClick"
     @mousedown="elementMouseDown"
   >
-    <edit-bar v-if="editBarShow" :element="config" @showViewDetails="showViewDetails" />
+    <edit-bar v-if="componentActiveFlag" :element="config" @showViewDetails="showViewDetails" />
     <de-out-widget
       v-if="config.type==='custom'"
       :id="'component' + config.id"
@@ -23,6 +23,7 @@
       :style="getComponentStyleDefault(config.style)"
       :prop-value="config.propValue"
       :is-edit="false"
+      :active="componentActiveFlag"
       :element="config"
       :search-count="searchCount"
       :h="config.style.height"
@@ -66,7 +67,7 @@ export default {
     }
   },
   computed: {
-    editBarShow() {
+    componentActiveFlag() {
       return this.curComponent && this.config === this.curComponent
     },
     curGap() {

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

+<template>
+  <div class="bar-main">
+    <div v-if="!linkageSettingStatus">
+      <span v-if="isEdit" :title="$t('panel.edit')">
+        <i class="icon iconfont icon-edit" @click.stop="edit" />
+      </span>
+      <span :title="$t('panel.details')">
+        <i class="icon iconfont icon-fangda" @click.stop="showViewDetails" />
+      </span>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import bus from '@/utils/bus'
+import { mapState } from 'vuex'
+export default {
+  props: {
+    viewId: {
+      type: String,
+      required: true
+    },
+    isEdit: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  data() {
+    return {
+      componentType: null,
+      linkageActiveStatus: false,
+      editFilter: [
+        'view',
+        'custom'
+      ],
+      timer: null
+    }
+  },
+  computed: {
+    ...mapState([
+      'linkageSettingStatus'
+    ])
+  },
+  mounted() {
+  },
+  beforeDestroy() {
+  },
+  methods: {
+    edit() {
+      // 编辑时临时保存 当前修改的画布
+      this.$store.dispatch('panel/setComponentDataTemp', JSON.stringify(this.componentData))
+      this.$store.dispatch('panel/setCanvasStyleDataTemp', JSON.stringify(this.canvasStyleData))
+      this.$store.dispatch('chart/setViewId', null)
+      this.$store.dispatch('chart/setViewId', this.viewId)
+      bus.$emit('PanelSwitchComponent', { name: 'ChartEdit', param: { 'id': this.viewId, 'optType': 'edit' }})
+    },
+    linkageEdit() {
+
+    },
+    amRemoveItem() {
+      this.$emit('amRemoveItem')
+    },
+    showViewDetails() {
+      this.$emit('showViewDetails')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .bar-main{
+    position: absolute;
+    right: 0px;
+    float:right;
+    z-index: 2;
+    border-radius:2px;
+    padding-left: 5px;
+    padding-right: 2px;
+    cursor:pointer!important;
+    background-color: #0a7be0;
+  }
+  .bar-main i{
+    color: white;
+    float: right;
+    margin-right: 3px;
+  }
+
+</style>

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

@@ -13,7 +13,7 @@
           <el-dropdown-item icon="el-icon-arrow-down" @click.native="downComponent">{{ $t('panel.downComponent') }}</el-dropdown-item>
           <el-dropdown-item v-if="'view'===curComponent.type" icon="el-icon-link" @click.native="linkageSetting">{{ $t('panel.linkage_setting') }}</el-dropdown-item>
           <el-dropdown-item v-if="'de-tabs'===curComponent.type" icon="el-icon-link" @click.native="addTab">{{ $t('panel.add_tab') }}</el-dropdown-item>
-          <el-dropdown-item  v-if="'view'===curComponent.type" icon="el-icon-connection" @click.native="linkJumpSet">跳转设置</el-dropdown-item>
+          <el-dropdown-item v-if="'view'===curComponent.type" icon="el-icon-connection" @click.native="linkJumpSet">跳转设置</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </div>

frontend/src/components/canvas/custom-component/UserView.vue

@@ -8,6 +8,7 @@
       'rect-shape'
     ]"
   >
+    <EditBarView v-if="editBarViewShowFlag" :is-edit="isEdit" :view-id="element.propValue.viewId" @showViewDetails="openChartDetailsDialog" />
     <div v-if="requestStatus==='error'" class="chart-error-class">
       <div class="chart-error-message-class">
         {{ message }},{{ $t('chart.chart_show_error') }}
@@ -67,10 +68,11 @@ import { getToken, getLinkToken } from '@/utils/auth'
 import DrillPath from '@/views/chart/view/DrillPath'
 import { areaMapping } from '@/api/map/map'
 import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
+import EditBarView from '@/components/canvas/components/Editor/EditBarView'
 
 export default {
   name: 'UserView',
-  components: { ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
+  components: { EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
   props: {
     element: {
       type: Object,
@@ -93,10 +95,19 @@ export default {
       required: false,
       default: false
     },
-    // eslint-disable-next-line vue/require-default-prop
     componentIndex: {
       type: Number,
       required: false
+    },
+    inTab: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isEdit: {
+      type: Boolean,
+      require: false,
+      default: true
     }
   },
   data() {
@@ -120,6 +131,9 @@ export default {
     }
   },
   computed: {
+    editBarViewShowFlag() {
+      return this.active && this.inTab
+    },
     charViewShowFlag() {
       return this.httpRequest.status && this.chart.type && !this.chart.type.includes('table') && !this.chart.type.includes('text') && this.renderComponent() === 'echarts'
     },
@@ -566,31 +580,31 @@ export default {
     display: block !important;
   }
 
-  .rect-shape > i {
-    right: 5px;
-    color: gray;
-    position: absolute;
-  }
+  /*.rect-shape > i {*/
+  /*  right: 5px;*/
+  /*  color: gray;*/
+  /*  position: absolute;*/
+  /*}*/
 
-  .rect-shape > > > i:hover {
-    color: red;
-  }
+  /*.rect-shape > > > i:hover {*/
+  /*  color: red;*/
+  /*}*/
 
-  .rect-shape:hover > > > .icon-fangda {
-    z-index: 2;
-    display: block;
-  }
+  /*.rect-shape:hover > > > .icon-fangda {*/
+  /*  z-index: 2;*/
+  /*  display: block;*/
+  /*}*/
 
-  .rect-shape > > > .icon-fangda {
-    display: none
-  }
+  /*.rect-shape > > > .icon-fangda {*/
+  /*  display: none*/
+  /*}*/
 
-  .rect-shape:hover > > > .icon-shezhi {
-    z-index: 2;
-    display: block;
-  }
+  /*.rect-shape:hover > > > .icon-shezhi {*/
+  /*  z-index: 2;*/
+  /*  display: block;*/
+  /*}*/
 
-  .rect-shape > > > .icon-shezhi {
-    display: none
-  }
+  /*.rect-shape > > > .icon-shezhi {*/
+  /*  display: none*/
+  /*}*/
 </style>

frontend/src/components/widget/DeWidget/DeTabs.vue

@@ -35,7 +35,7 @@
         </span>
 
         <div v-if="activeTabName === item.name" class="de-tab-content">
-          <user-view v-if="item.content && item.content.propValue && item.content.propValue.viewId" :ref="item.name" :element="item.content" :out-style="outStyle" />
+          <user-view v-if="item.content && item.content.propValue && item.content.propValue.viewId" :ref="item.name" :in-tab="true" :is-edit="isEdit" :active="active" :element="item.content" :out-style="outStyle" />
         </div>
 
       </el-tab-pane>
@@ -94,6 +94,7 @@ import ViewSelect from '@/views/panel/ViewSelect'
 import { uuid } from 'vue-uuid'
 import bus from '@/utils/bus'
 import componentList from '@/components/canvas/custom-component/component-list'
+import { mapState } from 'vuex'
 
 export default {
   name: 'DeTabls',
@@ -107,6 +108,10 @@ export default {
       type: Boolean,
       default: true
     },
+    active: {
+      type: Boolean,
+      default: false
+    },
     outStyle: {
       type: Object,
       required: false,
@@ -129,11 +134,24 @@ export default {
       tabList: []
     }
   },
+  watch: {
+    curComponent: {
+      handler(newVal, oldVla) {
+        console.log(newVal)
+      },
+      deep: true
+    }
+  },
   created() {
     bus.$on('add-new-tab', this.addNewTab)
     this.tabList = this.element.options && this.element.options.tabList
     this.activeTabName = this.tabList[0].name
   },
+  computed: {
+    ...mapState([
+      'curComponent'
+    ])
+  },
   methods: {
     beforeHandleCommond(item, param) {
       return {