添加 addnode其他相关参数

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

@@ -20,7 +20,7 @@
     <el-scrollbar class="right-box-form-box">
       <el-form class="right-box-form  right-box-form-left" ref="form" :model="form" label-width="160px" :rules="rules">
         <el-form-item label="Module Name" prop="moduleId">
-          <el-select v-model="form.moduleId" placeholder=""  popper-class="asset-dropdown">
+          <el-select v-model="form.moduleId" placeholder=""  popper-class="asset-dropdown" size="small">
             <el-option
               v-for="item in moduleDataS.module"
               :key="item.id"
@@ -31,7 +31,7 @@
         </el-form-item>
 
         <el-form-item label="Label" prop="iconId">
-          <el-select v-model="form.iconId" placeholder=""  popper-class="asset-dropdown">
+          <el-select v-model="form.iconId" placeholder=""  popper-class="asset-dropdown" size="small">
             <el-option
               v-for="item in iconArray"
               :key="item.id"
@@ -44,39 +44,63 @@
             </el-option>
           </el-select>
         </el-form-item>
-        <!--<div  class="right-box-sub-title">-->
+        <div  class="right-box-sub-title">
-          <!--<span>{{$t('alert.config.expr')}}</span>-->
+          <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>-->
+          <span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
-        <!--</div>-->
+        </div>
-        <!--<el-row class="element-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">-->
+        <el-row class="element-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
-          <!--<promql-input-->
+          <el-row>
-            <!--:ref="'promql-'+(index-1)"-->
+            <template>
-            <!--:id="promqlKeys[index-1]"-->
+              <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
-            <!--:key="promqlKeys[index-1]"-->
+                Name
-            <!--:expression-list="expressions"-->
+              </el-col>
-            <!--:index="index-1"-->
+              <el-col style="width: calc(100% - 140px);">
-            <!--:styleType="2"-->
+                <el-input v-model="name[index-1]" type="text" size="small"></el-input>
-            <!--:plugins="['metric-selector', 'metric-input', 'remove']"-->
+              </el-col>
-            <!--@change="expressionChange"-->
+              <el-col  style="width: 20px"> <i class="el-icon-minus" @click="removeExpression(index-1)"></i></el-col>
-            <!--@removeExpression="removeExpression"-->
+            </template>
-          <!--&gt;</promql-input>-->
+          </el-row>
-          <!--<el-row>-->
+          <el-row>
-            <!--<template>-->
+            <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
-              <!--<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">-->
+              Unit
-                <!--{{$t('dashboard.panel.chartForm.legend')}}&nbsp;-->
+            </el-col>
-                <!--<el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover">-->
+            <el-col style="width: calc(100% - 120px);">
-                  <!--<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-cascader filterable placeholder="" popper-class="no-style-class unit-popper-class" size="small" style="width: 100%"
-                <!--</el-popover>-->
+                            :options="unitOptions"
-              <!--</el-col>-->
+                            :props="{ expandTrigger: 'click',emitPath:false }"
-              <!--<el-col style="width: calc(100% - 120px);">-->
+                            :show-all-levels="false"
-                <!--<el-input v-model="legends[index-1]" type="text" size="small"></el-input>-->
+                            v-model="unit[index-1]"
-              <!--</el-col>-->
+            ></el-cascader>
-            <!--</template>-->
+            </el-col>
-          <!--</el-row>-->
+          </el-row>
-        <!--</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>
-
     <!-- end--表单-->
 
     <!--底部按钮-->
@@ -93,6 +117,7 @@
 
 <script>
   import promqlInput from "@/components/page/dashboard/explore/promqlInput";
+  import chartDataFormat from "@/components/charts/chartDataFormat";
   import {getUUID,resetZIndex} from "@/components/common/js/common";
   import  a from './a.png'
   import  b from './b.png'
@@ -116,6 +141,7 @@
       nodeData:{},
       moduleDataS:{}
     },
+    mixins: [rz],
     watch:{
       nodeData:{
         handler(n){
@@ -141,11 +167,14 @@
           moduleId:'',
           iconId:'',
         },
+        unitOptions: chartDataFormat.unitOptions(),
         promqlKeys:[],
         expressions: [],
         promqlCount:0,
         elementIds:[],
         legends:[],
+        name:[],
+        unit:[],
         rules:{
           moduleId:[
             { required: true, message: '请选择module', trigger: 'blur' },
@@ -154,26 +183,6 @@
             { required: true, message: '请选择icon', trigger: 'blur' },
           ],
         },
-        nodesArray:[
-          { id: 1, label: "model1",
-            image: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg',
-            shape:'image',shapeProperties:{useImageSize:false},
-            x:1,y:-63,
-          },
-          {id: 2, label: "model2", },
-          {id: 3, label: "model3",},
-          {id: 4, label: "model4", },
-          {id: 5, label: "model5",},
-          {id: 6, label: "model6",},
-          {id: 7, label: "model7",},
-
-          {id: 9, label: "model9", },
-          {id: 10, label: "model10", },
-          {id: 11, label: "model11",},
-          {id: 12, label: "model12",},
-          {id: 13, label: "model13",},
-          {id: 14, label: "model14",},
-        ],
         iconArray:[
           {id:1,image:a,imageName:"module1"},
           {id:2,image:b,imageName:"module1"},
@@ -185,6 +194,9 @@
         ],
       }
     },
+    mounted(){
+      this.addExpression()
+    },
     methods:{
       onSubmit(){
         this.$refs['form'].validate((valid) => {
@@ -192,8 +204,18 @@
             let module=this.moduleDataS.module.find(item=>item.id===this.form.moduleId);
             let img=this.iconArray.find(item=>item.id===this.form.iconId);
             let model=Object.assign({...this.form},{...module},{...img},{id:this.form.moduleId,shape:'image',shapeProperties:{useImageSize:false}},);
-            model.label=model.name
+            model.label=model.name;
-            this.$emit('addModel',model)
+            console.log(this.promqlKeys,this.expressions,this.promqlCount,this.legends,this.name,this.unit);
+            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('addModel',model);
           }
         });
 
@@ -204,6 +226,8 @@
       addExpression() {
         this.expressions.push('');
         this.legends.push('');
+        this.name.push('');
+        this.unit.push('');
         this.promqlKeys.push(getUUID());
         this.elementIds.push("");
         this.promqlCount++;
@@ -212,6 +236,8 @@
         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--;
@@ -241,6 +267,10 @@
 </script>
 
 <style scoped>
+  .el-icon-minus{
+    vertical-align: middle;
+    margin-left: 5px;
+  }
   .nz-btn-edit-ok{
     position: absolute;
     bottom: 0;

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

@@ -1,6 +1,7 @@
 <template>
   <div style="background: #F9F9F9;height: 100%">
     <div class="top-tools">
+      <!--时间选择-->
       <template>
         <div class="top-tool-main-right">
           <div class="top-tool-search relative-position margin-r-20">
@@ -14,75 +15,15 @@
       </template>
     </div>
     <div class="project-facade">
-      <div class="facade-top">
-        <div class="facade-top-left" v-loading="projectInfo.loading">
-          <div class="facade-top-title">
-            {{projectInfo.title}}
-          </div>
-          <div>
-            <span><span class="label">Id :</span>{{projectInfo.id}}</span>
-            <span><span class="label special">Name :</span>{{projectInfo.name}}</span>
-          </div>
-          <div>
-            <span><span class="label">Description :</span>{{projectInfo.remark?projectInfo.remark:'--'}}</span>
-          </div>
-          <div>
-            <span>
-              <span class="label">Alert state :</span>
-              <div class="active-icon" style="background: #B7464A 100%;"></div>{{projectInfo.alertStat[0]}}
-              <div class="active-icon" style="background: #E64E4E 100%;"></div>{{projectInfo.alertStat[1]}}
-              <div class="active-icon" style="background: #F7B500 100%;"></div>{{projectInfo.alertStat[2]}}
-            </span>
-          </div>
-          <div>
-            <span><span class="label">Module Mum :</span>{{projectInfo.moduleMum}}</span>
-          </div>
-        </div>
-        <div class="facade-top-right" v-loading="alertData.loading">
-          <div class="facade-top-title">
-            <span class="label">{{alertData.title}}</span>
-            {{alertData.sssObj.total}}
-          </div>
-          <div class="facade-top-right-content">
-            <div>
-              <el-progress
-                type="circle"
-                :percentage="(alertData.sssObj.pending/alertData.sssObj.total)*100"
-                :show-text="false"
-                :width="40"
-                color="#F5A390"
-              ></el-progress>
-              <div class="align--center">{{alertData.sssObj.pending}}</div>
-            </div>
-            <div>
-              <el-progress
-                type="circle"
-                :percentage="(alertData.sssObj.stop/alertData.sssObj.total)*100"
-                :show-text="false"
-                :width="40"
-                color="#F6B977"
-              ></el-progress>
-              <div class="align--center">{{alertData.sssObj.stop}}</div>
-            </div>
-            <div>
-              <el-progress
-                type="circle"
-                :percentage="(alertData.sssObj.other/alertData.sssObj.total)*100"
-                :show-text="false"
-                :width="40"
-                color="#EBD066"
-              ></el-progress>
-              <div class="align--center">{{alertData.sssObj.other}}</div>
-            </div>
-          </div>
-        </div>
-      </div>
       <div  class="facade-content">
+        <!--拓扑图盒子-->
         <vis-network
           :panel-id="item.id"
           :chart-data="item"
           :chart-index="0"
           :allModuleInfo="allModuleInfo"
+          :projectInfo="projectInfo"
+          :alertData="alertData"
         >
         </vis-network>
       </div>
@@ -240,56 +181,11 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-  }
+    position: relative;
-  .facade-top{
-    min-height: 138px;
-    display: flex;
-    margin: 12px 0;
-    height: calc(16% - 40px);
-    font-size: 12px;
-  }
-  .facade-top > div{
-    height: calc(100% - 40px);
-    width: 18%;
-    min-width: 280px;
-    background: #FFFFFF;
-    margin-right: 9px;
-    padding: 20px;
-  }
-  .facade-top-title{
-    font-size: 16px;
-    color: #333333;
-    font-weight: bold;
-    padding: 5px 0;
-  }
-  .facade-top-left{
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
   }
   .facade-content{
     flex: 1;
     min-height: 800px;
     width: calc(100% - 20px);
   }
-  .label{
-    padding: 0 15px;
-  }
-  .special.label{
-    margin-left: 30px;
-  }
-  .facade-top .facade-top-right{
-    width: 12%;
-    min-width: 280px;
-  }
-  .facade-top-right-content{
-    display: flex;
-    justify-content: space-around;
-    justify-items: center;
-    height: calc(100% - 30px);
-    align-items:center;
-  }
-  .align--center{
-    text-align: center;
-  }
 </style>

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

@@ -12,7 +12,7 @@
         <span class="edit-topology-remove" @click="lineDel">Remove</span>
       </span>
       <span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topologyLine">
-        <el-button @click="saveTopology">save</el-button>
+        <el-button @click="saveTopology" class="saveTopology">save</el-button>
       </span>
       <span class="edit-topology-line-cancel" v-show="selectNodeTitle&&editVisNetwork">Please select two nodes  <span class="edit-topologyCancel" @click="closeAddLine">Cancel</span></span>
     </div>
@@ -287,7 +287,7 @@
 
           interaction:{
             dragNodes: true, //是否能拖动节点
-            dragView: true, //是否能拖动画布
+            dragView: false, //是否能拖动画布
             hover: true, //鼠标移过后加粗该节点和连接线
             multiselect: false, //按 ctrl 多选
             selectable: true, //是否可以点击选择
@@ -826,4 +826,11 @@
     right: 0;
     top: 0;
   }
+  .saveTopology{
+    background: #FA901C;
+    border-radius: 4px;
+    font-size: 14px;
+    color: #FFFFFF;
+    padding: 4px 14px;
+  }
 </style>

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

@@ -20,7 +20,7 @@
           <span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
               <span></span>
               <span>
-                <span class="chart-title-text">{{chartData.title}}</span>
+                <!--<span class="chart-title-text">{{chartData.title}}</span>-->
                 <!--<span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon&#45;&#45;right"  :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>-->
               </span>
               <span>
@@ -31,6 +31,71 @@
             </span>
         </div>
         <div class="vis-network-content">
+          <!--project主要信息-->
+          <div class="facade-top" v-if="!editVisNetwork&&nodesArray.length">
+            <div class="facade-top-left" v-loading="projectInfo.loading">
+              <div class="facade-top-title">
+                {{projectInfo.title}}
+              </div>
+              <div>
+                <span><span class="label">Id :</span>{{projectInfo.id}}</span>
+                <span><span class="label special">Name :</span>{{projectInfo.name}}</span>
+              </div>
+              <div>
+                <span><span class="label">Description :</span>{{projectInfo.remark?projectInfo.remark:'--'}}</span>
+              </div>
+              <div>
+            <span>
+              <span class="label">Alert state :</span>
+              <div class="active-icon" style="background: #B7464A 100%;"></div>{{projectInfo.alertStat[0]}}
+              <div class="active-icon" style="background: #E64E4E 100%;"></div>{{projectInfo.alertStat[1]}}
+              <div class="active-icon" style="background: #F7B500 100%;"></div>{{projectInfo.alertStat[2]}}
+            </span>
+              </div>
+              <div>
+                <span><span class="label">Module Mum :</span>{{projectInfo.moduleMum}}</span>
+              </div>
+            </div>
+            <div class="facade-top-right" v-loading="alertData.loading">
+              <div class="facade-top-title">
+                <span class="label">{{alertData.title}}</span>
+                {{alertData.sssObj.total}}
+              </div>
+              <div class="facade-top-right-content">
+                <div>
+                  <el-progress
+                    type="circle"
+                    :percentage="(alertData.sssObj.pending/alertData.sssObj.total)*100"
+                    :show-text="false"
+                    :width="40"
+                    color="#F5A390"
+                  ></el-progress>
+                  <div class="align--center">{{alertData.sssObj.pending}}</div>
+                </div>
+                <div>
+                  <el-progress
+                    type="circle"
+                    :percentage="(alertData.sssObj.stop/alertData.sssObj.total)*100"
+                    :show-text="false"
+                    :width="40"
+                    color="#F6B977"
+                  ></el-progress>
+                  <div class="align--center">{{alertData.sssObj.stop}}</div>
+                </div>
+                <div>
+                  <el-progress
+                    type="circle"
+                    :percentage="(alertData.sssObj.other/alertData.sssObj.total)*100"
+                    :show-text="false"
+                    :width="40"
+                    color="#EBD066"
+                  ></el-progress>
+                  <div class="align--center">{{alertData.sssObj.other}}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!--拓扑图-->
           <topology
             :editVisNetwork="editVisNetwork"
             :nodesArray="nodesArray"
@@ -42,7 +107,6 @@
             v-loading="topologyLoading"
             @editVisNetworkChange="editVisNetworkChange"
           >
-
           </topology>
         </div>
       </div>
@@ -70,7 +134,9 @@
       chartData: {
         type: Object
       },
-      allModuleInfo:{}
+      allModuleInfo:{},
+      projectInfo:{},
+      alertData:{}
     },
     watch:{
       allModuleInfo:{
@@ -79,7 +145,21 @@
         handler(n){
           this.getNetworkData(n);
         },
-      }
+      },
+      projectInfo:{
+        immediate: true,
+        deep: true,
+        handler(n){
+          this.getNetworkData(n);
+        },
+      },
+      alertData:{
+        immediate: true,
+        deep: true,
+        handler(n){
+          this.getNetworkData(n);
+        },
+      },
     },
     data () {
       return {
@@ -144,4 +224,57 @@
   .vis-network-content{
     height: 100%;
   }
+  .facade-top{
+    min-height: 138px;
+    display: flex;
+    margin: 12px 0;
+    height: calc(16% - 40px);
+    font-size: 12px;
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    z-index: 10;
+  }
+  .facade-top > div{
+    height: calc(100% - 40px);
+    width: 18%;
+    min-width: 315px;
+    background: #FFFFFF;
+    margin-right: 9px;
+    padding: 20px;
+    border: 1px solid #FFFFFF;
+    box-shadow: 1px 2px 4px 0 rgba(0,0,0,0.12), -1px 1px 9px -1px rgba(205,205,205,0.77);
+  }
+  .facade-top-title{
+    font-size: 16px;
+    color: #333333;
+    font-weight: bold;
+    padding: 5px 0;
+  }
+  .facade-top-left{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+  .special.label{
+    margin-left: 30px;
+  }
+  .facade-top .facade-top-right{
+    width: 12%;
+    min-width: 280px;
+  }
+  .facade-top-right-content{
+    display: flex;
+    justify-content: space-around;
+    justify-items: center;
+    height: calc(100% - 30px);
+    align-items:center;
+  }
+  .align--center{
+    text-align: center;
+  }
+  .label{
+    padding: 0 15px;
+  }
+
 </style>

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

@@ -46,7 +46,7 @@
           <div class="option nz-btn nz-btn-size-normal nz-btn-style-light" @click="removeExpression" v-if="plugins.indexOf('remove') > -1"><i class="el-icon-minus"></i></div>
         </div>
       </div>
-      <div v-if="styleType == 2">
+      <div v-if="styleType == 2&&showRemove">
         <div class="option" @click="addExpression" v-if="plugins.indexOf('add') > -1"><i class="el-icon-plus"></i></div>
         <div class="option" style="margin-left: 5px; line-height: 32px;" @click="removeExpression" v-if="plugins.indexOf('remove') > -1"><i class="el-icon-minus"></i></div>
       </div>
@@ -65,7 +65,8 @@
         expressionList:{},
         plugins: {type: Array},
         styleType: Number,
-        historyParam:{type:Object}
+        historyParam:{type:Object},
+        showRemove:{type:Boolean,default:true}
       },
       data(){
         return {