Merge remote-tracking branch 'origin/dev-3.1' into dev-3.1.1_theme
# Conflicts: # nezha-fronted/src/assets/css/common.scss # nezha-fronted/src/assets/css/common/tableCommon.scss # nezha-fronted/src/assets/stylus/main.scss # nezha-fronted/src/components/charts/chart-list.vue # nezha-fronted/src/components/charts/logs.vue # nezha-fronted/src/components/common/alert/alertLabel.vue # nezha-fronted/src/components/common/alert/alertRuleInfo.vue # nezha-fronted/src/components/common/bottomBox/bottomBox.vue # nezha-fronted/src/components/common/bottomBox/tabs/endpointQuery.vue # nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue # nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue # nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue # nezha-fronted/src/components/common/detailView/list/alertRule/alertRuleDetail.vue # nezha-fronted/src/components/common/detailView/list/asset/assetDetail.vue # nezha-fronted/src/components/common/detailView/list/dc/dcDetail.vue # nezha-fronted/src/components/common/detailView/list/endpoint/endpointDetail.vue # nezha-fronted/src/components/common/detailView/list/module/moduleDetail.vue # nezha-fronted/src/components/common/detailView/nzDetailView.vue # nezha-fronted/src/components/common/detailView/view/detailViewRight.vue # nezha-fronted/src/components/common/labelFilter/clickSearch.vue # nezha-fronted/src/components/common/multipleTime.vue # nezha-fronted/src/components/common/pickTime.vue # nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue # nezha-fronted/src/components/common/project/L5/topoTooltip.vue # nezha-fronted/src/components/common/project/popData/Info.vue # nezha-fronted/src/components/common/rightBox/alertRuleBox.vue # nezha-fronted/src/components/common/table/alert/alertRuleTable.vue # nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue # nezha-fronted/src/components/common/table/settings/userTable.vue # nezha-fronted/src/components/layout/header.vue # nezha-fronted/src/components/page/alert/alertMessage.vue # nezha-fronted/src/components/page/alert/nzAlertTag.vue # nezha-fronted/src/components/page/asset/components/operation.vue # nezha-fronted/src/components/page/config/mibBrowser.vue # nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue # nezha-fronted/src/components/page/dashboard/explore/logTab.vue # nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue # nezha-fronted/src/components/page/dashboard/overview/overview2.vue # nezha-fronted/src/components/page/dashboard/panel.vue
This commit is contained in:
chenjinsong
@@ -69,6 +69,21 @@
|
||||
.orange-bg {
|
||||
background-color: $--color-primary !important;
|
||||
}
|
||||
.colorffa416{
|
||||
color: #ffa416;
|
||||
}
|
||||
.colorec7f66{
|
||||
color: #ec7f66;
|
||||
}
|
||||
.color535b64{
|
||||
color: #535b64;
|
||||
}
|
||||
.color999999{
|
||||
color: #999999;
|
||||
}
|
||||
.color23bf9a{
|
||||
color: #23bf9a;
|
||||
}
|
||||
.timezone-area{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
@@ -154,3 +169,10 @@ td .nz-icon-gear:before{
|
||||
box-shadow: -1px 1px 10px -1px $--dropdown-menu-box-shadow-color;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.icon {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -40,7 +40,11 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-box-container__left.right-box__container {
|
||||
.el-textarea__inner {
|
||||
padding: 5px 70px 4px 10px;
|
||||
}
|
||||
}
|
||||
.right-box__container {
|
||||
.right-box-form{
|
||||
width: calc(100% - 60px);
|
||||
@@ -89,20 +93,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-row-item {
|
||||
.input-box {
|
||||
.el-textarea {
|
||||
.el-textarea__inner {
|
||||
width: 466px;
|
||||
height: 32px;
|
||||
padding: 5px 70px 4px 10px;
|
||||
}
|
||||
.el-input__count {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-form-item {
|
||||
.el-input__count {
|
||||
line-height: 29px;
|
||||
@@ -111,10 +101,8 @@
|
||||
}
|
||||
.el-form-item {
|
||||
.el-input--small.not-fixed-height {
|
||||
height: 32px;
|
||||
.el-input__count {
|
||||
line-height: 29px;
|
||||
height: 25px;
|
||||
.el-textarea__inner {
|
||||
min-height: 32px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -316,7 +304,7 @@
|
||||
margin-bottom: 0 !important;
|
||||
|
||||
}
|
||||
.api-select.right-public-box-select-top.right-public-box-dropdown-top {
|
||||
.api-select.right-box-select-top.right-public-box-dropdown-top {
|
||||
.el-scrollbar__view.el-select-dropdown__list {
|
||||
width: 210px;
|
||||
text-overflow: ellipsis;
|
||||
@@ -324,9 +312,12 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.dc-dropdown.right-public-box-dropdown-top,.right-public-box-select-top.right-public-box-dropdown-top {
|
||||
.dc-dropdown.right-public-box-dropdown-top,.right-box-select-top.right-public-box-dropdown-top {
|
||||
margin: 5px 0 !important;
|
||||
}
|
||||
.time-picker-popover__select-top {
|
||||
margin-top: 8px !important;
|
||||
}
|
||||
.agent-select {
|
||||
z-index: 2200 !important;
|
||||
}
|
||||
|
||||
@@ -50,6 +50,7 @@
|
||||
|
||||
.top-tool-right {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.top-tool-left {
|
||||
display: flex;
|
||||
@@ -476,6 +477,18 @@
|
||||
.fade-leave-active {
|
||||
transition: opacity 1s;
|
||||
}
|
||||
.table-no-data /deep/ .icon {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
.table-no-data {
|
||||
line-height: 21px;
|
||||
}
|
||||
.table-no-data__title {
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
/*table提示样式*/
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
justify-content: center;
|
||||
color: $--color-text-secondary;
|
||||
font-size: 14px;
|
||||
flex-direction: column;
|
||||
}
|
||||
.nz-detail-view-left{
|
||||
width: 260px;
|
||||
@@ -67,6 +68,11 @@
|
||||
color: $--color-text-regular;
|
||||
vertical-align: middle;
|
||||
}
|
||||
/deep/ .bottom-log {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding-top: 15px;
|
||||
}
|
||||
}
|
||||
.detail-view {
|
||||
.list-page div.main-container{
|
||||
|
||||
@@ -536,3 +536,20 @@
|
||||
.selpop {
|
||||
cursor: pointer;
|
||||
}
|
||||
.topo-noData{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
.content{
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.topo-noData /deep/ .icon{
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
|
||||
}
|
||||
|
||||
@@ -437,7 +437,7 @@
|
||||
right: 67px;
|
||||
}
|
||||
.legend-value-agent{
|
||||
top: 168px;
|
||||
top: 180px;
|
||||
right: 67px;
|
||||
}
|
||||
//.legend-value + .legend-value {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "nz-icon"; /* Project id 2030432 */
|
||||
src: url('iconfont.woff2?t=1634288113261') format('woff2'),
|
||||
url('iconfont.woff?t=1634288113261') format('woff'),
|
||||
url('iconfont.ttf?t=1634288113261') format('truetype');
|
||||
src: url('iconfont.woff2?t=1635753657003') format('woff2'),
|
||||
url('iconfont.woff?t=1635753657003') format('woff'),
|
||||
url('iconfont.ttf?t=1635753657003') format('truetype');
|
||||
}
|
||||
|
||||
.nz-icon {
|
||||
@@ -13,6 +13,58 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.nz-icon-import-failed:before {
|
||||
content: "\e757";
|
||||
}
|
||||
|
||||
.nz-icon-import-success:before {
|
||||
content: "\e755";
|
||||
}
|
||||
|
||||
.nz-icon-import-success1:before {
|
||||
content: "\e753";
|
||||
}
|
||||
|
||||
.nz-icon-import-failed1:before {
|
||||
content: "\e754";
|
||||
}
|
||||
|
||||
.nz-icon-stop:before {
|
||||
content: "\e74a";
|
||||
}
|
||||
|
||||
.nz-icon-no-data-panel:before {
|
||||
content: "\e748";
|
||||
}
|
||||
|
||||
.nz-icon-no-data-project:before {
|
||||
content: "\e74f";
|
||||
}
|
||||
|
||||
.nz-icon-no-data-list:before {
|
||||
content: "\e750";
|
||||
}
|
||||
|
||||
.nz-icon-ZD:before {
|
||||
content: "\e74e";
|
||||
}
|
||||
|
||||
.nz-icon-failed:before {
|
||||
content: "\e749";
|
||||
}
|
||||
|
||||
.nz-icon-unknown-error:before {
|
||||
content: "\e74c";
|
||||
}
|
||||
|
||||
.nz-icon-over:before {
|
||||
content: "\e74b";
|
||||
}
|
||||
|
||||
.nz-icon-connecting:before {
|
||||
content: "\e74d";
|
||||
}
|
||||
|
||||
.nz-icon-label:before {
|
||||
content: "\e747";
|
||||
}
|
||||
@@ -397,10 +449,6 @@
|
||||
content: "\e6f7";
|
||||
}
|
||||
|
||||
.nz-icon-ZD:before {
|
||||
content: "\e6f9";
|
||||
}
|
||||
|
||||
.nz-icon-revoke1:before {
|
||||
content: "\e6ee";
|
||||
}
|
||||
|
||||
1
nezha-fronted/src/assets/css/font/iconfont.js
Normal file
1
nezha-fronted/src/assets/css/font/iconfont.js
Normal file
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "nz-icon"; /* Project id 2030432 */
|
||||
src: url('./font/iconfont.woff2?t=1634288113261') format('woff2'),
|
||||
url('./font/iconfont.woff?t=1634288113261') format('woff'),
|
||||
url('./font/iconfont.ttf?t=1634288113261') format('truetype');
|
||||
src: url('./font/iconfont.woff2?t=1635753657003') format('woff2'),
|
||||
url('./font/iconfont.woff?t=1635753657003') format('woff'),
|
||||
url('./font/iconfont.ttf?t=1635753657003') format('truetype');
|
||||
}
|
||||
|
||||
.nz-icon {
|
||||
@@ -13,6 +13,58 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.nz-icon-import-failed:before {
|
||||
content: "\e757";
|
||||
}
|
||||
|
||||
.nz-icon-import-success:before {
|
||||
content: "\e755";
|
||||
}
|
||||
|
||||
.nz-icon-import-success1:before {
|
||||
content: "\e753";
|
||||
}
|
||||
|
||||
.nz-icon-import-failed1:before {
|
||||
content: "\e754";
|
||||
}
|
||||
|
||||
.nz-icon-stop:before {
|
||||
content: "\e74a";
|
||||
}
|
||||
|
||||
.nz-icon-no-data-panel:before {
|
||||
content: "\e748";
|
||||
}
|
||||
|
||||
.nz-icon-no-data-project:before {
|
||||
content: "\e74f";
|
||||
}
|
||||
|
||||
.nz-icon-no-data-list:before {
|
||||
content: "\e750";
|
||||
}
|
||||
|
||||
.nz-icon-ZD:before {
|
||||
content: "\e74e";
|
||||
}
|
||||
|
||||
.nz-icon-failed:before {
|
||||
content: "\e749";
|
||||
}
|
||||
|
||||
.nz-icon-unknown-error:before {
|
||||
content: "\e74c";
|
||||
}
|
||||
|
||||
.nz-icon-over:before {
|
||||
content: "\e74b";
|
||||
}
|
||||
|
||||
.nz-icon-connecting:before {
|
||||
content: "\e74d";
|
||||
}
|
||||
|
||||
.nz-icon-label:before {
|
||||
content: "\e747";
|
||||
}
|
||||
@@ -397,10 +449,6 @@
|
||||
content: "\e6f7";
|
||||
}
|
||||
|
||||
.nz-icon-ZD:before {
|
||||
content: "\e6f9";
|
||||
}
|
||||
|
||||
.nz-icon-revoke1:before {
|
||||
content: "\e6ee";
|
||||
}
|
||||
|
||||
@@ -1217,6 +1217,78 @@ li {
|
||||
/*overflow-y: auto;*/
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.result-title-top{
|
||||
font-family: Roboto-Regular;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
.nz-icon-import-success{
|
||||
margin-right: 5px;
|
||||
color: #23BF9A ;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
}
|
||||
.nz-icon-import-failed {
|
||||
margin-right: 5px;
|
||||
color: #EC7F66 ;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
}
|
||||
.result-detail {
|
||||
opacity: 0.9;
|
||||
background: #F6F8FA;
|
||||
border: 1px solid #E7EAED;
|
||||
border-radius: 2px;
|
||||
padding: 12px;
|
||||
margin-top: 10px;
|
||||
height: 180px;
|
||||
.import-result-item {
|
||||
display: flex;
|
||||
margin-bottom: 5px;
|
||||
.line-num {
|
||||
font-family: Roboto-Medium;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
line-height: 16px;
|
||||
font-weight: 600;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.line-content{
|
||||
flex: 1;
|
||||
font-family: Roboto-Black;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
line-height: 16px;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
.result-success-box {
|
||||
height: 256px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
font-weight: 600;
|
||||
.nz-icon-import-success {
|
||||
color: #23BF9A;
|
||||
font-size: 80px;
|
||||
}
|
||||
.result-success-txt{
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.result-body{
|
||||
text-align: left;
|
||||
line-height: 20px;
|
||||
|
||||
@@ -60,6 +60,7 @@
|
||||
:height="'calc(100% - 46px)'"
|
||||
:customTableTitle="tableTitle"
|
||||
:tableId="''"
|
||||
:detailList="false"
|
||||
:projectAlertId="'tableContainer'+chartIndex"
|
||||
@tableDataSort="tableDataSort"
|
||||
@del="deleteMessage"
|
||||
@@ -82,8 +83,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<alertMessageTable
|
||||
:id="'tableContainer'+chartIndex"
|
||||
:id="'tableContainerScreen'+chartIndex"
|
||||
:tableData="storedScreanTableData"
|
||||
:detailList="false"
|
||||
:loading="loadingTable"
|
||||
:height="'calc(100% - 20px)'"
|
||||
:customTableTitle="tableTitle"
|
||||
@@ -92,7 +94,7 @@
|
||||
@tableDataSort="tableDataSort"
|
||||
@del="deleteMessage"
|
||||
@messageDetail="messageDetail"
|
||||
ref="alertListTable"
|
||||
ref="alertListScreenTable"
|
||||
:form="'chartList'"
|
||||
:fromPath="'/alertList'"
|
||||
style="height: calc(100% - 50px)"
|
||||
@@ -422,7 +424,7 @@ export default {
|
||||
screenDialogClose () {
|
||||
this.screenModal = false
|
||||
this.deleteBox.ids = []
|
||||
this.$refs.alertListScreenTable.$refs.alertListTable.clearSelection()
|
||||
this.$refs.alertListScreenTable.$refs.dataTable.clearSelection()
|
||||
},
|
||||
selectChange (s) {
|
||||
const ids = []
|
||||
@@ -886,10 +888,12 @@ export default {
|
||||
// 全屏查看
|
||||
showAllScreen () {
|
||||
this.dropdownMenuShow = false
|
||||
this.storedScreanTableData = this.storedTableData
|
||||
// this.storedScreanTableData = this.storedTableData
|
||||
this.storedScreanTableData = JSON.parse(JSON.stringify(this.storedTableData))
|
||||
this.screenModal = true
|
||||
this.deleteBox.ids = []
|
||||
this.$refs.alertListTable.$refs.alertListTable.clearSelection()
|
||||
// this.$refs.alertListTable.$refs.alertListTable.clearSelection()
|
||||
// this.$refs.alertListScreenTable.$refs.dataTable.clearSelection()
|
||||
this.screenPageObj = { ...this.pageObj }
|
||||
},
|
||||
// 设置数据, filter区分
|
||||
|
||||
@@ -5,12 +5,34 @@
|
||||
position:relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.noData{
|
||||
text-align: center
|
||||
.no-data{
|
||||
height: 1189px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
.icon {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -52px;
|
||||
margin-left: -40px;
|
||||
text-align: center;
|
||||
}
|
||||
.no-data-div {
|
||||
position: absolute;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
margin-left: -29px;
|
||||
top: 52.5%;
|
||||
left: 50%
|
||||
}
|
||||
}
|
||||
.list-width{
|
||||
width: 100%;
|
||||
padding: 0 10px 5px 20px;
|
||||
//height: 100%;
|
||||
padding: 0 10px 5px 10px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;/*避免鼠标第一次放到曲线时，x轴出现滚动条后消失*/
|
||||
}
|
||||
@@ -211,7 +233,14 @@
|
||||
:chart-index="index"></chart-group>
|
||||
</div>
|
||||
</draggable>
|
||||
<el-row v-if="dataList.length === 0" class="noData"></el-row>
|
||||
<!-- <el-row v-if="dataList.length === 0" class="noData"></el-row>-->
|
||||
<div v-if="chartListNoData" class="no-data">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#nz-icon-no-data-panel"></use>
|
||||
</svg>
|
||||
<div class="no-data-div">No data</div>
|
||||
</div>
|
||||
<div v-else> </div>
|
||||
<!--<div class="page-shadow" v-if="showShadow"></div>-->
|
||||
</div>
|
||||
</template>
|
||||
@@ -275,9 +304,11 @@ export default {
|
||||
start: '',
|
||||
end: ''
|
||||
},
|
||||
chartListNoData: false,
|
||||
extraMarginBottom: 0, // dom额外的margin
|
||||
panelId: '',
|
||||
timer: null,
|
||||
finshGetData: false,
|
||||
dataTotalList: [], // 懒加载：总记录数
|
||||
dataTotalListBak: [], // 用于查询：懒加载，总记录备份
|
||||
isPage: false, // 是否分页懒加载
|
||||
@@ -488,13 +519,20 @@ export default {
|
||||
this.dataTotalListBak.forEach((item) => {
|
||||
item.isLoaded = false
|
||||
item.isHide = false
|
||||
this.chartListNoData = false
|
||||
chartListTmp.push(item)
|
||||
})
|
||||
}
|
||||
|
||||
this.dataTotalList = [...chartListTmp]
|
||||
this.dataList = [...this.dataTotalList]
|
||||
|
||||
let isAllHide = true
|
||||
this.dataList.map(item => {
|
||||
if (!item.isHide) {
|
||||
isAllHide = false
|
||||
}
|
||||
})
|
||||
this.chartListNoData = isAllHide
|
||||
this.$nextTick(() => {
|
||||
if (this.dataList.length > 0) {
|
||||
this.dataList.forEach((item, index) => {
|
||||
@@ -566,6 +604,10 @@ export default {
|
||||
|
||||
// 获取panel详情数据,获取panel下所有chart列表
|
||||
getData (params) {
|
||||
if (this.finshGetData) {
|
||||
return
|
||||
}
|
||||
this.finshGetData = true
|
||||
const param = {
|
||||
panelId: params.panelId,
|
||||
query: params.query,
|
||||
@@ -646,16 +688,21 @@ export default {
|
||||
if (!params.panelId) { return } // 没有panelId不调用接口
|
||||
this.$get('visual/panel/chart?panelId=' + params.panelId + '&groupId=0' + '&pageSize=-1').then(response => {
|
||||
if (response.code === 200) {
|
||||
setTimeout(() => {
|
||||
this.finshGetData = false
|
||||
}, 100)
|
||||
response.data.list.forEach((item, index) => {
|
||||
item.isLoaded = false
|
||||
})
|
||||
this.$emit('panel-list-loading', response.data.list)
|
||||
// chart数据存在dataTotalListBak中
|
||||
if (response.data.list) {
|
||||
if (response.data.list.length > 0) {
|
||||
this.dataTotalListBak = response.data.list
|
||||
this.chartListNoData = false
|
||||
} else {
|
||||
this.dataTotalListBak = response.data
|
||||
this.chartListNoData = true
|
||||
}
|
||||
|
||||
let chartListTmp = []
|
||||
// 查询条件带name
|
||||
if (this.filter.searchName) {
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
:resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
|
||||
<template slot-scope="scope">
|
||||
<div :style="{color:scope.row.mapping?scope.row.mapping.color.text:'#000',background:scope.row.mapping?scope.row.mapping.color.bac:'#fff'}" >
|
||||
<span style="padding: 0px 10px;">{{ scope.row.value}}</span>
|
||||
<span>{{ scope.row.value}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
@@ -661,7 +661,7 @@ export default {
|
||||
},
|
||||
tooltip: { // 和 option.tooltip 的配置项相同
|
||||
show: true,
|
||||
position: 'top',
|
||||
position: 'bottom',
|
||||
formatter: function (param) {
|
||||
return param.title // 自定义的 DOM 结构
|
||||
},
|
||||
@@ -769,7 +769,7 @@ export default {
|
||||
if (i !== 0) {
|
||||
str += '<div style="border:1px dashed #333;width:100%;margin-top: 5px"></div>'
|
||||
}
|
||||
const value = bus.computeTimezone(item.data[0])
|
||||
const value = bus.computeTimezone(item.data[0] - self.minusTime)
|
||||
const tData = new Date(value)
|
||||
str += '<div style="margin-bottom: 5px;margin-top: 5px">'
|
||||
str += bus.timeFormate(tData)
|
||||
@@ -943,6 +943,10 @@ export default {
|
||||
useUTC: false, // 使用本地时间
|
||||
series: dataArg
|
||||
}
|
||||
if (!maxValueCopies.copies) {
|
||||
option.yAxis.min = 0
|
||||
option.yAxis.max = 1
|
||||
}
|
||||
if (unit.type == 'Time') {
|
||||
delete option.yAxis.maxInterval
|
||||
}
|
||||
@@ -1019,7 +1023,6 @@ export default {
|
||||
getChart(self.chartIndex).clear()
|
||||
getChart(self.chartIndex).setOption(option)// 创建图表
|
||||
}
|
||||
|
||||
self.$refs['localLoading' + self.chartIndex].endLoading()
|
||||
self.firstShow = true // 展示操作按键
|
||||
}, 800)
|
||||
@@ -1740,6 +1743,7 @@ export default {
|
||||
})
|
||||
if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length && res.length > this.data.elements.length) {
|
||||
const minusTime = (new Date(this.searchTime[0]).getTime() - new Date(this.$refs.pickTime.$refs.multipleTime.searchTime[0]).getTime())
|
||||
this.minusTime = minusTime
|
||||
let cutPoint = 0
|
||||
res.forEach((item, index) => {
|
||||
if (index < res.length / 2) {
|
||||
@@ -1980,6 +1984,9 @@ export default {
|
||||
if (getChart(this.chartIndex)) {
|
||||
const divHeight = this.$refs.legendArea.offsetHeight
|
||||
getChart(this.chartIndex).resize({ height: (this.data.height * this.stepWidth - divHeight - chartResizeTool.titleHeight - chartResizeTool.chartBlankHeight) })
|
||||
if (!getChart(this.chartIndex).getOption()) {
|
||||
return
|
||||
}
|
||||
let minInterval = ''
|
||||
let splitNumber = ''
|
||||
if (this.fromTopo) {
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
<template>
|
||||
<div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" ref="alertLabels">
|
||||
<div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" class="alert-label__border" ref="alertLabels">
|
||||
<div class="alert-label-info" v-if="type==='asset'" v-loading="loading">
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">ID</div>
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">Name</div>
|
||||
<div class="alert-label-title">{{$t('overall.name')}}</div>
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">SN</div>
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.sn ? alertLabelData.sn:'--'}}</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">ManageIp</div>
|
||||
<div class="alert-label-title">{{$t('overall.manageIp')}}</div>
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.manageIp ? alertLabelData.manageIp : '--'}}</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">State</div>
|
||||
<div class="alert-label-title">{{$t('overall.type')}}</div>
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.type && alertLabelData.type.name ? alertLabelData.type.name:'--'}}</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">{{$t('overall.state')}}</div>
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.state && alertLabelData.state.name ? alertLabelData.state.name : '--'}}</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
@@ -29,30 +29,33 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">Asset Type</div>
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.type && alertLabelData.type.name ? alertLabelData.type.name:'--'}}</div>
|
||||
<div class="alert-label-title">{{$t('overall.dc')}}</div>
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.dc && alertLabelData.dc.name ? alertLabelData.dc.name:'--'}}</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">Brand</div>
|
||||
<div class="alert-label-title">{{$t('overall.cabinet')}}</div>
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.cabinet && alertLabelData.cabinet.name ? alertLabelData.cabinet.name : '--'}}</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">{{$t('overall.brand')}}</div>
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.brand && alertLabelData.brand.name ? alertLabelData.brand.name : '--'}}</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">Model</div>
|
||||
<div class="alert-label-title">{{$t('overall.model')}}</div>
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.model && alertLabelData.model.name ? alertLabelData.model.name : '--'}}</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">PingLastReply</div>
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.pingInfo && alertLabelData.pingInfo.lastUpdate ? utcTimeToTimezoneStr(alertLabelData.pingInfo.lastUpdate) : '--'}}</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">Alert</div>
|
||||
<div class="alert-label-title">{{$t('overall.alert')}}</div>
|
||||
<div class="alert-label-value">
|
||||
<span v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'danger' : 'success'">{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
|
||||
<i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>
|
||||
<span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">DC</div>
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.dc && alertLabelData.dc.name ? alertLabelData.dc.name : '--'}}</div>
|
||||
<div class="alert-label-title">Endpoint</div>
|
||||
<div class="alert-label-value">
|
||||
<i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>
|
||||
<span>{{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : 0}}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -62,16 +65,36 @@
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">Name</div>
|
||||
<div class="alert-label-title">{{$t('overall.name')}}</div>
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">Project</div>
|
||||
<div class="alert-label-title">{{$t('overall.project')}}</div>
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.project && alertLabelData.project.name ?alertLabelData.project.name : '--'}}</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">Description</div>
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.remark ? alertLabelData.remark : '-'}}</div>
|
||||
<div class="alert-label-title">Endpoint</div>
|
||||
<div class="alert-label-value">
|
||||
<i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>
|
||||
<span>{{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : 0}}</span></div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">{{$t('overall.asset')}}</div>
|
||||
<div class="alert-label-value">
|
||||
<i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"/>
|
||||
<span>{{alertLabelData && alertLabelData.assetNum ? alertLabelData.assetNum: 0}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">{{$t('overall.alert')}}</div>
|
||||
<div class="alert-label-value">
|
||||
<i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>
|
||||
<span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">{{$t('overall.remark')}}</div>
|
||||
<div class="alert-label-value alert-label-remark">{{alertLabelData && alertLabelData.remark ? alertLabelData.remark : '--'}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -81,12 +104,38 @@
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData ? alertLabelData.id : '--'}}</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">Name</div>
|
||||
<div class="alert-label-title">{{$t('overall.name')}}</div>
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData ? alertLabelData.name : '--'}}</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">Description</div>
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.remark ? alertLabelData.remark : '--'}}</div>
|
||||
<div class="alert-label-title">{{$t('overall.module')}}</div>
|
||||
<div class="alert-label-value">
|
||||
<i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>
|
||||
<span>{{alertLabelData && alertLabelData.module && alertLabelData.module.name ? alertLabelData.module.name : '--'}}</span></div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">Endpoint</div>
|
||||
<div class="alert-label-value">
|
||||
<i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>
|
||||
<span>{{alertLabelData && alertLabelData.endpointNum ? alertLabelData.endpointNum : 0}}</span></div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">{{$t('overall.asset')}}</div>
|
||||
<div class="alert-label-value">
|
||||
<i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"/>
|
||||
<span>{{alertLabelData && alertLabelData.assetNum ? alertLabelData.assetNum: 0}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">{{$t('overall.alert')}}</div>
|
||||
<div class="alert-label-value">
|
||||
<i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>
|
||||
<span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">{{$t('overall.remark')}}</div>
|
||||
<div class="alert-label-value alert-label-remark">{{alertLabelData && alertLabelData.remark ? alertLabelData.remark : '--'}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -96,24 +145,62 @@
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">name</div>
|
||||
<div class="alert-label-title">{{$t('overall.name')}}</div>
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">Project</div>
|
||||
<div class="alert-label-title">{{$t('overall.project')}}</div>
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.project && alertLabelData.project.name ? alertLabelData.project.name : '--'}}</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">Module</div>
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.module && alertLabelData.module.name ? alertLabelData.module.name : '--'}}</div>
|
||||
<div class="alert-label-title">{{$t('overall.module')}}</div>
|
||||
<div class="alert-label-value">
|
||||
<i style="cursor: pointer" class="nz-icon nz-icon-overview-module monitorColor"/>
|
||||
<span>{{alertLabelData && alertLabelData.module && alertLabelData.module.name ? alertLabelData.module.name : '--'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">Alert</div>
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : '--'}}</div>
|
||||
<div class="alert-label-title">{{$t('overall.asset')}}</div>
|
||||
<div class="alert-label-value">
|
||||
<i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"></i>
|
||||
<span>{{alertLabelData && alertLabelData.asset.name ? alertLabelData.asset.name : '--'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">State</div>
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.state ? alertLabelData.state : '--'}}</div>
|
||||
<div class="alert-label-title">{{$t('overall.alert')}}</div>
|
||||
<div class="alert-label-value">
|
||||
<i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>
|
||||
<span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0 + ' ' + alertActiveStr()}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">{{$t('overall.state')}}</div>
|
||||
<div class="alert-label-value">
|
||||
<span style="width: auto">
|
||||
<span class="endpoint-cell-left"><i class="nz-icon nz-icon-Metrics colorFA901C" /> {{$t('project.endpoint.metrics')}} </span>
|
||||
<span v-if="alertLabelData && alertLabelData.configs[0].state === 0">
|
||||
<span class="active-icon red-bg inline-block"></span>
|
||||
</span>
|
||||
<span v-else-if="alertLabelData && alertLabelData.configs[0].state === 1">
|
||||
<span class="active-icon green-bg inline-block"></span>
|
||||
</span>
|
||||
<span v-else-if="alertLabelData && alertLabelData.configs[0].state">
|
||||
<span class="active-icon gray-bg inline-block"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span style="width: auto">
|
||||
<span class="endpoint-cell-left" style="margin-left: 10px"><i class="nz-icon nz-icon-logs colorFA901C" /> {{$t('project.endpoint.logs')}} </span>
|
||||
<span v-if="alertLabelData && alertLabelData.configs[1].state === 0">
|
||||
<span class="active-icon red-bg inline-block"></span>
|
||||
</span>
|
||||
<span v-else-if="alertLabelData && alertLabelData.configs[1].state === 1">
|
||||
<span class="active-icon green-bg inline-block"></span>
|
||||
</span>
|
||||
<span v-else-if="alertLabelData && alertLabelData.configs[1].state">
|
||||
<span class="active-icon gray-bg inline-block"></span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -123,26 +210,38 @@
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.id ? alertLabelData.id : '--'}}</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">name</div>
|
||||
<div class="alert-label-title">{{$t('overall.name')}}</div>
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.name ? alertLabelData.name : '--'}}</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">Location</div>
|
||||
<div class="alert-label-title">{{$t('overall.location')}}</div>
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.location && alertLabelData.location ? alertLabelData.location : '--'}}</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">Asset num</div>
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.assetNum && alertLabelData.assetNum ? alertLabelData.assetNum: '--'}}</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">Alert</div>
|
||||
<div class="alert-label-value">{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : '--'}}</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">State</div>
|
||||
<div class="alert-label-title">{{$t('overall.cabinet')}}</div>
|
||||
<div class="alert-label-value">
|
||||
<div v-if="alertLabelData" :class="{'green-bg': alertLabelData && alertLabelData.state === 'ON','red-bg': alertLabelData && alertLabelData.state === 'oFF'}" class="active-icon"></div>
|
||||
{{alertLabelData && alertLabelData.state ? alertLabelData.state : '--'}}
|
||||
<i v-if="alertLabelData" class="nz-icon nz-icon-cabinet monitorColor" :class="alertLabelData && alertLabelData.cabinetNum> 0 ? 'color23BF9A' : 'colorEF7458'"/>
|
||||
<span>{{alertLabelData && alertLabelData.cabinetNum ? alertLabelData.cabinetNum : 0}}</span></div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">{{$t('overall.asset')}}</div>
|
||||
<div class="alert-label-value">
|
||||
<i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"/>
|
||||
<span>{{alertLabelData && alertLabelData.assetNum && alertLabelData.assetNum ? alertLabelData.assetNum: 0}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">{{$t('overall.alert')}}</div>
|
||||
<div class="alert-label-value">
|
||||
<i v-if="alertLabelData" :class="alertLabelData && alertLabelData.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>
|
||||
<span>{{alertLabelData && alertLabelData.alertNum ? alertLabelData.alertNum : 0}}</span></div>
|
||||
</div>
|
||||
<div class="alert-label-box">
|
||||
<div class="alert-label-title">{{$t('overall.state')}}</div>
|
||||
<div class="alert-label-value" style="margin-left: 3px">
|
||||
<div v-if="alertLabelData" :class="{'green-bg': alertLabelData && alertLabelData.state === 'ON','red-bg': alertLabelData && alertLabelData.state === 'OFF'}" class="active-icon"></div>
|
||||
<span v-if="alertLabelData && alertLabelData.state === 'ON'">{{ $t('overall.enabled') }}</span>
|
||||
<span v-if="alertLabelData && alertLabelData.state === 'OFF'">{{ $t('overall.disabled') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -156,7 +255,10 @@ export default {
|
||||
props: {
|
||||
id: {},
|
||||
type: {},
|
||||
that: {}
|
||||
// labelLoading:{},
|
||||
that: {},
|
||||
detailList: Boolean,
|
||||
alertTableDialog: Boolean
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@@ -194,16 +296,27 @@ export default {
|
||||
const self = this
|
||||
return function (position) {
|
||||
const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
|
||||
const dialog = document.getElementsByClassName('el-dialog')[2] // 获取元素类名为 el-dialog的元素数组第二个
|
||||
const dialogHeight = dialog.clientHeight // 获取元素窗口
|
||||
const leftOffSetView = this.detailList ? -80 : 10
|
||||
const topOffSetView = this.detailList ? 0 : 0
|
||||
const leftOffSet = this.detailList ? -80 : 10
|
||||
const topOffSet = this.detailList ? 70 : 0
|
||||
const elHeight = self.type === 'asset' ? 318 : (self.type === 'project' ? 70 : 70)
|
||||
if (position.top + elHeight > clientHeight) {
|
||||
return {
|
||||
left: `${position.left + position.width + 20}px`,
|
||||
top: `${position.top - elHeight - 20}px`
|
||||
left: `${position.left + position.width + leftOffSet}px`,
|
||||
top: `${position.top - elHeight + topOffSet}px`
|
||||
}
|
||||
} else if (dialogHeight && this.alertTableDialog) { // dialogHeight 为获取的元素窗口,this.alertTableDialog // 为了判断是alertMessageTable页面使用的组件
|
||||
return {
|
||||
left: `${position.left + position.width - 40}px`,
|
||||
top: `${position.top - 95}px`
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
left: `${position.left + position.width + 20}px`,
|
||||
top: `${position.top - 20}px`
|
||||
left: `${position.left + position.width + leftOffSetView}px`,
|
||||
top: `${position.top + topOffSetView}px`
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -289,3 +402,110 @@ export default {
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.alert-label {
|
||||
position: fixed;
|
||||
background-color: white;
|
||||
z-index: 3000;
|
||||
padding: 10px 23px 10px 10px;
|
||||
border-radius: 4px;
|
||||
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
|
||||
}
|
||||
.alert-label__border {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E7EAED;
|
||||
box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
|
||||
border-radius: 3px 3px 3px 3px 0 0;
|
||||
}
|
||||
.alert-labelUp {
|
||||
position: fixed;
|
||||
background-color: white;
|
||||
z-index: 3000;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
|
||||
}
|
||||
.alert-label::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width:0;
|
||||
height:0;
|
||||
overflow: hidden;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
/*border: 5px;*/
|
||||
/*border-style: dashed solid dashed dashed;*/
|
||||
/*border-color: transparent #fff transparent transparent;*/
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 0;
|
||||
transform: translate(-100%, -50%);
|
||||
}
|
||||
.alert-labelUp::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width:0;
|
||||
height:0;
|
||||
overflow: hidden;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
/*border: 5px;*/
|
||||
/*border-style: dashed solid dashed dashed;*/
|
||||
/*border-color: transparent #fff transparent transparent;*/
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 0;
|
||||
transform: translate(-100%, -50%);
|
||||
}
|
||||
.alert-label-info{
|
||||
/*border: 1px solid #ebeef5;*/
|
||||
border-bottom: none;
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
}
|
||||
.alert-label-box{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
/*border-bottom: 1px solid #ebeef5;*/
|
||||
}
|
||||
.alert-label-title{
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
line-height: 23px;
|
||||
min-width: 110px;
|
||||
padding: 0 3px 0 13px;
|
||||
}
|
||||
.alert-label-value{
|
||||
height: 26px;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
line-height: 23px;
|
||||
}
|
||||
.alert-label-remark {
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 210px;
|
||||
}
|
||||
.danger{
|
||||
background-color: #d64f40;
|
||||
color: white;
|
||||
padding: 2px 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.success{
|
||||
background-color: #50d050;
|
||||
color: white;
|
||||
padding: 2px 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
/deep/.active-icon{
|
||||
margin-top: 0;
|
||||
}
|
||||
.colorFA901C{
|
||||
color: #fa901c;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,25 +1,21 @@
|
||||
<template>
|
||||
<div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" v-loading="loading">
|
||||
<div :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" class="alert-label__border" v-loading="loading">
|
||||
<div class="alert-rule-info" >
|
||||
<div class="alert-rule-box">
|
||||
<div class="alert-rule-title">ID</div>
|
||||
<div class="alert-rule-value">{{alertRuleData.id ? alertRuleData.id : ''}}</div>
|
||||
<div class="alert-rule-value">{{alertRuleData.id ? alertRuleData.id : '--'}}</div>
|
||||
</div>
|
||||
<div class="alert-rule-box">
|
||||
<div class="alert-rule-title">{{$t('alert.alertName')}}</div>
|
||||
<div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : ''}}</div>
|
||||
<div class="alert-rule-title">{{$t('alert.name')}}</div>
|
||||
<div class="alert-rule-value">{{alertRuleData.name ? alertRuleData.name : '--'}}</div>
|
||||
</div>
|
||||
<div class="alert-rule-box">
|
||||
<div class="alert-rule-title">{{$t('alert.config.expr')}}</div>
|
||||
<div class="alert-rule-value">{{alertRuleData.expr ? (alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)) : ''}}</div>
|
||||
</div>
|
||||
<div class="alert-rule-box">
|
||||
<div class="alert-rule-title">{{$t('alert.config.threshold')}}</div>
|
||||
<div class="alert-rule-value">{{alertRuleData.threshold ? alertRuleData.threshold : ''}}</div>
|
||||
<div class="alert-rule-title">{{$t('alert.type')}}</div>
|
||||
<div class="alert-rule-value">{{alertRuleData.type ? alertRuleData.type : '--'}}</div>
|
||||
</div>
|
||||
<div class="alert-rule-box">
|
||||
<div class="alert-rule-title">{{$t('alert.severity')}}</div>
|
||||
<div class="alert-rule-value">{{alertRuleData.severityId ? severityData.find(s => alertRuleData.severityId === s.id).name : ''}}</div>
|
||||
<div class="alert-rule-value"><i class="nz-icon nz-icon-circle" :style="{color:severityColor,'font-size':'12px','margin-right':'5px'}"></i>{{alertRuleData.severityId ? severityData.find(s => alertRuleData.severityId === s.id).name : '--'}}</div>
|
||||
<!-- <div class="alert-rule-value severity">
|
||||
<span v-if="alertRuleData && alertRuleData.severity === 'P1'" class="P1">
|
||||
{{$CONSTANTS.alertMessage.severityData.find(s => {return s.value === 'P1'}).label}}
|
||||
@@ -32,10 +28,34 @@
|
||||
</span>
|
||||
</div>-->
|
||||
</div>
|
||||
<div class="alert-rule-box">
|
||||
<div class="alert-rule-title">{{$t('alert.config.expr')}}</div>
|
||||
<div class="alert-rule-value">{{alertRuleData.expr ? (alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)) : '--'}}</div>
|
||||
</div>
|
||||
<div class="alert-rule-box">
|
||||
<div class="alert-rule-title">{{$t('alert.alertNum')}}</div>
|
||||
<div class="alert-rule-value">
|
||||
<i :class="alertRuleData.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>
|
||||
<span>{{alertRuleData.alertNum ? alertRuleData.alertNum : 0}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert-rule-box">
|
||||
<div class="alert-rule-title">{{$t('alert.config.trbShot')}}</div>
|
||||
<div class="alert-rule-value" @click="trbShotShow"><i class="nz-icon nz-icon-guzhangshuju"></i></div>
|
||||
</div>
|
||||
<div class="alert-rule-box">
|
||||
<div class="alert-rule-title">{{$t('alert.state')}}</div>
|
||||
<div class="alert-rule-value" style="margin-left: 3px">
|
||||
<div v-if="alertRuleData.state === 1">
|
||||
<i class="active-icon green-bg inline-block"></i>
|
||||
{{ $t('overall.enabled') }}
|
||||
</div>
|
||||
<div v-else-if="alertRuleData.state === 0">
|
||||
<i class="active-icon gray-bg inline-block"></i>
|
||||
{{ $t('overall.disabled') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -53,7 +73,8 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
loading: true,
|
||||
alertRuleData: ''
|
||||
alertRuleData: '',
|
||||
severityColor: ''
|
||||
}
|
||||
},
|
||||
components: {
|
||||
@@ -72,12 +93,12 @@ export default {
|
||||
const elHeight = 50
|
||||
if (position.top + elHeight > clientHeight) {
|
||||
return {
|
||||
left: `${position.left + position.width + 20}px`,
|
||||
left: `${position.left + position.width + 200}px`,
|
||||
top: `${position.top - elHeight - 80}px`
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
left: `${position.left + position.width + 20}px`,
|
||||
left: `${position.left + position.width + 200}px`,
|
||||
top: `${position.top - 80}px`
|
||||
}
|
||||
}
|
||||
@@ -113,12 +134,18 @@ export default {
|
||||
},
|
||||
trbShotShow () {
|
||||
this.$emit('showText')
|
||||
},
|
||||
severityDataColor () {
|
||||
this.severityData.map(item => {
|
||||
this.severityColor = item.color
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$get('/alert/rule/' + this.id).then((res) => {
|
||||
if (res.msg === 'success') {
|
||||
this.loading = false
|
||||
this.severityDataColor()
|
||||
this.alertRuleData = res.data
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
@@ -128,3 +155,170 @@ export default {
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.alert-rule-tip {
|
||||
position: fixed;
|
||||
background-color: white;
|
||||
z-index: 3000;
|
||||
padding: 10px 23px 10px 10px;
|
||||
border-radius: 4px;
|
||||
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
|
||||
}
|
||||
.alert-rule-tip::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width:0;
|
||||
height:0;
|
||||
overflow: hidden;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
border: 5px;
|
||||
border-style: dashed solid dashed dashed;
|
||||
border-color: transparent #fff transparent transparent;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 0;
|
||||
transform: translate(-100%, -50%);
|
||||
}
|
||||
.alert-rule-abs {
|
||||
background-color: white;
|
||||
z-index: 3000;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
|
||||
}
|
||||
.alert-rule-tip-Up {
|
||||
position: fixed;
|
||||
background-color: white;
|
||||
z-index: 3000;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
|
||||
}
|
||||
.alert-rule-tip-Up::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width:0;
|
||||
height:0;
|
||||
overflow: hidden;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
border: 5px;
|
||||
border-style: dashed solid dashed dashed;
|
||||
border-color: transparent #fff transparent transparent;
|
||||
position: absolute;
|
||||
bottom: 95px;
|
||||
left: 0;
|
||||
transform: translate(-100%, -50%);
|
||||
}
|
||||
.alert-rule-abs-Up {
|
||||
background-color: white;
|
||||
z-index: 3000;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
|
||||
}
|
||||
.alert-rule-info{
|
||||
border-bottom: none;
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
}
|
||||
.alert-rule-box{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.alert-rule-title{
|
||||
text-align: left;
|
||||
min-width: 110px;
|
||||
color: #666;
|
||||
padding: 0 3px 0 13px;
|
||||
}
|
||||
.alert-rule-value{
|
||||
text-align: left;
|
||||
color: #1a1a1a;
|
||||
padding: 0 3px 0 13px;
|
||||
width: 159px;
|
||||
word-wrap: break-word;
|
||||
white-space: normal;
|
||||
overflow: hidden;
|
||||
}
|
||||
.severity .P1{
|
||||
background: #F5846A;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
.severity .P2{
|
||||
background: #F7A54A;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
.severity .P3{
|
||||
background: #F1C13D;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
.alert-label__border {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E7EAED;
|
||||
box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
|
||||
border-radius: 3px 3px 3px 3px 0 0;
|
||||
}
|
||||
/* .alert-rule-info::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width:0;
|
||||
height:0;
|
||||
overflow: hidden;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
border: 5px;
|
||||
border-style: dashed solid dashed dashed;
|
||||
border-color: transparent #fff transparent transparent;
|
||||
position: absolute;
|
||||
top: calc(50% - 6px);
|
||||
left: 0;
|
||||
transform: translate(-100%, -100%);
|
||||
}
|
||||
.alert-rule-info{
|
||||
border: 1px solid #ebeef5;
|
||||
border-bottom: none;
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
}*/
|
||||
/* .alert-rule-info{
|
||||
border: 1px solid #ebeef5;
|
||||
border-bottom: none;
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
display: flex;
|
||||
background-color: white;
|
||||
padding: 10px;
|
||||
transform: translateY(-50%);
|
||||
overflow-wrap: break-word;
|
||||
border-radius: 4px;
|
||||
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
|
||||
}
|
||||
.alert-rule-box{
|
||||
display: flex;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
.alert-rule-title{
|
||||
text-align: left;
|
||||
width: 80px;
|
||||
border-right: 1px solid #ebeef5;
|
||||
color: #666;
|
||||
padding: 0 3px 0 13px;
|
||||
}
|
||||
.alert-rule-value{
|
||||
text-align: left;
|
||||
color: #1a1a1a;
|
||||
padding: 0 3px 0 13px;
|
||||
}*/
|
||||
</style>
|
||||
|
||||
@@ -293,3 +293,135 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
/* begin--二级顶部工具栏*/
|
||||
.sub-top-tools {
|
||||
display: flex;
|
||||
height: 32px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid #DCDFE6;
|
||||
border-bottom: 1px solid #E4E7ED;
|
||||
margin: 0 -6px;
|
||||
padding-right: 80px;
|
||||
background-color: $content-right-background-color;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.sub-top-tools>div {
|
||||
margin-top: 2px;
|
||||
}
|
||||
.sub-top-tools .top-tool-search {
|
||||
width: 260px;
|
||||
margin: -1px 0 0 0;
|
||||
.select_input input {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
.bottom-data-list .sub-container {
|
||||
padding: 10px;
|
||||
height: calc(100% - 64px);
|
||||
background-color: #f6f6f6;
|
||||
overflow-y: auto;
|
||||
&>div {
|
||||
background-color: white;
|
||||
}
|
||||
&>.nz-table2 {
|
||||
height: 100%;
|
||||
padding-top: 20px !important;
|
||||
}
|
||||
}
|
||||
.sub-top-tools .top-tool-btn-txt .nz-icon{
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.sub-top-tool-right {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
}
|
||||
.has-sub-popper {
|
||||
color: $danger-color;
|
||||
}
|
||||
.sub-box {
|
||||
height: 50%;
|
||||
position: relative;
|
||||
}
|
||||
.sub-list {
|
||||
height: calc(100% - 9px);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
top: 9px;
|
||||
|
||||
.sub-list__tabs {
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
|
||||
&>div {
|
||||
height: 100%;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
&>.nz-table2 {
|
||||
height: calc(100% - 92px);
|
||||
padding: 20px 20px 0;
|
||||
}
|
||||
}
|
||||
.chart-list{
|
||||
.nz-table2 {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-and-sub-transition {
|
||||
transition: .4s height;
|
||||
}
|
||||
|
||||
.bottom-panel {
|
||||
padding-top: 15px;
|
||||
background-color: white;
|
||||
/*padding-bottom: 50px;*/
|
||||
/*height: calc(100% - 50px);*/
|
||||
padding-bottom: 10px;
|
||||
height: calc(100% - 30px);
|
||||
}
|
||||
.bottom-log {
|
||||
padding: 15px;
|
||||
}
|
||||
.bottom-common {
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.chart-temp{
|
||||
height: calc(100% - 20px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.resize-modal {
|
||||
width: calc(100% - 240px);
|
||||
opacity: 0.6;
|
||||
background-color: #f5f9ff;
|
||||
border: 1px solid #a7d0f7;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
cursor: ns-resize;
|
||||
display: none;
|
||||
z-index: 20;
|
||||
vertical-align: bottom;
|
||||
bottom: 0;
|
||||
}
|
||||
.bottom-box .sub-container{
|
||||
height: calc(100% - 64px);
|
||||
}
|
||||
.bottom-box .sub-container .nz-table2{
|
||||
height: calc(100% - 20px);
|
||||
}
|
||||
.asset-detail .sub-container .nz-table2 {
|
||||
height: 100%;
|
||||
}
|
||||
.endpoint-tab-new .sub-container .nz-table2 {
|
||||
height: 100%;
|
||||
}
|
||||
/* end--二级顶部工具栏*/
|
||||
</style>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
>
|
||||
<template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
|
||||
<template v-slot:top-tool-right>
|
||||
<el-select v-model="state" class="margin-r-10" size="small" value-key="value" @change="getTableData" popper-class="right-public-box-select-top right-public-box-dropdown-top">
|
||||
<el-select v-model="state" class="margin-r-10" size="small" value-key="value" @change="getTableData" popper-class="right-box-select-top right-public-box-dropdown-top">
|
||||
<el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
<pick-time v-model="searchTimeHeader" :default-pick="12" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
|
||||
@@ -24,6 +24,7 @@
|
||||
<alertMessageTable
|
||||
ref="dataTable"
|
||||
:api="url"
|
||||
:loading="tools.loading"
|
||||
:custom-table-title="tools.customTableTitle"
|
||||
:height="subTableHeight"
|
||||
:now-time="nowTime"
|
||||
@@ -454,6 +455,9 @@ export default {
|
||||
this.deleteBox.show = true
|
||||
},
|
||||
messageDetail (row) {
|
||||
if (row.alertRule.type == 3) {
|
||||
return
|
||||
}
|
||||
this.$get('/alert/rule/' + row.alertRule.id).then(res => {
|
||||
this.currentMsg = { ...row, alertRule: { ...res.data } }
|
||||
this.graphShow = true
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
ref="dataTable"
|
||||
:api="url"
|
||||
v-loading="tools.loading"
|
||||
:loading="tools.loading"
|
||||
:custom-table-title="tools.customTableTitle"
|
||||
:height="subTableHeight"
|
||||
:table-data="tableData"
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
ref="dataTable"
|
||||
:api="url"
|
||||
v-loading="tools.loading"
|
||||
:loading="tools.loading"
|
||||
:custom-table-title="tools.customTableTitle"
|
||||
:height="subTableHeight"
|
||||
:table-data="tableData"
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
<cabinet-table
|
||||
ref="dataTable"
|
||||
v-loading="tools.loading"
|
||||
:loading="tools.loading"
|
||||
:api="url"
|
||||
:custom-table-title="tools.customTableTitle"
|
||||
:height="subTableHeight"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="full-width-height">
|
||||
<div class="full-width-height endpoint-tab-new">
|
||||
<nz-bottom-data-list
|
||||
:showTitle='showTitle'
|
||||
:api="url"
|
||||
@@ -20,7 +20,7 @@
|
||||
<i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float:right" @click="focusInput"></i>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="margin-r-20 nz-btn-group nz-btn-group-size-small nz-btn-group-light">
|
||||
<div class="margin-r-20 nz-btn-group">
|
||||
<button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend" id="endpoint-query-changetime"><i class="el-icon-d-arrow-left"></i></button><my-date-picker
|
||||
v-model="formatTime"
|
||||
type="datetime"
|
||||
@@ -33,13 +33,13 @@
|
||||
>
|
||||
</my-date-picker><button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><i class="el-icon-d-arrow-right"></i></button>
|
||||
</div>
|
||||
<div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light" style="height: 24px;">
|
||||
<button class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="viewGraph">
|
||||
<div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light" style="height: 28px;">
|
||||
<button class="nz-btn nz-btn-size-normal nz-btn-style-light" :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}" @click="viewGraph">
|
||||
<i class="nz-icon nz-icon-chart" :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i>
|
||||
</button><button @mouseenter="dropdownHandler(true)" @mouseleave="dropdownHandler(false)" class="nz-btn nz-btn-size-normal nz-btn-style-light export-dropdown-btn" id="browser-go">
|
||||
</button><button @click="dropdownHandler(dropdownShow)" class="nz-btn nz-btn-size-normal nz-btn-style-light export-dropdown-btn" id="browser-go">
|
||||
<i class="nz-icon nz-icon-arrow-down"></i>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div v-if="dropdownShow" class="endpoint-query-dropdown el-popover">
|
||||
<div v-if="dropdownShow" class="endpoint-query-dropdown el-popover" style="right: 11px;top: 33px;">
|
||||
<span style="padding-top: 2px">{{$t('project.endpoint.hideSameLabels')}}</span>
|
||||
<el-switch v-model="hideSameLabels" active-color="#ee9d3f" size="small"></el-switch>
|
||||
</div>
|
||||
@@ -57,6 +57,7 @@
|
||||
:hideSameLabels="hideSameLabels"
|
||||
:queryExpression="queryExpression"
|
||||
@changSelection="changSelectionF"
|
||||
@selectedEndpointsChange="selectedEndpointsChange"
|
||||
/>
|
||||
</template>
|
||||
<!-- <template v-slot:pagination>-->
|
||||
@@ -119,7 +120,7 @@ export default {
|
||||
fromBottom: true,
|
||||
selectedEndpoints: [],
|
||||
queryExpression: '',
|
||||
dropdownShow: '',
|
||||
dropdownShow: false,
|
||||
timeout: null,
|
||||
formatTime: '',
|
||||
hideSameLabels: true
|
||||
@@ -192,18 +193,18 @@ export default {
|
||||
this.$refs.endpointQueryTab.viewGraph()
|
||||
},
|
||||
dropdownHandler (show) {
|
||||
if (show) {
|
||||
clearTimeout(this.timeout)
|
||||
if (!show) {
|
||||
this.dropdownShow = true
|
||||
} else {
|
||||
this.timeout = setTimeout(() => {
|
||||
this.dropdownShow = false
|
||||
}, 700)
|
||||
}
|
||||
},
|
||||
changSelectionF (arr) {
|
||||
this.changSelection = arr
|
||||
},
|
||||
selectedEndpointsChange (n) {
|
||||
this.selectedEndpoints = n
|
||||
},
|
||||
toTop (wrap) {
|
||||
let currentTop = wrap.scrollTop
|
||||
const interval = currentTop / 10
|
||||
@@ -219,3 +220,14 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.full-width-height{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.control-icon-unchecked {
|
||||
color: #bcbec2;
|
||||
cursor: not-allowed;
|
||||
background-color: #f4f4f5;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,727 @@
|
||||
<style scope>
|
||||
.chart-bottom {
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.plTableBox.nz-table /deep/ .el-table{
|
||||
display: block !important;
|
||||
}
|
||||
.project-calendar{
|
||||
margin-top: 2px;
|
||||
}
|
||||
.control-icon-unchecked {
|
||||
color: #999999;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.endpoint-dialog .el-dialog__body{
|
||||
height: calc(100% - 48px) !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<span style="z-index: 1999;position: relative">
|
||||
<div class="sub-top-tools">
|
||||
<div class="sub-list-tabs">
|
||||
<div class="sub-list-tab-title">{{$t("project.endpoint.endpointId")}}: {{currentEndpoint ? currentEndpoint.id : ''}}</div><div
|
||||
class="sub-list-tab" @click="changeTab('panel')" id="endpoint-query-changepanel">{{$t("overall.detail")}}</div>
|
||||
<div class="sub-list-tab" @click="changeTab('alertMessage')" id="endpoint-query-alertMessage">{{$t("asset.alerts")}}</div>
|
||||
<div class="sub-list-tab sub-list-tab-active">{{$t("overall.query")}}</div>
|
||||
</div>
|
||||
<div class="top-tool-right">
|
||||
<div class="top-tool-search margin-r-20">
|
||||
<el-input ref="elementQuery" @clear="clearInput" id="elementQuery" @focus="focusInput" @blur="blurInput" v-model="queryExpression" class="query-input-inactive" size="mini" clearable :placeholder="$t('project.endpoint.promExpr')" >
|
||||
<i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float:right" @click="focusInput"></i>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="margin-r-20 nz-btn-group nz-btn-group-size-small nz-btn-group-light">
|
||||
<button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend" id="endpoint-query-changetime"><i class="el-icon-d-arrow-left"></i></button><my-date-picker
|
||||
v-model="formatTime"
|
||||
type="datetime"
|
||||
size="mini"
|
||||
class="project-calendar nz-input-group-middle"
|
||||
clearable
|
||||
:time-arrow-control="true"
|
||||
placeholder="Moment"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
@change="pickTime"
|
||||
>
|
||||
</my-date-picker><button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><i class="el-icon-d-arrow-right"></i></button>
|
||||
</div>
|
||||
<div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light" style="height: 24px;">
|
||||
<button class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="viewGraph">
|
||||
<i class="nz-icon nz-icon-chart" :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i>
|
||||
</button><button @mouseenter="dropdownHandler(true)" @mouseleave="dropdownHandler(false)" class="nz-btn nz-btn-size-normal nz-btn-style-light export-dropdown-btn" id="browser-go">
|
||||
<i class="nz-icon nz-icon-arrow-down"></i>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div v-if="dropdownShow" class="endpoint-query-dropdown el-popover">
|
||||
<span style="padding-top: 2px">{{$t('project.endpoint.hideSameLabels')}}</span>
|
||||
<el-switch v-model="hideSameLabels" active-color="#ee9d3f" size="small"></el-switch>
|
||||
</div>
|
||||
</transition>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-header-inner" @click="clearSelectedMetrics"><span><i style="font-size: 12px;margin-left: 2px;" class="nz-icon nz-icon-close " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div>
|
||||
<pl-table :row-height="28" use-virtual :datas="tableData" border :empty-text="$t('config.mib.noData')" :header-cell-class-name="cellClass" :style="{height: $tableHeight.noPagination}"
|
||||
:pagination-show="false" class="nz-table endpoint-query-table" ref="endpointQueryTable" style="width: 100%;" v-loading="loading"
|
||||
v-if="tableShow && plTableSHow" id="endpoint-list-table" :tooltip-effect="'light'" @selection-change="selectChange">
|
||||
<pl-table-column
|
||||
type="selection"
|
||||
width="39"
|
||||
align="center"
|
||||
column-key="sel"
|
||||
:selectable="selectable">
|
||||
</pl-table-column>
|
||||
<pl-table-column
|
||||
prop="element"
|
||||
:resizable="true"
|
||||
:min-width="1000"
|
||||
column-key="element"
|
||||
:show-overflow-tooltip="true"
|
||||
:label="$t('project.endpoint.element')">
|
||||
<template v-slot="scope">
|
||||
<el-popover trigger="hover" placement="right" v-if="typeof scope.row.metricTip != 'undefined' && scope.row.metricTip != null">
|
||||
<div>
|
||||
<ul>
|
||||
<li><span class="metirc-tip-list">metric : </span><span>{{scope.row.metricTip.metric?scope.row.metricTip.metric:'--'}}</span></li>
|
||||
<li><span class="metirc-tip-list">type : </span><span>{{scope.row.metricTip.type?scope.row.metricTip.type:'unknown'}}</span></li>
|
||||
<li><span class="metirc-tip-list">help : </span><span>{{scope.row.metricTip.help?scope.row.metricTip.help:'--'}}</span></li>
|
||||
<li><span class="metirc-tip-list">unit : </span><span>{{scope.row.metricTip.unit?scope.row.metricTip.unit:'--'}}</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<span slot="reference"><i class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
|
||||
</el-popover>
|
||||
<span style="word-break: break-all;" v-html="hideSameLabels?scope.row.colorSimpleElement: scope.row.colorElement"></span>
|
||||
</template>
|
||||
</pl-table-column>
|
||||
<pl-table-column
|
||||
:resizable="false"
|
||||
prop="value"
|
||||
column-key="value"
|
||||
:label="$t('project.endpoint.value')"
|
||||
min-width="180">
|
||||
</pl-table-column>
|
||||
</pl-table>
|
||||
<button :class="{'to-top-is-hover': tools.tableHover}" @click="toTop(scrollbarWrap)" class="to-top" v-show="tools.showTopBtn" id="endpoint-list-totop"><i class="nz-icon nz-icon-top"></i></button>
|
||||
|
||||
<el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"
|
||||
:title="$t('project.endpoint.dialogTitle')"
|
||||
:visible.sync="graphShow"
|
||||
width="90%"
|
||||
:modal-append-to-body="false"
|
||||
id="viewGraphDialog"
|
||||
@close="dialogClose">
|
||||
<div slot="title">
|
||||
{{$t("project.endpoint.dialogTitle")}}
|
||||
<div class="float-right panel-calendar dialog-tool" style="display: flex">
|
||||
<pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange" id="endpoint-query-full-chart" :show-multiple="true" ref="pickTime"></pick-time>
|
||||
<button @click="saveChart" class="nz-btn nz-btn-size-large nz-btn-style-normal-new" v-has="'project_endpoint_query_chart_toAdd'" id="endpoint-query-full-chart-save">{{$t('dashboard.metric.saveChart')}}</button>
|
||||
</div>
|
||||
</div>
|
||||
<chart ref="endpointChart" :unit="chartUnit" :minusTime="minusTime"></chart>
|
||||
</el-dialog>
|
||||
<transition name="right-box">
|
||||
<chart-box :chart="chart" :panel-data="panelData" :show-panel="{id: -1, name: '', type: 'endpointQuery'}" @close="rightBox.show = false" @on-create-success="createSuccess" @reload="getPanelData" @reloadOnlyPanel="getPanelData" box-class="save-chart-box" from="project_endpoint_query" ref="addChartModal" v-if="rightBox.show" style="z-index: 2900" :fromEndpoint="true"></chart-box>
|
||||
</transition>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chartBox from '../../../page/dashboard/chartBox'
|
||||
import axios from 'axios'
|
||||
import bus from '../../../../libs/bus'
|
||||
import chart from '../../../page/dashboard/overview/chart'
|
||||
|
||||
let timeout
|
||||
let internal
|
||||
export default {
|
||||
name: 'endpointQueryTab',
|
||||
components: {
|
||||
'chart-box': chartBox,
|
||||
chart: chart
|
||||
},
|
||||
props: {
|
||||
obj: Object, // 关联的实体对象
|
||||
from: String
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: {},
|
||||
tableShow: true,
|
||||
dropdownShow: false,
|
||||
loading: false,
|
||||
tools: {
|
||||
showTopBtn: false, // 主列表top按钮
|
||||
tableHover: false
|
||||
},
|
||||
currentEndpoint: {},
|
||||
queryData: [], // endpoint 查询列表数据
|
||||
tableData: [],
|
||||
tableDataCopy: '',
|
||||
queryExpression: '',
|
||||
elementMetricDatas: [], // element 列提示信息列表
|
||||
formatTime: '', // 查询endpoint的时间，
|
||||
selectedEndpoints: [], // 选中的metric{label='value'}
|
||||
chartDatas: [], // 从query_range查询到的数据
|
||||
legend: [], // echart legend
|
||||
graphShow: false,
|
||||
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
|
||||
panelData: [], // chart-box的panel下拉框数据,
|
||||
hideSameLabels: true,
|
||||
sameLabels: ['instance', 'module', 'project', 'asset', 'endpoint', 'datacenter'],
|
||||
chartUnit: 5,
|
||||
rightBox: { show: false },
|
||||
plTableSHow: true,
|
||||
scrollTop: 0,
|
||||
scrollbarWrap: null,
|
||||
minusTime: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeTab (tab) {
|
||||
this.$emit('changeTab', tab)
|
||||
},
|
||||
saveChart () { // 新增chart
|
||||
const chart = {
|
||||
title: '',
|
||||
type: 'line',
|
||||
span: 12,
|
||||
height: '400',
|
||||
unit: this.chartUnit,
|
||||
param: {
|
||||
url: '',
|
||||
threshold: ''
|
||||
},
|
||||
elements: [],
|
||||
panel: '',
|
||||
sync: 0
|
||||
}
|
||||
for (let i = 0; i < this.selectedEndpoints.length; i++) {
|
||||
if (this.selectedEndpoints[i] && this.selectedEndpoints[i].element !== '') {
|
||||
chart.elements.push({ chartId: '', expression: this.selectedEndpoints[i].element, type: 'expert' })
|
||||
}
|
||||
}
|
||||
this.chart = chart
|
||||
this.rightBox.show = true
|
||||
},
|
||||
dropdownHandler (show) {
|
||||
if (show) {
|
||||
clearTimeout(timeout)
|
||||
this.dropdownShow = true
|
||||
} else {
|
||||
timeout = setTimeout(() => {
|
||||
this.dropdownShow = false
|
||||
}, 700)
|
||||
}
|
||||
},
|
||||
createSuccess (type, response, param, panel) {
|
||||
this.$confirm(this.$t('dashboard.metric.goPanelTip'), this.$t('tip.saveSuccess'), {
|
||||
confirmButtonText: this.$t('tip.yes'),
|
||||
cancelButtonText: this.$t('tip.no'),
|
||||
type: 'success'
|
||||
}).then(() => {
|
||||
bus.$emit('menu-change', 'panel')
|
||||
this.$store.state.showPanel.id = panel.id
|
||||
this.$store.state.showPanel.name = panel.name
|
||||
this.$router.push({
|
||||
path: '/panel',
|
||||
query: {
|
||||
t: +new Date()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
tableReload () {
|
||||
const table = this.$refs.endpointQueryTable
|
||||
internal = setInterval(() => {
|
||||
if (!window.resizing) {
|
||||
table.setHeight()
|
||||
clearInterval(internal)
|
||||
}
|
||||
}, 200)
|
||||
},
|
||||
queryEndpoint () {
|
||||
this.loading = true
|
||||
this.queryElementTips()
|
||||
this.queryData = []
|
||||
this.tableData = []
|
||||
this.tableDataCopy = ''
|
||||
setTimeout(() => {
|
||||
this.$get("/prom/api/v1/query?query={endpoint='" + this.currentEndpoint.id + "'}&time=" + this.formatTime).then(response => {
|
||||
this.loading = false
|
||||
if (response.status === 'success') {
|
||||
const results = response.data.result
|
||||
this.queryData = JSON.parse(JSON.stringify(results))
|
||||
this.tableData = this.handlerTableData(results)
|
||||
this.tableDataCopy = JSON.stringify(this.tableData)
|
||||
this.$nextTick(this.$refs.endpointQueryTable.doLayout())
|
||||
if (!this.scrollbarWrap) {
|
||||
this.$nextTick(() => {
|
||||
this.scrollbarWrap = this.$refs.endpointQueryTable.$refs.singleTable.bodyWrapper
|
||||
this.toTopBtnHandler(this.scrollbarWrap)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}, 450)
|
||||
},
|
||||
clearSelectedMetrics () {
|
||||
this.$refs.endpointQueryTable.clearSelection()
|
||||
},
|
||||
changeTime (size, unit) {
|
||||
this.formatTime = this.getTime(size, unit)
|
||||
this.showEndpoint()
|
||||
},
|
||||
pickTime () {
|
||||
this.showEndpoint()
|
||||
},
|
||||
getTime (size, unit) { // 计算时间
|
||||
const now = !this.formatTime ? new Date(bus.computeTimezone(new Date().getTime())) : new Date(this.formatTime)
|
||||
if (unit) {
|
||||
switch (unit) {
|
||||
case 'y':
|
||||
now.setFullYear(now.getFullYear() + size)
|
||||
break
|
||||
case 'M':
|
||||
now.setMonth(now.getMonth() + size)
|
||||
break
|
||||
case 'd':
|
||||
now.setDate(now.getDate() + size)
|
||||
break
|
||||
case 'h':
|
||||
now.setHours(now.getHours() + size)
|
||||
break
|
||||
case 'm':
|
||||
now.setMinutes(now.getMinutes() + size)
|
||||
break
|
||||
case 's':
|
||||
now.setSeconds(now.getSeconds() + size)
|
||||
break
|
||||
default:
|
||||
console.error('unit error')
|
||||
}
|
||||
} else {
|
||||
now.setSeconds(now.getSeconds() + size)
|
||||
}
|
||||
const year = now.getFullYear()
|
||||
let month = now.getMonth() + 1
|
||||
month = month < 10 ? '0' + month : month
|
||||
let day = now.getDate()
|
||||
day = day < 10 ? '0' + day : day
|
||||
let hour = now.getHours()
|
||||
hour = hour < 10 ? '0' + hour : hour
|
||||
let minute = now.getMinutes()
|
||||
minute = minute < 10 ? '0' + minute : minute
|
||||
let second = now.getSeconds()
|
||||
second = second < 10 ? '0' + second : second
|
||||
return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
|
||||
},
|
||||
handlerTableData (results) {
|
||||
const tableData = []
|
||||
for (const result of results) {
|
||||
const metricName = result.metric.__name__
|
||||
let temp = metricName
|
||||
let simpleTemp = metricName// 显示简略信息：隐藏same labels后的结果
|
||||
const metricColor = ''
|
||||
const bracketsColor = '#eb7b18'// #eb7b18
|
||||
const labelColor = '#65bbd1'// #66d9ef
|
||||
const valueColor = '#61c261'// #74e680
|
||||
let colorTemp = `<span style="${metricColor}">${metricName}</span>`
|
||||
let colorSimpleTemp = `<span>${metricName}</span>`
|
||||
let metricTip = {}
|
||||
const queryInfos = (this.elementMetricDatas.filter((item) => {
|
||||
return item.metric === temp
|
||||
}))
|
||||
if (queryInfos && queryInfos.length > 0) {
|
||||
metricTip = queryInfos[0]
|
||||
} else {
|
||||
metricTip.metric = temp
|
||||
}
|
||||
delete result.metric.__name__
|
||||
temp += '{'
|
||||
simpleTemp += '{'
|
||||
colorTemp += `<span style="color: ${bracketsColor}">{</span>`
|
||||
colorSimpleTemp += `<span style="color: ${bracketsColor}">{</span>`
|
||||
const keys = Object.keys(result.metric)
|
||||
for (const index in keys) {
|
||||
const key = keys[index]
|
||||
temp += key + "='" + result.metric[key] + "',"
|
||||
colorTemp += `<span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">'${result.metric[key]}'</span>,`
|
||||
if (!this.sameLabels.some((i) => { return i == key })) {
|
||||
simpleTemp += key + "='" + result.metric[key] + "',"
|
||||
colorSimpleTemp += `<span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">'${result.metric[key]}'</span>,`
|
||||
}
|
||||
}
|
||||
if (temp.indexOf(',') !== -1) {
|
||||
temp = temp.substr(0, temp.length - 1)
|
||||
}
|
||||
if (simpleTemp.indexOf(',') !== -1) {
|
||||
simpleTemp = simpleTemp.substr(0, simpleTemp.length - 1)
|
||||
}
|
||||
if (colorTemp.indexOf(',') !== -1) {
|
||||
colorTemp = colorTemp.substr(0, colorTemp.length - 1)
|
||||
}
|
||||
if (colorSimpleTemp.indexOf(',') !== -1) {
|
||||
colorSimpleTemp = colorSimpleTemp.substr(0, colorSimpleTemp.length - 1)
|
||||
}
|
||||
|
||||
temp += '}'
|
||||
simpleTemp += '}'
|
||||
colorTemp += `<span style="color: ${bracketsColor}">}</span>`
|
||||
colorSimpleTemp += `<span style="color: ${bracketsColor}">}</span>`
|
||||
if (!/.+\{.+\}/.test(simpleTemp)) {
|
||||
simpleTemp = simpleTemp.substr(0, simpleTemp.length - 2)
|
||||
}
|
||||
|
||||
if (!/.+\{<\/span><span.+?>.+?\}/.test(colorSimpleTemp)) {
|
||||
const metricReg = new RegExp('<span.*?>' + metricName + '<\/span>')
|
||||
colorSimpleTemp = metricReg.exec(colorSimpleTemp)[0]
|
||||
}
|
||||
|
||||
const edpQueryData = { element: temp, simpleElement: simpleTemp, colorElement: colorTemp, colorSimpleElement: colorSimpleTemp, value: result.value[1], type: (result.metric.type ? result.metric.type : '2'), metricTip: metricTip }
|
||||
// this.tableData.push(edpQueryData);
|
||||
tableData.push(edpQueryData)
|
||||
}
|
||||
return tableData
|
||||
},
|
||||
selectChange (selection) { // selection 选中的row的数组
|
||||
this.selectedEndpoints = selection
|
||||
},
|
||||
selectable (row, index) {
|
||||
if (this.selectedEndpoints.length >= 20 && !this.selectedEndpoints.includes(row)) {
|
||||
return false
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
},
|
||||
viewGraph () {
|
||||
if (this.selectedEndpoints.length < 1) {
|
||||
return
|
||||
}
|
||||
|
||||
this.chartDatas = []
|
||||
this.legend = []
|
||||
this.graphShow = true
|
||||
this.$refs.pickTime.$refs.multipleTime.searchTime = []
|
||||
this.$refs.pickTime.$refs.multipleTime.showTime = {
|
||||
id: 12,
|
||||
text: this.$t('dashboard.panel.noDate')
|
||||
}
|
||||
this.$refs.pickTime.$refs.multipleTime.showDropdown = false
|
||||
this.$nextTick(() => {
|
||||
this.$refs.endpointChart.startLoading()
|
||||
this.queryChartDate()
|
||||
})
|
||||
},
|
||||
dialogClose () {
|
||||
this.$refs.pickTime.$refs.multipleTime.searchTime = []
|
||||
this.$refs.pickTime.$refs.multipleTime.showTime = {
|
||||
id: 12,
|
||||
text: this.$t('dashboard.panel.noDate')
|
||||
}
|
||||
this.$refs.pickTime.$refs.multipleTime.showDropdown = false
|
||||
this.graphShow = false
|
||||
},
|
||||
chartUnitChange (unit) {
|
||||
this.chartUnit = unit
|
||||
this.$nextTick(() => {
|
||||
this.queryChartDate()
|
||||
})
|
||||
},
|
||||
queryChartDate () {
|
||||
const start = this.searchTime[0] ? this.searchTime[0] : this.getTime(-1, 'h')
|
||||
const end = this.searchTime[1] ? this.searchTime[1] : this.getTime(0, 'h')
|
||||
this.searchTime = [start, end]
|
||||
const timeDiff = (new Date(end).getTime() - new Date(start).getTime()) / 1000 / (24 * 60 * 60)
|
||||
// end - start < 1 day : 15s
|
||||
// end - start < 7 day : 5m
|
||||
// end - start < 30 day : 10m
|
||||
// end - start > 30 day : 30m
|
||||
let step = '15s'
|
||||
if (timeDiff < 1) {
|
||||
step = '15s'
|
||||
} else if (timeDiff < 7) {
|
||||
step = '5m'
|
||||
} else if (timeDiff < 30) {
|
||||
step = '10m'
|
||||
} else {
|
||||
step = '30m'
|
||||
}
|
||||
const axiosArr = []
|
||||
for (const endpoint of this.selectedEndpoints) {
|
||||
axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + endpoint.element + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step))
|
||||
}
|
||||
if (this.$refs.pickTime && this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length) { // 判断是否需要添加比较
|
||||
const startTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
|
||||
const endTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
|
||||
for (const endpoint of this.selectedEndpoints) {
|
||||
axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + endpoint.element + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step))
|
||||
}
|
||||
}
|
||||
this.legend = []
|
||||
this.chartDatas = []
|
||||
axios.all(axiosArr).then(res => {
|
||||
res.forEach((response, promIndex) => {
|
||||
if (response.status == 200) {
|
||||
if (response.data.status == 'success') {
|
||||
const queryData = response.data.data.result[0]
|
||||
if (queryData) {
|
||||
const chartData = {
|
||||
type: 'line',
|
||||
symbol: 'none', // 去掉点
|
||||
smooth: 0.2,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
opacity: 0.9
|
||||
}
|
||||
}
|
||||
chartData.name = queryData.metric.__name__
|
||||
let alias = queryData.metric.__name__
|
||||
delete queryData.metric.__name__
|
||||
chartData.name += '{'
|
||||
alias += '{'
|
||||
Object.keys(queryData.metric).forEach((item, index) => {
|
||||
const label = item
|
||||
const value = queryData.metric[label]
|
||||
chartData.name += label + "='" + value + "',"
|
||||
if (!this.sameLabels.some((i) => { return i == label })) {
|
||||
alias += label + "='" + value + "',"
|
||||
}
|
||||
})
|
||||
chartData.name = chartData.name.charAt(chartData.name.length - 1) === ',' ? chartData.name.substr(0, chartData.name.length - 1) : chartData.name
|
||||
alias = alias.charAt(alias.length - 1) === ',' ? alias.substr(0, alias.length - 1) : alias
|
||||
chartData.name += '}'
|
||||
alias += '}'
|
||||
if (!/.+\{.+\}/.test(alias)) {
|
||||
alias = alias.substr(0, alias.length - 2)
|
||||
}
|
||||
const legend = {
|
||||
name: chartData.name,
|
||||
alias: alias,
|
||||
// showText:this.formatLegend(chartData.name),
|
||||
isGray: false
|
||||
}
|
||||
if (promIndex >= this.selectedEndpoints.length) {
|
||||
legend.name = 'Previous ' + legend.name
|
||||
chartData.name = legend.name
|
||||
legend.alias = 'Previous ' + legend.alias
|
||||
}
|
||||
this.legend.push(legend)
|
||||
chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
|
||||
return [dpsItem[0] * 1000, Number(dpsItem[1])]
|
||||
})
|
||||
this.chartDatas.push(chartData)
|
||||
}
|
||||
} else {
|
||||
this.$message.error(response.data.error)
|
||||
console.error(response.data)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length && res.length > this.selectedEndpoints.length) {
|
||||
const minusTime = (new Date(this.searchTime[0]).getTime() - new Date(this.$refs.pickTime.$refs.multipleTime.searchTime[0]).getTime())
|
||||
this.minusTime = minusTime
|
||||
let cutPoint = 0
|
||||
res.forEach((item, index) => {
|
||||
if (index < res.length / 2) {
|
||||
cutPoint += res[index].data.data.result.length
|
||||
}
|
||||
})
|
||||
this.chartDatas.forEach((item, index) => {
|
||||
if (index >= cutPoint) {
|
||||
this.chartDatas[index].data.forEach((item1, index1) => {
|
||||
item1[0] = item1[0] + minusTime
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.endpointChart) {
|
||||
this.$refs.endpointChart.setRandomColors(this.chartDatas.length)
|
||||
this.$refs.endpointChart.setLegend(this.legend)
|
||||
this.$refs.endpointChart.modifyOption('tooltip', 'backgroundColor', 'rgba(221,228,237,1)')
|
||||
this.$refs.endpointChart.modifyOption('tooltip', 'textStyle', { color: '#000' })
|
||||
this.$refs.endpointChart.modifyOption('grid', 'top', 30)
|
||||
this.$refs.endpointChart.modifyOption('grid', 'left', 0)
|
||||
this.$refs.endpointChart.modifyOption('grid', 'right', 30)
|
||||
this.$refs.endpointChart.modifyOption('grid', 'bottom', 8)
|
||||
this.$refs.endpointChart.modifyOption('grid', 'containLabel', true)
|
||||
this.$refs.endpointChart.setSeries(this.chartDatas)
|
||||
this.$refs.endpointChart.endLoading()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
cellClass (row) { // 给复选框那一列添加 类名为 ‘disabledCheck’
|
||||
if (row.columnIndex === 0) {
|
||||
return 'disabledCheck'
|
||||
}
|
||||
},
|
||||
getPanelData () { // 获取panel数据
|
||||
this.$get('panel?pageNo=1&pageSize=-1').then(response => {
|
||||
if (response.code === 200) {
|
||||
this.panelData = response.data.list
|
||||
}
|
||||
})
|
||||
},
|
||||
tableFilter () {
|
||||
const temp = this
|
||||
const tableDatas = JSON.parse(this.tableDataCopy)
|
||||
this.tableData = tableDatas.filter((item) => {
|
||||
const element = temp.hideSameLabels ? item.simpleElement : item.element
|
||||
return element.indexOf(this.queryExpression) !== -1
|
||||
})
|
||||
},
|
||||
tableFilterHistory (expression) {
|
||||
let metric = ''
|
||||
let labels = []
|
||||
if (/\w*\{.*\}.*/i.test(expression)) {
|
||||
metric = expression.substr(0, expression.indexOf('{'))
|
||||
const labelStr = expression.substr(expression.indexOf('{') + 1, expression.indexOf('}') - expression.indexOf('{') - 1)
|
||||
const labelArr = labelStr.split(',')
|
||||
|
||||
if (labelArr.length > 0) {
|
||||
labels = labelArr.map((item, index) => {
|
||||
const temp = item.split('=')
|
||||
const label = temp[0] ? temp[0] : null
|
||||
const value = temp[1] ? temp[1] : null
|
||||
return label ? { label: label, value: value } : null
|
||||
})
|
||||
}
|
||||
} else {
|
||||
metric = expression
|
||||
}
|
||||
this.tableData = []
|
||||
let sourceData = JSON.parse(JSON.stringify(this.queryData))
|
||||
sourceData = sourceData.filter((item) => {
|
||||
const metricName = item.metric.__name__
|
||||
if (metricName.indexOf(metric) === -1) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (labels.length > 0) {
|
||||
for (const i in labels) {
|
||||
const label = labels[i]
|
||||
if (label && label.label) {
|
||||
const value = item.metric[label.label]
|
||||
let queryVal = label.value
|
||||
if (/^'.+'$/.test(queryVal)) {
|
||||
queryVal = queryVal.substr(1, queryVal.length - 2)
|
||||
}
|
||||
if (!value || value != queryVal) {
|
||||
return false
|
||||
}
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return true
|
||||
})
|
||||
for (const i in sourceData) {
|
||||
const item = sourceData[i]
|
||||
// {"metric":{"instance":"192.168.40.126:9100","__name__":"scrape_duration_seconds","module":"node_exporter","project":"kafka","asset":"192.168.40.126","job":"ed_1","dc":"dc5"},"value":[1580782176.522,"0.000560761"]}
|
||||
const metricName = item.metric.__name__
|
||||
let temp = metricName
|
||||
delete item.metric.__name__
|
||||
temp += '{'
|
||||
const hasLabel = true
|
||||
for (const key in item.metric) {
|
||||
const label = key
|
||||
const value = item.metric[label]
|
||||
temp += label + "='" + value + "',"
|
||||
}
|
||||
temp = temp.charAt(temp.length - 1) == ',' ? temp.substr(0, temp.length - 1) : temp
|
||||
temp += '}'
|
||||
if (hasLabel) {
|
||||
const edpQueryData = { element: temp, value: item.value[1], type: (item.metric.type ? item.metric.type : '2') }
|
||||
this.tableData.push(edpQueryData)
|
||||
}
|
||||
}
|
||||
},
|
||||
focusInput () {
|
||||
let classVal = document.getElementById('elementQuery').parentElement.getAttribute('class')
|
||||
classVal = classVal.replace('query-input-inactive', 'query-input-active')
|
||||
document.getElementById('elementQuery').parentElement.setAttribute('class', classVal)
|
||||
this.$refs.elementQuery.focus()
|
||||
},
|
||||
blurInput () {
|
||||
if (!this.queryExpression || this.queryExpression == '') {
|
||||
setTimeout(function () {
|
||||
let classVal = document.getElementById('elementQuery').parentElement.getAttribute('class')
|
||||
classVal = classVal.replace('query-input-active', 'query-input-inactive')
|
||||
document.getElementById('elementQuery').parentElement.setAttribute('class', classVal)
|
||||
}, 100)
|
||||
}
|
||||
},
|
||||
clearInput () {
|
||||
this.$refs.elementQuery.focus()
|
||||
},
|
||||
queryElementTips: async function () {
|
||||
this.elementMetricDatas = []
|
||||
const response = await axios.get('/metric/metadata?endpointId=' + this.currentEndpoint.id)
|
||||
if (response && response.status === 200) {
|
||||
if (response.data.msg === 'success') {
|
||||
this.elementMetricDatas = response.data.data.list
|
||||
}
|
||||
}
|
||||
},
|
||||
getStateContent (row) {
|
||||
if (row) {
|
||||
if (row.state == 1) {
|
||||
return 'up' + '[' + this.formatUpdateTime(row.lastUpdate) + ']'
|
||||
} else {
|
||||
return 'down' + '[' + this.getStateErrorMsg(row) + ']'
|
||||
}
|
||||
}
|
||||
},
|
||||
formatUpdateTime (date) {
|
||||
const time = new Date(date)
|
||||
const hours = time.getHours() > 9 ? time.getHours() : '0' + time.getHours()
|
||||
const minutes = time.getMinutes() > 9 ? time.getMinutes() : '0' + time.getMinutes()
|
||||
|
||||
return hours + ':' + minutes
|
||||
},
|
||||
getStateErrorMsg (row) {
|
||||
const errCodes = [230009, 230010, 230011]
|
||||
if (row) {
|
||||
if (row.state == 0) {
|
||||
if (errCodes.find((item) => { return row.stateInfo.code == item })) {
|
||||
return this.$t('project.endpoint.stateInfo_' + row.stateInfo.code)
|
||||
} else {
|
||||
this.$message.error('state code error')
|
||||
return row.stateInfo.msg
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
obj: {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
handler (n) {
|
||||
if (n) {
|
||||
this.currentEndpoint = JSON.parse(JSON.stringify(n))
|
||||
this.queryEndpoint()
|
||||
}
|
||||
}
|
||||
},
|
||||
queryExpression (n, o) {
|
||||
const temp = this
|
||||
setTimeout(function () {
|
||||
temp.tableFilter()
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getPanelData()
|
||||
setTimeout(() => { this.$refs.endpointQueryTable.setHeight() }, 700)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -52,6 +52,7 @@
|
||||
:data="tableData"
|
||||
border
|
||||
v-loading="tools.loading"
|
||||
:loading="tools.loading"
|
||||
class="nz-table endpoint-table"
|
||||
:height="$tableHeight.noPagination"
|
||||
:cell-class-name="messageStyle"
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
<endpoint-table
|
||||
ref="dataTable"
|
||||
v-loading="tools.loading"
|
||||
:loading="tools.loading"
|
||||
:api="url"
|
||||
:custom-table-title="tools.customTableTitle"
|
||||
:height="subTableHeight"
|
||||
|
||||
@@ -12,10 +12,18 @@
|
||||
<template v-slot:top-tool-right>
|
||||
<el-input v-model="matchContent" class="margin-r-10" placeholder="" size="small" suffix-icon="el-icon-search" @keyup.enter.native="queryLogData()">
|
||||
<el-select slot="prepend" v-model="matchSymbol" class="symbol-select" size="small" style="width: 60px;">
|
||||
<el-option value="|="></el-option>
|
||||
<el-option value="!="></el-option>
|
||||
<el-option value="|~"></el-option>
|
||||
<el-option value="!~"></el-option>
|
||||
<el-option value="|=">
|
||||
<span style="font-family: Inter-Regular">|=</span>
|
||||
</el-option>
|
||||
<el-option value="!=">
|
||||
<span style="font-family: Inter-Regular">!=</span>
|
||||
</el-option>
|
||||
<el-option value="|~">
|
||||
<span style="font-family: Inter-Regular">|~</span>
|
||||
</el-option>
|
||||
<el-option value="!~">
|
||||
<span style="font-family: Inter-Regular">!~</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-input>
|
||||
<pick-time id="explore" ref="pickTime" v-model="filterTime" :refresh-data-func="queryLogData" :use-chart-unit="false" :use-refresh="false">
|
||||
@@ -23,8 +31,8 @@
|
||||
</pick-time>
|
||||
</template>
|
||||
<template v-slot>
|
||||
<log-tab ref="logDetail" v-loading="loading" :log-data="logData" :tab-index="9" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
|
||||
<div v-if="!logData" v-loading="loading" class="log-no-data">No Data</div>
|
||||
<log-tab ref="logDetail" v-loading="loading" :loading-bottom="endpointLoading" :log-data="logData" :tab-index="9" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
|
||||
<!-- <div v-loading="loading" v-if="!logData" style="height: 300px; width: 100%; display: flex; justify-content: center; align-items: center; color: #999;">No Data</div>-->
|
||||
</template>
|
||||
</nz-bottom-data-list>
|
||||
</template>
|
||||
@@ -55,7 +63,8 @@ export default {
|
||||
expressions: [''],
|
||||
matchSymbol: '|=',
|
||||
matchContent: '',
|
||||
loading: true
|
||||
loading: true,
|
||||
endpointLoading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -110,6 +119,11 @@ export default {
|
||||
})
|
||||
axios.all(requestArr).then(res => {
|
||||
this.logData = res.map(r => r.data)
|
||||
if (this.logData[0].result.length > 0) {
|
||||
this.endpointLoading = false
|
||||
} else {
|
||||
this.endpointLoading = true
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
<operation-log-table
|
||||
ref="dataTable"
|
||||
v-loading="tools.loading"
|
||||
:loading="tools.loading"
|
||||
:api="url"
|
||||
:custom-table-title="tools.customTableTitle"
|
||||
:height="subTableHeight"
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
<terminal-log-table
|
||||
ref="dataTable"
|
||||
v-loading="tools.loading"
|
||||
:loading="tools.loading"
|
||||
:api="url"
|
||||
:custom-table-title="tools.customTableTitle"
|
||||
:height="subTableHeight"
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
:show-all-levels="false"
|
||||
class="chart-unit"
|
||||
placeholder=""
|
||||
popper-class="prevent-clickoutside unit-pop-class right-public-box-select-top right-public-box-dropdown-top"
|
||||
popper-class="prevent-clickoutside unit-pop-class right-box-select-top right-public-box-dropdown-top"
|
||||
size="small"
|
||||
style="border-radius: 0 2px 2px 0;"
|
||||
@change="unitSelected"
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
</div>
|
||||
<i class="nz-icon nz-icon-arrow-down search-value"/>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top detail-top-search-dropdown">
|
||||
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top detail-top-search-dropdown">
|
||||
<div style="text-align: center;"><el-input style="width: calc(100% - 40px)" size="small" v-model="searchStr" @input="(val)=>{searchStrChange(val,key)}" suffix-icon="el-icon-search"/></div>
|
||||
<el-checkbox-group v-model="selectValue[item.key]">
|
||||
<el-dropdown-item v-for="(item3,index3) in item.children" :key="index3" :title="item3.name">
|
||||
@@ -53,7 +53,7 @@
|
||||
</div>
|
||||
<i class="nz-icon nz-icon-arrow-down search-value"/>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top detail-top-search-dropdown">
|
||||
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top detail-top-search-dropdown">
|
||||
<div style="text-align: center;"><el-input style="width: calc(100% - 40px)" size="small" v-model="searchStr" @input="(val)=>{searchStrChange(val,key)}" suffix-icon="el-icon-search"/></div>
|
||||
<el-checkbox-group v-model="selectValue[item.key]">
|
||||
<el-dropdown-item v-for="(item3,index3) in item.children" :key="index3" >
|
||||
@@ -85,7 +85,7 @@
|
||||
</div>
|
||||
<i class="nz-icon nz-icon-arrow-down search-value"/>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top detail-top-search-dropdown">
|
||||
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top detail-top-search-dropdown">
|
||||
<div style="text-align: center;"><el-input style="width: calc(100% - 40px)" size="small" v-model="searchStr" @input="(val)=>{searchStrChange(val,key)}" suffix-icon="el-icon-search"/></div>
|
||||
<el-checkbox-group v-model="selectValue[item.key]">
|
||||
<el-dropdown-item v-for="(item3,index3) in item.children" :key="index3" >
|
||||
|
||||
@@ -24,8 +24,8 @@
|
||||
:class="item.id === detailViewRightObj.id ? 'selected' : ''"
|
||||
@click="detailViewRightShow(item)">
|
||||
<el-popover
|
||||
placement="right"
|
||||
popper-class="alert-message-tooltip"
|
||||
placement="right-start"
|
||||
popper-class="alert-message-tooltip alert-rule-detail"
|
||||
style="position: relative"
|
||||
@show="alertMessageHover(item, true)"
|
||||
@hide="alertMessageHover(item, false)"
|
||||
@@ -227,3 +227,11 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.alert-rule-detail {
|
||||
left: 440px !important;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
@import '../detailList';
|
||||
</style>
|
||||
|
||||
@@ -27,11 +27,7 @@
|
||||
@mouseleave="labelHover(item, 'asset', false)">
|
||||
<div class="detail-row-info">
|
||||
<div class="asset-manageIp">
|
||||
<span v-if="item.pingInfo" >
|
||||
<span :class="{'active-icon green-bg':item.pingInfo.status == 1,'active-icon red-bg':item.pingInfo.status == 0}"></span>
|
||||
</span>
|
||||
<span v-else style="display: inline-block;width: 13px">
|
||||
</span>
|
||||
<i class="nz-icon nz-icon-overview-alert" :class="item.alertNum>0?'colorEF7458':'color23BF9A'"/>
|
||||
{{item.name}}
|
||||
</div>
|
||||
<div class="asset-name" :title="item.manageIp">{{item.manageIp}}</div>
|
||||
@@ -40,6 +36,7 @@
|
||||
v-if="item && item.loading"
|
||||
:id="item.id"
|
||||
:that="item"
|
||||
:detail-list="true"
|
||||
:type="'asset'"
|
||||
></alertLabel>
|
||||
</li>
|
||||
@@ -174,3 +171,7 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../detailList';
|
||||
</style>
|
||||
|
||||
@@ -38,6 +38,7 @@
|
||||
v-if="item && item.loading"
|
||||
:id="item.id"
|
||||
:that="item"
|
||||
:detail-list="true"
|
||||
:type="'dc'"
|
||||
></alertLabel>
|
||||
</li>
|
||||
@@ -57,7 +58,7 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tableTitle: [ // 原始table列
|
||||
tableTitle: [
|
||||
{
|
||||
label: 'ID',
|
||||
prop: 'id',
|
||||
@@ -65,36 +66,57 @@ export default {
|
||||
width: 80,
|
||||
sortable: 'custom'
|
||||
}, {
|
||||
label: this.$t('project.module.moduleName'),
|
||||
label: this.$t('overall.name'),
|
||||
prop: 'name',
|
||||
show: true,
|
||||
minWidth: 200,
|
||||
sortable: 'custom'
|
||||
}, {
|
||||
label: this.$t('project.project.projectName'),
|
||||
prop: 'project',
|
||||
label: this.$t('asset.location'),
|
||||
prop: 'location',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('config.dc.cabinetNum'),
|
||||
prop: 'cabinetNum',
|
||||
show: true,
|
||||
width: 200,
|
||||
sortable: 'custom'
|
||||
},
|
||||
{
|
||||
label: this.$t('project.endpoint.endpoint'),
|
||||
prop: 'endpointNum',
|
||||
show: true,
|
||||
width: 200,
|
||||
minWidth: 100,
|
||||
sortable: 'custom'
|
||||
}, {
|
||||
label: this.$t('project.module.alerts'),
|
||||
prop: 'alertNum',
|
||||
label: this.$t('config.dc.assets'),
|
||||
prop: 'assetNum',
|
||||
show: true,
|
||||
width: 200,
|
||||
minWidth: 90,
|
||||
sortable: 'custom'
|
||||
},
|
||||
{
|
||||
label: this.$t('overall.remark'),
|
||||
prop: 'remark',
|
||||
}, {
|
||||
label: this.$t('config.dc.alert'),
|
||||
prop: 'alertNum',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('asset.tel'),
|
||||
prop: 'tel',
|
||||
show: false,
|
||||
minWidth: 100
|
||||
}, {
|
||||
label: this.$t('asset.principal'),
|
||||
prop: 'principal',
|
||||
show: false,
|
||||
minWidth: 120
|
||||
}, {
|
||||
label: this.$t('config.dc.longitude'),
|
||||
prop: 'longitude',
|
||||
show: false,
|
||||
minWidth: 100
|
||||
}, {
|
||||
label: this.$t('config.dc.latitude'),
|
||||
prop: 'latitude',
|
||||
show: false,
|
||||
minWidth: 100
|
||||
}, {
|
||||
label: this.$t('config.dc.state'),
|
||||
prop: 'state',
|
||||
show: true,
|
||||
minWidth: 150
|
||||
minWidth: 100,
|
||||
sortable: 'custom'
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -133,3 +155,7 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../detailList';
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
.order-box{
|
||||
display: flex;
|
||||
height:40px;
|
||||
padding: 0 15px;
|
||||
line-height: 40px;
|
||||
align-items: center;
|
||||
/*.detail-select{*/
|
||||
/* height: 30px;*/
|
||||
/* line-height: 30px;*/
|
||||
/* flex: 1;*/
|
||||
/* /deep/ .el-input--small{*/
|
||||
/* height: 30px;*/
|
||||
/* line-height: 30px;*/
|
||||
/* background-color: rgba(9,30,66,0.08);*/
|
||||
/* border: none;*/
|
||||
/* color: #344563;*/
|
||||
/* input{*/
|
||||
/* height: 30px;*/
|
||||
/* line-height: 30px;*/
|
||||
/* background-color: rgba(9,30,66,0.08);*/
|
||||
/* border: none;*/
|
||||
/* color: #344563;*/
|
||||
/* }*/
|
||||
/* }*/
|
||||
/*}*/
|
||||
/*.detail-select:hover{*/
|
||||
/* /deep/ .el-input--small{*/
|
||||
/* input{*/
|
||||
/* background-color: rgba(9,30,66,0.13);*/
|
||||
/* }*/
|
||||
/* }*/
|
||||
/*}*/
|
||||
/*.detail-button{*/
|
||||
/* height: 28px;*/
|
||||
/* line-height: 28px;*/
|
||||
/* background-color: rgba(9,30,66,0.08);*/
|
||||
/* border: none;*/
|
||||
/* .nz-icon{*/
|
||||
/* color: #344563;*/
|
||||
/* }*/
|
||||
/*}*/
|
||||
/*.detail-button:hover{*/
|
||||
/* background-color: rgba(9,30,66,0.13);*/
|
||||
/*}*/
|
||||
}
|
||||
.detail-row-box{
|
||||
height: calc(100% - 40px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.detail-row{
|
||||
width: 245px;
|
||||
padding: 0px 0 0px 15px;
|
||||
height: 60px;
|
||||
border-bottom: 1px solid #E7EAED;
|
||||
cursor: pointer;
|
||||
}
|
||||
.detail-row:last-of-type{
|
||||
border-bottom: none
|
||||
}
|
||||
.detail-row-info{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: calc(100% - 15px);
|
||||
justify-content:center;
|
||||
flex-direction: column;
|
||||
> div{
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.asset-manageIp{
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
font-weight: 400;
|
||||
.nz-icon{
|
||||
font-size: 14px;
|
||||
padding-right: 2px;
|
||||
}
|
||||
}
|
||||
.asset-name {
|
||||
padding-left: 22px;
|
||||
width: calc(100% - 22px);
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.selected{
|
||||
background: #FFFBF6;
|
||||
}
|
||||
.colorEF7458{
|
||||
color: #EF7458;
|
||||
}
|
||||
.color23BF9A{
|
||||
color: #23BF9A;
|
||||
}
|
||||
.colorFA901C{
|
||||
color: #fa901c;
|
||||
}
|
||||
@@ -38,6 +38,7 @@
|
||||
v-if="item && item.loading"
|
||||
:id="item.id"
|
||||
:that="item"
|
||||
:detail-list="true"
|
||||
:type="'endpoint'"
|
||||
></alertLabel>
|
||||
</li>
|
||||
@@ -151,3 +152,7 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../detailList';
|
||||
</style>
|
||||
|
||||
@@ -38,6 +38,7 @@
|
||||
v-if="item && item.loading"
|
||||
:id="item.id"
|
||||
:that="item"
|
||||
:detail-list="true"
|
||||
:type="'module'"
|
||||
></alertLabel>
|
||||
</li>
|
||||
@@ -134,3 +135,7 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../detailList';
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div class="detail-left-box">
|
||||
<div class="order-box">
|
||||
<el-select v-model="orderBy" size="small" :placeholder="$t('asset.detail.orderBy')" popper-class="right-box-select-top" class="detail-select">
|
||||
<el-option
|
||||
v-for="item in tableTitle"
|
||||
v-if="item.sortable==='custom'"
|
||||
:key="item.prop"
|
||||
:label="$t('asset.detail.orderByLabel',{label:item.label})"
|
||||
:value="item.prop">
|
||||
{{item.label}}
|
||||
</el-option>
|
||||
</el-select>
|
||||
<button @click="orderTypeChange" size="small" class="detail-button top-tool-btn table-column-setting margin-l-10">
|
||||
<i class="nz-icon nz-icon-arrow-up1" v-if="orderType=='ascending'" />
|
||||
<i class="nz-icon nz-icon-arrow-down2" v-if="orderType=='descending'" />
|
||||
</button>
|
||||
</div>
|
||||
<ul class="detail-row-box" ref="dataTable">
|
||||
<li
|
||||
v-for="(item,index) in tableData"
|
||||
:key="index"
|
||||
class="detail-row"
|
||||
:class="item.id === detailViewRightObj.id ? 'selected' : ''"
|
||||
@click="detailViewRightShow(item)"
|
||||
>
|
||||
<div class="detail-row-info">
|
||||
<div class="asset-manageIp">
|
||||
<el-tooltip effect="light" placement="right">
|
||||
<div slot="content">
|
||||
{{getStatusText(item.status)}}
|
||||
</div>
|
||||
<span><i class="nz-icon" :class="statusClass(item.status)"/></span>
|
||||
</el-tooltip>
|
||||
<span>{{getRemoteText(item)}}</span>
|
||||
</div>
|
||||
<div class="asset-name">
|
||||
<span>{{item.username?item.username:'-'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import detailViewLeftMixin from '@/components/common/mixin/detailViewLeftMixin'
|
||||
import alertLabel from '@/components/common/alert/alertLabel'
|
||||
import { terminalLog } from '@/components/common/js/constants'
|
||||
import {calcDurationByStringTimeB} from "@/components/common/js/tools";
|
||||
export default {
|
||||
name: 'terminalLogDetail',
|
||||
mixins: [detailViewLeftMixin],
|
||||
components: {
|
||||
alertLabel
|
||||
},
|
||||
computed: {
|
||||
getStatusText () {
|
||||
return function (status) {
|
||||
return terminalLog.status[status]
|
||||
}
|
||||
},
|
||||
getRemoteText () {
|
||||
return function (record) {
|
||||
return `${record.loginUser}@${record.host}:${record.port}`
|
||||
}
|
||||
},
|
||||
statusClass () {
|
||||
return function (status) {
|
||||
switch (status) {
|
||||
case 0:
|
||||
return 'nz-icon-connecting color23bf9a'
|
||||
case 1:
|
||||
return 'nz-icon-failed colorffa416'
|
||||
case 2:
|
||||
return 'nz-icon-over color999999'
|
||||
case 3:
|
||||
return 'nz-icon-stop colorec7f66'
|
||||
case 4:
|
||||
return 'nz-icon-unknown-error color535b64'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tableTitle: [
|
||||
{
|
||||
label: this.$t('config.terminallog.id'),
|
||||
prop: 'id',
|
||||
show: true,
|
||||
width: 80,
|
||||
sortable: 'custom'
|
||||
}, {
|
||||
label: this.$t('config.terminallog.SessionID'),
|
||||
prop: 'uuid',
|
||||
minWidth: 200,
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('config.terminallog.username'),
|
||||
prop: 'username',
|
||||
minWidth: 200,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: this.$t('config.terminallog.source'),
|
||||
prop: 'sourceIp',
|
||||
minWidth: 115,
|
||||
show: true,
|
||||
sortable: 'custom'
|
||||
},
|
||||
{
|
||||
label: this.$t('config.terminallog.remote'),
|
||||
prop: 'remote',
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: this.$t('config.terminallog.protocol'),
|
||||
prop: 'protocol',
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: this.$t('config.terminallog.startTime'),
|
||||
prop: 'startTime',
|
||||
minWidth: 100,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: this.$t('config.terminallog.duration'),
|
||||
prop: 'duration',
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: this.$t('config.terminallog.authtype'),
|
||||
prop: 'authType',
|
||||
minWidth: 100,
|
||||
show: false
|
||||
},
|
||||
{
|
||||
label: this.$t('config.terminallog.status'), // killusername鼠标悬停形式
|
||||
prop: 'state',
|
||||
show: true,
|
||||
width: 150,
|
||||
sortable: 'custom'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// label 鼠标划入
|
||||
labelHover (item, type, loading, e) {
|
||||
if (e) {
|
||||
const dom = e.currentTarget
|
||||
const position = dom.getBoundingClientRect()
|
||||
this.$set(item, 'position', position)
|
||||
}
|
||||
this.$set(item, 'loading', loading)
|
||||
// this.$set(this.tableData,index,item);// 调用父组件
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../detailList';
|
||||
</style>
|
||||
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div class="detail-left-box">
|
||||
<div class="order-box">
|
||||
<el-select v-model="orderBy" size="small" :placeholder="$t('asset.detail.orderBy')" popper-class="right-box-select-top" class="detail-select">
|
||||
<el-option
|
||||
v-for="item in tableTitle"
|
||||
v-if="item.sortable==='custom'"
|
||||
:key="item.prop"
|
||||
:label="$t('asset.detail.orderByLabel',{label:item.label})"
|
||||
:value="item.prop">
|
||||
{{item.label}}
|
||||
</el-option>
|
||||
</el-select>
|
||||
<button @click="orderTypeChange" size="small" class="detail-button top-tool-btn table-column-setting margin-l-10">
|
||||
<i class="nz-icon nz-icon-arrow-up1" v-if="orderType=='ascending'" />
|
||||
<i class="nz-icon nz-icon-arrow-down2" v-if="orderType=='descending'" />
|
||||
</button>
|
||||
</div>
|
||||
<ul class="detail-row-box" ref="dataTable">
|
||||
<li
|
||||
v-for="(item,index) in tableData"
|
||||
:key="index"
|
||||
class="detail-row"
|
||||
:class="item.id === detailViewRightObj.id ? 'selected' : ''"
|
||||
@click="detailViewRightShow(item)"
|
||||
>
|
||||
<div class="detail-row-info">
|
||||
<div class="asset-manageIp">
|
||||
<span class="flex-align-center">
|
||||
<span v-if="item.status" >
|
||||
<span :class="{'active-icon green-bg':item.status == 1,'active-icon gray-bg':item.status == 0}"></span>
|
||||
</span>
|
||||
<span v-else style="display: inline-block;width: 13px"></span>
|
||||
<span class="user-name-top">{{item.name}}</span>
|
||||
<el-tag size="mini" v-if="mfaEnable == '1' || item.mfaLevel > 0" style="margin-left: 5px">2FA</el-tag>
|
||||
</span>
|
||||
</div>
|
||||
<div class="asset-name">
|
||||
<span>@{{item.username}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import detailViewLeftMixin from '@/components/common/mixin/detailViewLeftMixin'
|
||||
import alertLabel from '@/components/common/alert/alertLabel'
|
||||
import { terminalLog } from '@/components/common/js/constants'
|
||||
export default {
|
||||
name: 'userDetail',
|
||||
mixins: [detailViewLeftMixin],
|
||||
components: {
|
||||
alertLabel
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tableTitle: [ // 原始table列
|
||||
{
|
||||
label: 'ID',
|
||||
prop: 'id',
|
||||
show: true,
|
||||
width: 80,
|
||||
sortable: 'custom'
|
||||
}, {
|
||||
label: this.$t('config.user.name'),
|
||||
prop: 'name',
|
||||
show: true,
|
||||
width: 600,
|
||||
sortable: 'custom'
|
||||
},
|
||||
// {
|
||||
// label: this.$t('config.user.username'),
|
||||
// prop: 'username',
|
||||
// show: true,
|
||||
// width: 150
|
||||
// },
|
||||
{
|
||||
label: this.$t('config.user.roles'),
|
||||
prop: 'roles',
|
||||
show: true,
|
||||
width: 150
|
||||
}, {
|
||||
label: 'E-mail',
|
||||
prop: 'email',
|
||||
show: true,
|
||||
minWidth: 150
|
||||
}, {
|
||||
label: this.$t('config.user.lastLoginTime'),
|
||||
prop: 'lastLoginTime',
|
||||
show: true,
|
||||
width: 200
|
||||
}, {
|
||||
label: this.$t('config.user.lastLoginIp'),
|
||||
prop: 'lastLoginIp',
|
||||
show: true,
|
||||
width: 150
|
||||
}, {
|
||||
label: this.$t('config.user.source'),
|
||||
prop: 'source',
|
||||
show: true,
|
||||
width: 150
|
||||
}, {
|
||||
label: this.$t('config.user.language'),
|
||||
prop: 'lang',
|
||||
show: true,
|
||||
width: 150
|
||||
}, {
|
||||
label: this.$t('config.user.enable'),
|
||||
prop: 'status',
|
||||
show: true,
|
||||
width: 100
|
||||
}
|
||||
],
|
||||
mfaEnable: localStorage.getItem('nz-mfa-enable')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// label 鼠标划入
|
||||
labelHover (item, type, loading, e) {
|
||||
if (e) {
|
||||
const dom = e.currentTarget
|
||||
const position = dom.getBoundingClientRect()
|
||||
this.$set(item, 'position', position)
|
||||
}
|
||||
this.$set(item, 'loading', loading)
|
||||
// this.$set(this.tableData,index,item);// 调用父组件
|
||||
},
|
||||
getStatusText () {
|
||||
return function (status) {
|
||||
return terminalLog.status[status]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../detailList';
|
||||
</style>
|
||||
@@ -17,12 +17,13 @@
|
||||
<el-dropdown
|
||||
type="primary"
|
||||
v-if="showLayout.indexOf('detailViewSet') > -1"
|
||||
trigger="click"
|
||||
@command="changeDetailType">
|
||||
<button class="top-tool-btn table-column-setting"
|
||||
type="button">
|
||||
<i class="nz-icon nz-icon-detail-view" />
|
||||
</button>
|
||||
<el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-item :command="'list'" :class="detailType === 'list' ? 'active' : ''">{{$t('asset.detail.list')}}</el-dropdown-item>
|
||||
<el-dropdown-item :command="'view'" :class="detailType === 'view' ? 'active' : ''">{{$t('asset.detail.detail')}}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
@@ -31,7 +32,7 @@
|
||||
<!-- 顶部分页组件，当打开底部上滑框时出现 -->
|
||||
<!-- <div v-if="showLayout.indexOf('pagination') > -1" class="pagination-top pagination-top-hide display-none"></div>-->
|
||||
</div>
|
||||
<div :style="{ height: nzTableHeight }" class="nz-detail-view">
|
||||
<div :style="{ height: nzTableHeight }" class="nz-detail-view" :class="dataLength?'':'nz-detail-view-no-data'">
|
||||
<div class="nz-detail-view-left" v-if="dataLength">
|
||||
<slot name="nz-detail-view-list"></slot>
|
||||
<div v-if="showLayout.indexOf('pagination') > -1" class="nz-detail-view-pagination">
|
||||
@@ -39,7 +40,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="no-data">
|
||||
No Data
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#nz-icon-no-data-list"></use>
|
||||
</svg>
|
||||
<div class="table-no-data__title">No results found</div>
|
||||
</div>
|
||||
<div class="nz-detail-view-right" v-if="detailViewRightObj">
|
||||
<detailViewRight
|
||||
@@ -178,3 +182,12 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './detailView.scss';
|
||||
.active{
|
||||
color: #fa901c;
|
||||
}
|
||||
.nz-detail-view-no-data{
|
||||
border-top: 1px solid #E7EAED;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -54,9 +54,7 @@ export default {
|
||||
watch: {
|
||||
from: {
|
||||
immediate: true,
|
||||
handler (n) {
|
||||
console.log(n === fromRoute.asset)
|
||||
}
|
||||
handler (n) {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -296,8 +296,75 @@ export default {
|
||||
this.targetTab = 'alertRuleAlertMessage'
|
||||
} else if (this.from === fromRoute.dc) {
|
||||
this.targetTab = 'cabinet'
|
||||
} else if (this.from === fromRoute.terminalLog) {
|
||||
this.targetTab = 'cmdTab'
|
||||
} else if (this.from === fromRoute.user) {
|
||||
this.targetTab = 'operationLogTab'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.detail-view-right-top{
|
||||
height: 60px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E7EAED;
|
||||
margin-bottom: 10px
|
||||
}
|
||||
.sub-box{
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sub-list__tabs {
|
||||
flex: 1;
|
||||
background-color: white;
|
||||
/*height: calc(100% - 82px);*/
|
||||
height: calc(100% - 12px);
|
||||
border: 1px solid #E7EAED;
|
||||
&>div {
|
||||
height: 100%;
|
||||
&>.nz-table2 {
|
||||
height: calc(100% - 92px);
|
||||
padding: 20px 20px 0;
|
||||
}
|
||||
}
|
||||
.chart-list{
|
||||
.nz-table2 {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/ .bottom-data-list .sub-container{
|
||||
height: calc(100% - 45px);
|
||||
position: relative;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.sub-box /deep/ .top-tools.top-tools--sub{
|
||||
border: none;
|
||||
padding: 0 15px 0px 0px;
|
||||
margin-right: 15px;
|
||||
margin-left: 20px;
|
||||
border-bottom: 1px solid #E7EAED;
|
||||
}
|
||||
.sub-box /deep/ .list-width {
|
||||
padding: 0;
|
||||
}
|
||||
.sub-box /deep/ .nz-table2{
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
}
|
||||
.sub-box /deep/ .table-list{
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.sub-box /deep/ .pagination-bottom {
|
||||
bottom: -3px;
|
||||
}
|
||||
.sub-box /deep/ .sub-list-tab{
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<script>
|
||||
import Emitter from 'pl-table/src/mixins/emitter'
|
||||
import Focus from 'pl-table/src/mixins/focus'
|
||||
import Locale from 'pl-table/src/mixins/locale'
|
||||
import Locale from 'element-ui/src/mixins/locale'
|
||||
import ElInput from 'pl-table/package/input'
|
||||
import ElSelectMenu from 'pl-table/package/select/src/select-dropdown.vue'
|
||||
import ElOption from 'pl-table/package/select/src/option.vue'
|
||||
|
||||
@@ -231,7 +231,7 @@ export const bottomBoxWindow = {
|
||||
fullScreen (vm) {
|
||||
window.resizing = true
|
||||
const contentRightDom = document.querySelector('.list-page') // 右侧内容区
|
||||
const contentRightHeight = contentRightDom.offsetHeight// 可视高度
|
||||
const contentRightHeight = contentRightDom.offsetHeight - 9// 可视高度
|
||||
vm.bottomBox.isFullScreen = true
|
||||
// 主列表
|
||||
vm.bottomBox.mainListHeight = document.querySelector('.main-list-with-sub').offsetHeight // 记录全屏前主列表的高度
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<template>
|
||||
<el-checkbox-group v-if="data.type === 'checkBox'" ref="searchContent" v-model="selectValue[data.key]" @change="selectValue.change === 0 && selectValue.change++">
|
||||
<template v-for="(item, j) in data.children">
|
||||
<el-checkbox v-show="j < data.index || data.showMore" :key="j" :label="item.value">{{item.key || item.name || item.label}}</el-checkbox>
|
||||
<el-checkbox v-show="j < data.index || data.showMore" :key="j" :label="item.value" :title="item.key || item.name || item.label">{{item.key || item.name || item.label}}</el-checkbox>
|
||||
</template>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
@@ -89,7 +89,7 @@ export default {
|
||||
let top
|
||||
switch (type) {
|
||||
case 'checkBox': {
|
||||
top = 4
|
||||
top = 8
|
||||
break
|
||||
}
|
||||
case 'dropdownCheckBox': {
|
||||
@@ -317,7 +317,7 @@ export default {
|
||||
this.$set(item, 'isFocus', isFocus)
|
||||
},
|
||||
needMore (type, item, expand) {
|
||||
const contentWidth = this.$refs.searchContentBox[0].offsetWidth - 210
|
||||
const contentWidth = this.$refs.searchContentBox[0].offsetWidth - 240
|
||||
// 窗口尺寸没改变，则只重排当前type
|
||||
if (type && contentWidth === this.contentWidth) {
|
||||
this.titleSearchListCopy[type].width = 0
|
||||
|
||||
@@ -27,6 +27,12 @@ const cn = {
|
||||
unlocked: '已解锁',
|
||||
dashboard: '仪表盘',
|
||||
dc: '数据中心',
|
||||
manageIp: '主机IP',
|
||||
cabinet: '机柜',
|
||||
brand: '品牌',
|
||||
model: '型号',
|
||||
location: '位置',
|
||||
module: '模块',
|
||||
project: '系统',
|
||||
monitor: '监控',
|
||||
alert: '告警',
|
||||
@@ -116,7 +122,12 @@ const cn = {
|
||||
failed: '失败',
|
||||
success: '成功',
|
||||
failedDetail: '失败详情',
|
||||
line: '第{0}行:'
|
||||
line: '第{0}行:',
|
||||
successNum: '{successNum} 条记录导入成功',
|
||||
failedNum: '{total} 条记录中有 {failedNum} 条导入失败',
|
||||
successfully: '导入成功完成!',
|
||||
imported: '已导入',
|
||||
records: '条记录'
|
||||
},
|
||||
reset: '重置',
|
||||
submit: '保存',
|
||||
@@ -131,11 +142,11 @@ const cn = {
|
||||
stack: '查看堆叠图',
|
||||
stackBack: '返回原始图'
|
||||
},
|
||||
SyncSave: '保存同时更新 Assets',
|
||||
SyncSave: '保存同时更新资产',
|
||||
copySuccess: '复制成功',
|
||||
parent: '父级 asset',
|
||||
children: '子级 asset',
|
||||
assetSubTab: '子级 asset',
|
||||
parent: '父级资产',
|
||||
children: '子级资产',
|
||||
assetSubTab: '子级资产',
|
||||
moreOption: '更多选项',
|
||||
copy: '复制',
|
||||
duplicate: '复制',
|
||||
@@ -159,6 +170,9 @@ const cn = {
|
||||
unusual: '不正常',
|
||||
AuthenticationFailed: '认证失败',
|
||||
clearAllSelect: '清除选择的内容',
|
||||
disabled: '已禁用',
|
||||
enabled: '启用',
|
||||
close: '关闭'
|
||||
},
|
||||
setup: {
|
||||
step0: '欢迎',
|
||||
@@ -197,9 +211,9 @@ const cn = {
|
||||
username: '用户名',
|
||||
pin: '密码',
|
||||
alertPath: '网站URL',
|
||||
alertPrefix: 'Alert prefix',
|
||||
haMode: 'HA mode',
|
||||
haVip: 'Virtual IP',
|
||||
alertPrefix: '警报前缀',
|
||||
haMode: 'HA 模式',
|
||||
haVip: '虚拟的 IP',
|
||||
next: '下一步',
|
||||
back: '返回',
|
||||
finish: '完成',
|
||||
@@ -226,14 +240,14 @@ const cn = {
|
||||
filePath: '文件路径',
|
||||
closeTip: '是否断开所有连接，关闭窗口？',
|
||||
remember: '记住我的决定',
|
||||
protocol: 'Protocol',
|
||||
authType: 'Auth type',
|
||||
protocol: '协议',
|
||||
authType: '认证类型',
|
||||
host: 'Host',
|
||||
port: 'Port',
|
||||
authUsername: 'Username',
|
||||
authPin: 'Password',
|
||||
authUserTip: 'Username prompt',
|
||||
authPinTip: 'Password prompt',
|
||||
authUsername: '用户名',
|
||||
authPin: '密码',
|
||||
authUserTip: '用户名提示',
|
||||
authPinTip: '密码提示',
|
||||
authPriKey: 'Key'
|
||||
},
|
||||
pageSize: '条/页',
|
||||
@@ -242,9 +256,9 @@ const cn = {
|
||||
pin: '密码',
|
||||
login: '登录',
|
||||
verify: '验证',
|
||||
verifyDialogTitle: 'Two Factor Authentication Set Up',
|
||||
verifyTitle: 'Two-Factor Authentication',
|
||||
verifyContent: 'Enter the code from the two -factor app on your mobile device. If you\' ve lost your device, you may enter one of your recovery codes.',
|
||||
verifyDialogTitle: '双因子认证设置',
|
||||
verifyTitle: '双因子认证',
|
||||
verifyContent: '在您的移动设备上输入来自双因子应用程序的代码。 如果您丢失了设备，您可以输入您的恢复代码之一。',
|
||||
verifyPlaceholder: '验证码',
|
||||
bindFail: '绑定失败'
|
||||
},
|
||||
@@ -276,9 +290,10 @@ const cn = {
|
||||
chartName: '图表名称',
|
||||
type: '类型',
|
||||
url: 'URL',
|
||||
statistics: 'Statistics',
|
||||
name: '名称',
|
||||
statistics: '统计数据',
|
||||
sync: '同步到设备',
|
||||
last: 'Last',
|
||||
last: '最后的',
|
||||
threshold: '阈值',
|
||||
thresholds: '阈值',
|
||||
group: '组',
|
||||
@@ -304,7 +319,7 @@ const cn = {
|
||||
staticTip: '双大括号中的内容将会在asset页面被替换'
|
||||
},
|
||||
singleStat: {
|
||||
label: 'Single value'
|
||||
label: '单值'
|
||||
},
|
||||
pie: {
|
||||
label: '饼图'
|
||||
@@ -364,26 +379,26 @@ const cn = {
|
||||
state: '状态'
|
||||
},
|
||||
valMapping: {
|
||||
name: 'Value mapping',
|
||||
name: '值映射',
|
||||
from: 'From',
|
||||
to: 'To',
|
||||
text: 'Text',
|
||||
text: '文本',
|
||||
value: 'Value',
|
||||
range: 'Range'
|
||||
range: '范围'
|
||||
},
|
||||
legendValue: '图例选项',
|
||||
content: '内容',
|
||||
tooltip: 'Tooltip',
|
||||
tooltip: '工具提示',
|
||||
displayChart: '图表',
|
||||
aggregation: 'Aggregation',
|
||||
aggregation: '聚合',
|
||||
varType: '变量类型',
|
||||
pid: 'Chart 模板',
|
||||
selectAsset: '请选择Asset',
|
||||
pid: '图表模板',
|
||||
selectAsset: '请选择资产',
|
||||
selectEndpoint: '请选择Endpoint',
|
||||
time: 'Time',
|
||||
descending: 'Descending',
|
||||
wrapLines: 'Wrap lines',
|
||||
limit: 'Limit'
|
||||
time: '时间',
|
||||
descending: '降序',
|
||||
wrapLines: '换行',
|
||||
limit: '限制'
|
||||
},
|
||||
chartTableColumn: {
|
||||
metric: '指标',
|
||||
@@ -500,8 +515,8 @@ const cn = {
|
||||
dc: '数据中心'
|
||||
},
|
||||
ok: 'OK',
|
||||
alarm: 'Alarm',
|
||||
total: 'Total'
|
||||
alarm: '警报',
|
||||
total: '全部的'
|
||||
},
|
||||
project: {
|
||||
project: '系统',
|
||||
@@ -649,7 +664,7 @@ const cn = {
|
||||
sshAccount: 'SSH账号',
|
||||
protocol: '协议',
|
||||
sshProtocol: 'SSH',
|
||||
telnetProtocol: 'Telnet',
|
||||
telnetProtocol: '远程登录',
|
||||
userTip: '用户名提示',
|
||||
pinTip: '密码提示',
|
||||
reloginpinTip: 'RELOGIN提示',
|
||||
@@ -725,6 +740,7 @@ const cn = {
|
||||
user: {
|
||||
userList: '用户列表',
|
||||
user: '用户',
|
||||
state: '状态',
|
||||
name: '姓名', // "用户"
|
||||
username: '登录名', // 登录名
|
||||
roles: '角色',
|
||||
@@ -798,12 +814,12 @@ const cn = {
|
||||
checkTime: '检查时间',
|
||||
dataCenter: '数据中心',
|
||||
agent: {
|
||||
agent: 'Agent',
|
||||
title: '下载Agent',
|
||||
agent: '代理',
|
||||
title: '下载代理',
|
||||
download: '下载',
|
||||
osType: 'OS 类型',
|
||||
autoScript: '自动安装脚本',
|
||||
type: 'Agent类型'
|
||||
type: '代理类型'
|
||||
}
|
||||
},
|
||||
agent: {
|
||||
@@ -835,9 +851,9 @@ const cn = {
|
||||
authtype: '认证方式',
|
||||
statusItem: {
|
||||
connecting: '连接中',
|
||||
connectionFailed: '连接失败',
|
||||
connectionFailed: '发送失败',
|
||||
over: '已结束',
|
||||
kickedOut: '被踢出',
|
||||
kickedOut: '强制退出',
|
||||
unknownError: '未知错误'
|
||||
},
|
||||
option: '操作',
|
||||
@@ -892,7 +908,8 @@ const cn = {
|
||||
loginUser: '登陆用户',
|
||||
sourceIp: '源 IP',
|
||||
sourceUser: '源用户',
|
||||
SessionId: '会话 ID'
|
||||
SessionId: '会话 ID',
|
||||
stop: '停止'
|
||||
},
|
||||
dc: {
|
||||
dc: '数据中心',
|
||||
@@ -954,16 +971,16 @@ const cn = {
|
||||
params: '请求参数',
|
||||
state: '请求结果',
|
||||
operations: {
|
||||
add: 'add',
|
||||
query: 'query',
|
||||
update: 'update',
|
||||
add: '添加',
|
||||
query: '询问',
|
||||
update: '更新',
|
||||
import: 'import',
|
||||
export: 'export',
|
||||
delete: 'delete',
|
||||
reset: 'reset',
|
||||
unknown: 'unknown',
|
||||
login: 'login',
|
||||
logout: 'logout'
|
||||
delete: '删除',
|
||||
reset: '重启',
|
||||
unknown: '未知',
|
||||
login: '登陆',
|
||||
logout: '登出'
|
||||
},
|
||||
response: '响应'
|
||||
},
|
||||
@@ -1039,21 +1056,21 @@ const cn = {
|
||||
monitor: '监控',
|
||||
metricsTitle: '指标配置',
|
||||
logsTitle: '日志配置',
|
||||
alertApi: 'Alert api',
|
||||
alertApi: '告警 api',
|
||||
prometheusFederation: 'Federation',
|
||||
asset_ping_from: 'Ping from',
|
||||
metrics_storage_retention: '保存天数',
|
||||
metrics_storage_type: '保存模式',
|
||||
metrics_storage_s3_endpoint: 'Endpoint',
|
||||
metrics_storage_s3_bucket: 'Bucket name',
|
||||
metrics_storage_s3_access_key: 'Access key',
|
||||
metrics_storage_s3_secret_access_key: 'Secret key',
|
||||
metrics_storage_s3_access_key: '访问密钥',
|
||||
metrics_storage_s3_secret_access_key: '密钥',
|
||||
logs_storage_retention: '保存天数',
|
||||
logs_storage_type: '保存模式',
|
||||
logs_storage_s3_endpoint: 'Endpoint',
|
||||
logs_storage_s3_bucket: 'Bucket name',
|
||||
logs_storage_s3_access_key: 'Access key',
|
||||
logs_storage_s3_secret_access_key: 'Secret key',
|
||||
logs_storage_s3_access_key: '访问密钥',
|
||||
logs_storage_s3_secret_access_key: '密钥',
|
||||
logs_query_range_default_limit: '查询最大条数',
|
||||
local: '本地文件存储',
|
||||
s3: 'S3对象存储'
|
||||
@@ -1082,14 +1099,14 @@ const cn = {
|
||||
terminal: '终端',
|
||||
terminalNum: '最大终端数量',
|
||||
timeout: '超时时间',
|
||||
userTip: 'Telnet 用户名提示',
|
||||
pinTip: 'Telnet 密码提示',
|
||||
userTip: '远程登陆用户名提示',
|
||||
pinTip: '远程登陆密码提示',
|
||||
localRetention: '本地存储'
|
||||
},
|
||||
ldap: {
|
||||
ldap: 'LDAP',
|
||||
address: 'LDAP地址',
|
||||
dn: 'Bind DN',
|
||||
dn: '绑定 DN',
|
||||
pin: '密码',
|
||||
ou: '用户OU',
|
||||
ouTip: '使用符号 "|" 分隔OU',
|
||||
@@ -1103,7 +1120,7 @@ const cn = {
|
||||
link: {
|
||||
link: '链接',
|
||||
name: '名称',
|
||||
url: 'Url',
|
||||
url: 'URl',
|
||||
operation: '操作',
|
||||
add: '添加',
|
||||
update: '更新',
|
||||
@@ -1233,8 +1250,8 @@ const cn = {
|
||||
},
|
||||
chartTemp: {
|
||||
chartTemp: '图表模板',
|
||||
type: 'Type',
|
||||
varType: 'Variable type'
|
||||
type: '类型',
|
||||
varType: '变量类型'
|
||||
}
|
||||
},
|
||||
alert: {
|
||||
@@ -1253,6 +1270,10 @@ const cn = {
|
||||
notify: '通知', // "通知方式"
|
||||
startAt: '开始时间',
|
||||
endAt: '结束时间',
|
||||
name: '名称',
|
||||
state: '状态',
|
||||
type: '类型',
|
||||
alertNum: '告警数量',
|
||||
list: {
|
||||
linked: '关联',
|
||||
type: '类别',
|
||||
@@ -1297,17 +1318,20 @@ const cn = {
|
||||
alertNumTrend: '告警数量趋势',
|
||||
affectEntity: '影响'
|
||||
},
|
||||
timeout: 'Timeout(s)',
|
||||
inr: 'Evaluation interval',
|
||||
inrPlaceholder: 'Default global scrape interval',
|
||||
inrError: 'Evaluation Interval cannot be less than 15',
|
||||
autoExpired: 'Automatic expired',
|
||||
timeout: '超时时间(s)',
|
||||
inr: '评估区间',
|
||||
inrPlaceholder: '默认全局抓取间隔',
|
||||
inrError: '评估间隔不能小于 15',
|
||||
autoExpired: '自动过期',
|
||||
state: '状态',
|
||||
schedEnable: 'Schedule',
|
||||
schedDays: 'Effective time',
|
||||
notifyActive: 'Active Notification',
|
||||
notifyExpired: 'Expired notification',
|
||||
trbShot: 'Trouble shooting'
|
||||
schedEnable: '日程',
|
||||
schedDays: '有效时间',
|
||||
more: '更多的',
|
||||
effectiveConfig: '有效配置',
|
||||
notificationConfig: '通知配置',
|
||||
notifyActive: '主动通知',
|
||||
notifyExpired: '过期通知',
|
||||
trbShot: '故障排除'
|
||||
},
|
||||
silence: {
|
||||
name: '名称',
|
||||
@@ -1381,7 +1405,7 @@ const cn = {
|
||||
contextName: '内容名称',
|
||||
alerts: '告警',
|
||||
privpin: '隐私密码',
|
||||
asset: 'Asset',
|
||||
asset: '资产',
|
||||
editEndpoint: '修改 Endpoint',
|
||||
createEndpoint: '新增 Endpoint',
|
||||
batchEndpoint: '批量 Endpoint',
|
||||
@@ -1424,12 +1448,12 @@ const cn = {
|
||||
scrape_timeout_placeholder: '默认全局超时时间',
|
||||
protocol: '协议',
|
||||
type: '类型',
|
||||
bearer_token: 'bearer token',
|
||||
bearer_token: '第三方 token',
|
||||
username: '用户名',
|
||||
pin: '密码',
|
||||
authTypeNull: 'none',
|
||||
authTypeWord: 'basic auth',
|
||||
authTypeToken: 'bearer token',
|
||||
authTypeNull: '无',
|
||||
authTypeWord: '基础认证',
|
||||
authTypeToken: '第三方 token',
|
||||
name: '名称',
|
||||
configs: '配置',
|
||||
state: '状态',
|
||||
|
||||
@@ -103,7 +103,7 @@ const en = {
|
||||
importExcel: 'Import',
|
||||
importExcelLower: 'import',
|
||||
exportExcelLower: 'export',
|
||||
rollbackImport: 'Rollback',
|
||||
rollbackImport: 'Undo',
|
||||
exportCur: 'Current page',
|
||||
exportAll: 'All',
|
||||
importFile: 'Please upload file',
|
||||
@@ -120,7 +120,12 @@ const en = {
|
||||
failed: 'Fail',
|
||||
success: 'Success',
|
||||
failedDetail: 'Failed Detail',
|
||||
line: 'Line {0}:'
|
||||
line: 'Line {0}:',
|
||||
successNum: '{successNum} records imported successfully',
|
||||
failedNum: '{failedNum} out of {total} records failed to import',
|
||||
successfully: 'Import completed successfully!',
|
||||
imported: 'You have imported',
|
||||
records: 'records'
|
||||
},
|
||||
reset: 'Reset',
|
||||
submit: 'Save',
|
||||
@@ -141,6 +146,12 @@ const en = {
|
||||
children: 'Children asset',
|
||||
assetSubTab: 'Children asset',
|
||||
dc: 'Data center',
|
||||
manageIp: 'Manage IP',
|
||||
cabinet: 'Cabinet',
|
||||
brand: 'Brand',
|
||||
model: 'Model',
|
||||
location: 'Location',
|
||||
module: 'Module',
|
||||
labels: 'Label',
|
||||
moreOption: 'More option',
|
||||
copy: 'Copy',
|
||||
@@ -163,7 +174,10 @@ const en = {
|
||||
normal: 'Up',
|
||||
unusual: 'Down',
|
||||
AuthenticationFailed: 'Authentication failed',
|
||||
clearAllSelect: 'Clear the selection'
|
||||
clearAllSelect: 'Clear the selection',
|
||||
disabled: 'Disabled',
|
||||
enabled: 'Enabled',
|
||||
close: 'Close'
|
||||
},
|
||||
pageSize: '/page',
|
||||
setup: {
|
||||
@@ -287,6 +301,7 @@ const en = {
|
||||
type: 'Type',
|
||||
unit: 'Unit',
|
||||
url: 'URL',
|
||||
name: 'Name',
|
||||
legend: 'Legend',
|
||||
statistics: 'Statistics',
|
||||
legendTip: 'Controls the name of the time series, using name or pattern. For example {{hostname}} will be replaced with label value for the label hostname.',
|
||||
@@ -733,6 +748,7 @@ const en = {
|
||||
user: {
|
||||
userList: 'User list', // "用户列表"
|
||||
user: 'User',
|
||||
state: 'State',
|
||||
// 列表表头
|
||||
name: 'Name', // "用户"
|
||||
username: 'Username', // 登录名
|
||||
@@ -876,9 +892,9 @@ const en = {
|
||||
authtype: 'AuthType',
|
||||
statusItem: {
|
||||
connecting: 'Connecting',
|
||||
connectionFailed: 'Connection failed',
|
||||
over: 'Over',
|
||||
kickedOut: 'Kicked out',
|
||||
connectionFailed: 'Failed',
|
||||
over: 'Close',
|
||||
kickedOut: 'Stopped',
|
||||
unknownError: 'Unknown error'
|
||||
},
|
||||
option: 'Operation', // "操作",
|
||||
@@ -932,7 +948,8 @@ const en = {
|
||||
loginUser: 'Login user',
|
||||
sourceIp: 'Source IP',
|
||||
sourceUser: 'Source user',
|
||||
SessionId: 'Session ID'
|
||||
SessionId: 'Session ID',
|
||||
stop: 'Stop'
|
||||
},
|
||||
operationlog: {
|
||||
operationlog: 'Operation log',
|
||||
@@ -1255,6 +1272,10 @@ const en = {
|
||||
startAt: 'Start time', // "开始时间"
|
||||
notify: 'Notification', // "通知方式"
|
||||
endAt: 'End time', // "结束时间"
|
||||
name: 'Name',
|
||||
state: 'State',
|
||||
type: 'Type',
|
||||
alertNum: 'Alert',
|
||||
list: {
|
||||
// 表头
|
||||
linked: 'Linked', // "关联"
|
||||
@@ -1309,6 +1330,9 @@ const en = {
|
||||
state: 'State',
|
||||
schedEnable: 'Schedule',
|
||||
schedDays: 'Effective time',
|
||||
more: 'More',
|
||||
effectiveConfig: 'Effective configuration',
|
||||
notificationConfig: 'Notification configuration',
|
||||
notifyActive: 'Active Notification',
|
||||
notifyExpired: 'Expired notification',
|
||||
trbShot: 'Trouble shooting'
|
||||
|
||||
@@ -225,6 +225,7 @@ export default {
|
||||
} else {
|
||||
this.dataListLayout.push('clickSearch')
|
||||
}
|
||||
localStorage.setItem('dataList-layout' + this.tableId, JSON.stringify(this.dataListLayout))
|
||||
},
|
||||
addSilence (row, type) {
|
||||
this.blankSilenceObject.startAt = bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss')
|
||||
|
||||
@@ -42,12 +42,26 @@ export default {
|
||||
this.detailViewLoading = false
|
||||
this.$refs.clickSearch && this.$refs.clickSearch.needMore()
|
||||
this.$refs[dataList].$refs.searchInput.sreach_num = 0
|
||||
this.$refs[dataList].$refs.searchInput.select_list = []
|
||||
this.searchMsg.searchLabelList.forEach(searchLabel => {
|
||||
if (this.searchLabel[searchLabel.label]) {
|
||||
let val = this.searchLabel[searchLabel.label]
|
||||
if (searchLabel.label === 'projectIds') {
|
||||
const project = this.$refs.dataList.$refs.searchInput.projectSelect.find(project => val == project.id || val == project.name)
|
||||
val = project.name
|
||||
const valnum = project.id
|
||||
this.$refs[dataList].$refs.searchInput.select_list.push({
|
||||
...searchLabel,
|
||||
val: this.searchLabel[searchLabel.label]
|
||||
val: val,
|
||||
valnum: valnum
|
||||
})
|
||||
} else {
|
||||
this.$refs[dataList].$refs.searchInput.select_list.push({
|
||||
...searchLabel,
|
||||
val: val
|
||||
})
|
||||
}
|
||||
|
||||
this.$refs[dataList].$refs.searchInput.sreach_num++
|
||||
this.$refs[dataList].$refs.searchInput.searchLabelList = this.$refs.dataList.$refs.searchInput.searchLabelList.filter(item => searchLabel.label !== item.label)
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
:visible-arrow="false"
|
||||
:disabled="isPopoverDisabled"
|
||||
trigger="hover"
|
||||
popper-class="popper-z-index right-public-box-select-top right-public-box-dropdown-top"
|
||||
popper-class="popper-z-index right-box-select-top right-public-box-dropdown-top"
|
||||
id="panel-calender-popover">
|
||||
<template v-if="this.searchTime&&this.searchTime.length>1">
|
||||
<el-row :gutter="10" class="calendar-popover">
|
||||
@@ -39,7 +39,7 @@
|
||||
</span>
|
||||
</div>
|
||||
</el-popover>
|
||||
<el-dropdown-menu class="nz-dashboard-dropdown right-public-box-select-top right-public-box-dropdown-top popper-z-index" slot="dropdown">
|
||||
<el-dropdown-menu class="nz-dashboard-dropdown right-box-select-top right-public-box-dropdown-top popper-z-index" slot="dropdown">
|
||||
<template v-for="(item, index) in timeData" >
|
||||
<el-dropdown-item v-if="item.id !== 12" :key="index" :class="showTime.id === item.id ? 'nz-dashboard-dropdown-bg' : ''" :command="item">
|
||||
{{item.text}}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
|
||||
<div
|
||||
v-show="visible"
|
||||
class="el-picker-panel el-date-range-picker el-popper"
|
||||
class="el-picker-panel el-date-range-picker el-popper time-picker-popover__select-top"
|
||||
:class="[{
|
||||
'has-sidebar': $slots.sidebar || shortcuts,
|
||||
'has-time': showTime
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<transition name="el-zoom-in-top" @after-enter="handleEnter" @after-leave="handleLeave">
|
||||
<div
|
||||
v-show="visible"
|
||||
class="el-picker-panel el-date-picker el-popper"
|
||||
class="el-picker-panel el-date-picker el-popper right-box-select-top"
|
||||
:class="[{
|
||||
'has-sidebar': $slots.sidebar || shortcuts,
|
||||
'has-time': showTime
|
||||
|
||||
@@ -4,11 +4,11 @@
|
||||
<multipleTime v-if="showMultiple" ref="multipleTime" :stepSearchTime="searchTime" class="multiple-time margin-r-10" @change="dateChange(searchTime)"/>
|
||||
<chart-unit v-if="useChartUnit" v-model="unit" class="margin-r-10"></chart-unit>
|
||||
<div v-show="useRefresh" class="top-tool-btn-group">
|
||||
<button :id="id+'-refresh'" class="top-tool-btn top-tool-btn--text" @click="refreshDataFunc">
|
||||
<button :id="id+'-refresh'" class="top-tool-btn top-tool-btn--text" @click="antiShake">
|
||||
<i class="global-active-color nz-icon nz-icon-refresh" style="font-size: 14px"></i>
|
||||
<span><slot name="added-text"></slot></span>
|
||||
</button>
|
||||
<button id="browser-go" class="top-tool-btn top-tool-btn--dropdown" @mouseenter="dropdownHandler(true)" @mouseleave="dropdownHandler(false)">
|
||||
<button id="browser-go" class="top-tool-btn top-tool-btn--dropdown" @click="dropdownHandler(dropdownShow)">
|
||||
<span class="select-refresh-time-label" v-if="interval !== -1">{{interLabel}}</span>
|
||||
<i class="nz-icon nz-icon-arrow-down" style="font-size: 12px;"></i>
|
||||
<transition name="el-zoom-in-top">
|
||||
@@ -81,6 +81,7 @@ export default {
|
||||
theme: {
|
||||
themeColor: ''
|
||||
}
|
||||
timer: ''
|
||||
}
|
||||
},
|
||||
created () {
|
||||
@@ -112,13 +113,10 @@ export default {
|
||||
}
|
||||
},
|
||||
dropdownHandler (show) {
|
||||
if (show) {
|
||||
clearTimeout(timeout)
|
||||
if (!show) {
|
||||
this.dropdownShow = true
|
||||
} else {
|
||||
timeout = setTimeout(() => {
|
||||
this.dropdownShow = false
|
||||
}, 700)
|
||||
}
|
||||
},
|
||||
getIntervalData (interval) { // interval:结束时间到现在的秒数
|
||||
@@ -145,6 +143,20 @@ export default {
|
||||
this.searchTime = time
|
||||
this.$emit('change', this.searchTime)
|
||||
this.refreshDataFunc()
|
||||
},
|
||||
antiShake () {
|
||||
if (this.timer) {
|
||||
clearTimeout(this.timer)
|
||||
this.timer = setTimeout(() => {
|
||||
this.refreshDataFunc()
|
||||
this.timer = ''
|
||||
}, 200)
|
||||
} else {
|
||||
this.timer = setTimeout(() => {
|
||||
this.refreshDataFunc()
|
||||
this.timer = ''
|
||||
}, 200)
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-popover ref="selectAssetMetaGroupPopBox" v-model="popBox.show" :placement="placement" popper-class="nz-pop nz-pop-select-panel right-public-box-select-top right-public-box-dropdown-top nz-pop-select-panel__dropdown" transition="slide" width="300">
|
||||
<el-popover ref="selectAssetMetaGroupPopBox" v-model="popBox.show" :placement="placement" popper-class="nz-pop nz-pop-select-panel right-box-select-top right-public-box-dropdown-top nz-pop-select-panel__dropdown" transition="slide" width="300">
|
||||
<div>
|
||||
<div class="pop-item-wider">
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-popover ref="selectAssetTypePopBox" v-model="popBox.show" :placement="placement" :width="width" popper-class="nz-pop nz-pop-select-panel right-box-select-top right-public-box-dropdown-top" transition="slide">
|
||||
<el-popover ref="selectAssetTypePopBox" v-model="popBox.show" :placement="placement" :width="width" popper-class="nz-pop nz-pop-select-panel right-box-select-top" transition="slide">
|
||||
<div>
|
||||
<div class="pop-item-wider">
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-popover :placement="placement" :popper-class="chartBox === true ? 'nz-pop nz-pop-select-panel right-box-select-top nz-pop-select-panel__dropdown' : 'nz-pop nz-pop-select-panel right-public-box-select-top right-public-box-dropdown-top nz-pop-select-panel__dropdown'" ref="selectPanelPopBox" transition="slide" v-model="popBox.show" :width="chartBox === true ? 626 : 310" :disabled="disabled">
|
||||
<el-popover :placement="placement" :popper-class="chartBox === true ? 'nz-pop nz-pop-select-panel right-box-select-top nz-pop-select-panel__dropdown' : 'nz-pop nz-pop-select-panel right-box-select-top right-public-box-dropdown-top nz-pop-select-panel__dropdown'" ref="selectPanelPopBox" transition="slide" v-model="popBox.show" :width="chartBox === true ? 626 : 310" :disabled="disabled">
|
||||
<div>
|
||||
<div class="pop-item-wider">
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-popover :disabled="disabled" @show="tempWalk.detailShow = false" v-if="popBox.show" :placement="placement" width="367" ref="selectWalkPopBox" popper-class="right-public-box-select-top right-public-box-dropdown-top nz-pop nz-pop-select-walk" transition="slide">
|
||||
<el-popover :disabled="disabled" @show="tempWalk.detailShow = false" v-if="popBox.show" :placement="placement" width="367" ref="selectWalkPopBox" popper-class="right-box-select-top right-public-box-dropdown-top nz-pop nz-pop-select-walk" transition="slide">
|
||||
<div class="pop-item-wider" @click="tempWalk.detailShow = false">
|
||||
<div v-if="tempWalk.detailShow" class="el-popover walk-pop" :style="{left: detailPopPosition.left, top: detailPopPosition.top}">
|
||||
<p><span class="metirc-tip-list">Name : </span><span>{{tempWalk.name}}</span></p>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<el-dropdown :size="size">
|
||||
<el-dropdown trigger="click" :size="size">
|
||||
<button id="more" :class="triggerButtonClass" title="more...">
|
||||
<i class="nz-icon nz-icon-more2"></i>
|
||||
</button>
|
||||
<el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-item v-if="showLock">
|
||||
<div @click="panelLock=!panelLock" id="panel-lock"><i :class="{'nz-icon nz-icon-lock':panelLock,'nz-icon nz-icon-unlock':!panelLock}"></i>{{panelLock ? $t("overall.locked") : $t("overall.unlocked")}}</div>
|
||||
</el-dropdown-item>
|
||||
@@ -19,7 +19,7 @@
|
||||
<slot name="after"></slot>
|
||||
</el-dropdown-menu>
|
||||
|
||||
<el-dialog :close-on-click-modal="importBox.type!=3" :show-close="true" :title="importBox.title" :visible.sync="importBox.show" :width="importBox.width" append-to-body class="nz-dialog" @close="closeDialog">
|
||||
<el-dialog :close-on-click-modal="importBox.type!=3" destroy-on-close :show-close="true" :title="importBox.title" :visible.sync="importBox.show" :width="importBox.width" append-to-body class="nz-dialog" @close="closeDialog">
|
||||
<div v-if="importBox.type == 1">
|
||||
<div class="upload-body">
|
||||
<el-upload :id="id+'-xlsx-input-file'" ref="uploadExcel" :auto-upload="false" :file-list="importFileList" :on-change="importChange" accept=".xlsx,.xls" action="" class="upload-demo" drag>
|
||||
@@ -56,25 +56,25 @@
|
||||
</div>
|
||||
<div v-if="importBox.type==3">
|
||||
<div class="upload-body result-body">
|
||||
<div>
|
||||
<span class="result-title">{{$t('overall.result.total')}}:</span>
|
||||
<span>{{importResult&&importResult.totalNum?importResult.totalNum:0}}</span>
|
||||
<div v-if="importResult&&importResult.failNum">
|
||||
<div class="result-title-top">
|
||||
<div class="">
|
||||
<i class="nz-icon nz-icon-import-success"/>
|
||||
<span>{{$t('overall.result.successNum',{successNum:importResult.successNum})}}</span><br/>
|
||||
</div>
|
||||
<div class="">
|
||||
<i class="nz-icon nz-icon-import-failed"/>
|
||||
<span>{{$t('overall.result.failedNum',{failedNum:importResult.failNum,total:importResult.totalNum})}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="result-title">{{$t('overall.result.failed')}}:</span>
|
||||
<span>{{importResult&&importResult.failNum?importResult.failNum:0}}</span>
|
||||
<span class="result-title">{{$t('overall.result.success')}}:</span>
|
||||
<span>{{importResult&&importResult.successNum?importResult.successNum:0}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="result-title">{{$t('overall.result.failedDetail')}}:</div>
|
||||
<div v-if="importResult&&importResult.failDetail" class="result-detail">
|
||||
<div style="height: 100%; overflow: auto;">
|
||||
<div style="height: 100%; overflow: auto">
|
||||
<template v-for="(item, index) in importResult.failDetail">
|
||||
<div :key="index" class="import-result-block">
|
||||
<div class="import-result-item">
|
||||
<div class="line-num">{{$t('overall.result.line',[item.lineNo])}}</div>
|
||||
<div>{{item.errorMsg}}</div>
|
||||
<div class="line-content" :title="item.errorMsg">{{item.errorMsg}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -82,11 +82,26 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="result-success-box">
|
||||
<div>
|
||||
<i class="nz-icon nz-icon-import-success"/>
|
||||
</div>
|
||||
<div class="result-success-txt">{{$t('overall.result.successfully')}}</div>
|
||||
<div class="result-success-txt">
|
||||
{{$t('overall.result.imported')}}
|
||||
<span style="color: #333333" v-if="importResult">{{importResult.successNum}}</span>
|
||||
{{$t('overall.result.records')}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="footer">
|
||||
<div class="el-message-box__btns">
|
||||
<button :id="id+'-xlsx-import-rollback'" class="nz-btn nz-btn-size-normal-new nz-btn-style-error-new" @click="rollbackImport">
|
||||
<span>{{$t('overall.rollbackImport')}}</span>
|
||||
</button>
|
||||
<button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
|
||||
<span>{{$t('overall.close')}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -132,7 +147,8 @@ export default {
|
||||
importFileList: [],
|
||||
importResult: null,
|
||||
exportShow: false,
|
||||
panelLock: true
|
||||
panelLock: true,
|
||||
language: localStorage.getItem('nz-language')
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
@@ -224,9 +240,11 @@ export default {
|
||||
},
|
||||
closeDialog () {
|
||||
this.importBox.show = false
|
||||
this.$nextTick(() => {
|
||||
this.importResult = null
|
||||
this.importFileList = []
|
||||
this.importFile = null
|
||||
})
|
||||
},
|
||||
downloadTemplate () {
|
||||
const language = localStorage.getItem('nz-language') || 'en' // 初始未选择默认 en 英文
|
||||
|
||||
@@ -457,3 +457,79 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tooltip-box{
|
||||
padding: 10px;
|
||||
max-height: 400px;
|
||||
min-height: 200px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E7EAED;
|
||||
box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
|
||||
border-radius: 3px 3px 3px 3px;
|
||||
|
||||
.tooltip-box-chart{
|
||||
max-height: 400px;
|
||||
min-height: 200px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
.line-chart{
|
||||
width: 300px;
|
||||
flex: 1;
|
||||
/deep/ .resize-box{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.chart-remark{
|
||||
white-space: pre-wrap;
|
||||
width: 110px;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
word-break: break-word;
|
||||
padding-right: 5px;
|
||||
height: calc(100% - 29px) !important;
|
||||
margin-top: 29px;
|
||||
padding-top: 5px;
|
||||
line-height: 16px;
|
||||
border-top: 1px dashed #DCE1E7;
|
||||
}
|
||||
}
|
||||
.tooltip-box-info{
|
||||
border: 1px solid #E7EAED;
|
||||
background: #FFFFFF;
|
||||
max-height: 400px;
|
||||
min-height: 200px;
|
||||
min-width: 186px;
|
||||
max-width: 300px;
|
||||
}
|
||||
/deep/ .line-area{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
/deep/ .topology-chart-title{
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
line-height: 19px;
|
||||
padding: 5px 0 5px 10px;
|
||||
height: 29px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px dashed #DCE1E7;
|
||||
}
|
||||
.topology-tool-tip /deep/ .topology-chart-title{
|
||||
margin-top: -23px;
|
||||
border-bottom: 1px dashed #DCE1E7;
|
||||
padding-left: 0;
|
||||
margin-left: 10px;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
width: 388px;
|
||||
}
|
||||
.topology-tool-tip /deep/ .line-area{
|
||||
margin-top: -15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
width="111"
|
||||
trigger="click"
|
||||
trigger="hover"
|
||||
class="scale-number-box"
|
||||
popper-class="scale-number-popover no-style-class"
|
||||
>
|
||||
|
||||
@@ -17,11 +17,24 @@
|
||||
</div>
|
||||
<div class="content-box">
|
||||
<span class="content-title">{{ $t('project.endpoint.endpoints') }}</span>
|
||||
<span class="content-text">{{moduleInfo.endpointNum?moduleInfo.endpointNum:'--'}}</span>
|
||||
<span class="content-text">
|
||||
<i class="nz-icon nz-icon-overview-endpoint monitorColor"></i>
|
||||
<span>{{moduleInfo.endpointNum ? moduleInfo.endpointNum : 0}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="content-box">
|
||||
<span class="content-title">{{ $t('overall.asset') }}</span>
|
||||
<span class="content-text">
|
||||
<i class="nz-icon nz-icon-overview-project monitorColor color23BF9A"/>
|
||||
<span>{{ moduleInfo.assetNum ? moduleInfo.assetNum: 0}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="content-box">
|
||||
<span class="content-title">{{ $t('overall.alert') }}</span>
|
||||
<span class="content-text">{{moduleInfo.alertNum?moduleInfo.alertNum:'--'}}</span>
|
||||
<span class="content-text">
|
||||
<i :class="moduleInfo.alertNum > 0 ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert"></i>
|
||||
<span>{{moduleInfo.alertNum ? moduleInfo.alertNum : 0}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="content-box">
|
||||
<span class="content-title">{{ $t('overall.remark') }}</span>
|
||||
@@ -43,25 +56,89 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
loading: true,
|
||||
moduleInfo: {
|
||||
project: { name: '' },
|
||||
name: '',
|
||||
type: 'http',
|
||||
remark: '',
|
||||
port: '',
|
||||
path: '',
|
||||
seq: '',
|
||||
assetNum: '',
|
||||
endpointNum: ''
|
||||
}
|
||||
moduleInfo: {}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.loading = true
|
||||
this.$get('/monitor/module/' + this.moduleId).then(res => {
|
||||
this.loading = false
|
||||
if (res.code === 200) {
|
||||
this.moduleInfo = res.data
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.info-content{
|
||||
display: flex;
|
||||
margin-right: 15px;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E7EAED;
|
||||
box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
|
||||
border-radius: 3px 3px 3px 3px 0 0;
|
||||
}
|
||||
.info-box{
|
||||
background: #FFFFFF;
|
||||
margin-bottom: 15px;
|
||||
min-width: 260px;
|
||||
}
|
||||
.info-box-title{
|
||||
background: #EFEFEF;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
padding-left: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.info-box-content{
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
}
|
||||
.content-box{
|
||||
padding: 0 12px;
|
||||
height: 26px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.content-title{
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
min-width: 120px;
|
||||
display: inline-block;
|
||||
color: #666666;
|
||||
padding: 3px 0;
|
||||
}
|
||||
.content-text{
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
.module-type{
|
||||
text-align: center;
|
||||
width: 44px;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
margin: 0 auto;
|
||||
line-height: 20px;
|
||||
}
|
||||
.module-type:first-child{
|
||||
border-radius: 4px 0 0 4px;
|
||||
margin-right: -4px;
|
||||
border-right: none;
|
||||
}
|
||||
.module-type:last-child{
|
||||
border-radius: 0 4px 4px 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.module-type-select{
|
||||
border-color:rgba(255,140,14,0.54);
|
||||
color: rgba(255,140,14,0.54);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
<asset-table
|
||||
ref="dataTable"
|
||||
v-loading="tools.loading"
|
||||
:loading="tools.loading"
|
||||
:api="url"
|
||||
:custom-table-title="tableTitle"
|
||||
:height="mainTableHeight"
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
style="height: calc(100% - 200px)"
|
||||
ref="dataTable"
|
||||
v-loading="tools.loading"
|
||||
:loading="tools.loading"
|
||||
:api="url"
|
||||
:custom-table-title="tableTitle"
|
||||
:height="mainTableHeight"
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<el-dropdown trigger="click" size="small" placement="bottom-start" v-has="'topo_icon_list'">
|
||||
<span class="el-dropdown-title"><i class="iconfont icon-cube"></i> <i
|
||||
class="nz-icon nz-icon-arrow-down"></i></span>
|
||||
<el-dropdown-menu slot="dropdown" @click="dropdownClick" class="right-public-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-menu slot="dropdown" @click="dropdownClick" class="right-box-select-top right-public-box-dropdown-top">
|
||||
<div style="height: 450px" v-loading="imgageLoading">
|
||||
<el-card shadow="hover" style="height:420px;width:284px;overflow-y: auto"
|
||||
class="project-topology-add-node">
|
||||
@@ -57,7 +57,7 @@
|
||||
<div class="full pr10">
|
||||
<el-select v-model="lineName" size="small"
|
||||
:popper-append-to-body="false"
|
||||
popper-class="right-public-box-select-top right-public-box-dropdown-top"
|
||||
popper-class="right-box-select-top"
|
||||
@change="changeTopologyOpt(lineName,'lineName')">
|
||||
<div slot="prefix">
|
||||
<div class="icon-item" style="width: 100%;padding: 0">
|
||||
@@ -228,6 +228,12 @@
|
||||
>
|
||||
<topoTooltip :chartDataParent="chartData" :filterTime="filterTime"/>
|
||||
</div>
|
||||
<div v-show="showNoData" class="topo-noData">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#nz-icon-no-data-project"></use>
|
||||
</svg>
|
||||
<div class="content">No data</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--endpoint-->
|
||||
<transition name="right-box">
|
||||
@@ -280,7 +286,7 @@
|
||||
<el-col :span="4" class="upload-pic-label">{{ $t('overall.folder') }}</el-col>
|
||||
<el-col :span="20">
|
||||
<el-autocomplete
|
||||
popper-class="right-public-box-select-top right-public-box-dropdown-top"
|
||||
popper-class="right-box-select-top right-public-box-dropdown-top"
|
||||
:maxlength="64" show-word-limit
|
||||
class="inline-input"
|
||||
v-model="uploadPic.unit"
|
||||
@@ -393,6 +399,7 @@ export default {
|
||||
bus.timeFormate(bus.getOffsetTimezoneData(-1), 'yyyy-MM-dd hh:mm:ss'),
|
||||
bus.timeFormate(bus.getOffsetTimezoneData(), 'yyyy-MM-dd hh:mm:ss')
|
||||
],
|
||||
showNoData: false,
|
||||
topologyInfo: {
|
||||
fontSize: 14,
|
||||
align: 'left',
|
||||
@@ -771,6 +778,11 @@ export default {
|
||||
}
|
||||
this.$get('monitor/project/topo', { projectId: this.obj.id }).then(res => {
|
||||
let data = res.data.topo
|
||||
if (!res.data.topo || !res.data.topo.pens.length) {
|
||||
this.showNoData = true
|
||||
} else {
|
||||
this.showNoData = false
|
||||
}
|
||||
if (this.isPreview) {
|
||||
data = this.previewData
|
||||
}
|
||||
@@ -1816,6 +1828,7 @@ export default {
|
||||
|
||||
editTopology (val) {
|
||||
this.editTopologyFlag = true
|
||||
this.showNoData = false
|
||||
this.topoScreenState = JSON.parse(JSON.stringify(this.topoScreen))
|
||||
this.$store.commit('setShowTopoScreen', true)
|
||||
setTimeout(() => {
|
||||
|
||||
@@ -15,13 +15,13 @@
|
||||
<el-form ref="addEndpoint" :model="endpoint" :rules="rules" label-position = "top">
|
||||
<!--project-->
|
||||
<el-form-item :label='$t("project.project.projectName")' class="select-warp" prop="projectId">
|
||||
<el-select id="add-endpoint-project" v-model="currentProject" class="right-box__select" placeholder="" popper-class="right-public-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id" @change="((val) => {changeProject(val)})">
|
||||
<el-select id="add-endpoint-project" v-model="currentProject" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id" @change="((val) => {changeProject(val)})">
|
||||
<el-option v-for="item in projectList" :id="'project-'+item.id" :key="item.id" :label="item.name" :value="item"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!--module-->
|
||||
<el-form-item :label='$t("project.module.module")' class="select-warp" prop="moduleId">
|
||||
<el-select id="add-endpoint-module" v-model="currentModule" :disabled="!currentProject.id" class="right-box__select" placeholder="" popper-class="right-public-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id" @change="((val) => {changeModule(val)})">
|
||||
<el-select id="add-endpoint-module" v-model="currentModule" :disabled="!currentProject.id" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id" @change="((val) => {changeModule(val)})">
|
||||
<el-option v-for="item in moduleList" :id="'module-'+item.id" :key="item.id" :label="item.name" :value="item"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
</el-form-item>
|
||||
<!--authProtocol-->
|
||||
<el-form-item :label='$t("config.assetType.authProtocol")' prop="authProtocol">
|
||||
<el-select class="right-box__select" popper-class="right-public-box-select-top right-public-box-dropdown-top prevent-clickoutside" v-model="editAssetType.authProtocol" placeholder="Please select">
|
||||
<el-select class="right-box__select" popper-class="right-box-select-top prevent-clickoutside" v-model="editAssetType.authProtocol" placeholder="Please select">
|
||||
<el-option :key="option.value" v-for="option in assetConstants.assetType.authProtocolOptions" :value="option.value" :label="option.label"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
</el-form-item>
|
||||
<!--brand-->
|
||||
<el-form-item :label='$t("config.model.brand")' prop="brandId">
|
||||
<el-select value-key="id" allow-create class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" :filterable="true" v-model="editModel.brandId" placeholder="" size="small" id="module-box-input-project">
|
||||
<el-select value-key="id" allow-create class="right-box__select" popper-class="right-box-select-top prevent-clickoutside" :filterable="true" v-model="editModel.brandId" placeholder="" size="small" id="module-box-input-project">
|
||||
<el-option :id="'module-project-'+item.id" v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
clearable
|
||||
collapse-tags
|
||||
placeholder=""
|
||||
popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside"
|
||||
popper-class="right-box-select-top prevent-clickoutside"
|
||||
size="small">
|
||||
<template v-for="item in mfaLevelList">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
@@ -60,7 +60,7 @@
|
||||
clearable
|
||||
collapse-tags
|
||||
placeholder=""
|
||||
popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside"
|
||||
popper-class="right-box-select-top prevent-clickoutside"
|
||||
size="small">
|
||||
<template v-for="item in languageList">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
@@ -76,7 +76,7 @@
|
||||
clearable
|
||||
collapse-tags
|
||||
placeholder=""
|
||||
popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside"
|
||||
popper-class="right-box-select-top prevent-clickoutside"
|
||||
size="small"
|
||||
@change="()=>{this.$forceUpdate()}">
|
||||
<template v-for="role in roles">
|
||||
@@ -86,7 +86,7 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!--enable-->
|
||||
<el-form-item :label="$t('config.user.enable')">
|
||||
<el-form-item :label="$t('config.user.state')">
|
||||
<el-switch id="account-input-status" v-model="editUser.status" :disabled="isCurrentUser(editUser.username) || (editUser.username==='admin' && editUser.id==1) " active-color="#ee9d3f" active-value="1"
|
||||
inactive-value="0">
|
||||
</el-switch>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<!--DC-->
|
||||
<el-form-item :label="$t('config.dc.dc')" prop="dc.name">
|
||||
<div class="right-box-form-content">
|
||||
<el-select id="prom-box-input-dc" v-model="editPromServer.dc" placeholder="" class="right-box__select" popper-class="right-public-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id">
|
||||
<el-select id="prom-box-input-dc" v-model="editPromServer.dc" placeholder="" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id">
|
||||
<el-option v-for="item in dcData" :id="'prom-edit-dc-op-'+item.id" :key="item.id" :label="item.name" :value="item">
|
||||
<span class="config-dropdown-label-txt">{{item.name}}</span>
|
||||
</el-option>
|
||||
@@ -42,7 +42,7 @@
|
||||
<!-- :options="$CONSTANTS.agent.theData"-->
|
||||
<!-- :props="{ multiple: false, checkStrictly: false ,emitPath:false}"-->
|
||||
<!-- clearable></el-cascader>-->
|
||||
<el-select v-model="editPromServer.type" :disabled="editPromServer.id != null&& editPromServer.id != ''" placeholder="" 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="editPromServer.type" :disabled="editPromServer.id != null&& editPromServer.id != ''" placeholder="" class="right-box__select" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="value">
|
||||
<!-- <el-option-group-->
|
||||
<!-- v-for="group in agent2.theData"-->
|
||||
<!-- :key="group.label"-->
|
||||
@@ -60,7 +60,7 @@
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('config.agent.protocol')" prop="protocol">
|
||||
<el-select v-model="editPromServer.protocol" placeholder="" 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="editPromServer.protocol" placeholder="" class="right-box__select" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="value">
|
||||
<el-option v-for="item in agent2.protocol" :key="item.value" :label="item.label" :value="item.value">
|
||||
<span class="panel-dropdown-label-txt" >{{item.label}}</span>
|
||||
</el-option>
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
<el-select
|
||||
v-model="editAlertRule.type"
|
||||
class="right-box__select half-form-item"
|
||||
popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside"
|
||||
popper-class="right-box-select-top prevent-clickoutside"
|
||||
size="small"
|
||||
:disabled="showTypeSelect"
|
||||
@change="selectAlertRuleMetric">
|
||||
@@ -35,7 +35,7 @@
|
||||
</el-form-item>
|
||||
<!--severity-->
|
||||
<el-form-item :label="$t('alert.severity')" class="severity-box half-form-item" prop="severityId">
|
||||
<el-select id="alert-box-input-severity" v-model="editAlertRule.severityId" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small">
|
||||
<el-select id="alert-box-input-severity" v-model="editAlertRule.severityId" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small">
|
||||
<el-option v-for="item in severityData" :id="'alert-severity-'+item.value" :key="item.id" :label="item.name" :value="item.id">
|
||||
<div style="display: flex;justify-content: space-between;padding: 5px;">
|
||||
<div><i :style="{color:item.color,'font-size':'12px'}" class="nz-icon nz-icon-circle"></i> {{item.name}}</div>
|
||||
@@ -103,7 +103,7 @@
|
||||
<el-form-item v-if="showSnmpTrap" :label="$t('alert.config.unit')" class="half-form-item" prop="unit" :rules="[{ required: this.editAlertRule.type !== 3, message: this.$t('validate.required'), trigger: 'blur' }]">
|
||||
<el-cascader id="alert-box-input-unit" v-model="editAlertRule.unit" :options="unitOptions" :props="{ expandTrigger: 'click',emitPath:false }" :show-all-levels="false" filterable
|
||||
placeholder=""
|
||||
popper-class="no-style-class dc-dropdown right-public-box-dropdown-top unit-popper-class"
|
||||
popper-class="no-style-class dc-dropdown unit-popper-class"
|
||||
size="small"
|
||||
:disabled="!showSnmpTrap"
|
||||
style="width: 100%"
|
||||
@@ -129,15 +129,15 @@
|
||||
v-model="editAlertRule.autoExpired"
|
||||
class="right-box__select half-form-item"
|
||||
placeholder=""
|
||||
popper-class="prevent-clickoutside right-box-select-top right-public-box-dropdown-top"
|
||||
popper-class="prevent-clickoutside right-box-select-top "
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
:label="$t('dashboard.panel.chartForm.lockList.on')"
|
||||
:label="$t('overall.enabled')"
|
||||
:value="1">
|
||||
</el-option>
|
||||
<el-option
|
||||
:label="$t('dashboard.panel.chartForm.lockList.off')"
|
||||
:label="$t('overall.disabled')"
|
||||
:value="0">
|
||||
</el-option>
|
||||
</el-select>
|
||||
@@ -155,7 +155,7 @@
|
||||
<el-form-item :label="$t('overall.remark')" prop="description">
|
||||
<el-input id="alert-box-input-description" v-model="editAlertRule.description" maxlength="256" placeholder="" rows="4" show-word-limit size="small" type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
<div class="alert-rule-split-title">Effective configuration</div>
|
||||
<div class="alert-rule-split-title">{{ $t('alert.config.effectiveConfig') }}</div>
|
||||
<!--state-->
|
||||
<el-form-item :label="$t('alert.config.state')" prop="state" class="half-form-item">
|
||||
<el-select
|
||||
@@ -164,15 +164,15 @@
|
||||
class="right-box__select half-form-item"
|
||||
placeholder=""
|
||||
:popper-append-to-body="false"
|
||||
popper-class="prevent-clickoutside right-box-select-top right-public-box-dropdown-top"
|
||||
popper-class="prevent-clickoutside right-box-select-top"
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
:label="$t('dashboard.panel.chartForm.lockList.on')"
|
||||
:label="$t('overall.enabled')"
|
||||
:value="1">
|
||||
</el-option>
|
||||
<el-option
|
||||
:label="$t('dashboard.panel.chartForm.lockList.off')"
|
||||
:label="$t('overall.disabled')"
|
||||
:value="0">
|
||||
</el-option>
|
||||
</el-select>
|
||||
@@ -185,15 +185,15 @@
|
||||
class="right-box__select half-form-item"
|
||||
placeholder=""
|
||||
:popper-append-to-body="false"
|
||||
popper-class="prevent-clickoutside right-box-select-top right-public-box-dropdown-top"
|
||||
popper-class="prevent-clickoutside right-box-select-top"
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
:label="$t('dashboard.panel.chartForm.lockList.on')"
|
||||
:label="$t('overall.enabled')"
|
||||
:value="1">
|
||||
</el-option>
|
||||
<el-option
|
||||
:label="$t('dashboard.panel.chartForm.lockList.off')"
|
||||
:label="$t('overall.disabled')"
|
||||
:value="0">
|
||||
</el-option>
|
||||
</el-select>
|
||||
@@ -208,7 +208,7 @@
|
||||
placeholder=""
|
||||
multiple
|
||||
@change="$refs.alertRuleForm.validateField('schedDays')"
|
||||
popper-class="prevent-clickoutside right-box-select-top right-public-box-dropdown-top"
|
||||
popper-class="prevent-clickoutside right-box-select-top"
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
@@ -226,7 +226,7 @@
|
||||
:format="'HH:mm'"
|
||||
v-model="editAlertRule.schedStime"
|
||||
size="small"
|
||||
popper-class="right-box-select-top right-public-box-dropdown-top"
|
||||
popper-class="right-box-select-top"
|
||||
:clearable = 'false'
|
||||
:picker-options="{
|
||||
}">
|
||||
@@ -236,7 +236,7 @@
|
||||
:value-format="'HH:mm'"
|
||||
:format="'HH:mm'"
|
||||
size="small"
|
||||
popper-class="right-box-select-top right-public-box-dropdown-top"
|
||||
popper-class="right-box-select-top"
|
||||
:clearable = 'false'
|
||||
v-model="editAlertRule.schedEtime"
|
||||
:picker-options="{
|
||||
@@ -244,7 +244,7 @@
|
||||
}">
|
||||
</el-time-picker>
|
||||
</el-form-item>
|
||||
<div class="alert-rule-split-title">Notification configuration</div>
|
||||
<div class="alert-rule-split-title">{{ $t('alert.config.notificationConfig') }}</div>
|
||||
<!--notifyActive-->
|
||||
<el-form-item :label="$t('alert.config.notifyActive')" prop="notifyActive" class="half-form-item">
|
||||
<el-select
|
||||
@@ -253,16 +253,16 @@
|
||||
class="right-box__select half-form-item"
|
||||
placeholder=""
|
||||
:popper-append-to-body="false"
|
||||
popper-class="prevent-clickoutside right-box-select-top right-public-box-dropdown-top"
|
||||
popper-class="prevent-clickoutside right-box-select-top"
|
||||
size="small"
|
||||
@change="receiverAndNotifyValidate"
|
||||
>
|
||||
<el-option
|
||||
:label="$t('dashboard.panel.chartForm.lockList.on')"
|
||||
:label="$t('overall.enabled')"
|
||||
:value="1">
|
||||
</el-option>
|
||||
<el-option
|
||||
:label="$t('dashboard.panel.chartForm.lockList.off')"
|
||||
:label="$t('overall.disabled')"
|
||||
:value="0">
|
||||
</el-option>
|
||||
</el-select>
|
||||
@@ -275,16 +275,16 @@
|
||||
class="right-box__select half-form-item"
|
||||
placeholder=""
|
||||
:popper-append-to-body="false"
|
||||
popper-class="prevent-clickoutside right-box-select-top right-public-box-dropdown-top"
|
||||
popper-class="prevent-clickoutside right-box-select-top"
|
||||
size="small"
|
||||
@change="receiverAndNotifyValidate"
|
||||
>
|
||||
<el-option
|
||||
:label="$t('dashboard.panel.chartForm.lockList.on')"
|
||||
:label="$t('overall.enabled')"
|
||||
:value="1">
|
||||
</el-option>
|
||||
<el-option
|
||||
:label="$t('dashboard.panel.chartForm.lockList.off')"
|
||||
:label="$t('overall.disabled')"
|
||||
:value="0">
|
||||
</el-option>
|
||||
</el-select>
|
||||
@@ -298,7 +298,7 @@
|
||||
filterable
|
||||
multiple
|
||||
placeholder=""
|
||||
popper-class="prevent-clickoutside right-box-select-top right-public-box-dropdown-top"
|
||||
popper-class="prevent-clickoutside right-box-select-top"
|
||||
size="small"
|
||||
value-key="userId"
|
||||
@change="receiverShowChange"
|
||||
@@ -315,12 +315,12 @@
|
||||
</el-form-item>
|
||||
<!--notify-->
|
||||
<el-form-item :label="$t('alert.notify')" :rules="[{ required: editAlertRule.notifyExpired || editAlertRule.notifyActive, message: this.$t('validate.required'), trigger: 'change' }]" class="notify-box" prop="method" >
|
||||
<el-select id="alert-box-input-notify" v-model="editAlertRule.method" class="right-box__select" multiple placeholder="" :popper-append-to-body="false" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small">
|
||||
<el-select id="alert-box-input-notify" v-model="editAlertRule.method" class="right-box__select" multiple placeholder="" :popper-append-to-body="false" popper-class="right-box-select-top prevent-clickoutside" size="small">
|
||||
<el-option v-for="item in notifyData" :id="'alert-severity-'+item.value" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div class="alert-rule-split-title">More</div>
|
||||
<div class="alert-rule-split-title">{{ $t('alert.config.more') }}</div>
|
||||
<el-form-item :label="$t('alert.config.trbShot')" prop="trbShot">
|
||||
<rich-text-editor ref="richTextEditor" :edit-data="editAlertRule.trbShot" @after-init="afterInitRich"></rich-text-editor>
|
||||
</el-form-item>
|
||||
@@ -673,3 +673,67 @@ export default {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.severity-circle{
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 0;
|
||||
}
|
||||
.severity-box{
|
||||
position: relative;
|
||||
}
|
||||
.severity-box /deep/ .el-select .el-input__inner{
|
||||
padding-left: 25px;
|
||||
}
|
||||
.half-form-item {
|
||||
width: calc(50% - 5px);
|
||||
display: inline-block;
|
||||
.el-form-item__content,.el-select{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.right-box-alert-rule /deep/ .right-box__container .el-form-item__content .el-input-group--prepend{
|
||||
width: 100%;
|
||||
}
|
||||
/deep/ .rich-text-editor{
|
||||
line-height: 24px;
|
||||
}
|
||||
/deep/ .el-input-group__prepend{
|
||||
position: relative;
|
||||
.hide-icon{
|
||||
width: 38px;
|
||||
.el-input__inner{
|
||||
border: none;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.alert-rule-split-title{
|
||||
background: #F6F6F6;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
padding-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
height: 24px;
|
||||
}
|
||||
/deep/ .el-form-item__content .el-input-group{
|
||||
vertical-align: middle;
|
||||
}
|
||||
.severity-item{
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
max-width: 120px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.text-ellipsis{
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap
|
||||
}
|
||||
/deep/ .query-row .metric-selector-input-box {
|
||||
width: calc(100% - 120px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -11,14 +11,14 @@
|
||||
<!-- Edit type -->
|
||||
<el-form ref="assetEditForm" :model="editData" :rules="rules" label-position="top" label-width="120px">
|
||||
<el-form-item :label="$t('overall.editType')" prop="editType">
|
||||
<el-select v-model="editData.editType" 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="editData.editType" class="right-box__select" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="value">
|
||||
<el-option v-for="type in assetConstants.editTypeOptions" :key="type.value" :label="type.label" :value="type.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 第一级：Edit type = account -->
|
||||
<template v-if="editData.editType === assetConstants.editTypeData.account">
|
||||
<el-form-item :label="$t('asset.authProtocol')" prop="authProtocol">
|
||||
<el-select v-model="editData.authProtocol" 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="editData.authProtocol" class="right-box__select" :placeholder="$t('overall.select')" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="value">
|
||||
<el-option v-for="type in assetConstants.authProtocolOptions" :key="type.value" :label="type.label" :value="type.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@@ -26,7 +26,7 @@
|
||||
<template v-if="editData.authProtocol === assetConstants.authProtocolData.ssh">
|
||||
<div class="form__sub-title">{{$t('asset.sshAccount')}}</div>
|
||||
<el-form-item :label="$t('asset.authType')" prop="authType">
|
||||
<el-select v-model="editData.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="editData.authType" class="right-box__select" popper-class="right-box-select-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>
|
||||
@@ -103,7 +103,7 @@
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.SELECT">
|
||||
<el-select v-model="label.value" 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" class="right-box__select" popper-class="right-box-select-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>
|
||||
@@ -163,7 +163,7 @@
|
||||
:options="fieldGroupData"
|
||||
:props="labelCascProp"
|
||||
class="hide-input"
|
||||
popper-class="prevent-clickoutside right-public-box-select-top.right-public-box-dropdown-top limit-height"
|
||||
popper-class="prevent-clickoutside right-box-select-top right-public-box-dropdown-top limit-height"
|
||||
size="small"
|
||||
@change="addLabel"
|
||||
></el-cascader>
|
||||
@@ -173,7 +173,7 @@
|
||||
<!-- 第一级：Edit type = state -->
|
||||
<template v-if="editData.editType === assetConstants.editTypeData.state">
|
||||
<el-form-item :label="$t('asset.state')" prop="stateId">
|
||||
<el-select v-model="editData.stateId" 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="editData.stateId" class="right-box__select" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id">
|
||||
<el-option v-for="state in stateData" :key="state.id" :label="state.name" :value="state.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@@ -182,7 +182,7 @@
|
||||
<!-- 第一级：Edit type = snmp credential -->
|
||||
<template v-if="editData.editType === assetConstants.editTypeData.snmpCredential">
|
||||
<el-form-item :label="$t('asset.snmpCredential')" prop="snmpCredentialId">
|
||||
<el-select v-model="editData.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="editData.snmpCredentialId" class="right-box__select" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id">
|
||||
<el-option v-for="snmp in snmpCredentialData" :key="snmp.id" :label="snmp.name" :value="snmp.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
<el-select
|
||||
v-model="editAsset.pid"
|
||||
class="right-box__select"
|
||||
popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside"
|
||||
popper-class="right-box-select-top prevent-clickoutside"
|
||||
size="small"
|
||||
:placeholder="$t('el.select.placeholder')"
|
||||
value-key="id">
|
||||
@@ -32,8 +32,13 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('asset.state')" prop="stateId">
|
||||
<el-select v-model="editAsset.stateId" 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="state in options.stateOptions" :key="state.id" :label="state.name" :value="state.id"></el-option>
|
||||
<el-select v-model="editAsset.stateId" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id">
|
||||
<el-option v-for="state in options.stateOptions" :key="state.id" :label="state.name" :value="state.id">
|
||||
<div style="display: flex;justify-content: space-between;padding: 5px;">
|
||||
<div>{{state.name}}</div>
|
||||
<div style="width: 450px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;color: #999999" :title="state.remark">{{state.remark}}</div>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('asset.manageIp')" prop="manageIp">
|
||||
@@ -51,7 +56,7 @@
|
||||
:placeholder="lockModelInputValue"
|
||||
:options="options.brandAndModelOptions"
|
||||
:props="{ label: 'name', value: 'id' }"
|
||||
popper-class="prevent-clickoutside right-public-box-dropdown-top right-public-box-select-top limit-height"
|
||||
popper-class="prevent-clickoutside right-public-box-dropdown-top right-box-select-top limit-height"
|
||||
size="small"
|
||||
style="width: 100%;"
|
||||
></el-cascader>
|
||||
@@ -66,7 +71,7 @@
|
||||
v-model="editAsset.purchaseDate"
|
||||
placeholder=""
|
||||
size="small"
|
||||
popper-class="right-box-select-top right-public-box-dropdown-top"
|
||||
popper-class="right-box-select-top"
|
||||
style="width: 100%"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd">
|
||||
@@ -109,7 +114,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" :placeholder="$t('el.select.placeholder')" 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 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>
|
||||
@@ -136,7 +141,7 @@
|
||||
v-model="label.value[0]"
|
||||
:type="JSON.parse(label.param).subType === assetConstants.labelSubTypeData.date ? 'dateRange' : 'datetimerange'"
|
||||
placeholder=""
|
||||
popper-class="right-box-select-top right-public-box-dropdown-top"
|
||||
popper-class="right-box-select-top"
|
||||
size="small"
|
||||
style="width: 100%">
|
||||
</my-date-picker>
|
||||
@@ -147,7 +152,7 @@
|
||||
v-model="label.value[0]"
|
||||
:type="JSON.parse(label.param).subType"
|
||||
placeholder=""
|
||||
popper-class="right-box-select-top right-public-box-dropdown-top"
|
||||
popper-class="right-box-select-top"
|
||||
size="small"
|
||||
style="width: 100%"
|
||||
value-format="yyyy-MM-dd">
|
||||
@@ -169,7 +174,7 @@
|
||||
:options="options.fieldGroupOptions"
|
||||
:props="labelCascProp"
|
||||
class="hide-input"
|
||||
popper-class="prevent-clickoutside right-public-box-select-top right-public-box-dropdown-top limit-height"
|
||||
popper-class="prevent-clickoutside right-box-select-top limit-height"
|
||||
size="small"
|
||||
@change="addLabel"
|
||||
></el-cascader>
|
||||
@@ -178,7 +183,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" :placeholder="$t('el.select.placeholder')" 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 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>
|
||||
@@ -221,7 +226,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" :placeholder="$t('el.select.placeholder')" 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 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>
|
||||
@@ -424,7 +429,7 @@ export default {
|
||||
this.isEdit = true
|
||||
this.editAsset = JSON.parse(JSON.stringify(n))
|
||||
this.editAsset.brandAndModel = [this.editAsset.brand.id, this.editAsset.model.id]
|
||||
this.editAsset.stateId = n.state ? n.state.id : ''
|
||||
this.editAsset.stateId = n.state ? n.state.id : 2
|
||||
this.editAsset.typeId = n.type ? n.type.id : ''
|
||||
this.$nextTick(() => {
|
||||
if (n.id) {
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
<el-input placeholder="" maxlength="128" show-word-limit v-model="editAssetMeta.metaKey" size="small" id="editAssetMeta-box-input-key"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label='$t("config.assetLabel.group")' prop="groupId">
|
||||
<el-select v-model="editAssetMeta.groupId" size="small" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" :popper-append-to-body="false">
|
||||
<el-select v-model="editAssetMeta.groupId" size="small" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top prevent-clickoutside" :popper-append-to-body="false">
|
||||
<el-option v-for="(item, index) in groupData" :key="index" :value="item.id" :label="item.name"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@@ -42,7 +42,7 @@
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label='$t("config.assetLabel.type")' prop="type">
|
||||
<el-select v-model="editAssetMeta.type" :popper-append-to-body="false" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" @change="selectType">
|
||||
<el-select v-model="editAssetMeta.type" :popper-append-to-body="false" class="right-box__select" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="selectType">
|
||||
<el-option v-for="(item, index) in typeData" :key="index" :value="item.value" :disabled="item.disabled">
|
||||
<div><i :class="item.icon"></i> <span>{{item.name}}</span></div>
|
||||
</el-option>
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
<el-input placeholder="" maxlength="128" show-word-limit v-model="editDc.tel" size="small" id="dc-box-input-tel"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label='$t("asset.principal")' prop="principal">
|
||||
<el-select value-key="id" class="right-box__select" popper-class="right-public-box-select-top right-public-box-dropdown-top prevent-clickoutside" v-model="editDc.principal" placeholder="" size="small" id="dc-box-input-principal">
|
||||
<el-select value-key="id" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" v-model="editDc.principal" placeholder="" size="small" id="dc-box-input-principal">
|
||||
<el-option v-for="item in userData" :key="item.id" :label="item.name" :value="item.id" style="width: 620px">
|
||||
<span class="user-name" :title="item.name">{{item.name}}</span><span class="user-username" :title="item.username">@{{item.username}}</span>
|
||||
</el-option>
|
||||
|
||||
@@ -28,13 +28,13 @@
|
||||
<el-form ref="moduleForm" :model="editEndpoint" :rules="rules" label-position = "top" label-width="120px">
|
||||
<!--project-->
|
||||
<el-form-item :label='$t("project.project.projectName")' prop="projectId">
|
||||
<el-select id="module-box-input-project" v-model="editEndpoint.projectId" :disabled="disabled" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id" @change="changeProject">
|
||||
<el-select id="module-box-input-project" v-model="editEndpoint.projectId" :disabled="disabled" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id" @change="changeProject">
|
||||
<el-option v-for="item in projectList" :id="'module-project-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!--module-->
|
||||
<el-form-item :label='$t("project.module.module")' prop="moduleId">
|
||||
<el-select @change="renderEndpoint" id="module-box-input-module" v-model="editEndpoint.moduleId" :disabled="!editEndpoint.projectId || disabled " class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id">
|
||||
<el-select @change="renderEndpoint" id="module-box-input-module" v-model="editEndpoint.moduleId" :disabled="!editEndpoint.projectId || disabled " class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id">
|
||||
<el-option v-for="item in moduleList" :id="'module-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@@ -164,7 +164,7 @@
|
||||
</el-row>
|
||||
<!--credentials-->
|
||||
<el-form-item :label='$t("project.endpoint.credentials")' prop="credentials">
|
||||
<el-select id="module-box-input-credentials" v-model="editEndpoint.configs[0].config.snmpCredentialsId" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id" disabled>
|
||||
<el-select id="module-box-input-credentials" v-model="editEndpoint.configs[0].config.snmpCredentialsId" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id" disabled>
|
||||
<el-option v-for="item in credentialList" :id="'module-type-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@@ -248,7 +248,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item :prop="'configs.0.config.relabel_config.' + index + '.action'" class="" :label="'Action'" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' }]">
|
||||
<el-select v-model="item.action" :id="'action' + index " class="right-box__select " placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" @change="actionChange(index)" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' }]">
|
||||
<el-select v-model="item.action" :id="'action' + index " class="right-box__select " placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="actionChange(index)" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' }]">
|
||||
<el-option v-for="item2 in actionList" :id="'module-action-'+item2.label" :key="item2.label" :label="item2.label" :value="item2.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@@ -319,7 +319,7 @@
|
||||
<el-tab-pane v-if="editEndpoint.configs[0].config.protocol !== 'snmp'" :label="$t('project.endpoint.auth')" name="Auth">
|
||||
<!--authtype-->
|
||||
<el-form-item :label='$t("project.endpoint.type")' prop="authtype">
|
||||
<el-select id="module-box-input-auth-type" v-model="authType" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id" @change="changeAuthType">
|
||||
<el-select id="module-box-input-auth-type" v-model="authType" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id" @change="changeAuthType">
|
||||
<el-option v-for="item in authTypeList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@@ -355,7 +355,7 @@
|
||||
<el-tab-pane :label="$t('project.endpoint.basic')" name="Basic">
|
||||
<!--type-->
|
||||
<el-form-item :label='$t("project.endpoint.type")' class="half-form-item">
|
||||
<el-select id="module-box-input-type" v-model="item.type" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" @change="logsBasicTypeChange(index)">
|
||||
<el-select id="module-box-input-type" v-model="item.type" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="logsBasicTypeChange(index)">
|
||||
<el-option v-for="item in logsBasicList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@@ -496,7 +496,7 @@
|
||||
:rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]"
|
||||
>
|
||||
<!-- <el-input v-model="item2.format" placeholder="key" size="mini"></el-input>-->
|
||||
<el-select v-model="item2.format" :id="'timestamp' + index +'-' + index2" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small">
|
||||
<el-select v-model="item2.format" :id="'timestamp' + index +'-' + index2" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small">
|
||||
<el-option v-for="item in timestampList" :id="'module-timestamp-'+item" :key="item" :label="item" :value="item"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
:fetch-suggestions="querySearch"
|
||||
:placeholder="$t('overall.placeHolder')"
|
||||
class="inline-input"
|
||||
popper-class="right-public-box-select-top right-public-box-dropdown-top"
|
||||
popper-class="right-box-select-top right-public-box-dropdown-top"
|
||||
size="small"
|
||||
style="width: 100%;"
|
||||
></el-autocomplete>
|
||||
@@ -235,4 +235,7 @@ export default {
|
||||
/deep/ .metric-selector-title{
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
/deep/ .query-row .metric-selector-input-box {
|
||||
width: calc(100% - 120px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
ref="modelSelector"
|
||||
size="small"
|
||||
class="right-box__select"
|
||||
popper-class="prevent-clickoutside limit-height right-public-box-select-top right-public-box-dropdown-top"
|
||||
popper-class="prevent-clickoutside limit-height right-box-select-top right-public-box-dropdown-top"
|
||||
clearable></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('overall.remark')" prop="remark">
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
</el-form-item>
|
||||
<!--project-->
|
||||
<el-form-item :label='$t("project.project.projectName")' prop="projectId">
|
||||
<el-select id="module-box-input-project" v-model="editModule.projectId" :disabled="!!editModule.id" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top module-project-box-dropdown prevent-clickoutside" size="small" value-key="id">
|
||||
<el-select id="module-box-input-project" v-model="editModule.projectId" :disabled="!!editModule.id" class="right-box__select" placeholder="" popper-class="right-box-select-top module-project-box-dropdown prevent-clickoutside" size="small" value-key="id">
|
||||
<el-option v-for="item in projectList" :id="'module-project-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@@ -56,7 +56,7 @@
|
||||
v-model="editModule.endpointNameTmpl"
|
||||
:fetch-suggestions="querySearch"
|
||||
:placeholder="$t('overall.placeHolder')"
|
||||
popper-class="right-public-box-select-top right-public-box-dropdown-top"
|
||||
popper-class="right-box-select-top right-public-box-dropdown-top"
|
||||
class="inline-input"
|
||||
size="small"
|
||||
></el-autocomplete>
|
||||
@@ -93,7 +93,7 @@
|
||||
<el-tab-pane :label="$t('project.endpoint.basic')" name="Basic">
|
||||
<!--type-->
|
||||
<el-form-item :label='$t("project.endpoint.protocol")' class="half-form-item" prop="type">
|
||||
<el-select id="module-box-input-type" v-model="editModule.configs[0].config.protocol" :disabled="!!editModule.id && editModule.configs[0].config.protocol === 'snmp'" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top right-box-public-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeBasicType">
|
||||
<el-select id="module-box-input-type" v-model="editModule.configs[0].config.protocol" :disabled="!!editModule.id && editModule.configs[0].config.protocol === 'snmp'" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id" @change="changeBasicType">
|
||||
<el-option v-for="item in typeList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value" :disabled="item.disabled && !!editModule.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@@ -144,7 +144,7 @@
|
||||
</el-row>
|
||||
<!--credentials-->
|
||||
<el-form-item :label='$t("project.endpoint.credentials")' prop="credentials">
|
||||
<el-select id="module-box-input-credentials" v-model="editModule.configs[0].config.snmpCredentialsId" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id">
|
||||
<el-select id="module-box-input-credentials" v-model="editModule.configs[0].config.snmpCredentialsId" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id">
|
||||
<el-option v-for="item in credentialList" :id="'module-type-'+item.id" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@@ -229,7 +229,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<el-form-item :prop="'configs.0.config.relabel_config.' + index + '.action'" class="" :label="'Action'" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' }]">
|
||||
<el-select v-model="item.action" :id="'action' + index " class="right-box__select " placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" @change="actionChange(index)" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' }]">
|
||||
<el-select v-model="item.action" :id="'action' + index " class="right-box__select " placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="actionChange(index)" :rules="[{ required: true, message: $t('validate.required'), trigger: 'change' }]">
|
||||
<el-option v-for="item2 in actionList" :id="'module-action-'+item2.label" :key="item2.label" :label="item2.label" :value="item2.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@@ -299,7 +299,7 @@
|
||||
<el-tab-pane v-if="editModule.configs[0].config.protocol !== 'snmp'" :label="$t('project.endpoint.auth')" name="Auth">
|
||||
<!--authtype-->
|
||||
<el-form-item :label='$t("project.endpoint.type")' prop="authtype">
|
||||
<el-select id="module-box-input-auth-type" v-model="authType" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top module-project-box-dropdown prevent-clickoutside" size="small" value-key="id" @change="changeAuthType">
|
||||
<el-select id="module-box-input-auth-type" v-model="authType" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="id" @change="changeAuthType">
|
||||
<el-option v-for="item in authTypeList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@@ -335,7 +335,7 @@
|
||||
<el-tab-pane :label="$t('project.endpoint.basic')" name="Basic">
|
||||
<!--type-->
|
||||
<el-form-item :label='$t("project.endpoint.type")' class="half-form-item">
|
||||
<el-select id="module-box-input-type" v-model="item.type" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" @change="logsBasicTypeChange(index)">
|
||||
<el-select id="module-box-input-type" v-model="item.type" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="logsBasicTypeChange(index)">
|
||||
<el-option v-for="item in logsBasicList" :id="'module-type-'+item.id" :key="item.value" :label="item.name" :value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@@ -475,7 +475,7 @@
|
||||
:prop="'configs.1.config.'+ index +'.pipeline.' + index2 + '.format'"
|
||||
:rules="[{ required: true, message: $t('validate.required'), trigger: 'blur' }]"
|
||||
>
|
||||
<el-select v-model="item2.format" :id="'timestamp' + index +'-' + index2" class="right-box__select" placeholder="" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small">
|
||||
<el-select v-model="item2.format" :id="'timestamp' + index +'-' + index2" class="right-box__select" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small">
|
||||
<el-option v-for="item in timestampList" :id="'module-timestamp-'+item" :key="item" :label="item" :value="item"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
id="module-box-logs-pipeline-type"
|
||||
class="right-box__select"
|
||||
placeholder=""
|
||||
popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside pipeline"
|
||||
popper-class="right-box-select-top prevent-clickoutside pipeline"
|
||||
size="small"
|
||||
ref="select"
|
||||
v-model="pipelineOptionValue"
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
clearable
|
||||
collapse-tags
|
||||
placeholder=""
|
||||
popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside"
|
||||
popper-class="right-box-select-top prevent-clickoutside"
|
||||
size="small">
|
||||
<template v-for="item in languageList">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||
|
||||
@@ -9,14 +9,14 @@
|
||||
<span v-cancel="{obj: editProject, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box__container">
|
||||
<div class="right-box__container right-box-container__left">
|
||||
<div class="container__form">
|
||||
<el-form ref="projectForm" :model="editProject" :rules="rules" label-position = "top" label-width="120px">
|
||||
<el-form-item :label='$t("project.project.project")' prop="name">
|
||||
<el-input id="project-box-input-name" v-model="editProject.name" maxlength="64" show-word-limit size="small"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label='$t("overall.remark")'>
|
||||
<el-input id="project-box-input-remark" v-model="editProject.remark" maxlength="256" show-word-limit size="small" type="textarea"></el-input>
|
||||
<el-input id="project-box-input-name" v-model="editProject.remark" maxlength="256" show-word-limit type="textarea"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<el-input placeholder="" maxlength="256" show-word-limit v-model="editCredential.remark" size="small" id="credential-box-input-remark"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label='$t("config.mib.credential.type")' prop="type">
|
||||
<el-select v-model="editCredential.type" placeholder="" id="credential-box-input-type" class="right-box__select" popper-class="right-public-box-select-top right-public-box-dropdown-top prevent-clickoutside" @change="typeChange">
|
||||
<el-select v-model="editCredential.type" placeholder="" id="credential-box-input-type" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" @change="typeChange">
|
||||
<el-option v-for="item in $CONSTANTS.snmpProtocolTypes" :key="item.value" :label="item.label" :value="item.value">
|
||||
<span class="panel-dropdown-label-txt" >{{item.label}}</span>
|
||||
</el-option>
|
||||
@@ -44,7 +44,7 @@
|
||||
<div style="margin-bottom: 20px;width: 100%"></div>
|
||||
|
||||
<el-form-item :label='$t("config.mib.credential.method")' prop="authProtocol" v-if="editCredential.type === 3">
|
||||
<el-select v-model="editCredential.config.authProtocol" placeholder="" id="credential-box-input-type" class="right-box__select" popper-class="right-public-box-select-top right-public-box-dropdown-top prevent-clickoutside">
|
||||
<el-select v-model="editCredential.config.authProtocol" placeholder="" id="credential-box-input-type" class="right-box__select" popper-class="right-box-select-top prevent-clickoutside">
|
||||
<el-option v-for="item in $CONSTANTS.snmpAuthMethod" :key="item.value" :label="item.label" :value="item.value">
|
||||
<span class="panel-dropdown-label-txt" >{{item.label}}</span>
|
||||
</el-option>
|
||||
@@ -58,7 +58,7 @@
|
||||
<div style="margin-bottom: 20px;width: 100%"></div>
|
||||
|
||||
<el-form-item :label='$t("config.mib.credential.method")' prop="privProtocol" v-if="editCredential.type === 3">
|
||||
<el-select v-model="editCredential.config.privProtocol" placeholder="" id="credential-box-input-type" class="right-box__select" popper-class="right-public-box-select-top right-public-box-dropdown-top prevent-clickoutside" :disabled="!editCredential.config.authProtocol || editCredential.config.authProtocol === ''">
|
||||
<el-select v-model="editCredential.config.privProtocol" placeholder="" id="credential-box-input-type" class="right-box__select" popper-class="right-box-select-top prevent-clickoutside" :disabled="!editCredential.config.authProtocol || editCredential.config.authProtocol === ''">
|
||||
<el-option v-for="item in $CONSTANTS.snmpEncryptionMethod" :key="item.value" :label="item.label" :value="item.value">
|
||||
<span class="panel-dropdown-label-txt" >{{item.label}}</span>
|
||||
</el-option>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
size="small"
|
||||
v-model="assetSetting.host"
|
||||
></el-autocomplete>
|
||||
<el-popover @hide="popHide" @show="popShow" placement="bottom" popper-class="no-style-class" trigger="click">
|
||||
<el-popover @hide="popHide" @show="popShow" placement="bottom" popper-class="no-style-class" trigger="hover">
|
||||
<div class="mib-browser-ad-search">
|
||||
<el-row class="mib-browser-ad-search-item" style="font-weight: bold">{{$t('config.dc.traffic.snmpSetting')}}</el-row>
|
||||
<el-row class="mib-browser-ad-search-item">
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
<template v-if="item.prop === 'alertRule'">
|
||||
<div v-if="scope.row.alertRule&&scope.row.alertRule.name" >
|
||||
<el-popover
|
||||
placement="right"
|
||||
placement="right-start"
|
||||
popper-class="alert-message-tooltip"
|
||||
style="position: relative"
|
||||
@show="alertMessageHover(scope.row.alertRule, true)"
|
||||
@@ -91,6 +91,7 @@
|
||||
:id="scope.row[item.label].id"
|
||||
:that="scope.row[item.label]"
|
||||
:type="item.label"
|
||||
:alert-table-dialog="true"
|
||||
></alertLabel>
|
||||
</span>
|
||||
</template>
|
||||
@@ -110,11 +111,11 @@
|
||||
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
|
||||
<div slot-scope="scope" class="table-operation-items">
|
||||
<button v-if="scope.row.alertRule&&scope.row.alertRule.type !== 3" class="table-operation-item" @click="$emit('messageDetail', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
|
||||
<el-dropdown v-has="['alertMessage_expired']" size="medium" trigger="hover" @command="tableOperation">
|
||||
<el-dropdown v-has="['alertMessage_expired']" size="medium" trigger="click" @command="tableOperation">
|
||||
<div class="table-operation-item table-operation-item--more">
|
||||
<i class="nz-icon nz-icon-more3"></i>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
|
||||
<!-- <el-dropdown-item :command="['showText', scope.row]"><i class="nz-icon nz-icon-guzhangshuju"></i><span class="operation-dropdown-text">{{$t('alert.config.trbShot')}}</span></el-dropdown-item>-->
|
||||
<el-dropdown-item v-has="'alertMessage_expired'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
|
||||
<el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'alertMessage']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
|
||||
@@ -122,6 +123,15 @@
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-table-column>
|
||||
<template slot="empty">
|
||||
<div v-if="!loading" class="table-no-data">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#nz-icon-no-data-list"></use>
|
||||
</svg>
|
||||
<div class="table-no-data__title">No results found</div>
|
||||
</div>
|
||||
<div v-else> </div>
|
||||
</template>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
@@ -149,7 +159,8 @@ export default {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
alertMessageTabNew: Boolean
|
||||
alertMessageTabNew: Boolean,
|
||||
loading: Boolean
|
||||
},
|
||||
mixins: [table, bus],
|
||||
data () {
|
||||
|
||||
@@ -65,12 +65,12 @@
|
||||
placement="right"
|
||||
trigger="hover"
|
||||
:open-delay="300"
|
||||
:width="225"
|
||||
:width="215"
|
||||
popper-class="schedEnableTitle"
|
||||
>
|
||||
<div>
|
||||
<div class="margin-b-10">
|
||||
{{$t('alert.config.schedEnable')}} :
|
||||
{{$t('alert.config.schedEnable')}}
|
||||
<el-switch
|
||||
style="margin-left: 14px"
|
||||
slot="reference"
|
||||
@@ -82,23 +82,31 @@
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="margin-b-10">{{$t('alert.config.schedDays')}} :</div>
|
||||
<div class="margin-b-10">{{$t('alert.config.schedDays')}}</div>
|
||||
<div class="margin-b-5" style="display: flex">
|
||||
<i class="nz-icon nz-icon-a-rilizhou"/>
|
||||
<i class="nz-icon nz-icon-a-rilizhou" style="color: #FA901C;"/>
|
||||
<span v-html="weekStr(scope.row.schedDays)"></span>
|
||||
</div>
|
||||
<div ><i class="nz-icon nz-icon-dingshishijian"/>{{scope.row.schedStime+' - '+scope.row.schedEtime}}</div>
|
||||
<div ><i class="nz-icon nz-icon-dingshishijian" style="color: #FA901C;"/>{{scope.row.schedStime+' - '+scope.row.schedEtime}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-switch
|
||||
slot="reference"
|
||||
v-model="scope.row.state"
|
||||
:disabled="!hasButton('dc_edit') || !hasButton('dc_edit') || !!Number(scope.row.buildIn)"
|
||||
active-color="#ee9d3f"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
@change="(val)=>{$emit('statusChange', scope.row)}"
|
||||
/>
|
||||
<!-- <el-switch-->
|
||||
<!-- slot="reference"-->
|
||||
<!-- v-model="scope.row.state"-->
|
||||
<!-- :disabled="!hasButton('dc_edit') || !hasButton('dc_edit') || !!Number(scope.row.buildIn)"-->
|
||||
<!-- active-color="#ee9d3f"-->
|
||||
<!-- :active-value="1"-->
|
||||
<!-- :inactive-value="0"-->
|
||||
<!-- @change="(val)=>{$emit('statusChange', scope.row)}"-->
|
||||
<!-- />-->
|
||||
<div slot="reference" v-if="scope.row[item.prop] === 1">
|
||||
<div class="active-icon green-bg inline-block"></div>
|
||||
{{ $t('overall.enabled') }}
|
||||
</div>
|
||||
<div slot="reference" v-else-if="scope.row[item.prop] === 0">
|
||||
<div class="active-icon gray-bg inline-block"></div>
|
||||
{{ $t('overall.disabled') }}
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
|
||||
@@ -112,11 +120,11 @@
|
||||
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
|
||||
<div slot-scope="scope" class="table-operation-items">
|
||||
<button class="table-operation-item" @click="queryMessage(scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
|
||||
<el-dropdown size="medium" v-has="['alertRule_edit','alertRule_delete']" trigger="hover" @command="tableOperation">
|
||||
<el-dropdown size="medium" v-has="['alertRule_edit','alertRule_delete']" trigger="click" @command="tableOperation">
|
||||
<div class="table-operation-item table-operation-item--more">
|
||||
<i class="nz-icon nz-icon-more3"></i>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-item v-if="!scope.row.buildIn" v-has="'alertRule_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
|
||||
<el-dropdown-item v-if="!scope.row.buildIn" v-has="'alertRule_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
|
||||
<el-dropdown-item v-if="!scope.row.buildIn" v-has="'alertRule_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
|
||||
@@ -125,6 +133,15 @@
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-table-column>
|
||||
<template slot="empty">
|
||||
<div v-if="!loading" class="table-no-data">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#nz-icon-no-data-list"></use>
|
||||
</svg>
|
||||
<div class="table-no-data__title">No results found</div>
|
||||
</div>
|
||||
<div v-else> </div>
|
||||
</template>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
@@ -134,6 +151,9 @@ import chartDataFormat from '@/components/charts/chartDataFormat'
|
||||
export default {
|
||||
name: 'alertRuleTable',
|
||||
mixins: [table],
|
||||
props: {
|
||||
loading: Boolean
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tableTitle: [
|
||||
@@ -271,3 +291,56 @@ export default {
|
||||
margin-left: 5px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.severity .P1{
|
||||
background: #F5846A;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
.severity .P2{
|
||||
background: #F7A54A;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
.severity .P3{
|
||||
background: #F1C13D;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
.schedEnableTitle{
|
||||
padding: 20px 15px;
|
||||
margin-right: 0;
|
||||
left: 1995px !important;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid rgba(119,131,145,0.60);
|
||||
box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.schedEnableTitle .nz-icon-a-rilizhou, .schedEnableTitle .nz-icon-dingshishijian{
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.schedEnableTitle .week-item{
|
||||
width: 32px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
opacity: 0.9;
|
||||
background: #F6F6FA;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
letter-spacing: 0;
|
||||
font-weight: 400;
|
||||
padding-left: 3px;
|
||||
margin-right: 12px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -80,17 +80,27 @@
|
||||
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
|
||||
<div slot-scope="scope" class="table-operation-items">
|
||||
<button :class="{'table-operation-item--disable': scope.row.state === 3}" class="table-operation-item" v-has="'alertSilence_edit'" @click="$emit('edit', scope.row)" :disabled="scope.row.state === 3"><i class="nz-icon nz-icon-edit"></i></button>
|
||||
<el-dropdown size="medium" v-has="['alertSilence_expire']" trigger="hover" @command="tableOperation">
|
||||
<el-dropdown size="medium" v-has="['alertSilence_expire']" trigger="click" @command="tableOperation">
|
||||
<div class="table-operation-item table-operation-item--more">
|
||||
<i class="nz-icon nz-icon-more3"></i>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
|
||||
<!-- <el-dropdown-item :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>-->
|
||||
<el-dropdown-item v-has="'alertSilence_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
|
||||
<el-dropdown-item v-has="'alertSilence_expire'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('buttons.delete')}}</span></el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-table-column>
|
||||
<template slot="empty">
|
||||
<div v-if="!loading" class="table-no-data">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#nz-icon-no-data-list"></use>
|
||||
</svg>
|
||||
<div class="table-no-data__title">No results found</div>
|
||||
</div>
|
||||
<div v-else> </div>
|
||||
</template>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
@@ -105,6 +115,9 @@ export default {
|
||||
nzAlertTag
|
||||
},
|
||||
mixins: [table],
|
||||
props: {
|
||||
loading: Boolean
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
/* 表格相关 */
|
||||
@@ -120,7 +133,7 @@ export default {
|
||||
label: this.$t('alert.silence.name'),
|
||||
prop: 'name',
|
||||
show: true,
|
||||
width: 150
|
||||
minWidth: 150
|
||||
}, {
|
||||
label: this.$t('alert.silence.matchers'),
|
||||
prop: 'matchers',
|
||||
|
||||
@@ -69,11 +69,11 @@
|
||||
<div slot-scope="scope" class="table-operation-items">
|
||||
<!-- <button class="table-operation-item" @click.stop><i class="nz-icon nz-icon-view1"></i></button>-->
|
||||
<button class="table-operation-item" @click.stop="$emit('edit', scope.row)"><i class="nz-icon nz-icon-edit"></i></button>
|
||||
<el-dropdown size="medium" v-has="['asset_label_edit','asset_label_delete']" trigger="hover" @command="tableOperation">
|
||||
<el-dropdown size="medium" v-has="['asset_label_edit','asset_label_delete']" trigger="click" @command="tableOperation">
|
||||
<div class="table-operation-item table-operation-item--more">
|
||||
<i class="nz-icon nz-icon-more3"></i>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
|
||||
<!-- <el-dropdown-item v-has="'asset_label_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>-->
|
||||
<el-dropdown-item v-has="'asset_label_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
|
||||
<el-dropdown-item v-has="'asset_label_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
|
||||
@@ -81,6 +81,15 @@
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-table-column>
|
||||
<template slot="empty">
|
||||
<div v-if="!loading" class="table-no-data">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#nz-icon-no-data-list"></use>
|
||||
</svg>
|
||||
<div class="table-no-data__title">No results found</div>
|
||||
</div>
|
||||
<div v-else> </div>
|
||||
</template>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
@@ -89,6 +98,9 @@ import table from '@/components/common/mixin/table'
|
||||
export default {
|
||||
name: 'assetLabelTable',
|
||||
mixins: [table],
|
||||
props: {
|
||||
loading: Boolean
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tableTitle: [
|
||||
|
||||
@@ -116,11 +116,11 @@
|
||||
<div slot-scope="scope" class="table-operation-items">
|
||||
<button v-if="assetTab" class="table-operation-item" v-has="'model_edit'" @click="$emit('edit', scope.row)"><i class="nz-icon nz-icon-edit"></i></button>
|
||||
<button v-else class="table-operation-item" @click="$emit('showBottomBox', 'panelTab', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
|
||||
<el-dropdown size="medium" v-has="['asset_edit','asset_connect','asset_add','asset_delete']" trigger="hover" @command="tableOperation">
|
||||
<el-dropdown size="medium" v-has="['asset_edit','asset_connect','asset_add','asset_delete']" trigger="click" @command="tableOperation">
|
||||
<div class="table-operation-item table-operation-item--more">
|
||||
<i class="nz-icon nz-icon-more3"></i>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-item v-if="!assetTab" v-has="'asset_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
|
||||
<el-dropdown-item v-has="'asset_connect'" :command="['cli', scope.row]" :disabled="!scope.row.authUsername"><i class="nz-icon nz-icon-cli"></i><span class="operation-dropdown-text">{{$t('dashboard.connect')}}</span></el-dropdown-item>
|
||||
<el-dropdown-item v-has="'asset_add'" :command="['duplicate', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('dashboard.duplicate')}}</span></el-dropdown-item>
|
||||
@@ -130,6 +130,15 @@
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-table-column>
|
||||
<template slot="empty">
|
||||
<div v-if="!loading" class="table-no-data">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#nz-icon-no-data-list"></use>
|
||||
</svg>
|
||||
<div class="table-no-data__title">No results found</div>
|
||||
</div>
|
||||
<div v-else> </div>
|
||||
</template>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
@@ -149,7 +158,8 @@ export default {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
assetTab: Boolean
|
||||
assetTab: Boolean,
|
||||
loading: Boolean
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
</button>
|
||||
<el-dropdown
|
||||
type="primary"
|
||||
trigger="click"
|
||||
v-if="showLayout.indexOf('detailViewSet') > -1"
|
||||
class="margin-l-5"
|
||||
@command="changeDetailType">
|
||||
@@ -27,7 +28,7 @@
|
||||
type="button">
|
||||
<i class="nz-icon nz-icon-list-view" />
|
||||
</button>
|
||||
<el-dropdown-menu slot="dropdown" class="right-public-box-dropdown-top">
|
||||
<el-dropdown-menu slot="dropdown" class="right-public-box-dropdown-top right-box-select-top">
|
||||
<el-dropdown-item :command="'list'" :class="detailType === 'list' ? 'active' : ''">{{$t('asset.detail.list')}}</el-dropdown-item>
|
||||
<el-dropdown-item :command="'view'" :class="detailType === 'view' ? 'active' : ''">{{$t('asset.detail.detail')}}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
|
||||
@@ -58,17 +58,26 @@
|
||||
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
|
||||
<div slot-scope="scope" class="table-operation-items">
|
||||
<button class="table-operation-item" v-has="'agent_edit'" @click="tableOperation(['edit', scope.row])"><i class="nz-icon nz-icon-edit"></i></button>
|
||||
<el-dropdown size="medium" v-has="['agent_delete']" trigger="hover" @command="tableOperation">
|
||||
<el-dropdown size="medium" v-has="['agent_delete']" trigger="click" @command="tableOperation">
|
||||
<div class="table-operation-item table-operation-item--more">
|
||||
<i class="nz-icon nz-icon-more3"></i>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-item v-has="'agent_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
|
||||
<el-dropdown-item v-has="'agent_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-table-column>
|
||||
<template slot="empty">
|
||||
<div v-if="!loading" class="table-no-data">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#nz-icon-no-data-list"></use>
|
||||
</svg>
|
||||
<div class="table-no-data__title">No results found</div>
|
||||
</div>
|
||||
<div v-else> </div>
|
||||
</template>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
@@ -77,6 +86,9 @@ import table from '@/components/common/mixin/table'
|
||||
import { agent } from '@/components/common/js/constants'
|
||||
export default {
|
||||
name: 'agentTable',
|
||||
props: {
|
||||
loading: Boolean
|
||||
},
|
||||
mixins: [table],
|
||||
data () {
|
||||
return {
|
||||
|
||||
@@ -72,17 +72,26 @@
|
||||
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
|
||||
<div slot-scope="scope" class="table-operation-items">
|
||||
<button class="table-operation-item" @click="showBottomBox('operationLogTab', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
|
||||
<el-dropdown size="medium" v-has="['assetType_edit','assetType_delete']" trigger="hover" @command="tableOperation">
|
||||
<el-dropdown size="medium" v-has="['assetType_edit','assetType_delete']" trigger="click" @command="tableOperation">
|
||||
<div class="table-operation-item table-operation-item--more">
|
||||
<i class="nz-icon nz-icon-more3"></i>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-item v-has="'assetType_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
|
||||
<el-dropdown-item v-has="'assetType_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-table-column>
|
||||
<template slot="empty">
|
||||
<div v-if="!loading" class="table-no-data">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#nz-icon-no-data-list"></use>
|
||||
</svg>
|
||||
<div class="table-no-data__title">No results found</div>
|
||||
</div>
|
||||
<div v-else> </div>
|
||||
</template>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
@@ -90,6 +99,9 @@
|
||||
import table from '@/components/common/mixin/table'
|
||||
export default {
|
||||
name: 'asstTypeTable',
|
||||
props: {
|
||||
loading: Boolean
|
||||
},
|
||||
mixins: [table],
|
||||
data () {
|
||||
return {
|
||||
|
||||
@@ -39,17 +39,26 @@
|
||||
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
|
||||
<div slot-scope="scope" class="table-operation-items">
|
||||
<button class="table-operation-item" v-has="'dc_edit'" @click="tableOperation(['edit', scope.row])"><i class="nz-icon nz-icon-edit"></i></button>
|
||||
<el-dropdown size="medium" v-has="['dc_delete']" trigger="hover" @command="tableOperation">
|
||||
<el-dropdown size="medium" v-has="['dc_delete']" trigger="click" @command="tableOperation">
|
||||
<div class="table-operation-item table-operation-item--more">
|
||||
<i class="nz-icon nz-icon-more3"></i>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-item v-has="'dc_add'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
|
||||
<el-dropdown-item :command="['delete', scope.row]" v-has="'dc_delete'"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-table-column>
|
||||
<template slot="empty">
|
||||
<div v-if="!loading" class="table-no-data">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#nz-icon-no-data-list"></use>
|
||||
</svg>
|
||||
<div class="table-no-data__title">No results found</div>
|
||||
</div>
|
||||
<div v-else> </div>
|
||||
</template>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
@@ -60,6 +69,9 @@ export default {
|
||||
name: 'cabinet Table',
|
||||
components: { Template },
|
||||
mixins: [table],
|
||||
props: {
|
||||
loading: Boolean
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tableTitle: [
|
||||
|
||||
@@ -51,11 +51,11 @@
|
||||
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
|
||||
<div slot-scope="scope" class="table-operation-items">
|
||||
<button class="table-operation-item" @click="showBottomBox('panel', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
|
||||
<el-dropdown size="medium" v-has="['panel_chart_edit','panel_chart_delete']" trigger="hover" @command="tableOperation">
|
||||
<el-dropdown size="medium" v-has="['panel_chart_edit','panel_chart_delete']" trigger="click" @command="tableOperation">
|
||||
<div class="table-operation-item table-operation-item--more">
|
||||
<i class="nz-icon nz-icon-more3"></i>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-item v-has="'panel_chart_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
|
||||
<el-dropdown-item v-has="'panel_chart_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
|
||||
<el-dropdown-item v-has="'panel_chart_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
|
||||
@@ -64,6 +64,15 @@
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-table-column>
|
||||
<template slot="empty">
|
||||
<div v-if="!loading" class="table-no-data">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#nz-icon-no-data-list"></use>
|
||||
</svg>
|
||||
<div class="table-no-data__title">No results found</div>
|
||||
</div>
|
||||
<div v-else> </div>
|
||||
</template>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
@@ -73,6 +82,9 @@ import { chart as chartConstant } from '@/components/common/js/constants'
|
||||
export default {
|
||||
name: 'chartTmplTable',
|
||||
mixins: [table],
|
||||
props: {
|
||||
loading: Boolean
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chartTypeList: chartConstant.type,
|
||||
|
||||
@@ -73,16 +73,25 @@
|
||||
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
|
||||
<div slot-scope="scope" class="table-operation-items">
|
||||
<button class="table-operation-item" v-has="'credential_edit'" @click="tableOperation(['edit', scope.row])"><i class="nz-icon nz-icon-edit"></i></button>
|
||||
<el-dropdown size="medium" v-has="['credential_delete']" trigger="hover" @command="tableOperation">
|
||||
<el-dropdown size="medium" v-has="['credential_delete']" trigger="click" @command="tableOperation">
|
||||
<div class="table-operation-item table-operation-item--more">
|
||||
<i class="nz-icon nz-icon-more3"></i>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-item v-has="'credential_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-table-column>
|
||||
<template slot="empty">
|
||||
<div v-if="!loading" class="table-no-data">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#nz-icon-no-data-list"></use>
|
||||
</svg>
|
||||
<div class="table-no-data__title">No results found</div>
|
||||
</div>
|
||||
<div v-else> </div>
|
||||
</template>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
@@ -90,6 +99,9 @@
|
||||
import table from '@/components/common/mixin/table'
|
||||
export default {
|
||||
name: 'credentialsTable',
|
||||
props: {
|
||||
loading: Boolean
|
||||
},
|
||||
mixins: [table],
|
||||
data () {
|
||||
return {
|
||||
|
||||
@@ -41,14 +41,14 @@
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'state'">
|
||||
<el-switch
|
||||
v-model="scope.row.state"
|
||||
:disabled="!hasButton('dc_edit') || !hasButton('dc_edit')"
|
||||
active-color="#ee9d3f"
|
||||
active-value="ON"
|
||||
inactive-value="OFF"
|
||||
@change="(val)=>{$emit('statusChange', scope.row)}"
|
||||
/>
|
||||
<div v-if="scope.row[item.prop] === 'ON'">
|
||||
<div class="active-icon green-bg inline-block"></div>
|
||||
{{ $t('overall.enabled') }}
|
||||
</div>
|
||||
<div v-else-if="scope.row[item.prop] === 'OFF'">
|
||||
<div class="active-icon gray-bg inline-block"></div>
|
||||
{{ $t('overall.disabled') }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'longitude'">
|
||||
<template v-if="regNumTest(scope.row.longitude)">{{scope.row.longitude}}</template>
|
||||
@@ -88,17 +88,26 @@
|
||||
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
|
||||
<div slot-scope="scope" class="table-operation-items">
|
||||
<button class="table-operation-item" v-has="'dc_edit'" @click="tableOperation(['edit', scope.row])"><i class="nz-icon nz-icon-edit"></i></button>
|
||||
<el-dropdown size="medium" v-has="['dc_delete']" trigger="hover" @command="tableOperation">
|
||||
<el-dropdown size="medium" v-has="['dc_delete']" trigger="click" @command="tableOperation">
|
||||
<div class="table-operation-item table-operation-item--more">
|
||||
<i class="nz-icon nz-icon-more3"></i>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-item v-has="'dc_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
|
||||
<el-dropdown-item v-has="'dc_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-table-column>
|
||||
<template slot="empty">
|
||||
<div v-if="!loading" class="table-no-data">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#nz-icon-no-data-list"></use>
|
||||
</svg>
|
||||
<div class="table-no-data__title">No results found</div>
|
||||
</div>
|
||||
<div v-else> </div>
|
||||
</template>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
@@ -108,6 +117,9 @@ import { showTableTooltip, hideTableTooltip } from '@/components/common/js/tools
|
||||
export default {
|
||||
name: 'dcTable',
|
||||
mixins: [table],
|
||||
props: {
|
||||
loading: Boolean
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
regNum: /^[0-9]+.?[0-9]*/,
|
||||
|
||||
@@ -72,12 +72,6 @@
|
||||
:type="'module'"
|
||||
></alertLabel>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'alerts'">
|
||||
<span class="alert-num" @click="showBottomBox('endpointAlertMessage', scope.row)">
|
||||
<i class="nz-icon nz-icon-overview-alert" :class="scope.row.alertNum>0?'colorEF7458':'color23BF9A'"/>
|
||||
{{scope.row.alertNum}}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'asset'">
|
||||
<span
|
||||
class="pointer"
|
||||
@@ -94,6 +88,12 @@
|
||||
:type="'asset'"
|
||||
></alertLabel>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'alerts'">
|
||||
<span class="alert-num" @click="showBottomBox('endpointAlertMessage', scope.row)">
|
||||
<i class="nz-icon nz-icon-overview-alert" :class="scope.row.alertNum>0?'colorEF7458':'color23BF9A'"/>
|
||||
{{scope.row.alertNum}}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'configs'">
|
||||
<!-- <el-tooltip placement="left" effect="light" :popper-class="'endpointConfigsTips'" v-if="scope.row.configs[0].enable">-->
|
||||
<!-- <span class="configs-endpoint metrics">{ Metrics }</span>-->
|
||||
@@ -114,7 +114,7 @@
|
||||
<span class="configs-endpoint metrics">[{{scope.row.configs[0].enable ? 'Metrics':''}}{{scope.row.configs[0].enable&&scope.row.configs[1].enable?',':''}}{{scope.row.configs[1].enable ? 'logs' : ''}}]</span>
|
||||
<div class="endpointConfigsTips" slot="content">
|
||||
<span class="copy-value-content"> <i class="nz-icon nz-icon-override" @click="copyValue(clConfigs(scope.row))"></i></span>
|
||||
<pre >{{JSON.stringify(clConfigs(scope.row),null,2)}}</pre>
|
||||
<pre class="copy-value-content__pre">{{JSON.stringify(clConfigs(scope.row),null,2)}}</pre>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
@@ -170,11 +170,11 @@
|
||||
<div slot-scope="scope" class="table-operation-items">
|
||||
<button v-if="endpointTab" class="table-operation-item" v-has="'model_edit'" @click="$emit('edit', scope.row)"><i class="nz-icon nz-icon-edit"></i></button>
|
||||
<button v-else class="table-operation-item" @click="$emit('showBottomBox', 'panelTab', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
|
||||
<el-dropdown size="medium" v-has="['monitor_endpoint_edit','monitor_endpoint_delete']" trigger="hover" @command="tableOperation">
|
||||
<el-dropdown size="medium" v-has="['monitor_endpoint_edit','monitor_endpoint_delete']" trigger="click" @command="tableOperation">
|
||||
<div class="table-operation-item table-operation-item--more">
|
||||
<i class="nz-icon nz-icon-more3"></i>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
|
||||
<!-- <el-dropdown-item v-if="!endpointTab" :command="['endpointQuery', scope.row]"><i class="nz-icon nz-icon-search"></i><span class="operation-dropdown-text">{{$t('overall.query')}}</span></el-dropdown-item>-->
|
||||
<el-dropdown-item v-if="!endpointTab" v-has="'monitor_endpoint_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
|
||||
<el-dropdown-item v-has="'monitor_endpoint_delete'" :command="['delete', scope.row, `sys/endpoint?ids=${scope.row.id}`]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
|
||||
@@ -184,6 +184,15 @@
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-table-column>
|
||||
<template slot="empty">
|
||||
<div v-if="!loading" class="table-no-data">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#nz-icon-no-data-list"></use>
|
||||
</svg>
|
||||
<div class="table-no-data__title">No results found</div>
|
||||
</div>
|
||||
<div v-else> </div>
|
||||
</template>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
@@ -201,7 +210,8 @@ export default {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
endpointTab: Boolean
|
||||
endpointTab: Boolean,
|
||||
loading: Boolean
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@@ -394,13 +404,24 @@ export default {
|
||||
</style>
|
||||
<style>
|
||||
.endpointConfigsTips{
|
||||
height: 200px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
min-width: 150px;
|
||||
padding:3px 3px 0 8px ;
|
||||
}
|
||||
.copy-value-content{
|
||||
position: absolute;
|
||||
right: 1px;
|
||||
top: 4px;
|
||||
right: 6px;
|
||||
top: 6px;
|
||||
}
|
||||
.data-column__endpoint {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E7EAED;
|
||||
box-shadow: 0 6px 16px 0 rgba(0,0,0,0.08);
|
||||
border-radius: 3px 3px 3px 3px 0 0;
|
||||
}
|
||||
.copy-value-content__pre {
|
||||
height: 200px;
|
||||
margin-top: 20px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -45,17 +45,26 @@
|
||||
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
|
||||
<div slot-scope="scope" class="table-operation-items">
|
||||
<button class="table-operation-item" v-has="'expressionTemplate_edit'" @click="tableOperation(['edit', scope.row])"><i class="nz-icon nz-icon-edit"></i></button>
|
||||
<el-dropdown size="medium" v-has="['expressionTemplate_add','expressionTemplate_delete']" trigger="hover" @command="tableOperation">
|
||||
<el-dropdown size="medium" v-has="['expressionTemplate_add','expressionTemplate_delete']" trigger="click" @command="tableOperation">
|
||||
<div class="table-operation-item table-operation-item--more">
|
||||
<i class="nz-icon nz-icon-more3"></i>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-item v-has="'expressionTemplate_add'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
|
||||
<el-dropdown-item v-has="'expressionTemplate_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-table-column>
|
||||
<template slot="empty">
|
||||
<div v-if="!loading" class="table-no-data">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#nz-icon-no-data-list"></use>
|
||||
</svg>
|
||||
<div class="table-no-data__title">No results found</div>
|
||||
</div>
|
||||
<div v-else> </div>
|
||||
</template>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
@@ -64,6 +73,9 @@ import table from '@/components/common/mixin/table'
|
||||
export default {
|
||||
name: 'exprTmplTable',
|
||||
mixins: [table],
|
||||
props: {
|
||||
loading: Boolean
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tableTitle: [
|
||||
|
||||
@@ -62,16 +62,25 @@
|
||||
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
|
||||
<div slot-scope="scope" class="table-operation-items">
|
||||
<button class="table-operation-item" v-has="'monitor_module_edit'" @click="tableOperation(['edit', scope.row])"><i class="nz-icon nz-icon-edit"></i></button>
|
||||
<el-dropdown size="medium" v-has="['monitor_module_delete']" trigger="hover" @command="tableOperation">
|
||||
<el-dropdown size="medium" v-has="['monitor_module_delete']" trigger="click" @command="tableOperation">
|
||||
<div class="table-operation-item table-operation-item--more">
|
||||
<i class="nz-icon nz-icon-more3"></i>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
|
||||
<el-dropdown-item v-has="'monitor_module_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-table-column>
|
||||
<template slot="empty">
|
||||
<div v-if="!loading" class="table-no-data">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#nz-icon-no-data-list"></use>
|
||||
</svg>
|
||||
<div class="table-no-data__title">No results found</div>
|
||||
</div>
|
||||
<div v-else> </div>
|
||||
</template>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
@@ -80,6 +89,9 @@ import table from '@/components/common/mixin/table'
|
||||
export default {
|
||||
name: 'menuTable',
|
||||
mixins: [table],
|
||||
props: {
|
||||
loading: Boolean
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tableTitle: [ // 原table列
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user