From a415b457c5f83ee39ca091fdbb4aa30389c073fc Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Thu, 18 Mar 2021 17:03:29 +0800
Subject: [PATCH] =?UTF-8?q?style=EF=BC=9A=E4=BF=AE=E6=94=B9metric=E7=9A=84?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=A1=86=E7=9A=84=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/stylus/main.scss     |  3 +
 .../common/project/L5/CanvasProps.vue         | 13 ++-
 .../common/project/L5/services/canvas.js      |  1 +
 .../components/common/project/topologyL5.vue  | 36 ++++----
 .../common/project/topologyPrev.vue           | 82 +++++++++++--------
 .../common/rightBox/exprTempBox.vue           |  6 +-
 .../components/page/dashboard/chartBox.vue    | 13 ++-
 .../page/dashboard/explore/promqlInput.vue    | 45 ++++++++--
 8 files changed, 142 insertions(+), 57 deletions(-)

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index f85994aca..bdd2a9c8a 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -441,6 +441,9 @@ li{
 .el-textarea .el-input__count { /*防止字数限制提示信息遮挡内容和滚动条*/
   right: 20px;
 }
+.no-resize .el-textarea__inner {
+  padding: 5px 20px 5px 15px;
+}
 .el-textarea__inner {
   padding: 5px 60px 5px 15px;
 }
diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
index 320c7c6d9..35e7f60d9 100644
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
@@ -58,7 +58,7 @@
             ></promql-input>
             <el-row>
               <template>
-                <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
+                <el-col class="legend-title">
                   {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
                   <el-popover placement="top" trigger="hover" width="211">
                     <div style="word-break:keep-all;">{{$t('dashboard.panel.chartForm.legendTip')}}</div>
@@ -1597,6 +1597,17 @@
   }
 </style>
 <style lang="scss" scoped>
+  .legend-title{
+    width: 110px;
+    padding-right: 10px;
+    text-align: left;
+    padding-left:10px;
+    margin-left: 10px;
+    height: 32px;
+    line-height: 32px;
+    background: #E7EAED;
+    color: #606266;
+  }
   .project-title {
     background: #eeeeee;
     height: 36px;
diff --git a/nezha-fronted/src/components/common/project/L5/services/canvas.js b/nezha-fronted/src/components/common/project/L5/services/canvas.js
index 687f994a0..046630b6a 100644
--- a/nezha-fronted/src/components/common/project/L5/services/canvas.js
+++ b/nezha-fronted/src/components/common/project/L5/services/canvas.js
@@ -180,6 +180,7 @@ export const imageTemp={
       "width":100,
       "height":100,
     },
+    imageRatio:false,
     "lineWidth":0,
     "rotate":0,
     "offsetRotate":0,
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index 831802bcc..0b32571d8 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -424,7 +424,7 @@
   const canvasOptions={
     rotateCursor:'/img/rotate.cur',
     translateKey:'None',
-    disableEmptyLine:true,
+    disableEmptyLine:false,
     autoExpandDistance:0,
     minScale:0.01,
   };
@@ -853,15 +853,15 @@
                 clearInterval(timer);
                 let promiseArr=[];
                 let self=this;
-                for(let i=0;i<data.pens.length;i++){
-                  let line=data.pens[i]
-                  if(line.type===1){
-                   if(!data.pens.find(item=>item.id===line.from.id) || !data.pens.find(item=>item.id===line.to.id)){
-                     data.pens.splice(i, 1);
-                     i--;
-                   }
-                  }
-                }
+                // for(let i=0;i<data.pens.length;i++){
+                //   let line=data.pens[i]
+                //   if(line.type===1){
+                //    if(!data.pens.find(item=>item.id===line.from.id) || !data.pens.find(item=>item.id===line.to.id)){
+                //      data.pens.splice(i, 1);
+                //      i--;
+                //    }
+                //   }
+                // }
                 data.pens.forEach((item=>{
                   if(item.type===0&&item.data.imageId){
                     item.image=this.iconArray.find(item1=>item1.id==item.data.imageId).image;
@@ -1769,8 +1769,10 @@
         this.editTopologyFlag=true;
         setTimeout(()=>{
           getTopology(this.topologyIndex).lock(0);
-          getTopology(this.topologyIndex).data.pens.forEach((item)=>{//停止动画 以及赋值默认data
-            item.stopAnimate();
+          getTopology(this.topologyIndex).data.pens.forEach((item,index)=>{//停止动画 以及赋值默认data
+            if(item.animatePlay){
+              item.stopAnimate();
+            }
             if(!item.data.expressArr.length) {
               item.data.expressArr=[''];
               item.data.legends=[''];
@@ -1780,7 +1782,7 @@
               item.fillStyle=item.data.fillStyle;
               item.strokeStyle=item.data.strokeStyle;
               item.animatePlay=false;
-              item.font.color="#000000";
+              item.fontColor="#000000";
               item.gradientType=item.data.gradientType?item.data.gradientType:0;
               if(!item.data.gradientColor){
                 item.data.gradientType=0;
@@ -1798,7 +1800,7 @@
               item.fromArrowColor=item.data.arrowColor;
               item.toArrowColor=item.data.arrowColor;
               item.animatePlay=false;
-              item.font.color="#000000";
+              item.fontColor="#000000";
             }
           })
           let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
@@ -2073,8 +2075,10 @@
       },
     },
     destroyed(){
-      getTopology(this.topologyIndex).destroy();
-      setTopology(this.topologyIndex,null);
+      if(getTopology(this.topologyIndex)){
+        getTopology(this.topologyIndex).destroy();
+        setTopology(this.topologyIndex,null);
+      }
       if(document.getElementById('topology-canvas'+this.topologyIndexF)){
        document.getElementById('topology-canvas'+this.topologyIndexF).removeEventListener('mousemove',this.canvasMove);
       }
diff --git a/nezha-fronted/src/components/common/project/topologyPrev.vue b/nezha-fronted/src/components/common/project/topologyPrev.vue
index d446f0871..3963d00b2 100644
--- a/nezha-fronted/src/components/common/project/topologyPrev.vue
+++ b/nezha-fronted/src/components/common/project/topologyPrev.vue
@@ -93,6 +93,8 @@
             :toolShow="toolShow">
           </topology-top-tool>
 
+
+
         </span>
         <span class="float-right">
           <button @click="previewTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new"
@@ -175,7 +177,7 @@
 
 
         <button @click="editTopology" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right"
-                style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px" type="button" v-has="'project_topo_save'"
+                style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;margin-top: -2px" type="button" v-has="'project_topo_save'"
         >
                   <i class="nz-icon nz-icon-edit" :title="$t('project.topology.edit')"></i>
         </button>
@@ -251,7 +253,7 @@
         <div class="module-rect-left" :style="{top:0,left:0,width:0,height:item.rect.height+15+'px'}"></div>
       </div>
       <!--节点连线相关的 tooltip-->
-      <div :style="{position:'absolute',top:tooltipPosition.top+'px',left:tooltipPosition.left+'px'}"
+      <div :style="{position:'absolute',top:tooltipPosition.top+'px',left:tooltipPosition.left+'px','z-index':10,height:tooltipPosition.height+'px'}"
            v-if="tooltipPosition.show&&!editTopologyFlag"
            @mouseover="tooltipOver"
            @mouseout="tooltipOut"
@@ -422,7 +424,7 @@
   const canvasOptions={
     rotateCursor:'/img/rotate.cur',
     translateKey:'None',
-    disableEmptyLine:true,
+    disableEmptyLine:false,
     autoExpandDistance:0,
     minScale:0.01,
   };
@@ -517,6 +519,7 @@
           top:0,
           left:0,
           show:false,
+          height:400
         },
         chartData:{},
         chartGetData:[],
@@ -796,6 +799,8 @@
             let canvas=new Topology('topology-canvas'+this.topologyIndexF,canvasOptions);
             canvas.open(data);
             setTopology(this.topologyIndex,canvas);
+          }else{
+            getTopology(this.topologyIndex).open(data);
           }
           this.topologyLoading=false;
           if(!getTopology(this.topologyIndex).data.name){
@@ -848,15 +853,15 @@
                 clearInterval(timer);
                 let promiseArr=[];
                 let self=this;
-                for(let i=0;i<data.pens.length;i++){
-                  let line=data.pens[i]
-                  if(line.type===1){
-                    if(!data.pens.find(item=>item.id===line.from.id) || !data.pens.find(item=>item.id===line.to.id)){
-                      data.pens.splice(i, 1);
-                      i--;
-                    }
-                  }
-                }
+                // for(let i=0;i<data.pens.length;i++){
+                //   let line=data.pens[i]
+                //   if(line.type===1){
+                //    if(!data.pens.find(item=>item.id===line.from.id) || !data.pens.find(item=>item.id===line.to.id)){
+                //      data.pens.splice(i, 1);
+                //      i--;
+                //    }
+                //   }
+                // }
                 data.pens.forEach((item=>{
                   if(item.type===0&&item.data.imageId){
                     item.image=this.iconArray.find(item1=>item1.id==item.data.imageId).image;
@@ -878,7 +883,9 @@
                   this.projectInfoShow=data.data.projectInfo;
                   this.projectAlertShow=data.data.alertInfo;
                 }
-
+                if(!data.bkImage){
+                  data.bkImage=undefined;
+                }
                 Promise.all(promiseArr).then(res=>{
                   res.forEach((response,index)=>{
                     let item=data.pens[index];
@@ -933,18 +940,21 @@
         if(maxLevel!==0){
           if(pen.type===0){// 判断valueMapping 给相应的状态
             let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel);
-            pen.font.color=selLevel.color.text;
-            pen.fillStyle=selLevel.color.fill;
-            pen.strokeStyle=selLevel.color.line;
-            pen.bkType=0;
+            if(selLevel){
+              pen.fontColor=selLevel.color.text;
+              pen.fillStyle=selLevel.color.fill;
+              pen.strokeStyle=selLevel.color.line;
+              pen.bkType=0;
+            }
             onChangeAnimate(pen,selLevel.animateType,selLevel.color.fill,selLevel.color.line);
           }else if(pen.type===1){// 判断valueMapping 给相应的状态
             let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel);
-
-            pen.animateColor=selLevel.color.fill;
-            pen.strokeStyle=selLevel.color.line;
-            pen.animateType=selLevel.animateType;
-            pen.font.color=selLevel.color.text;
+            if(selLevel){
+              pen.animateColor=selLevel.color.fill;
+              pen.strokeStyle=selLevel.color.line;
+              pen.animateType=selLevel.animateType;
+              pen.fontColor=selLevel.color.text;
+            }
             onChangeAnimateLine(pen,pen.animateType);
           }
         } else {
@@ -1361,10 +1371,6 @@
                 pen:data,
                 pens:null,
               };
-              if(data.data.expressArr.length===0){
-                data.data.expressArr.push('');
-                data.data.legends.push('');
-              }
               this.$nextTick(()=>{
                 if(this.$refs.CanvasProps){
                   if(this.penId!==data.id){
@@ -1763,14 +1769,20 @@
         this.editTopologyFlag=true;
         setTimeout(()=>{
           getTopology(this.topologyIndex).lock(0);
-          getTopology(this.topologyIndex).data.pens.forEach((item)=>{//停止动画 以及赋值默认data
-            item.stopAnimate();
+          getTopology(this.topologyIndex).data.pens.forEach((item,index)=>{//停止动画 以及赋值默认data
+            if(item.animatePlay){
+              item.stopAnimate();
+            }
+            if(!item.data.expressArr.length) {
+              item.data.expressArr=[''];
+              item.data.legends=[''];
+            }
             item.animateType=item.data.animateType;
             if(item.type===0){
               item.fillStyle=item.data.fillStyle;
               item.strokeStyle=item.data.strokeStyle;
               item.animatePlay=false;
-              item.font.color="#000000";
+              item.fontColor="#000000";
               item.gradientType=item.data.gradientType?item.data.gradientType:0;
               if(!item.data.gradientColor){
                 item.data.gradientType=0;
@@ -1788,7 +1800,7 @@
               item.fromArrowColor=item.data.arrowColor;
               item.toArrowColor=item.data.arrowColor;
               item.animatePlay=false;
-              item.font.color="#000000";
+              item.fontColor="#000000";
             }
           })
           let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
@@ -2058,10 +2070,15 @@
       zoomMap(num){
         getTopology(this.topologyIndex).scaleTo(getTopology(this.topologyIndex).data.scale+num);
       },
+      penToBottom(){
+        getTopology(this.topologyIndex).bottom()
+      },
     },
     destroyed(){
-      getTopology(this.topologyIndex).destroy();
-      setTopology(this.topologyIndex,null);
+      if(getTopology(this.topologyIndex)){
+        getTopology(this.topologyIndex).destroy();
+        setTopology(this.topologyIndex,null);
+      }
       if(document.getElementById('topology-canvas'+this.topologyIndexF)){
         document.getElementById('topology-canvas'+this.topologyIndexF).removeEventListener('mousemove',this.canvasMove);
       }
@@ -2514,6 +2531,7 @@
     position: relative;
     border: 1px solid #eeeeee;
     border-radius: 2px;
+    overflow: hidden;
     .pickTime{
       margin-top: -13px;
     }
diff --git a/nezha-fronted/src/components/common/rightBox/exprTempBox.vue b/nezha-fronted/src/components/common/rightBox/exprTempBox.vue
index 9095ae310..1d59aa3b7 100644
--- a/nezha-fronted/src/components/common/rightBox/exprTempBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/exprTempBox.vue
@@ -144,7 +144,7 @@
           params.expression=params.expression[0];
           if(!params.expression[0]) {
             this.prevent_opt.save=false;
-            this.$message.error(this.$t('expressionError'));
+            this.$message.error(this.$t('config.exprTemp.expressionError'));
             return
           }
           if(valid){
@@ -229,5 +229,7 @@
 </script>
 
 <style scoped lang="scss">
-
+/deep/ .metric-selector-title{
+  margin-left: 0 !important;
+}
 </style>
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index 465526d74..7b83e8329 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -46,6 +46,17 @@
     width: calc(100% - 60px);
     padding: 5px 20px 0px 0;
   }
+  .legend-title{
+    width: 110px;
+    padding-right: 10px;
+    text-align: left;
+    padding-left:10px;
+    margin-left: 10px;
+    height: 32px;
+    line-height: 32px;
+    background: #E7EAED;
+    color: #606266;
+  }
   /*metric样式--end*/
   .label-center{
     vertical-align: middle;
@@ -301,7 +312,7 @@
                         ></promql-input>
               -->
               <el-row>
-                <el-col style="width: 120px; padding-right: 20px; text-align: left; padding-left:10px; color: #666">
+                <el-col class="legend-title">
                   {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
                   <el-popover placement="top" trigger="hover" width="211">
                     <div style="word-break:keep-all;">{{$t('dashboard.panel.chartForm.legendTip')}}</div>
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index ec8fb1dcf..90b940695 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -28,7 +28,8 @@
             <!--            <el-autocomplete :placeholder="$t('dashboard.metricPreview.inputTip')" :fetch-suggestions="filterInput" clearable @clear="clearExpression" :trigger-on-focus="false" v-model="expressionList[index]" @blur="expressionChange" style="width: 100%;height:36px"></el-autocomplete>-->
             <!--<editor :styleType="styleType" :metric-list="metricStore" :history-param="historyParam" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>?-->
             <el-input @keyup.enter.native="expressionChange" v-model="expressionList[index]" :id="inputId"
-                      @input="metricKeyDown"></el-input>
+                      @input="metricKeyDown" type="textarea"
+                      :autosize="{ minRows: 1, maxRows: 6}" class="not-fixed-height no-resize"></el-input>
             <div class="append-msg error" v-if="errorMsg"><span>{{errorMsg}}</span></div>
             <div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div>
           </div>
@@ -38,7 +39,7 @@
           <el-row v-if="plugins.indexOf('metric-input') > -1 || plugins.indexOf('metric-selector') > -1"
                   style="width: 100%;">
             <el-col
-              :style="{'width':plugins.indexOf('metric-selector') > -1 ? '120px':'100%', 'padding': plugins.indexOf('metric-selector') > -1 ?'0 0 0 10px':'0 20px 0 0 ', 'text-align':'left', 'color': '#666','font-weight':plugins.indexOf('metric-selector') > -1 ?'400':'bold'}">
+              :class="[plugins.indexOf('metric-selector') > -1 ?'metric-selector-title':'metric-null-title']">
               <el-dropdown class="metric-selector" v-if="plugins.indexOf('metric-selector') > -1">
                 <el-dropdown-menu style="display: none"></el-dropdown-menu>
                 <span :class="{'expr-title':projectRightBox}" style="cursor: pointer;" @click="toggleDropdown">Metric&nbsp;<i
@@ -62,10 +63,12 @@
                                                                                        style="color: #f56c6c">*</sup></label>
             </el-col>
             <el-col
+              :class="plugins.indexOf('metric-selector') > -1 ?'metric-selector-input-box':'metric-null-input-box'"
               :style="{'width':plugins.indexOf('metric-selector') > -1 ? 'calc(100% - 120px)':'100%',height: '100%',}">
               <div class="input-box" @click="dropDownVisible=false" v-if="plugins.indexOf('metric-input') > -1">
                 <!--<editor :styleType="styleType" :metric-list="metricStore" :historyParam="historyParam" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>-->
-                <el-input v-model="expressionList[index]" @change="metricChange" @input="metricKeyDown"></el-input>
+                <el-input v-model="expressionList[index]" @change="metricChange" @input="metricKeyDown"   type="textarea"
+                          :autosize="{ minRows: 1, maxRows: 6}" class="not-fixed-height no-resize"></el-input>
                 <div class="append-msg error" v-if="errorMsg"><span>{{errorMsg}}</span></div>
                 <div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div>
               </div>
@@ -619,9 +622,38 @@
   /deep/ .el-cascader-menu:last-child .el-cascader-node, /deep/ .el-cascader-node__label {
     padding: 0;
   }
-
+  .metric-selector-title{
+  /*'width':plugins.indexOf('metric-selector') > -1 ? '110px':'100%',*/
+  /*'padding': plugins.indexOf('metric-selector') > -1 ?'0 0 0 10px':'0 20px 0 0 ',*/
+  /*'text-align':'left', 'color': '#666',*/
+  /*'font-weight':plugins.indexOf('metric-selector') > -1 ?'400':'bold',*/
+    width:110px;
+    margin-left: 10px;
+    height: 33px;
+    text-align: left;
+    padding: 0 0 0 10px;
+    font-weight: 400;
+    line-height: 33px;
+    background: #E7EAED;
+    font-family: ArialMT;
+    font-size: 14px;
+    color: #333333;
+    letter-spacing: 0;
+  }
+  .metric-selector-input-box{
+    width: calc(100% - 120px);
+  }
+  .metric-null-input-box{
+    width: 100%;
+  }
+  .metric-null-title{
+    width:100%;
+    font-weight: bold;
+    letter-spacing: 0;
+  }
   .nz-cascade {
-    padding: 0 20px 0 30px;
+    padding: 0 10px 0 18px;
+    position: relative;
   }
   .nz-cascade .nz-icon-moban {
     display: none;
@@ -629,6 +661,9 @@
 
   .nz-cascade-temp .nz-icon-moban{
     display: inline-block;
+    position: absolute;
+    left: 2px;
+
     /*background: #F8F9FB;*/
   }
   .temp-form-box{