修复内容重叠

src/views/HealthControl/healthDetail/index.vue

@@ -1,33 +1,31 @@
 <template>
-  <div class="wind-site">
-    <div class="page-common-body">
-      <div class="page-common-body-router">
-        <router-view @getWtid="getWtid" />
-      </div>
-      <div v-if="!hidden" class="page-common-body-menu">
-        <div class="page-common-body-menu-box">
-          <div class="page-common-body-menu-border left top"></div>
-          <div class="page-common-body-menu-border left bottom"></div>
-          <div class="page-common-body-menu-border right top"></div>
-          <div class="page-common-body-menu-border right bottom"></div>
-          <div
-            class="page-common-body-menu-item"
-            v-for="(menuData, index) of menuDatas"
-            :key="index"
-            @click="clickMenu(index)"
-            :class="{ active: activeIndex == index }"
-          >
-            <router-link :to="menuData.path">
-              <span
-                class="svg-icon"
-                :class="
-                  activeIndex == index ? 'svg-icon-yellow' : 'svg-icon-green'
-                "
-              >
-                <SvgIcon :svgid="menuData.icon"></SvgIcon>
-              </span>
-            </router-link>
-          </div>
+  <div class="page-common-body">
+    <div class="page-common-body-router">
+      <router-view @getWtid="getWtid" />
+    </div>
+    <div v-if="!hidden" class="page-common-body-menu">
+      <div class="page-common-body-menu-box">
+        <div class="page-common-body-menu-border left-top"></div>
+        <div class="page-common-body-menu-border left-bottom"></div>
+        <div class="page-common-body-menu-border right-top"></div>
+        <div class="page-common-body-menu-border right-bottom"></div>
+        <div
+          class="page-common-body-menu-item"
+          v-for="(menuData, index) of menuDatas"
+          :key="index"
+          @click="clickMenu(index)"
+          :class="{ active: activeIndex == index }"
+        >
+          <router-link :to="menuData.path">
+            <span
+              class="svg-icon"
+              :class="
+                activeIndex == index ? 'svg-icon-yellow' : 'svg-icon-green'
+              "
+            >
+              <SvgIcon :svgid="menuData.icon"></SvgIcon>
+            </span>
+          </router-link>
         </div>
       </div>
     </div>
@@ -86,12 +84,12 @@ export default {
 
   methods: {
     getWtid(id, from) {
-    //   this.wtId = id;
-    //   if (from && from == "wpHealth") {
-    //     this.menuDatas.forEach((ele) => {
-    //       ele.path += "/" + this.wpId + "/" + id;
-    //     });
-    //   }
+      //   this.wtId = id;
+      //   if (from && from == "wpHealth") {
+      //     this.menuDatas.forEach((ele) => {
+      //       ele.path += "/" + this.wpId + "/" + id;
+      //     });
+      //   }
     },
     clickMenu: function (index) {
       this.activeIndex = index;
@@ -101,86 +99,87 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.wind-site {
-  .page-common-body {
-    display: flex;
-    flex-direction: row;
-    margin-top: 10px;
-
-    .page-common-body-router {
-      overflow: auto;
-      overflow-x: hidden;
-      height: calc(100vh - 7.037vh);
-      flex: 1 1 auto;
-    }
-
-    .page-common-body-menu {
-      width: 7.407vh;
-      padding: 0 1.481vh 1.481vh 1.481vh;
-
-      .page-common-body-menu-box {
-        border: 0.093vh solid @darkgray;
-        background-color: fade(@darkgray, 30%);
-        padding: 2.222vh 0.185vh;
-        position: relative;
-
-        .page-common-body-menu-border {
-          position: absolute;
-          width: 0.37vh;
-          height: 0.37vh;
-          background-color: @write;
-          border-radius: 50%;
-
-          &.left {
-            left: -0.185vh;
-          }
-
-          &.right {
-            right: -0.185vh;
-          }
-
-          &.top {
-            top: -0.185vh;
-          }
+.page-common-body {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+ padding-top: 10px;
+
+  .page-common-body-router {
+    overflow: auto;
+    overflow-x: hidden;
+    height: calc(100% - 10px);
+    flex: 1 1 auto;
+  }
 
-          &.bottom {
-            bottom: -0.185vh;
-          }
+  .page-common-body-menu {
+    padding: 0 12px 12px 12px;
+
+    .page-common-body-menu-box {
+      border: 1px solid @darkgray;
+      background-color: fade(@darkgray, 30%);
+      padding: 20px 5px;
+      position: relative;
+
+      .page-common-body-menu-border {
+        position: absolute;
+        width: 3px;
+        height: 3px;
+        background-color: @write;
+        border-radius: 50%;
+
+        &.left-top {
+          left: 0;
+          top: 0;
         }
 
-        .page-common-body-menu-item {
-          border: 0.093vh solid fade(@green, 40%);
-          width: 3.889vh;
-          height: 3.889vh;
-          border-radius: 0.278vh;
-          margin-top: 10px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
+        &.left-bottom {
+          left: 0;
+          bottom: 0;
+        }
 
-          a {
-            line-height: 0;
-          }
+        &.right-top {
+          right: 0;
+          top: 0;
+        }
+        &.right-bottom {
+          right: 0;
+          bottom: 0;
+        }
+      }
 
-          &:first-child {
-            margin-top: 0;
-          }
+      .page-common-body-menu-item {
+        border: 1px solid fade(@green, 40%);
+        width: 40px;
+        height: 40px;
+        border-radius: 5px;
+        margin-top: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+
+        a {
+          line-height: 0;
+        }
 
-          &.active {
-            border-color: fade(@yellow, 40%);
-            position: relative;
+        &:first-child {
+          margin-top: 0;
+        }
 
-            &::after {
-              content: "";
-              width: calc(100% - 0.37vh);
-              height: calc(100% - 0.37vh);
-              position: absolute;
-              border: 0.093vh solid @yellow;
-              box-shadow: 0 0 0.37vh @yellow;
-              top: 0.093vh;
-              left: 0.093vh;
-            }
+        &.active {
+          border-color: fade(@yellow, 40%);
+          position: relative;
+
+          &::after {
+            content: "";
+            width: calc(100% - 2px);
+            height: calc(100% - 2px);
+            position: absolute;
+            border: 1px solid @yellow;
+            box-shadow: 0 0 2px @yellow;
+            top: 1px;
+            left: 1px;
           }
         }
       }

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

@@ -333,7 +333,7 @@ export default {
       display: flex;
       flex-direction: column;
       height: 287px;
-      margin-right: 1.4815vh;
+      margin-right: 15px;
 
       .tab {
         position: relative;

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

@@ -1,7 +1,7 @@
 <template>
   <div class="health-0">
-    <el-row>
-      <el-col :span="14">
+    <el-row style="height: 100%">
+      <el-col :span="14" class="health-0-left">
         <el-row>
           <el-col :span="24">
             <div class="query mg-b-8">
@@ -67,38 +67,55 @@
               >
                 {{ getWpName(value2) }}
               </div>
-              <div
+              <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">
+                    {{ stoptypemap && stoptypemap.top1type }}
+                  </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 class="fan-code-type-item">
+                  <div class="fan-code-label font-md gray-l">中频：</div>
+                  <div class="fan-code-value font-md green">
+                    {{ stoptypemap && stoptypemap.top2type }}
+                  </div>
+                </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">
+                    {{
+                      stoptypemap &&
+                      (stoptypemap.top3type == "null"
+                        ? "暂无数据"
+                        : stoptypemap.top3type)
+                    }}
+                  </div>
+                </div>
+              </div>
+              <!-- <div
                 class="fan-code-label font-md gray-l"
                 style="margin-left: 20px"
               >
                 高频：
               </div>
-              <div class="fan-code-value font-md green">
-                {{ stoptypemap && stoptypemap.top1type }}
-              </div>
-              <div
-                class="fan-code-label font-md gray-l"
-                style="margin-left: 100px"
+              <el-tooltip
+                effect="dark"
+                :content="stoptypemap && stoptypemap.top1type"
+                placement="top-start"
               >
-                中频：
-              </div>
-              <div class="fan-code-value font-md green">
-                {{ stoptypemap && stoptypemap.top2type }}
-              </div>
-              <div
-                class="fan-code-label font-md gray-l"
-                style="margin-left: 65px"
-              >
-                低频：
-              </div>
-              <div class="fan-code-value font-md green">
-                {{
-                  stoptypemap &&
-                  (stoptypemap.top3type == "null"
-                    ? "暂无数据"
-                    : stoptypemap.top3type)
-                }}
-              </div>
+                <div class="fan-code-value font-md green">
+                  {{ stoptypemap && stoptypemap.top1type }}
+                </div>
+              </el-tooltip> -->
             </div>
             <!-- <span class="svg-icon svg-icon-white svg-icon-md mg-l-16">
               <SvgIcon svgid="svg-wind-site"></SvgIcon>
@@ -127,8 +144,8 @@
             ></StandAloneImg>
           </el-col>
         </el-row>
-        <el-row>
-          <el-col :span="6">
+        <el-row style="flex: 1">
+          <el-col :span="6" style="padding-left: 16px">
             <img :src="bsxImg" class="bsx" />
             <img :src="bsxImg" class="bsx o" />
           </el-col>
@@ -142,9 +159,8 @@
               :color="stoptypemap && color('05bb4c')"
             ></progress-bar>
           </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="6" class="mg-t-16">
+
+          <el-col :span="6">
             <progress-bar
               title="发电机"
               name="寿命指数"
@@ -152,7 +168,7 @@
               :color="partmap && color(partmap.fdj.jkzt)"
             ></progress-bar>
           </el-col>
-          <el-col :span="6" class="mg-t-16">
+          <el-col :span="6">
             <progress-bar
               title="齿轮箱"
               name="寿命指数"
@@ -160,7 +176,7 @@
               :color="partmap && color(partmap.clx.jkzt)"
             ></progress-bar>
           </el-col>
-          <el-col :span="6" class="mg-t-16">
+          <el-col :span="6">
             <progress-bar
               title="主轴"
               name="寿命指数"
@@ -168,7 +184,7 @@
               :color="partmap && color(partmap.zz.jkzt)"
             ></progress-bar>
           </el-col>
-          <el-col :span="6" class="mg-t-16">
+          <el-col :span="6">
             <progress-bar
               title="变桨"
               name="寿命指数"
@@ -176,9 +192,8 @@
               :color="partmap && color(partmap.bj.jkzt)"
             ></progress-bar>
           </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="6" class="mg-t-16">
+
+          <el-col :span="6">
             <progress-bar
               title="偏航"
               name="寿命指数"
@@ -186,7 +201,7 @@
               :color="partmap && color(partmap.ph.jkzt)"
             ></progress-bar>
           </el-col>
-          <el-col :span="6" class="mg-t-16">
+          <el-col :span="6">
             <progress-bar
               title="机舱"
               name="寿命指数"
@@ -194,7 +209,7 @@
               :color="partmap && color(partmap.jc.jkzt)"
             ></progress-bar>
           </el-col>
-          <el-col :span="6" class="mg-t-16">
+          <el-col :span="6">
             <progress-bar
               title="变频器"
               name="寿命指数"
@@ -202,7 +217,7 @@
               :color="partmap && color(partmap.bpq.jkzt)"
             ></progress-bar>
           </el-col>
-          <el-col :span="6" class="mg-t-16">
+          <el-col :span="6">
             <progress-bar
               title="主控"
               name="寿命指数"
@@ -956,8 +971,12 @@ button {
 }
 .health-0 {
   width: 100%;
-  height: calc(100% - 90px);
+  height: 100%;
 
+  .health-0-left {
+    display: flex;
+    flex-direction: column;
+  }
   .fan-code-box {
     display: flex;
     align-items: center;
@@ -967,7 +986,7 @@ button {
       display: flex;
       align-items: center;
       background: #53626833;
-      padding: 7px 20px;
+      padding: 7px 20px 7px 0;
 
       &.bg {
         background: transparent;
@@ -979,25 +998,30 @@ button {
       }
 
       .fan-code-text {
-        padding-right: 20px;
+        width: 45px;
+        text-align: center;
         border-right: 1px solid #536268;
         // overflow: hidden;
         // text-overflow:ellipsis;
         white-space: nowrap;
       }
-
+      .fan-code-type {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-evenly;
+        .fan-code-type-item {
+          width: calc((100% / 3) - 10px);
+          display: flex;
+          align-items: center;
+        }
+      }
       .fan-code-label {
-        // margin-left: 20px;
-        // min-width: 50px;
-        min-width: 41px;
+        width: 50px;
       }
 
       .fan-code-value {
-        // margin-left: 20px;
-        // overflow: hidden;
-        // text-overflow:ellipsis;
-        white-space: nowrap;
-        max-width: 112px;
+        width: calc(100% - 50px);
 
         &.nm {
           margin-left: 0;
@@ -1007,12 +1031,12 @@ button {
   }
 
   .sai {
-    height: 49.074vh;
+    height: 500px;
   }
 
   .bsx {
-    height: 11.481vh;
-    margin-right: 1.852vh;
+    // height: 100%;
+    margin-right: 15px;
 
     &.o {
       opacity: 0.5;
@@ -1020,8 +1044,7 @@ button {
   }
 
   .health-0-right {
-    margin-top: 56px;
-    height: calc(100vh - 150px);
+    height: 100%;
     overflow-y: auto;
 
     .table {
@@ -1036,11 +1059,11 @@ button {
     .card-tool {
       width: 100%;
       background: #53626866;
-      padding: 0.463vh 0;
+      padding: 10px 0;
       display: flex;
 
       &.pd {
-        padding-left: 2.778vh;
+        padding-left: 30px;
       }
 
       .card-tool-item {
@@ -1059,4 +1082,7 @@ button {
     }
   }
 }
+.el-col + .el-col {
+  padding-left: 16px;
+}
 </style>