github/dataease
github/dataease
3
0
Fork 1
mirror of https://github.com/dataease/dataease.git synced 2025-02-25 03:52:59 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

refactor: 画布优化

Browse Source
This commit is contained in:
wangjiahao 2021-10-10 20:17:38 +08:00
parent 99a08ba789
commit 0a49003cdf
1 changed files with 40 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,5 @@
<template>
<div id="canvasInfoMain" ref="canvasInfoMain" class="main-class">
<div id="canvasInfoTemp" ref="canvasInfoTemp" :style="customStyle" class="bg" @mouseup="deselectCurComponent" @mousedown="handleMouseDown">
<el-row v-if="componentDataShow.length===0" style="height: 100%;" class="custom-position">
{{ $t('panel.panelNull') }}
@ -28,6 +29,7 @@
<UserViewDialog ref="userViewDialog" :chart="showChartInfo" :chart-table="showChartTableInfo" />
</el-dialog>
</div>
</div>
</template>
<script>
@ -155,7 +157,7 @@ export default {
erd.listenTo(tempDom, element => {
_this.$nextTick(() => {
_this.restore()
//将mainHeight 修改为px 临时解决html2canvas 截图不全的问题
// 将mainHeight 修改为px 临时解决html2canvas 截图不全的问题
_this.mainHeight = tempDom.scrollHeight + 'px!important'
})
})
@ -182,12 +184,14 @@ export default {
changeStyleWithScale,
getStyle,
restore() {
const canvasHeight = document.getElementById('canvasInfoTemp').offsetHeight
const canvasWidth = document.getElementById('canvasInfoTemp').offsetWidth
const canvasHeight = document.getElementById('canvasInfoMain').offsetHeight
const canvasWidth = document.getElementById('canvasInfoMain').offsetWidth
this.scaleWidth = canvasWidth * 100 / parseInt(this.canvasStyleData.width)// 获取宽度比
this.scaleHeight = canvasHeight * 100 / parseInt(this.canvasStyleData.height)// 获取高度比
this.scaleHeight = this.scaleWidth
console.log('scaleHeight:' + this.scaleHeight + ';ch:' + this.canvasStyleData.height)
// this.scaleHeight = this.scaleWidth
// this.mainHeight = this.canvasStyleData.height * this.scaleHeight / 100 + 'px'
// if (this.showType === 'width') {
// this.scaleHeight = this.scaleWidth
@ -263,6 +267,10 @@ export default {
}
}
}
.main-class {
width: 100%;
height: 100%;
}
.custom-position {
flex: 1;
display: flex;