健康矩阵列表

src/views/HealthControl/Health5.vue

@@ -1,49 +1,51 @@
 <template>
   <div class="health-5">
-    <!-- 当内容超出页面时 添加 scroll 即可自动添加滚动条 -->
-    <div class="health-matrix scroll">
-      <div class="health-matrix-panel" v-for="(item, index) in stationsList" :key="index">
-        <div class="header">
-          <i class="svg-icon svg-icon-sm svg-icon-white">
-            <svg-icon :svgid="'svg-wind-site'" />
-          </i>
-          <span class="title">{{item.name}}健康矩阵列表</span>
-          <div class="tools">
-            <div class="tool-block">
-              <div class="legend bg-green"></div>
-              <div class="legend-text green">良好数量</div>
-              <div class="legend-value">{{item.lhsl}}</div>
-            </div>
-            <div class="tool-block">
-              <div class="legend bg-purple"></div>
-              <div class="legend-text purple">正常数量</div>
-              <div class="legend-value">{{item.zcsl}}</div>
-            </div>
-            <div class="tool-block">
-              <div class="legend bg-yellow"></div>
-              <div class="legend-text yellow">注意数量</div>
-              <div class="legend-value">{{item.zysl}}</div>
-            </div>
-            <div class="tool-block">
-              <div class="legend bg-orange"></div>
-              <div class="legend-text orange">严重数量</div>
-              <div class="legend-value">{{item.yzsl}}</div>
+    <!-- 当内容超出页面时 添加 el-scrollbar 即可自动添加滚动条 -->
+    <el-scrollbar>
+      <div class="health-matrix">
+        <div class="health-matrix-panel" v-for="(item, index) in stationsList" :key="index">
+          <div class="header">
+            <i class="svg-icon svg-icon-sm svg-icon-white">
+              <svg-icon :svgid="'svg-wind-site'" />
+            </i>
+            <span class="title">{{item.name}}健康矩阵列表</span>
+            <div class="tools">
+              <div class="tool-block">
+                <div class="legend bg-green"></div>
+                <div class="legend-text green">良好数量</div>
+                <div class="legend-value">{{item.lhsl}}</div>
+              </div>
+              <div class="tool-block">
+                <div class="legend bg-purple"></div>
+                <div class="legend-text purple">正常数量</div>
+                <div class="legend-value">{{item.zcsl}}</div>
+              </div>
+              <div class="tool-block">
+                <div class="legend bg-yellow"></div>
+                <div class="legend-text yellow">注意数量</div>
+                <div class="legend-value">{{item.zysl}}</div>
+              </div>
+              <div class="tool-block">
+                <div class="legend bg-orange"></div>
+                <div class="legend-text orange">严重数量</div>
+                <div class="legend-value">{{item.yzsl}}</div>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="body">
-          <div class="matrix">
-            <div class="item" v-for="(ele, num) in windturbineList[index]" :key="num"> 
-              <div v-if="parseInt(ele.fjzt) == 1" class="green">{{ele.wtnum}}号</div>
-              <div v-if="parseInt(ele.fjzt) == 2" class="purple">{{ele.wtnum}}号</div>
-              <div v-if="parseInt(ele.fjzt) == 3" class="yellow">{{ele.wtnum}}号</div>
-              <div v-if="parseInt(ele.fjzt) == 4" class="orange">{{ele.wtnum}}号</div>
-            </div>
-            <div class="blank" v-for="index of 25" :key="index"></div> 
-          </div> 
+          <div class="body">
+            <div class="matrix">
+              <div class="item" v-for="(ele, num) in windturbineList[index]" :key="num"> 
+                <div v-if="parseInt(ele.fjzt) == 1" class="green">{{ele.wtnum}}号</div>
+                <div v-if="parseInt(ele.fjzt) == 2" class="purple">{{ele.wtnum}}号</div>
+                <div v-if="parseInt(ele.fjzt) == 3" class="yellow">{{ele.wtnum}}号</div>
+                <div v-if="parseInt(ele.fjzt) == 4" class="orange">{{ele.wtnum}}号</div>
+              </div>
+              <div class="blank" v-for="index of 25" :key="index"></div> 
+            </div> 
+          </div>
         </div>
       </div>
-    </div>
+    </el-scrollbar>
   </div>
 </template>
 
@@ -187,6 +189,12 @@ export default {
           background: fade(@orange, 20);
           border-color: @orange;
         }
+
+        &.red {
+          color: @red;
+          background: fade(@red, 20);
+          border-color: @red;
+        }
       }
 
       .blank {

src/views/HealthControl/HealthTab1.vue

@@ -321,6 +321,7 @@ export default {
         margin-right: 8px;
         color: fade(@white, 75);
         font-size: @fontsize-s;
+        cursor: pointer;
 
         &.green {
           background: @green;