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

feat(fix): 非自适应画布的 仪表盘展示时 超高显示滚动条,修复间隙不准问题

Browse Source
This commit is contained in:
wangjiahao 2021-06-11 17:44:47 +08:00
parent a31b783ab0
commit 34c81b07fd
8 changed files with 21 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -68,8 +68,4 @@ export default {
.component {
position: absolute;
}
.gap_class{
padding:3px;
}
</style>

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

@ -68,15 +68,13 @@ export default {
if (this.canvasStyleData.openCommonStyle) {
if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
style = {
width: '100%',
height: '100%',
background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`
background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`,
...style
}
} else {
} else if (this.canvasStyleData.panel.backgroundType === 'color') {
style = {
width: '100%',
height: '100%',
background: this.canvasStyleData.panel.color
background: this.canvasStyleData.panel.color,
...style
}
}
}
@ -117,6 +115,7 @@ export default {
changeStyleWithScale,
getStyle,
restore() {
debugger
const canvasHeight = document.getElementById('canvasInfo').offsetHeight
const canvasWidth = document.getElementById('canvasInfo').offsetWidth
this.scaleWidth = canvasWidth * 100 / parseInt(this.canvasStyleData.width)// 获取宽度比

6
frontend/src/components/canvas/components/Editor/PreviewEject.vue
View File

@ -97,8 +97,8 @@ export default {
this.$emit('change', false)
},
resize() {
this.scaleWidth = window.innerWidth * 100 / parseInt(this.canvasStyleData.width)// 获取宽度比
this.scaleHeight = window.innerHeight * 100 / parseInt(this.canvasStyleData.height)// 获取高度比
this.scaleWidth = window.innerWidth * 100 / this.canvasStyleData.width// 获取宽度比
this.scaleHeight = window.innerHeight * 100 / this.canvasStyleData.height// 获取高度比
this.handleScaleChange()
},
restore() {
@ -123,7 +123,7 @@ export default {
},
format(value, scale) {
return value * parseInt(scale) / 100
return value * scale / 100
},
handleScaleChange() {
const componentData = deepCopy(this.componentDataSource)

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

@ -450,9 +450,9 @@ export default {
format(value, scale) {
// 自适应画布区域 返回原值
if (this.canvasStyleData.selfAdaption) {
return parseInt(value * parseInt(scale) / 100)
return value * scale / 100
} else {
return parseInt(value)
return value
}
},
changeScale() {
@ -479,8 +479,8 @@ export default {
this.matrixStyle.width = this.outStyle.width / this.matrixCount.x
this.matrixStyle.height = this.outStyle.height / this.matrixCount.y
}
this.scaleWidth = parseInt(this.outStyle.width * 100 / this.canvasStyleData.width)
this.scaleHeight = parseInt(this.outStyle.height * 100 / this.canvasStyleData.height)
this.scaleWidth = this.outStyle.width * 100 / this.canvasStyleData.width
this.scaleHeight = this.outStyle.height * 100 / this.canvasStyleData.height
this.$store.commit('setCurCanvasScale',
{
scaleWidth: this.scaleWidth,

4
frontend/src/components/canvas/components/Toolbar.vue
View File

@ -123,12 +123,12 @@ export default {
},
format(value) {
const scale = this.scale
return value * parseInt(scale) / 100
return value * scale / 100
},
getOriginStyle(value) {
const scale = this.canvasStyleData.scale
const result = value / (parseInt(scale) / 100)
const result = value / (scale / 100)
return result
},

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

@ -81,10 +81,10 @@ const data = {
},
setShapeStyle({ curComponent, canvasStyleData, curCanvasScale }, { top, left, width, height, rotate }) {
if (top || top === 0) curComponent.style.top = parseInt(canvasStyleData.selfAdaption ? (top * 100 / curCanvasScale.scaleHeight) : top)
if (left || left === 0) curComponent.style.left = parseInt(canvasStyleData.selfAdaption ? (left * 100 / curCanvasScale.scaleWidth) : left)
if (width || width === 0) curComponent.style.width = parseInt(canvasStyleData.selfAdaption ? (width * 100 / curCanvasScale.scaleWidth) : width)
if (height || height === 0) curComponent.style.height = parseInt(canvasStyleData.selfAdaption ? (height * 100 / curCanvasScale.scaleHeight) : height)
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))
},

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

@ -483,7 +483,7 @@ export default {
},
getOriginStyle(value) {
const scale = this.canvasStyleData.scale
const result = value / (parseInt(scale) / 100)
const result = value / (scale / 100)
return result
},
restore() {

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

@ -47,7 +47,7 @@
<!-- 仪表板预览区域-->
<el-row class="panel-design-preview">
<div ref="imageWrapper" style="width: 100%;height: 100%">
<fullscreen style="background: none;height: 100%" :fullscreen.sync="fullscreen">
<fullscreen style="height: 100%;background: none" :fullscreen.sync="fullscreen">
<Preview v-if="showMain" :show-type="canvasStyleData.selfAdaption?'full':'width'" />
</fullscreen>
</div>