From 3f924c08932ca421d236c4ae2a0e8efe9e646d76 Mon Sep 17 00:00:00 2001
From: hyx <hanyuxia@iie.ac.cn>
Date: Sun, 24 Oct 2021 20:45:12 +0800
Subject: [PATCH] =?UTF-8?q?CN-206=20chart=20param=20=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=20param=20=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/rightBox/settings/ChartBox.vue | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/rightBox/settings/ChartBox.vue b/src/components/rightBox/settings/ChartBox.vue
index 044adf1f..29ad90fc 100644
--- a/src/components/rightBox/settings/ChartBox.vue
+++ b/src/components/rightBox/settings/ChartBox.vue
@@ -103,8 +103,12 @@
           </el-form-item>
 
           <!--params-->
-          <el-form-item :label="$t('config.chart.params')">
-            <el-input maxlength="1024" show-word-limit :rows="2" size='mini' type="textarea" v-model="editObject.params" id="chart-box-params"/>
+          <el-form-item :label="$t('config.chart.params')" prop="params">
+            <v-ace-editor
+                    v-model:value="editObject.params"
+                    lang="json"
+                    theme="chrome"
+                    style="height: 300px" />
           </el-form-item>
           <!--remark-->
           <el-form-item :label="$t('config.chart.remark')">
@@ -130,10 +134,17 @@ import rightBoxMixin from '@/mixins/rightBox'
 import { get, post, put } from '@/utils/http'
 import { panelTypeAndRouteMapping } from '@/utils/constants'
 import { api } from '@/utils/api'
+import { VAceEditor } from 'vue3-ace-editor'
+import 'ace-builds/src-noconflict/mode-javascript'
+import 'ace-builds/src-noconflict/mode-json'
+import 'ace-builds/src-noconflict/theme-chrome'
 
 export default {
   name: 'ChartBox',
   mixins: [rightBoxMixin],
+  components: {
+    VAceEditor
+  },
   data () {
     return {
       url: api.chart,
@@ -380,3 +391,13 @@ export default {
   }
 }
 </script>
+<style lang="scss">
+  .my-editor {
+    margin-top: 4px;
+    border: 1px solid $--right-box-border-color;
+
+    .prism-editor__textarea {
+      outline: none;
+    }
+  }
+</style>
\ No newline at end of file