feat: prometheus server功能提交

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

@@ -33,29 +33,29 @@ html {
     width: 90%;
 }
 
-.config-receiver-dropdown {
+.config-dropdown {
   width: 550px;
 }
-.config-receiver-dropdown-btn {
+.config-dropdown-btn {
   display: inline-block;
   margin-left: 7px;
   float: right;
   color: #60BEFF;
   font-size: 13px
 }
-.config-receiver-dropdown-btn:hover {
+.config-dropdown-btn:hover {
   color: #409EFF;
 }
-.config-receiver-dropdown-btn-delete {
+.config-dropdown-btn-delete {
   color: #F98D9A;
   font-size: 13px
 }
-.config-receiver-dropdown-btn-delete:hover {
+.config-dropdown-btn-delete:hover {
   color: #D96D7A;
 }
-.config-receiver-dropdown.is-multiple .el-select-dropdown__item.selected::after {
+.config-dropdown.is-multiple .el-select-dropdown__item.selected::after {
   content: "" !important;
 }
-.config-receiver-dropdown-error-message {
+.config-dropdown-error-message {
   color: #F98D9A;
 }

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

@@ -27,10 +27,21 @@
                         </el-menu-item>
                     </template>
                 </el-submenu>
-                <el-submenu index="4">
+                <!--<el-submenu index="4">
                     <template slot="title">
                         <div @click="jumpTo('alarm')">{{$t('overall.alarm')}}</div>
                     </template>
+                </el-submenu>-->
+                <el-submenu index="5">
+                    <template slot="title">
+                        <div @click="jumpTo('account')">{{$t('overall.config')}}</div>
+                    </template>
+                    <el-menu-item index="1">
+                        <div @click="jumpTo('account')">{{$t('config.account.account')}}</div>
+                    </el-menu-item>
+                    <el-menu-item index="2">
+                        <div @click="jumpTo('promServer')">Prometheus Server</div>
+                    </el-menu-item>
                 </el-submenu>
             </el-menu>
 
@@ -80,7 +91,8 @@ export default {
   },
   methods: {
     jumpTo(data,id) {
-      this.$store.state.assetSelect = id
+      this.$store.state.assetData.moduleData = data
+      this.$store.state.assetData.selectedData = id
       this.$router.push({
         path: "/" + data,
         query: {

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

@@ -4,6 +4,7 @@ const cn = {
     dashboard:'仪表盘',
     project:'工程',
     asset:'资产',
+    config:'设置',
     create: '新增',
     edit: '修改',
     delete: '删除',
@@ -51,7 +52,13 @@ const cn = {
       createAccount: "新增用户",
       editAccount: "修改用户",
       notCurrentlySupport: '暂不支持'
-    }
+    },
+    promServer: {
+      //侧滑框
+      promId: "Prometheus Server ID",
+      createProm: "新增Prometheus Server",
+      editProm: "修改Prometheus Server"
+    },
   },
   ...zhLocale
 }

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

@@ -4,6 +4,7 @@ const en = {
     dashboard:'dashboard',
     project:'project',
     asset:'asset',
+    config:'config',
     create: 'Create',
     edit: 'Edit',
     delete: 'Delete',
@@ -51,7 +52,13 @@ const en = {
       createAccount: "Create Account",
       editAccount: "Edit Account",
       notCurrentlySupport: 'Not currently supported'
-    }
+    },
+    promServer: {
+      //侧滑框
+      promId: "Prometheus Server ID",
+      createProm: "Create Prometheus Server",
+      editProm: "Edit Prometheus Server"
+    },
   },
   ...enLocale
 }

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

@@ -1,85 +1,94 @@
 <template>
-    <div class="sidebar">
+  <div class="sidebar">
-        <div class="sidebar-title">
+    <div class="sidebar-title">
-            <div>Project</div>
+      <div>Project</div>
-            <div class="sidebar-info">
+      <div class="sidebar-info">
-                <div class="sidebar-info-header">ALL</div>
+        <div class="sidebar-info-header">ALL</div>
-                <div class="sidebar-info-footer">
+        <div class="sidebar-info-footer" v-if="sidebarState">
-                    <el-checkbox-group v-model="checkList" size="small">
+          <el-checkbox-group v-model="checkList" size="small">
-                        <el-checkbox v-for="(item,key) in checkListData" :key="key" border :label=item.id>{{item.name}}
+            <el-checkbox v-for="(item,key) in checkListData" :key="key" border :label=item.id>{{item.name}}
-                            <div class="checkbox-edit" @click.prevent="edit(item.id)">编辑</div>
+              <div class="checkbox-edit" @click.prevent="edit(item.id)">编辑</div>
-                        </el-checkbox>
+            </el-checkbox>
-                    </el-checkbox-group>
+          </el-checkbox-group>
-                </div>
-            </div>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-export default {
+  export default {
-  name: "SiderBar",
+    name: "SiderBar",
-  data() {
+    data() {
-    return {
+      return {
-      checkList: [0],
+        checkList: [0],
-      checkListData: [],
+        checkListData: [],
-      pageObj: {
+        sidebarState:'',
-        pageNo: 1,
+        pageObj: {
-        pageSize: 20,
+          pageNo: 1,
-        total: 0
+          pageSize: 20,
-      },
+          total: 0
-    }
+        },
-  },
+      }
-  computed:{
-    getData(){
-      return this.$store.state.assetSelect
-    }
-  },
-  watch:{
-    getData(newVal,oldVal){
-      this.checkList.splice(1,1,newVal)
-    }
-  },
-  methods: {
-    edit(data) {
-      console.log(data)
     },
-    getAssetData() {
+    computed:{
-      this.$get('idc', this.pageObj).then(response => {
+      getData(){
-        if (response.code == 200) {
+        return this.$store.state.assetData
-          this.checkListData = response.data.list
+      }
-          console.log(this.checkListData)
+    },
-        }
+    watch:{
-      })
+      getData:{
-    }
+        handler(newVal,oldVal){
-  },
+          this.checkList.splice(1,1,newVal.selectedData)
-  mounted() {
+          if(newVal.moduleData=='asset'){
-    this.getAssetData()
+            this.sidebarState=true
-    function aa() {
+          }else{
-      console.log(this.$router.query)
+            this.sidebarState=false
+            this.getAssetData()
+            this.checkListData=[0]
+          }
+        },
+        deep: true,
+      },
+
+    },
+
+    methods: {
+      edit(data) {
+        console.log(data)
+      },
+      getAssetData() {
+        this.$get('idc', this.pageObj).then(response => {
+          if (response.code == 200) {
+            this.checkListData = response.data.list
+          }
+        })
+      }
+    },
+    mounted() {
+      this.getAssetData()
     }
   }
-}
 
 </script>
 
 <style>
-.el-checkbox.is-bordered + .el-checkbox.is-bordered {
+  .el-checkbox.is-bordered + .el-checkbox.is-bordered {
     margin-left: 0px;
     margin-top: 20px;
-}
+  }
 
-.el-checkbox-group {
+  .el-checkbox-group {
     padding-top: 10px;
-}
+  }
 
-.el-checkbox {
+  .el-checkbox {
     width: 270px;
-}
+  }
 </style>
 
 <style scoped>
-.sidebar {
+  .sidebar {
     display: block;
     position: absolute;
     width: 370px;
@@ -89,22 +98,22 @@ export default {
     box-shadow: 0 10px 16px #ccc;
     overflow-y: scroll;
     background: rgba(242, 242, 242, 0.94);
-}
+  }
 
-.sidebar-title {
+  .sidebar-title {
     padding-left: 30px;
     padding-top: 20px;
-}
+  }
 
-.sidebar-info {
+  .sidebar-info {
     margin-top: 20px;
     border: 1px solid #acacac;
     border-radius: 8px;
     height: calc(90vh - 55px);
     width: calc(100% - 30px);
-}
+  }
 
-.sidebar-info-header {
+  .sidebar-info-header {
     background: #acacac;
     text-align: center;
     line-height: 50px;
@@ -112,17 +121,17 @@ export default {
     border-top-right-radius: 8px;
     height: 60px;
     width: 100%;
-}
+  }
 
-.sidebar-info-footer {
+  .sidebar-info-footer {
     padding-top: 15px;
     padding-left: 15px;
-}
+  }
 
-.checkbox-edit {
+  .checkbox-edit {
     position: absolute;
     top: 8px;
     left: 230px;
 
-}
+  }
 </style>

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

@@ -136,7 +136,7 @@
     cursor: pointer;
     width: 100%;
   }
-  .config-receiver-dropdown-label-input {
+  .config-dropdown-label-input {
     width: 50%;
     display: inline-block;
   }
@@ -219,7 +219,7 @@
             <div class="right-box right-box-account" v-if="rightBox.show">
                 <!-- begin--顶部按钮-->
                 <div class="right-box-top-btns">
-                    <div class="right-box-top-btn right-box-top-btn-full" @click="esc(user.userId)">
+                    <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>
@@ -278,27 +278,27 @@
                     <div class="right-box-form-row">
                         <div class="right-box-form-label">{{$t('config.account.receiver')}}</div>
                         <div class="right-box-form-content">
-                            <el-select value-key="id" popper-class="config-receiver-dropdown" multiple v-model="user.receiver" placeholder="" v-if="rightBox.isEdit" size="small">
+                            <el-select value-key="id" popper-class="config-dropdown" multiple v-model="user.receiver" placeholder="" v-if="rightBox.isEdit" size="small">
                                 <el-option
                                   @click.native="blurEditReceiver()"
                                   v-for="item in receiverData"
                                   :key="item.id"
                                   :label="item.name"
                                   :value="item">
-                                    <span class="config-receiver-dropdown-label-txt" v-if="!item.isEdit">{{item.name}}</span>
+                                    <span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.name}}</span>
-                                    <span class="config-receiver-dropdown-label-input" v-if="item.isEdit" @click.stop="stopFun">
+                                    <span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="stopFun">
                                         <el-input
                                           type="text"
                                           v-model="item.name"
                                           size="mini"
                                         ></el-input>
                                     </span>
-                                    <span class="config-receiver-dropdown-error-message">{{item.errorMessage}}</span>
+                                    <span class="config-dropdown-error-message">{{item.errorMessage}}</span>
-                                    <span class="config-receiver-dropdown-btn" @click.stop="toEditReceiver(item)">
+                                    <span class="config-dropdown-btn" @click.stop="toEditReceiver(item)">
                                         <i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
                                         <i class="el-icon-check" v-if="item.isEdit"></i>
                                     </span>
-                                    <span class="config-receiver-dropdown-btn config-receiver-dropdown-btn-delete" @click.stop="toDelReceiver(item)"><i class="el-icon-delete"></i></span>
+                                    <span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelReceiver(item)"><i class="el-icon-delete"></i></span>
                                 </el-option>
                             </el-select>
                             <div class="el-select-add-btn" v-if="rightBox.isEdit">
@@ -339,7 +339,7 @@
 
                 <!-- begin--底部按钮-->
                 <div class="right-box-bottom-btns">
-                    <div @click="esc(user.userId)" :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">{{user.userId == '' ? $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 v-if="rightBox.isEdit" class="right-box-bottom-btn right-box-bottom-btn-50">{{user.userId == '' ? $t('overall.create') : $t('overall.save')}}</div>
                 </div>
                 <!-- end--底部按钮-->
 
@@ -662,32 +662,26 @@ export default {
       }],
       receiverData: [{
         id: '1',
-        isEdit: false,
         name: 'group1',
         description: '小组1desc'
       }, {
         id: '2',
-        isEdit: false,
         name: 'group2',
         description: '小组2desc'
       }, {
         id: '3',
-        isEdit: false,
         name: '小组3',
         description: '小组3desc'
       }, {
         id: '4',
-        isEdit: false,
         name: '小组4',
         description: '小组4desc'
       }, {
         id: '5',
-        isEdit: false,
         name: '小组啊小组5',
         description: '小组5desc'
       }, {
         id: '6',
-        isEdit: false,
         name: '小组6',
         description: '小组6desc'
       }]
@@ -697,7 +691,7 @@ export default {
     edit: function(u) {
       this.user = Object.assign({}, u);
       this.rightBox.isEdit = true;
-      this.rightBox.title = this.$t("config.account.editAccount") + "  ID：" + u.id;
+      this.rightBox.title = this.$t("config.account.editAccount") + "  ID：" + u.userId;
       this.rightBox.show = true;
     },
     del: function(u) {
@@ -705,7 +699,7 @@ export default {
     detail: function(u) {
       this.user = Object.assign({}, u);
       this.rightBox.isEdit = false;
-      this.rightBox.title = this.$t("config.account.account") + "  ID：" + u.id;
+      this.rightBox.title = this.$t("config.account.account") + "  ID：" + u.userId;
       this.rightBox.show = true;
     },
     add: function() {
@@ -717,7 +711,7 @@ export default {
     saveOrToEdit: function() {
       if (!this.rightBox.isEdit) {
         this.rightBox.isEdit = true;
-        this.rightBox.title = this.$t("config.account.editAccount") + "  ID：" + this.user.id;
+        this.rightBox.title = this.$t("config.account.editAccount") + "  ID：" + this.user.userId;
       }
     },
     toEditReceiver: function(item) {
@@ -751,9 +745,10 @@ export default {
       this.blurEditReceiver();
       //TODO 请求后台，删除组
     },
-    setOldNameForReceiver: function() {
+    initReceiverData: function() {
       for (var i = 0; i < this.receiverData.length; i++) {
         this.$set(this.receiverData[i], 'oldName', this.receiverData[i].name);
+        this.$set(this.receiverData[i], 'isEdit', false);
       }
     },
     esc: function() {
@@ -780,13 +775,10 @@ export default {
         receiver: [],
         lang: 'en'
       }
-    },
-    getUserById: function(userId) {
-
     }
   },
   mounted() {
-    this.setOldNameForReceiver();
+    this.initReceiverData();
   }
 }
 </script>

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

@@ -0,0 +1,470 @@
+<style scoped>
+  .prom {
+    height: 100%;
+  }
+  .prom-list {
+    height: calc(100% - 51px);
+  }
+  .prom-list-option {
+    cursor: pointer;
+    display: inline-block;
+    margin-right: 6px;
+  }
+  .prom-list-option .el-icon-delete {
+    color: #F98D9A;
+  }
+  .prom-list-option .el-icon-delete:hover {
+    color: #D96D7A;
+  }
+  .prom-list-option .el-icon-view {
+    color: #60BEFF;
+  }
+  .prom-list-option .el-icon-view:hover {
+    color: #409EFF;
+  }
+  .prom-list-search {
+    float: right;
+    width: 220px;
+    margin: 15px 0;
+  }
+  /* begin--右侧弹框*/
+  .right-box {
+    position: fixed;
+    top: 20px;
+    right: 0;
+    z-index: 1;
+    border-radius: 8px;
+    box-shadow: 0 0 15px #ccc;
+    background-color: white;
+    padding: 0 20px;
+  }
+  .right-box-prom {
+    width: 550px;
+    height: calc(100% - 61px);
+  }
+  /* 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 {
+    height: 32px;
+    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--右侧弹框*/
+
+  /* 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="prom">
+        <div class="prom-list">
+            <el-input
+              class="prom-list-search"
+              type="text"
+              :placeholder="$t('overall.search')"
+              size="small"
+            ></el-input>
+            <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 == 'idc'">{{scope.row[item.prop].name}}</span>
+                        <span v-else>{{scope.row[item.prop]}}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('config.account.option')" width="100">
+                  <template slot-scope="scope" :column="item">
+                    <div class="prom-list-options">
+                        <span @click="del(scope.row)" class="prom-list-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="edit(scope.row)" class="prom-list-option"><i class="el-icon-edit-outline"></i></span>
+                    </div>
+                  </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+        <transition name="right-box">
+            <div class="right-box right-box-prom" 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 && promServer.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">
+                            <el-select value-key="id" popper-class="config-dropdown" v-model="promServer.idc" placeholder="" v-if="rightBox.isEdit" size="small">
+                                <el-option
+                                  @click.native="blurEditIdc()"
+                                  v-for="item in idcData"
+                                  :key="item.id"
+                                  :label="item.name"
+                                  :value="item">
+                                    <span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.name}}</span>
+                                    <span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="stopFun">
+                                        <el-input
+                                          type="text"
+                                          v-model="item.name"
+                                          size="mini"
+                                        ></el-input>
+                                    </span>
+                                    <span class="config-dropdown-error-message">{{item.errorMessage}}</span>
+                                    <span class="config-dropdown-btn" @click.stop="toEditIdc(item)">
+                                        <i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
+                                        <i class="el-icon-check" v-if="item.isEdit"></i>
+                                    </span>
+                                    <span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelIdc(item)"><i class="el-icon-delete"></i></span>
+                                </el-option>
+                            </el-select>
+                            <div class="el-select-add-btn" v-if="rightBox.isEdit">
+                                <span class="el-icon-plus"></span>
+                            </div>
+                            <div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{promServer.idc.name}}</div>
+                        </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="promServer.host"
+                              size="small"
+                            ></el-input>
+                            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{promServer.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 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--底部按钮-->
+
+            </div>
+        </transition>
+    </div>
+
+</template>
+<script>
+export default {
+  name: "prom",
+  data() {
+    return {
+      rightBox: { //弹出框相关
+        show: false,
+        isEdit: false, //false查看，true编辑
+        title: ''
+      },
+      promServer: {
+        id: '',
+        host: '',
+        idc: {id: '', name: '', location: ''}
+      },
+      pageObj: {
+        pageNo: 1,
+        pageSize: 20,
+        total:6
+      },
+      tableTitle: [
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: 'IDC',
+          prop: 'idc',
+          show: true,
+        }, {
+          label: 'Host',
+          prop: 'host',
+          show: true,
+        }
+      ],
+      tableData: [
+        {
+          id: '1',
+          host: '192.168.40.241',
+          idc: {id: '3', name: 'aerareqarew', location: 'zhaertaewr'}
+        },
+        {
+          id: '2',
+          host: '192.168.40.242',
+          idc: {id: '5', name: 'idc151654', location: 'bj'}
+        },
+        {
+          id: '3',
+          host: '192.168.40.243',
+          idc: {id: '6', name: 'idc151655', location: 'sh'}
+        },
+        {
+          id: '4',
+          host: '192.168.40.244',
+          idc: {id: '6', name: 'idc151655', location: 'sh'}
+        },
+        {
+          id: '5',
+          host: '192.168.40.245',
+          idc: {id: '7', name: 'idc151656', location: 'gd'}
+        },
+        {
+          id: '6',
+          host: '192.168.40.246',
+          idc: {id: '9', name: 'idc151657', location: 'fj'}
+        },
+      ],
+      idcData: [
+        {id: '1', name: 'idc151656', location: 'gd'},
+        {id: '2', name: 'idc151656', location: 'gd'},
+        {id: '3', name: 'aerareqarew', location: 'zhaertaewr'},
+        {id: '4', name: 'idc151656', location: 'gd'},
+        {id: '5', name: 'idc151654', location: 'bj'},
+        {id: '6', name: 'idc151655', location: 'sh'},
+        {id: '7', name: 'idc151656', location: 'gd'},
+        {id: '8', name: 'idc151656', location: 'gd'},
+        {id: '9', name: 'idc151657', location: 'fj'},
+      ]
+    }
+  },
+  methods: {
+    edit: function(u) {
+      this.promServer = Object.assign({}, u);
+      this.rightBox.isEdit = true;
+      this.rightBox.title = this.$t("config.prom.editProm") + "  ID：" + u.id;
+      this.rightBox.show = true;
+    },
+    del: function(u) {
+    },
+    detail: function(u) {
+      this.promServer = Object.assign({}, u);
+      this.rightBox.isEdit = false;
+      this.rightBox.title = "Prometheus Server ID：" + u.id;
+      this.rightBox.show = true;
+    },
+    add: function() {
+      this.cleanPromServer();
+      this.rightBox.isEdit = true;
+      this.rightBox.title = this.$t("config.prom.createProm");
+      this.rightBox.show = true;
+    },
+    saveOrToEdit: function() {
+      if (!this.rightBox.isEdit) {
+        this.rightBox.isEdit = true;
+        this.rightBox.title = this.$t("config.prom.editProm") + "  ID：" + this.promServer.id;
+      }
+    },
+    toEditIdc: function(item) {
+      if (!item.isEdit) {
+        //如果不在编辑状态，那么其他项如果有改动，则还原改动，最后开始编辑
+        this.blurEditIdc();
+        item.isEdit = true;
+      } else {
+        //如果已在编辑状态，判断name是否有变更，有变更则发请求
+        if (item.name != item.oldName) {
+          if (this.updateIdcName(item) == 200) {
+            item.isEdit = false;
+          }
+        } else {
+          item.errorMessage = '';
+          item.isEdit = false;
+        }
+      }
+    },
+    blurEditIdc: function() {
+      for (var i = 0; i < this.idcData.length; i++) {
+        if (this.idcData[i].isEdit) {
+          this.idcData[i].name = this.idcData[i].oldName;
+          this.idcData[i].isEdit = false;
+          this.idcData[i].errorMessage = '';
+          break;
+        }
+      }
+    },
+    toDelIdc: function(item) {
+      this.blurEditIdc();
+      //TODO 请求后台，删除
+    },
+    initIdcData: function() {
+      for (var i = 0; i < this.idcData.length; i++) {
+        this.$set(this.idcData[i], 'oldName', this.idcData[i].name);
+        this.$set(this.idcData[i], 'isEdit', false);
+      }
+    },
+    esc: function() {
+      this.rightBox.show = false;
+    },
+    stopFun: function() {
+
+    },
+    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: '',
+        host: '',
+        idc: {id: '', name: '', location: ''}
+      }
+    }
+  },
+  mounted() {
+    this.initIdcData();
+  }
+}
+</script>

nezha-fronted/src/router/index.js

@@ -30,8 +30,12 @@ export default new Router({
           component: resolve => require(['../components/page/asset/asset.vue'], resolve),
         },
         {
-          path: '/alarm',
+          path: '/account',
           component: resolve => require(['../components/page/config/account.vue'], resolve),
+        },
+        {
+          path: '/promServer',
+          component: resolve => require(['../components/page/config/promServer.vue'], resolve),
         }
       ]
     },

nezha-fronted/src/store/index.js

@@ -4,7 +4,10 @@ import Vuex from 'vuex'
 Vue.use(Vuex)
 const store = new Vuex.Store({
   state: {
-    assetSelect:''
+    assetData:{
+      selectedData:'',
+      moduleData:'',
+    }
   },
   getters: {
   },