You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
1.7 KiB
Vue
85 lines
1.7 KiB
Vue
2 years ago
|
<template>
|
||
|
|
<div
|
||
|
|
class="bs-design-wrap"
|
||
|
|
:class="{ 'no-pointer': isDesign }"
|
||
|
|
>
|
||
|
|
<div class="iframe-wrap">
|
||
|
|
<iframe
|
||
|
|
class="iframe"
|
||
|
|
allowfullscreen="true"
|
||
|
|
webkitallowfullscreen="true"
|
||
|
|
mozallowfullscreen="true"
|
||
|
|
oallowfullscreen="true"
|
||
|
|
msallowfullscreen="true"
|
||
|
|
:style="{
|
||
|
|
width: '200%',
|
||
|
|
height: '200%',
|
||
|
|
transform: 'scale(.5, .5) translate(-50%, -50%)',
|
||
|
|
border: 'none'
|
||
|
|
}"
|
||
|
|
:src="newUrl"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'IframeChart',
|
||
|
|
props: {
|
||
|
|
config: {
|
||
|
|
type: Object,
|
||
|
|
default: () => {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data () {
|
||
|
|
return { newUrl: '' }
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
isDesign () {
|
||
|
|
return (window?.BS_CONFIG?.routers?.designUrl || '/big-screen/design') === this.$route.path
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {},
|
||
|
|
mounted () {
|
||
|
|
this.newUrl = this.replaceUrlVariables(this.config.url)
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
replaceUrlVariables (url) {
|
||
|
|
const variableRegex = /\${([A-Za-z0-9_.]+)}/g
|
||
|
|
const variables = {}
|
||
|
|
let match
|
||
|
|
while ((match = variableRegex.exec(url))) {
|
||
|
|
const variable = match[1]
|
||
|
|
try {
|
||
|
|
const value = eval(variable)
|
||
|
|
variables[variable] = value !== undefined ? value : ''
|
||
|
|
} catch (e) {
|
||
|
|
variables[variable] = ''
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const replacedUrl = url.replace(variableRegex, (match, variable) => {
|
||
|
|
return variables[variable] || match
|
||
|
|
})
|
||
|
|
return replacedUrl
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.bs-design-wrap {
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
background: #fff;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
.iframe-wrap {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.no-pointer {
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
</style>
|