Skip to content

D
dataease
提交 2441edd1 authored 作者: fit2cloud-chenyw's avatar fit2cloud-chenyw
浏览文件
操作

feat: ESLint插件格式化前端代码

上级 221227e7
隐藏空白字符变更
内嵌 并排
正在显示 包含 934 行增加 和 935 行删除
frontend/src/components/vue-drag-resize-rotate/index.vue
浏览文件 @ 2441edd1
...@@ -17,17 +17,17 @@ ...@@ -17,17 +17,17 @@
@touchstart="elementTouchDown" @touchstart="elementTouchDown"
> >
<div <div
v-for="(handle,index) in actualHandles" v-for="(item,index) in actualHandles"
:key="index" :key="index"
:class="[classNameHandle, classNameHandle + '-' + handle]" :class="[classNameHandle, classNameHandle + '-' + item]"
:style="handleStyle(handle,index)" :style="handleStyle(item,index)"
@mousedown.stop.prevent="handleDown(handle, $event)" @mousedown.stop.prevent="handleDown(item, $event)"
@touchstart.stop.prevent="handleTouchDown(handle, $event)" @touchstart.stop.prevent="handleTouchDown(item, $event)"
> >
<slot :name="handle"></slot> <slot :name="handle" />
</div> </div>
<i class="el-icon-circle-close" @click.stop="removeView()"></i> <i class="el-icon-circle-close" @click.stop="removeView()" />
<slot></slot> <slot />
</div> </div>
</template> </template>
...@@ -46,7 +46,7 @@ const events = { ...@@ -46,7 +46,7 @@ const events = {
move: 'touchmove', move: 'touchmove',
stop: 'touchend' stop: 'touchend'
} }
}; }
// 禁止用户选取 // 禁止用户选取
const userSelectNone = { const userSelectNone = {
...@@ -54,20 +54,20 @@ const userSelectNone = { ...@@ -54,20 +54,20 @@ const userSelectNone = {
MozUserSelect: 'none', MozUserSelect: 'none',
WebkitUserSelect: 'none', WebkitUserSelect: 'none',
MsUserSelect: 'none' MsUserSelect: 'none'
}; }
// 用户选中自动 // 用户选中自动
const userSelectAuto = { const userSelectAuto = {
userSelect: 'auto', userSelect: 'auto',
MozUserSelect: 'auto', MozUserSelect: 'auto',
WebkitUserSelect: 'auto', WebkitUserSelect: 'auto',
MsUserSelect: 'auto' MsUserSelect: 'auto'
}; }
let eventsFor = events.mouse; let eventsFor = events.mouse
export default { export default {
replace: true, replace: true,
name: 'vue-drag-resize-rotate', name: 'VueDragResizeRotate',
props: { props: {
className: { className: {
type: String, type: String,
...@@ -152,9 +152,9 @@ export default { ...@@ -152,9 +152,9 @@ export default {
default: 200, default: 200,
validator: val => { validator: val => {
if (typeof val === 'number') { if (typeof val === 'number') {
return val > 0; return val > 0
} }
return val === 'auto'; return val === 'auto'
} }
}, },
h: { h: {
...@@ -162,9 +162,9 @@ export default { ...@@ -162,9 +162,9 @@ export default {
default: 200, default: 200,
validator: val => { validator: val => {
if (typeof val === 'number') { if (typeof val === 'number') {
return val > 0; return val > 0
} }
return val === 'auto'; return val === 'auto'
} }
}, },
minWidth: { minWidth: {
...@@ -279,8 +279,8 @@ export default { ...@@ -279,8 +279,8 @@ export default {
snapTolerance: { snapTolerance: {
type: Number, type: Number,
default: 5, default: 5,
validator: function (val) { validator: function(val) {
return typeof val === 'number'; return typeof val === 'number'
} }
}, },
// 缩放比例 // 缩放比例
...@@ -297,12 +297,12 @@ export default { ...@@ -297,12 +297,12 @@ export default {
size: 8, size: 8,
offset: -4, offset: -4,
switch: true switch: true
}; }
} }
} }
}, },
data: function () { data: function() {
return { return {
left: this.x, left: this.x,
top: this.y, top: this.y,
...@@ -337,8 +337,209 @@ export default { ...@@ -337,8 +337,209 @@ export default {
lastCenterY: 0 lastCenterY: 0
} }
}, },
computed: {
handleStyle() {
return (stick, index) => {
if (!this.handleInfo.switch) return { display: this.enabled ? 'block' : 'none' }
// 新增 当没有开启旋转的时候，旋转手柄不显示
if (stick === 'rot' && !this.rotatable) return { display: 'none' }
const size = (this.handleInfo.size / this.scaleRatio).toFixed(2)
const offset = (this.handleInfo.offset / this.scaleRatio).toFixed(2)
const center = (size / 2).toFixed(2)
const styleMap = {
tl: {
top: `${offset}px`,
left: `${offset}px`
},
tm: {
top: `${offset}px`,
left: `calc(50% - ${center}px)`
},
tr: {
top: `${offset}px`,
right: `${offset}px`
},
mr: {
top: `calc(50% - ${center}px)`,
right: `${offset}px`
},
br: {
bottom: `${offset}px`,
right: `${offset}px`
},
bm: {
bottom: `${offset}px`,
right: `calc(50% - ${center}px)`
},
bl: {
bottom: `${offset}px`,
left: `${offset}px`
},
ml: {
top: `calc(50% - ${center}px)`,
left: `${offset}px`
},
rot: {}
}
const stickStyle = {
width: `${size}px`,
height: `${size}px`,
top: styleMap[stick].top,
left: styleMap[stick].left,
right: styleMap[stick].right,
bottom: styleMap[stick].bottom
}
// 新增 让控制手柄的鼠标样式跟随玄幻角度变化
if (stick !== 'rot') {
const cursorStyleArray = ['nw-resize', 'n-resize', 'ne-resize', 'e-resize', 'se-resize', 's-resize', 'sw-resize', 'w-resize']
const STEP = 45
const rotate = this.rotate + STEP / 2
const deltaIndex = Math.floor(rotate / STEP)
index = (index + deltaIndex) % 8
stickStyle.cursor = cursorStyleArray[index]
}
stickStyle.display = this.enabled ? 'block' : 'none'
return stickStyle
}
},
style() {
return {
transform: `translate(${this.left}px, ${this.top}px) rotate(${this.rotate}deg)`,
width: this.computedWidth,
height: this.computedHeight,
zIndex: this.zIndex,
...(this.dragging && this.disableUserSelect ? userSelectNone : userSelectAuto)
}
},
// 控制柄显示与否
actualHandles() {
if (!this.resizable) return []
created: function () { return this.handles
},
// 根据left right 算出元素的宽度
computedWidth() {
if (this.w === 'auto') {
if (!this.widthTouched) {
return 'auto'
}
}
return this.width + 'px'
},
// 根据top bottom 算出元素的宽度
computedHeight() {
if (this.h === 'auto') {
if (!this.heightTouched) {
return 'auto'
}
}
return this.height + 'px'
},
// 表示只修改宽度
resizingOnX() {
return Boolean(this.handle) && (this.handle.includes('l') || this.handle.includes('r'))
},
// 表示只修改高度
resizingOnY() {
return Boolean(this.handle) && (this.handle.includes('t') || this.handle.includes('b'))
},
// 表示正在调整边角
isCornerHandle() {
return Boolean(this.handle) && ['tl', 'tr', 'br', 'bl'].includes(this.handle)
}
},
watch: {
active(val) {
this.enabled = val
if (val) {
this.$emit('activated')
} else {
this.$emit('deactivated')
}
},
z(val) {
if (val >= 0 || val === 'auto') {
this.zIndex = val
}
},
x(val) {
if (this.resizing || this.dragging) {
return
}
if (this.parent) {
this.bounds = this.calcDragLimits()
}
this.moveHorizontally(val)
},
y(val) {
if (this.resizing || this.dragging) {
return
}
if (this.parent) {
this.bounds = this.calcDragLimits()
}
this.moveVertically(val)
},
// 新增 监听外部传入参数 旋转角度
r(val) {
if (val >= 0) {
this.rotate = val % 360
}
},
lockAspectRatio(val) {
if (val) {
this.aspectFactor = this.width / this.height
} else {
this.aspectFactor = undefined
}
},
minWidth(val) {
if (val > 0 && val <= this.width) {
this.minW = val
}
},
minHeight(val) {
if (val > 0 && val <= this.height) {
this.minH = val
}
},
maxWidth(val) {
this.maxW = val
},
maxHeight(val) {
this.maxH = val
},
w(val) {
if (this.resizing || this.dragging) {
return
}
if (this.parent) {
this.bounds = this.calcResizeLimits()
}
this.changeWidth(val)
},
h(val) {
if (this.resizing || this.dragging) {
return
}
if (this.parent) {
this.bounds = this.calcResizeLimits()
}
this.changeHeight(val)
}
},
created: function() {
// eslint-disable-next-line 无效的prop：minWidth不能大于maxWidth // eslint-disable-next-line 无效的prop：minWidth不能大于maxWidth
if (this.maxWidth && this.minWidth > this.maxWidth) console.warn('[Vdr warn]: Invalid prop: minWidth cannot be greater than maxWidth') if (this.maxWidth && this.minWidth > this.maxWidth) console.warn('[Vdr warn]: Invalid prop: minWidth cannot be greater than maxWidth')
// eslint-disable-next-line 无效prop：minHeight不能大于maxHeight' // eslint-disable-next-line 无效prop：minHeight不能大于maxHeight'
...@@ -360,7 +561,7 @@ export default { ...@@ -360,7 +561,7 @@ export default {
this.BR = {} this.BR = {}
this.resetBoundsAndMouseState() this.resetBoundsAndMouseState()
}, },
mounted: function () { mounted: function() {
if (!this.enableNativeDrag) { if (!this.enableNativeDrag) {
this.$el.ondragstart = () => false this.$el.ondragstart = () => false
} }
...@@ -383,7 +584,7 @@ export default { ...@@ -383,7 +584,7 @@ export default {
// 窗口变化时，检查容器大小 // 窗口变化时，检查容器大小
addEvent(window, 'resize', this.checkParentSize) addEvent(window, 'resize', this.checkParentSize)
}, },
beforeDestroy: function () { beforeDestroy: function() {
removeEvent(document.documentElement, 'mousedown', this.deselect) removeEvent(document.documentElement, 'mousedown', this.deselect)
removeEvent(document.documentElement, 'touchstart', this.handleUp) removeEvent(document.documentElement, 'touchstart', this.handleUp)
removeEvent(document.documentElement, 'mousemove', this.move) removeEvent(document.documentElement, 'mousemove', this.move)
...@@ -504,7 +705,7 @@ export default { ...@@ -504,7 +705,7 @@ export default {
minTop: -9999, minTop: -9999,
maxTop: 9999, maxTop: 9999,
minBottom: -9999, minBottom: -9999,
maxBottom: 9999, maxBottom: 9999
} }
} else { } else {
return { return {
...@@ -515,42 +716,42 @@ export default { ...@@ -515,42 +716,42 @@ export default {
minTop: this.top % this.grid[1], minTop: this.top % this.grid[1],
maxTop: Math.floor((this.parentHeight - this.height - this.top) / this.grid[1]) * this.grid[1] + this.top, maxTop: Math.floor((this.parentHeight - this.height - this.top) / this.grid[1]) * this.grid[1] + this.top,
minBottom: this.bottom % this.grid[1], minBottom: this.bottom % this.grid[1],
maxBottom: Math.floor((this.parentHeight - this.height - this.bottom) / this.grid[1]) * this.grid[1] + this.bottom, maxBottom: Math.floor((this.parentHeight - this.height - this.bottom) / this.grid[1]) * this.grid[1] + this.bottom
}; }
} }
}, },
// 取消 // 取消
deselect(e) { deselect(e) {
const target = e.target || e.srcElement; const target = e.target || e.srcElement
const regex = new RegExp(this.className + '-([trmbl]{2})', ''); const regex = new RegExp(this.className + '-([trmbl]{2})', '')
if (!this.$el.contains(target) && !regex.test(target.className)) { if (!this.$el.contains(target) && !regex.test(target.className)) {
if (this.enabled && !this.preventDeactivation) { if (this.enabled && !this.preventDeactivation) {
this.enabled = false; this.enabled = false
this.$emit('deactivated'); this.$emit('deactivated')
this.$emit('update:active', false); this.$emit('update:active', false)
} }
removeEvent(document.documentElement, eventsFor.move, this.move); removeEvent(document.documentElement, eventsFor.move, this.move)
} }
this.resetBoundsAndMouseState(); this.resetBoundsAndMouseState()
}, },
// 控制柄触摸按下 // 控制柄触摸按下
handleTouchDown(handle, e) { handleTouchDown(handle, e) {
eventsFor = events.touch; eventsFor = events.touch
this.handleDown(handle, e); this.handleDown(handle, e)
}, },
// 控制柄按下 // 控制柄按下
handleDown(handle, e) { handleDown(handle, e) {
if (e instanceof MouseEvent && e.which !== 1) { if (e instanceof MouseEvent && e.which !== 1) {
return false; return false
} }
if (this.onResizeStart(handle, e) === false) { if (this.onResizeStart(handle, e) === false) {
return false; return false
} }
if (e.stopPropagation) e.stopPropagation(); if (e.stopPropagation) e.stopPropagation()
// 锁定纵横比时，将顶点转换为中点 - 不在需要因而将其注释 // 锁定纵横比时，将顶点转换为中点 - 不在需要因而将其注释
// if (this.lockAspectRatio && !handle.includes('m')) { // if (this.lockAspectRatio && !handle.includes('m')) {
// this.handle = 'm' + handle.substring(1) // this.handle = 'm' + handle.substring(1)
...@@ -558,7 +759,7 @@ export default { ...@@ -558,7 +759,7 @@ export default {
// this.handle = handle; // this.handle = handle;
// } // }
this.handle = handle; this.handle = handle
// 新增 // 新增
if (this.handle === 'rot') { if (this.handle === 'rot') {
this.rotating = true this.rotating = true
...@@ -567,57 +768,57 @@ export default { ...@@ -567,57 +768,57 @@ export default {
} }
// 新增保存矩形信息 // 新增保存矩形信息
// 获取父元素的位置大小信息 // 获取父元素的位置大小信息
let { top, left, width, height } = this.$el.getBoundingClientRect() const { top, left, width, height } = this.$el.getBoundingClientRect()
// 保存旋转中心的绝对坐标 // 保存旋转中心的绝对坐标
this.lastCenterX = window.pageXOffset + left + width / 2 this.lastCenterX = window.pageXOffset + left + width / 2
this.lastCenterY = window.pageYOffset + top + height / 2 this.lastCenterY = window.pageYOffset + top + height / 2
// 保存四个顶点的坐标 // 保存四个顶点的坐标
let oleft = this.left const oleft = this.left
let otop = this.top const otop = this.top
let owidth = this.width const owidth = this.width
let oheight = this.height const oheight = this.height
let centerX = oleft + owidth / 2 const centerX = oleft + owidth / 2
let centerY = otop + oheight / 2 const centerY = otop + oheight / 2
let rotate = this.rotate const rotate = this.rotate
this.TL = this.rotatedPoint(centerX, centerY, oleft, otop, rotate); this.TL = this.rotatedPoint(centerX, centerY, oleft, otop, rotate)
this.TR = this.rotatedPoint(centerX, centerY, oleft + owidth, otop, rotate); this.TR = this.rotatedPoint(centerX, centerY, oleft + owidth, otop, rotate)
this.BL = this.rotatedPoint(centerX, centerY, oleft, otop + oheight, rotate); this.BL = this.rotatedPoint(centerX, centerY, oleft, otop + oheight, rotate)
this.BR = this.rotatedPoint(centerX, centerY, oleft + owidth, otop + oheight, rotate); this.BR = this.rotatedPoint(centerX, centerY, oleft + owidth, otop + oheight, rotate)
// 保存鼠标按下时的当前状态 // 保存鼠标按下时的当前状态
this.mouseClickPosition.mouseX = e.touches ? e.touches[0].pageX : e.pageX; this.mouseClickPosition.mouseX = e.touches ? e.touches[0].pageX : e.pageX
this.mouseClickPosition.mouseY = e.touches ? e.touches[0].pageY : e.pageY; this.mouseClickPosition.mouseY = e.touches ? e.touches[0].pageY : e.pageY
this.mouseClickPosition.left = this.left; this.mouseClickPosition.left = this.left
this.mouseClickPosition.right = this.right; this.mouseClickPosition.right = this.right
this.mouseClickPosition.top = this.top; this.mouseClickPosition.top = this.top
this.mouseClickPosition.bottom = this.bottom; this.mouseClickPosition.bottom = this.bottom
this.mouseClickPosition.width = this.width; this.mouseClickPosition.width = this.width
this.mouseClickPosition.height = this.height; this.mouseClickPosition.height = this.height
// 计算边界 // 计算边界
this.bounds = this.calcResizeLimits(); this.bounds = this.calcResizeLimits()
// 添加事件 // 添加事件
addEvent(document.documentElement, eventsFor.move, this.move); addEvent(document.documentElement, eventsFor.move, this.move)
addEvent(document.documentElement, eventsFor.stop, this.handleUp); addEvent(document.documentElement, eventsFor.stop, this.handleUp)
}, },
// 计算调整大小范围 // 计算调整大小范围
calcResizeLimits() { calcResizeLimits() {
let minW = this.minW; const minW = this.minW
let minH = this.minH; const minH = this.minH
let maxW = this.maxW; let maxW = this.maxW
let maxH = this.maxH; let maxH = this.maxH
const [gridX, gridY] = this.grid; const [gridX, gridY] = this.grid
// 获取矩形信息 // 获取矩形信息
const width = this.width; const width = this.width
const height = this.height; const height = this.height
const left = this.left; const left = this.left
const top = this.top; const top = this.top
const right = this.right; const right = this.right
const bottom = this.bottom; const bottom = this.bottom
// 对齐网格 // 对齐网格
maxW = maxW - (maxW % gridX); maxW = maxW - (maxW % gridX)
maxH = maxH - (maxH % gridY); maxH = maxH - (maxH % gridY)
const limits = { const limits = {
minLeft: null, minLeft: null,
...@@ -631,7 +832,7 @@ export default { ...@@ -631,7 +832,7 @@ export default {
} }
// 边界限制 // 边界限制
if (this.parent) { if (this.parent) {
limits.minLeft = left; limits.minLeft = left
limits.maxLeft = left + Math.floor((width - minW) / gridX) limits.maxLeft = left + Math.floor((width - minW) / gridX)
limits.minTop = top limits.minTop = top
limits.maxTop = top + Math.floor((height - minH) / gridY) limits.maxTop = top + Math.floor((height - minH) / gridY)
...@@ -640,17 +841,14 @@ export default { ...@@ -640,17 +841,14 @@ export default {
limits.minBottom = bottom limits.minBottom = bottom
limits.maxBottom = bottom + Math.floor((height - minH) / gridY) limits.maxBottom = bottom + Math.floor((height - minH) / gridY)
if (maxW) { if (maxW) {
limits.minLeft = Math.max(limits.minLeft, this.parentWidth - right - maxW); limits.minLeft = Math.max(limits.minLeft, this.parentWidth - right - maxW)
limits.minRight = Math.max(limits.minRight, this.parentWidth - left - maxW); limits.minRight = Math.max(limits.minRight, this.parentWidth - left - maxW)
} }
if (maxH) { if (maxH) {
limits.minTop = Math.max(limits.minTop, this.parentHeight - bottom - maxH); limits.minTop = Math.max(limits.minTop, this.parentHeight - bottom - maxH)
limits.minBottom = Math.max(limits.minBottom, this.parentHeight - top - maxH); limits.minBottom = Math.max(limits.minBottom, this.parentHeight - top - maxH)
} }
} else { } else {
limits.minLeft = null limits.minLeft = null
...@@ -684,7 +882,7 @@ export default { ...@@ -684,7 +882,7 @@ export default {
// 移动 // 移动
move(e) { move(e) {
if (this.resizing) { if (this.resizing) {
console.log('resizing'); console.log('resizing')
this.handleResize(e) this.handleResize(e)
} else if (this.dragging) { } else if (this.dragging) {
this.handleDrag(e) this.handleDrag(e)
...@@ -721,8 +919,8 @@ export default { ...@@ -721,8 +919,8 @@ export default {
const rad = (Math.PI / 180) * rotate const rad = (Math.PI / 180) * rotate
const cos = Math.cos(rad) const cos = Math.cos(rad)
const sin = Math.sin(rad) const sin = Math.sin(rad)
let x = offsetX - originX const x = offsetX - originX
let y = offsetY - originY const y = offsetY - originY
return { return {
x: x * cos - y * sin + originX, x: x * cos - y * sin + originX,
y: x * sin + y * cos + originY y: x * sin + y * cos + originY
...@@ -761,12 +959,14 @@ export default { ...@@ -761,12 +959,14 @@ export default {
this.$emit('dragging', this.left, this.top) this.$emit('dragging', this.left, this.top)
}, },
moveHorizontally(val) { moveHorizontally(val) {
// eslint-disable-next-line no-unused-vars
const [deltaX, _] = snapToGrid(this.grid, val, this.top, this.scale) const [deltaX, _] = snapToGrid(this.grid, val, this.top, this.scale)
const left = restrictToBounds(deltaX, this.bounds.minLeft, this.bounds.maxLeft) const left = restrictToBounds(deltaX, this.bounds.minLeft, this.bounds.maxLeft)
this.left = left this.left = left
this.right = this.parentWidth - this.width - left this.right = this.parentWidth - this.width - left
}, },
moveVertically(val) { moveVertically(val) {
// eslint-disable-next-line no-unused-vars
const [_, deltaY] = snapToGrid(this.grid, this.left, val, this.scale) const [_, deltaY] = snapToGrid(this.grid, this.left, val, this.scale)
const top = restrictToBounds(deltaY, this.bounds.minTop, this.bounds.maxTop) const top = restrictToBounds(deltaY, this.bounds.minTop, this.bounds.maxTop)
this.top = top this.top = top
...@@ -779,17 +979,17 @@ export default { ...@@ -779,17 +979,17 @@ export default {
const { TL, TR, BL, BR } = this const { TL, TR, BL, BR } = this
const { x: mouseX, y: mouseY } = this.getMouseCoordinate(e) const { x: mouseX, y: mouseY } = this.getMouseCoordinate(e)
// 获取鼠标移动的坐标差 // 获取鼠标移动的坐标差
let deltaX = mouseX - this.mouseClickPosition.mouseX const deltaX = mouseX - this.mouseClickPosition.mouseX
let deltaY = mouseY - this.mouseClickPosition.mouseY const deltaY = mouseY - this.mouseClickPosition.mouseY
let diffX, diffY, scale, scaleB, scaleC, newX, newY, newW, newH let diffX, diffY, scale, scaleB, scaleC, newX, newY, newW, newH
let Fixed = {} // 固定点 let Fixed = {} // 固定点
let BX = {} // 高度边选点 let BX = {} // 高度边选点
let CX = {} // 宽度边选点 let CX = {} // 宽度边选点
let Va = {} // 固定点到鼠标 向量 let Va = {} // 固定点到鼠标 向量
let Vb = {} // 固定点到投影边 向量 let Vb = {} // 固定点到投影边 向量
let Vc = {} // 另一边投影 let Vc = {} // 另一边投影
let Vw = {}; // 宽度向量 let Vw = {} // 宽度向量
let Vh = {} // 高度向量 let Vh = {} // 高度向量
// 拖动中点 // 拖动中点
if (handle.includes('m')) { if (handle.includes('m')) {
switch (handle) { switch (handle) {
...@@ -804,7 +1004,7 @@ export default { ...@@ -804,7 +1004,7 @@ export default {
scale = (Va.x * Vb.x + Va.y * Vb.y) / (Math.pow(Vb.x, 2) + Math.pow(Vb.y, 2)) scale = (Va.x * Vb.x + Va.y * Vb.y) / (Math.pow(Vb.x, 2) + Math.pow(Vb.y, 2))
Vw = { x: CX.x - Fixed.x, y: CX.y - Fixed.y } Vw = { x: CX.x - Fixed.x, y: CX.y - Fixed.y }
Vh = { x: Vb.x * scale, y: Vb.y * scale } Vh = { x: Vb.x * scale, y: Vb.y * scale }
break; break
case 'bm': case 'bm':
diffX = deltaX + (BL.x + BR.x) / 2 diffX = deltaX + (BL.x + BR.x) / 2
diffY = deltaY + (BL.y + BR.y) / 2 diffY = deltaY + (BL.y + BR.y) / 2
...@@ -816,7 +1016,7 @@ export default { ...@@ -816,7 +1016,7 @@ export default {
scale = (Va.x * Vb.x + Va.y * Vb.y) / (Math.pow(Vb.x, 2) + Math.pow(Vb.y, 2)) scale = (Va.x * Vb.x + Va.y * Vb.y) / (Math.pow(Vb.x, 2) + Math.pow(Vb.y, 2))
Vw = { x: CX.x - Fixed.x, y: CX.y - Fixed.y } Vw = { x: CX.x - Fixed.x, y: CX.y - Fixed.y }
Vh = { x: Vb.x * scale, y: Vb.y * scale } Vh = { x: Vb.x * scale, y: Vb.y * scale }
break; break
case 'ml': case 'ml':
diffX = deltaX + (TL.x + BL.x) / 2 diffX = deltaX + (TL.x + BL.x) / 2
diffY = deltaY + (TL.y + BL.y) / 2 diffY = deltaY + (TL.y + BL.y) / 2
...@@ -828,7 +1028,7 @@ export default { ...@@ -828,7 +1028,7 @@ export default {
scale = (Va.x * Vb.x + Va.y * Vb.y) / (Math.pow(Vb.x, 2) + Math.pow(Vb.y, 2)) scale = (Va.x * Vb.x + Va.y * Vb.y) / (Math.pow(Vb.x, 2) + Math.pow(Vb.y, 2))
Vh = { x: CX.x - Fixed.x, y: CX.y - Fixed.y } Vh = { x: CX.x - Fixed.x, y: CX.y - Fixed.y }
Vw = { x: Vb.x * scale, y: Vb.y * scale } Vw = { x: Vb.x * scale, y: Vb.y * scale }
break; break
case 'mr': case 'mr':
diffX = deltaX + (TR.x + TR.x) / 2 diffX = deltaX + (TR.x + TR.x) / 2
diffY = deltaY + (TR.y + TR.y) / 2 diffY = deltaY + (TR.y + TR.y) / 2
...@@ -840,9 +1040,9 @@ export default { ...@@ -840,9 +1040,9 @@ export default {
scale = (Va.x * Vb.x + Va.y * Vb.y) / (Math.pow(Vb.x, 2) + Math.pow(Vb.y, 2)) scale = (Va.x * Vb.x + Va.y * Vb.y) / (Math.pow(Vb.x, 2) + Math.pow(Vb.y, 2))
Vh = { x: CX.x - Fixed.x, y: CX.y - Fixed.y } Vh = { x: CX.x - Fixed.x, y: CX.y - Fixed.y }
Vw = { x: Vb.x * scale, y: Vb.y * scale } Vw = { x: Vb.x * scale, y: Vb.y * scale }
break; break
default: default:
break; break
} }
newX = Fixed.x + (Vw.x + Vh.x) / 2 newX = Fixed.x + (Vw.x + Vh.x) / 2
newY = Fixed.y + (Vw.y + Vh.y) / 2 newY = Fixed.y + (Vw.y + Vh.y) / 2
...@@ -857,30 +1057,30 @@ export default { ...@@ -857,30 +1057,30 @@ export default {
Fixed = BR Fixed = BR
BX = BL // 高度 TL BL BX = BL // 高度 TL BL
CX = TR // 宽度 TL TR CX = TR // 宽度 TL TR
break; break
case 'tr': case 'tr':
diffX = deltaX + TR.x diffX = deltaX + TR.x
diffY = deltaY + TR.y diffY = deltaY + TR.y
Fixed = BL Fixed = BL
BX = BR BX = BR
CX = TL CX = TL
break; break
case 'bl': case 'bl':
diffX = deltaX + BL.x diffX = deltaX + BL.x
diffY = deltaY + BL.y diffY = deltaY + BL.y
Fixed = TR Fixed = TR
BX = TL BX = TL
CX = BR CX = BR
break; break
case 'br': case 'br':
diffX = deltaX + BR.x diffX = deltaX + BR.x
diffY = deltaY + BR.y diffY = deltaY + BR.y
Fixed = TL Fixed = TL
BX = TR BX = TR
CX = BL CX = BL
break; break
default: default:
break; break
} }
Va = { x: diffX - Fixed.x, y: diffY - Fixed.y } Va = { x: diffX - Fixed.x, y: diffY - Fixed.y }
Vb = { x: BX.x - Fixed.x, y: BX.y - Fixed.y } Vb = { x: BX.x - Fixed.x, y: BX.y - Fixed.y }
...@@ -896,28 +1096,28 @@ export default { ...@@ -896,28 +1096,28 @@ export default {
} }
// 边界限制(矩形的外接圆不能超出父盒子) // 边界限制(矩形的外接圆不能超出父盒子)
let bounds = this.bounds const bounds = this.bounds
if (this.rotatable) { if (this.rotatable) {
this.left = newX - newW / 2 this.left = newX - newW / 2
this.top = newY - newH / 2 this.top = newY - newH / 2
this.width = newW this.width = newW
this.height = newH this.height = newH
} else { } else {
this.left = restrictToBounds(newX - newW / 2, bounds.minLeft, bounds.maxLeft); this.left = restrictToBounds(newX - newW / 2, bounds.minLeft, bounds.maxLeft)
this.top = restrictToBounds(newY - newH / 2, bounds.minTop, bounds.maxTop); this.top = restrictToBounds(newY - newH / 2, bounds.minTop, bounds.maxTop)
if (this.parent) { if (this.parent) {
newW = newW <= this.parentWidth ? newW : this.parentWidth newW = newW <= this.parentWidth ? newW : this.parentWidth
newH = newH <= this.parentHeight ? newH : this.parentHeight newH = newH <= this.parentHeight ? newH : this.parentHeight
} }
this.width = restrictToBounds(newW, this.minW, this.maxW); this.width = restrictToBounds(newW, this.minW, this.maxW)
this.height = restrictToBounds(newH, this.minH, this.maxH); this.height = restrictToBounds(newH, this.minH, this.maxH)
} }
this.$emit('resizing', this.left, this.top, this.width, this.height) this.$emit('resizing', this.left, this.top, this.width, this.height)
}, },
changeWidth(val) { changeWidth(val) {
// eslint-disable-next-line no-unused-vars
const [newWidth, _] = snapToGrid(this.grid, val, 0, this.scale) const [newWidth, _] = snapToGrid(this.grid, val, 0, this.scale)
const right = restrictToBounds(this.parentWidth - newWidth - this.left, this.bounds.minRight, this.bounds.maxRight) const right = restrictToBounds(this.parentWidth - newWidth - this.left, this.bounds.minRight, this.bounds.maxRight)
let bottom = this.bottom let bottom = this.bottom
...@@ -932,6 +1132,7 @@ export default { ...@@ -932,6 +1132,7 @@ export default {
this.height = height this.height = height
}, },
changeHeight(val) { changeHeight(val) {
// eslint-disable-next-line no-unused-vars
const [_, newHeight] = snapToGrid(this.grid, 0, val, this.scale) const [_, newHeight] = snapToGrid(this.grid, 0, val, this.scale)
const bottom = restrictToBounds(this.parentHeight - newHeight - this.top, this.bounds.minBottom, this.bounds.maxBottom) const bottom = restrictToBounds(this.parentHeight - newHeight - this.top, this.bounds.minBottom, this.bounds.maxBottom)
let right = this.right let right = this.right
...@@ -949,10 +1150,10 @@ export default { ...@@ -949,10 +1150,10 @@ export default {
async handleUp(e) { async handleUp(e) {
this.handle = null this.handle = null
// 初始化辅助线数据 // 初始化辅助线数据
const temArr = new Array(3).fill({ display: false, position: '', origin: '', lineLength: '' }); const temArr = new Array(3).fill({ display: false, position: '', origin: '', lineLength: '' })
const refLine = { vLine: [], hLine: [] }; const refLine = { vLine: [], hLine: [] }
for (const i in refLine) { for (const i in refLine) {
refLine[i] = JSON.parse(JSON.stringify(temArr)); refLine[i] = JSON.parse(JSON.stringify(temArr))
} }
// 保存 鼠标松开的坐标 // 保存 鼠标松开的坐标
const { x: mouseX, y: mouseY } = this.getMouseCoordinate(e) const { x: mouseX, y: mouseY } = this.getMouseCoordinate(e)
...@@ -961,14 +1162,14 @@ export default { ...@@ -961,14 +1162,14 @@ export default {
if (this.resizing) { if (this.resizing) {
this.resizing = false this.resizing = false
await this.conflictCheck(); await this.conflictCheck()
this.$emit('refLineParams', refLine); this.$emit('refLineParams', refLine)
this.$emit('resizestop', this.left, this.top, this.width, this.height) this.$emit('resizestop', this.left, this.top, this.width, this.height)
} }
if (this.dragging) { if (this.dragging) {
this.dragging = false this.dragging = false
await this.conflictCheck(); await this.conflictCheck()
this.$emit('refLineParams', refLine); this.$emit('refLineParams', refLine)
this.$emit('dragstop', this.left, this.top) this.$emit('dragstop', this.left, this.top)
} }
if (this.rotating) { if (this.rotating) {
...@@ -1042,16 +1243,16 @@ export default { ...@@ -1042,16 +1243,16 @@ export default {
let activeBottom = this.top + height let activeBottom = this.top + height
// 初始化辅助线数据 // 初始化辅助线数据
const temArr = new Array(3).fill({ display: false, position: '', origin: '', lineLength: '' }); const temArr = new Array(3).fill({ display: false, position: '', origin: '', lineLength: '' })
const refLine = { vLine: [], hLine: [] }; const refLine = { vLine: [], hLine: [] }
for (const i in refLine) { for (const i in refLine) {
refLine[i] = JSON.parse(JSON.stringify(temArr)); refLine[i] = JSON.parse(JSON.stringify(temArr))
} }
const tem = { const tem = {
value: { x: [[], [], []], y: [[], [], []] }, value: { x: [[], [], []], y: [[], [], []] },
display: [], display: [],
position: [] position: []
}; }
// 获取当前父节点下所有子节点 // 获取当前父节点下所有子节点
const nodes = this.$el.parentNode.childNodes const nodes = this.$el.parentNode.childNodes
// 当允许多个同时激活时，获取总体的属性 // 当允许多个同时激活时，获取总体的属性
...@@ -1085,8 +1286,8 @@ export default { ...@@ -1085,8 +1286,8 @@ export default {
const hc = Math.abs((activeTop + height / 2) - (t + h / 2)) <= this.snapTolerance // 水平中线 const hc = Math.abs((activeTop + height / 2) - (t + h / 2)) <= this.snapTolerance // 水平中线
const vc = Math.abs((activeLeft + width / 2) - (l + w / 2)) <= this.snapTolerance // 垂直中线 const vc = Math.abs((activeLeft + width / 2) - (l + w / 2)) <= this.snapTolerance // 垂直中线
const ts = Math.abs(t - activeBottom) <= this.snapTolerance; // 从上到下 const ts = Math.abs(t - activeBottom) <= this.snapTolerance // 从上到下
const TS = Math.abs(b - activeBottom) <= this.snapTolerance; // 从上到下 const TS = Math.abs(b - activeBottom) <= this.snapTolerance // 从上到下
const bs = Math.abs(t - activeTop) <= this.snapTolerance // 从下到上 上边共线 const bs = Math.abs(t - activeTop) <= this.snapTolerance // 从下到上 上边共线
const BS = Math.abs(b - activeTop) <= this.snapTolerance // 从下到上 const BS = Math.abs(b - activeTop) <= this.snapTolerance // 从下到上
...@@ -1096,61 +1297,61 @@ export default { ...@@ -1096,61 +1297,61 @@ export default {
const rs = Math.abs(l - activeLeft) <= this.snapTolerance // 外右 const rs = Math.abs(l - activeLeft) <= this.snapTolerance // 外右
const RS = Math.abs(r - activeLeft) <= this.snapTolerance // 外右 const RS = Math.abs(r - activeLeft) <= this.snapTolerance // 外右
tem.display = [ts, TS, bs, BS, hc, hc, ls, LS, rs, RS, vc, vc]; tem.display = [ts, TS, bs, BS, hc, hc, ls, LS, rs, RS, vc, vc]
tem.position = [t, b, t, b, t + h / 2, t + h / 2, l, r, l, r, l + w / 2, l + w / 2]; tem.position = [t, b, t, b, t + h / 2, t + h / 2, l, r, l, r, l + w / 2, l + w / 2]
// 单个可激活元素与其他元素对齐 // 单个可激活元素与其他元素对齐
if (bln) { if (bln) {
if (ts) { if (ts) {
this.top = t - height this.top = t - height
this.bottom = this.parentHeight - this.top - height this.bottom = this.parentHeight - this.top - height
tem.value.y[0].push(l, r, activeLeft, activeRight); tem.value.y[0].push(l, r, activeLeft, activeRight)
} }
if (bs) { if (bs) {
this.top = t this.top = t
this.bottom = this.parentHeight - this.top - height this.bottom = this.parentHeight - this.top - height
tem.value.y[0].push(l, r, activeLeft, activeRight); tem.value.y[0].push(l, r, activeLeft, activeRight)
} }
if (TS) { if (TS) {
this.top = b - height this.top = b - height
this.bottom = this.parentHeight - this.top - height this.bottom = this.parentHeight - this.top - height
tem.value.y[1].push(l, r, activeLeft, activeRight); tem.value.y[1].push(l, r, activeLeft, activeRight)
} }
if (BS) { if (BS) {
this.top = b this.top = b
this.bottom = this.parentHeight - this.top - height this.bottom = this.parentHeight - this.top - height
tem.value.y[1].push(l, r, activeLeft, activeRight); tem.value.y[1].push(l, r, activeLeft, activeRight)
} }
if (ls) { if (ls) {
this.left = l - width this.left = l - width
this.right = this.parentWidth - this.left - width this.right = this.parentWidth - this.left - width
tem.value.x[0].push(t, b, activeTop, activeBottom); tem.value.x[0].push(t, b, activeTop, activeBottom)
} }
if (rs) { if (rs) {
this.left = l this.left = l
this.right = this.parentWidth - this.left - width this.right = this.parentWidth - this.left - width
tem.value.x[0].push(t, b, activeTop, activeBottom); tem.value.x[0].push(t, b, activeTop, activeBottom)
} }
if (LS) { if (LS) {
this.left = r - width this.left = r - width
this.right = this.parentWidth - this.left - width this.right = this.parentWidth - this.left - width
tem.value.x[1].push(t, b, activeTop, activeBottom); tem.value.x[1].push(t, b, activeTop, activeBottom)
} }
if (RS) { if (RS) {
this.left = r this.left = r
this.right = this.parentWidth - this.left - width this.right = this.parentWidth - this.left - width
tem.value.x[1].push(t, b, activeTop, activeBottom); tem.value.x[1].push(t, b, activeTop, activeBottom)
} }
if (hc) { if (hc) {
this.top = t + h / 2 - height / 2 this.top = t + h / 2 - height / 2
this.bottom = this.parentHeight - this.top - height this.bottom = this.parentHeight - this.top - height
tem.value.y[2].push(l, r, activeLeft, activeRight); tem.value.y[2].push(l, r, activeLeft, activeRight)
} }
if (vc) { if (vc) {
this.left = l + w / 2 - width / 2 this.left = l + w / 2 - width / 2
this.right = this.parentWidth - this.left - width this.right = this.parentWidth - this.left - width
tem.value.x[2].push(t, b, activeTop, activeBottom); tem.value.x[2].push(t, b, activeTop, activeBottom)
} }
// 和容器贴边 // 和容器贴边
if (this.snapBorder) { if (this.snapBorder) {
...@@ -1173,279 +1374,79 @@ export default { ...@@ -1173,279 +1374,79 @@ export default {
} }
} }
// 再次进行边界处理 // 再次进行边界处理
let bounds = this.bounds const bounds = this.bounds
this.left = restrictToBounds(this.left, bounds.minLeft, bounds.maxLeft); this.left = restrictToBounds(this.left, bounds.minLeft, bounds.maxLeft)
this.top = restrictToBounds(this.top, bounds.minTop, bounds.maxTop); this.top = restrictToBounds(this.top, bounds.minTop, bounds.maxTop)
this.right = restrictToBounds(this.right, bounds.minRight, bounds.maxRight); this.right = restrictToBounds(this.right, bounds.minRight, bounds.maxRight)
this.bottom = restrictToBounds(this.bottom, bounds.minBottom, bounds.maxBottom); this.bottom = restrictToBounds(this.bottom, bounds.minBottom, bounds.maxBottom)
// 辅助线坐标与是否显示(display)对应的数组,易于循环遍历 // 辅助线坐标与是否显示(display)对应的数组,易于循环遍历
const arrTem = [0, 1, 0, 1, 2, 2, 0, 1, 0, 1, 2, 2]; const arrTem = [0, 1, 0, 1, 2, 2, 0, 1, 0, 1, 2, 2]
for (let i = 0; i <= arrTem.length; i++) { for (let i = 0; i <= arrTem.length; i++) {
// 前6为Y辅助线,后6为X辅助线 // 前6为Y辅助线,后6为X辅助线
const xory = i < 6 ? 'y' : 'x'; const xory = i < 6 ? 'y' : 'x'
const horv = i < 6 ? 'hLine' : 'vLine'; const horv = i < 6 ? 'hLine' : 'vLine'
if (tem.display[i]) { if (tem.display[i]) {
const { origin, length } = this.calcLineValues(tem.value[xory][arrTem[i]]); const { origin, length } = this.calcLineValues(tem.value[xory][arrTem[i]])
refLine[horv][arrTem[i]].display = tem.display[i]; refLine[horv][arrTem[i]].display = tem.display[i]
refLine[horv][arrTem[i]].position = tem.position[i] + 'px'; refLine[horv][arrTem[i]].position = tem.position[i] + 'px'
refLine[horv][arrTem[i]].origin = origin; refLine[horv][arrTem[i]].origin = origin
refLine[horv][arrTem[i]].lineLength = length; refLine[horv][arrTem[i]].lineLength = length
} }
} }
} }
} }
} }
this.$emit('refLineParams', refLine); this.$emit('refLineParams', refLine)
} }
}, },
// 计算参考线 // 计算参考线
calcLineValues(arr) { calcLineValues(arr) {
const length = Math.max(...arr) - Math.min(...arr) + 'px'; const length = Math.max(...arr) - Math.min(...arr) + 'px'
const origin = Math.min(...arr) + 'px'; const origin = Math.min(...arr) + 'px'
return { length, origin }; return { length, origin }
}, },
async getActiveAll(nodes) { async getActiveAll(nodes) {
const activeAll = []; const activeAll = []
const XArray = []; const XArray = []
const YArray = []; const YArray = []
let groupWidth = 0; let groupWidth = 0
let groupHeight = 0; let groupHeight = 0
let groupLeft = 0; let groupLeft = 0
let groupTop = 0; let groupTop = 0
for (const item of nodes) { for (const item of nodes) {
// 修复判断条件 // 修复判断条件
if (item.className !== undefined && item.className.split(' ').includes(this.classNameActive)) { if (item.className !== undefined && item.className.split(' ').includes(this.classNameActive)) {
activeAll.push(item); activeAll.push(item)
} }
} }
const AllLength = activeAll.length; const AllLength = activeAll.length
if (AllLength > 1) { if (AllLength > 1) {
for (const i of activeAll) { for (const i of activeAll) {
const l = i.offsetLeft; const l = i.offsetLeft
const r = l + i.offsetWidth; const r = l + i.offsetWidth
const t = i.offsetTop; const t = i.offsetTop
const b = t + i.offsetHeight; const b = t + i.offsetHeight
XArray.push(l, r); XArray.push(l, r)
YArray.push(t, b); YArray.push(t, b)
} }
groupWidth = Math.max(...XArray) - Math.min(...XArray) groupWidth = Math.max(...XArray) - Math.min(...XArray)
groupHeight = Math.max(...YArray) - Math.min(...YArray) groupHeight = Math.max(...YArray) - Math.min(...YArray)
groupLeft = Math.min(...XArray) groupLeft = Math.min(...XArray)
groupTop = Math.min(...YArray) groupTop = Math.min(...YArray)
} }
const bln = AllLength === 1; const bln = AllLength === 1
return { groupWidth, groupHeight, groupLeft, groupTop, bln }; return { groupWidth, groupHeight, groupLeft, groupTop, bln }
}, },
// 修复 正则获取left与top // 修复 正则获取left与top
formatTransformVal(string) { formatTransformVal(string) {
let [left, top, rotate = 0] = string.match(/[\d|\.]+/g); // eslint-disable-next-line prefer-const
if (top === undefined) top = 0; let [left, top, rotate = 0] = string.match(/[\d|\.]+/g)
return [Number(left), Number(top), rotate]; if (top === undefined) top = 0
} return [Number(left), Number(top), rotate]
},
computed: {
handleStyle() {
return (stick, index) => {
if (!this.handleInfo.switch) return { display: this.enabled ? 'block' : 'none' };
// 新增 当没有开启旋转的时候，旋转手柄不显示
if (stick === 'rot' && !this.rotatable) return { display: 'none' };
const size = (this.handleInfo.size / this.scaleRatio).toFixed(2);
const offset = (this.handleInfo.offset / this.scaleRatio).toFixed(2);
const center = (size / 2).toFixed(2);
const styleMap = {
tl: {
top: `${offset}px`,
left: `${offset}px`
},
tm: {
top: `${offset}px`,
left: `calc(50% - ${center}px)`
},
tr: {
top: `${offset}px`,
right: `${offset}px`
},
mr: {
top: `calc(50% - ${center}px)`,
right: `${offset}px`
},
br: {
bottom: `${offset}px`,
right: `${offset}px`
},
bm: {
bottom: `${offset}px`,
right: `calc(50% - ${center}px)`
},
bl: {
bottom: `${offset}px`,
left: `${offset}px`
},
ml: {
top: `calc(50% - ${center}px)`,
left: `${offset}px`
},
rot: {}
};
const stickStyle = {
width: `${size}px`,
height: `${size}px`,
top: styleMap[stick].top,
left: styleMap[stick].left,
right: styleMap[stick].right,
bottom: styleMap[stick].bottom
}
// 新增 让控制手柄的鼠标样式跟随玄幻角度变化
if (stick !== 'rot') {
const cursorStyleArray = ['nw-resize', 'n-resize', 'ne-resize', 'e-resize', 'se-resize', 's-resize', 'sw-resize', 'w-resize']
const STEP = 45
const rotate = this.rotate + STEP / 2
const deltaIndex = Math.floor(rotate / STEP)
index = (index + deltaIndex) % 8
stickStyle.cursor = cursorStyleArray[index]
}
stickStyle.display = this.enabled ? 'block' : 'none'
return stickStyle
}
},
style() {
return {
transform: `translate(${this.left}px, ${this.top}px) rotate(${this.rotate}deg)`,
width: this.computedWidth,
height: this.computedHeight,
zIndex: this.zIndex,
...(this.dragging && this.disableUserSelect ? userSelectNone : userSelectAuto)
};
},
// 控制柄显示与否
actualHandles() {
if (!this.resizable) return [];
return this.handles;
},
// 根据left right 算出元素的宽度
computedWidth() {
if (this.w === 'auto') {
if (!this.widthTouched) {
return 'auto';
}
}
return this.width + 'px';
},
// 根据top bottom 算出元素的宽度
computedHeight() {
if (this.h === 'auto') {
if (!this.heightTouched) {
return 'auto';
}
}
return this.height + 'px';
},
// 表示只修改宽度
resizingOnX() {
return Boolean(this.handle) && (this.handle.includes('l') || this.handle.includes('r'));
},
// 表示只修改高度
resizingOnY() {
return Boolean(this.handle) && (this.handle.includes('t') || this.handle.includes('b'));
},
// 表示正在调整边角
isCornerHandle() {
return Boolean(this.handle) && ['tl', 'tr', 'br', 'bl'].includes(this.handle);
}
},
watch: {
active(val) {
this.enabled = val;
if (val) {
this.$emit('activated');
} else {
this.$emit('deactivated');
}
},
z(val) {
if (val >= 0 || val === 'auto') {
this.zIndex = val;
}
},
x(val) {
if (this.resizing || this.dragging) {
return;
}
if (this.parent) {
this.bounds = this.calcDragLimits();
}
this.moveHorizontally(val);
},
y(val) {
if (this.resizing || this.dragging) {
return;
}
if (this.parent) {
this.bounds = this.calcDragLimits();
}
this.moveVertically(val);
},
// 新增 监听外部传入参数 旋转角度
r(val) {
if (val >= 0) {
this.rotate = val % 360;
}
},
lockAspectRatio(val) {
if (val) {
this.aspectFactor = this.width / this.height;
} else {
this.aspectFactor = undefined;
}
},
minWidth(val) {
if (val > 0 && val <= this.width) {
this.minW = val;
}
},
minHeight(val) {
if (val > 0 && val <= this.height) {
this.minH = val;
}
},
maxWidth(val) {
this.maxW = val;
},
maxHeight(val) {
this.maxH = val;
},
w(val) {
if (this.resizing || this.dragging) {
return;
}
if (this.parent) {
this.bounds = this.calcResizeLimits();
}
this.changeWidth(val);
},
h(val) {
if (this.resizing || this.dragging) {
return;
}
if (this.parent) {
this.bounds = this.calcResizeLimits();
}
this.changeHeight(val);
} }
} }
}; }
</script> </script>
<style scoped> <style scoped>
......
frontend/src/main.js
浏览文件 @ 2441edd1
...@@ -21,7 +21,6 @@ import directives from './directive' ...@@ -21,7 +21,6 @@ import directives from './directive'
import './styles/vdrr/common-temp.scss' import './styles/vdrr/common-temp.scss'
import vdrr from './components/vue-drag-resize-rotate' import vdrr from './components/vue-drag-resize-rotate'
Vue.component('vdrr', vdrr) Vue.component('vdrr', vdrr)
......
frontend/src/views/panel/list/PanelPreview.vue
浏览文件 @ 2441edd1
<template xmlns:el-col="http://www.w3.org/1999/html"> <template xmlns:el-col="http://www.w3.org/1999/html">
<el-row style="height: 100%;overflow-y: hidden;width: 100%;"> <el-row style="height: 100%;overflow-y: hidden;width: 100%;">
<span>仪表盘名称：{{panelName}}</span> <span>仪表盘名称：{{ panelName }}</span>
</el-row> </el-row>
</template> </template>
<script> <script>
import {loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree} from '@/api/dataset/dataset' import { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree } from '@/api/dataset/dataset'
export default { export default {
name: 'PanelView', name: 'PanelView',
data() { data() {
return { return {
sceneMode: false, sceneMode: false,
dialogTitle: '', dialogTitle: '',
search: '', search: '',
editGroup: false, editGroup: false,
editTable: false, editTable: false,
tData: [], tData: [],
tableData: [], tableData: [],
currGroup: {}, currGroup: {},
expandedArray: [], expandedArray: [],
groupForm: { groupForm: {
name: '', name: '',
pid: null, pid: null,
level: 0, level: 0,
type: '', type: '',
children: [], children: [],
sort: 'type desc,name asc' sort: 'type desc,name asc'
}, },
tableForm: { tableForm: {
name: '', name: '',
mode: '', mode: '',
sort: 'type asc,create_time desc,name asc' sort: 'type asc,create_time desc,name asc'
}, },
groupFormRules: { groupFormRules: {
name: [ name: [
{required: true, message: this.$t('commons.input_content'), trigger: 'blur'} { required: true, message: this.$t('commons.input_content'), trigger: 'blur' }
] ]
}, },
tableFormRules: { tableFormRules: {
name: [ name: [
{required: true, message: this.$t('commons.input_content'), trigger: 'blur'} { required: true, message: this.$t('commons.input_content'), trigger: 'blur' }
], ],
mode: [ mode: [
{required: true, message: this.$t('commons.input_content'), trigger: 'blur'} { required: true, message: this.$t('commons.input_content'), trigger: 'blur' }
] ]
}
} }
}
},
computed: {
panelName: function() {
console.log(this.$store.state.panel.panelName)
return this.$store.state.panel.panelName
}
},
watch: {
// search(val){
// this.groupForm.name = val;
// this.tree(this.groupForm);
// }
},
mounted() {
this.tree(this.groupForm)
this.refresh()
this.tableTree()
// this.$router.push('/dataset');
},
methods: {
clickAdd(param) {
// console.log(param);
this.add(param.type)
this.groupForm.pid = param.data.id
this.groupForm.level = param.data.level + 1
}, },
computed: {
panelName: function () { beforeClickAdd(type, data, node) {
console.log(this.$store.state.panel.panelName) return {
return this.$store.state.panel.panelName 'type': type,
'data': data,
'node': node
} }
}, },
watch: {
// search(val){
// this.groupForm.name = val;
// this.tree(this.groupForm);
// }
},
mounted() {
this.tree(this.groupForm)
this.refresh()
this.tableTree()
// this.$router.push('/dataset');
},
methods: {
clickAdd(param) {
// console.log(param);
this.add(param.type)
this.groupForm.pid = param.data.id
this.groupForm.level = param.data.level + 1
},
beforeClickAdd(type, data, node) { clickMore(param) {
return { console.log(param)
'type': type, switch (param.type) {
'data': data, case 'rename':
'node': node this.add(param.data.type)
} this.groupForm = JSON.parse(JSON.stringify(param.data))
}, break
case 'move':
clickMore(param) { break
console.log(param) case 'delete':
switch (param.type) { this.delete(param.data)
case 'rename': break
this.add(param.data.type) case 'editTable':
this.groupForm = JSON.parse(JSON.stringify(param.data)) this.editTable = true
break this.tableForm = JSON.parse(JSON.stringify(param.data))
case 'move': this.tableForm.mode = this.tableForm.mode + ''
break
break case 'deleteTable':
case 'delete': this.deleteTable(param.data)
this.delete(param.data) break
break }
case 'editTable': },
this.editTable = true
this.tableForm = JSON.parse(JSON.stringify(param.data))
this.tableForm.mode = this.tableForm.mode + ''
break
case 'deleteTable':
this.deleteTable(param.data)
break
}
},
beforeClickMore(type, data, node) {
return {
'type': type,
'data': data,
'node': node
}
},
add(type) {
switch (type) {
case 'group':
this.dialogTitle = this.$t('dataset.group')
break
case 'scene':
this.dialogTitle = this.$t('dataset.scene')
break
}
this.groupForm.type = type
this.editGroup = true
},
saveGroup(group) { beforeClickMore(type, data, node) {
// console.log(group); return {
this.$refs['groupForm'].validate((valid) => { 'type': type,
if (valid) { 'data': data,
addGroup(group).then(res => { 'node': node
this.close() }
this.$message({ },
message: this.$t('commons.save_success'),
type: 'success',
showClose: true
})
this.tree(this.groupForm)
})
} else {
this.$message({
message: this.$t('commons.input_content'),
type: 'error',
showClose: true
})
return false
}
})
},
saveTable(table) { add(type) {
// console.log(table) switch (type) {
table.mode = parseInt(table.mode) case 'group':
this.$refs['tableForm'].validate((valid) => { this.dialogTitle = this.$t('dataset.group')
if (valid) { break
addTable(table).then(response => { case 'scene':
this.closeTable() this.dialogTitle = this.$t('dataset.scene')
this.$message({ break
message: this.$t('commons.save_success'), }
type: 'success', this.groupForm.type = type
showClose: true this.editGroup = true
}) },
this.tableTree()
// this.$router.push('/dataset/home')
this.$emit('switchComponent', {name: ''})
this.$store.dispatch('dataset/setTable', null)
})
} else {
this.$message({
message: this.$t('commons.input_content'),
type: 'error',
showClose: true
})
return false
}
})
},
delete(data) { saveGroup(group) {
this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), { // console.log(group);
confirmButtonText: this.$t('dataset.confirm'), this.$refs['groupForm'].validate((valid) => {
cancelButtonText: this.$t('dataset.cancel'), if (valid) {
type: 'warning' addGroup(group).then(res => {
}).then(() => { this.close()
delGroup(data.id).then(response => {
this.$message({ this.$message({
message: this.$t('commons.save_success'),
type: 'success', type: 'success',
message: this.$t('dataset.delete_success'),
showClose: true showClose: true
}) })
this.tree(this.groupForm) this.tree(this.groupForm)
}) })
}).catch(() => { } else {
}) this.$message({
}, message: this.$t('commons.input_content'),
type: 'error',
showClose: true
})
return false
}
})
},
deleteTable(data) { saveTable(table) {
this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), { // console.log(table)
confirmButtonText: this.$t('dataset.confirm'), table.mode = parseInt(table.mode)
cancelButtonText: this.$t('dataset.cancel'), this.$refs['tableForm'].validate((valid) => {
type: 'warning' if (valid) {
}).then(() => { addTable(table).then(response => {
delTable(data.id).then(response => { this.closeTable()
this.$message({ this.$message({
message: this.$t('commons.save_success'),
type: 'success', type: 'success',
message: this.$t('dataset.delete_success'),
showClose: true showClose: true
}) })
this.tableTree() this.tableTree()
// this.$router.push('/dataset/home') // this.$router.push('/dataset/home')
this.$emit('switchComponent', {name: ''}) this.$emit('switchComponent', { name: '' })
this.$store.dispatch('dataset/setTable', null) this.$store.dispatch('dataset/setTable', null)
}) })
}).catch(() => { } else {
}) this.$message({
}, message: this.$t('commons.input_content'),
type: 'error',
close() { showClose: true
this.editGroup = false })
this.groupForm = { return false
name: '',
pid: null,
level: 0,
type: '',
children: [],
sort: 'type desc,name asc'
}
},
closeTable() {
this.editTable = false
this.tableForm = {
name: ''
} }
}, })
},
tree(group) { delete(data) {
groupTree(group).then(res => { this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), {
this.tData = res.data confirmButtonText: this.$t('dataset.confirm'),
cancelButtonText: this.$t('dataset.cancel'),
type: 'warning'
}).then(() => {
delGroup(data.id).then(response => {
this.$message({
type: 'success',
message: this.$t('dataset.delete_success'),
showClose: true
})
this.tree(this.groupForm)
}) })
}, }).catch(() => {
})
},
tableTree() { deleteTable(data) {
this.tableData = [] this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), {
if (this.currGroup.id) { confirmButtonText: this.$t('dataset.confirm'),
loadTable({ cancelButtonText: this.$t('dataset.cancel'),
sort: 'type asc,create_time desc,name asc', type: 'warning'
sceneId: this.currGroup.id }).then(() => {
}).then(res => { delTable(data.id).then(response => {
this.tableData = res.data this.$message({
type: 'success',
message: this.$t('dataset.delete_success'),
showClose: true
}) })
} this.tableTree()
}, // this.$router.push('/dataset/home')
this.$emit('switchComponent', { name: '' })
this.$store.dispatch('dataset/setTable', null)
})
}).catch(() => {
})
},
nodeClick(data, node) { close() {
// console.log(data); this.editGroup = false
// console.log(node); this.groupForm = {
if (data.type === 'scene') { name: '',
this.sceneMode = true pid: null,
this.currGroup = data level: 0,
this.$store.dispatch('dataset/setSceneData', this.currGroup.id) type: '',
} children: [],
if (node.expanded) { sort: 'type desc,name asc'
this.expandedArray.push(data.id) }
} else { },
const index = this.expandedArray.indexOf(data.id)
if (index > -1) {
this.expandedArray.splice(index, 1)
}
}
// console.log(this.expandedArray);
},
back() { closeTable() {
this.sceneMode = false this.editTable = false
// const route = this.$store.state.permission.currentRoutes this.tableForm = {
// console.log(route) name: ''
// this.$router.push('/dataset/index') }
this.$store.dispatch('dataset/setSceneData', null) },
this.$emit('switchComponent', {name: ''})
},
clickAddData(param) {
// console.log(param);
switch (param.type) {
case 'db':
this.addDB()
break
case 'sql':
this.$message(param.type)
break
case 'excel':
this.$message(param.type)
break
case 'custom':
this.$message(param.type)
break
}
},
beforeClickAddData(type) { tree(group) {
return { groupTree(group).then(res => {
'type': type this.tData = res.data
} })
}, },
addDB() { tableTree() {
// this.$router.push({ this.tableData = []
// name: 'add_db', if (this.currGroup.id) {
// params: { loadTable({
// scene: this.currGroup sort: 'type asc,create_time desc,name asc',
// } sceneId: this.currGroup.id
// }) }).then(res => {
this.$emit('switchComponent', {name: 'AddDB', param: this.currGroup}) this.tableData = res.data
}, })
sceneClick(data, node) { }
// console.log(data); },
this.$store.dispatch('dataset/setTable', null)
this.$store.dispatch('dataset/setTable', data.id) nodeClick(data, node) {
// this.$router.push({ // console.log(data);
// name: 'table', // console.log(node);
// params: { if (data.type === 'scene') {
// table: data this.sceneMode = true
// } this.currGroup = data
// }) this.$store.dispatch('dataset/setSceneData', this.currGroup.id)
this.$emit('switchComponent', {name: 'ViewTable'}) }
}, if (node.expanded) {
refresh() { this.expandedArray.push(data.id)
const path = this.$route.path } else {
if (path === '/dataset/table') { const index = this.expandedArray.indexOf(data.id)
this.sceneMode = true if (index > -1) {
const sceneId = this.$store.state.dataset.sceneData this.expandedArray.splice(index, 1)
getScene(sceneId).then(res => {
this.currGroup = res.data
})
} }
}, }
panelDefaultClick(data, node) { // console.log(this.expandedArray);
// console.log(data); },
// console.log(node);
}, back() {
this.sceneMode = false
// const route = this.$store.state.permission.currentRoutes
// console.log(route)
// this.$router.push('/dataset/index')
this.$store.dispatch('dataset/setSceneData', null)
this.$emit('switchComponent', { name: '' })
},
clickAddData(param) {
// console.log(param);
switch (param.type) {
case 'db':
this.addDB()
break
case 'sql':
this.$message(param.type)
break
case 'excel':
this.$message(param.type)
break
case 'custom':
this.$message(param.type)
break
}
},
beforeClickAddData(type) {
return {
'type': type
}
},
addDB() {
// this.$router.push({
// name: 'add_db',
// params: {
// scene: this.currGroup
// }
// })
this.$emit('switchComponent', { name: 'AddDB', param: this.currGroup })
},
sceneClick(data, node) {
// console.log(data);
this.$store.dispatch('dataset/setTable', null)
this.$store.dispatch('dataset/setTable', data.id)
// this.$router.push({
// name: 'table',
// params: {
// table: data
// }
// })
this.$emit('switchComponent', { name: 'ViewTable' })
},
refresh() {
const path = this.$route.path
if (path === '/dataset/table') {
this.sceneMode = true
const sceneId = this.$store.state.dataset.sceneData
getScene(sceneId).then(res => {
this.currGroup = res.data
})
}
},
panelDefaultClick(data, node) {
// console.log(data);
// console.log(node);
} }
} }
}
</script> </script>
<style scoped> <style scoped>
......
frontend/src/views/panel/list/PanelViewShow.vue
浏览文件 @ 2441edd1
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<el-tabs v-model="ViewActiveName"> <el-tabs v-model="ViewActiveName">
<!--视图展示操作--> <!--视图展示操作-->
<el-tab-pane name="Views" class="view-list-thumbnails-outline"> <el-tab-pane name="Views" class="view-list-thumbnails-outline">
<span slot="label"><i class="el-icon-s-data"/>视图</span> <span slot="label"><i class="el-icon-s-data" />视图</span>
<draggable <draggable
v-model="thumbnails" v-model="thumbnails"
:options="{group:{name: 'itxst',pull:'clone'},sort: true}" :options="{group:{name: 'itxst',pull:'clone'},sort: true}"
...@@ -15,9 +15,9 @@ ...@@ -15,9 +15,9 @@
@end="end1" @end="end1"
> >
<transition-group> <transition-group>
<div v-for="item in thumbnails" :key="item.name" v-on:dblclick = panelViewAdd(item)> <div v-for="item in thumbnails" :key="item.name" @dblclick="panelViewAdd(item)">
<span style="color: gray">{{item.name}}</span> <span style="color: gray">{{ item.name }}</span>
<img class="view-list-thumbnails" :src="'/common-files/images/'+item.id" alt=""/> <img class="view-list-thumbnails" :src="'/common-files/images/'+item.id" alt="">
</div> </div>
</transition-group> </transition-group>
</draggable> </draggable>
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<!--通用组件操作--> <!--通用组件操作-->
<el-tab-pane name="PublicTools"> <el-tab-pane name="PublicTools">
<span slot="label"><i class="el-icon-s-grid"/>组件</span> <span slot="label"><i class="el-icon-s-grid" />组件</span>
开发中... 开发中...
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
...@@ -34,33 +34,33 @@ ...@@ -34,33 +34,33 @@
<el-col class="panel-design"> <el-col class="panel-design">
<!--TODO 仪表盘设计公共设置区域--> <!--TODO 仪表盘设计公共设置区域-->
<el-row class="panel-design-head"> <el-row class="panel-design-head">
<span style="float: right;line-height: 40px;"> <span style="float: right;line-height: 40px;">
<el-button size="mini"> <el-button size="mini">
背景图 背景图
</el-button> </el-button>
<el-button type="primary" size="mini" @click="save"> <el-button type="primary" size="mini" @click="save">
预览 预览
</el-button> </el-button>
</span> </span>
</el-row> </el-row>
<el-row class="panel-design-show"> <el-row class="panel-design-show">
<div class="container" style="overflow-y: auto"> <div class="container" style="overflow-y: auto">
<div :style="gridStyle"> <div :style="gridStyle">
<!-- <draggable--> <!-- <draggable-->
<!-- v-model="thumbnailsTmp"--> <!-- v-model="thumbnailsTmp"-->
<!-- :options="{group:{name: 'itxst',pull:'clone'},sort: true}"--> <!-- :options="{group:{name: 'itxst',pull:'clone'},sort: true}"-->
<!-- animation="300"--> <!-- animation="300"-->
<!-- :move="onMove"--> <!-- :move="onMove"-->
<!-- style="height: 100%;overflow:auto"--> <!-- style="height: 100%;overflow:auto"-->
<!-- @end="end1"--> <!-- @end="end1"-->
<!-- >--> <!-- >-->
<vdrr v-if="item.keepFlag" :view-id="item.id" :parent="true" v-for="item in thumbnailsTmp" :key="item.name" @newStyle="newStyle" @removeView="removeView"> <vdrr v-for="item in thumbnailsTmp" v-show="item.keepFlag" :key="item.name" :view-id="item.id" :parent="true" @newStyle="newStyle" @removeView="removeView">
<img class="view-list-thumbnails" :src="'/common-files/images/'+item.id" alt=""/> <img class="view-list-thumbnails" :src="'/common-files/images/'+item.id" alt="">
</vdrr> </vdrr>
<!-- </draggable>--> <!-- </draggable>-->
</div> </div>
</div> </div>
<!-- <div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">--> <!-- <div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">-->
...@@ -74,251 +74,250 @@ ...@@ -74,251 +74,250 @@
</template> </template>
<script> <script>
import {post} from '@/api/dataset/dataset' import { post } from '@/api/dataset/dataset'
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
import {BASE_BAR} from '../chart/chart' import { BASE_BAR } from '../chart/chart'
export default { export default {
name: 'PanelViewShow', name: 'PanelViewShow',
components: {draggable}, components: { draggable },
data() { data() {
return { return {
gridStyle: { gridStyle: {
position: 'relative', position: 'relative',
height: '2000px', height: '2000px',
width: '2000px', width: '2000px',
backgroundColor: '#808080', backgroundColor: '#808080',
background: 'linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)', background: 'linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)',
backgroundSize: '20px 20px, 20px 20px' backgroundSize: '20px 20px, 20px 20px'
},
ViewActiveName: 'Views',
table: {},
thumbnailsTmp: [
{id: 'b4e3fd39-1424-4f22-bbac-07885829fb59', name: 'TEST1',keepFlag:true,style:''},
{id: 'bf91a1dc-10c1-4383-87ae-9ab1d6e57918', name: 'TEST2',keepFlag:true,style:''}
],
thumbnails: [
{id: 'e70d7955-44dc-4158-9002-7b48ed0d5d80', name: 'TEST1'},
{id: 'bf91a1dc-10c1-4383-87ae-9ab1d6e57918', name: 'TEST2'},
{id: 'aebc8346-c3f2-44ad-97d3-1e36a10dd0fa', name: 'TEST3'},
{id: 'b4e3fd39-1424-4f22-bbac-07885829fb59', name: 'TEST4'}
],
quota: [],
view: {
xaxis: [],
yaxis: [],
show: true,
type: 'bar',
title: ''
},
// 定义要被拖拽对象的数组
arr1: [
{id: 1, name: 'id'},
{id: 2, name: '名称'},
{id: 3, name: '类型'},
{id: 5, name: '状态'},
{id: 4, name: '指标指标指标'}
],
arr2: [
{id: 11, name: '容量'}
],
moveId: -1
}
},
computed: {
tableId() {
// console.log(this.$store.state.chart.tableId);
this.initTableData(this.$store.state.chart.tableId)
return this.$store.state.chart.tableId
}, },
sceneId() { ViewActiveName: 'Views',
// console.log(this.$store.state.chart.sceneId); table: {},
return this.$store.state.chart.sceneId thumbnailsTmp: [
{ id: 'b4e3fd39-1424-4f22-bbac-07885829fb59', name: 'TEST1', keepFlag: true, style: '' },
{ id: 'bf91a1dc-10c1-4383-87ae-9ab1d6e57918', name: 'TEST2', keepFlag: true, style: '' }
],
thumbnails: [
{ id: 'e70d7955-44dc-4158-9002-7b48ed0d5d80', name: 'TEST1' },
{ id: 'bf91a1dc-10c1-4383-87ae-9ab1d6e57918', name: 'TEST2' },
{ id: 'aebc8346-c3f2-44ad-97d3-1e36a10dd0fa', name: 'TEST3' },
{ id: 'b4e3fd39-1424-4f22-bbac-07885829fb59', name: 'TEST4' }
],
quota: [],
view: {
xaxis: [],
yaxis: [],
show: true,
type: 'bar',
title: ''
}, },
vId() { // 定义要被拖拽对象的数组
// console.log(this.$store.state.chart.viewId); arr1: [
this.getData(this.$store.state.chart.viewId) { id: 1, name: 'id' },
return this.$store.state.chart.viewId { id: 2, name: '名称' },
} { id: 3, name: '类型' },
{ id: 5, name: '状态' },
{ id: 4, name: '指标指标指标' }
],
arr2: [
{ id: 11, name: '容量' }
],
moveId: -1
}
},
computed: {
tableId() {
// console.log(this.$store.state.chart.tableId);
this.initTableData(this.$store.state.chart.tableId)
return this.$store.state.chart.tableId
}, },
watch: {}, sceneId() {
created() { // console.log(this.$store.state.chart.sceneId);
// this.get(this.$store.state.chart.viewId); return this.$store.state.chart.sceneId
}, },
mounted() { vId() {
// this.get(this.$store.state.chart.viewId); // console.log(this.$store.state.chart.viewId);
this.getData(this.$store.state.chart.viewId) this.getData(this.$store.state.chart.viewId)
// this.myEcharts(); return this.$store.state.chart.viewId
}, }
activated() {
},
methods: {
panelViewAdd(item){
let pushItem = {
id:item.id,
name:item.name,
keepFlag:true
}
debugger
this.thumbnailsTmp.push(pushItem)
console.log(this.thumbnailsTmp);
},
removeView(viewId) {
this.thumbnailsTmp.forEach(function(item, index) {
if(item.id===viewId){
item.keepFlag = false
}
})
},
newStyle(viewId,newStyleInfo) {
console.log(viewId);
console.log(JSON.stringify(newStyleInfo))
}, },
initTableData(id) { watch: {},
if (id != null) { created() {
post('/dataset/table/get/' + id, null).then(response => { // this.get(this.$store.state.chart.viewId);
this.table = response.data },
this.initTableField(id) mounted() {
}) // this.get(this.$store.state.chart.viewId);
this.getData(this.$store.state.chart.viewId)
// this.myEcharts();
},
activated() {
},
methods: {
panelViewAdd(item) {
const pushItem = {
id: item.id,
name: item.name,
keepFlag: true
}
debugger
this.thumbnailsTmp.push(pushItem)
console.log(this.thumbnailsTmp)
},
removeView(viewId) {
this.thumbnailsTmp.forEach(function(item, index) {
if (item.id === viewId) {
item.keepFlag = false
} }
}, })
initTableField(id) { },
post('/dataset/table/getFieldsFromDE', this.table).then(response => { newStyle(viewId, newStyleInfo) {
this.thumbnails = response.data.thumbnails console.log(viewId)
this.quota = response.data.quota console.log(JSON.stringify(newStyleInfo))
}) },
}, initTableData(id) {
click1(item) { if (id != null) {
// console.log(item); post('/dataset/table/get/' + id, null).then(response => {
const c = this.view.xaxis.filter(function (ele) { this.table = response.data
return ele.id === item.id this.initTableField(id)
}) })
// console.log(c); }
if (c && c.length === 0) { },
this.view.xaxis.push(item) initTableField(id) {
} post('/dataset/table/getFieldsFromDE', this.table).then(response => {
}, this.thumbnails = response.data.thumbnails
click2(item) { this.quota = response.data.quota
// console.log(item); })
const c = this.view.yaxis.filter(function (ele) { },
return ele.id === item.id click1(item) {
// console.log(item);
const c = this.view.xaxis.filter(function(ele) {
return ele.id === item.id
})
// console.log(c);
if (c && c.length === 0) {
this.view.xaxis.push(item)
}
},
click2(item) {
// console.log(item);
const c = this.view.yaxis.filter(function(ele) {
return ele.id === item.id
})
// console.log(c);
if (c && c.length === 0) {
this.view.yaxis.push(item)
}
},
clear1(index) {
this.view.xaxis.splice(index, 1)
},
clear2(index) {
this.view.yaxis.splice(index, 1)
},
get(id) {
if (id) {
post('/chart/view/get/' + id, null).then(response => {
this.view = response.data
this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
}) })
// console.log(c); } else {
if (c && c.length === 0) { this.view = {}
this.view.yaxis.push(item) }
} },
}, save() {
clear1(index) { const view = JSON.parse(JSON.stringify(this.view))
this.view.xaxis.splice(index, 1) view.id = this.view.id
}, view.sceneId = this.sceneId
clear2(index) { view.name = this.table.name
this.view.yaxis.splice(index, 1) view.tableId = this.$store.state.chart.tableId
}, view.xaxis = JSON.stringify(view.xaxis)
get(id) { view.yaxis = JSON.stringify(view.yaxis)
if (id) { post('/chart/view/save', view).then(response => {
post('/chart/view/get/' + id, null).then(response => { // this.get(response.data.id);
this.view = response.data this.getData(response.data.id)
this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : [] this.$store.dispatch('chart/setChartSceneData', null)
this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : [] this.$store.dispatch('chart/setChartSceneData', this.sceneId)
}) })
} else { },
this.view = {} getData(id) {
} if (id) {
}, post('/chart/view/getData/' + id, null).then(response => {
save() { this.view = response.data
const view = JSON.parse(JSON.stringify(this.view)) this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
view.id = this.view.id this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
view.sceneId = this.sceneId
view.name = this.table.name const chart = response.data
view.tableId = this.$store.state.chart.tableId const chart_option = JSON.parse(JSON.stringify(BASE_BAR))
view.xaxis = JSON.stringify(view.xaxis) // console.log(chart_option);
view.yaxis = JSON.stringify(view.yaxis) if (chart.data) {
post('/chart/view/save', view).then(response => { chart_option.title.text = chart.title
// this.get(response.data.id); chart_option.xAxis.data = chart.data.x
this.getData(response.data.id) chart.data.series.forEach(function(y) {
this.$store.dispatch('chart/setChartSceneData', null) chart_option.legend.data.push(y.name)
this.$store.dispatch('chart/setChartSceneData', this.sceneId) chart_option.series.push(y)
})
}
// console.log(chart_option);
this.myEcharts(chart_option)
}) })
}, } else {
getData(id) { this.view = {}
if (id) { }
post('/chart/view/getData/' + id, null).then(response => { },
this.view = response.data
this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
const chart = response.data
const chart_option = JSON.parse(JSON.stringify(BASE_BAR))
// console.log(chart_option);
if (chart.data) {
chart_option.title.text = chart.title
chart_option.xAxis.data = chart.data.x
chart.data.series.forEach(function (y) {
chart_option.legend.data.push(y.name)
chart_option.series.push(y)
})
}
// console.log(chart_option);
this.myEcharts(chart_option)
})
} else {
this.view = {}
}
},
// 左边往右边拖动时的事件 // 左边往右边拖动时的事件
end1(e) { end1(e) {
// console.log(e) // console.log(e)
// var that = this; // var that = this;
// var items = this.arr2.filter(function (m) { // var items = this.arr2.filter(function (m) {
// return m.id == that.moveId // return m.id == that.moveId
// }) // })
// //如果左边 // //如果左边
// if (items.length < 2) return; // if (items.length < 2) return;
// this.arr2.splice(e.newDraggableIndex, 1) // this.arr2.splice(e.newDraggableIndex, 1)
}, },
// 右边往左边拖动时的事件 // 右边往左边拖动时的事件
end2(e) { end2(e) {
// console.log(e) // console.log(e)
// var that = this; // var that = this;
// var items = this.yAxisData.filter(function (m) { // var items = this.yAxisData.filter(function (m) {
// return m.id == that.moveId // return m.id == that.moveId
// }) // })
// //如果左边 // //如果左边
// if (items.length < 2) return; // if (items.length < 2) return;
// this.yAxisData.splice(e.newDraggableIndex, 1) // this.yAxisData.splice(e.newDraggableIndex, 1)
}, },
end3(e) { end3(e) {
}, },
end4(e) { end4(e) {
}, },
// move回调方法 // move回调方法
onMove(e, originalEvent) { onMove(e, originalEvent) {
console.log(e) console.log(e)
// this.moveId = e.relatedContext.element.id; // this.moveId = e.relatedContext.element.id;
// //不允许停靠 // //不允许停靠
// if (e.relatedContext.element.id == 1) return false; // if (e.relatedContext.element.id == 1) return false;
// //不允许拖拽 // //不允许拖拽
// if (e.draggedContext.element.id == 4) return false; // if (e.draggedContext.element.id == 4) return false;
// if (e.draggedContext.element.id == 11) return false; // if (e.draggedContext.element.id == 11) return false;
return true return true
}, },
myEcharts(option) { myEcharts(option) {
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('echart')) var myChart = this.$echarts.init(document.getElementById('echart'))
// 指定图表的配置项和数据 // 指定图表的配置项和数据
setTimeout(myChart.setOption(option, true), 500) setTimeout(myChart.setOption(option, true), 500)
window.onresize = function () { window.onresize = function() {
myChart.resize() myChart.resize()
}
} }
} }
} }
}
</script> </script>
<style scoped> <style scoped>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论