Authored by wangtao

样式调整

@@ -210,6 +210,15 @@ a { @@ -210,6 +210,15 @@ a {
210 text-overflow: ellipsis; 210 text-overflow: ellipsis;
211 white-space: nowrap; 211 white-space: nowrap;
212 } 212 }
  213 +
  214 +.text-overflow-line2{
  215 + word-break: break-all;
  216 + overflow: hidden;
  217 + text-overflow: ellipsis;
  218 + display: -webkit-box;
  219 + -webkit-box-orient: vertical;
  220 + -webkit-line-clamp: 2;
  221 +}
213 /*下划线*/ 222 /*下划线*/
214 .text-link{ 223 .text-link{
215 text-decoration: underline; 224 text-decoration: underline;
@@ -71,7 +71,19 @@ @@ -71,7 +71,19 @@
71 style="width: 100px;height: 100px;border-radius: 100px;margin: 0px auto 10px;margin-top: 10px;color: white;line-height: 100px;text-align: center;"> 71 style="width: 100px;height: 100px;border-radius: 100px;margin: 0px auto 10px;margin-top: 10px;color: white;line-height: 100px;text-align: center;">
72 <span>{{item.shortName}}</span> 72 <span>{{item.shortName}}</span>
73 </div> 73 </div>
74 - <p style="text-align: center;word-break: break-all;padding: 0px 25px;">{{item.taskName}}</p> 74 + <div class="text-overflow-line2 align-center" style="padding: 0px 25px;">
  75 + <!--<el-tooltip
  76 + effect="light"
  77 + placement="top-start">
  78 + <template #content>
  79 + {{item.taskName}}
  80 + </template>
  81 + {{item.taskName}}
  82 + </el-tooltip>-->
  83 + <el-tooltip :content="item.taskName" placement="bottom" effect="light" :disabled="item.isShowTooltip && item.isShowTooltip == true">
  84 + <span class="member-label member-span text-hidden" @mouseenter="visibilityChange($event,item)"> {{item.taskName}}</span>
  85 + </el-tooltip>
  86 + </div>
75 </div> 87 </div>
76 </div> 88 </div>
77 </div> 89 </div>
@@ -107,6 +107,20 @@ export default { @@ -107,6 +107,20 @@ export default {
107 service.sendEventNormalDialog(emit, proxy.$global, props.faultNo, props.targetType.toLocaleLowerCase(), '',type); 107 service.sendEventNormalDialog(emit, proxy.$global, props.faultNo, props.targetType.toLocaleLowerCase(), '',type);
108 } 108 }
109 109
  110 + const visibilityChange = (e,item) => {
  111 + const ev = e.target;
  112 + const ev_weight = ev.scrollWidth;
  113 + const content_weight = ev.target.offsetWidth;
  114 +
  115 + if (ev_weight > content_weight) {
  116 + // 实际宽度 > 可视宽度 文字溢出
  117 + item.isShowTooltip = true;
  118 + } else {
  119 + // 否则为不溢出
  120 + item.isShowTooltip = false;
  121 + }
  122 + }
  123 +
110 // 挂载完 124 // 挂载完
111 Vue.onMounted(() => { 125 Vue.onMounted(() => {
112 getDialtestList(); 126 getDialtestList();
@@ -124,7 +138,8 @@ export default { @@ -124,7 +138,8 @@ export default {
124 openBusScenarios, 138 openBusScenarios,
125 openKpiList, 139 openKpiList,
126 getFaultItemValue: service.getFaultItemValue, 140 getFaultItemValue: service.getFaultItemValue,
127 - openDiagnosticItem 141 + openDiagnosticItem,
  142 + visibilityChange
128 } 143 }
129 } 144 }
130 } 145 }