From 84f988b761b9cbc386eefbc32da857b89ebfd8d4 Mon Sep 17 00:00:00 2001
From: zhangyu <m13716206235@163.com>
Date: Mon, 24 Aug 2020 15:42:06 +0800
Subject: [PATCH] =?UTF-8?q?addline=E6=B7=BB=E5=8A=A0=E7=9A=84=E5=85=B6?=
 =?UTF-8?q?=E4=BB=96=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/project/addLine.vue | 120 +++++++++++++++++-
 .../src/components/common/project/addNode.vue |   2 +-
 .../components/common/project/topology.vue    |  13 +-
 .../components/common/project/visNetwork.vue  |   8 +-
 4 files changed, 128 insertions(+), 15 deletions(-)

diff --git a/nezha-fronted/src/components/common/project/addLine.vue b/nezha-fronted/src/components/common/project/addLine.vue
index 3465c6c66..8af9af35c 100644
--- a/nezha-fronted/src/components/common/project/addLine.vue
+++ b/nezha-fronted/src/components/common/project/addLine.vue
@@ -70,6 +70,61 @@
               </el-color-picker>
             </div>
           </el-form-item>
+          <div  class="right-box-sub-title">
+            <span>{{$t('alert.config.expr')}}</span>
+            <span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
+          </div>
+          <el-row class="element-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
+            <el-row>
+              <template>
+                <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
+                  Name
+                </el-col>
+                <el-col style="width: calc(100% - 140px);">
+                  <el-input v-model="name[index-1]" type="text" size="small"></el-input>
+                </el-col>
+                <el-col  style="width: 20px"> <i class="el-icon-minus" @click="removeExpression(index-1)"></i></el-col>
+              </template>
+            </el-row>
+            <el-row>
+              <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
+                Unit
+              </el-col>
+              <el-col style="width: calc(100% - 120px);">
+                <el-cascader filterable placeholder="" popper-class="no-style-class unit-popper-class" size="small" style="width: 100%"
+                             :options="unitOptions"
+                             :props="{ expandTrigger: 'click',emitPath:false }"
+                             :show-all-levels="false"
+                             v-model="unit[index-1]"
+                ></el-cascader>
+              </el-col>
+            </el-row>
+            <promql-input
+              :ref="'promql-'+(index-1)"
+              :id="promqlKeys[index-1]"
+              :key="promqlKeys[index-1]"
+              :expression-list="expressions"
+              :index="index-1"
+              :styleType="2"
+              :plugins="['metric-selector', 'metric-input', 'remove']"
+              @change="expressionChange"
+              @removeExpression="removeExpression"
+              :showRemove="false"
+            ></promql-input>
+            <el-row>
+              <template>
+                <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
+                  {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
+                  <el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover">
+                    <i slot="reference" class="nz-icon nz-icon-info-normal" style="font-size: 12px; -webkit-transform:scale(0.75);display:inline-block;" @mouseover="rz"></i>
+                  </el-popover>
+                </el-col>
+                <el-col style="width: calc(100% - 120px);">
+                  <el-input v-model="legends[index-1]" type="text" size="small"></el-input>
+                </el-col>
+              </template>
+            </el-row>
+          </el-row>
         </el-form>
       </el-scrollbar>
 
@@ -89,11 +144,25 @@
 </template>
 
 <script>
+  import promqlInput from "@/components/page/dashboard/explore/promqlInput";
+  import chartDataFormat from "@/components/charts/chartDataFormat";
+  import {getUUID,resetZIndex} from "@/components/common/js/common";
+  var rz = {
+    methods: {
+      rz(e) {
+        resetZIndex(e);
+      }
+    }
+  };
   export default {
     name:"addLine",
     props:{
       lineData:{},
     },
+    components:{
+      'promql-input': promqlInput,
+    },
+    mixins: [rz],
     watch:{
       lineData:{
         handler(n){
@@ -128,6 +197,14 @@
           '#1e90ff',
           '#c71585',
         ],
+        unitOptions: chartDataFormat.unitOptions(),
+        promqlKeys:[],
+        expressions: [],
+        promqlCount:0,
+        elementIds:[],
+        legends:[],
+        name:[],
+        unit:[],
         rules:{
           arrows: [
             { required: true, message: '', trigger: 'change' },
@@ -138,9 +215,11 @@
         }
       }
     },
+    mounted(){
+      this.addExpression();
+    },
     methods:{
       onSubmit(){
-
         this.$refs['form'].validate((valid) => {
           if (valid) {
             let model=Object.assign({id:undefined},{...this.form},{color: {color:this.form.color,highlight:this.form.color,hover:this.form.color,opacity:1.0}});
@@ -149,10 +228,49 @@
               roundness:model.roundness,
               type:model.type ,
             };
+            model.expressions=[];
+            this.promqlKeys.forEach((item,index)=>{
+              model.expressions.push({
+                "name": this.name[index],
+                "unit": this.unit[index],
+                "metric": this.expressions[index],
+                "legend": this.legends[index],
+              })
+            });
             this.$emit('addLine',model);
           }
         });
       },
+      expressionChange: function () {
+
+      },
+      addExpression() {
+        this.expressions.push('');
+        this.legends.push('');
+        this.name.push('');
+        this.unit.push('');
+        this.promqlKeys.push(getUUID());
+        this.elementIds.push("");
+        this.promqlCount++;
+      },
+      removeExpression(index) {
+        if (this.promqlCount > 1) {
+          this.expressions.splice(index, 1);
+          this.legends.splice(index, 1);
+          this.name.splice(index, 1);
+          this.unit.splice(index, 1);
+          this.promqlKeys.splice(index, 1);
+          this.elementIds.splice(index, 1);
+          this.promqlCount--;
+          this.$nextTick(() => {
+            this.expressions.forEach((ex, index) => {
+              if (ex) {
+                this.$refs[`promql-${index}`][0].metricChange(ex);
+              }
+            });
+          });
+        }
+      },
       /*关闭弹框*/
       esc(refresh) {
         this.$emit("close", refresh);
diff --git a/nezha-fronted/src/components/common/project/addNode.vue b/nezha-fronted/src/components/common/project/addNode.vue
index 0f41c0050..b5a20a233 100644
--- a/nezha-fronted/src/components/common/project/addNode.vue
+++ b/nezha-fronted/src/components/common/project/addNode.vue
@@ -30,7 +30,7 @@
           </el-select>
         </el-form-item>
 
-        <el-form-item label="Label" prop="iconId">
+        <el-form-item label="Icon" prop="iconId">
           <el-select v-model="form.iconId" placeholder=""  popper-class="asset-dropdown" size="small">
             <el-option
               v-for="item in iconArray"
diff --git a/nezha-fronted/src/components/common/project/topology.vue b/nezha-fronted/src/components/common/project/topology.vue
index 6dc7610b7..d95f7903e 100644
--- a/nezha-fronted/src/components/common/project/topology.vue
+++ b/nezha-fronted/src/components/common/project/topology.vue
@@ -231,7 +231,7 @@
         let nodes=[...this.nodesArray];
         let edges=[...this.edgesArray];
         console.log(nodes,edges);
-        this.editVisNetwork=false;
+        this.$emit('editVisNetworkChange',false);
       },
       //拓扑图方法
       init(type){
@@ -288,7 +288,7 @@
 
           interaction:{
             dragNodes: true, //是否能拖动节点
-            dragView: false, //是否能拖动画布
+            dragView: true, //是否能拖动画布
             hover: true, //鼠标移过后加粗该节点和连接线
             multiselect: false, //按 ctrl 多选
             selectable: true, //是否可以点击选择
@@ -305,12 +305,11 @@
         this_.network = new Vis.Network(this_.container, this_.data, this_.options);
         this_.network.moveTo({
           position: this_.viewsCenter,
-          scale: this_.isFullScreen?1.5:1,
+          scale: this_.zoom,
           offset: {x:0, y:0},
         });
         this_.containerCanvas=document.querySelectorAll("#network_id canvas")[0];
         this_.modelTopUpdate();
-        this_.zoom=this_.network.canvasToDOM({x:0,y:1}).y-this_.network.canvasToDOM({x:0,y:0}).y;
       },
       resetAllNodes() {
         this.setNetworkData(this.nodesArray,this.edgesArray);
@@ -330,7 +329,7 @@
         });
         this_.network.moveTo({
           position: this_.viewsCenter,
-          scale: this_.isFullScreen?1.5:1,
+          scale: this_.zoom,
           offset: {x:0, y:0},
         });
         this.$nextTick(()=>{
@@ -421,7 +420,6 @@
       },
       //工具栏
       nodeDel(){
-        console.log(this.selNodeId);
         let nodesArray=this.nodesArray.filter((item)=>item.id!==this.selNodeId);
         let edgesArray=this.edgesArray.filter((item)=>item.from!==this.selNodeId || this.to!==this.selNodeId);
         this.$emit('setTopologyData',nodesArray, edgesArray);
@@ -464,7 +462,6 @@
         })
       },
       modelTopMouseDown(e){
-        console.log(e);
         if(!this.index&&this.index!==0){return};
         this.relativeModelTop={
           x:e.clientX-(parseFloat(this.$refs['modelTopId'+this.index][0].style.left)),
@@ -527,7 +524,6 @@
         if(key){
           this.popDataShow[key]=true;
         }
-        console.log(this.popDataShow);
       },
     },
     mounted(){
@@ -625,7 +621,6 @@
            return false
          });
          this.network.on("resize", function (params) {//检测resize
-           console.log(1111);
            setTimeout(()=>{
              this_.modelTopUpdate();
              this_.selNodeArrUpdate();
diff --git a/nezha-fronted/src/components/common/project/visNetwork.vue b/nezha-fronted/src/components/common/project/visNetwork.vue
index 15ba1c932..bcf51141e 100644
--- a/nezha-fronted/src/components/common/project/visNetwork.vue
+++ b/nezha-fronted/src/components/common/project/visNetwork.vue
@@ -185,10 +185,10 @@
         this.topologyLoading=true;
         // this.$get('/project/topo',{projectId:n.id}).then(res=>{
         //   console.log(res);
-        //   setTimeout(()=>{
-        //     this.topologyLoading=false;
-        //     this.$refs['topology'].setNetworkData( this.edgesArray,this.nodesArray);
-        //   })
+          setTimeout(()=>{
+            this.topologyLoading=false;
+            this.$refs['topology'].setNetworkData( this.edgesArray,this.nodesArray);
+          },500)
         // })
       },
       editVisNetworkChange(flag){