forked from github/dataease
Merge branch 'dev' into pr@dev_eslint_auto_fix
This commit is contained in:
dataeaseShu
commit
234fd70131
@ -1,71 +0,0 @@
|
||||
<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'
|
||||
}
|
||||
return style
|
||||
},
|
||||
...mapState([
|
||||
'curComponent',
|
||||
'editor',
|
||||
'curCanvasScale',
|
||||
'canvasStyleData',
|
||||
'linkageSettingStatus'
|
||||
])
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -22,6 +22,7 @@
|
||||
@mouseleave="leave"
|
||||
>
|
||||
<div
|
||||
v-show="contentDisplay"
|
||||
:class="[
|
||||
{
|
||||
['de-drag-active-inner']:enabled,
|
||||
@ -35,6 +36,7 @@
|
||||
v-if="editBarShow"
|
||||
style="transform: translateZ(10px)"
|
||||
:active-model="'edit'"
|
||||
:canvas-id="canvasId"
|
||||
:element="element"
|
||||
@showViewDetails="showViewDetails"
|
||||
@amRemoveItem="amRemoveItem"
|
||||
@ -62,7 +64,7 @@
|
||||
@mousedown.stop.prevent="handleDown(handlei, $event)"
|
||||
@touchstart.stop.prevent="handleTouchDown(handlei, $event)"
|
||||
>
|
||||
<slot :name="handlei" />
|
||||
<slot :name="handlei"/>
|
||||
</div>
|
||||
<div
|
||||
:id="componentCanvasId"
|
||||
@ -75,7 +77,7 @@
|
||||
class="svg-background"
|
||||
:icon-class="mainSlotSvgInner"
|
||||
/>
|
||||
<slot />
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -98,9 +100,13 @@ import { imgUrlTrans } from '@/components/canvas/utils/utils'
|
||||
|
||||
export default {
|
||||
replace: true,
|
||||
name: 'Dedrag',
|
||||
name: 'DeDrag',
|
||||
components: { EditBar, MobileCheckBar },
|
||||
props: {
|
||||
canvasId: {
|
||||
type: String,
|
||||
default: 'canvas-main'
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: 'vdr'
|
||||
@ -370,10 +376,21 @@ export default {
|
||||
batchOptActive: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// tab 移入检测
|
||||
isTabMoveCheck: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
contentDisplay: true,
|
||||
//当画布在tab中是 宽度左右拓展的余量
|
||||
parentWidthTabOffset: 40,
|
||||
canvasChangeTips: 'none',
|
||||
tabMoveInYOffset: 70,
|
||||
tabMoveInXOffset: 40,
|
||||
left: this.x,
|
||||
top: this.y,
|
||||
right: null,
|
||||
@ -417,6 +434,16 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
parentWidthOffset(){
|
||||
if(this.canvasId==='canvas-main'){
|
||||
return 0
|
||||
}else{
|
||||
return this.parentWidthTabOffset
|
||||
}
|
||||
},
|
||||
curCanvasScaleSelf() {
|
||||
return this.curCanvasScaleMap[this.canvasId]
|
||||
},
|
||||
svgBg() {
|
||||
return {
|
||||
width: this.width + 'px!important',
|
||||
@ -558,7 +585,7 @@ export default {
|
||||
}
|
||||
}
|
||||
if (this.element.auxiliaryMatrix) {
|
||||
const width = Math.round(this.width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
|
||||
const width = Math.round(this.width / this.curCanvasScaleSelf.matrixStyleWidth) * this.curCanvasScaleSelf.matrixStyleWidth
|
||||
return (width - this.curGap * 2) + 'px'
|
||||
} else {
|
||||
return (this.width - this.curGap * 2) + 'px'
|
||||
@ -572,7 +599,7 @@ export default {
|
||||
}
|
||||
}
|
||||
if (this.element.auxiliaryMatrix) {
|
||||
const height = Math.round(this.height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
|
||||
const height = Math.round(this.height / this.curCanvasScaleSelf.matrixStyleHeight) * this.curCanvasScaleSelf.matrixStyleHeight
|
||||
return (height - this.curGap * 2) + 'px'
|
||||
} else {
|
||||
return (this.height - this.curGap * 2) + 'px'
|
||||
@ -625,14 +652,14 @@ export default {
|
||||
return (this.canvasStyleData.panel.gap === 'yes' && this.element.auxiliaryMatrix) ? this.componentGap : 0
|
||||
},
|
||||
miniWidth() {
|
||||
return this.element.auxiliaryMatrix ? this.curCanvasScale.matrixStyleWidth * (this.mobileLayoutStatus ? 1 : 4) : 0
|
||||
return this.element.auxiliaryMatrix ? this.curCanvasScaleSelf.matrixStyleWidth * (this.mobileLayoutStatus ? 1 : 4) : 0
|
||||
},
|
||||
miniHeight() {
|
||||
if (this.element.auxiliaryMatrix) {
|
||||
if (this.element.component === 'de-number-range') {
|
||||
return this.element.auxiliaryMatrix ? this.curCanvasScale.matrixStyleHeight * (this.mobileLayoutStatus ? 1 : 4) : 0
|
||||
return this.element.auxiliaryMatrix ? this.curCanvasScaleSelf.matrixStyleHeight * (this.mobileLayoutStatus ? 1 : 4) : 0
|
||||
} else {
|
||||
return this.element.auxiliaryMatrix ? this.curCanvasScale.matrixStyleHeight * (this.mobileLayoutStatus ? 1 : 4) : 0
|
||||
return this.element.auxiliaryMatrix ? this.curCanvasScaleSelf.matrixStyleHeight * (this.mobileLayoutStatus ? 1 : 4) : 0
|
||||
}
|
||||
} else {
|
||||
return 0
|
||||
@ -640,13 +667,17 @@ export default {
|
||||
},
|
||||
...mapState([
|
||||
'editor',
|
||||
'curCanvasScale',
|
||||
'curCanvasScaleMap',
|
||||
'canvasStyleData',
|
||||
'linkageSettingStatus',
|
||||
'mobileLayoutStatus',
|
||||
'componentGap',
|
||||
'scrollAutoMove',
|
||||
'batchOptStatus'
|
||||
'batchOptStatus',
|
||||
'tabMoveInActiveId',
|
||||
'tabActiveTabNameMap',
|
||||
'mousePointShadowMap',
|
||||
'tabMoveOutComponentId'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
@ -799,6 +830,7 @@ export default {
|
||||
const rect = this.$el.parentNode.getBoundingClientRect()
|
||||
this.parentX = rect.x
|
||||
this.parentY = rect.y
|
||||
// 高度不设置上限100000 宽度增加左右 60px
|
||||
return [Math.round(parseFloat(style.getPropertyValue('width'), 10)) + 6, 100000]
|
||||
}
|
||||
if (typeof this.parent === 'string') {
|
||||
@ -834,6 +866,8 @@ export default {
|
||||
this.elementDown(e)
|
||||
this.$nextTick(() => {
|
||||
this.$store.commit('setCurComponent', { component: this.element, index: this.index })
|
||||
this.curComponent.optStatus.dragging = true
|
||||
this.$store.commit('clearTabMoveInfo')
|
||||
})
|
||||
},
|
||||
// 元素按下
|
||||
@ -905,8 +939,9 @@ export default {
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
minLeft: this.left % this.grid[0],
|
||||
maxLeft: Math.floor((this.parentWidth - this.width - this.left) / this.grid[0]) * this.grid[0] + this.left,
|
||||
// X方向余量向左右偏移this.parentWidthOffset 个余量，可以做到类型像移出canvas的效果，适配Tab的canvas组件
|
||||
minLeft: this.left % this.grid[0] - this.parentWidthOffset,
|
||||
maxLeft: (Math.floor((this.parentWidth - this.width - this.left) / this.grid[0]) * this.grid[0] + this.left) + this.parentWidthOffset,
|
||||
minRight: this.right % this.grid[0],
|
||||
maxRight: Math.floor((this.parentWidth - this.width - this.right) / this.grid[0]) * this.grid[0] + this.right,
|
||||
minTop: this.top % this.grid[1],
|
||||
@ -1106,7 +1141,8 @@ export default {
|
||||
const bounds = this.bounds
|
||||
const mouseClickPosition = this.mouseClickPosition
|
||||
// 水平移动
|
||||
const tmpDeltaX = axis && axis !== 'y' ? mouseClickPosition.mouseX - (e.touches ? e.touches[0].pageX : e.pageX) : 0
|
||||
const mX = e.touches ? e.touches[0].pageX : e.pageX
|
||||
const tmpDeltaX = axis && axis !== 'y' ? mouseClickPosition.mouseX - mX : 0
|
||||
// 垂直移动
|
||||
const mY = e.touches ? e.touches[0].pageY : e.pageY
|
||||
const tmpDeltaY = axis && axis !== 'x' ? mouseClickPosition.mouseY - mY : 0
|
||||
@ -1132,7 +1168,15 @@ export default {
|
||||
if (this.element.auxiliaryMatrix) {
|
||||
this.$emit('onDragging', e, this.element)
|
||||
}
|
||||
|
||||
if ((-left > (this.parentWidthOffset - 10) || left - bounds.maxRight > (this.parentWidthOffset - 10)) && this.canvasId !== 'canvas-main') {
|
||||
this.contentDisplay = false
|
||||
this.$store.commit('setMousePointShadowMap', { mouseX: mX, mouseY: mY, width: this.width, height: this.height })
|
||||
this.$store.commit('setTabMoveOutComponentId', this.element.id)
|
||||
} else {
|
||||
this.$store.commit('setTabMoveOutComponentId', null)
|
||||
this.contentDisplay = true
|
||||
}
|
||||
await this.tabMoveInCheck()
|
||||
// private 记录当前样式
|
||||
this.recordCurStyle()
|
||||
},
|
||||
@ -1365,9 +1409,6 @@ export default {
|
||||
this.resizing = false
|
||||
this.conflictCheck()
|
||||
this.$emit('refLineParams', refLine)
|
||||
// this.$emit('resizestop', this.left, this.top, this.width, this.height)
|
||||
// private
|
||||
// this.$emit('resizestop')
|
||||
}
|
||||
if (this.dragging) {
|
||||
this.dragging = false
|
||||
@ -1384,9 +1425,14 @@ export default {
|
||||
|
||||
// 如果辅助设计 需要最后调整矩阵
|
||||
if (this.element.auxiliaryMatrix) {
|
||||
// this.recordMatrixCurStyle()
|
||||
const _this = this
|
||||
const historyTabMoveInActiveId = this.tabMoveInActiveId
|
||||
const historyTabMoveOutComponentId = this.tabMoveOutComponentId
|
||||
setTimeout(() => {
|
||||
this.recordMatrixCurShadowStyle()
|
||||
// 移入组件移入Tab时 不需要计算根据阴影面积重置大小
|
||||
if (!historyTabMoveInActiveId && !historyTabMoveOutComponentId) {
|
||||
this.recordMatrixCurShadowStyle(this.curCanvasScaleSelf)
|
||||
}
|
||||
this.hasMove && this.$store.commit('recordSnapshot', 'handleUp')
|
||||
// 记录snapshot后 移动已记录设置为false
|
||||
this.hasMove = false
|
||||
@ -1404,14 +1450,78 @@ export default {
|
||||
|
||||
// 挤占式画布设计 handleUp
|
||||
this.element.auxiliaryMatrix && this.$emit('onHandleUp', e)
|
||||
this.componentCanvasChange()
|
||||
// 还原Tab画布状态
|
||||
this.$store.commit('clearTabMoveInfo')
|
||||
// 松开鼠标时 如果当前内容被隐藏，则需要进行显示出来
|
||||
if (!this.contentDisplay) {
|
||||
this.contentDisplay = true
|
||||
}
|
||||
},
|
||||
// 新增方法 ↓↓↓
|
||||
// 设置属性
|
||||
// 如果Tab移入状态还是Active 状态 则将当前的组件 放置到tab页中
|
||||
componentCanvasChange() {
|
||||
// 主画布移入Tab画布
|
||||
if (this.tabMoveInActiveId) {
|
||||
//从当前画布移除
|
||||
this.$emit('amRemoveItem')
|
||||
this.element.canvasPid = this.element.canvasId
|
||||
//Tab内部的画布ID 为 tab组件id + '-' + tabActiveName
|
||||
const targetCanvasId = this.tabMoveInActiveId + '-' + this.tabActiveTabNameMap[this.tabMoveInActiveId]
|
||||
const targetCanvasScale = this.curCanvasScaleMap[targetCanvasId]
|
||||
if (this.element.auxiliaryMatrix) {
|
||||
this.element.x = 1
|
||||
this.element.y = 108
|
||||
this.element.sizex = Math.round(this.element.sizex * this.curCanvasScaleSelf.matrixStyleWidth / targetCanvasScale.matrixStyleWidth)
|
||||
this.element.sizey = Math.round(this.element.sizey * this.curCanvasScaleSelf.matrixStyleHeight / targetCanvasScale.matrixStyleHeight)
|
||||
this.element.style.width = this.element.sizex * targetCanvasScale.matrixStyleOriginWidth
|
||||
this.element.style.height = this.element.sizey * targetCanvasScale.matrixStyleOriginHeight
|
||||
this.element.style.left = 0
|
||||
this.element.style.top = (this.element.y - 1) * targetCanvasScale.matrixStyleOriginHeight
|
||||
} else {
|
||||
this.element.style.left = 0
|
||||
this.element.style.top = 0
|
||||
this.element.style.width = this.element.style.width * this.curCanvasScaleSelf.matrixStyleWidth / targetCanvasScale.matrixStyleWidth
|
||||
this.element.style.height = this.element.style.height * this.curCanvasScaleSelf.matrixStyleHeight / targetCanvasScale.matrixStyleHeight
|
||||
}
|
||||
this.element.canvasId = targetCanvasId
|
||||
}
|
||||
// Tab 画布 移入主画布
|
||||
if (this.tabMoveOutComponentId) {
|
||||
//从当前画布移除
|
||||
this.$emit('amRemoveItem')
|
||||
this.element.canvasPid = 0
|
||||
this.element.canvasId = 'canvas-main'
|
||||
//Tab内部的画布ID 为 tab组件id + '-' + tabActiveName
|
||||
const targetCanvasScale = this.curCanvasScaleMap['canvas-main']
|
||||
// 按照阴影位置定位
|
||||
this.element.style.left = (this.mousePointShadowMap.mouseX - (this.mousePointShadowMap.width)) / targetCanvasScale.scalePointWidth
|
||||
this.element.style.top = (this.mousePointShadowMap.mouseY - (this.mousePointShadowMap.height / 2))/ targetCanvasScale.scalePointHeight
|
||||
this.element.style.width = this.mousePointShadowMap.width/ targetCanvasScale.scalePointWidth
|
||||
this.element.style.height = this.mousePointShadowMap.height/ targetCanvasScale.scalePointHeight
|
||||
|
||||
if (this.element.auxiliaryMatrix) {
|
||||
this.element.x = Math.round(this.element.style.left / targetCanvasScale.matrixStyleOriginWidth) + 1
|
||||
this.element.y = Math.round(this.element.style.top / targetCanvasScale.matrixStyleOriginHeight) + 1
|
||||
this.element.sizex = Math.round(this.element.style.width /targetCanvasScale.matrixStyleOriginWidth)
|
||||
this.element.sizey = Math.round(this.element.style.height / targetCanvasScale.matrixStyleOriginHeight)
|
||||
this.recordMatrixCurShadowStyle(targetCanvasScale)
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// 设置属性(属性跟随所属canvas component类型 要做出改变)
|
||||
settingAttribute() {
|
||||
// 设置冲突检测
|
||||
this.$el.setAttribute('data-is-check', `${this.isConflictCheck}`)
|
||||
// 设置对齐元素
|
||||
this.$el.setAttribute('data-is-snap', `${this.snap}`)
|
||||
// 设置Tab移入检测
|
||||
this.$el.setAttribute('tab-is-check', `${this.isTabMoveCheck}`)
|
||||
// 设置组件类型
|
||||
this.$el.setAttribute('component-type', `${this.element.component}`)
|
||||
// 设置组件ID
|
||||
this.$el.setAttribute('component-id', `${this.element.id}`)
|
||||
},
|
||||
// 冲突检测
|
||||
conflictCheck() {
|
||||
@ -1688,10 +1798,10 @@ export default {
|
||||
|
||||
// 记录当前样式 矩阵处理
|
||||
recordMatrixCurStyle() {
|
||||
const left = Math.round(this.left / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
|
||||
const top = Math.round(this.top / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
|
||||
const width = Math.round(this.width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
|
||||
const height = Math.round(this.height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
|
||||
const left = Math.round(this.left / this.curCanvasScaleSelf.matrixStyleWidth) * this.curCanvasScaleSelf.matrixStyleWidth
|
||||
const top = Math.round(this.top / this.curCanvasScaleSelf.matrixStyleHeight) * this.curCanvasScaleSelf.matrixStyleHeight
|
||||
const width = Math.round(this.width / this.curCanvasScaleSelf.matrixStyleWidth) * this.curCanvasScaleSelf.matrixStyleWidth
|
||||
const height = Math.round(this.height / this.curCanvasScaleSelf.matrixStyleHeight) * this.curCanvasScaleSelf.matrixStyleHeight
|
||||
const style = {
|
||||
...this.defaultStyle
|
||||
}
|
||||
@ -1705,23 +1815,13 @@ export default {
|
||||
|
||||
// resize
|
||||
self.$emit('resizeView')
|
||||
// const self = this
|
||||
// setTimeout(function() {
|
||||
// self.$emit('resizeView')
|
||||
// }, 200)
|
||||
},
|
||||
// 记录当前样式 跟随阴影位置 矩阵处理
|
||||
recordMatrixCurShadowStyle() {
|
||||
const left = (this.element.x - 1) * this.curCanvasScale.matrixStyleWidth
|
||||
const top = (this.element.y - 1) * this.curCanvasScale.matrixStyleHeight
|
||||
const width = this.element.sizex * this.curCanvasScale.matrixStyleWidth
|
||||
const height = this.element.sizey * this.curCanvasScale.matrixStyleHeight
|
||||
// const t1 = Math.round(this.width / this.curCanvasScale.matrixStyleWidth)
|
||||
// const left = Math.round(this.left / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
|
||||
// const top = Math.round(this.top / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
|
||||
// const width = t1 * this.curCanvasScale.matrixStyleWidth
|
||||
// const height = Math.round(this.height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
|
||||
|
||||
recordMatrixCurShadowStyle(scaleSelf) {
|
||||
const left = (this.element.x - 1) * scaleSelf.matrixStyleWidth
|
||||
const top = (this.element.y - 1) * scaleSelf.matrixStyleHeight
|
||||
const width = this.element.sizex * scaleSelf.matrixStyleWidth
|
||||
const height = this.element.sizey * scaleSelf.matrixStyleHeight
|
||||
const style = {
|
||||
...this.defaultStyle
|
||||
}
|
||||
@ -1730,16 +1830,10 @@ export default {
|
||||
style.width = width
|
||||
style.height = height
|
||||
style.rotate = this.rotate
|
||||
// this.hasMove = true
|
||||
|
||||
this.$store.commit('setShapeStyle', style)
|
||||
|
||||
// resize
|
||||
const self = this
|
||||
self.$emit('resizeView')
|
||||
// setTimeout(function() {
|
||||
// self.$emit('resizeView')
|
||||
// }, 200)
|
||||
},
|
||||
mountedFunction() {
|
||||
// private 冲突检测 和水平设计值保持一致
|
||||
@ -1821,6 +1915,72 @@ export default {
|
||||
// 跳转设置
|
||||
boardSet() {
|
||||
this.$emit('boardSet')
|
||||
},
|
||||
// tab移入检测
|
||||
async tabMoveInCheck() {
|
||||
const top = this.top
|
||||
const left = this.left
|
||||
const width = this.width
|
||||
const height = this.height
|
||||
// tab 移入检测开启
|
||||
if (this.isTabMoveCheck) {
|
||||
const nodes = this.$el.parentNode.childNodes // 获取当前父节点下所有子节点
|
||||
for (const item of nodes) {
|
||||
if (
|
||||
item.className !== undefined &&
|
||||
!item.className.split(' ').includes(this.classNameActive) &&
|
||||
item.getAttribute('tab-is-check') !== null &&
|
||||
item.getAttribute('tab-is-check') !== 'false' &&
|
||||
item.getAttribute('component-type') === 'de-tabs'
|
||||
) {
|
||||
const tw = item.offsetWidth
|
||||
const th = item.offsetHeight
|
||||
// 正则获取left与right
|
||||
const [tl, tt] = this.formatTransformVal(item.style.transform)
|
||||
// 碰撞有效区域检查
|
||||
const collisionT = tt + this.tabMoveInYOffset
|
||||
const collisionL = tl + (this.curCanvasScaleSelf.matrixStyleWidth / 2) - width
|
||||
const collisionW = tw + 2 * width - this.curCanvasScaleSelf.matrixStyleWidth
|
||||
const collisionH = th + height - this.tabMoveInYOffset
|
||||
|
||||
// 左上角靠近左上角区域
|
||||
const tfAndTf = collisionT <= top && collisionL <= left
|
||||
// 左下角靠近左下角区域
|
||||
const bfAndBf = (collisionT + collisionH) >= (top + height) && collisionL <= left
|
||||
// 右上角靠近右上角区域
|
||||
const trAndTr = collisionT <= top && (collisionL + collisionW) >= (left + width)
|
||||
// 右下角靠近右下角区域
|
||||
const brAndBr = (collisionT + collisionH) >= (top + height) && (collisionL + collisionW) >= (left + width)
|
||||
if (tfAndTf && bfAndBf && trAndTr && brAndBr) {
|
||||
this.$store.commit('setTabCollisionActiveId', item.getAttribute('component-id'))
|
||||
} else {
|
||||
this.$store.commit('setTabCollisionActiveId', null)
|
||||
}
|
||||
|
||||
// 移入有效区域检查
|
||||
// 碰撞有效区域检查
|
||||
const activeT = tt + this.tabMoveInYOffset
|
||||
const activeL = tl + (this.curCanvasScaleSelf.matrixStyleWidth * 10) - width
|
||||
const activeW = tw + 2 * width - this.curCanvasScaleSelf.matrixStyleWidth * 20
|
||||
const activeH = th + height - 2 * this.tabMoveInYOffset
|
||||
|
||||
// 左上角靠近左上角区域
|
||||
const activeTfAndTf = activeT <= top && activeL <= left
|
||||
// 左下角靠近左下角区域
|
||||
const activeBfAndBf = (activeT + activeH) >= (top + height) && activeL <= left
|
||||
// 右上角靠近右上角区域
|
||||
const activeTrAndTr = activeT <= top && (activeL + activeW) >= (left + width)
|
||||
// 右下角靠近右下角区域
|
||||
const activeBrAndBr = (activeT + activeH) >= (top + height) && (activeL + activeW) >= (left + width)
|
||||
if (activeTfAndTf && activeBfAndBf && activeTrAndTr && activeBrAndBr) {
|
||||
this.$store.commit('setTabMoveInActiveId', item.getAttribute('component-id'))
|
||||
} else {
|
||||
this.$store.commit('setTabMoveInActiveId', null)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
111
frontend/src/components/DeDrag/pointShadow.vue
Normal file
111
frontend/src/components/DeDrag/pointShadow.vue
Normal file
@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div
|
||||
class="point-shadow"
|
||||
:style="styleInfo"
|
||||
>
|
||||
<div class="point-shadow-content">
|
||||
<div id="point-shadow-component" class="point-shadow-component"></div>
|
||||
<div class="point-shadow-tips" :style="tipsStyleInfo">
|
||||
<div style="width: 100%;text-align: center">组件将被移出Tab</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
replace: true,
|
||||
name: 'PointShadow',
|
||||
props: {
|
||||
canvasId: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tipsStyleInfo() {
|
||||
return {
|
||||
width: this.mousePointShadowMap.width + 'px',
|
||||
height: this.mousePointShadowMap.height + 'px'
|
||||
}
|
||||
},
|
||||
curCanvasScaleSelf() {
|
||||
return this.curCanvasScaleMap[this.canvasId]
|
||||
},
|
||||
componentCanvasId() {
|
||||
if (this.curComponent.type === 'view') {
|
||||
return 'user-view-' + this.curComponent.propValue.viewId
|
||||
} else {
|
||||
return 'components-' + this.curComponent.id
|
||||
}
|
||||
},
|
||||
styleInfo() {
|
||||
return {
|
||||
left: this.mousePointShadowMap.mouseX - (this.mousePointShadowMap.width) + 'px',
|
||||
top: this.mousePointShadowMap.mouseY - (this.mousePointShadowMap.height / 2) + 'px',
|
||||
width: this.mousePointShadowMap.width + 'px',
|
||||
height: this.mousePointShadowMap.height + 'px'
|
||||
}
|
||||
},
|
||||
...mapState([
|
||||
'mousePointShadowMap',
|
||||
'curComponent'
|
||||
])
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
beforeDestroy() {
|
||||
// const targetComponent = document.getElementById(this.componentCanvasId)
|
||||
// const domId = 'dragContent-' + this.curComponent.id
|
||||
// console.log('domId='+domId)
|
||||
// document.getElementById(domId).appendChild(targetComponent)
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
// 将拖拽的元素内容复制到shadow区域展示
|
||||
// const targetComponent = document.getElementById(this.componentCanvasId)
|
||||
// document.getElementById('point-shadow-component').appendChild(targetComponent)
|
||||
},
|
||||
scaleH(h) {
|
||||
return h / this.curCanvasScaleSelf.scalePointHeight
|
||||
},
|
||||
scaleW(w) {
|
||||
return w / this.curCanvasScaleSelf.scalePointWidth
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.point-shadow {
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.point-shadow-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.point-shadow-component {
|
||||
opacity: 0.6;
|
||||
background-color: rgba(179, 212, 252);
|
||||
}
|
||||
|
||||
|
||||
.point-shadow-tips {
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
box-sizing: border-box;
|
||||
z-index: 10001;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
color: #33ef08;
|
||||
font-weight: bold;
|
||||
background-color: rgba(179, 212, 252);
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -10,8 +10,17 @@
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
replace: true,
|
||||
name: 'ShadowDe',
|
||||
name: 'Shadow',
|
||||
props: {
|
||||
canvasId: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
curCanvasScaleSelf(){
|
||||
return this.curCanvasScaleMap[this.canvasId]
|
||||
},
|
||||
styleInfo() {
|
||||
let left = 0
|
||||
let top = 0
|
||||
@ -21,11 +30,11 @@ export default {
|
||||
if (this.dragComponentInfo) {
|
||||
// 组件移入
|
||||
if (this.dragComponentInfo.auxiliaryMatrix) {
|
||||
left = (this.dragComponentInfo.x - 1) * this.curCanvasScale.matrixStyleWidth
|
||||
top = (this.dragComponentInfo.y - 1) * this.curCanvasScale.matrixStyleHeight
|
||||
left = (this.dragComponentInfo.x - 1) * this.curCanvasScaleSelf.matrixStyleWidth
|
||||
top = (this.dragComponentInfo.y - 1) * this.curCanvasScaleSelf.matrixStyleHeight
|
||||
|
||||
width = this.dragComponentInfo.sizex * this.curCanvasScale.matrixStyleWidth
|
||||
height = this.dragComponentInfo.sizey * this.curCanvasScale.matrixStyleHeight
|
||||
width = this.dragComponentInfo.sizex * this.curCanvasScaleSelf.matrixStyleWidth
|
||||
height = this.dragComponentInfo.sizey * this.curCanvasScaleSelf.matrixStyleHeight
|
||||
transition = 0.1
|
||||
} else {
|
||||
left = this.dragComponentInfo.shadowStyle.x
|
||||
@ -34,14 +43,10 @@ export default {
|
||||
height = this.dragComponentInfo.style.height
|
||||
}
|
||||
} else {
|
||||
// temp 临时测试
|
||||
// left = this.curComponent.style.left * this.curCanvasScale.scaleWidth / 100
|
||||
// top = this.curComponent.style.top * this.curCanvasScale.scaleHeight / 100
|
||||
left = (this.curComponent.x - 1) * this.curCanvasScale.matrixStyleWidth
|
||||
top = (this.curComponent.y - 1) * this.curCanvasScale.matrixStyleHeight
|
||||
|
||||
width = this.curComponent.style.width * this.curCanvasScale.scalePointWidth
|
||||
height = this.curComponent.style.height * this.curCanvasScale.scalePointHeight
|
||||
left = (this.curComponent.x - 1) * this.curCanvasScaleSelf.matrixStyleWidth
|
||||
top = (this.curComponent.y - 1) * this.curCanvasScaleSelf.matrixStyleHeight
|
||||
width = this.curComponent.style.width * this.curCanvasScaleSelf.scalePointWidth
|
||||
height = this.curComponent.style.height * this.curCanvasScaleSelf.scalePointHeight
|
||||
if (this.curComponent.optStatus.dragging) {
|
||||
transition = 0.1
|
||||
}
|
||||
@ -70,13 +75,13 @@ export default {
|
||||
return this.$store.state.dragComponentInfo
|
||||
},
|
||||
canvasWidth() {
|
||||
const scaleWidth = this.curCanvasScale.scaleWidth / 100
|
||||
const scaleWidth = this.curCanvasScaleSelf.scaleWidth / 100
|
||||
return this.canvasStyleData.width * scaleWidth
|
||||
},
|
||||
...mapState([
|
||||
'curComponent',
|
||||
'editor',
|
||||
'curCanvasScale',
|
||||
'curCanvasScaleMap',
|
||||
'canvasStyleData',
|
||||
'linkageSettingStatus'
|
||||
])
|
||||
@ -89,10 +94,10 @@ export default {
|
||||
this.dragComponentInfo.shadowStyle.y = this.scaleH(y)
|
||||
},
|
||||
scaleH(h) {
|
||||
return h / this.curCanvasScale.scalePointHeight
|
||||
return h / this.curCanvasScaleSelf.scalePointHeight
|
||||
},
|
||||
scaleW(w) {
|
||||
return w / this.curCanvasScale.scalePointWidth
|
||||
return w / this.curCanvasScaleSelf.scalePointWidth
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
587
frontend/src/components/canvas/DeCanvas.vue
Normal file
587
frontend/src/components/canvas/DeCanvas.vue
Normal file
@ -0,0 +1,587 @@
|
||||
<template>
|
||||
<div
|
||||
class="canvas_content"
|
||||
:id="canvasDomId"
|
||||
@drop="handleDrop"
|
||||
@dragover="handleDragOver"
|
||||
@mousedown="handleMouseDown"
|
||||
@mouseup="deselectCurComponent"
|
||||
@scroll="canvasScroll"
|
||||
>
|
||||
<slot name="optBar" />
|
||||
<de-editor :canvas-style-data="canvasStyleData"
|
||||
:component-data="componentData"
|
||||
:canvas-id="canvasId"
|
||||
:parent-forbid="parentForbid"
|
||||
:ref="editorRefName"
|
||||
:matrix-count="matrixCountBase"
|
||||
:out-style="outStyle"
|
||||
:scroll-top="scrollTop"
|
||||
@canvasDragging="canvasDragging"
|
||||
/>
|
||||
<input id="input" ref="files" type="file" accept="image/*" hidden @click="e => {e.target.value = '';}" @change="handleFileChange" >
|
||||
<el-dialog
|
||||
v-if="buttonVisible && panelInfo.id"
|
||||
:title="(currentWidget && currentWidget.getLeftPanel && currentWidget.getLeftPanel().label ? $t(currentWidget.getLeftPanel().label) : '') + $t('panel.module')"
|
||||
:visible.sync="buttonVisible"
|
||||
custom-class="de-button-dialog"
|
||||
:append-to-body="true"
|
||||
@close="cancelButton"
|
||||
>
|
||||
<button-dialog
|
||||
v-if="buttonVisible && currentWidget && currentWidget.name === 'buttonSureWidget'"
|
||||
:ref="'filter-setting-' + currentFilterCom.id"
|
||||
:widget-info="currentWidget"
|
||||
:element="currentFilterCom"
|
||||
@sure-handler="sureHandler"
|
||||
@cancel-handler="cancelHandler"
|
||||
/>
|
||||
|
||||
<button-reset-dialog
|
||||
v-if="buttonVisible && currentWidget && currentWidget.name === 'buttonResetWidget'"
|
||||
:ref="'filter-setting-' + currentFilterCom.id"
|
||||
:widget-info="currentWidget"
|
||||
:element="currentFilterCom"
|
||||
@reset-button-handler="sureHandler"
|
||||
@cancel-button-handler="cancelHandler"
|
||||
/>
|
||||
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
v-if="filterVisible && panelInfo.id"
|
||||
:title="(currentWidget && currentWidget.getLeftPanel && currentWidget.getLeftPanel().label ? $t(currentWidget.getLeftPanel().label) : '') + $t('panel.module')"
|
||||
:visible.sync="filterVisible"
|
||||
custom-class="de-filter-dialog"
|
||||
:append-to-body="true"
|
||||
@close="cancelFilter"
|
||||
>
|
||||
<filter-dialog
|
||||
v-if="filterVisible && currentWidget"
|
||||
:ref="'filter-setting-' + currentFilterCom.id"
|
||||
:widget-info="currentWidget"
|
||||
:element="currentFilterCom"
|
||||
@sure-button-status="sureStatusChange"
|
||||
@re-fresh-component="reFreshComponent"
|
||||
/>
|
||||
<div style="text-align: end !important;margin: 0 15px 10px !important;">
|
||||
<span slot="footer">
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="cancelFilter"
|
||||
>{{ $t('commons.cancel') }}</el-button>
|
||||
<el-button
|
||||
:disabled="!enableSureButton"
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="sureFilter"
|
||||
>{{ $t('commons.confirm') }}</el-button>
|
||||
</span>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--矩形样式组件-->
|
||||
<TextAttr v-if="showAttr" :canvas-id="canvasId" :scroll-left="scrollLeft" :scroll-top="scrollTop"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import DeEditor from '@/components/canvas/components/Editor/DeEditor'
|
||||
import elementResizeDetectorMaker from 'element-resize-detector'
|
||||
import bus from '@/utils/bus'
|
||||
import { deepCopy } from '@/components/canvas/utils/utils'
|
||||
import { uuid } from 'vue-uuid'
|
||||
import componentList, {
|
||||
BASE_MOBILE_STYLE,
|
||||
COMMON_BACKGROUND, commonAttr,
|
||||
HYPERLINKS, PIC_STYLE
|
||||
} from '@/components/canvas/custom-component/component-list'
|
||||
import { ApplicationContext } from '@/utils/ApplicationContext'
|
||||
import { chartCopy } from '@/api/chart/chart'
|
||||
import { adaptCurThemeCommonStyle } from '@/components/canvas/utils/style'
|
||||
import toast from '@/components/canvas/utils/toast'
|
||||
import generateID from '@/components/canvas/utils/generateID'
|
||||
import ButtonDialog from '@/views/panel/filter/ButtonDialog'
|
||||
import ButtonResetDialog from '@/views/panel/filter/ButtonResetDialog'
|
||||
import FilterDialog from '@/views/panel/filter/filterDialog'
|
||||
|
||||
export default {
|
||||
components: { FilterDialog, ButtonResetDialog, ButtonDialog, DeEditor },
|
||||
data() {
|
||||
return {
|
||||
// 需要展示属性设置的组件类型
|
||||
showAttrComponent: [
|
||||
'custom',
|
||||
'v-text',
|
||||
'picture-add',
|
||||
'de-tabs',
|
||||
'rect-shape',
|
||||
'de-show-date',
|
||||
'de-video',
|
||||
'de-stream-media',
|
||||
'de-frame'
|
||||
],
|
||||
enableSureButton: false,
|
||||
filterFromDrag: false,
|
||||
buttonFromDrag: false,
|
||||
filterVisible: false,
|
||||
autoMoveOffSet: 15,
|
||||
buttonVisible: false,
|
||||
currentWidget: null,
|
||||
currentFilterCom: null,
|
||||
currentDropElement: null,
|
||||
canvasDomId: 'canvas-id-' + this.canvasId,
|
||||
editorRefName: 'canvas-editor-' + this.canvasId,
|
||||
scrollLeft: 0,
|
||||
scrollTop: 0,
|
||||
outStyle: {
|
||||
width: null,
|
||||
height: null
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
parentForbid:{
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: true
|
||||
},
|
||||
canvasStyleData: {
|
||||
type: Object,
|
||||
require: true
|
||||
},
|
||||
componentData: {
|
||||
type: Array,
|
||||
require: false,
|
||||
default: []
|
||||
},
|
||||
canvasId: {
|
||||
type: String,
|
||||
require: true
|
||||
},
|
||||
canvasPid: {
|
||||
type: String,
|
||||
require: true
|
||||
},
|
||||
mobileLayoutStatus: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
matrixCountBase(){
|
||||
if(this.isMainCanvas && this.mobileLayoutStatus){
|
||||
return this.mobileMatrixCount
|
||||
}else{
|
||||
return this.pcMatrixCountBase
|
||||
}
|
||||
},
|
||||
isMainCanvas(){
|
||||
return this.canvasId === 'canvas-main'
|
||||
},
|
||||
panelInfo() {
|
||||
return this.$store.state.panel.panelInfo
|
||||
},
|
||||
pcMatrixCountBase() {
|
||||
if (this.canvasStyleData.aidedDesign) {
|
||||
return {
|
||||
x: this.pcMatrixCount.x * this.canvasStyleData.aidedDesign.matrixBase,
|
||||
y: this.pcMatrixCount.y * this.canvasStyleData.aidedDesign.matrixBase
|
||||
}
|
||||
} else {
|
||||
return this.pcMatrixCount
|
||||
}
|
||||
},
|
||||
curCanvasScaleSelf() {
|
||||
return this.curCanvasScaleMap[this.canvasId]
|
||||
},
|
||||
showAttr() {
|
||||
if (this.mobileLayoutStatus) {
|
||||
return false
|
||||
} else if (this.curComponent && this.showAttrComponent.includes(this.curComponent.type)) {
|
||||
// 过滤组件有标题才显示
|
||||
if (this.curComponent.type === 'custom' && (!this.curComponent.options.attrs.showTitle || !this.curComponent.options.attrs.title)) {
|
||||
return false
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
...mapState([
|
||||
'curComponent',
|
||||
'componentGap',
|
||||
'isClickComponent',
|
||||
'pcMatrixCount',
|
||||
'pcTabMatrixCount',
|
||||
'dragComponentInfo',
|
||||
'curCanvasScaleMap',
|
||||
'mobileMatrixCount'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
mobileLayoutStatus() {
|
||||
this.restore()
|
||||
},
|
||||
// //监控当前组件移动 检查是否靠近tab
|
||||
// curComponent: {
|
||||
// handler(newVal, oldVla) {
|
||||
// // this.restore()
|
||||
// },
|
||||
// deep: true
|
||||
// },
|
||||
},
|
||||
created() {
|
||||
},
|
||||
mounted() {
|
||||
const _this = this
|
||||
// 监听div变动事件
|
||||
const erd = elementResizeDetectorMaker()
|
||||
erd.listenTo(document.getElementById(this.canvasDomId), element => {
|
||||
_this.$nextTick(() => {
|
||||
_this.restore()
|
||||
})
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
bus.$off('component-dialog-edit', this.editDialog)
|
||||
bus.$off('button-dialog-edit', this.editButtonDialog)
|
||||
},
|
||||
methods: {
|
||||
initEvents() {
|
||||
bus.$on('component-dialog-edit', this.editDialog)
|
||||
bus.$on('button-dialog-edit', this.editButtonDialog)
|
||||
},
|
||||
getGap() {
|
||||
return this.mobileLayoutStatus ? 0 : this.componentGap * 2
|
||||
},
|
||||
restore() {
|
||||
this.$nextTick(() => {
|
||||
const domInfo = document.getElementById(this.canvasDomId)
|
||||
if (domInfo) {
|
||||
this.outStyle.height = domInfo.offsetHeight - this.getGap()
|
||||
// 临时处理 确保每次restore 有会更新
|
||||
this.outStyle.width = domInfo.offsetWidth + (Math.random() * 0.000001)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDragOver(e) {
|
||||
// console.log("handleDragOver-"+this.canvasId)
|
||||
e.preventDefault()
|
||||
e.dataTransfer.dropEffect = 'copy'
|
||||
this.$refs[this.editorRefName].handleDragOver(e)
|
||||
},
|
||||
handleMouseDown() {
|
||||
this.$store.commit('setClickComponentStatus', false)
|
||||
},
|
||||
|
||||
deselectCurComponent(e) {
|
||||
if (!this.isClickComponent) {
|
||||
this.$store.commit('setCurComponent', { component: null, index: null })
|
||||
}
|
||||
|
||||
// 0 左击 1 滚轮 2 右击
|
||||
if (e.button !== 2) {
|
||||
this.$store.commit('hideContextMenu')
|
||||
}
|
||||
},
|
||||
canvasScroll(e) {
|
||||
this.scrollLeft = e.target.scrollLeft
|
||||
this.scrollTop = e.target.scrollTop
|
||||
bus.$emit('onScroll')
|
||||
},
|
||||
// handleDrop(e) {
|
||||
// this.$emit('handleDrop', e)
|
||||
// }
|
||||
handleDrop(e) {
|
||||
this.dragComponentInfo.moveStatus = 'drop'
|
||||
// 记录拖拽信息
|
||||
this.dropComponentInfo = deepCopy(this.dragComponentInfo)
|
||||
this.currentDropElement = e
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
let component
|
||||
const newComponentId = uuid.v1()
|
||||
const componentInfo = JSON.parse(e.dataTransfer.getData('componentInfo'))
|
||||
if (componentInfo.type === 'assist') {
|
||||
// 辅助设计组件
|
||||
componentList.forEach(componentTemp => {
|
||||
if (componentInfo.id === componentTemp.id) {
|
||||
component = deepCopy(componentTemp)
|
||||
}
|
||||
})
|
||||
if (component.type === 'picture-add') {
|
||||
this.goFile()
|
||||
this.clearCurrentInfo()
|
||||
return
|
||||
}
|
||||
} else if (componentInfo.type === 'view') {
|
||||
// 用户视图设置 复制一个模板
|
||||
componentList.forEach(componentTemp => {
|
||||
if (componentTemp.type === 'view') {
|
||||
component = deepCopy(componentTemp)
|
||||
const propValue = {
|
||||
id: newComponentId,
|
||||
viewId: componentInfo.id
|
||||
}
|
||||
component.propValue = propValue
|
||||
component.filters = []
|
||||
component.linkageFilters = []
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.currentWidget = ApplicationContext.getService(componentInfo.id)
|
||||
this.currentFilterCom = this.currentWidget.getDrawPanel()
|
||||
this.currentFilterCom['canvasId'] = this.canvasId
|
||||
this.currentFilterCom['canvasPid'] = this.canvasPid// 待处理
|
||||
if (this.canvasStyleData.auxiliaryMatrix) {
|
||||
this.currentFilterCom.x = this.dropComponentInfo.x
|
||||
this.currentFilterCom.y = this.dropComponentInfo.y
|
||||
this.currentFilterCom.sizex = this.dropComponentInfo.sizex
|
||||
this.currentFilterCom.sizey = this.dropComponentInfo.sizey
|
||||
this.currentFilterCom.style.left = (this.dragComponentInfo.x - 1) * this.curCanvasScaleSelf.matrixStyleOriginWidth
|
||||
this.currentFilterCom.style.top = (this.dragComponentInfo.y - 1) * this.curCanvasScaleSelf.matrixStyleOriginHeight
|
||||
this.currentFilterCom.style.width = this.dragComponentInfo.sizex * this.curCanvasScaleSelf.matrixStyleOriginWidth
|
||||
this.currentFilterCom.style.height = this.dragComponentInfo.sizey * this.curCanvasScaleSelf.matrixStyleOriginHeight
|
||||
} else {
|
||||
this.currentFilterCom.style.left = this.dragComponentInfo.shadowStyle.x
|
||||
this.currentFilterCom.style.top = this.dragComponentInfo.shadowStyle.y
|
||||
this.currentFilterCom.style.width = this.dragComponentInfo.style.width
|
||||
this.currentFilterCom.style.height = this.dragComponentInfo.style.height
|
||||
}
|
||||
this.currentFilterCom.id = newComponentId
|
||||
this.currentFilterCom.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix
|
||||
this.currentFilterCom.mobileStyle = deepCopy(BASE_MOBILE_STYLE)
|
||||
this.currentFilterCom['hyperlinks'] = deepCopy(HYPERLINKS)
|
||||
this.currentFilterCom.commonBackground = this.currentFilterCom.commonBackground || deepCopy(COMMON_BACKGROUND)
|
||||
|
||||
if (this.currentWidget.filterDialog) {
|
||||
this.show = false
|
||||
this.openFilterDialog(true)
|
||||
return
|
||||
}
|
||||
if (this.currentWidget.buttonDialog) {
|
||||
this.show = false
|
||||
this.openButtonDialog(true)
|
||||
return
|
||||
}
|
||||
component = deepCopy(this.currentFilterCom)
|
||||
}
|
||||
if (this.canvasStyleData.auxiliaryMatrix) {
|
||||
component.x = this.dropComponentInfo.x
|
||||
component.y = this.dropComponentInfo.y
|
||||
component.sizex = this.dropComponentInfo.sizex
|
||||
component.sizey = this.dropComponentInfo.sizey
|
||||
|
||||
component.style.left = (this.dragComponentInfo.x - 1) * this.curCanvasScaleSelf.matrixStyleOriginWidth
|
||||
component.style.top = (this.dragComponentInfo.y - 1) * this.curCanvasScaleSelf.matrixStyleOriginHeight
|
||||
component.style.width = this.dragComponentInfo.sizex * this.curCanvasScaleSelf.matrixStyleOriginWidth
|
||||
component.style.height = this.dragComponentInfo.sizey * this.curCanvasScaleSelf.matrixStyleOriginHeight
|
||||
} else {
|
||||
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
|
||||
component['canvasId'] = this.canvasId
|
||||
component['canvasPid'] = this.canvasPid
|
||||
// 新拖入的组件矩阵状态 和仪表板当前的矩阵状态 保持一致
|
||||
component.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix
|
||||
// 统一设置背景信息
|
||||
component.commonBackground = component.commonBackground || deepCopy(COMMON_BACKGROUND)
|
||||
|
||||
// 视图统一调整为复制
|
||||
if (componentInfo.type === 'view') {
|
||||
chartCopy(component.propValue.viewId, this.panelInfo.id).then(res => {
|
||||
component.propValue.viewId = res.data
|
||||
this.$store.commit('addComponent', { component })
|
||||
this.$store.commit('recordSnapshot', 'handleDrop')
|
||||
})
|
||||
} else {
|
||||
this.$store.commit('addComponent', { component })
|
||||
this.$store.commit('recordSnapshot', 'handleDrop')
|
||||
}
|
||||
adaptCurThemeCommonStyle(component)
|
||||
this.clearCurrentInfo()
|
||||
},
|
||||
goFile() {
|
||||
this.$refs.files.click()
|
||||
},
|
||||
handleFileChange(e) {
|
||||
const _this = this
|
||||
const file = e.target.files[0]
|
||||
if (!file.type.includes('image')) {
|
||||
toast('只能插入图片')
|
||||
return
|
||||
}
|
||||
const reader = new FileReader()
|
||||
reader.onload = (res) => {
|
||||
const fileResult = res.target.result
|
||||
const img = new Image()
|
||||
img.onload = () => {
|
||||
const component = {
|
||||
...commonAttr,
|
||||
id: generateID(),
|
||||
component: 'Picture',
|
||||
type: 'picture-add',
|
||||
label: '图片',
|
||||
icon: '',
|
||||
hyperlinks: HYPERLINKS,
|
||||
mobileStyle: BASE_MOBILE_STYLE,
|
||||
propValue: fileResult,
|
||||
commonBackground: deepCopy(COMMON_BACKGROUND),
|
||||
style: {
|
||||
...PIC_STYLE
|
||||
}
|
||||
}
|
||||
component.auxiliaryMatrix = false
|
||||
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['canvasId'] = this.canvasId
|
||||
component['canvasPid'] = this.canvasPid
|
||||
this.$store.commit('addComponent', {
|
||||
component: component
|
||||
})
|
||||
this.$store.commit('recordSnapshot', 'handleFileChange')
|
||||
}
|
||||
|
||||
img.src = fileResult
|
||||
}
|
||||
|
||||
reader.readAsDataURL(file)
|
||||
},
|
||||
clearCurrentInfo() {
|
||||
this.currentWidget = null
|
||||
this.currentFilterCom = null
|
||||
},
|
||||
openButtonDialog(fromDrag = false) {
|
||||
this.buttonFromDrag = fromDrag
|
||||
this.buttonVisible = true
|
||||
},
|
||||
closeButton() {
|
||||
this.buttonVisible = false
|
||||
this.currentWidget = null
|
||||
this.clearCurrentInfo()
|
||||
},
|
||||
cancelButton() {
|
||||
this.closeButton()
|
||||
if (this.buttonFromDrag) {
|
||||
bus.$emit('onRemoveLastItem')
|
||||
}
|
||||
},
|
||||
sureButton() {
|
||||
|
||||
},
|
||||
openFilterDialog(fromDrag = false) {
|
||||
this.filterFromDrag = fromDrag
|
||||
this.filterVisible = true
|
||||
},
|
||||
closeFilter() {
|
||||
this.filterVisible = false
|
||||
this.currentWidget = null
|
||||
this.clearCurrentInfo()
|
||||
},
|
||||
cancelFilter() {
|
||||
this.closeFilter()
|
||||
if (this.filterFromDrag) {
|
||||
bus.$emit('onRemoveLastItem')
|
||||
}
|
||||
},
|
||||
sureFilter() {
|
||||
this.currentFilterCom = this.$refs['filter-setting-' + this.currentFilterCom.id].getElementInfo()
|
||||
if (this.editType !== 'update') {
|
||||
adaptCurThemeCommonStyle(this.currentFilterCom)
|
||||
}
|
||||
this.$store.commit('setComponentWithId', this.currentFilterCom)
|
||||
this.$store.commit('recordSnapshot', 'sureFilter')
|
||||
this.$store.commit('setCurComponent', { component: this.currentFilterCom, index: this.curComponentIndex })
|
||||
bus.$emit('reset-default-value', this.currentFilterCom.id)
|
||||
this.closeFilter()
|
||||
},
|
||||
reFreshComponent(component) {
|
||||
this.currentFilterCom = component
|
||||
this.$forceUpdate()
|
||||
},
|
||||
editDialog(editType) {
|
||||
// 主画布打开
|
||||
if (this.isMainCanvas && this.curComponent && this.curComponent.serviceName) {
|
||||
this.editType = editType
|
||||
const serviceName = this.curComponent.serviceName
|
||||
this.currentWidget = ApplicationContext.getService(serviceName)
|
||||
this.currentFilterCom = this.curComponent
|
||||
this.openFilterDialog()
|
||||
}
|
||||
},
|
||||
editButtonDialog(editType) {
|
||||
// 主画布打开
|
||||
if (this.isMainCanvas && this.curComponent && this.curComponent.serviceName) {
|
||||
this.editType = editType
|
||||
const serviceName = this.curComponent.serviceName
|
||||
this.currentWidget = ApplicationContext.getService(serviceName)
|
||||
this.currentFilterCom = this.curComponent
|
||||
this.openButtonDialog()
|
||||
}
|
||||
},
|
||||
sureHandler() {
|
||||
this.currentFilterCom = this.$refs['filter-setting-' + this.currentFilterCom.id].getElementInfo()
|
||||
if (this.editType !== 'update') {
|
||||
adaptCurThemeCommonStyle(this.currentFilterCom)
|
||||
}
|
||||
this.$store.commit('setComponentWithId', this.currentFilterCom)
|
||||
this.$store.commit('recordSnapshot', 'sureFilter')
|
||||
this.$store.commit('setCurComponent', { component: this.currentFilterCom, index: this.curComponentIndex })
|
||||
bus.$emit('refresh-button-info')
|
||||
this.closeButton()
|
||||
},
|
||||
cancelHandler() {
|
||||
this.cancelButton()
|
||||
},
|
||||
sureStatusChange(status) {
|
||||
this.enableSureButton = status
|
||||
},
|
||||
canvasDragging(mY, offsetY) {
|
||||
// if (this.isMainCanvas && this.mobileLayoutStatus && this.curComponent && this.curComponent.optStatus.dragging) {
|
||||
// // 触发滚动的区域偏移量
|
||||
// const touchOffset = 100
|
||||
// const canvasInfoMobile = document.getElementById(this.canvasDomId)
|
||||
// // 获取子盒子（高度肯定比父盒子大）
|
||||
// // const editorMobile = document.getElementById('editorMobile')
|
||||
// // 画布区顶部到浏览器顶部距离
|
||||
// const canvasTop = canvasInfoMobile.offsetTop + 75
|
||||
// // 画布区有高度
|
||||
// const canvasHeight = canvasInfoMobile.offsetHeight
|
||||
// // 画布区域底部距离浏览器顶部距离
|
||||
// const canvasBottom = canvasTop + canvasHeight
|
||||
// if (mY > (canvasBottom - touchOffset) && offsetY > 0) {
|
||||
// // 触发底部滚动
|
||||
// this.scrollMove(this.autoMoveOffSet)
|
||||
// } else if (mY < (canvasTop + touchOffset) && offsetY < 0) {
|
||||
// // 触发顶部滚动
|
||||
// this.scrollMove(-this.autoMoveOffSet)
|
||||
// }
|
||||
// }
|
||||
},
|
||||
scrollMove(offset) {
|
||||
// const canvasInfoMobile = document.getElementById(this.canvasDomId)
|
||||
// canvasInfoMobile.scrollTop = canvasInfoMobile.scrollTop + offset
|
||||
// this.$store.commit('setScrollAutoMove', this.scrollAutoMove + offset)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.canvas_content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
</style>
|
||||
@ -84,11 +84,6 @@
|
||||
</el-select>
|
||||
|
||||
</el-form-item>
|
||||
|
||||
<!-- <el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">{{ $t('panel.confirm') }}</el-button>
|
||||
<el-button @click="onClose">{{ $t('panel.cancel') }}</el-button>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
</el-row>
|
||||
<i
|
||||
@ -104,6 +99,10 @@ import { deepCopy } from '@/components/canvas/utils/utils'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
canvasId: {
|
||||
type: String,
|
||||
require: true
|
||||
},
|
||||
formatInfo: {
|
||||
type: Object,
|
||||
required: true
|
||||
@ -131,9 +130,12 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
curCanvasScaleSelf(){
|
||||
return this.curCanvasScaleMap[this.canvasId]
|
||||
},
|
||||
...mapState([
|
||||
'curComponent',
|
||||
'curCanvasScale'
|
||||
'curCanvasScaleMap'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
@ -162,15 +164,13 @@ export default {
|
||||
modelChange(val) {
|
||||
if (val === '0') {
|
||||
this.curComponent.style.height = 100
|
||||
this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScale.matrixStyleOriginHeight)
|
||||
this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScaleSelf.matrixStyleOriginHeight)
|
||||
} else if (val === '1') {
|
||||
this.curComponent.style.height = 150
|
||||
this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScale.matrixStyleOriginHeight)
|
||||
this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScaleSelf.matrixStyleOriginHeight)
|
||||
} else {
|
||||
// this.curComponent.style.width = this.curComponent.style.width / 2
|
||||
this.curComponent.style.height = this.curComponent.style.width + 50
|
||||
this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScale.matrixStyleOriginHeight)
|
||||
// this.curComponent.sizex = Math.round(this.curComponent.style.width / this.curCanvasScale.matrixStyleOriginWidth)
|
||||
this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScaleSelf.matrixStyleOriginHeight)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
1818
frontend/src/components/canvas/components/Editor/DeEditor.vue
Normal file
1818
frontend/src/components/canvas/components/Editor/DeEditor.vue
Normal file
File diff suppressed because it is too large
Load Diff
@ -141,6 +141,38 @@
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!--跳转设置-->
|
||||
<el-dialog
|
||||
:visible.sync="linkJumpSetVisible"
|
||||
width="900px"
|
||||
class="dialog-css"
|
||||
:show-close="true"
|
||||
:destroy-on-close="true"
|
||||
:append-to-body="true"
|
||||
>
|
||||
<link-jump-set
|
||||
v-if="linkJumpSetVisible"
|
||||
:view-id="linkJumpSetViewId"
|
||||
@closeJumpSetDialog="closeJumpSetDialog"
|
||||
/>
|
||||
</el-dialog>
|
||||
|
||||
<!--背景设置-->
|
||||
<el-dialog
|
||||
:visible.sync="boardSetVisible"
|
||||
width="750px"
|
||||
class="dialog-css"
|
||||
:close-on-click-modal="false"
|
||||
:show-close="false"
|
||||
:destroy-on-close="true"
|
||||
:append-to-body="true"
|
||||
>
|
||||
<background
|
||||
v-if="boardSetVisible"
|
||||
@backgroundSetClose="backgroundSetClose"
|
||||
/>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -151,11 +183,17 @@ import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
|
||||
import LinkageField from '@/components/canvas/components/Editor/LinkageField'
|
||||
import toast from '@/components/canvas/utils/toast'
|
||||
import FieldsList from '@/components/canvas/components/Editor/fieldsList'
|
||||
import LinkJumpSet from '@/views/panel/LinkJumpSet'
|
||||
import Background from '@/views/background/index'
|
||||
|
||||
export default {
|
||||
components: { FieldsList, SettingMenu, LinkageField },
|
||||
components: { Background, LinkJumpSet, FieldsList, SettingMenu, LinkageField },
|
||||
|
||||
props: {
|
||||
canvasId: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
terminal: {
|
||||
type: String,
|
||||
default: 'pc'
|
||||
@ -191,6 +229,9 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
boardSetVisible: false,
|
||||
linkJumpSetVisible: false,
|
||||
linkJumpSetViewId: null,
|
||||
curFields: [],
|
||||
multiplexingCheckModel: false,
|
||||
barWidth: 24,
|
||||
@ -228,8 +269,8 @@ export default {
|
||||
},
|
||||
showEditPosition() {
|
||||
if (this.activeModel === 'edit' && !this.linkageAreaShow && !this.batchOptAreaShow) {
|
||||
const toRight = (this.canvasStyleData.width - this.element.style.left - this.element.style.width) * this.curCanvasScale.scalePointWidth
|
||||
const toLeft = this.element.style.left * this.curCanvasScale.scalePointWidth
|
||||
const toRight = (this.canvasStyleData.width - this.element.style.left - this.element.style.width) * this.curCanvasScaleSelf.scalePointWidth
|
||||
const toLeft = this.element.style.left * this.curCanvasScaleSelf.scalePointWidth
|
||||
if (this.barWidth < toRight) {
|
||||
return 'bar-main-right'
|
||||
} else if (this.barWidth > toRight && this.barWidth > toLeft) {
|
||||
@ -278,6 +319,9 @@ export default {
|
||||
miniWidth() {
|
||||
return this.mobileLayoutStatus ? 1 : 4
|
||||
},
|
||||
curCanvasScaleSelf(){
|
||||
return this.curCanvasScaleMap[this.canvasId]
|
||||
},
|
||||
...mapState([
|
||||
'menuTop',
|
||||
'menuLeft',
|
||||
@ -288,7 +332,7 @@ export default {
|
||||
'linkageSettingStatus',
|
||||
'targetLinkageInfo',
|
||||
'curLinkageView',
|
||||
'curCanvasScale',
|
||||
'curCanvasScaleMap',
|
||||
'batchOptStatus',
|
||||
'mobileLayoutStatus',
|
||||
'curBatchOptComponents',
|
||||
@ -302,6 +346,16 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
backgroundSetClose() {
|
||||
this.boardSetVisible = false
|
||||
},
|
||||
linkJumpSet() {
|
||||
this.linkJumpSetViewId = this.element.propValue.viewId
|
||||
this.linkJumpSetVisible = true
|
||||
},
|
||||
closeJumpSetDialog() {
|
||||
this.linkJumpSetVisible = false
|
||||
},
|
||||
fieldsAreaDown(e) {
|
||||
// ignore
|
||||
e.preventDefault()
|
||||
@ -347,10 +401,10 @@ export default {
|
||||
this.curComponent.auxiliaryMatrix = false
|
||||
this.$emit('amRemoveItem')
|
||||
} else {
|
||||
this.curComponent.x = Math.round(this.curComponent.style.left / this.curCanvasScale.matrixStyleOriginWidth) + 1
|
||||
this.curComponent.y = Math.round(this.curComponent.style.top / this.curCanvasScale.matrixStyleOriginHeight) + 1
|
||||
this.curComponent.sizex = Math.round(this.curComponent.style.width / this.curCanvasScale.matrixStyleOriginWidth)
|
||||
this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScale.matrixStyleOriginHeight)
|
||||
this.curComponent.x = Math.round(this.curComponent.style.left / this.curCanvasScaleSelf.matrixStyleOriginWidth) + 1
|
||||
this.curComponent.y = Math.round(this.curComponent.style.top / this.curCanvasScaleSelf.matrixStyleOriginHeight) + 1
|
||||
this.curComponent.sizex = Math.round(this.curComponent.style.width / this.curCanvasScaleSelf.matrixStyleOriginWidth)
|
||||
this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScaleSelf.matrixStyleOriginHeight)
|
||||
this.curComponent.sizey = this.curComponent.sizey > this.miniHeight ? this.curComponent.sizey : this.miniHeight
|
||||
this.curComponent.sizex = this.curComponent.sizex > this.miniWidth ? this.curComponent.sizex : this.miniWidth
|
||||
this.curComponent.auxiliaryMatrix = true
|
||||
@ -364,10 +418,10 @@ export default {
|
||||
},
|
||||
// 记录当前样式 跟随阴影位置 矩阵处理
|
||||
recordMatrixCurShadowStyle() {
|
||||
const left = (this.curComponent.x - 1) * this.curCanvasScale.matrixStyleWidth
|
||||
const top = (this.curComponent.y - 1) * this.curCanvasScale.matrixStyleHeight
|
||||
const width = this.curComponent.sizex * this.curCanvasScale.matrixStyleWidth
|
||||
const height = this.curComponent.sizey * this.curCanvasScale.matrixStyleHeight
|
||||
const left = (this.curComponent.x - 1) * this.curCanvasScaleSelf.matrixStyleWidth
|
||||
const top = (this.curComponent.y - 1) * this.curCanvasScaleSelf.matrixStyleHeight
|
||||
const width = this.curComponent.sizex * this.curCanvasScaleSelf.matrixStyleWidth
|
||||
const height = this.curComponent.sizey * this.curCanvasScaleSelf.matrixStyleHeight
|
||||
const style = {
|
||||
left: left,
|
||||
top: top,
|
||||
@ -409,9 +463,6 @@ export default {
|
||||
})
|
||||
bus.$emit('clear_panel_linkage', { viewId: this.element.propValue.viewId })
|
||||
},
|
||||
linkJumpSet() {
|
||||
this.$emit('linkJumpSet')
|
||||
},
|
||||
goFile() {
|
||||
this.$refs.files.click()
|
||||
},
|
||||
@ -435,7 +486,7 @@ export default {
|
||||
reader.readAsDataURL(file)
|
||||
},
|
||||
boardSet() {
|
||||
this.$emit('boardSet')
|
||||
this.boardSetVisible = true
|
||||
},
|
||||
batchOptChange(val) {
|
||||
if (val) {
|
||||
|
||||
@ -1,20 +1,17 @@
|
||||
<template>
|
||||
<div class="grid">
|
||||
<!-- 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%"
|
||||
class="outer-class"
|
||||
>
|
||||
<!-- <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, indx) in yItem"
|
||||
:key="indx+'x'"
|
||||
v-for="(xItem, index) in yItem"
|
||||
:key="index+'x'"
|
||||
:style="classInfo"
|
||||
style="float: left; border: 0.2px solid #b3d4fc ;"
|
||||
class="inner-class"
|
||||
>
|
||||
{{ xItem.el?1:0 }}
|
||||
{{ xItem.el?'.':'' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -55,4 +52,11 @@ export default {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.outer-class{
|
||||
float: left; width: 105%
|
||||
}
|
||||
|
||||
.inner-class{
|
||||
float: left; border: 1px solid #b3d4fc ;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
>
|
||||
<canvas-opt-bar />
|
||||
<div
|
||||
id="canvasInfoMain"
|
||||
ref="canvasInfoMain"
|
||||
:id="previewDomId"
|
||||
:ref="previewRefId"
|
||||
:style="canvasInfoMainStyle"
|
||||
>
|
||||
<el-row
|
||||
@ -31,8 +31,8 @@
|
||||
</el-row>
|
||||
<div
|
||||
v-else
|
||||
id="canvasInfoTemp"
|
||||
ref="canvasInfoTemp"
|
||||
:id="previewTempDomId"
|
||||
:ref="previewTempRefId"
|
||||
:style="[canvasInfoTempStyle,screenShotStyle]"
|
||||
class="main-class"
|
||||
@mouseup="deselectCurComponent"
|
||||
@ -53,61 +53,6 @@
|
||||
:canvas-style-data="canvasStyleData"
|
||||
:show-position="showPosition"
|
||||
/>
|
||||
<!--视图详情-->
|
||||
<el-dialog
|
||||
:visible.sync="chartDetailsVisible"
|
||||
width="80%"
|
||||
class="dialog-css"
|
||||
:destroy-on-close="true"
|
||||
top="5vh"
|
||||
>
|
||||
<span
|
||||
v-if="chartDetailsVisible"
|
||||
style="position: absolute;right: 70px;top:15px"
|
||||
>
|
||||
<el-button
|
||||
v-if="showChartInfoType==='enlarge' && showChartInfo && showChartInfo.type !== 'symbol-map'"
|
||||
class="el-icon-picture-outline"
|
||||
size="mini"
|
||||
@click="exportViewImg"
|
||||
>
|
||||
{{ $t('chart.export_img') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="showChartInfoType==='details'"
|
||||
size="mini"
|
||||
@click="exportExcel"
|
||||
>
|
||||
<svg-icon
|
||||
icon-class="ds-excel"
|
||||
class="ds-icon-excel"
|
||||
/>{{ $t('chart.export') }}Excel
|
||||
</el-button>
|
||||
</span>
|
||||
<UserViewDialog
|
||||
v-if="chartDetailsVisible"
|
||||
ref="userViewDialog"
|
||||
:canvas-style-data="canvasStyleData"
|
||||
:open-type="showChartInfoType"
|
||||
:chart="showChartInfo"
|
||||
:chart-table="showChartTableInfo"
|
||||
/>
|
||||
</el-dialog>
|
||||
|
||||
<!--手机视图详情-->
|
||||
<el-dialog
|
||||
:visible.sync="mobileChartDetailsVisible"
|
||||
:fullscreen="true"
|
||||
class="mobile-dialog-css"
|
||||
:destroy-on-close="true"
|
||||
>
|
||||
<UserViewMobileDialog
|
||||
v-if="mobileChartDetailsVisible"
|
||||
:canvas-style-data="canvasStyleData"
|
||||
:chart="showChartInfo"
|
||||
:chart-table="showChartTableInfo"
|
||||
/>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -187,10 +132,19 @@ export default {
|
||||
panelInfo: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
canvasId: {
|
||||
type: String,
|
||||
require: false,
|
||||
default: 'canvas-main'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
previewDomId: 'preview-'+this.canvasId,
|
||||
previewRefId: 'preview-ref-'+this.canvasId,
|
||||
previewTempDomId: 'preview-temp-'+this.canvasId,
|
||||
previewTempRefId: 'preview-temp-ref-'+this.canvasId,
|
||||
isShowPreview: false,
|
||||
panelId: '',
|
||||
needToChangeHeight: [
|
||||
@ -211,11 +165,6 @@ export default {
|
||||
mainWidth: '100%',
|
||||
mainHeight: '100%',
|
||||
searchCount: 0,
|
||||
chartDetailsVisible: false,
|
||||
mobileChartDetailsVisible: false,
|
||||
showChartInfo: {},
|
||||
showChartTableInfo: {},
|
||||
showChartInfoType: 'details',
|
||||
// 布局展示 1.pc pc端布局 2.mobile 移动端布局
|
||||
terminal: 'pc',
|
||||
buttonFilterMap: null
|
||||
@ -353,10 +302,9 @@ export default {
|
||||
bus.$on('trigger-reset-button', this.triggerResetButton)
|
||||
},
|
||||
beforeDestroy() {
|
||||
erd.uninstall(this.$refs.canvasInfoTemp)
|
||||
erd.uninstall(this.$refs.canvasInfoMain)
|
||||
erd.uninstall(this.$refs[this.previewTempRefId])
|
||||
erd.uninstall(this.$refs[this.previewRefId])
|
||||
clearInterval(this.timer)
|
||||
eventBus.$off('openChartDetailsDialog', this.openChartDetailsDialog)
|
||||
bus.$off('trigger-search-button', this.triggerSearchButton)
|
||||
bus.$off('trigger-reset-button', this.triggerResetButton)
|
||||
},
|
||||
@ -483,8 +431,8 @@ export default {
|
||||
changeStyleWithScale,
|
||||
getStyle,
|
||||
restore() {
|
||||
const canvasHeight = document.getElementById('canvasInfoMain').offsetHeight
|
||||
const canvasWidth = document.getElementById('canvasInfoMain').offsetWidth
|
||||
const canvasHeight = document.getElementById(this.previewDomId).offsetHeight
|
||||
const canvasWidth = document.getElementById(this.previewDomId).offsetWidth
|
||||
this.scaleWidth = (canvasWidth) * 100 / this.canvasStyleData.width // 获取宽度比
|
||||
// 如果是后端截图方式使用 的高度伸缩比例和宽度比例相同
|
||||
if (this.backScreenShot) {
|
||||
@ -527,16 +475,6 @@ export default {
|
||||
this.$nextTick(() => (eventBus.$emit('resizing', '')))
|
||||
}
|
||||
},
|
||||
openChartDetailsDialog(chartInfo) {
|
||||
this.showChartInfo = chartInfo.chart
|
||||
this.showChartTableInfo = chartInfo.tableChart
|
||||
this.showChartInfoType = chartInfo.openType
|
||||
if (this.terminal === 'pc') {
|
||||
this.chartDetailsVisible = true
|
||||
} else {
|
||||
this.mobileChartDetailsVisible = true
|
||||
}
|
||||
},
|
||||
exportExcel() {
|
||||
this.$refs['userViewDialog'].exportExcel()
|
||||
},
|
||||
@ -559,7 +497,7 @@ export default {
|
||||
},
|
||||
initListen() {
|
||||
const _this = this
|
||||
const canvasMain = document.getElementById('canvasInfoMain')
|
||||
const canvasMain = document.getElementById(this.previewDomId)
|
||||
// 监听主div变动事件
|
||||
if (canvasMain) {
|
||||
erd.listenTo(canvasMain, element => {
|
||||
@ -570,9 +508,9 @@ export default {
|
||||
}
|
||||
setTimeout(() => {
|
||||
// 监听画布div变动事件
|
||||
const tempCanvas = document.getElementById('canvasInfoTemp')
|
||||
const tempCanvas = document.getElementById(this.previewTempDomId)
|
||||
if (tempCanvas) {
|
||||
erd.listenTo(document.getElementById('canvasInfoTemp'), element => {
|
||||
erd.listenTo(document.getElementById(this.previewTempDomId), element => {
|
||||
_this.$nextTick(() => {
|
||||
// 将mainHeight 修改为px 临时解决html2canvas 截图不全的问题
|
||||
_this.mainHeight = tempCanvas.scrollHeight + 'px!important'
|
||||
@ -581,7 +519,6 @@ export default {
|
||||
})
|
||||
}
|
||||
}, 1500)
|
||||
eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,32 +32,6 @@
|
||||
:canvas-style-data="canvasStyleData"
|
||||
:in-screen="inScreen"
|
||||
/>
|
||||
<!--视图详情-->
|
||||
<el-dialog
|
||||
:visible.sync="chartDetailsVisible"
|
||||
width="70%"
|
||||
class="dialog-css"
|
||||
:destroy-on-close="true"
|
||||
>
|
||||
<span style="position: absolute;right: 70px;top:15px">
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="exportExcel"
|
||||
>
|
||||
<svg-icon
|
||||
icon-class="ds-excel"
|
||||
class="ds-icon-excel"
|
||||
/>
|
||||
{{ $t('chart.export_details') }}
|
||||
</el-button>
|
||||
</span>
|
||||
<UserViewDialog
|
||||
ref="userViewDialog"
|
||||
:canvas-style-data="canvasStyleData"
|
||||
:chart="showChartInfo"
|
||||
:chart-table="showChartTableInfo"
|
||||
/>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -122,10 +96,7 @@ export default {
|
||||
componentDataShow: [],
|
||||
mainWidth: '100%',
|
||||
mainHeight: '100%',
|
||||
searchCount: 0,
|
||||
chartDetailsVisible: false,
|
||||
showChartInfo: {},
|
||||
showChartTableInfo: {}
|
||||
searchCount: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -257,14 +228,6 @@ export default {
|
||||
this.$nextTick(() => (eventBus.$emit('resizing', '')))
|
||||
}
|
||||
},
|
||||
openChartDetailsDialog(chartInfo) {
|
||||
this.showChartInfo = chartInfo.chart
|
||||
this.showChartTableInfo = chartInfo.tableChart
|
||||
this.chartDetailsVisible = true
|
||||
},
|
||||
exportExcel() {
|
||||
this.$refs['userViewDialog'].exportExcel()
|
||||
},
|
||||
deselectCurComponent(e) {
|
||||
if (!this.isClickComponent) {
|
||||
this.$store.commit('setCurComponent', { component: null, index: null })
|
||||
|
||||
@ -1,237 +0,0 @@
|
||||
<template>
|
||||
<el-card
|
||||
class="el-card-main"
|
||||
:style="mainStyle"
|
||||
>
|
||||
<div style="position: relative;">
|
||||
<el-tooltip :content="$t('panel.fontSize')">
|
||||
|
||||
<i
|
||||
style="float: left;margin-top: 3px;margin-left: 2px;"
|
||||
class="iconfont icon-font_size"
|
||||
/>
|
||||
</el-tooltip>
|
||||
|
||||
<div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
|
||||
<el-input
|
||||
v-model="styleInfo.fontSize"
|
||||
type="number"
|
||||
size="mini"
|
||||
min="12"
|
||||
max="128"
|
||||
@change="styleChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-tooltip :content="$t('panel.fontWeight')">
|
||||
<i
|
||||
style="float: left;margin-top: 3px;margin-left: 2px;"
|
||||
class="icon iconfont icon-font-weight-bold"
|
||||
/>
|
||||
</el-tooltip>
|
||||
|
||||
<div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
|
||||
<el-input
|
||||
v-model="styleInfo.fontWeight"
|
||||
type="number"
|
||||
size="mini"
|
||||
min="100"
|
||||
step="100"
|
||||
max="900"
|
||||
@change="styleChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-tooltip :content="$t('panel.letterSpacing')">
|
||||
<i
|
||||
style="float: left;margin-top: 3px;margin-left: 2px;"
|
||||
class="icon iconfont icon-letter_spacing"
|
||||
/>
|
||||
</el-tooltip>
|
||||
|
||||
<div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
|
||||
<el-input
|
||||
v-model="styleInfo.letterSpacing"
|
||||
type="number"
|
||||
size="mini"
|
||||
min="0"
|
||||
max="99"
|
||||
@change="styleChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
|
||||
<div style="width: 16px;height: 18px">
|
||||
<el-tooltip :content="$t('panel.color')">
|
||||
<i
|
||||
class="icon iconfont icon-zimua"
|
||||
@click="goColor"
|
||||
/>
|
||||
</el-tooltip>
|
||||
<div :style="letterDivColor" />
|
||||
<el-color-picker
|
||||
ref="colorPicker"
|
||||
v-model="styleInfo.color"
|
||||
style="margin-top: 7px;height: 0px"
|
||||
size="mini"
|
||||
@change="styleChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
|
||||
<div style="width: 16px;height: 18px">
|
||||
<el-tooltip content="背景颜色">
|
||||
<i
|
||||
class="iconfont icon-beijingse1"
|
||||
@click="goBackgroundColor"
|
||||
/>
|
||||
</el-tooltip>
|
||||
<div :style="backgroundDivColor" />
|
||||
<el-color-picker
|
||||
ref="backgroundColorPicker"
|
||||
v-model="styleInfo.backgroundColor"
|
||||
style="margin-top: 7px;height: 0px"
|
||||
size="mini"
|
||||
@change="styleChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
props: {
|
||||
scrollLeft: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
scrollTop: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
textAlignOptions: [
|
||||
{
|
||||
icon: 'iconfont icon-juzuo',
|
||||
tooltip: this.$t('panel.text_align_left'),
|
||||
label: 'left'
|
||||
},
|
||||
{
|
||||
icon: 'iconfont icon-align-center',
|
||||
tooltip: this.$t('panel.text_align_center'),
|
||||
label: 'center'
|
||||
},
|
||||
{
|
||||
icon: 'iconfont icon-juyou',
|
||||
tooltip: this.$t('panel.text_align_right'),
|
||||
label: 'right'
|
||||
}
|
||||
] }
|
||||
},
|
||||
computed: {
|
||||
|
||||
letterDivColor() {
|
||||
const style = {
|
||||
height: '2px',
|
||||
background: this.styleInfo.color
|
||||
}
|
||||
return style
|
||||
},
|
||||
backgroundDivColor() {
|
||||
const style = {
|
||||
height: '2px',
|
||||
background: this.styleInfo.backgroundColor
|
||||
}
|
||||
return style
|
||||
},
|
||||
|
||||
mainStyle() {
|
||||
const style = {
|
||||
left: (this.getPositionX(this.curComponent.style.left) - this.scrollLeft) + 'px',
|
||||
top: (this.getPositionY(this.curComponent.style.top) - this.scrollTop - 3) + 'px'
|
||||
}
|
||||
return style
|
||||
},
|
||||
styleInfo() {
|
||||
return this.$store.state.curComponent.style
|
||||
},
|
||||
canvasWidth() {
|
||||
let scaleWidth = 1
|
||||
if (this.canvasStyleData.selfAdaption) {
|
||||
scaleWidth = this.curCanvasScale.scaleWidth / 100
|
||||
}
|
||||
return this.canvasStyleData.width * scaleWidth
|
||||
},
|
||||
...mapState([
|
||||
'curComponent',
|
||||
'curCanvasScale',
|
||||
'canvasStyleData'
|
||||
])
|
||||
|
||||
},
|
||||
methods: {
|
||||
goColor() {
|
||||
this.$refs.colorPicker.handleTrigger()
|
||||
},
|
||||
goBackgroundColor() {
|
||||
this.$refs.backgroundColorPicker.handleTrigger()
|
||||
},
|
||||
getPositionX(x) {
|
||||
let ps = 0
|
||||
if (this.canvasStyleData.selfAdaption) {
|
||||
ps = (x * this.curCanvasScale.scaleWidth / 100) + 60
|
||||
} else {
|
||||
ps = x + 60
|
||||
}
|
||||
// 防止toolbar超出边界
|
||||
const xGap = ps + 295 - this.canvasWidth
|
||||
if (xGap > 0) {
|
||||
return ps - xGap
|
||||
} else {
|
||||
return ps
|
||||
}
|
||||
},
|
||||
getPositionY(y) {
|
||||
if (this.canvasStyleData.selfAdaption) {
|
||||
return y * this.curCanvasScale.scaleHeight / 100
|
||||
} else {
|
||||
return y
|
||||
}
|
||||
},
|
||||
styleChange() {
|
||||
this.$store.commit('canvasChange')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.attr-list {
|
||||
overflow: auto;
|
||||
padding: 20px;
|
||||
padding-top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.el-card-main {
|
||||
height: 34px;
|
||||
z-index: 10;
|
||||
width: 350px;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
.el-card-main ::v-deep .el-card__body {
|
||||
padding: 0px!important;
|
||||
|
||||
}
|
||||
|
||||
::v-deep .el-radio-button__inner{
|
||||
padding: 5px!important;
|
||||
width: 30px!important;
|
||||
}
|
||||
</style>
|
||||
@ -1,284 +0,0 @@
|
||||
<template>
|
||||
<el-card
|
||||
class="el-card-main"
|
||||
:style="mainStyle"
|
||||
>
|
||||
<div style="position: relative;">
|
||||
<div style="width: 80px;margin-top: 2px;margin-left: 2px;float: left">
|
||||
<el-tooltip content="边框风格">
|
||||
<el-select
|
||||
v-model="styleInfo.borderStyle"
|
||||
size="mini"
|
||||
@change="styleChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in lineStyle"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
<span style="float: left;">
|
||||
<i :class="item.icon" />
|
||||
</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 12px">{{ item.label }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<div style="width: 55px;float: left;margin-top: 2px;margin-left: 2px;">
|
||||
<el-tooltip content="边框宽度">
|
||||
<el-select
|
||||
v-model="styleInfo.borderWidth"
|
||||
size="mini"
|
||||
placeholder=""
|
||||
@change="styleChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in lineFont"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<el-tooltip :content="$t('panel.borderRadius')">
|
||||
<i
|
||||
style="float: left;margin-top: 3px;margin-left: 2px;"
|
||||
class="icon iconfont icon-fangxing-"
|
||||
/>
|
||||
</el-tooltip>
|
||||
|
||||
<div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
|
||||
<el-input
|
||||
v-model="styleInfo.borderRadius"
|
||||
type="number"
|
||||
size="mini"
|
||||
min="0"
|
||||
max="100"
|
||||
step="1"
|
||||
@change="styleChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-tooltip :content="$t('panel.opacity')">
|
||||
<i
|
||||
style="float: left;margin-top: 3px;margin-left: 2px;"
|
||||
class="icon iconfont icon-touming"
|
||||
/>
|
||||
</el-tooltip>
|
||||
|
||||
<div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
|
||||
<el-input
|
||||
v-model="innerOpacity"
|
||||
type="number"
|
||||
size="mini"
|
||||
min="0"
|
||||
max="100"
|
||||
step="10"
|
||||
@change="styleChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
|
||||
<div style="width: 16px;height: 18px">
|
||||
<el-tooltip content="边框颜色">
|
||||
<i
|
||||
class="iconfont icon-huabi"
|
||||
@click="goBoardColor"
|
||||
/>
|
||||
</el-tooltip>
|
||||
<div :style="boardDivColor" />
|
||||
<el-color-picker
|
||||
ref="boardColorPicker"
|
||||
v-model="styleInfo.borderColor"
|
||||
style="margin-top: 7px;height: 0px"
|
||||
size="mini"
|
||||
@change="styleChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
|
||||
<div style="width: 16px;height: 18px">
|
||||
<el-tooltip content="背景颜色">
|
||||
<i
|
||||
class="iconfont icon-beijingse1"
|
||||
@click="goBackgroundColor"
|
||||
/>
|
||||
</el-tooltip>
|
||||
<div :style="backgroundDivColor" />
|
||||
<el-color-picker
|
||||
ref="backgroundColorPicker"
|
||||
v-model="styleInfo.backgroundColor"
|
||||
style="margin-top: 7px;height: 0px"
|
||||
size="mini"
|
||||
@change="styleChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
props: {
|
||||
scrollLeft: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
scrollTop: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lineStyle: [{
|
||||
icon: 'iconfont icon-solid_line',
|
||||
value: 'solid',
|
||||
label: '实线'
|
||||
}, {
|
||||
icon: 'iconfont icon-xuxian',
|
||||
value: 'dashed',
|
||||
label: '虚线'
|
||||
}, {
|
||||
icon: 'iconfont icon-dianxian',
|
||||
value: 'dotted',
|
||||
label: '点线'
|
||||
}],
|
||||
lineFont: [{
|
||||
value: '0',
|
||||
label: '0'
|
||||
}, {
|
||||
value: '1',
|
||||
label: '1'
|
||||
}, {
|
||||
value: '2',
|
||||
label: '2'
|
||||
}, {
|
||||
value: '3',
|
||||
label: '3'
|
||||
}, {
|
||||
value: '4',
|
||||
label: '4'
|
||||
}, {
|
||||
value: '5',
|
||||
label: '5'
|
||||
}],
|
||||
innerOpacity: 0
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
boardDivColor() {
|
||||
const style = {
|
||||
height: '2px',
|
||||
background: this.styleInfo.borderColor
|
||||
}
|
||||
return style
|
||||
},
|
||||
backgroundDivColor() {
|
||||
const style = {
|
||||
height: '2px',
|
||||
background: this.styleInfo.backgroundColor
|
||||
}
|
||||
return style
|
||||
},
|
||||
|
||||
mainStyle() {
|
||||
const style = {
|
||||
left: this.getPositionX(this.curComponent.style.left - this.scrollLeft) + 'px',
|
||||
top: (this.getPositionY(this.curComponent.style.top) - this.scrollTop - 3) + 'px'
|
||||
}
|
||||
return style
|
||||
},
|
||||
styleInfo() {
|
||||
return this.$store.state.curComponent.style
|
||||
},
|
||||
canvasWidth() {
|
||||
let scaleWidth = 1
|
||||
if (this.canvasStyleData.selfAdaption) {
|
||||
scaleWidth = this.curCanvasScale.scaleWidth / 100
|
||||
}
|
||||
return this.canvasStyleData.width * scaleWidth
|
||||
},
|
||||
...mapState([
|
||||
'curComponent',
|
||||
'curCanvasScale',
|
||||
'canvasStyleData'
|
||||
])
|
||||
|
||||
},
|
||||
watch: {
|
||||
innerOpacity: {
|
||||
handler(oldVal, newVal) {
|
||||
this.styleInfo['opacity'] = this.innerOpacity / 100
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.styleInfo['opacity']) {
|
||||
this.innerOpacity = this.styleInfo['opacity'] * 100
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goBoardColor() {
|
||||
this.$refs.boardColorPicker.handleTrigger()
|
||||
},
|
||||
goBackgroundColor() {
|
||||
this.$refs.backgroundColorPicker.handleTrigger()
|
||||
},
|
||||
getPositionX(x) {
|
||||
let ps = 0
|
||||
if (this.canvasStyleData.selfAdaption) {
|
||||
ps = (x * this.curCanvasScale.scaleWidth / 100) + 60
|
||||
} else {
|
||||
ps = x + 60
|
||||
}
|
||||
// 防止toolbar超出边界
|
||||
const xGap = ps + 345 - this.canvasWidth
|
||||
if (xGap > 0) {
|
||||
return ps - xGap
|
||||
} else {
|
||||
return ps
|
||||
}
|
||||
},
|
||||
getPositionY(y) {
|
||||
if (this.canvasStyleData.selfAdaption) {
|
||||
return y * this.curCanvasScale.scaleHeight / 100
|
||||
} else {
|
||||
return y
|
||||
}
|
||||
},
|
||||
styleChange() {
|
||||
this.$store.commit('canvasChange')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.attr-list {
|
||||
overflow: auto;
|
||||
padding: 20px;
|
||||
padding-top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.el-card-main {
|
||||
height: 34px;
|
||||
z-index: 10;
|
||||
width: 400px;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
.el-card-main ::v-deep .el-card__body {
|
||||
padding: 0px!important;
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -319,7 +319,7 @@
|
||||
style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
|
||||
>
|
||||
<el-tooltip :content="$t('panel.data_format')">
|
||||
<date-format :format-info="curComponent.formatInfo" />
|
||||
<date-format :canvas-id="canvasId" :format-info="curComponent.formatInfo" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
@ -415,6 +415,10 @@ import FrameLinks from '@/components/canvas/components/Editor/FrameLinks'
|
||||
export default {
|
||||
components: { FrameLinks, DateFormat, VideoLinks, StreamMediaLinks },
|
||||
props: {
|
||||
canvasId: {
|
||||
type: String,
|
||||
default: 'canvas-main'
|
||||
},
|
||||
scrollLeft: {
|
||||
type: Number,
|
||||
default: 0
|
||||
@ -592,14 +596,17 @@ export default {
|
||||
return this.$store.state.curComponent.component
|
||||
},
|
||||
canvasWidth() {
|
||||
return this.canvasStyleData.width * this.curCanvasScale.scalePointWidth
|
||||
return this.canvasStyleData.width * this.curCanvasScaleSelf.scalePointWidth
|
||||
},
|
||||
showVertical() {
|
||||
return !['textSelectGridWidget', 'numberSelectGridWidget'].includes(this.curComponent.serviceName)
|
||||
},
|
||||
curCanvasScaleSelf(){
|
||||
return this.curCanvasScaleMap[this.canvasId]
|
||||
},
|
||||
...mapState([
|
||||
'curComponent',
|
||||
'curCanvasScale',
|
||||
'curCanvasScaleMap',
|
||||
'canvasStyleData',
|
||||
'curActiveTabInner'
|
||||
])
|
||||
@ -675,7 +682,7 @@ export default {
|
||||
},
|
||||
getPositionX(x) {
|
||||
let ps = 0
|
||||
ps = (x * this.curCanvasScale.scalePointWidth) + 60
|
||||
ps = (x * this.curCanvasScaleSelf.scalePointWidth) + 60
|
||||
// 防止toolbar超出边界
|
||||
const xGap = ps + this.mainWidthOffset - this.canvasWidth
|
||||
if (xGap > 0) {
|
||||
@ -685,7 +692,7 @@ export default {
|
||||
}
|
||||
},
|
||||
getPositionY(y) {
|
||||
return y * this.curCanvasScale.scalePointHeight
|
||||
return y * this.curCanvasScaleSelf.scalePointHeight
|
||||
},
|
||||
styleChange() {
|
||||
this.$store.commit('canvasChange')
|
||||
|
||||
@ -120,6 +120,66 @@
|
||||
@onDrillJump="drillJump"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!--dialog-->
|
||||
<!--视图详情-->
|
||||
<el-dialog
|
||||
:visible.sync="chartDetailsVisible"
|
||||
width="80%"
|
||||
class="dialog-css"
|
||||
:destroy-on-close="true"
|
||||
:show-close="true"
|
||||
:append-to-body="true"
|
||||
top="5vh"
|
||||
>
|
||||
<span
|
||||
v-if="chartDetailsVisible"
|
||||
style="position: absolute;right: 70px;top:15px"
|
||||
>
|
||||
<el-button
|
||||
v-if="showChartInfoType==='enlarge' && showChartInfo && showChartInfo.type !== 'symbol-map'"
|
||||
class="el-icon-picture-outline"
|
||||
size="mini"
|
||||
@click="exportViewImg"
|
||||
>
|
||||
{{ $t('chart.export_img') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="showChartInfoType==='details'"
|
||||
size="mini"
|
||||
@click="exportExcel"
|
||||
>
|
||||
<svg-icon
|
||||
icon-class="ds-excel"
|
||||
class="ds-icon-excel"
|
||||
/>{{ $t('chart.export') }}Excel
|
||||
</el-button>
|
||||
</span>
|
||||
<user-view-dialog
|
||||
v-if="chartDetailsVisible"
|
||||
ref="userViewDialog"
|
||||
:chart="showChartInfo"
|
||||
:chart-table="showChartTableInfo"
|
||||
:canvas-style-data="canvasStyleData"
|
||||
:open-type="showChartInfoType"
|
||||
/>
|
||||
</el-dialog>
|
||||
|
||||
<!--手机视图详情-->
|
||||
<el-dialog
|
||||
class="mobile-dialog-css"
|
||||
:visible.sync="mobileChartDetailsVisible"
|
||||
:fullscreen="true"
|
||||
:append-to-body="true"
|
||||
:destroy-on-close="true"
|
||||
>
|
||||
<UserViewMobileDialog
|
||||
v-if="mobileChartDetailsVisible"
|
||||
:canvas-style-data="canvasStyleData"
|
||||
:chart="showChartInfo"
|
||||
:chart-table="showChartTableInfo"
|
||||
/>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -135,7 +195,6 @@ import bus from '@/utils/bus'
|
||||
import { mapState } from 'vuex'
|
||||
import { isChange } from '@/utils/conditionUtil'
|
||||
import { BASE_CHART_STRING } from '@/views/chart/chart/chart'
|
||||
import eventBus from '@/components/canvas/utils/eventBus'
|
||||
import { deepCopy } from '@/components/canvas/utils/utils'
|
||||
import { getToken, getLinkToken } from '@/utils/auth'
|
||||
import DrillPath from '@/views/chart/view/DrillPath'
|
||||
@ -151,10 +210,11 @@ import { checkAddHttp } from '@/utils/urlUtils'
|
||||
import DeRichTextView from '@/components/canvas/custom-component/DeRichTextView'
|
||||
import Vue from 'vue'
|
||||
import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
|
||||
import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
|
||||
|
||||
export default {
|
||||
name: 'UserView',
|
||||
components: { DeRichTextView, LabelNormalText, PluginCom, ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
|
||||
components: { UserViewDialog, DeRichTextView, LabelNormalText, PluginCom, ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
|
||||
props: {
|
||||
element: {
|
||||
type: Object,
|
||||
@ -219,6 +279,11 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mobileChartDetailsVisible: false,
|
||||
chartDetailsVisible: false,
|
||||
showChartInfo: {},
|
||||
showChartTableInfo: {},
|
||||
showChartInfoType: 'details',
|
||||
dataRowNameSelect: {},
|
||||
dataRowSelect: {},
|
||||
curFields: [],
|
||||
@ -461,6 +526,12 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
exportExcel() {
|
||||
this.$refs['userViewDialog'].exportExcel()
|
||||
},
|
||||
exportViewImg() {
|
||||
this.$refs['userViewDialog'].exportViewImg()
|
||||
},
|
||||
pluginEditHandler(e) {
|
||||
this.$emit('trigger-plugin-edit', { e, id: this.element.id })
|
||||
},
|
||||
@ -728,7 +799,16 @@ export default {
|
||||
tableChart.customStyle.text.show = false
|
||||
tableChart.customAttr = JSON.stringify(tableChart.customAttr)
|
||||
tableChart.customStyle = JSON.stringify(tableChart.customStyle)
|
||||
eventBus.$emit('openChartDetailsDialog', { chart: this.chart, tableChart: tableChart, openType: params.openType })
|
||||
|
||||
this.showChartInfo = this.chart
|
||||
this.showChartTableInfo = tableChart
|
||||
this.showChartInfoType = params.openType
|
||||
this.chartDetailsVisible = true
|
||||
if (this.terminal === 'pc') {
|
||||
this.chartDetailsVisible = true
|
||||
} else {
|
||||
this.mobileChartDetailsVisible = true
|
||||
}
|
||||
},
|
||||
chartClick(param) {
|
||||
if (this.drillClickDimensionList.length < this.chart.drillFields.length - 1) {
|
||||
|
||||
@ -394,7 +394,7 @@ const list = [
|
||||
tabList: [{
|
||||
title: 'Tab1',
|
||||
name: '1',
|
||||
content: null
|
||||
content: { type: 'canvas' }
|
||||
}]
|
||||
},
|
||||
x: 1,
|
||||
|
||||
@ -35,7 +35,7 @@ export default {
|
||||
}
|
||||
})
|
||||
const canvasStyleData = state.canvasStyleData
|
||||
const curCanvasScale = state.curCanvasScale
|
||||
const curCanvasScaleSelf = state.curCanvasScaleMap['canvas-main']
|
||||
const componentGap = state.componentGap
|
||||
Object.keys(state.curMultiplexingComponents).forEach(function(componentId, index) {
|
||||
const component =
|
||||
@ -53,15 +53,15 @@ export default {
|
||||
const tilePosition = index % 3
|
||||
const divisiblePosition = parseInt(index / 3)
|
||||
if (canvasStyleData.auxiliaryMatrix) {
|
||||
const width = component.sizex * curCanvasScale.matrixStyleOriginWidth
|
||||
const width = component.sizex * curCanvasScaleSelf.matrixStyleOriginWidth
|
||||
// 取余 平铺4个 此处x 位置偏移
|
||||
component.x = component.x + component.sizex * tilePosition
|
||||
// Y 方向根据当前应该放置的最大值 加上50矩阵余量
|
||||
component.y = pYMax + 50 + state.viewBase.sizex * divisiblePosition
|
||||
component.style.left = (component.x - 1) * curCanvasScale.matrixStyleOriginWidth
|
||||
component.style.top = (component.y - 1) * curCanvasScale.matrixStyleOriginHeight
|
||||
component.style.left = (component.x - 1) * curCanvasScaleSelf.matrixStyleOriginWidth
|
||||
component.style.top = (component.y - 1) * curCanvasScaleSelf.matrixStyleOriginHeight
|
||||
component.style.width = width
|
||||
component.style.height = component.sizey * curCanvasScale.matrixStyleOriginHeight
|
||||
component.style.height = component.sizey * curCanvasScaleSelf.matrixStyleOriginHeight
|
||||
} else {
|
||||
const width = component.style.width
|
||||
const height = component.style.height
|
||||
|
||||
@ -133,6 +133,10 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
|
||||
if (item.component && item.component === 'Picture') {
|
||||
item.style.adaptation = item.style.adaptation || 'adaptation'
|
||||
}
|
||||
// 增加所属画布ID（canvasId）当前所在画布的父ID（canvasPid） 主画布ID为main-canvas, PID = 0 表示当前所属canvas为最顶层
|
||||
item.canvasId = (item.canvasId || 'canvas-main')
|
||||
item.canvasPid = (item.canvasPid || '0')
|
||||
|
||||
})
|
||||
// 初始化密度为最高密度
|
||||
componentStyle.aidedDesign.matrixBase = 4
|
||||
@ -145,7 +149,7 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
|
||||
export function resetID(data) {
|
||||
if (data) {
|
||||
data.forEach(item => {
|
||||
item.type !== 'custom' && (item.id = uuid.v1())
|
||||
item.type !== 'custom' && item.type !== 'de-tabs'&& (item.id = uuid.v1())
|
||||
})
|
||||
}
|
||||
return data
|
||||
@ -224,3 +228,7 @@ export function imgUrlTrans(url) {
|
||||
return url
|
||||
}
|
||||
}
|
||||
|
||||
export function getNowCanvasComponentData(canvasId){
|
||||
return store.state.componentData.filter(item => item.canvasId===canvasId)
|
||||
}
|
||||
|
||||
@ -118,9 +118,6 @@ export default {
|
||||
}
|
||||
return size
|
||||
},
|
||||
...mapState([
|
||||
'curCanvasScale'
|
||||
]),
|
||||
deSelectGridBg() {
|
||||
if (this.element.component !== 'de-select-grid') return null
|
||||
const { backgroundColorSelect, color } = this.element.commonBackground
|
||||
|
||||
@ -63,6 +63,27 @@
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</span>
|
||||
<de-canvas-tab v-if="item.content && item.content.type==='canvas' && isEdit"
|
||||
:ref="'canvasTabRef-'+item.name"
|
||||
:parent-forbid="true"
|
||||
:canvas-style-data="canvasStyleData"
|
||||
:component-data="tabCanvasComponentData(item.name)"
|
||||
:canvas-id="element.id+'-'+item.name"
|
||||
class="tab_canvas"
|
||||
:class="moveActive ? 'canvas_move_in':''"
|
||||
>
|
||||
</de-canvas-tab>
|
||||
<div style="width: 100%;height:100%">
|
||||
<Preview
|
||||
v-if="item.content && item.content.type==='canvas' && !isEdit"
|
||||
:component-data="tabCanvasComponentData(item.name)"
|
||||
:canvas-style-data="canvasStyleData"
|
||||
:canvas-id="element.id+'-'+item.name"
|
||||
:panel-info="panelInfo"
|
||||
:in-screen="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<component
|
||||
:is="item.content.component"
|
||||
v-if="item.content && item.content.type!=='view'"
|
||||
@ -195,10 +216,13 @@ import { chartCopy } from '@/api/chart/chart'
|
||||
import { buildFilterMap } from '@/utils/conditionUtil'
|
||||
import TabUseList from '@/views/panel/AssistComponent/tabUseList'
|
||||
import { findPanelElementInfo } from '@/api/panel/panel'
|
||||
import { getNowCanvasComponentData } from '@/components/canvas/utils/utils'
|
||||
import DeCanvasTab from '@/components/canvas/DeCanvas'
|
||||
import Preview from '@/components/canvas/components/Editor/Preview'
|
||||
|
||||
export default {
|
||||
name: 'DeTabls',
|
||||
components: { TabUseList, ViewSelect, DataeaseTabs },
|
||||
name: 'DeTabs',
|
||||
components: { Preview, DeCanvasTab, TabUseList, ViewSelect, DataeaseTabs },
|
||||
props: {
|
||||
element: {
|
||||
type: Object,
|
||||
@ -236,9 +260,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
activeTabName: null,
|
||||
|
||||
tabIndex: 1,
|
||||
dialogVisible: false,
|
||||
textarea: '',
|
||||
@ -250,6 +272,9 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
moveActive() {
|
||||
return this.tabMoveInActiveId && this.tabMoveInActiveId === this.element.id
|
||||
},
|
||||
tabH() {
|
||||
return this.h - 50
|
||||
},
|
||||
@ -263,12 +288,12 @@ export default {
|
||||
const map = buildFilterMap(this.componentData)
|
||||
return map
|
||||
},
|
||||
|
||||
...mapState([
|
||||
'componentData',
|
||||
'curComponent',
|
||||
'mobileLayoutStatus',
|
||||
'canvasStyleData'
|
||||
'canvasStyleData',
|
||||
'tabMoveInActiveId'
|
||||
]),
|
||||
fontColor() {
|
||||
return this.element && this.element.style && this.element.style.headFontColor || 'none'
|
||||
@ -295,6 +320,7 @@ export default {
|
||||
watch: {
|
||||
activeTabName: {
|
||||
handler(newVal, oldVla) {
|
||||
this.$store.commit('setTabActiveTabNameMap', { tabId: this.element.id, activeTabName: this.activeTabName })
|
||||
const _this = this
|
||||
_this.$nextTick(() => {
|
||||
try {
|
||||
@ -313,7 +339,7 @@ export default {
|
||||
activeTabInner = item.content
|
||||
}
|
||||
})
|
||||
if (newVal && activeTabInner) {
|
||||
if (newVal && activeTabInner && activeTabInner.type === 'view') {
|
||||
this.$store.commit('setCurActiveTabInner', activeTabInner)
|
||||
this.$store.dispatch('chart/setViewId', activeTabInner.propValue.viewId)
|
||||
} else {
|
||||
@ -335,12 +361,17 @@ export default {
|
||||
created() {
|
||||
bus.$on('add-new-tab', this.addNewTab)
|
||||
this.activeTabName = this.element.options.tabList[0].name
|
||||
this.$store.commit('setTabActiveTabNameMap', { tabId: this.element.id, activeTabName: this.activeTabName })
|
||||
this.setContentThemeStyle()
|
||||
},
|
||||
beforeDestroy() {
|
||||
bus.$off('add-new-tab', this.addNewTab)
|
||||
},
|
||||
methods: {
|
||||
tabCanvasComponentData(tabName) {
|
||||
const result = getNowCanvasComponentData(this.element.id + '-' + tabName)
|
||||
return result
|
||||
},
|
||||
setContentThemeStyle() {
|
||||
this.element.options.tabList.forEach(tab => {
|
||||
if (tab.content && tab.content.type === 'view') {
|
||||
@ -429,7 +460,9 @@ export default {
|
||||
component.propValue = propValue
|
||||
component.filters = []
|
||||
component.linkageFilters = []
|
||||
if (this.themeStyle) { component.commonBackground = JSON.parse(JSON.stringify(this.themeStyle)) }
|
||||
if (this.themeStyle) {
|
||||
component.commonBackground = JSON.parse(JSON.stringify(this.themeStyle))
|
||||
}
|
||||
}
|
||||
})
|
||||
component.id = newComponentId
|
||||
@ -494,8 +527,10 @@ export default {
|
||||
const tab = {
|
||||
title: 'NewTab',
|
||||
name: curName,
|
||||
content: null
|
||||
content: { type: 'canvas' }
|
||||
}
|
||||
//的Tab都是画布
|
||||
|
||||
this.element.options.tabList.push(tab)
|
||||
|
||||
this.styleChange()
|
||||
@ -523,18 +558,27 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.de-tabs-div {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.de-tabs-div {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.de-tabs-height {
|
||||
height: 100%;
|
||||
}
|
||||
.de-tabs-height {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.de-tab-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.de-tab-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tab_canvas {
|
||||
height: calc(100% - 5px);
|
||||
border: 2px dotted transparent;
|
||||
}
|
||||
|
||||
.canvas_move_in {
|
||||
border-color: blueviolet;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -63,6 +63,7 @@ const data = {
|
||||
// 当前点击组件
|
||||
curComponent: null,
|
||||
curCanvasScale: null,
|
||||
curCanvasScaleMap: {},
|
||||
curComponentIndex: null,
|
||||
// 预览仪表板缩放信息
|
||||
previewCanvasScale: {
|
||||
@ -95,6 +96,10 @@ const data = {
|
||||
mobileLayoutStatus: false,
|
||||
// 公共链接状态(当前是否是公共链接打开)
|
||||
publicLinkStatus: false,
|
||||
pcTabMatrixCount: {
|
||||
x: 36,
|
||||
y: 36
|
||||
},
|
||||
pcMatrixCount: {
|
||||
x: 36,
|
||||
y: 18
|
||||
@ -134,7 +139,20 @@ const data = {
|
||||
customAttr: {}
|
||||
},
|
||||
allViewRender: [],
|
||||
isInEditor: false // 是否在编辑器中，用于判断复制、粘贴组件时是否生效，如果在编辑器外，则无视这些操作
|
||||
isInEditor: false, // 是否在编辑器中，用于判断复制、粘贴组件时是否生效，如果在编辑器外，则无视这些操作
|
||||
tabCollisionActiveId: null, // 当前在碰撞的Tab组件ID
|
||||
tabMoveInActiveId: null, // 当前在移入的Tab ID
|
||||
tabMoveOutActiveId: null, // 当前在移出的Tab ID
|
||||
tabMoveOutComponentId: null, // 当前在移出Tab de组件ID
|
||||
tabActiveTabNameMap: {}, // 编辑器中 tab组件中的活动tab页,
|
||||
// 鼠标处于drag状态的坐标点
|
||||
mousePointShadowMap: {
|
||||
mouseX: 0,
|
||||
mouseY: 0,
|
||||
width: 0,
|
||||
height: 0
|
||||
}
|
||||
|
||||
},
|
||||
mutations: {
|
||||
...animation.mutations,
|
||||
@ -146,6 +164,10 @@ const data = {
|
||||
...snapshot.mutations,
|
||||
...lock.mutations,
|
||||
|
||||
setTabActiveTabNameMap(state, tabActiveInfo){
|
||||
state.tabActiveTabNameMap[tabActiveInfo.tabId] = tabActiveInfo.activeTabName
|
||||
},
|
||||
|
||||
setClickComponentStatus(state, status) {
|
||||
state.isClickComponent = status
|
||||
},
|
||||
@ -186,8 +208,9 @@ const data = {
|
||||
state.curActiveTabInner = curActiveTabInner
|
||||
},
|
||||
|
||||
setCurCanvasScale(state, curCanvasScale) {
|
||||
state.curCanvasScale = curCanvasScale
|
||||
setCurCanvasScale(state, curCanvasScaleSelf) {
|
||||
Vue.set(state.curCanvasScaleMap, curCanvasScaleSelf.canvasId, curCanvasScaleSelf)
|
||||
state.curCanvasScale = curCanvasScaleSelf
|
||||
},
|
||||
setPreviewCanvasScale(state, scale) {
|
||||
if (scale.scaleWidth) {
|
||||
@ -197,14 +220,16 @@ const data = {
|
||||
state.previewCanvasScale.scalePointHeight = scale.scaleHeight
|
||||
}
|
||||
},
|
||||
setShapeStyle({ curComponent, canvasStyleData, curCanvasScale }, { top, left, width, height, rotate }) {
|
||||
setShapeStyle({ curComponent, canvasStyleData, curCanvasScaleMap }, { top, left, width, height, rotate }) {
|
||||
const curCanvasScaleSelf = curCanvasScaleMap[curComponent.canvasId]
|
||||
if (curComponent) {
|
||||
if (top || top === 0) curComponent.style.top = (top / curCanvasScale.scalePointHeight) + 0.0000001
|
||||
if (left || left === 0) curComponent.style.left = (left / curCanvasScale.scalePointWidth) + 0.0000001
|
||||
if (width || width === 0) curComponent.style.width = (width / curCanvasScale.scalePointWidth + 0.0000001)
|
||||
if (height || height === 0) curComponent.style.height = (height / curCanvasScale.scalePointHeight) + 0.0000001
|
||||
if (top || top === 0) curComponent.style.top = (top / curCanvasScaleSelf.scalePointHeight) + 0.0000001
|
||||
if (left || left === 0) curComponent.style.left = (left / curCanvasScaleSelf.scalePointWidth) + 0.0000001
|
||||
if (width || width === 0) curComponent.style.width = (width / curCanvasScaleSelf.scalePointWidth + 0.0000001)
|
||||
if (height || height === 0) curComponent.style.height = (height / curCanvasScaleSelf.scalePointHeight) + 0.0000001
|
||||
if (rotate || rotate === 0) curComponent.style.rotate = rotate
|
||||
}
|
||||
// console.log("setShapeStyle==="+curComponent.style.width)
|
||||
},
|
||||
|
||||
setShapeSingleStyle({ curComponent }, { key, value }) {
|
||||
@ -715,6 +740,31 @@ const data = {
|
||||
item.needAdaptor = false
|
||||
}
|
||||
})
|
||||
},
|
||||
setTabMoveInActiveId(state, tabId) {
|
||||
state.tabMoveInActiveId = tabId
|
||||
},
|
||||
setTabCollisionActiveId(state, tabId) {
|
||||
state.tabCollisionActiveId = tabId
|
||||
},
|
||||
setTabMoveOutActiveId(state, tabId) {
|
||||
state.tabMoveOutActiveId = tabId
|
||||
},
|
||||
setTabMoveOutComponentId(state, componentId) {
|
||||
state.tabMoveOutComponentId = componentId
|
||||
},
|
||||
clearTabMoveInfo(state){
|
||||
state.tabMoveInActiveId = null
|
||||
state.tabCollisionActiveId = null
|
||||
state.tabMoveOutActiveId = null
|
||||
state.tabMoveOutComponentId = null
|
||||
},
|
||||
setMousePointShadowMap(state,mousePoint){
|
||||
state.mousePointShadowMap.mouseX = mousePoint.mouseX
|
||||
state.mousePointShadowMap.mouseY = mousePoint.mouseY
|
||||
state.mousePointShadowMap.width = mousePoint.width
|
||||
state.mousePointShadowMap.height = mousePoint.height
|
||||
// console.log("mousePointMap:"+JSON.stringify(state.mousePointMap))
|
||||
}
|
||||
},
|
||||
modules: {
|
||||
|
||||
@ -120,6 +120,7 @@ export default {
|
||||
type: 'assist',
|
||||
id: ev.target.dataset.id
|
||||
}
|
||||
this.$store.commit('clearTabMoveInfo')
|
||||
ev.dataTransfer.setData('componentInfo', JSON.stringify(dataTrans))
|
||||
eventBus.$emit('startMoveIn')
|
||||
},
|
||||
@ -183,6 +184,8 @@ export default {
|
||||
component.auxiliaryMatrix = false
|
||||
}
|
||||
component.moveStatus = 'start'
|
||||
component['canvasId'] = 'canvas-main'
|
||||
component['canvasPid'] = '0'
|
||||
return component
|
||||
},
|
||||
handleDragEnd(ev) {
|
||||
|
||||
@ -408,6 +408,7 @@ import { imgUrlTrans } from '@/components/canvas/utils/utils'
|
||||
|
||||
export default {
|
||||
components: { codemirror, draggable },
|
||||
name: 'LinkJumpSet',
|
||||
props: {
|
||||
viewId: {
|
||||
type: String,
|
||||
|
||||
@ -161,32 +161,22 @@
|
||||
:modal-append-to-body="true"
|
||||
>
|
||||
<div style="width: 295px">
|
||||
<filter-group v-show=" show &&showIndex===1" />
|
||||
<subject-setting v-show=" show &&showIndex===2" />
|
||||
<assist-component v-show=" show &&showIndex===3" />
|
||||
<filter-group :canvas-id="canvasId" v-show=" show &&showIndex===1"/>
|
||||
<subject-setting v-show=" show &&showIndex===2"/>
|
||||
<assist-component v-show=" show &&showIndex===3"/>
|
||||
</div>
|
||||
</el-drawer>
|
||||
<!--PC端画布区域-->
|
||||
<div
|
||||
v-if="!previewVisible&&!mobileLayoutStatus"
|
||||
id="canvasInfo"
|
||||
class="this_canvas"
|
||||
:style="customCanvasStyle"
|
||||
@drop="handleDrop"
|
||||
@dragover="handleDragOver"
|
||||
@mousedown="handleMouseDown"
|
||||
@mouseup="deselectCurComponent"
|
||||
@scroll="canvasScroll"
|
||||
<de-canvas v-if="!previewVisible&&!mobileLayoutStatus"
|
||||
class="canvas_main_content"
|
||||
ref="canvasMainRef"
|
||||
:canvas-style-data="canvasStyleData"
|
||||
:component-data="mainCanvasComponentData"
|
||||
:canvas-id="canvasId"
|
||||
:canvas-pid="'0'"
|
||||
>
|
||||
<!-- 仪表板联动清除按钮-->
|
||||
<canvas-opt-bar />
|
||||
<Editor
|
||||
ref="canvasEditor"
|
||||
:matrix-count="pcMatrixCountBase"
|
||||
:out-style="outStyle"
|
||||
:scroll-top="scrollTop"
|
||||
/>
|
||||
</div>
|
||||
<canvas-opt-bar slot="optBar"/>
|
||||
</de-canvas>
|
||||
<!--移动端画布区域 保持宽高比2.5-->
|
||||
<el-row
|
||||
v-if="mobileLayoutStatus"
|
||||
@ -200,13 +190,8 @@
|
||||
v-proportion="2.1"
|
||||
:style="customCanvasMobileStyle"
|
||||
class="this_mobile_canvas"
|
||||
@drop="handleDrop"
|
||||
@dragover="handleDragOver"
|
||||
@mousedown="handleMouseDown"
|
||||
@mouseup="deselectCurComponent"
|
||||
@scroll="canvasScroll"
|
||||
>
|
||||
<el-row class="this_mobile_canvas_top" />
|
||||
<el-row class="this_mobile_canvas_top"/>
|
||||
<el-row class="this_mobile_canvas_inner_top">
|
||||
{{ panelInfo.name }}
|
||||
</el-row>
|
||||
@ -215,15 +200,16 @@
|
||||
class="this_mobile_canvas_main"
|
||||
:style="mobileCanvasStyle"
|
||||
>
|
||||
<Editor
|
||||
v-if="mobileEditorShow"
|
||||
id="editorMobile"
|
||||
ref="editorMobile"
|
||||
:matrix-count="mobileMatrixCount"
|
||||
:out-style="outStyle"
|
||||
:scroll-top="scrollTop"
|
||||
@canvasDragging="canvasDragging"
|
||||
/>
|
||||
<de-canvas v-if="!previewVisible&&mobileLayoutStatus"
|
||||
ref="canvasMainRef"
|
||||
:canvas-style-data="canvasStyleData"
|
||||
:component-data="mainCanvasComponentData"
|
||||
:canvas-id="canvasId"
|
||||
:canvas-pid="'0'"
|
||||
:mobile-layout-status="true"
|
||||
>
|
||||
<canvas-opt-bar slot="optBar"/>
|
||||
</de-canvas>
|
||||
</el-row>
|
||||
<el-row class="this_mobile_canvas_inner_bottom">
|
||||
<el-col :span="12">
|
||||
@ -252,7 +238,7 @@
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="this_mobile_canvas_bottom" />
|
||||
<el-row class="this_mobile_canvas_bottom"/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col
|
||||
@ -260,7 +246,7 @@
|
||||
class="this_mobile_canvas_cell this_mobile_canvas_wait_cell"
|
||||
:style="mobileCanvasStyle"
|
||||
>
|
||||
<component-wait />
|
||||
<component-wait/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</de-main-container>
|
||||
@ -278,7 +264,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div v-if="showBatchViewToolsAside">
|
||||
<chart-style-batch-set />
|
||||
<chart-style-batch-set/>
|
||||
</div>
|
||||
<div v-if="!showViewToolsAside&&!showBatchViewToolsAside">
|
||||
<el-row style="height: 40px">
|
||||
@ -294,7 +280,8 @@
|
||||
</el-row>
|
||||
<el-row>
|
||||
<div class="view-selected-message-class">
|
||||
<span style="font-size: 14px;margin-left: 10px;font-weight: bold;line-height: 20px">{{ $t('panel.select_view') }}</span>
|
||||
<span style="font-size: 14px;margin-left: 10px;font-weight: bold;line-height: 20px"
|
||||
>{{ $t('panel.select_view') }}</span>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
@ -382,13 +369,6 @@
|
||||
@click="e => {e.target.value = '';}"
|
||||
@change="handleFileChange"
|
||||
>
|
||||
|
||||
<!--矩形样式组件-->
|
||||
<TextAttr
|
||||
v-if="showAttr"
|
||||
:scroll-left="scrollLeft"
|
||||
:scroll-top="scrollTop"
|
||||
/>
|
||||
<!--复用ChartGroup组件 不做显示-->
|
||||
<ChartGroup
|
||||
ref="chartGroup"
|
||||
@ -461,7 +441,8 @@
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="21">
|
||||
<span style="font-size: 13px;margin-left: 10px;font-weight: bold;line-height: 20px">{{ $t('panel.panel_cache_use_tips') }}</span>
|
||||
<span style="font-size: 13px;margin-left: 10px;font-weight: bold;line-height: 20px"
|
||||
>{{ $t('panel.panel_cache_use_tips') }}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div
|
||||
@ -471,12 +452,14 @@
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="useCache(false)"
|
||||
>{{ $t('panel.no') }}</el-button>
|
||||
>{{ $t('panel.no') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="useCache(true)"
|
||||
>{{ $t('panel.yes') }}</el-button>
|
||||
>{{ $t('panel.yes') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
@ -492,7 +475,7 @@ import FilterGroup from '../filter'
|
||||
import SubjectSetting from '../SubjectSetting'
|
||||
import bus from '@/utils/bus'
|
||||
import Editor from '@/components/canvas/components/Editor/index'
|
||||
import { deepCopy, imgUrlTrans, matrixBaseChange } from '@/components/canvas/utils/utils'
|
||||
import { deepCopy, getNowCanvasComponentData, imgUrlTrans, matrixBaseChange } from '@/components/canvas/utils/utils'
|
||||
import componentList, {
|
||||
BASE_MOBILE_STYLE,
|
||||
COMMON_BACKGROUND,
|
||||
@ -534,9 +517,14 @@ import Multiplexing from '@/views/panel/ViewSelect/multiplexing'
|
||||
import { listenGlobalKeyDown } from '@/components/canvas/utils/shortcutKey'
|
||||
import { adaptCurThemeCommonStyle } from '@/components/canvas/utils/style'
|
||||
import eventBus from '@/components/canvas/utils/eventBus'
|
||||
import DeEditor from '@/components/canvas/components/Editor/DeEditor'
|
||||
import DeCanvas from '@/components/canvas/DeCanvas'
|
||||
|
||||
export default {
|
||||
name: 'PanelEdit',
|
||||
components: {
|
||||
DeCanvas,
|
||||
DeEditor,
|
||||
Multiplexing,
|
||||
ChartStyleBatchSet,
|
||||
OuterParamsSet,
|
||||
@ -560,6 +548,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
canvasId: 'canvas-main',
|
||||
panelCacheExist: false,
|
||||
viewData: [],
|
||||
multiplexingShow: false,
|
||||
@ -627,6 +616,9 @@ export default {
|
||||
},
|
||||
|
||||
computed: {
|
||||
mainCanvasComponentData() {
|
||||
return getNowCanvasComponentData(this.canvasId)
|
||||
},
|
||||
// 侧边显示控制
|
||||
chartEditParam() {
|
||||
if (this.curComponent) {
|
||||
@ -736,9 +728,12 @@ export default {
|
||||
multiplexingDisabled() {
|
||||
return Object.keys(this.curMultiplexingComponents) === 0
|
||||
},
|
||||
curCanvasScaleSelf() {
|
||||
return this.curCanvasScaleMap[this.canvasId]
|
||||
},
|
||||
...mapState([
|
||||
'curComponent',
|
||||
'curCanvasScale',
|
||||
'curCanvasScaleMap',
|
||||
'isClickComponent',
|
||||
'canvasStyleData',
|
||||
'curComponentIndex',
|
||||
@ -796,8 +791,8 @@ export default {
|
||||
},
|
||||
beforeDestroy() {
|
||||
bus.$off('component-on-drag', this.componentOnDrag)
|
||||
bus.$off('component-dialog-edit', this.editDialog)
|
||||
bus.$off('button-dialog-edit', this.editButtonDialog)
|
||||
// bus.$off('component-dialog-edit', this.editDialog)
|
||||
// bus.$off('button-dialog-edit', this.editButtonDialog)
|
||||
bus.$off('component-dialog-style', this.componentDialogStyle)
|
||||
bus.$off('previewFullScreenClose', this.previewFullScreenClose)
|
||||
bus.$off('change_panel_right_draw', this.changeRightDrawOpen)
|
||||
@ -819,8 +814,8 @@ export default {
|
||||
},
|
||||
initEvents() {
|
||||
bus.$on('component-on-drag', this.componentOnDrag)
|
||||
bus.$on('component-dialog-edit', this.editDialog)
|
||||
bus.$on('button-dialog-edit', this.editButtonDialog)
|
||||
// bus.$on('component-dialog-edit', this.editDialog)
|
||||
// bus.$on('button-dialog-edit', this.editButtonDialog)
|
||||
bus.$on('component-dialog-style', this.componentDialogStyle)
|
||||
bus.$on('previewFullScreenClose', this.previewFullScreenClose)
|
||||
bus.$on('change_panel_right_draw', this.changeRightDrawOpen)
|
||||
@ -844,7 +839,9 @@ export default {
|
||||
const filterIds = com.options.attrs.filterIds
|
||||
let len = filterIds.length
|
||||
while (len--) {
|
||||
if (param.componentId === filterIds[len]) { filterIds.splice(len, 1) }
|
||||
if (param.componentId === filterIds[len]) {
|
||||
filterIds.splice(len, 1)
|
||||
}
|
||||
}
|
||||
com.options.attrs.filterIds = filterIds
|
||||
}
|
||||
@ -864,9 +861,7 @@ export default {
|
||||
}
|
||||
this.rightDrawOpen = param
|
||||
if (this.rightDrawOpen) {
|
||||
setTimeout(() => {
|
||||
this.outStyle.width = this.outStyle.width + 0.000001
|
||||
}, 0)
|
||||
this.$refs['canvasMainRef'].restore()
|
||||
}
|
||||
},
|
||||
init(panelId) {
|
||||
@ -940,11 +935,11 @@ export default {
|
||||
showPanel(type) {
|
||||
if (this.showIndex === -1 || this.showIndex === type) {
|
||||
this.$nextTick(() => {
|
||||
if (this.show) {
|
||||
this.showIndex === -1
|
||||
if (this.show) {
|
||||
this.showIndex === -1
|
||||
}
|
||||
this.show = !this.show
|
||||
}
|
||||
this.show = !this.show
|
||||
}
|
||||
)
|
||||
}
|
||||
this.showIndex = type
|
||||
@ -1014,15 +1009,17 @@ export default {
|
||||
} else {
|
||||
this.currentWidget = ApplicationContext.getService(componentInfo.id)
|
||||
this.currentFilterCom = this.currentWidget.getDrawPanel()
|
||||
this.currentFilterCom['canvasId'] = 'canvas-main'
|
||||
this.currentFilterCom['canvasPid'] = '0'
|
||||
if (this.canvasStyleData.auxiliaryMatrix) {
|
||||
this.currentFilterCom.x = this.dropComponentInfo.x
|
||||
this.currentFilterCom.y = this.dropComponentInfo.y
|
||||
this.currentFilterCom.sizex = this.dropComponentInfo.sizex
|
||||
this.currentFilterCom.sizey = this.dropComponentInfo.sizey
|
||||
this.currentFilterCom.style.left = (this.dragComponentInfo.x - 1) * this.curCanvasScale.matrixStyleOriginWidth
|
||||
this.currentFilterCom.style.top = (this.dragComponentInfo.y - 1) * this.curCanvasScale.matrixStyleOriginHeight
|
||||
this.currentFilterCom.style.width = this.dragComponentInfo.sizex * this.curCanvasScale.matrixStyleOriginWidth
|
||||
this.currentFilterCom.style.height = this.dragComponentInfo.sizey * this.curCanvasScale.matrixStyleOriginHeight
|
||||
this.currentFilterCom.style.left = (this.dragComponentInfo.x - 1) * this.curCanvasScaleSelf.matrixStyleOriginWidth
|
||||
this.currentFilterCom.style.top = (this.dragComponentInfo.y - 1) * this.curCanvasScaleSelf.matrixStyleOriginHeight
|
||||
this.currentFilterCom.style.width = this.dragComponentInfo.sizex * this.curCanvasScaleSelf.matrixStyleOriginWidth
|
||||
this.currentFilterCom.style.height = this.dragComponentInfo.sizey * this.curCanvasScaleSelf.matrixStyleOriginHeight
|
||||
} else {
|
||||
this.currentFilterCom.style.left = this.dragComponentInfo.shadowStyle.x
|
||||
this.currentFilterCom.style.top = this.dragComponentInfo.shadowStyle.y
|
||||
@ -1053,10 +1050,10 @@ export default {
|
||||
component.sizex = this.dropComponentInfo.sizex
|
||||
component.sizey = this.dropComponentInfo.sizey
|
||||
|
||||
component.style.left = (this.dragComponentInfo.x - 1) * this.curCanvasScale.matrixStyleOriginWidth
|
||||
component.style.top = (this.dragComponentInfo.y - 1) * this.curCanvasScale.matrixStyleOriginHeight
|
||||
component.style.width = this.dragComponentInfo.sizex * this.curCanvasScale.matrixStyleOriginWidth
|
||||
component.style.height = this.dragComponentInfo.sizey * this.curCanvasScale.matrixStyleOriginHeight
|
||||
component.style.left = (this.dragComponentInfo.x - 1) * this.curCanvasScaleSelf.matrixStyleOriginWidth
|
||||
component.style.top = (this.dragComponentInfo.y - 1) * this.curCanvasScaleSelf.matrixStyleOriginHeight
|
||||
component.style.width = this.dragComponentInfo.sizex * this.curCanvasScaleSelf.matrixStyleOriginWidth
|
||||
component.style.height = this.dragComponentInfo.sizey * this.curCanvasScaleSelf.matrixStyleOriginHeight
|
||||
} else {
|
||||
component.style.top = this.dropComponentInfo.shadowStyle.y
|
||||
component.style.left = this.dropComponentInfo.shadowStyle.x
|
||||
@ -1065,6 +1062,8 @@ export default {
|
||||
}
|
||||
|
||||
component.id = newComponentId
|
||||
component['canvasId'] = 'canvas-main'
|
||||
component['canvasPid'] = '0'
|
||||
// 新拖入的组件矩阵状态 和仪表板当前的矩阵状态 保持一致
|
||||
component.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix
|
||||
// 统一设置背景信息
|
||||
@ -1250,14 +1249,14 @@ export default {
|
||||
},
|
||||
getPositionX(x) {
|
||||
if (this.canvasStyleData.selfAdaption) {
|
||||
return x * 100 / this.curCanvasScale.scaleWidth
|
||||
return x * 100 / this.curCanvasScaleSelf.scaleWidth
|
||||
} else {
|
||||
return x
|
||||
}
|
||||
},
|
||||
getPositionY(y) {
|
||||
if (this.canvasStyleData.selfAdaption) {
|
||||
return y * 100 / this.curCanvasScale.scaleHeight
|
||||
return y * 100 / this.curCanvasScaleSelf.scaleHeight
|
||||
} else {
|
||||
return y
|
||||
}
|
||||
@ -1288,10 +1287,10 @@ export default {
|
||||
component.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix
|
||||
// position = absolution 或导致有偏移 这里中和一下偏移量
|
||||
if (this.canvasStyleData.auxiliaryMatrix) {
|
||||
component.style.left = (component.x - 1) * this.curCanvasScale.matrixStyleOriginWidth
|
||||
component.style.top = (component.y - 1) * this.curCanvasScale.matrixStyleOriginHeight
|
||||
component.style.width = component.sizex * this.curCanvasScale.matrixStyleOriginWidth
|
||||
component.style.height = component.sizey * this.curCanvasScale.matrixStyleOriginHeight
|
||||
component.style.left = (component.x - 1) * this.curCanvasScaleSelf.matrixStyleOriginWidth
|
||||
component.style.top = (component.y - 1) * this.curCanvasScaleSelf.matrixStyleOriginHeight
|
||||
component.style.width = component.sizex * this.curCanvasScaleSelf.matrixStyleOriginWidth
|
||||
component.style.height = component.sizey * this.curCanvasScaleSelf.matrixStyleOriginHeight
|
||||
} else {
|
||||
component.style.left = 0
|
||||
component.style.top = 0
|
||||
@ -1359,7 +1358,6 @@ export default {
|
||||
const touchOffset = 100
|
||||
const canvasInfoMobile = document.getElementById('canvasInfoMobile')
|
||||
// 获取子盒子（高度肯定比父盒子大）
|
||||
// const editorMobile = document.getElementById('editorMobile')
|
||||
// 画布区顶部到浏览器顶部距离
|
||||
const canvasTop = canvasInfoMobile.offsetTop + 75
|
||||
// 画布区有高度
|
||||
@ -1394,266 +1392,271 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ms-aside-container {
|
||||
height: calc(100vh - 56px);
|
||||
max-width: 60px;
|
||||
border: none;
|
||||
width: 60px;
|
||||
}
|
||||
.ms-aside-container {
|
||||
height: calc(100vh - 56px);
|
||||
max-width: 60px;
|
||||
border: none;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.ms-main-container {
|
||||
height: calc(100vh - 56px);
|
||||
}
|
||||
.ms-main-container {
|
||||
height: calc(100vh - 56px);
|
||||
}
|
||||
|
||||
.de-header {
|
||||
height: 56px !important;
|
||||
padding: 0px!important;
|
||||
border-bottom: 1px solid #E6E6E6;
|
||||
background-color: var(--SiderBG, white);
|
||||
}
|
||||
.de-header {
|
||||
height: 56px !important;
|
||||
padding: 0px !important;
|
||||
border-bottom: 1px solid #E6E6E6;
|
||||
background-color: var(--SiderBG, white);
|
||||
}
|
||||
|
||||
.blackTheme .de-header {
|
||||
background-color: var(--SiderBG, white) !important;
|
||||
color: var(--TextActive);
|
||||
}
|
||||
.blackTheme .de-header {
|
||||
background-color: var(--SiderBG, white) !important;
|
||||
color: var(--TextActive);
|
||||
}
|
||||
|
||||
.showLeftPanel {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.showLeftPanel {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.leftPanel-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
|
||||
background: rgba(0, 0, 0, .2);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.leftPanel {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
height: calc(100vh - 56px);
|
||||
position: fixed;
|
||||
top: 91px;
|
||||
left: 60px;
|
||||
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
|
||||
transition: all .25s cubic-bezier(.7, .3, .1, 1);
|
||||
transform: translate(100%);
|
||||
background: var(--SiderBG, #fff);
|
||||
z-index: 1003;
|
||||
}
|
||||
|
||||
.show {
|
||||
transition: all .3s cubic-bezier(.7, .3, .1, 1);
|
||||
|
||||
.leftPanel-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
|
||||
background: rgba(0, 0, 0, .2);
|
||||
z-index: -1;
|
||||
z-index: 1002;
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.leftPanel {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
height: calc(100vh - 56px);
|
||||
position: fixed;
|
||||
top: 91px;
|
||||
left: 60px;
|
||||
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
|
||||
transition: all .25s cubic-bezier(.7, .3, .1, 1);
|
||||
transform: translate(100%);
|
||||
background: var(--SiderBG, #fff);
|
||||
z-index: 1003;
|
||||
transform: translate(0);
|
||||
}
|
||||
}
|
||||
|
||||
.show {
|
||||
transition: all .3s cubic-bezier(.7, .3, .1, 1);
|
||||
.mobile_canvas_main {
|
||||
width: 80%;
|
||||
height: 90%;
|
||||
margin-left: 10%;
|
||||
margin-top: 3%;
|
||||
}
|
||||
|
||||
.leftPanel-background {
|
||||
z-index: 1002;
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.this_mobile_canvas {
|
||||
border-radius: 30px;
|
||||
min-width: 300px;
|
||||
max-width: 350px;
|
||||
min-height: 600px;
|
||||
max-height: 700px;
|
||||
overflow: hidden;
|
||||
background-color: #000000;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
|
||||
.leftPanel {
|
||||
transform: translate(0);
|
||||
.this_mobile_canvas_inner_top {
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
background-color: #f7f8fa;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.this_mobile_canvas_top {
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.this_mobile_canvas_inner_bottom {
|
||||
background-color: #f7f8fa;
|
||||
line-height: 30px;
|
||||
vertical-align: middle;
|
||||
color: gray;
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.this_mobile_canvas_bottom {
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.this_mobile_canvas_main {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
height: calc(100% - 120px);;
|
||||
background-color: #d7d9e3;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
|
||||
.this_mobile_canvas_cell {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.this_mobile_canvas_wait_cell {
|
||||
background-size: 100% 100% !important;
|
||||
border: 2px solid #9ea6b2
|
||||
}
|
||||
|
||||
.canvas_main_content {
|
||||
height: calc(100vh - 56px);
|
||||
}
|
||||
|
||||
.this_canvas {
|
||||
width: 100%;
|
||||
height: calc(100vh - 56px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
|
||||
.el-main {
|
||||
height: calc(100vh - 56px);
|
||||
padding: 0 !important;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.el-main ::v-deep .el-drawer__wrapper {
|
||||
width: 310px !important;
|
||||
}
|
||||
|
||||
.el-main ::v-deep .el-drawer__body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.button-show {
|
||||
background-color: var(--ContentBG, #ebf2fe) !important;
|
||||
}
|
||||
|
||||
.button-closed {
|
||||
background-color: var(--SiderBG, #ffffff) !important;
|
||||
}
|
||||
|
||||
.style-aside {
|
||||
width: 250px;
|
||||
max-width: 250px !important;
|
||||
border: 1px solid var(--TableBorderColor, #E6E6E6);
|
||||
padding: 10px;
|
||||
transition: all 0.3s;
|
||||
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
font-size: 14px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.show {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.style-edit-dialog {
|
||||
width: 300px !important;
|
||||
height: 400px !important;
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 10px 20px !important;
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
top: 15px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile_canvas_main {
|
||||
width: 80%;
|
||||
height: 90%;
|
||||
margin-left: 10%;
|
||||
margin-top: 3%;
|
||||
.el-dialog__body {
|
||||
padding: 1px 15px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.this_mobile_canvas {
|
||||
border-radius: 30px;
|
||||
min-width: 300px;
|
||||
max-width: 350px;
|
||||
min-height: 600px;
|
||||
max-height: 700px;
|
||||
overflow: hidden;
|
||||
background-color: #000000;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
.style-hidden {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.this_mobile_canvas_inner_top {
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
background-color: #f7f8fa;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
.button-text {
|
||||
color: var(--TextActive);
|
||||
}
|
||||
|
||||
.this_mobile_canvas_top {
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
.mobile-canvas {
|
||||
width: 300px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.this_mobile_canvas_inner_bottom {
|
||||
background-color: #f7f8fa;
|
||||
line-height: 30px;
|
||||
vertical-align: middle;
|
||||
color: gray;
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 2px !important;
|
||||
height: 2px !important;
|
||||
}
|
||||
|
||||
.this_mobile_canvas_bottom {
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
.tools-window-main {
|
||||
width: 350px;
|
||||
background-color: #FFFFFF;
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
.this_mobile_canvas_main {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
height: calc(100% - 120px);;
|
||||
background-color: #d7d9e3;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
.tools-window-tabs {
|
||||
height: calc(100vh - 100px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.this_mobile_canvas_cell {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
::v-deep .el-tabs__item {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.this_mobile_canvas_wait_cell {
|
||||
background-size: 100% 100% !important;
|
||||
border: 2px solid #9ea6b2
|
||||
}
|
||||
.view-selected-message-class {
|
||||
font-size: 12px;
|
||||
color: #9ea6b2;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
.this_canvas {
|
||||
width: 100%;
|
||||
height: calc(100vh - 56px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
.dialog-css ::v-deep .el-dialog__title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.el-main {
|
||||
height: calc(100vh - 56px);
|
||||
padding: 0 !important;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
.dialog-css ::v-deep .el-dialog__header {
|
||||
padding: 20px 20px 0;
|
||||
}
|
||||
|
||||
.el-main ::v-deep .el-drawer__wrapper {
|
||||
width: 310px !important;
|
||||
}
|
||||
|
||||
.el-main ::v-deep .el-drawer__body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.button-show {
|
||||
background-color: var(--ContentBG, #ebf2fe) !important;
|
||||
}
|
||||
|
||||
.button-closed {
|
||||
background-color: var(--SiderBG, #ffffff) !important;
|
||||
}
|
||||
|
||||
.style-aside {
|
||||
width: 250px;
|
||||
max-width: 250px !important;
|
||||
border: 1px solid var(--TableBorderColor, #E6E6E6);
|
||||
padding: 10px;
|
||||
transition: all 0.3s;
|
||||
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
font-size: 14px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.show {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.style-edit-dialog {
|
||||
width: 300px !important;
|
||||
height: 400px !important;
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 10px 20px !important;
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
top: 15px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 1px 15px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.style-hidden {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.button-text {
|
||||
color: var(--TextActive);
|
||||
}
|
||||
|
||||
.mobile-canvas {
|
||||
width: 300px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 2px !important;
|
||||
height: 2px !important;
|
||||
}
|
||||
|
||||
.tools-window-main {
|
||||
width: 350px;
|
||||
background-color: #FFFFFF;
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
.tools-window-tabs {
|
||||
height: calc(100vh - 100px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__item {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.view-selected-message-class {
|
||||
font-size: 12px;
|
||||
color: #9ea6b2;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
.dialog-css ::v-deep .el-dialog__title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dialog-css ::v-deep .el-dialog__header {
|
||||
padding: 20px 20px 0;
|
||||
}
|
||||
|
||||
.dialog-css ::v-deep .el-dialog__body {
|
||||
padding: 10px 20px 20px;
|
||||
}
|
||||
.dialog-css ::v-deep .el-dialog__body {
|
||||
padding: 10px 20px 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -40,6 +40,12 @@ import eventBus from '@/components/canvas/utils/eventBus'
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
name: 'FilterGroup',
|
||||
props: {
|
||||
canvasId: {
|
||||
type: String,
|
||||
require: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
panelInfo: this.$store.state.panel.panelInfo,
|
||||
@ -73,9 +79,12 @@ export default {
|
||||
computed: {
|
||||
...mapState([
|
||||
'canvasStyleData',
|
||||
'curCanvasScale',
|
||||
'curCanvasScaleMap',
|
||||
'componentData'
|
||||
]),
|
||||
curCanvasScaleSelf(){
|
||||
return this.curCanvasScaleMap[this.canvasId]
|
||||
},
|
||||
searchButtonExist() {
|
||||
return this.componentData && this.componentData.some(component => component.type === 'custom-button' && component.serviceName === 'buttonSureWidget')
|
||||
},
|
||||
@ -119,10 +128,12 @@ export default {
|
||||
// 设置矩阵标记点
|
||||
dragComponentInfo.x = 1
|
||||
dragComponentInfo.y = 1
|
||||
dragComponentInfo.sizex = Math.round(dragComponentInfo.style.width / this.curCanvasScale.matrixStyleOriginWidth)
|
||||
dragComponentInfo.sizey = Math.round(dragComponentInfo.style.height / this.curCanvasScale.matrixStyleOriginHeight)
|
||||
dragComponentInfo.sizex = Math.round(dragComponentInfo.style.width / this.curCanvasScaleSelf.matrixStyleOriginWidth)
|
||||
dragComponentInfo.sizey = Math.round(dragComponentInfo.style.height / this.curCanvasScaleSelf.matrixStyleOriginHeight)
|
||||
dragComponentInfo.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix
|
||||
dragComponentInfo.moveStatus = 'start'
|
||||
dragComponentInfo['canvasId'] = 'canvas-main'
|
||||
dragComponentInfo['canvasPid'] = '0'
|
||||
this.$store.commit('setDragComponentInfo', dragComponentInfo)
|
||||
ev.dataTransfer.effectAllowed = 'copy'
|
||||
const dataTrans = {
|
||||
|
||||
@ -205,7 +205,7 @@
|
||||
>
|
||||
<Preview
|
||||
v-if="showMainFlag"
|
||||
:component-data="componentData"
|
||||
:component-data="mainCanvasComponentData"
|
||||
:canvas-style-data="canvasStyleData"
|
||||
:active-tab="activeTab"
|
||||
:in-screen="!fullscreen"
|
||||
@ -289,7 +289,7 @@ import { queryAll } from '@/api/panel/pdfTemplate'
|
||||
import ShareHead from '@/views/panel/GrantAuth/ShareHead'
|
||||
import { export2AppCheck, initPanelData, updatePanelStatus } from '@/api/panel/panel'
|
||||
import { proxyInitPanelData } from '@/api/panel/shareProxy'
|
||||
import { dataURLToBlob } from '@/components/canvas/utils/utils'
|
||||
import { dataURLToBlob, getNowCanvasComponentData } from '@/components/canvas/utils/utils'
|
||||
import { findResourceAsBase64 } from '@/api/staticResource/staticResource'
|
||||
import PanelDetailInfo from '@/views/panel/list/common/PanelDetailInfo'
|
||||
|
||||
@ -304,6 +304,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
canvasId: 'canvas-main',
|
||||
showMain: true,
|
||||
pdfTemplateSelectedIndex: 0,
|
||||
pdfTemplateContent: '',
|
||||
@ -322,6 +323,9 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
mainCanvasComponentData() {
|
||||
return getNowCanvasComponentData(this.canvasId)
|
||||
},
|
||||
imageWrapperStyle() {
|
||||
if (this.exporting) {
|
||||
return {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user