161 lines
4.1 KiB
Vue
161 lines
4.1 KiB
Vue
<template>
|
|
<div id="canvasInfo" :style="customStyle" class="bg">
|
|
<ComponentWrapper
|
|
v-for="(item, index) in componentDataInfo"
|
|
:key="index"
|
|
:config="item"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getStyle } from '@/components/canvas/utils/style'
|
|
import ComponentWrapper from './ComponentWrapper'
|
|
import { changeStyleWithScale } from '@/components/canvas/utils/translate'
|
|
import { uuid } from 'vue-uuid'
|
|
import { deepCopy } from '@/components/canvas/utils/utils'
|
|
import eventBus from '@/components/canvas/utils/eventBus'
|
|
import elementResizeDetectorMaker from 'element-resize-detector'
|
|
import { get } from '@/api/panel/panel'
|
|
|
|
export default {
|
|
components: { ComponentWrapper },
|
|
model: {
|
|
prop: 'show',
|
|
event: 'change'
|
|
},
|
|
props: {
|
|
show: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
isShowPreview: false,
|
|
panelId: '',
|
|
needToChangeHeight: [
|
|
'top',
|
|
'height',
|
|
'fontSize',
|
|
'borderWidth'
|
|
],
|
|
needToChangeWidth: [
|
|
'left',
|
|
'width'
|
|
],
|
|
scaleWidth: '100',
|
|
scaleHeight: '100',
|
|
timer: null,
|
|
componentDataSource: [],
|
|
componentData: [],
|
|
canvasStyleData: {}
|
|
|
|
}
|
|
},
|
|
computed: {
|
|
customStyle() {
|
|
let style = {}
|
|
if (this.canvasStyleData.openCommonStyle) {
|
|
if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
|
|
style = {
|
|
width: '100%',
|
|
height: '100%',
|
|
background: `url(${this.canvasStyleData.panel.imageUrl}) no-repeat`
|
|
}
|
|
} else {
|
|
style = {
|
|
width: '100%',
|
|
height: '100%',
|
|
background: this.canvasStyleData.panel.color
|
|
}
|
|
}
|
|
}
|
|
return style
|
|
},
|
|
componentDataInfo() {
|
|
return this.componentData
|
|
}
|
|
},
|
|
mounted() {
|
|
const _this = this
|
|
// 加载数据
|
|
_this.restore()
|
|
const erd = elementResizeDetectorMaker()
|
|
// 监听div变动事件
|
|
erd.listenTo(document.getElementById('canvasInfo'), element => {
|
|
_this.$nextTick(() => {
|
|
_this.resize()
|
|
})
|
|
})
|
|
// this.resize()
|
|
},
|
|
methods: {
|
|
changeStyleWithScale,
|
|
getStyle,
|
|
close() {
|
|
this.$emit('change', false)
|
|
},
|
|
resize() {
|
|
this.scaleWidth = window.innerWidth * 100 / this.canvasStyleData.width// 获取宽度比
|
|
this.scaleHeight = window.innerHeight * 100 / this.canvasStyleData.height// 获取高度比
|
|
this.handleScaleChange()
|
|
},
|
|
restore() {
|
|
this.panelId = this.$route.path.split('/')[2]
|
|
// 加载视图数据
|
|
get('panel/group/findOne/' + this.panelId).then(response => {
|
|
this.componentDataSource = this.resetID(JSON.parse(response.data.panelData))
|
|
this.canvasStyleData = JSON.parse(response.data.panelStyle)
|
|
this.$store.commit('setCanvasStyle', {
|
|
...this.canvasStyleData
|
|
})
|
|
this.resize()
|
|
})
|
|
},
|
|
resetID(data) {
|
|
if (data) {
|
|
data.forEach(item => {
|
|
item.type !== 'custom' && (item.id = uuid.v1())
|
|
})
|
|
}
|
|
return data
|
|
},
|
|
|
|
format(value, scale) {
|
|
return value * scale / 100
|
|
},
|
|
handleScaleChange() {
|
|
const componentData = deepCopy(this.componentDataSource)
|
|
componentData.forEach(component => {
|
|
Object.keys(component.style).forEach(key => {
|
|
if (this.needToChangeHeight.includes(key)) {
|
|
component.style[key] = this.format(component.style[key], this.scaleHeight)
|
|
}
|
|
if (this.needToChangeWidth.includes(key)) {
|
|
component.style[key] = this.format(component.style[key], this.scaleWidth)
|
|
}
|
|
})
|
|
})
|
|
this.componentData = componentData
|
|
this.$nextTick(() => (eventBus.$emit('resizing', '')))
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bg {
|
|
height: 100vh!important;
|
|
min-width: 800px;
|
|
min-height: 600px;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100% 100% !important;
|
|
overflow: auto;
|
|
position: relative;
|
|
margin: 0;
|
|
background-color: #f7f8fa;
|
|
}
|
|
</style>
|