调整工程结构,并进行了优化

packages/bigscreen/designer/preview.vue

@@ -0,0 +1,58 @@
+<template>
+  <section class="preview">
+    <ai-dv-wrapper :views="[{label: '返回'}]" :theme="config.theme" @change="handleBack" v-if="screenId" :title="info.name" :background="bgImg">
+      <ai-dv-viewer :urlPrefix="urlPrefix" :instance="instance" :dict="dict" :id="screenId"/>
+    </ai-dv-wrapper>
+  </section>
+</template>
+
+<script>
+import {mapActions} from "vuex"
+
+export default {
+  name: "preview",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+    urlPrefix: {
+      type: String,
+      default: '/app'
+    }
+  },
+  computed: {
+    screenId: v => v.$route.query.id,
+    bgImg: v => v.config.theme == 1 ? 'https://cdn.cunwuyun.cn/dvcp/dv/img/dj_bg.png' : (v.config.backgroundImage?.[0]?.url || "")
+  },
+  data() {
+    return {
+      info: {},
+      config: {}
+    }
+  },
+  methods: {
+    ...mapActions(['closePage']),
+    getDvData() {
+      let {id} = this.$route.query
+      this.instance.post(`/app/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
+        if (res?.data) {
+          this.info = res.data
+          this.config = JSON.parse(res.data.config).dashboard
+        }
+      })
+    },
+    handleBack() {
+      this.$router.back()
+      this.closePage()
+    }
+  },
+  created() {
+    this.getDvData()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.preview {
+}
+</style>