feat: metric列表、部分addEndpoint弹框

1.Project-Module-Metric
2.Endpoint新增弹框的一小部分

nezha-fronted/src/assets/css/main.css

@@ -3,6 +3,10 @@
     padding: 0;
 }
 
+[v-cloak] {
+  display: none;
+}
+
 body {
     height: 100%;
 }
@@ -42,6 +46,9 @@ html {
   height: 1px;
   background: #C0C4CC;
 }
+.right-child-box .line-100 {
+  background: #DCDFE6;
+}
 /*侧滑文字*/
 .el-form-item .el-form-item__label{
     font-size: 10px;
@@ -213,9 +220,13 @@ html {
 }
 
   /*此处自定义弹框尺寸，不同功能可能需要的尺寸不一样，需自行添加*/
-.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-endpoint {
+.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-edit-endpoint {
   width: 520px;
   height: calc(100% - 100px);
+}
+.right-box-add-endpoint {
+  width: 720px;
+  height: calc(100% - 100px);
 }
   /* begin--右侧弹框--顶部按钮*/
 .right-box-top-btns {
@@ -251,6 +262,7 @@ html {
 }
 .right-box-form {
   margin-top: 30px;
+  height: 100%;
 }
 .right-box-form-row {
   margin-top: 16px;
@@ -343,7 +355,7 @@ html {
   /* end--右侧弹框--底部按钮*/
 /* end--右侧弹框*/
 /* begin--endpoint->子弹框asset搜索框前缀和后缀*/
-.right-sub-box .el-input-group__append, .right-sub-box .el-input-group__prepend {
+.right-sub-box .el-input-group__append, .right-sub-box .el-input-group__prepend, .assets-box .el-input-group__append, .assets-box .el-input-group__prepend {
   background-color: #656565;
   color: white;
   vertical-align: middle;
@@ -353,12 +365,6 @@ html {
   border: none;
   font-size: 13px;
 }
-.right-sub-box .el-input-group__prepend {
-  border-radius: 4px 0 0 4px;
-}
-.right-sub-box .el-input-group__append {
-  border-radius: 0 4px 4px 0;
-}
 /* end--endpoint->子弹框asset搜索框前缀和后缀*/
 /* begin--自定义可编辑的el-select下拉框样式*/
 .config-dropdown {

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

@@ -15,7 +15,7 @@
                         </div>
                     </template>
                     <template v-for="(item, index) in createMenu">
-                        <el-menu-item :index="'0-' + index.toString()">
+                        <el-menu-item :index="'0-' + index">
                             <div @click="createBox(item)">
                                 <span>{{item.label}}</span>
                             </div>
@@ -32,7 +32,7 @@
                         <div @click="jumpToProject(projectData[0])">{{$t('overall.project')}}</div>
                     </template>
                     <template v-for="(item, index) in projectData">
-                        <el-menu-item :index="'2-' + index.toString()">
+                        <el-menu-item :index="'2-' + index">
                             <div @click="jumpToProject(item)">
                               <span>{{item.name}}</span>
                               <div @click.stop="toEditProject(item)" class="menu-edit"><i class="el-icon-edit-outline"></i></div>
@@ -45,19 +45,19 @@
                         <div @click="jumpToAsset('asset')">{{$t('overall.asset')}}</div>
                     </template>
                     <template v-for="(item, index) in assetData">
-                        <el-menu-item :index="'3-' + index.toString()">
+                        <el-menu-item :index="'3-' + index">
                             <div @click="jumpToAsset('asset',item.id)">{{item.name}}</div>
                         </el-menu-item>
                     </template>
                 </el-submenu>
-              <el-submenu index="4">
+              <el-submenu index="4-0">
                 <template slot="title">
                   <div @click="jumpTo('alertList')">{{$t('overall.alert')}}</div>
                 </template>
-                <el-menu-item index="4-0">
+                <el-menu-item index="4-1">
                   <div @click="jumpTo('alertList')">{{$t('alert.alertList')}}</div>
                 </el-menu-item>
-                <el-menu-item index="4-1">
+                <el-menu-item index="4-2">
                   <div @click="jumpTo('alertConfig')">{{$t('alert.alertConfig')}}</div>
                 </el-menu-item>
               </el-submenu>
@@ -109,7 +109,7 @@
 
         <project-box :project="editProject" @reload="projectReload" ref="projectBox"></project-box>
         <module-box :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
-        <edit-endpoint-box :currentProject="currentProject" :currentModule="currentModule" :endpoint="editEndpoint" @reload="" ref="endpointBox"></edit-endpoint-box>
+        <!--<add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" @reload="" ref="addEndpointBox"></add-endpoint-box>-->
 
     </div>
 </template>
@@ -184,7 +184,7 @@ export default {
         this.$refs.moduleBox.show(true);
         this.editModule = {id: '', name: '', project: this.$store.state.currentProject, port: '', path: '', param: '', paramObj: []};
       } else if (item.type == 3) {
-        //this.$refs.endpointBox.show(true);
+        this.$refs.addEndpointBox.show(true);
       }
     },
     jumpToAsset(data, id) {

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

@@ -7,6 +7,7 @@
       @prev-click="prev"
       @next-click="next"
       @current-change="current"
+      :current-page="pageObj.pageNo"
       :page-sizes="[20, 50, 100, 300]"
       :page-size="20"
       layout="prev, pager, next, jumper, sizes, total"
@@ -48,6 +49,7 @@ export default {
       this.list = this.$refs.page.$el.children[2].children;
       for (let i = 0; i < this.list.length; i++) {
         const element = this.list[i];
+        console.info(element)
       }
     },
   }

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

@@ -0,0 +1,502 @@
+<template>
+  <transition name="right-box">
+    <div class="right-box right-box-add-endpoint" v-if="rightBox.show">
+      <!-- begin--顶部按钮-->
+      <div class="right-box-top-btns">
+        <div class="right-box-top-btn right-box-top-btn-full" @click="esc">
+          <div class="right-box-btn-icon">
+            <i class="el-icon-close"></i>
+          </div>
+          <span>{{$t('overall.esc')}}</span>
+        </div>
+        <div class="right-box-top-btn right-box-top-btn-full" @click="save">
+          <div class="right-box-btn-icon">
+            <i class="el-icon-edit-outline"></i>
+          </div>
+          <span>{{$t('overall.save')}}</span>
+        </div>
+      </div>
+      <!-- end--顶部按钮-->
+
+      <!-- begin--标题-->
+      <div class="right-box-title">{{rightBox.title}}</div>
+      <!-- end--标题-->
+
+      <!-- begin--表单-->
+      <div class="right-box-form">
+        <!--project-->
+        <div class="right-box-form-row">
+          <div class="right-box-form-label">{{$t("project.project.project")}}</div>
+          <div class="right-box-form-content">
+            <el-select @change="((val) => {})" value-key="id" popper-class="config-dropdown" v-model="currentProject" placeholder="" size="small">
+              <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>
+            </el-select>
+          </div>
+        </div>
+        <!--module-->
+        <div class="right-box-form-row">
+          <div class="right-box-form-label">{{$t("project.module.module")}}</div>
+          <div class="right-box-form-content">
+            <el-select @change="((val) => {})" value-key="id" popper-class="config-dropdown" v-model="currentModule" placeholder="" size="small">
+              <el-option v-for="item in moduleList" :key="item.id" :label="item.name" :value="item"></el-option>
+            </el-select>
+          </div>
+        </div>
+        <!--asset和endpoint-->
+        <div class="right-box-form-row right-child-boxes">
+          <div class="right-child-box assets-box">
+            <!-- begin--标题-->
+            <div class="right-child-box-title">{{$t('asset.asset')}}</div>
+            <!-- end--标题-->
+            <!-- begin--搜索框-->
+            <el-input placeholder="" v-model="assetSearch.text">
+              <template slot="prepend">
+                <div class="endpoint-asset-prepend">
+                  <div class="endpoint-asset-label">
+                    <span class="endpoint-asset-label-txt">{{assetSearch.label}}</span>
+                    <span @click="assetSearch.dropdownShow = !assetSearch.dropdownShow">
+                      <i v-if="assetSearch.dropdownShow" class="el-icon-arrow-up"></i>
+                      <i v-if="!assetSearch.dropdownShow" class="el-icon-arrow-down"></i>
+                    </span>
+                  </div>
+                  <div class="endpoint-asset-dropdown" v-if="assetSearch.dropdownShow">
+                    <div @click="dropdownSelect('IP')" class="endpoint-asset-dropdown-item">IP</div>
+                    <div @click="dropdownSelect('SN')" class="endpoint-asset-dropdown-item">SN</div>
+                  </div>
+                </div>
+              </template>
+              <template slot="append"><i @click="searchAsset" class="el-icon-search"></i></template>
+            </el-input>
+            <!--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">
+                <div @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>
+            <!-- end--table-->
+          </div>
+          <div class="right-child-box endpoints-box">
+            <div class="endpoints-box-module-info"></div>
+            <div class="endpoints-box-endpoints-info">
+
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- end--表单-->
+
+      <!-- begin--底部按钮-->
+      <div class="right-box-bottom-btns">
+        <div @click="esc" class="right-box-bottom-btn right-box-bottom-btn-cancel right-box-bottom-btn-50">{{$t('overall.cancel')}}</div><div @click="save" class="right-box-bottom-btn right-box-bottom-btn-50">{{$t('overall.create')}}</div>
+      </div>
+      <!-- end--底部按钮-->
+
+    </div>
+  </transition>
+</template>
+
+<script>
+  export default {
+    name: "endpointBox",
+    props: {
+      endpoint: Object,
+      currentProject: Object,
+      currentModule: Object
+    },
+    data() {
+      return {
+        rightBox: {show: false, title: this.$t('project.endpoint.createEndpoint'),isEdit: false},
+        editParamBox: {show: false}, //param编辑弹框
+        viewParamBox: {show: false}, //param查看弹框
+        assetSearch: {host: '', sn: '', text: '', label: 'IP', dropdownShow: false}, //侧滑框中asset的搜索相关
+        assetPageObj: {pageNo: 1, pageSize: 9999},
+        selectedAssets: [], //侧滑框中选中的asset
+        selectedAsset: {id: '', host: '', sn: ''}, //endpoint侧滑框中选中的asset
+        projectList: [],
+        moduleList: [],
+        assetList: []
+      }
+    },
+    methods: {
+      show(show) {
+        this.rightBox.show = show;
+      },
+
+      //子弹框控制
+      showEditParamBox(show) {
+        this.editParamBox.show = show;
+      },
+      showViewParamBox(show) {
+        this.viewParamBox.show = show;
+      },
+
+      /*关闭弹框*/
+      esc() {
+        this.rightBox.show = false;
+        this.editParamBox.show = false;
+        this.viewParamBox.show = false;
+      },
+
+      // 新增param
+      addParam() {
+        this.endpoint.paramObj.push({key: '', value: ''});
+      },
+
+      // 移除单个param
+      removeParam(index) {
+        this.endpoint.paramObj.splice(index, 1);
+      },
+
+      //将param转为json字符串格式
+      paramToJson(param) {
+        let tempParam = {};
+        if (!param) {
+          param = [];
+        }
+        for (let i = 0; i < param.length; i++) {
+          eval('tempParam.' + param[i].key + '="' + param[i].value + '"');
+        }
+        let jsonString = JSON.stringify(tempParam);
+        if (jsonString == '{}') {
+          return "";
+        } else {
+          return jsonString;
+        }
+      },
+
+      /*获取project列表*/
+      getProjectList() {
+        this.$get('project', {pageSize: 999, pageNo: 1}).then(response => {
+          if (response.code === 200) {
+            this.projectList = response.data.list;
+          }
+        });
+      },
+
+      // 获取endpoint弹框中的asset子弹框里asset列表数据
+      getAssetList() {
+        this.$get('asset', this.assetPageObj).then(response => {
+          if (response.code === 200) {
+            this.assetList = response.data.list;
+          }
+        });
+      },
+
+      //endpoint弹框中的asset子弹框搜索
+      searchAsset() {
+        if (this.assetSearch.label == 'IP') {
+          this.assetSearch.host = this.assetSearch.text;
+          this.assetSearch.sn = '';
+        } else if (this.assetSearch.label == 'SN') {
+          this.assetSearch.sn = this.assetSearch.text;
+          this.assetSearch.host = '';
+        }
+        this.assetPageObj = Object.assign({}, this.assetPageObj, this.assetSearch);
+        this.getAssetList();
+      },
+
+      // endpoint弹框中的asset子弹框里asset选择事件
+      selectAsset(obj) {
+        this.selectedAsset = obj;
+        this.endpoint.host = obj.host;
+        this.endpoint.assetId = obj.id;
+      },
+
+      // 获取endpoint弹框中module下拉框数据
+      getModuleList(projectId) {
+        this.$get('module', {projectId: projectId}).then(response => {
+          if (response.code === 200) {
+            for (let i = 0; i < response.data.list.length; i++) {
+              try {
+                let tempObj = JSON.parse(response.data.list[i].param);
+                response.data.list[i].paramObj = [];
+                for (let k in tempObj) {
+                  response.data.list[i].paramObj.push({key: k, value: tempObj[k]})
+                }
+              } catch(err) {
+                console.info(response.data.list[i], err);
+              }
+            }
+            this.moduleList = response.data.list;
+          }
+        });
+      },
+
+      //保存endpoint
+      save() {
+        this.endpoint.moduleId = this.currentModule.id;
+        this.endpoint.projectId = this.currentProject.id;
+        this.endpoint.param = this.paramToJson(this.endpoint.paramObj);
+        this.$put('endpoint', this.endpoint).then(response => {
+          if (response.code === 200) {
+            this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+            this.esc();
+            this.$emit("reload");
+          } else {
+            this.$message.error(response.msg);
+          }
+        });
+      },
+
+      //删除endpoint
+      del() {
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          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.rightBox.show = false;
+            } else {
+              this.$message.error(response.msg);
+            }
+          });
+        });
+      },
+      // endpoint弹框的asset子弹框顶部搜索条件选中事件
+      dropdownSelect(label) {
+        this.assetSearch.label = label;
+        this.assetSearch.dropdownShow = false;
+      },
+    },
+    created() {
+      this.getProjectList();
+      this.getAssetList();
+    },
+    mounted() {
+      this.getModuleList(this.currentProject.id);
+    },
+    watch: {
+      endpoint(n, o) {
+        if (n && n.id) {
+          this.rightBox.title = this.$t("project.endpoint.editEndpoint") + "  ID：" + n.id;
+        } else {
+          this.rightBox.title = this.$t("project.endpoint.createEndpoint");
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  /* start--param*/
+  .param-btn {
+    float: right;
+    height: 27px;
+    margin-top: -3px;
+  }
+  .param-btn-active {
+    background-color: #656565;
+    color: white;
+    border: 1px solid #656565;
+  }
+  .param-btn-active:hover, .param-btn-active:focus {
+    background-color: #656565;
+    color: white;
+  }
+  .param-btn-clear {
+    background-color: #D4D4D4;
+    border: 1px solid #D4D4D4;
+    color: white;
+  }
+  .param-btn-clear:hover, .param-btn-clear:focus {
+    background-color: #D4D4D4;
+    color: white;
+  }
+
+  .param-box {
+    border: 1px solid #DCDFE6;
+    border-radius: 4px;
+    padding: 0 10px;
+  }
+  .param-box-endpoint {
+    height: 325px;
+  }
+  .param-box-module {
+    height: 227px;
+  }
+  .param-box-row {
+    padding: 7px 0 0 0;
+    position: relative;
+  }
+  .param-box-row:last-of-type {
+    padding-bottom: 7px;
+  }
+  .param-box-row-key, .param-box-row-value {
+    display: inline-block;
+    width: 41.5%;
+  }
+  .param-box-row-eq {
+    display: inline-block;
+    width: 22px;
+    text-align: center;
+    height: 32px;
+    line-height: 32px;
+    color: #c4c7cF;
+  }
+  .param-box-row-symbol {
+    font-size: 12px;
+    color: #c4c7cF;
+    border: 1px solid #c4c7cF;
+    text-align: center;
+    height: 12px;
+    width: 14px;
+    display: inline-block;
+    position: absolute;
+    top: 17px;
+    right: 25px;
+    cursor: pointer;
+  }
+  .param-box-row-symbol>i {
+    position: absolute;
+    top: 1px;
+    right: 1px;
+  }
+  /* end--param*/
+
+  /* begin--小盒子*/
+  .right-child-boxes {
+    height: calc(100% - 279px);
+    position: relative;
+  }
+  .endpoint-to-right-symbol {
+    position: absolute;
+    top: calc(50% - 28px);
+    left: 274px;
+    cursor: pointer;
+    font-size: 18px;
+  }
+  .right-child-box {
+    height: 100%;
+  }
+  .assets-box {
+    float: left;
+    border: 1px solid #DCDFE6;
+    border-radius: 4px;
+    width: 260px;
+  }
+  .endpoints-box {
+    margin: 0 0 0 280px;
+    background-color: gray;
+    width: 440px;
+  }
+  .right-child-box .el-input-group {
+    width: 187px;
+    float: right;
+    margin: 7px 5px 0 0;
+  }
+  .right-child-box-title {
+    padding: 9px 0 0 4px;
+    display: inline-block;
+  }
+
+
+  /* end--小盒子*/
+
+  /* begin--子弹框*/
+  .right-sub-box {
+    width: 380px;
+    height: 520px;
+    position: absolute;
+    right: 80px;
+    z-index: 2;
+    padding: 0 10px;
+  }
+  .right-sub-box .el-input-group {
+    width: 227px;
+    float: right;
+    margin: 7px 0 0 0;
+  }
+  /* begin--搜索框*/
+  .endpoint-asset-prepend {
+    border-radius: 4px 0 0 4px;
+  }
+  .endpoint-asset-label {
+    line-height: 26px;
+    height: 26px;
+  }
+  .endpoint-asset-dropdown {
+    position: absolute;
+    top: 27px;
+    background-color: #656565;
+    border-radius: 4px;
+    width: 52px;
+    left: 0;
+  }
+  .endpoint-asset-dropdown-item {
+    text-align: center;
+    line-height: 22px;
+    height: 22px;
+    cursor: default;
+  }
+  .endpoint-asset-label-txt {
+    display: inline-block;
+    width: 19px;
+    text-align: center;
+  }
+  .endpoint-asset-dropdown-item:first-of-type {
+    border-radius: 4px 4px 0 0;
+  }
+  .endpoint-asset-dropdown-item:last-of-type {
+    border-radius: 0 0 4px 4px;
+  }
+  .endpoint-asset-dropdown-item:hover {
+    background-color: #3a8ee6;
+  }
+  /* end--搜索框*/
+  /* begin--table*/
+  .endpoint-sub-table {
+    padding-top: 15px;
+    height: 100%;
+  }
+  .line-100 {
+    margin-bottom: 3px;
+  }
+  .endpoint-sub-table-head {
+    line-height: 28px;
+    height: 30px;
+  }
+  .endpoint-sub-table-row {
+    line-height: 28px;
+    height: 30px;
+    color: #656565;
+  }
+  .endpoint-sub-table-row-active {
+    background-color: #dadada;
+  }
+  .endpoint-sub-table-row-selected {
+    background-color: #656565;
+    color: white;
+  }
+  .endpoint-sub-table-col {
+    display: inline-block;
+    width: calc(50% - 15px);
+    padding-left: 10px;
+  }
+  .endpoint-sub-table-paginate-all {
+    position: absolute;
+    left: 10px;
+    bottom: 17px;
+    color: #5a5a5a;
+  }
+  .endpoint-sub-table-body {
+    font-size: 15px;
+    overflow: auto;
+    height: calc(100% - 95px);
+  }
+  /* end--table*/
+
+  /* end--子弹框*/
+</style>

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

@@ -1,6 +1,6 @@
 <template>
   <transition name="right-box">
-    <div class="right-box right-box-endpoint" v-if="rightBox.show" @click.stop>
+    <div class="right-box right-box-edit-endpoint" v-if="rightBox.show">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
         <div class="right-box-top-btn right-box-top-btn-full" @click="esc">
@@ -41,7 +41,7 @@
         <div class="right-box-form-row">
           <div class="right-box-form-label">{{$t("project.project.project")}}</div>
           <div class="right-box-form-content">
-            <el-select @change="((val) => {})" value-key="id" popper-class="config-dropdown" v-model="currentProject" placeholder="" v-if="rightBox.isEdit" size="small">
+            <el-select @change="((val) => {changeProject(val);})" value-key="id" popper-class="config-dropdown" v-model="currentProject" placeholder="" v-if="rightBox.isEdit" size="small">
               <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>
             </el-select>
             <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.project.name}}</div>
@@ -51,7 +51,7 @@
         <div class="right-box-form-row">
           <div class="right-box-form-label">{{$t("project.module.module")}}</div>
           <div class="right-box-form-content">
-            <el-select @change="((val) => {})" value-key="id" popper-class="config-dropdown" v-model="currentModule" placeholder="" v-if="rightBox.isEdit" size="small">
+            <el-select @change="((val) => {changeModule(val);})" value-key="id" popper-class="config-dropdown" v-model="currentModule" placeholder="" v-if="rightBox.isEdit" size="small">
               <el-option v-for="item in moduleList" :key="item.id" :label="item.name" :value="item"></el-option>
             </el-select>
             <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.module.name}}</div>
@@ -136,12 +136,12 @@
           <!-- begin--标题-->
           <div class="right-box-title">{{subBox.title}}</div>
           <!-- end--标题-->
-            <div class="right-box-top-btn right-box-top-btn-full" @click="subEsc">
+          <div class="right-box-top-btn right-box-top-btn-full" @click="subEsc">
-              <div class="right-box-btn-icon">
+            <div class="right-box-btn-icon">
-                <i class="el-icon-close"></i>
+              <i class="el-icon-close"></i>
-              </div>
-              <span>{{$t('overall.esc')}}</span>
             </div>
+            <span>{{$t('overall.esc')}}</span>
+          </div>
           <!-- begin--搜索框-->
           <el-input placeholder="" v-model="assetSearch.text">
             <template slot="prepend">
@@ -279,10 +279,27 @@
         this.$get('project', {pageSize: 999, pageNo: 1}).then(response => {
           if (response.code === 200) {
             this.projectList = response.data.list;
+            if ((!this.currentProject || !this.currentProject.id) && this.projectList.length > 0) {
+              this.currentProject = this.projectList[0];
+            }
           }
         });
       },
 
+      //project下拉框点击事件
+      changeProject(project) {
+        this.currentModule = {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []};
+        this.getModuleList(project.id);
+      },
+
+      //project下拉框点击事件
+      changeModule(module) {
+        this.currentModule = module;
+        this.endpoint.port = module.port;
+        this.endpoint.path = module.path;
+        this.endpoint.paramObj = module.paramObj;
+      },
+
       // 获取endpoint弹框中的asset子弹框里asset列表数据
       getAssetList(currentPage) {
         if (currentPage) {
@@ -383,7 +400,7 @@
       this.getAssetList();
     },
     mounted() {
-      this.getModuleList(this.currentProject.id);
+      setTimeout(()=>{this.getModuleList(this.currentProject.id);}, 100);
     },
     watch: {
       endpoint(n, o) {
@@ -525,7 +542,7 @@
   /* end--搜索框*/
   /* begin--table*/
   .endpoint-sub-table {
-    margin-top: 25px;
+    padding-top: 25px;
   }
   .line-100 {
     margin-bottom: 3px;

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

@@ -1,6 +1,6 @@
 <template>
   <transition name="right-box">
-    <div class="right-box right-box-endpoint" v-if="rightBox.show" @click.stop>
+    <div class="right-box right-box-module" v-if="rightBox.show">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
         <div class="right-box-top-btn right-box-top-btn-full" @click="esc">

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

@@ -1,6 +1,6 @@
 <template>
   <transition name="right-box">
-    <div class="right-box right-box-endpoint" v-if="rightBox.show" @click.stop>
+    <div class="right-box right-box-project" v-if="rightBox.show">
       <!-- begin--顶部按钮-->
       <div class="right-box-top-btns">
         <div class="right-box-top-btn right-box-top-btn-full" @click="esc">

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

@@ -50,7 +50,12 @@
                             </div>
                             <div class="select_info_list" v-if="val.type == 'dc'">
                                 <ul>
-                                    <li v-for="(item,key) in dcSelect" :key="key" @click="selectDc(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li>
+                                    <li v-for="(item,key) in dcSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li>
+                                </ul>
+                            </div>
+                            <div class="select_info_list" v-if="val.type == 'asset'">
+                                <ul>
+                                    <li v-for="(item,key) in assetSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.host}}</li>
                                 </ul>
                             </div>
                             <!-- 新增日志模块action下拉选择 -->
@@ -125,8 +130,8 @@
             return {
                 select_conditionsName:'',
                 selectInfoList: searchSelectInfo,
-                select_title:this.$t('i18n.overall.searchList.select_title'),
+                select_title: '',
-                other:this.$t('i18n.overall.other'),
+                other: '',
                 localStorage_display: true,
                 input_list: true,
                 change_sreach_show: true,
@@ -134,6 +139,7 @@
                 historyList: [],
                 actionSelect:[],
                 dcSelect: [], //数据中心
+                assetSelect: [], //资产
                 schemaTypeSelect:[], //日志检索Protocol下拉菜单
                 TypeSelect:[],//Protocol二层下拉菜单
                 secondShow:'',//二层显示控制
@@ -213,16 +219,19 @@
                         this.input_list = !this.input_list
                 },*/
               //dc
-              selectDc(column, selectItem, e) {
+              selectObject(column, selectItem, e) {
                 this.stop_click(e);
                 this.select_list.forEach(val=>{
-                  console.info(val)
+                  if (val.type == 'dc'){
-                  if(val.type == 'dc'){
                     val.val = selectItem.name;
                     val.valnum = selectItem.id;
                     val.valString = '';
+                  } else if (val.type == 'asset') {
+                    val.val = selectItem.host;
+                    val.valnum = selectItem.id;
+                    val.valString = '';
                   }
-                })
+                });
                 //this.select_list.push({type: 'dc', val: selectItem.name, valnum: selectItem.id});
                 this.input_sreach = '';
                 this.sreach_num = this.select_list.length;
@@ -281,6 +290,13 @@
                 }
               });
             },
+            getAssetData() {
+              this.$get('asset', {pageNo: 1, pageSize: 999}).then(response => {
+                if (response.code === 200) {
+                  this.assetSelect = response.data.list;
+                }
+              });
+            },
             //点击确认选择下拉内容
             tr_selectInfo(selectLabel,value,label,e){
                 this.stop_click(e);
@@ -468,6 +484,8 @@
                           objectInfo[val.label] = val.valnum;
                         } else if (val.type == 'dc') {
                           objectInfo.idcId = val.valnum;
+                        } else if (val.type == 'asset') {
+                          objectInfo.assetId = val.valnum;
                         } else {
                             objectInfo[val.label] = val.val;
                         }
@@ -913,7 +931,7 @@
                     type:type,
                     label:label,
                     disabled:disabled
-                  })
+                  });
                   this.change_sreach_show = false
                   this.sreach_num = this.select_list.length-1
                   this.input_list = !this.input_list
@@ -960,6 +978,9 @@
             if (this.$route.path == '/promServer') {
               this.getDcData();
             }
+            if (this.$route.path == '/project') {
+              this.getAssetData();
+            }
             JSON.parse(JSON.stringify(this.searchMsg.searchLabelList)).forEach(val => {
               if(val.name=='Protocol'){
                   this.schemaTypeSelect=val.doc.data

nezha-fronted/src/components/page/config/account.vue

@@ -328,29 +328,15 @@ export default {
       }],
       searchMsg: { //给搜索框子组件传递的信息
         zheze_none: true,
-        searchLabelList: [/*{
+        searchLabelList: [{
-          id: 1,
-          name: 'ID',
-          type: 'input',
-          label: 'userId',
-          disabled: false
-        },*/{
           id: 10,
           name: this.$t('config.account.account'),
           type: 'input',
           label: 'username',
           disabled: false
-        }/*,{
+        }],
-          id: 11,
-          name: 'E-mail',
-          type: 'input',
-          label: 'email',
-          disabled: false
-        }*/],
-      },
-      searchLabel: { //搜索参数
-
       },
+      searchLabel: {}, //搜索参数
     }
   },
   methods: {

nezha-fronted/src/components/page/config/promServer.vue

@@ -466,6 +466,7 @@ export default {
       this.getTableData();
     },
     search: function(searchObj) {
+      console.info(searchObj);
       this.searchLabel = {};
       for (let item in searchObj) {
         if (searchObj[item]) {

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

@@ -15,21 +15,55 @@
       </div>
     </div>
 
-    <div class="content-right">
+    <!--metrics-->
+    <div class="content-right" v-show="tableShow == 2">
+      <div class="top-tools">
+        <el-button-group>
+          <el-button @click="tableShow = 1" class="top-tool-btn top-tool" size="mini">
+            <span class="top-tool-btn-txt">{{$t('project.endpoint.endpoint')}}</span>
+          </el-button>
+          <el-button class="top-tool-btn top-tool top-tool-btn-active" size="mini">
+            <span class="top-tool-btn-txt">{{$t('project.metrics.metrics')}}</span>
+          </el-button>
+        </el-button-group>
+        <div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="metricSearchMsg" @search="metricSearch"></search-input></div>
+      </div>
+      <el-table
+        :data="metricsTableData"
+        border
+        height="calc(100% - 65px)"
+        style="width: 100%;">
+        <el-table-column
+          v-for="(item, index) in metricsTableTitle"
+          v-if="item.show"
+          :width="item.width"
+          :key="`col-${index}`"
+          :label="item.label"
+        >
+          <template slot-scope="scope" :column="item">
+            <span>{{scope.row[item.prop]}}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <Pagination v-cloak :pageObj="metricPageObj" @pageNo='metricsPageNo' @pageSize='metricsPageSize' ref="metricPagination"></Pagination>
+    </div>
+
+    <!--endpoint-->
+    <div class="content-right" v-show="tableShow == 1">
       <div class="top-tools">
         <el-button-group>
           <el-button @click="" class="top-tool-btn top-tool top-tool-btn-active" size="mini">
             <span class="top-tool-btn-txt">{{$t('project.endpoint.endpoint')}}</span>
           </el-button>
-          <el-button disabled @click="" class="top-tool-btn top-tool" size="mini">
+          <el-button @click="tableShow = 2" class="top-tool-btn top-tool" size="mini">
             <span class="top-tool-btn-txt">{{$t('project.metrics.metrics')}}</span>
           </el-button>
         </el-button-group>
-        <el-button disabled @click.stop="toCreateEndpoint" class="top-tool-btn top-tool-btn-active top-tool margin-l-10 top-tool-right" size="mini">
+        <el-button @click="toCreateEndpoint" class="top-tool-btn top-tool-btn-active top-tool margin-l-10 top-tool-right" size="mini">
           <span><i class="el-icon-plus"></i></span>
           <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
         </el-button>
-        <div class="top-tool-search top-tool top-tool-right"></div>
+        <div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch"></search-input></div>
       </div>
       <el-table
         :data="endpointTableData"
@@ -60,11 +94,12 @@
           </template>
         </el-table-column>
       </el-table>
-      <Pagination :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="Pagination"></Pagination>
+      <Pagination v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
     </div>
 
     <module-box :currentProject="currentProject" :module="editModule" @reload="getModuleList" ref="moduleBox"></module-box>
-    <edit-endpoint-box :currentProject="currentProject" :currentModule="currentModule" :endpoint="editEndpoint" @reload="getEndPointTableData" ref="editEndpointBox"></edit-endpoint-box>
+    <edit-endpoint-box :currentProject="currentProject" :currentModule="currentModule" :endpoint="editEndpoint" @reload="getEndpointTableData" ref="editEndpointBox"></edit-endpoint-box>
+    <add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" :endpoint="editEndpoint" @reload="getEndpointTableData" ref="addEndpointBox"></add-endpoint-box>
   </div>
 </template>
 
@@ -73,6 +108,7 @@ export default {
   name: "project2",
   data() {
     return {
+      tableShow: 1, // 1.endpoint; 2.metrics
       editEndpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: '', paramObj: []},
       endpointTableTitle: [
         {
@@ -108,20 +144,76 @@ export default {
         pageSize: 20,
         total:0
       },
+      metricsTableTitle: [
+        {
+          label: "ID",
+          prop: 'id',
+          show: true,
+          width: 100
+        },
+        {
+          label: this.$t("project.metrics.name"),
+          prop: 'metric',
+          show: true,
+        },
+        {
+          label: this.$t("project.metrics.type"),
+          prop: 'type',
+          show: true,
+        },
+        {
+          label: this.$t("project.metrics.description"),
+          prop: 'help',
+          show: true,
+        },
+      ],
+      metricsTableData: [],
+      metricPageObj: {
+        pageNo: 1,
+        pageSize: 20,
+        total: 0
+      },
       moduleList: [],
       projectList: [],
       currentProject: {id: '', name: '', remark: ''}, //endpoint弹框、module列表用来回显project
       editModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //编辑的module
       currentModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //endpoint弹框用来回显module
-      searchLabel: {moduleId: ''}, //endpoint搜索参数
+      endpointSearchLabel: {moduleId: ''}, //endpoint搜索参数
+      metricSearchLabel: {moduleId: ''}, //metrics搜索参数
+      endpointSearchMsg: { //给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 1,
+          name: "ID",
+          type: 'input',
+          label: 'id',
+          disabled: false
+        }, {
+          id: 11,
+          name: this.$t('asset.asset'),
+          type: 'asset',
+          label: 'asset',
+          disabled: false
+        }],
+      },
+      metricSearchMsg: { //给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 12,
+          name: 'Metric',
+          type: 'input',
+          label: 'metric',
+          disabled: false
+        }],
+      },
     }
   },
   methods: {
-    getEndPointTableData() {
+    getEndpointTableData() {
-      this.searchLabel.moduleId = this.currentModule.id;
+      this.endpointSearchLabel.moduleId = this.currentModule.id;
-      this.$set(this.searchLabel, 'pageNo', this.endpointPageObj.pageNo);
+      this.$set(this.endpointSearchLabel, 'pageNo', this.endpointPageObj.pageNo);
-      this.$set(this.searchLabel, 'pageSize', this.endpointPageObj.pageSize);
+      this.$set(this.endpointSearchLabel, 'pageSize', this.endpointPageObj.pageSize);
-      this.$get('endpoint', this.searchLabel).then(response => {
+      this.$get('endpoint', this.endpointSearchLabel).then(response => {
         if (response.code === 200) {
           for (let i = 0; i < response.data.list.length; i++) {
             try {
@@ -139,13 +231,32 @@ export default {
         }
       });
     },
+    getMetricsTableData() {
+      this.metricSearchLabel.moduleId = this.currentModule.id;
+      this.$set(this.metricSearchLabel, 'pageNo', this.metricPageObj.pageNo);
+      this.$set(this.metricSearchLabel, 'pageSize', this.metricPageObj.pageSize);
+      this.$get('metric', this.metricPageObj).then(response => {
+        if (response.code === 200) {
+          this.metricsTableData = response.data.list;
+          this.metricPageObj.total = response.data.total;
+        }
+      });
+    },
     endpointPageNo(val) {
       this.endpointPageObj.pageNo = val;
-      this.getEndPointTableData();
+      this.getEndpointTableData();
     },
     endpointPageSize(val) {
       this.endpointPageObj.pageSize = val;
-      this.getEndPointTableData();
+      this.getEndpointTableData();
+    },
+    metricsPageNo(val) {
+      this.metricPageObj.pageNo = val;
+      this.getMetricsTableData();
+    },
+    metricsPageSize(val) {
+      this.metricPageObj.pageSize = val;
+      this.getMetricsTableData();
     },
 
     // 获取左侧module列表数据
@@ -201,15 +312,21 @@ export default {
       this.rightBoxHandler(3);
       this.$refs.editEndpointBox.toEdit(true);
       this.editEndpoint = JSON.parse(JSON.stringify(endpoint));
+      if (!this.editEndpoint.paramObj) {
+        this.$set(this.editEndpoint, 'paramObj', []);
+      }
     },
 
     toCreateEndpoint() {
-      
+      this.$refs.addEndpointBox.show(true);
     },
 
     //查看endpoint详情
     endpointDetail(endpoint) {
       this.editEndpoint = JSON.parse(JSON.stringify(endpoint));
+      if (!this.editEndpoint.paramObj) {
+        this.$set(this.editEndpoint, 'paramObj', []);
+      }
       this.rightBoxHandler(3);
       this.$refs.editEndpointBox.toEdit(false);
     },
@@ -227,7 +344,28 @@ export default {
       }
       this.rightBoxHandler(2);
     },
-    
+
+    //搜索
+    endpointSearch: function(searchObj) {
+      this.endpointSearchLabel = {};
+      for (let item in searchObj) {
+        if (searchObj[item]) {
+          this.$set(this.endpointSearchLabel, item, searchObj[item]);
+        }
+      }
+      this.getEndpointTableData();
+    },
+    //搜索
+    metricSearch: function(searchObj) {
+      this.metricSearchLabel = {};
+      for (let item in searchObj) {
+        if (searchObj[item]) {
+          this.$set(this.metricSearchLabel, item, searchObj[item]);
+        }
+      }
+      this.getMetricsTableData();
+    },
+
     //控制弹框状态 type  1:project; 2:module; 3:editEndponit; 4:addEndpoint;
     rightBoxHandler(type) {
       if (type == 1) {
@@ -266,10 +404,11 @@ export default {
   created() {
     this.currentProject = this.$store.state.currentProject;
     this.getModuleList();
+    this.getMetricsTableData();
   },
   mounted() {
     setTimeout(()=>{
-      this.getEndPointTableData();
+      this.getEndpointTableData();
     }, 200);
   },
   computed: {
@@ -285,10 +424,14 @@ export default {
       this.getModuleList();
     },
     currentModule(n, o) {
+      this.metricPageObj.pageNo = 1;
+      this.endpointPageObj.pageNo = 1;
       if (n && n.id) {
-        this.getEndPointTableData();
+        this.getEndpointTableData();
+        this.getMetricsTableData();
       } else {
         this.endpointTableData = [];
+        this.metricsTableData = [];
       }
     }
   }
@@ -520,7 +663,7 @@ export default {
     right: 10px;
     bottom: 13px;
   }
-  .el-input-group__append {
+  .el-input-group__append>i {
     cursor: pointer;
   }
 

nezha-fronted/src/main.js

@@ -18,13 +18,15 @@ import Pagination from "./components/common/pagination"; //引入全局分页组
 import searchInput from "./components/common/searchInput"; //搜索框组件
 import projectBox from './components/common/rightBox/projectBox'; //project弹框组件
 import moduleBox from './components/common/rightBox/moduleBox'; //module弹框组件
-import editEndpointBox from './components/common/rightBox/endpointBox'; //endpoint弹框组件
+import editEndpointBox from './components/common/rightBox/editEndpointBox'; //endpoint弹框组件
+import addEndpointBox from './components/common/rightBox/addEndpointBox'; //endpoint弹框组件
 
 Vue.component("Pagination", Pagination);
 Vue.component("searchInput", searchInput);
 Vue.component("project-box", projectBox);
 Vue.component("module-box", moduleBox);
 Vue.component("edit-endpoint-box", editEndpointBox);
+Vue.component("add-endpoint-box", addEndpointBox);
 
 Vue.prototype.$axios = axios;
 Vue.prototype.$post = post;