定位弹出框修改

.env.development

@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 若依管理系统
+VUE_APP_TITLE = 城市精细化管理监测主题
 
 # 开发环境配置
 ENV = 'development'

.env.production

@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 若依管理系统
+VUE_APP_TITLE = 城市精细化管理监测主题
 
 # 生产环境配置
 ENV = 'production'

src/views/bigScreen/components/mapLeftContent.vue

@@ -4,7 +4,7 @@
  * @Author: JC9527
  * @Date: 2023-08-15 09:44:13
  * @LastEditors: JC9527
- * @LastEditTime: 2023-08-16 10:53:31
+ * @LastEditTime: 2023-08-17 21:03:34
 -->
 <template>
   <div class="left-box">
@@ -140,7 +140,7 @@ export default {
 .left-box {
   display: grid;
   grid-column: 1fr;
-  grid-row-gap: 15px;
+  grid-row-gap: 19px;
   .item {
     // background: rgba(222, 225, 230, 0.6);
     .item-main {

src/views/bigScreen/components/mapRightContent.vue

@@ -4,7 +4,7 @@
  * @Author: JC9527
  * @Date: 2023-08-15 11:09:57
  * @LastEditors: JC9527
- * @LastEditTime: 2023-08-16 10:49:03
+ * @LastEditTime: 2023-08-17 21:00:46
 -->
 <template>
   <div class="right-box">
@@ -100,7 +100,7 @@ export default {
 .right-box {
   display: grid;
   grid-column: 1fr;
-  grid-row-gap: 15px;
+  grid-row-gap: 20px;
   .item {
     // background: rgba(222, 225, 230, 0.6);
     // height: 161px;

src/views/bigScreen/map/index.vue

@@ -4,7 +4,7 @@
  * @Author: JC9527
  * @Date: 2023-08-14 15:46:26
  * @LastEditors: JC9527
- * @LastEditTime: 2023-08-17 18:16:09
+ * @LastEditTime: 2023-08-17 21:32:14
 -->
 <!--
  * @Descripttion: 
@@ -41,11 +41,11 @@
           <i slot="suffix" class="el-icon-search" @click="search"></i>
         </el-input>
       </div>
-      <div class="laser-positioning" @click="positioning()">
+      <div class="laser-positioning">
         <span>地图扎点</span>
         <img src="@/assets/images/positioning.png" alt="">
       </div>
-      <div class="creation-task" @click="createdTask()">
+      <div class="creation-task">
         <span>任务创建</span>
         <img src="@/assets/images/createdTask.png" alt="">
       </div>
@@ -110,10 +110,10 @@
     <personage-track ref="personageTrack"></personage-track>
     <crew-assign ref="crewAssign"></crew-assign>
     <video-wall ref="videoWall"></video-wall>
-    <person-popup v-if="personPopup" v-on:personClose="personClose" v-on:getRoute="presoninfo"></person-popup>
+    <person-popup v-if="personPopup" v-on:personClose="personClose" v-on:getRoute="presoninfo" :point="mypoint"></person-popup>
-    <event-popup v-if="eventPopup" v-on:eventClose="eventClose" v-on:zhipai="personzhipai"></event-popup>
+    <event-popup v-if="eventPopup" v-on:eventClose="eventClose" v-on:zhipai="personzhipai" :point="mypoint"></event-popup>
-    <car-popup v-if="carPopup" v-on:carClose="carClose" v-on:carinfo="carinfo"></car-popup>
+    <car-popup v-if="carPopup" v-on:carClose="carClose" v-on:carinfo="carinfo" :point="mypoint"></car-popup>
-    <monitoring-popup v-if="monitoringPopup" v-on:monitoringClose="monitoringClose" v-on:monitoringInfo="monitoringInfo"></monitoring-popup>
+    <monitoring-popup v-if="monitoringPopup" v-on:monitoringClose="monitoringClose" v-on:monitoringInfo="monitoringInfo" :point="mypoint"></monitoring-popup>
   </div>
 </template>
 <script>
@@ -180,7 +180,8 @@ export default {
       personPopup:false,
       eventPopup:false,
       carPopup:false,
-      monitoringPopup:false
+      monitoringPopup:false,
+      mypoint:{},
     }
   },
   methods:{
@@ -276,15 +277,15 @@ export default {
       })
       let ico2 = L.icon({
         iconUrl: require('../../../assets/images/icon/icon2.png'),
-        iconSize: [52, 81],
+        iconSize: [44, 91],
       })
       let ico3 = L.icon({
         iconUrl: require('../../../assets/images/icon/icon3.png'),
-        iconSize: [52, 81],
+        iconSize: [44, 91],
       })
       let ico4 = L.icon({
         iconUrl: require('../../../assets/images/icon/icon4.png'),
-        iconSize: [52, 81],
+        iconSize: [45, 95],
       })
       let ico5 = L.icon({
         iconUrl: require('../../../assets/images/icon/icon5.png'),
@@ -349,6 +350,7 @@ export default {
     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) {
@@ -468,13 +470,13 @@ export default {
     },
     actionBtn(id){
       this.action = id;
-      console.log(id)
+      // console.log(id)
-      this.$emit('actionBtn',id);
+      // this.$emit('actionBtn',id);
-      if(id == 1){
+      // if(id == 1){
-        this.$refs.personageTrack.open();
+      //   this.$refs.personageTrack.open();
-      } else {
+      // } else {
-        this.$refs.crewAssign.open();
+      //   this.$refs.crewAssign.open();
-      }
+      // }
     },
     // 输入框的搜索框点击事件
     search(){
@@ -486,7 +488,7 @@ export default {
     },
     // 地图扎点的点击事件
     positioning(){
-      this.$refs.videoWall.open();
+      // this.$refs.videoWall.open();
     },
     // 切换地图事件
     changeMap(id){

src/views/components/carPopup/index.vue

@@ -1,5 +1,13 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: JC9527
+ * @Date: 2023-08-17 16:59:51
+ * @LastEditors: JC9527
+ * @LastEditTime: 2023-08-17 21:28:32
+-->
 <template>
-  <popup-title :type="3" v-on:personClose="carClose" title="车辆信息">
+  <popup-title :type="3" v-on:personClose="carClose" title="车辆信息" :style="pointLocation">
     <div class="car-main">
       <div class="car-info">
         <div class="dot"></div>
@@ -16,6 +24,10 @@ export default {
   components:{popupTitle},
   data() {
     return {
+      pointLocation:{
+        left:'',
+        right:'',
+      }
     }
   },
   methods:{
@@ -26,6 +38,27 @@ export default {
       this.$emit('carinfo')
     }
   },
+  props:{
+    point:{
+      type:Object,
+      default:function(){
+        return {}
+      }
+    }
+  },
+  mounted(){
+    this.pointLocation.left = (this.point.x + 20) + 'px';
+    this.pointLocation.top = (this.point.y - 40) + 'px'
+  },
+  watch:{
+    point:{
+      handler(newobj,oldobj) {
+        this.pointLocation.left = (newobj.x + 20) + 'px';
+        this.pointLocation.top = (newobj.y - 40) + 'px'
+      },
+      deep:true,
+    }
+  },
 }
 </script>
 <style lang="scss" scoped>

src/views/components/eventPopup/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <popup-title :type="2" v-on:personClose="eventClose" title="事件信息">
+  <popup-title :type="2" v-on:personClose="eventClose" title="事件信息" :style="pointLocation">
     <div class="event-main">
       <div class="event-info">
         <div class="dot"></div>
@@ -36,6 +36,10 @@ export default {
       mypopupTitle:{
         width:'242px',
         height:"224px",
+      },
+      pointLocation:{
+        left:'',
+        right:'',
       }
     }
   },
@@ -47,6 +51,27 @@ export default {
       this.$emit('zhipai')
     }
   },
+  props:{
+    point:{
+      type:Object,
+      default:function(){
+        return {}
+      }
+    }
+  },
+  mounted(){
+    this.pointLocation.left = (this.point.x + 20) + 'px';
+    this.pointLocation.top = (this.point.y - 40) + 'px'
+  },
+  watch:{
+    point:{
+      handler(newobj,oldobj) {
+        this.pointLocation.left = (newobj.x + 20) + 'px';
+        this.pointLocation.top = (newobj.y - 40) + 'px'
+      },
+      deep:true,
+    }
+  },
 }
 </script>
 <style lang="scss" scoped>

src/views/components/mapLeftNumber/index.vue

@@ -20,7 +20,7 @@
           </div>
           <div class="route-track">
             <img src="@/assets/images/track.png" alt="">
-            <span>形成轨迹</span>
+            <span>行程轨迹</span>
           </div>
         </div>
       </div>

src/views/components/monitoringPopup/index.vue

@@ -1,5 +1,13 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: JC9527
+ * @Date: 2023-08-17 17:14:00
+ * @LastEditors: JC9527
+ * @LastEditTime: 2023-08-17 21:28:08
+-->
 <template>
-  <popup-title :type="4" v-on:personClose="monitoringClose" title="监控视频">
+  <popup-title :type="4" v-on:personClose="monitoringClose" title="监控视频" :style="pointLocation">
     <div class="monitoring">
       <div class="bg">
         <img src="@/assets/images/popup/screenshot20230817.png" alt="">
@@ -17,6 +25,10 @@ export default {
   components:{popupTitle},
   data() {
     return {
+      pointLocation:{
+        left:'',
+        right:'',
+      }
     }
   },
   methods:{
@@ -27,6 +39,27 @@ export default {
       this.$emit('monitoringInfo')
     }
   },
+  props:{
+    point:{
+      type:Object,
+      default:function(){
+        return {}
+      }
+    }
+  },
+  mounted(){
+    this.pointLocation.left = (this.point.x + 20) + 'px';
+    this.pointLocation.top = (this.point.y - 40) + 'px'
+  },
+  watch:{
+    point:{
+      handler(newobj,oldobj) {
+        this.pointLocation.left = (newobj.x + 20) + 'px';
+        this.pointLocation.top = (newobj.y - 40) + 'px'
+      },
+      deep:true,
+    }
+  },
 }
 </script>
 <style lang="scss" scoped>

src/views/components/personPopup/index.vue

@@ -4,10 +4,10 @@
  * @Author: JC9527
  * @Date: 2023-08-17 15:43:51
  * @LastEditors: JC9527
- * @LastEditTime: 2023-08-17 17:47:57
+ * @LastEditTime: 2023-08-17 21:27:22
 -->
 <template>
-  <div class="person-popup">
+  <div class="person-popup" :style="pointLocation">
     <div class="popup-title">
       <div class="title">人员信息</div>
       <div class="mask" @click="close()"></div>
@@ -31,6 +31,10 @@
 export default {
   data() {
     return {
+      pointLocation:{
+        left:'',
+        right:'',
+      }
     }
   },
   methods:{
@@ -41,6 +45,27 @@ export default {
       this.$emit('getRoute')
     }
   },
+  props:{
+    point:{
+      type:Object,
+      default:function(){
+        return {}
+      }
+    }
+  },
+  mounted(){
+    this.pointLocation.left = (this.point.x + 20) + 'px';
+    this.pointLocation.top = (this.point.y - 40) + 'px'
+  },
+  watch:{
+    point:{
+      handler(newobj,oldobj) {
+        this.pointLocation.left = (newobj.x + 20) + 'px';
+        this.pointLocation.top = (newobj.y - 40) + 'px'
+      },
+      deep:true,
+    }
+  },
 }
 </script>
 <style lang="scss" scoped>