提交 cda6b751 authored 作者: wangjiahao's avatar wangjiahao

refactor: 仪表板适配后端长屏截图

上级 b191c845
<template> <template>
<div class="bg" :style="customStyle"> <div class="bg" :style="customStyle">
<div id="canvasInfoMain" ref="canvasInfoMain" style="width: 100%;height: 100%"> <div id="canvasInfoMain" ref="canvasInfoMain" :style="canvasInfoMainStyle">
<div <div
id="canvasInfoTemp" id="canvasInfoTemp"
ref="canvasInfoTemp" ref="canvasInfoTemp"
...@@ -73,6 +73,11 @@ export default { ...@@ -73,6 +73,11 @@ export default {
event: 'change' event: 'change'
}, },
props: { props: {
// 后端截图
backScreenShot: {
type: Boolean,
default: false
},
screenShot: { screenShot: {
type: Boolean, type: Boolean,
default: false default: false
...@@ -125,6 +130,19 @@ export default { ...@@ -125,6 +130,19 @@ export default {
created() { created() {
}, },
computed: { computed: {
canvasInfoMainStyle() {
if (this.backScreenShot) {
return {
width: '100%',
height: this.mainHeight
}
} else {
return {
width: '100%',
height: '100%'
}
}
},
customStyle() { customStyle() {
let style = { let style = {
width: '100%' width: '100%'
...@@ -142,6 +160,11 @@ export default { ...@@ -142,6 +160,11 @@ export default {
} }
} }
} }
if (this.backScreenShot) {
style.height = this.mainHeight
} else {
style.padding = '5px'
}
return style return style
}, },
screenShotStyle() { screenShotStyle() {
...@@ -189,6 +212,7 @@ export default { ...@@ -189,6 +212,7 @@ export default {
_this.$nextTick(() => { _this.$nextTick(() => {
// 将mainHeight 修改为px 临时解决html2canvas 截图不全的问题 // 将mainHeight 修改为px 临时解决html2canvas 截图不全的问题
_this.mainHeight = tempCanvas.scrollHeight + 'px!important' _this.mainHeight = tempCanvas.scrollHeight + 'px!important'
this.$emit('mainHeightChange', _this.mainHeight)
}) })
}) })
eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog) eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
...@@ -231,7 +255,12 @@ export default { ...@@ -231,7 +255,12 @@ export default {
const canvasHeight = document.getElementById('canvasInfoMain').offsetHeight const canvasHeight = document.getElementById('canvasInfoMain').offsetHeight
const canvasWidth = document.getElementById('canvasInfoMain').offsetWidth const canvasWidth = document.getElementById('canvasInfoMain').offsetWidth
this.scaleWidth = (canvasWidth) * 100 / this.canvasStyleData.width // 获取宽度比 this.scaleWidth = (canvasWidth) * 100 / this.canvasStyleData.width // 获取宽度比
this.scaleHeight = canvasHeight * 100 / this.canvasStyleData.height// 获取高度比 // 如果是后端截图方式使用 的高度伸缩比例和宽度比例相同
if (this.backScreenShot) {
this.scaleHeight = this.scaleWidth
} else {
this.scaleHeight = canvasHeight * 100 / this.canvasStyleData.height// 获取高度比
}
this.$store.commit('setPreviewCanvasScale', { scaleWidth: (this.scaleWidth / 100), scaleHeight: (this.scaleHeight / 100) }) this.$store.commit('setPreviewCanvasScale', { scaleWidth: (this.scaleWidth / 100), scaleHeight: (this.scaleHeight / 100) })
this.handleScaleChange() this.handleScaleChange()
}, },
...@@ -281,7 +310,7 @@ export default { ...@@ -281,7 +310,7 @@ export default {
} }
}, },
handleMouseDown() { handleMouseDown() {
this.$store.commit('setClickComponentStatus', false) this.$store.commit('setClickComponentStatus', fals)
}, },
initMobileCanvas() { initMobileCanvas() {
this.$store.commit('openMobileLayout') this.$store.commit('openMobileLayout')
...@@ -292,7 +321,6 @@ export default { ...@@ -292,7 +321,6 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.bg { .bg {
padding: 5px;
min-width: 200px; min-width: 200px;
min-height: 300px; min-height: 300px;
width: 100%; width: 100%;
......
<template> <template>
<div v-loading="dataLoading" class="bg"> <div v-loading="dataLoading" class="bg" :style="bgStyle">
<Preview v-if="!dataLoading" /> <Preview v-if="!dataLoading" :back-screen-shot="backScreenShot" @mainHeightChange="mainHeightChange" />
</div> </div>
</template> </template>
<script> <script>
...@@ -14,16 +14,33 @@ export default { ...@@ -14,16 +14,33 @@ export default {
components: { Preview }, components: { Preview },
data() { data() {
return { return {
dataLoading: false dataLoading: false,
backScreenShot: false,
mainHeight: '100vh!important'
}
},
computed: {
bgStyle() {
if (this.backScreenShot) {
return { height: this.mainHeight }
} else {
return { height: '100vh!important' }
}
} }
}, },
mounted() { mounted() {
this.restore() this.restore()
}, },
methods: { methods: {
mainHeightChange(mainHeight) {
this.mainHeight = mainHeight
},
restore() { restore() {
this.dataLoading = true this.dataLoading = true
this.panelId = this.$route.path.split('/')[2] this.panelId = this.$route.params.reportId
if (this.$route.params.backScreenShot !== undefined) {
this.backScreenShot = this.$route.params.backScreenShot
}
// 加载视图数据 // 加载视图数据
findOne(this.panelId).then(response => { findOne(this.panelId).then(response => {
this.dataLoading = false this.dataLoading = false
......
...@@ -29,7 +29,7 @@ router.beforeEach(async(to, from, next) => { ...@@ -29,7 +29,7 @@ router.beforeEach(async(to, from, next) => {
NProgress.done() NProgress.done()
} else { } else {
const hasGetUserInfo = store.getters.name const hasGetUserInfo = store.getters.name
if (hasGetUserInfo || to.path.indexOf('/preview/') > -1 || to.path.indexOf('/delink') > -1 || to.path.indexOf('/nolic') > -1) { if (hasGetUserInfo || to.path.indexOf('/previewScreenShot/') > -1 || to.path.indexOf('/preview/') > -1 || to.path.indexOf('/delink') > -1 || to.path.indexOf('/nolic') > -1) {
next() next()
store.dispatch('permission/setCurrentPath', to.path) store.dispatch('permission/setCurrentPath', to.path)
} else { } else {
......
...@@ -82,7 +82,11 @@ export const constantRoutes = [ ...@@ -82,7 +82,11 @@ export const constantRoutes = [
component: () => import('@/components/canvas/components/Editor/PreviewEject'), component: () => import('@/components/canvas/components/Editor/PreviewEject'),
hidden: true hidden: true
}, },
{
path: '/previewScreenShot/:reportId/:backScreenShot',
component: () => import('@/components/canvas/components/Editor/PreviewEject'),
hidden: true
},
{ {
path: '/previewFullScreen', path: '/previewFullScreen',
component: () => import('@/components/canvas/components/Editor/PreviewFullScreen'), component: () => import('@/components/canvas/components/Editor/PreviewFullScreen'),
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论