Merge remote-tracking branch 'origin/codeCheck' into codeCheck

nezha-fronted/src/assets/css/font/iconfont.svg

@@ -20,6 +20,12 @@ Created by iconfont
   />
     <missing-glyph />
     
+    <glyph glyph-name="caret-right" unicode="&#59058;" d="M133.6629667-19.043833329999984l432.1617 369.985A56.699 56.699 0 0 1 586.9666667 394.66666667a56.699 56.699 0 0 1-21.142 43.7255L133.6629667 808.37716667A76.9761 76.9761 0 0 1 57.4556667 822.6960666699999 69.4803 69.4803 0 0 1 10.3666667 764.6516666699999v-739.6817a69.192 69.192 0 0 1 46.8968-58.2366 76.88 76.88 0 0 1 76.3995 14.2228z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="caret-left" unicode="&#59060;" d="M911.67036663 797.7105L479.50866663 427.7255A56.699 56.699 0 0 1 458.36666663 384c0-16.7214 7.688-32.674 21.142-43.7255l432.1617-369.985a76.9761 76.9761 0 0 1 76.3034-14.3189 69.4803 69.4803 0 0 1 46.9929 58.0444V753.6967a69.192 69.192 0 0 1-46.8968 58.2366 76.88 76.88 0 0 1-76.3995-14.2228z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="overview-project" unicode="&#58988;" d="M1023.06176 661.461333c0-33.066667-26.794667-59.861333-59.861333-59.861333H59.904427A59.861333 59.861333 0 0 0 0.000427 661.461333V836.096A59.861333 59.861333 0 0 0 59.904427 896h903.253333a59.904 59.904 0 0 0 59.904-59.904v-174.634667zM850.13376 748.8a39.253333 39.253333 0 1 1 78.549333 0 39.253333 39.253333 0 0 1-78.549333 0zM1023.06176 297.81333299999994a59.904 59.904 0 0 0-59.861333-59.946666H59.904427A59.861333 59.861333 0 0 0 0.000427 297.81333299999994V472.533333a59.904 59.904 0 0 0 59.904 59.861334h903.253333a59.861333 59.861333 0 0 0 59.904-59.861334v-174.762666zM870.059093 385.152a39.253333 39.253333 0 1 1 78.549334 0 39.253333 39.253333 0 0 1-78.506667 0zM1023.06176-56.53333299999997a59.904 59.904 0 0 0-59.861333-59.904H59.904427A59.904 59.904 0 0 0 0.000427-56.53333299999997v174.634666a59.904 59.904 0 0 0 59.904 59.904h903.253333a59.904 59.904 0 0 0 59.904-59.904v-174.634666zM878.80576 30.80533300000002a39.296 39.296 0 1 1 78.592 0 39.296 39.296 0 0 1-78.592 0z"  horiz-adv-x="1024" />
 
     

nezha-fronted/src/components/charts/chart-list.vue

@@ -846,6 +846,7 @@
               endTime = this.filter.end_time;
               //this.$parent.refreshTime(startTime,endTime);全屏查询，不更新panel列表的时间条件
             } else {
+              console.log('页面进入',this.filter)
               startTime = this.filter.start_time;
               endTime = this.filter.end_time;
             }

nezha-fronted/src/components/charts/chartPreview.vue

@@ -205,10 +205,7 @@
         showLegend:true,
         tableShow:true,
         urlShow:true,
-        searchTime: [
+        searchTime: bus.getTimezontDateRange(),
-          new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - 1),
-          new Date(bus.computeTimezone(new Date().getTime()))
-        ],
         //oldSearchTime:[],
         minHeight:200,
         chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
@@ -224,10 +221,7 @@
       // 全屏查看
       show(chartInfo) {
         this.isError = false;
-        this.searchTime = [
+        this.searchTime = bus.getTimezontDateRange();
-          new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - 1),
-          new Date(bus.computeTimezone(new Date().getTime()))
-        ];
         this.chart = JSON.parse(JSON.stringify(chartInfo));
 
         let chartType= chartInfo.type;

nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue

@@ -94,10 +94,7 @@
           show: false,
         },
         tableHover: false,
-        searchTime: [
+        searchTime: bus.getTimezontDateRange(),
-          new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - 1),
-          new Date(bus.computeTimezone(new Date().getTime()))
-        ],
         intervalTimer: null,
         interval: 0,
         panel: { //新增panel
@@ -256,9 +253,9 @@
       // 获取数据,用在子页面
       getData(params) {
         if (params.start_time === '' || params.end_time === '') {
-          let now = new Date();
+          let now = bus.getTimezontDateRange();
-          let endTimeTmp = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
+          let endTimeTmp = bus.timeFormate(now[1].getTime(), 'yyyy-MM-dd hh:mm:ss');
-          let startTimeTmp = bus.timeFormate(now.setHours(now.getHours() - 1), 'yyyy-MM-dd hh:mm:ss');
+          let startTimeTmp = bus.timeFormate(now[0].getTime(), 'yyyy-MM-dd hh:mm:ss');
           params.start_time = startTimeTmp;
           params.end_time = endTimeTmp;
           params.from = this.from;

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

@@ -848,6 +848,7 @@ const cn = {
       addLine:'添加连线',
       lineName:'连线名称',
       width:'宽度',
+      dashes:'虚线',
       option:'设置',
       arrows:'箭头方向',
       color:'颜色',

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

@@ -855,7 +855,8 @@ const en = {
       cancel:'cancel',
       addLine:'Add Line',
       lineName:'Line Name',
-      width:'width',
+      width:'thickness',
+      dashes:'Dotted line',
       option:'Option',
       arrows:'Arrows',
       color:'Color',

nezha-fronted/src/components/common/project/addLine.vue

@@ -21,73 +21,122 @@
             <el-input v-model="form.lineName"  size="small"></el-input>
           </el-form-item>
           <el-row class="form-title">{{$t('project.topology.option')}}</el-row>
-          <el-form-item :label="$t('project.topology.width')" prop="width" class="line-name">
+          <div class="line-option">
-            <el-input v-model="form.width"  size="small"></el-input>
+            <!--<el-form-item :label="$t('project.topology.width')" prop="width" class="line-width">-->
-          </el-form-item>
+              <!--<el-input v-model="form.width"  size="small"></el-input>-->
-          <!--<el-form-item label="roundness"  class="line-name">-->
+            <!--</el-form-item>-->
-            <!--<el-input v-model="form.roundness"></el-input>-->
+            <el-form-item :label="$t('project.topology.width')" prop="width" class="line-width">
-          <!--</el-form-item>-->
+              <el-select v-model="form.width" placeholder="" :popper-append-to-body="false"  size="small">
-          <!--<el-form-item label="type" class="line-name">-->
+                <div slot="prefix">
-            <!--<el-select v-model="form.type" placeholder="" :popper-append-to-body="false">-->
+                  <div :style="{height:0,width:'80%',borderTop:form.width+'px'+' solid' +' #899FB7'}"></div>
-              <!--&lt;!&ndash;'dynamic', 'continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal', 'vertical', 'curvedCW', 'curvedCCW', 'cubicBezier'&ndash;&gt;-->
+                </div>
-              <!--<el-option label="dynamic" value="dynamic"></el-option>-->
+                <el-option v-for="(item,index) in widthOption" :label="item+'px'" :value="item" :key="index">
-              <!--<el-option label="continuous" value="continuous"></el-option>-->
+                  <div class="width-option">
-              <!--<el-option label="discrete" value="discrete"></el-option>-->
+                    <span style="marginRight:5px">{{item}}px</span><div class="width-option-line" :style="{height:0,width:'80%',borderTop:item+'px solid #899FB7'}"></div>
-              <!--<el-option label="diagonalCross" value="diagonalCross"></el-option>-->
+                  </div>
-              <!--<el-option label="straightCross" value="straightCross"></el-option>-->
+                </el-option>
-              <!--<el-option label="horizontal" value="horizontal"></el-option>-->
+              </el-select>
-              <!--<el-option label="vertical" value="vertical"></el-option>-->
+            </el-form-item>
-              <!--<el-option label="curvedCW" value="curvedCW"></el-option>-->
+            <el-form-item :label="$t('project.topology.dashes')" prop="width" class="line-width">
-              <!--<el-option label="cubicBezier" value="cubicBezier"></el-option>-->
+              <el-select v-model="form.dashes" placeholder="" :popper-append-to-body="false"  size="small">
-            <!--</el-select>-->
+                <div slot="prefix">
-          <!--</el-form-item>-->
+                  {{form.dashes}}
-          <el-form-item :label="$t('project.topology.arrows')" prop="arrows" class="arrows">
+                </div>
-            <el-select v-model="form.arrows" placeholder="" :popper-append-to-body="false"  size="small">
+                <el-option v-for="(item,index) in dashesOption" :label="item+'px'" :value="item" :key="index">
-              <div slot="prefix">
+
-                <img v-if="form.arrows=='from'" src="./image/leftArrow.png" />
+                </el-option>
-                <img v-if="form.arrows=='to'" src="./image/rightArrow.png" />
+              </el-select>
-                <img v-if="form.arrows=='from;to'" src="./image/LRArrow.png" />
+            </el-form-item>
-                <img v-if="form.arrows=='0'" src="./image/noArrow.png" />
+            <el-form-item :label="$t('project.topology.arrows')" prop="arrows" class="arrows">
+              <el-select v-model="form.arrows" placeholder="" :popper-append-to-body="false"  size="small">
+                <div slot="prefix">
+                  <div class="width-option">
+                    <div v-if='form.arrows==="from"' class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}">
+                      <i class="nz-icon nz-icon-caret-right position-right" style="top: -15px;"></i>
+                    </div>
+                    <div  v-if='form.arrows==="to"' class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}">
+                      <i class="nz-icon nz-icon-caret-left position-left" style="top: -15px;"></i>
+                    </div>
+                    <div v-if='form.arrows==="from;to"' class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}">
+                      <i class="nz-icon nz-icon-caret-left position-left" style="top: -15px;"></i>
+                      <i class="nz-icon nz-icon-caret-right position-right" style="top: -15px;"></i>
+                    </div>
+                    <div v-if='form.arrows==="0"' class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}"></div>
+                  </div>
+                </div>
+                <el-option label="from" value="from">
+                  <div class="width-option">
+                    <div class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}">
+                      <i class="nz-icon nz-icon-caret-right position-right"></i>
+                    </div>
+                  </div>
+                </el-option>
+                <el-option label="to" value="to">
+                  <div class="width-option">
+                    <div class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}">
+                      <i class="nz-icon nz-icon-caret-left position-left"></i>
+                    </div>
+                  </div>
+                </el-option>
+                <el-option label="from;to" value="from;to">
+                  <div class="width-option">
+                    <div class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}">
+                      <i class="nz-icon nz-icon-caret-left position-left"></i>
+                      <i class="nz-icon nz-icon-caret-right position-right"></i>
+                    </div>
+                  </div>
+                </el-option>
+                <el-option label="" value="0">
+                  <div class="width-option">
+                    <div class="width-option-line" :style="{height:0,width:'80%',borderTop:'1px solid #899FB7'}"></div>
+                  </div>
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('project.topology.color')" class="color">
+              <div class="color-show" @click="colorPickerClick" v-clickoutside="colorOut">
+                <div class="color-show-left" :style="{background:form.color}"></div>
+                <span> {{form.color}}</span>
+                <span class="color-arrows">
+                  <i class="nz-icon nz-icon-arrow-down" v-show="!showPicker"></i>
+                  <i class="nz-icon nz-icon-arrow-up" v-show="showPicker"></i>
+                </span>
               </div>
-              <el-option label="from" value="from"><img src="./image/leftArrow.png" /></el-option>
+              <div class="color-content" ref="color-content">
-              <el-option label="to" value="to"><img src="./image/rightArrow.png" /></el-option>
+                <el-color-picker
-              <el-option label="from;to" value="from;to"><img src="./image/LRArrow.png" /></el-option>
+                  v-model="form.color"
-              <el-option label="" value="0"><img src="./image/noArrow.png" /></el-option>
+                  :predefine="predefineColors"
-            </el-select>
+                  ref="colorPicker"
-          </el-form-item>
+                  @active-change="colorChange"
-          <el-form-item :label="$t('project.topology.color')" class="color">
+                >
-            <div class="color-show" @click="colorPickerClick">
+                </el-color-picker>
-              <div class="color-show-left" :style="{background:form.color}"></div>
+              </div>
-              <span> {{form.color}}</span>
+            </el-form-item>
-            </div>
+          </div>
-            <div class="color-content" ref="color-content">
-              <el-color-picker
-                v-model="form.color"
-                :predefine="predefineColors"
-                ref="colorPicker"
-                @active-change="colorChange"
-              >
-              </el-color-picker>
-            </div>
-          </el-form-item>
           <div  class="right-box-sub-title">
             <span>{{$t('alert.config.expr')}}</span>
             <span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
           </div>
-          <el-row class="element-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
+          <el-row class="element-item expr" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
+            <el-form-item  :rules="{required: true,message: '名称不能为空', trigger: 'blur'}" :prop="'name.' + (index-1)">
+              <el-row>
+                <template>
+                  <el-col class="expr-title" style="">
+                    {{$t('project.topology.chartName')}}
+                  </el-col>
+                  <el-col style="width: calc(100% - 140px);">
+                    <el-input
+                      v-model="form.name[index-1]"
+                      type="text"
+                      size="small"
+                    ></el-input>
+                  </el-col>
+                  <el-col  style="width: 20px"> <i class="el-icon-minus" @click="removeExpression(index-1)"></i></el-col>
+                </template>
+              </el-row>
+            </el-form-item>
             <el-row>
-              <template>
+              <el-col class="expr-title">
-                <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
-                  {{$t('project.topology.chartName')}}
-                </el-col>
-                <el-col style="width: calc(100% - 140px);">
-                  <el-input v-model="name[index-1]" type="text" size="small"></el-input>
-                </el-col>
-                <el-col  style="width: 20px"> <i class="el-icon-minus" @click="removeExpression(index-1)"></i></el-col>
-              </template>
-            </el-row>
-            <el-row>
-              <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
                 {{$t('project.topology.unit')}}
               </el-col>
               <el-col style="width: calc(100% - 120px);">
@@ -110,10 +159,11 @@
               @change="expressionChange"
               @removeExpression="removeExpression"
               :showRemove="false"
+              :projectRightBox="true"
             ></promql-input>
             <el-row>
               <template>
-                <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
+                <el-col class="expr-title">
                   {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
                   <el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover">
                     <i slot="reference" class="nz-icon nz-icon-info-normal" style="font-size: 12px; -webkit-transform:scale(0.75);display:inline-block;" @mouseover="rz"></i>
@@ -172,11 +222,13 @@
             lineId:n.id,
             width:n.width,
             lineName:n.label,
+            name:[],
+            dashes:!n.dashes?n.dashes:JSON.stringify(n.dashes),
           };
          if( n.expressions){
            n.expressions.forEach((item,index)=>{
              this.addExpression();
-             this.name[index]=item.name;
+             this.form.name[index]=item.name;
              this.unit[index]=item.unit;
              this.expressions[index]=item.metric;
              this.legends[index]=item.legend;
@@ -191,7 +243,7 @@
     data(){
       return{
         form:{
-          arrows:'',
+          arrows:'0',
           label:'',
           color:'#1e90ff',
           lineName:'',
@@ -199,6 +251,8 @@
           width:'',
           type:'',
           roundness:'',
+          name:[],
+          dashes:''
         },
         predefineColors: [
           '#ff4500',
@@ -209,18 +263,20 @@
           '#1e90ff',
           '#c71585',
         ],
+        showPicker:false,
         unitOptions: chartDataFormat.unitOptions(),
         promqlKeys:[],
         expressions: [],
         promqlCount:0,
         elementIds:[],
         legends:[],
-        name:[],
+        widthOption:['1','2','3','4'],
+        dashesOption:[false,'[3,3]','[9,9]','[15,15]','[21,21]'],
         unit:[],
         rules:{
-          arrows: [
+          // arrows: [
-            { required: true, message: '', trigger: 'change' },
+          //   { required: true, message: '', trigger: 'change' },
-          ],
+          // ],
           lineName: [
             { required: true, message: '', trigger: 'change' },
           ],
@@ -246,10 +302,11 @@
               roundness:(Math.random()*8 +1)/10 ,//获取0.1-0.9之间的随机数
               type:'curvedCW',
             };
+            model.dashes=!model.dashes?model.dashes:JSON.parse(model.dashes);
             model.expressions=[];
             this.promqlKeys.forEach((item,index)=>{
               model.expressions.push({
-                "name": this.name[index],
+                "name": this.form.name[index],
                 "unit": this.unit[index],
                 "metric": this.expressions[index],
                 "legend": this.legends[index],
@@ -265,7 +322,7 @@
       addExpression() {
         this.expressions.push('');
         this.legends.push('');
-        this.name.push('');
+        this.form.name.push('');
         this.unit.push('');
         this.promqlKeys.push(getUUID());
         this.elementIds.push("");
@@ -275,7 +332,7 @@
         if (this.promqlCount >= 1) {
           this.expressions.splice(index, 1);
           this.legends.splice(index, 1);
-          this.name.splice(index, 1);
+          this.form.name.splice(index, 1);
           this.unit.splice(index, 1);
           this.promqlKeys.splice(index, 1);
           this.elementIds.splice(index, 1);
@@ -301,6 +358,7 @@
         this.esc();
       },
       colorPickerClick(){
+        this.showPicker=true;
         this.$refs['colorPicker'].showPicker=true;
       },
       colorChange(val){
@@ -313,6 +371,9 @@
         let b = parseInt(rgb[2].split(')')[0]);
         let hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
         return hex;
+      },
+      colorOut(){
+        this.showPicker=false;
       }
 
     },
@@ -345,7 +406,7 @@
     border-radius: 5px;
     display: flex;
     align-items: center;
-    width: calc(100% - 30px);
+    width: calc(100% - 60px);
     height: 30px;
   }
   .color-show-left{
@@ -367,23 +428,109 @@
   /deep/ .el-form-item__label{
     font-size: 14px;
     color: #666666;
-    opacity: 0.6;
   }
-  .arrows /deep/ .el-input.el-input--prefix.el-input--suffix{
+  .arrows /deep/ .el-input.el-input--prefix.el-input--suffix,.line-width /deep/ .el-input.el-input--prefix.el-input--suffix{
     border: 1px solid #DCDFE6;
     height: 28px;
-    width: calc(100% - 30px);
+    width: calc(100% - 32px);
   }
-  .arrows /deep/ .el-input__inner{
+  .arrows /deep/ .el-input__inner,.line-width /deep/ .el-input__inner{
     display: none;
   }
-  .arrows /deep/ .el-input__prefix{
+  .arrows /deep/ .el-input__prefix,.line-width /deep/ .el-input__prefix{
     height: 28px;
     line-height: 28px;
+    color: #899FB7;
+  }
+  .arrows /deep/ .el-input__prefix > div{
+    width: 100%;
+    height: 100%;
+  }
+  .line-width /deep/ .el-input__prefix{
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
+  .line-width /deep/ .el-input__prefix > div{
+    width: 100%;
   }
   /deep/ .el-select{
     width: 262px;
   }
+  .line-option{
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .line-option > div{
+    width: 50%;
+  }
+  .line-option .line-width .el-input{
+    width: clac(100% - 60px);
+  }
+  /deep/ .el-input--small .el-input__icon{
+    line-height: 28px;
+  }
+  .width-option-line{
+    position: relative;
+    color: #899FB7;
+  }
+  .position-left{
+    position: absolute;
+    left:-4px ;
+    top: -18px;
+  }
+  .position-right{
+    position: absolute;
+    right: -4px;
+    top: -18px;
+  }
+  /deep/ .el-select-dropdown__item.selected .width-option-line {
+    border-color: #ee9d3f !important;
+    color: #ee9d3f !important;
+  }
+  /deep/ .el-dropdown-menu__item:focus .width-option-line, .el-dropdown-menu__item:not(.is-disabled):hover .width-option-line, .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover .width-option-line, .el-select-dropdown__item.hover .width-option-line, .el-select-dropdown__item:hover .width-option-line{
+    border-color: #ee9d3f !important;
+    color: #ee9d3f !important;
+  }
+  .color-arrows{
+    color: #C0C4CC;
+    position: absolute;
+    right: 70px;
+  }
+  .color-arrows .nz-icon{
+    font-size: 12px;
+  }
+  .element-item{
+    padding: 20px 0;
+    border-bottom: 1px dashed #dfe7f2;
+    width: 100%;
+  }
+  .element-item.expr /deep/ .el-form-item__content{
+    position: relative;
+    margin-left: 0 !important;
+  }
+  .element-item.expr /deep/ .el-form-item__content .el-row{
+    margin-bottom: 0;
+  }
+  .element-item.expr /deep/ .el-form-item__content .el-form-item__error{
+   left: 120px;
+  }
+  .expr-title{
+    width: 120px;
+    padding-right: 20px;
+    text-align: right;
+    color: #666;
+    font-size: 14px;
+    letter-spacing: 0;
+    line-height: 22px;
+  }
+  .width-option{
+    width: 195px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
   .el-row {
     margin-bottom: 20px;
     line-height: 32px;

nezha-fronted/src/components/common/project/addNode.vue

@@ -63,29 +63,35 @@
           <span>{{$t('alert.config.expr')}}</span>
           <span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
         </div>
-        <el-row class="element-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
+        <el-row class="element-item expr" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
+          <el-form-item  :rules="{required: true,message: '名称不能为空', trigger: 'blur'}" :prop="'name.' + (index-1)">
+            <el-row>
+              <template>
+                <el-col class="expr-title" style="">
+                  {{$t('project.topology.chartName')}}
+                </el-col>
+                <el-col style="width: calc(100% - 140px);">
+                  <el-input
+                    v-model="form.name[index-1]"
+                    type="text"
+                    size="small"
+                  ></el-input>
+                </el-col>
+                <el-col  style="width: 20px"> <i class="el-icon-minus" @click="removeExpression(index-1)"></i></el-col>
+              </template>
+            </el-row>
+          </el-form-item>
           <el-row>
-            <template>
+            <el-col class="expr-title">
-              <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
-                {{$t('project.topology.chartName')}}
-              </el-col>
-              <el-col style="width: calc(100% - 140px);">
-                <el-input v-model="name[index-1]" type="text" size="small"></el-input>
-              </el-col>
-              <el-col  style="width: 20px"> <i class="el-icon-minus" @click="removeExpression(index-1)"></i></el-col>
-            </template>
-          </el-row>
-          <el-row>
-            <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
               {{$t('project.topology.unit')}}
             </el-col>
             <el-col style="width: calc(100% - 120px);">
               <el-cascader filterable placeholder="" popper-class="no-style-class unit-popper-class" size="small" style="width: 100%"
-                            :options="unitOptions"
+                           :options="unitOptions"
-                            :props="{ expandTrigger: 'click',emitPath:false }"
+                           :props="{ expandTrigger: 'click',emitPath:false }"
-                            :show-all-levels="false"
+                           :show-all-levels="false"
-                            v-model="unit[index-1]"
+                           v-model="unit[index-1]"
-            ></el-cascader>
+              ></el-cascader>
             </el-col>
           </el-row>
           <promql-input
@@ -99,10 +105,11 @@
             @change="expressionChange"
             @removeExpression="removeExpression"
             :showRemove="false"
+            :projectRightBox="true"
           ></promql-input>
           <el-row>
             <template>
-              <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
+              <el-col class="expr-title">
                 {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
                 <el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover">
                   <i slot="reference" class="nz-icon nz-icon-info-normal" style="font-size: 12px; -webkit-transform:scale(0.75);display:inline-block;" @mouseover="rz"></i>
@@ -159,7 +166,7 @@
           if( n.expressions){
             n.expressions.forEach((item,index)=>{
               this.addExpression();
-              this.name[index]=item.name;
+              this.form.name[index]=item.name;
               this.unit[index]=item.unit;
               this.expressions[index]=item.metric;
               this.legends[index]=item.legend;
@@ -191,6 +198,7 @@
         form:{
           moduleId:'',
           iconId:'',
+          name:[],
         },
         selImage:'',
         file:'',
@@ -201,7 +209,6 @@
         promqlCount:0,
         elementIds:[],
         legends:[],
-        name:[],
         unit:[],
         imgageLoading:false,
         rules:{
@@ -276,12 +283,13 @@
             model.expressions=[];
             this.promqlKeys.forEach((item,index)=>{
               model.expressions.push({
-                "name": this.name[index],
+                "name": this.form.name[index],
                 "unit": this.unit[index],
                 "metric": this.expressions[index],
                 "legend": this.legends[index],
               })
             });
+            console.log(this.form.name,this.unit,model);
             this.$emit('addModel',model);
           }
         });
@@ -293,7 +301,7 @@
       addExpression() {
         this.expressions.push('');
         this.legends.push('');
-        this.name.push('');
+        this.form.name.push('');
         this.unit.push('');
         this.promqlKeys.push(getUUID());
         this.elementIds.push("");
@@ -303,7 +311,7 @@
         if (this.promqlCount >= 1) {
           this.expressions.splice(index, 1);
           this.legends.splice(index, 1);
-          this.name.splice(index, 1);
+          this.form.name.splice(index, 1);
           this.unit.splice(index, 1);
           this.promqlKeys.splice(index, 1);
           this.elementIds.splice(index, 1);
@@ -377,6 +385,7 @@
   /deep/ .avatar-uploader{
     display: inline-block;
     color: #1989fa;
+    vertical-align: top;
   }
   /deep/.right-box-form .icon  .el-select{
     width: 60%;
@@ -411,7 +420,7 @@
   .icon /deep/ .el-input.el-input--prefix.el-input--suffix{
     border: 1px solid #DCDFE6;
     height: 28px;
-    width: calc(100% - 30px);
+    width: calc(100% - 10px);
   }
   .icon /deep/ .el-input__inner{
     display: none;
@@ -420,6 +429,25 @@
     height: 28px;
     line-height: 28px;
   }
+  .element-item.expr /deep/ .el-form-item__content{
+    position: relative;
+    margin-left: 0 !important;
+  }
+  .element-item.expr /deep/ .el-form-item__content .el-row{
+    margin-bottom: 0;
+  }
+  .element-item.expr /deep/ .el-form-item__content .el-form-item__error{
+    left: 120px;
+  }
+  .expr-title{
+    width: 120px;
+    padding-right: 20px;
+    text-align: right;
+    color: #666;
+    font-size: 14px;
+    letter-spacing: 0;
+    line-height: 22px;
+  }
   /* begin--搜索框*/
   .endpoint-asset-search {
     display: inline-block;

nezha-fronted/src/components/common/project/popData/alertTable.vue

@@ -358,6 +358,10 @@
 <style scoped>
   .right-box-project-alert{
     width: 1220px;
+    padding-right: 30px;
+  }
+  .right-box-title{
+    font-weight: bold;
   }
   .mc{
     position: fixed;

nezha-fronted/src/components/common/project/popData/assetTable.vue

@@ -135,6 +135,7 @@
       }
     },
     data(){
+      vm=this;
       return{
         pageObj: {
           pageNo: 1,
@@ -271,6 +272,10 @@
 <style scoped>
   .right-box-project-alert{
     width: 1220px;
+    padding-right: 30px;
+  }
+  .right-box-title{
+    font-weight: bold;
   }
   .mc{
     position: fixed;

nezha-fronted/src/components/common/project/popData/endpointTable.vue

@@ -283,6 +283,10 @@
 <style scoped>
   .right-box-project-alert{
     width: 1220px;
+    padding-right: 30px;
+  }
+  .right-box-title{
+    font-weight: bold;
   }
   .mc{
     position: fixed;

nezha-fronted/src/components/common/project/topology.vue

@@ -165,10 +165,12 @@
       NodeArr(n){
         if(n.length===2){
           this.lineData={
-            arrows:'',
+            arrows:'0',
             label:'',
             color:'#1e90ff',
             lineId:'',
+            width:'1',
+            dashes:false,
             id:'',
           };
           this.addLineShow=true;
@@ -227,7 +229,9 @@
           color:'#1e90ff',
           lineId:'',
           id:'',
+          dashes:[],
         },
+        hoverEdge:false,
         isLineAdd:true,
         isNodeAdd:true,
         nodeData:{
@@ -318,6 +322,7 @@
             "target": item.to,
             "smooth": item.smooth,
             "expressions": item.expressions,
+            "dashes":item.dashes,
           };
           arr1.push(obj)
         });
@@ -367,10 +372,11 @@
             arrowStrikethrough:false,
             chosen:{
               edge:(values, id, selected, hovering)=>{
-                values.middleArrow=true;
+                if(this_.hoverEdge){
-                values.middleArrowScale=1;
+                  values.middleArrow=true;
-                values.middleArrowType='circle';
+                  values.middleArrowScale=1;
-                console.log(id, selected, hovering);
+                  values.middleArrowType='circle';
+                }
               },
             },
           },
@@ -484,7 +490,6 @@
        }else{
          edges.from=this.NodeArr[0];
          edges.to=this.NodeArr[1];
-         edges.dashes=[15,15];
        }
        edgesArray.push(edges);
         this.$emit("setTopologyData",this.nodesArray,edgesArray);
@@ -632,7 +637,6 @@
       },
       //工具栏点击后显示对应内容
       popDataShowUpdate(key,flag){//key 显示对应的弹窗 flag是否不显示工具栏
-        // console.log(key);
         this.popDataShow={
           endpoint:false,
           asset:false,
@@ -643,7 +647,6 @@
           main:false,
         };
         if(key&&!this.editVisNetwork){
-          // console.log(this.lineData);
           if(key==='total'&&this.selNodeId){
             this.totalId=this.selNodeId;
             this.totalArray=this.nodesArray;
@@ -683,7 +686,6 @@
          let this_=this;
          this.init('modal');
          this.network.on("click", function (params) {
-           console.log(params);
            this_.networkPopClose();
            if(!params.edges.length&&!params.nodes.length){
              this_.popDataShowUpdate('',true);
@@ -723,7 +725,6 @@
             this_.isLineAdd=false;
           }
           if(!this_.editVisNetwork){
-            console.log(this_.lineData);
             if(this_.lineData.expressions&&this_.lineData.expressions.length){
               this_.popDataShowUpdate('total')
             }else{
@@ -734,6 +735,14 @@
            // this_.addLineShow=true;
          });
 
+         this.network.on("hoverEdge", function () { // 悬停边
+           this_.hoverEdge=true;
+         });
+
+         this.network.on("blurEdge", function () { // 边失去焦点
+           this_.hoverEdge=false;
+         });
+
          this.network.on("dragStart", function (params) {//节点移动开始
            this_.NodeArrShow=false;
            let selId=params.nodes[0];
@@ -802,8 +811,10 @@
            }
            return false
          });
-         this.network.on("resize", function () {//检测resize
+         this.network.on("resize", function (params,a) {//检测resize
+
            setTimeout(()=>{
+             this_.zoom=this_.network.canvasToDOM({x:0,y:1}).y-this_.network.canvasToDOM({x:0,y:0}).y;
              this_.modelTopUpdate();
              this_.selNodeArrUpdate();
              if(this_.networkPopShow){

nezha-fronted/src/components/common/project/visNetwork.vue

@@ -208,6 +208,7 @@
           }
           this.$refs['topology'].viewsCenter=res.data.topo.viewsCenter?res.data.topo.viewsCenter:{x:0,y:0};
           this.$refs['topology'].zoom=res.data.topo.zoom?res.data.topo.zoom:1;
+          this.$refs['topology'].selNodeId='';
         })
       },
       reload(){
@@ -229,6 +230,7 @@
           }
           this.$refs['topology'].viewsCenter=res.data.topo.viewsCenter?res.data.topo.viewsCenter:{x:0,y:0};
           this.$refs['topology'].zoom=res.data.topo.zoom?res.data.topo.zoom:1;
+          this.$refs['topology'].selNodeId='';
         })
       },
       formatNodesArr(arr){
@@ -263,7 +265,6 @@
         let arr1=[];
         if(!arr){return arr1}
         arr.forEach((item)=>{
-          item.dashes=[5,5];
           item.from=item.source;
           item.to=item.target;
           item.label=item.name;

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

@@ -130,8 +130,8 @@ export default {
       isPopoverDisabled:false,
       isCustom:false,
       searchTime:[
-        bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - 1),'yyyy-MM-dd hh:mm:ss'),
+        bus.timeFormate(bus.getOffsetTimezoneData(-1),'yyyy-MM-dd hh:mm:ss'),
-        bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss')
+        bus.timeFormate(bus.getOffsetTimezoneData(),'yyyy-MM-dd hh:mm:ss')
       ],
       showTime: {
         id: 4,

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

@@ -227,8 +227,8 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
         promqlKeys: [],
         expressions: [''],
         filterTime: [
-          bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - 1),'yyyy-MM-dd hh:mm:ss'),
+          bus.timeFormate(bus.getOffsetTimezoneData(-1),'yyyy-MM-dd hh:mm:ss'),
-          bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss')
+          bus.timeFormate(bus.getOffsetTimezoneData(),'yyyy-MM-dd hh:mm:ss')
         ],
 
         /*工具参数*/

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

@@ -24,7 +24,7 @@
               <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
                 <el-dropdown class="metric-selector" v-if="plugins.indexOf('metric-selector') > -1">
                   <el-dropdown-menu style="display: none"></el-dropdown-menu>
-                  <span style="cursor: pointer;" @click="toggleDropdown">Metric&nbsp;<i class="el-icon-arrow-down" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i></span>
+                  <span :class="{'expr-title':projectRightBox}" style="cursor: pointer;" @click="toggleDropdown">Metric&nbsp;<i class="el-icon-arrow-down" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i></span>
                   <el-cascader-panel v-show="dropDownVisible" v-model="cascaderValue" style="text-align: left;" slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions"  @change="metricChange"></el-cascader-panel>
                 </el-dropdown>
                 <label style="line-height: 30px;" v-else>{{$t("alert.config.expr")}}</label>
@@ -66,7 +66,8 @@
         plugins: {type: Array},
         styleType: Number,
         historyParam:{type:Object},
-        showRemove:{type:Boolean,default:true}
+        showRemove:{type:Boolean,default:true},
+        projectRightBox:{type:Boolean,default:false}
       },
       data(){
         return {
@@ -245,6 +246,15 @@
     z-index: 2100;
     background-color: #FFF;
   }
+  .expr-title{
+    width: 120px;
+    padding-right: 20px;
+    text-align: right;
+    color: #666;
+    font-size: 14px;
+    letter-spacing: 0;
+    line-height: 22px;
+  }
 </style>
 <style>
   .metric-selector-pop{

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

@@ -347,7 +347,7 @@
         let str = `<div>`;
         params.forEach((item, i) => {
           if(i===0){
-            let value=bus.computeTimezone(item.data[0])
+            let value=item.data[0]
             let t_date = new Date(value);
             str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
               + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');

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

@@ -90,7 +90,7 @@
           intervale: 0,
           rotate: 0,
           formatter: function (value) {
-            value=bus.computeTimezone(value)
+            value=value
             var t_date = new Date(value);
             return [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + "\n"
               + [t_date.getHours(), t_date.getMinutes()].join(':');

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -94,10 +94,7 @@
           panel: {show: false},
         },
         tableHover: false,
-        searchTime: [
+        searchTime: bus.getTimezontDateRange(),
-          new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - 1),
-          new Date(bus.computeTimezone(new Date().getTime()))
-        ],
         intervalTimer: null,
         interval: 0,
         showPanel: { //panel下拉列表
@@ -331,9 +328,9 @@
       // 获取数据,用在子页面
       getData(params) {
         if (params.start_time === '' || params.end_time === '') {
-          let now = new Date();
+          let now = bus.getTimezontDateRange();
-          let endTimeTmp = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
+          let endTimeTmp = bus.timeFormate(now[1].getTime(), 'yyyy-MM-dd hh:mm:ss');
-          let startTimeTmp = bus.timeFormate(now.setHours(now.getHours() - 1), 'yyyy-MM-dd hh:mm:ss');
+          let startTimeTmp = bus.timeFormate(now[0].getTime(), 'yyyy-MM-dd hh:mm:ss');
           params.start_time = startTimeTmp;
           params.end_time = endTimeTmp;
         }

nezha-fronted/src/libs/bus.js

@@ -267,6 +267,15 @@ export default new Vue({
         return sourceTime;
       }
     },
+    getTimezontDateRange:function(offset=-1){
+      return [
+        new Date(new Date(this.computeTimezone(new Date().getTime())).setHours(new Date(this.computeTimezone(new Date().getTime())).getHours() + offset)),
+        new Date(this.computeTimezone(new Date().getTime()))
+      ]
+    },
+    getOffsetTimezoneData(offset=0){
+      return new Date(this.computeTimezone(new Date().getTime())).setHours(new Date(this.computeTimezone(new Date().getTime())).getHours() + offset)
+    },
     debounce(fn, delay) {
       // 记录上一次的延时器
       var timer = null;