From 2589b29e8e35e19eda9a348f94d1c6005054850c Mon Sep 17 00:00:00 2001
From: wangwenrui <wangwenrui@zdjizhi.com>
Date: Fri, 10 Jul 2020 19:00:29 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8D=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA=E8=BE=93=E5=85=A5=E6=A1=86bug=E3=80=81?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8toolbox=E6=B7=BB=E5=8A=A0=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/header.vue          | 32 ++++++-------
 .../src/components/common/language/cn.js      |  4 ++
 .../src/components/common/language/en.js      |  5 ++
 .../page/dashboard/explore/editor.vue         | 48 ++++++++++++-------
 .../page/dashboard/overview/chart.vue         | 28 +++++++++++
 .../page/dashboard/overview/chartConfig.vue   | 28 +++++++----
 6 files changed, 104 insertions(+), 41 deletions(-)

diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index 8d8a3b14c..245598cd2 100644
--- 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>
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 1e9a5585c..f84448920 100644
--- 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",
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index fda0f9bd2..7c489f98e 100644
--- 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:{
diff --git a/nezha-fronted/src/components/page/dashboard/explore/editor.vue b/nezha-fronted/src/components/page/dashboard/explore/editor.vue
index 5f7ba0549..e5d802a4e 100644
--- 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;
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chart.vue b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
index 06150c8c9..4dee0597a 100644
--- 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) {
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
index cfb8024fc..bf2b7b8cb 100644
--- 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>