调整

src/views/daping.vue

@@ -37,7 +37,14 @@
           </div>
         </div>
         <div class="box_div">
-          <div class="box_title"><span class="touch">一号基地设备实时监测<a style="font-size:16px;vertical-align: top"> ▼ </a></span></div>
+          <div class="box_title"><span class="touch" @click="visible=!visible">{{ currentBase.name }}设备实时监测<a style="font-size:16px;vertical-align: top"> ▼ </a></span></div>
+          <div class="select-box">
+            <ul v-show="visible">
+              <li v-for="(item,index) in baseList" :key="index" :class="currentBase===item?'active':''" class="touch" @click="currentBase=item;visible=false">
+                {{ item.name }}
+              </li>
+            </ul>
+          </div>
           <div class="ct-box-2">
             <div class="ctn">
               <ul>
@@ -110,7 +117,7 @@
         </div>
         <div class="box_div">
           <div class="box_title"><span>近一个月基地设备报警分析</span></div>
-          <div class="ct-box-3">
+          <div class="ct-box-3" style="height:160px;overflow:auto;padding-bottom:8px">
             <div class="ctn">
               <ul>
                 <li>
@@ -179,7 +186,7 @@
             <div ref="mapDom" style="width:100%;height:100%" />
             <div class="map_bottom_box">
               <div>该地图上显示所有当前基地（点击选择查看）：</div>
-              <div style="padding-top:3px">
+              <div style="padding-top:3px;height:78px;overflow:auto">
                 <div v-for="(item,index) in vDataMap.list" :key="'ml_'+index" class="btn touch">{{ item.name }}</div>
               </div>
             </div>
@@ -260,6 +267,20 @@ export default {
       title: '智慧农业综合管理一张图',
       imgSrc: enterpriseImg,
       mapDom: null,
+      visible: false,
+      currentBase: {
+        name: '一号基地'
+      },
+      baseList: [
+        { name: '一号基地' },
+        { name: '二号基地' },
+        { name: '三号基地' },
+        { name: '四号基地' },
+        { name: '五号基地' },
+        { name: '六号基地' },
+        { name: '七号基地' },
+        { name: '八号基地' }
+      ],
       vData1: {
         xx: '7896'
       },
@@ -307,6 +328,7 @@ export default {
     this.$nextTick(() => {
       this.initMap()
       this.loadData()
+      this.currentBase = this.baseList[0]
     })
   },
   methods: {
@@ -1235,6 +1257,41 @@ export default {
   height: 170px;
   overflow: hidden;
 }
+.select-box {
+  z-index: 9999;
+  position: relative;
+  font-size: 16px;
+  line-height: 32px;
+  ul {
+    list-style: none;
+    margin: 0;
+    position: absolute;
+    padding-inline-start: 0;
+    background-color: rgba(0, 0, 0, 0.6);
+    width: 100%;
+    height: 128px;
+    overflow: auto;
+    border-radius: 4px;
+    li {
+      padding: 0 10px;
+      text-align: center;
+      color: #eee;
+      text-shadow: 0 0 7px #4169e1, 0 0 15px #ffffff;
+      font-weight: bolder;
+      background-image: url('~@/assets/home/klr.png');
+      background-size: 100% 100%;
+    }
+    li:hover {
+      padding: 0 10px;
+      color: wheat;
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+    .active {
+      color: white;
+      background-color: rgba(255, 255, 255, 0.3);
+    }
+  }
+}
 .ct-box-1 {
   display: flex;
   flex-direction: column;
@@ -1417,7 +1474,7 @@ export default {
     left: 0;
     height: 100%;
     width: 100%;
-    margin: 10px 0;
+    margin: 0;
     display: grid;
     grid-template-columns:33.33% 33.33% 33.33%;
     li {