隐藏侧边

src/assets/font/font.css

@@ -15,8 +15,17 @@
   src: url('http://www.jichuanglanhai.com/demo/font-file/Alibaba-PuHuiTi-Regular.otf');
 }
 @font-face {
-  font-family: 'siyuan-Regular';
-  src: url('./siyuan-Regular.otf');
+  font-family: 'Source Han Sans CN-Regula';
+  src: url('./SourceHanSansCN-Regular.otf');
+}
+@font-face {
+  font-family: 'Source Han Sans CN-Medium';
+  src: url('./SourceHanSansCN-Medium.otf');
+}
+/*  */
+@font-face {
+  font-family: 'Source Han Sans CN-Bold';
+  src: url('./SourceHanSansCN-Bold.otf');
 }
 @font-face {
   font-family: 'Source Han Sans CN--Bold';

src/assets/styles/index.scss

@@ -5,6 +5,7 @@
 @import './sidebar.scss';
 @import './btn.scss';
 @import '../font/font.css';
+@import './leaflet.scss';
 
 body {
   height: 100%;

src/assets/styles/leaflet.scss

@@ -0,0 +1,333 @@
+.leaflet-popup-content-wrapper {
+  background-color: transparent !important;
+  box-shadow: none !important;
+}
+.leaflet-popup-close-button {
+  display: none;
+}
+.leaflet-popup-tip-container {
+  display: none;
+}
+// 事件分布
+.event-popup {
+  width: 252px;
+  height: 224px;
+  background-image: url("../images/popup/bg2.png");
+  background-size: 100% 100%;
+  z-index: 600;
+  .event-title {
+    padding: 9px 10px 0 16px;
+    display: flex;
+    justify-content: space-between;
+    .title {
+      font-size: 14px;
+      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+      font-weight: 700;
+      color: #E9F4FF;
+      line-height: 19px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 194px;
+      height: 30px;
+      background: linear-gradient(270deg, rgba(9,32,53,0) 0%, rgba(8,37,64,0.98) 51%, rgba(9,34,56,0) 100%);
+      border-radius: 0px 0px 0px 0px;
+      opacity: 1;
+      border: 1px solid;
+      border-image: linear-gradient(90deg, rgba(64.00000378489494, 163.00000548362732, 255, 0), rgba(64.00000378489494, 163.00000548362732, 255, 1), rgba(64.00000378489494, 163.00000548362732, 255, 0)) 1 1;
+    }
+    .mask {
+      width: 13px;
+      height: 13px;
+      cursor: pointer;
+    }
+  }
+  .event-main {
+    padding: 12px 18px 25px 18px;
+    display: grid;
+    grid-column: 1fr;
+    grid-row-gap: 9px;
+    .event-info {
+      display: flex;
+      align-items: center;
+      .dot {
+        width: 4px;
+        height: 4px;
+        background: #DAEBFF;
+        box-shadow: 0px 0px 10px 5px rgba(0,119,255,0.25), 0px 0px 5px 0px rgba(229,241,255,0.25);
+        border-radius: 20px 20px 20px 20px;
+        margin-right: 7px;
+      }
+      .name,.position {
+        font-size: 12px;
+        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+        font-weight: 500;
+        color: #E9F4FF;
+        line-height: 17px;
+      }
+      .position {
+        width: 120px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+    .btn {
+      margin-top: 19px;
+      background-image: url('../images/popup/icon1btn.png');
+      background-size: 100% 100%;
+      width: 100%;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-weight: 400;
+      color: #D3EEF2;
+      line-height: 20px;
+      cursor: pointer;
+    }
+  }
+}
+// 执法人员
+.person-popup {
+  width: 242px;
+  height: 244px;
+  background-image: url("../images/popup/bg1.png");
+  background-size: 100% 100%;
+  z-index: 600;
+  .person-title {
+    padding: 9px 10px 0 16px;
+    display: flex;
+    justify-content: space-between;
+    .title {
+      font-size: 14px;
+      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+      font-weight: 700;
+      color: #E9F4FF;
+      line-height: 19px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 194px;
+      height: 30px;
+      background: linear-gradient(270deg, rgba(9,32,53,0) 0%, rgba(8,37,64,0.98) 51%, rgba(9,34,56,0) 100%);
+      border-radius: 0px 0px 0px 0px;
+      opacity: 1;
+      border: 1px solid;
+      border-image: linear-gradient(90deg, rgba(64.00000378489494, 163.00000548362732, 255, 0), rgba(64.00000378489494, 163.00000548362732, 255, 1), rgba(64.00000378489494, 163.00000548362732, 255, 0)) 1 1;
+    }
+    .mask {
+      width: 13px;
+      height: 13px;
+      cursor: pointer;
+    }
+  }
+  .person-main {
+    padding: 12px 32px 25px 30px;
+    .person-info {
+      display: flex;
+      align-items: center;
+      .dot {
+        width: 4px;
+        height: 4px;
+        background: #DAEBFF;
+        box-shadow: 0px 0px 10px 5px rgba(0,119,255,0.25), 0px 0px 5px 0px rgba(229,241,255,0.25);
+        border-radius: 20px 20px 20px 20px;
+        margin-right: 15px;
+      }
+      .name,.position {
+        font-size: 12px;
+        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+        font-weight: 500;
+        color: #E9F4FF;
+        line-height: 14px;
+        margin-right: 9px;
+      }
+    }
+    .btns {
+      display: grid;
+      grid-column: 1fr;
+      grid-row-gap: 6px;
+      margin-top: 15px;
+      div {
+        background-image: url('../images/popup/icon1btn.png');
+        width: 100%;
+        height: 30px;
+        background-size: 100% 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-weight: 400;
+        color: #D3EEF2;
+        line-height: 20px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+// 执法车辆
+.car-popup {
+  width: 242px;
+  height: 138px;
+  background-image: url("../images/popup/bg3.png");
+  background-size: 100% 100%;
+  z-index: 600;
+  .car-title {
+    padding: 9px 10px 0 16px;
+    display: flex;
+    justify-content: space-between;
+    .title {
+      font-size: 14px;
+      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+      font-weight: 700;
+      color: #E9F4FF;
+      line-height: 19px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 194px;
+      height: 30px;
+      background: linear-gradient(270deg, rgba(9,32,53,0) 0%, rgba(8,37,64,0.98) 51%, rgba(9,34,56,0) 100%);
+      border-radius: 0px 0px 0px 0px;
+      opacity: 1;
+      border: 1px solid;
+      border-image: linear-gradient(90deg, rgba(64.00000378489494, 163.00000548362732, 255, 0), rgba(64.00000378489494, 163.00000548362732, 255, 1), rgba(64.00000378489494, 163.00000548362732, 255, 0)) 1 1;
+    }
+    .mask {
+      width: 13px;
+      height: 13px;
+      cursor: pointer;
+    }
+  }
+  .car-main {
+    padding: 12px 10px 25px 15px;
+    display: grid;
+    grid-column: 1fr;
+    grid-row-gap: 9px;
+    .car-info {
+      display: flex;
+      align-items: center;
+      .dot {
+        width: 4px;
+        height: 4px;
+        background: #DAEBFF;
+        box-shadow: 0px 0px 10px 5px rgba(0,119,255,0.25), 0px 0px 5px 0px rgba(229,241,255,0.25);
+        border-radius: 20px 20px 20px 20px;
+        margin-right: 7px;
+      }
+      .name,.position {
+        font-size: 12px;
+        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+        font-weight: 500;
+        color: #E9F4FF;
+        line-height: 17px;
+        margin-right: 8px;
+      }
+    }
+    .btn {
+      margin-top: 19px;
+      background-image: url('../images/popup/icon1btn.png');
+      background-size: 100% 100%;
+      width: 100%;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-weight: 400;
+      color: #D3EEF2;
+      line-height: 20px;
+      cursor: pointer;
+    }
+  }
+}
+// 监控视频
+.monitoring-popup {
+  width: 242px;
+  height: 230px;
+  background-image: url("../images/popup/bg4.png");
+  background-size: 100% 100%;
+  z-index: 600;
+  .monitoring-title {
+    padding: 9px 10px 0 16px;
+    display: flex;
+    justify-content: space-between;
+    .title {
+      font-size: 14px;
+      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+      font-weight: 700;
+      color: #E9F4FF;
+      line-height: 19px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 194px;
+      height: 30px;
+      background: linear-gradient(270deg, rgba(9,32,53,0) 0%, rgba(8,37,64,0.98) 51%, rgba(9,34,56,0) 100%);
+      border-radius: 0px 0px 0px 0px;
+      opacity: 1;
+      border: 1px solid;
+      border-image: linear-gradient(90deg, rgba(64.00000378489494, 163.00000548362732, 255, 0), rgba(64.00000378489494, 163.00000548362732, 255, 1), rgba(64.00000378489494, 163.00000548362732, 255, 0)) 1 1;
+    }
+    .mask {
+      width: 13px;
+      height: 13px;
+      cursor: pointer;
+    }
+  }
+  .monitoring {
+    padding: 11px 25px 24px 25px;
+    .bg {
+      background-image: url("../images/videoImg.png");
+      background-size: 100% 100%;
+      width: 192px;
+      height: 108px;
+      padding: 2px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .btns {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 16px;
+      .btn {
+        background-image: url("../images/popup/icon2btn.png");
+        background-size: 100% 100%;
+        width: 91px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-weight: 400;
+        color: #D3EEF2;
+        line-height: 20px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+.popup-pc-person {
+  bottom: 20px !important;
+}
+.popup-pc-common {
+  bottom: 23px !important;
+}
+.popup-pc-emphasis {
+  bottom: 25px !important;
+}
+.popup-pc-car {
+  bottom: 25px !important;
+}
+.popup-pc-monitoring {
+  bottom: 20px !important;
+}

src/views/bigScreen/components/mapLeftContent.vue

@@ -4,11 +4,11 @@
  * @Author: JC9527
  * @Date: 2023-08-15 09:44:13
  * @LastEditors: JC9527
- * @LastEditTime: 2023-08-17 21:03:34
+ * @LastEditTime: 2023-08-18 12:05:14
 -->
 <template>
   <div class="left-box">
-    <div class="item">
+    <div class="item left-list-title" :style="itemTwo">
       <title-box title="今日事件情况"></title-box>
       <div class="item-main">
         <div class="lists">
@@ -37,7 +37,7 @@
         </div>
       </div>
     </div>
-    <div class="item">
+    <div class="item left-list-title" :style="itemTwo">
       <title-box title="今日任务情况"></title-box>
       <div class="item-main">
         <div class="lists">
@@ -66,13 +66,13 @@
         </div>
       </div>
     </div>
-    <div class="item">
+    <div class="item lfet-list-one" id="parent-getHeight" :style="itemOne">
       <title-box title="人员在线情况"></title-box>
-      <map-number title="在线人员总数" :onLine="100" :sum="150" type="人" :numberArray="peopleArray"></map-number>
+      <map-number title="在线人员总数" :onLine="100" :sum="150" type="人" :numberArray="peopleArray" :height="oneHeight"></map-number>
     </div>
-    <div class="item">
+    <div class="item lfet-list-two" :style="itemOne">
       <title-box title="车辆在线情况"></title-box>
-      <map-number title="在线车辆总数" :onLine="10" :sum="18" type="辆" :numberArray="vehicleArray"></map-number>
+      <map-number title="在线车辆总数" :onLine="10" :sum="18" type="辆" :numberArray="vehicleArray" :height="oneHeight"></map-number>
     </div>
   </div>
 </template>
@@ -129,10 +129,40 @@ export default {
         },{
           title:'苏A123456'
         },
-      ]
+      ],
+      itemOne:{
+        height:'',
+      },
+      itemTwo:{
+        height:'',
+      },
+      oneHeight:0,
+      screenHeight:'',
     }
   },
   methods:{
+    getDomHeight(){
+      this.$nextTick(()=>{
+        let dom = document.getElementsByClassName('lfet-list-one');
+        let dom2 = document.getElementsByClassName('left-list-title');
+        let height2 = dom2[0].getBoundingClientRect();
+        let height = dom[0].getBoundingClientRect();
+        let windowHeight = window.innerHeight;
+        let relativeHeight = (windowHeight - height.top) / 2 - 14;
+        let sum = relativeHeight * 2 - 2;
+        let relativeHeight2 = (windowHeight - height2.top - sum) / 2 - 55;
+        this.itemOne.height = relativeHeight + 'px';
+        this.itemTwo.height = relativeHeight2 + 'px';
+        this.oneHeight = Number(relativeHeight);
+      })
+    }
+  },
+  mounted(){
+    window.addEventListener("resize", () => {
+      this.screenHeight = document.body.clientHeight;
+      this.getDomHeight();
+    });
+    this.getDomHeight();
   },
 }
 </script>
@@ -140,7 +170,8 @@ export default {
 .left-box {
   display: grid;
   grid-column: 1fr;
-  grid-row-gap: 19px;
+  grid-row-gap: 24px;
+  height: 100%;
   .item {
     // background: rgba(222, 225, 230, 0.6);
     .item-main {
@@ -198,5 +229,11 @@ export default {
       }
     }
   }
+  .lfet-list-one {
+    height: 100%;
+  }
+  .left-list-title {
+    height: 100%;
+  }
 }
 </style>

src/views/bigScreen/components/mapRightContent.vue

@@ -4,25 +4,25 @@
  * @Author: JC9527
  * @Date: 2023-08-15 11:09:57
  * @LastEditors: JC9527
- * @LastEditTime: 2023-08-17 21:00:46
+ * @LastEditTime: 2023-08-18 11:02:13
 -->
 <template>
   <div class="right-box">
-    <div class="item">
+    <div class="item" :style="relativeHeight">
       <title-box title="区域网格"></title-box>
-      <map-right :rightArray="griddingArray"></map-right>
+      <map-right :rightArray="griddingArray" :height="getHeight"></map-right>
     </div>
-    <div class="item">
+    <div class="item" :style="relativeHeight">
       <title-box title="重点区域"></title-box>
-      <map-right :rightArray="areaArray"></map-right>
+      <map-right :rightArray="areaArray" :height="getHeight"></map-right>
     </div>
-    <div class="item">
+    <div class="item" :style="relativeHeight">
       <title-box title="考勤围栏"></title-box>
-      <map-right :rightArray="griddingArray"></map-right>
+      <map-right :rightArray="griddingArray" :height="getHeight"></map-right>
     </div>
-    <div class="item">
+    <div class="item" :style="relativeHeight">
       <title-box title="重点路段"></title-box>
-      <map-right :rightArray="griddingArray"></map-right>
+      <map-right :rightArray="griddingArray" :height="getHeight"></map-right>
     </div>
   </div>
 </template>
@@ -90,9 +90,31 @@ export default {
           unsolved:20
         },
       ],
+      getHeight:0,
+      relativeHeight:{
+        height:'',
+      },
     }
   },
   methods:{
+    getDomHeight(){
+      this.$nextTick(()=>{
+        let dom = document.getElementsByClassName('right-box');
+        let height = dom[0].getBoundingClientRect();
+        let windowWidth = window.innerWidth;
+        let windowHeight = window.innerHeight;
+        let relativeHeight = (windowHeight - height.top) / 4 - 18;
+        this.relativeHeight.height = relativeHeight + 'px'
+        this.getHeight = Number(relativeHeight);
+      })
+    }
+  },
+  mounted(){
+    window.addEventListener("resize", () => {
+      this.screenHeight = document.body.clientHeight;
+      this.getDomHeight();
+    });
+    this.getDomHeight();
   },
 }
 </script>
@@ -101,6 +123,7 @@ export default {
   display: grid;
   grid-column: 1fr;
   grid-row-gap: 20px;
+  height: 100%;
   .item {
     // background: rgba(222, 225, 230, 0.6);
     // height: 161px;

src/views/bigScreen/index.vue

@@ -4,14 +4,14 @@
  * @Author: JC9527
  * @Date: 2023-08-14 14:40:02
  * @LastEditors: JC9527
- * @LastEditTime: 2023-08-16 11:32:02
+ * @LastEditTime: 2023-08-18 16:25:54
 -->
 <template>
   <div class="pc-container">
     <div class="system-header">
       <div class="left-tags">
         <div class="new-time">{{ newTime }}</div>
-        <div>{{ currentWork }}</div>
+        <div class="new-work">{{ currentWork }}</div>
       </div>
       <div class="system-title" text="城市精细化管理监测主题">
         城市精细化管理监测主题
@@ -24,9 +24,15 @@
         </el-input>
       </div> -->
     </div>
+    <transition name="left-animation">
+      <div class="map-before-left" v-show="leftAnimation"></div>
+    </transition>
+    <transition name="right-animation">
+      <div class="map-before-right" v-show="rightAnimation"></div>
+    </transition>
     <div class="child-view">
       <!-- <router-view /> -->
-      <my-map></my-map>
+      <my-map v-on:leftAnimationAction="leftAnimationAction" v-on:rightAnimationAction="rightAnimationAction"></my-map>
     </div>
   </div>
 </template>
@@ -40,6 +46,8 @@ export default {
       newTime: '',
       currentWork:'',
       input:'',
+      leftAnimation:true,
+      rightAnimation:true,
     }
   },
   created() {
@@ -61,7 +69,15 @@ export default {
   methods:{
     search(){
       
-    }
+    },
+    leftAnimationAction(){
+      console.log('点击了按钮')
+      this.leftAnimation = !this.leftAnimation
+      console.log(this.leftAnimation)
+    },
+    rightAnimationAction(){
+      this.rightAnimation = !this.rightAnimation
+    },
   },
   components:{myMap}
   // computed: {
@@ -86,7 +102,72 @@ div {
     center;
   background-size: cover;
   position: relative;
+  .map-before-left {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 510px;
+    height: 95%;
+    z-index: 550;
+    box-sizing: border-box;
+  }
+  .map-before-left::before {
+    content: "";
+    position: absolute; /* 一定要用绝对定位 */
+    width: 100%;
+    height: 100%;
+    backdrop-filter: blur(5px); /* 模糊半径 */
+  }
+  // .left-animation-enter-active{
+  //   transition: all .8s ease;
+  // }
+  // .left-animation-enter{
+  //   transform: translateX(510px);   
+  //   opacity: 0;
+  // }
+  // .left-animation-leave-active{
+  //   transition: all .8s ease;
+  // }
+  // .left-animation-leave{
+  //   transform: translateX(510px);   
+  //   opacity: 1;
+  // }
+  .left-animation-enter-active, .left-animation-leave-active {
+    transition: all 1s;
+  }
+  .left-animation-enter, .left-animation-leave-to {
+  /* 进入的初始状态和离开的最终状态 */
+    opacity: 0;
+    transform: translateX(-510px);
+  }
+
+  .right-animation-enter-active, .right-animation-leave-active {
+    transition: all 1s;
+  }
+  .right-animation-enter, .right-animation-leave-to {
+  /* 进入的初始状态和离开的最终状态 */
+    opacity: 0;
+    transform: translateX(510px);
+  }
+
+  .map-before-right {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    width: 510px;
+    height: 95%;
+    z-index: 550;
+    box-sizing: border-box;
+  }
+  .map-before-right::before {
+    content: "";
+    position: absolute; /* 一定要用绝对定位 */
+    width: 100%;
+    height: 100%;
+    backdrop-filter: blur(5px); /* 模糊半径 */
+  }
   .system-header {
+    z-index: 600;
     position: absolute;
     top: 0;
     left: 0;
@@ -123,6 +204,7 @@ div {
     .left-tags {
       display: flex;
       width: 630px;
+      z-index: 600;
       align-items: flex-start;
       // flex-direction: row-reverse;
       // justify-content: center;
@@ -135,6 +217,14 @@ div {
         font-weight: 400;
         color: #9ae6ff;
       }
+      .new-work {
+        padding: 28px 0 0 10px;
+        font-size: 18px;
+        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+        font-weight: 500;
+        color: #D3EEF2;
+        line-height: 26px;
+      }
     }
     // .right-tags {
     //   padding-top: 16px;

src/views/components/crewAssign/index.vue

@@ -4,7 +4,7 @@
  * @Author: JC9527
  * @Date: 2023-08-17 09:04:40
  * @LastEditors: JC9527
- * @LastEditTime: 2023-08-17 18:28:30
+ * @LastEditTime: 2023-08-18 09:10:01
 -->
 <template>
   <dia-log ref="dialog2" width="475px" title="人员指派">
@@ -73,19 +73,19 @@ export default {
       dateTime:'',
       options: [{
           value: '选项1',
-          label: '黄金糕'
+          label: '李飞'
         }, {
           value: '选项2',
-          label: '双皮奶'
+          label: '李飞'
         }, {
           value: '选项3',
-          label: '蚵仔煎'
+          label: '李飞'
         }, {
           value: '选项4',
-          label: '龙须面'
+          label: '李飞'
         }, {
           value: '选项5',
-          label: '北京烤鸭'
+          label: '李飞'
         }],
         value: ''
     }

src/views/components/dialog/index.vue

@@ -4,7 +4,7 @@
  * @Author: JC9527
  * @Date: 2023-08-16 14:19:37
  * @LastEditors: JC9527
- * @LastEditTime: 2023-08-17 18:34:57
+ * @LastEditTime: 2023-08-18 14:04:13
 -->
 <template>
   <el-dialog
@@ -62,7 +62,7 @@ export default {
     }
   },
   mounted(){
-    console.log(this.type)
+    // console.log(this.type)
   }
 }
 </script>

src/views/components/mapLeftNumber/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="left-number">
+  <div class="left-number" id="parent">
     <div class="number-title">
       <div>· {{ title }}</div>
       <div>{{ onLine }}/{{ sum }}{{ type }}</div>
@@ -8,7 +8,7 @@
       <div>姓名</div>
       <div class="header-title-right">实时定位/行程轨迹</div>
     </div>
-    <div class="lists">
+    <div class="left--lists" id="box" :style="{'height':(height - lists.height - 11) + 'px'}">
       <div class="main-lists" v-for="(item,index) in numberArray" :key="index" :class="(index+1) % 2 == 0? 'main-lists2':''">
         <div class="list-title">
           {{ item.title }}
@@ -31,6 +31,9 @@
 export default {
   data() {
     return {
+      lists:{
+        height:0,
+      }
     }
   },
   props:{
@@ -53,17 +56,40 @@ export default {
     numberArray:{
       type:Array,
       default:[]
+    },
+    height:{
+      type:Number,
+      default:0,
     }
   },
   methods:{
   },
+  mounted(){
+    
+    this.$nextTick(()=>{
+      // 获取父级容器元素
+      var parentElement = document.getElementById('parent');
+
+      // 获取盒子元素
+      var boxElement = document.getElementById('box');
+
+      // 获取盒子元素相对于视口的位置信息
+      var boxRect = boxElement.getBoundingClientRect();
+
+      
+
+      // 获取盒子距离父级顶部的距离
+      var distanceToTop = boxRect.top - parentElement.getBoundingClientRect().top;
+      this.lists.height = distanceToTop;
+      // console.log(distanceToTop,"高度")
+    })
+  },
 }
 </script>
 <style lang="scss" scoped>
 .left-number {
   // padding: 5px 0;
   
-  
   .number-title {
     display: flex;
     justify-content: space-between;
@@ -94,8 +120,8 @@ export default {
       color: #D3EEF2;
     }
   }
-  .lists {
-    height: 120px;
+  .left--lists {
+    // height: 120px;
     overflow-y: scroll;
   }
   .main-lists {

src/views/components/mapRight/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="right-main">
+  <div class="right-main" id="rightParent">
     <div class="header-title">
       <div>网格名称</div>
       <div>今日事件</div>
       <div>已解决</div>
       <div>未解决</div>
     </div>
-    <div class="lists-main">
+    <div class="lists-main" id="rightBox" :style="{'height':(height - lists.height - 20) + 'px'}">
       <div class="main" v-for="(item,index) in rightArray" :key="index" :class="(index+1) % 2 == 0 ? 'main1':''">
         <div>
           <img src="@/assets/images/location1.png" alt="">
@@ -24,16 +24,43 @@ export default {
   name:'mapRight',
   data() {
     return {
+      lists:{
+        height:0,
+      }
     }
   },
   props:{
     rightArray:{
       type:Array,
       default:[],
+    },
+    height:{
+      type:Number,
+      default:0,
     }
   },
   methods:{
   },
+  mounted(){
+    
+    this.$nextTick(()=>{
+      // 获取父级容器元素
+      var parentElement = document.getElementById('rightParent');
+
+      // 获取盒子元素
+      var boxElement = document.getElementById('rightBox');
+
+      // 获取盒子元素相对于视口的位置信息
+      var boxRect = boxElement.getBoundingClientRect();
+
+      
+
+      // 获取盒子距离父级顶部的距离
+      var distanceToTop = boxRect.top - parentElement.getBoundingClientRect().top;
+      this.lists.height = distanceToTop;
+      // console.log(distanceToTop,"高度")
+    })
+  },
 }
 </script>
 <style lang="scss" scoped>
@@ -55,12 +82,12 @@ export default {
       font-weight: bold;
       color: #D3EEF2;
       line-height: 21px;
-      width: 60px;
+      min-width: 60px;
     }
   }
   .lists-main {
     overflow-y: scroll;
-    height: 99px;
+    // height: 99px;
   }
   .main {
     padding: 0 24px;