monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 鲁尚清
Commit edd5e359f08e22f9985a58ca96a854f12f2f919e 1 parent 563e778b

基本信息展示状态时值的处理

Inline Side-by-side
Showing 1 changed file with 51 additions and 10 deletions
<template>
<div class="basicInformation-container" :style="styleObj" @click="closePressingDialog" @click.stop="visible = false">
<div class="basicInformation-container" :style="styleObj" @click.stop="closePressingDialog">
<div class="title-div" :style="styleColor" v-if="imgStyle.titleName || imgStyle.imageAdress">
<img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress" :style="imgStyle" alt="">
<div v-if="imgStyle.titleName" class="title-name" :style="fontStyle">
... ... @@ -15,8 +15,8 @@
<div v-if="optionsSetUp.isTableTitle" >
<el-row class="backColor" :style="bodyTitleStyle">
<el-col class="padding-10" :style="[tableTitleStyle]" aria-colspan="2">
<span v-if="!titleName" class="link-type" :style="tableTitleStyle" @click="goTrend(informationDataAll[0])">{{informationDataAll[0].name}}</span>
<span v-if="titleName" class="link-type" :style="tableTitleStyle" @click="goTrend({resId:resId,resType:resType})">{{titleName}}</span>
<span v-if="!titleName" class="link-type" :style="tableTitleStyle" @click.stop="goTrend(informationDataAll[0])">{{informationDataAll[0].name}}</span>
<span v-if="titleName" class="link-type" :style="tableTitleStyle" @click.stop="goTrend({resId:resId,resType:resType})">{{titleName}}</span>
<el-tooltip v-model="visible" :manual="true" placement="right-start">
<template #content>
<div class="basic-tbody-all basic-border-nowrap" :style="wrapStyle">
... ... @@ -24,7 +24,7 @@
<el-col :style="[lineHeightStyle]" v-if="(titleName?index>=0:index>0)" class="basic-border basic-item-title basic-flex" :span="10">
{{ item.name }}
</el-col>
<el-col v-if="(titleName?index>=0:index>0) " class="basic-border basic-flex basic-item-content" :span="14"><span>{{ item.value }}</span>
<el-col v-if="(titleName?index>=0:index>0) " class="basic-border basic-flex basic-item-content" :span="14"><span class="basic-ellipsis" v-html="item.value"></span>
</el-col>
</el-row>
</div>
... ... @@ -37,7 +37,7 @@
content="查看拓扑图"
placement="top"
>
<i :class="optionsSetUp.toop" v-if="optionsSetUp.isToop" @click="resTopo({resId:resId,resType:resType})"></i>
<i :class="optionsSetUp.toop" v-if="optionsSetUp.isToop" @click.stop="resTopo({resId:resId,resType:resType})"></i>
</el-tooltip>
</el-col>
</el-row>
... ... @@ -50,7 +50,13 @@
</el-col>
<!-- <el-col :style="bodyStyle" v-if="attrKey.attrKeyVal.indexOf(item.nameCode)>0 && index>0 " class="basic-border basic-flex basic-item-content" :span="14"><span>{{ item.value }}</span>-->
<el-col :style="[bodyStyle,borderStlye,lineHeightStyle,borderStyleRight(index)]" v-if="(titleName?index>=0:index>0) " class="basic-border basic-flex basic-item-content" :span="14">
<span :class="{'link-type':item.nameCode=='resName'}" @click="goTrend({resId:resId,resType:resType})">{{ item.value }}</span>
<el-tooltip :disabled ="showTitle" placement="top" >
<template #content>
<span v-html="item.value"></span>
</template>
<span @mouseover.stop="onShowNameTipsMouseenter" :class="['basic-ellipsis',{'link-type':item.nameCode=='resName'}]" @click.stop="goTrend({resId:resId,resType:resType})" v-html="item.value"></span>
</el-tooltip>
</el-col>
<!-- && attrKey.attrKeyVal.includes(item.nameCode)-->
... ... @@ -90,6 +96,8 @@
name: "basicInformationTwo",
data() {
return {
showTitle:true,//提示
tooltipTitle:'',//提示文本
titleName:'',//路由传递的名称
resType:'',//路由传递的资源类型
resId:'',//路由传递的资源id
... ... @@ -312,6 +320,17 @@
this.getTitleName();
},
methods: {
onShowNameTipsMouseenter(e) {
var target = e.target;
let textLength = target.clientWidth;
let containerLength = target.scrollWidth;
if (textLength < containerLength) {
this.tooltipTitle = e.target.innerText;
this.showTitle = false;
} else {
this.showTitle = true;
}
},
//右侧最后一个元素边框样式
borderStyleRight(index){
/* let border='none';
... ... @@ -381,6 +400,21 @@
if (this.informationDataAll && this.informationDataAll.length > 0) {
this.informationDataAll.map(item => {
if(/\[\{/.test(item.value)){
item.value= JSON.parse(item.value);
let str='';
item.value.map(item=>{
if(item.state.indexOf('成功')!=-1 || item.state.indexOf('正常')!=-1){
str+='<span class="span-green" style="color:#0BAC33;margin-right:10px;">'+item.protocol+':'+item.state+'</span>'
}else if(item.state.indexOf('失败')!=-1){
str+='<span class="span-red" style="color:#FF5722;">'+item.protocol+'：'+item.state+'</span>'
}else{
str+='<span class="span-default" style="margin-right:10px;">'+item.protocol+'：'+item.state+'</span>'
}
})
str+='</el-tooltip>'
item.value=str
}
if (item.value && typeof (item.value) != 'string' && item.value[0]) {
item.value =item.value[0].state;
}
... ... @@ -434,6 +468,7 @@
closePressingDialog() {
this.pressingVisible = false;
this.pressingVisibleTip = false;
this.visible = false;
},
//鼠标悬浮事件
mouseFun() {
... ... @@ -511,6 +546,12 @@
display: flex;
align-items: center;
justify-content: center;
}
.basic-ellipsis{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.title-div {
... ... @@ -570,10 +611,7 @@
display: flex;
align-items: center;
justify-content: space-around;
padding:10px;
/* .basic-item:nth-child(even) {
background-color: #f8f8f8;
}*/
padding:0 10px;
.basic-item {
border-top: 1px solid #f6f6f6;
... ... @@ -655,6 +693,9 @@
.span-green {
color: #0BAC33;
}
.span-red {
color: #FF5722;
}
.padding-10{
padding:10px;
}
... ...