diff --git a/src/views/bigScreen/map/index.vue b/src/views/bigScreen/map/index.vue
index ec00f6a..229d45b 100644
--- a/src/views/bigScreen/map/index.vue
+++ b/src/views/bigScreen/map/index.vue
@@ -1,39 +1,17 @@
-<!--
- * @Descripttion: 
- * @version: 
- * @Author: JC9527
- * @Date: 2023-08-14 15:46:26
- * @LastEditors: JC9527
- * @LastEditTime: 2023-08-17 21:32:14
--->
-<!--
- * @Descripttion: 
- * @version: 
- * @Author: JC9527
- * @Date: 2023-08-14 15:46:26
- * @LastEditors: JC9527
- * @LastEditTime: 2023-08-17 16:15:51
--->
-<!--
- * @Descripttion: 
- * @version: 
- * @Author: JC9527
- * @Date: 2023-08-14 15:46:26
- * @LastEditors: JC9527
- * @LastEditTime: 2023-08-17 15:40:05
--->
 <template>
   <div class="map-main">
     <div id="showMap" class="showMap"></div>
     <div class="left-bg">
       <div class="bgt"></div>
     </div>
-    <div class="map-left">
-      <map-left></map-left>
-    </div>
-    <img src="@/assets/images/action-left.png" alt="" class="left-image">
-    <img src="@/assets/images/action-right.png" alt="" class="right-image">
-    <div class="middle-top-left">
+    <transition name="left-animationMap">
+      <div class="map-left" v-if="leftAnimationData">
+        <map-left></map-left>
+      </div>
+    </transition>
+    
+    <img :src="leftAnimationData ? require('@/assets/images/action-left.png'):require('@/assets/images/action-right.png')" alt="" :class="!leftAnimationData ? 'left-image2':'left-image'"  @click="leftAnimation()">
+    <div class="middle-top-left" :class="!leftAnimationData ? 'middle-top-left2':'middle-top-left'">
       <div class="input-keyword">
         <el-input
           placeholder="请输入关键字"
@@ -50,7 +28,7 @@
         <img src="@/assets/images/createdTask.png" alt="">
       </div>
     </div>
-    <div class="middle-bottom-left">
+    <div class="middle-bottom-left" :class="!leftAnimationData ? 'middle-bottom-left2' : 'middle-bottom-left'">
       <div class="list" @click="changeMap(1)">
         <div class="leftbg" :class="actionMap == 1 ? 'action-map':''">
           <img src="@/assets/images/icon1.png" alt="">
@@ -92,15 +70,20 @@
         </div>
       </div>
     </div>
-    <div class="middle-bottom-right">
+    <transition name="right-animationMap">
+      <div class="map-right" v-if="rightAnimationData">
+        <map-right></map-right>
+      </div>
+    </transition>
+    
+    <img :src="rightAnimationData ? require('@/assets/images/action-right.png') : require('@/assets/images/action-left.png')" alt="" :class="!rightAnimationData ? 'right-image2' : 'right-image'" @click="rightAnimation()">
+  
+    <div class="middle-bottom-right" :class="!rightAnimationData ? 'middle-bottom-right2' : 'middle-bottom-right'">
       <div class="btn-action">
         <span :class="action == 1? 'action':''" @click="actionBtn(1)">电子地图</span>
         <span :class="action == 2? 'action':''" @click="actionBtn(2)">卫星地图</span>
       </div>
     </div>
-    <div class="map-right">
-      <map-right></map-right>
-    </div>
     <div class="right-bg">
       <div class="bgt"></div>
     </div>
@@ -119,12 +102,12 @@
 <script>
 import L from 'leaflet'
 //引入坐标系转换插件
-import 'proj4'
-import 'proj4leaflet'
+// import 'proj4'
+// import 'proj4leaflet'
 //引入中国底图插件
-import '@/utils/lib/leaflet.ChineseTmsProviders.js'
+// import '@/utils/lib/leaflet.ChineseTmsProviders.js'
 //引入坐标系偏移插件
-import '@/utils/lib/leaflet.mapCorrection.min.js'
+// import '@/utils/lib/leaflet.mapCorrection.min.js'
 // import zhifarenyuan from "@/utils/mapJson/zhifarenyuan.json"
 // import shijianfenbu from "@/utils/mapJson/shijianfenbu.json"
 // import zhifacheliang from "@/utils/mapJson/zhifacheliang.json"
@@ -182,6 +165,8 @@ export default {
       carPopup:false,
       monitoringPopup:false,
       mypoint:{},
+      leftAnimationData:true,
+      rightAnimationData:true,
     }
   },
   methods:{
@@ -197,10 +182,14 @@ export default {
       })
 
       // 电子底图/百度
-      this.basemap = L.tileLayer.chinaProvider('Geoq.Normal.PurplishBlue', {
-        maxZoom: 18,
-        minZoom: 5,
-      })
+      this.basemap = L.tileLayer(
+        'https://api.mapbox.com/styles/v1/sharealex/cllg9dw1i00iz01oj9zmu6iv7/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw',
+        {
+          maxZoom: 18,
+          minZoom: 9,
+          subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
+        }
+      )
       this.globalMap.addLayer(this.basemap);
 
       this.globalMap.createPane('mapLayer1')
@@ -294,73 +283,197 @@ export default {
       point.features.map((item)=>{
         if(this.actionMap == 1) {
           if(item.properties.name == "执法人员"){
-            let marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico1})
+            let marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico1}).bindPopup(
+              `
+              <div class="person-popup">
+                <div class="person-title">
+                  <div class="title">人员信息</div>
+                  <div class="mask" @click="close()"></div>
+                </div>
+                <div class="person-main">
+                  <div class="person-info">
+                    <div class="dot"></div>
+                    <div class="name">李飞</div>
+                    <div class="position">执法1队队员</div>
+                  </div>
+                  <div class="btns">
+                    <div @click="getRoute()">行程轨迹</div>
+                    <div>附近队员</div>
+                    <div>位置分享</div>
+                    <div>任务派发</div>
+                  </div>
+                </div>
+              </div>
+              `,
+              {
+                  className: 'popup-pc-person'
+              }
+            ).openPopup();
             marker.addTo(this.mapEvent.mapEvent1)
-            this.markerClick(marker)
+            // this.markerClick(marker)
           }
         } else if(this.actionMap == 2) {
           let marker
           if(item.properties.name == "普通事件") {
             marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico2})
+            .bindPopup(
+              `
+              <div class="event-popup">
+                <div class="event-title">
+                  <div class="title">事件信息</div>
+                  <div class="mask" @click="close()"></div>
+                </div>
+                <div class="event-main">
+                  <div class="event-info">
+                    <div class="dot"></div>
+                    <div class="name">事件名称：</div>
+                    <div class="position">XXX小区乱堆杂物</div>
+                  </div>
+                  <div class="event-info">
+                    <div class="dot"></div>
+                    <div class="name">事件类别：</div>
+                    <div class="position">暴露垃圾</div>
+                  </div>
+                  <div class="event-info">
+                    <div class="dot"></div>
+                    <div class="name">事件地址：</div>
+                    <div class="position">XX街道XX小区</div>
+                  </div>
+                  <div class="event-info">
+                    <div class="dot"></div>
+                    <div class="name">描述：</div>
+                    <div class="position">XXXXXXXXXXXXXX</div>
+                  </div>
+                  <div class="btn" @click="zhipai()">
+                    指派
+                  </div>
+                </div>
+              </div>
+              `,
+              {
+                  className: 'popup-pc-common'
+              }
+            ).openPopup();
             marker.addTo(this.mapEvent.mapEvent1)
-            this.markerClick(marker)
+            // this.markerClick(marker)
           } else if(item.properties.name == "重点事件"){
-            marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico3})
+            marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico3}).bindPopup(
+              `
+              <div class="event-popup">
+                <div class="event-title">
+                  <div class="title">事件信息</div>
+                  <div class="mask" @click="close()"></div>
+                </div>
+                <div class="event-main">
+                  <div class="event-info">
+                    <div class="dot"></div>
+                    <div class="name">事件名称：</div>
+                    <div class="position">XXX小区乱堆杂物</div>
+                  </div>
+                  <div class="event-info">
+                    <div class="dot"></div>
+                    <div class="name">事件类别：</div>
+                    <div class="position">暴露垃圾</div>
+                  </div>
+                  <div class="event-info">
+                    <div class="dot"></div>
+                    <div class="name">事件地址：</div>
+                    <div class="position">XX街道XX小区</div>
+                  </div>
+                  <div class="event-info">
+                    <div class="dot"></div>
+                    <div class="name">描述：</div>
+                    <div class="position">XXXXXXXXXXXXXX</div>
+                  </div>
+                  <div class="btn" @click="zhipai()">
+                    指派
+                  </div>
+                </div>
+              </div>
+              `,
+              {
+                  className: 'popup-pc-emphasis'
+              }
+            ).openPopup();
             marker.addTo(this.mapEvent.mapEvent1)
-            this.markerClick(marker)
+            // this.markerClick(marker)
           }
         } else if(this.actionMap == 3) {
           if(item.properties.name == "执法车辆"){
-            let marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico4})
+            let marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico4}).bindPopup(
+              `
+              <div class="car-popup">
+                <div class="car-title">
+                  <div class="title">车辆信息</div>
+                  <div class="mask" @click="close()"></div>
+                </div>
+                <div class="car-main">
+                  <div class="car-info">
+                    <div class="dot"></div>
+                    <div class="name">执法一队1号车</div>
+                    <div class="position">苏A568974</div>
+                  </div>
+                  <div class="btn" @click="carinfo">行程轨迹</div>
+                </div>
+              </div>
+              `,
+              {
+                  className: 'popup-pc-car'
+              }
+            ).openPopup();
             marker.addTo(this.mapEvent.mapEvent1)
-            this.markerClick(marker)
+            // this.markerClick(marker)
           }
         } else if(this.actionMap == 4) {
           if(item.properties.name == "监控视频"){
-            let marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico5})
+            let marker = L.marker({lng:item.geometry.coordinates[0],lat:item.geometry.coordinates[1]},{icon:ico5}).bindPopup(
+              `
+              <div class="monitoring-popup">
+                <div class="monitoring-title">
+                  <div class="title">监控视频</div>
+                  <div class="mask" id='monitoring' onclick="close()"></div>
+                </div>
+                <div class="monitoring">
+                  <div class="bg">
+                    <img src="@/assets/images/popup/screenshot20230817.png" alt="">
+                  </div>
+                  <div class="btns">
+                    <div class="btn" @click="monitoringInfo()">上墙</div>
+                    <div class="btn">转发</div>
+                  </div>
+                </div>
+              </div>
+              `,
+              {
+                  className: 'popup-pc-monitoring'
+              }
+            ).openPopup();
             marker.addTo(this.mapEvent.mapEvent1)
             this.markerClick(marker)
           }
         }
         
       })
-      // let geojson = L.geoJSON(cheshi,{
-      //   onEachFeature: (feature, layer) => {
-      //     console.log(feature)
-      //     console.log(layer)
-      //     let bounds = layer._latlng
-      //     console.log(bounds)
-      //     let marker 
-      //     // let center = bounds.getCenter()
-      //     if(feature.properties.name == "监控视频"){
-      //       marker = L.marker(bounds,{icon:ico5})
-      //     } else if(feature.properties.name == "执法人员") {
-      //       marker = L.marker({lng:118.74576613991007,lat:31.8391346298732},{icon:ico1})
-      //     } else if(feature.properties.name == "普通事件") {
-      //       marker = L.marker(bounds,{icon:ico2})
-      //     } else if(feature.properties.name == "重点事件") {
-      //       marker = L.marker(bounds,{icon:ico3})
-      //     } else if(feature.properties.name == "执法车辆") {
-      //       marker = L.marker(bounds,{icon:ico4})
-      //     }
-      //     marker.addTo(this.mapEvent.mapEvent1)
-      //   }
-      // }).addTo(this.mapEvent.mapEvent1)
     },
     markerClick(marker){
-      marker.on('click', e => {
-        console.log(e);
-        this.mypoint = e.containerPoint;
-        if(this.actionMap == 1) {
-          this.personPopup = true;
-        } else if(this.actionMap == 2) {
-          this.eventPopup = true;
-        } else if(this.actionMap == 3) {
-          this.carPopup = true
-        } else if(this.actionMap == 4){
-          this.monitoringPopup = true;
-        }
-      })
+      console.log(document.getElementById('monitoring'))
+      document.getElementById('monitoring').onclick=function(){
+        console.log('123123')
+      }
+      // marker.on('click', e => {
+      //   console.log(e);
+      //   this.mypoint = e.containerPoint;
+      //   if(this.actionMap == 1) {
+      //     // this.personPopup = true;
+
+      //   } else if(this.actionMap == 2) {
+      //     // this.eventPopup = true;
+      //   } else if(this.actionMap == 3) {
+      //     // this.carPopup = true
+      //   } else if(this.actionMap == 4){
+      //     // this.monitoringPopup = true;
+      //   }
+      // })
     },
     personClose(){
       this.personPopup = false;
@@ -515,6 +628,18 @@ export default {
           return;
       }
     },
+    leftAnimation(){
+      setTimeout(()=>{
+        this.leftAnimationData = !this.leftAnimationData;
+      },1000)
+      this.$emit('leftAnimationAction')
+    },
+    rightAnimation(){
+      setTimeout(()=>{
+        this.rightAnimationData = !this.rightAnimationData;
+      },1000)
+      this.$emit('rightAnimationAction')
+    },
   },
   mounted(){
     this.$nextTick(()=>{
@@ -529,6 +654,24 @@ export default {
   width: 100%;
   height: 100%;
   position: relative;
+  .left-animationMap-enter-active, .left-animationMap-leave-active {
+    transition: all 1s;
+  }
+  .left-animationMap-enter, .left-animationMap-leave-to {
+  /* 进入的初始状态和离开的最终状态 */
+    opacity: 0;
+    transform: translateX(-510px);
+  }
+
+  .right-animationMap-enter-active, .right-animationMap-leave-active {
+    transition: all 1s;
+  }
+  .right-animationMap-enter, .right-animationMap-leave-to {
+  /* 进入的初始状态和离开的最终状态 */
+    opacity: 0;
+    transform: translateX(510px);
+  }
+
   .left-bg {
     position: absolute;
     left: 20px;
@@ -555,7 +698,7 @@ export default {
     .bgt {
       width: 100%;
       height: 100%;
-      background-image: url('../../../assets/images/broadside-bg.png');
+      background-image: url('../../../assets/images/broadside2-bg.png');
       background-size: 100% 100%;
     }
   }
@@ -582,7 +725,7 @@ export default {
     height: 95%;
     z-index: 600;
     box-sizing: border-box;
-    background: rgba(216,216,216,0.05);
+    // background: rgba(216,216,216,0.05);
   }
   .left-image {
     z-index: 600;
@@ -592,6 +735,14 @@ export default {
     width: 40px;
     cursor: pointer;
   }
+  .left-image2 {
+    z-index: 600;
+    position: absolute;
+    left: 67px;
+    bottom: 50%;
+    width: 40px;
+    cursor: pointer;
+  }
   .right-image {
     z-index: 600;
     position: absolute;
@@ -600,11 +751,20 @@ export default {
     width: 40px;
     cursor: pointer;
   }
+  .right-image2 {
+    z-index: 600;
+    position: absolute;
+    right: 67px;
+    bottom: 50%;
+    width: 40px;
+    cursor: pointer;
+  }
   .map-right {
     position: absolute;
     right: 47px;
     top: 10px;
     width: 460px;
+    height: 95%;
     z-index: 600;
     // margin: 10px 17px 0 10px;
     // padding: 20px 0;
@@ -618,10 +778,8 @@ export default {
     display: flex;
     .input-keyword {
       ::v-deep .el-input {
-        background: rgba(0,60,116,0.2);
-        box-shadow: inset 0px 0px 6px 0px #00C2FF;
-        border-radius: 2px;
-        border: 1px solid rgba(181,207,255,0.5);
+        background-image: url('../../../assets/images/bgtongyong.png');
+        background-size: 100% 100%;
         .el-input__inner {
           background-color: transparent;
           width: 222px;
@@ -632,7 +790,7 @@ export default {
         .el-input__inner::placeholder {
           /* 在这里添加你想要修改的 placeholder 样式 */
           font-size: 14px;
-          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+          font-family: Source Han Sans CN-Regular;
           font-weight: 400;
           color: #D3EEF2;
           line-height: 20px;
@@ -651,11 +809,10 @@ export default {
     }
     .laser-positioning,.creation-task {
       // height: 38px;
+      width: 130px;
       margin-left: 8px;
-      background: rgba(0,60,116,0.6);
-      box-shadow: inset 0px 0px 6px 0px #00C2FF;
-      border-radius: 2px;
-      border: 1px solid rgba(181,207,255,0.5);
+      background-image: url('../../../assets/images/bgtongyong.png');
+      background-size: 100% 100%;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -663,7 +820,7 @@ export default {
       cursor: pointer;
       span {
         font-size: 14px;
-        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-family: Source Han Sans CN-Regular;
         font-weight: 400;
         color: #D3EEF2;
         line-height: 20px;
@@ -674,7 +831,11 @@ export default {
       }
     }
   }
+  .middle-top-left2 {
+    left: 67px;
+  }
   .middle-bottom-left {
+    // 490
     position: absolute;
     left: 537px;
     bottom: 40px;
@@ -713,7 +874,7 @@ export default {
         align-items: center;
         span {
           font-size: 16px;
-          font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+          font-family: Source Han Sans CN-Bold;
           font-weight: 700;
           color: #FFFFFF;
           line-height: 26px;
@@ -722,6 +883,9 @@ export default {
       }
     }
   }
+  .middle-bottom-left2 {
+    left: 67px;
+  }
   .middle-bottom-right {
     position: absolute;
     bottom: 40px;
@@ -730,38 +894,45 @@ export default {
     .btn-action {
       display: flex;
       span {
+        width: 142px;
+        height: 40px;
         flex: 1;
         display: inline-block;
         text-align: center;
+        background-image: url('../../../assets/images/changeBtn2.png');
+        background-size: 100% 100%;
         padding: 10px 33px;
         font-size: 16px;
-        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-family: Source Han Sans CN-Regular;
         font-weight: 400;
+        line-height: 20px;
         color: #D3EEF2;
         cursor: pointer;
-        background: transparent;
-        box-shadow: inset 0px 0px 6px 0px #00C2FF;
-        border-radius: 2px 2px 2px 2px;
-        opacity: 1;
-        border: 1px solid rgba(181,207,255,0.5);
+        // background: transparent;
+        // box-shadow: inset 0px 0px 6px 0px #00C2FF;
+        // border-radius: 2px 2px 2px 2px;
+        // opacity: 1;
+        // border: 1px solid rgba(181,207,255,0.5);
         &:nth-child(1) {
           margin-right: 10px;
         }
       }
       .action {
         color: #fff;
-        background-color: rgba(255,125,64,0.8);
-        box-shadow: inset 0px 0px 13px 0px #F6B463;
-        border-radius: 2px 2px 2px 2px;
-        border: 1px solid rgba(181,207,255,0.5);
+        background-image: url('../../../assets/images/changeBtn1.png.png');
+        background-size: 100% 100%;
       }
     }
   }
+  .middle-bottom-right2 {
+    right: 67px;
+  }
   
 
   .showMap {
     width: 100%;
     height: 100%;
+    background-color: #00192e;
   }
   
 }