初始化

frontend/packages/BasicComponents/IframeChart/index.vue

@@ -0,0 +1,87 @@
+<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.changeStyle()
+  },
+  methods: {
+    changeStyle (config) {
+      this.newUrl = this.replaceUrlVariables(this.config.url)
+    },
+    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>