feat:新增asset endpoint 列点击悬浮窗
This commit is contained in:
bsdbc
@@ -217,18 +217,18 @@ const en = {
|
||||
title:'New Datacenter',//'新增DC'
|
||||
dcName:'Datacenter name',//'DC名称'
|
||||
location:'Location',//'地区'
|
||||
principal:'Principal',//'负责人'
|
||||
principal:'Administrator',//'负责人'
|
||||
tel:'Telephone'//'电话'
|
||||
},
|
||||
editIdcTab:{
|
||||
title:'Edit Datacenter',//'编辑DC'
|
||||
dcName:'Datacenter name',//'DC名称'
|
||||
location:'Location',//'地区'
|
||||
principal:'Principal',//'负责人'
|
||||
principal:'Administrator',//'负责人'
|
||||
tel:'Telephone'//'电话'
|
||||
},
|
||||
location:'Location',//'地区'
|
||||
principal:'Principal',//'负责人'
|
||||
principal:'Administrator',//'负责人'
|
||||
tel:'Telephone',//'电话'
|
||||
cabinet: 'Cabinet',//'机柜'
|
||||
AddCabinetTab:{
|
||||
@@ -284,18 +284,18 @@ const en = {
|
||||
title:'New Datacenter',//'新增DC'
|
||||
dcName:'DC name',//'DC名称'
|
||||
location:'Location',//'地区'
|
||||
principal:'Principal',//'负责人'
|
||||
principal:'Administrator',//'负责人'
|
||||
tel:'Telephone'//'电话'
|
||||
},
|
||||
editIdcTab:{
|
||||
title:'Edit DC',//'编辑DC'
|
||||
dcName:'DC name',//'DC名称'
|
||||
location:'Location',//'地区'
|
||||
principal:'Principal',//'负责人'
|
||||
principal:'Administrator',//'负责人'
|
||||
tel:'Telephone'//'电话'
|
||||
},
|
||||
location:'Location',//'地区'
|
||||
principal:'Principal',//'负责人'
|
||||
principal:'Administrator',//'负责人'
|
||||
tel:'Telephone',//'电话'
|
||||
cabinet: 'Cabinet',//'机柜'
|
||||
AddCabinetTab:{
|
||||
@@ -337,7 +337,7 @@ const en = {
|
||||
model: 'Model',//'型号'
|
||||
manufacturer: 'Manufacturer',//'厂商'
|
||||
procurementDate: 'Purchase date',//'购买日期'
|
||||
principal: 'Principal',//'负责人'
|
||||
principal: 'Administrator',//'负责人'
|
||||
principalTel: 'Telephone',//'电话'
|
||||
option: 'Operation'//"操作"
|
||||
},
|
||||
|
||||
@@ -86,7 +86,7 @@
|
||||
<div v-if="item.prop == 'pingStatus'">
|
||||
<el-popover
|
||||
placement="right"
|
||||
width="50"
|
||||
width="200"
|
||||
trigger="hover"
|
||||
:content="formatPingTime(scope.row.pingLastUpdate)">
|
||||
<div slot="reference" style="width: 20px">
|
||||
@@ -96,15 +96,20 @@
|
||||
</div>
|
||||
<template v-if="item.prop=='Module'">
|
||||
<template v-if="scope.row.moduleNum > 0" >
|
||||
<module-list-pop :asset-id="scope.row.id + ''" @openModuleBox="openModuleBox" placement="left" :ref="'moduleListPop' + scope.row.id">
|
||||
<endpoint-status-pop :asset-id="scope.row.id" :ref="'endpointPop' + scope.row.id">
|
||||
<template v-slot:optionZone>
|
||||
<!-- <button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75">{{scope.row.moduleNum}}</button>-->
|
||||
<span class="clickable">{{scope.row.endpointNum}}</span>
|
||||
</template>
|
||||
</endpoint-status-pop>
|
||||
<!--<module-list-pop :asset-id="scope.row.id + ''" @openModuleBox="openModuleBox" placement="left" :ref="'moduleListPop' + scope.row.id">
|
||||
<template v-slot:optionZone>
|
||||
<!– <button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75">{{scope.row.moduleNum}}</button>–>
|
||||
<span class="clickable">{{scope.row.moduleNum}}</span>
|
||||
</template>
|
||||
</module-list-pop>
|
||||
</module-list-pop>-->
|
||||
</template>
|
||||
<!-- <button type="button" v-else class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 nz-btn-disabled">{{scope.row.moduleNum}}</button>-->
|
||||
<span v-else class="unclickable">{{scope.row.moduleNum}}</span>
|
||||
<span v-else class="unclickable">{{scope.row.endpointNum}}</span>
|
||||
</template>
|
||||
<template v-if="item.prop=='Alert'">
|
||||
<!-- <button type="button" v-if="scope.row.alertNum > 0" id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row.id)" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75">{{scope.row.alertNum}}</button>-->
|
||||
@@ -195,9 +200,13 @@
|
||||
<script>
|
||||
import bus from "../../../libs/bus";
|
||||
import exportXLSX from "../../common/exportXLSX";
|
||||
import endpointStatusPop from "./endpointStatusPop";
|
||||
export default {
|
||||
name: "asset",
|
||||
components:{'export-excel':exportXLSX},
|
||||
components:{
|
||||
'export-excel':exportXLSX,
|
||||
'endpoint-status-pop':endpointStatusPop
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchMsg: { //给搜索框子组件传递的信息
|
||||
@@ -301,11 +310,11 @@
|
||||
}, {
|
||||
label: this.$t("asset.tableTitle.principal"),
|
||||
prop: 'principal',
|
||||
show: true,
|
||||
show: false,
|
||||
}, {
|
||||
label: this.$t("asset.tableTitle.principalTel"),
|
||||
prop: 'tel',
|
||||
show: true,
|
||||
show: false,
|
||||
width: 115
|
||||
}, {
|
||||
label: this.$t('config.account.option'),
|
||||
@@ -712,7 +721,7 @@
|
||||
},
|
||||
formatPingTime:function(str){
|
||||
if(!str || str == ''){
|
||||
return 'Never';
|
||||
return 'Last reply:Never';
|
||||
}
|
||||
let ds='-';
|
||||
let ts=':';
|
||||
@@ -724,7 +733,7 @@
|
||||
let minutes=time.getMinutes() > 9 ?time.getMinutes():('0'+time.getMinutes());
|
||||
let seconds=time.getSeconds() > 9 ? time.getSeconds():('0'+time.getSeconds());
|
||||
|
||||
return year+ds+month+ds+day+' '+hours+ts+minutes+ts+seconds;
|
||||
return 'Last reply:'+year+ds+month+ds+day+' '+hours+ts+minutes+ts+seconds;
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
248
nezha-fronted/src/components/page/asset/endpointStatusPop.vue
Normal file
248
nezha-fronted/src/components/page/asset/endpointStatusPop.vue
Normal file
@@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<el-popover :placement="placement" width="300" @hide="" ref="endpointPop" v-model="popBox.show" popper-class="nz-pop" @show="atShowPop">
|
||||
<div class="pop-box-title">
|
||||
<div class="pop-top-btns">
|
||||
<button type="button" @click="esc" class="nz-btn nz-btn-size-alien nz-btn-size-small nz-btn-style-light nz-btn-min-width-35" id="dc-esc">
|
||||
<span class="pop-top-btn-icon"><i class="el-icon-close"></i></span>
|
||||
<span class="pop-top-btn-txt">{{$t('overall.esc')}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="pop-title">{{popBox.title}}</div>
|
||||
</div>
|
||||
|
||||
<div class="pop-body">
|
||||
<div class="pop-body_title">{{showProject?showProject.name:''}}</div>
|
||||
<div class="pop-body_content">
|
||||
<el-table
|
||||
:data="modules"
|
||||
:show-header="false"
|
||||
:row-key="getRowKeys"
|
||||
:expand-row-keys="expands"
|
||||
@expand-change="expandSelect"
|
||||
@row-click="clickTabRow"
|
||||
ref="popTab"
|
||||
style="width: 100%;"
|
||||
class="pop-box-table">
|
||||
<el-table-column >
|
||||
<template slot-scope="scope" :column="item">
|
||||
<span class="link" @click="" >{{scope.row.name}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column type="expand">
|
||||
<template slot-scope="props">
|
||||
<div class="table-inner">
|
||||
<template v-for="(item,index) in filterEndpoints()">
|
||||
<div class="inner-row">
|
||||
<div class="inner-col left">ID：{{item.id}}</div>
|
||||
<div class="inner-col right">
|
||||
<el-popover placement="right" width="50" trigger="hover" :content="(item.state == 1?'up':'down')+'['+(item.lastUpdate&&item.lastUpdate!=''?(new Date(item.lastUpdate).getHours()+':'+new Date(item.lastUpdate).getMinutes()):'--')+']'" >
|
||||
<div slot="reference" style="width: 20px">
|
||||
<div @mouseover="resetZIndex" :class="{'active-icon green':item.state == 1,'active-icon red':item.state == 0}"></div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<template slot="reference">
|
||||
<div @click.prevent="">
|
||||
<slot name="optionZone"><div class="tab-input-square link">0</div></slot>
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "endpointStatusPop",
|
||||
props:{
|
||||
placement:{type:String,default:'left'},
|
||||
assetId:{type:Number,required:true}
|
||||
},
|
||||
data(){
|
||||
let temp=this;
|
||||
return{
|
||||
popBox:{title:this.$t('project.endpoint.endpoint'),show:false},
|
||||
endpointDatas:[],
|
||||
endpoints:[],
|
||||
modules:[],
|
||||
projects:new Map(),
|
||||
showModule:null,
|
||||
showProject:null,
|
||||
getRowKeys(row) {
|
||||
if(temp.showModule&&row.id==temp.showModule.id){
|
||||
temp.$refs.popTab.toggleRowExpansion(row,true);
|
||||
}
|
||||
return row.id
|
||||
},
|
||||
expands:[],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
getEndpointDatas:function(){
|
||||
this.$get('/endpoint?assetId='+this.assetId+'pageSize=-1').then(response => {
|
||||
if (response.code === 200) {
|
||||
this.endpointDatas = response.data.list;
|
||||
this.dealDatas(JSON.parse(JSON.stringify(this.endpointDatas)));
|
||||
}
|
||||
});
|
||||
},
|
||||
dealDatas:function(endpointDatas){ //为方便组织结构，将数据分层
|
||||
let temp=this;
|
||||
temp.endpoints=[];
|
||||
temp.modules=[];
|
||||
temp.projects.clear();
|
||||
temp.showModule=null;
|
||||
temp.showProject=null;
|
||||
endpointDatas.forEach((item,index)=>{
|
||||
let module=JSON.parse(JSON.stringify(item.module));
|
||||
module.projectId=item.project.id;
|
||||
temp.modules.push(module);
|
||||
let project=JSON.parse(JSON.stringify(item.project));
|
||||
temp.projects.set(project.id,project);
|
||||
delete item.module;
|
||||
delete item.project;
|
||||
temp.endpoints.push(item);
|
||||
})
|
||||
this.modules=this.duplicateRemoval(this.modules);
|
||||
this.initShow();
|
||||
},
|
||||
duplicateRemoval:function(arr){
|
||||
const res = new Map();
|
||||
return arr.filter(a=>{
|
||||
return !res.has(a.id) && res.set(a.id,1);
|
||||
})
|
||||
},
|
||||
initShow:function(){
|
||||
if(!this.showModule){
|
||||
this.showModule=this.modules[0];
|
||||
}
|
||||
},
|
||||
filterEndpoints:function(){
|
||||
if(this.showModule){
|
||||
return this.endpoints.filter((item)=>{
|
||||
return item.moduleId==this.showModule.id;
|
||||
})
|
||||
}
|
||||
},
|
||||
expandSelect(row, expandedRows) {//只能展开一行
|
||||
this.expands = []
|
||||
if (expandedRows.length > 0) {
|
||||
row ? this.expands.push(row.id) : '';
|
||||
this.showModule=row;
|
||||
this.showProject=this.projects.get(row.projectId);
|
||||
}
|
||||
},
|
||||
esc:function(){
|
||||
this.popBox.show=false;
|
||||
},
|
||||
resetZIndex:function(e){
|
||||
let popId=e.target.parentElement.getAttribute('aria-describedby');
|
||||
let pop=document.getElementById(popId);
|
||||
setTimeout(function(){
|
||||
pop.style.zIndex=999999;
|
||||
},100)
|
||||
},
|
||||
atShowPop:function(){
|
||||
this.getEndpointDatas();
|
||||
},
|
||||
clickTabRow:function(row, column, event){
|
||||
this.$refs.popTab.toggleRowExpansion(row);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
watch:{
|
||||
showModule:{
|
||||
handler(n,o){
|
||||
if(!n){
|
||||
n=this.modules && this.modules.length>0?this.modules[0]:null;
|
||||
}
|
||||
this.showProject=this.projects.get(n.projectId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pop-box-title{
|
||||
margin-left: 5px;
|
||||
}
|
||||
.pop-top-btns {
|
||||
text-align: center;
|
||||
float: right;
|
||||
padding-right: 12px;
|
||||
}
|
||||
.pop-body{
|
||||
margin:10px 10px 10px 10px;
|
||||
border: 1px solid lightgrey;
|
||||
height: 400px;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.pop-body .pop-body_title{
|
||||
line-height: 25px;
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.pop-body .pop-body_content{
|
||||
border-top:1px solid lightgrey;
|
||||
box-shadow: 0px 0px 5px lightgrey inset;
|
||||
border-radius: inherit;
|
||||
height: calc(100% - 25px);
|
||||
}
|
||||
.pop-box-table{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.table-inner{
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
.table-inner .inner-row{
|
||||
display: flex;
|
||||
line-height: 20px;
|
||||
}
|
||||
.table-inner .inner-row:hover {
|
||||
background-color: white;
|
||||
}
|
||||
.table-inner .inner-col{
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
.left{
|
||||
flex: 8 !important;
|
||||
padding-left: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.right{
|
||||
position: relative;
|
||||
}
|
||||
.active-icon{
|
||||
margin-top:0px;
|
||||
width:10px;
|
||||
height:10px;
|
||||
border-radius:50%;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.el-table td,.el-table th{
|
||||
padding: 0px;
|
||||
}
|
||||
.el-table__expanded-cell[class*=cell] {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user