NEZ-1795 feat : explore页面动态添加实现、修复alertrules的rightbox无法正常回显的问题、调整实现选择值添加到输入框尾

nezha-fronted/src/assets/css/components/page/dashboard/explore/promqlInput.scss

@@ -2,7 +2,11 @@
   position: relative;
   width: 100%;
   display: flex;
-  #editor{
+  // #editor{
+  //   width: 100%;
+  //   border: 1px solid $--border-color-light;
+  // }
+  .no-close{
     width: 100%;
     border: 1px solid $--border-color-light;
   }
@@ -156,4 +160,11 @@
     text-align: center;
     margin-bottom: 14px;
   }
+  .cm-line{
+    color: $--color-text-regular,
+
+  }
+  .el-col .el-col-24 .metric-selector-input-box{
+
+  }
 }

nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue

@@ -76,10 +76,14 @@
           class="input-box"
           @click="dropDownVisible = false"
         >
-        <div id="editor"
+        <div :id="'editor'+index"
         class="not-fixed-height no-resize no-close"
         >
         </div>
+        <!-- <div id='editor'
+        class="not-fixed-height no-resize no-close"
+        >
+        </div> -->
           <!-- <el-input
             :id="inputId"
             v-model="expressionList[index]"
@@ -227,11 +231,15 @@
               @click="dropDownVisible = false"
               v-if="plugins.indexOf('metric-input') > -1"
             >
-            <div id="editor"
+            <div :id="'editor'+index"
+        class="not-fixed-height no-resize no-close"
+        >
+        </div>
+            <!-- <div id="editor"
             class="not-fixed-height no-resize no-close"
                 ref="elInput"
 
-            ></div>
+            ></div> -->
               <!-- <el-input
                 v-model="expressionList[index]"
                 @input="metricKeyDown"
@@ -412,7 +420,6 @@ import { lintKeymap } from '@codemirror/lint'
 import { baseTheme, promqlHighlighter } from './CMTheme.tsx'
 import { closeBrackets, closeBracketsKeymap } from '@codemirror/closebrackets'
 import { autocompletion, completionKeymap, CompletionContext, CompletionResult } from '@codemirror/autocomplete'
-import Vue from 'vue'
 
 export default {
   name: 'promqlInput',
@@ -452,8 +459,9 @@ export default {
   },
   data () {
     return {
+      oldcCodeLength:'',
       newView: null,
-      codeMirrorValue: '',
+      codeMirrorValue: [],
       dropDownVisible: false,
       // metricStore:[],
       metricOptions: [],
@@ -604,7 +612,7 @@ export default {
               self.newChange(update.state.doc.toString())
             })
           ],
-          doc: self.codeMirrorValue,
+          doc: self.codeMirrorValue[self.index],
           editorState: {
             changeByRange: self.newChange(),
             changes: self.newDoc(),
@@ -613,38 +621,38 @@ export default {
         })
         const view = new EditorView({
           state: EditorViewstate,
-          parent: document.getElementById('editor')
+          // parent: document.getElementById('editor')
+          parent: document.getElementById('editor'+self.index)
         })
         self.newView = view
       } else {
         console.log('viewIsOk')
-        const { from, to } = self.newView.state.selection.ranges[0]
+        // const { from} = self.newView.state.selection.ranges[0]
+        // const to = self.codeMirrorValue.length
+        const to = self.oldcCodeLength
+        const from = self.oldcCodeLength
+        console.log(from,to);
         self.newView.dispatch(
           self.newView.state.update({
             effects: dynamicConfigCompartment.reconfigure(dynamicConfig),
-            changes:{from,to,insert:self.codeMirrorValue}
+            changes:{from,to,insert:self.codeMirrorValue[self.index]}
-          })
-        )
-      }
-      const insertAtCursor = (value) => {
-        const view = this.newView
-        if (view === null) {
-          return
-        }
-        const { from, to } = view.state.selection.ranges[0]
-        console.log(from, to)
-        view.dispatch(
-          view.update({
-            changes: { from, to, insert: value }
           })
         )
       }
     },
     newChange (val) {
-      this.codeMirrorValue = val
+      console.log('newchange', val)
-      this.metricKeyDown(val)
+      if(val){
-      console.log('change', val)
+        this.oldcCodeLength = val.length
-      console.log(this.newView)
+        console.log(this.oldcCodeLength);
+        this.codeMirrorValue[this.index] = val
+        this.expressionList[this.index] = val
+        console.log(this.codeMirrorValue);
+        this.metricKeyDown(val)
+      }else{
+        this.oldcCodeLength = 0;
+        this.codeMirrorValue[this.index] = ''
+      }
     },
     newDoc (val) {
       console.log('doc', val)
@@ -776,7 +784,7 @@ export default {
     },
     metricChange: function (value) {
       this.expressionList[this.index] = value
-      this.codeMirrorValue = value
+      this.codeMirrorValue[this.index] = value
       this.dropDownVisible = false
       this.$emit('change', value)
       // this.initCodeMirror()
@@ -784,6 +792,7 @@ export default {
       this.cascaderValue = ''
     },
     metricChangeNew (value) {
+      console.log(value);
       if (!value) return
       this.insertText(value)
       this.dropDownVisible = false
@@ -794,6 +803,7 @@ export default {
     logLabelChange (value) {
       if (!value || value.length === 0) return
       this.expressionList[this.index] = `{${value[0]}="${value[1]}"}`
+      this.codeMirrorValue[this.index] = `{${value[0]}="${value[1]}"}`
       this.dropDownVisible = false
       this.$emit('change', value)
       this.$forceUpdate()
@@ -1052,8 +1062,8 @@ export default {
       // elInput.selectionStart = startPos + insertTxt.length
       // elInput.selectionEnd = startPos + insertTxt.length
       this.expressionList[this.index] = insertTxt
-      this.codeMirrorValue = insertTxt
+      this.codeMirrorValue[this.index] = insertTxt
-      console.log('inserttext', this.codeMirrorValue)
+      console.log('inserttext', this.codeMirrorValue[this.index])
       this.initCodeMirror()
     }
     /* setMsg:function(){
@@ -1069,10 +1079,6 @@ export default {
         }
       }
     },
-    // codeMirrorValue () {
-    //   console.log('watch',this.codeMirrorValue)
-
-    // },
     metricOptionsParent: {
       deep: true,
       immediate: true,
@@ -1082,13 +1088,23 @@ export default {
         }
       }
     },
-    // expressionList:{
+    expressionList:{
-    //   deep: true,
+      deep: true,
-    //   immediate: true,
+      immediate: true,
-    //   handler (n, o) {
+      handler (n, o) {
-    //     console.log(n,n[this.index]);
+        console.log(n,n[this.index]);
-    //     this.codeMirrorValue = n[this.index];
+        this.codeMirrorValue[this.index] = n[this.index];
-    //     this.initCodeMirror()
+        
+      }
+    },
+    
+    // codeMirrorValue:{
+    //   deep:true,
+    //   imediate:true,
+    //   handler(n){
+    //     if(n){
+    //       this.oldcCodeLength = n.length
+    //     }
     //   }
     // }
   }