dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/dev' into dev

Browse Source
This commit is contained in:
junjun 2022-10-24 14:14:23 +08:00
commit 1a177858c5
36 changed files with 4645 additions and 1327 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
frontend/src/components/DeDrag/MoveInShadow.vue
View File

@ -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>

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

@ -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
View 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>

39
frontend/src/components/DeDrag/shadow.vue
View File

@ -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
View 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>

22
frontend/src/components/canvas/components/Editor/DateFormat.vue
View File

@ -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
View File

File diff suppressed because it is too large Load Diff

83
frontend/src/components/canvas/components/Editor/EditBar.vue
View File

@ -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) {

20
frontend/src/components/canvas/components/Editor/PGrid.vue
View File

@ -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>

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

@ -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)
}
}
}

39
frontend/src/components/canvas/components/Editor/PreviewMobile.vue
View File

@ -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 })

237
frontend/src/components/canvas/components/FilterTextAttr.vue
View File

@ -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>

284
frontend/src/components/canvas/components/RectangleAttr.vue
View File

@ -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>

17
frontend/src/components/canvas/components/TextAttr.vue
View File

@ -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')

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

@ -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) {

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

@ -394,7 +394,7 @@ const list = [
tabList: [{
title: 'Tab1',
name: '1',
content: null
content: { type: 'canvas' }
}]
},
x: 1,

10
frontend/src/components/canvas/store/copy.js
View File

@ -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

10
frontend/src/components/canvas/utils/utils.js
View File

@ -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)
}

3
frontend/src/components/dataease/DeOutWidget.vue
View File

@ -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

84
frontend/src/components/widget/DeWidget/DeTabs.vue
View File

@ -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>

2
frontend/src/lang/en.js
View File

@ -1437,7 +1437,7 @@ export default {
field_rename: 'Rename Field',
params_work: 'Effective only when editing SQL',
sql_variable_limit_1: '1、SQL variables can only be used in where conditions',
sql_variable_limit_2: '2、Example：select * from table_name where column_name1=${param_name1} and column_name2 in ${param_name2}',
sql_variable_limit_2: "2、Example：select * from table_name where column_name1='${parm_name1}' and column_name2 in '${parm_name2}'",
select_year: 'Select Year',
select_month: 'Select Month',
select_date: 'Select Date',

2
frontend/src/lang/tw.js
View File

@ -1437,7 +1437,7 @@ export default {
field_rename: '字段重命名',
params_work: '僅在編輯 sql 時生效',
sql_variable_limit_1: '1、SQL變數只能在WHERE條件中使用',
sql_variable_limit_2: '2、示例：select * from table_name where column_name1=${param_name1} and column_name2 in ${param_name2}',
sql_variable_limit_2: "2、示例：select * from table_name where column_name1='${parm_name1}' and column_name2 in '${parm_name2}'",
selesql_variable_limit_2ct_year: '選擇年',
select_month: '選擇月',
select_date: '選擇日期',

2
frontend/src/lang/zh.js
View File

@ -1437,7 +1437,7 @@ export default {
params_work: '仅在编辑sql时生效',
select_year: '选择年',
sql_variable_limit_1: '1、SQL 变量只能在 WHERE 条件中使用',
sql_variable_limit_2: '2、示例：select * from table_name where column_name1=${param_name1} and column_name2 in ${param_name2} ',
sql_variable_limit_2: "2、示例：select * from table_name where column_name1='${parm_name1}' and column_name2 in '${parm_name2}'",
select_month: '选择月',
select_date: '选择日期',
select_time: '选择时间',

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

@ -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: {

4
frontend/src/views/dataset/add/AddExcel.vue
View File

@ -374,8 +374,8 @@ export default {
this.sheetObj = data
this.fields = data.fields
this.jsonArray = data.jsonArray
const data = this.jsonArray
this.$refs.plxTable.reloadData(data)
const dataList = this.jsonArray
this.$refs.plxTable.reloadData(dataList)
}
},
handleCommand(type, field) {

2
frontend/src/views/dataset/add/AddSQL.vue
View File

@ -872,7 +872,7 @@ export default {
border-radius: 4px;
background: #e1eaff;
position: relative;
padding: 9px 19px 9px 40px;
padding: 9px 0 9px 40px;
font-family: PingFang SC;
font-size: 14px;
font-weight: 400;

32
frontend/src/views/dataset/common/datasetTree.vue
View File

@ -60,6 +60,16 @@
:class="`ds-icon-${data.modelInnerType}`"
/>
</span>
<span v-if="['db', 'sql'].includes(data.modelInnerType)">
<span
v-if="data.mode === 0"
style="margin-left: 6px"
><i class="el-icon-s-operation" /></span>
<span
v-if="data.mode === 1"
style="margin-left: 6px"
><i class="el-icon-alarm-clock" /></span>
</span>
<span
style="
margin-left: 6px;
@ -247,16 +257,18 @@ export default {
modelInnerTypeArray: this.customType
},
!userCache
).then((res) => {
if (cache) {
localStorage.setItem('dataset-tree', JSON.stringify(res.data))
}
if (!userCache) {
this.treeData = res.data
}
}).finally(() => {
this.loading = false
})
)
.then((res) => {
if (cache) {
localStorage.setItem('dataset-tree', JSON.stringify(res.data))
}
if (!userCache) {
this.treeData = res.data
}
})
.finally(() => {
this.loading = false
})
},
nodeClick(data, node) {
if (data.modelInnerType !== 'group') {

976
frontend/src/views/dataset/data/UpdateRecords.vue Normal file
View File

@ -0,0 +1,976 @@
<template>
<el-col>
<el-row>
<el-button
v-if="hasDataPermission('manage',param.privileges) && enableUpdate"
icon="el-icon-setting"
size="mini"
@click="showConfig"
>
{{ $t('dataset.update_setting') }}
</el-button>
<el-button
icon="el-icon-refresh"
size="mini"
@click="refreshLog"
>
{{ $t('commons.refresh') }}
</el-button>
</el-row>
<el-row style="margin-top: 10px;">
<el-table
size="mini"
:data="taskLogData"
border
:height="height"
style="width: 100%"
>
<el-table-column
prop="name"
:label="$t('dataset.task_name')"
/>
<el-table-column
prop="startTime"
:label="$t('dataset.start_time')"
>
<template slot-scope="scope">
<span>{{ scope.row.startTime | timestampFormatDate }}</span>
</template>
</el-table-column>
<el-table-column
prop="endTime"
:label="$t('dataset.end_time')"
>
<template slot-scope="scope">
<span>{{ scope.row.endTime | timestampFormatDate }}</span>
</template>
</el-table-column>
<el-table-column
prop="status"
:label="$t('dataset.status')"
>
<template slot-scope="scope">
<span
v-if="scope.row.status === 'Completed'"
style="color: green"
>{{ $t('dataset.completed') }}</span>
<span
v-if="scope.row.status === 'Underway'"
class="blue-color"
>
<i class="el-icon-loading" />
{{ $t('dataset.underway') }}
</span>
<span
v-if="scope.row.status === 'Error'"
style="color: red"
>
<el-link
type="danger"
style="font-size: 12px"
@click="showErrorMassage(scope.row.info)"
>{{ $t('dataset.error') }}</el-link>
</span>
</template>
</el-table-column>
</el-table>
<el-row style="margin-top: 10px;text-align: right;">
<el-pagination
:current-page="page.currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="page.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="page.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-row>
</el-row>
<el-dialog
v-dialogDrag
:title="$t('dataset.detail')"
:visible="show_error_massage"
:show-close="false"
width="50%"
class="dialog-css"
>
<span class="err-msg">{{ error_massage }}
</span>
<span
slot="footer"
class="dialog-footer"
>
<el-button
size="mini"
@click="show_error_massage = false"
>{{ $t('dataset.close') }}</el-button>
</span>
</el-dialog>
<el-dialog
v-dialogDrag
:title="table.name+' '+$t('dataset.update_setting')"
:visible="update_setting"
:show-close="false"
width="50%"
class="dialog-css"
>
<el-dialog
v-dialogDrag
:title="update_task_dialog_title"
:visible="update_task"
:show-close="false"
width="50%"
class="dialog-css"
append-to-body
>
<el-col>
<el-form
ref="taskForm"
:form="taskForm"
:model="taskForm"
label-width="100px"
size="mini"
:rules="taskFormRules"
>
<el-form-item
:label="$t('dataset.task_name')"
prop="name"
>
<el-input
v-model="taskForm.name"
size="mini"
style="width: 50%"
:placeholder="$t('dataset.task_name')"
/>
</el-form-item>
<el-form-item
:label="$t('dataset.update_type')"
prop="type"
>
<el-select
v-model="taskForm.type"
size="mini"
>
<el-option
:label="$t('dataset.all_scope')"
value="all_scope"
/>
<el-option
:label="$t('dataset.add_scope')"
value="add_scope"
/>
</el-select>
</el-form-item>
<el-form-item
:label="$t('dataset.execute_rate')"
prop="rate"
>
<el-select
v-model="taskForm.rate"
size="mini"
@change="onRateChange"
>
<el-option
:label="$t('dataset.execute_once')"
value="SIMPLE"
/>
<el-option
:label="$t('dataset.simple_cron')"
value="SIMPLE_CRON"
/>
<el-option
:label="$t('dataset.cron_config')"
value="CRON"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="taskForm.rate === 'CRON'"
label=""
>
<el-popover v-model="cronEdit">
<cron
v-model="taskForm.cron"
@close="cronEdit = false"
/>
<el-input
slot="reference"
v-model="taskForm.cron"
size="mini"
style="width: 50%"
@click="cronEdit = true"
/>
</el-popover>
</el-form-item>
<el-form-item
v-if="taskForm.rate === 'SIMPLE_CRON'"
label=""
>
<el-form :inline="true">
<el-form-item :label="$t('cron.every')">
<el-input
v-model="taskForm.extraData.simple_cron_value"
size="mini"
type="number"
min="1"
@change="onSimpleCronChange()"
/>
</el-form-item>
<el-form-item class="form-item">
<el-select
v-model="taskForm.extraData.simple_cron_type"
filterable
size="mini"
@change="onSimpleCronChange()"
>
<el-option
:label="$t('cron.minute_default')"
value="minute"
/>
<el-option
:label="$t('cron.hour_default')"
value="hour"
/>
<el-option
:label="$t('cron.day_default')"
value="day"
/>
</el-select>
</el-form-item>
<el-form-item
class="form-item"
:label="$t('cron.every_exec')"
/>
</el-form>
</el-form-item>
<el-form-item
v-if="taskForm.rate !== 'SIMPLE'"
:label="$t('dataset.start_time')"
prop="startTime"
>
<el-date-picker
v-model="taskForm.startTime"
type="datetime"
:placeholder="$t('dataset.select_data_time')"
size="mini"
/>
</el-form-item>
<el-form-item
v-if="taskForm.rate !== 'SIMPLE'"
:label="$t('dataset.end_time')"
prop="end"
>
<el-select
v-model="taskForm.end"
size="mini"
>
<el-option
:label="$t('dataset.no_limit')"
value="0"
/>
<el-option
:label="$t('dataset.set_end_time')"
value="1"
/>
</el-select>
</el-form-item>
<el-form-item
v-if="taskForm.end === '1'"
label=""
>
<el-date-picker
v-model="taskForm.endTime"
type="datetime"
:placeholder="$t('dataset.select_data_time')"
size="mini"
/>
</el-form-item>
</el-form>
</el-col>
<div
slot="footer"
class="dialog-footer"
>
<el-button
class="dialog_cancel_button"
size="mini"
@click="closeTask"
>{{ $t('dataset.cancel') }}</el-button>
<el-button
type="primary"
size="mini"
@click="saveTask(taskForm)"
>{{ $t('dataset.confirm') }}</el-button>
</div>
</el-dialog>
<el-row>
<el-button
icon="el-icon-plus"
size="mini"
@click="addTask(undefined)"
>
{{ $t('dataset.add_task') }}
</el-button>
</el-row>
<el-row style="margin-top: 10px;">
<el-table
border
size="mini"
:data="taskData"
style="width: 100%"
height="240"
>
<el-table-column
prop="name"
:label="$t('dataset.task_name')"
/>
<el-table-column
prop="rate"
:label="$t('dataset.execute_rate')"
>
<template slot-scope="scope">
<span v-if="scope.row.rate === 'SIMPLE'">{{ $t('dataset.execute_once') }}</span>
<span v-if="scope.row.rate === 'SIMPLE_CRON'">{{ $t('dataset.simple_cron') }}</span>
<span v-if="scope.row.rate === 'CRON'">{{ $t('dataset.cron_config') }}</span>
</template>
</el-table-column>
<el-table-column
prop="status"
:label="$t('dataset.task.task_status')"
>
<template slot-scope="scope">
<span
v-if="scope.row.status === 'Underway'"
style="color: green"
>
<el-link
type="success"
style="font-size: 12px"
@click="changeTaskStatus(scope.row)"
>{{ $t('dataset.task.underway') }}</el-link>
</span>
<span v-if="scope.row.status === 'Stopped'">
<div style="font-size: 12px">{{ $t('dataset.task.stopped') }}</div>
</span>
<span
v-if="scope.row.status === 'Pending'"
class="blue-color"
>
<el-link
type="primary"
style="font-size: 12px"
@click="changeTaskStatus(scope.row)"
>{{ $t('dataset.task.pending') }}</el-link>
</span>
<span
v-if="scope.row.status === 'Exec'"
class="blue-color"
>
<i class="el-icon-loading" />
{{ $t('dataset.underway') }}
</span>
</template>
</el-table-column>
<el-table-column
:label="$t('dataset.operate')"
>
<template
slot-scope="scope"
>
<el-button
size="mini"
type="primary"
icon="el-icon-edit"
circle
:disabled="scope.row.rate === 'SIMPLE' || scope.row.status === 'Stopped'"
@click="addTask(scope.row)"
/>
<el-button
size="mini"
type="danger"
icon="el-icon-delete"
circle
@click="deleteTask(scope.row)"
/>
</template>
</el-table-column>
</el-table>
</el-row>
<el-divider />
<el-row
v-if="table.type !== 'api'"
style="height: 26px;"
>
<el-row>
<el-col :span="4"><span>{{ $t('dataset.incremental_update_type') }}:</span></el-col>
<el-col :span="18">
<el-radio-group
v-model="incrementalUpdateType"
size="mini"
@change="incrementalUpdateTypeChange"
>
<el-radio label="incrementalAdd">{{ $t('dataset.incremental_add') }}</el-radio>
<el-radio label="incrementalDelete">{{ $t('dataset.incremental_delete') }}</el-radio>
</el-radio-group>
</el-col>
</el-row>
</el-row>
<el-row
v-if="table.type !== 'api'"
style="height: 26px;"
>
<el-row>
<el-col
:span="4"
style="height: 26px;"
><span style="display: inline-block;height: 26px;line-height: 26px;">{{ $t('dataset.param') }}:</span></el-col>
<el-col :span="18">
<el-button
type="text"
size="mini"
@click="insertParamToCodeMirror('${__last_update_time__}')"
>{{ $t('dataset.last_update_time') }}</el-button>
<el-button
type="text"
size="mini"
@click="insertParamToCodeMirror('${__current_update_time__}')"
>{{ $t('dataset.current_update_time') }}</el-button>
</el-col>
</el-row>
</el-row>
<el-row v-if="table.type !== 'api'">
<el-col style="min-width: 200px;">
<codemirror
ref="myCm"
v-model="sql"
class="codemirror"
:options="sqlOption"
@ready="onCmReady"
@focus="onCmFocus"
@input="onCmCodeChange"
/>
</el-col>
</el-row>
<div
slot="footer"
class="dialog-footer"
>
<el-button
size="mini"
@click="update_setting = false"
>{{ $t('dataset.close') }}</el-button>
<el-button
size="mini"
type="primary"
@click="saveIncrementalConfig"
>{{ $t('dataset.confirm') }}</el-button>
</div>
</el-dialog>
</el-col>
</template>
<script>
import { post } from '@/api/dataset/dataset'
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/solarized.css'
import 'codemirror/mode/sql/sql.js'
import 'codemirror/addon/selection/active-line.js'
import 'codemirror/addon/edit/closebrackets.js'
import 'codemirror/mode/clike/clike.js'
import 'codemirror/addon/edit/matchbrackets.js'
import 'codemirror/addon/comment/comment.js'
import 'codemirror/addon/dialog/dialog.js'
import 'codemirror/addon/dialog/dialog.css'
import 'codemirror/addon/search/searchcursor.js'
import 'codemirror/addon/search/search.js'
import 'codemirror/keymap/emacs.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/sql-hint'
import 'codemirror/addon/hint/show-hint'
import cron from '@/components/cron/cron'
import { hasDataPermission } from '@/utils/permission'
import { engineMode } from '@/api/system/engine'
export default {
name: 'UpdateInfo',
components: { codemirror, cron },
props: {
table: {
type: Object,
default: null
},
param: {
type: Object,
required: true
}
},
data() {
return {
height: 500,
update_setting: false,
update_task: false,
show_error_massage: false,
update_task_dialog_title: '',
error_massage: '',
taskForm: {
name: '',
type: 'all_scope',
startTime: '',
rate: 'SIMPLE',
cron: '',
endTime: '',
end: '0',
extraData: {
simple_cron_type: 'hour',
simple_cron_value: 1
}
},
page: {
currentPage: 1,
pageSize: 10,
total: 0
},
taskLogData: [],
taskData: [],
taskFormRules: {
name: [
{ required: true, message: this.$t('dataset.required'), trigger: 'change' },
{ min: 2, max: 50, message: this.$t('datasource.input_limit_2_50', [2, 50]), trigger: 'blur' }
],
type: [
{ required: true, message: this.$t('dataset.required'), trigger: 'change' }
],
startTime: [
{ required: true, message: this.$t('dataset.required'), trigger: 'change' }
],
rate: [
{ required: true, message: this.$t('dataset.required'), trigger: 'change' }
],
end: [
{ required: true, message: this.$t('dataset.required'), trigger: 'change' }
]
},
sqlOption: {
tabSize: 2,
styleActiveLine: true,
lineNumbers: true,
line: true,
mode: 'text/x-sql',
theme: 'solarized',
hintOptions: { // 自定义提示选项
completeSingle: false // 当匹配只有一项的时候是否自动补全
}
},
incrementalUpdateType: 'incrementalAdd',
sql: '',
incrementalConfig: {},
cronEdit: false,
lang: this.$store.getters.language === 'en_US' ? 'en' : 'cn',
taskLastRequestComplete: true,
taskLogLastRequestComplete: true,
enableUpdate: true,
engineMode: 'local'
}
},
computed: {
codemirror() {
return this.$refs.myCm.codemirror
}
},
watch: {
table: {
handler() {
if (hasDataPermission('manage', this.param.privileges)) {
this.listTask()
}
this.listTaskLog()
},
immediate: true
}
},
mounted() {
this.calHeight()
},
created() {
this.taskLogTimer = setInterval(() => {
if (!this.taskLogLastRequestComplete) {
return
} else {
this.taskLogLastRequestComplete = false
}
this.listTaskLog(false)
}, 10000)
this.taskTimer = setInterval(() => {
if (!this.taskLastRequestComplete) {
return
} else {
this.taskLastRequestComplete = false
}
if (hasDataPermission('manage', this.param.privileges)) {
this.listTask(false)
}
}, 10000)
engineMode().then(res => {
this.engineMode = res.data
if (this.engineMode === 'simple') {
if (this.table.type === 'api') {
this.enableUpdate = true
} else {
this.enableUpdate = false
}
} else {
if (this.table.type === 'excel') {
this.enableUpdate = false
} else {
this.enableUpdate = true
}
}
})
},
beforeDestroy() {
clearInterval(this.taskTimer)
clearInterval(this.taskLogTimer)
},
methods: {
calHeight() {
const that = this
setTimeout(function() {
const currentHeight = document.documentElement.clientHeight
that.height = currentHeight - 56 - 30 - 26 - 25 - 55 - 38 - 28 - 10
}, 10)
},
cellStyle({ row, column }) {
// 状态列字体颜色
if (row.status === 'Underway' && column === 'status') {
return 'color: var(--Main, #0000ff)'
} else if (row.status === 'Completed' && column === 'status') {
return 'color: green'
} else if (row.status === 'Error' && column === 'status') {
return 'color: red'
}
},
incrementalUpdateTypeChange: function() {
if (this.incrementalUpdateType === 'incrementalAdd') {
if (this.sql) {
this.incrementalConfig.incrementalDelete = this.sql
} else {
this.incrementalConfig.incrementalDelete = ''
}
if (this.incrementalConfig.incrementalAdd) {
this.sql = this.incrementalConfig.incrementalAdd
} else {
this.sql = ''
}
}
if (this.incrementalUpdateType === 'incrementalDelete') {
if (this.sql) {
this.incrementalConfig.incrementalAdd = this.sql
} else {
this.incrementalConfig.incrementalAdd = ''
}
if (this.incrementalConfig.incrementalDelete) {
this.sql = this.incrementalConfig.incrementalDelete
} else {
this.sql = ''
}
}
},
showConfig() {
this.update_setting = true
this.listTask()
this.getIncrementalConfig()
},
refreshLog() {
this.listTaskLog()
},
showErrorMassage(massage) {
this.show_error_massage = true
this.error_massage = massage
},
addTask(task) {
if (!task) {
this.resetTaskForm()
this.taskForm.name = this.table.name + ' ' + this.$t('dataset.task_update')
this.taskForm.startTime = new Date()
this.update_task_dialog_title = this.$t('dataset.task_add_title')
} else {
this.taskForm = JSON.parse(JSON.stringify(task))
this.taskForm.extraData = JSON.parse(this.taskForm.extraData)
this.update_task_dialog_title = this.$t('dataset.task_edit_title')
}
this.update_task = true
},
listTask(loading = true) {
post('/dataset/task/list', { tableId: this.table.id }, loading).then(response => {
this.taskData = response.data
this.taskLastRequestComplete = true
}).catch(() => {
this.taskLastRequestComplete = true
})
},
getIncrementalConfig() {
post('/dataset/table/incrementalConfig', { tableId: this.table.id }).then(response => {
this.incrementalConfig = response.data
if (this.incrementalConfig.incrementalAdd.length === 0 && this.incrementalConfig.incrementalDelete.length === 0) {
this.incrementalUpdateType = 'incrementalAdd'
this.sql = ''
return
}
if (this.incrementalConfig.incrementalAdd.length > 0) {
this.incrementalUpdateType = 'incrementalAdd'
this.sql = this.incrementalConfig.incrementalAdd
} else {
this.incrementalUpdateType = 'incrementalDelete'
this.sql = this.incrementalConfig.incrementalDelete
}
})
},
saveIncrementalConfig() {
if (this.incrementalUpdateType === 'incrementalAdd') {
this.incrementalConfig.incrementalAdd = this.sql
} else {
this.incrementalConfig.incrementalDelete = this.sql
}
this.incrementalConfig.tableId = this.table.id
post('/dataset/table/save/incrementalConfig', this.incrementalConfig).then(response => {
this.$message({
message: this.$t('dataset.save_success'),
type: 'success',
showClose: true
})
this.update_setting = false
})
},
saveTask(task) {
this.$refs.taskForm.validate(valid => {
if (valid) {
if (this.incrementalUpdateType === 'incrementalAdd') {
this.incrementalConfig.incrementalAdd = this.sql
} else {
this.incrementalConfig.incrementalDelete = this.sql
}
this.incrementalConfig.tableId = this.table.id
task.startTime = new Date(task.startTime).getTime()
task.endTime = new Date(task.endTime).getTime()
task.tableId = this.table.id
const form = JSON.parse(JSON.stringify(task))
form.extraData = JSON.stringify(form.extraData)
const dataSetTaskRequest = {
datasetTableTask: form,
datasetTableIncrementalConfig: this.incrementalConfig
}
post('/dataset/task/save', dataSetTaskRequest).then(response => {
this.$message({
message: this.$t('dataset.save_success'),
type: 'success',
showClose: true
})
this.update_task = false
this.resetTaskForm()
this.listTask()
this.listTaskLog()
})
} else {
return false
}
})
},
changeTaskStatus(task) {
const param = task
param.status = task.status === 'Underway' ? 'Pending' : 'Underway'
post('/dataset/task/updateStatus', task).then(response => {
task.status = param.status
this.$message({
message: this.$t('dataset.task.change_success'),
type: 'success',
showClose: true
})
})
},
deleteTask(task) {
this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), {
confirmButtonText: this.$t('dataset.confirm'),
cancelButtonText: this.$t('dataset.cancel'),
type: 'warning'
}).then(() => {
post('/dataset/task/delete/' + task.id, null).then(response => {
this.$message({
message: this.$t('dataset.delete_success'),
type: 'success',
showClose: true
})
this.resetTaskForm()
this.listTask()
this.listTaskLog()
})
}).catch(() => {
})
},
closeTask() {
this.update_task = false
this.resetTaskForm()
},
onSimpleCronChange() {
if (this.taskForm.extraData.simple_cron_type === 'minute') {
if (this.taskForm.extraData.simple_cron_value < 1 || this.taskForm.extraData.simple_cron_value > 59) {
this.$message({ message: this.$t('cron.minute_limit'), type: 'warning', showClose: true })
this.taskForm.extraData.simple_cron_value = 59
}
this.taskForm.cron = '0 0/' + this.taskForm.extraData.simple_cron_value + ' * * * ? *'
return
}
if (this.taskForm.extraData.simple_cron_type === 'hour') {
if (this.taskForm.extraData.simple_cron_value < 1 || this.taskForm.extraData.simple_cron_value > 23) {
this.$message({ message: this.$t('cron.hour_limit'), type: 'warning', showClose: true })
this.taskForm.extraData.simple_cron_value = 23
}
this.taskForm.cron = '0 0 0/' + this.taskForm.extraData.simple_cron_value + ' * * ? *'
return
}
if (this.taskForm.extraData.simple_cron_type === 'day') {
if (this.taskForm.extraData.simple_cron_value < 1 || this.taskForm.extraData.simple_cron_value > 31) {
this.$message({ message: this.$t('cron.day_limit'), type: 'warning', showClose: true })
this.taskForm.extraData.simple_cron_value = 31
}
this.taskForm.cron = '0 0 0 1/' + this.taskForm.extraData.simple_cron_value + ' * ? *'
return
}
},
onRateChange() {
if (this.taskForm.rate === 'SIMPLE') {
this.taskForm.end = '0'
this.taskForm.endTime = ''
this.taskForm.cron = ''
}
if (this.taskForm.rate === 'SIMPLE_CRON') {
this.taskForm.cron = '0 0 0/1 * * ? *'
}
if (this.taskForm.rate === 'CRON') {
this.taskForm.cron = '00 00 * ? * * *'
}
},
listTaskLog(loading = true) {
const params = { 'conditions': [{ 'field': 'dataset_table_task_log.table_id', 'operator': 'eq', 'value': this.table.id }], 'orders': [] }
post('/dataset/taskLog/listForDataset/' + this.table.type + '/' + this.page.currentPage + '/' + this.page.pageSize, params, loading).then(response => {
this.taskLogData = response.data.listObject
this.page.total = response.data.itemCount
this.taskLogLastRequestComplete = true
}).catch(() => {
this.taskLogLastRequestComplete = true
})
},
handleSizeChange(val) {
this.page.pageSize = val
this.listTaskLog()
},
handleCurrentChange(val) {
this.page.currentPage = val
this.listTaskLog()
},
resetTaskForm() {
this.taskForm = {
name: '',
type: 'all_scope',
startTime: '',
rate: 'SIMPLE',
endTime: '',
end: '0',
extraData: {
simple_cron_type: 'hour',
simple_cron_value: 1
}
}
},
showSQL(val) {
this.sql = val || ''
},
onCmReady(cm) {
this.codemirror.setSize('-webkit-fill-available', 'auto')
},
onCmFocus(cm) {
},
onCmCodeChange(newCode) {
this.sql = newCode
this.$emit('codeChange', this.sql)
},
insertParamToCodeMirror(param) {
const pos1 = this.$refs.myCm.codemirror.getCursor()
const pos2 = {}
pos2.line = pos1.line
pos2.ch = pos1.ch
this.$refs.myCm.codemirror.replaceRange(param, pos2)
},
cronChange(val) {
this.taskForm.cron = val
}
}
}
</script>
<style scoped>
.el-divider--horizontal {
margin: 12px 0;
}
.el-radio{
margin-right: 10px;
}
.el-radio ::v-deep .el-radio__label{
font-size: 12px;
}
.dialog-css ::v-deep .el-dialog__header {
padding: 20px 20px 0;
}
.dialog-css ::v-deep .el-dialog__body {
padding: 10px 20px 20px;
}
.el-form-item {
margin-bottom: 10px;
}
.codemirror {
height: 100px;
overflow-y: auto;
}
.codemirror ::v-deep .CodeMirror-scroll {
height: 100px;
overflow-y: auto;
}
.err-msg{
font-size: 12px;
word-break:normal;
width:auto;
display:block;
white-space:pre-wrap;
word-wrap : break-word ;
overflow: hidden ;
}
.blackTheme .dialog_cancel_button {
background-color: #171b22 !important;
color: #2681ff !important;
}
.span{
font-size: 12px;
}
</style>

13
frontend/src/views/dataset/data/ViewTable.vue
View File

@ -125,14 +125,18 @@
</el-tab-pane>
<el-tab-pane
v-if="
table.mode === 1 &&
(table.type === 'db' || table.type === 'sql' || table.type === 'api')
table.mode === 1 && ['api', 'sql', 'db', 'excel'].includes(table.type)
"
:label="$t('dataset.update_info')"
name="updateInfo"
>
<update-info
v-if="tabActive == 'updateInfo'"
v-if="tabActive == 'updateInfo' && table.type !== 'excel'"
:param="param"
:table="table"
/>
<update-records
v-if="tabActive == 'updateInfo' && table.type === 'excel'"
:param="param"
:table="table"
/>
@ -175,7 +179,7 @@ import DatasetDetail from '../common/DatasetDetail'
import FieldEdit from './FieldEdit'
import { pluginLoaded } from '@/api/user'
import PluginCom from '@/views/system/plugin/PluginCom'
import UpdateRecords from './UpdateRecords'
export default {
name: 'ViewTable',
components: {
@ -183,6 +187,7 @@ export default {
DatasetDetail,
UpdateInfo,
TabDataPreview,
UpdateRecords,
PluginCom
},
props: {

1
frontend/src/views/msg/all.vue
View File

@ -6,6 +6,7 @@
<div class="organization">
<el-tabs
v-model="tabActive"
class="de-tabs"
@tab-click="changeTab"
>
<el-tab-pane

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

@ -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) {

1
frontend/src/views/panel/LinkJumpSet/index.vue
View File

@ -408,6 +408,7 @@ import { imgUrlTrans } from '@/components/canvas/utils/utils'
export default {
components: { codemirror, draggable },
name: 'LinkJumpSet',
props: {
viewId: {
type: String,

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

@ -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>

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

@ -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 = {

338
frontend/src/views/panel/list/PanelList.vue
View File

@ -33,9 +33,9 @@
<div class="block">
<el-tree
ref="default_panel_tree"
:data="defaultData"
:data="expandedData"
node-key="id"
:highlight-current="activeTree==='system'"
:highlight-current="activeTree === 'system'"
:expand-on-click-node="true"
:filter-node-method="filterNode"
@node-click="nodeClick"
@ -44,31 +44,36 @@
slot-scope="{ node, data }"
class="custom-tree-node father"
>
<span style="display: flex; flex: 1 1 0%; width: 0px;">
<span style="display: flex; flex: 1 1 0%; width: 0px">
<span>
<svg-icon
v-if="!data.mobileLayout"
:icon-class="'panel-'+data.status"
:icon-class="'panel-' + data.status"
class="ds-icon-scene"
/>
<svg-icon
v-if="data.mobileLayout"
:icon-class="'panel-mobile-'+data.status"
:icon-class="'panel-mobile-' + data.status"
class="ds-icon-scene"
/>
</span>
<span
style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
style="
margin-left: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
:title="data.name"
>{{ data.name }}</span>
</span>
<span
style="margin-left: 12px;"
style="margin-left: 12px"
class="child"
@click.stop
>
<el-dropdown
v-if="hasDataPermission('manage',data.privileges)"
v-if="hasDataPermission('manage', data.privileges)"
trigger="click"
size="small"
@command="clickMore"
@ -83,13 +88,13 @@
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
icon="el-icon-edit-outline"
:command="beforeClickMore('rename',data,node)"
:command="beforeClickMore('rename', data, node)"
>
{{ $t('panel.rename') }}
</el-dropdown-item>
<el-dropdown-item
icon="el-icon-delete"
:command="beforeClickMore('delete',data,node)"
:command="beforeClickMore('delete', data, node)"
>
{{ $t('panel.delete') }}
</el-dropdown-item>
@ -98,6 +103,18 @@
</span>
</span>
</el-tree>
<p
v-if="defaultData.length > 3"
class="default-expansion"
@click="defaultExpansion = !defaultExpansion"
>
{{ defaultExpansion ? '收起' : '展开' }}
<i
:class="[
defaultExpansion ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
]"
/>
</p>
</div>
</el-row>
@ -105,7 +122,7 @@
<span class="header-title">
{{ $t('panel.panel_list') }}
<el-button
style="float: right;padding-right: 7px;margin-top: -8px"
style="float: right; padding-right: 7px; margin-top: -8px"
icon="el-icon-plus"
type="text"
@click="showEditPanel(newFolder)"
@ -119,7 +136,7 @@
:default-expanded-keys="expandedArray"
:data="tData"
node-key="id"
:highlight-current="activeTree==='self'"
:highlight-current="activeTree === 'self'"
:expand-on-click-node="true"
:filter-node-method="filterNode"
@node-expand="nodeExpand"
@ -130,16 +147,16 @@
slot-scope="{ node, data }"
class="custom-tree-node-list father"
>
<span style="display: flex; flex: 1 1 0%; width: 0px;">
<span style="display: flex; flex: 1 1 0%; width: 0px">
<span v-if="data.nodeType === 'panel'">
<svg-icon
v-if="!data.mobileLayout"
:icon-class="'panel-'+data.status"
:icon-class="'panel-' + data.status"
class="ds-icon-scene"
/>
<svg-icon
v-if="data.mobileLayout"
:icon-class="'panel-mobile-'+data.status"
:icon-class="'panel-mobile-' + data.status"
class="ds-icon-scene"
/>
</span>
@ -148,16 +165,21 @@
</span>
<span
:class="data.status"
style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
style="
margin-left: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
:title="data.name"
>{{ data.name }}</span>
</span>
<span
v-if="hasDataPermission('manage',data.privileges)"
v-if="hasDataPermission('manage', data.privileges)"
class="child"
>
<span
v-if="data.nodeType ==='folder'"
v-if="data.nodeType === 'folder'"
@click.stop
>
<el-dropdown
@ -173,11 +195,15 @@
/>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="beforeClickEdit('folder','new',data,node)">
<el-dropdown-item
:command="beforeClickEdit('folder', 'new', data, node)"
>
<i class="el-icon-folder" />
<span>{{ $t('panel.groupAdd') }}</span>
</el-dropdown-item>
<el-dropdown-item :command="beforeClickEdit('panel','new',data,node)">
<el-dropdown-item
:command="beforeClickEdit('panel', 'new', data, node)"
>
<svg-icon
icon-class="panel"
class="ds-icon-scene"
@ -188,7 +214,7 @@
</el-dropdown>
</span>
<span
v-if="data.nodeType==='panel'"
v-if="data.nodeType === 'panel'"
@click.stop
>
<el-button
@ -199,7 +225,7 @@
/>
</span>
<span
style="margin-left: 12px;"
style="margin-left: 12px"
@click.stop
>
<el-dropdown
@ -216,56 +242,56 @@
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-if="data.nodeType==='panel'"
v-if="data.nodeType === 'panel'"
icon="el-icon-edit"
:command="beforeClickMore('edit',data,node)"
:command="beforeClickMore('edit', data, node)"
>
{{ $t('panel.edit') }}
</el-dropdown-item>
<el-dropdown-item
v-if="data.nodeType==='panel'"
v-if="data.nodeType === 'panel'"
icon="el-icon-share"
:command="beforeClickMore('share',data,node)"
:command="beforeClickMore('share', data, node)"
>
{{ $t('panel.share') }}
</el-dropdown-item>
<el-dropdown-item
v-if="data.nodeType==='panel'"
v-if="data.nodeType === 'panel'"
icon="el-icon-document-copy"
:command="beforeClickMore('copy',data,node)"
:command="beforeClickMore('copy', data, node)"
>
{{ $t('panel.copy') }}
</el-dropdown-item>
<el-dropdown-item
icon="el-icon-right"
:command="beforeClickMore('move',data,node)"
:command="beforeClickMore('move', data, node)"
>
{{ $t('dataset.move_to') }}
</el-dropdown-item>
<el-dropdown-item
v-if="data.nodeType==='panel'"
v-if="data.nodeType === 'panel'"
icon="el-icon-paperclip"
:command="beforeClickMore('link',data,node)"
:command="beforeClickMore('link', data, node)"
>
{{ $t('panel.create_public_links') }}
</el-dropdown-item>
<el-dropdown-item
v-if="data.nodeType==='panel'"
v-if="data.nodeType === 'panel'"
:disabled="data.isDefault"
icon="el-icon-copy-document"
:command="beforeClickMore('toDefaultPanel',data,node)"
:command="beforeClickMore('toDefaultPanel', data, node)"
>
{{ $t('panel.to_default_panel') }}
</el-dropdown-item>
<el-dropdown-item
icon="el-icon-edit-outline"
:command="beforeClickMore('rename',data,node)"
:command="beforeClickMore('rename', data, node)"
>
{{ $t('panel.rename') }}
</el-dropdown-item>
<el-dropdown-item
icon="el-icon-delete"
:command="beforeClickMore('delete',data,node)"
:command="beforeClickMore('delete', data, node)"
>
{{ $t('panel.delete') }}
</el-dropdown-item>
@ -305,7 +331,9 @@
<el-button
size="mini"
@click="close()"
>{{ $t('panel.cancel') }}</el-button>
>{{
$t('panel.cancel')
}}</el-button>
<el-button
type="primary"
size="mini"
@ -379,7 +407,9 @@
<el-button
size="mini"
@click="closeMoveGroup()"
>{{ $t('dataset.cancel') }}</el-button>
>{{
$t('dataset.cancel')
}}</el-button>
<el-button
:disabled="groupMoveConfirmDisabled"
type="primary"
@ -399,11 +429,17 @@ import LinkGenerate from '@/views/link/generate'
import { uuid } from 'vue-uuid'
import bus from '@/utils/bus'
import EditPanel from './EditPanel'
import { addGroup, delGroup, groupTree, defaultTree, initPanelData, panelUpdate, viewPanelLog } from '@/api/panel/panel'
import { mapState } from 'vuex'
import {
DEFAULT_COMMON_CANVAS_STYLE_STRING
} from '@/views/panel/panel'
addGroup,
delGroup,
groupTree,
defaultTree,
initPanelData,
panelUpdate,
viewPanelLog
} from '@/api/panel/panel'
import { mapState } from 'vuex'
import { DEFAULT_COMMON_CANVAS_STYLE_STRING } from '@/views/panel/panel'
import TreeSelector from '@/components/TreeSelector'
import { queryAuthModel } from '@/api/authModel/authModel'
@ -413,10 +449,8 @@ export default {
data() {
return {
responseSource: 'panelQuery',
clearLocalStorage: [
'chart-tree',
'dataset-tree'
],
defaultExpansion: false,
clearLocalStorage: ['chart-tree', 'dataset-tree'],
historyRequestId: null,
lastActiveNode: null, // 激活的节点 在这个节点下面动态放置子节点
lastActiveNodeData: null,
@ -490,15 +524,27 @@ export default {
},
groupFormRules: {
name: [
{ required: true, message: this.$t('commons.input_content'), trigger: 'blur' }
{
required: true,
message: this.$t('commons.input_content'),
trigger: 'blur'
}
]
},
tableFormRules: {
name: [
{ required: true, message: this.$t('commons.input_content'), trigger: 'blur' }
{
required: true,
message: this.$t('commons.input_content'),
trigger: 'blur'
}
],
mode: [
{ required: true, message: this.$t('commons.input_content'), trigger: 'blur' }
{
required: true,
message: this.$t('commons.input_content'),
trigger: 'blur'
}
]
},
moveGroup: false,
@ -514,19 +560,19 @@ export default {
all: this.$t('commons.all'),
folder: this.$t('commons.folder')
},
initLocalStorage: [
'chart',
'dataset'
]
initLocalStorage: ['chart', 'dataset']
}
},
computed: {
panelDialogTitle() {
return this.editPanel.titlePre + this.editPanel.titleSuf
},
...mapState([
'nowPanelTrackInfo'
])
expandedData() {
return this.defaultExpansion
? this.defaultData
: this.defaultData.slice(0, 3)
},
...mapState(['nowPanelTrackInfo'])
},
watch: {
// 切换展示页面后 重新点击一下当前节点
@ -558,7 +604,11 @@ export default {
this.responseSource = routerParam.responseSource
this.lastActiveNode = routerParam
this.tree()
} else if (routerParam && routerParam.nodeType === 'panel' && this.historyRequestId !== routerParam.requestId) {
} else if (
routerParam &&
routerParam.nodeType === 'panel' &&
this.historyRequestId !== routerParam.requestId
) {
this.historyRequestId = routerParam.requestId
this.tree()
this.edit(routerParam, null)
@ -569,7 +619,7 @@ export default {
methods: {
fromAppActive() {
this.activeNodeAndClickOnly(this.lastActiveNode)
this.clearLocalStorage.forEach(item => {
this.clearLocalStorage.forEach((item) => {
localStorage.removeItem(item)
})
this.responseSource = 'panelQuery'
@ -582,9 +632,9 @@ export default {
},
initCache() {
// 初始化时提前加载视图和数据集的缓存
this.initLocalStorage.forEach(item => {
this.initLocalStorage.forEach((item) => {
if (!localStorage.getItem(item + '-tree')) {
queryAuthModel({ modelType: item }, false).then(res => {
queryAuthModel({ modelType: item }, false).then((res) => {
localStorage.setItem(item + '-tree', JSON.stringify(res.data))
})
}
@ -596,7 +646,11 @@ export default {
this.defaultTree()
this.tree()
// 默认展开 同时点击 新增的节点
if (panelInfo && panelInfo.panelType === 'self' && this.lastActiveNodeData.id) {
if (
panelInfo &&
panelInfo.panelType === 'self' &&
this.lastActiveNodeData.id
) {
if (this.editPanel.optType === 'rename') {
this.lastActiveNodeData.name = panelInfo.name
return
@ -692,10 +746,10 @@ export default {
},
beforeClickEdit(type, optType, data, node) {
return {
'type': type,
'data': data,
'node': node,
'optType': optType
type: type,
data: data,
node: node,
optType: optType
}
},
@ -726,10 +780,10 @@ export default {
beforeClickMore(optType, data, node) {
return {
'type': data.nodeType,
'data': data,
'node': node,
'optType': optType
type: data.nodeType,
data: data,
node: node,
optType: optType
}
},
@ -750,7 +804,7 @@ export default {
saveGroup(group) {
this.$refs['groupForm'].validate((valid) => {
if (valid) {
addGroup(group).then(res => {
addGroup(group).then((res) => {
this.close()
this.$message({
message: this.$t('commons.save_success'),
@ -776,19 +830,20 @@ export default {
confirmButtonText: this.$t('panel.confirm'),
cancelButtonText: this.$t('panel.cancel'),
type: 'warning'
}).then(() => {
delGroup(data.id).then(response => {
this.$message({
type: 'success',
message: this.$t('panel.delete_success'),
showClose: true
})
this.clearCanvas()
this.tree()
this.defaultTree()
})
}).catch(() => {
})
.then(() => {
delGroup(data.id).then((response) => {
this.$message({
type: 'success',
message: this.$t('panel.delete_success'),
showClose: true
})
this.clearCanvas()
this.tree()
this.defaultTree()
})
})
.catch(() => {})
},
clearCanvas() {
@ -815,11 +870,11 @@ export default {
},
tree(cache = false) {
const modelInfo = localStorage.getItem('panel-main-tree')
const userCache = (modelInfo && cache)
const userCache = modelInfo && cache
if (userCache) {
this.tData = JSON.parse(modelInfo)
}
groupTree(this.groupForm, !userCache).then(res => {
groupTree(this.groupForm, !userCache).then((res) => {
localStorage.setItem('panel-main-tree', JSON.stringify(res.data))
if (!userCache) {
this.tData = res.data
@ -839,12 +894,12 @@ export default {
panelType: 'system'
}
const modelInfo = localStorage.getItem('panel-default-tree')
const userCache = (modelInfo && cache)
const userCache = modelInfo && cache
if (userCache) {
this.defaultData = JSON.parse(modelInfo)
}
defaultTree(requestInfo, false).then(res => {
defaultTree(requestInfo, false).then((res) => {
localStorage.setItem('panel-default-tree', JSON.stringify(res.data))
if (!userCache) {
this.defaultData = res.data
@ -865,7 +920,7 @@ export default {
// 清理pc布局缓存
this.$store.commit('setComponentDataCache', null)
initPanelData(data.id, false, function(response) {
viewPanelLog({ panelId: data.id }).then(res => {
viewPanelLog({ panelId: data.id }).then((res) => {
bus.$emit('set-panel-show-type', 0)
data.mobileLayout = response.data.mobileLayout
})
@ -889,7 +944,7 @@ export default {
},
beforeClickAddData(type) {
return {
'type': type
type: type
}
},
@ -930,15 +985,13 @@ export default {
},
resetID(data) {
if (data) {
data.forEach(item => {
data.forEach((item) => {
item.type !== 'custom' && (item.id = uuid.v1())
})
}
return data
},
newPanelSave(id) {
},
newPanelSave(id) {},
// 激活并点击当前节点
activeNodeAndClick(panelInfo) {
if (panelInfo) {
@ -979,10 +1032,13 @@ export default {
moveTo(data) {
const _this = this
this.moveInfo = data
this.moveDialogTitle = this.$t('dataset.m1') + (data.name.length > 10 ? (data.name.substr(0, 10) + '...') : data.name) + this.$t('dataset.m2')
this.moveDialogTitle =
this.$t('dataset.m1') +
(data.name.length > 10 ? data.name.substr(0, 10) + '...' : data.name) +
this.$t('dataset.m2')
const queryInfo = JSON.parse(JSON.stringify(this.groupForm))
queryInfo['nodeType'] = 'folder'
groupTree(queryInfo).then(res => {
groupTree(queryInfo).then((res) => {
if (data.nodeType === 'folder') {
_this.tGroupData = [
{
@ -1005,7 +1061,7 @@ export default {
saveMoveGroup() {
this.moveInfo.pid = this.tGroup.id
this.moveInfo['optType'] = 'move'
panelUpdate(this.moveInfo).then(response => {
panelUpdate(this.moveInfo).then((response) => {
this.tree()
this.closeMoveGroup()
})
@ -1050,6 +1106,22 @@ export default {
</script>
<style lang='scss' scoped>
.default-expansion {
height: 40px;
width: 232px;
cursor: pointer;
margin: 0;
font-family: PingFang SC;
font-size: 14px;
font-weight: 400;
color: var(--deTextSecondary, #646a73);
padding-left: 22px;
display: flex;
align-items: center;
i {
margin-left: 5px;
}
}
.main-area-input {
::v-deep.el-input-group__append {
width: 70px;
@ -1059,47 +1131,47 @@ export default {
}
}
}
.header-title {
font-size: 14px;
flex: 1;
color: var(--TextPrimary, #606266);
font-weight: bold;
display: block;
height: 100%;
/*line-height: 36px;*/
}
.header-title {
font-size: 14px;
flex: 1;
color: var(--TextPrimary, #606266);
font-weight: bold;
display: block;
height: 100%;
/*line-height: 36px;*/
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right:8px;
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
.custom-tree-node-list {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding:0 8px;
}
.custom-tree-node-list {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding: 0 8px;
}
.dialog-css ::v-deep .el-dialog__body {
padding: 15px 20px;
}
.dialog-css ::v-deep .el-dialog__body {
padding: 10px 20px 20px;
}
.dialog-css ::v-deep .el-dialog__body {
padding: 15px 20px;
}
.dialog-css ::v-deep .el-dialog__body {
padding: 10px 20px 20px;
}
.father .child {
/*display: none;*/
visibility: hidden;
}
.father:hover .child {
/*display: inline;*/
visibility: visible;
}
.father .child {
/*display: none;*/
visibility: hidden;
}
.father:hover .child {
/*display: inline;*/
visibility: visible;
}
</style>

8
frontend/src/views/panel/list/PanelViewShow.vue
View File

@ -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 {