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

2021-10-11 23:27:48 +08:00 · 2021-10-11 23:27:48 +08:00 · a3ed8a3b49
commit a3ed8a3b49
parent 7db17563fc
9 changed files with 35 additions and 20 deletions
--- a/frontend/src/components/DeDrag/index.vue
+++ b/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
--- a/frontend/src/components/DeDrag/shadow.vue
+++ b/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>
--- a/frontend/src/components/canvas/components/Editor/PGrid.vue
+++ b/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>
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/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
--- a/frontend/src/store/index.js
+++ b/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
    }
  },
--- a/frontend/src/views/chart/chart/chart.js
+++ b/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: {
--- a/frontend/src/views/panel/ViewSelect/index.vue
+++ b/frontend/src/views/panel/ViewSelect/index.vue
@ -188,6 +188,7 @@ export default {
        }
      })
      component.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix
+      component.moveStatus = 'start'
      return component
    }

--- a/frontend/src/views/panel/edit/index.vue
+++ b/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
--- a/frontend/src/views/panel/panel.js
+++ b/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 = {