bug

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

@@ -8,7 +8,7 @@
       title="编辑器"
       @onConfirm="onConfirm">
       <div>
-        <code-editor v-model="json" :lint="true"  auto-format height="440px"></code-editor>
+        <code-editor v-model="json" lang="json" theme="github" width="100%" height="440"></code-editor>
       </div>
     </ai-dialog>
     <div class="layout-config__group" v-if="options.monitorType !== 'hik' && options.monitorType !== 'dahua'">
@@ -28,12 +28,7 @@
       </div>
       <div class="layout-config__code" v-if="options.dataType === 'staticData'">
         <el-button @click="showEditor" class="layout-config__code--btn" title="编辑" type="text" icon="iconfont iconjdq_led_edit"></el-button>
-        <vue-json-editor
-          :value="options.staticData"
-          :show-btns="false"
-          mode="view"
-          lang="zh">
-        </vue-json-editor>
+        <code-editor readonly :value="JSON.stringify(options.staticData, null, 2)" lang="json" theme="github" width="100%" height="250"></code-editor>
       </div>
       <template v-else-if="options.dataType === 'dynamicData'">
         <div class="layout-config__item">
@@ -117,9 +112,11 @@
 </template>
 
 <script>
-  import vueJsonEditor from 'vue-json-editor'
-  import { CodeEditor } from 'bin-code-editor'
-  import 'bin-code-editor/lib/styles/index.css'
+  import CodeEditor from 'bin-ace-editor'
+  require('brace/mode/json')
+  require('brace/snippets/json')
+  require('brace/theme/github')
+  require('brace/theme/monokai')
 
   export default {
     name: 'dataConfig',
@@ -159,7 +156,6 @@
     },
 
     components: {
-      vueJsonEditor,
       CodeEditor
     },
 
@@ -195,7 +191,7 @@
 
     methods: {
       showEditor () {
-        this.json = JSON.stringify(this.options.staticData)
+        this.json = JSON.stringify(this.options.staticData, null, 2)
         this.isShowEditor = true
       },
 
@@ -340,24 +336,7 @@
       }
     }
   .layout-config__group--wrapper {
-    .layout-config__code .jsoneditor-vue {
-      .jsoneditor-menu {
-        display: none;
-      }
-
-      .jsoneditor {
-        border: 1px solid #030411;
-        background: #0e1013;
-      }
-
-      .jsoneditor-field {
-        color: gray;
-      }
-
-      .jsoneditor-tree button:focus {
-        background-color: transparent;
-        outline: none;
-      }
+    .layout-config__code .bin-ace-editor {
     }
 
     .layout-config__group {
@@ -377,10 +356,10 @@
           right: 0;
           top: 0;
           color: gray;
-          z-index: 1;
+          z-index: 111;
 
           &:hover {
-            opacity: 0.8  ;
+            opacity: 0.8;
           }
         }
       }