邓洁: 优化界面

src/components/content/fanInfo/FanInfo.vue

@@ -1,7 +1,10 @@
 <template>
   <div id="fan_info">
     <div class="title">风机</div>
-    <div class="fans">
+    <div v-if="socketData==null||socketData.length===0" class="showNull">
+      暂无数据~
+    </div>
+    <div v-else class="fans">
       <div class="fan-item" v-for="(item,index) in socketData" :key="item.equipmentId">
         <div>
           <!-- echarts -->
@@ -470,6 +473,7 @@ const initChart = (type, valueA,valueB,valueC) => {
 </script>
 
 <style lang="scss" scoped>
+
 :deep( .el-radio__input.is-checked + .el-radio__label) {
   color: #38CAFB;
 }
@@ -516,11 +520,12 @@ input[type="number"] {
 #fan_info {
   //height: 1465px;
   //height: 1000px;
+  min-height: 350px;
   width: 830px;
-  position: absolute;
+  //position: absolute;
   z-index: 100;
-  top: 184px;
-  left: 68px;
+  //top: 184px;
+  //left: 68px;
   padding: 10px 10px 20px 10px;
   background-image: url(../../../assets/images/fanInfo/bg.png);
   color: #2fb0df;
@@ -529,8 +534,8 @@ input[type="number"] {
   .title {
     width: 40%;
     text-align: left;
-    padding: 0 0 0 62px;
-    font-size: 32px;
+    padding: 0 0 0 50px;
+    font-size: 38px;
     font-weight: bold;
     color: #38cafb;
     line-height: 42px;
@@ -553,7 +558,7 @@ input[type="number"] {
 
         .echart {
           height: 270px;
-          width: 30%;
+          width: 34%;
           margin: 0px 0px 0px 10px;
           position: relative;
         }
@@ -659,7 +664,7 @@ input[type="number"] {
               display: flex;
               flex-direction: column;
               justify-content: center;
-              padding: 0 20px;
+              //padding: 0 20px;
               font-size: 28px;
               color: #38cafb;
               line-height: 37px;

src/components/content/fanInfo/FanInfoItem.vue

@@ -97,14 +97,14 @@ let isWaringC = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-.abnormal:hover {
-  background: #9C5252 !important;
-  border-radius: 6px;
-
-  .point {
-    background: #fff !important;
-  }
-}
+//.abnormal:hover {
+//  background: #9C5252 !important;
+//  border-radius: 6px;
+//
+//  .point {
+//    background: #fff !important;
+//  }
+//}
 
 .wind-pressure-item {
   display: flex;