forked from github/dataease
feat:仪表板可以自动进行无限下拉，取消仪表板尺寸设置，统一为自适应
This commit is contained in:
wangjiahao
parent
0f91ee6615
commit
f9a0ec3d20
@ -610,7 +610,7 @@ export default {
|
||||
const rect = this.$el.parentNode.getBoundingClientRect()
|
||||
this.parentX = rect.x
|
||||
this.parentY = rect.y
|
||||
return [Math.round(parseFloat(style.getPropertyValue('width'), 10)), Math.round(parseFloat(style.getPropertyValue('height'), 10))]
|
||||
return [Math.round(parseFloat(style.getPropertyValue('width'), 10)), 100000]
|
||||
}
|
||||
if (typeof this.parent === 'string') {
|
||||
const parentNode = document.querySelector(this.parent)
|
||||
|
||||
@ -110,12 +110,16 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.canvasStyleData.selfAdaption) {
|
||||
style = {
|
||||
overflow: 'hidden',
|
||||
...style
|
||||
}
|
||||
}
|
||||
// if (this.canvasStyleData.selfAdaption) {
|
||||
// style = {
|
||||
// overflow: 'hidden',
|
||||
// ...style
|
||||
// }
|
||||
// }
|
||||
// style = {
|
||||
// overflow-x :'hidden',
|
||||
// ...style
|
||||
// }
|
||||
return style
|
||||
},
|
||||
// 此处单独计算componentData的值 不放入全局mapState中
|
||||
@ -168,10 +172,13 @@ export default {
|
||||
const canvasWidth = document.getElementById('canvasInfoTemp').offsetWidth
|
||||
this.scaleWidth = canvasWidth * 100 / parseInt(this.canvasStyleData.width)// 获取宽度比
|
||||
this.scaleHeight = canvasHeight * 100 / parseInt(this.canvasStyleData.height)// 获取高度比
|
||||
if (this.showType === 'width') {
|
||||
this.scaleHeight = this.scaleWidth
|
||||
this.mainHeight = this.canvasStyleData.height * this.scaleHeight / 100 + 'px'
|
||||
}
|
||||
|
||||
this.scaleHeight = this.scaleWidth
|
||||
// this.mainHeight = this.canvasStyleData.height * this.scaleHeight / 100 + 'px'
|
||||
// if (this.showType === 'width') {
|
||||
// this.scaleHeight = this.scaleWidth
|
||||
// this.mainHeight = this.canvasStyleData.height * this.scaleHeight / 100 + 'px'
|
||||
// }
|
||||
this.handleScaleChange()
|
||||
},
|
||||
resetID(data) {
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
@mousedown="handleMouseDown"
|
||||
>
|
||||
<!-- 网格线 -->
|
||||
<Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />
|
||||
<!-- <Grid v-if="canvasStyleData.auxiliaryMatrix&&!linkageSettingStatus" :matrix-style="matrixStyle" />-->
|
||||
|
||||
<!-- 仪表板联动清除按钮-->
|
||||
<canvas-opt-bar />
|
||||
@ -216,10 +216,10 @@ export default {
|
||||
width: 80,
|
||||
height: 20
|
||||
},
|
||||
// 矩阵数量 默认 12 * 24
|
||||
// 矩阵数量 默认 128 * 72
|
||||
matrixCount: {
|
||||
x: 24,
|
||||
y: 72
|
||||
x: 80,
|
||||
y: 45
|
||||
},
|
||||
customStyleHistory: null,
|
||||
showDrag: true,
|
||||
@ -555,6 +555,9 @@ export default {
|
||||
if (this.canvasStyleData.matrixCount) {
|
||||
this.matrixCount = this.canvasStyleData.matrixCount
|
||||
}
|
||||
// 1.3 版本重新设计仪表板定位方式，基准画布宽高为 1600*900 宽度自适应当前画布获取缩放比例scaleWidth
|
||||
// 高度缩放比例scaleHeight = scaleWidth 基础矩阵为128*72 矩阵原始宽度12.5*12.5 矩阵高度可以调整
|
||||
|
||||
if (this.outStyle.width && this.outStyle.height) {
|
||||
// 矩阵计算
|
||||
if (!this.canvasStyleData.selfAdaption) {
|
||||
@ -642,6 +645,7 @@ export default {
|
||||
position: relative;
|
||||
/*background: #fff;*/
|
||||
margin: auto;
|
||||
overflow-x: hidden;
|
||||
background-size:100% 100% !important;
|
||||
/*transform-style:preserve-3d;*/
|
||||
.lock {
|
||||
|
||||
@ -17,18 +17,6 @@
|
||||
<el-switch v-model="canvasStyleData.auxiliaryMatrix" :width="35" name="auxiliaryMatrix" />
|
||||
<span>{{ $t('panel.matrix_design') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="canvas-config" style="margin-right: 10px">
|
||||
<el-switch v-model="canvasStyleData.selfAdaption" :width="35" name="selfAdaption" />
|
||||
<span>{{ $t('panel.canvas_self_adaption') }} </span>
|
||||
</div>
|
||||
|
||||
<div class="canvas-config" style="margin-right: 55px">
|
||||
<span> {{ $t('panel.canvas_size') }} </span>
|
||||
<input v-model="canvasStyleData.width" :disabled="canvasStyleData.selfAdaption">
|
||||
<span>*</span>
|
||||
<input v-model="canvasStyleData.height" :disabled="canvasStyleData.selfAdaption">
|
||||
</div>
|
||||
<!-- <div class="canvas-config" style="margin-right: 10px">-->
|
||||
<!-- <span> {{ $t('panel.canvas_scale') }} </span>-->
|
||||
<!-- <input v-model="scale" @input="handleScaleChange"> %-->
|
||||
@ -383,7 +371,7 @@ export default {
|
||||
float: right;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
min-width: 900px;
|
||||
min-width: 500px;
|
||||
/*background: #fff;*/
|
||||
/*border-bottom: 1px solid #ddd;*/
|
||||
|
||||
|
||||
@ -79,6 +79,9 @@ const data = {
|
||||
},
|
||||
|
||||
setCanvasStyle(state, style) {
|
||||
if (style) {
|
||||
style['selfAdaption'] = true
|
||||
}
|
||||
state.canvasStyleData = style
|
||||
},
|
||||
|
||||
|
||||
@ -96,7 +96,6 @@
|
||||
|
||||
<div
|
||||
id="canvasInfo"
|
||||
:class="{'style-hidden':canvasStyleData.selfAdaption}"
|
||||
class="content this_canvas"
|
||||
@drop="handleDrop"
|
||||
@dragover="handleDragOver"
|
||||
@ -839,7 +838,7 @@ export default {
|
||||
}
|
||||
}
|
||||
.style-hidden{
|
||||
overflow: hidden;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
<el-row class="panel-design-preview">
|
||||
<div id="imageWrapper" ref="imageWrapper" style="width: 100%;height: 100%">
|
||||
<fullscreen style="height: 100%;background: #f7f8fa;overflow-y: auto" :fullscreen.sync="fullscreen">
|
||||
<Preview v-if="showMain" :in-screen="!fullscreen" :show-type="canvasStyleData.selfAdaption?'full':'width'" />
|
||||
<Preview v-if="showMain" :in-screen="!fullscreen" :show-type="'width'" />
|
||||
</fullscreen>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user