feat: 优化业务组件生成图片操作，只获取开发组件的视图，页面返回添加是否保存确认框

data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue

@@ -67,7 +67,10 @@
           class="data-setting-data-box"
         >
           <div class="lc-field-head">
-            <div v-if="config.type!=='flyMap'" class="lc-field-title">
+            <div
+              v-if="config.type!=='flyMap'"
+              class="lc-field-title"
+            >
               数据配置
             </div>
           </div>

data-room-ui/packages/BizComponent/Preview.vue

@@ -193,7 +193,7 @@ export default {
 
   .remote-preview-inner-wrap {
     position: absolute;
-    height: 100%;
+    // height: 100%;
     width: 100%;
     overflow: auto;
     padding: 20px;

data-room-ui/packages/BizComponent/index.vue

@@ -80,6 +80,11 @@
       </div>
       <div class="bs-custom-component-content-preview">
         <div class="bs-preview-inner">
+          <div class="code-tab-header">
+            <div class="code-tab">
+              效果预览
+            </div>
+          </div>
           <BizComponentPreview
             :vue-content="form.vueContent"
             :setting-content="form.settingContent"
@@ -230,14 +235,27 @@ export default {
       }
     },
     backManagement () {
-      this.$router.push({ path: window.BS_CONFIG?.routers?.componentUrl || '/big-screen-components' })
+      // 给出一个确认框提示，提示如下确定返回主页面吗？未保存的配置将会丢失。3个按钮 ：  留在页面 、离开页面、保存后离开页面
-      const data = { componentsManagementType: 'bizComponent' }
+      this.$confirm('确定返回主页面吗？未保存的配置将会丢失。', '提示', {
-      this.$router.app.$options.globalData = data // 将数据存储在全局变量中
+        confirmButtonText: '保存后离开页面',
+        cancelButtonText: '离开页面',
+        cancelButtonClass: 'cancel-btn',
+        cancelButtonColor: '#FF6F6F',
+        showCancelButton: true,
+        type: 'warning',
+        customClass: 'bs-el-message-box'
+      }).then(() => {
+        this.save(true)
+      }).catch(() => {
+        this.pageJump()
+      })
     },
-    save () {
+    save (pageJump = false) {
       this.loading = true
-      const node = document.querySelector('.bs-preview-inner')
+      const node = document.querySelector('.remote-preview-inner-wrap')
-      toJpeg(node, { quality: 0.2 })
+      // 获取node下的第一个子节点
+      const childrenNode = node.children[0]
+      toJpeg(childrenNode, { quality: 0.2 })
         .then((dataUrl) => {
           const that = this
           if (showSize(dataUrl) > 200) {
@@ -255,6 +273,10 @@ export default {
                   updateBizComponent(this.form)
                     .then((res) => {
                       that.$message.success('保存成功')
+                      console.log(pageJump)
+                      if (pageJump) {
+                        this.pageJump()
+                      }
                     })
                     .finally(() => {
                       that.loading = false
@@ -265,7 +287,11 @@ export default {
             this.form.coverPicture = dataUrl
             updateBizComponent(this.form)
               .then(() => {
+                console.log(1122)
                 this.$message.success('保存成功')
+                if (pageJump) {
+                  this.pageJump()
+                }
               })
               .finally(() => {
                 this.loading = false
@@ -278,8 +304,10 @@ export default {
     },
     createdImg () {
       this.loading = true
-      const node = document.querySelector('.bs-preview-inner')
+      const node = document.querySelector('.remote-preview-inner-wrap')
-      toPng(node)
+      // 获取node下的第一个子节点
+      const childrenNode = node.children[0]
+      toPng(childrenNode)
         .then((dataUrl) => {
           const link = document.createElement('a')
           link.download = `${this.form.name}.png`
@@ -294,6 +322,11 @@ export default {
           this.$message.warning('出现未知错误，请重试')
           this.loading = false
         })
+    },
+    pageJump () {
+      this.$router.push({ path: window.BS_CONFIG?.routers?.componentUrl || '/big-screen-components' })
+      const data = { componentsManagementType: 'bizComponent' }
+      this.$router.app.$options.globalData = data // 将数据存储在全局变量中
     }
   }
 }
@@ -410,6 +443,17 @@ export default {
         height: 100%;
         background: var(--bs-background-1);
         position: relative;
+        .code-tab-header{
+          height: 40px;
+          background-color: var(--bs-background-2);
+          line-height: 40px;
+          .code-tab{
+            width: 120px;
+            height:40px;
+            text-align: center;
+            background-color: var(--bs-background-1);
+          }
+        }
       }
     }
   }