Skip to content

D
dataease
提交 7efac43e authored 作者: wangjiahao's avatar wangjiahao
浏览文件
操作

feat:画板优化

上级 e20607d9
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 347 行增加 和 60 行删除
backend/src/main/java/io/dataease/controller/panel/PanelViewLinkageController.java
浏览文件 @ 7efac43e
......@@ -26,14 +26,14 @@ public class PanelViewLinkageController {
@Resource
private PanelViewLinkageService panelViewLinkageService;
@ApiOperation("获取仪表板视图联动信息")
@ApiOperation("获取仪表板所有视图联动信息")
@PostMapping("/getViewLinkageGather")
public Map getViewLinkageGather(@RequestBody PanelLinkageRequest request){
return panelViewLinkageService.getViewLinkageGather(request);
}
@ApiOperation("获取仪表板视图联动信息")
@ApiOperation("保存仪表板视图联动信息")
@PostMapping("/saveLinkage")
public void saveLinkage(@RequestBody PanelLinkageRequest request){
panelViewLinkageService.saveLinkage(request);
......
frontend/package.json
浏览文件 @ 7efac43e
......@@ -45,14 +45,15 @@
"vue-codemirror": "^4.0.6",
"vue-fullscreen": "^2.5.2",
"vue-i18n": "7.3.2",
"vue-power-drag": "^0.2.0",
"vue-router": "3.0.6",
"vue-to-pdf": "^1.0.0",
"vue-uuid": "2.0.2",
"vuedraggable": "^2.24.3",
"vuex": "3.1.0",
"webpack": "^4.46.0",
"xlsx": "^0.17.0"
"xlsx": "^0.17.0",
"lodash": "^4.17.4",
"jquery": "^3.1.1"
},
"devDependencies": {
"@babel/core": "^7.4.0-0",
......
frontend/src/components/DeDrag/drag.js 0 → 100644
浏览文件 @ 7efac43e
差异被折叠。
frontend/src/components/DeDrag/drag.less 0 → 100644
浏览文件 @ 7efac43e
.dragAndResize
{
position: relative;
user-select: none;
*
{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.item
{
position: absolute;
width: 100px;
height: 100px;
cursor: move;
border: 1px solid;
background-color: #fff;
.resizeHandle
{
position: absolute;
right: 2px;
bottom: 2px;
width: 0;
height: 0;
cursor: nw-resize;
opacity: .5;
border-bottom: 10px solid black;
border-left: 10px solid transparent;
}
}
.moveAnimation
{
transition: top 80ms ease;
}
.canNotDrag
{
cursor: default!important;
}
.cloneNode
{
z-index: 3;
transition: none;
background-color: #bec1c9;
opacity: 0.5;
}
.movingItem
{
position: absolute;
border: none;
&:before
{
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: 'movingItem';
background-color: #3d66e7;
}
}
.positionBox
{
position: fixed;
top: 0;
right: 100px;
overflow: auto;
width: 500px;
height: 500px;
border: 1px solid;
}
.coords
{
position: fixed;
right: 100px;
bottom: 200px;
overflow: auto;
width: 200px;
height: 200px;
border: 1px solid;
}
}
frontend/src/components/DeDrag/drag.vue 0 → 100644
浏览文件 @ 7efac43e
差异被折叠。
frontend/src/components/DeDrag/index.vue
浏览文件 @ 7efac43e
......@@ -434,6 +434,7 @@ export default {
}
},
style() {
// console.log('style-top:' + this.y + '--' + this.top)
return {
transform: `translate(${this.left}px, ${this.top}px) rotate(${this.rotate}deg)`,
width: this.computedWidth,
......@@ -482,7 +483,7 @@ export default {
return 'auto'
}
}
if (this.canvasStyleData.auxiliaryMatrix) {
if (this.element.auxiliaryMatrix) {
const width = Math.round(this.width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
return width + 'px'
} else {
......@@ -496,7 +497,7 @@ export default {
return 'auto'
}
}
if (this.canvasStyleData.auxiliaryMatrix) {
if (this.element.auxiliaryMatrix) {
const height = Math.round(this.height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
return height + 'px'
} else {
......@@ -594,13 +595,15 @@ export default {
this.maxH = val
},
w(val) {
console.log('changeWidthCK：' + this.resizing)
if (this.resizing || this.dragging) {
return
}
if (this.parent) {
this.bounds = this.calcResizeLimits()
}
// console.log('changeWidth：' + val)
console.log('changeWidth：' + val)
this.changeWidth(val)
},
h(val) {
......@@ -696,6 +699,8 @@ export default {
}
// 阻止冒泡事件
e.stopPropagation()
// 此处阻止冒泡 但是外层需要获取pageX pageY
this.element.auxiliaryMatrix && this.$emit('elementMouseDown', e)
this.$store.commit('setCurComponent', { component: this.element, index: this.index })
eventsFor = events.mouse
this.elementDown(e)
......@@ -707,6 +712,8 @@ export default {
}
const target = e.target || e.srcElement
if (this.$el.contains(target)) {
// 挤压式画布设计 drag start 通知
this.element.auxiliaryMatrix && this.$emit('onDragStart', e, this.element, this.index)
if (this.onDragStart(e) === false) {
return
}
......@@ -800,6 +807,7 @@ export default {
if (e instanceof MouseEvent && e.which !== 1) {
return false
}
this.element.auxiliaryMatrix && this.$emit('onResizeStart', e, this.element, this.index)
if (this.onResizeStart(handle, e) === false) {
return false
}
......@@ -982,6 +990,10 @@ export default {
this.bottom = bottom
await this.snapCheck()
this.$emit('dragging', this.left, this.top)
// 如果当前视图遵循矩阵设计则 进行位置挤压检查
if (this.element.auxiliaryMatrix) {
this.$emit('onDragging', e, this.element)
}
// private 记录当前样式
this.recordCurStyle()
......@@ -1156,7 +1168,8 @@ export default {
// console.log('width2:' + this.width)
this.height = newH
this.$emit('resizing', this.left, this.top, this.width, this.height)
// this.$emit('resizing', this.left, this.top, this.width, this.height)
this.element.auxiliaryMatrix && this.$emit('onResizing', e, this.element)
// private 记录当前组件样式
this.recordCurStyle()
......@@ -1179,7 +1192,7 @@ export default {
this.right = right
this.bottom = bottom
this.width = width
// console.log('width3:' + this.width)
console.log('width3:' + this.width)
this.height = height
},
changeHeight(val) {
......@@ -1201,7 +1214,7 @@ export default {
this.height = height
},
// 从控制柄松开
async handleUp(e) {
handleUp(e) {
this.handle = null
// 初始化辅助线数据
const temArr = new Array(3).fill({ display: false, position: '', origin: '', lineLength: '' })
......@@ -1215,7 +1228,8 @@ export default {
this.lastMouseY = mouseY
if (this.resizing) {
this.resizing = false
await this.conflictCheck()
console.log('resizing2:' + this.resizing)
this.conflictCheck()
this.$emit('refLineParams', refLine)
// this.$emit('resizestop', this.left, this.top, this.width, this.height)
// private
......@@ -1223,7 +1237,7 @@ export default {
}
if (this.dragging) {
this.dragging = false
await this.conflictCheck()
this.conflictCheck()
this.$emit('refLineParams', refLine)
this.$emit('dragstop', this.left, this.top)
}
......@@ -1235,8 +1249,9 @@ export default {
// private 记录snapshot
// 如果辅助设计 需要最后调整矩阵
if (this.canvasStyleData.auxiliaryMatrix) {
this.recordMatrixCurStyle()
if (this.element.auxiliaryMatrix) {
// this.recordMatrixCurStyle()
this.recordMatrixCurShadowStyle()
}
this.hasMove && this.$store.commit('recordSnapshot', 'handleUp')
// 记录snapshot后 移动已记录设置为false
......@@ -1246,6 +1261,9 @@ export default {
// private 删除handle Up事件 防止重复recordSnapshot
removeEvent(document.documentElement, eventsFor.stop, this.handleUp)
// 挤占式画布设计 handleUp
this.element.auxiliaryMatrix && this.$emit('onHandleUp', e)
},
// 新增方法 ↓↓↓
// 设置属性
......@@ -1549,11 +1567,38 @@ export default {
// this.hasMove = true
this.$store.commit('setShapeStyle', style)
// resize
self.$emit('resizeView')
// const self = this
// setTimeout(function() {
// self.$emit('resizeView')
// }, 200)
},
// 记录当前样式 跟随阴影位置 矩阵处理
recordMatrixCurShadowStyle() {
console.log('recordMatrixCurShadowStyle')
// debugger
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 style = {
...this.defaultStyle
}
style.left = left
style.top = top
style.width = width
style.height = height
style.rotate = this.rotate
// this.hasMove = true
this.$store.commit('setShapeStyle', style)
// resize
const self = this
setTimeout(function() {
self.$emit('resizeView')
}, 200)
self.$emit('resizeView')
// setTimeout(function() {
// self.$emit('resizeView')
// }, 200)
},
mountedFunction() {
// private 冲突检测 和水平设计值保持一致
......
frontend/src/components/DeDrag/shadow.vue
浏览文件 @ 7efac43e
<template>
<div style="z-index:-1" :style="styleInfo" />
<div style="z-index:-1" :style="styleInfo">
<!-- {{ curComponent }}-->
</div>
</template>
<script>
......@@ -16,27 +18,42 @@ export default {
let top = 0
let width = 0
let height = 0
// if (this.dragComponentInfo && !this.dragComponentInfo.auxiliaryMatrix) {
if (this.dragComponentInfo) {
console.log('shadowDrag=')
// 组件移入
left = this.dragComponentInfo.shadowStyle.x
top = this.dragComponentInfo.shadowStyle.y
width = this.dragComponentInfo.style.width
height = this.dragComponentInfo.style.height
if (this.dragComponentInfo.auxiliaryMatrix) {
left = (this.dragComponentInfo.x - 1) * this.curCanvasScale.matrixStyleWidth
top = (this.dragComponentInfo.y - 1) * this.curCanvasScale.matrixStyleHeight
width = this.dragComponentInfo.sizex * this.curCanvasScale.matrixStyleWidth
height = this.dragComponentInfo.sizey * this.curCanvasScale.matrixStyleHeight
} else {
left = this.dragComponentInfo.shadowStyle.x
top = this.dragComponentInfo.shadowStyle.y
width = this.dragComponentInfo.style.width
height = this.dragComponentInfo.style.height
}
// console.log('left:' + left + 'top:' + top + 'width:' + width + 'height:' + height)
} else {
left = this.curComponent.style.left * this.curCanvasScale.scaleWidth / 100
top = this.curComponent.style.top * this.curCanvasScale.scaleHeight / 100
width = this.curComponent.style.width * this.curCanvasScale.scaleWidth / 100
height = this.curComponent.style.height * this.curCanvasScale.scaleHeight / 100
// 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
// console.log('curComponent left:' + left + 'top:' + top + 'width:' + width + 'height:' + height)
}
// 当前默认为自适应
if (this.canvasStyleData.auxiliaryMatrix) {
left = Math.round(left / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
width = Math.round(width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
top = Math.round(top / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
height = Math.round(height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
}
// if (this.canvasStyleData.auxiliaryMatrix) {
// left = Math.round(left / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
// width = Math.round(width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
// top = Math.round(top / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
// height = Math.round(height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
// }
// 防止阴影区超出边界
const xGap = left + width - this.canvasWidth
......@@ -82,10 +99,10 @@ export default {
this.dragComponentInfo.shadowStyle.y = this.scaleH(y)
},
scaleH(h) {
return h * 100 / this.curCanvasScale.scaleHeight
return h / this.curCanvasScale.scalePointHeight
},
scaleW(w) {
return w * 100 / this.curCanvasScale.scaleWidth
return w / this.curCanvasScale.scalePointWidth
}
}
......
frontend/src/components/canvas/components/Editor/EditBar.vue
浏览文件 @ 7efac43e
......@@ -14,6 +14,12 @@
<span :title="$t('panel.edit')">
<i v-if="activeModel==='edit'&&curComponent&&editFilter.includes(curComponent.type)" class="icon iconfont icon-edit" @click.stop="edit" />
</span>
<span :title="$t('panel.matrix')">
<i v-if="activeModel==='edit'&&curComponent.auxiliaryMatrix" class="icon iconfont icon-shujujuzhen" @click.stop="auxiliaryMatrixChange" />
</span>
<span :title="$t('panel.suspension')">
<i v-if="activeModel==='edit'&&!curComponent.auxiliaryMatrix" class="icon iconfont icon-xuanfuanniu" @click.stop="auxiliaryMatrixChange" />
</span>
<span :title="$t('panel.details')">
<i v-if="curComponent.type==='view'" class="icon iconfont icon-fangda" @click.stop="showViewDetails" />
</span>
......@@ -87,13 +93,31 @@ export default {
'canvasStyleData',
'linkageSettingStatus',
'targetLinkageInfo',
'curLinkageView'
'curLinkageView',
'curCanvasScale'
])
},
methods: {
showViewDetails() {
this.$emit('showViewDetails')
},
auxiliaryMatrixChange() {
if (this.curComponent.auxiliaryMatrix) {
this.curComponent.style.left = (this.curComponent.x - 1) * this.curCanvasScale.matrixStyleOriginWidth
this.curComponent.style.top = (this.curComponent.y - 1) * this.curCanvasScale.matrixStyleOriginHeight
this.curComponent.style.width = this.curComponent.sizex * this.curCanvasScale.matrixStyleOriginWidth
this.curComponent.style.height = this.curComponent.sizey * this.curCanvasScale.matrixStyleOriginHeight
this.curComponent.auxiliaryMatrix = false
} 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.auxiliaryMatrix = true
}
this.$store.state.styleChangeTimes++
bus.$emit('auxiliaryMatrixChange')
},
edit() {
// 编辑时临时保存 当前修改的画布
this.$store.dispatch('panel/setComponentDataTemp', JSON.stringify(this.componentData))
......
frontend/src/components/canvas/components/Editor/PGrid.vue 0 → 100644
浏览文件 @ 7efac43e
<template>
<div class="grid">
<!-- positionBox:{{ positionBox.length }}-->
<div v-for="(yItem, index) in positionBox" :key="index+'y'" style="float: left; width: 105%">
<div v-for="(xItem, index) in yItem" :key="index+'x'" :style="classInfo" style="float: left; border: 0.2px solid #b3d4fc ">
{{ xItem.el?1:0 }}
</div>
</div>
</div>
</template>
<script>
export default {
props: {
// eslint-disable-next-line vue/require-default-prop
positionBox: {
type: Array
},
matrixStyle: {
type: Object
}
},
data() {
return {
}
},
computed: {
classInfo: function() {
return {
width: this.matrixStyle.width + 'px',
height: this.matrixStyle.height + 'px'
}
}
}
}
</script>
<style lang="scss" scoped>
.grid {
position: absolute;
top: 0;
left: 0;
}
</style>
frontend/src/components/canvas/custom-component/UserView.vue
浏览文件 @ 7efac43e
......@@ -173,15 +173,15 @@ export default {
'hw': {
handler(newVal, oldVla) {
// console.log('hw:' + newVal + '---' + oldVla)
if (newVal !== oldVla) {
this.destroyTimeMachine()
this.changeIndex++
this.chartResize(this.changeIndex)
if (newVal !== oldVla && this.$refs[this.element.propValue.id]) {
if (this.chart.type === 'map') {
this.destroyTimeMachine()
this.changeIndex++
this.chartResize(this.changeIndex)
} else {
this.$refs[this.element.propValue.id].chartResize()
}
}
//
// if (this.$refs[this.element.propValue.id]) {
// this.$refs[this.element.propValue.id].chartResize()
// }
},
deep: true
},
......
frontend/src/components/canvas/custom-component/component-list.js
浏览文件 @ 7efac43e
......@@ -70,7 +70,11 @@ const list = [
verticalAlign: 'middle',
backgroundColor: '#ffffff',
borderRadius: 0
}
},
x: 1,
y: 1,
sizex: 10,
sizey: 2
},
{
id: '10002',
......@@ -105,7 +109,11 @@ const list = [
width: 300,
height: 200,
borderRadius: ''
}
},
x: 1,
y: 1,
sizex: 10,
sizey: 6
},
{
id: '10003-1',
......@@ -128,14 +136,18 @@ const list = [
icon: 'juxing',
type: 'rect-shape',
style: {
width: 400,
height: 300,
width: 300,
height: 200,
borderStyle: 'solid',
borderWidth: 0,
borderColor: '#000000',
backgroundColor: '#ffffff',
borderRadius: 0
}
},
x: 1,
y: 1,
sizex: 10,
sizey: 6
},
{
id: '10005',
......@@ -145,10 +157,15 @@ const list = [
icon: 'juxing',
type: 'view',
style: {
width: 400,
height: 300,
width: 300,
height: 200,
borderRadius: ''
}
},
x: 1,
y: 1,
sizex: 10,
sizey: 6,
auxiliaryMatrix: true
},
{
id: '10006',
......@@ -172,7 +189,11 @@ const list = [
name: '1',
content: null
}]
}
},
x: 1,
y: 1,
sizex: 10,
sizey: 10
},
{
id: '20001',
......@@ -185,7 +206,11 @@ const list = [
width: 400,
height: 200,
borderRadius: ''
}
},
x: 1,
y: 1,
sizex: 10,
sizey: 5
}
]
......
frontend/src/lang/en.js
浏览文件 @ 7efac43e
......@@ -1311,7 +1311,9 @@ export default {
exit_un_march_linkage_field: 'Exit Un March Linkage Field',
details: 'Details',
setting: 'Setting',
no_drill_field: 'Miss relation field'
no_drill_field: 'Miss relation field',
matrix: 'matrix',
suspension: 'suspension'
},
plugin: {
local_install: 'Local installation',
......
frontend/src/lang/tw.js
浏览文件 @ 7efac43e
......@@ -1314,7 +1314,9 @@ export default {
exit_un_march_linkage_field: '存在未匹配聯動關系的字段',
details: '詳情',
setting: '設置',
no_drill_field: '缺少關聯字段'
no_drill_field: '缺少關聯字段',
matrix: '矩阵分布',
suspension: '悬浮'
},
plugin: {
local_install: '本地安裝',
......
frontend/src/lang/zh.js
浏览文件 @ 7efac43e
......@@ -1319,7 +1319,9 @@ export default {
exit_un_march_linkage_field: '存在未匹配联动关系的字段',
details: '详情',
setting: '设置',
no_drill_field: '缺少关联字段'
no_drill_field: '缺少关联字段',
matrix: '矩阵分布',
suspension: '悬浮'
},
plugin: {
local_install: '本地安装',
......
frontend/src/store/index.js
浏览文件 @ 7efac43e
......@@ -104,11 +104,21 @@ const data = {
state.curCanvasScale = curCanvasScale
},
// setShapeStyle({ curComponent, canvasStyleData, curCanvasScale }, { top, left, width, height, rotate }) {
// if (top || top === 0) curComponent.style.top = canvasStyleData.selfAdaption ? (top * 100 / curCanvasScale.scaleHeight) : top
// if (left || left === 0) curComponent.style.left = canvasStyleData.selfAdaption ? (left * 100 / curCanvasScale.scaleWidth) : left
// if (width || width === 0) curComponent.style.width = canvasStyleData.selfAdaption ? (width * 100 / curCanvasScale.scaleWidth) : width
// if (height || height === 0) curComponent.style.height = canvasStyleData.selfAdaption ? (height * 100 / curCanvasScale.scaleHeight) : height
// if (rotate || rotate === 0) curComponent.style.rotate = rotate
// // console.log('setShapeStyle:curComponent' + 'top:' + top + ';left:' + left + '====' + JSON.stringify(curComponent))
// },
setShapeStyle({ curComponent, canvasStyleData, curCanvasScale }, { top, left, width, height, rotate }) {
if (top || top === 0) curComponent.style.top = canvasStyleData.selfAdaption ? (top * 100 / curCanvasScale.scaleHeight) : top
if (left || left === 0) curComponent.style.left = canvasStyleData.selfAdaption ? (left * 100 / curCanvasScale.scaleWidth) : left
if (width || width === 0) curComponent.style.width = canvasStyleData.selfAdaption ? (width * 100 / curCanvasScale.scaleWidth) : width
if (height || height === 0) curComponent.style.height = canvasStyleData.selfAdaption ? (height * 100 / curCanvasScale.scaleHeight) : height
console.log('setShapeStyle:width=' + width + ';height=' + height)
if (top || top === 0) curComponent.style.top = top / curCanvasScale.scalePointHeight
if (left || left === 0) curComponent.style.left = left / curCanvasScale.scalePointWidth
if (width || width === 0) curComponent.style.width = width / curCanvasScale.scalePointWidth
if (height || height === 0) curComponent.style.height = height / curCanvasScale.scalePointHeight
if (rotate || rotate === 0) curComponent.style.rotate = rotate
// console.log('setShapeStyle:curComponent' + 'top:' + top + ';left:' + left + '====' + JSON.stringify(curComponent))
},
......
frontend/src/views/panel/drag/base.vue 0 → 100644
浏览文件 @ 7efac43e
差异被折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论