优化低频中频高频内容显示样式

src/views/HealthControl/healthDetail/wtHealth/index.vue

@@ -70,28 +70,48 @@
               <div class="fan-code-type">
                 <div class="fan-code-type-item">
                   <div class="fan-code-label font-md gray-l">高频：</div>
-                  <!-- <div v-if="" class="fan-code-value font-md green">
+                  <div
+                    v-if="stoptypemap && stoptypemap.top1type.length < 12"
+                    class="fan-code-value font-md green"
+                  >
                     {{ stoptypemap && stoptypemap.top1type }}
-                  </div> -->
+                  </div>
                   <el-tooltip
+                    v-else
                     effect="dark"
                     :content="stoptypemap && stoptypemap.top1type"
                     placement="top-start"
                   >
-                    <div class="fan-code-value font-md green">
+                    <div class="fan-code-value font-md green text-ellipsis">
                       {{ stoptypemap && stoptypemap.top1type }}
                     </div>
                   </el-tooltip>
                 </div>
                 <div class="fan-code-type-item">
                   <div class="fan-code-label font-md gray-l">中频：</div>
-                  <div class="fan-code-value font-md green">
+                  <div
+                    v-if="stoptypemap && stoptypemap.top2type.length < 12"
+                    class="fan-code-value font-md green"
+                  >
                     {{ stoptypemap && stoptypemap.top2type }}
                   </div>
+                  <el-tooltip
+                    v-else
+                    effect="dark"
+                    :content="stoptypemap && stoptypemap.top2type"
+                    placement="top-start"
+                  >
+                    <div class="fan-code-value font-md green text-ellipsis">
+                      {{ stoptypemap && stoptypemap.top2type }}
+                    </div>
+                  </el-tooltip>
                 </div>
                 <div class="fan-code-type-item">
                   <div class="fan-code-label font-md gray-l">低频：</div>
-                  <div class="fan-code-value font-md green">
+                  <div
+                    v-if="stoptypemap && stoptypemap.top3type.length < 12"
+                    class="fan-code-value font-md green"
+                  >
                     {{
                       stoptypemap &&
                       (stoptypemap.top3type == "null"
@@ -99,23 +119,23 @@
                         : stoptypemap.top3type)
                     }}
                   </div>
+                  <el-tooltip
+                    v-else
+                    effect="dark"
+                    :content="stoptypemap && stoptypemap.top3type"
+                    placement="top-start"
+                  >
+                    <div class="fan-code-value font-md green text-ellipsis">
+                      {{
+                        stoptypemap &&
+                        (stoptypemap.top3type == "null"
+                          ? "暂无数据"
+                          : stoptypemap.top3type)
+                      }}
+                    </div>
+                  </el-tooltip>
                 </div>
-              </div>
-              <!-- <div
-                class="fan-code-label font-md gray-l"
-                style="margin-left: 20px"
-              >
-                高频：
-              </div>
-              <el-tooltip
-                effect="dark"
-                :content="stoptypemap && stoptypemap.top1type"
-                placement="top-start"
-              >
-                <div class="fan-code-value font-md green">
-                  {{ stoptypemap && stoptypemap.top1type }}
-                </div>
-              </el-tooltip> -->
+              </div>  
             </div>
             <!-- <span class="svg-icon svg-icon-white svg-icon-md mg-l-16">
               <SvgIcon svgid="svg-wind-site"></SvgIcon>
@@ -1027,6 +1047,12 @@ button {
           margin-left: 0;
         }
       }
+      .text-ellipsis {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        -o-text-overflow: ellipsis;
+      }
     }
   }