Merge pull request #827 from dataease/pr@dev@refactor_panel-text

feat:仪表板视图改变大小时增加阴影效果

frontend/src/components/DeDrag/index.vue

@@ -21,6 +21,7 @@
     @mouseleave="leave"
   >
     <edit-bar v-if="active||linkageSettingStatus" style="transform: translateZ(10px)" :active-model="'edit'" :element="element" @showViewDetails="showViewDetails" />
+    <div v-if="resizing" style="transform: translateZ(11px);position: absolute; z-index: 3" :style="resizeShadowStyle" />
     <div
       v-for="(handlei, indexi) in actualHandles"
       :key="indexi"
@@ -440,6 +441,14 @@ export default {
         ...(this.dragging && this.disableUserSelect ? userSelectNone : userSelectAuto)
       }
     },
+    resizeShadowStyle() {
+      return {
+        width: this.computedWidth,
+        height: this.computedHeight,
+        opacity: 0.2,
+        background: 'gray'
+      }
+    },
     // 控制柄显示与否
     actualHandles() {
       if (!this.resizable) return []
@@ -1490,7 +1499,7 @@ export default {
       // resize
       const self = this
       setTimeout(function() {
-        self.$emit('resizestop')
+        self.$emit('resizeView')
       }, 200)
     },
     mountedFunction() {

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

@@ -41,7 +41,7 @@
       :linkage-active="linkageSettingStatus&&item===curLinkageView"
       @refLineParams="getRefLineParams"
       @showViewDetails="showViewDetails(index)"
-      @resizestop="resizestop(index,item)"
+      @resizeView="resizeView(index,item)"
     >
       <component
         :is="item.component"
@@ -104,6 +104,9 @@
         :active="item === curComponent"
       />
     </de-drag>
+
+    <!--拖拽阴影部分-->
+
     <!-- 右击菜单 -->
     <ContextMenu />
     <!-- 标线 (临时去掉标线 吸附等功能)-->
@@ -631,7 +634,7 @@ export default {
     showViewDetails(index) {
       this.$refs.wrapperChild[index].openChartDetailsDialog()
     },
-    resizestop(index, item) {
+    resizeView(index, item) {
       if (item.type === 'view') {
         this.$refs.wrapperChild[index].chartResize()
       }