From bba329a41c6f0911d48ec7aca589fc3e5d05a9aa Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Tue, 28 Dec 2021 09:45:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E8=AE=BE=E8=AE=A1=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=9B=B4=E6=8D=A2json=E7=BC=96=E8=BE=91=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  1 +
 .../designer/components/form/DataConfig.vue   | 22 ++++++++++---------
 .../bigscreen/viewer/AppGigscreenViewer.vue   | 22 +++++++++++++++----
 3 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 9ff89bd0..c8d64d8d 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@jiaminghi/data-view": "^2.10.0",
+    "bin-code-editor": "^0.9.0",
     "dayjs": "^1.8.35",
     "dvcp-dv": "^1.0.0",
     "dvcp-dv-ui": "^2.0.0",
diff --git a/packages/bigscreen/designer/components/form/DataConfig.vue b/packages/bigscreen/designer/components/form/DataConfig.vue
index 8e04ad71..dff362b4 100644
--- a/packages/bigscreen/designer/components/form/DataConfig.vue
+++ b/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')
       }
diff --git a/packages/bigscreen/viewer/AppGigscreenViewer.vue b/packages/bigscreen/viewer/AppGigscreenViewer.vue
index 575aafea..1549e447 100644
--- a/packages/bigscreen/viewer/AppGigscreenViewer.vue
+++ b/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: {