refactor: 优化拖拽阴影动画效果等,设置仪表板视图相关背景参数默认值

frontend/src/components/DeDrag/index.vue

@@ -449,7 +449,7 @@ export default {
       return {
         width: this.computedWidth,
         height: this.computedHeight,
-        opacity: 0.4,
+        opacity: 0.2,
         background: 'gray'
       }
     },
@@ -1254,7 +1254,7 @@ export default {
         // this.recordMatrixCurStyle()
         setTimeout(() => {
           this.recordMatrixCurShadowStyle()
-        }, 50)
+        }, 100)
       }
       this.hasMove && this.$store.commit('recordSnapshot', 'handleUp')
       // 记录snapshot后 移动已记录设置为false

frontend/src/components/DeDrag/shadow.vue

@@ -64,10 +64,7 @@ export default {
       const style = {
         transform: `translate(${left}px, ${top}px) rotate(0deg)`,
         width: width + 'px',
-        height: height + 'px',
-        opacity: 0.4,
-        background: 'gray',
-        position: 'absolute'
+        height: height + 'px'
       }
       // console.log('style=>' + JSON.stringify(style))
       // 记录外部拖拽进入仪表板时阴影区域宽高
@@ -110,7 +107,10 @@ export default {
 </script>
 <style scoped>
   .main-shadow{
-    /*transition: 0.2s;*/
+    transition: 0.2s;
+    opacity: 0.4;
+    background: #409eff;
+    position: absolute;
   }
 
 </style>

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

@@ -3,8 +3,8 @@
     <!--    positionBox:{{ positionBox.length }}-->
     <!--    <div v-for="(yItem, index) in positionBox" v-if="index<positionBox.length-5" :key="index+'y'" style="float: left; width: 105%">-->
     <div v-for="(yItem, index) in positionBox" :key="index+'y'" style="float: left; width: 105%">
-      <div v-for="(xItem, index) in yItem" :key="index+'x'" :style="classInfo" style="float: left; border: 0.2px solid #b3d4fc ;color: #00feff">
-<!--      <div v-for="(xItem, index) in yItem" :key="index+'x'" :style="classInfo" style="float: left; border: 0.2px solid #b3d4fc ;">-->
+<!--      <div v-for="(xItem, index) in yItem" :key="index+'x'" :style="classInfo" style="float: left; border: 0.2px solid #b3d4fc ;color: #00feff">-->
+      <div v-for="(xItem, index) in yItem" :key="index+'x'" :style="classInfo" style="float: left; border: 0.2px solid #b3d4fc ;">
         {{ xItem.el?1:0 }}
       </div>
     </div>

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

@@ -13,9 +13,9 @@
     @scroll="canvasScroll"
   >
     <!-- 网格线 -->
-    <!--    <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />-->
+    <Grid v-if="psDebug&&canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />
     <!--    positionBox:{{positionBoxInfo}}-->
-<!--    <PGrid :position-box="positionBoxInfoArray" :matrix-style="matrixStyle" />-->
+    <PGrid v-if="psDebug" :position-box="positionBoxInfoArray" :matrix-style="matrixStyle" />
 
     <!-- 仪表板联动清除按钮-->
     <canvas-opt-bar />
@@ -120,7 +120,7 @@
     </de-drag>
     <!--拖拽阴影部分-->
     <!--    <drag-shadow v-if="(curComponent&&this.curComponent.optStatus.dragging)||dragComponentInfo" />-->
-    <drag-shadow v-if="(curComponent&&curComponent.auxiliaryMatrix)||(dragComponentInfo)" />
+    <drag-shadow v-if="(curComponent&&curComponent.auxiliaryMatrix&&(curComponent.optStatus.dragging||curComponent.optStatus.resizing))||(dragComponentInfo)" />
     <!-- 右击菜单 -->
     <ContextMenu />
     <!-- 标线 (临时去掉标线 吸附等功能)-->
@@ -853,6 +853,7 @@ export default {
   },
   data() {
     return {
+      psDebug: false, // 定位调试模式
       editorX: 0,
       editorY: 0,
       start: { // 选中区域的起点
@@ -1025,7 +1026,6 @@ export default {
   mounted() {
     // 获取编辑器元素
     this.$store.commit('getEditor')
-
     const _this = this
     // bus.$on('auxiliaryMatrixChange', this.initMatrix)
     bus.$on('auxiliaryMatrixChange', () => {
@@ -1033,7 +1033,6 @@ export default {
         _this.initMatrix()
       })
     })
-
     eventBus.$on('hideArea', () => {
       this.hideArea()
     })
@@ -1041,11 +1040,15 @@ export default {
     //   this.deleteCondition(condition)
     // })
     eventBus.$on('startMoveIn', this.startMoveIn)
-
     eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
-    setInterval(() => {
-      _this.positionBoxInfoArray = positionBox
-    }, 500)
+    bus.$on('onRemoveLastItem', this.removeLastItem)
+
+    // 矩阵定位调试模式
+    if (this.psDebug) {
+      setInterval(() => {
+        _this.positionBoxInfoArray = positionBox
+      }, 500)
+    }
   },
   created() {
     // this.$store.dispatch('conditions/clear')
@@ -1675,6 +1678,10 @@ export default {
         addItem.call(this, item, this.yourList.length - 1)
       })
     },
+    removeLastItem() {
+      console.log('rlI:' + JSON.stringify(this.yourList))
+      this.removeItem(this.yourList.length - 1)
+    },
     startMoveIn() {
       if (this.canvasStyleData.auxiliaryMatrix) {
         const moveInItemInfo = this.$store.state.dragComponentInfo

frontend/src/store/index.js

@@ -27,6 +27,7 @@ import { Condition } from '@/components/widget/bean/Condition'
 import {
   DEFAULT_COMMON_CANVAS_STYLE_STRING
 } from '@/views/panel/panel'
+import bus from '@/utils/bus'
 
 Vue.use(Vuex)
 
@@ -280,6 +281,10 @@ const data = {
       state.dragComponentInfo = dragComponentInfo
     },
     clearDragComponentInfo(state) {
+      // 如果当前没有拖拽的元素没有放置到画布 清理一下矩阵的占位符
+      if (state.dragComponentInfo.moveStatus !== 'drop') {
+        bus.$emit('onRemoveLastItem')
+      }
       state.dragComponentInfo = null
     }
   },

frontend/src/views/chart/chart/chart.js

@@ -184,7 +184,8 @@ export const DEFAULT_YAXIS_EXT_STYLE = {
 }
 export const DEFAULT_BACKGROUND_COLOR = {
   color: '#ffffff',
-  alpha: 0
+  alpha: 100,
+  borderRadius: 5
 }
 export const DEFAULT_SPLIT = {
   name: {

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

@@ -188,6 +188,7 @@ export default {
         }
       })
       component.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix
+      component.moveStatus = 'start'
       return component
     }
 

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

@@ -476,6 +476,7 @@ export default {
       return data
     },
     handleDrop(e) {
+      this.dragComponentInfo.moveStatus = 'drop'
       // 记录拖拽信息
       this.dropComponentInfo = deepCopy(this.dragComponentInfo)
       this.currentDropElement = e

frontend/src/views/panel/panel.js

@@ -7,7 +7,7 @@ export const DEFAULT_PANEL_STYLE = {
   color: '#ffffff',
   imageUrl: null,
   backgroundType: 'image',
-  gap: 'no'
+  gap: 'yes'
 }
 
 export const CANVAS_STYLE = {