monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by wangtao
Commit f6363d24b368c61443555e403aebf74e0fd206d0 2 parents a182f227 2d3ca7f7

Merge branch 'master' of http://113.200.75.45:82/monitor_v3/hg-monitor-web

Inline Side-by-side
Showing 5 changed files with 25 additions and 7 deletions
@@ -45,7 +45,7 @@ @@ -45,7 +45,7 @@
45 </div> 45 </div>
46 </div> 46 </div>
47 <div class="d-flex" style="flex: 1"> 47 <div class="d-flex" style="flex: 1">
48 - <div style="color: #666666;font-size: 16px;min-width: 80px">正常占比</div> 48 + <div style="color: #666666;font-size: 16px;margin-left:30px;min-width: 80px">正常占比</div>
49 <div class="progress-con"> 49 <div class="progress-con">
50 <el-progress :text-inside="true" :stroke-width="26" 50 <el-progress :text-inside="true" :stroke-width="26"
51 :percentage="dialTest && dialTest.normalProportion ? dialTest.normalProportion*100 : 0" 51 :percentage="dialTest && dialTest.normalProportion ? dialTest.normalProportion*100 : 0"
@@ -55,7 +55,7 @@ @@ -55,7 +55,7 @@
55 </div> 55 </div>
56 </div> 56 </div>
57 <div class="d-flex" style="flex: 1"> 57 <div class="d-flex" style="flex: 1">
58 - <div style="color: #666666;font-size: 16px;min-width: 80px">正常占比</div> 58 + <div style="color: #666666;font-size: 16px;margin-left:30px;min-width: 80px">正常占比</div>
59 <div class="progress-con"> 59 <div class="progress-con">
60 <el-progress :text-inside="true" :stroke-width="26" 60 <el-progress :text-inside="true" :stroke-width="26"
61 :percentage="dialTest && dialTest.normalProportion?dialTest.normalProportion*100:0" 61 :percentage="dialTest && dialTest.normalProportion?dialTest.normalProportion*100:0"
@@ -55,7 +55,7 @@ @@ -55,7 +55,7 @@
55 </div> 55 </div>
56 </div> 56 </div>
57 <div class="d-flex" style="flex: 1"> 57 <div class="d-flex" style="flex: 1">
58 - <div style="color: #666666;font-size: 16px;min-width: 80px">正常占比</div> 58 + <div style="color: #666666;font-size: 16px;margin-left:30px;min-width: 80px">正常占比</div>
59 <div class="progress-con"> 59 <div class="progress-con">
60 <el-progress :text-inside="true" :stroke-width="26" 60 <el-progress :text-inside="true" :stroke-width="26"
61 :percentage="dialTest && dialTest.normalProportion?dialTest.normalProportion*100:0" 61 :percentage="dialTest && dialTest.normalProportion?dialTest.normalProportion*100:0"
@@ -55,7 +55,7 @@ @@ -55,7 +55,7 @@
55 </div> 55 </div>
56 </div> 56 </div>
57 <div class="d-flex" style="flex: 1"> 57 <div class="d-flex" style="flex: 1">
58 - <div style="color: #666666;font-size: 16px;min-width: 80px">正常占比</div> 58 + <div style="color: #666666;font-size: 16px;margin-left:30px;min-width: 80px">正常占比</div>
59 <div class="progress-con"> 59 <div class="progress-con">
60 <el-progress :text-inside="true" :stroke-width="26" 60 <el-progress :text-inside="true" :stroke-width="26"
61 :percentage="dialTest && dialTest.normalProportion?dialTest.normalProportion*100:0" 61 :percentage="dialTest && dialTest.normalProportion?dialTest.normalProportion*100:0"
@@ -69,7 +69,12 @@ @@ -69,7 +69,12 @@
69 </div> 69 </div>
70 <div v-else v-for="item in cardData" style="width: 340px;"> 70 <div v-else v-for="item in cardData" style="width: 340px;">
71 <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;"> 71 <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;">
72 - <div class="text-overflow" style="width: 220px;margin-left: 40px;font-size: 16px">{{item.streamName}}</div> 72 + <div class="text-overflow" style="width: 220px;margin-left: 40px;font-size: 16px">
  73 +<!-- {{item.streamName}}-->
  74 + <el-tooltip ref="tlp" :content="item.streamName" placement="bottom" :disabled="item.isShowTooltip == undefined || item.isShowTooltip == false">
  75 + <span @mouseenter="visibilityChange($event,item)"> {{item.streamName}}</span>
  76 + </el-tooltip>
  77 + </div>
73 <div style="margin-top: 35px;"> 78 <div style="margin-top: 35px;">
74 <p style="width: 85%;text-align: left;padding-left: 50px;">业务量 79 <p style="width: 85%;text-align: left;padding-left: 50px;">业务量
75 <h class="text-link" style="margin-left: 6px;">{{item.busNum}}</h> 80 <h class="text-link" style="margin-left: 6px;">{{item.busNum}}</h>
@@ -117,7 +117,19 @@ export default { @@ -117,7 +117,19 @@ export default {
117 const openDiagnosticItem = (type) => { 117 const openDiagnosticItem = (type) => {
118 service.sendEventNormalDialog(emit, proxy.$global, props.faultNo, props.targetType.toLocaleLowerCase(), '',type); 118 service.sendEventNormalDialog(emit, proxy.$global, props.faultNo, props.targetType.toLocaleLowerCase(), '',type);
119 } 119 }
120 - 120 + const visibilityChange = (e, item) => {
  121 + const ev = e.target;
  122 + var ev_width = $(ev).scroll().width();//文本实际宽度
  123 + const content_width=proxy.$refs.tlp.$el.parentNode.clientWidth;//文本容器宽度
  124 + // 超过1行，显示悬浮
  125 + if (ev_width > content_width) {
  126 + // 文本实际宽度 > 文本容器宽度 文字溢出
  127 + item.isShowTooltip = true;
  128 + } else {
  129 + // 否则为不溢出
  130 + item.isShowTooltip = false;
  131 + }
  132 + }
121 // 挂载完 133 // 挂载完
122 Vue.onMounted(() => { 134 Vue.onMounted(() => {
123 getNpmList(); 135 getNpmList();
@@ -137,7 +149,8 @@ export default { @@ -137,7 +149,8 @@ export default {
137 openBusScenarios, 149 openBusScenarios,
138 openKpiList, 150 openKpiList,
139 openResPonse, 151 openResPonse,
140 - openDiagnosticItem 152 + openDiagnosticItem,
  153 + visibilityChange
141 } 154 }
142 } 155 }
143 } 156 }