feat: 页面部分样式抽取、project部分功能、部分前后端交互

1.config、alert页面样式抽取
2.project部分静态页面
3.config、alert部分前后端交互

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

@@ -12,6 +12,31 @@ html {
 .content-box {
   height: 100%;
 }
+/*通用*/
+.margin-l-5 {
+  margin-left: 5px !important;
+}
+.margin-r-5 {
+  margin-right: 5px !important;
+}
+.margin-t-5 {
+  margin-top: 5px !important;
+}
+.margin-b-5 {
+  margin-bottom: 5px !important;
+}
+.margin-l-10 {
+  margin-left: 10px !important;
+}
+.margin-r-10 {
+  margin-right: 10px !important;
+}
+.margin-t-10 {
+  margin-top: 10px !important;
+}
+.margin-b-10 {
+  margin-bottom: 10px !important;
+}
 /*侧滑文字*/
 .el-form-item .el-form-item__label{
     font-size: 10px;
@@ -27,6 +52,126 @@ html {
     width: 90%;
 }
 
+/* begin--左侧列表*/
+.content-left {
+  float: left;
+  width: 322px;
+  height: 100%;
+  background-color: #eeeeee;
+  border-right: 1px solid #dadada;
+  padding: 0 12px 0 11px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+.sidebar-title {
+  padding: 20px 0 0 15px;
+  color: #5e5e5e;
+}
+.sidebar-info {
+  margin-top: 27px;
+  border: 1px solid #cacaca;
+  border-radius: 6px;
+  height: calc(90vh - 55px);
+  width: 100%;
+}
+.sidebar-info-top {
+  border-radius: 6px 6px 0 0;
+}
+.sidebar-info-item {
+height: 39px;
+line-height: 39px;
+padding: 0 8px 0 32px;
+border-bottom: 1px solid #cacaca;
+cursor: pointer;
+color: #5e5e5e;
+}
+.sidebar-info-item-active {
+background-color: #5e5e5e;
+color: white;
+}
+.sidebar-info-foot {
+  border-radius: 6px 6px 0 0;
+}
+/* end--左侧列表*/
+
+/* begin--右侧内容*/
+  /* begin--顶部工具栏*/
+.top-tools {
+  padding: 22px 0 13px 0;
+}
+.top-tools .el-button--mini {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+.top-tools .top-tool {
+  float: left;
+}
+.top-tools .top-tool-right {
+  float: right;
+}
+.top-tools .top-tool-search {
+  width: 220px;
+}
+.top-tools .el-button-group {
+  float: left;
+}
+.top-tools .top-tool-btn {
+  border-radius: 5px;
+  width: 100px;
+}
+.top-tools .top-tool-btn:focus, .top-tools .top-tool-btn:hover {
+  color: #606266;
+  background-color: white;
+}
+.top-tools .top-tool-btn-active {
+  color: white;
+  background-color: #656565;
+}
+.top-tools .top-tool-btn-active:focus, .top-tools .top-tool-btn-active:hover {
+  color: white;
+  background-color: #656565;
+}
+.top-tools .top-tool-btn-txt {
+  font-size: 14px;
+}
+  /* end--顶部工具栏*/
+  /* start--内容*/
+.content-right>.el-table{
+  border-radius: 4px;
+  border: 1px solid #D7D7D7;
+  margin-top: 30px;
+}
+.content-right {
+  height: calc(100% - 131px);
+  margin-left: 322px;
+  padding: 0 15px 0 25px;
+}
+  /* end--内容*/
+  /* start--分页*/
+.pagination {
+  padding-top: 18px;
+  text-align: center;
+}
+  /* end--分页*/
+  /* begin--右弹框滑入滑出动画*/
+@keyframes slide-in-from-right {
+  from {right: -800px}
+  to {right: 0}
+}
+@keyframes slide-out-to-right {
+  from {right: 0}
+  to {right: -800px}
+}
+.right-box-enter-active {
+  animation: slide-in-from-right 0.4s;
+}
+.right-box-leave-active {
+  animation: slide-out-to-right 0.4s;
+}
+  /* end--右弹框滑入滑出动画*/
+/* end--右侧内容*/
+
+/* start--自定义可编辑的el-select下拉框样式*/
 .config-dropdown {
   width: 550px;
 }
@@ -53,3 +198,4 @@ html {
 .config-dropdown-error-message {
   color: #F98D9A;
 }
+/* end--自定义可编辑的el-select下拉框样式*/

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

@@ -29,13 +29,13 @@
                 </el-submenu>
               <el-submenu index="4">
                 <template slot="title">
-                  <div @click="jumpTo('alarmList')">{{$t('overall.alarm')}}</div>
+                  <div @click="jumpTo('alertList')">{{$t('overall.alert')}}</div>
                 </template>
                 <el-menu-item index="1">
-                  <div @click="jumpTo('alarmList')">{{$t('alarm.alarmList')}}</div>
+                  <div @click="jumpTo('alertList')">{{$t('alert.alertList')}}</div>
                 </el-menu-item>
                 <el-menu-item index="2">
-                  <div @click="jumpTo('alarmConfig')">{{$t('alarm.alarmConfig')}}</div>
+                  <div @click="jumpTo('alertConfig')">{{$t('alert.alertConfig')}}</div>
                 </el-menu-item>
               </el-submenu>
                 <el-submenu index="5">

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

@@ -3,7 +3,7 @@ const cn = {
   overall: {
     dashboard: '仪表盘',
     project: '工程',
-    alarm: "告警",
+    alert: "告警",
     asset: '资产',
     config: '设置',
     create: '新增',
@@ -12,7 +12,9 @@ const cn = {
     esc: '取消',
     cancel: '取消',
     save: '保存',
-    search: '搜索'
+    search: '搜索',
+    add: '新增',
+    option: "操作"
   },
   asset: {
     tableTitle: {
@@ -22,7 +24,7 @@ const cn = {
       ip: 'IP',
       assetState: '资产状态',
       module: 'Module',
-      alarm: 'Alarm',
+      alert: 'alert',
       dataCenter: '数据中心',
       cabinet: '机柜',
       model: '型号',
@@ -36,7 +38,7 @@ const cn = {
       projectName: '项目名称',
       moduleName: 'Module Name',
       endPoint: 'EndPoint',
-      alarm: 'Alarm',
+      alert: 'alert',
     },
   },
   config: {
@@ -62,11 +64,12 @@ const cn = {
       editProm: "修改Prometheus Server"
     },
   },
-  alarm: {
+  alert: {
-    alarmList: "告警列表",
+    alert: "告警",
-    alarmConfig: "告警设置",
+    alertList: "告警列表",
+    alertConfig: "告警设置",
     list: {
-      alarmName: "告警名称",
+      alertName: "告警名称",
       linkedId: "关联ID",
       severity: "告警级别",
       type: "类型",
@@ -78,13 +81,26 @@ const cn = {
       charts: "图表",
 
       //表内容
-      projectAlarm: "Project Alarm",
+      projectalert: "Project Alert",
-      moduleAlarm: "Module Alarm",
+      modulealert: "Module Alert",
-      deviceAlarm: "Device Alarm",
+      devicealert: "Device Alert",
       pending: "Pending",
       expired: "Expired"
     }
   },
+  project: {
+    endpoint: {
+      endpoint: "Endpoint",
+      endpointId: "Endpoint ID",
+      host: "Host",
+      port: "Port",
+      param: "Param",
+      path: "Path",
+      asset: "Asset",
+      lastUpdate: "Last Update",
+    },
+    metrics: "Metrics",
+  },
   ...zhLocale
 }
 

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

@@ -3,7 +3,7 @@ const en = {
   overall:{
     dashboard:'dashboard',
     project:'project',
-    alarm: "alarm",
+    alert: "alert",
     asset:'asset',
     config:'config',
     create: 'Create',
@@ -12,7 +12,9 @@ const en = {
     esc: 'Esc',
     cancel: 'Cancel',
     save: 'Save',
-    search: 'Search'
+    search: 'Search',
+    add: "Add",
+    option: "Option"
   },
   asset:{
     tableTitle: {
@@ -22,7 +24,7 @@ const en = {
       ip: 'IP',
       assetState: '资产状态',
       module: 'Module',
-      alarm: 'Alarm',
+      alert: 'alert',
       dataCenter: '数据中心',
       cabinet: '机柜',
       model: '型号',
@@ -36,11 +38,13 @@ const en = {
       projectName: '项目名称',
       moduleName: 'Module Name',
       endPoint: 'EndPoint',
-      alarm: 'Alarm',
+      alert: 'alert',
     },
   },
   config: {
+    config: "Config",
     account: {
+      accountList: "Account List",
       //列表表头
       account: "Account",
       language: "Language",
@@ -56,16 +60,18 @@ const en = {
       notCurrentlySupport: 'Not currently supported'
     },
     promServer: {
+      promServerList: "Prometheus Server",
       //侧滑框
       promId: "Prometheus Server ID",
       createProm: "Create Prometheus Server",
       editProm: "Edit Prometheus Server"
     },
   },
-  alarm: {
+  alert: {
-    alarmList: "Alarm List",
+    alert: "Alert",
-    alarmConfig: "Alarm Config",
+    alertList: "Alert List",
-    alarmName: "Alarm Name",
+    alertConfig: "Alert Config",
+    alertName: "Alert Name",
     severity: "Severity",
     description: "Desc",
     summary: "Summary",
@@ -79,9 +85,9 @@ const en = {
       charts: "Charts",
 
       //表内容
-      projectAlarm: "Project Alarm",
+      projectalert: "Project Alert",
-      moduleAlarm: "Module Alarm",
+      modulealert: "Module Alert",
-      deviceAlarm: "Device Alarm",
+      devicealert: "Device Alert",
       pending: "Pending",
       expired: "Expired"
     },
@@ -91,11 +97,26 @@ const en = {
       expr: "Expr",
       for: "For",
       option: "Option",
-      alarmConfig: "Alarm Config",
+      alertConfig: "Alert Config",
-      createAlarmConfig: "Create Alarm Config",
+      createalertConfig: "Create Alert Config",
-      editAlarmConfig: "Edit Alarm Config",
+      editalertConfig: "Edit Alert Config",
     }
   },
+  project: {
+    endpoint: {
+      createEndpoint: "Create Endpoint",
+      editEndpoint: "Edit Endpoint",
+      endpoint: "Endpoint",
+      endpointId: "Endpoint ID",
+      host: "Host",
+      port: "Port",
+      param: "Param",
+      path: "Path",
+      asset: "Asset",
+      lastUpdate: "Last Update",
+    },
+    metrics: "Metrics"
+  },
   ...enLocale
 }
 

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

@@ -55,10 +55,4 @@ export default {
 </script>
 
 <style>
-.pagination {
-  display: inline-block;
-  margin-top: 10px;
-  margin-left: 50%;
-  transform: translate(-50%);
-}
 </style>

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

@@ -2,43 +2,6 @@
   .account {
     height: 100%;
   }
-  .content-left {
-    float: left;
-    width: 370px;
-    height: 100%;
-  }
-  .sidebar-title {
-    padding-left: 30px;
-    padding-top: 20px;
-  }
-
-  .sidebar-info {
-    margin-top: 20px;
-    border: 1px solid #acacac;
-    border-radius: 8px;
-    height: calc(90vh - 55px);
-    width: calc(100% - 30px);
-  }
-
-  .sidebar-info-header {
-    background: #acacac;
-    text-align: center;
-    line-height: 50px;
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
-    height: 60px;
-    width: 100%;
-  }
-
-  .sidebar-info-footer {
-    padding-top: 15px;
-    padding-left: 15px;
-  }
-  .account-list {
-    height: calc(100% - 131px);
-    margin-left: 370px;
-    padding: 0 15px 0 0;
-  }
   .account-list-option {
     cursor: pointer;
     display: inline-block;
@@ -56,11 +19,6 @@
   .account-list-option .el-icon-view:hover {
     color: #409EFF;
   }
-  .account-list-search {
-    float: right;
-    width: 220px;
-    margin: 15px 0;
-  }
   /* begin--右侧弹框*/
   .right-box {
     position: fixed;
@@ -182,41 +140,29 @@
   }
   /* end--右侧弹框--底部按钮*/
   /* end--右侧弹框*/
-
-  /* begin--右弹框滑入滑出动画*/
-  @keyframes slide-in-from-right {
-    from {right: -800px}
-    to {right: 0}
-  }
-  @keyframes slide-out-to-right {
-    from {right: 0}
-    to {right: -800px}
-  }
-  .right-box-enter-active {
-    animation: slide-in-from-right 0.4s;
-  }
-  .right-box-leave-active {
-    animation: slide-out-to-right 0.4s;
-  }
-  /* end--右弹框滑入滑出动画*/
 </style>
 <template>
     <div class="account">
         <div class="content-left">
-            <div class="sidebar-title">
+            <div class="sidebar-title">{{$t('alert.alert')}}</div>
-                <div>Config</div>
+            <div class="sidebar-info">
-                <div class="sidebar-info">
+                <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('alertList')">{{$t('alert.alertList')}}</div>
-                    <div class="sidebar-info-footer" v-if="sidebarState"></div>
+                <div class="sidebar-info-item sidebar-info-item-active">{{$t('alert.alertConfig')}}</div>
-                </div>
             </div>
         </div>
-        <div class="account-list">
+        <div class="content-right">
-            <el-input
+            <div class="top-tools">
-              class="account-list-search"
+              <el-button @click="toAdd" class="top-tool-btn top-tool-btn-active top-tool top-tool-right margin-l-10" size="mini">
-              type="text"
+                <span><i class="el-icon-plus"></i></span>
-              :placeholder="$t('overall.search')"
+                <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
-              size="small"
+              </el-button>
-            ></el-input>
+              <el-input
+                  class="top-tool-search top-tool top-tool-right"
+                  type="text"
+                  :placeholder="$t('overall.search')"
+                  size="mini"
+                ></el-input>
+            </div>
             <el-table
                   :data="tableData"
                   border
@@ -236,21 +182,6 @@
                             <span @click="detail(scope.row)" class="account-list-option"><i class="el-icon-view"></i></span>
                             <span @click="edit(scope.row)" class="account-list-option"><i class="el-icon-edit-outline"></i></span>
                         </div>
-                      <!--<span v-else-if="item.prop == 'lang'">
-                          {{scope.row[item.prop] == 'en' ? 'English' : ''}}
-                          {{scope.row[item.prop] == 'zh' ? '中文' : ''}}
-                          {{scope.row[item.prop] == 'ru' ? 'русский' : ''}}
-                      </span>
-                      <span v-else-if="item.prop == 'receiver'">
-                          <template v-for="rec in scope.row[item.prop]">{{rec.name}}&nbsp;&nbsp;</template>
-                      </span>
-                      <span v-else-if="item.prop == 'status'">
-                          <el-switch
-                            v-model="scope.row[item.prop]"
-                            active-value="1"
-                            inactive-value="0">
-                          </el-switch>
-                      </span>-->
                         <span v-else>{{scope.row[item.prop]}}</span>
                     </template>
                 </el-table-column>
@@ -291,7 +222,7 @@
                 <!-- begin--表单-->
                 <div class="right-box-form">
                     <div class="right-box-form-row">
-                        <div class="right-box-form-label">{{$t('alarm.config.name')}}</div>
+                        <div class="right-box-form-label">{{$t('alert.config.name')}}</div>
                         <div class="right-box-form-content">
                             <el-input
                               v-if="rightBox.isEdit"
@@ -306,7 +237,7 @@
                         </div>
                     </div>
                     <div class="right-box-form-row">
-                        <div class="right-box-form-label">{{$t('alarm.config.expr')}}</div>
+                        <div class="right-box-form-label">{{$t('alert.config.expr')}}</div>
                         <div class="right-box-form-content">
                             <el-input
                               type="textarea"
@@ -319,7 +250,7 @@
                         </div>
                     </div>
                     <div class="right-box-form-row">
-                        <div class="right-box-form-label">{{$t('alarm.config.for')}}</div>
+                        <div class="right-box-form-label">{{$t('alert.config.for')}}</div>
                         <div class="right-box-form-content">
                             <el-input
                               type="text"
@@ -332,7 +263,7 @@
                         </div>
                     </div>
                     <div class="right-box-form-row">
-                        <div class="right-box-form-label">{{$t('alarm.severity')}}</div>
+                        <div class="right-box-form-label">{{$t('alert.severity')}}</div>
                         <div class="right-box-form-content">
                             <el-input
                               type="text"
@@ -345,7 +276,7 @@
                         </div>
                     </div>
                     <div class="right-box-form-row">
-                        <div class="right-box-form-label">{{$t('alarm.summary')}}</div>
+                        <div class="right-box-form-label">{{$t('alert.summary')}}</div>
                         <div class="right-box-form-content">
                             <el-input
                               type="text"
@@ -358,7 +289,7 @@
                         </div>
                     </div>
                     <div class="right-box-form-row">
-                        <div class="right-box-form-label">{{$t('alarm.description')}}</div>
+                        <div class="right-box-form-label">{{$t('alert.description')}}</div>
                         <div class="right-box-form-content">
                             <el-input
                               type="textarea"
@@ -450,31 +381,31 @@ export default {
           show: true,
           width: 80
         }, {
-          label: this.$t("alarm.alarmName"),
+          label: this.$t("alert.alertName"),
           prop: 'alertName',
           show: true,
         }, {
-          label: this.$t("alarm.config.expr"),
+          label: this.$t("alert.config.expr"),
           prop: 'expr',
           show: true,
         }, {
-          label: this.$t("alarm.config.for"),
+          label: this.$t("alert.config.for"),
           prop: 'last',
           show: true,
         }, {
-          label: this.$t('alarm.severity'),
+          label: this.$t('alert.severity'),
           prop: 'severity',
           show: true,
         }, {
-          label: this.$t('alarm.description'),
+          label: this.$t('alert.description'),
           prop: 'description',
           show: true,
         }, {
-          label: this.$t('alarm.config.receiver'),
+          label: this.$t('alert.config.receiver'),
           prop: 'receiver',
           show: true,
         }, {
-          label: this.$t('alarm.config.option'),
+          label: this.$t('alert.config.option'),
           prop: 'option',
           show: true,
         }
@@ -511,27 +442,27 @@ export default {
     edit: function(u) {
       this.alertRule = Object.assign({}, u);
       this.rightBox.isEdit = true;
-      this.rightBox.title = this.$t("alarm.config.editAlarmConfig") + "  ID：" + u.id;
+      this.rightBox.title = this.$t("alert.config.editalertConfig") + "  ID：" + u.id;
       this.rightBox.show = true;
     },
     del: function(u) {
     },
+    toAdd: function() {
+      this.cleanAlertRule();
+      this.rightBox.isEdit = true;
+      this.rightBox.title = this.$t("alert.config.createalertConfig");
+      this.rightBox.show = true;
+    },
     detail: function(u) {
       this.alertRule = Object.assign({}, u);
       this.rightBox.isEdit = false;
-      this.rightBox.title = this.$t("alarm.config.alarmConfig") + "  ID：" + u.id;
+      this.rightBox.title = this.$t("alert.config.alertConfig") + "  ID：" + u.id;
-      this.rightBox.show = true;
-    },
-    add: function() {
-      this.cleanAlertRule();
-      this.rightBox.isEdit = true;
-      this.rightBox.title = this.$t("alarm.config.createAlarmConfig");
       this.rightBox.show = true;
     },
     saveOrToEdit: function() {
       if (!this.rightBox.isEdit) {
         this.rightBox.isEdit = true;
-        this.rightBox.title = this.$t("alarm.config.editAlarmConfig") + "  ID：" + this.alertRule.id;
+        this.rightBox.title = this.$t("alert.config.editalertConfig") + "  ID：" + this.alertRule.id;
       }
     },
     toEditReceiver: function(item) {
@@ -574,8 +505,8 @@ export default {
     getTableData: function() {
       this.$get('alert/rule', this.pageObj).then(response => {
         if (response.code == 200) {
-          this.tableData = response.data.list
+          this.tableData = response.data.list;
-          this.pageObj.total = response.data.total
+          this.pageObj.total = response.data.total;
         }
       })
     },
@@ -607,6 +538,16 @@ export default {
         receiver: '',
       }
     },
+    jumpTo(data,id) {
+      this.$store.state.assetData.moduleData = data
+      this.$store.state.assetData.selectedData = id
+      this.$router.push({
+        path: "/" + data,
+        query: {
+          t: +new Date()
+        }
+      });
+    },
     pageNo(val) {
       this.pageObj.pageNo = val;
       this.getTableData()

nezha-fronted/src/components/page/alert/list.vue

@@ -2,43 +2,6 @@
   .account {
     height: 100%;
   }
-  .content-left {
-    float: left;
-    width: 370px;
-    height: 100%;
-  }
-  .sidebar-title {
-    padding-left: 30px;
-    padding-top: 20px;
-  }
-
-  .sidebar-info {
-    margin-top: 20px;
-    border: 1px solid #acacac;
-    border-radius: 8px;
-    height: calc(90vh - 55px);
-    width: calc(100% - 30px);
-  }
-
-  .sidebar-info-header {
-    background: #acacac;
-    text-align: center;
-    line-height: 50px;
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
-    height: 60px;
-    width: 100%;
-  }
-
-  .sidebar-info-footer {
-    padding-top: 15px;
-    padding-left: 15px;
-  }
-  .account-list {
-    height: calc(100% - 131px);
-    margin-left: 370px;
-    padding: 0 15px 0 0;
-  }
   .account-list-option {
     cursor: pointer;
     display: inline-block;
@@ -56,11 +19,6 @@
   .account-list-option .el-icon-view:hover {
     color: #409EFF;
   }
-  .account-list-search {
-    float: right;
-    width: 220px;
-    margin: 15px 0;
-  }
   /* begin--右侧弹框*/
   .right-box {
     position: fixed;
@@ -202,22 +160,26 @@
 </style>
 <template>
     <div class="account">
-      <div class="content-left">
+        <div class="content-left">
-        <div class="sidebar-title">
+            <div class="sidebar-title">{{$t('alert.alert')}}</div>
-          <div>Config</div>
+            <div class="sidebar-info">
-          <div class="sidebar-info">
+                <div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">{{$t('alert.alertList')}}</div>
-            <div class="sidebar-info-footer" v-if="sidebarState">
+                <div class="sidebar-info-item" @click="jumpTo('alertConfig')">{{$t('alert.alertConfig')}}</div>
             </div>
-          </div>
         </div>
-      </div>
+        <div class="content-right">
-        <div class="account-list">
+            <div class="top-tools">
-            <el-input
+              <el-button @click="toAdd" class="top-tool-btn top-tool-btn-active margin-l-10 top-tool top-tool-right" size="mini">
-              class="account-list-search"
+                <span><i class="el-icon-plus"></i></span>
-              type="text"
+                <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
-              :placeholder="$t('overall.search')"
+              </el-button>
-              size="small"
+              <el-input
-            ></el-input>
+                  class="top-tool-search top-tool top-tool-right"
+                  type="text"
+                  :placeholder="$t('overall.search')"
+                  size="mini"
+                ></el-input>
+            </div>
             <el-table
                   :data="tableData"
                   border
@@ -232,9 +194,9 @@
                 >
                     <template slot-scope="scope" :column="item">
                         <div v-if="item.prop == 'type'" class="account-list-options">
-                            <span v-if="scope.row[item.prop] == 1" class="account-list-option">Project Alarm</span>
+                            <span v-if="scope.row[item.prop] == 1" class="account-list-option">Project alert</span>
-                            <span v-if="scope.row[item.prop] == 2" class="account-list-option">Module Alarm</span>
+                            <span v-if="scope.row[item.prop] == 2" class="account-list-option">Module alert</span>
-                            <span v-if="scope.row[item.prop] == 3" class="account-list-option">Device Alarm</span>
+                            <span v-if="scope.row[item.prop] == 3" class="account-list-option">Device alert</span>
                         </div>
                         <div v-else-if="item.prop == 'linkObject'">
                             <span v-if="scope.row['type'] == 1 || scope.row['type'] == 2" class="account-list-option">{{scope.row[item.prop].name}}</span>
@@ -250,7 +212,7 @@
                     </template>
                 </el-table-column>
             </el-table>
-          <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+            <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
         </div>
 
     </div>
@@ -258,7 +220,7 @@
 </template>
 <script>
 export default {
-  name: "alarmList",
+  name: "alertList",
   data() {
     return {
       pageObj: {
@@ -268,39 +230,39 @@ export default {
       },
       tableTitle: [
         {
-          label: this.$t("alarm.alarmName"),
+          label: this.$t("alert.alertName"),
           prop: 'alertName',
           show: true
         }, {
-          label: this.$t("alarm.startAt"),
+          label: this.$t("alert.startAt"),
           prop: 'startAt',
           show: true,
         }, {
-          label: this.$t("alarm.list.type"),
+          label: this.$t("alert.list.type"),
           prop: 'type',
           show: true,
         }, {
-          label: this.$t("alarm.list.linkedId"),
+          label: this.$t("alert.list.linkedId"),
           prop: 'linkObject',
           show: true,
         }, {
-          label: this.$t("alarm.severity"),
+          label: this.$t("alert.severity"),
           prop: 'severity',
           show: true,
         }, {
-          label: this.$t('alarm.summary'),
+          label: this.$t('alert.summary'),
           prop: 'summary',
           show: true,
         }, {
-          label: this.$t('alarm.description'),
+          label: this.$t('alert.description'),
           prop: 'description',
           show: true,
         }, {
-          label: this.$t('alarm.list.state'),
+          label: this.$t('alert.list.state'),
           prop: 'state',
           show: true,
         }, {
-          label: this.$t('alarm.endAt'),
+          label: this.$t('alert.endAt'),
           prop: 'endAt',
           show: true,
         }
@@ -309,17 +271,27 @@ export default {
     }
   },
   methods: {
-    getAlarmList: function() {
+    getAlertList: function() {
       this.$get('alert/message', this.pageObj).then(response => {
         if (response.code == 200) {
           this.tableData = response.data.list
           this.pageObj.total = response.data.total
         }
       })
-    }
+    },
+    jumpTo(data,id) {
+      this.$store.state.assetData.moduleData = data
+      this.$store.state.assetData.selectedData = id
+      this.$router.push({
+        path: "/" + data,
+        query: {
+          t: +new Date()
+        }
+      });
+    },
   },
   mounted() {
-    this.getAlarmList();
+    this.getAlertList();
   }
 }
 </script>

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

@@ -2,65 +2,29 @@
   .account {
     height: 100%;
   }
-  .content-left {
-    float: left;
-    width: 370px;
-    height: 100%;
-  }
-  .sidebar-title {
-    padding-left: 30px;
-    padding-top: 20px;
-  }
 
-  .sidebar-info {
+  .content-right {
-    margin-top: 20px;
-    border: 1px solid #acacac;
-    border-radius: 8px;
-    height: calc(90vh - 55px);
-    width: calc(100% - 30px);
-  }
-
-  .sidebar-info-header {
-    background: #acacac;
-    text-align: center;
-    line-height: 50px;
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
-    height: 60px;
-    width: 100%;
-  }
-
-  .sidebar-info-footer {
-    padding-top: 15px;
-    padding-left: 15px;
-  }
-  .account-list {
     height: calc(100% - 131px);
-    margin-left: 370px;
+    margin-left: 322px;
-    padding: 0 15px 0 0;
+    padding: 0 15px 0 25px;
   }
-  .account-list-option {
+  .content-right-option {
     cursor: pointer;
     display: inline-block;
     margin-right: 6px;
   }
-  .account-list-option .el-icon-delete {
+  .content-right-option .el-icon-delete {
     color: #F98D9A;
   }
-  .account-list-option .el-icon-delete:hover {
+  .content-right-option .el-icon-delete:hover {
     color: #D96D7A;
   }
-  .account-list-option .el-icon-view {
+  .content-right-option .el-icon-view {
     color: #60BEFF;
   }
-  .account-list-option .el-icon-view:hover {
+  .content-right-option .el-icon-view:hover {
     color: #409EFF;
   }
-  .account-list-search {
-    float: right;
-    width: 220px;
-    margin: 15px 0;
-  }
   /* begin--右侧弹框*/
   .right-box {
     position: fixed;
@@ -203,21 +167,25 @@
 <template>
     <div class="account">
         <div class="content-left">
-            <div class="sidebar-title">
+            <div class="sidebar-title">Config</div>
-                <div>Config</div>
+            <div class="sidebar-info">
-                <div class="sidebar-info">
+                <div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">Account List</div>
-                    <div class="sidebar-info-footer" v-if="sidebarState">
+                <div class="sidebar-info-item" @click="jumpTo('promServer')">Prometheus Server</div>
-                    </div>
-                </div>
             </div>
         </div>
-        <div class="account-list">
+        <div class="content-right">
-            <el-input
+            <div class="top-tools">
-              class="account-list-search"
+              <el-button @click="toAdd" class="top-tool-btn top-tool-btn-active top-tool margin-l-10 top-tool-right" size="mini">
-              type="text"
+                <span><i class="el-icon-plus"></i></span>
-              :placeholder="$t('overall.search')"
+                <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
-              size="small"
+              </el-button>
-            ></el-input>
+              <el-input
+                  class="top-tool-search top-tool top-tool-right"
+                  type="text"
+                  :placeholder="$t('overall.search')"
+                  size="mini"
+                ></el-input>
+            </div>
             <el-table
                   :data="tableData"
                   border
@@ -231,10 +199,10 @@
                   :label="item.label"
                 >
                     <template slot-scope="scope" :column="item">
-                        <div v-if="item.prop == 'option'" class="account-list-options">
+                        <div v-if="item.prop == 'option'" class="content-right-options">
-                            <span @click="del(scope.row)" class="account-list-option"><i class="el-icon-delete"></i></span>
+                            <span @click="del(scope.row)" class="content-right-option"><i class="el-icon-delete"></i></span>
-                            <span @click="detail(scope.row)" class="account-list-option"><i class="el-icon-view"></i></span>
+                            <span @click="detail(scope.row)" class="content-right-option"><i class="el-icon-view"></i></span>
-                            <span @click="edit(scope.row)" class="account-list-option"><i class="el-icon-edit-outline"></i></span>
+                            <span @click="edit(scope.row)" class="content-right-option"><i class="el-icon-edit-outline"></i></span>
                         </div>
                         <span v-else-if="item.prop == 'lang'">
                             {{scope.row[item.prop] == 'en' ? 'English' : ''}}
@@ -757,7 +725,7 @@ export default {
         }
       })
     },
-    add: function() {
+    toAdd: function() {
       this.cleanUser();
       this.rightBox.isEdit = true;
       this.rightBox.title = this.$t("config.account.createAccount");
@@ -771,6 +739,16 @@ export default {
 
       }
     },
+    jumpTo(data,id) {
+      this.$store.state.assetData.moduleData = data
+      this.$store.state.assetData.selectedData = id
+      this.$router.push({
+        path: "/" + data,
+        query: {
+          t: +new Date()
+        }
+      });
+    },
     toEditReceiver: function(item) {
       if (!item.isEdit) {
         //如果不在编辑状态，那么其他项如果有改动，则还原改动，最后开始编辑

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

@@ -2,65 +2,27 @@
   .prom {
     height: 100%;
   }
-  .content-left {
+  .prom .el-table {
-    float: left;
+    border-radius: 5px;
-    width: 370px;
-    height: 100%;
-  }
-  .sidebar-title {
-    padding-left: 30px;
-    padding-top: 20px;
   }
 
-  .sidebar-info {
+  .content-right-option {
-    margin-top: 20px;
-    border: 1px solid #acacac;
-    border-radius: 8px;
-    height: calc(90vh - 55px);
-    width: calc(100% - 30px);
-  }
-
-  .sidebar-info-header {
-    background: #acacac;
-    text-align: center;
-    line-height: 50px;
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
-    height: 60px;
-    width: 100%;
-  }
-
-  .sidebar-info-footer {
-    padding-top: 15px;
-    padding-left: 15px;
-  }
-  .prom-list {
-    height: calc(100% - 131px);
-    margin-left: 370px;
-    padding: 0 15px 0 0;
-  }
-  .prom-list-option {
     cursor: pointer;
     display: inline-block;
     margin-right: 6px;
   }
-  .prom-list-option .el-icon-delete {
+  .content-right-option .el-icon-delete {
     color: #F98D9A;
   }
-  .prom-list-option .el-icon-delete:hover {
+  .content-right-option .el-icon-delete:hover {
     color: #D96D7A;
   }
-  .prom-list-option .el-icon-view {
+  .content-right-option .el-icon-view {
     color: #60BEFF;
   }
-  .prom-list-option .el-icon-view:hover {
+  .content-right-option .el-icon-view:hover {
     color: #409EFF;
   }
-  .prom-list-search {
-    float: right;
-    width: 220px;
-    margin: 15px 0;
-  }
   /* begin--右侧弹框*/
   .right-box {
     position: fixed;
@@ -203,21 +165,25 @@
 <template>
     <div class="prom">
         <div class="content-left">
-            <div class="sidebar-title">
+            <div class="sidebar-title">{{$t('config.config')}}</div>
-                <div>Config</div>
+            <div class="sidebar-info">
-                <div class="sidebar-info">
+                <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')">{{$t('config.account.accountList')}}</div>
-                    <div class="sidebar-info-footer" v-if="sidebarState">
+                <div class="sidebar-info-item sidebar-info-item-active">{{$t('config.promServer.promServerList')}}</div>
-                    </div>
-                </div>
             </div>
         </div>
-        <div class="prom-list">
+        <div class="content-right">
-            <el-input
+            <div class="top-tools">
-              class="prom-list-search"
+              <el-button @click="toAdd" class="top-tool-btn top-tool-btn-active margin-l-10 top-tool top-tool-right" size="mini">
-              type="text"
+                <span><i class="el-icon-plus"></i></span>
-              :placeholder="$t('overall.search')"
+                <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
-              size="small"
+              </el-button>
-            ></el-input>
+              <el-input
+                  class="top-tool-search top-tool top-tool-right"
+                  type="text"
+                  :placeholder="$t('overall.search')"
+                  size="mini"
+                ></el-input>
+            </div>
             <el-table
                   :data="tableData"
                   border
@@ -237,10 +203,10 @@
                 </el-table-column>
                 <el-table-column :label="$t('config.account.option')" width="100">
                   <template slot-scope="scope" :column="item">
-                    <div class="prom-list-options">
+                    <div class="content-right-options">
-                        <span @click="del(scope.row)" class="prom-list-option"><i class="el-icon-delete"></i></span>
+                        <span @click="del(scope.row)" class="content-right-option"><i class="el-icon-delete"></i></span>
-                        <span @click="detail(scope.row)" class="prom-list-option"><i class="el-icon-view"></i></span>
+                        <span @click="detail(scope.row)" class="content-right-option"><i class="el-icon-view"></i></span>
-                        <span @click="edit(scope.row)" class="prom-list-option"><i class="el-icon-edit-outline"></i></span>
+                        <span @click="toEdit(scope.row)" class="content-right-option"><i class="el-icon-edit-outline"></i></span>
                     </div>
                   </template>
                 </el-table-column>
@@ -330,7 +296,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 v-if="rightBox.isEdit" class="right-box-bottom-btn right-box-bottom-btn-50">{{promServer.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
+                    <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">{{promServer.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
                 </div>
                 <!-- end--底部按钮-->
 
@@ -423,7 +389,7 @@ export default {
     }
   },
   methods: {
-    edit: function(u) {
+    toEdit: function(u) {
       this.promServer = Object.assign({}, u);
       this.rightBox.isEdit = true;
       this.rightBox.title = this.$t("config.promServer.editProm") + "  ID：" + u.id;
@@ -445,24 +411,34 @@ export default {
       this.rightBox.title = "Prometheus Server ID：" + u.id;
       this.rightBox.show = true;
     },
-    add: function() {
+    toAdd: function() {
       this.cleanPromServer();
       this.rightBox.isEdit = true;
       this.rightBox.title = this.$t("config.promServer.createProm");
       this.rightBox.show = true;
     },
-    saveOrToEdit: function() {
+    save: function() {
-      if (!this.rightBox.isEdit) {
+      if (this.promServer.id) {
-        this.rightBox.isEdit = true;
-        this.rightBox.title = this.$t("config.promServer.editProm") + "  ID：" + this.promServer.id;
-      } else {
         this.$put('promServer', this.promServer).then(response => {
           if (response.code === 200) {
             this.getTableData();
             this.rightBox.isEdit = false;
-
           }
-        })
+        });
+      } else {
+        this.$post('promServer', this.promServer).then(response => {
+          if (response.code === 200) {
+            this.getTableData();
+            this.rightBox.isEdit = false;
+          }
+        });
+      }
+    },
+    saveOrToEdit: function() {
+      if (!this.rightBox.isEdit) {
+        this.toEdit(this.promServer);
+      } else {
+        this.save();
       }
     },
     toEditIdc: function(item) {
@@ -473,9 +449,16 @@ export default {
       } else {
         //如果已在编辑状态，判断name是否有变更，有变更则发请求
         if (item.name != item.oldName) {
-          if (this.updateIdcName(item) == 200) {
+          this.$put('idc', item).then(response => {
-            item.isEdit = false;
+            if (response.code === 200) {
-          }
+              item.errorMessage = '';
+              item.oldName = item.name;
+              item.isEdit = false;
+            } else {
+              console.info(response.msg)
+              this.$set(item, 'errorMessage', response.msg);
+            }
+          })
         } else {
           item.errorMessage = '';
           item.isEdit = false;
@@ -496,10 +479,12 @@ export default {
       this.blurEditIdc();
       //TODO 请求后台，删除
     },
-    getIdcData: function() {
+    getIdcData: async function() {
-      this.$get('idc', this.pageObj).then(response => {
+      console.info(1)
+      await this.$get('idc', this.pageObj).then(response => {
         if (response.code === 200) {
           this.idcData = response.data.list;
+          this.getTableData();
         }
       })
       for (var i = 0; i < this.idcData.length; i++) {
@@ -512,12 +497,22 @@ export default {
     },
     stopFun: function() {
 
+    },
+    jumpTo(data,id) {
+      this.$store.state.assetData.moduleData = data
+      this.$store.state.assetData.selectedData = id
+      this.$router.push({
+        path: "/" + data,
+        query: {
+          t: +new Date()
+        }
+      });
     },
     getTableData: function() {
       this.$get('promServer', this.pageObj).then(response => {
         if (response.code === 200) {
-          console.info(this.idcData)
           for (var i = 0; i < response.data.list.length; i++) {
+            console.info(this.idcData)
             for (var j = 0; j < this.idcData.length; j++) {
               if (response.data.list[i].idcId == this.idcData[j].id) {
                 response.data.list[i].idc = this.idcData[j];
@@ -530,14 +525,6 @@ export default {
         }
       })
     },
-    updateIdcName: function(item) {
-      //TODO 请求接口改名
-      var code = 200;
-      //this.$set(item, 'errorMessage', 'err');
-      item.errorMessage = '';
-      item.oldName = item.name;
-      return code;
-    },
     cleanPromServer: function() {
       this.promServer = {
         id: '',
@@ -555,9 +542,13 @@ export default {
       this.getTableData();
     }
   },
-  mounted() {
+  mounted: function() {
     this.getIdcData();
-    this.getTableData();
+  },
+  watch: {
+    'promServer.idc': function(n, o) {
+      this.promServer.idcId = n.id;
+    }
   }
 }
 </script>

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

@@ -1,25 +1,270 @@
+<style scoped>
+.project {
+  height: 100%;
+}
+.content-right-option {
+  cursor: pointer;
+  display: inline-block;
+  margin-right: 6px;
+}
+.content-right-option .el-icon-delete {
+  color: #F98D9A;
+}
+.content-right-option .el-icon-delete:hover {
+  color: #D96D7A;
+}
+.content-right-option .el-icon-view {
+  color: #60BEFF;
+}
+.content-right-option .el-icon-view:hover {
+  color: #409EFF;
+}
+
+/* begin--右侧弹框*/
+.right-box {
+  position: fixed;
+  top: 80px;
+  right: 15px;
+  z-index: 1;
+  border-radius: 8px;
+  box-shadow: 0 0 15px #ccc;
+  background-color: white;
+  padding: 0 20px;
+}
+.right-box-project {
+  width: 550px;
+  height: calc(100% - 100px);
+}
+/* begin--右侧弹框--顶部按钮*/
+.right-box-top-btns {
+  text-align: center;
+}
+.right-box-top-btn {
+  border-radius: 0 0 9px 9px;
+  float: right;
+  color: #656565;
+  height: 30px;
+  font-size: 12px;
+  padding: 3px 8px 1px 8px;
+  border: 1px solid #aaaaaa;
+  border-top: none;
+  cursor: pointer;
+  margin-left: 20px;
+}
+.right-box-top-btn-full {
+  background-color: #656565;
+  border: 1px solid #656565;
+  border-top: none;
+  color: white;
+}
+/* end--右侧弹框--顶部按钮*/
+
+/* begin--右侧弹框--内容*/
+.right-box-title {
+  height: 30px;
+  line-height: 40px;
+  text-align: left;
+}
+.right-box-form {
+  margin-top: 35px;
+}
+.right-box-form-row {
+  margin-top: 25px;
+}
+.right-box-form-label {
+  margin-bottom: 8px;
+  text-align: left;
+}
+.right-box-form-content {
+  line-height: 32px;
+  text-align: left;
+  width: 100%;
+}
+.right-box-form-content-txt {
+  padding-left: 11px;
+}
+.right-box-form-content .el-select {
+  width: calc(100% - 38px);
+  vertical-align: top;
+}
+.el-select-add-btn {
+  width: 33px;
+  height: 33px;
+  display: inline-block;
+  text-align: center;
+  border-radius: 5px;
+  border: 1px solid #DCDFE6;
+  box-sizing: border-box;
+  color: #C7C9CE;
+  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+}
+.el-select-add-btn:hover {
+  border: 1px solid #C0C4CC;
+  cursor: pointer;
+}
+/* end--右侧弹框--内容*/
+
+/* begin--右侧弹框--底部按钮*/
+.right-box-bottom-btns {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 40px;
+  left: 0;
+  text-align: center;
+}
+.right-box-bottom-btn:first-of-type {
+  border-bottom-left-radius: 8px;
+}
+.right-box-bottom-btn:last-of-type{
+  border-bottom-right-radius: 8px;
+}
+.right-box-bottom-btn {
+  display: inline-block;
+  background-color: #656565;
+  color: white;
+  height: 100%;
+  line-height: 40px;
+  cursor: pointer;
+  width: 100%;
+}
+.config-dropdown-label-input {
+  width: 50%;
+  display: inline-block;
+}
+.right-box-bottom-btn-cancel {
+  background-color: #DADADA;
+  color: #656565;
+}
+.right-box-bottom-btn-50 {
+  width: 50%;
+}
+/* end--右侧弹框--底部按钮*/
+/* end--右侧弹框*/
+</style>
 <template>
-    <div>
+  <div class="project">
-        <el-table
+    <div class="content-left">
-                :data="tableData"
+      <div class="sidebar-title">Config</div>
-                border
+      <div class="sidebar-info">
-                style="width: 100%">
+        <div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">Account List</div>
-            <el-table-column
+        <div class="sidebar-info-item">Prometheus Server</div>
-                    prop="date"
+      </div>
-                    label="日期"
-                    width="180">
-            </el-table-column>
-            <el-table-column
-                    prop="name"
-                    label="姓名"
-                    width="180">
-            </el-table-column>
-            <el-table-column
-                    prop="address"
-                    label="地址">
-            </el-table-column>
-        </el-table>
     </div>
+    <div class="content-right">
+      <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 @click="" class="top-tool-btn top-tool" size="mini">
+            <span class="top-tool-btn-txt">{{$t('project.metrics')}}</span>
+          </el-button>
+        </el-button-group>
+        <el-button @click="toAdd" 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>
+        <el-input
+          class="top-tool-search top-tool top-tool-right"
+          type="text"
+          :placeholder="$t('overall.search')"
+          size="mini"
+        ></el-input>
+      </div>
+      <el-table
+        :data="tableData"
+        border
+        height="calc(100% - 65px)"
+        style="width: 100%;">
+        <el-table-column
+          v-for="(item, index) in tableTitle"
+          v-if="item.show"
+          :width="item.width"
+          :key="`col-${index}`"
+          :label="item.label"
+        >
+          <template slot-scope="scope" :column="item">
+            <!--<span v-if="item.prop == 'asset'">{{scope.row[item.prop].name}}</span>
+            <span v-else>{{scope.row[item.prop]}}</span>-->
+            <span>{{scope.row[item.prop]}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('overall.option')" width="100">
+          <template slot-scope="scope" :column="item">
+            <div class="content-right-options">
+              <span @click="detail(scope.row)" class="content-right-option"><i class="el-icon-view"></i></span>
+              <span @click="toEdit(scope.row)" class="content-right-option"><i class="el-icon-edit-outline"></i></span>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+    </div>
+
+    <!-- begin--右弹框-->
+    <transition name="right-box">
+      <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()">
+            <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="saveOrToEdit">
+            <div class="right-box-btn-icon">
+              <i class="el-icon-edit-outline"></i>
+            </div>
+            <span v-if="rightBox.isEdit">{{$t('overall.save')}}</span>
+            <span v-else>{{$t('overall.edit')}}</span>
+          </div>
+          <div class="right-box-top-btn" v-if="rightBox.isEdit && endpoint.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">{{rightBox.title}}</div>
+        <!-- end--标题-->
+
+        <!-- begin--表单-->
+        <div class="right-box-form">
+          <div class="right-box-form-row">
+            <div class="right-box-form-label">IDC</div>
+            <div class="right-box-form-content">aaa
+            </div>
+          </div>
+          <div class="right-box-form-row">
+            <div class="right-box-form-label">Host</div>
+            <div class="right-box-form-content">
+              <el-input
+                type="text"
+                v-if="rightBox.isEdit"
+                placeholder=""
+                v-model="endpoint.host"
+                size="small"
+              ></el-input>
+              <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.host}}</div>
+            </div>
+          </div>
+        </div>
+        <!-- end--表单-->
+
+        <!-- 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>
+        <!-- end--底部按钮-->
+
+      </div>
+    </transition>
+  </div>
 </template>
 
 <script>
@@ -27,28 +272,126 @@ export default {
   name: "project",
   data() {
     return {
-      tableData: [{
+      rightBox: { //弹出框相关
-        date: '2016-05-02',
+        show: false,
-        name: '王小虎',
+        isEdit: false, //false查看，true编辑
-        address: '上海市普陀区金沙江路 1518 弄'
+        title: ''
-      }, {
+      },
-        date: '2016-05-04',
+      pageObj: {
-        name: '王小虎',
+        pageNo: 1,
-        address: '上海市普陀区金沙江路 1517 弄'
+        pageSize: 20,
-      }, {
+        total:0
-        date: '2016-05-01',
+      },
-        name: '王小虎',
+      endpoint: {
-        address: '上海市普陀区金沙江路 1519 弄'
+        id: '',
-      }, {
+        host: '',
-        date: '2016-05-03',
+        port: '',
-        name: '王小虎',
+        param: '',
-        address: '上海市普陀区金沙江路 1516 弄'
+        path: '',
-      }]
+        asset: {id: '', name: '', host: ''},
+        project: {id: '', name: ''},
+        module: {id: '', name: ''}
+      },
+      tableTitle: [
+        {
+          label: this.$t("project.endpoint.endpointId"),
+          prop: 'id',
+          show: true,
+          width: 110
+        },
+        {
+          label: this.$t("project.endpoint.host"),
+          prop: 'host',
+          show: true,
+        },
+        {
+          label: this.$t("project.endpoint.port"),
+          prop: 'port',
+          show: true,
+        },
+        {
+          label: this.$t("project.endpoint.param"),
+          prop: 'param',
+          show: true,
+        },
+        {
+          label: this.$t("project.endpoint.path"),
+          prop: 'path',
+          show: true,
+        },
+        {
+          label: this.$t("project.endpoint.asset"),
+          prop: 'asset',
+          show: true,
+        }
+      ],
+      tableData: []
     }
+  },
+  methods: {
+    getTableData: function() {
+      this.$get('endpoint', this.pageObj).then(response => {
+        if (response.code === 200) {
+          this.tableData = response.data.list;
+          this.pageObj.total = response.data.total
+        }
+      })
+    },
+    toEdit: function(u) {
+      this.endpoint = Object.assign({}, u);
+      this.rightBox.isEdit = true;
+      this.rightBox.title = this.$t("project.endpoint.editEndpoint") + "  ID：" + u.id;
+      this.rightBox.show = true;
+    },
+    del: function(u) {
+    },
+    toAdd: function() {
+      this.cleanEndpoint();
+      this.rightBox.isEdit = true;
+      this.rightBox.title = this.$t("project.endpoint.createEndpoint");
+      this.rightBox.show = true;
+    },
+    detail: function(u) {
+      this.alertRule = Object.assign({}, u);
+      this.rightBox.isEdit = false;
+      this.rightBox.title = this.$t("project.endpoint.endpoint") + "  ID：" + u.id;
+      this.rightBox.show = true;
+    },
+    saveOrToEdit: function() {
+      if (!this.rightBox.isEdit) {
+        this.rightBox.isEdit = true;
+        this.rightBox.title = this.$t("project.endpoint.editEndpoint") + "  ID：" + this.alertRule.id;
+      }
+    },
+    save: function() {
+
+    },
+    esc: function() {
+      this.rightBox.show = false;
+    },
+    cleanEndpoint: function() {
+      this.endpoint = {
+        id: '',
+        host: '',
+        port: '',
+        param: '',
+        path: '',
+        asset: {id: '', name: '', host: ''},
+        project: {id: '', name: ''},
+        module: {id: '', name: ''}
+      }
+    },
+    pageNo(val) {
+      this.pageObj.pageNo = val;
+      this.getTableData();
+    },
+    pageSize(val) {
+      this.pageObj.pageSize = val;
+      this.getTableData();
+    }
+  },
+  mounted: function() {
+    this.getTableData();
   }
 }
 </script>
-
-<style scoped>
-
-</style>

nezha-fronted/src/http.js

@@ -1,11 +1,12 @@
 import axios from 'axios'
 import qs from 'qs' //引入数据格式化
+//axios.defaults.baseURL = 'http://localhost:8088/nz-admin';
 axios.defaults.baseURL = 'http://192.168.40.247:8080/nz-admin';
 axios.interceptors.request.use(config => {
-      config.headers = {
+      // config.headers = {
-        "Content-Type": 'application/x-www-form-urlencoded',
+      //   "Content-Type": 'application/x-www-form-urlencoded',
-      }
+      // }
-      config.data = qs.stringify(config.data);
+      // config.data = qs.stringify(config.data);
       let token = sessionStorage.getItem('token')
       if (token) {
         config.headers['Authorization'] = token //请求头token
@@ -21,7 +22,7 @@ export function get(url, params) {
     }).then(response => {
       resolve(response.data)
     }).catch(err => {
-      reject(err.response.data)
+      resolve(err.response.data)
     })
   })
 }
@@ -32,20 +33,18 @@ export function post(url, params) {
       resolve(response.data)
     }).catch(err => {
       console.info(err)
-      reject(err.response.data)
+      resolve(err.response.data)
     })
   })
 }
 
 export function put(url, params) {
   return new Promise((resolve, reject) => {
-    //params = qs.stringify(Object.assign(params));
-    //console.info(params);
     axios.put(url, params).then(response => {
       resolve(response.data)
     }).catch(err => {
       console.info(err)
-      reject(err.response.data)
+      resolve(err.response.data);
     })
   })
 }
@@ -56,7 +55,7 @@ export function del(url, params) {
       resolve(response.data)
     }).catch(err => {
       console.info(err)
-      reject(err.response.data)
+      resolve(err.response.data)
     })
   })
 }

nezha-fronted/src/router/index.js

@@ -38,12 +38,12 @@ export default new Router({
           component: resolve => require(['../components/page/config/promServer.vue'], resolve),
         },
         {
-          path: '/alarmList',
+          path: '/alertList',
-          component: resolve => require(['../components/page/alarm/list.vue'], resolve),
+          component: resolve => require(['../components/page/alert/list.vue'], resolve),
         },
         {
-          path: '/alarmConfig',
+          path: '/alertConfig',
-          component: resolve => require(['../components/page/alarm/config.vue'], resolve),
+          component: resolve => require(['../components/page/alert/config.vue'], resolve),
         }
       ]
     },