弹框底图修改、个人信息对接

.env.development

@@ -2,7 +2,7 @@
  # @Author: 张涛
  # @Date: 2023-11-09 18:29:41
  # @LastEditors: JC9527
- # @LastEditTime: 2024-01-23 13:54:49
+ # @LastEditTime: 2024-01-26 16:18:44
  # @FilePath: \JiangningUrbanManagePc\.env.development
 ### 
 # 页面标题
@@ -17,7 +17,7 @@ ENV = 'development'
 VUE_APP_BASE_API = 'https://t-jn-bjh-admin-server.jsszkd.com'
 VUE_APP_BASE_API1 = 'https://t-kd-process-server.jsszkd.com'
 VUE_APP_BASE_API2 = 'https://t-jn-development-manager-server.jsszkd.com/api/webapp'
-# VUE_APP_BASE_API = 'http://192.168.0.104:9037'
+# VUE_APP_BASE_API = 'http://192.168.0.106:9037'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

src/api/bigScreenApi/index.js

@@ -187,3 +187,21 @@ export function listZhzz(query) {
       params: query
   })
 }
+
+// 根据imei查询人员信息
+export function getUserByImei(params){
+  return request({
+      url: '/jn/dwgj/getUserByImei',
+      method: 'get',
+      params
+  })
+}
+
+// 根据手机号和人员名称查询
+export function dwgjList(params){
+  return request({
+      url: '/jn/dwgj/list',
+      method: 'get',
+      params
+  })
+}

src/assets/styles/leaflet.scss

@@ -15,7 +15,7 @@
 .event-popup {
   width: 252px;
   height: 224px;
-  background-image: url("../images/popup/bg2.png");
+  background-image: url("../images/popup/popup.png");
   background-size: 100% 100%;
   z-index: 600;
 
@@ -44,8 +44,8 @@
     }
 
     .mask {
-      width: 13px;
+      width: 15px;
-      height: 13px;
+      height: 15px;
       cursor: pointer;
     }
   }
@@ -110,7 +110,7 @@
   // width: 242px;
   width: 470px;
   height: 244px;
-  background-image: url("../images/popup/bg1.png");
+  background-image: url("../images/popup/popup.png");
   background-size: 100% 100%;
   z-index: 600;
 
@@ -141,8 +141,8 @@
 
     .mask {
       // width: 13px;
-      width: 35px;
+      width: 15px;
-      height: 13px;
+      height: 15px;
       cursor: pointer;
     }
   }
@@ -219,7 +219,7 @@
 .car-popup {
   width: 262px;
   height: 138px;
-  background-image: url("../images/popup/bg3.png");
+  background-image: url("../images/popup/popup.png");
   background-size: 100% 100%;
   z-index: 600;
 
@@ -248,8 +248,8 @@
     }
 
     .mask {
-      width: 13px;
+      width: 15px;
-      height: 13px;
+      height: 15px;
       cursor: pointer;
     }
   }
@@ -308,7 +308,7 @@
   width: 282px;
   // height: 230px;
   // height: 220px;
-  background-image: url("../images/popup/bg4.png");
+  background-image: url("../images/popup/popup.png");
   background-size: 100% 100%;
   z-index: 600;
 
@@ -338,8 +338,8 @@
     }
 
     .mask {
-      width: 13px;
+      width: 15px;
-      height: 13px;
+      height: 15px;
       cursor: pointer;
     }
   }
@@ -509,7 +509,7 @@
 }
 
 .travel {
-  background-image: url("../images/dialogbg/792@2x.png");
+  background-image: url("../images/dialogbg/dialog1.png");
   background-size: 100% 100%;
   background-color: transparent;
   .el-dialog__header {
@@ -549,10 +549,10 @@
           }
         }
       }
-      .close {
+      .closeimg {
         position: absolute;
-        width: 50px;
+        width: 20px;
-        height: 50px;
+        height: 20px;
         right: 0px;
         top: 6px;
         cursor: pointer;

src/views/bigScreen/index.vue

@@ -4,7 +4,7 @@
  * @Author: JC9527
  * @Date: 2023-08-14 14:40:02
  * @LastEditors: JC9527
- * @LastEditTime: 2024-01-12 23:43:59
+ * @LastEditTime: 2024-01-23 17:53:57
 -->
 <template>
   <div class="pc-container">
@@ -98,7 +98,7 @@ export default {
       this.rightAnimation = !this.rightAnimation;
     },
     changeBackground(id){
-      console.log(id);
+      // console.log(id);
       this.backgroundId = id;
     }
     // getcodeImg(){

src/views/bigScreen/map/index.vue

@@ -4,7 +4,7 @@
  * @Author: JC9527
  * @Date: 2024-01-09 23:08:15
  * @LastEditors: JC9527
- * @LastEditTime: 2024-01-23 13:58:59
+ * @LastEditTime: 2024-01-26 16:41:44
 -->
 <template>
   <div class="map-main">
@@ -57,7 +57,8 @@
         <div class="person-popup">
           <div class="person-title">
             <div class="title">人员信息</div>
-            <div class="mask" @click="markersClosePopup"></div>
+            <!-- <div class="mask" @click="markersClosePopup"></div> -->
+            <img src="@/assets/images/dialogbg/close.png" class="mask" @click="markersClosePopup" alt="" />
           </div>
           <div class="person-main">
             <div class="person-info">
@@ -72,14 +73,14 @@
                 <div class="dot"></div>
                 <div class="name">联系方式：</div>
               </div>
-              <div class="position">18868887888</div>
+              <div class="position">{{ personInfo.personinfo.phonenumber }}</div>
             </div>
             <div class="person-info">
               <div class="info-left">
                 <div class="dot"></div>
                 <div class="name">所属部门：</div>
               </div>
-              <div class="position">一中队</div>
+              <div class="position">{{ personInfo.personinfo.deptName }}</div>
             </div>
             <div class="person-info">
               <div class="info-left">
@@ -93,14 +94,14 @@
                 <div class="dot"></div>
                 <div class="name">所属围栏：</div>
               </div>
-              <div class="position">一中队一号网格</div>
+              <div class="position">{{ personInfo.personinfo.fenceName || '-' }}</div>
             </div>
             <div class="person-info">
               <div class="info-left">
                 <div class="dot"></div>
                 <div class="name">当前位置：</div>
               </div>
-              <div class="position">江苏省南京市江宁区XX街XX号</div>
+              <div class="position">{{ personInfo.info.address }}</div>
             </div>
             <div class="btns">
               <div @click="travelPath()">行程轨迹</div>
@@ -124,7 +125,8 @@
         <div class="event-popup">
           <div class="event-title">
             <div class="title">事件信息</div>
-            <div class="mask" @click="markersClosePopup"></div>
+            <!-- <div class="mask" @click="markersClosePopup"></div> -->
+            <img src="@/assets/images/dialogbg/close.png" class="mask" @click="markersClosePopup" alt="" />
           </div>
           <div class="event-main">
             <div class="event-info">
@@ -165,7 +167,8 @@
         <div class="car-popup">
           <div class="car-title">
             <div class="title">车辆信息</div>
-            <div class="mask" @click="markersClosePopup"></div>
+            <!-- <div class="mask" @click="markersClosePopup"></div> -->
+            <img src="@/assets/images/dialogbg/close.png" class="mask" @click="markersClosePopup" alt="" />
           </div>
           <div class="car-main">
             <div class="car-info">
@@ -189,7 +192,8 @@
         <div class="monitoring-popup">
           <div class="monitoring-title">
             <div class="title">{{ monitoringInfo.info.name }}</div>
-            <div class="mask" @click="markersClosePopup"></div>
+            <!-- <div class="mask" @click="markersClosePopup"></div> -->
+            <img src="@/assets/images/dialogbg/close.png" class="mask" @click="markersClosePopup" alt="" />
           </div>
           <div class="monitoring">
             <div class="monitoring-list">
@@ -234,7 +238,8 @@
         <div class="event-popup">
           <div class="event-title">
             <div class="title">主体基本信息</div>
-            <div class="mask" @click="markersClosePopup"></div>
+            <!-- <div class="mask" @click="markersClosePopup"></div> -->
+            <img src="@/assets/images/dialogbg/close.png" class="mask" @click="markersClosePopup" alt="" />
           </div>
           <div class="event-main">
           <div class="event-info">
@@ -290,10 +295,19 @@
       class="middle-top-left"
       :class="!leftAnimationData ? 'middle-top-left2' : 'middle-top-left'"
     >
-      <div class="input-keyword">
+      <div class="input-keyword" v-if="MyInput">
-        <el-input placeholder="请输入关键字" v-model="input">
+        <!-- <el-input placeholder="请输入关键字" v-model="input">
           <i slot="suffix" class="el-icon-search" @click="search"></i>
-        </el-input>
+        </el-input> -->
+        <el-autocomplete
+          prefix-icon="el-icon-search"
+          class="inline-input"
+          v-model="input"
+          :fetch-suggestions="querySearch"
+          placeholder="请输入关键字进行搜索"
+          :trigger-on-focus="false"
+          @select="handleSelect"
+        ></el-autocomplete>
       </div>
       <div class="laser-positioning" @click="positioning">
         <span>地图扎点</span>
@@ -427,7 +441,8 @@
         <div class="headline" text="title123kmalskdnj">
           <div class="headlinetitle" text="强制观摩">强制观摩</div>
         </div>
-        <div class="close" @click="videoClose"></div>
+        <!-- <div class="close" @click="videoClose"></div> -->
+        <img src="@/assets/images/dialogbg/close.png" class="closeimg" @click="videoClose" alt="" />
       </div>
     </template>
       <div class="watch-video-play">
@@ -481,6 +496,8 @@ import {
   getCarManageList,
   getStreetShopList,
   listZhzz,
+  getUserByImei,
+  dwgjList
 } from "@/api/bigScreenApi";
 import {
   robotLogin,
@@ -518,6 +535,7 @@ export default {
       personInfo: {
         position: [],
         info: {},
+        personinfo:{},
         visible: false,
       },
       // 事件弹框
@@ -567,6 +585,8 @@ export default {
       mapLoading:false,
       count:0,
       cluster:null,
+      personMarkers:[],
+      MyInput:true,
 
 
 
@@ -594,7 +614,7 @@ export default {
       // console.log(o.getCenter())
       // console.log(this.map,'initMapinitMap');
       this.layers.layer = new AMap.OverlayGroup();            // 一级网格
-      this.layers.layer2 = new AMap.OverlayGroup();           // 二级网格
+      this.layers.layer2 = new AMap.OverlayGroup();           // 二级网格   ⌈ 暂废弃 ⌋
       this.layers.layer3 = new AMap.OverlayGroup();           // 围栏、路段、区域、及文本
       this.layers.layer4 = new AMap.OverlayGroup();           // 地图扎点
       this.layers.text = new AMap.OverlayGroup();             // 一级网格文本
@@ -814,7 +834,7 @@ export default {
         // 修改图层组的层级在点击到围栏，区域，路段时监听网格时就能触发点击事件
         // this.layers.layer2.setOptions({ zIndex: 100 });
         // this.layers.layer3.setOptions({ zIndex: 99 });
-        this.layers.layer2.on('click', (e)=>{
+        this.layers.layer.on('click', (e)=>{
           // console.log(e,'this.layers.layer2的点击事件');
           if(this.isPositioning) {
             // console.log(e,'eeeeeeee');
@@ -859,13 +879,13 @@ export default {
         }
         // 获取点位
         this.getMarkers(1);
-        if(this.layers.layer2) {
+        // if(this.layers.layer2) {
-          this.layers.layer2.hide();
+        //   this.layers.layer2.hide();
-        }
+        // }
         // zoomchange ： 地图缩放级别更改后触发。  zoomstart ： 缩放开始时触发。  zoomend ： 缩放停止时触发。
         map.on("zoomend", (ev) => {
           let zoom = map.getZoom();
-          // console.log(zoom,'zoom层级');
+          console.log(zoom,'zoom层级');
 
           if(zoom < 11) {
             this.componentMarker.visible = false;
@@ -877,34 +897,14 @@ export default {
           } else {
             this.componentMarker.visible = true;
             if(zoom < 13.2) {
+              if(zoom < 12) {
                 this.unlightedPolygonId()
-              if(this.layers.layer2) {
-                this.layers.layer2.hide();
-                this.layers.text1.hide();
-                this.isPositioning = false;
               }
               if(this.layers.layer3) {
                 this.layers.layer3.hide();
+                this.isPositioning = false;
               }
-              // if(this.layers.layer) {
-              //   this.layers.layer.show();
-              //   this.layers.text.show();
-              // }
             } else if(zoom > 13.2){
-              if(this.layers.layer2) {
-                this.layers.layer2.show();
-                this.layers.text1.hide();
-              }
-              
-              // if(this.layers.layer) {
-              //   if(this.wanggeData.length > 0){
-              //     this.layers.layer.hide();
-              //     this.layers.text.hide();
-              //   }
-              // }
-              if(this.layers.layer3) {
-                this.layers.layer3.hide();
-              }
               if(zoom > 14) {
                 this.layers.text1.show();
                 this.layers.layer3.show();
@@ -917,10 +917,8 @@ export default {
           }
         });
       });
-      // console.log(this.$refs.map.$$getInstance(),'TTTTTTT')
     },
 
-
     // 人员非聚合自定义样式及点击事件
     _personRenderMarker(context){
       let imgSrc
@@ -931,17 +929,34 @@ export default {
       }
       var content = `<div class="markerStyles"><div class="marker-Text" style="width:${context.data[0].text.length * 15}px">${context.data[0].text}</div><img src="${imgSrc}" alt=""></div>`;
       var offset = new AMap.Pixel(-27, -94);
-      context.marker.setContent(content)
+      context.marker.setContent(content);
-      context.marker.setOffset(offset)
+      context.marker.setOffset(offset);
+      let obj = {};
+      obj.markers = context.marker;
+      obj.imei = context.data[0].info.imei;
+      this.personMarkers.push(obj)
       context.marker.on('click',(ev)=>{
+        // 根据imei获取人员信息
+        getUserByImei({imei:context.data[0].info.imei}).then(res=>{
+          if(res.code == 200) {
             this.personInfo.position = context.data[0].position;
             this.personInfo.info = context.data[0].info;
-        // console.log(context.data[0].info,'人员信息');
+            this.personInfo.personinfo = res.data[0];
-        // TODO:获取人员信息
-        // getDeviceList({imei:context.data[0].info.imei}).then((res) => {
-          // console.log(res,"获取的人员信息");
             this.personInfo.visible = true;
-        // })
+          }
+        })
+      })
+    },
+    // 事件的非聚合自定义样式及点击事件
+    _eventMarker (context) {
+      var content = `<div class="markerStyles"><img src="${require("../../../assets/images/icon/icon2.png")}" alt=""></div>`;
+      var offset = new AMap.Pixel(-27, -94);
+      context.marker.setContent(content)
+      context.marker.setOffset(offset)
+      context.marker.on('click',(ev)=>{
+        this.eventInfo.position = context.data[0].position;
+        this.eventInfo.info = context.data[0].info;
+        this.eventInfo.visible = true;
       })
     },
     // 视频非聚合自定义样式及点击事件
@@ -961,7 +976,7 @@ export default {
       var content = `<div class="markerStyles"><div class="marker-Text" style="width:${context.data[0].info.shopName.length * 15}px">${context.data[0].info.shopName}</div><img src="${require("../../../assets/images/icon/icon6.png")}" alt=""></div>`;
       var offset = new AMap.Pixel(-27, -94);
       context.marker.setContent(content)
-      context.marker.setOffset(offset)
+      context.marker.setOffset(offset);
       context.marker.on('click',(ev)=>{
         this.shopInfo.position = context.data[0].position;
         this.shopInfo.info = context.data[0].info;
@@ -1014,7 +1029,7 @@ export default {
           // console.log(res,'点位信息');
           if (res.data.obj) {
             res.data.obj.forEach((element) => {
-              if (element.status == 0 || element.status == 1) { 
+              if (element.status == "0" || element.status == "1") { 
                 this.personLine.push(element);
                 let obj = {position:[]};
                 obj.position[0] = element.longitude;
@@ -1058,6 +1073,34 @@ export default {
             this.mapLoading = false;
           }
         })
+        let data = {'queryValue' : [], "myInstanceClassify" : "all", "parameterValue":[], fks: []}
+        ViewListPage({viewCode:'shi_jian_shou_li_list_page', pageNo: 1, pageSize:500}, data).then(res=>{
+          this.mapLoading = false;
+          if(res.code == 200) {
+            let videoPoint = [];
+            res.result.records.forEach((element)=>{
+              let obj = {position:[]};
+              obj.position[0] = element.longitude;
+              obj.position[1] = element.latitude;
+              // obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
+              obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0)
+              obj.imgSrc = ico2;
+              obj.info = element
+              // this.markers.push(obj)
+              videoPoint.push(obj)
+            })
+            this.count = videoPoint.length;
+            AMap.plugin(['AMap.MarkerCluster'],()=>{
+              this.cluster = new AMap.MarkerCluster(this.map,videoPoint,{
+                gridSize: 20, // 设置网格像素大小
+                maxZoom: 17,
+                styles: sts,
+                // renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
+                renderMarker: this._eventMarker, // 自定义非聚合点样式
+              })
+            })
+          }
+        })
       } else if(id == 3){
         point.features.forEach((element)=>{
           if (element.properties.name == "执法车辆") {
@@ -1071,19 +1114,6 @@ export default {
           }
         })
       } else if(id == 4){
-        // point.features.forEach((element)=>{
-        //   if (element.properties.name == "监控视频") {
-        //     this.mapLoading = false;
-        //     let obj = {position:[]};
-        //     obj.position[0] = element.geometry.coordinates[0];
-        //     obj.position[1] = element.geometry.coordinates[1];
-        //     obj.imgSrc = element.properties.status == "0" ? offIcon4 : ico5;
-        //     // obj.imgSrc = ico5;
-        //     obj.info = element;
-            
-        //     this.markers.push(obj)
-        //   }
-        // })
         getVideoPageEq({pageNo:1,pageSize:1000}).then(res=>{
           this.mapLoading = false;
           // console.log(res,"res");
@@ -1279,8 +1309,9 @@ export default {
     },
     // 执法人员强制观摩
     watchClick(){
+      if(this.personInfo.status == 1) {
         this.showVideo = true;
-      videoSurveillance({...this.videoCondition,destID:'9999' + this.personInfo.info.imei,imei:this.personInfo.info.imei}).then(res=>{
+        videoSurveillance({...this.videoCondition,destID:this.personInfo.info.userId,imei:this.personInfo.info.imei}).then(res=>{
           if(res.code == 200 && res.data.msg == '操作成功') {
           // http://121.229.2.163:9291/live/9999   http://120.27.25.166:9305/live/9999_
             setTimeout(()=>{
@@ -1288,6 +1319,9 @@ export default {
             },3000)
           }
         })
+      } else {
+        this.$modal.msgError("该人员已离线");
+      }
     },
     // 强制观摩关闭事件
     videoClose(){
@@ -1581,7 +1615,7 @@ export default {
         if(this.isPositioning) {
           let latlng = e.lnglat
           let name;
-          this.layers.layer2.eachOverlay((item)=>{
+          this.layers.layer.eachOverlay((item)=>{
             // console.log(item,'item');
             if(item.getBounds().contains(latlng)){
               name = item.getExtData().name
@@ -1630,7 +1664,8 @@ export default {
     },
     // 子组件的名称点击事件
     divClick(lightedPolygonId){
-      console.log(lightedPolygonId,"父组件的名称点击事件");
+      // console.log(lightedPolygonId,"父组件的名称点击事件");
+      if(this.action == 1) {
         // 取消重点区域高亮
         this.quyuData.forEach((element) => {
           element.myPolygon?.setOptions({
@@ -1674,10 +1709,10 @@ export default {
         // 取消区域网格高亮
         this.wanggeData.forEach((element)=>{
           element.myPolygon?.setOptions({
-          strokeColor: '#FFBF7A',
-          fillColor: '#DC8419',
             strokeOpacity: 1,
-          fillOpacity: 0.3,
+            strokeColor: '#00C5EC', 
+            fillColor: '#00AEFF',
+            fillOpacity: 0.4,
             editable:false,
             visible:true,
           });
@@ -1817,6 +1852,195 @@ export default {
   
           })
         }
+      } else if(this.action == 2) {
+        // console.log("取消高亮并且判断是卫星地图");
+        // console.log(lightedPolygonId.item.id,"id");
+        // 取消重点区域高亮
+        this.quyuData.forEach((element) => {
+          element.myPolygon?.setOptions({
+            strokeOpacity: 0,
+            strokeColor: '#FF0000',
+            fillColor: '#FF0000',
+            fillOpacity:0.6,
+            editable:false,
+            visible:true,
+          });
+          element.text?.setStyle({
+            'color': '#E4ECFF',
+          });
+        })
+        // 取消重点路段高亮
+        this.luduanData.forEach((element) => {
+          element.myPolyline?.setOptions({
+            strokeOpacity: 1,
+            strokeColor: '#46FF77',
+            editable:false,
+            visible:true,
+          });
+          element.text?.setStyle({
+            'color': '#46FF77',
+          });
+        })
+        // 取消考勤围栏高亮
+        this.weilanData.forEach((element) => {
+          element.myPolygon?.setOptions({
+            strokeOpacity: 1,
+            strokeColor: "#00B7FF",
+            fillColor: "#001AFF",
+            fillOpacity: 0.5,
+            editable:false,
+            visible:true,
+          });
+          element.text?.setStyle({
+            'color': '#E4ECFF',
+          });
+        })
+        // 取消区域网格高亮
+        this.wanggeData.forEach((element)=>{
+          element.myPolygon?.setOptions({
+            strokeColor: '#0084FF', 
+            fillColor: '#40AFFF',
+            fillOpacity: 0.8,
+            editable:false,
+            visible:true,
+          });
+          element.text?.setStyle({
+            'color': '#DFFAFF',
+            'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
+          });
+        })
+        this.isClickLingtedPolygonId = true;
+        this.highlightedPolygonId = lightedPolygonId.id;
+        if(lightedPolygonId.id == 1) {
+          // 区域网格
+          this.wanggeData.forEach((element)=>{
+            // console.log(element,"element");
+            // let shapeStr = JSON.parse(element.shapeStr);
+            if(element.id === lightedPolygonId.item.id) {
+              element.myPolygon.setOptions({
+                strokeColor: '#46FF77',
+                fillColor: '#46FF77',
+                fillOpacity: 0.5,
+                strokeOpacity: 0.8,
+                editable:false,
+                visible:true,
+              });
+              element.text.setStyle({
+                'color': '#46FF77',
+              });
+              this.lightedPolygon = element.myPolygon;
+              this.lightedText = element.text;
+              this.map.setFitView(element.myPolygon);
+            } else {
+              element.myPolygon.setOptions({
+                strokeColor: '#0084FF', 
+                fillColor: '#40AFFF',
+                fillOpacity: 0.8,
+                strokeOpacity: 1,
+                editable:false,
+                visible:true,
+              });
+              element.text.setStyle({
+                'color': '#00AEFF',
+                'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
+              });
+            }
+          })
+        } else if(lightedPolygonId.id == 2) {
+          // 重点区域
+          this.quyuData.forEach((element) => {
+            if(element.id == lightedPolygonId.item.id) {
+              element.myPolygon.setOptions({
+                strokeColor: '#46FF77',
+                fillColor: '#46FF77',
+                fillOpacity: 0.5,
+                strokeOpacity: 0.8,
+                editable:false,
+                visible:true,
+              });
+              element.text.setStyle({
+                'color': '#FFDBB7',
+              });
+              this.lightedPolygon = element.myPolygon;
+              this.lightedText = element.text;
+              this.map.setFitView(element.myPolygon);
+            } else {
+              element.myPolygon.setOptions({
+                strokeOpacity: 0,
+                strokeColor: '#FF0000',
+                fillColor: '#FF0000',
+                fillOpacity:0.6,
+                editable:false,
+                visible:true,
+              });
+              element.text.setStyle({
+                'color': '#E4ECFF',
+              });
+            }
+          })
+        } else if(lightedPolygonId.id == 3) {
+          // 重点路段
+          this.luduanData.forEach((element) => {
+            if(element.id == lightedPolygonId.item.id) {
+              element.myPolyline.setOptions({
+                strokeOpacity: 1,
+                strokeColor: '#FF0000',
+                editable:false,
+                visible:true,
+              });
+              element.text.setStyle({
+                'color': '#FF0000',
+              });
+              this.lightedPolygon = element.myPolyline;
+              this.lightedText = element.text;
+              this.map.setFitView(element.myPolyline);
+            } else {
+              element.myPolyline.setOptions({
+                strokeOpacity: 1,
+                strokeColor: '#46FF77',
+                editable:false,
+                visible:true,
+              });
+              element.text.setStyle({
+                'color': '#46FF77',
+              });
+            }
+          })
+        } else if(lightedPolygonId.id == 4) {
+          // 考勤围栏
+          this.weilanData.forEach((element) => {
+            if(element.id == lightedPolygonId.item.id) {
+              element.myPolygon.setOptions({
+                strokeColor: '#46FF77',
+                fillColor: '#46FF77',
+                fillOpacity: 0.5,
+                strokeOpacity: 0.8,
+                editable:false,
+                visible:true,
+              });
+              element.text.setStyle({
+                'color': '#46FF77',
+              });
+              this.lightedPolygon = element.myPolygon;
+              this.lightedText = element.text;
+              this.map.setFitView(element.myPolygon);
+            } else {
+              element.myPolygon.setOptions({
+                strokeOpacity: 1,
+                strokeColor: "#00B7FF",
+                fillColor: "#001AFF",
+                fillOpacity: 0.5,
+                editable:false,
+                visible:true,
+              });
+              element.text.setStyle({
+                'color': '#E4ECFF',
+              });
+            }
+  
+          })
+        }
+      }
 
 
 
@@ -1826,6 +2050,7 @@ export default {
       // console.log(this.highlightedPolygonId,'this.highlightedPolygonId');
       if(this.isClickLingtedPolygonId) {
         this.isClickLingtedPolygonId = false;
+        if(this.action == 1) {
           if(this.highlightedPolygonId == 1) {
             this.lightedPolygon.setOptions({
               strokeColor: '#00C5EC', 
@@ -1875,19 +2100,59 @@ export default {
               'color': '#62E1FA',
             });
           }
+        } else if(this.action == 2) {
+          if(this.highlightedPolygonId == 1) {
+            this.lightedPolygon.setOptions({
+              strokeColor: '#0084FF', 
+              fillColor: '#40AFFF',
+              fillOpacity: 0.8,
+              editable:false,
+              visible:true,
+            });
+            this.lightedText.setStyle({
+              'color': '#DFFAFF',
+              'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
+            });
+          } else if(this.highlightedPolygonId == 2) {
+            // console.log("进入区域取消高亮");
+            this.lightedPolygon.setOptions({
+              strokeOpacity: 0,
+              strokeColor: '#FF0000',
+              fillColor: '#FF0000',
+              fillOpacity:0.6,
+              editable:false,
+              visible:true,
+            });
+            this.lightedText.setStyle({
+              'color': '#E4ECFF',
+            });
+          } else if(this.highlightedPolygonId == 3) {
+            this.lightedPolygon.setOptions({
+              strokeOpacity: 1,
+              strokeColor: '#46FF77',
+              editable:false,
+              visible:true,
+            });
+            this.lightedText.setStyle({
+              'color': '#46FF77',
+            });
+          } else if(this.highlightedPolygonId == 4) {
+            this.lightedPolygon.setOptions({
+              strokeOpacity: 1,
+              strokeColor: "#00B7FF",
+              fillColor: "#001AFF",
+              fillOpacity: 0.5,
+              editable:false,
+              visible:true,
+            });
+            this.lightedText.setStyle({
+              'color': '#E4ECFF',
+            });
+          }
+        }
       }
     },
 
-
-
-    getIcons(name, src) {
-      let icon = L.divIcon({
-        className: "divIcon-marker",
-        html: `<div class="markers"><div class="marker-title">${name}</div><img src="${src}" /></div>`,
-        iconSize: [100, 50],
-      });
-      return icon;
-    },
     // 电子底图/卫星底图切换事件
     actionBtn(id) {
       this.action = id;
@@ -1915,12 +2180,12 @@ export default {
           })
         }
         // 修改二级网格背景
-        this.layers.layer2.setOptions ({
+        // this.layers.layer2.setOptions ({
-          strokeColor: '#FFBF7A',
+        //   strokeColor: '#FFBF7A',
-          fillColor: '#DC8419',
+        //   fillColor: '#DC8419',
-          strokeOpacity: 1,
+        //   strokeOpacity: 1,
-          fillOpacity: 0.3,
+        //   fillOpacity: 0.3,
-        })
+        // })
         // 修改围栏区域文本样式
         var overlays = this.layers.layer3.getOverlays();
         for (var i = 0; i < overlays.length; i++) {
@@ -1973,18 +2238,18 @@ export default {
             'white-space': 'nowrap',
           })
         }
-        // 修改二级网格背景
+        // // 修改二级网格背景
-        this.layers.layer2.setOptions ({
+        // this.layers.layer2.setOptions ({
-          strokeColor: '#FF8400',
+        //   strokeColor: '#FF8400',
-          fillColor: '#FF911A',
+        //   fillColor: '#FF911A',
-          strokeOpacity: 1,
+        //   strokeOpacity: 1,
-          fillOpacity: 0.4,
+        //   fillOpacity: 0.4,
-        })
+        // })
         // 修改围栏区域文本样式
         var overlays = this.layers.layer3.getOverlays();
         for (var i = 0; i < overlays.length; i++) {
           let id = overlays[i].getExtData().id;
-          console.log(id,'id');
+          // console.log(id,'id');
           if(id == "围栏text" || id == "区域text") {
             overlays[i].setStyle({
               'font-size': '14px',
@@ -2024,28 +2289,74 @@ export default {
         
       }
     },
-    // 输入框的搜索框点击事件
+    // 搜索数据
-    search() {
+    querySearch(queryString, cb){
-      // TODO:新增marker的方法
+      // 执法人员搜索
-      let ico5 = require("../../../assets/images/icon/icon5.png");
+      if(this.actionMap == 1) {
-      let offIcon4 = require("../../../assets/images/icon/offLine4.png");
+        dwgjList({name:queryString}).then(res=>{
-      point.features.forEach((element)=>{
+          var restaurants = res.data;
-        if(element.properties.name == "重点事件"){
+          let a = [];
-          var marker = new AMap.Marker({
+          restaurants.forEach((per=>{
-            position: new AMap.LngLat(element.geometry.coordinates[0], element.geometry.coordinates[1]), // 标记位置
+            let item = { value: per.nickName, imei: per.imei };
-            offset: new AMap.Pixel(-27, -94),
+            a.push(item);
-            content:`<div class="markerStyles">
+          }))
-                        <img src="${element.properties.status == "0"? offIcon4 : ico5}" alt="">
+          cb(a);
-                      </div>`,
-          });
-          marker.on("click",(e)=>{
-            this.monitoringInfo.visible = true;
-            this.monitoringInfo.position = [element.geometry.coordinates[0],element.geometry.coordinates[1]];
         })
-          this.layers.markers.addOverlay(marker);
+      } else if (this.actionMap == 2) {
-          this.map.add(this.layers.markers)
+        // 事件的搜索
+        let data = {'queryValue' : [{colCode:"name",queryValue:queryString}], "myInstanceClassify" : "all", "parameterValue":[], fks: []}
+        ViewListPage({viewCode:'shi_jian_shou_li_list_page', pageNo: 1, pageSize:10}, data).then(res=>{
+          console.log(res,"事件信息");
+          var restaurants = res.result.records;
+          let a = [];
+          restaurants.forEach((per=>{
+            let item = { value: per.name, imei: per.id };
+            a.push(item);
+          }))
+          cb(a);
+        })
+      } else if (this.actionMap == 3) {
+        // 车辆的搜索
+      } else if(this.actionMap == 4) {
+        // 监控视频搜索
+      } else if(this.actionMap == 5) {
+        // 店铺的搜索
+        getStreetShopList({shopName:queryString,pageSize:20,pageNum:1}).then(res=>{
+          var restaurants = res.rows;
+          let a = [];
+          restaurants.forEach((per=>{
+            let item = { value: per.shopName, imei: per.id, longitude:per.longitude, latitude:per.latitude };
+            a.push(item);
+          }))
+          cb(a);
+        })
+      }
+    },
+    // 点击事件
+    handleSelect(item){
+      console.log(item,"item");
+      if(this.actionMap == 1) {
+        if(item.imei) {
+          // 根据imei查询设备
+          getDeviceList({imei:item.imei}).then(res=>{
+            if(res.code == 200 && res.data.msg == "操作成功") {
+              this.map.setZoomAndCenter(16,[res.data.obj[0].longitude,res.data.obj[0].latitude]);
             }
           })
+        }
+      } else if (this.actionMap == 2) {
+        // 事件的搜索
+
+      } else if (this.actionMap == 3) {
+        // 车辆的搜索
+      } else if(this.actionMap == 4) {
+        // 监控视频搜索
+      } else if(this.actionMap == 5) {
+        // 店铺的搜索
+        if(item.longitude && item.latitude) {
+          this.map.setZoomAndCenter(16,[item.longitude,item.latitude]);
+        }
+      }
     },
     // 新增事件的点击事件
     createdTask() {
@@ -2062,7 +2373,9 @@ export default {
     },
     // 切换地图事件
     changeMap(id) {
+      this.MyInput = true;
       this.actionMap = id;
+      this.input = "";
       this.personInfo.visible = false;
       this.eventInfo.visible = false;
       this.carInfo.visible = false;
@@ -2075,18 +2388,12 @@ export default {
       } else if (id == 3) {
         this.markerOffset = new AMap.Pixel(-35, -148);
       } else if (id == 4) {
+        this.MyInput = false;
         this.markerOffset = new AMap.Pixel(-27, -94);
       } else if (id == 5) {
         this.markerOffset = new AMap.Pixel(-27, -94);
       }
       this.getMarkers(id);
-      // this.markerInterval()
-      
-      // if (id == 1) {
-      //   this.getTem();
-      // } else {
-      //   this.addMark();
-      // }
     },
     // 隐藏地图左侧
     leftAnimation() {
@@ -2110,10 +2417,29 @@ export default {
     },
     // 定时器
     markerInterval(){
+    
       let timer
       if(this.actionMap == 1) {
         timer = setInterval(() => {
-          this.getMarkers(1,true)
+          for(let i = 0; i < this.personMarkers.length; i++) {
+            for(let j = i+1; j < this.personMarkers.length; j++) {
+              if(this.personMarkers[i].imei == this.personMarkers[j].imei) {
+                this.personMarkers.splice(i,1);
+              }
+            }
+          }
+          console.log("this.personMarkers",this.personMarkers);
+          getDeviceList().then(res=>{
+            if(res.code == 200) {
+              res.data.obj.forEach((item,index)=>{
+                this.personMarkers.forEach((per)=>{
+                  if(item.imei == per.imei) {
+                    per.markers.setPosition(new AMap.LngLat(item.longitude,item.latitude))
+                  }
+                })
+              })
+            }
+          })
         }, 10000);
       } else {
         clearInterval(timer)
@@ -2134,7 +2460,7 @@ export default {
       listZhzz().then(res=>{
         if(res.code == 200) {
           this.onIcon = res.rows[0].onIcon ? process.env.VUE_APP_BASE_API + res.rows[0].onIcon : require("../../../assets/images/icon/icon1.png");
-          this.offIcon = res.rows[0].offIcon ? process.env.VUE_APP_BASE_API + res.rows[0].offIcon : require("../../../assets/images/icon/icon1.png");
+          this.offIcon = res.rows[0].offIcon ? process.env.VUE_APP_BASE_API + res.rows[0].offIcon : require("../../../assets/images/icon/offLine1.png");
           // console.log(this.onIcon,'this.onIcon');
           // console.log(this.offIcon,'this.offIcon');
           const faviconUrl = res.rows[0].platformLogoUrl ? process.env.VUE_APP_BASE_API + res.rows[0].platformLogoUrl : require("@/assets/images/login-logo.png");
@@ -2157,7 +2483,7 @@ export default {
     this.getCarList();
     this.getrobotToken();
     
-    // this.markerInterval()
+    // this.markerInterval();
   },
 };
 </script>

src/views/components/dialog/index.vue

@@ -4,19 +4,10 @@
  * @Author: JC9527
  * @Date: 2023-08-16 14:19:37
  * @LastEditors: JC9527
- * @LastEditTime: 2024-01-15 16:32:33
+ * @LastEditTime: 2024-01-23 15:44:59
 -->
 <template>
-  <el-dialog
+  <!-- :custom-class="
-    :visible.sync="dialogVisible"
-    :show-close="false"
-    :destroy-on-close="true"
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
-    :width="width"
-    :style="heightStyle"
-    append-to-body
-    :custom-class="
       type == 1
         ? 'dialog-boxed'
         : type == 2
@@ -28,14 +19,26 @@
         : type == 10
         ? 'dialog-boxed10'
         : ''
-    "
+    " -->
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :show-close="false"
+    :destroy-on-close="true"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :width="width"
+    :style="heightStyle"
+    append-to-body
+    
   >
     <template slot="title">
       <div class="closeClick">
         <div class="headline" text="title123kmalskdnj">
           <div class="headlinetitle" :text="title">{{ title }}</div>
+          <!-- <img src="@/assets/images/dialogbg/close.png" class="closeimg" @click="Close" alt="" /> -->
         </div>
-        <div class="close" @click="Close"></div>
+        <img src="@/assets/images/dialogbg/close.png" class="closeimg" @click="Close" alt="" />
+        <!-- <div class="close" @click="Close"></div> -->
       </div>
     </template>
     <slot> </slot>
@@ -85,7 +88,7 @@ export default {
   // width: vw(878);
   // height: 520px;
   //   border: 1px solid red;
-  background-image: url("../../../assets/images/dialogbg.png");
+  background-image: url("../../../assets/images/dialogbg/dialog1.png");
   background-size: 100% 100%;
   background-color: transparent;
   .el-dialog__header {
@@ -124,11 +127,14 @@ export default {
             text-shadow: none;
           }
         }
+        
       }
-      .close {
+      .closeimg {
+        // width: 20px;
+        // height: 20px;
         position: absolute;
-        width: 50px;
+        width: 20px;
-        height: 50px;
+        height: 20px;
         right: 0px;
         top: 6px;
         cursor: pointer;
@@ -142,16 +148,16 @@ export default {
 ::v-deep .dialog-boxed {
   background-image: url("../../../assets/images/dialogbg/dialog13.png");
   .el-dialog__header {
-    .closeClick {
+    // .closeClick {
-      .close {
+      // .close {
-        position: absolute;
+      //   position: absolute;
-        width: 27px;
+      //   width: 27px;
-        height: 23px;
+      //   height: 23px;
-        right: 10px;
+      //   right: 10px;
-        top: 18px;
+      //   top: 18px;
-        cursor: pointer;
+      //   cursor: pointer;
-      }
+      // }
-    }
+    // }
   }
 }
 ::v-deep .dialog-boxed2 {
@@ -160,46 +166,46 @@ export default {
 ::v-deep .dialog-boxed3 {
   background-image: url("../../../assets/images/dialogbg/792@2x.png");
   .el-dialog__header {
-    .closeClick {
+    // .closeClick {
-      .close {
+    //   .close {
-        position: absolute;
+    //     position: absolute;
-        width: 20px;
+    //     width: 20px;
-        height: 18px;
+    //     height: 18px;
-        right: 17px;
+    //     right: 17px;
-        top: 8px;
+    //     top: 8px;
-        cursor: pointer;
+    //     cursor: pointer;
-      }
+    //   }
-    }
+    // }
   }
 }
 ::v-deep .dialog-boxed9 {
   background-image: url("../../../assets/images/dialogbg/792@2x.png");
   .el-dialog__header {
-    .closeClick {
+    // .closeClick {
-      .close {
+    //   .close {
-        position: absolute;
+    //     position: absolute;
-        width: 27px;
+    //     width: 27px;
-        height: 25px;
+    //     height: 25px;
-        right: 20px;
+    //     right: 20px;
-        top: 12px;
+    //     top: 12px;
-        cursor: pointer;
+    //     cursor: pointer;
-      }
+    //   }
-    }
+    // }
   }
 }
 ::v-deep .dialog-boxed10 {
   background-image: url("../../../assets/images/dialogbg/792@2x.png");
   .el-dialog__header {
-    .closeClick {
+    // .closeClick {
-      .close {
+    //   .close {
-        position: absolute;
+    //     position: absolute;
-        width: 27px;
+    //     width: 27px;
-        height: 27px;
+    //     height: 27px;
-        right: 20px;
+    //     right: 20px;
-        top: 15px;
+    //     top: 15px;
-        cursor: pointer;
+    //     cursor: pointer;
-      }
+    //   }
-    }
+    // }
   }
 }
 </style>

src/views/components/personageTask/index.vue

@@ -71,6 +71,8 @@
       <section>
         <el-table
           class="exporttable"
+          v-loading="TabLoading"
+          element-loading-background="rgba(11, 34, 72, 0.8)"
           :data="tableData"
           :row-class-name="tableRowClassName"
           :header-cell-style="tableHeaderCellStyle"
@@ -78,29 +80,32 @@
           :cell-style="{padding:0+'px'}"
           style="width: 100%">
           <el-table-column
-            prop="date"
+            prop="rand_number"
             label="事件流水号"
             header-align="center"
           >
           </el-table-column>
           <el-table-column
-            prop="eventName"
+            prop="name"
             label="事件名称"
+            :show-overflow-tooltip="true"
             header-align="center"
           >
           </el-table-column>
           <el-table-column
-            prop="eventType"
+            prop="type"
             header-align="center"
+            :show-overflow-tooltip="true"
             label="事件类型">
           </el-table-column>
           <el-table-column
-            prop="eventAddress"
+            prop="address"
             header-align="center"
+            :show-overflow-tooltip="true"
             label="事件地址">
           </el-table-column>
           <el-table-column
-            prop="eventDate"
+            prop="open_time"
             header-align="center"
             label="事件发生时间">
           </el-table-column>
@@ -137,7 +142,7 @@ export default {
   components:{diaLog},
   data() {
     return {
-      total:20,
+      total:0,
       title:"任务派发",
       taskForm:{
         task:"",
@@ -149,56 +154,8 @@ export default {
         ]
       },
       info:null,
-      tableData: [{
+      tableData: [],
-        date: '20240120084248951',
+      TabLoading:false,
-        eventName: '事件名称',
-        eventType: '事件类型',
-        eventAddress: '地址',
-        eventDate:"2019-04-12"
-      }, {
-        date: '20240120084248951',
-        eventName: '事件名称',
-        eventType: '事件类型',
-        eventAddress: '地址',
-        eventDate:"2019-04-12"
-      }, {
-        date: '20240120084248951',
-        eventName: '事件名称',
-        eventType: '事件类型',
-        eventAddress: '地址',
-        eventDate:"2019-04-12"
-      }, {
-        date: '20240120084248951',
-        eventName: '事件名称',
-        eventType: '事件类型',
-        eventAddress: '地址',
-        eventDate:"2019-04-12"
-      }, {
-      date: '20240120084248951',
-        eventName: '事件名称',
-        eventType: '事件类型',
-        eventAddress: '地址',
-        eventDate:"2019-04-12"
-      }, {
-        date: '20240120084248951',
-        eventName: '事件名称',
-        eventType: '事件类型',
-        eventAddress: '地址',
-        eventDate:"2019-04-12"
-      }, {
-        date: '20240120084248951',
-        eventName: '事件名称',
-        eventType: '事件类型',
-        eventAddress: '地址',
-        eventDate:"2019-04-12"
-      }, {
-        date: '20240120084248951',
-        eventName: '事件名称',
-        eventType: '事件类型',
-        eventAddress: '地址',
-        eventDate:"2019-04-12"
-      }
-      ]
     }
   },
   mounted() {
@@ -208,21 +165,19 @@ export default {
     open(info){
       this.info = info;
       this.$refs.taskDialog.open();
-      // this.getViewListPageList();
+      
     },
-    getViewListPageList(){
+    getViewListPageList(page){
-      let data = {'queryValue' : [], "myInstanceClassify" : "all"}
+      this.TabLoading = true;
-      ViewListPage({viewCode:'event-all-list',pageNo:"1",pageSize:"50"}, data).then(res => {
+      let data = {'queryValue' : [], "myInstanceClassify" : "all", "parameterValue":[], fks: []}
-        console.log(res,"获取的事件列表");
+      ViewListPage({viewCode:'shi_jian_shou_li_list_page', pageNo: page || 1, pageSize:10}, data).then(res => {
         if(res.code == 200) {
-          res.result.records.forEach(item => {
+          this.total = res.result.total;
-            let obj = {};
+          this.tableData = res.result.records;
-            obj["label"] = item.name;
-            obj["value"] = item.id;
-            this.options.push(obj);
-          })
         }
-        
+        this.TabLoading = false;
+      }).catch(err =>{
+        this.TabLoading = false;
       })
 
     },
@@ -238,15 +193,18 @@ export default {
     },
     zhipai(row){
       console.log("事件触发了");
+      this.taskForm.task = row.name
+      this.$refs.eventDialog.Close();
     },
     // 选择事件按钮
     select(){
       this.$refs.eventDialog.open()
+      this.getViewListPageList();
     },
     // 取消按钮
     cancel(refForm){
       this.$refs[refForm].resetFields();
-      this.$refs.dialog5.Close();
+      this.$refs.taskDialog.Close();
     },
     // 确定按钮
     confirm(refForm){
@@ -265,7 +223,8 @@ export default {
     },
     // 页码变化事件
     pageChange(pages) {
-      console.log(pages);
+      // console.log(pages);
+      this.getViewListPageList(pages);
     }
   },
 }
@@ -513,6 +472,8 @@ export default {
     height: 0px;
   }
   .btns {
+    display: flex;
+    justify-content: center;
     .btn {
       width: 91px;
       height: 35px;