forked from github/dataease
Merge pull request #3834 from dataease/pr@dev@refactor_panel-scale
refactor(仪表板): 优化仪表板过滤组件表格等组件的自适应缩放方式，防止组件在仪表板不同分辨率下组件大小不适配问题
This commit is contained in:
Junjun
GitHub
commit
58beccb3da
@ -201,12 +201,16 @@ export default {
|
||||
componentActiveFlag() {
|
||||
return !this.mobileLayoutStatus && ((this.curComponent && this.config === this.curComponent && !this.previewVisible && !this.showPosition.includes('email-task')) || this.showPosition.includes('multiplexing'))
|
||||
},
|
||||
scale() {
|
||||
return Math.min(this.previewCanvasScale.scalePointWidth, this.previewCanvasScale.scalePointHeight)
|
||||
},
|
||||
curGap() {
|
||||
return (this.canvasStyleData.panel.gap === 'yes' && this.config.auxiliaryMatrix) ? this.componentGap : 0
|
||||
return ((this.canvasStyleData.panel.gap === 'yes' && this.config.auxiliaryMatrix) ? this.componentGap : 0) * this.scale
|
||||
},
|
||||
...mapState([
|
||||
'mobileLayoutStatus',
|
||||
'curComponent',
|
||||
'previewCanvasScale',
|
||||
'componentGap'
|
||||
])
|
||||
},
|
||||
|
||||
@ -552,7 +552,7 @@ export default {
|
||||
component.style[key] = this.format(component.style[key], this.scaleHeight)
|
||||
}
|
||||
if (this.needToChangeWidth.includes(key)) {
|
||||
if (key === 'fontSize' && this.terminal === 'mobile') {
|
||||
if (key === 'fontSize' && (this.terminal === 'mobile' || component.type === 'custom')) {
|
||||
// do nothing 移动端字符大小无需按照比例缩放，当前保持不变(包括 v-text 和 过滤组件)
|
||||
} else {
|
||||
component.style[key] = this.format(component.style[key], this.scaleWidth)
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<div
|
||||
ref="myContainer"
|
||||
class="my-container"
|
||||
:style="autoStyle"
|
||||
>
|
||||
<div
|
||||
ref="conditionMain"
|
||||
@ -60,6 +61,8 @@
|
||||
|
||||
<script>
|
||||
import inputStyleMixin from '@/components/widget/deWidget/inputStyleMixin'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'DeOutWidget',
|
||||
mixins: [inputStyleMixin],
|
||||
@ -112,6 +115,18 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
scale() {
|
||||
return this.previewCanvasScale.scalePointHeight
|
||||
},
|
||||
autoStyle() {
|
||||
return {
|
||||
height: (100 / this.scale) + '%!important',
|
||||
width: (100 / this.scale) + '%!important',
|
||||
left: 50 * (1 - 1 / this.scale) + '%', // 放大余量 除以 2
|
||||
top: 50 * (1 - 1 / this.scale) + '%', // 放大余量 除以 2
|
||||
transform: 'scale(' + this.scale + ')'
|
||||
}
|
||||
},
|
||||
sizeInfo() {
|
||||
let size
|
||||
if (this.duHeight > this.inputLargeSize) {
|
||||
@ -133,7 +148,10 @@ export default {
|
||||
},
|
||||
isFilterComponent() {
|
||||
return ['de-select', 'de-select-grid', 'de-date', 'de-input-search', 'de-number-range', 'de-select-tree'].includes(this.element.component)
|
||||
}
|
||||
},
|
||||
...mapState([
|
||||
'previewCanvasScale'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
'element.style': {
|
||||
|
||||
@ -55,25 +55,32 @@
|
||||
/>
|
||||
<el-row
|
||||
v-show="showPage"
|
||||
class="table-page"
|
||||
style="position: relative;"
|
||||
>
|
||||
<span class="total-style">
|
||||
{{ $t('chart.total') }}
|
||||
<span>{{ chart.datasetMode === 0 ? chart.totalItems : ((chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0) }}</span>
|
||||
{{ $t('chart.items') }}
|
||||
</span>
|
||||
<el-pagination
|
||||
small
|
||||
:current-page="currentPage.page"
|
||||
:page-sizes="[10,20,50,100]"
|
||||
:page-size="currentPage.pageSize"
|
||||
:pager-count="5"
|
||||
layout="prev, pager, next"
|
||||
:total="currentPage.show"
|
||||
class="page-style"
|
||||
@current-change="pageClick"
|
||||
@size-change="pageChange"
|
||||
/>
|
||||
<el-row
|
||||
class="table-page"
|
||||
:style="autoStyle"
|
||||
>
|
||||
<span class="total-style">
|
||||
{{ $t('chart.total') }}
|
||||
<span>{{
|
||||
chart.datasetMode === 0 ? chart.totalItems : ((chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0)
|
||||
}}</span>
|
||||
{{ $t('chart.items') }}
|
||||
</span>
|
||||
<el-pagination
|
||||
small
|
||||
:current-page="currentPage.page"
|
||||
:page-sizes="[10,20,50,100]"
|
||||
:page-size="currentPage.pageSize"
|
||||
:pager-count="5"
|
||||
layout="prev, pager, next"
|
||||
:total="currentPage.show"
|
||||
class="page-style"
|
||||
@current-change="pageClick"
|
||||
@size-change="pageChange"
|
||||
/>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
@ -87,6 +94,7 @@ import { baseTableInfo, baseTableNormal, baseTablePivot } from '@/views/chart/ch
|
||||
import TitleRemark from '@/views/chart/view/TitleRemark'
|
||||
import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
|
||||
import ChartTitleUpdate from './ChartTitleUpdate.vue'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'ChartComponentS2',
|
||||
@ -162,6 +170,18 @@ export default {
|
||||
},
|
||||
|
||||
computed: {
|
||||
scale() {
|
||||
return this.previewCanvasScale.scalePointWidth
|
||||
},
|
||||
autoStyle() {
|
||||
return {
|
||||
height: (100 / this.scale) + '%!important',
|
||||
width: (100 / this.scale) + '%!important',
|
||||
left: 50 * (1 - 1 / this.scale) + '%', // 放大余量 除以 2
|
||||
top: 50 * (1 - 1 / this.scale) + '%', // 放大余量 除以 2
|
||||
transform: 'scale(' + this.scale + ')'
|
||||
}
|
||||
},
|
||||
trackBarStyleTime() {
|
||||
return this.trackBarStyle
|
||||
},
|
||||
@ -173,7 +193,10 @@ export default {
|
||||
chartInfo() {
|
||||
const { id, title } = this.chart
|
||||
return { id, title }
|
||||
}
|
||||
},
|
||||
...mapState([
|
||||
'previewCanvasScale'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
chart: {
|
||||
|
||||
@ -44,23 +44,33 @@
|
||||
v-show="showPage"
|
||||
class="table-page"
|
||||
>
|
||||
<span class="total-style">
|
||||
{{ $t('chart.total') }}
|
||||
<span>{{ chart.datasetMode === 0 ? chart.totalItems : ((chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0) }}</span>
|
||||
{{ $t('chart.items') }}
|
||||
</span>
|
||||
<el-pagination
|
||||
small
|
||||
:current-page="currentPage.page"
|
||||
:page-sizes="[10,20,50,100]"
|
||||
:page-size="currentPage.pageSize"
|
||||
:pager-count="5"
|
||||
layout="prev, pager, next"
|
||||
:total="currentPage.show"
|
||||
class="page-style"
|
||||
@current-change="pageClick"
|
||||
@size-change="pageChange"
|
||||
/>
|
||||
<el-row style="position: relative;width:100% ">
|
||||
<el-row
|
||||
class="table-page-inner"
|
||||
:style="autoStyle"
|
||||
>
|
||||
<span class="total-style">
|
||||
{{ $t('chart.total') }}
|
||||
<span>{{
|
||||
chart.datasetMode === 0 ? chart.totalItems : ((chart.data && chart.data.tableRow) ? chart.data.tableRow.length : 0)
|
||||
}}</span>
|
||||
{{ $t('chart.items') }}
|
||||
</span>
|
||||
<el-pagination
|
||||
small
|
||||
:current-page="currentPage.page"
|
||||
:page-sizes="[10,20,50,100]"
|
||||
:page-size="currentPage.pageSize"
|
||||
:pager-count="5"
|
||||
layout="prev, pager, next"
|
||||
:total="currentPage.show"
|
||||
class="page-style"
|
||||
@current-change="pageClick"
|
||||
@size-change="pageChange"
|
||||
/>
|
||||
</el-row>
|
||||
</el-row>
|
||||
|
||||
</el-row>
|
||||
</el-row>
|
||||
</div>
|
||||
@ -70,6 +80,7 @@
|
||||
import { hexColorToRGBA } from '../../chart/util'
|
||||
import eventBus from '@/components/canvas/utils/eventBus'
|
||||
import { DEFAULT_SIZE } from '@/views/chart/chart/chart'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'TableNormal',
|
||||
@ -147,12 +158,27 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
scale() {
|
||||
return this.previewCanvasScale.scalePointWidth
|
||||
},
|
||||
autoStyle() {
|
||||
return {
|
||||
height: (100 / this.scale) + '%!important',
|
||||
width: (100 / this.scale) + '%!important',
|
||||
left: 50 * (1 - 1 / this.scale) + '%', // 放大余量 除以 2
|
||||
top: 50 * (1 - 1 / this.scale) + '%', // 放大余量 除以 2
|
||||
transform: 'scale(' + this.scale + ')'
|
||||
}
|
||||
},
|
||||
bg_class() {
|
||||
return {
|
||||
background: hexColorToRGBA('#ffffff', 0),
|
||||
borderRadius: this.borderRadius
|
||||
}
|
||||
}
|
||||
},
|
||||
...mapState([
|
||||
'previewCanvasScale'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
chart: function() {
|
||||
@ -473,38 +499,53 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-class ::v-deep .body--wrapper{
|
||||
background: rgba(1,1,1,0);
|
||||
}
|
||||
.table-class ::v-deep .elx-cell{
|
||||
max-height: none!important;
|
||||
line-height: normal!important;
|
||||
}
|
||||
.table-page{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.page-style{
|
||||
margin-right: auto;
|
||||
}
|
||||
.total-style{
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.page-style ::v-deep .el-input__inner{
|
||||
height: 24px;
|
||||
}
|
||||
.page-style ::v-deep button{
|
||||
background: transparent!important;
|
||||
}
|
||||
.page-style ::v-deep li{
|
||||
background: transparent!important;
|
||||
}
|
||||
.table-class ::v-deep .body--wrapper {
|
||||
background: rgba(1, 1, 1, 0);
|
||||
}
|
||||
|
||||
.table-class ::v-deep .elx-cell {
|
||||
max-height: none !important;
|
||||
line-height: normal !important;
|
||||
}
|
||||
|
||||
.table-page-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-page {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-style {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.total-style {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.page-style ::v-deep .el-input__inner {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.page-style ::v-deep button {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.page-style ::v-deep li {
|
||||
background: transparent !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user