feat(仪表板): 增加组件内部样式是否自适应仪表板缩放功能 #5793

This commit is contained in:
wangjiahao 2023-11-02 13:20:47 +08:00
parent 630f7704f1
commit ca51c15eda
9 changed files with 73 additions and 59 deletions

View File

@ -7,10 +7,10 @@
@change="openMobileLayout"
>
<el-radio-button :label="false">
<span class="icon iconfont icon-icon_pc_outlined icon16_only" />
<span class="icon iconfont icon-icon_pc_outlined icon16_only"/>
</el-radio-button>
<el-radio-button :label="true">
<span class="icon iconfont icon-icon_phone_outlined icon16_only" />
<span class="icon iconfont icon-icon_phone_outlined icon16_only"/>
</el-radio-button>
</el-radio-group>
</div>
@ -99,7 +99,7 @@
<el-dropdown-item>
<el-dropdown placement="right-start">
<span>
<span class="icon iconfont icon-icon_moments-categories_outlined icon16" />
<span class="icon iconfont icon-icon_moments-categories_outlined icon16"/>
<span class="text14 margin-left8">{{ $t('panel.new_element_distribution') }}</span>
<svg-icon
icon-class="icon_right_outlined"
@ -135,17 +135,17 @@
/>
</el-dropdown-item>
<el-dropdown-item @click.native="openOuterParamsSet">
<span class="icon iconfont icon-icon-quicksetting icon16" />
<span class="icon iconfont icon-icon-quicksetting icon16"/>
<span class="text14 margin-left8">{{ $t('panel.params_setting') }}</span>
</el-dropdown-item>
<el-dropdown-item @click.native="clearCanvas">
<span class="icon iconfont icon-icon_clear_outlined icon16" />
<span class="icon iconfont icon-icon_clear_outlined icon16"/>
<span class="text14 margin-left8">{{ $t('panel.clean_canvas') }}</span>
</el-dropdown-item>
<el-dropdown-item
v-if="showWatermarkSetting"
>
<span class="icon iconfont icon-WATERMARK icon16" />
<span class="icon iconfont icon-WATERMARK icon16"/>
<span class="text14 margin-left8">{{ $t('panel.watermark') }}</span>
<el-switch
v-model="panelInfo.watermarkOpen"
@ -192,7 +192,7 @@
@click="batchOption"
><span
class="icon-font-margin"
>{{ batchOptStatus?$t('panel.cancel_batch_opt'):$t('panel.batch_opt') }}</span></span>
>{{ batchOptStatus ? $t('panel.cancel_batch_opt') : $t('panel.batch_opt') }}</span></span>
<span style="float: right;margin-right: 24px">
<el-button
size="mini"
@ -255,15 +255,16 @@
<script>
import generateID from '@/components/canvas/utils/generateID'
import toast from '@/components/canvas/utils/toast'
import { mapState } from 'vuex'
import { commonAttr, commonStyle } from '@/components/canvas/customComponent/component-list'
import {mapState} from 'vuex'
import {commonAttr, commonStyle} from '@/components/canvas/customComponent/component-list'
import eventBus from '@/components/canvas/utils/eventBus'
import { deepCopy, mobile2MainCanvas } from '@/components/canvas/utils/utils'
import { panelUpdate, removePanelCache, saveCache } from '@/api/panel/panel'
import { getPanelAllLinkageInfo, saveLinkage } from '@/api/panel/linkage'
import {deepCopy, mobile2MainCanvas} from '@/components/canvas/utils/utils'
import {panelUpdate, removePanelCache, saveCache} from '@/api/panel/panel'
import {getPanelAllLinkageInfo, saveLinkage} from '@/api/panel/linkage'
import bus from '@/utils/bus'
import { queryPanelJumpInfo } from '@/api/panel/linkJump'
import { inOtherPlatform } from '@/utils/index'
import {queryPanelJumpInfo} from '@/api/panel/linkJump'
import {inOtherPlatform} from '@/utils/index'
export default {
name: 'Toolbar',
props: {
@ -274,6 +275,7 @@ export default {
return {
showPageLine: false,
showGridSwitch: false,
autoSizeAdaptorSwitch: true,
mobileLayoutInitStatus: false,
isShowPreview: false,
needToChange: [
@ -333,6 +335,7 @@ export default {
this.scale = this.canvasStyleData.scale
this.mobileLayoutInitStatus = this.mobileLayoutStatus
this.showGridSwitch = this.canvasStyleData.aidedDesign.showGrid
this.autoSizeAdaptorSwitch = this.canvasStyleData.autoSizeAdaptor || true
this.showPageLine = this.canvasStyleData.pdfPageLine?.showPageLine
this.autoCache()
},
@ -362,7 +365,7 @@ export default {
this.$emit('close-left-panel')
removePanelCache(this.panelInfo.id)
this.$nextTick(() => {
bus.$emit('PanelSwitchComponent', { name: 'PanelMain' })
bus.$emit('PanelSwitchComponent', {name: 'PanelMain'})
})
},
closePanelEdit() {
@ -545,7 +548,7 @@ export default {
this.$store.commit('setComponentData', [])
this.$store.commit('recordSnapshot', 'clearCanvas')
bus.$emit('change_panel_right_draw', false)
this.$store.commit('setCurComponent', { component: null, index: null })
this.$store.commit('setCurComponent', {component: null, index: null})
},
handlePreviewChange() {
@ -572,7 +575,7 @@ export default {
const linkageInfo = this.targetLinkageInfo[key]
const linkageFields = linkageInfo['linkageFields']
if (linkageFields) {
linkageFields.forEach(function(linkage) {
linkageFields.forEach(function (linkage) {
if (!(linkage.sourceField && linkage.targetField)) {
subCheckCount++
}
@ -623,6 +626,10 @@ export default {
this.$store.commit('canvasChange')
this.canvasStyleData.aidedDesign.showGrid = !this.canvasStyleData.aidedDesign.showGrid
},
showSizeAdaptorSwitchChange() {
this.$store.commit('canvasChange')
this.canvasStyleData.autoSizeAdaptor = !this.canvasStyleData.autoSizeAdaptor
},
showPageLineChange() {
this.$store.commit('canvasChange')
this.canvasStyleData.pdfPageLine.showPageLine = !this.canvasStyleData.pdfPageLine.showPageLine

View File

@ -150,13 +150,13 @@
</template>
<script>
import { mapState } from 'vuex'
import {mapState} from 'vuex'
import Shape from './Shape'
import DeDrag from '@/components/deDrag'
// eslint-disable-next-line no-unused-vars
import { getComponentRotatedStyle, getStyle } from '@/components/canvas/utils/style'
import { _$, imgUrlTrans } from '@/components/canvas/utils/utils'
import {getComponentRotatedStyle, getStyle} from '@/components/canvas/utils/style'
import {_$, imgUrlTrans} from '@/components/canvas/utils/utils'
import ContextMenu from './ContextMenu'
import MarkLine from './MarkLine'
import Area from './Area'
@ -164,13 +164,13 @@ import eventBus from '@/components/canvas/utils/eventBus'
import Grid from './Grid'
import PageLineEditor from './PageLineEditor'
import PGrid from './PGrid'
import { changeStyleWithScale } from '@/components/canvas/utils/translate'
import {changeStyleWithScale} from '@/components/canvas/utils/translate'
import UserViewDialog from '@/components/canvas/customComponent/UserViewDialog'
import DeOutWidget from '@/components/dataease/DeOutWidget'
import DragShadow from '@/components/deDrag/Shadow'
import bus from '@/utils/bus'
import LinkJumpSet from '@/views/panel/linkJumpSet'
import { buildFilterMap, buildViewKeyMap, formatCondition, valueValid, viewIdMatch } from '@/utils/conditionUtil'
import {buildFilterMap, buildViewKeyMap, formatCondition, valueValid, viewIdMatch} from '@/utils/conditionUtil'
//
import _ from 'lodash'
import _jq from 'jquery'
@ -190,11 +190,11 @@ let itemMaxX = 0
function debounce(func, time) {
if (!isOverlay) {
(function(t) {
(function (t) {
isOverlay = true
setTimeout(function() {
setTimeout(function () {
t()
setTimeout(function() {
setTimeout(function () {
isOverlay = false
if (lastTask !== undefined) {
debounce(lastTask, time)
@ -319,10 +319,10 @@ function init() {
resetPositionBox.call(this)
initPosition(this)
let i = 0
const timeid = setInterval(function() {
const timeid = setInterval(function () {
if (i >= vm.yourList.length) {
clearInterval(timeid)
vm.$nextTick(function() {
vm.$nextTick(function () {
vm.moveAnimate = true
})
} else {
@ -339,7 +339,7 @@ function resizePlayer(item, newSize) {
removeItemFromPositionBox.call(vm, item)
const belowItems = findBelowItems.call(this, item)
_.forEach(belowItems, function(upItem) {
_.forEach(belowItems, function (upItem) {
const canGoUpRows = canItemGoUp.call(vm, upItem)
if (canGoUpRows > 0) {
moveItemUp.call(vm, upItem, canGoUpRows)
@ -426,7 +426,7 @@ function movePlayer(item, position) {
removeItemFromPositionBox.call(vm, item)
const belowItems = findBelowItems.call(this, item)
_.forEach(belowItems, function(upItem) {
_.forEach(belowItems, function (upItem) {
const canGoUpRows = canItemGoUp.call(vm, upItem)
if (canGoUpRows > 0) {
moveItemUp.call(vm, upItem, canGoUpRows)
@ -452,7 +452,7 @@ function removeItem(index) {
removeItemFromPositionBox.call(vm, item)
const belowItems = findBelowItems.call(this, item)
_.forEach(belowItems, function(upItem) {
_.forEach(belowItems, function (upItem) {
const canGoUpRows = canItemGoUp.call(vm, upItem)
if (canGoUpRows > 0) {
moveItemUp.call(vm, upItem, canGoUpRows)
@ -544,7 +544,7 @@ function findClosetCoords(item, tCoord) {
y: collisionsItem[0].coord.el.y
})
setTimeout(function() {
setTimeout(function () {
isOverlay = false
}, 200)
}
@ -592,7 +592,7 @@ function changeItemCoord(item) {
el: item
}
const index = _.findIndex(vm.coordinates, function(o) {
const index = _.findIndex(vm.coordinates, function (o) {
return o.el._dragId === item._dragId
})
if (index !== -1) {
@ -609,7 +609,7 @@ function emptyTargetCell(item) {
const vm = this
const belowItems = findBelowItems.call(vm, item)
_.forEach(belowItems, function(downItem, index) {
_.forEach(belowItems, function (downItem, index) {
if (downItem._dragId === item._dragId) return
const moveSize = item.y + item.sizey - downItem.y
if (moveSize > 0) {
@ -649,7 +649,7 @@ function moveItemDown(item, size) {
const vm = this
removeItemFromPositionBox.call(vm, item)
const belowItems = findBelowItems.call(vm, item)
_.forEach(belowItems, function(downItem, index) {
_.forEach(belowItems, function (downItem, index) {
if (downItem._dragId === item._dragId) return
const moveSize = calcDiff.call(vm, item, downItem, size)
if (moveSize > 0) {
@ -722,7 +722,7 @@ function moveItemUp(item, size) {
changeItemCoord.call(this, item)
_.forEach(belowItems, function(upItem, index) {
_.forEach(belowItems, function (upItem, index) {
const moveSize = canItemGoUp.call(vm, upItem)
if (moveSize > 0) {
moveItemUp.call(vm, upItem, moveSize)
@ -806,19 +806,19 @@ export default {
dragStart: {
required: false,
type: Function,
default: function() {
default: function () {
}
},
dragging: {
required: false,
type: Function,
default: function() {
default: function () {
}
},
dragEnd: {
required: false,
type: Function,
default: function() {
default: function () {
}
},
resizable: {
@ -829,19 +829,19 @@ export default {
resizeStart: {
required: false,
type: Function,
default: function() {
default: function () {
}
},
resizing: {
required: false,
type: Function,
default: function() {
default: function () {
}
},
resizeEnd: {
required: false,
type: Function,
default: function() {
default: function () {
}
},
matrixCount: {
@ -1004,6 +1004,7 @@ export default {
return this.curCanvasScaleMap[this.canvasId]
},
...mapState([
'canvasStyleData',
'curComponent',
'editor',
'linkageSettingStatus',
@ -1287,7 +1288,7 @@ export default {
}
return -1
},
pluginEditHandler({ e, id }) {
pluginEditHandler({e, id}) {
let index = -1
for (let i = 0; i < this.componentData.length; i++) {
const item = this.componentData[i]
@ -1397,12 +1398,12 @@ export default {
getSelectArea() {
const result = []
//
const { x, y } = this.start
const {x, y} = this.start
//
this.componentData.forEach(component => {
if (component.isLock) return
const { left, top, width, height } = component.style
const {left, top, width, height} = component.style
if (x <= left && y <= top && (left + width <= x + this.width) && (top + height <= y + this.height)) {
result.push(component)
}
@ -1458,7 +1459,7 @@ export default {
getTextareaHeight(element, text) {
// eslint-disable-next-line prefer-const
let { lineHeight, fontSize, height } = element.style
let {lineHeight, fontSize, height} = element.style
if (lineHeight === '') {
lineHeight = 1.5
}
@ -1523,8 +1524,8 @@ export default {
})
if (this.canvasId === 'canvas-main') {
this.$store.commit('setPreviewCanvasScale', {
scaleWidth: this.scalePointWidth,
scaleHeight: this.scalePointHeight
scaleWidth: this.canvasStyleData.autoSizeAdaptor ? this.scalePointWidth : 1,
scaleHeight: this.canvasStyleData.autoSizeAdaptor ? this.scalePointHeight : 1
})
}
}
@ -1549,7 +1550,7 @@ export default {
}
},
getRefLineParams(params) {
const { vLine, hLine } = params
const {vLine, hLine} = params
this.vLine = vLine
this.hLine = hLine
},
@ -1702,8 +1703,8 @@ export default {
newX = newX > 0 ? newX : 1
newY = newY > 0 ? newY : 1
if (item.sizex !== nowX || item.sizey !== nowY) {
debounce((function(newX, oldX, newY, oldY) {
return function() {
debounce((function (newX, oldX, newY, oldY) {
return function () {
if (newX !== oldX || oldY !== newY) {
movePlayer.call(vm, resizeItem, {
x: newX,
@ -1739,8 +1740,8 @@ export default {
return
}
if (newX !== oldX || oldY !== newY) {
debounce((function(newX, oldX, newY, oldY) {
return function() {
debounce((function (newX, oldX, newY, oldY) {
return function () {
if (newX !== oldX || oldY !== newY) {
movePlayer.call(vm, moveItem, {
x: newX,
@ -1778,7 +1779,7 @@ export default {
// 使copy
const finalList = []
const _this = this
_.forEach(this.componentData, function(item, index) {
_.forEach(this.componentData, function (item, index) {
if (_.isEmpty(item)) return
if (_this.canvasId === item.canvasId) {
delete item['_dragId']
@ -1820,7 +1821,7 @@ export default {
addItemBox(item) {
this.yourList.push(item)
this.$nextTick(function() {
this.$nextTick(function () {
addItem.call(this, item, this.yourList.length - 1)
})
},
@ -1851,7 +1852,7 @@ export default {
//
resizeParentBoundsRef() {
const _this = this
_this.componentData.forEach(function(data, index) {
_this.componentData.forEach(function (data, index) {
_this.$refs.deDragRef && _this.$refs.deDragRef[index] && _this.$refs.deDragRef[index].checkParentSize()
})
},

View File

@ -664,8 +664,8 @@ export default {
}
if (this.isMainCanvas()) {
this.$store.commit('setPreviewCanvasScale', {
scaleWidth: (this.scaleWidth / 100),
scaleHeight: (this.scaleHeight / 100)
scaleWidth: this.canvasStyleData.autoSizeAdaptor ? (this.scaleWidth / 100) : 1,
scaleHeight: this.canvasStyleData.autoSizeAdaptor ? (this.scaleHeight / 100) : 1
})
}
this.handleScaleChange()

View File

@ -86,6 +86,7 @@ export function panelInit(componentData, componentStyle) {
export function panelDataPrepare(componentData, componentStyle, callback) {
// style初始化
componentStyle.autoSizeAdaptor = (componentStyle.autoSizeAdaptor || true)
componentStyle.refreshTime = (componentStyle.refreshTime || 5)
componentStyle.refreshViewLoading = (componentStyle.refreshViewLoading || false)
componentStyle.refreshUnit = (componentStyle.refreshUnit || 'minute')

View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1698901715032" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4099" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M960.605 932.345v-240.231c0.045-7.2-2.723-14.445-8.213-19.98-11.115-11.047-29.002-11.047-40.071 0-5.535 5.535-8.303 12.757-8.303 19.98v171.923l-351.99-352.035 351.99-352.013v171.855c0 7.245 2.767 14.49 8.303 20.002 11.070 11.070 28.957 11.070 40.071 0 5.49-5.511 8.257-12.78 8.213-20.002v-240.187c0.045-7.223-2.723-14.468-8.213-20.003-5.58-5.511-12.803-8.279-20.025-8.302h-240.233c-7.222 0-14.467 2.79-19.98 8.302-11.115 11.049-11.115 28.957 0 40.050 5.511 5.535 12.735 8.302 19.98 8.279h171.9l-352.013 352.013-352.012-352.035h171.855c7.268 0.022 14.49-2.745 20.025-8.279 11.070-11.047 11.070-29.002 0-40.050-5.49-5.511-12.758-8.279-20.025-8.303h-240.187c-7.268 0-14.513 2.79-20.025 8.303-5.513 5.558-8.279 12.803-8.279 20.048v240.165c0 7.245 2.79 14.512 8.279 20.002 11.070 11.070 28.98 11.070 40.028 0 5.513-5.511 8.279-12.713 8.279-20.002v-171.855l352.058 352.012-352.035 352.035v-171.922c0-7.2-2.745-14.445-8.279-19.98-11.070-11.047-29.002-11.047-40.028 0-5.558 5.535-8.279 12.757-8.279 19.98v240.231c0 7.223 2.79 14.468 8.279 20.048 5.535 5.468 12.757 8.279 20.025 8.279h240.188c7.268 0 14.49-2.745 20.025-8.279 11.070-11.047 11.070-29.002 0-40.050-5.535-5.535-12.78-8.257-20.025-8.257h-171.877l352.012-352.035 352.013 352.035h-171.9c-7.222 0-14.467 2.768-19.98 8.257-11.115 11.049-11.115 29.002 0 40.050 5.511 5.468 12.735 8.279 19.98 8.279h240.255c7.2 0 14.445-2.813 20.025-8.279 5.467-5.602 8.19-12.825 8.19-20.048z" p-id="4100" fill="#646A73"></path></svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -2313,6 +2313,7 @@ export default {
suspension: 'suspension',
new_element_distribution: 'Element Distribution',
aided_grid: 'Aided Grid',
auto_size_adaptor: 'Component Adaptor',
aided_grid_open: 'Open',
aided_grid_close: 'Close',
export_pdf_page: 'Pagination Line',

View File

@ -2307,6 +2307,7 @@ export default {
suspension: '懸浮',
new_element_distribution: '元素移入分佈方式',
aided_grid: '輔助設計網格',
auto_size_adaptor: '組件自適應',
aided_grid_open: '打開',
aided_grid_close: '關閉',
export_pdf_page: '分頁線',

View File

@ -2307,6 +2307,7 @@ export default {
suspension: '悬浮',
new_element_distribution: '元素移入分布方式',
aided_grid: '辅助设计网格',
auto_size_adaptor: '组件自适应',
aided_grid_open: '打开',
aided_grid_close: '关闭',
export_pdf_page: '分页线',

View File

@ -75,6 +75,7 @@ export const CANVAS_STYLE = {
showPageLine: false,
proportion: null
},
autoSizeAdaptor: true, // 组件内容大小自适应(自适应时会根据画布缩放比例对内容进行缩放,关闭则显示内部文本实际大小)
refreshViewEnable: false, // 开启视图刷新(默认关闭)
refreshViewLoading: true, // 仪表板视图loading提示
refreshUnit: 'minute', // 仪表板刷新时间带外 默认 分钟