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

feat：所有表格可以排序的页面点击表头只在正序倒序切换 style：修改箭头样式 添加assetlabel的气泡内容

Browse Source
This commit is contained in:
zhangyu
2020-07-28 11:45:37 +08:00
parent 7224423e35
commit c9b93fd0a3
9 changed files with 97 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
nezha-fronted/src/components/common/alert/alertLabel.vue
View File

@@ -1,16 +1,60 @@
<template>
<span v-loading="loading">
<div class="alertLabelInfo" v-if="type==='asset'">
<div class="alertLabelBox">
<div class="alertLabelTitle">ID</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.id:''}}</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">SN</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.sn:''}}</div>
</div>
<span>
<div class="alertLabelInfo" v-if="type==='asset'" v-loading="loading">
<div class="alertLabelBox">
<div class="alertLabelTitle">ID</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.id:''}}</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">SN</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.sn:''}}</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">Host</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.host:''}}</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">State</div>
<div class="alertLabelValue">{{alertLabelData?(alertStateStr(alertLabelData.state)):''}}</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">Ping</div>
<div class="alertLabelValue">
<div v-if="alertLabelData" :class="{'active-icon green':alertLabelData.pingState == 1,'active-icon red':alertLabelData.pingState == 0}"></div>
<span v-if="alertLabelData">{{alertLabelData.pingRtt?alertLabelData.pingRtt+'ms':''}}</span>
</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">Type</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.model.type.value:''}}</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">Vendor</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.model.vendor.name:''}}</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">Model</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.model.name:''}}</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">PurchaseDate</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.createAt:''}}</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">Alert</div>
<div class="alertLabelValue"><sapn v-if="alertLabelData" :class="{danger:alertLabelData.alertNum>0,success:alertLabelData.alertNum<=0}">{{alertLabelData.alertNum + alertActiveStr()}}</sapn></div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">Dc</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.idc.name:''}}</div>
</div>
<div class="alertLabelBox">
<div class="alertLabelTitle">Endpoint</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.endpointNum:''}}</div>
</div>
</div>
<div class="alertLabelInfo" v-if="type==='module'">
<div class="alertLabelInfo" v-if="type==='module'" v-loading="loading">
<div class="alertLabelBox">
<div class="alertLabelTitle">ID</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.id:''}}</div>
@@ -28,7 +72,8 @@
<div class="alertLabelValue">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
</div>
</div>
<div class="alertLabelInfo" v-if="type==='project'">
<div class="alertLabelInfo" v-if="type==='project'" v-loading="loading">
<div class="alertLabelBox">
<div class="alertLabelTitle">ID</div>
<div class="alertLabelValue">{{alertLabelData?alertLabelData.id:''}}</div>
@@ -54,7 +99,8 @@
type:Array
},
type:{},
labelLoading:{}
labelLoading:{},
that:{}
},
watch:{
labelLoading(){
@@ -101,9 +147,19 @@
},
methods:{
alertActiveStr(){
return vm.$t('overall.active');
},
alertStateStr(num){
if( num == 1){
return vm.$t('asset.inStock')
} else {
return vm.$t('asset.notInStock')
}
}
},
mounted(){
// console.log(vm.$t('overall.exportAll'));
},
}
@@ -123,7 +179,7 @@
}
.alertLabelTitle{
text-align: left;
width: 80px;
width: 90px;
border-right: 1px solid #ebeef5;
color: #666;
padding: 0 3px 0 13px;
@@ -134,4 +190,19 @@
color: #1a1a1a;
padding: 0 3px 0 13px;
}
.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;
}
</style>