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

Merge branch 'dev-2.0' of https://git.mesalab.cn/nezha/nezha-fronted into dev-3.1

Browse Source
This commit is contained in:
zhangyu
2021-10-15 10:30:59 +08:00
parent ed24261c5e 3465211ab5
commit 07c8acf92f
13 changed files with 267 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
nezha-fronted/src/components/common/language/cn.js
View File

@@ -1806,6 +1806,11 @@ const cn = {
clear: '清空',
enable: '启用',
update: '更新',
edit: '编辑个人中心',
editProfile: '编辑个人中心',
username: '用户名',
name: '名称',
language: '语言',
operationRecord: '操作记录',
changePassword: '修改密码',
oldPassword: '当前密码',

5
nezha-fronted/src/components/common/language/en.js
View File

@@ -1689,6 +1689,11 @@ const en = {
clear: 'Clear',
enable: 'Enable',
update: 'Update',
edit: 'Edit profile',
editProfile: 'Edit Profile',
username: 'User name',
name: 'Name',
language: 'Language',
operationRecord: 'Operation log',
changePassword: 'Change password',
oldPassword: 'Current password',

58
nezha-fronted/src/components/common/login.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="login" @click="langListShow = false">
<div class="login">
<div class="model"></div>
<div class="login-main">
<div class="logo"><img src="../../assets/img/logo-big.png"></div>
@@ -25,15 +25,15 @@
<div class="login-foot">
<button v-if="!verifyShow" id="login" v-loading="loading" :class="{'nz-btn-disabled': !license.valid}" class="login-btn" @click="login">{{$t("login.login")}}</button>
<button v-if="verifyShow" id="verify" v-loading="loading" :class="{'nz-btn-disabled': !license.valid}" class="login-btn" @click="verify">{{$t("login.verify")}}</button>
<div class="login-foot-lang" @click.stop="langListShow = !langListShow">
<i v-if="lang == 'en'" class="nz-icon nz-icon-lang-en"></i>
<i v-else-if="lang == 'cn'" class="nz-icon nz-icon-lang-zh"></i>
<i class="nz-icon nz-icon-arrow-down"></i>
</div>
<div class="login-foot-lang-list" v-show="langListShow">
<i v-if="lang != 'en'" @click="changeLang('en')" class="nz-icon nz-icon-lang-en"></i>
<i v-if="lang != 'cn'" @click="changeLang('cn')" class="nz-icon nz-icon-lang-zh"></i>
</div>
<!-- <div class="login-foot-lang" @click.stop="langListShow = !langListShow">-->
<!-- <i v-if="lang == 'en'" class="nz-icon nz-icon-lang-en"></i>-->
<!-- <i v-else-if="lang == 'cn'" class="nz-icon nz-icon-lang-zh"></i>-->
<!-- <i class="nz-icon nz-icon-arrow-down"></i>-->
<!-- </div>-->
<!-- <div class="login-foot-lang-list" v-show="langListShow">-->
<!-- <i v-if="lang != 'en'" @click="changeLang('en')" class="nz-icon nz-icon-lang-en"></i>-->
<!-- <i v-if="lang != 'cn'" @click="changeLang('cn')" class="nz-icon nz-icon-lang-zh"></i>-->
<!-- </div>-->
</div>
<div class="login-license">
<div class="license-warn" v-if="license.warnInfo">{{license.warnInfo}}</div>
@@ -139,8 +139,7 @@ export default {
uploadFileList: [],
uploadFile: { file: '', path: '', uuid: '' },
loading: false,
lang: localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en', // en/cn
langListShow: false,
lang: 'en', // en/cn
verifyShow: false,
authBindShow: false,
authToken: '',
@@ -166,6 +165,8 @@ export default {
if (res.code == 200) {
// 登录成功，记录用户名、token和lang
this.authToken = res.data.authToken
this.lang = res.data.user.lang
this.$i18n.locale = this.lang
sessionStorage.setItem('nz-token', res.data.authToken)
if (res.data.authFlag === 1) {
if (res.data.authBind === 0) {
@@ -192,7 +193,6 @@ export default {
localStorage.setItem('nz-username', this.loginData.username)
localStorage.setItem('nz-prometheus-federation-enabled', res.data.prometheusFederationEnabled)
localStorage.setItem('nz-language', this.lang)
this.$i18n.locale = this.lang
this.loginSuccess(res)
}
} else {
@@ -214,7 +214,6 @@ export default {
localStorage.setItem('nz-username', this.loginData.username)
localStorage.setItem('nz-prometheus-federation-enabled', res.data.prometheusFederationEnabled)
localStorage.setItem('nz-language', this.lang)
this.$i18n.locale = this.lang
this.loginSuccess(res)
} else {
this.authToken = res.data.authToken
@@ -222,12 +221,12 @@ export default {
}
})
},
changeLang (lang) {
this.lang = lang
this.langListShow = false
this.$i18n.locale = this.lang
localStorage.setItem('nz-language', this.lang)
},
// changeLang (lang) {
// this.lang = lang
// this.langListShow = false
// this.$i18n.locale = 'cn'
// localStorage.setItem('nz-language', this.lang)
// },
validateLogin () {
if (!this.loginData.username || !this.loginData.pin) {
this.$message.error('Empty username or password')
@@ -377,7 +376,7 @@ export default {
.logo {
z-index: 2;
width: 460px;
width: 392px;
img{
width: 100%;
}
@@ -386,25 +385,21 @@ export default {
z-index: 2;
background: rgba(106,106,106,0.5);
border-radius: 8px;
padding: 55px 50px 0px 50px;
padding: 55px 50px 0 50px;
}
.login-box {
z-index: 2;
width: 460px;
width: 392px;
.login-label{
font-family: Roboto-Medium;
font-size: 22px;
color: #FFFFFF;
font-weight: 500;
color: #ffffff;
}
.login-label-foot{
font-family: Roboto-Medium;
font-size: 14px;
color: #DEDEDE;
line-height: 20px;
font-weight: 500;
color: #DEDEDE;
word-break: keep-all;
width: 90%;
}
@@ -412,7 +407,7 @@ export default {
.login-box .login-input {
padding: 12px 0;
height: 60px;
height: 46px;
position: relative;
}
.login-box .login-input .nz-icon {
@@ -438,6 +433,7 @@ export default {
.login-foot {
padding-top: 15px;
display: flex;
width: 392px;
justify-content: space-between;
position: relative;
}
@@ -449,7 +445,7 @@ export default {
border: none;
outline: none;
height: 44px;
width: 320px;
width: 100%;
cursor: pointer;
font-size: 14px;
transition: all linear .2s;
@@ -491,8 +487,8 @@ export default {
}
.login-foot-lang-list::before {
content: " ";
width: 0px;
height: 0px;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent transparent rgba(0, 0, 0, 0.55) transparent;

7
nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
View File

@@ -26,6 +26,7 @@
class="right-box__select"
popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside"
size="small"
:placeholder="$t('el.select.placeholder')"
value-key="id">
<el-option v-for="p in options.parentAssetOptions" :key="p.id" :label="p.name" :value="p.id"></el-option>
</el-select>
@@ -108,7 +109,7 @@
</el-checkbox-group>
</template>
<template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.SELECT">
<el-select v-model="label.value[0]" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small">
<el-select v-model="label.value[0]" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small">
<el-option v-for="item in JSON.parse(label.param).items" :key="item.name" :label="item.name" :value="item.name"></el-option>
</el-select>
</template>
@@ -177,7 +178,7 @@
<template v-if="editAsset.type && editAsset.type.authProtocol === assetConstants.authProtocolData.ssh">
<div class="form__sub-title">SSH</div>
<el-form-item :label="$t('asset.authType')" prop="authType">
<el-select v-model="editAsset.authType" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="value">
<el-select v-model="editAsset.authType" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="value">
<el-option v-for="type in assetConstants.authTypeOptions" :key="type.value" :label="type.label" :value="type.value"/>
</el-select>
</el-form-item>
@@ -220,7 +221,7 @@
<template v-if="editAsset.type && editAsset.type.snmpEnable === 1">
<div class="form__sub-title">SNMP</div>
<el-form-item :label="$t('asset.snmpCredential')" prop="snmpCredentialId">
<el-select v-model="editAsset.snmpCredentialId" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id">
<el-select v-model="editAsset.snmpCredentialId" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id">
<el-option v-for="snmp in options.snmpCredentialOptions" :key="snmp.id" :label="snmp.name" :value="snmp.id"></el-option>
</el-select>
</el-form-item>

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

@@ -16,7 +16,7 @@
class="right-box__select"
clearable
placeholder=""
popper-class="prevent-clickoutside"
popper-class="prevent-clickoutside right-box-select-top"
size="small"
value-key="chartType"
@change="varTypeChange">
@@ -31,7 +31,7 @@
v-model="editChartTemp.pid"
class="right-box__select" clearable
placeholder=""
popper-class="prevent-clickoutside"
popper-class="prevent-clickoutside right-box-select-top"
size="small"
value-key="chartType" >
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in chartTempArr">

140
nezha-fronted/src/components/common/rightBox/profileBox.vue Normal file
View File

@@ -0,0 +1,140 @@
<template>
<div v-clickoutside="{obj: editProfile, func: esc}" class="right-box right-box-profile">
<div class="right-box__header">
<div class="header__title">{{$t('profile.editProfile')}}</div>
<div class="header__operation">
<span v-cancel="{obj: editProfile, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
</div>
</div>
<div class="right-box__container">
<div class="container__form">
<el-form ref="profileForm" :model="editProfile" :rules="rules" label-position="top" label-width="120px">
<el-form-item :label="$t('profile.name')" prop="name">
<el-input maxlength="64" show-word-limit v-model="editProfile.name" size="small" type="text"></el-input>
</el-form-item>
<el-form-item :label="$t('profile.username')" prop="username">
<el-input maxlength="64" show-word-limit v-model="editProfile.username" disabled size="small" type="text"></el-input>
</el-form-item>
<el-form-item :label="$t('profile.email')" prop="email">
<el-input maxlength="64" show-word-limit v-model="editProfile.email" size="small" type="text"></el-input>
</el-form-item>
<el-form-item :label="$t('profile.mobile')" prop="mobile">
<el-input maxlength="64" show-word-limit v-model="editProfile.mobile" size="small" type="text"></el-input>
</el-form-item>
<el-form-item :label="$t('profile.role')" v-if="editProfile.roles[0].i18n != ''" prop="roles">
<el-input maxlength="64" show-word-limit v-model="editProfile.roles[0].i18n" disabled size="small" type="text"></el-input>
</el-form-item>
<el-form-item :label="$t('profile.role')" v-else prop="roles">
<el-input maxlength="64" show-word-limit v-model="editProfile.roles[0].name" disabled size="small" type="text"></el-input>
</el-form-item>
<!--language-->
<el-form-item :label="$t('config.user.language')" prop="lang">
<el-select id="account-input-language"
class="right-box__select"
v-model="editProfile.lang"
clearable
collapse-tags
placeholder=""
popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside"
size="small">
<template v-for="item in languageList">
<el-option :key="item.value" :label="item.label" :value="item.value"></el-option>
</template>
</el-select>
</el-form-item>
<el-form-item :label="$t('profile.source')" prop="source">
<el-input maxlength="64" show-word-limit v-model="editProfile.source" disabled size="small" type="text"></el-input>
</el-form-item>
</el-form>
</div>
</div>
<div class="right-box__footer">
<button id="asset-edit-cancel" v-cancel="{obj: editProfile, func: esc}" class="footer__btn footer__btn--light">
<span>{{$t('overall.cancel')}}</span>
</button>
<button id="asset-edit-save" :class="{'footer__btn--disabled': prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="save">
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>
</template>
<script>
import editRigthBox from '@/components/common/mixin/editRigthBox'
export default {
name: 'modelbox',
components: {
},
props: {
obj: {
type: Object
}
},
computed: {},
mixins: [editRigthBox],
data () {
return {
url: 'sys/user/profile',
rightBox: { profile: { show: false } },
editProfile: {},
languageList: [
{ value: 'en', label: 'English' },
{ value: 'cn', label: '简体中文' }
],
roles: [],
rules: {
name: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
lang: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
}
}
},
watch: {
obj: {
deep: true,
immediate: true,
handler (n) {
this.isEdit = true
this.editProfile = JSON.parse(JSON.stringify(n))
}
}
},
created () {},
methods: {
clickoutside () {
this.esc(false)
},
/* 关闭弹框 */
esc (refresh) {
this.prevent_opt.save = false
this.$emit('close', refresh)
},
save () {
this.$refs.profileForm.validate((valid) => {
if (valid) {
if (this.editProfile.id) {
this.editProfile.roleIds = this.editProfile.roles[0].id
this.$put(this.url, this.editProfile).then(res => {
this.prevent_opt.save = false
if (res.code === 200) {
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
this.esc(true)
this.$emit('clickProfile')
} else {
this.$message.error(res.msg)
}
})
}
}
})
}
}
}
</script>
<style lang="scss">
@import '@/assets/css/common/rightboxcommon.scss';
</style>

4
nezha-fronted/src/components/common/table/settings/userTable.vue
View File

@@ -65,6 +65,10 @@
</template>
<span v-else-if="item.prop === 'createTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
<span v-else-if="item.prop === 'lastLoginTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
<template v-else-if="item.prop === 'lang'">
<span v-if="scope.row[item.prop] === 'en'">English</span>
<span v-else-if="scope.row[item.prop] === 'cn'">简体中文</span>
</template>
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
<span v-else>-</span>
</template>

18
nezha-fronted/src/components/layout/header.vue
View File

@@ -42,7 +42,7 @@
<div id="header-to-english" :style="language === 'en'?'color:#f90':''" @click="changeLocal('en')"><i class="nz-icon nz-icon-lang-en"></i>English</div>
</el-dropdown-item>
<el-dropdown-item>
<div id="header-to-chinese" :style="language === 'cn'?'color:#f90':''" @click="changeLocal('cn')"><i class="nz-icon nz-icon-lang-zh"></i>中文</div>
<div id="header-to-chinese" :style="language === 'cn'?'color:#f90':''" @click="changeLocal('cn')"><i class="nz-icon nz-icon-lang-zh"></i>简体中文</div>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@@ -157,13 +157,13 @@ export default {
document.location.href = '/'
})
},
refreshLang () {
this.language = localStorage.getItem('nz-language')
this.$i18n.locale = this.language
this.$nextTick(() => {
window.location.reload()
})
},
// refreshLang () {
// this.language = localStorage.getItem('nz-language')
// this.$i18n.locale = this.language
// this.$nextTick(() => {
// // window.location.reload()
// })
// },
showPinDialog () {
// this.showChangePin = true
this.$router.push({
@@ -184,7 +184,7 @@ export default {
initEvent () {
bus.$on('login', () => {
this.username = sessionStorage.getItem('nz-username')
this.refreshLang()
// this.refreshLang()
})
if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL)

76
nezha-fronted/src/components/page/config/profile.vue
View File

@@ -30,6 +30,10 @@
</el-popover>
</div>
</div>
<button id="asset-edit-cancel" class="profile-left__btn" @click="profileBox">
<span><i class="nz-icon nz-icon-edit" style="color: #666666;margin-right: 5px;font-size: 18px"></i></span>
<span>{{$t('profile.edit')}}</span>
</button>
<div v-for="item in tableProfile" :key="item.id" class="profile-left__center">
<span style="margin:0 18px 0 0"><i :class="item.icon"></i></span>
<div class="profile-left__center-title">
@@ -39,7 +43,7 @@
</div>
</div>
<div class="profile-left__center">
<span style="margin:0 10px 10px 0"><i class="nz-icon nz-icon-yanzhengma" style="color: orange"></i></span>
<span style="margin:0 18px 10px 0"><i class="nz-icon nz-icon-zhongzhi2FA1" style="color: orange;"></i></span>
<div class="profile-left__center-title">
<div>{{$t('profile.twoFactorAuthentication')}}</div>
</div>
@@ -126,20 +130,27 @@
</button>
</div>
</el-dialog>
<transition name="right-box">
<profile-box v-if="rightBox.show" :obj="object" @clickProfile="clickProfile" @close="closeRightBox"></profile-box>
</transition>
</div>
</template>
<script>
import operationRecord from './operationRecord'
import QRCode from "qrcodejs2";
import MessageBox from "element-ui/packages/message-box/src/main";
import i18n from "@/components/common/i18n";
import QRCode from "qrcodejs2"
import MessageBox from "element-ui/packages/message-box/src/main"
import i18n from "@/components/common/i18n"
import profileBox from '@/components/common/rightBox/profileBox'
import dataList from '@/components/common/mixin/dataList'
export default {
name: 'profile',
components: {
operationRecord
operationRecord,
profileBox
},
mixins: [dataList],
data () {
return {
username: sessionStorage.getItem('nz-username'),
@@ -152,6 +163,18 @@ export default {
mfaLevel: 0,
authKey: '',
authToken: '',
url: 'sys/user/profile',
object: {},
blankObject: { // 空白对象
id: '',
name: '',
username: '',
role: '',
email: '',
mobile: '',
language: 'en',
source: ''
},
// 右侧列表
tableProfile: [
{
@@ -209,7 +232,11 @@ export default {
if (response.code === 200) {
this.userList = response.user
this.mfaLevel = response.user.mfaLevel
this.tableProfile[0].prop = this.userList.roles[0].i18n
if (response.user.roles[0].i18n) {
this.tableProfile[0].prop = this.userList.roles[0].i18n
} else {
this.tableProfile[0].prop = this.userList.roles[0].name
}
this.tableProfile[1].prop = this.userList.email
this.tableProfile[2].prop = this.userList.mobile
if (this.userList.lang == 'cn') {
@@ -278,6 +305,15 @@ export default {
})
})
},
profileBox () {
this.rightBox.show = true
this.$get(this.url).then(res => {
this.object = res.user
})
},
clickProfile () {
this.personalCenter()
},
closeDialog () {
this.authBindShow = false
this.bindAuthCode = ''
@@ -353,10 +389,11 @@ export default {
height: calc(100% - 10px);
width: 360px;
overflow: auto;
position: relative;
.profile-left__header {
height: 200px;
width: 100%;
margin: 10px 0;
width: calc(100% - 18px);
margin:0 0 50px 18px;
text-align: center;
display: flex;
justify-content: flex-start;
@@ -438,7 +475,27 @@ export default {
}
}
}
.profile-left__center:nth-of-type(6) {
.profile-left__btn {
border: 1px solid rgba(0,0,0,0.15);
border-radius: 4px;
background: #fff;
min-width: 132px;
height: 36px;
position: absolute;
top: 175px;
left: 100px;
padding: 0 20px;
cursor: pointer;
span {
font-family: Roboto-Regular;
font-size: 14px;
color: #333333;
text-align: left;
line-height: 22px;
font-weight: 400;
}
}
.profile-left__center:nth-of-type(7) {
margin-bottom: 0;
}
.profile-left__center {
@@ -459,7 +516,6 @@ export default {
color: #8871DB;
}
.profile-left__center-title {
margin-left: 8px;
margin-top: 1px;
div:nth-of-type(1) {
padding-bottom: 5px;

2
nezha-fronted/src/components/page/config/system/apiKeyTable.vue
View File

@@ -41,7 +41,7 @@
</template>
<template v-if="item.prop == 'role'">
<el-popover :content="rules.roleId.message" placement="top" trigger="manual" v-model="rules.roleId.switch" popper-class="small-pop warn-pop" @after-enter="popShow(rules.roleId)">
<el-select v-model="scope.row[item.prop]" size="small" value-key="id" slot="reference" popper-class="api-select right-public-box-select-top right-public-box-dropdown-top role-system-table">
<el-select v-model="scope.row[item.prop]" size="small" :placeholder="$t('el.select.placeholder')" value-key="id" slot="reference" popper-class="api-select right-public-box-select-top right-public-box-dropdown-top role-system-table">
<template v-for="role in roles" >
<el-option :label="role.name" :value="role"></el-option>
</template>

2
nezha-fronted/src/components/page/config/system/notifyMethodTable.vue
View File

@@ -46,7 +46,7 @@
</template>
<template v-if="item.prop == 'account'">
<el-popover :content="rules.account.message" placement="top" trigger="manual" v-model="rules.account.switch" popper-class="small-pop warn-pop" @after-enter="popShow(rules.account)">
<el-select slot="reference" v-model="scope.row[item.prop]" size="small" popper-class="right-public-box-select-top right-public-box-dropdown-top">
<el-select slot="reference" v-model="scope.row[item.prop]" :placeholder="$t('el.select.placeholder')" size="small" popper-class="right-public-box-select-top right-public-box-dropdown-top">
<template v-for="param in accountParams">
<el-option :label="param.label" :value="param.value"></el-option>
</template>

2
nezha-fronted/src/components/page/config/user.vue
View File

@@ -76,7 +76,7 @@ export default {
roles: [],
notifications: [],
mfaLevel: 0,
lang: 'English'
lang: 'en'
},
tableId: 'userTable',
searchMsg: { // 给搜索框子组件传递的信息

4
nezha-fronted/src/components/page/dashboard/alertChartParam.vue
View File

@@ -11,12 +11,12 @@
clearable></el-cascader>
</el-form-item>
<el-form-item :label="$t('dashboard.panel.chartForm.alertParam.alertRule')">
<el-select class="form-item" size="small" popper-class="alert-form-pop right-public-box-dropdown-top right-public-box-select-top no-style-class" v-model="parameters.alertRule" clearable id="alert-param-alertrule">
<el-select class="form-item" size="small" :placeholder="$t('el.select.placeholder')" popper-class="alert-form-pop right-public-box-dropdown-top right-public-box-select-top no-style-class" v-model="parameters.alertRule" clearable id="alert-param-alertrule">
<el-option v-for="(rule, index) in alertRules" :key="index" :label="rule.name" :value="rule.id"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('dashboard.panel.chartForm.alertParam.level')" prop="level" class="severity-box">
<el-select class="form-item" size="small" popper-class="alert-form-pop right-public-box-select-top right-public-box-dropdown-top no-style-class" v-model="parameters.level" clearable id="alert-param-level">
<el-select class="form-item" size="small" :placeholder="$t('el.select.placeholder')" popper-class="alert-form-pop right-public-box-select-top right-public-box-dropdown-top no-style-class" v-model="parameters.level" clearable id="alert-param-level">
<el-option v-for="item in alertPriority" :id="'alert-severity-'+item.value" :key="item.id" :label="item.name" :value="item.id">
<span>
<i class="nz-icon nz-icon-circle" :style="{color:item.color,'font-size':'12px'}"></i> {{item.name}}