center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge branch 'dev' into pr@dev@ckes

Browse Source
This commit is contained in:
taojinlong 2021-09-22 18:47:08 +08:00
commit 5a1c68f7fe
22 changed files with 423 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
backend/src/main/java/io/dataease/provider/ck/CKQueryProvider.java
View File

@ -891,6 +891,12 @@ public class CKQueryProvider extends QueryProvider {
split = "-";
} else if (StringUtils.equalsIgnoreCase(datePattern, "date_split")) {
split = "/";
} else {
split = "-";
}
if (StringUtils.isEmpty(dateStyle)) {
return "%Y-%m-%d %H:%M:%S";
}
switch (dateStyle) {

2
backend/src/main/java/io/dataease/provider/doris/DorisConstants.java
View File

@ -33,6 +33,8 @@ public class DorisConstants extends SQLConstants {
public static final String WHERE_VALUE_VALUE = "'%s'";
public static final String WHERE_NUMBER_VALUE = "%s";
public static final String AGG_COUNT = "COUNT(*)";
public static final String AGG_FIELD = "%s(%s)";

18
backend/src/main/java/io/dataease/provider/doris/DorisQueryProvider.java
View File

@ -785,7 +785,11 @@ public class DorisQueryProvider extends QueryProvider {
} else if (StringUtils.containsIgnoreCase(request.getTerm(), "like")) {
whereValue = "'%" + value + "%'";
} else {
whereValue = String.format(DorisConstants.WHERE_VALUE_VALUE, value);
if (field.getDeExtractType() == 2 || field.getDeExtractType() == 3 || field.getDeExtractType() == 4) {
whereValue = String.format(DorisConstants.WHERE_NUMBER_VALUE, value);
} else {
whereValue = String.format(DorisConstants.WHERE_VALUE_VALUE, value);
}
}
list.add(SQLObj.builder()
.whereField(whereName)
@ -849,7 +853,11 @@ public class DorisQueryProvider extends QueryProvider {
whereValue = String.format(DorisConstants.WHERE_BETWEEN, value.get(0), value.get(1));
}
} else {
whereValue = String.format(DorisConstants.WHERE_VALUE_VALUE, value.get(0));
if (field.getDeExtractType() == 2 || field.getDeExtractType() == 3 || field.getDeExtractType() == 4) {
whereValue = String.format(DorisConstants.WHERE_NUMBER_VALUE, value.get(0));
} else {
whereValue = String.format(DorisConstants.WHERE_VALUE_VALUE, value.get(0));
}
}
list.add(SQLObj.builder()
.whereField(whereName)
@ -865,6 +873,12 @@ public class DorisQueryProvider extends QueryProvider {
split = "-";
} else if (StringUtils.equalsIgnoreCase(datePattern, "date_split")) {
split = "/";
} else {
split = "-";
}
if (StringUtils.isEmpty(dateStyle)) {
return "%Y-%m-%d %H:%i:%S";
}
switch (dateStyle) {

6
backend/src/main/java/io/dataease/provider/es/EsQueryProvider.java
View File

@ -816,6 +816,12 @@ public class EsQueryProvider extends QueryProvider {
split = "-";
} else if (StringUtils.equalsIgnoreCase(datePattern, "date_split")) {
split = "/";
} else {
split = "-";
}
if (StringUtils.isEmpty(dateStyle)) {
return "YYYY-MM-dd HH:mm:ss";
}
switch (dateStyle) {

6
backend/src/main/java/io/dataease/provider/mysql/MysqlQueryProvider.java
View File

@ -859,6 +859,12 @@ public class MysqlQueryProvider extends QueryProvider {
split = "-";
} else if (StringUtils.equalsIgnoreCase(datePattern, "date_split")) {
split = "/";
} else {
split = "-";
}
if (StringUtils.isEmpty(dateStyle)) {
return "%Y-%m-%d %H:%i:%S";
}
switch (dateStyle) {

6
backend/src/main/java/io/dataease/provider/oracle/OracleQueryProvider.java
View File

@ -899,6 +899,12 @@ public class OracleQueryProvider extends QueryProvider {
split = "-";
} else if (StringUtils.equalsIgnoreCase(datePattern, "date_split")) {
split = "/";
} else {
split = "-";
}
if (StringUtils.isEmpty(dateStyle)) {
return OracleConstants.DEFAULT_DATE_FORMAT;
}
switch (dateStyle) {

6
backend/src/main/java/io/dataease/provider/pg/PgQueryProvider.java
View File

@ -886,6 +886,12 @@ public class PgQueryProvider extends QueryProvider {
split = "-";
} else if (StringUtils.equalsIgnoreCase(datePattern, "date_split")) {
split = "/";
} else {
split = "-";
}
if (StringUtils.isEmpty(dateStyle)) {
return "'YYYY-MM-DD HH24:MI:SS'";
}
switch (dateStyle) {

7
backend/src/main/java/io/dataease/provider/sqlserver/SqlserverQueryProvider.java
View File

@ -13,6 +13,7 @@ import io.dataease.dto.chart.ChartViewFieldDTO;
import io.dataease.dto.sqlObj.SQLObj;
import io.dataease.provider.QueryProvider;
import io.dataease.provider.SQLConstants;
import io.dataease.provider.oracle.OracleConstants;
import org.apache.commons.collections4.CollectionUtils;
import org.apache.commons.lang3.ObjectUtils;
import org.apache.commons.lang3.StringUtils;
@ -825,6 +826,12 @@ public class SqlserverQueryProvider extends QueryProvider {
split = "-";
} else if (StringUtils.equalsIgnoreCase(datePattern, "date_split")) {
split = "/";
} else {
split = "-";
}
if (StringUtils.isEmpty(dateStyle)) {
return "convert(varchar," + originField + ",120)";
}
switch (dateStyle) {

69
frontend/src/components/DeDrag/MoveInShadow.vue Normal file
View File

@ -0,0 +1,69 @@
<template>
<div style="z-index:-1" :style="style" />
</template>
<script>
import { mapState } from 'vuex'
export default {
replace: true,
name: 'MoveInShadow',
props: {
w: {
type: Number,
required: true
},
h: {
type: Number,
required: true
},
x: {
type: Number,
required: true
},
y: {
type: Number,
required: true
},
z: {
type: Number,
required: true
}
},
computed: {
style() {
// 当前默认为自适应
let left = this.x
let top = this.y
let width = this.w
let height = this.h
if (this.canvasStyleData.auxiliaryMatrix) {
left = Math.round(left / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
width = Math.round(width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
top = Math.round(top / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
height = Math.round(height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
}
const style = {
transform: `translate(${left}px, ${top}px) rotate(0deg)`,
width: width + 'px',
height: height + 'px',
opacity: 0.4,
background: 'gray',
position: 'absolute'
}
// console.log('style=>' + JSON.stringify(style))
return style
},
...mapState([
'curComponent',
'editor',
'curCanvasScale',
'canvasStyleData',
'linkageSettingStatus'
])
}
}
</script>
<style scoped>
</style>

65
frontend/src/components/DeDrag/index.vue
View File

@ -32,7 +32,9 @@
>
<slot :name="handlei" />
</div>
<slot />
<div :style="mainSlotStyle" :class="{'gap_class':canvasStyleData.panel.gap==='yes'}">
<slot />
</div>
</div>
</template>
@ -50,7 +52,7 @@ import EditBar from '@/components/canvas/components/Editor/EditBar'
export default {
replace: true,
name: 'VueDragResizeRotate',
name: 'Dedrag',
components: { EditBar },
props: {
className: {
@ -445,7 +447,7 @@ export default {
return {
width: this.computedWidth,
height: this.computedHeight,
opacity: 0.2,
opacity: 0.4,
background: 'gray'
}
},
@ -473,9 +475,48 @@ export default {
return this.height + 'px'
},
// 根据left right 算出元素的宽度
computedMainSlotWidth() {
if (this.w === 'auto') {
if (!this.widthTouched) {
return 'auto'
}
}
if (this.canvasStyleData.auxiliaryMatrix) {
const width = Math.round(this.width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
return width + 'px'
} else {
return this.width + 'px'
}
},
// 根据top bottom 算出元素的宽度
computedMainSlotHeight() {
if (this.h === 'auto') {
if (!this.heightTouched) {
return 'auto'
}
}
if (this.canvasStyleData.auxiliaryMatrix) {
const height = Math.round(this.height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
return height + 'px'
} else {
return this.height + 'px'
}
},
// private
mainSlotStyle() {
const style = {
width: this.computedMainSlotWidth,
height: this.computedMainSlotHeight
}
// console.log('style=>' + JSON.stringify(style))
return style
},
curComponent() {
return this.$store.state.curComponent
},
...mapState([
'curComponent',
'editor',
'curCanvasScale',
'canvasStyleData',
@ -575,6 +616,18 @@ export default {
this.beforeDestroyFunction()
this.createdFunction()
this.mountedFunction()
},
// private 监控dragging resizing
dragging(val) {
if (this.enabled) {
this.curComponent.optStatus.dragging = val
}
},
// private 监控dragging resizing
resizing(val) {
if (this.enabled) {
this.curComponent.optStatus.resizing = val
}
}
},
created: function() {
@ -1659,6 +1712,10 @@ export default {
opacity: 0.5;
}
.gap_class{
padding:5px;
}
/*.mouseOn >>> .icon-shezhi{*/
/* z-index: 2;*/
/* display:block!important;*/

96
frontend/src/components/DeDrag/shadow.vue Normal file
View File

@ -0,0 +1,96 @@
<template>
<div style="z-index:-1" :style="styleInfo" />
</template>
<script>
import { mapState } from 'vuex'
export default {
replace: true,
name: 'Shadow',
computed: {
styleInfo() {
// console.log('styleInfo==>')
// debugger
// console.log('dragComponentInfo==>' + this.dragComponentInfo.shadowStyle.x)
let left = 0
let top = 0
let width = 0
let height = 0
if (this.dragComponentInfo) {
// 组件移入
left = this.dragComponentInfo.shadowStyle.x
top = this.dragComponentInfo.shadowStyle.y
width = this.dragComponentInfo.style.width
height = this.dragComponentInfo.style.height
// console.log('left:' + left + 'top:' + top + 'width:' + width + 'height:' + height)
} else {
left = this.curComponent.style.left * this.curCanvasScale.scaleWidth / 100
top = this.curComponent.style.top * this.curCanvasScale.scaleHeight / 100
width = this.curComponent.style.width * this.curCanvasScale.scaleWidth / 100
height = this.curComponent.style.height * this.curCanvasScale.scaleHeight / 100
// console.log('curComponent left:' + left + 'top:' + top + 'width:' + width + 'height:' + height)
}
// 当前默认为自适应
if (this.canvasStyleData.auxiliaryMatrix) {
left = Math.round(left / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
width = Math.round(width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
top = Math.round(top / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
height = Math.round(height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
}
// 防止阴影区超出边界
const xGap = left + width - this.canvasWidth
// console.log('canvasWidth:' + this.canvasWidth + ';xGap:' + xGap)
if (xGap > 0) {
left = left - xGap
}
const style = {
transform: `translate(${left}px, ${top}px) rotate(0deg)`,
width: width + 'px',
height: height + 'px',
opacity: 0.4,
background: 'gray',
position: 'absolute'
}
// console.log('style=>' + JSON.stringify(style))
// 记录外部拖拽进入仪表板时阴影区域宽高
if (this.dragComponentInfo) {
this.recordShadowStyle(left, top, width, height)
}
return style
},
dragComponentInfo() {
return this.$store.state.dragComponentInfo
},
canvasWidth() {
const scaleWidth = this.curCanvasScale.scaleWidth / 100
return this.canvasStyleData.width * scaleWidth
},
...mapState([
'curComponent',
'editor',
'curCanvasScale',
'canvasStyleData',
'linkageSettingStatus'
])
},
methods: {
recordShadowStyle(x, y, width, height) {
this.dragComponentInfo.shadowStyle.width = this.scaleW(width)
this.dragComponentInfo.shadowStyle.x = this.scaleW(x)
this.dragComponentInfo.shadowStyle.height = this.scaleH(height)
this.dragComponentInfo.shadowStyle.y = this.scaleH(y)
},
scaleH(h) {
return h * 100 / this.curCanvasScale.scaleHeight
},
scaleW(w) {
return w * 100 / this.curCanvasScale.scaleWidth
}
}
}
</script>
<style scoped>
</style>

2
frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
View File

@ -127,7 +127,7 @@ export default {
box-shadow:0px 0px 7px #0a7be0;
}
.gap_class{
padding:3px;
padding:5px;
}
.component-custom {
outline: none;

2
frontend/src/components/canvas/components/Editor/Preview.vue
View File

@ -259,7 +259,7 @@ export default {
color: #9ea6b2;
}
.gap_class{
padding:3px;
padding:5px;
}
.dialog-css>>>.el-dialog__title {
font-size: 14px;

44
frontend/src/components/canvas/components/Editor/index.vue
View File

@ -9,7 +9,9 @@
}
]"
:style="customStyle"
@dragover="handleDragOver"
@mousedown="handleMouseDown"
@scroll="canvasScroll"
>
<!-- 网格线 -->
<!-- <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />-->
@ -32,7 +34,6 @@
:active="item === curComponent"
:element="item"
class-name-active="de-drag-active"
:class="{'gap_class':canvasStyleData.panel.gap==='yes'}"
:snap="true"
:snap-tolerance="2"
:change-style="customStyle"
@ -104,9 +105,8 @@
:active="item === curComponent"
/>
</de-drag>
<!--拖拽阴影部分-->
<drag-shadow v-if="(curComponent&&this.curComponent.optStatus.dragging)||dragComponentInfo" />
<!-- 右击菜单 -->
<ContextMenu />
<!-- 标线 (临时去掉标线 吸附等功能)-->
@ -169,9 +169,10 @@ import { deepCopy } from '@/components/canvas/utils/utils'
import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
import DeOutWidget from '@/components/dataease/DeOutWidget'
import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar'
import DragShadow from '@/components/DeDrag/shadow'
export default {
components: { Shape, ContextMenu, MarkLine, Area, Grid, DeDrag, UserViewDialog, DeOutWidget, CanvasOptBar },
components: { Shape, ContextMenu, MarkLine, Area, Grid, DeDrag, UserViewDialog, DeOutWidget, CanvasOptBar, DragShadow },
props: {
isEdit: {
type: Boolean,
@ -221,8 +222,8 @@ export default {
},
// 矩阵数量 默认 128 * 72
matrixCount: {
x: 80,
y: 45
x: 36,
y: 18
},
customStyleHistory: null,
showDrag: true,
@ -263,6 +264,9 @@ export default {
panelInfo() {
return this.$store.state.panel.panelInfo
},
dragComponentInfo() {
return this.$store.state.dragComponentInfo
},
...mapState([
'componentData',
'curComponent',
@ -636,8 +640,36 @@ export default {
},
resizeView(index, item) {
if (item.type === 'view') {
// console.log('view:resizeView')
this.$refs.wrapperChild[index].chartResize()
}
},
handleDragOver(e) {
// console.log('handleDragOver=>layer:' + e.layerX + ':' + e.layerY + ';offSet=>' + e.offsetX + ':' + e.offsetY + ';page=' + e.pageX + ':' + e.pageY)
// console.log('e=>x=>' + JSON.stringify(e))
// 使用e.pageX 避免抖动的情况
this.dragComponentInfo.shadowStyle.x = e.pageX - 220
this.dragComponentInfo.shadowStyle.y = e.pageY - 90
// console.log('handleDragOver=>x=>' + this.dragComponentInfo.shadowStyle.x)
e.preventDefault()
e.dataTransfer.dropEffect = 'copy'
},
getPositionX(x) {
if (this.canvasStyleData.selfAdaption) {
return x * 100 / this.curCanvasScale.scaleWidth
} else {
return x
}
},
getPositionY(y) {
if (this.canvasStyleData.selfAdaption) {
return y * 100 / this.curCanvasScale.scaleHeight
} else {
return y
}
},
canvasScroll(event) {
this.$emit('canvasScroll', event)
}
}
}

2
frontend/src/components/canvas/custom-component/UserView.vue
View File

@ -435,7 +435,7 @@ export default {
this.$refs[this.element.propValue.id].chartResize()
}
this.destroyTimeMachine()
}, 200)
}, 50)
}
},

19
frontend/src/components/canvas/custom-component/component-list.js
View File

@ -51,9 +51,9 @@ const list = [
icon: 'wenben',
type: 'v-text',
style: {
width: 300,
width: 400,
height: 100,
fontSize: 18,
fontSize: 22,
fontWeight: 400,
lineHeight: '',
letterSpacing: 0,
@ -120,10 +120,10 @@ const list = [
icon: 'juxing',
type: 'rect-shape',
style: {
width: 200,
height: 200,
width: 400,
height: 300,
borderStyle: 'solid',
borderWidth: 1,
borderWidth: 0,
borderColor: '#000000',
backgroundColor: '#ffffff',
borderRadius: 0
@ -137,7 +137,7 @@ const list = [
icon: 'juxing',
type: 'view',
style: {
width: 200,
width: 400,
height: 300,
borderRadius: ''
}
@ -148,7 +148,12 @@ const list = [
type: 'picture-add',
label: '拖拽上传',
icon: 'iconfont icon-picture',
defaultClass: 'text-filter'
defaultClass: 'text-filter',
style: {
width: 400,
height: 200,
borderRadius: ''
}
}
]

23
frontend/src/store/index.js
View File

@ -58,7 +58,9 @@ const data = {
// 和当前组件联动的目标组件
targetLinkageInfo: [],
// 当前仪表板联动 下钻 上卷等信息
nowPanelTrackInfo: {}
nowPanelTrackInfo: {},
// 拖拽的组件信息
dragComponentInfo: null
},
mutations: {
...animation.mutations,
@ -86,6 +88,13 @@ const data = {
},
setCurComponent(state, { component, index }) {
// 当前视图操作状态置空
if (component) {
component['optStatus'] = {
dragging: false,
resizing: false
}
}
state.styleChangeTimes = 0
state.curComponent = component
state.curComponentIndex = index
@ -247,6 +256,18 @@ const data = {
}
})
// state.styleChangeTimes++
},
setDragComponentInfo(state, dragComponentInfo) {
dragComponentInfo['shadowStyle'] = {
x: 0,
y: 0,
height: 0,
width: 0
}
state.dragComponentInfo = dragComponentInfo
},
clearDragComponentInfo(state) {
state.dragComponentInfo = null
}
},
modules: {

2
frontend/src/views/msg/unread.vue
View File

@ -169,6 +169,7 @@ export default {
allMarkReaded() {
allRead().then(res => {
this.$success(this.$t('webmsg.mark_success'))
bus.$emit('refresh-top-notification')
this.search()
})
},
@ -180,6 +181,7 @@ export default {
const param = this.multipleSelection.map(item => item.msgId)
batchRead(param).then(res => {
this.$success(this.$t('webmsg.mark_success'))
bus.$emit('refresh-top-notification')
this.search()
})
},

21
frontend/src/views/panel/AssistComponent/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="filter-container" @dragstart="handleDragStart">
<div class="filter-container" @dragstart="handleDragStart" @dragend="handleDragEnd()">
<div class="widget-subject">
<div class="filter-header">
@ -55,10 +55,11 @@
</template>
<script>
import { assistList, pictureList } from '@/components/canvas/custom-component/component-list'
import componentList, { assistList, pictureList } from '@/components/canvas/custom-component/component-list'
import toast from '@/components/canvas/utils/toast'
import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
import generateID from '@/components/canvas/utils/generateID'
import { deepCopy } from '@/components/canvas/utils/utils'
export default {
name: 'FilterGroup',
@ -71,6 +72,7 @@ export default {
methods: {
handleDragStart(ev) {
this.$store.commit('setDragComponentInfo', this.componentInfo(ev.target.dataset.id))
ev.dataTransfer.effectAllowed = 'copy'
const dataTrans = {
type: 'assist',
@ -115,13 +117,26 @@ export default {
}
})
this.$store.commit('recordSnapshot','handleFileChange')
this.$store.commit('recordSnapshot', 'handleFileChange')
}
img.src = fileResult
}
reader.readAsDataURL(file)
},
componentInfo(id) {
// 辅助设计组件
let component
componentList.forEach(componentTemp => {
if (id === componentTemp.id) {
component = deepCopy(componentTemp)
}
})
return component
},
handleDragEnd(ev) {
this.$store.commit('clearDragComponentInfo')
}
}
}

21
frontend/src/views/panel/ViewSelect/index.vue
View File

@ -31,6 +31,7 @@
:highlight-current="true"
@node-drag-start="handleDragStart"
@node-click="nodeClick"
@node-drag-end="dragEnd"
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<span>
@ -62,6 +63,8 @@
<script>
import { tree, findOne } from '@/api/panel/view'
import componentList from '@/components/canvas/custom-component/component-list'
import { deepCopy } from '@/components/canvas/utils/utils'
export default {
name: 'ViewSelect',
data() {
@ -105,6 +108,7 @@ export default {
})
},
handleDragStart(node, ev) {
this.$store.commit('setDragComponentInfo', this.viewComponentInfo())
ev.dataTransfer.effectAllowed = 'copy'
const dataTrans = {
type: 'view',
@ -112,10 +116,13 @@ export default {
}
ev.dataTransfer.setData('componentInfo', JSON.stringify(dataTrans))
},
dragEnd() {
console.log('dragEnd')
this.$store.commit('clearDragComponentInfo')
},
// 判断节点能否被拖拽
allowDrag(draggingNode) {
if (draggingNode.data.type === 'scene') {
if (draggingNode.data.type === 'scene' || draggingNode.data.type === 'group') {
return false
} else {
return true
@ -126,6 +133,16 @@ export default {
},
newChart() {
this.$emit('newChart')
},
viewComponentInfo() {
let component
// 用户视图设置 复制一个模板
componentList.forEach(componentTemp => {
if (componentTemp.type === 'view') {
component = deepCopy(componentTemp)
}
})
return component
}
}

37
frontend/src/views/panel/edit/index.vue
View File

@ -98,12 +98,10 @@
id="canvasInfo"
class="content this_canvas"
@drop="handleDrop"
@dragover="handleDragOver"
@mousedown="handleMouseDown"
@mouseup="deselectCurComponent"
@scroll="canvasScroll"
>
<Editor v-if="!previewVisible" :out-style="outStyle" />
<Editor v-if="!previewVisible" :out-style="outStyle" @canvasScroll="canvasScroll" />
</div>
</de-main-container>
<!-- <de-aside-container v-if="aidedButtonActive" :class="aidedButtonActive ? 'show' : 'hidden'" class="style-aside">-->
@ -276,7 +274,8 @@ export default {
adviceGroupId: null,
scrollLeft: 0,
scrollTop: 0,
timeMachine: null
timeMachine: null,
dropComponentInfo: null
}
},
@ -291,7 +290,8 @@ export default {
'canvasStyleData',
'curComponentIndex',
'componentData',
'linkageSettingStatus'
'linkageSettingStatus',
'dragComponentInfo'
])
},
@ -440,6 +440,8 @@ export default {
return data
},
handleDrop(e) {
// 记录拖拽信息
this.dropComponentInfo = deepCopy(this.dragComponentInfo)
this.currentDropElement = e
e.preventDefault()
e.stopPropagation()
@ -489,12 +491,18 @@ export default {
}
// position = absolution 或导致有偏移 这里中和一下偏移量
component.style.top = this.getPositionY(e.layerY)
component.style.left = this.getPositionX(e.layerX)
// component.style.top = this.getPositionY(e.layerY)
// component.style.left = this.getPositionX(e.layerX)
component.style.top = this.dropComponentInfo.shadowStyle.y
component.style.left = this.dropComponentInfo.shadowStyle.x
component.style.width = this.dropComponentInfo.shadowStyle.width
component.style.height = this.dropComponentInfo.shadowStyle.height
component.id = newComponentId
this.$store.commit('addComponent', { component })
this.$store.commit('recordSnapshot', 'handleDrop')
this.clearCurrentInfo()
// this.$store.commit('clearDragComponentInfo')
// // 文字组件
// if (component.type === 'v-text') {
@ -508,11 +516,6 @@ export default {
this.currentFilterCom = null
},
handleDragOver(e) {
e.preventDefault()
e.dataTransfer.dropEffect = 'copy'
},
handleMouseDown() {
// console.log('handleMouseDown123')
@ -593,6 +596,7 @@ export default {
this.$refs.files.click()
},
handleFileChange(e) {
const _this = this
const file = e.target.files[0]
if (!file.type.includes('image')) {
toast('只能插入图片')
@ -617,10 +621,10 @@ export default {
propValue: fileResult,
style: {
...commonStyle,
top: this.getPositionY(this.currentDropElement.layerY),
left: this.getPositionX(this.currentDropElement.layerX),
width: img.width / scale,
height: img.height / scale
top: _this.dropComponentInfo.shadowStyle.y,
left: _this.dropComponentInfo.shadowStyle.x,
width: _this.dropComponentInfo.shadowStyle.width,
height: _this.dropComponentInfo.shadowStyle.height
}
}
})
@ -691,6 +695,7 @@ export default {
}
},
canvasScroll(event) {
console.log('testTop' + event.target.scrollTop)
this.scrollLeft = event.target.scrollLeft
this.scrollTop = event.target.scrollTop
},

8
frontend/src/views/panel/filter/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="filter-container" @dragstart="handleDragStart">
<div class="filter-container" @dragstart="handleDragStart" @dragend="handleDragEnd()">
<div v-for="(item, key) in widgetSubjects" :key="key" class="widget-subject">
<div class="filter-header">
@ -30,6 +30,7 @@
<script>
import { ApplicationContext } from '@/utils/ApplicationContext'
import { deepCopy } from '@/components/canvas/utils/utils'
export default {
name: 'FilterGroup',
data() {
@ -80,12 +81,17 @@ export default {
methods: {
handleDragStart(ev) {
// 记录拖拽信息
this.$store.commit('setDragComponentInfo', deepCopy(ApplicationContext.getService(ev.target.dataset.id).getDrawPanel()))
ev.dataTransfer.effectAllowed = 'copy'
const dataTrans = {
type: 'other',
id: ev.target.dataset.id
}
ev.dataTransfer.setData('componentInfo', JSON.stringify(dataTrans))
},
handleDragEnd(ev) {
this.$store.commit('clearDragComponentInfo')
}
}
}