fix:修复自动提示输入框bug、图表toolbox添加提示

nezha-fronted/src/components/common/header.vue

@@ -55,6 +55,22 @@
         </el-menu-item>
       </el-submenu>
 
+      <el-submenu index="3" popper-class="nz-submenu">
+        <template slot="title">
+          <div v-if="assetData.length == 0">{{$t('overall.asset')}}</div>
+          <div v-else @click="jumpTo('asset')" :class="{'menu-active' : activeIndex == 'asset'}">{{$t('overall.asset')}}</div>
+        </template>
+        <template>
+          <el-menu-item v-if="assetData.length == 0" index="3-0"><div @click="createBox({type: 6})"><i class="nz-icon nz-icon-create-square header-dropdown-add"></i>&nbsp;&nbsp;{{$t("overall.createDatacenter")}}</div></el-menu-item>
+          <template v-else>
+            <el-menu-item :index="'3-' + index" v-for="(item, index) in assetData" :key="index">
+              <div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item.id)" >
+                <span class="too-long-split" style="width: 130px;">{{item.name}}</span>
+              </div>
+            </el-menu-item>
+          </template>
+        </template>
+      </el-submenu>
       <el-submenu index="2" popper-class="nz-submenu">
         <template slot="title">
           <div v-if="projectData.length == 0">{{$t('overall.project')}}</div>
@@ -72,22 +88,6 @@
           </template>
         </template>
       </el-submenu>
-      <el-submenu index="3" popper-class="nz-submenu">
-        <template slot="title">
-          <div v-if="assetData.length == 0">{{$t('overall.asset')}}</div>
-          <div v-else @click="jumpTo('asset')" :class="{'menu-active' : activeIndex == 'asset'}">{{$t('overall.asset')}}</div>
-        </template>
-        <template>
-          <el-menu-item v-if="assetData.length == 0" index="3-0"><div @click="createBox({type: 6})"><i class="nz-icon nz-icon-create-square header-dropdown-add"></i>&nbsp;&nbsp;{{$t("overall.createDatacenter")}}</div></el-menu-item>
-          <template v-else>
-            <el-menu-item :index="'3-' + index" v-for="(item, index) in assetData" :key="index">
-              <div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item.id)" >
-                <span class="too-long-split" style="width: 130px;">{{item.name}}</span>
-              </div>
-            </el-menu-item>
-          </template>
-        </template>
-      </el-submenu>
       <el-submenu index="4-0" popper-class="nz-submenu">
         <template slot="title">
           <div @click="jumpTo('alertList')" :class ="activeIndex == 'alertList' || activeIndex == 'alertConfig' ? 'menu-active' :''">{{$t('overall.alert')}}</div>

nezha-fronted/src/components/common/language/cn.js

@@ -74,6 +74,10 @@ const cn = {
     noData:'没有数据',
     tag: '标签',
     syncChart:'同步图表',
+    toolBox:{
+      zoom:'区域缩放',
+      back:'区域缩放还原'
+    }
   },
   webshell: {
     shellTitle: "本地 Shell",

nezha-fronted/src/components/common/language/en.js

@@ -80,6 +80,11 @@ const en = {
     tag: 'Tag',
     placeHolder:'please enter',
     syncChart:'Synchronize chart',
+    toolBox:{
+      zoom:'Area scaling',
+      back:'Area scaling restore',
+      stack:'Show stack chart'
+    }
   },
   pageSize: '/page',
   webshell:{

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

@@ -64,7 +64,9 @@
         showType:false,
         showDescription:false,
         detailItem:{},
-
+        formatTimer:null,
+        userChangeTimer:null,
+        keyDownTimer:null,
       }
     },
     created(){
@@ -78,14 +80,14 @@
         this.changeSuggestions('type')
         this.dealSpecilChar(char,operation);
 
-          if(this.pivotalCursorIndex!=0){
+        if(this.pivotalCursorIndex!=0){
-            //console.log('pivotalCursorIndex',this.pivotalCursorIndex,'cursorIndex',this.cursorIndex)
+          //console.log('pivotalCursorIndex',this.pivotalCursorIndex,'cursorIndex',this.cursorIndex)
-            newContent=newContent.substring(this.pivotalCursorIndex,this.cursorIndex);
+          newContent=newContent.substring(this.pivotalCursorIndex,this.cursorIndex);
-          }
+        }
         this.filterItems(newContent);
       },
       dealSpecilChar:function(char,operation){
-        //console.log('specil char',char)
+        // console.log('specil char',char)
         if(/^[\{\(\[\,]$/g.test(char)){
           if(operation=='insert'){
             if(char == '{'||char==','){
@@ -136,7 +138,8 @@
           tempIndex--;
           tempChar=this.content.charAt(tempIndex);
         }
-        this.pivotalCursorIndex=tempIndex+1;
+        // console.log('tempIndex =====',tempIndex)
+        this.pivotalCursorIndex=tempIndex==0?-1:tempIndex+1;
 
         //console.log('after del double char',this.pivotalCursorIndex)
       },
@@ -536,7 +539,7 @@
       },
       storeSuggestions:function(){
           this.$nextTick(()=>{
-            let suggestions=document.querySelectorAll('.popper-item');
+            let suggestions=this.$el.querySelectorAll('.popper-item');
             this.storedSuggestions=[...suggestions];
             //console.log('storedSuggestions->',suggestions)
           })
@@ -667,7 +670,7 @@
       },
       registerKeydown:function(){
         let $temp=this;
-        document.addEventListener('keydown',function(event){
+        $temp.$el.addEventListener('keydown',function(event){
           //console.log('keydown',event)
           $temp.toggleSelect(event);
         })
@@ -748,12 +751,19 @@
       this.options.modules.keyboard={};
       this.options.modules.keyboard.bindings=bindings;
       this.quill = new Quill(this.$refs.editor, this.options);
-      this.quill.on('blur',function(){
+      $temp.$el.addEventListener('paste', function(even) {
-        //console.log('quill blur')
+        let text='';
+        setTimeout(()=>{
+          text=$temp.getContent();
+        },100)//此值必须小于userChangeTimer的值
+        setTimeout(()=>{
+          $temp.setContent(text);
+          $temp.quill.setSelection($temp.cursorIndex+text.length);
+        },300)//此值必须大于userChangeTimer的值
       })
       this.quill.on('text-change',function(delta, oldDelta, source){
         if(source != 'silent'){
-          //console.log('delta',delta,'oldDelta',oldDelta,'source',source)
+          // console.log('delta',delta,'oldDelta',oldDelta,'source',source)
           let char='',operation='';
           let oldContent='';
           oldDelta.ops.forEach((item,index)=>{
@@ -785,15 +795,19 @@
           let promise=$temp.storeCursor(char);
           if(source == 'user'){
             //console.log(delta,oldDelta,oldContent)
-            let newContent=$temp.getContent()
+            clearTimeout($temp.userChangeTimer)
-            promise.then(()=>{ //存储完光标后再进行后面的操作
+            $temp.userChangeTimer=setTimeout(()=>{
-              $temp.userChange(char,operation,newContent,oldContent)
+              let newContent=$temp.getContent()
-            })
+              promise.then(()=>{ //存储完光标后再进行后面的操作
+                  $temp.userChange(char,operation,newContent,oldContent)
+              })
+            },200)
           }
           $temp.content=$temp.getContent();
           //console.log('current content-->',$temp.content)
           $temp.getPosition();
-          $temp.formatContent();
+          clearTimeout($temp.formatTimer)
+          $temp.formatTimer=setTimeout($temp.formatContent,300)
         }
         //监听文本区域的高度
         let lineHeight = 16;

nezha-fronted/src/components/page/dashboard/overview/chart.vue

@@ -89,6 +89,34 @@
           this.option=chartConfig.getOption(this.chartType);
         }
 
+        if(this.chartType == 'map'){
+          let geoObj=JSON.parse(this.map.geoJson.geoJson)
+          geoObj.features.forEach(item=>{
+            if(this.option.geo.regions){
+              this.option.geo.regions.push({
+                name:item.properties.name,
+                itemStyle: {
+                  normal: {
+                    areaColor: randomcolor()
+                  }
+                }
+
+              })
+            }else{
+              this.option.geo.regions=[{
+                name:item.properties.name,
+                itemStyle: {
+                  normal: {
+                    // areaColor: item.properties.stroke
+                    areaColor: randomcolor()
+                  }
+                }
+
+              }]
+            }
+          })
+        }
+
         this.modifyOption('tooltip','position',this.defaultTooltipPosition)
 
         if (this.tooltipFormatter) {

nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue

@@ -1,6 +1,12 @@
 <script>
     import chartDataFormat from "../../../charts/chartDataFormat";
     import bus from '../../../../libs/bus';
+    import vm from '../../../../main'
+    window.onload=function(){
+      commonOption.toolbox.feature.dataZoom.title.zoom=vm.$i18n.t('overall.toolBox.zoom')
+      commonOption.toolbox.feature.dataZoom.title.back=vm.$i18n.t('overall.toolBox.back')
+      commonOption.toolbox.feature.magicType.title.stack=vm.$i18n.t('overall.toolBox.stack')
+    }
     let bgColorList=['#b3424a','#7bbfea', '#f05b72', '#596032', '#bd6758',
       '#cd9a5b', '#918597', '#70a19f', '#005344', '#FF00FF',
       '#f7acbc', '#5f5d46', '#66ffff', '#ccFF66', '#f47920',
@@ -30,16 +36,20 @@
       toolbox:{
         show:false,
         top:'0',
-        showTitle:false,
+        showTitle:true,
         tooltip:{
           show:false,
         },
         feature:{
           dataZoom:{
-            yAxisIndex:false
+            yAxisIndex:false,
+            title:{
+
+            }
           },
           magicType:{
-            type:['stack']
+            type:['stack'],
+            title:{}
           },
           // restore: {},
         }
@@ -144,10 +154,11 @@
             show: true
           },
         } ,
-        itemStyle:{
+        // itemStyle:{
-          // areaColor:'lightgrey', //设置默认状态下地图颜色
+        //   areaColor:'#ff0000', //设置默认状态下地图颜色
-
+        //   color:'#ffff00'
-        },
+        //
+        // },
         emphasis:{
           itemStyle: {
             areaColor:'white'
@@ -398,6 +409,7 @@
       },
       getBgColorList:function(){
         return Object.assign([],bgColorList)
-      }
+      },
+
     }
 </script>