大屏设计页面更换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')
       }