gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 样式调整（部分）

Browse Source 
1.样式调整
2.增加alert-config弹框
3.config-promserver弹框的dc的编辑可以用了
4.alert-config 弹框link改成下拉
This commit is contained in:
chenjinsong
2019-12-25 17:15:09 +08:00
parent 76203eceba
commit e734f373e4
11 changed files with 473 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
nezha-fronted/src/assets/css/main.css
View File

@@ -2,11 +2,9 @@
margin: 0;
padding: 0;
}
[v-cloak] {
display: none;
}
body {
height: 100%;
}
@@ -16,7 +14,9 @@ html {
.content-box {
height: 100%;
}
/*通用*/
/* begin--通用*/
.margin-l-5 {
margin-left: 5px !important;
}
@@ -41,6 +41,12 @@ html {
.margin-b-10 {
margin-bottom: 10px !important;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.line-100 {
width: 100%;
height: 1px;
@@ -60,57 +66,80 @@ html {
height: 26px;
}
/*侧滑输入框宽度*/
.el-form-item__content .el-input{
.right-menu .el-form-item__content .el-input{
width: 90%;
}
/* begin--按钮组件*/
.nz-btn {
border-radius: 4px;
cursor: pointer;
line-height: 21px;
font-size: 14px;
font-weight: 700;
padding: 4px 14px;
text-align: center;
-webkit-appearance: none;
white-space: nowrap;
}
.nz-btn.nz-btn-style-normal {
background-color: #16b;
background-image: linear-gradient(#2d8cec, #16b);
border: 1px solid #0b4075;
border-top-color: #16b;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.75);
}
.nz-btn.nz-btn-style-normal:hover:not(.nz-btn-disabled) {
background-image: linear-gradient(#16b, #0d4d8c);
}
.nz-btn:focus {
outline: 0;
}
/* end--按钮组件*/
/* end--通用*/
/* begin--左侧列表*/
.content-left {
float: left;
width: 322px;
width: 270px;
height: 100%;
background-color: #eeeeee;
border-right: 1px solid #dadada;
padding: 0 12px 0 11px;
border-right: 1px solid #cccccc;
padding: 0 12px 0 30px;
box-sizing: border-box;
font-size: 14px;
}
.sidebar-title {
padding: 20px 0 0 15px;
color: #5e5e5e;
padding-top: 20px;
color: #aaaaaa;
font-size: 16px;
}
.sidebar-info {
margin-top: 27px;
border: 1px solid #cacaca;
border-radius: 6px;
height: calc(90vh - 55px);
width: 100%;
}
.sidebar-info-item:first-of-type {
border-radius: 6px 6px 0 0;
padding-top: 10px;
}
.sidebar-info-item {
height: 39px;
line-height: 39px;
padding: 0 8px 0 32px;
border-bottom: 1px solid #cacaca;
line-height: 1.5rem;
padding: 0 10px 0 10px;
cursor: pointer;
color: #5e5e5e;
color: #444444;
margin: 0 0 7px;
}
.side-bar-menu-edit {
line-height: 40px;
line-height: 1.5rem;
float: right;
}
.sidebar-info-item-active {
background-color: #5e5e5e;
color: white;
}
.sidebar-info-foot {
border-radius: 6px 6px 0 0;
border-left: 3px solid #e07700;
font-weight: bold;
}
/* end--左侧列表*/
/* begin--右侧内容*/
.content-right {
height: calc(100% - 131px);
margin-left: 270px;
padding: 0 15px 0 25px;
}
/* begin--顶部工具栏*/
.top-tools {
padding: 22px 0 13px 0;
@@ -158,11 +187,6 @@ html {
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--分页*/

68
nezha-fronted/src/components/common/header.vue
View File

@@ -4,10 +4,11 @@
<el-menu
class="el-menu-demo"
mode="horizontal"
background-color="#ffffff"
background-color="#232f3e"
text-color="#ffffff"
unique-opened
>
<el-submenu index="0">
<el-submenu index="0" popper-class="nz-submenu">
<template slot="title">
<div class="menu-create">
&nbsp;&nbsp;<i class="el-icon-plus"></i>
@@ -27,7 +28,7 @@
{{$t('overall.dashboard')}}
</div>
</el-menu-item>
<el-submenu index="2">
<el-submenu index="2" popper-class="nz-submenu">
<template slot="title">
<div @click="jumpToProject(projectData[0])">{{$t('overall.project')}}</div>
</template>
@@ -35,12 +36,12 @@
<el-menu-item :index="'2-' + index">
<div @click="jumpToProject(item)">
<span>{{item.name}}</span>
<div @click.stop="toEditProject(item)" class="menu-edit"><i class="el-icon-edit-outline"></i></div>
<div @click.stop="toEditProject(item)" class="menu-edit"><i style="color: inherit" class="el-icon-edit-outline"></i></div>
</div>
</el-menu-item>
</template>
</el-submenu>
<el-submenu index="3">
<el-submenu index="3" popper-class="nz-submenu">
<template slot="title">
<div @click="jumpToAsset('asset')">{{$t('overall.asset')}}</div>
</template>
@@ -50,7 +51,7 @@
</el-menu-item>
</template>
</el-submenu>
<el-submenu index="4-0">
<el-submenu index="4-0" popper-class="nz-submenu">
<template slot="title">
<div @click="jumpTo('alertList')">{{$t('overall.alert')}}</div>
</template>
@@ -61,7 +62,7 @@
<div @click="jumpTo('alertConfig')">{{$t('alert.alertConfig')}}</div>
</el-menu-item>
</el-submenu>
<el-submenu index="5">
<el-submenu index="5" popper-class="nz-submenu">
<template slot="title">
<div @click="jumpTo('account')">{{$t('overall.config')}}</div>
</template>
@@ -96,7 +97,7 @@
<p>русский</p>
</div>
</div>
<div class="SignOut" @click="jumpTo('')">
<div class="sign-out" @click="jumpTo('')">
退出登录
</div>
<div slot="reference" class="user-avator">
@@ -198,6 +199,7 @@ export default {
this.editModule = {id: '', name: '', project: this.$store.state.currentProject, port: '', path: '', param: '', paramObj: []};
} else if (item.type == 3) {
this.$refs.addEndpointBox.show(true);
this.$refs.addEndpointBox.clearEndpoints();
} else if (item.type == 5) {
this.$refs.alertConfigBox.show(true, true);
}
@@ -272,16 +274,46 @@ export default {
<style>
.el-menu.el-menu--horizontal{
border-bottom:0px
border-bottom: 0px;
}
.el-submenu__title .el-submenu__icon-arrow {
display: none;
}
.el-menu--horizontal>.el-menu-item.is-active{
border-bottom:0px
border-bottom: 0px;
}
.el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
border-bottom:0px
.el-menu--horizontal>.el-submenu.is-active .el-submenu__title,
.el-menu--horizontal>.el-menu-item.is-active,
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
border-bottom: 0px;
color: white;
}
.el-menu--horizontal.nz-submenu {
border: 1px solid #bbbbbb;
border-top: none;
}
.nz-submenu .el-menu--popup {
background-color: white !important;
}
.nz-submenu .el-menu--popup .el-menu-item {
background-color: white !important;
}
.nz-submenu .el-menu--popup-bottom-start {
margin-top: 0;
}
.nz-submenu.el-menu--horizontal .el-menu .el-menu-item {
padding: 0 20px;
color: #444444 !important;
transition: none;
}
.nz-submenu.el-menu--horizontal .el-menu .el-menu-item:hover {
color: #ff9900 !important;
}
.el-submenu__title .el-icon-plus {
color: white;
}
.el-menu-item>div, .el-menu-item>div>div {
font-size: 15px;
}
</style>
@@ -290,7 +322,6 @@ export default {
padding-left: 50%;
width: 500px;
float: left;
font-size: 22px;
}
.header {
@@ -298,9 +329,8 @@ export default {
box-sizing: border-box;
width: 100%;
height: 60px;
background-color: #ffffff;
background-color: #232f3e;
z-index: 510;
box-shadow: 0px 20px 13px -19px #5E5E5E;
}
.header-right {
@@ -329,6 +359,7 @@ export default {
.user-avator span {
font-size: 16px;
margin: 0 5px;
color: white;
}
.user-avator i.iconfont {
@@ -352,7 +383,7 @@ export default {
text-align: center;
}
.SignOut {
.sign-out {
width: 100%;
height: 30px;
color: #fff;
@@ -363,13 +394,10 @@ export default {
cursor: pointer;
}
.SignOut:hover {
.sign-out:hover {
opacity: .8;
}
.header-name-jiantou {
position: static !important;
}
.el-menu-demo>li:first-of-type {
position: fixed;
left: 40%;

4
nezha-fronted/src/components/common/home.vue
View File

@@ -17,7 +17,7 @@ export default {
</script>
<style scoped>
@media screen and (max-width: 1600px) {
/*@media screen and (max-width: 1600px) {
.content-box {
background: #a0eea6;
}
@@ -26,5 +26,5 @@ export default {
.content-box {
background: #b94b7e;
}
}
}*/
</style>

24
nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
View File

@@ -76,6 +76,7 @@
</div>
<div class="line-100"></div>
<div class="endpoint-sub-table-body">
<div v-if="!currentModuleCopy.id" class="endpoint-sub-table-body-dialog"></div>
<div @click="selectAsset(item, index)" :data="item.id" v-for="item,index in assetList" class="endpoint-sub-table-row">
<div class="endpoint-sub-table-col">{{item.host}}</div>
<div class="endpoint-sub-table-col">{{item.sn}}</div>
@@ -341,6 +342,7 @@
if (this.endpointList[i].assetId == endpoint.assetId) {
this.endpointList.splice(i, 1);
this.assetList.unshift(endpoint.asset);
i--;
break;
}
}
@@ -363,6 +365,16 @@
getAssetList() {
this.$get('asset', this.assetPageObj).then(response => {
if (response.code === 200) {
let respData = response.data.list;
for (let i = 0; i < respData.length; i++) {
for (let j = 0; j < this.endpointList.length; j++) {
if (respData[i].id == this.endpointList[j].assetId) {
respData.splice(i, 1);
i--;
break;
}
}
}
this.assetList = response.data.list;
}
});
@@ -385,6 +397,8 @@
this.currentModuleCopy = {};
this.editParamBox.show = false;
this.tempParamObj = [];
this.endpointList = [];
this.getAssetList();
},
changeModule(module) {
@@ -750,7 +764,7 @@
line-height: 28px;
height: 30px;
}
.endpoint-sub-table-row {
.endpoint-sub-table-row, .endpoint-sub-table-row-disabled {
line-height: 28px;
height: 30px;
color: #656565;
@@ -779,9 +793,17 @@
}
.endpoint-sub-table-body {
font-size: 15px;
position: relative;
overflow: auto;
height: calc(100% - 95px);
}
.endpoint-sub-table-body-dialog {
width: 100%;
height: 100%;
background-color: #e9ebec;
position: absolute;
opacity: 0.2;
}
.endpoints-clear-btn {
margin: 6px 0 0 10px;
}

82
nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
View File

@@ -51,7 +51,7 @@
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('alert.list.type')}}</div>
<div class="right-box-form-content">
<el-select popper-class="config-dropdown" v-model="alertRule.type" placeholder="" v-if="rightBox.isEdit" size="small" >
<el-select @change="(val) => {changeType(val);}" popper-class="config-dropdown" v-model="alertRule.type" placeholder="" v-if="rightBox.isEdit" size="small" >
<el-option
v-for="item in typeData"
:key="item.key"
@@ -66,30 +66,15 @@
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('alert.config.link')}}</div>
<div class="right-box-form-content">
<el-input
v-if="rightBox.isEdit"
type="text"
v-model="alertRule.linkId"
size="mini"
></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.linkObject.name}}</div>
<!--<el-select popper-class="config-dropdown" v-model="alertRule.severity" placeholder="" v-if="rightBox.isEdit" size="small">
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.linkObject ? alertRule.linkObject.name : ''}}</div>
<el-select v-model="alertRule.linkId" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option
v-for="item in severityData"
:key="item.key"
:label="item.value"
:value="item.key">
<span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.value}}</span>
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop>
<el-input
type="text"
v-model="item.name"
size="mini"
></el-input>
</span>
v-for="item in linkObjList"
:key="item.id"
:label="alertRule.type == 3 ? item.host : item.name"
:value="item.id">
</el-option>
</el-select>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.severity}}</div>-->
</div>
</div>
<!--expr-->
@@ -174,7 +159,7 @@
</div>
</div>
<!--receiver-->
<div class="right-box-form-row">
<!--<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 class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown" v-model="alertRule.receiver" placeholder="" v-if="rightBox.isEdit" size="small">
@@ -205,7 +190,7 @@
</div>
<div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{alertRule.receiver}}</div>
</div>
</div>
</div>-->
</div>
<!-- end--表单-->
@@ -245,15 +230,15 @@
],
typeData: [
{
key: 1,
key: 1, //project
value: this.$t('alert.config.typeOption.project')
},
{
key: 2,
key: 2, //module
value: this.$t('alert.config.typeOption.module')
},
{
key: 3,
key: 3, //asset
value: this.$t('alert.config.typeOption.asset')
}
],
@@ -313,6 +298,16 @@
});
}
},
changeType(type) {
this.alertRule.linkId = '';
if (type == 1) {
this.getProjectList();
} else if (type == 2) {
this.getModuleList();
} else if (type == 3) {
this.getAssetList();
}
},
del: function(u) {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
@@ -378,9 +373,29 @@
this.rightBox.show = false;
},
getLinkObj() {
getProjectList() {
this.$get('project', {pageNo: 1, pageSize: 9999}).then(response => {
if (response.code == 200) {
this.linkObjList = response.data.list;
}
})
},
getModuleList() {
this.$get('module', {pageNo: 1, pageSize: 9999}).then(response => {
if (response.code == 200) {
this.linkObjList = response.data.list;
}
})
},
getAssetList() {
this.$get('asset', {pageNo: 1, pageSize: 9999}).then(response => {
if (response.code == 200) {
this.linkObjList = response.data.list;
}
})
},
},
created() {
this.initReceiverData();
@@ -391,6 +406,15 @@
deep: true,
handler(n, o) {
this.alertRule = n;
if (this.alertRule.id) {
if (this.alertRule.type == 1) {
this.getProjectList();
} else if (this.alertRule.type == 2) {
this.getModuleList();
} else if (this.alertRule.type == 3) {
this.getAssetList();
}
}
if (this.rightBox.show) {
if (this.rightBox.isEdit && this.alertRule.id) {
this.rightBox.title = this.$t("alert.config.editAlertConfig") + " ID：" + this.alertRule.id;

17
nezha-fronted/src/components/common/rightBox/projectBox.vue
View File

@@ -28,23 +28,32 @@
<div class="right-box-title">{{rightBox.title}}</div>
<!-- end--标题-->
<!-- begin--表单-->
<el-form :model="project" label-position="top" class="right-box-form">
<el-form-item :label='$t("project.project.projectName")' prop="name">
<el-input maxlength="64" show-word-limit v-model="project.name"></el-input>
</el-form-item>
<el-form-item :label='$t("project.project.description")' prop="remark">
<el-input type="textarea" maxlength="1024" show-word-limit v-model="project.remark"></el-input>
</el-form-item>
</el-form>
<!--&lt;!&ndash; begin&#45;&#45;表单&ndash;&gt;
<div class="right-box-form">
<!--name-->
&lt;!&ndash;name&ndash;&gt;
<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-->
&lt;!&ndash;description&ndash;&gt;
<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>
</div>-->
<!-- begin--底部按钮-->
<div class="right-box-bottom-btns">

10
nezha-fronted/src/components/common/searchInput.vue
View File

@@ -1022,14 +1022,14 @@
display: flex;
position: relative;
box-shadow: 0px 0px 20px 0px rgba(0,0,0,.08);
line-height: 28px;
line-height: 31px;
}
.new-search .search-input-all{
width: 300px;
background: #fff;
color: rgba(0,0,0,.55);
height: 28px;
line-height: 28px;
height: 31px;
line-height: 31px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
display: flex;
@@ -1042,8 +1042,8 @@
}
.search-input-all .search-history{
padding: 0px 10px;
height: 20px;
line-height: 20px;
height: 23px;
line-height: 23px;
text-align: center;
border-right: 1px solid #e5e5e5;
margin-top: 4px;

10
nezha-fronted/src/components/page/alert/config.vue
View File

@@ -48,10 +48,14 @@
</div>
<div class="content-right">
<div class="top-tools">
<el-button @click="toAdd" class="top-tool-btn top-tool-btn-active top-tool top-tool-right margin-l-10" size="mini">
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
<span><i class="el-icon-plus"></i></span>
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</el-button>
</button>
<!--<el-button @click="toAdd" class="top-tool-btn top-tool-btn-active top-tool top-tool-right margin-l-10" size="mini">
<span><i class="el-icon-plus"></i></span>
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</el-button>-->
<div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
</div>
<el-table
@@ -81,7 +85,7 @@
<span v-else-if="item.prop == 'type'">
<template v-for="type in typeData" v-if="type.key == scope.row[item.prop]">{{type.value}}</template>
</span>
<span v-else-if="item.prop == 'linkObject' && scope.row[item.prop]">{{scope.row[item.prop].name}}</span>
<span v-else-if="item.prop == 'linkObject' && scope.row[item.prop]">{{scope.row.type != 3 && scope.row.linkObject ? scope.row[item.prop].name : scope.row[item.prop].host}}</span>
<span v-else>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>

21
nezha-fronted/src/components/page/config/account.vue
View File

@@ -3,11 +3,6 @@
height: 100%;
}
.content-right {
height: calc(100% - 131px);
margin-left: 322px;
padding: 0 15px 0 25px;
}
.content-right-option {
cursor: pointer;
display: inline-block;
@@ -54,10 +49,14 @@
</div>
<div class="content-right">
<div class="top-tools">
<el-button @click="toAdd" class="top-tool-btn top-tool-btn-active top-tool margin-l-10 top-tool-right" size="mini">
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
<span><i class="el-icon-plus"></i></span>
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</el-button>
</button>
<!--<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>-->
<div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
</div>
<el-table
@@ -174,7 +173,7 @@
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{user.email}}</div>
</div>
</div>
<div class="right-box-form-row">
<!--<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 class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown" multiple v-model="user.receiver" placeholder="" v-if="rightBox.isEdit" size="small">
@@ -207,13 +206,13 @@
<template v-for="rec in user.receiver">{{rec.name}}</template>
</div>
</div>
</div>
</div>-->
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('config.account.language')}}</div>
<div class="right-box-form-content">
<el-radio v-model="user.lang" label="en" :disabled="!rightBox.isEdit && user.lang != 'en'">English</el-radio>
<el-radio v-model="user.lang" label="zh" :disabled="!rightBox.isEdit && user.lang != 'zh'">中文</el-radio>
<el-radio v-model="user.lang" label="ru" disabled>русский（{{$t('config.account.notCurrentlySupport')}}）</el-radio>
<!--<el-radio v-model="user.lang" label="ru" disabled>русский（{{$t('config.account.notCurrentlySupport')}}）</el-radio>-->
</div>
</div>
<div class="right-box-form-row">
@@ -295,7 +294,7 @@ export default {
}, {
label: this.$t('config.account.receiver'),
prop: 'receiver',
show: true,
show: false,
width: 240
}, {
label: this.$t('config.account.createTime'),

257
nezha-fronted/src/components/page/config/promServer.vue
View File

@@ -23,6 +23,42 @@
.content-right-option .el-icon-view:hover {
color: #409EFF;
}
.pop-window {
height: 370px;
width: 400px;
}
.pop-window-assetType {
height: 550px;
width: 400px;
}
.pop-window-assetType-content {
padding: 1px 15px 15px 20px;
}
.sidebar-pop-input {
position: absolute;
right: 50px;
width: 200px;
height: 26px;
border-radius: 4px;
border: 1px solid #DCDFE6;
color: #606266;
display: inline-block;
padding: 0px 15px;
}
.sidebar-pop-input-select {
position: absolute;
right: 83px;
width: 200px;
height: 26px;
border-radius: 4px;
border: 1px solid #DCDFE6;
color: #606266;
display: inline-block;
padding: 0px 15px;
}
</style>
<template>
<div class="prom">
@@ -35,10 +71,14 @@
</div>
<div class="content-right">
<div class="top-tools">
<el-button @click="toAdd" class="top-tool-btn top-tool-btn-active margin-l-10 top-tool top-tool-right" size="mini">
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
<span><i class="el-icon-plus"></i></span>
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</el-button>
</button>
<!--<el-button @click="toAdd" class="top-tool-btn top-tool-btn-active margin-l-10 top-tool top-tool-right" size="mini">
<span><i class="el-icon-plus"></i></span>
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</el-button>-->
<div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
</div>
<el-table
@@ -117,24 +157,116 @@
: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>
<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-label-txt">{{item.name}}</span>
<el-popover
placement="left"
v-model="item[item.name]"
>
<div class="pop-window-assetType-content">
<div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full"
@click="item[item.name] = false">
<div class="right-box-btn-icon">
<i class="el-icon-close"></i>
</div>
<span>{{$t('overall.esc')}}</span>
</div>
</div>
<div class="pop-window">
<span style="display: block;padding-bottom: 20px">标题</span>
<el-input v-model="popIdcData.name"/>
<el-input v-model="popIdcData.location"/>
<el-select v-model="popIdcData.principal" clearable>
<el-option
v-for="item in idcUserData"
:key="item.key"
:label="item.username"
:value="item.userId"
>
</el-option>
</el-select>
<el-input v-model="popIdcData.tel"/>
</div>
</div>
<div class="right-box-bottom-btns">
<div class="right-box-bottom-btn right-box-bottom-btn-cancel"
@click.stop="item[item.name]= false">
{{$t('overall.cancel')}}
</div>
<div class="right-box-bottom-btn right-box-bottom-btn-50"
@click="editData('idc', item.id, popIdcData)">
{{$t('overall.save')}}
</div>
</div>
<span class="config-dropdown-btn" slot="reference"
@click.stop="getSingleIDCData(item.id,'edit')"><i
class="el-icon-edit-outline"></i></span>
</el-popover>
<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="right-box-row-btn" v-if="rightBox.isEdit">
<span class="el-icon-plus"></span>
<el-popover
placement="left"
v-model="visible"
>
<div class="pop-window-assetType-content">
<div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full"
@click="visible = false">
<div class="right-box-btn-icon">
<i class="el-icon-close"></i>
</div>
<span>{{$t('overall.esc')}}</span>
</div>
</div>
<div class="pop-window">
<span style="display: block;padding-bottom: 20px">标题</span>
<div style="padding-top: 10px;padding-left: 20px">
<div>
<label style="font-size: 12px">DN name</label>
<input class='sidebar-pop-input' v-model="addIdcData.name"/>
</div>
<div style="padding-top: 40px">
<label style="font-size: 12px">Loaction</label>
<input class='sidebar-pop-input' v-model="addIdcData.location"/>
</div>
<div style="padding-top: 40px">
<label style="font-size: 12px;padding-right: 20px">负责人</label>
<select class='sidebar-pop-input-select'
style="margin-left:-40px "
v-model="addIdcData.principal"
clearable>
<option
v-for="item in idcUserData"
:key="item.key"
:label="item.username"
:value="item.userId"
>
</option>
</select>
</div>
<div style="padding-top: 40px">
<label style="font-size: 12px">Tel</label>
<input class='sidebar-pop-input' v-model="addIdcData.tel"/>
</div>
</div>
</div>
</div>
<div class="right-box-bottom-btns">
<div class="right-box-bottom-btn right-box-bottom-btn-cancel"
@click.stop="visible= false">
{{$t('overall.cancel')}}
</div>
<div class="right-box-bottom-btn right-box-bottom-btn-50"
@click="addNewData('IDC')">
{{$t('overall.save')}}
</div>
</div>
<span slot="reference"
@click.prevent=''><i
class="el-icon-plus"></i></span>
</el-popover>
</div>
<div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{promServer.idc.name}}</div>
</div>
@@ -198,6 +330,7 @@ export default {
name: "prom",
data() {
return {
visible:false,
rightBox: { //弹出框相关
show: false,
isEdit: false, //false查看，true编辑
@@ -283,6 +416,28 @@ export default {
}],
},
searchLabel: {}, //搜索参数
idcSelectedData: {
id: '',
name: '',
location: '',
principal: '',
tel: ''
},
addIdcData: {
id: '',
name: '',
location: '',
principal: '',
tel: ''
},
popIdcData: {
id: '',
name: '',
location: '',
principal: '',
tel: ''
},
idcUserData: '',
}
},
methods: {
@@ -382,6 +537,7 @@ export default {
if (this.idcData[i].isEdit) {
this.idcData[i].name = this.idcData[i].oldName;
this.idcData[i].isEdit = false;
this.idcData[i].errorMessage = '';
break;
}
@@ -412,6 +568,7 @@ export default {
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);
this.$set(this.idcData[i], this.idcData[i].name, false)
}
this.getTableData();
}
@@ -466,7 +623,6 @@ export default {
this.getTableData();
},
search: function(searchObj) {
console.info(searchObj);
this.searchLabel = {};
for (let item in searchObj) {
if (searchObj[item]) {
@@ -474,10 +630,77 @@ export default {
}
}
this.getTableData();
},
addNewData(type) {
if (type === 'IDC') {
this.$post('idc', this.addIdcData).then(res => {
if (res.code === 200) {
const h = this.$createElement;
this.$notify({
message: h('i', {style: 'color: teal'}, '添加成功'),
duration: 2000
});
this.getIdcData()
}else{
const h = this.$createElement;
this.$notify({
message: h('i', {style: 'color: teal'}, res.msg),
duration: 2000
});
}
})
}
},
getSingleIDCData(data, item) {
if (item !== 'edit') {
this.idcSelectedData = '';
this.idcData.forEach(item => {
if (item.id === data) {
this.idcSelectedData = item
}
});
} else {
this.idcData.forEach(item => {
if (item.id === data) {
console.log(item)
this.popIdcData.name = item.name
this.popIdcData.location = item.location
this.popIdcData.principal = item.principal
this.popIdcData.tel = item.tel
}
});
}
},
getUserData() {
this.$get('sys/user/list').then(response => {
if (response.code === 200) {
this.idcUserData = response.data.list
}
})
},
editData(data, id, item) {
item.id = id;
this.$put(data, item).then(res => {
if (res.code === 200) {
const h = this.$createElement;
this.$notify({
message: h('i', {style: 'color: teal'}, '修改成功'),
duration: 2000
})
}else{
const h = this.$createElement;
this.$notify({
message: h('i', {style: 'color: teal'}, res.msg),
duration: 2000
})
}
})
},
},
mounted: function() {
this.getIdcData();
this.getUserData();
},
watch: {
'promServer.idc': function(n, o) {

10
nezha-fronted/src/components/page/project/project2.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="project">
<div class="content-left">
<div class="sidebar-title">{{currentProject.name}}</div>
<div class="sidebar-title">{{$t('project.project.project')}}：{{currentProject.name}}</div>
<div class="sidebar-info">
<div
v-for="item in moduleList"
@@ -59,10 +59,14 @@
<span class="top-tool-btn-txt">{{$t('project.metrics.metrics')}}</span>
</el-button>
</el-button-group>
<el-button @click="toCreateEndpoint" class="top-tool-btn top-tool-btn-active top-tool margin-l-10 top-tool-right" size="mini">
<button @click="toCreateEndpoint" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
<span><i class="el-icon-plus"></i></span>
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</el-button>
</button>
<!--<el-button @click="toCreateEndpoint" class="top-tool-btn top-tool-btn-active top-tool margin-l-10 top-tool-right" size="mini">
<span><i class="el-icon-plus"></i></span>
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</el-button>-->
<div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch"></search-input></div>
</div>
<el-table