Merge remote-tracking branch 'origin/master'

# Conflicts:
#	data-room-ui/packages/BigScreenDesign/index.vue

data-room-ui/packages/BigScreenDesign/CloseDialog/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <el-dialog
+    title="提示"
+    :visible.sync="backDialog"
+    width="40%"
+    :modal="true"
+    :modal-append-to-body="false"
+    :appen-to-body="true"
+    class="bs-dialog-wrap bs-el-dialog"
+  >
+  <span style="color:#fff">确定返回主页面吗？未保存的配置将会丢失!</span>
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="backDialog = false">留在页面</el-button>
+    <el-button @click="goBack">离开页面</el-button>
+    <el-button type="primary" @click="goBackSave">保存后离开页面</el-button>
+  </span>
+  </el-dialog>
+</template>
+<script>
+import { pageMixins } from 'data-room-ui/js/mixins/page'
+export default {
+  name: 'ComponentDialog',
+  mixins: [pageMixins],
+  props: {},
+  data () {
+    return {
+      backDialog: false
+    }
+  },
+  computed: {},
+  mounted () {},
+  methods: {
+    init () {
+      this.backDialog = true
+    },
+    // 点击确定
+    confirm () {
+      this.backDialog = false
+    },
+    goBack(){
+      this.$emit('back')
+    },
+    goBackSave(){
+     this.$emit('backSave')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/style/bsTheme.scss';
+/deep/.el-dialog__body{
+  min-height: 100px !important;
+}
+</style>

data-room-ui/packages/BigScreenDesign/LeftPanel.vue

@@ -563,6 +563,7 @@ export default {
           display: block;
           width: 100%;
           font-size: 12px;
+          text-align: center;
         }
       }
     }

data-room-ui/packages/BigScreenDesign/PageDesignTop.vue

@@ -5,11 +5,13 @@
         class="menu-img"
         src="../BigScreenDesign/images/app.png"
         alt="返回"
-        @click="backManagement"
+        @click="goBackManage"
       >
       <span class="logo-text name-span">{{ pageInfo.name }}</span>
     </div>
     <div class="head-btn-group">
+      <span style="margin-right:8px;font-size:12px">缩放比例</span>
+      <el-input-number style="margin-right:20px" :value="zoom" @change="changeZoom" :min="1" :max="100" label="描述文字"></el-input-number>
       <el-dropdown
         trigger="click"
         class="align-list-dropdown"
@@ -97,6 +99,7 @@
       :page-info="pageInfo"
       @replaceItByTemplate="replaceItByTemplate"
     />
+    <CloseDialog ref="CloseDialog" @back="backManagement" @backSave="backSave" />
     <AssignDialog ref="AssignDialog" />
     <HistoryList ref="HistoryList" />
   </div>
@@ -112,6 +115,7 @@ import cloneDeep from 'lodash/cloneDeep'
 import uniqBy from 'lodash/uniqBy'
 import { stringifyObjectFunctions } from 'data-room-ui/js/utils/evalFunctions'
 import AssignDialog from 'data-room-ui/BigScreenDesign/AssignDialog/index.vue'
+import CloseDialog from 'data-room-ui/BigScreenDesign/CloseDialog/index.vue'
 import HistoryList from 'data-room-ui/BigScreenDesign/HistoryList/index.vue'
 import CusBtn from './BtnLoading'
 import icons from 'data-room-ui/assets/images/alignIcon/export'
@@ -129,7 +133,8 @@ export default {
     ChooseTemplateDialog,
     AssignDialog,
     CusBtn,
-    HistoryList
+    HistoryList,
+    CloseDialog
   },
   props: {
     code: {
@@ -189,7 +194,8 @@ export default {
       pageInfo: (state) => state.bigScreen.pageInfo,
       timelineStore: (state) => state.bigScreen.timelineStore,
       currentTimeLine: (state) => state.bigScreen.currentTimeLine,
-      activeCodes: state => state.bigScreen.activeCodes
+      activeCodes: state => state.bigScreen.activeCodes,
+      zoom: (state) => state.bigScreen.zoom,
     }),
     pageCode () {
       return this.$route.query.code || this.code
@@ -218,6 +224,15 @@ export default {
       undoTimeLine: 'bigScreen/undoTimeLine',
       saveTimeLine: 'bigScreen/saveTimeLine'
     }),
+    changeZoom(val){
+      this.$emit('changeZoom', val)
+      // console.log(val)
+    },
+    // 切换主题
+    changeTheme (val) {
+      // 调取每个组件内部切换主题的方法
+      this.$emit('updateTheme', val)
+    },
     setAlign (command) {
       const pageInfo = cloneDeep(this.pageInfo)
       // 获取所有选中的组件
@@ -318,6 +333,13 @@ export default {
         return value1 - value2 // 升序
       }
     },
+    goBackManage(){
+      this.$refs.CloseDialog.init()
+    },
+    async backSave(){
+      await this.save()
+      this.backManagement()
+    },
     backManagement () {
       this.$router.push({ path: this.pageInfo.type === 'component' ? (window.BS_CONFIG?.routers?.componentUrl || '/big-screen-components') : (window.BS_CONFIG?.routers?.pageManagementUrl || '/home') })
       const data = { componentsManagementType: 'component' }
@@ -612,4 +634,13 @@ export default {
   }
 
 }
+::v-deep .el-input__inner,
+::v-deep .el-color-picker__color-inner,
+::v-deep .el-input-number--mini,
+::v-deep .el-textarea__inner,
+::v-deep .el-input-group__append {
+  background: var(--bs-el-background-1);
+  color: var(--bs-el-text);
+  border: 0 !important;
+}
 </style>

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/BigScreenDesign/RulerTool/SketchRuler.vue

@@ -191,7 +191,7 @@ export default {
         }
 
         // 30是grid-wrap-box的底部工具栏高度
-        this.innerHeight = screensRect.height - 30
+        this.innerHeight = screensRect.height
         this.innerWidth = screensRect.width
         this.diffX = this.width - screensRect.width
         this.diffY = this.height - screensRect.height

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

@@ -9,6 +9,8 @@
       :right-fold="rightVisiable"
       @updateRightVisiable="updateRightVisiable"
       @showPageInfo="showPageInfo"
+      @updateTheme="updateTheme"
+      @changeZoom="changeScreenZoom"
       @empty="empty"
     />
     <div class="drag-wrap">
@@ -53,7 +55,7 @@
             />
           </MouseSelect>
         </SketchDesignRuler>
-        <div class="footer-tools-bar">
+        <!-- <div class="footer-tools-bar">
           <el-slider
             class="bs-slider-wrap"
             :value="zoom"
@@ -75,7 +77,7 @@
               :value="zoom.value"
             />
           </el-select>
-        </div>
+        </div> -->
       </div>
       <!-- 右侧折叠设置面板   -->
       <SettingPanel

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' })
-      const data = { componentsManagementType: 'bizComponent' }
-      this.$router.app.$options.globalData = data // 将数据存储在全局变量中
+      // 给出一个确认框提示，提示如下确定返回主页面吗？未保存的配置将会丢失。3个按钮 ：  留在页面 、离开页面、保存后离开页面
+      this.$confirm('确定返回主页面吗？未保存的配置将会丢失。', '提示', {
+        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')
-      toJpeg(node, { quality: 0.2 })
+      const node = document.querySelector('.remote-preview-inner-wrap')
+      // 获取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')
-      toPng(node)
+      const node = document.querySelector('.remote-preview-inner-wrap')
+      // 获取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);
+          }
+        }
       }
     }
   }