提交 a3ed8a3b authored 作者: wangjiahao's avatar wangjiahao

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

上级 7db17563
...@@ -449,7 +449,7 @@ export default { ...@@ -449,7 +449,7 @@ export default {
return { return {
width: this.computedWidth, width: this.computedWidth,
height: this.computedHeight, height: this.computedHeight,
opacity: 0.4, opacity: 0.2,
background: 'gray' background: 'gray'
} }
}, },
...@@ -1254,7 +1254,7 @@ export default { ...@@ -1254,7 +1254,7 @@ export default {
// this.recordMatrixCurStyle() // this.recordMatrixCurStyle()
setTimeout(() => { setTimeout(() => {
this.recordMatrixCurShadowStyle() this.recordMatrixCurShadowStyle()
}, 50) }, 100)
} }
this.hasMove && this.$store.commit('recordSnapshot', 'handleUp') this.hasMove && this.$store.commit('recordSnapshot', 'handleUp')
// 记录snapshot后 移动已记录设置为false // 记录snapshot后 移动已记录设置为false
......
...@@ -64,10 +64,7 @@ export default { ...@@ -64,10 +64,7 @@ export default {
const style = { const style = {
transform: `translate(${left}px, ${top}px) rotate(0deg)`, transform: `translate(${left}px, ${top}px) rotate(0deg)`,
width: width + 'px', width: width + 'px',
height: height + 'px', height: height + 'px'
opacity: 0.4,
background: 'gray',
position: 'absolute'
} }
// console.log('style=>' + JSON.stringify(style)) // console.log('style=>' + JSON.stringify(style))
// 记录外部拖拽进入仪表板时阴影区域宽高 // 记录外部拖拽进入仪表板时阴影区域宽高
...@@ -110,7 +107,10 @@ export default { ...@@ -110,7 +107,10 @@ export default {
</script> </script>
<style scoped> <style scoped>
.main-shadow{ .main-shadow{
/*transition: 0.2s;*/ transition: 0.2s;
opacity: 0.4;
background: #409eff;
position: absolute;
} }
</style> </style>
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
<!-- positionBox:{{ positionBox.length }}--> <!-- 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" 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="(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 ;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 ;">
{{ xItem.el?1:0 }} {{ xItem.el?1:0 }}
</div> </div>
</div> </div>
......
...@@ -13,9 +13,9 @@ ...@@ -13,9 +13,9 @@
@scroll="canvasScroll" @scroll="canvasScroll"
> >
<!-- 网格线 --> <!-- 网格线 -->
<!-- <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />--> <Grid v-if="psDebug&&canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />
<!-- positionBox:{{positionBoxInfo}}--> <!-- positionBox:{{positionBoxInfo}}-->
<!-- <PGrid :position-box="positionBoxInfoArray" :matrix-style="matrixStyle" />--> <PGrid v-if="psDebug" :position-box="positionBoxInfoArray" :matrix-style="matrixStyle" />
<!-- 仪表板联动清除按钮--> <!-- 仪表板联动清除按钮-->
<canvas-opt-bar /> <canvas-opt-bar />
...@@ -120,7 +120,7 @@ ...@@ -120,7 +120,7 @@
</de-drag> </de-drag>
<!--拖拽阴影部分--> <!--拖拽阴影部分-->
<!-- <drag-shadow v-if="(curComponent&&this.curComponent.optStatus.dragging)||dragComponentInfo" />--> <!-- <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 /> <ContextMenu />
<!-- 标线 (临时去掉标线 吸附等功能)--> <!-- 标线 (临时去掉标线 吸附等功能)-->
...@@ -853,6 +853,7 @@ export default { ...@@ -853,6 +853,7 @@ export default {
}, },
data() { data() {
return { return {
psDebug: false, // 定位调试模式
editorX: 0, editorX: 0,
editorY: 0, editorY: 0,
start: { // 选中区域的起点 start: { // 选中区域的起点
...@@ -1025,7 +1026,6 @@ export default { ...@@ -1025,7 +1026,6 @@ export default {
mounted() { mounted() {
// 获取编辑器元素 // 获取编辑器元素
this.$store.commit('getEditor') this.$store.commit('getEditor')
const _this = this const _this = this
// bus.$on('auxiliaryMatrixChange', this.initMatrix) // bus.$on('auxiliaryMatrixChange', this.initMatrix)
bus.$on('auxiliaryMatrixChange', () => { bus.$on('auxiliaryMatrixChange', () => {
...@@ -1033,7 +1033,6 @@ export default { ...@@ -1033,7 +1033,6 @@ export default {
_this.initMatrix() _this.initMatrix()
}) })
}) })
eventBus.$on('hideArea', () => { eventBus.$on('hideArea', () => {
this.hideArea() this.hideArea()
}) })
...@@ -1041,11 +1040,15 @@ export default { ...@@ -1041,11 +1040,15 @@ export default {
// this.deleteCondition(condition) // this.deleteCondition(condition)
// }) // })
eventBus.$on('startMoveIn', this.startMoveIn) eventBus.$on('startMoveIn', this.startMoveIn)
eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog) eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
setInterval(() => { bus.$on('onRemoveLastItem', this.removeLastItem)
_this.positionBoxInfoArray = positionBox
}, 500) // 矩阵定位调试模式
if (this.psDebug) {
setInterval(() => {
_this.positionBoxInfoArray = positionBox
}, 500)
}
}, },
created() { created() {
// this.$store.dispatch('conditions/clear') // this.$store.dispatch('conditions/clear')
...@@ -1675,6 +1678,10 @@ export default { ...@@ -1675,6 +1678,10 @@ export default {
addItem.call(this, item, this.yourList.length - 1) addItem.call(this, item, this.yourList.length - 1)
}) })
}, },
removeLastItem() {
console.log('rlI:' + JSON.stringify(this.yourList))
this.removeItem(this.yourList.length - 1)
},
startMoveIn() { startMoveIn() {
if (this.canvasStyleData.auxiliaryMatrix) { if (this.canvasStyleData.auxiliaryMatrix) {
const moveInItemInfo = this.$store.state.dragComponentInfo const moveInItemInfo = this.$store.state.dragComponentInfo
......
...@@ -27,6 +27,7 @@ import { Condition } from '@/components/widget/bean/Condition' ...@@ -27,6 +27,7 @@ import { Condition } from '@/components/widget/bean/Condition'
import { import {
DEFAULT_COMMON_CANVAS_STYLE_STRING DEFAULT_COMMON_CANVAS_STYLE_STRING
} from '@/views/panel/panel' } from '@/views/panel/panel'
import bus from '@/utils/bus'
Vue.use(Vuex) Vue.use(Vuex)
...@@ -280,6 +281,10 @@ const data = { ...@@ -280,6 +281,10 @@ const data = {
state.dragComponentInfo = dragComponentInfo state.dragComponentInfo = dragComponentInfo
}, },
clearDragComponentInfo(state) { clearDragComponentInfo(state) {
// 如果当前没有拖拽的元素没有放置到画布 清理一下矩阵的占位符
if (state.dragComponentInfo.moveStatus !== 'drop') {
bus.$emit('onRemoveLastItem')
}
state.dragComponentInfo = null state.dragComponentInfo = null
} }
}, },
......
...@@ -184,7 +184,8 @@ export const DEFAULT_YAXIS_EXT_STYLE = { ...@@ -184,7 +184,8 @@ export const DEFAULT_YAXIS_EXT_STYLE = {
} }
export const DEFAULT_BACKGROUND_COLOR = { export const DEFAULT_BACKGROUND_COLOR = {
color: '#ffffff', color: '#ffffff',
alpha: 0 alpha: 100,
borderRadius: 5
} }
export const DEFAULT_SPLIT = { export const DEFAULT_SPLIT = {
name: { name: {
......
...@@ -188,6 +188,7 @@ export default { ...@@ -188,6 +188,7 @@ export default {
} }
}) })
component.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix component.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix
component.moveStatus = 'start'
return component return component
} }
......
...@@ -476,6 +476,7 @@ export default { ...@@ -476,6 +476,7 @@ export default {
return data return data
}, },
handleDrop(e) { handleDrop(e) {
this.dragComponentInfo.moveStatus = 'drop'
// 记录拖拽信息 // 记录拖拽信息
this.dropComponentInfo = deepCopy(this.dragComponentInfo) this.dropComponentInfo = deepCopy(this.dragComponentInfo)
this.currentDropElement = e this.currentDropElement = e
......
...@@ -7,7 +7,7 @@ export const DEFAULT_PANEL_STYLE = { ...@@ -7,7 +7,7 @@ export const DEFAULT_PANEL_STYLE = {
color: '#ffffff', color: '#ffffff',
imageUrl: null, imageUrl: null,
backgroundType: 'image', backgroundType: 'image',
gap: 'no' gap: 'yes'
} }
export const CANVAS_STYLE = { export const CANVAS_STYLE = {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论