monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 2d3ca7f7c596e160ef9dcb3f108a9bdfa08cae87 2 parents a38d8df2 75a05288

Merge branch 'master-v32-lushangqing' into 'master' 

故障诊断中的npm的展开的卡片中标题文本超出悬浮提示



See merge request !812
Inline Side-by-side
Showing 5 changed files with 25 additions and 7 deletions
... ... @@ -45,7 +45,7 @@
</div>
</div>
<div class="d-flex" style="flex: 1">
<div style="color: #666666;font-size: 16px;min-width: 80px">正常占比</div>
<div style="color: #666666;font-size: 16px;margin-left:30px;min-width: 80px">正常占比</div>
<div class="progress-con">
<el-progress :text-inside="true" :stroke-width="26"
:percentage="dialTest && dialTest.normalProportion ? dialTest.normalProportion*100 : 0"
... ...
... ... @@ -55,7 +55,7 @@
</div>
</div>
<div class="d-flex" style="flex: 1">
<div style="color: #666666;font-size: 16px;min-width: 80px">正常占比</div>
<div style="color: #666666;font-size: 16px;margin-left:30px;min-width: 80px">正常占比</div>
<div class="progress-con">
<el-progress :text-inside="true" :stroke-width="26"
:percentage="dialTest && dialTest.normalProportion?dialTest.normalProportion*100:0"
... ...
... ... @@ -55,7 +55,7 @@
</div>
</div>
<div class="d-flex" style="flex: 1">
<div style="color: #666666;font-size: 16px;min-width: 80px">正常占比</div>
<div style="color: #666666;font-size: 16px;margin-left:30px;min-width: 80px">正常占比</div>
<div class="progress-con">
<el-progress :text-inside="true" :stroke-width="26"
:percentage="dialTest && dialTest.normalProportion?dialTest.normalProportion*100:0"
... ...
... ... @@ -55,7 +55,7 @@
</div>
</div>
<div class="d-flex" style="flex: 1">
<div style="color: #666666;font-size: 16px;min-width: 80px">正常占比</div>
<div style="color: #666666;font-size: 16px;margin-left:30px;min-width: 80px">正常占比</div>
<div class="progress-con">
<el-progress :text-inside="true" :stroke-width="26"
:percentage="dialTest && dialTest.normalProportion?dialTest.normalProportion*100:0"
... ... @@ -69,7 +69,12 @@
</div>
<div v-else v-for="item in cardData" style="width: 340px;">
<div style="width: 340px;min-height: 184px;background: url('../src/style/img/fault/npm/npmCard.png') no-repeat;background-size: 100% 100%;padding-top: 20px;margin-bottom: 26px;box-sizing: border-box;">
<div class="text-overflow" style="width: 220px;margin-left: 40px;font-size: 16px">{{item.streamName}}</div>
<div class="text-overflow" style="width: 220px;margin-left: 40px;font-size: 16px">
<!-- {{item.streamName}}-->
<el-tooltip ref="tlp" :content="item.streamName" placement="bottom" :disabled="item.isShowTooltip == undefined || item.isShowTooltip == false">
<span @mouseenter="visibilityChange($event,item)"> {{item.streamName}}</span>
</el-tooltip>
</div>
<div style="margin-top: 35px;">
<p style="width: 85%;text-align: left;padding-left: 50px;">业务量
<h class="text-link" style="margin-left: 6px;">{{item.busNum}}</h>
... ...
... ... @@ -117,7 +117,19 @@ export default {
const openDiagnosticItem = (type) => {
service.sendEventNormalDialog(emit, proxy.$global, props.faultNo, props.targetType.toLocaleLowerCase(), '',type);
}
const visibilityChange = (e, item) => {
const ev = e.target;
var ev_width = $(ev).scroll().width();//文本实际宽度
const content_width=proxy.$refs.tlp.$el.parentNode.clientWidth;//文本容器宽度
// 超过1行，显示悬浮
if (ev_width > content_width) {
// 文本实际宽度 > 文本容器宽度 文字溢出
item.isShowTooltip = true;
} else {
// 否则为不溢出
item.isShowTooltip = false;
}
}
// 挂载完
Vue.onMounted(() => {
getNpmList();
... ... @@ -137,7 +149,8 @@ export default {
openBusScenarios,
openKpiList,
openResPonse,
openDiagnosticItem
openDiagnosticItem,
visibilityChange
}
}
}
... ...