Merge branch 'codeCheck' of https://git.mesalab.cn/nezha/nezha-fronted into codeCheck

nezha-fronted/src/components/charts/d3-line-chart2.vue

@@ -0,0 +1,130 @@
+<template>
+  <div style="position: relative;">
+    <div id="chart"></div>
+    <div class="legend-container legend-container-screen" id="legendArea" ref="legendArea" v-show="legends.length>0" v-scrollBar:legend >
+      <div v-for="(item, index) in legends" :title="item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':item.isGray}" :key="'legend_' + item.name+'_'+index">
+        <span class="legend-shape" :style="{background:(item.isGray?'#D3D3D3':getBgColor(index))}"></span>{{item.name}}
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+  import {D3LineChart} from "./d3-line";
+
+  export default {
+    name: "d3-line-chart2",
+    data:function(){
+      return{
+        option:{
+          width:1000,
+          height:400,
+          datas:[],
+          timeFormat:'%H:%M:%S',
+          legends: [],
+          title:'',
+          subTitle:'',
+          colors:["red", "blue", "green", 'black'],
+        },
+        chart:null,
+        legends:[],
+      }
+    },
+    methods:{
+      init:function(){
+        let chartData=this.getData();
+        this.option.datas=chartData.data;
+        this.option.legends=chartData.legends;
+        this.chart=D3LineChart('#chart',this.option)
+        this.chart.init()
+        console.log(this.chart)
+
+      },
+      clickLegend:function(legendName,index){
+        let curIsGrey=this.legends[index].isGray;
+        if(this.chart){
+          this.legends.forEach((item,i)=>{
+            let isGrey = item.isGray;
+            if(index != i){ //不是当前点击的
+              if(!curIsGrey && !isGrey){
+                this.chart.dispatchAction('line-single-show',legendName)
+                item.isGray=true;
+              }else if(!curIsGrey && isGrey){
+                item.isGray=false;
+                this.chart.dispatchAction('line-all-show',legendName)
+              }else{
+                item.isGray=true
+                this.chart.dispatchAction('line-single-show',legendName)
+              }
+
+            }else {//当前点击的
+              if(item.isGray === true){
+                item.isGray = false;
+              }
+              this.chart.dispatchAction('line-single-show',legendName)
+            }
+          });
+        }
+      },
+      getData() {
+        let legends=[];
+        let datas=[];
+        let startTime=new Date()
+        startTime.setHours(new Date().getHours() - 1);
+        let start=Math.round(startTime.getTime()/1000);
+        let end=Math.round(new Date().getTime()/1000)
+        this.$get('/prom/api/v1/query_range?query=node_cpu_frequency_hertz{asset="192.168.40.126"}&start='+start+'&end='+end+'&step=15s').then(response=>{
+          if(response.status == 'success'){
+            let result=response.data.result;
+            result.forEach(item=>{
+              let metric=item.metric;
+              let metricName=metric.__name__;
+              delete metric.__name__;
+              let legend=metricName+"{"
+              for(let key in metric){
+                legend+=key + '="'+metric[key]+'",';
+              }
+              legend.substring(0,legend.length-1);
+              legend+='}'
+
+              legends.push(legend)
+
+              let values=item.values.map(item=>{
+                return [item[0]*1000,Number(item[1])]
+              })
+
+              datas.push(values);
+            })
+
+            this.option.datas=datas;
+
+            this.legends=legends.map(item=>{
+              return{name:item,isGray:false}
+            });
+            this.option.legends=JSON.parse(JSON.stringify(this.legends))
+
+            this.chart=D3LineChart('#chart',this.option)
+            this.chart.init()
+          }
+        })
+      },
+      getBgColor:function(index){
+        let color=this.chart.colors[index];
+        return color;
+      },
+    },
+    mounted() {
+      this.getData();
+      // this.init()
+    }
+  }
+</script>
+
+<style scoped>
+@import "chart.scss";
+  .legend-container{
+    bottom: unset !important;
+
+  }
+</style>

nezha-fronted/src/components/charts/d3-line.js

@@ -0,0 +1,630 @@
+import * as d3 from "d3";
+import './d3-line.scss'
+import {randomcolor} from "../common/js/radomcolor/randomcolor";
+
+export function D3LineChart(selector,option){
+  return {
+    selector:selector, //选择器
+    width:option.width,
+    height:option.height,
+    timeFormat:option.timeFormat?option.timeFormat:'%Y-%m-%d',
+    _timeFormat:null,
+    datas:option.datas,
+    legends:option.legends,
+    title:option.title?option.title:'',
+    subTitle:option.subTitle?option.subTitle:'',
+    colors:option.colors,
+    padding:option.padding?option.padding:{top:40,left:40,bottom:40,right:20},
+    duration:option.duration?option.duration:800,
+    _head_height:0,
+    _foot_height:0,
+    currentLineNum:0,
+    showXAxisTick:option.showXAxisTick?option.showXAxisTick:false,
+    showYAxisTick:option.showYAxisTick?option.showYAxisTick:false,
+    tooltipFormatter:option.tooltipFormatter,
+
+    init:function(){
+      //定义画布
+      this.svg=d3.select(this.selector)
+        .append('svg')
+        .attr('width',this.width)
+        .attr('height',this.height)
+        .on('mousemove', drawTooltip)
+        .on('mouseout', removeTooltip);
+
+      this.initOption();
+      this.constomAction();
+
+      this.drawTitle();
+      this.creatScale();
+      this.createDefs();
+      this.createXInnerBar();
+      this.createYInnderBar();
+      this.createXAxis();
+      this.createYAxis();
+
+      // this.createLegends();
+      this.drawLines();
+
+      this.createZoom()
+
+      let $self=this;
+      let oldToolVal=null;
+      function removeTooltip() {
+        if ($self.tooltip) $self.tooltip.style('display', 'none');
+        if ($self.tooltipLine) $self.tooltipLine.attr('stroke', 'none');
+      }
+      function drawTipLine(time){
+        if ($self.currentTransform)
+          $self.tooltipLine
+            .attr('stroke', 'black')
+            .attr("clip-path", "url(#clip)")
+            .attr('x1', $self.currentTransform.applyX($self.xScale(time)))
+            .attr('x2', $self.currentTransform.applyX($self.xScale(time)))
+            .attr('y1', $self._head_height)
+            .attr('y2', $self.height - $self._foot_height);
+        else
+
+          $self.tooltipLine
+            .attr('stroke', 'black')
+            .attr("clip-path", "url(#clip)")
+            .attr('x1', $self.xScale(time))
+            .attr('x2', $self.xScale(time))
+            .attr('y1', $self._head_height)
+            .attr('y2', $self.height - $self._foot_height);
+      }
+      function drawTooltip(){
+        var x=d3.mouse($self.svg.node())[0];
+        if(x<$self.padding.left||x>$self.width-$self.padding.right){
+          return false;
+        }
+        if ($self.currentTransform)
+          var time = $self.currentTransform.rescaleX($self.xScale).invert(d3.mouse($self.svg.node())[0]);
+        else
+          var time = $self.xScale.invert(d3.mouse($self.svg.node())[0]);
+
+        // drawTipLine(time)
+
+        $self.tooltip.html(d3.timeFormat('%Y-%m-%d %H:%M:%S')(time))
+          .style('display', 'block')
+          .style('left', d3.event.pageX + 20 + 'px')
+          .style('top', d3.event.pageY - 20 + 'px')
+          .selectAll()
+          .data($self.datas).enter()
+          .append('div')
+          .html(function(d, i,g) {
+            let toolVal=d[0];
+            let min=Math.abs(+toolVal[0] - +time )
+            d.forEach(item=>{
+              let temp=Math.abs(+item[0] - +time)
+              if(temp - min < 0){
+                min=temp;
+                toolVal=item;
+              }
+            })
+            if(toolVal){
+              oldToolVal=toolVal;
+              let legend=$self.legends[i];
+              if(!legend.isGray){
+                return `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">
+                            <div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${$self.colors[i]};}'></span>${legend.alias?legend.alias:legend.name}:  </div>
+                            <div style="padding-left: 10px;">${toolVal[1]}</div>
+                         </div>`
+              }
+            }
+          });
+      }
+    },
+    initOption:function(){
+      this._timeFormat=d3.timeFormat(this.timeFormat)
+      this._head_height=this.padding.top
+      this._foot_height=this.padding.bottom
+      this.currentLineNum=this.datas.length;
+      this.tooltip = d3.select('body')
+                        .append('div')
+                        .attr('style',"position: absolute; background-color: rgba(221,228,237,1);border-color:rgba(221,228,237,1); padding: 5px; display: none; left: 983px; top: 89px;")
+      this.tooltipLine = this.svg.append('line');
+
+      this.minMax=getMinMax(this.datas);
+
+      if(this.padding.left < computeDistance(this.minMax.max+'')){
+        this.padding.left = computeDistance(this.minMax.max+'')
+      }
+
+      if(!this.colors || this.colors.length<this.currentLineNum){
+        this.colors=[];
+        for(let i=0;i<this.currentLineNum;i++){
+          this.colors.push(randomcolor())
+        }
+      }
+    },
+    constomAction:function(){
+      // this.dispatch=d3.dispatch('line-show','line-hide','line-toggle')
+    },
+    drawTitle:function(){
+      //添加标题
+      if (this.title != "") {
+        this.svg.append("g")
+          .append("text")
+          .text(this.title)
+          .attr("class", "title")
+          .attr("x", this.width / 2)
+          .attr("y", this._head_height);
+        this._head_height += 30;
+      }
+      //添加副标题
+      if (this.subTitle != "") {
+        this.svg.append("g")
+          .append("text")
+          .text(this.subTitle)
+          .attr("class", "subTitle")
+          .attr("x", this.width / 2)
+          .attr("y", this._head_height);
+
+        this._head_height += 20;
+      }
+    },
+    creatScale:function(){
+      let minMax=this.minMax
+      let t_max_min = d3.extent(this.datas[0], function(d) {
+        return d[0];
+      });
+      this.xTicks = Math.min(this.datas[0].length,10)
+
+      //横坐标轴比例尺
+      this.xScale = d3.scaleTime()
+        .domain(t_max_min)
+        .range([this.padding.left, this.width - this.padding.right]);
+
+      //纵坐标轴比例尺
+      this.yScale = d3.scaleLinear()
+        .domain([minMax.min, Math.round(minMax.max*1.05)])
+        .range([this.height - this._foot_height, this._head_height]);
+
+    },
+    createZoom:function(){
+      let $self=this;
+      this.zoom = d3.zoom()
+        .scaleExtent([1, 20])
+        .translateExtent([
+          [this.padding.top, 0],
+          [this.width - this.padding.right, this.height]
+        ])
+        .extent([
+          [this.padding.top, 0],
+          [this.width - this.padding.right, this.height]
+        ])
+        .on("zoom", zoomed);
+      this.svg.call(this.zoom);
+
+      function zoomed() {
+        let t = d3.event.transform;
+        $self.currentTransform=t;
+        let xt = t.rescaleX($self.xScale);
+        $self.svg.select('.bottom_axis').call($self.xAxis.scale(xt)).selectAll("text")
+          .attr("transform", "translate(-10,20) rotate(-20)");
+
+        $self.svg.select('.inner_line_x').call($self.xInner.scale(xt));
+
+        for (var i = 0; i < $self.lines.length; i++) {
+          var lineObject = $self.lines[i];
+
+          lineObject.scale(i, 0, t);
+        }
+      }
+    },
+    createDefs:function(){ //创建遮罩
+      this.svg.append("defs").append("clipPath")
+        .attr("id", "clip")
+        .append("rect")
+
+        .attr('x', this.padding.left)
+        .attr('y', 0)
+        .attr("width", this.width - this.padding.left - this.padding.right)
+        .attr("height", this.height);
+    },
+    createXInnerBar:function(){
+      var xInner = d3.axisBottom()
+        .scale(this.xScale)
+        .tickSize(-(this.height - this._head_height - this._foot_height), 0, 0)
+        .tickFormat("")
+        .ticks(this.xTicks);
+      this.xInner=xInner;
+      //添加横轴网格线
+      var xInnerBar = this.svg.append("g")
+        .attr("class", "inner_line inner_line_x")
+        .attr("transform", "translate(0," + (this.height - this._foot_height) + ")")
+        .call(xInner);
+    },
+    createYInnderBar:function(){
+      //定义纵轴网格线
+      var yInner = d3.axisLeft()
+        .scale(this.yScale)
+        .tickSize(-(this.width - this.padding.left - this.padding.right), 0, 0)
+        .tickFormat("")
+        .ticks(10);
+      this.yInner=yInner
+      //添加纵轴网格线
+      var yInnerBar = this.svg.append("g")
+        .attr("class", "inner_line inner_line_y")
+        .attr("transform", "translate(" + this.padding.left + ",0)")
+        .call(yInner);
+    },
+    createXAxis:function(){
+      let $self=this;
+      //定义横轴
+      var xAxis = d3.axisBottom()
+        .scale(this.xScale)
+        .ticks(this.xTicks)
+        .tickFormat($self._timeFormat)
+      this.xAxis=xAxis
+      //添加横坐标轴
+      var xBar = this.svg.append("g")
+        .attr("class", "bottom_axis")
+        .attr("transform", "translate(0," + (this.height - this._foot_height) + ")")
+        .call(xAxis).selectAll("text")
+        .attr("transform", "translate(-10,8) rotate(-20)")
+
+      if(!this.showXAxisTick){
+        let xAxis=this.svg.select('.bottom_axis')
+        xAxis.select('.domain').remove();
+        xAxis.selectAll('.tick').select('line').remove()
+      }
+    },
+    createYAxis:function(){
+      //定义纵轴
+      var yAxis = d3.axisLeft()
+        .scale(this.yScale)
+      this.yAxis=yAxis;
+      //添加纵轴
+      var yBar = this.svg.append("g")
+        .attr("class", "left_axis")
+        .attr("transform", "translate(" + this.padding.left + ",0)")
+        .call(yAxis);
+      if(!this.showYAxisTick){
+        let yAxis=this.svg.select('.left_axis')
+        yAxis.select('.domain').remove();
+        yAxis.selectAll('.tick').select('line').remove()
+      }
+    },
+    createLegends:function(){
+      let $self=this;
+      let legend = d3.select('#legendArea').attr('class','legend')
+      var textGroup = legend.selectAll("div")
+        .data(this.legends);
+
+      textGroup.exit().remove();
+
+      let legendItem=legend.selectAll("div")
+        .data(this.legends)
+        .enter()
+        .append("div")
+        .attr("class", "legend-item")
+
+      legendItem.append('span')
+        .attr('class','legend-shape')
+        .style('background',function(d,i){
+          return $self.colors[i]
+        })
+
+      legendItem.append('span')
+        .text(function(d,i){
+          return d.name
+        })
+
+
+      /*var rectGroup = legend.selectAll("rect")
+        .data(this.legends);
+
+      rectGroup.exit().remove();
+
+      legend.selectAll("rect")
+        .data(this.legends)
+        .enter()
+        .append("rect")
+        .attr("x", function(d, i) {
+          return i * 100 - 20;
+        })
+        .attr("y", -10)
+        .attr("width", 12)
+        .attr("height", 12)
+        .attr("fill", function(d, i) {
+          return $self.colors[i];
+        });*/
+
+      // legend.attr("transform", "translate(" + ((this.width - this.legends.length * 100) / 2) + "," + (this.height - 10) + ")");
+    },
+    drawLines:function(){
+      this.lines=[];
+
+      for (var i = 0; i < this.currentLineNum; i++) {
+        var newLine = new CrystalLineObject(this);
+        newLine.init(i);
+        this.lines.push(newLine);
+      }
+    },
+    dispatchAction(type,param){
+      d3.selectAll('path[class="chart-line"]').dispatch(type,{detail:{name:param}})
+    },
+    drawChart() {
+      var _duration = 1000;
+
+      // this.svg.transition().duration(_duration).call(this.zoom.transform, d3.zoomIdentity);
+
+      var t_max_min = d3.extent(this.datas[0], function(d) {
+        return d[0];
+      });
+
+      var xTicks = Math.min(this.datas[0].length, 10)
+
+      //设置线条动画起始位置
+      var lineObject ;
+
+      for (var i = 0; i < this.datas.length; i++) {
+        if (i < this.currentLineNum) {
+          //对已有的线条做动画
+          lineObject = this.lines[i];
+          lineObject.movieBegin(i);
+        } else {
+          //如果现有线条不够，就加上一些
+          var newLine = new CrystalLineObject(this);
+          newLine.init(i);
+          this.lines.push(newLine);
+        }
+      }
+
+      //删除多余的线条，如果有的话
+      if (this.datas.length < this.currentLineNum) {
+        for (var i = this.datas.length; i < this.currentLineNum; i++) {
+          lineObject = this.lines[i];
+          lineObject.remove();
+        }
+        this.lines.splice(this.datas.length, this.currentLineNum - this.datas.length);
+      }
+
+      var maxdata = getMaxdata(this.datas);
+      var newLength = this.datas[0].length;
+
+      this.zoom.scaleExtent([1, 20]);
+      this.svg.call(this.zoom);
+
+      //横轴数据动画
+      this.xScale.domain(d3.extent(this.datas[0], function(d) {
+        return d[0];
+      }));
+      this.xAxis.scale(this.xScale).ticks(xTicks).tickFormat(this.timeFormat);
+      this.svg.select('.bottom_axis').transition().duration(_duration).call(this.xAxis).selectAll("text")
+        .attr("transform", "translate(-10,20) rotate(-20)");
+
+      this.xBar.selectAll("text").text(function(d) {
+        return this.xMarks[d];
+      });
+      this.xInner.scale(this.xScale).ticks(newLength);
+      this.xInnerBar.transition().duration(_duration).call(this.xInner);
+
+      //纵轴数据动画
+      this.yScale.domain([0, maxdata]);
+      this.yBar.transition().duration(_duration).call(this.yAxis);
+      this.yInnerBar.transition().duration(_duration).call(this.yInner);
+
+      //开始线条动画
+      for (var i = 0; i < lines.length; i++) {
+        lineObject = this.lines[i];
+        lineObject.reDraw(i, _duration);
+      }
+
+      this.currentLineNum = this.datas.length;
+      this.dataLength = newLength;
+    }
+  }
+}
+//取得多维数组最大值
+function getMaxdata(arr) {
+  var maxdata = 0;
+  for (var i = 0; i < arr.length; i++) {
+    maxdata = d3.max([maxdata, d3.max(arr[i], function(d) {
+      return d[1];
+    })]);
+  }
+  return maxdata;
+}
+
+function getMinMax(arr){
+  let min=0,max=0;
+  for(let i =0;i<arr.length;i++){
+    max=d3.max([max,d3.max(arr[i],d=>{return d[1]})])
+    min=d3.min([min,d3.min(arr[i],d=>{return d[1]})])
+  }
+  return{min:min,max:max}
+}
+function computeDistance(str){
+  var width = 0;
+  var html = document.createElement('span');
+  html.innerText = str;
+  html.className = 'getTextWidth';
+  document.querySelector('body').appendChild(html);
+  width = document.querySelector('.getTextWidth').offsetWidth;
+  document.querySelector('.getTextWidth').remove();
+  return Number((width+5));
+}
+
+function CrystalLineObject(chart) {
+  this.group = null;
+  this.path = null;
+  this.oldData = [];
+  let dataset=chart.datas;
+  let svg=chart.svg;
+  let xScale=chart.xScale;
+  let yScale=chart.yScale;
+  let lineColor=chart.colors;
+  const dispatch=chart.dispatch;
+
+  this.init = function(id) {
+    var arr = dataset[id];
+    let legend=chart.legends[id];
+    this.group = svg.append("g");
+    let $self=this;
+    var line = d3.line()
+      .x(function(d, i) {
+        return xScale(d[0]);
+      })
+      .y(function(d) {
+        return yScale(d[1]);
+      })
+      .curve(d3.curveCatmullRom.alpha(0.3)); //折线曲度
+
+    //添加折线
+    this.path = this.group.append("path")
+      .attr("d", line(arr))
+      .attr('class','chart-line')
+      .style("fill", "none")
+      .style("stroke-width", 1)
+      .attr("clip-path", "url(#clip)")
+      .style("stroke", lineColor[id])
+      .style("stroke-opacity", 0.9)
+      .on('line-single-show',function(d,i,group){
+        let event=d3.event;
+        let name=event.detail?event.detail.name:""
+        if(legend.name != name){
+          $self.group
+            .transition()
+            .duration(chart.duration)
+            .style('opacity','0')
+          legend.isGray=true;
+        }else{
+          $self.group.transition()
+            .duration(chart.duration).style('opacity','1')
+          legend.isGray=false;
+        }
+      })
+      .on('line-all-show',function(){
+        $self.group.transition()
+          .duration(chart.duration).style('opacity','1')
+        chart.legends.forEach(item=>{
+          item.isGray=false;
+        })
+      })
+
+    //添加系列的小圆点
+   /* this.group.selectAll("circle")
+      .data(arr)
+      .enter()
+      .append("circle")
+      .attr("clip-path", "url(#clip)")
+      .attr("cx", function(d, i) {
+        return xScale(d[0]);
+      })
+      .attr("cy", function(d) {
+        return yScale(d[1]);
+      })
+      .attr("r", 5)
+      .attr("fill", lineColor[id]);*/
+    this.oldData = arr;
+  };
+
+  this.scale = function(id, _duration, transform) {
+    var arr = dataset[id];
+
+    var line = d3.line()
+      .x(function(d, i) {
+
+        return transform.applyX(xScale(d[0]))
+      })
+      .y(function(d) {
+        return yScale(d[1]);
+      })
+
+    //添加折线
+    this.group.select("path")
+      .attr("d", line(arr))
+      .style("fill", "none")
+      .style("stroke-width", 1)
+      .style("stroke", lineColor[id])
+      .style("stroke-opacity", 0.9);
+
+    this.group.selectAll("circle")
+      .attr("cx", function(d, i) {
+        return transform.applyX(xScale(d[0]));
+      })
+      .attr("cy", function(d) {
+        return yScale(d[1]);
+      })
+
+  }
+
+  //动画初始化方法
+  this.movieBegin = function(id) {
+    var arr = dataset[id];
+    //补足/删除路径
+    var olddata = this.oldData;
+    var line = d3.line()
+      .x(function(d, i) {
+        if (i >= olddata.length) return chart.width - chart.padding.left;
+        else return xScale(d[0]);
+      })
+      .y(function(d, i) {
+        if (i >= olddata.length) return chart.height - chart._foot_height;
+        else return yScale(olddata[i].value);
+      });
+
+    //路径初始化
+    this.path.attr("d", line(arr));
+
+    //截断旧数据
+    var tempData = olddata.slice(0, arr.length);
+    /*var circle = this.group.selectAll("circle").data(tempData);
+
+    //删除多余的圆点
+    circle.exit().remove();*/
+
+    //圆点初始化，添加圆点,多出来的到右侧底部
+    /*this.group.selectAll("circle")
+      .data(arr)
+      .enter()
+      .append("circle")
+      .attr("cx", function(d, i) {
+        if (i >= olddata.length) return chart.width - chart.padding;
+        else return xScale(d[0]);
+      })
+      .attr("cy", function(d, i) {
+        if (i >= olddata.length) return chart.height - chart._foot_height;
+        else return yScale(d[1]);
+      })
+      .attr("r", 5)
+      .attr("fill", lineColor[id]);*/
+
+    this.oldData = arr;
+  };
+
+  //重绘加动画效果
+  this.reDraw = function(id, _duration) {
+    var arr = dataset[id];
+    var line = d3.line()
+      .x(function(d, i) {
+        return xScale(d[0]);
+      })
+      .y(function(d) {
+        return yScale(d[1]);
+      });
+
+    //路径动画
+    this.path.transition().duration(_duration).attr("d", line(arr));
+
+    //圆点动画
+   /* this.group.selectAll("circle")
+      .transition()
+      .duration(_duration)
+      .attr("cx", function(d, i) {
+        return xScale(d[0]);
+      })
+      .attr("cy", function(d) {
+        return yScale(d[1]);
+      })*/
+  };
+
+  //从画布删除折线
+  this.remove = function() {
+    this.group.remove();
+  };
+
+}

nezha-fronted/src/components/charts/d3-line.scss

@@ -0,0 +1,72 @@
+.chart{
+  position: relative;
+}
+.title {
+  font-family: Arial, 微软雅黑;
+  font-size: 18px;
+  text-anchor: middle;
+}
+
+.subTitle {
+  font-family: Arial, 宋体;
+  font-size: 12px;
+  text-anchor: middle;
+  fill: #666
+}
+
+.axis path,
+.axis line {
+  fill: none;
+  stroke: black;
+  shape-rendering: crispEdges;
+}
+
+.axis text {
+  font-family: sans-serif;
+  font-size: 11px;
+  fill: #999;
+}
+
+.inner_line path,
+.inner_line line {
+  fill: none;
+  stroke: #ccc;
+  shape-rendering: crispEdges;
+  opacity: .5;
+}
+
+.legend {
+  font-size: 12px;
+  font-family: Arial, Helvetica, sans-serif;
+  text-align:left;
+  max-height:80px;
+  min-height:25px;
+  left: 10px;
+  line-height: 18px;
+  position: absolute;
+  padding-bottom:3px;
+}
+
+.legend-shape{
+  display:inline-block;
+  margin-right:5px;
+  border-radius:10px;
+  width:15px;
+  height:5px;
+  vertical-align: middle;
+}
+.ft-gr{
+  color:lightgray;
+}
+
+.legend-item{
+  text-overflow:ellipsis;
+  white-space:nowrap;
+  /*width:100%;*/
+  margin-right:10px;
+  overflow-x:hidden;
+  cursor:pointer;
+  display:inline-block;
+  float:left;
+  line-height: 20px;
+}

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

@@ -9,7 +9,7 @@
     >
       <el-submenu :index="'-3'" popper-class="nz-submenu" class="icon-menu-item">
         <template slot="title">
-          <i class="nz-icon-navmore nz-icon"></i>
+          <i class="nz-icon-navmore nz-icon" style="font-size: 17px;"></i>
         </template>
         <template v-for="(item, index) in linkData">
           <el-menu-item :index="'0-' + index">
@@ -18,7 +18,7 @@
         </template>
       </el-submenu>
       <el-submenu :index="'-1'" class="icon-menu-item" popper-class="display-none">
-        <div slot="title" class="el-submenu__title" @click="cli()" >
+        <div slot="title" class="el-submenu__title" @click="cli" >
           <i class="nz-icon nz-icon-cli"></i>
           <div class="right-tip" v-show="$store.state.consoleCount>0">{{$store.state.consoleCount<=10?$store.state.consoleCount:'10+'}}</div>
         </div>
@@ -150,16 +150,12 @@
       </el-submenu>
     </el-menu>
 
-    <panel-box :panel="editPanel" @reload="panelListReload" @reloadForDel="" ref="panelBox"></panel-box>
+    <project-box v-if="rightBox.project.show" :project="editProject" ref="projectBox"></project-box>
-    <project-box :project="editProject" ref="projectBox"></project-box>
+    <module-box v-if="rightBox.module.show" :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
-    <module-box :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
+    <add-endpoint-box v-if="rightBox.endpoint.show" :currentProject="currentProject" :currentModule="currentModule" @reload=""
-    <add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" @reload=""
                       ref="addEndpointBox"></add-endpoint-box>
-    <!--<asset-add-unit :add-unit-show='addUnitShow' @refreshData="refreshAsset" ref="assetAddUnit"
+    <asset-box v-if="rightBox.asset.show" :edit-unit-show='addUnitShow' @refreshData="refreshAsset" @sendStateData="closeAsset" ref="assetAddUnit"></asset-box>
-                    @sendStateData="closeAsset"></asset-add-unit>-->
+    <alert-config-box v-if="rightBox.alertRule.show" :parentAlertRule="alertRule" @reload="" ref="alertConfigBox"></alert-config-box>
-    <asset-box :edit-unit-show='addUnitShow' @refreshData="refreshAsset" @sendStateData="closeAsset" v-if="assetBoxShow"
-               ref="assetAddUnit"></asset-box>
-    <alert-config-box :parentAlertRule="alertRule" @reload="" ref="alertConfigBox"></alert-config-box>
     <change-password :cur-user="username" :show-dialog="showChangePwd" @click="showPwdDialog" @dialogClosed="dialogClosed"></change-password>
   </div>
 </template>
@@ -174,6 +170,13 @@
     },
     data() {
       return {
+        rightBox: {
+          project: {show: false},
+          module: {show: false},
+          endpoint: {show: false},
+          asset: {show: false},
+          alertRule: {show: false},
+        },
         username: sessionStorage.getItem("nz-username"),
         language: localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en',
         assetData: [],
@@ -181,10 +184,6 @@
         activeItemIndex:'',
         activeItemIndexes: [],
         hoverItemIndex: '',
-        editPanel:{//新增or编辑的panel
-          id:'',
-          name: ''
-        },
         projectData: [], //顶部菜单project列表中的数据
         editProject: {id: '', name: '', remark: ''}, //新增/编辑的project
         currentProject: {id: '', name: '', remark: ''}, //module/endpoint弹框用来回显project
@@ -257,15 +256,6 @@
       }
     },
     methods: {
-      closeAsset() {
-        this.addUnitShow = false;
-        this.assetBoxShow = false;
-      },
-      refreshAsset(flag) {
-        if (flag && this.$route.path == "/asset") {
-          window.location.reload();
-        }
-      },
       cli(){
         this.$store.commit('openConsole');
       },
@@ -284,14 +274,11 @@
       },
 
       createBox(item) {
-        if (item.type == 0) {
+        if (item.type == 1) {
-          this.$refs.panelBox.show(true);
+          this.rightBox.project.show = true;
-          this.editPanel = {id: '', name: ''};
-        }else  if (item.type == 1) {
-          this.$refs.projectBox.show(true,true);
           this.editProject = {id: '', name: '', remark: ''};
         } else if (item.type == 2) {
-          this.$refs.moduleBox.show(true,true);
+          this.rightBox.module.show = true;
           this.editModule = {
             id: '',
             name: '',
@@ -437,8 +424,8 @@
         })
       },
       toEditProject(p) {
-        this.$refs.projectBox.show(true,true);
         this.editProject = Object.assign({}, p);
+        this.rightBox.project.show = true;
       },
       indOf(a, b) {
         let c = [];

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

@@ -418,6 +418,7 @@ const en = {
       vendor:'Vendor',
       ping:'Ping',
     },
+    featureTitle:'Attribute',
     /*createAsset:{
       title:'New asset',//'新增资产'
       sn:'SN',//SN

nezha-fronted/src/components/common/rightBox/addEndpointBox.vue

@@ -1,229 +1,226 @@
 <template>
-  <transition name="right-box">
+  <div class="right-box right-box-add-endpoint" :class="{'right-box-add-endpoint-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}" @mousedown="showEditParamBox(false)" v-clickoutside="clickOutside">
-    <div class="right-box right-box-add-endpoint" :class="{'right-box-add-endpoint-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}" v-if="rightBox.show" @mousedown="showEditParamBox(false)" v-clickoutside="clickos">
+    <!-- begin--顶部按钮-->
-      <!-- begin--顶部按钮-->
+    <div class="right-box-top-btns"></div>
-      <div class="right-box-top-btns">
+    <!-- end--顶部按钮-->
-      </div>
-      <!-- end--顶部按钮-->
 
-      <!-- begin--标题-->
+    <!-- begin--标题-->
-      <div class="right-box-title">{{rightBox.title}}</div>
+    <div class="right-box-title">{{$t("overall.createEndpoint")}}</div>
-      <!-- end--标题-->
+    <!-- end--标题-->
 
-      <!-- begin--表单-->
+    <!-- begin--表单-->
-      <el-scrollbar class="right-box-form-box">
+    <el-scrollbar class="right-box-form-box">
-        <el-form class="right-box-form right-box-form-left" label-position="right" label-width="120px" ref="addEndpointForm" :model="endpointForm" :rules="rules">
+      <el-form class="right-box-form right-box-form-left" label-position="right" label-width="120px" ref="addEndpoint" :model="endpoint" :rules="rules">
-          <!--project-->
+        <!--project-->
-          <el-form-item :label='$t("project.project.project")' prop="projectId">
+        <el-form-item :label='$t("project.project.project")' prop="projectId">
-            <el-select @change="((val) => {changeProject(val)})" value-key="id" popper-class="config-dropdown" v-model="currentProjectCopy" placeholder="" size="small">
+          <el-select @change="((val) => {changeProject(val)})" value-key="id" popper-class="config-dropdown" v-model="currentProjectCopy" placeholder="" size="small">
-              <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item" :id="'project-'+item.id"></el-option>
+            <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item" :id="'project-'+item.id"></el-option>
-            </el-select>
+          </el-select>
-          </el-form-item>
+        </el-form-item>
-          <!--module-->
+        <!--module-->
-          <el-form-item :label='$t("project.module.module")' prop="moduleId">
+        <el-form-item :label='$t("project.module.module")' prop="moduleId">
-            <el-select @change="((val) => {changeModule(val)})" value-key="id" popper-class="config-dropdown" v-model="currentModuleCopy" placeholder="" size="small">
+          <el-select @change="((val) => {changeModule(val)})" value-key="id" popper-class="config-dropdown" v-model="currentModuleCopy" placeholder="" size="small">
-              <el-option v-for="item in moduleList" :key="item.id" :label="item.name" :value="item" :id="'module-'+item.id"></el-option>
+            <el-option v-for="item in moduleList" :key="item.id" :label="item.name" :value="item" :id="'module-'+item.id"></el-option>
-            </el-select>
+          </el-select>
-          </el-form-item>
+        </el-form-item>
-          <!--asset和endpoint-->
+        <!--asset和endpoint-->
-          <div class="right-box-form-row right-child-boxes">
+        <div class="right-box-form-row right-child-boxes">
-            <div class="right-child-box assets-box">
+          <div class="right-child-box assets-box">
-              <!--begin--标题-->
+            <!--begin--标题-->
-              <div class="right-child-box-title">{{$t('asset.asset')}}</div>
+            <div class="right-child-box-title">{{$t('asset.asset')}}</div>
-              <!--end--标题-->
+            <!--end--标题-->
-              <!--begin--搜索框-->
+            <!--begin--搜索框-->
-              <div style="display: inline-block">
+            <div style="display: inline-block">
-                <div class="nz-btn-group nz-btn-group-size-small nz-btn-group-light endpoint-asset-search">
+              <div class="nz-btn-group nz-btn-group-size-small nz-btn-group-light endpoint-asset-search">
-                  <button id="search-asset-drop" type="button" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-prepend" @click="assetSearch.dropdownShow = !assetSearch.dropdownShow">
+                <button id="search-asset-drop" type="button" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-prepend" @click="assetSearch.dropdownShow = !assetSearch.dropdownShow">
-                    <span class="endpoint-asset-label-txt">{{assetSearch.label}}</span>
+                  <span class="endpoint-asset-label-txt">{{assetSearch.label}}</span>
-                    <span>
+                  <span>
-                      <i v-if="assetSearch.dropdownShow" class="el-icon-caret-top"></i>
+                    <i v-if="assetSearch.dropdownShow" class="el-icon-caret-top"></i>
-                      <i v-if="!assetSearch.dropdownShow" class="el-icon-caret-bottom"></i>
+                    <i v-if="!assetSearch.dropdownShow" class="el-icon-caret-bottom"></i>
-                    </span>
+                  </span>
-                  </button><el-input style="width: 100px;" class="input-x-mini-24 nz-input-group-middle" placeholder="" v-model="assetSearch.text"></el-input><button
+                </button><el-input style="width: 100px;" class="input-x-mini-24 nz-input-group-middle" placeholder="" v-model="assetSearch.text"></el-input><button
-                  type="button" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-append" id="search-asset"><i @click="searchAsset" class="el-icon-search"></i></button>
+                type="button" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-append" id="search-asset"><i @click="searchAsset" class="el-icon-search"></i></button>
 
-                  <div class="endpoint-asset-search-dropdown" v-if="assetSearch.dropdownShow">
+                <div class="endpoint-asset-search-dropdown" v-if="assetSearch.dropdownShow">
-                    <div @click="dropdownSelect('IP')" class="endpoint-asset-search-dropdown-item" id="search-asset-ip">IP</div>
+                  <div @click="dropdownSelect('IP')" class="endpoint-asset-search-dropdown-item" id="search-asset-ip">IP</div>
-                    <div @click="dropdownSelect('SN')" class="endpoint-asset-search-dropdown-item" id="search-asset-sn">SN</div>
+                  <div @click="dropdownSelect('SN')" class="endpoint-asset-search-dropdown-item" id="search-asset-sn">SN</div>
-                  </div>
                 </div>
               </div>
-              <!--end--搜索框-->
-
-              <!-- begin--table-->
-              <div class="endpoint-sub-table">
-                <div class="endpoint-sub-table-head">
-                  <div class="endpoint-sub-table-col">IP</div>
-                  <div class="endpoint-sub-table-col">SN</div>
-                </div>
-                <div class="line-100"></div>
-                <div class="endpoint-sub-table-body">
-                  <el-scrollbar style="height: 100%" ref="assetScrollbar">
-                    <div @click="selectAsset(item, index)" :data="item.id" v-for="item,index in assetList" class="endpoint-sub-table-row" :id="'select-asset-'+item.id">
-                      <div :id="index" @click.stop v-if="!currentModuleCopy.id" class="endpoint-sub-table-body-dialog"></div>
-                      <div class="endpoint-sub-table-col">{{item.host}}</div>
-                      <el-popover trigger="hover" placement="right-start" :content="item.sn" >
-                        <div slot="reference" class="endpoint-sub-table-col">{{item.sn}}</div>
-                      </el-popover>
-                    </div>
-                  </el-scrollbar>
-                </div>
-              </div>
-              <!--end--table-->
             </div>
-            <!--右侧endpoint列表-->
+            <!--end--搜索框-->
-            <div class="right-child-box endpoints-box" :class="{'endpoints-box-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}">
+
-              <!--module-->
+            <!-- begin--table-->
-              <div class="endpoints-box-module-info">
+            <div class="endpoint-sub-table">
-                <div class="title">{{$t('project.endpoint.moduleParameter')}}:</div>
+              <div class="endpoint-sub-table-head">
-                <el-input class="module-info module-info-port input-x-mini-22" :class="{'module-info-port-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}" v-model="currentModuleCopy.port"></el-input>
+                <div class="endpoint-sub-table-col">IP</div>
-                <el-popover
+                <div class="endpoint-sub-table-col">SN</div>
-                  placement="bottom"
+              </div>
-                  width="200"
+              <div class="line-100"></div>
-                  trigger="hover"
+              <div class="endpoint-sub-table-body">
-                  v-if="currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'http'"
+                <el-scrollbar style="height: 100%" ref="assetScrollbar">
+                  <div @click="selectAsset(item, index)" :data="item.id" v-for="item,index in assetList" class="endpoint-sub-table-row" :id="'select-asset-'+item.id">
+                    <div :id="index" @click.stop v-if="!currentModuleCopy.id" class="endpoint-sub-table-body-dialog"></div>
+                    <div class="endpoint-sub-table-col">{{item.host}}</div>
+                    <el-popover trigger="hover" placement="right-start" :content="item.sn" >
+                      <div slot="reference" class="endpoint-sub-table-col">{{item.sn}}</div>
+                    </el-popover>
+                  </div>
+                </el-scrollbar>
+              </div>
+            </div>
+            <!--end--table-->
+          </div>
+          <!--右侧endpoint列表-->
+          <div class="right-child-box endpoints-box" :class="{'endpoints-box-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}">
+            <!--module-->
+            <div class="endpoints-box-module-info">
+              <div class="title">{{$t('project.endpoint.moduleParameter')}}:</div>
+              <el-input class="module-info module-info-port input-x-mini-22" :class="{'module-info-port-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}" v-model="currentModuleCopy.port"></el-input>
+              <el-popover
+                placement="bottom"
+                width="200"
+                trigger="hover"
+                v-if="currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'http'"
+              >
+                <div class="endpoint-param-pop">
+                  <div v-for="item,index in currentModuleCopy.paramObj">{{item.key}}={{item.value}}</div>
+                </div>
+                <el-input id="edit-param" @click.native.stop="showEditParamBox(true, currentModuleCopy, 1, $event)" slot="reference" disabled class="module-info module-info-param input-x-mini-22" v-model="currentModuleCopy.param"></el-input>
+              </el-popover>
+              <el-input v-if="currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'http'" class="module-info module-info-path input-x-mini-22" v-model="currentModuleCopy.path"></el-input>
+              <button type="button" id="cover-param" @click="coverEndpoint" class="nz-btn nz-btn-size-small nz-btn-style-light module-info module-info-cover"><i class="nz-icon nz-icon-override"></i></button>
+            </div>
+            <!--endpoints-->
+            <div class="endpoints-box-endpoints" :style="{borderColor: endpointTouch ? paramBorderColor : '#dcdfe6'}">
+              <el-table
+                :data="endpointList"
+                ref="endpointTable"
+                style="width: 100%;border-radius: 4px;"
+                v-scrollBar:el-table
+                height="calc(100% - 36px)"
+                :row-class-name="setRowIndex"
+                empty-text=" ">
+                <el-table-column
+                  type="selection"
+                  width="25"
+                  style="padding: 0 1px;">
+                </el-table-column>
+                <el-table-column
+                  label-class-name="endpoints-box-endpoints-title"
+                  v-for="(title, index) in endpointTableTitle"
+                  v-if="title.show"
+                  :width="title.width"
+                  :key="`col-${index}`"
+                  :label="title.label"
                 >
-                  <div class="endpoint-param-pop">
+                  <template slot-scope="scope" :column="title">
-                    <div v-for="item,index in currentModuleCopy.paramObj">{{item.key}}={{item.value}}</div>
+                    <span v-if="title.prop == 'asset' && scope.row[title.prop]">{{scope.row[title.prop].host}}</span>
-                  </div>
+                    <span v-else-if="title.prop == 'param'">
-                  <el-input id="edit-param" @click.native.stop="showEditParamBox(true, currentModuleCopy, 1, $event)" slot="reference" disabled class="module-info module-info-param input-x-mini-22" v-model="currentModuleCopy.param"></el-input>
+                      <el-popover
-                </el-popover>
+                        v-if="!scope.row.isEdit"
-                <el-input v-if="currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'http'" class="module-info module-info-path input-x-mini-22" v-model="currentModuleCopy.path"></el-input>
+                        placement="bottom"
-                <button type="button" id="cover-param" @click="coverEndpoint" class="nz-btn nz-btn-size-small nz-btn-style-light module-info module-info-cover"><i class="nz-icon nz-icon-override"></i></button>
+                        width="200"
-              </div>
+                        trigger="hover"
-              <!--endpoints-->
+                      >
-              <div class="endpoints-box-endpoints" :style="{borderColor: endpointTouch ? paramBorderColor : '#dcdfe6'}">
+                        <div class="endpoint-param-pop">
-                <el-table
+                          <div v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}</div>
-                  :data="endpointList"
+                        </div>
-                  ref="endpointTable"
+                        <span slot="reference">
-                  style="width: 100%;border-radius: 4px;"
+                          <span @mousedown.stop>{{scope.row.param.length > 8 ? scope.row.param.substring(0, 8) + '...' : scope.row.param}}</span>
-                  v-scrollBar:el-table
-                  height="calc(100% - 36px)"
-                  :row-class-name="setRowIndex"
-                  empty-text=" ">
-                  <el-table-column
-                    type="selection"
-                    width="25"
-                    style="padding: 0 1px;">
-                  </el-table-column>
-                  <el-table-column
-                    label-class-name="endpoints-box-endpoints-title"
-                    v-for="(title, index) in endpointTableTitle"
-                    v-if="title.show"
-                    :width="title.width"
-                    :key="`col-${index}`"
-                    :label="title.label"
-                  >
-                    <template slot-scope="scope" :column="title">
-                      <span v-if="title.prop == 'asset' && scope.row[title.prop]">{{scope.row[title.prop].host}}</span>
-                      <span v-else-if="title.prop == 'param'">
-                        <el-popover
-                          v-if="!scope.row.isEdit"
-                          placement="bottom"
-                          width="200"
-                          trigger="hover"
-                        >
-                          <div class="endpoint-param-pop">
-                            <div v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}</div>
-                          </div>
-                          <span slot="reference">
-                            <span @mousedown.stop>{{scope.row.param.length > 8 ? scope.row.param.substring(0, 8) + '...' : scope.row.param}}</span>
-                          </span>
-                        </el-popover>
-                        <span @mousedown.stop v-else @click.stop="showEditParamBox(true, scope.row, 2, $event)">
-                          <el-form-item :prop="'endpointList[' + scope.row.index + '].param'" :rules="{required: false, message: $t('validate.required'), trigger: 'blur'}">
-                            <el-input readonly class="endpoint-info endpoint-info-param input-x-mini-22" v-model="scope.row.param"></el-input>
-                          </el-form-item>
                         </span>
+                      </el-popover>
+                      <span @mousedown.stop v-else @click.stop="showEditParamBox(true, scope.row, 2, $event)">
+                        <el-form-item :prop="'endpointList[' + scope.row.index + '].param'" :rules="{required: false, message: $t('validate.required'), trigger: 'blur'}">
+                          <el-input readonly class="endpoint-info endpoint-info-param input-x-mini-22" v-model="scope.row.param"></el-input>
+                        </el-form-item>
                       </span>
-                      <span v-else-if="title.prop == 'path'">
+                    </span>
-                        <el-popover
+                    <span v-else-if="title.prop == 'path'">
-                          placement="bottom"
+                      <el-popover
-                          width="100"
+                        placement="bottom"
-                          trigger="hover"
+                        width="100"
-                          :content="scope.row[title.prop]"
+                        trigger="hover"
-                          v-if="!scope.row.isEdit"
+                        :content="scope.row[title.prop]"
-                        >
+                        v-if="!scope.row.isEdit"
-                          <span slot="reference" >
+                      >
-                            <span>{{scope.row.path.length > 5 ? scope.row.path.substring(0, 5) + '...' : scope.row.path}}</span>
+                        <span slot="reference" >
-                          </span>
+                          <span>{{scope.row.path.length > 5 ? scope.row.path.substring(0, 5) + '...' : scope.row.path}}</span>
-                        </el-popover>
-                        <span @mousedown.stop v-else>
-                          <el-form-item :prop="'endpointList[' + scope.row.index + '].path'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
-                            <el-input class="endpoint-info input-x-mini-22" v-model="scope.row.path"></el-input>
-                          </el-form-item>
                         </span>
+                      </el-popover>
+                      <span @mousedown.stop v-else>
+                        <el-form-item :prop="'endpointList[' + scope.row.index + '].path'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
+                          <el-input class="endpoint-info input-x-mini-22" v-model="scope.row.path"></el-input>
+                        </el-form-item>
                       </span>
-                      <span v-else-if="title.prop == 'port'">
+                    </span>
-                        <span v-if="!scope.row.isEdit">{{scope.row.port}}</span>
+                    <span v-else-if="title.prop == 'port'">
-                        <span @mousedown.stop v-else>
+                      <span v-if="!scope.row.isEdit">{{scope.row.port}}</span>
-                          <el-form-item :prop="'endpointList[' + scope.row.index + '].port'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
+                      <span @mousedown.stop v-else>
-                            <el-input class="endpoint-info input-x-mini-22" v-model="scope.row.port"></el-input>
+                        <el-form-item :prop="'endpointList[' + scope.row.index + '].port'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
-                          </el-form-item>
+                          <el-input class="endpoint-info input-x-mini-22" v-model="scope.row.port"></el-input>
-                        </span>
+                        </el-form-item>
                       </span>
-                      <span v-else-if="title.prop == 'host'">
+                    </span>
-                        <span v-if="!scope.row.isEdit">{{scope.row.host}}</span>
+                    <span v-else-if="title.prop == 'host'">
-                        <span @mousedown.stop v-else>
+                      <span v-if="!scope.row.isEdit">{{scope.row.host}}</span>
-                          <el-form-item :prop="'endpointList[' + scope.row.index + '].host'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
+                      <span @mousedown.stop v-else>
-                            <el-input class="endpoint-info input-x-mini-22" v-model="scope.row.host"></el-input>
+                        <el-form-item :prop="'endpointList[' + scope.row.index + '].host'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
-                          </el-form-item>
+                          <el-input class="endpoint-info input-x-mini-22" v-model="scope.row.host"></el-input>
-                        </span>
+                        </el-form-item>
                       </span>
-                    </template>
+                    </span>
-                  </el-table-column>
+                  </template>
-                  <el-table-column label="" width="56">
+                </el-table-column>
-                    <template slot-scope="scope" :column="title">
+                <el-table-column label="" width="56">
-                      <div>
+                  <template slot-scope="scope" :column="title">
-                        <span :id="'ep-asset-toedit-'+scope.row.assetId" v-if="!scope.row.isEdit" class="endpoint-box-row-symbol" @mousedown.stop @click="toEditEndpoint(scope.row)"><i class="el-icon-edit-outline"></i></span>
+                    <div>
-                        <span :id="'ep-asset-edit-'+scope.row.assetId" v-else class="endpoint-box-row-symbol" @mousedown.stop @click="editEndpoint(scope.row)"><i class="el-icon-check"></i></span>
+                      <span :id="'ep-asset-toedit-'+scope.row.assetId" v-if="!scope.row.isEdit" class="endpoint-box-row-symbol" @mousedown.stop @click="toEditEndpoint(scope.row)"><i class="el-icon-edit-outline"></i></span>
-                        <span :id="'ep-asset-remove-'+scope.row.assetId" class="endpoint-box-row-symbol" @click="removeEndpoint(scope.row)"><i class="nz-icon nz-icon-minus-square"></i></span>
+                      <span :id="'ep-asset-edit-'+scope.row.assetId" v-else class="endpoint-box-row-symbol" @mousedown.stop @click="editEndpoint(scope.row)"><i class="el-icon-check"></i></span>
-                      </div>
+                      <span :id="'ep-asset-remove-'+scope.row.assetId" class="endpoint-box-row-symbol" @click="removeEndpoint(scope.row)"><i class="nz-icon nz-icon-minus-square"></i></span>
-                    </template>
+                    </div>
-                  </el-table-column>
+                  </template>
-                </el-table>
+                </el-table-column>
-                <div class="el-form-item__error" :style="{opacity: endpointTouch && this.endpointList.length == 0 ? '1' : '0'}" style="left: unset; transition: all .2s">{{$t('validate.required')}}</div>
+              </el-table>
-                <div>
+              <div class="el-form-item__error" :style="{opacity: endpointTouch && this.endpointList.length == 0 ? '1' : '0'}" style="left: unset; transition: all .2s">{{$t('validate.required')}}</div>
-                  <button id="clear-select-asset" type="button" @click="clearSelection" class="nz-btn nz-btn-size-normal nz-btn-style-light endpoints-clear-btn">{{$t('overall.clear')}}</button>
+              <div>
-                  <span style="display: inline-block; font-size: 14px; float: right;line-height: 35px;padding-right: 15px;">All: {{this.endpointList.length}}</span>
+                <button id="clear-select-asset" type="button" @click="clearSelection" class="nz-btn nz-btn-size-normal nz-btn-style-light endpoints-clear-btn">{{$t('overall.clear')}}</button>
-                </div>
+                <span style="display: inline-block; font-size: 14px; float: right;line-height: 35px;padding-right: 15px;">All: {{this.endpointList.length}}</span>
               </div>
             </div>
           </div>
-        </el-form>
-
-      </el-scrollbar>
-
-      <!--底部按钮-->
-      <div class="right-box-bottom-btns">
-        <button @click="esc" id="ep-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
-          <span>{{$t('overall.cancel')}}</span>
-        </button>
-        <button @click="save" id="ep-add" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
-          <span>{{$t('overall.save')}}</span>
-        </button>
-      </div>
-
-      <!--start--param编辑框-->
-      <transition name="right-sub-box">
-        <div @mousedown.stop class="right-sub-box" v-if="editParamBox.show" :style="'top: ' + editParamBox.top + 'px; left: ' + editParamBox.left + 'px;'">
-          <div class="param-box">
-            <div class="param-box-row" v-for="(item, index) in tempParamObj">
-              <el-input placeholder="key" class="param-box-row-key input-x-mini-22" v-model="item.key"></el-input>
-              <span class="param-box-row-eq">=</span>
-              <el-input placeholder="value" class="param-box-row-value input-x-mini-22" v-model="item.value"></el-input>
-              <span class="param-box-row-symbol" :id="'remove-param-'+index" @click="removeParam(index)"><i class="nz-icon nz-icon-minus-square"></i></span>
-            </div>
-          </div>
-          <div style="width: 100%; text-align: center; height: 25px;">
-            <el-button @click="addParam" id="add-param" style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="el-icon-plus"></i></el-button>
-          </div>
         </div>
-      </transition>
+      </el-form>
-      <!--end--param编辑框-->
+
+    </el-scrollbar>
+
+    <!--底部按钮-->
+    <div class="right-box-bottom-btns">
+      <button @click="esc" id="ep-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button @click="save" id="ep-add" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
+        <span>{{$t('overall.save')}}</span>
+      </button>
     </div>
-  </transition>
+
+    <!--start--param编辑框-->
+    <transition name="right-sub-box">
+      <div @mousedown.stop class="right-sub-box" v-if="editParamBox.show" :style="'top: ' + editParamBox.top + 'px; left: ' + editParamBox.left + 'px;'">
+        <div class="param-box">
+          <div class="param-box-row" v-for="(item, index) in tempParamObj">
+            <el-input placeholder="key" class="param-box-row-key input-x-mini-22" v-model="item.key"></el-input>
+            <span class="param-box-row-eq">=</span>
+            <el-input placeholder="value" class="param-box-row-value input-x-mini-22" v-model="item.value"></el-input>
+            <span class="param-box-row-symbol" :id="'remove-param-'+index" @click="removeParam(index)"><i class="nz-icon nz-icon-minus-square"></i></span>
+          </div>
+        </div>
+        <div style="width: 100%; text-align: center; height: 25px;">
+          <el-button @click="addParam" id="add-param" style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="el-icon-plus"></i></el-button>
+        </div>
+      </div>
+    </transition>
+    <!--end--param编辑框-->
+  </div>
 </template>
 
 <script>
@@ -245,7 +242,7 @@
         },
         paramBorderColor: '#dcdfe6',
         endpointTouch: false,
-        endpointForm: {projectId: '', moduleId: '', endpointList: []},
+        endpoint: {projectId: '', moduleId: '', endpointList: []},
         currentModuleCopy: {},
         currentProjectCopy: {id: ''},
         tempParamObj: [],
@@ -292,12 +289,6 @@
       }
     },
     methods: {
-      show(show) {
-        this.rightBox.show = show;
-        this.currentModuleCopy = JSON.parse(JSON.stringify(this.currentModule)); //打开弹框时将currentModule还原
-        this.endpointForm = {projectId: '', moduleId: '', endpointList:[]}
-      },
-
       //子弹框控制  obj: module或endpoint对象  type:1module2endpoint
       showEditParamBox(show, obj, type, e) {
         if (show) {
@@ -341,15 +332,13 @@
         this.editParamBox.show = show;
       },
 
-      clickos() {
+      clickOutside() {
-        this.esc();
+        this.esc(false);
       },
 
       /*关闭弹框*/
-      esc() {
+      esc(refresh) {
-        this.rightBox.show = false;
+        this.$emit("close", refresh);
-        this.editParamBox.show = false;
-        this.endpointTouch = false;
       },
 
       // 新增param
@@ -375,7 +364,7 @@
         this.tempEndpoint2 = JSON.parse(JSON.stringify(endpoint));
       },
       editEndpoint(endpoint) {
-        this.$refs.addEndpointForm.validate((valid) => {
+        this.$refs.addEndpoint.validate((valid) => {
           if (valid) {
             endpoint.isEdit = false;
             this.tempEndpoint2 = {};
@@ -444,8 +433,8 @@
 
       changeProject(project) {
         this.currentModuleCopy = {};
-        this.endpointForm.moduleId = '';
+        this.endpoint.moduleId = '';
-        this.endpointForm.projectId = project.id;
+        this.endpoint.projectId = project.id;
         this.editParamBox.show = false;
         this.tempParamObj = [];
         this.endpointList = [];
@@ -454,7 +443,7 @@
       },
 
       changeModule(module) {
-        this.endpointForm.moduleId = module.id;
+        this.endpoint.moduleId = module.id;
         this.editParamBox.show = false;
         this.tempParamObj = [];
       },
@@ -484,8 +473,8 @@
         });
         this.assetList.splice(index, 1);
         this.endpointTouch = true;
-        this.endpointForm.projectId = this.currentProjectCopy.id;
+        this.endpoint.projectId = this.currentProjectCopy.id;
-        this.endpointForm.moduleId = this.currentModuleCopy.id;
+        this.endpoint.moduleId = this.currentModuleCopy.id;
         this.$refs.assetScrollbar.update();
       },
 
@@ -525,11 +514,11 @@
 
       //保存endpoint
       save() {
-        this.endpointForm.projectId = this.currentProjectCopy.id;
+        this.endpoint.projectId = this.currentProjectCopy.id;
-        this.endpointForm.moduleId = this.currentModuleCopy.id;
+        this.endpoint.moduleId = this.currentModuleCopy.id;
         if (this.endpointList.length == 0) {
           this.endpointTouch = true;
-          this.$refs.addEndpointForm.validate();
+          this.$refs.addEndpoint.validate();
           return false;
         }
         //对endpointList进行处理，避免携带过多无用数据
@@ -538,13 +527,12 @@
           let endpoint = {moduleId: item.moduleId, assetId: item.assetId, port: item.port, param: item.param, path: item.path, host: item.host};
           endpointList.push(endpoint);
         });
-        this.$refs.addEndpointForm.validate((valid) => {
+        this.$refs.addEndpoint.validate((valid) => {
           if (valid) {
             this.$post('endpoint', endpointList).then(response => {
               if (response.code === 200) {
                 this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                this.esc();
+                this.esc(true);
-                this.$emit("reload");
               } else {
                 this.$message.error(response.msg);
               }
@@ -578,8 +566,7 @@
           this.$delete("endpoint?ids=" + this.endpoint.id).then(response => {
             if (response.code === 200) {
               this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.$emit('reload');
+              this.esc(true);
-              this.rightBox.show = false;
             } else {
               this.$message.error(response.msg);
             }
@@ -602,21 +589,13 @@
         row.index = rowIndex;
       }
     },
-    computed: {
-      projectListReloadWatch() {
-        return this.$store.state.projectListChange;
-      },
-      moduleListReloadWatch() {
-        return this.$store.state.moduleListChange;
-      },
-    },
     created() {
       this.getProjectList();
       this.getAssetList();
     },
     watch: {
       endpointList(n, o) {
-        this.endpointForm.endpointList = n;
+        this.endpoint.endpointList = n;
         if (n.length > 0) {
           this.paramBorderColor = '#dcdfe6';
         } else {
@@ -624,16 +603,19 @@
         }
 
       },
-      currentProject(n, o) {
+      currentProject: {
-        this.currentProjectCopy=Object.assign({},n);
+        immediate: true,
-        this.endpointForm.projectId = n.id;
+        handler(n, o) {
-        this.getModuleList(n.id);
+          this.currentProjectCopy = Object.assign({}, n);
+          this.endpoint.projectId = n.id;
+          this.getModuleList(n.id);
+        }
       },
       currentModule: {
         immediate: true,
         handler(n, o) {
           if(n) {
-            this.endpointForm.moduleId = n.id;
+            this.endpoint.moduleId = n.id;
             this.currentModuleCopy = JSON.parse(JSON.stringify(n));
 
           }
@@ -651,12 +633,6 @@
           }
         }
       },
-      projectListReloadWatch(n, o) {
-        this.getProjectList();
-      },
-      moduleListReloadWatch(n, o) {
-        this.getModuleList(this.currentProjectCopy.id);
-      }
     }
   }
 </script>

nezha-fronted/src/components/common/rightBox/editEndpointBox.vue

@@ -1,206 +1,119 @@
 <template>
-  <transition name="right-box">
+  <div class="right-box right-box-edit-endpoint" v-clickoutside="clickOutside">
-    <div class="right-box right-box-edit-endpoint" v-if="rightBox.show" v-clickoutside="clickos">
+    <!-- begin--顶部按钮-->
-      <!-- begin--顶部按钮-->
+    <div class="right-box-top-btns">
-      <div class="right-box-top-btns">
+      <button id="edit-ep-del" type="button" v-if="editEndpoint.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">
-        <button id="edit-ep-del" type="button" v-if="rightBox.isEdit && endpoint.id != ''" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
+        <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
-          <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
+        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
-          <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
+      </button>
-        </button>
-        <button id="edit-ep-edit" v-if="!rightBox.isEdit" type="button" @click="toEdit(true)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
-          <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-edit"></i></span>
-          <span class="right-box-top-btn-txt">{{$t('overall.edit')}}</span>
-        </button>
-      </div>
-      <!-- end--顶部按钮-->
-
-      <!-- begin--标题-->
-      <div class="right-box-title">{{rightBox.title}}</div>
-      <!-- end--标题-->
-
-      <!-- begin--表单-->
-      <el-scrollbar class="right-box-form-box">
-        <el-form class="right-box-form  right-box-form-left" :model="endpoint" label-position="right" label-width="120px" :rules="rules" ref="endPointForm">
-          <!--project-->
-          <el-form-item :label="$t('project.project.project')" prop="project.id">
-            <el-select @change="((val) => {changeProject(val);})" value-key="id" popper-class="config-dropdown" v-model="endpoint.projectId" placeholder="" v-if="rightBox.isEdit" size="small">
-              <el-option :id="'edit-project-'+item.id" v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
-            </el-select>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.project.name}}</div>
-          </el-form-item>
-          <!--module-->
-          <el-form-item :label="$t('project.module.module')" prop="module.id">
-            <el-select @change="((val) => {changeModule(val);})" value-key="id" popper-class="config-dropdown" v-model="endpoint.moduleId" placeholder="" v-if="rightBox.isEdit" size="small">
-              <el-option :id="'edit-module-'+item.id" v-for="item in moduleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
-            </el-select>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.module.name}}</div>
-          </el-form-item>
-          <!--asset-->
-          <el-form-item :label="$t('asset.asset')" prop="assetId">
-            <el-autocomplete
-              :fetch-suggestions="assetSuggestion"
-              v-model.trim="endpoint.asset.host"
-              placeholder=""
-              @select="selectAsset"
-              @change.native="inputAsset"
-              size="small"
-              value-key="host"
-              popper-class="no-style-class"
-              style="width: 100%;"
-            >
-            </el-autocomplete>
-              <!--<el-input class="right-box-row-with-btn" readonly v-if="rightBox.isEdit && endpoint.asset" placeholder="" :value="endpoint.asset.host" size="small"></el-input>
-              <el-input class="right-box-row-with-btn" readonly v-if="rightBox.isEdit && !endpoint.asset" placeholder="" value="" size="small"></el-input>
-              <el-popover placement="left" width="400" v-model="subBox.show" popper-class="nz-pop">
-                <div class="pop-window-assetType-content">
-                  &lt;!&ndash; begin&#45;&#45;顶部按钮&ndash;&gt;
-                  <div class="pop-top-btns">
-                    <button type="button" @click="subEsc" class="nz-btn nz-btn-size-alien nz-btn-size-small nz-btn-style-light nz-btn-min-width-35" id="edit-ep-subesc">
-                      <span class="pop-top-btn-icon"><i class="el-icon-close"></i></span>
-                      <span class="pop-top-btn-txt">{{$t('overall.esc')}}</span>
-                    </button>
-                  </div>
-                  &lt;!&ndash; end&#45;&#45;顶部按钮&ndash;&gt;
-                  &lt;!&ndash;begin&#45;&#45;标题&ndash;&gt;
-                  <div class="pop-title">{{subBox.title}}</div>
-                  &lt;!&ndash;end&#45;&#45;标题&ndash;&gt;
-                  &lt;!&ndash;&ndash;&gt;
-                  <div class="pop-item-wider " >
-                    &lt;!&ndash; begin&#45;&#45;搜索框&ndash;&gt;
-                    <div class="nz-btn-group nz-btn-group-size-small nz-btn-group-light endpoint-asset-search">
-                      <button type="button" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-prepend" @click="assetSearch.dropdownShow = !assetSearch.dropdownShow">
-                        <span class="endpoint-asset-label-txt">{{assetSearch.label}}</span>
-                        <span>
-                          <i v-if="assetSearch.dropdownShow" class="el-icon-caret-top"></i>
-                          <i v-if="!assetSearch.dropdownShow" class="el-icon-caret-bottom"></i>
-                        </span>
-                      </button><div class="endpoint-asset-search-input">
-                        <el-input class="input-x-mini-22 nz-input-group-middle" placeholder="" v-model="assetSearch.text"></el-input>
-                      </div><button type="button" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-append" >
-                        <i @click="searchAsset" class="el-icon-search" id="edit-ep-search-asset"></i>
-                      </button>
-
-                      <div class="endpoint-asset-search-dropdown" v-if="assetSearch.dropdownShow">
-                        <div @click="dropdownSelect('IP')" class="endpoint-asset-search-dropdown-item" id="edit-ep-search-ip">IP</div>
-                        <div @click="dropdownSelect('SN')" class="endpoint-asset-search-dropdown-item" id="edit-ep-search-sn">SN</div>
-                      </div>
-                    </div>
-                    &lt;!&ndash; end&#45;&#45;搜索框&ndash;&gt;
-                    &lt;!&ndash; begin&#45;&#45;table&ndash;&gt;
-                    <div class="endpoint-sub-table">
-                      <div class="endpoint-sub-table-head">
-                        <div class="endpoint-sub-table-col">IP</div>
-                        <div class="endpoint-sub-table-col">SN</div>
-                      </div>
-                      <div class="line-100"></div>
-                      <div class="endpoint-sub-table-body">
-                        <div v-if="selectedAsset.id != ''" :data="selectedAsset.id" class="endpoint-sub-table-row endpoint-sub-table-row-selected">
-                          <div class="endpoint-sub-table-col">{{selectedAsset.host}}</div>
-                          <div class="endpoint-sub-table-col">{{selectedAsset.sn}}</div>
-                        </div>
-                        <div v-else class="endpoint-sub-table-row"></div>
-                        <div id="edit-select-asset" @click="selectAsset(item)" :data="item.id" v-for="item in assetList" class="endpoint-sub-table-row" :class="{'endpoint-sub-table-row-active': item.id == selectedAsset.id}">
-                          <div class="endpoint-sub-table-col">{{item.host}}</div>
-                          <div class="endpoint-sub-table-col">{{item.sn}}</div>
-                        </div>
-                      </div>
-                      <div class="endpoint-sub-table-paginate">
-                        <div class="endpoint-sub-table-paginate-all">All:&nbsp;{{assetPageObj.total}}</div>
-                        <el-pagination background :pager-count="5" layout="prev, pager, next" @current-change="(currentPage) => {getAssetList(currentPage)}" :total="assetPageObj.total"></el-pagination>
-                      </div>
-                    </div>
-                    &lt;!&ndash; end&#45;&#45;table&ndash;&gt;
-                  </div>
-                </div>
-                <div slot="reference" @click.prevent="" class="right-box-row-btn" v-if="rightBox.isEdit">
-                  <span class="el-icon-more"></span>
-                </div>
-              </el-popover>
-              <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.host}}</div>-->
-          </el-form-item>
-          <!--host-->
-          <el-form-item :label="$t('project.endpoint.host')" prop="host">
-            <el-input v-if="rightBox.isEdit" placeholder="" v-model="endpoint.host" size="small"></el-input>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.host}}</div>
-          </el-form-item>
-          <!--port-->
-          <el-form-item :label="$t('project.endpoint.port')" prop="port">
-            <el-input v-if="rightBox.isEdit" placeholder="" v-model="endpoint.port" size="small"></el-input>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.port}}</div>
-          </el-form-item>
-          <!--path-->
-          <el-form-item :label="$t('project.endpoint.path')" prop="path" v-if="currentModule.type.toLowerCase() == 'http'">
-            <el-input v-if="rightBox.isEdit" placeholder="" v-model="endpoint.path" size="small"></el-input>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.path}}</div>
-          </el-form-item>
-          <!--param-->
-          <el-form-item class="right-box-form-param" v-if="currentModule.type.toLowerCase() == 'http'">
-            <template slot="label">
-              <span>{{$t('project.endpoint.param')}}</span>
-            </template>
-              <div  v-if="rightBox.isEdit" style="text-align: right">
-                <button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
-                <button type="button" id="edit-clear-all" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
-                  <span><i class="el-icon-delete"></i></span>
-                </button>
-                <button type="button" id="edit-add-param" @click="addParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
-                  <span><i style="font-size: 12px;" class="nz-icon nz-icon-create-square"></i></span>
-                </button>
-              </div>
-            <div v-if="rightBox.isEdit" class="param-box param-box-module">
-              <el-scrollbar ref="paramBoxScrollbar" style="height: 100%">
-                <div class="param-box-row" v-for="(item, index) in endpoint.paramObj">
-                  <el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.key'">
-                    <el-input placeholder="key" size="mini" v-model="item.key"></el-input>
-                  </el-form-item>
-                  <span class="param-box-row-eq">=</span>
-                  <el-form-item class="param-box-row-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.value'">
-                    <el-input placeholder="value" size="mini" v-model="item.value"></el-input>
-                  </el-form-item>
-                  <span class="param-box-row-symbol" @click="removeParam(index)"><i class="nz-icon nz-icon-minus-square"></i></span>
-                </div>
-              </el-scrollbar>
-            </div>
-            <div v-else v-for="(item, index) in endpoint.paramObj" v-if="!rightBox.isEdit">
-              <div  class="right-box-form-content-txt">{{item.key}}={{item.value}}</div>
-            </div>
-
-          </el-form-item>
-        </el-form>
-      </el-scrollbar>
-
-      <!-- end--表单-->
-
-      <!--底部按钮-->
-      <div class="right-box-bottom-btns">
-        <button @click="esc" id="ep-edit-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
-          <span>{{$t('overall.cancel')}}</span>
-        </button>
-        <button v-if="rightBox.isEdit" @click="save" id="ep-edit-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
-          <span>{{$t('overall.save')}}</span>
-        </button>
-      </div>
-
     </div>
-  </transition>
+    <!-- end--顶部按钮-->
+
+    <!-- begin--标题-->
+    <div class="right-box-title">{{$t("project.endpoint.editEndpoint") + "  ID：" + editEndpoint.id}}</div>
+    <!-- end--标题-->
+
+    <!-- begin--表单-->
+    <el-scrollbar class="right-box-form-box">
+      <el-form class="right-box-form  right-box-form-left" :model="editEndpoint" label-position="right" label-width="120px" :rules="rules" ref="endpointForm">
+        <!--project-->
+        <el-form-item :label="$t('project.project.project')" prop="project.id">
+          <el-select @change="((val) => {changeProject(val);})" value-key="id" popper-class="config-dropdown" v-model="editEndpoint.projectId" placeholder="" size="small">
+            <el-option :id="'edit-project-'+item.id" v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <!--module-->
+        <el-form-item :label="$t('project.module.module')" prop="module.id">
+          <el-select @change="((val) => {changeModule(val);})" value-key="id" popper-class="config-dropdown" v-model="editEndpoint.moduleId" placeholder="" size="small">
+            <el-option :id="'edit-module-'+item.id" v-for="item in moduleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <!--asset-->
+        <el-form-item :label="$t('asset.asset')" prop="assetId">
+          <el-autocomplete
+            :fetch-suggestions="assetSuggestion"
+            v-model.trim="editEndpoint.asset.host"
+            placeholder=""
+            @select="selectAsset"
+            @change.native="inputAsset"
+            size="small"
+            value-key="host"
+            popper-class="no-style-class"
+            style="width: 100%;"
+          >
+          </el-autocomplete>
+        </el-form-item>
+        <!--host-->
+        <el-form-item :label="$t('project.endpoint.host')" prop="host">
+          <el-input placeholder="" v-model="editEndpoint.host" size="small"></el-input>
+        </el-form-item>
+        <!--port-->
+        <el-form-item :label="$t('project.endpoint.port')" prop="port">
+          <el-input placeholder="" v-model="editEndpoint.port" size="small"></el-input>
+        </el-form-item>
+        <!--path-->
+        <el-form-item :label="$t('project.endpoint.path')" prop="path" v-if="editEndpoint.module.type.toLowerCase() == 'http'">
+          <el-input placeholder="" v-model="editEndpoint.path" size="small"></el-input>
+        </el-form-item>
+        <!--param-->
+        <el-form-item class="right-box-form-param" v-if="editEndpoint.module.type.toLowerCase() == 'http'">
+          <template slot="label">
+            <span>{{$t('project.endpoint.param')}}</span>
+          </template>
+          <div style="text-align: right">
+            <button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
+            <button type="button" id="edit-clear-all" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
+              <span><i class="el-icon-delete"></i></span>
+            </button>
+            <button type="button" id="edit-add-param" @click="addParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
+              <span><i style="font-size: 12px;" class="nz-icon nz-icon-create-square"></i></span>
+            </button>
+          </div>
+          <div class="param-box param-box-module">
+            <el-scrollbar ref="paramBoxScrollbar" style="height: 100%">
+              <div class="param-box-row" v-for="(item, index) in editEndpoint.paramObj">
+                <el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.key'">
+                  <el-input placeholder="key" size="mini" v-model="item.key"></el-input>
+                </el-form-item>
+                <span class="param-box-row-eq">=</span>
+                <el-form-item class="param-box-row-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.value'">
+                  <el-input placeholder="value" size="mini" v-model="item.value"></el-input>
+                </el-form-item>
+                <span class="param-box-row-symbol" @click="removeParam(index)"><i class="nz-icon nz-icon-minus-square"></i></span>
+              </div>
+            </el-scrollbar>
+          </div>
+        </el-form-item>
+      </el-form>
+    </el-scrollbar>
+
+    <!-- end--表单-->
+
+    <!--底部按钮-->
+    <div class="right-box-bottom-btns">
+      <button @click="esc" id="ep-edit-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button @click="save" id="ep-edit-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
 </template>
 
 <script>
   export default {
     name: "endpointBox",
     props: {
-      postEndpoint: Object,
+      endpoint: Object,
     },
     data() {
       return {
-        endpoint:null,
+        editEndpoint: {},
-        rightBox: {show: false, title: '',isEdit: false},
         subBox: {show: false, title: this.$t("overall.asset")}, //asset子弹框
         assetSearch: {host: '', sn: '', text: '', label: 'IP', dropdownShow: false}, //侧滑框中asset的搜索相关
         assetPageObj: {pageNo: 1, pageSize: 11, total: 0},
         selectedAsset: {id: '', host: '', sn: ''}, //endpoint侧滑框中选中的asset
-        currentProject: null,
-        currentModule: null,
         projectList: [],
         moduleList: [],
         assetList: [],
@@ -224,34 +137,14 @@
       }
     },
     methods: {
-      show(show) {
-        this.rightBox.show = show;
-      },
-
-      toEdit(show, id) {
-        this.rightBox.isEdit = show;
-        this.rightBox.show = true;
-        this.$nextTick(()=>{
-          if (show) {
-            this.rightBox.title = this.$t("project.endpoint.editEndpoint") + "  ID：" + id;
-            this.currentProject=this.projectList.find(item=>{return item.id == this.endpoint.projectId})
-            this.getModuleList(this.endpoint.projectId,true)
-          } else {
-            this.rightBox.title = this.$t("project.endpoint.endpoint") + "  ID：" + id;
-          }
-        });
-      },
-
       //endpoint弹框中asset子弹框控制
       showSubBox(show) {
         this.subBox.show = show;
       },
 
       /*关闭弹框*/
-      esc() {
+      esc(refresh) {
-        this.rightBox.show = false;
+        this.$emit("close", refresh);
-        this.subBox.show = false;
-        this.$emit("close");
       },
 
       /*关闭子弹框*/
@@ -259,8 +152,8 @@
         this.subBox.show = false;
       },
 
-      clickos() {
+      clickOutside() {
-        this.esc();
+        this.esc(false);
       },
 
       // 清除param
@@ -303,29 +196,33 @@
 
       /*获取project列表*/
       getProjectList() {
-        this.$get('project', {pageSize: -1, pageNo: 1}).then(response => {
+        return new Promise(resolve => {
-          if (response.code === 200) {
+          this.$get('project', {pageSize: -1, pageNo: 1}).then(response => {
-            this.projectList = response.data.list;
+            if (response.code === 200) {
-            if ((!this.currentProject || !this.currentProject.id) && this.projectList.length > 0) {
+              this.projectList = response.data.list;
-              this.currentProject = this.projectList[0];
+              if (!this.editEndpoint.projectId && this.projectList.length > 0) {
+                this.editEndpoint.projectId = this.projectList[0].id;
+              }
             }
-          }
+            resolve();
+          });
         });
       },
 
       //project下拉框点击事件
       changeProject(projectId) {
-        this.currentModule = {id: '', name: '', project: {},type:'', port: '', path: '', param: '', paramObj: []};
         this.getModuleList(projectId);
-        this.endpoint.moduleId='';
+        this.editEndpoint.projectId = projectId;
+        this.editEndpoint.moduleId = '';
       },
 
       //project下拉框点击事件
       changeModule(moduleId) {
-        this.currentModule = this.moduleList.find(item=>{return item.id ==  this.endpoint.moduleId});
+        let newModule = this.moduleList.find(item => {return item.id == this.endpoint.moduleId});
-        this.endpoint.port = this.currentModule.port;
+        this.editEndpoint.moduleId = moduleId;
-        this.endpoint.path = this.currentModule.path;
+        this.editEndpoint.port = newModule.port;
-        this.endpoint.paramObj = this.currentModule.paramObj;
+        this.editEndpoint.path = newModule.path;
+        this.editEndpoint.paramObj = newModule.paramObj;
       },
 
       // 获取endpoint弹框中的asset子弹框里asset列表数据
@@ -359,26 +256,26 @@
       // endpoint弹框中的asset子弹框里asset选择事件
       selectAsset(obj) {
         this.selectedAsset = obj;
-        this.endpoint.host = obj.host;
+        this.editEndpoint.host = obj.host;
-        this.endpoint.assetId = obj.id;
+        this.editEndpoint.assetId = obj.id;
-        this.$refs.endPointForm.validate();
+        this.$refs.endpointForm.validate();
       },
       inputAsset(e) {
-        this.endpoint.assetId = "";
+        this.editEndpoint.assetId = "";
         let host = e.target.value;
         if (host) {
           for (let i = 0; i < this.assetList.length; i++) {
             if (host == this.assetList[i].host) {
-              this.endpoint.assetId = this.assetList[i].id;
+              this.editEndpoint.assetId = this.assetList[i].id;
               this.selectedAsset = this.assetList[i];
-              this.endpoint.host = host;
+              this.editEndpoint.host = host;
               break;
             }
           }
         }
       },
       // 获取endpoint弹框中module下拉框数据
-      getModuleList(projectId,setCurModule=false) {
+      getModuleList(projectId, setCurModule = false) {
         this.$get('module', {projectId: projectId}).then(response => {
           if (response.code === 200) {
             for (let i = 0; i < response.data.list.length; i++) {
@@ -394,7 +291,7 @@
             }
             this.moduleList = response.data.list;
             if(setCurModule){
-              this.currentModule=this.moduleList.find(item=>{return item.id == this.endpoint.moduleId});
+              this.editEndpoint.moduleId = this.moduleList.find(item => {return item.id == this.editEndpoint.moduleId}).id;
             }
           }
         });
@@ -402,18 +299,15 @@
 
       //保存endpoint
       save() {
-        this.$refs.endPointForm.validate((valide=>{
+        this.$refs.endpointForm.validate((valide=>{
           if(valide){
-            this.endpoint.moduleId = this.currentModule.id;
+            this.editEndpoint.param = this.paramToJson(this.editEndpoint.paramObj);
-            this.endpoint.projectId = this.currentProject.id;
-            this.endpoint.param = this.paramToJson(this.endpoint.paramObj);
             let requestData = [];
-            requestData.push(this.endpoint);
+            requestData.push(this.editEndpoint);
             this.$put('endpoint', requestData).then(response => {
               if (response.code === 200) {
                 this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                this.esc();
+                this.esc(true);
-                this.$emit("reload");
               } else {
                 this.$message.error(response.msg);
               }
@@ -422,7 +316,6 @@
             return false;
           }
         }))
-
       },
 
       //删除endpoint
@@ -432,11 +325,10 @@
           cancelButtonText: this.$t("tip.no"),
           type: 'warning'
         }).then(() => {
-          this.$delete("endpoint?ids=" + this.endpoint.id).then(response => {
+          this.$delete("endpoint?ids=" + this.editEndpoint.id).then(response => {
             if (response.code === 200) {
               this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.$emit('reload');
+              this.esc(true);
-              this.rightBox.show = false;
             } else {
               this.$message.error(response.msg);
             }
@@ -463,33 +355,19 @@
         callback(data);
       },
     },
-    created() {
+    mounted() {
-      this.getProjectList();
+      this.getProjectList().then(response => {
+        this.getModuleList(this.editEndpoint.projectId);
+      });
       this.getAssetList();
     },
-    computed: {
-      projectListReloadWatch() {
-        return this.$store.state.projectListChange;
-      },
-      moduleListReloadWatch() {
-        return this.$store.state.moduleListChange;
-      },
-    },
-    mounted() {
-      // setTimeout(()=>{this.getModuleList(this.currentProject.id);}, 100);
-    },
     watch: {
-      projectListReloadWatch(n, o) {
+      endpoint:{
-        this.getProjectList();
+        immediate: true,
-      },
+        deep: true,
-      moduleListReloadWatch(n, o) {
+        handler(n, o) {
-        this.getModuleList(this.currentProject.id);
+          console.info(n)
-      },
+          this.editEndpoint = JSON.parse(JSON.stringify(n));
-      postEndpoint:{
-        immediate:true,
-        deep:true,
-        handler(n,o){
-          this.endpoint=Object.assign({},n)
         },
       },
     }

nezha-fronted/src/components/common/rightBox/moduleBox.vue

@@ -1,308 +1,293 @@
 <template>
-  <transition name="right-box">
+  <div class="right-box right-box-module" v-clickoutside="clickOutside">
-    <div class="right-box right-box-module" v-if="rightBox.show" v-clickoutside="clickos">
+    <!-- begin--顶部按钮-->
-      <!-- begin--顶部按钮-->
+    <div class="right-box-top-btns">
-      <div class="right-box-top-btns">
+      <button id="module-del" type="button" v-if="editModule.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
-        <button id="module-del" type="button" v-if="currentModule.id != '' && rightBox.isEdit" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
+        <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
-          <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
+        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
-          <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
+      </button>
-        </button>
+    </div>
-        <button v-if="!rightBox.isEdit && currentModule.buildIn != 1" id="module-save" type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
+    <!-- end--顶部按钮-->
-          <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-edit"></i></span>
-          <span class="right-box-top-btn-txt">{{$t('overall.edit')}}</span>
-        </button>
-      </div>
-      <!-- end--顶部按钮-->
 
-      <!-- begin--标题-->
+    <!-- begin--标题-->
-      <div class="right-box-title">{{rightBox.title}}</div>
+    <div class="right-box-title">{{editModule.id ? $t("project.module.editModule") + "  ID：" + editModule.id : $t("project.module.createModule")}}</div>
-      <!-- end--标题-->
+    <!-- end--标题-->
 
-      <!-- begin--表单-->
+    <!-- begin--表单-->
-      <el-scrollbar class="right-box-form-box" ref="scrollbar">
+    <el-scrollbar class="right-box-form-box" ref="scrollbar">
-        <el-form class="right-box-form right-box-form-left" :model="currentModule" label-position="right" label-width="120px" :rules="rules" ref="moduleForm">
+      <el-form class="right-box-form right-box-form-left" :model="editModule" label-position="right" label-width="120px" :rules="rules" ref="moduleForm">
-          <el-form-item :label='$t("project.project.project")' prop="project">
+        <el-form-item :label='$t("project.project.project")' prop="project">
-            <el-select v-if="rightBox.isEdit" value-key="id" popper-class="config-dropdown" v-model="currentModule.project" placeholder="" size="small">
+          <el-select value-key="id" popper-class="config-dropdown" v-model="editModule.project" placeholder="" size="small">
-              <el-option :id="'module-project-'+item.id" v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>
+            <el-option :id="'module-project-'+item.id" v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>
-            </el-select>
+          </el-select>
-            <div v-if="!rightBox.isEdit && currentModule.project" class="right-box-form-content-txt">{{currentModule.project.name}}</div>
+        </el-form-item>
-          </el-form-item>
+        <el-form-item :label='$t("project.module.moduleName")' prop="name">
-          <el-form-item :label='$t("project.module.moduleName")' prop="name">
+          <el-input placeholder="" maxlength="64" show-word-limit v-model="editModule.name" size="small"></el-input>
-            <el-input v-if="rightBox.isEdit" placeholder="" maxlength="64" show-word-limit v-model="currentModule.name" size="small"></el-input>
+        </el-form-item>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentModule.name}}</div>
-          </el-form-item>
 
-          <div class="nz-tab module-box-type">
+        <div class="nz-tab module-box-type">
-            <div class="nz-tab-item-box" @click="changeType('http')" id="module-type-1">
+          <div class="nz-tab-item-box" @click="changeType('http')" id="module-type-1">
-              <div class="nz-tab-item" :class="{'nz-tab-item-active' : currentModule.type.toLowerCase() == 'http', 'unclickable': currentModule.id}">HTTP</div>
+            <div class="nz-tab-item" :class="{'nz-tab-item-active' : editModule.type.toLowerCase() == 'http', 'unclickable': editModule.id}">HTTP</div>
-            </div>
-            <div @click="changeType('snmp')" class="nz-tab-item-box" id="module-type-2">
-              <div class="nz-tab-item" :class="{'nz-tab-item-active' : currentModule.type.toLowerCase() == 'snmp', 'unclickable': currentModule.id}">SNMP</div>
-            </div>
           </div>
+          <div @click="changeType('snmp')" class="nz-tab-item-box" id="module-type-2">
+            <div class="nz-tab-item" :class="{'nz-tab-item-active' : editModule.type.toLowerCase() == 'snmp', 'unclickable': editModule.id}">SNMP</div>
+          </div>
+        </div>
 
-          <!-- snmp表单 -->
+        <!-- snmp表单 -->
-          <span class="snmp-form" v-if="currentModule.type && currentModule.type == 'snmp'">
+        <span class="snmp-form" v-if="editModule.type && editModule.type == 'snmp'">
-            <div class="right-box-sub-title">SNMP settings</div>
+          <div class="right-box-sub-title">SNMP settings</div>
-            <div class="line-100 right-box-line"></div>
+          <div class="line-100 right-box-line"></div>
 
+          <el-row>
+            <el-col :span="6">
+              <div class="sub-label sub-label-required">{{$t('project.module.walk')}}</div>
+            </el-col>
+            <el-col :span="18">
+              <el-form-item prop="walk">
+                <select-walk ref="selectWalk" :walkData="walkData" :expandedWalk="expandedWalkData" :placement="'bottom-start'" @selectWalk="selectWalk" :currentWalk="editModule.walk">
+                  <template v-slot:trigger>
+                    <div class="el-cascader">
+                      <div class="el-input">
+                        <input type="text" readonly="readonly" autocomplete="off" class="el-input__inner" aria-expanded="false">
+                      </div>
+                      <div class="el-cascader__tags">
+                        <el-scrollbar style="height: 100%;" ref="walkScrollbar">
+                          <span class="el-tag el-tag--info el-tag--small el-tag--light" v-for="item in editModule.walk">
+                            <span v-html="mibName(item)"></span>
+                            <div class="walk-close-box" @click.stop="removeWalk(item)">
+                              <i class="el-tag__close el-icon-close walk-close"></i>
+                            </div>
+                          </span>
+                        </el-scrollbar>
+                      </div>
+                    </div>
+                  </template>
+                </select-walk>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="6">
+              <div class="sub-label">{{$t('project.module.version')}}</div>
+            </el-col>
+            <el-col :span="18">
+              <el-form-item prop="version">
+                <el-radio-group v-model.number="editModule.version" size="small">
+                  <el-radio-button :label="2"></el-radio-button>
+                  <el-radio-button :label="3"></el-radio-button>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="6">
+              <div class="sub-label">{{$t('project.module.maxRepetitions')}}</div>
+            </el-col>
+            <el-col :span="18">
+              <el-form-item prop="max_repetitions">
+                <el-input v-model.number="editModule.max_repetitions" size="small"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="6">
+              <div class="sub-label">{{$t('project.module.retries')}}</div>
+            </el-col>
+            <el-col :span="18">
+              <el-form-item prop="retries">
+                <el-input v-model.number="editModule.retries" size="small"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="6">
+              <div class="sub-label">{{$t('project.module.timeout')}}</div>
+            </el-col>
+            <el-col :span="18">
+              <el-form-item prop="timeout">
+                <el-input v-model.number="editModule.timeout" size="small">
+                  <template slot="append">second</template>
+                </el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="1">&nbsp;</el-col>
+            <el-col :span="23">
+              <div class="right-box-sub-title">Auth</div>
+              <div class="line-100 right-box-line"></div>
+            </el-col>
+          </el-row>
+
+          <el-row>
+            <el-col :span="6">
+              <div class="sub-label sub-label-required">{{$t('project.module.community')}}</div>
+            </el-col>
+            <el-col :span="18">
+              <el-form-item prop="community">
+                <el-input v-model.trim="editModule.community" maxlength="64" show-word-limit size="small"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <!--SNMP V3 setting-->
+          <template v-if="editModule.version == 3">
             <el-row>
               <el-col :span="6">
-                <div class="sub-label sub-label-required">{{$t('project.module.walk')}}</div>
+                <div class="sub-label sub-label-required">{{$t('login.username')}}</div>
               </el-col>
               <el-col :span="18">
-                <el-form-item prop="walk">
+                <el-form-item prop="username">
-                  <select-walk ref="selectWalk" :walkData="walkData" :expandedWalk="expandedWalkData" :placement="'bottom-start'" @selectWalk="selectWalk" :currentWalk="currentModule.walk">
+                  <el-input v-model.trim="editModule.username" maxlength="64" show-word-limit size="small"></el-input>
-                    <template v-slot:trigger>
-                      <div class="el-cascader">
-                        <div class="el-input">
-                          <input type="text" readonly="readonly" autocomplete="off" class="el-input__inner" aria-expanded="false">
-                        </div>
-                        <div class="el-cascader__tags">
-                          <el-scrollbar style="height: 100%;" ref="walkScrollbar">
-                            <span class="el-tag el-tag--info el-tag--small el-tag--light" v-for="item in currentModule.walk">
-                              <span v-html="mibName(item)"></span>
-                              <div class="walk-close-box" @click.stop="removeWalk(item)">
-                                <i class="el-tag__close el-icon-close walk-close"></i>
-                              </div>
-                            </span>
-                          </el-scrollbar>
-                        </div>
-                      </div>
-                    </template>
-                  </select-walk>
                 </el-form-item>
               </el-col>
             </el-row>
 
             <el-row>
               <el-col :span="6">
-                <div class="sub-label">{{$t('project.module.version')}}</div>
+                <div class="sub-label">{{$t('project.module.securityLevel')}}</div>
               </el-col>
               <el-col :span="18">
-                <el-form-item prop="version">
+                <el-form-item prop="security_level">
-                  <el-radio-group v-model.number="currentModule.version" size="small">
+                  <el-radio-group v-model="editModule.security_level" size="small" @change="updateScrollbar">
-                    <el-radio-button :label="2"></el-radio-button>
+                    <el-radio-button label="noAuthNoPriv"></el-radio-button>
-                    <el-radio-button :label="3"></el-radio-button>
+                    <el-radio-button label="authNoPriv"></el-radio-button>
+                    <el-radio-button label="authPriv"></el-radio-button>
                   </el-radio-group>
                 </el-form-item>
               </el-col>
             </el-row>
 
-            <el-row>
+            <el-row v-if="editModule.security_level == 'authNoPriv' || editModule.security_level == 'authPriv'">
               <el-col :span="6">
-                <div class="sub-label">{{$t('project.module.maxRepetitions')}}</div>
+                <div class="sub-label sub-label-required">{{$t('login.password')}}</div>
               </el-col>
               <el-col :span="18">
-                <el-form-item prop="max_repetitions">
+                <el-form-item prop="password">
-                  <el-input v-model.number="currentModule.max_repetitions" size="small"></el-input>
+                  <el-input v-model.trim="editModule.password" maxlength="64" show-word-limit size="small"></el-input>
                 </el-form-item>
               </el-col>
             </el-row>
 
-            <el-row>
+            <el-row class="same-label-width" v-if="editModule.security_level == 'authNoPriv' || editModule.security_level == 'authPriv'">
               <el-col :span="6">
-                <div class="sub-label">{{$t('project.module.retries')}}</div>
+                <div class="sub-label">{{$t('project.module.authProtocol')}}</div>
               </el-col>
               <el-col :span="18">
-                <el-form-item prop="retries">
+                <el-form-item prop="auth_protocol">
-                  <el-input v-model.number="currentModule.retries" size="small"></el-input>
+                  <el-radio-group v-model="editModule.auth_protocol" size="small">
+                    <el-radio-button label="MD5"></el-radio-button>
+                    <el-radio-button label="SHA"></el-radio-button>
+                  </el-radio-group>
                 </el-form-item>
               </el-col>
             </el-row>
 
-            <el-row>
+            <el-row class="same-label-width" v-if="editModule.security_level == 'authPriv'">
               <el-col :span="6">
-                <div class="sub-label">{{$t('project.module.timeout')}}</div>
+                <div class="sub-label">{{$t('project.module.privProtocol')}}</div>
               </el-col>
               <el-col :span="18">
-                <el-form-item prop="timeout">
+                <el-form-item prop="priv_protocol">
-                  <el-input v-model.number="currentModule.timeout" size="small">
+                  <el-radio-group v-model="editModule.priv_protocol" size="small">
-                    <template slot="append">second</template>
+                    <el-radio-button label="DES"></el-radio-button>
-                  </el-input>
+                    <el-radio-button label="AES"></el-radio-button>
+                  </el-radio-group>
                 </el-form-item>
               </el-col>
             </el-row>
 
-            <el-row>
+            <el-row v-if="editModule.security_level == 'authPriv'">
-              <el-col :span="1">&nbsp;</el-col>
-              <el-col :span="23">
-                <div class="right-box-sub-title">Auth</div>
-                <div class="line-100 right-box-line"></div>
-              </el-col>
-            </el-row>
-
-            <el-row>
               <el-col :span="6">
-                <div class="sub-label sub-label-required">{{$t('project.module.community')}}</div>
+                <div class="sub-label sub-label-required">{{$t('project.module.privPassword')}}</div>
               </el-col>
               <el-col :span="18">
-                <el-form-item prop="community">
+                <el-form-item prop="priv_password">
-                  <el-input v-model.trim="currentModule.community" maxlength="64" show-word-limit size="small"></el-input>
+                  <el-input v-model.trim="editModule.priv_password" maxlength="64" show-word-limit size="small"></el-input>
                 </el-form-item>
               </el-col>
             </el-row>
+          </template>
 
-            <!--SNMP V3 setting-->
+          <el-row>
-            <template v-if="currentModule.version == 3">
+            <el-col :span="6">
-              <el-row>
+              <div class="sub-label">{{$t('project.module.contextName')}}</div>
-                <el-col :span="6">
+            </el-col>
-                  <div class="sub-label sub-label-required">{{$t('login.username')}}</div>
+            <el-col :span="18">
-                </el-col>
+              <el-form-item prop="context_name">
-                <el-col :span="18">
+                <el-input v-model.trim="editModule.context_name" maxlength="64" show-word-limit size="small"></el-input>
-                  <el-form-item prop="username">
+              </el-form-item>
-                    <el-input v-model.trim="currentModule.username" maxlength="64" show-word-limit size="small"></el-input>
+            </el-col>
-                  </el-form-item>
+          </el-row>
-                </el-col>
+        </span>
-              </el-row>
 
-              <el-row>
+        <div class="right-box-form-tip">
-                <el-col :span="6">
+          {{$t('project.module.tip.defaultEndpointSet')}}
-                  <div class="sub-label">{{$t('project.module.securityLevel')}}</div>
+          <div class="line-100"></div>
-                </el-col>
+          {{$t('project.module.tip.relation')}}
-                <el-col :span="18">
+        </div>
-                  <el-form-item prop="security_level">
-                    <el-radio-group v-model="currentModule.security_level" size="small" @change="updateScrollbar">
-                      <el-radio-button label="noAuthNoPriv"></el-radio-button>
-                      <el-radio-button label="authNoPriv"></el-radio-button>
-                      <el-radio-button label="authPriv"></el-radio-button>
-                    </el-radio-group>
-                  </el-form-item>
-                </el-col>
-              </el-row>
 
-              <el-row v-if="currentModule.security_level == 'authNoPriv' || currentModule.security_level == 'authPriv'">
+        <el-form-item :label='$t("project.endpoint.port")' prop="port" >
-                <el-col :span="6">
+          <el-input placeholder="" v-model.number="editModule.port" size="small"></el-input>
-                  <div class="sub-label sub-label-required">{{$t('login.password')}}</div>
+        </el-form-item>
-                </el-col>
-                <el-col :span="18">
-                  <el-form-item prop="password">
-                    <el-input v-model.trim="currentModule.password" maxlength="64" show-word-limit size="small"></el-input>
-                  </el-form-item>
-                </el-col>
-              </el-row>
 
-              <el-row class="same-label-width" v-if="currentModule.security_level == 'authNoPriv' || currentModule.security_level == 'authPriv'">
+        <el-form-item v-if="editModule.type && editModule.type.toLowerCase() == 'http'" :label='$t("project.endpoint.path")' prop="path">
-                <el-col :span="6">
+          <el-input placeholder="" v-model="editModule.path" size="small"></el-input>
-                  <div class="sub-label">{{$t('project.module.authProtocol')}}</div>
+        </el-form-item>
-                </el-col>
-                <el-col :span="18">
-                  <el-form-item prop="auth_protocol">
-                    <el-radio-group v-model="currentModule.auth_protocol" size="small">
-                      <el-radio-button label="MD5"></el-radio-button>
-                      <el-radio-button label="SHA"></el-radio-button>
-                    </el-radio-group>
-                  </el-form-item>
-                </el-col>
-              </el-row>
 
-              <el-row class="same-label-width" v-if="currentModule.security_level == 'authPriv'">
+        <el-form-item class="right-box-form-param" v-if="editModule.type.toLowerCase() == 'http'">
-                <el-col :span="6">
+          <template slot="label">
-                  <div class="sub-label">{{$t('project.module.privProtocol')}}</div>
+            <span>{{$t('project.endpoint.param')}}</span>
-                </el-col>
+            <div class="right-box-form-btns">
-                <el-col :span="18">
+              <button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
-                  <el-form-item prop="priv_protocol">
+              <button id="module-clear-all" type="button" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
-                    <el-radio-group v-model="currentModule.priv_protocol" size="small">
+                <span><i class="el-icon-delete"></i></span>
-                      <el-radio-button label="DES"></el-radio-button>
+              </button>
-                      <el-radio-button label="AES"></el-radio-button>
+              <button id="module-add-param" type="button" @click="addParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
-                    </el-radio-group>
+                <span><i style="font-size: 12px;" class="nz-icon nz-icon-create-square"></i></span>
-                  </el-form-item>
+              </button>
-                </el-col>
+            </div>
-              </el-row>
+          </template>
 
-              <el-row v-if="currentModule.security_level == 'authPriv'">
+          <div class="param-box param-box-module">
-                <el-col :span="6">
+            <el-scrollbar ref="paramBoxScrollbar" style="height: 100%">
-                  <div class="sub-label sub-label-required">{{$t('project.module.privPassword')}}</div>
+              <div class="param-box-row" v-for="(item, index) in editModule.paramObj">
-                </el-col>
+                <el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.key'">
-                <el-col :span="18">
+                  <el-input placeholder="key" size="mini" v-model="item.key"></el-input>
-                  <el-form-item prop="priv_password">
-                    <el-input v-model.trim="currentModule.priv_password" maxlength="64" show-word-limit size="small"></el-input>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-            </template>
-
-            <el-row>
-              <el-col :span="6">
-                <div class="sub-label">{{$t('project.module.contextName')}}</div>
-              </el-col>
-              <el-col :span="18">
-                <el-form-item prop="context_name">
-                  <el-input v-model.trim="currentModule.context_name" maxlength="64" show-word-limit size="small"></el-input>
                 </el-form-item>
-              </el-col>
+                <span class="param-box-row-eq">=</span>
-            </el-row>
+                <el-form-item class="param-box-row-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.value'">
-          </span>
+                  <el-input placeholder="value" size="mini" v-model="item.value"></el-input>
-
+                </el-form-item>
-          <div class="right-box-form-tip" v-if="rightBox.isEdit">
+                <span class="param-box-row-symbol" :id="'moduel-remove-param-'+index" @click="removeParam(index)"><i class="nz-icon nz-icon-minus-square"></i></span>
-            {{$t('project.module.tip.defaultEndpointSet')}}
-            <div class="line-100"></div>
-            {{$t('project.module.tip.relation')}}
-          </div>
-
-          <el-form-item :label='$t("project.endpoint.port")' prop="port" >
-            <el-input v-if="rightBox.isEdit" placeholder="" v-model.number="currentModule.port" size="small"></el-input>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentModule.port}}</div>
-          </el-form-item>
-
-          <el-form-item v-if="currentModule.type && currentModule.type.toLowerCase() == 'http'" :label='$t("project.endpoint.path")' prop="path">
-            <el-input v-if="rightBox.isEdit" placeholder="" v-model="currentModule.path" size="small"></el-input>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentModule.path}}</div>
-          </el-form-item>
-
-          <el-form-item class="right-box-form-param" v-if="currentModule.type.toLowerCase() == 'http'">
-            <template slot="label">
-              <span>{{$t('project.endpoint.param')}}</span>
-              <div class="right-box-form-btns" v-if="rightBox.isEdit">
-                <button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
-                <button id="module-clear-all" type="button" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
-                  <span><i class="el-icon-delete"></i></span>
-                </button>
-                <button id="module-add-param" type="button" @click="addParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
-                  <span><i style="font-size: 12px;" class="nz-icon nz-icon-create-square"></i></span>
-                </button>
               </div>
-            </template>
+            </el-scrollbar>
+          </div>
+        </el-form-item>
 
-            <div v-if="rightBox.isEdit" class="param-box param-box-module">
+        <el-form-item :label='$t("project.module.description")' prop="remark">
-              <el-scrollbar ref="paramBoxScrollbar" style="height: 100%">
+          <el-input type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="editModule.remark" size="small"></el-input>
-                <div class="param-box-row" v-for="(item, index) in currentModule.paramObj">
+        </el-form-item>
-                  <el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.key'">
-                    <el-input placeholder="key" size="mini" v-model="item.key"></el-input>
-                  </el-form-item>
-                  <span class="param-box-row-eq">=</span>
-                  <el-form-item class="param-box-row-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.value'">
-                    <el-input placeholder="value" size="mini" v-model="item.value"></el-input>
-                  </el-form-item>
-                  <span class="param-box-row-symbol" :id="'moduel-remove-param-'+index" @click="removeParam(index)"><i class="nz-icon nz-icon-minus-square"></i></span>
-                </div>
-              </el-scrollbar>
-            </div>
-            <div v-for="(item, index) in currentModule.paramObj" v-if="!rightBox.isEdit">
-              <div  class="right-box-form-content-txt">{{item.key}}={{item.value}}</div>
-            </div>
 
-          </el-form-item>
+      </el-form>
+    </el-scrollbar>
 
-          <el-form-item :label='$t("project.module.description")' prop="remark">
+    <!--底部按钮-->
-            <el-input v-if="rightBox.isEdit" type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="currentModule.remark" size="small"></el-input>
+    <div class="right-box-bottom-btns">
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentModule.remark}}</div>
+      <button @click="esc" id="module-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
-          </el-form-item>
+        <span>{{$t('overall.cancel')}}</span>
-
+      </button>
-        </el-form>
+      <button @click="save" id="module-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
-      </el-scrollbar>
+        <span>{{$t('overall.save')}}</span>
-
+      </button>
-      <!--底部按钮-->
-      <div class="right-box-bottom-btns">
-        <button @click="esc" id="module-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
-          <span>{{$t('overall.cancel')}}</span>
-        </button>
-        <button v-if="rightBox.isEdit" @click="saveOrToEdit" id="module-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
-          <span>{{$t('overall.save')}}</span>
-        </button>
-      </div>
     </div>
-  </transition>
+  </div>
 </template>
 
 <script>
@@ -322,12 +307,7 @@
       return {
         walkData: [],
         expandedWalkData: [],
-        currentModule: {},
+        editModule: {},
-        rightBox: {
-          show: false,
-          title: '',
-          isEdit:false
-        },
         rules: {
           name: [
             {required: true, message: this.$t('validate.required'), trigger: 'blur'},
@@ -339,9 +319,6 @@
           port: [
             {validator:port, trigger: 'blur'},
           ],
-          /*walk: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ],*/
           username: [
             {required: true, message: this.$t('validate.required'), trigger: 'blur'}
           ],
@@ -366,10 +343,10 @@
     },
     methods: {
       selectWalk(walk) {
-        if (this.currentModule.walk.indexOf(walk) != -1) {
+        if (this.editModule.walk.indexOf(walk) != -1) {
-          this.currentModule.walk.splice(this.currentModule.walk.indexOf(walk), 1);
+          this.editModule.walk.splice(this.editModule.walk.indexOf(walk), 1);
         } else {
-          this.currentModule.walk.push(walk);
+          this.editModule.walk.push(walk);
         }
 
         this.$refs.walkScrollbar.update();
@@ -418,13 +395,15 @@
       },
 
       removeWalk(walk) {
-        this.currentModule.walk.splice(this.currentModule.walk.indexOf(walk), 1);
+        this.editModule.walk.splice(this.editModule.walk.indexOf(walk), 1);
         this.$refs.selectWalk.$refs.walkTree.setChecked(walk, false);
       },
 
       initWalk() {
         this.$nextTick(() => {
-          this.$refs.selectWalk.show();
+          if (this.$refs.selectWalk) {
+            this.$refs.selectWalk.show();
+          }
         })
       },
 
@@ -451,24 +430,19 @@
         }
       },
 
-      show(show, isEdit) {
-        this.rightBox.show = show;
-        this.rightBox.isEdit = isEdit;
-      },
-
       /*关闭弹框*/
-      esc() {
+      esc(refresh) {
-        this.rightBox.show = false;
+        this.$emit("close", refresh);
       },
 
-      clickos() {
+      clickOutside() {
-        this.esc();
+        this.esc(false);
       },
       changeType(type) {
-        if (this.currentModule.id) {
+        if (this.editModule.id) {
           return;
         }
-        this.currentModule.type = type;
+        this.editModule.type = type;
         this.updateScrollbar();
       },
       //转化snmpParam属性
@@ -523,34 +497,33 @@
       },
       /*保存*/
       save() {
-        this.currentModule.param = this.paramToJson(this.currentModule.paramObj);
+        this.editModule.param = this.paramToJson(this.editModule.paramObj);
         this.$refs.moduleForm.validate((valid) => {
           if (valid) {
-            if (this.currentModule.type.toLowerCase() == 'snmp') {
+            if (this.editModule.type.toLowerCase() == 'snmp') {
-              this.parseSnmpParam(this.currentModule);
+              this.parseSnmpParam(this.editModule);
             } else {
-              if (this.currentModule.snmpParam) {
+              if (this.editModule.snmpParam) {
-                this.currentModule.snmpParam = "";
+                this.editModule.snmpParam = "";
               }
             }
-            this.currentModule.projectId = this.currentModule.project.id;
+            this.editModule.projectId = this.editModule.project.id;
-            if (this.currentModule.id) {
+            if (this.editModule.id) {
-              this.$put('module', this.currentModule).then(response => {
+              this.$put('module', this.editModule).then(response => {
                 if (response.code === 200) {
                   this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.$store.commit('moduleListChange');
+                  //this.$store.commit('moduleListChange');
-                  this.rightBox.show = false;
+                  this.esc(true);
-                  this.$emit('reload');
                 } else {
                   this.$message.error(response.msg);
                 }
               });
             } else {
-              this.$post('module', this.currentModule).then(response => {
+              this.$post('module', this.editModule).then(response => {
                 if (response.code === 200) {
                   this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.$store.commit('moduleListChange');
+                  //this.$store.commit('moduleListChange');
-                  this.rightBox.show = false;
+                  this.esc(true);
                 } else {
                   this.$message.error(response.msg);
                 }
@@ -561,14 +534,6 @@
           }
         });
       },
-      saveOrToEdit: function() {
-        if (!this.rightBox.isEdit) {
-          this.rightBox.isEdit = true;
-          this.rightBox.title = this.$t("project.module.editModule") + "  ID：" + this.currentModule.id;
-        } else {
-          this.save();
-        }
-      },
       /*删除*/
       del() {
         this.$confirm(this.$t("tip.confirmDelete"), {
@@ -576,11 +541,11 @@
           cancelButtonText: this.$t("tip.no"),
           type: 'warning'
         }).then(() => {
-          this.$delete("module?ids=" + this.currentModule.id).then(response => {
+          this.$delete("module?ids=" + this.editModule.id).then(response => {
             if (response.code === 200) {
               this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.rightBox.show = false;
+              //this.$store.commit('moduleListChange');
-              this.$store.commit('moduleListChange');
+              this.esc(true);
             } else {
               this.$message.error(response.msg);
             }
@@ -589,50 +554,40 @@
       },
 
       /*获取project列表*/
-      getProjectList: function() {
+      getProjectList() {
         this.$get('project', {pageSize: -1, pageNo: 1}).then(response => {
           if (response.code === 200) {
             this.projectList = response.data.list;
-            if (this.currentProject && this.currentProject.id) {
-              /*for (let i = 0; i < this.projectList.length; i++) {
-                if (this.projectList[i].id == this.currentProject.id) {
-                  this.currentProject = this.projectList[i];
-                  break;
-                }
-              }*/
-            } else {
-
-            }
           }
         });
       },
 
       // 清除param
-      clearAllParam: function() {
+      clearAllParam() {
-        this.currentModule.paramObj = [];
+        this.editModule.paramObj = [];
         this.$nextTick(() => {
           this.$refs.paramBoxScrollbar.update();
         });
       },
 
       // 新增param
-      addParam: function() {
+      addParam() {
-        this.currentModule.paramObj.push({key: '', value: ''});
+        this.editModule.paramObj.push({key: '', value: ''});
         this.$nextTick(() => {
           this.$refs.paramBoxScrollbar.update();
         });
       },
 
       // 移除单个param
-      removeParam: function(index) {
+      removeParam(index) {
-        this.currentModule.paramObj.splice(index, 1);
+        this.editModule.paramObj.splice(index, 1);
         this.$nextTick(() => {
           this.$refs.paramBoxScrollbar.update();
         });
       },
 
       //将param转为json字符串格式
-      paramToJson: function(param) {
+      paramToJson(param) {
         let tempParam = {};
         for (let i = 0; i < param.length; i++) {
           eval('tempParam["' + param[i].key + '"]="' + param[i].value + '"');
@@ -655,9 +610,6 @@
       this.getProjectList();
     },
     computed: {
-      projectListReloadWatch() {
-        return this.$store.state.projectListChange;
-      },
       mibName() {
         return (value) => {
           return this.getMibName(this.walkData, value);
@@ -669,26 +621,10 @@
         immediate: true,
         deep: true,
         handler(n, o) {
-          this.currentModule = JSON.parse(JSON.stringify(n));
+          this.editModule = JSON.parse(JSON.stringify(n));
-          if (n && n.id) {
-            this.rightBox.title =this.rightBox.isEdit? this.$t("project.module.editModule") + "  ID：" + n.id : this.$t("project.module.module") + "  ID：" + n.id ;
-            if (n.snmpParam) {
-              this.reparseSnmpParam(this.currentModule);
-            }
-
-          } else if (n) {
-            this.rightBox.title = this.$t("project.module.createModule");
-            if (!n.type) {
-              n.type = 'http';
-            } else if (n.type.toLowerCase() == 'snmp') {
-              if (n.snmpParam) {
-                this.reparseSnmpParam(this.currentModule);
-              }
-            }
-          }
         }
       },
-      currentModule: {
+      editModule: {
         immediate: true,
         deep: true,
         handler(n, o) {
@@ -706,9 +642,6 @@
           }
         }
       },
-      projectListReloadWatch(n, o) {
-        this.getProjectList();
-      }
     }
   }
 </script>

nezha-fronted/src/components/page/project/project.vue

@@ -26,10 +26,10 @@
       <el-scrollbar ref="leftScrollbar" style="height: 100%">
         <div class="sidebar-title too-long-split">{{$t('project.project.project')}}</div>
         <div class="sidebar-info">
-          <el-collapse v-model="currentProjectTitle" class="left-menu-bg" accordion style="padding-top:0px;" @change="projectChange" ref="projectLeft">
+          <el-collapse v-model="currentProjectTitle" class="left-menu-bg" accordion style="padding-top: 0px;" ref="projectLeft">
             <el-collapse-item v-for="(item,index) in projectList" :key="item.name+item.id+index" :name="item.name+'-'+item.id">
               <template slot="title">
-                <div class="sidebar-info-item" :class="{'sidebar-info-item-active': item.id==currentProject.id}" @click="detailProjectInfo($event,item)" :id="'project-module-'+item.id">
+                <div class="sidebar-info-item" :class="{'sidebar-info-item-active': item.id == currentProject.id}" @click="detailProject($event,item)" :id="'project-module-'+item.id">
                   <div class="sidebar-info-item-txt">
                     <el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" popper-class="transparent-pop">
                       <span slot="reference" class="">
@@ -41,15 +41,15 @@
                 </div>
               </template>
               <div class="sidebar-info sub-sidebar-info" >
-                <div v-if="getProjectModule(item.id).length == 0" class="sidebar-info-item sidebar-info-item-add" @click="toAddModule">
+                <div v-if="getProjectModule(item.id).length == 0" class="sidebar-info-item sidebar-info-item-add" @click="addModule">
                   <i class="nz-icon nz-icon-create-square"></i>
                 </div>
                 <template v-else>
-                  <div v-for="module in getProjectModule(item.id)" class="sidebar-info-sub-item" :class="{'sidebar-info-item-active': module.id == currentModule.id}" @click="changeModule(module)" :id="'project-module-'+module.id">
+                  <div v-for="module in getProjectModule(item.id)" class="sidebar-info-sub-item" :class="{'sidebar-info-item-active': module.id == currentModule.id}" @click="changeModule(item, module)" :id="'project-module-'+module.id">
                     <div :id="`module-${module.id}`" class="item-tip">
                       <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(module.id, module.name, ready)">{{module.name}}</div>
                       <span class="too-long-split" style="width: 120px;">{{module.name}}</span>
-                      <div v-show="module.buildIn != 1" class="hid-div side-bar-menu-edit sub-side-bar-menu-edit" @click.stop="toEditModule(module)" :id="'project-module-edit-'+module.id" ><i class="nz-icon nz-icon-edit"></i></div>
+                      <div v-show="module.buildIn != 1" class="hid-div side-bar-menu-edit sub-side-bar-menu-edit" @click.stop="editModule(module)" :id="'project-module-edit-'+module.id" ><i class="nz-icon nz-icon-edit"></i></div>
                     </div>
                   </div>
                 </template>
@@ -77,7 +77,7 @@
               class="margin-l-20"
             >
               <template slot="optionZone">
-                <button @click.stop="toCreateEndpoint" :title="$t('overall.createEndpoint')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="project-create-project">
+                <button @click.stop="addEndpoint" :title="$t('overall.createEndpoint')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="project-create-project">
                   <i class="nz-icon nz-icon-create-square"></i>
                 </button>
               </template>
@@ -110,7 +110,7 @@
             :sort-orders="['ascending', 'descending']"
           >
             <template slot-scope="scope" :column="item" >
-              <span v-if="item.prop == 'asset' && scope.row[item.prop]" class="link" @click="detail(scope.row)">{{scope.row[item.prop].host}}</span>
+              <span v-if="item.prop == 'asset' && scope.row[item.prop]" class="link" @click="detailEndpoint(scope.row)">{{scope.row[item.prop].host}}</span>
               <span v-else-if="item.prop == 'param'">
                 <template v-if="scope.row.paramObj">
                   <span v-for="(p,i) in scope.row.paramObj">{{p.key}}={{p.value}}<span v-if="i < scope.row.paramObj.length-1">，</span></span>
@@ -119,13 +119,12 @@
               </span>
               <template v-else-if="item.prop == 'type'">{{currentModule.type}}</template>
               <div v-else-if="item.prop == 'option'" class="content-right-options">
-                <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'edp-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
+                <span :title="$t('overall.view')" @click="detailEndpoint(scope.row)" class="content-right-option" :id="'edp-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
                 &nbsp;
-                <span :title="$t('overall.query')" @click="showEndpoint(scope.row)" class="content-right-option" :id="'edp-query-'+scope.row.id"><i class="el-icon-search"></i></span>
+                <span :title="$t('overall.query')" @click="query(scope.row)" class="content-right-option" :id="'edp-query-'+scope.row.id"><i class="el-icon-search"></i></span>
                 &nbsp;
-                <span :title="$t('overall.edit')" @click="toEditEndpoint(scope.row)" class="content-right-option" :id="'edp-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
+                <span :title="$t('overall.edit')" @click="editEndpoint(scope.row)" class="content-right-option" :id="'edp-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
               </div>
-<!--              <span v-else-if="item.prop == 'lastUpdate'">{{dateFormat(scope.row.lastUpdate)}}</span>-->
               <span v-else-if="item.prop == 'state'" >
                 <el-popover placement="right" width="50" trigger="hover" :popper-class="scope.row.state == '1'?'small-pop':''">
                   <div slot="reference" style="width: 20px">
@@ -158,7 +157,7 @@
       </div>
       <transition name="el-zoom-in-bottom">
         <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :is-full-screen="bottomBox.isFullScreen"
-                    :from="'endpoint'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.endpointDetail" :obj="currentEndpoint" :asset-detail="bottomBox.assetDetail"
+                    :from="'endpoint'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.endpointDetail" :obj="endpoint" :asset-detail="bottomBox.assetDetail"
                     @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
       </transition>
     </div>
@@ -174,18 +173,21 @@
       @tablelable="tablelabelEmit"
       ref="elementset"
     ></element-set>
-
+    <transition name="right-box">
-    <module-box :current-project="currentProject" :module="editModule" @reload="getAllModuleList" ref="moduleBox"></module-box>
+      <module-box v-if="rightBox.module.show" :current-project="currentProject" :module="module" @close="closeModuleRightBox" ref="moduleBox"></module-box>
-    <edit-endpoint-box :project="currentProject" :module="currentModule" :post-endpoint="editEndpoint" @reload="getEndpointTableData" ref="editEndpointBox"></edit-endpoint-box>
+    </transition>
-    <add-endpoint-box :current-project="endpointEditInfos.project" :current-module="endpointEditInfos.module" @reload="getEndpointTableData" ref="addEndpointBox"></add-endpoint-box>
+    <transition name="right-box">
+      <add-endpoint-box v-if="rightBox.addEndpoint.show" :current-project="currentProject" :current-module="currentModule" @close="closeAddEndpointRightBox" ref="addEndpointBox"></add-endpoint-box>
+    </transition>
+    <transition name="right-box">
+      <edit-endpoint-box v-if="rightBox.editEndpoint.show" :project="currentProject" :module="currentModule" :endpoint="endpoint" @close="closeEditEndpointRightBox" ref="editEndpointBox"></edit-endpoint-box>
+    </transition>
   </div>
 </template>
 
 <script>
   import exportXLSX from "../../common/exportXLSX";
   import loading from "../../common/loading";
-  import chartDataFormat from "../../charts/chartDataFormat";
-  import bus from '../../../libs/bus'
   import panelTab from '../../common/bottomBox/tabs/panelTab'
 
   export default {
@@ -197,6 +199,11 @@
     },
     data() {
       return {
+        rightBox: {
+          module: {show: false},
+          addEndpoint: {show: false},
+          editEndpoint: {show: false},
+        },
         /*二级页面相关*/
         bottomBox: {
           endpoint: {}, //asset详情
@@ -207,7 +214,7 @@
           showSubList: false,
           targetTab: '',
         },
-        
+
         mainTableHeight: this.$tableHeight.normal, //主列表table高度
         ready: false,
 
@@ -221,17 +228,17 @@
           tablelable: [], //从缓存中加载的table header
           dropCol: [], //自定义列工具的数据
         },
-        
+
-        
+
         tableId: 'projectTable', //需要分页的table的id，用于记录每页数量
 
-        endpointEditInfos:{
+        endpoint:{
           project:null,
           module:null,
         },
         userData: [],
 
-        editEndpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: '', paramObj: []},
+        endpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: '', paramObj: []},
         endpointTableTitle: [
           {
             label: this.$t("project.endpoint.endpointId"),
@@ -285,15 +292,16 @@
           pageSize: 50,
           total:0
         },
-        currentEndpoint: {},
+        endpoint: {},
 
         currentProjectTitle:'',
         moduleList: [],
         projectList: [],
         pageType:'',//project endpoint
         currentProject: {id: '', name: '', remark: ''}, //endpoint弹框、module列表用来回显project
-        editModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //编辑的module
+        module: {}, //编辑的module
-        currentModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //endpoint弹框用来回显module
+        blankModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //空白module
+        currentModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //用来回显的module
         endpointSearchLabel: {moduleId: ''}, //endpoint搜索参数
         endpointSearchMsg: { //给搜索框子组件传递的信息
           zheze_none: true,
@@ -438,10 +446,10 @@
           }
         }
       },
-      getProjectList:function(reload){
+      getProjectList(reload) {
         this.$get('project',{pageSize:-1}).then(response=>{
           if(response.code == 200){
-            this.projectList=response.data.list;
+            this.projectList = response.data.list;
             if (reload) {
               if (this.projectList.length > 0) {
                 this.currentProject = this.projectList[0];
@@ -452,41 +460,42 @@
           }
         })
       },
-      getProjectModule:function(projectId){
+      getProjectModule(projectId) {
-        //return [];
+        let moduleList = JSON.parse(JSON.stringify(this.moduleList));
-        let moduleList=Object.assign([],this.moduleList);
+        return moduleList.filter((item,index) => {
-        return moduleList.filter((item,index)=>{
+          return item.project.id == projectId;
-          return item.project.id==projectId;
         })
       },
-      projectChange:function(){
+      detailProject(event, project) {
-        //展开后为避免左侧无数据，显示对应project的第一个module下的endpoint
-        // let currentProjectId=this.currentProjectTitle&&this.cuurentProjectTitle != ""?this.currentProjectTitle.split('-')[this.currentProjectTitle.split('-').length -1]:"";
-        // if(currentProjectId != ''){
-        //   currentProjectId=Number.parseInt(currentProjectId);
-        //   let moduleList=this.getProjectModule(currentProjectId);
-        //   this.currentModule=moduleList[0];
-        //   this.currentProject=this.projectList.find((item)=>{
-        //     return item.id == currentProjectId
-        //   })
-        //   this.getEndpointTableData();
-        //   // this.$store.commit('setProject',null)
-        // }
-      },
-      detailProjectInfo:function(event,project){
         this.pageType = 'project';
-        if(event){
+        if(event) {
-          if(project){
+          if(project) {
-            this.currentProject=project;
+            this.currentProject = project;
-            // this.$store.commit('setProject',this.currentProject)
           }
-          // this.$refs.projectLeft.setActiveNames([]);
+        } else {
-        }else{
+          this.currentProjectTitle = this.currentProject.name + "-" + this.currentProject.id;
-          this.currentProjectTitle=this.currentProject.name+"-"+this.currentProject.id
         }
-        this.currentModule={};
+        this.currentModule = {};
       },
-      getAllModuleList:function(){
+      closeModuleRightBox(refresh) {
+        this.rightBox.module.show = false;
+        if (refresh) {
+          this.getAllModuleList();
+        }
+      },
+      closeAddEndpointRightBox(refresh) {
+        this.rightBox.addEndpoint.show = false;
+        if (refresh) {
+          this.getEndpointTableData();
+        }
+      },
+      closeEditEndpointRightBox(refresh) {
+        this.rightBox.editEndpoint.show = false;
+        if (refresh) {
+          this.getEndpointTableData();
+        }
+      },
+      getAllModuleList() {
         this.$get('module', { pageSize: -1, pageNo: 1}).then(response => {
           if (response.code === 200) {
             this.moduleList = response.data.list;
@@ -501,46 +510,39 @@
                 //console.error(response.data.list[i], err);
               }
             }
-            // if (this.moduleList.length > 0) {
-            //   this.currentModule = this.moduleList[0];
-            // } else {
-            //   this.currentModule = {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []};
-            // }
           }
         });
       },
       //左侧module列表选中切换
-      changeModule(module) {
+      changeModule(project, module) {
         this.currentModule = module;
         this.endpointSearchLabel = {moduleId: ''};
         this.$refs.projectSearch.clearSearch();
         this.bottomBox.showSubList = false;
-        this.currentProject = {};
+        this.currentProject = project;
       },
 
       //弹出endpoint编辑页
-      toEditEndpoint(endpoint) {
+      editEndpoint(endpoint) {
-        this.editEndpoint = JSON.parse(JSON.stringify(endpoint));
+        this.endpoint = JSON.parse(JSON.stringify(endpoint));
-        this.$set(this.editEndpoint,'projectId',this.currentModule.project.id)
+        this.$set(this.endpoint,'projectId',this.currentModule.project.id)
-        this.$set(this.editEndpoint,'moduleId',this.currentModule.id)
+        this.$set(this.endpoint,'moduleId',this.currentModule.id)
 
-        this.rightBoxHandler(3);
+        this.rightBox.editEndpoint.show = true;
-        this.$refs.editEndpointBox.toEdit(true, this.editEndpoint.id);
+        if (!this.endpoint.paramObj) {
-        if (!this.editEndpoint.paramObj) {
+          this.$set(this.endpoint, 'paramObj', []);
-          this.$set(this.editEndpoint, 'paramObj', []);
         }
       },
 
-      toCreateEndpoint() {
+      addEndpoint() {
-        this.endpointEditInfos.project=Object.assign({},this.currentModule.project);
+        this.endpoint.project = Object.assign({},this.currentModule.project);
-        this.endpointEditInfos.module=Object.assign({},this.currentModule)
+        this.endpoint.module = Object.assign({},this.currentModule);
-        this.$refs.addEndpointBox.show(true);
+        this.rightBox.addEndpoint.show = true;
-        this.$refs.addEndpointBox.clearEndpoints();
       },
 
       //查看endpoint详情
-      detail(endpoint) {
+      detailEndpoint(endpoint) {
-        this.currentEndpoint = Object.assign({}, endpoint);
+        this.endpoint = Object.assign({}, endpoint);
         this.bottomBox.targetTab = "panel";
         this.bottomBox.showSubList = true;
       },
@@ -560,40 +562,36 @@
         this.$set(module, 'context_name', '');
       },
       //弹出module编辑页
-      toEditModule(module) {
+      editModule(module) {
         this.currentModule = JSON.parse(JSON.stringify(module));
         if (!this.currentModule.paramObj) {
           this.$set(this.currentModule, 'paramObj', []);
         }
-        this.editModule = JSON.parse(JSON.stringify(module));
+        this.module = JSON.parse(JSON.stringify(module));
-        if (!this.editModule.paramObj) {
+        if (!this.module.paramObj) {
-          this.$set(this.editModule, 'paramObj', []);
+          this.$set(this.module, 'paramObj', []);
         }
-        if (this.editModule.snmpParam) {
+        if (this.module.snmpParam) {
-          this.initSnmpParam(this.editModule);
+          this.initSnmpParam(this.module);
         }
-        this.rightBoxHandler(2);
+        this.rightBox.module.show = true;
         this.$nextTick(() => {
           this.$refs.moduleBox.initWalk();
         });
       },
-      toAddModule() {
+      addModule() {
-        this.editModule = {id: '', type: '', name: '', project: this.currentProject, port: '', path: '', param: '', paramObj: [], snmpParam: ''};
+        this.module = this.newModule();
-        this.rightBoxHandler(2);
+        this.rightBox.module.show = true;
         this.$nextTick(() => {
           this.$refs.moduleBox.initWalk();
         });
       },
+      newModule() {
+        return JSON.parse(JSON.stringify(this.blankModule));
+      },
 
-      //asset弹框控制
-      /*tabControl(data) {
-        if (data === 'close') {
-          this.viewAssetState = false
-          this.$refs['assetEditUnit'].tabView = false
-        }
-      },*/
       //搜索
-      endpointSearch: function(searchObj) {
+      endpointSearch(searchObj) {
         let orderBy='';
         if(this.endpointSearchLabel.orderBy){
           orderBy=this.endpointSearchLabel.orderBy
@@ -611,41 +609,6 @@
         this.getEndpointTableData();
       },
 
-      //控制弹框状态 type  1:project; 2:module; 3:editEndponit; 4:addEndpoint;
-      rightBoxHandler(type) {
-        if (type == 1) {
-          this.$refs.projectBox.show(true);
-
-          if (this.$refs.moduleBox) {
-            this.$refs.moduleBox.show(false);
-          }
-          if (this.$refs.editEndpointBox) {
-            this.$refs.editEndpointBox.show(false);
-          }
-          //this.$refs.addEndpointBox.show(false);
-        } else if (type == 2) {
-          this.$refs.moduleBox.show(true,true);
-
-          if (this.$refs.projectBox) {
-            this.$refs.projectBox.show(false);
-          }
-          if (this.$refs.editEndpointBox) {
-            this.$refs.editEndpointBox.show(false);
-          }
-          //this.$refs.addEndpointBox.show(false);
-        } else if (type == 3) {
-          this.$refs.editEndpointBox.show(true);
-          if (this.$refs.projectBox) {
-            this.$refs.projectBox.show(false);
-          }
-          if (this.$refs.moduleBox) {
-            this.$refs.moduleBox.show(false);
-          }
-          //this.$refs.addEndpointBox.show(false);
-        } else if (type == 4) {
-        }
-      },
-
       dateFormat(time) {
         if (!time) {
           return '-';
@@ -661,15 +624,15 @@
         return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
       },
       viewAsset(endpoint) {
-        this.currentEndpoint = Object.assign({}, endpoint);
+        this.endpoint = Object.assign({}, endpoint);
         this.bottomBox.targetTab = 'assetDetail';
         this.bottomBox.showSubList = true;
         /*this.viewAssetState=true;
         this.$refs.assetEditUnit.getAssetData(id);
         this.$refs.assetEditUnit.tabView=true;*/
       },
-      showEndpoint(endpoint) {
+      query(endpoint) {
-        this.currentEndpoint = Object.assign({}, endpoint);
+        this.endpoint = Object.assign({}, endpoint);
         this.bottomBox.targetTab = 'endpointQuery';
         this.bottomBox.showSubList = true;
       },
@@ -915,7 +878,7 @@
         immediate:true,
         handler(n, o) {
           this.currentProject = Object.assign({}, n);
-          this.detailProjectInfo();
+          this.detailProject();
         }
       },
       projectListChange:function(n,o){
@@ -941,7 +904,7 @@
         let vm = this;
         this.$bottomBoxWindow.showSubListWatch(vm, n);
       },
-      currentEndpoint: {
+      endpoint: {
         deep: true,
         handler(n) {
           this.bottomBox.endpointDetail = this.convertToDetail(n);

nezha-fronted/src/router/index.js

@@ -50,7 +50,7 @@ export default new Router({
         },
         {
           path: 'test',
-          component: resolve => require(['../components/page/dashboard/explore/editor.vue'],resolve)
+          component: resolve => require(['../components/charts/d3-line-chart2'],resolve)
         },
         {
           path: '/project',