Merge pull request #824 from dataease/pr@dev@refactor_panel-text

feat:仪表板可以自动进行无限下拉,取消仪表板尺寸设置,统一为自适应
This commit is contained in:
王嘉豪
2021-09-15 18:12:15 +08:00
committed by GitHub
7 changed files with 32 additions and 31 deletions

View File

@@ -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) {

View File

@@ -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 {

View File

@@ -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;*/