初始化

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>

frontend/packages/BasicComponents/IframeChart/setting.vue

@@ -0,0 +1,105 @@
+<!--
+ * @description: 外链
+ * @Date: 2022-09-01 15:26:34
+ * @Author: xingheng
+-->
+
+<template>
+  <div>
+    <el-form
+      ref="form"
+      label-width="100px"
+      label-position="left"
+      :model="config"
+      class="bs-el-form"
+    >
+      <SettingTitle>标题</SettingTitle>
+      <div class="setting-wrap">
+        <el-form-item
+          label="标题"
+          label-width="100px"
+        >
+          <el-input
+            v-model="config.title"
+            placeholder="请输入标题"
+          />
+        </el-form-item>
+      </div>
+      <SettingTitle>位置</SettingTitle>
+      <div class="setting-wrap">
+        <PosWhSetting :config="config" />
+      </div>
+      <SettingTitle>旋转</SettingTitle>
+          <div class="lc-field-body">
+            <RotateSetting
+              :config="config"
+            />
+          </div>
+       <SettingTitle v-if="config.border">边框</SettingTitle>
+          <div class="lc-field-body">
+            <BorderSetting
+              v-if="config.border"
+              label-width="100px"
+              :config="config.border"
+              :bigTitle='config.title'
+            />
+          </div>
+      <SettingTitle>基础</SettingTitle>
+      <div class="setting-wrap">
+        <el-form-item
+          label="URL"
+          label-width="100px"
+        >
+          <el-input
+            v-model="config.url"
+            type="textarea"
+            rows="4"
+            placeholder="请输入URL地址"
+          />
+        </el-form-item>
+      </div>
+    </el-form>
+  </div>
+</template>
+<script>
+import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
+import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
+import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
+
+export default {
+  name: 'IframeChartSetting',
+  components: {
+    PosWhSetting,
+    SettingTitle,
+    BorderSetting,
+    RotateSetting
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    config: {
+      get () {
+        return this.$store.state.bigScreen.activeItemConfig
+      },
+      set (val) {
+        this.$store.state.bigScreen.activeItemConfig = val
+      }
+    }
+  },
+  watch: {
+  },
+  mounted () {},
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/settingWrap.scss";
+.setting-wrap{
+  padding: 12px 16px;
+}
+</style>

frontend/packages/BasicComponents/IframeChart/settingConfig.js

@@ -0,0 +1,43 @@
+/*
+ * @description: 外链配置
+ * @Date: 2022-09-01 15:26:34
+ * @Author: xingheng
+ */
+
+import { commonConfig } from '../../js/config'
+
+export const settingConfig = {
+  theme: 'dark',
+  displayOption: {
+    dataAllocation: {
+      // 是否存在数据配置
+      enable: false
+    }
+  }
+}
+const customConfig = {
+  type: 'iframeChart',
+  root: {
+    version: '2023071001',
+    url: 'https://sv.jinhuwl.top:5744/',
+    // 绕x轴旋转角度
+    rotateX: 0,
+    // 绕y轴旋转角度
+    rotateY: 0,
+    // 绕z轴旋转角度
+    rotateZ: 0,
+    // 透视距离
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
+  },
+  customize: {
+    fontSize: 20,
+    fontWeight: 700,
+    color: '#36474f'
+  }
+
+}
+export const dataConfig = {
+  ...commonConfig(customConfig)
+}