大屏设计页面更换json编辑器

packages/bigscreen/designer/components/form/DataConfig.vue

@@ -7,13 +7,8 @@
       class="layout-config__edit"
       title="编辑器"
       @onConfirm="onConfirm">
-      <div style="height: 500px;">
-        <vue-json-editor
-          v-model="json" 
-          :show-btns="false"
-          mode="code"
-          lang="zh">
-        </vue-json-editor>
+      <div>
+        <b-code-editor v-model="json" lint="dracula"  auto-format height="440px"></b-code-editor>
       </div>
     </ai-dialog>
     <div class="layout-config__group" v-if="options.monitorType !== 'hik' && options.monitorType !== 'dahua'">
@@ -122,7 +117,13 @@
 </template>
 
 <script>
+  import Vue from 'vue'
   import vueJsonEditor from 'vue-json-editor'
+  import CodeEditor from 'bin-code-editor'
+  import 'bin-code-editor/lib/styles/index.css'
+
+  Vue.use(CodeEditor)
+
   export default {
     name: 'dataCofing',
 
@@ -156,7 +157,8 @@
         sourceData: [],
         keys: [],
         monitorList: [],
-        list: []
+        list: [],
+        jsonData: `{"title":"测试json数据","children":[{"name":"子项名称", "desc":"子项说明" },{"name":"子项名称1", "desc":"子项说明1" }]}`
       }
     },
 
@@ -196,7 +198,7 @@
 
     methods: {
       showEditor () {
-        this.json = JSON.parse(JSON.stringify(this.options.staticData))
+        this.json = JSON.stringify(this.options.staticData)
         this.isShowEditor = true
       },
 
@@ -314,7 +316,7 @@
       },
 
       onConfirm () {
-        this.$set(this.options, 'staticData', JSON.parse(JSON.stringify(this.json)))
+        this.$set(this.options, 'staticData', JSON.parse(this.json))
         this.isShowEditor = false
         this.$emit('change')
       }

packages/bigscreen/viewer/AppGigscreenViewer.vue

@@ -3,10 +3,10 @@
     <div v-if="!component">
       <div
         :style="{
-          width: item.width + 'px',
-          height: item.height + 'px',
-          left: item.left + 'px',
-          top: item.top + 'px',
+          width: item.width * scale + 'px',
+          height: item.height * scale + 'px',
+          left: item.left * scale + 'px',
+          top: item.top * scale + 'px',
           position: 'absolute',
           zIndex: item.zIndex
         }"
@@ -57,12 +57,26 @@
           backgroundImage: []
         },
         componentList: [],
+        scale: 1,
         meta: {}
       }
     },
 
     created() {
       this.getInfo(this.id)
+
+      // this.scale = document.body.clientWidth / 1920
+    },
+
+    mounted () {
+      this.$nextTick(() => {
+        const transform = document.querySelector('#dv-full-screen-container').style.transform
+        const scale = transform.replace('scale', '').replace('(', '').replace(')', '')
+
+        if (scale == 1) {
+          this.scale = document.body.clientWidth / 1920
+        }
+      })
     },
 
     methods: {