feat: project大部分界面，部分交互

1.project弹框、module弹框
2.顶部菜单栏project项增加动态数据

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

@@ -37,6 +37,11 @@ html {
 .margin-b-10 {
   margin-bottom: 10px !important;
 }
+.line-100 {
+  width: 100%;
+  height: 1px;
+  background: #C0C4CC;
+}
 /*侧滑文字*/
 .el-form-item .el-form-item__label{
     font-size: 10px;
@@ -74,20 +79,24 @@ html {
   height: calc(90vh - 55px);
   width: 100%;
 }
-.sidebar-info-top {
+.sidebar-info-item:first-of-type {
   border-radius: 6px 6px 0 0;
 }
 .sidebar-info-item {
-height: 39px;
+  height: 39px;
-line-height: 39px;
+  line-height: 39px;
-padding: 0 8px 0 32px;
+  padding: 0 8px 0 32px;
-border-bottom: 1px solid #cacaca;
+  border-bottom: 1px solid #cacaca;
-cursor: pointer;
+  cursor: pointer;
-color: #5e5e5e;
+  color: #5e5e5e;
+}
+.side-bar-menu-edit {
+  line-height: 40px;
+  float: right;
 }
 .sidebar-info-item-active {
-background-color: #5e5e5e;
+  background-color: #5e5e5e;
-color: white;
+  color: white;
 }
 .sidebar-info-foot {
   border-radius: 6px 6px 0 0;
@@ -240,10 +249,10 @@ color: white;
   display: inline-block;
 }
 .right-box-form {
-  margin-top: 35px;
+  margin-top: 30px;
 }
 .right-box-form-row {
-  margin-top: 20px;
+  margin-top: 16px;
 }
 .right-box-form-label {
   margin-bottom: 8px;
@@ -257,6 +266,12 @@ color: white;
 .right-box-form-content-txt {
   padding-left: 11px;
 }
+.right-box-form-tip {
+  color: #d0d4dC;
+  font-size: 14px;
+  line-height: 20px;
+  min-height: 64px;
+}
 .right-box-form-content .el-select {
   width: 100%;
 }

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

@@ -14,16 +14,24 @@
                 </el-menu-item>
                 <el-submenu index="2">
                     <template slot="title">
-                        <div @click="jumpTo('project')">{{$t('overall.project')}}</div>
+                        <div @click="jumpToProject('project', projectData[0])">{{$t('overall.project')}}</div>
+                    </template>
+                    <template v-for="(item, index) in projectData">
+                        <el-menu-item :index="index.toString()">
+                            <div @click="jumpToProject('project', item)">
+                              <span>{{item.name}}</span>
+                              <div @click.stop="toEditProject(item)" class="menu-edit"><i class="el-icon-edit-outline"></i></div>
+                            </div>
+                        </el-menu-item>
                     </template>
                 </el-submenu>
                 <el-submenu index="3">
                     <template slot="title">
-                        <div @click="jumpTo('asset')">{{$t('overall.asset')}}</div>
+                        <div @click="jumpToAsset('asset')">{{$t('overall.asset')}}</div>
                     </template>
                     <template v-for="(item, index) in assetData">
                         <el-menu-item :index="index.toString()">
-                            <div @click="jumpTo('asset',item.id)">{{item.name}}</div>
+                            <div @click="jumpToAsset('asset',item.id)">{{item.name}}</div>
                         </el-menu-item>
                     </template>
                 </el-submenu>
@@ -46,7 +54,7 @@
                         <div @click="jumpTo('account')">{{$t('config.account.account')}}</div>
                     </el-menu-item>
                     <el-menu-item index="2">
-                        <div @click="jumpTo('promServer')">Prometheus Server</div>
+                        <div @click="jumpTo('promServer')">{{$t('config.promServer.promServerList')}}</div>
                     </el-menu-item>
                 </el-submenu>
             </el-menu>
@@ -92,13 +100,12 @@ export default {
   data() {
     return {
       language: localStorage.getItem("language"),
-      assetData: []
+      assetData: [],
+      projectData: []
     }
   },
   methods: {
-    jumpTo(data,id) {
+    jumpTo(data) {
-      this.$store.state.assetData.moduleData = data
-      this.$store.state.assetData.selectedData = id
       this.$router.push({
         path: "/" + data,
         query: {
@@ -106,6 +113,15 @@ export default {
         }
       });
     },
+    jumpToAsset(data, id) {
+      this.$store.state.assetData.moduleData = data;
+      this.$store.state.assetData.selectedData = id;
+      this.jumpTo(data);
+    },
+    jumpToProject(data, p) {
+      this.$store.commit('setProject', p);
+      this.jumpTo(data);
+    },
     changeLocal(lang) {
       localStorage.setItem("language", lang);
       window.location.reload();
@@ -117,9 +133,35 @@ export default {
         }
       })
     },
+    getProjectData() {
+      this.$get('project', this.pageObj).then(response => {
+        if (response.code == 200) {
+          this.projectData = response.data.list;
+        }
+      })
+    },
+    toEditProject(p) {
+      this.$store.commit('setProject', p);
+      this.$store.commit('projectRightBoxShow', true);
+      this.jumpTo('project');
+    }
   },
   mounted() {
-    this.getAssetData()
+    this.getAssetData();
+    this.getProjectData();
+  },
+  computed: {
+    projectListReload() {
+      return this.$store.state.projectListReload;
+    }
+  },
+  watch: {
+    projectListReloadWatch(n, o) {
+      if (n) {
+        this.getProjectData();
+        this.$store.commit('projectListReload', false);
+      }
+    }
   }
 }
 </script>
@@ -224,4 +266,8 @@ export default {
 .header-name-jiantou {
     position: static !important;
 }
+.menu-edit {
+    line-height: 36px;
+    float: right;
+}
 </style>

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

@@ -105,10 +105,20 @@ const en = {
   },
   project: {
     project: {
-      project: "Project"
+      project: "Project",
+      projectName: "Project Name",
+      editProject: "Edit Project",
+      description: "Description"
     },
     module: {
-      module: "Module"
+      module: "Module",
+      moduleName: "Module Name",
+      editModule: "Edit Module",
+      description: "Description",
+      tip: {
+        defaultEndpointSet: "Default Endpoint Set",
+        relation: "Endpoints associated with Module will reference Port/Path/Param/Params by default"
+      }
     },
     endpoint: {
       createEndpoint: "Create Endpoint",

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

@@ -46,11 +46,16 @@
 }
 
 .param-box {
-  height: 303px;
   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;
@@ -92,18 +97,20 @@
 
 /* begin--子弹框*/
 .right-sub-box {
-  width: 330px;
+  width: 380px;
-  height: calc(50%);
+  height: 520px;
   position: absolute;
   top: 380px;
   right: 100px;
   z-index: 2;
+  padding: 0 10px;
 }
 .right-sub-box .el-input-group {
-  width: 60%;
+  width: 227px;
   float: right;
   margin: 7px 0 0 0;
 }
+  /* begin--搜索框*/
 .endpoint-asset-prepend {
   border-radius: 4px 0 0 4px;
 }
@@ -128,6 +135,7 @@
 .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;
@@ -138,15 +146,104 @@
 .endpoint-asset-dropdown-item:hover {
   background-color: #3a8ee6;
 }
+  /* end--搜索框*/
+  /* begin--table*/
+.endpoint-sub-table {
+  margin-top: 25px;
+}
+.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-col {
+  display: inline-block;
+  width: 45%;
+  padding-left: 10px;
+}
+.endpoint-sub-table-paginate-all {
+  position: absolute;
+  left: 10px;
+  bottom: 17px;
+  color: #5a5a5a;
+}
+.endpoint-sub-table-body {
+  font-size: 15px;
+}
+  /* end--table*/
+
 /* end--子弹框*/
 </style>
+<style>
+  /* begin--覆盖分页组件样式*/
+  .right-sub-box .el-pagination.is-background .btn-next, .right-sub-box .el-pagination.is-background .btn-prev, .right-sub-box .el-pagination.is-background .el-pager li {
+    margin: 0 3px;
+    min-width: 25px;
+  }
+  .right-sub-box .el-pagination button, .right-sub-box .el-pagination span:not([class*=suffix]) {
+    margin: 0 3px;
+    height: 25px;
+    line-height: 25px;
+  }
+  .right-sub-box .el-pager li {
+    height: 25px;
+    line-height: 25px;
+  }
+  .right-sub-box .el-pagination.is-background .el-pager li:not(.disabled).active {
+    background-color: #656565;
+    border: 1px solid #656565;
+  }
+  .right-sub-box .el-pagination.is-background .btn-next, .right-sub-box .el-pagination.is-background .btn-prev, .right-sub-box .el-pagination.is-background .el-pager li {
+    background-color: white;
+  }
+  .right-sub-box .el-pagination button, .right-sub-box .el-pager li {
+    border: 1px solid #DADADA;
+  }
+  .right-sub-box .el-pager li.active+li {
+    border: 1px solid #DADADA;
+  }
+  .right-sub-box .el-pagination.is-background .el-pager li:not(.disabled):hover {
+    color: black;
+  }
+  .right-sub-box .el-pagination.is-background .el-pager li.active:hover {
+    color: white;
+  }
+  .endpoint-sub-table-paginate .el-pagination {
+    position: absolute;
+    right: 10px;
+    bottom: 13px;
+  }
+  .el-input-group__append {
+    cursor: pointer;
+  }
+
+  /* end--覆盖分页组件样式*/
+</style>
+
 <template>
   <div class="project">
     <div class="content-left">
-      <div class="sidebar-title">Config</div>
+      <div class="sidebar-title">{{$store.state.projectData.name}}</div>
       <div class="sidebar-info">
-        <div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">Account List</div>
+        <div
-        <div class="sidebar-info-item">Prometheus Server</div>
+          v-for="item in moduleData"
+          class="sidebar-info-item"
+          :class="{'sidebar-info-item-active': item.id == currentModule.id}"
+          @click="changeListModule(item)"
+        >
+          {{item.name}}
+          <div class="side-bar-menu-edit" @click.stop="toEditModule(item)"><i class="el-icon-edit-outline"></i></div>
+        </div>
       </div>
     </div>
     <div class="content-right">
@@ -204,7 +301,7 @@
       <div class="right-box right-box-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-top-btn right-box-top-btn-full" @click="esc(1)">
             <div class="right-box-btn-icon">
               <i class="el-icon-close"></i>
             </div>
@@ -236,7 +333,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) => {getModuleData(val.id)})" value-key="id" popper-class="config-dropdown" v-model="endpoint.project" placeholder="" v-if="rightBox.isEdit" size="small">
+              <el-select @change="((val) => {getToSelectModuleData(val.id)})" value-key="id" popper-class="config-dropdown" v-model="endpoint.project" placeholder="" v-if="rightBox.isEdit" size="small">
                 <el-option v-for="item in projectData" :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>
@@ -246,8 +343,8 @@
           <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) => {changeModule(val.id)})" value-key="id" popper-class="config-dropdown" v-model="selectedModule" placeholder="" v-if="rightBox.isEdit" size="small">
+              <el-select @change="((val) => {changeSelectedModule(val.id)})" value-key="id" popper-class="config-dropdown" v-model="selectedModule" placeholder="" v-if="rightBox.isEdit" size="small">
-                <el-option v-for="item in moduleData" :key="item.id" :label="item.name" :value="item"></el-option>
+                <el-option v-for="item in toSelectModuleData" :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>
             </div>
@@ -263,7 +360,7 @@
                 v-model="endpoint.host"
                 size="small"
               ></el-input>
-              <div @click="showSubShow" class="right-box-row-btn right-box-row-btn-active" v-if="rightBox.isEdit">
+              <div @click="showSubBox" class="right-box-row-btn right-box-row-btn-active" v-if="rightBox.isEdit">
                 <span class="el-icon-more"></span>
               </div>
               <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.host}}</div>
@@ -303,7 +400,7 @@
               <el-button class="param-btn param-btn-clear" size="mini" @click="clearAllParam">{{$t('overall.clearAll')}}</el-button>
             </div>
             <div class="right-box-form-content">
-              <div class="param-box">
+              <div class="param-box param-box-endpoint">
                 <div class="param-box-row" v-for="(item, index) in paramObj">
                   <el-input placeholder="key" class="param-box-row-key" size="mini" v-model="item.key"></el-input>
                   <span class="param-box-row-eq">=</span>
@@ -318,7 +415,7 @@
 
         <!-- begin--底部按钮-->
         <div class="right-box-bottom-btns">
-          <div @click="esc()" :class="{'right-box-bottom-btn-50': rightBox.isEdit}" class="right-box-bottom-btn right-box-bottom-btn-cancel">{{$t('overall.cancel')}}</div><div @click="save()" v-if="rightBox.isEdit" class="right-box-bottom-btn right-box-bottom-btn-50">{{endpoint.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
+          <div @click="esc(1)" :class="{'right-box-bottom-btn-50': rightBox.isEdit}" class="right-box-bottom-btn right-box-bottom-btn-cancel">{{$t('overall.cancel')}}</div><div @click="save()" v-if="rightBox.isEdit" class="right-box-bottom-btn right-box-bottom-btn-50">{{endpoint.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
         </div>
         <!-- end--底部按钮-->
       </div>
@@ -348,12 +445,241 @@
               </div>
             </div>
           </template>
-          <template slot="append"><i class="el-icon-search"></i></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 v-if="selectedAsset.id != ''" :data="selectedAsset.id" class="endpoint-sub-table-row endpoint-sub-table-row-active">
+              <div class="endpoint-sub-table-col">{{selectedAsset.host}}</div>
+              <div class="endpoint-sub-table-col">{{selectedAsset.sn}}</div>
+            </div>
+            <div @click="selectAsset(item)" :data="item.id" v-for="item in assetData" 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) => {getAssetData(currentPage)}"
+              :total="assetPageObj.total">
+            </el-pagination>
+          </div>
+        </div>
+        <!-- end--table-->
       </div>
     </transition>
     <!-- end--子弹框-->
+
+    <!-- begin--project弹框-->
+    <transition name="right-box">
+      <div class="right-box right-box-endpoint" v-if="projectRightBox.show">
+        <!-- begin--顶部按钮-->
+        <div class="right-box-top-btns">
+          <div class="right-box-top-btn right-box-top-btn-full" @click="esc(2)">
+            <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="projectSave">
+            <div class="right-box-btn-icon">
+              <i class="el-icon-edit-outline"></i>
+            </div>
+            <span>{{$t('overall.save')}}</span>
+          </div>
+          <div class="right-box-top-btn" v-if="project.id != ''">
+            <div class="right-box-btn-icon">
+              <i class="el-icon-delete"></i>
+            </div>
+            <span>{{$t('overall.delete')}}</span>
+          </div>
+        </div>
+        <!-- end--顶部按钮-->
+
+        <!-- begin--标题-->
+        <div class="right-box-title">{{projectRightBox.title}}</div>
+        <!-- end--标题-->
+
+        <!-- begin--表单-->
+        <div class="right-box-form">
+          <!--name-->
+          <div class="right-box-form-row">
+            <div class="right-box-form-label">{{$t("project.project.projectName")}}</div>
+            <div class="right-box-form-content">
+              <el-input
+                placeholder=""
+                maxlength="64"
+                show-word-limit
+                v-model="project.name"
+                size="small"
+              ></el-input>
+            </div>
+          </div>
+          <!--description-->
+          <div class="right-box-form-row">
+            <div class="right-box-form-label">{{$t("project.project.description")}}</div>
+            <div class="right-box-form-content">
+              <el-input
+                type="textarea"
+                placeholder=""
+                maxlength="1024"
+                show-word-limit
+                v-model="project.remark"
+                size="small"
+              ></el-input>
+            </div>
+          </div>
+        </div>
+
+        <!-- begin--底部按钮-->
+        <div class="right-box-bottom-btns">
+          <div @click="esc(2)" class="right-box-bottom-btn right-box-bottom-btn-cancel right-box-bottom-btn-50">{{$t('overall.cancel')}}</div><div @click="projectSave" class="right-box-bottom-btn right-box-bottom-btn-50">{{project.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
+        </div>
+        <!-- end--底部按钮-->
+      </div>
+    </transition>
+    <!-- end--project弹框-->
+
+    <!-- begin--module弹框-->
+    <transition name="right-box">
+      <div class="right-box right-box-endpoint" v-if="moduleRightBox.show">
+        <!-- begin--顶部按钮-->
+        <div class="right-box-top-btns">
+          <div class="right-box-top-btn right-box-top-btn-full" @click="esc(3)">
+            <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="moduleSave">
+            <div class="right-box-btn-icon">
+              <i class="el-icon-edit-outline"></i>
+            </div>
+            <span>{{$t('overall.save')}}</span>
+          </div>
+          <div class="right-box-top-btn" v-if="currentModule.id != ''">
+            <div class="right-box-btn-icon">
+              <i class="el-icon-delete"></i>
+            </div>
+            <span>{{$t('overall.delete')}}</span>
+          </div>
+        </div>
+        <!-- end--顶部按钮-->
+
+        <!-- begin--标题-->
+        <div class="right-box-title">{{moduleRightBox.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 value-key="id" popper-class="config-dropdown" v-model="currentModule.project" placeholder="" size="small">
+                <el-option v-for="item in projectData" :key="item.id" :label="item.name" :value="item"></el-option>
+              </el-select>
+            </div>
+          </div>
+          <!--name-->
+          <div class="right-box-form-row">
+            <div class="right-box-form-label">{{$t("project.module.moduleName")}}</div>
+            <div class="right-box-form-content">
+              <el-input
+                placeholder=""
+                maxlength="64"
+                show-word-limit
+                v-model="currentModule.name"
+                size="small"
+              ></el-input>
+            </div>
+          </div>
+          <!--description-->
+          <div class="right-box-form-row">
+            <div class="right-box-form-label">{{$t("project.module.description")}}</div>
+            <div class="right-box-form-content">
+              <el-input
+                type="textarea"
+                placeholder=""
+                maxlength="1024"
+                show-word-limit
+                v-model="currentModule.remark"
+                size="small"
+              ></el-input>
+            </div>
+          </div>
+          <!--tip-->
+          <div class="right-box-form-row">
+            <div class="right-box-form-content">
+              <div class="right-box-form-tip">
+                {{$t('project.module.tip.defaultEndpointSet')}}
+                <div class="line-100"></div>
+                {{$t('project.module.tip.relation')}}
+              </div>
+            </div>
+          </div>
+          <!--port-->
+          <div class="right-box-form-row">
+            <div class="right-box-form-label">{{$t("project.endpoint.port")}}</div>
+            <div class="right-box-form-content">
+              <el-input
+                placeholder=""
+                v-model="currentModule.port"
+                size="small"
+              ></el-input>
+            </div>
+          </div>
+          <!--path-->
+          <div class="right-box-form-row">
+            <div class="right-box-form-label">{{$t("project.endpoint.path")}}</div>
+            <div class="right-box-form-content">
+              <el-input
+                placeholder=""
+                v-model="currentModule.path"
+                size="small"
+              ></el-input>
+            </div>
+          </div>
+          <!--param-->
+          <div class="right-box-form-row">
+            <div class="right-box-form-label">
+              {{$t("project.endpoint.param")}}
+              <el-button class="param-btn param-btn-active margin-l-10" size="mini" @click="addParam"><i class="el-icon-plus"></i>{{$t('overall.add')}}</el-button>
+              <el-button class="param-btn param-btn-clear" size="mini" @click="clearAllParam">{{$t('overall.clearAll')}}</el-button>
+            </div>
+            <div class="right-box-form-content">
+              <div class="param-box param-box-module">
+                <div class="param-box-row" v-for="(item, index) in paramObj">
+                  <el-input placeholder="key" class="param-box-row-key" size="mini" v-model="item.key"></el-input>
+                  <span class="param-box-row-eq">=</span>
+                  <el-input placeholder="value" class="param-box-row-value" size="mini" v-model="item.value"></el-input>
+                  <span class="param-box-row-symbol" @click="removeParam(index)"><i class="el-icon-minus"></i></span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- begin--底部按钮-->
+        <div class="right-box-bottom-btns">
+          <div @click="esc(3)" class="right-box-bottom-btn right-box-bottom-btn-cancel right-box-bottom-btn-50">{{$t('overall.cancel')}}</div><div @click="moduleSave" class="right-box-bottom-btn right-box-bottom-btn-50">{{currentModule.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
+        </div>
+        <!-- end--底部按钮-->
+      </div>
+    </transition>
+    <!-- end--module弹框-->
   </div>
 </template>
 
@@ -362,6 +688,11 @@ export default {
   name: "project",
   data() {
     return {
+      projectRightBox: {
+        show: false,
+        title: ''
+      },
+      project: {id: '', name: '', remark: ''},
       rightBox: { //弹出框相关
         show: false,
         isEdit: false, //false查看，true编辑
@@ -371,8 +702,8 @@ export default {
         show: false,
         title: this.$t("overall.asset")
       },
-      assetSearch: {
+      assetSearch: { //侧滑框中asset的搜索相关
-        ip: '',
+        host: '',
         sn: '',
         text: '',
         label: 'IP',
@@ -383,6 +714,11 @@ export default {
         pageSize: 20,
         total:0
       },
+      assetPageObj: {
+        pageNo: 1,
+        pageSize: 11,
+        total: 0
+      },
       endpoint: {
         id: '',
         host: '',
@@ -393,10 +729,23 @@ export default {
         project: {id: '', name: ''},
         module: {id: '', name: '', param: '', paramObj: {}}
       },
-      selectedModule: {
+      moduleRightBox: {
+        show: false,
+        title: ''
+      },
+      currentModule: { //左侧列表当前选中的module
         id: '',
         name: ''
       },
+      selectedModule: { //侧滑框中选中的module
+        id: '',
+        name: ''
+      },
+      selectedAsset: { //侧滑框中选中的asset
+        id: '',
+        host: '',
+        sn: ''
+      },
       tableTitle: [
         {
           label: this.$t("project.endpoint.endpointId"),
@@ -431,23 +780,30 @@ export default {
         }
       ],
       endPointTableData: [],
-      projectData: [],
+      projectData: [], //侧滑框中可选的project
-      moduleData: [],
+      moduleData: [], //左侧列表的module信息
-      paramObj: []
+      toSelectModuleData: [], //侧滑框中可选的module
+      paramObj: [], //侧滑框中的param信息
+      assetData: [] //侧滑框中可选的asset
     }
   },
   methods: {
-    showSubShow: function() {
+    // endpoint弹框中asset子弹框控制
+    showSubBox: function() {
       this.rightSubBox.show = !this.rightSubBox.show;
+      this.selectedAsset = this.endpoint.asset;
     },
+    // table数据
     getEndPointTableData: function() {
+      this.$set(this.pageObj, 'moduleId', this.currentModule.id);
       this.$get('endpoint', this.pageObj).then(response => {
         if (response.code === 200) {
           for (var i = 0; i < response.data.list.length; i++) {
             try {
               var tempObj = JSON.parse(response.data.list[i].param);
             } catch (err) {
-
+              console.info(response.data.list[i]);
+              console.info(err);
             }
             response.data.list[i].paramObj = [];
             for (let k in tempObj) {
@@ -459,6 +815,7 @@ export default {
         }
       });
     },
+    // 获取module、endpoint弹框中project下拉框数据
     getProjectData: function() {
       this.$get('project').then(response => {
         if (response.code === 200) {
@@ -466,76 +823,204 @@ export default {
         }
       });
     },
-    getModuleData: function(projectId) {
+    // 获取endpoint弹框中的asset子弹框里asset列表数据
-      // module选择改变时，记录旧module的id值(endpoint.moduleId)和对应的endpoint的param(endpoint.和对应的endpoint.param)，
+    getAssetData: function(currentPage) {
-      // 然后改变，改变后param用module的值，如果改回旧module，则恢复endpoint的param
+      if (currentPage) {
-      this.selectedModule = {id: '', name: ''};
+        this.assetPageObj.pageNo = currentPage;
-      this.$get('module', {projectId: projectId}).then(response => {
+      } else {
+        this.assetPageObj.pageNo = 1;
+      }
+      this.$get('asset', this.assetPageObj).then(response => {
         if (response.code === 200) {
+          this.assetData = response.data.list;
+          this.assetPageObj.total = response.data.total;
+        }
+      });
+    },
+    // endpoint弹框中的asset子弹框里asset选择事件
+    selectAsset: function(obj) {
+      this.selectedAsset = obj;
+    },
+    // endpoint弹框中的asset子弹框搜索
+    searchAsset: function() {
+      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.getAssetData(false);
+    },
+    // 获取左侧module列表数据
+    getModuleData: function() {
+      this.$get('module', {projectId: this.$store.state.projectData.id}).then(response => {
+        if (response.code === 200) {
+          this.moduleData = response.data.list;
           for (var i = 0; i < response.data.list.length; i++) {
-            var tempObj = JSON.parse(response.data.list[i].param);
+            try {
+              var tempObj = JSON.parse(response.data.list[i].param);
+            } catch (err) {
+              console.info(response.data.list[i]);
+              console.info(err);
+            }
             response.data.list[i].paramObj = [];
             for (let k in tempObj) {
               response.data.list[i].paramObj.push({key: k, value: tempObj[k]})
             }
           }
-          this.moduleData = response.data.list;
+          if (this.moduleData.length > 0) {
+            this.currentModule = this.moduleData[0];
+            this.getEndPointTableData();
+          } else {
+            this.endPointTableData = [];
+            this.pageObj.total = 0;
+          }
+
         }
       });
     },
-    changeModule: function(moduleId) {
+    // 获取endpoint弹框中module下拉框数据
+    getToSelectModuleData: function(projectId) {
+      this.selectedModule = {id: '', name: ''};
+      this.$get('module', {projectId: projectId}).then(response => {
+        if (response.code === 200) {
+          for (var i = 0; i < response.data.list.length; i++) {
+            try {
+              var tempObj = JSON.parse(response.data.list[i].param);
+            } catch(err) {
+              console.info(response.data.list[i]);
+              console.info(err);
+            }
+            response.data.list[i].paramObj = [];
+            for (let k in tempObj) {
+              response.data.list[i].paramObj.push({key: k, value: tempObj[k]})
+            }
+          }
+          this.toSelectModuleData = response.data.list;
+        }
+      });
+    },
+    // 左侧module列表点击事件
+    changeListModule: function(module) {
+      this.currentModule = Object.assign({}, module);
+      this.moduleRightBox.show = false;
+      this.getEndPointTableData();
+    },
+    // endpoint弹框中module下拉框点击事件
+    changeSelectedModule: function(moduleId) {
       if (moduleId == this.endpoint.moduleId) {
-        this.paramObj = JSON.parse(JSON.stringify(this.endpoint.paramObj));
+        try {
+          this.paramObj = JSON.parse(JSON.stringify(this.endpoint.paramObj));
+        } catch(err) {
+          console.info(this.endpoint.paramObj);
+          console.info(err);
+        }
       } else {
-        this.paramObj = JSON.parse(JSON.stringify(this.selectedModule.paramObj));
+        try {
+          this.paramObj = JSON.parse(JSON.stringify(this.selectedModule.paramObj));
+        } catch(err) {
+          console.info(this.selectedModule.paramObj);
+          console.info(err);
+        }
       }
     },
-    toEdit: function(u) {
+    // 打开endpoint编辑页
-      this.getModuleData(u.project.id);
+    toEdit: function(endpoint) {
-      this.selectedModule = Object.assign({}, u.module);
+      this.getToSelectModuleData(endpoint.project.id);
-      this.endpoint = Object.assign({}, u);
+      this.selectedModule = Object.assign({}, endpoint.module);
-      //this.paramObj = this.endpoint.paramObj;
+      this.endpoint = Object.assign({}, endpoint);
-      this.paramObj = JSON.parse(JSON.stringify(this.endpoint.paramObj));
+      try {
+        this.paramObj = JSON.parse(JSON.stringify(this.endpoint.paramObj));
+      } catch(err) {
+        console.info(this.endpoint.paramObj);
+        console.info(err);
+      }
+
       this.rightBox.isEdit = true;
-      this.rightBox.title = this.$t("project.endpoint.editEndpoint") + "  ID：" + u.id;
+      this.rightBox.title = this.$t("project.endpoint.editEndpoint") + "  ID：" + endpoint.id;
       this.rightBox.show = true;
     },
+    // 打开module编辑页
+    toEditModule: function(module) {
+      this.currentModule = Object.assign({}, module);
+      try {
+        this.paramObj = JSON.parse(JSON.stringify(this.currentModule.paramObj));
+      } catch(err) {
+        console.info(this.currentModule.paramObj);
+        console.info(err);
+      }
+      this.moduleRightBox.show = true;
+      this.getEndPointTableData();
+      this.moduleRightBox.title = this.$t('project.module.editModule') + "  ID：" + module.id;
+    },
+    // 删除endpoint
     del: function(u) {
     },
+    // 打开endpoint新增页
     toAdd: function() {
       this.cleanEndpoint();
       this.paramObj = [];
-      this.moduleData = [];
+      this.toSelectModuleData = [];
       this.rightBox.isEdit = true;
       this.rightBox.title = this.$t("project.endpoint.createEndpoint");
       this.rightBox.show = true;
     },
+    // 打开endpoint详情页
     detail: function(u) {
       this.endpoint = Object.assign({}, u);
       this.rightBox.isEdit = false;
       this.rightBox.title = this.$t("project.endpoint.endpoint") + "  ID：" + u.id;
       this.rightBox.show = true;
     },
+    // endpoint弹框保存或编辑
     saveOrToEdit: function() {
       if (!this.rightBox.isEdit) {
         this.rightBox.isEdit = true;
         this.rightBox.title = this.$t("project.endpoint.editEndpoint") + "  ID：" + this.endpoint.id;
       }
     },
+    // 保存project
+    projectSave: function() {
+      this.$put('project', this.project).then(response => {
+        if (response.code === 200) {
+          this.$store.commit('projectListReload', true);
+          this.projectRightBox.show = false;
+        }
+      });
+    },
+    // 保存module
+    moduleSave: function() {
+
+    },
+    // 保存endpoint
     save: function() {
 
     },
+    // 清除module、endpoint弹框中的param
     clearAllParam: function() {
       this.paramObj = [];
     },
+    // 新增module、endpoint弹框中的param
     addParam: function() {
       this.paramObj.push({key: '', value: ''});
     },
+    // 移除单个module、endpoint弹框中的param
     removeParam: function(index) {
       this.paramObj.splice(index, 1);
     },
-    esc: function() {
+    // 关闭右侧弹框
-      this.rightBox.show = false;
+    esc: function(type) {
+      if (type == 1) {
+        this.rightBox.show = false;
+      }
+      if (type == 2) {
+        this.$store.commit('projectRightBoxShow', false);
+      }
+      if (type == 3) {
+        this.moduleRightBox.show = false;
+      }
     },
     cleanEndpoint: function() {
       this.endpoint = {
@@ -557,15 +1042,35 @@ export default {
       this.pageObj.pageSize = val;
       this.getEndPointTableData();
     },
-
+    // endpoint弹框的子弹框顶部搜索条件选中事件
     dropdownSelect: function(label) {
       this.assetSearch.label = label;
       this.assetSearch.dropdownShow = false;
     }
   },
   mounted: function() {
-    this.getEndPointTableData();
+    this.getModuleData();
     this.getProjectData();
+    this.getAssetData();
+  },
+  computed:{
+    sProject() {
+      return this.$store.state.projectData;
+    },
+    projectBoxShow() {
+      return this.$store.state.projectBoxShow;
+    }
+  },
+  watch: {
+    sProject(n, o) {
+      this.project = Object.assign({}, n);
+      this.projectRightBox.title = this.$t("project.project.editProject") + "  ID：" + n.id;
+      this.getModuleData();
+    },
+    projectBoxShow(n, o) {
+      console.info(n)
+      this.projectRightBox.show = n;
+    }
   }
 }
 </script>

nezha-fronted/src/store/index.js

@@ -7,14 +7,30 @@ const store = new Vuex.Store({
     assetData:{
       selectedData:'',
       moduleData:'',
-    }
+    },
+    projectData: {
+      id: '',
+      name: ''
+    },
+    projectBoxShow: false,
+    projectListReload: false
   },
   getters: {
   },
   mutations: {
+    setProject(state, project) {
+      state.projectData = Object.assign({}, project);
+      state.projectBoxShow = false;
+    },
+    projectRightBoxShow(state, show) {
+      state.projectBoxShow = show;
+    },
+    projectListReload(state, reload) {
+      state.projectListReload = reload;
+    }
   },
   actions: {
   }
 });
 
-export default store;
+export default store;