perf: 新增tab样式

This commit is contained in:
chenjinsong
2020-01-17 16:06:35 +08:00
parent 93f06e2e1e
commit e6f1649642
11 changed files with 568 additions and 426 deletions

View File

@@ -13,6 +13,8 @@ $btn-light-background-color-hover: linear-gradient(180deg, #F0F0F0 0%, #D8D8D8 9
$btn-light-txt-color: #666; //灰色按钮颜色
$btn-light-shadow: 0 0 1px 1px rgba(162,162,162,0.50); //灰色按钮边框阴影
$pop-box-shadow: 0 0 12px 0 rgba(0,0,0,0.2);
$box-title-color: #333; //弹框标题字体颜色
$content-left-text-color: #666; //左侧菜单默认字色

View File

@@ -70,7 +70,12 @@ html {
.height-100 {
height: 100% !important;
}
.too-long-split {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: inline-block;
}
/* begin--按钮组件*/
.nz-btn-min-width-35 {
min-width: 35px;
@@ -176,7 +181,19 @@ html {
/* end--按钮组件*/
/* begin--el-input扩展 */
.input-x-mini .el-input__inner {
.input-x-mini-22 .el-input__inner {
height: 22px;
line-height: 22px;
padding: 0 5px;
font-size: 12px;
}
.input-x-mini-24 .el-input__inner {
height: 24px;
line-height: 24px;
padding: 0 5px;
font-size: 12px;
}
.input-x-mini-26 .el-input__inner {
height: 26px;
line-height: 26px;
padding: 0 5px;
@@ -193,6 +210,31 @@ html {
border-radius: 0 4px 4px 0;
}
/* end--el-input扩展 */
/* begin--nz-tab组件*/
.nz-tab {
font-size: 14px;
}
.project .nz-tab {
margin-top: -6px;
}
.nz-tab-item-box {
padding: 0 15px;
display: inline-block;
}
.nz-tab-item {
line-height: 14px;
padding-bottom: 10px;
color: #999;
cursor: pointer;
}
.nz-tab-item-active {
border-bottom: 3px solid $global-text-color-active;
color: #333;
cursor: default;
}
/* end--nz-tab组件*/
/* end--通用*/
/* begin--左侧列表*/
@@ -282,7 +324,8 @@ html {
}
/* begin--顶部工具栏*/
.top-tools {
padding: 22px 0 13px 0;
margin: 26px 0 41px 0;
height: 1px;
}
.top-tools .top-tool-search {
width: 260px;
@@ -292,7 +335,6 @@ html {
/* start--内容*/
.content-right>.el-table{
margin-top: 30px;
border: none;
font-size: 12px;
}
@@ -507,7 +549,7 @@ html {
/* begin--右侧弹框--内容*/
.nz-pop { /*小弹框*/
padding-top: 0;
box-shadow: 0 0 12px 0 rgba(0,0,0,0.20);
box-shadow: $pop-box-shadow;
}
.nz-pop2 {
padding: 0 20px 20px 20px;
@@ -554,6 +596,9 @@ html {
height: 360px;
width: 100%;
}
.pop-box-asset2 {
height: 250px;
}
.pop-box-asset li {
height: 24px;
line-height: 24px;
@@ -563,6 +608,14 @@ html {
vertical-align: top;
width: 90%;
}
.pop-item-contain {
position: relative;
}
.pop-item-icons {
display: inline-block;
position: absolute;
right: 0;
}
.config-dropdown-btn i {
font-size: 12px;
}
@@ -758,12 +811,14 @@ html {
width: 500px;
}
.asset-dropdown {
width: 440px;
width: 400px;
}
.asset-dropdown .el-select-dropdown__item {
position: relative;
}
.config-dropdown-btn {
display: inline-block;
margin-left: 7px;
float: right;
color: #60BEFF;
font-size: 13px
}
@@ -777,6 +832,15 @@ html {
.config-dropdown-btn-delete:hover {
color: #D96D7A;
}
.config-dropdown-label-input {
display: inline-block;
width: calc(100% - 50px);
}
.config-dropdown-label-icons {
display: inline-block;
position: absolute;
right: 22px;
}
.config-dropdown.is-multiple .el-select-dropdown__item.selected::after {
content: "" !important;
}

View File

@@ -5,16 +5,16 @@
:style="{opacity:(eventfixedVal.shezhi==1),left:(eventfixedVal.shezhi==1 ? event_positionx : -2000)+'px',top:(event_positiony)+'px'}"
>
<div class="pop-top-btns">
<button type="button" @click="shezhiControl('ok')" class="nz-btn nz-btn-size-small nz-btn-style-normal" id="element-set-ok">
<span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
<button type="button" @click="shezhiControl('ok')" class="nz-btn nz-btn-size-alien nz-btn-size-small nz-btn-style-light nz-btn-min-width-35" id="element-set-ok">
<span class="pop-top-btn-icon"><i class="nz-icon nz-icon-edit"></i></span>
<span class="pop-top-btn-txt">{{$t('overall.save')}}</span>
</button>
<button type="button" @click="shezhiControl('cancel')" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square" id="element-set-esc">
<span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
<button type="button" @click="shezhiControl('cancel')" class="nz-btn nz-btn-size-alien nz-btn-size-small nz-btn-style-light nz-btn-min-width-35" id="element-set-esc">
<span class="pop-top-btn-icon"><i class="el-icon-close"></i></span>
<span class="pop-top-btn-txt">{{$t('overall.esc')}}</span>
</button>
</div>
<div class="pop-title">
<p>{{$t('overall.select')}}</p>
</div>
<div class="pop-title">{{$t('overall.select')}}</div>
<div class="pop-box elementset-labels">
<el-scrollbar style="height: 100%;">
<div
@@ -33,10 +33,10 @@
</el-scrollbar>
</div>
<div class="elementset-bottom-btns">
<button type="button" @click="dropAll(true)" class="nz-btn nz-btn-size-small nz-btn-style-pure-white ">
<button type="button" @click="dropAll(true)" class="nz-btn nz-btn-size-normal nz-btn-style-light">
<span class="top-tool-btn-txt">{{$t('overall.all')}}</span>
</button>
<button type="button" @click="dropAll(false)" class="nz-btn nz-btn-size-small nz-btn-style-pure-white">
<button type="button" @click="dropAll(false)" class="nz-btn nz-btn-size-normal nz-btn-style-light">
<span class="top-tool-btn-txt">{{$t('overall.cancel')}}</span>
</button>
</div>
@@ -149,9 +149,9 @@ export default {
<style lang="scss" scoped>
.pop-elementset {
padding: 12px;
padding: 0 12px 12px 12px;
border: 1px solid #EBEEF5;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
box-shadow: $pop-box-shadow;
position: fixed;
top: 0;
left: 10px;

View File

@@ -9,7 +9,7 @@
:current-page="pageObj.pageNo"
:page-sizes="[20, 50, 100, 300]"
:page-size="20"
layout="prev, pager, next,sizes,jumper,->,total"
layout="total, prev, pager, next,sizes,jumper"
:total="this.pageObj.total"
></el-pagination>
</div>
@@ -56,13 +56,16 @@ export default {
</script>
<style>
.el-pagination__total {
float: left;
}
.pagination {
padding-top: 18px;
padding-top: 12px;
text-align: center;
}
.el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
margin:0px 10px 0px 10px;
margin:5px 10px 0px 10px;
padding: 0 4px;
font-size: 13px;
min-width: 20px;

View File

@@ -41,7 +41,7 @@
</span>
</button><div
class="endpoint-asset-search-input">
<el-input class="input-x-mini nz-input-group-middle" placeholder="" v-model="assetSearch.text"></el-input>
<el-input class="input-x-mini-22 nz-input-group-middle" placeholder="" v-model="assetSearch.text"></el-input>
</div><button
type="button" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-append" id="search-asset"><i @click="searchAsset" class="el-icon-search"></i></button>
@@ -50,8 +50,8 @@
<div @click="dropdownSelect('SN')" class="endpoint-asset-search-dropdown-item" id="search-asset-sn">SN</div>
</div>
</div>
<!--end--搜索框-->
<!-- begin--table-->
<div class="endpoint-sub-table">
<div class="endpoint-sub-table-head">
@@ -76,7 +76,7 @@
<!--module-->
<div class="endpoints-box-module-info">
<div class="title">{{$t('project.endpoint.moduleParameter')}}:</div>
<el-input class="module-info module-info-port input-x-mini" v-model="currentModuleCopy.port"></el-input>
<el-input class="module-info module-info-port input-x-mini-22" v-model="currentModuleCopy.port"></el-input>
<el-popover
placement="bottom"
width="200"
@@ -85,9 +85,9 @@
<div class="endpoint-param-pop">
<div v-for="item,index in currentModuleCopy.paramObj">{{item.key}}={{item.value}}</div>
</div>
<el-input id="edit-param" @click.native.stop="showEditParamBox(true, currentModuleCopy, 1, $event)" slot="reference" disabled class="module-info module-info-param input-x-mini" v-model="currentModuleCopy.param"></el-input>
<el-input id="edit-param" @click.native.stop="showEditParamBox(true, currentModuleCopy, 1, $event)" slot="reference" disabled class="module-info module-info-param input-x-mini-22" v-model="currentModuleCopy.param"></el-input>
</el-popover>
<el-input class="module-info module-info-path input-x-mini" v-model="currentModuleCopy.path"></el-input>
<el-input class="module-info module-info-path input-x-mini-22" v-model="currentModuleCopy.path"></el-input>
<button type="button" id="cover-param" @click="coverEndpoint" class="nz-btn nz-btn-size-small nz-btn-style-light module-info module-info-cover">{{$t('overall.cover')}}</button>
</div>
<!--endpoints-->
@@ -130,7 +130,7 @@
</el-popover>
<span @mousedown.stop v-else @click.stop="showEditParamBox(true, scope.row, 2, $event)">
<el-form-item :prop="'endpointList[' + scope.row.index + '].param'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
<el-input readonly class="endpoint-info endpoint-info-param input-x-mini" v-model="scope.row.param"></el-input>
<el-input readonly class="endpoint-info endpoint-info-param input-x-mini-22" v-model="scope.row.param"></el-input>
</el-form-item>
</span>
</span>
@@ -148,7 +148,7 @@
</el-popover>
<span @mousedown.stop v-else>
<el-form-item :prop="'endpointList[' + scope.row.index + '].path'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
<el-input class="endpoint-info input-x-mini" v-model="scope.row.path"></el-input>
<el-input class="endpoint-info input-x-mini-22" v-model="scope.row.path"></el-input>
</el-form-item>
</span>
</span>
@@ -156,7 +156,7 @@
<span v-if="!scope.row.isEdit">{{scope.row.port}}</span>
<span @mousedown.stop v-else>
<el-form-item :prop="'endpointList[' + scope.row.index + '].port'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
<el-input class="endpoint-info input-x-mini" v-model="scope.row.port"></el-input>
<el-input class="endpoint-info input-x-mini-22" v-model="scope.row.port"></el-input>
</el-form-item>
</span>
</span>
@@ -164,7 +164,7 @@
<span v-if="!scope.row.isEdit">{{scope.row.host}}</span>
<span @mousedown.stop v-else>
<el-form-item :prop="'endpointList[' + scope.row.index + '].host'" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
<el-input class="endpoint-info input-x-mini" v-model="scope.row.host"></el-input>
<el-input class="endpoint-info input-x-mini-22" v-model="scope.row.host"></el-input>
</el-form-item>
</span>
</span>
@@ -207,9 +207,9 @@
<div @mousedown.stop class="right-sub-box" v-if="editParamBox.show" :style="'top: ' + editParamBox.top + 'px; left: ' + editParamBox.left + 'px;'">
<div class="param-box">
<div class="param-box-row" v-for="(item, index) in tempParamObj">
<el-input placeholder="key" class="param-box-row-key input-x-mini" v-model="item.key"></el-input>
<el-input placeholder="key" class="param-box-row-key input-x-mini-22" v-model="item.key"></el-input>
<span class="param-box-row-eq">=</span>
<el-input placeholder="value" class="param-box-row-value input-x-mini" v-model="item.value"></el-input>
<el-input placeholder="value" class="param-box-row-value input-x-mini-22" v-model="item.value"></el-input>
<span class="param-box-row-symbol" :id="'remove-param-'+index" @click="removeParam(index)"><i class="nz-icon nz-icon-minus-square"></i></span>
</div>
</div>
@@ -718,7 +718,7 @@
.right-child-box .module-info {
display: inline-block;
height: 24px;
height: 22px;
vertical-align: middle;
position: absolute;
top: 5px;
@@ -857,6 +857,8 @@
width: calc(50% - 15px);
padding-left: 10px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.endpoint-sub-table-paginate-all {
position: absolute;

View File

@@ -1,8 +1,7 @@
<template>
<div>
<el-form class="pop-item-wider" :model="account" :rules="rules" ref="accountForm">
<el-form-item :label="$t('asset.createAssetTab.loginType')" size="mini">
<div class="nz-btn-group float-left" style="padding-top: 4px;" v-if="isEdit">
<el-form label-width="120px" class="" :model="account" :rules="rules" ref="accountForm">
<!--<div class="nz-btn-group float-left" style="padding-top: 4px;" v-if="isEdit">
<button type="button" @click="changeLoginType(1)" id="account-logintype-1"
class="nz-btn nz-btn-size-small float-left"
:class="{'nz-btn-disabled nz-btn-style-normal' : account.authType == 1, 'nz-btn-style-light' : account.authType == 2}">
@@ -13,9 +12,18 @@
:class="{'nz-btn-disabled nz-btn-style-normal' : account.authType == 2, 'nz-btn-style-light' : account.authType == 1}">
<span>{{$t('asset.createAssetTab.ssh')}}</span>
</button>
</div>-->
<div class="nz-tab" v-if="isEdit">
<div class="nz-tab-item-box" @click="changeLoginType(1)" id="account-logintype-1">
<div class="nz-tab-item" :class="{'nz-tab-item-active' : account.authType == 1}">{{$t('project.endpoint.endpoint')}}</div>
</div>
<div @click="changeLoginType(2)" class="nz-tab-item-box">
<div class="nz-tab-item" :class="{'nz-tab-item-active' : account.authType == 2}">{{$t('project.metrics.metrics')}}</div>
</div>
</div>
<div class="right-box-form-content-txt" v-if="!isEdit">{{account.authType}}</div>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.account')" prop="user">
<el-input autocomplete="new-password" size="mini" v-model="account.user" v-if="isEdit"/>
<div class="right-box-form-content-txt" v-if="!isEdit">{{account.user}}</div>
@@ -30,7 +38,7 @@
<el-form-item :label="this.$t('asset.createAssetTab.ssh')" v-show="account.authType==2" prop="file" v-if="isEdit">
<el-upload class="upload-demo" ref="upload" action="" :file-list="uploadFileList" :on-change="handleChange" :auto-upload="false">
<div slot="tip" class="el-upload__tip" v-if="account.privateKey" >{{$t('asset.createAssetTab.sshKeyWasConfig')}}</div>
<button type="button" class="nz-btn nz-btn-size-small nz-btn-style-normal">
<button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<span class="top-tool-btn-txt" v-if="account.privateKey">{{$t('asset.createAssetTab.clickToCover')}}</span>
<span class="top-tool-btn-txt" v-else>{{$t('asset.createAssetTab.clickToUpload')}}</span>
</button>
@@ -151,7 +159,10 @@ export default {
/deep/ .el-list-leave-active {
transition: none;
}
.nz-tab {
margin-bottom: 22px;
margin-left: 13px;
}
/deep/ .el-list-enter,
/deep/ .el-list-leave-active {
opacity: 0;

View File

@@ -10,9 +10,11 @@
<el-checkbox-group v-model="checkList" size="small" @change="changeCheckBox">
<el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(checkList, item.id)}"
v-for="(item,key) in checkListData" :key="key" :label=item.id>
<div class="sidebar-info-item-txt">
<el-popover trigger="hover" placement="right-end" :content="item.name" >
<div slot="reference" class="sidebar-info-item-txt">{{item.name}}</div>
<span slot="reference">{{item.name}}</span>
</el-popover>
</div>
<idc-config-box ref="idcConfigBox" :post-idc="item" placement="left" @after="getIDCOptionData" :button-class="'checkbox-edit'">
<template v-slot:optionZone>
@@ -46,7 +48,6 @@
<el-table-column
v-for="(item, index) in tablelable"
v-if="item.show"
min-width="110"
:width="item.width"
:key="`col_${index}`"
:label="item.label"
@@ -71,7 +72,7 @@
</div>
<div v-if="item.prop=='SN'">
<el-popover trigger="hover" placement="bottom-start" :content="scope.row.sn" >
<span slot="reference" class="sidebar-info-item-txt">{{scope.row.sn}}</span>
<div slot="reference" class="too-long-split" style="max-width: 110px;">{{scope.row.sn}}</div>
</el-popover>
</div>
<div v-if="item.prop=='HOST'">
@@ -210,6 +211,7 @@
label: this.$t("asset.tableTitle.device"),
prop: 'SN',
show: true,
width: 130
}, {
label: this.$t("asset.tableTitle.host"),
prop: 'HOST',

View File

@@ -42,12 +42,14 @@
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="editing">
<el-input type="text" v-model="item.value" size="mini"/>
</span>
<div class="config-dropdown-label-icons">
<span class="config-dropdown-btn config-dropdown-btn-delete" :id="'add-asset-type-del-'+item.id" @click.stop="deleteData('/sys/dict/delete',item.id)"><i class="el-icon-delete"></i></span>
<span class="config-dropdown-btn" @click.stop="editOptionData(item,'type')" :id="'add-asset-type-edit-'+item.id">
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
<i class="nz-icon nz-icon-edit" v-if="!item.isEdit"></i>
<i class="el-icon-check" v-if="item.isEdit"
@click="editData('sys/dict/update',item)" :id="'add-asset-type-save-'+item.id"></i>
</span>
<span class="config-dropdown-btn config-dropdown-btn-delete" :id="'add-asset-type-del-'+item.id" @click.stop="deleteData('/sys/dict/delete',item.id)"><i class="el-icon-delete"></i></span>
</div>
</el-option>
</el-select>
<div class="right-box-row-btn right-box-row-btn-small">
@@ -71,7 +73,7 @@
<!--表单内容-->
<div class="pop-item">
<div class="pop-label">{{$t('asset.createAssetTab.assetTypeTab.addAssetType')}}</div>
<el-input class="input-x-mini" v-model="assetTypeData.value"/>
<el-input class="input-x-mini-26" v-model="assetTypeData.value"/>
<button type="button" @click.stop="addNewData('assetType')" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="asset-sub-assettype-add">
<span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i>
@@ -89,19 +91,21 @@
@click="clickState(index,item,'type')"
:class="{'pop-box-active': modelCount === index}"
:key="index">
<div>
<div class="pop-item-contain">
<span v-if="!item.isEdit">{{ item.value }}</span>
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="editing" >
<el-input class="input-x-mini" v-model="item.value"/>
<el-input class="input-x-mini-24" v-model="item.value"/>
</span>
<div class="pop-item-icons">
<span class="config-dropdown-btn config-dropdown-btn-delete"
@click.stop="deleteData('/sys/dict/delete',item.id)" :id="'asset-sub-assettype-del-'+index">
<i class="el-icon-delete"></i>
</span>
<span class="config-dropdown-btn" @click.stop="editOptionData(item,'type',index)" :id="'asset-sub-assettype-edit-'+index">
<i class="nz-icon nz-icon-edit" v-if="!item.isEdit"></i>
<i class="el-icon-check" v-if="item.isEdit" @click="editData('sys/dict/update',item)"></i>
</span>
<span class="config-dropdown-btn config-dropdown-btn-delete"
@click.stop="deleteData('/sys/dict/delete',item.id)" :id="'asset-sub-assettype-del-'+index">
<i class="el-icon-delete"></i>
</span>
</div>
</div>
</li>
</ul>
@@ -131,17 +135,19 @@
<el-popover
placement="left"
trigger="click"
width="255"
width="370"
v-model="popCompVisible"
:disabled=popState
v-clickoutside="clickOutSide"
@hide="resetVendor"
popper-class="nz-pop2"
>
<div class="pop-window-assetType" @click="editQuit()" id="asset-sub-vendor-close">
<div class="pop-window-assetType-content">
<div class="pop-top-btns">
<button type="button" @click="popoverClose('vendor')" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square" id="asset-sub-vendor-esc">
<span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
<button type="button" @click="popoverClose('vendor')" class="nz-btn nz-btn-size-alien nz-btn-size-small nz-btn-style-light nz-btn-min-width-35" id="asset-sub-vendor-esc" >
<span class="pop-top-btn-icon"><i class="el-icon-close"></i></span>
<span class="pop-top-btn-txt">{{$t('overall.esc')}}</span>
</button>
</div>
<!--标题-->
@@ -149,14 +155,16 @@
<!--表单内容-->
<div class="pop-item">
<div class="pop-label">{{$t('asset.createAssetTab.vendorTab.vendorName')}}</div>
<el-input class="input-x-mini" v-model="addVendorData.value"/>
<button type="button" @click="addNewData('vendor')" class="nz-btn nz-btn-size-small nz-btn-style-normal" id="asset-sub-vendor-add">
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
<el-input class="input-x-mini-26" v-model="addVendorData.value"/>
<button type="button" @click.stop="addNewData('vendor')" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="asset-sub-vendor-add">
<span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
</button>
</div>
<div class="pop-item">
<div class="pop-label">{{$t('asset.createAssetTab.vendorTab.existVendor')}}</div>
<div class="pop-box pop-box-asset">
<div class="pop-box pop-box-asset pop-box-asset2">
<el-scrollbar style="height: 100%;">
<ul style="list-style: none">
<li style="cursor: pointer;"
@@ -165,20 +173,22 @@
@click="getLidata(index,item)"
:class="{'pop-box-active': vendorCount === index}"
:key="index">
<div>
<div class="pop-item-contain">
<span v-if="!item.isEdit">{{ item.value }}</span>
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="editing">
<el-input class="input-x-mini" v-model="item.value"/>
<el-input class="input-x-mini-24" v-model="item.value"/>
</span>
<div class="pop-item-icons">
<span class="config-dropdown-btn config-dropdown-btn-delete"
@click.stop="deleteData('/sys/dict/delete',item.id)" :id="'asset-sub-vendor-op-del-'+index"><i
class="el-icon-delete"></i>
</span>
<span class="config-dropdown-btn"
@click.stop="editVendorOptionData(item,'vendor',index)" :id="'asset-sub-vendor-op-edit-'+index">
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
<i class="el-icon-check" v-if="item.isEdit" @click="editData('sys/dict/update',item)"></i>
</span>
<span class="config-dropdown-btn config-dropdown-btn-delete"
@click.stop="deleteData('/sys/dict/delete',item.id)" :id="'asset-sub-vendor-op-del-'+index"><i
class="el-icon-delete"></i>
</span>
</div>
</div>
</li>
</ul>
@@ -187,14 +197,16 @@
</div>
<div class="pop-item">
<div class="pop-label">{{$t('asset.createAssetTab.vendorTab.modelName')}}</div>
<el-input class="input-x-mini" v-model="addNewModelData.name"/>
<button type="button" @click="addNewData('model')" class="nz-btn nz-btn-size-small nz-btn-style-normal" id="asset-sub-model-add">
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
<el-input class="input-x-mini-26" v-model="addNewModelData.name"/>
<button type="button" @click.stop="addNewData('model')" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="asset-sub-model-add">
<span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
</button>
</div>
<div class="pop-item">
<div class="pop-label">{{$t('asset.createAssetTab.vendorTab.existModel')}}</div>
<div class="pop-box pop-box-asset">
<div class="pop-box pop-box-asset pop-box-asset2">
<el-scrollbar style="height: 100%;">
<ul style="list-style: none">
<li style="cursor: pointer;"
@@ -203,20 +215,22 @@
@click="clickState(index,item,'model') "
:class="{'pop-box-active': modelCount === index}"
:key="index">
<div>
<div class="pop-item-contain">
<span v-if="!item.isEdit">{{item.name}}</span>
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="editing">
<el-input class="input-x-mini" v-model="item.name"/>
</span>
<span class="config-dropdown-btn"
@click.stop="editOptionData(item,'model',index)" :id="'asset-sub-model-op-edit-'+index">
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
<i class="el-icon-check" v-if="item.isEdit" @click="editData('model',item)"></i>
<el-input class="input-x-mini-24" v-model="item.name"/>
</span>
<div class="pop-item-icons">
<span class="config-dropdown-btn config-dropdown-btn-delete"
@click.stop="deleteData('model',item.id)" :id="'asset-sub-model-op-del-'+index"><i
class="el-icon-delete"></i>
</span>
<span class="config-dropdown-btn"
@click.stop="editOptionData(item,'model',index)" :id="'asset-sub-model-op-edit-'+index">
<i class="nz-icon nz-icon-edit" v-if="!item.isEdit"></i>
<i class="el-icon-check" v-if="item.isEdit" @click="editData('model',item)"></i>
</span>
</div>
</div>
</li>
</ul>
@@ -252,15 +266,16 @@
:value="item.id"
>
<span>{{ item.name }}</span>
<idc-config-box :post-idc="popIdcData" placement="left" @after="getIDCOptionData" :button-class="'config-dropdown-btn'">
<template v-slot:optionZone>
<i class="el-icon-edit-outline" @click="getSingleIDCData(item.id,'edit', item)"></i>
</template>
</idc-config-box>
<div class="config-dropdown-label-icons">
<span class="config-dropdown-btn config-dropdown-btn-delete"
@click.stop="deleteData('idc',item.id)" :id="'asset-add-idc-op-del-'+item.id"><i
class="el-icon-delete"></i></span>
<idc-config-box :post-idc="popIdcData" placement="left" @after="getIDCOptionData" :button-class="'config-dropdown-btn'">
<template v-slot:optionZone>
<i class="nz-icon nz-icon-edit" @click="getSingleIDCData(item.id,'edit', item)"></i>
</template>
</idc-config-box>
</div>
</el-option>
</el-select>
<div class="right-box-row-btn right-box-row-btn-small">
@@ -291,14 +306,15 @@
:value="item.id"
>
<span>{{ item.name }}</span>
<cabinet-config-box placement="left" :post-cabinet="item" button-class="config-dropdown-btn" @after="getCabinetOptionData">
<i slot="optionZone" class="el-icon-edit-outline"></i>
</cabinet-config-box>
<div class="config-dropdown-label-icons">
<span class="config-dropdown-btn config-dropdown-btn-delete" :id="'asset-add-cabinet-op-del-'+item.id"
@click.stop="deleteData('cabinet',item.id)">
<i class="el-icon-delete"></i>
</span>
<cabinet-config-box placement="left" :post-cabinet="item" button-class="config-dropdown-btn" @after="getCabinetOptionData">
<i slot="optionZone" class="nz-icon nz-icon-edit"></i>
</cabinet-config-box>
</div>
</el-option>
</el-select>
@@ -313,16 +329,18 @@
<span>{{cabinetSelectedData.remark}}</span>
</el-form-item>
<!--CLI-->
<div class="asset-sub-title" >{{$t('asset.createAssetTab.cli')}}</div>
<el-switch v-model="accountSwitch" active-color="#1166bb" :disabled="parseInt(assetData.exporter)===1"></el-switch>
<div class="asset-sub-title">{{$t('asset.createAssetTab.cli')}}
<el-switch style="float: right;" v-model="accountSwitch" active-color="#ee9d3f" :disabled="parseInt(assetData.exporter)===1"></el-switch>
</div>
<div class="line-100 asset-line"></div>
<template v-if="accountSwitch">
<account-config-box v-for="(item,index) in assetData.accounts" :account="item" :key="index" ref="accountConfigBox"></account-config-box>
</template>
<el-form-item :label="this.$t('asset.createAssetTab.exporter')">
<el-switch v-model="assetData.exporter" active-color="#1166bb" active-value="1" inactive-value="0"></el-switch>
<el-form-item :label="this.$t('asset.createAssetTab.exporter')" class="exporter-label">
<el-switch class="exporter-switch" v-model="assetData.exporter" active-color="#ee9d3f" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
<div class="line-100 asset-line" style="margin-top: -16px;"></div>
</el-form>
</el-scrollbar>
@@ -1222,3 +1240,12 @@
/*去除上传文件动画end*/
</style>
<style>
.exporter-label .el-form-item__label {
text-align: left;
font-size: 16px !important;
}
.exporter-label .el-form-item__content {
text-align: right;
}
</style>

View File

@@ -66,14 +66,16 @@
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="editing(item)">
<el-input type="text" v-model="item.value" size="mini"/>
</span>
<span class="config-dropdown-btn" @click.stop="editOptionData(item,'type')" :id="'asset-edit-type-op-edit-'+item.id">
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
<i class="el-icon-check" v-if="item.isEdit"
@click="editData('sys/dict/update',item)"></i>
</span>
<div class="config-dropdown-label-icons">
<span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="delOptionData(item)" :id="'asset-edit-type-op-del-'+item.id">
<i class="el-icon-delete"></i>
</span>
<span class="config-dropdown-btn" @click.stop="editOptionData(item,'type')" :id="'asset-edit-type-op-edit-'+item.id">
<i class="nz-icon nz-icon-edit" v-if="!item.isEdit"></i>
<i class="el-icon-check" v-if="item.isEdit"
@click="editData('sys/dict/update',item)"></i>
</span>
</div>
</el-option>
</el-select>
<div class="right-box-row-btn right-box-row-btn-small" v-if="!tabView">
@@ -82,13 +84,16 @@
trigger="click"
v-model="editPopTypeVisible"
v-clickoutside="clickOutSide"
popper-class="nz-pop2"
width="370"
>
<div class="pop-window-assetType" @click="editQuit()" id="asset-edit-sub-type-quit">
<div class="pop-window-assetType-content">
<!--右上角按钮-->
<div class="pop-top-btns">
<button type="button" @click="editPopoverClose('type')" id="asset-edit-sub-type-esc" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square">
<span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
<button type="button" @click="editPopoverClose('type')" id="asset-edit-sub-type-esc" class="nz-btn nz-btn-size-alien nz-btn-size-small nz-btn-style-light nz-btn-min-width-35">
<span class="pop-top-btn-icon"><i class="el-icon-close"></i></span>
<span class="pop-top-btn-txt">{{$t('overall.esc')}}</span>
</button>
</div>
<!--标题-->
@@ -96,8 +101,8 @@
<!--表单内容-->
<div class="pop-item">
<div class="pop-label">{{$t('asset.createAssetTab.assetTypeTab.addAssetType')}}</div>
<el-input class="input-x-mini" v-model="assetTypeData.value"/>
<button type="button" @click="addNewData('assetType')" class="nz-btn nz-btn-size-small nz-btn-style-normal" id="asset-edit-sub-type-add">
<el-input class="input-x-mini-26" v-model="assetTypeData.value"/>
<button type="button" @click="addNewData('assetType')" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="asset-edit-sub-type-add">
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
</button>
</div>
@@ -112,20 +117,22 @@
@click="clickState(index,item,'type')"
:class="{'pop-box-active': modelCount === index}"
:key="index">
<div>
<div class="pop-item-contain">
<span v-if="!item.isEdit">{{ item.value }}</span>
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="editing">
<el-input class="input-x-mini" v-model="item.value"/>
<el-input class="input-x-mini-24" v-model="item.value"/>
</span>
<div class="pop-item-icons">
<span class="config-dropdown-btn config-dropdown-btn-delete" :id="'asset-edit-sub-type-op-del-'+index"
@click.stop="deleteData('/sys/dict/delete',item.id)"><i class="el-icon-delete"></i>
</span>
<span v-if="!item.isEdit" class="config-dropdown-btn" @click.stop="editOptionData(item,'type',index)" :id="'asset-edit-sub-type-op-edit-'+index">
<i class="el-icon-edit-outline"></i>
<i class="nz-icon nz-icon-edit"></i>
</span>
<span v-if="item.isEdit" class="config-dropdown-btn" @click.stop="editData('sys/dict/update',item, 'assetType')" :id="'asset-edit-sub-type-op-save-'+index">
<i class="el-icon-check"></i>
</span>
<span class="config-dropdown-btn config-dropdown-btn-delete" :id="'asset-edit-sub-type-op-del-'+index"
@click.stop="deleteData('/sys/dict/delete',item.id)"><i class="el-icon-delete"></i>
</span>
</div>
</div>
</li>
</ul>
@@ -157,16 +164,18 @@
<el-popover
placement="left"
trigger="click"
width="255"
width="370"
v-model="editPopVendorVisible"
v-clickoutside="clickOutSide"
@hide="resetVendor"
popper-class="nz-pop2"
>
<div class="pop-window-assetType" @click="editQuit()" id="asset-edit-sub-vendor-quit">
<div class="pop-window-assetType-content">
<div class="pop-top-btns">
<button type="button" @click="editPopoverClose('vendor')" id="asset-edit-sub-vendor-close"> class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square">
<span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
<button type="button" @click="editPopoverClose('vendor')" id="asset-edit-sub-vendor-close" class="nz-btn nz-btn-size-alien nz-btn-size-small nz-btn-style-light nz-btn-min-width-35">
<span class="pop-top-btn-icon"><i class="el-icon-close"></i></span>
<span class="pop-top-btn-txt">{{$t('overall.esc')}}</span>
</button>
</div>
<!--标题-->
@@ -174,14 +183,16 @@
<!--表单内容-->
<div class="pop-item">
<div class="pop-label">{{$t('asset.createAssetTab.vendorTab.vendorName')}}</div>
<el-input class="input-x-mini" v-model="addVendorData.value"/>
<button type="button" @click="addNewData('vendor')" class="nz-btn nz-btn-size-small nz-btn-style-normal" id="asset-edit-sub-vendor-add">>
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
<el-input class="input-x-mini-26" v-model="addVendorData.value"/>
<button type="button" @click.stop="addNewData('vendor')" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="asset-edit-sub-vendor-add">
<span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
</button>
</div>
<div class="pop-item">
<div class="pop-label">{{$t('asset.createAssetTab.vendorTab.existVendor')}}</div>
<div class="pop-box pop-box-asset">
<div class="pop-box pop-box-asset pop-box-asset2">
<el-scrollbar style="height: 100%;">
<ul style="list-style: none">
<li style="cursor: pointer;"
@@ -190,17 +201,21 @@
@click="getLidata(index,item)"
:class="{'pop-box-active': vendorCount === index}"
:key="index">
<div class="pop-item-contain">
<span v-if="!item.isEdit">{{ item.value }}</span>
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="editing">
<el-input class="input-x-mini" v-model="item.value"/>
</span>
<span class="config-dropdown-btn" @click.stop="editVendorOptionData(item,'vendor',index)" :id="'asset-edit-sub-vendor-op-edit-'+index">
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
<i class="el-icon-check" v-if="item.isEdit" @click="editData('sys/dict/update',item)" :id="'asset-edit-sub-vendor-op-save-'+index"></i>
<el-input class="input-x-mini-24" v-model="item.value"/>
</span>
<div class="pop-item-icons">
<span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="deleteData('/sys/dict/delete',item.id)" :id="'asset-edit-sub-vendor-op-del-'+index">
<i class="el-icon-delete"></i>
</span>
<span class="config-dropdown-btn" @click.stop="editVendorOptionData(item,'vendor',index)" :id="'asset-edit-sub-vendor-op-edit-'+index">
<i class="nz-icon nz-icon-edit" v-if="!item.isEdit"></i>
<i class="el-icon-check" v-if="item.isEdit" @click="editData('sys/dict/update',item)" :id="'asset-edit-sub-vendor-op-save-'+index"></i>
</span>
</div>
</div>
</li>
</ul>
</el-scrollbar>
@@ -208,14 +223,16 @@
</div>
<div class="pop-item">
<div class="pop-label">{{$t('asset.createAssetTab.vendorTab.modelName')}}</div>
<el-input class="input-x-mini" v-model="addNewModelData.name"/>
<button type="button" @click="addNewData('model')" id="asset-edit-sub-model-add" class="nz-btn nz-btn-size-small nz-btn-style-normal">
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
<el-input class="input-x-mini-26" v-model="addNewModelData.name"/>
<button type="button" @click.stop="addNewData('model')" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="asset-edit-sub-model-add">
<span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
</button>
</div>
<div class="pop-item">
<div class="pop-label">{{$t('asset.createAssetTab.vendorTab.existModel')}}</div>
<div class="pop-box pop-box-asset">
<div class="pop-box pop-box-asset pop-box-asset2">
<el-scrollbar style="height: 100%;">
<ul style="list-style: none">
<li style="cursor: pointer;"
@@ -224,19 +241,23 @@
@click=" clickState(index,item,'model') "
:class="{'pop-box-active': modelCount === index}"
:key="index">
<div class="pop-item-contain">
<span v-if="!item.isEdit">{{ item.name }}</span>
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop="editing">
<el-input class="input-x-mini" v-model="item.name"/>
</span>
<span class="config-dropdown-btn" @click.stop="editOptionData(item,'model',index)" :id="'asset-edit-sub-model-op-edit-'+index">
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
<i class="el-icon-check" v-if="item.isEdit"
@click="editData('model',item)" :id="'asset-edit-sub-model-op-save-'+index"></i>
<el-input class="input-x-mini-24" v-model="item.name"/>
</span>
<div class="pop-item-icons">
<span class="config-dropdown-btn config-dropdown-btn-delete"
@click.stop="deleteData('model',item.id)" :id="'asset-edit-sub-model-op-del-'+index">
<i class="el-icon-delete"></i>
</span>
<span class="config-dropdown-btn" @click.stop="editOptionData(item,'model',index)" :id="'asset-edit-sub-model-op-edit-'+index">
<i class="nz-icon nz-icon-edit" v-if="!item.isEdit"></i>
<i class="el-icon-check" v-if="item.isEdit"
@click="editData('model',item)" :id="'asset-edit-sub-model-op-save-'+index"></i>
</span>
</div>
</div>
</li>
</ul>
</el-scrollbar>
@@ -277,11 +298,16 @@
:value="item.id"
>
<span>{{ item.name }}</span>
<div class="config-dropdown-label-icons">
<span class="config-dropdown-btn config-dropdown-btn-delete"
@click.stop="deleteData('idc',item.id)" :id="'asset-edit-idc-op-del-'+item.id"><i
class="el-icon-delete"></i></span>
<idc-config-box :post-idc="popIdcData" placement="left" @after="getIDCOptionData" :button-class="'config-dropdown-btn'">
<template v-slot:optionZone>
<i class="el-icon-edit-outline" @click="getSingleIDCData(item.id,'edit', item)"></i>
<i class="nz-icon nz-icon-edit" @click="getSingleIDCData(item.id,'edit', item)"></i>
</template>
</idc-config-box>
</div>
<!--<el-popover
placement="left"
v-model="item[item.name]"
@@ -335,9 +361,6 @@
@click.stop="getSingleIDCData(item.id,'edit',item)"><i
class="el-icon-edit-outline"></i></span>
</el-popover>-->
<span class="config-dropdown-btn config-dropdown-btn-delete"
@click.stop="deleteData('idc',item.id)" :id="'asset-edit-idc-op-del-'+item.id"><i
class="el-icon-delete"></i></span>
</el-option>
</el-select>
<div class="right-box-row-btn right-box-row-btn-small">
@@ -423,14 +446,15 @@
:value="item.id"
>
<span>{{ item.name }}</span>
<cabinet-config-box placement="left" :post-cabinet="item" button-class="config-dropdown-btn" @after="getCabinetOptionData">
<i slot="optionZone" class="el-icon-edit-outline"></i>
</cabinet-config-box>
<div class="config-dropdown-label-icons">
<span class="config-dropdown-btn config-dropdown-btn-delete"
@click.stop="deleteData('cabinet',item.id)" :id="'asset-edit-cabinet-op-del-'+item.id">
<i class="el-icon-delete"></i>
</span>
<cabinet-config-box placement="left" :post-cabinet="item" button-class="config-dropdown-btn" @after="getCabinetOptionData">
<i slot="optionZone" class="nz-icon nz-icon-edit"></i>
</cabinet-config-box>
</div>
</el-option>
</el-select>

View File

@@ -81,7 +81,7 @@
v-model="scope.row.status"
active-value="1"
inactive-value="0"
active-color="#1166bb"
active-color="#ee9d3f"
@change="(val)=>{statusChange(scope.row)}">
</el-switch>
</span>
@@ -97,12 +97,14 @@
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button type="button" v-if="user.userId != '' && rightBox.isEdit" @click="del(user)"
class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82" id="account-edit-del">
class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82"
id="account-edit-del">
<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
<button v-if="!rightBox.isEdit" type="button" @click="saveOrToEdit"
class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82" id="account-edit-edit">
class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82"
id="account-edit-edit">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-edit"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.edit')}}</span>
</button>
@@ -118,12 +120,14 @@
<el-form class="right-box-form" :model="user" label-position="top" :rules="rules" ref="accountForm">
<!--username-->
<el-form-item :label="$t('config.account.account')" prop="username">
<el-input autocomplete="new-password" v-if="rightBox.isEdit" type="text" placeholder="" v-model="user.username" maxlength="64" show-word-limit size="small"></el-input>
<el-input autocomplete="new-password" v-if="rightBox.isEdit" type="text" placeholder=""
v-model="user.username" maxlength="64" show-word-limit size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{user.username}}</div>
</el-form-item>
<!--password-->
<el-form-item :label="$t('config.account.password')" prop="password" v-if="rightBox.isEdit &&!user.userId">
<el-input autocomplete="new-password" type="password" placeholder="" v-model="user.password" maxlength="16" show-word-limit size="small"></el-input>
<el-input autocomplete="new-password" type="password" placeholder="" v-model="user.password"
maxlength="16" show-word-limit size="small"></el-input>
</el-form-item>
<!--email-->
<el-form-item label="E-mail" prop="email">
@@ -138,7 +142,8 @@
</el-form-item>-->
<!--enable-->
<el-form-item :label="$t('config.account.enable')">
<el-switch v-model="user.status" active-color="#1166bb" :disabled="!rightBox.isEdit" active-value="1" inactive-value="0">
<el-switch v-model="user.status" active-color="#ee9d3f" :disabled="!rightBox.isEdit" active-value="1"
inactive-value="0">
</el-switch>
</el-form-item>
<el-form-item :label="$t('config.account.createTime')" v-if="!rightBox.isEdit">
@@ -149,10 +154,12 @@
<!-- end--表单-->
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button @click="esc" id="account-esc" class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120">
<button @click="esc" id="account-esc"
class="nz-btn nz-btn-size-large nz-btn-style-light nz-btn-min-width-120">
<span>{{$t('overall.cancel')}}</span>
</button>
<button v-if="rightBox.isEdit" @click="saveOrToEdit" id="account-save" class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120">
<button v-if="rightBox.isEdit" @click="saveOrToEdit" id="account-save"
class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120">
<span>{{$t('overall.save')}}</span>
</button>
</div>

View File

@@ -21,13 +21,13 @@
<!--metrics-->
<div class="content-right" v-show="tableShow == 2">
<div class="top-tools">
<div class="nz-btn-group float-left">
<button @click="tableShow = 1" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
<span>{{$t('project.endpoint.endpoint')}}</span>
</button>
<button @click="" class="nz-btn nz-btn-size-small nz-btn-disabled nz-btn-style-normal float-left">
<span>{{$t('project.metrics.metrics')}}</span>
</button>
<div class="nz-tab float-left">
<div @click="tableShow = 1" class="nz-tab-item-box">
<div class="nz-tab-item">{{$t('project.endpoint.endpoint')}}</div>
</div>
<div class="nz-tab-item-box">
<div class="nz-tab-item nz-tab-item-active">{{$t('project.metrics.metrics')}}</div>
</div>
</div>
<div class="top-tool-search float-right"><search-input :searchMsg="metricSearchMsg" @search="metricSearch"></search-input></div>
</div>
@@ -55,13 +55,13 @@
<!--endpoint-->
<div class="content-right" v-show="tableShow == 1">
<div class="top-tools">
<div class="nz-btn-group float-left">
<button @click="" type="button" class="nz-btn nz-btn-size-small nz-btn-disabled nz-btn-style-normal float-left">
<span>{{$t('project.endpoint.endpoint')}}</span>
</button>
<button type="button" @click="tableShow = 2" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
<span>{{$t('project.metrics.metrics')}}</span>
</button>
<div class="nz-tab float-left">
<div class="nz-tab-item-box">
<div class="nz-tab-item nz-tab-item-active">{{$t('project.endpoint.endpoint')}}</div>
</div>
<div class="nz-tab-item-box" @click="tableShow = 2">
<div class="nz-tab-item">{{$t('project.metrics.metrics')}}</div>
</div>
</div>
<button @click="toCreateEndpoint" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="project-add-ep">
<span class='top-tool-btn-txt'>