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

feat：添加显示suspended 数量

Browse Source
This commit is contained in:
zhangyu
2020-11-21 11:27:55 +08:00
parent 4c33112f95
commit 2ed024d173
8 changed files with 57 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -1227,6 +1227,9 @@ li{
.dc-asset-state-out { .dc-asset-state-out {
background-color: orange; background-color: orange;
} }
.dc-asset-state-suspended {
background-color: rgba(255, 0, 0, 0.6);;
}
.dc-asset-state-P1 { .dc-asset-state-P1 {
background-color: rgba(255, 0, 0, 0.6); background-color: rgba(255, 0, 0, 0.6);
} }

3
nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
View File

@@ -51,11 +51,12 @@
placement="top-start" placement="top-start"
offset="-100" offset="-100"
trigger="hover" trigger="hover"
:content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.notInStock') + '：' + scope.row.assetStat.outStock"> :content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.notInStock') + '：' + scope.row.assetStat.outStock + $t('asset.suspended') + '：' + scope.row.assetStat.suspended">
<div slot="reference" class="dc-asset-states"> <div slot="reference" class="dc-asset-states">
<span class="dc-asset-state dc-asset-state-total">{{scope.row.assetStat.total}}</span> <span class="dc-asset-state dc-asset-state-total">{{scope.row.assetStat.total}}</span>
<span class="dc-asset-state dc-asset-state-in">{{scope.row.assetStat.inStock}}</span> <span class="dc-asset-state dc-asset-state-in">{{scope.row.assetStat.inStock}}</span>
<span class="dc-asset-state dc-asset-state-out">{{scope.row.assetStat.outStock}}</span> <span class="dc-asset-state dc-asset-state-out">{{scope.row.assetStat.outStock}}</span>
<span class="dc-asset-state dc-asset-state-suspended">{{scope.row.assetStat.suspended}}</span>
</div> </div>
</el-popover> </el-popover>

9
nezha-fronted/src/components/common/pagination.vue
View File

@@ -125,7 +125,7 @@ export default {
this.pageSize=this.postPageSizes[0]; this.pageSize=this.postPageSizes[0];
this.resetPageSizes(); this.resetPageSizes();
}else{ }else{
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId); let pageSize = '';
if(pageSize != 'undefined' && pageSize != null){ if(pageSize != 'undefined' && pageSize != null){
this.pageSize=parseInt(pageSize); this.pageSize=parseInt(pageSize);
} }
@@ -144,6 +144,13 @@ export default {
handler(n,o){ handler(n,o){
//console.log(n) //console.log(n)
} }
},
pageObj:{
immediate:true,
deep:true,
handler(n,o){
console.log(n,n)
}
} }
} }
}; };

36
nezha-fronted/src/components/page/asset/asset.vue
View File

@@ -43,7 +43,6 @@
v-show="bottomBox.mainResizeShow" v-show="bottomBox.mainResizeShow"
border border
v-loading="tools.loading" v-loading="tools.loading"
tooltip-effect="light"
ref="assetTable" ref="assetTable"
:cell-class-name="messageStyle" :cell-class-name="messageStyle"
@sort-change="tableDataSort" @sort-change="tableDataSort"
@@ -63,7 +62,6 @@
:key="`col_${index}`" :key="`col_${index}`"
:label="item.label" :label="item.label"
:fixed="item.fixed" :fixed="item.fixed"
:show-overflow-tooltip="item.prop != 'Alert' && item.prop != 'Module' && item.prop != 'option'"
:class-name="item.prop == 'option' ? 'content-right-options' : ''" :class-name="item.prop == 'option' ? 'content-right-options' : ''"
:sortable="$tableSet.sortableShow(item.prop,'asset')" :sortable="$tableSet.sortableShow(item.prop,'asset')"
:prop="$tableSet.propTitle(item.prop,'asset')" :prop="$tableSet.propTitle(item.prop,'asset')"
@@ -90,32 +88,33 @@
<span v-if="scope.row.state==3">{{ $t('asset.suspended')}}</span> <span v-if="scope.row.state==3">{{ $t('asset.suspended')}}</span>
</div> </div>
<div v-if="item.prop == 'pingStatus'"> <div v-if="item.prop == 'pingStatus'">
<el-popover <!--<el-popover-->
placement="right" <!--placement="right"-->
width="200" <!--width="200"-->
trigger="hover" <!--trigger="hover"-->
:content="formatPingTime(scope.row.pingLastUpdate)"> <!--:content="formatPingTime(scope.row.pingLastUpdate)">-->
<div slot="reference" style="width: 20px"> <!--<div slot="reference" style="width: 20px">-->
<div :class="{'active-icon green':scope.row.pingState == 1,'active-icon red':scope.row.pingState == 0}"></div><span>{{scope.row.pingRtt?scope.row.pingRtt+'ms':''}}</span> <!--<div :class="{'active-icon green':scope.row.pingState == 1,'active-icon red':scope.row.pingState == 0}"></div><span>{{scope.row.pingRtt?scope.row.pingRtt+'ms':''}}</span>-->
</div> <!--</div>-->
</el-popover> <!--</el-popover>-->
<div :class="{'active-icon green':scope.row.pingState == 1,'active-icon red':scope.row.pingState == 0}"></div><span>{{scope.row.pingRtt?scope.row.pingRtt+'ms':''}}</span>
</div> </div>
<template v-if="item.prop=='Module'"> <template v-if="item.prop=='Module'">
<el-tooltip placement="right" effect="light"> <!--<el-tooltip placement="right" effect="light">-->
<div slot="content"> <!--<div slot="content">-->
{{$t('asset.active')}} / {{$t('asset.total')}} <!--{{$t('asset.active')}} / {{$t('asset.total')}}-->
</div> <!--</div>-->
<span class="link" @click="showEndpoint(scope.row)" style="padding: 2px 8px">{{scope.row.endpointNum-scope.row.endpointDownNum}}/{{scope.row.endpointNum}}</span> <span class="link" @click="showEndpoint(scope.row)" style="padding: 2px 8px">{{scope.row.endpointNum-scope.row.endpointDownNum}}/{{scope.row.endpointNum}}</span>
</el-tooltip> <!--</el-tooltip>-->
</template> </template>
<template v-if="item.prop=='Alert'"> <template v-if="item.prop=='Alert'">
<el-tooltip :content="scope.row.alertNum+' '+$t('overall.active')" placement="top" effect="light" :disabled=" scope.row.alertNum < 99"> <!--<el-tooltip :content="scope.row.alertNum+' '+$t('overall.active')" placement="top" effect="light" :disabled=" scope.row.alertNum < 99">-->
<span :id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row)" class="link"> <span :id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row)" class="link">
{{(scope.row.alertNum < 99 ? scope.row.alertNum : 99)}} {{(scope.row.alertNum < 99 ? scope.row.alertNum : 99)}}
<sup class="linkSup" v-if="scope.row.alertNum > 99">+</sup> <sup class="linkSup" v-if="scope.row.alertNum > 99">+</sup>
{{' ' + $t('overall.active')}} {{' ' + $t('overall.active')}}
</span> </span>
</el-tooltip> <!--</el-tooltip>-->
</template> </template>
<div v-if="item.prop=='dataCenter'"> <div v-if="item.prop=='dataCenter'">
<span >{{scope.row.idc.name}}</span> <span >{{scope.row.idc.name}}</span>
@@ -480,6 +479,7 @@
this.$get('asset', this.searchLabel).then(response => { this.$get('asset', this.searchLabel).then(response => {
this.tools.loading = false; this.tools.loading = false;
if (response.code === 200) { if (response.code === 200) {
// response.data.list=response.data.list.concat(response.data.list,response.data.list,response.data.list,response.data.list,response.data.list,response.data.list,response.data.list)
this.tableData = response.data.list; this.tableData = response.data.list;
this.pageObj.total = response.data.total; this.pageObj.total = response.data.total;
} }

3
nezha-fronted/src/components/page/config/dc.vue
View File

@@ -99,11 +99,12 @@
<el-popover <el-popover
placement="top" placement="top"
trigger="hover" trigger="hover"
:content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.notInStock') + '：' + scope.row.assetStat.outStock"> :content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.notInStock') + '：' + scope.row.assetStat.outStock + $t('asset.suspended') + '：' + scope.row.assetStat.suspended">
<div slot="reference" class="dc-asset-states"> <div slot="reference" class="dc-asset-states">
<span class="dc-asset-state dc-asset-state-total">{{scope.row.assetStat.total}}</span> <span class="dc-asset-state dc-asset-state-total">{{scope.row.assetStat.total}}</span>
<span class="dc-asset-state dc-asset-state-in">{{scope.row.assetStat.inStock}}</span> <span class="dc-asset-state dc-asset-state-in">{{scope.row.assetStat.inStock}}</span>
<span class="dc-asset-state dc-asset-state-out">{{scope.row.assetStat.outStock}}</span> <span class="dc-asset-state dc-asset-state-out">{{scope.row.assetStat.outStock}}</span>
<span class="dc-asset-state dc-asset-state-suspended">{{scope.row.assetStat.suspended}}</span>
</div> </div>
</el-popover> </el-popover>

3
nezha-fronted/src/components/page/config/model.vue
View File

@@ -64,11 +64,12 @@
<el-popover <el-popover
placement="top" placement="top"
trigger="hover" trigger="hover"
:content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.notInStock') + '：' + scope.row.assetStat.outStock"> :content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.notInStock') + '：' + scope.row.assetStat.outStock+ + $t('asset.suspended') + '：' + scope.row.assetStat.suspended">
<div slot="reference" class="dc-asset-states"> <div slot="reference" class="dc-asset-states">
<span class="dc-asset-state dc-asset-state-total">{{scope.row.assetStat.total}}</span> <span class="dc-asset-state dc-asset-state-total">{{scope.row.assetStat.total}}</span>
<span class="dc-asset-state dc-asset-state-in">{{scope.row.assetStat.inStock}}</span> <span class="dc-asset-state dc-asset-state-in">{{scope.row.assetStat.inStock}}</span>
<span class="dc-asset-state dc-asset-state-out">{{scope.row.assetStat.outStock}}</span> <span class="dc-asset-state dc-asset-state-out">{{scope.row.assetStat.outStock}}</span>
<span class="dc-asset-state dc-asset-state-suspended">{{scope.row.assetStat.suspended}}</span>
</div> </div>
</el-popover> </el-popover>
</template> </template>

22
nezha-fronted/src/components/page/dashboard/overview/overview2.scss
View File

@@ -374,7 +374,7 @@
padding: 10px 20px; padding: 10px 20px;
box-sizing: border-box; box-sizing: border-box;
width: 390px; width: 390px;
height: 285px; height: 320px;
} }
.content-bottom-box .tooltip{ .content-bottom-box .tooltip{
width: auto; width: auto;
@@ -419,7 +419,7 @@
.tooltip-asset { .tooltip-asset {
width: 240px; width: 240px;
height: 124px; height: 150px;
border: 1px solid #DEDEDE; border: 1px solid #DEDEDE;
border-radius: 2px; border-radius: 2px;
@@ -441,7 +441,7 @@
.tooltip-asset--row { .tooltip-asset--row {
display: flex; display: flex;
height: 50px; height: 75px;
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid #DEDEDE; border-bottom: 1px solid #DEDEDE;
} }
@@ -457,13 +457,21 @@
.tooltip-asset--row > div:first-of-type { .tooltip-asset--row > div:first-of-type {
width: 70px; width: 70px;
padding-left: 10px; padding-left: 10px;
line-height: 50px; line-height: 75px;
font-size: 14px; font-size: 14px;
border-right: 1px solid #DEDEDE; border-right: 1px solid #DEDEDE;
color: #333333; color: #333333;
box-sizing: border-box; box-sizing: border-box;
} }
.tooltip-asset--ping{
height: 50px;
line-height: 50px !important;
}
.tooltip-asset--row .tooltip-asset--sub-rows{
display: flex;
justify-content: space-between;
flex-direction: column;
}
.tooltip-asset--sub-row { .tooltip-asset--sub-row {
padding-left: 10px; padding-left: 10px;
font-size: 13px; font-size: 13px;
@@ -506,7 +514,7 @@
.tooltip-alert { .tooltip-alert {
width: 96px; width: 96px;
height: 125px; height: 150px;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.12), -1px 1px 4px -1px rgba(205, 205, 205, 0.47); box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.12), -1px 1px 4px -1px rgba(205, 205, 205, 0.47);
.tooltip-alert--title { .tooltip-alert--title {
@@ -526,7 +534,7 @@
.tooltip-alert--row { .tooltip-alert--row {
padding: 0 10px; padding: 0 10px;
margin-bottom: 10px; margin-bottom: 18px;
height: 20px; height: 20px;
font-size: 12px; font-size: 12px;
display: flex; display: flex;

9
nezha-fronted/src/components/page/dashboard/overview/overview2.vue
View File

@@ -291,7 +291,7 @@
tooltip: { tooltip: {
x: 0, x: 0,
y: 0 y: 0
} },
} }
}, },
filters: { filters: {
@@ -989,6 +989,7 @@
} }
let shadowMarker=null; let shadowMarker=null;
let marker=null; let marker=null;
console.log(dcStat);
if(dcInfo.state==='ON'){ if(dcInfo.state==='ON'){
let hasAlert=dcStat.alertP1!=0||dcStat.alertP2!=0||dcStat.alertP3!=0||dcStat.assetPingDown!=0||dcStat.endpointDown!=0||dcStat.promDown!=0; let hasAlert=dcStat.alertP1!=0||dcStat.alertP2!=0||dcStat.alertP3!=0||dcStat.assetPingDown!=0||dcStat.endpointDown!=0||dcStat.promDown!=0;
shadowMarker=L.circleMarker([dcInfo.latitude,dcInfo.longitude], {opacity:0,fillOpacity: 0, radius: symbolSize+10}); shadowMarker=L.circleMarker([dcInfo.latitude,dcInfo.longitude], {opacity:0,fillOpacity: 0, radius: symbolSize+10});
@@ -1291,9 +1292,13 @@
<div class="sub-row--label">${this.$t("asset.notInStock")}</div> <div class="sub-row--label">${this.$t("asset.notInStock")}</div>
<div class="sub-row--value"><div class="sign red-sign"></div><span>${dcStat.assetOutStock}</span></div> <div class="sub-row--value"><div class="sign red-sign"></div><span>${dcStat.assetOutStock}</span></div>
</div> </div>
<div class="tooltip-asset--sub-row">
<div class="sub-row--label">${this.$t("asset.suspended")}</div>
<div class="sub-row--value"><div class="sign red-sign"></div><span>${dcStat.assetSuspended}</span></div>
</div>
</div> </div>
</div> </div>
<div class="tooltip-asset--row"> <div class="tooltip-asset--row tooltip-asset--ping ">
<div>${this.$t('asset.left.ping')}</div> <div>${this.$t('asset.left.ping')}</div>
<div class="tooltip-asset--sub-rows"> <div class="tooltip-asset--sub-rows">
<div class="tooltip-asset--sub-row"> <div class="tooltip-asset--sub-row">