data-room/data-room-ui/packages/BasicComponents/IframeChart/index.vue

<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>