feat:水文监测点总览界面调整

src/views/hydrologic-info/left.vue

@@ -22,29 +22,18 @@
               <div class="info">
                 <div class="row">
                   <div class="col">在线率：</div>
-                  <div class="col bg"><span>2个</span><span>100%</span></div>
+                  <div class="col bg"><span>100%</span></div>
                 </div>
                 <div class="row">
                   <div class="col">设备总数：</div>
-                  <div class="col">2个</div>
+                  <div class="col bg">2个</div>
                 </div>
                 <div class="row">
                   <div class="col">离线数：</div>
-                  <div class="col">0个</div>
+                  <div class="col bg">0个</div>
                 </div>
               </div>
             </div>
-            <!-- <div class="progress-content">
-              <div class="progress-item" v-for="item in progressList" :key="item.id">
-                <div class="progress-item-text">
-                  <span>{{ item.name }}</span>
-                  <span
-                    >{{ item.value }}<span class="green"> / {{ item.total }}</span></span
-                  >
-                </div>
-                <el-progress size="large" :percentage="item.percentage" color="#4183D3" :show-text="false" define-back-color="#213F61" :stroke-width="10"></el-progress>
-              </div>
-            </div> -->
           </div>
         </template>
       </BaseMain>
@@ -107,7 +96,7 @@ import iconUrl3 from '@/assets/image/hydrologic/icon4.png'
 import iconUrl4 from '@/assets/image/hydrologic/icon1.png'
 import iconUrl5 from '@/assets/image/hydrologic/icon3.png'
 import iconUrl6 from '@/assets/image/hydrologic/icon2.png'
-import {getHydrologicalList} from '@/api/hydrologicalStationApi'
+import { getHydrologicalList } from '@/api/hydrologicalStationApi'
 export default {
   data() {
     return {
@@ -187,40 +176,37 @@ export default {
     BaseMain,
     ScrollPanel
   },
-  mounted(){
+  mounted() {
     this.getAirInfo()
     this.getHydrologicalList()
   },
-  methods:{
-     getHydrologicalList() {
+  methods: {
+    getHydrologicalList() {
       getHydrologicalList().then((res) => {
         this.swList = res.data.records
-        this.swList.map((item)=>{
-          item.indicator='降雨、水位、流量、流速'
-          item.status= '在线',
-          item.url= imgUrl
+        this.swList.map((item) => {
+          item.indicator = '降雨、水位、流量、流速'
+          ;(item.status = '在线'), (item.url = imgUrl)
         })
       })
     },
-    getAirInfo(){
-       window
-        .requestSDK('/order/weather/now', {adcode:'610481'}, {}, 'post')
-        .then(async (res) => {
-          this.qxList.forEach((item,index)=>{
-            if(index == 0){
-              item.val = res.data.dew+'℃'
-            }
-            if(index == 1){
-              item.val = res.data.feelsLike +'℃'
-            }
-            if(index == 2){
-              item.val = res.data.text 
-            }
-            if(index == 3){
-              item.val = res.data.windScale +'级'
-            }
-          })
+    getAirInfo() {
+      window.requestSDK('/order/weather/now', { adcode: '610481' }, {}, 'post').then(async (res) => {
+        this.qxList.forEach((item, index) => {
+          if (index == 0) {
+            item.val = res.data.dew + '℃'
+          }
+          if (index == 1) {
+            item.val = res.data.feelsLike + '℃'
+          }
+          if (index == 2) {
+            item.val = res.data.text
+          }
+          if (index == 3) {
+            item.val = res.data.windScale + '级'
+          }
         })
+      })
     }
   }
 }
@@ -229,7 +215,7 @@ export default {
 <style lang="scss" scoped>
 .hydrologic-container {
   position: absolute;
-   top: px-to-rem(30);
+  top: px-to-rem(30);
   z-index: 1;
   left: px-to-rem(-4);
   .dateRadio {
@@ -248,15 +234,16 @@ export default {
     }
   }
   .main-container {
-    padding: px-to-rem(22) px-to-rem(14);
+    padding: px-to-rem(9) px-to-rem(14) px-to-rem(0);
     .sector-info {
       display: flex;
-      justify-content: space-between;
-      img {
-        width: px-to-rem(133);
-        height: px-to-rem(74);
-      }
+      flex-direction: column;
+      align-items: center;
       .img {
+        img {
+          width: px-to-rem(232);
+          height: px-to-rem(129);
+        }
         .val {
           display: flex;
           justify-content: space-between;
@@ -267,7 +254,9 @@ export default {
         }
       }
       .info {
-        width: calc(100% - px-to-rem(143));
+        width: 100%;
+        padding: 0 px-to-rem(42);
+        margin-top: px-to-rem(10);
         font-weight: 500;
         font-size: px-to-rem(14);
         color: #ffffff;
@@ -280,9 +269,6 @@ export default {
             font-weight: bold;
             font-size: px-to-rem(16);
             color: #0dc985;
-            &:first-child {
-              margin-right: px-to-rem(19);
-            }
           }
           .bg {
             background: url('@/assets/image/hydrologic/bg.png') no-repeat 0 0 / 100% 100%;