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

2020-07-10 19:00:29 +08:00
parent 2402c40a4f
commit 2589b29e8e
6 changed files with 104 additions and 41 deletions
--- a/nezha-fronted/src/components/common/header.vue
+++ b/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>
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -74,6 +74,10 @@ const cn = {
    noData:'没有数据',
    tag: '标签',
    syncChart:'同步图表',
+    toolBox:{
+      zoom:'区域缩放',
+      back:'区域缩放还原'
+    }
  },
  webshell: {
    shellTitle: "本地 Shell",
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/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:{
--- a/nezha-fronted/src/components/page/dashboard/explore/editor.vue
+++ b/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){
-            //console.log('pivotalCursorIndex',this.pivotalCursorIndex,'cursorIndex',this.cursorIndex)
-            newContent=newContent.substring(this.pivotalCursorIndex,this.cursorIndex);
-          }
+        if(this.pivotalCursorIndex!=0){
+          //console.log('pivotalCursorIndex',this.pivotalCursorIndex,'cursorIndex',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(){
-        //console.log('quill blur')
+      $temp.$el.addEventListener('paste', function(even) {
+        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()
-            promise.then(()=>{ //存储完光标后再进行后面的操作
-              $temp.userChange(char,operation,newContent,oldContent)
-            })
+            clearTimeout($temp.userChangeTimer)
+            $temp.userChangeTimer=setTimeout(()=>{
+              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;
--- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue
+++ b/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) {
--- a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
+++ b/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:{
-          // areaColor:'lightgrey', //设置默认状态下地图颜色
-
-        },
+        // itemStyle:{
+        //   areaColor:'#ff0000', //设置默认状态下地图颜色
+        //   color:'#ffff00'
+        //
+        // },
        emphasis:{
          itemStyle: {
            areaColor:'white'
@@ -398,6 +409,7 @@
      },
      getBgColorList:function(){
        return Object.assign([],bgColorList)
-      }
+      },
+
    }
 </script>