视频，ui更换

.env.development

@@ -2,7 +2,7 @@
  # @Author: 张涛
  # @Date: 2023-11-09 18:29:41
  # @LastEditors: JC9527
- # @LastEditTime: 2023-12-26 21:39:38
+ # @LastEditTime: 2023-12-28 19:43:38
  # @FilePath: \JiangningUrbanManagePc\.env.development
 ### 
 # 页面标题
@@ -15,7 +15,7 @@ ENV = 'development'
 # /dev-api
 VUE_APP_BASE_API = 'http://39.101.188.84:9037'
 VUE_APP_BASE_API1 = 'https://t-kd-process-server.jsszkd.com'
-# VUE_APP_BASE_API = 'http://192.168.0.107:9037'
+# VUE_APP_BASE_API = 'http://192.168.1.142:9037'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

src/api/bigScreenApi/eventApi.js

@@ -8,3 +8,21 @@ export function getDeviceList(params) {
     params
   })
 }
+
+// 事件列表查询
+export function getQueryViewListPage(data) {
+  return request({
+    url: "/api/eform/engine/viewEngine/queryViewListPage",
+    method:'post',
+    data
+  })
+}
+
+// 自动提交事件---保存事件数据
+export function eventSaveData(data) {
+  return request({
+    url: "/api/eform/engine/formEngine/saveData",
+    method:'post',
+    data
+  })
+}

src/api/bigScreenApi/index.js

@@ -4,7 +4,8 @@ import request from "@/utils/request"
  * 人员
  */
 
-// 监控视频
+// 监控视频video/PageEq
+// 强制观摩
 export function videoSurveillance(data) {
   return request({
     url: "/jn/dockingEq/videoSurveillance",
@@ -12,6 +13,22 @@ export function videoSurveillance(data) {
     data
   })
 }
+// 获取视频点位
+export function getVideoPageEq(params) {
+  return request({
+    url: "/jn/video/PageEq",
+    method:'get',
+    params
+  })
+}
+// 获取流URL
+export function getPreviewURLs(params) {
+  return request({
+    url: "/jn/video/previewURLs",
+    method:'get',
+    params
+  })
+}
 
 // 终端设备坐标采集、在线状态接口
 export function getDeviceList(params) {
@@ -66,3 +83,17 @@ export function fence(params){
     params
   })
 }
+
+
+/**
+ * 车辆管理
+ */
+
+// 查询车辆管理列表
+export function getCarManageList(params) {
+  return request({
+    url: "/jn/carManage/list",
+    method:'get',
+    params
+  })
+}

src/assets/styles/leaflet.scss

@@ -130,7 +130,6 @@
       align-items: center;
       justify-content: center;
       width: 194px;
-      width: 100%;
       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;
@@ -157,7 +156,7 @@
       .info-left {
         display: flex;
         align-items: center;
-        width: 80px;
+        width: 25%;
         .dot {
           width: 4px;
           height: 4px;

src/main.js

@@ -4,7 +4,7 @@
  * @Author: JC9527
  * @Date: 2023-08-14 13:58:57
  * @LastEditors: JC9527
- * @LastEditTime: 2023-12-26 10:40:03
+ * @LastEditTime: 2023-12-27 10:32:10
  */
 import Vue from 'vue'
 
@@ -88,8 +88,8 @@ VueAMap.initAMapApiLoader({
 });
 
 //如果需要使用自定义的threeJS相关的组件，需要格外引入库中的three。该包只提供常用的模型加载，灯光，HDR等相关能力，更细致的控制需要在模型初始化后获取对象进行操作
-import VueAmapThree from '@vuemap/vue-amap/dist/three'
+// import VueAmapThree from '@vuemap/vue-amap/dist/three'
-Vue.use(VueAmapThree);
+// Vue.use(VueAmapThree);
 
 /**
  * If you don't want to use mock-server

src/utils/mapJson/point.json

@@ -44,7 +44,7 @@
     
     {
       "type": "Feature",
-      "properties": {"name":"执法车辆"},
+      "properties": {"name":"执法车辆","status" : "0"},
       "geometry": {
         "coordinates": [
           118.79202271621062,
@@ -55,7 +55,7 @@
     },
     {
       "type": "Feature",
-      "properties": {"name":"执法车辆"},
+      "properties": {"name":"执法车辆","status" : "1"},
       "geometry": {
         "coordinates": [
           118.80544753568995,
@@ -66,7 +66,7 @@
     },
     {
       "type": "Feature",
-      "properties": {"name":"普通事件"},
+      "properties": {"name":"普通事件","status" : "0"},
       "geometry": {
         "coordinates": [
           118.78046462582762,
@@ -77,7 +77,7 @@
     },
     {
       "type": "Feature",
-      "properties": {"name":"重点事件"},
+      "properties": {"name":"重点事件","status" : "1"},
       "geometry": {
         "coordinates": [
           118.74646010962817,
@@ -99,7 +99,7 @@
     },
     {
       "type": "Feature",
-      "properties": {"name":"重点事件"},
+      "properties": {"name":"重点事件","status":0},
       "geometry": {
         "coordinates": [
           118.73778548814812,
@@ -111,7 +111,7 @@
     
     {
       "type": "Feature",
-      "properties": {"name":"重点事件"},
+      "properties": {"name":"重点事件","status":1},
       "geometry": {
         "coordinates": [
           118.80857039942185,

src/utils/mapJson/开发区空港开发区GJ02.json

@@ -0,0 +1,285 @@
+{
+  "type": "FeatureCollection",
+  "name": "开发区空港开发区GJ02",
+  "crs": {
+    "type": "name",
+    "properties": {
+      "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
+    }
+  },
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {
+        "fid": 1.0,
+        "CENTERX": 118.80091257948892,
+        "CENTERY": 31.890183680582105,
+        "CODE": "320115402",
+        "NAME": "开发区空港开发区",
+        "NOTE": null,
+        "SHAPE_AREA": 73241240.470899999,
+        "SHAPE_LENG": 50271.742558899998,
+        "SUMCASE": null,
+        "USERID01": null,
+        "USERID012": null,
+        "USERID0123": null,
+        "UserID": null,
+        "UserID0": null,
+        "UserID_1": null
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            [
+              [
+                118.852497019755887,
+                31.782938218588818
+              ],
+              [
+                118.853591773673998,
+                31.781756137534718
+              ],
+              [
+                118.854201749670651,
+                31.780805543288043
+              ],
+              [
+                118.854312373174167,
+                31.779713464753343
+              ],
+              [
+                118.884734230592045,
+                31.767144754667473
+              ],
+              [
+                118.890565413272014,
+                31.761047070506176
+              ],
+              [
+                118.893309910057496,
+                31.756840243277974
+              ],
+              [
+                118.895883249803546,
+                31.753491974798681
+              ],
+              [
+                118.8957971648735,
+                31.750230870807044
+              ],
+              [
+                118.894252926825558,
+                31.749974173826512
+              ],
+              [
+                118.894081093234433,
+                31.747056391018713
+              ],
+              [
+                118.891936323614104,
+                31.744483022751957
+              ],
+              [
+                118.888849097230349,
+                31.750492505129099
+              ],
+              [
+                118.893910136652366,
+                31.753922055982532
+              ],
+              [
+                118.893309756398338,
+                31.755123857839237
+              ],
+              [
+                118.890690194772375,
+                31.754779817704989
+              ],
+              [
+                118.887906414253465,
+                31.758474419045985
+              ],
+              [
+                118.867845493012894,
+                31.749571575181854
+              ],
+              [
+                118.854393456028163,
+                31.747275643981418
+              ],
+              [
+                118.834948596680249,
+                31.734781328131589
+              ],
+              [
+                118.840343586037989,
+                31.724558461891956
+              ],
+              [
+                118.848309728851689,
+                31.72823415219208
+              ],
+              [
+                118.85019397507341,
+                31.725398679235795
+              ],
+              [
+                118.842227588612772,
+                31.720950439182868
+              ],
+              [
+                118.842570088503791,
+                31.719748296517444
+              ],
+              [
+                118.851307493196657,
+                31.724538496758623
+              ],
+              [
+                118.853277505981978,
+                31.721788766118127
+              ],
+              [
+                118.842398505736597,
+                31.716659017888308
+              ],
+              [
+                118.830321518589301,
+                31.711961481367073
+              ],
+              [
+                118.831092968243738,
+                31.718739993204807
+              ],
+              [
+                118.832035628335419,
+                31.724574100713756
+              ],
+              [
+                118.831693771998033,
+                31.732727770617082
+              ],
+              [
+                118.829391212752896,
+                31.742304833466243
+              ],
+              [
+                118.826705972329492,
+                31.746532794421562
+              ],
+              [
+                118.820747476466792,
+                31.742622920640109
+              ],
+              [
+                118.81881149618512,
+                31.745039839383171
+              ],
+              [
+                118.814237515108573,
+                31.742720395598738
+              ],
+              [
+                118.812695742991906,
+                31.74443947693074
+              ],
+              [
+                118.811068270392582,
+                31.746244484273941
+              ],
+              [
+                118.808755155589864,
+                31.745475987194236
+              ],
+              [
+                118.804385399485298,
+                31.741535319964825
+              ],
+              [
+                118.802414981822679,
+                31.744198802194326
+              ],
+              [
+                118.792816764333551,
+                31.739406416227236
+              ],
+              [
+                118.79204558138396,
+                31.741467089739277
+              ],
+              [
+                118.790909924691064,
+                31.741554327827867
+              ],
+              [
+                118.790910284909145,
+                31.745502055797541
+              ],
+              [
+                118.789753325060616,
+                31.747434411080096
+              ],
+              [
+                118.795538950100607,
+                31.751589258818054
+              ],
+              [
+                118.797947842711565,
+                31.757332078172901
+              ],
+              [
+                118.800839645119552,
+                31.764226455999534
+              ],
+              [
+                118.800757023807435,
+                31.764327681838537
+              ],
+              [
+                118.794429095289004,
+                31.760348346552718
+              ],
+              [
+                118.791480417903074,
+                31.76413306696368
+              ],
+              [
+                118.78963620609855,
+                31.768988144021499
+              ],
+              [
+                118.788083848131862,
+                31.780272133190262
+              ],
+              [
+                118.791985652280388,
+                31.792496870553464
+              ],
+              [
+                118.794415979794408,
+                31.798419365400058
+              ],
+              [
+                118.797583470244348,
+                31.804529850372681
+              ],
+              [
+                118.821456414560942,
+                31.807267725830133
+              ],
+              [
+                118.835056861872417,
+                31.807242261687424
+              ],
+              [
+                118.852497019755887,
+                31.782938218588818
+              ]
+            ]
+          ]
+        ]
+      }
+    }
+  ]
+}

src/utils/mapJson/开发区软件园GJ02.json

@@ -0,0 +1,8 @@
+{
+"type": "FeatureCollection",
+"name": "开发区软件园GJ02",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "fid": 1.0, "CENTERX": 118.762835877664, "CENTERY": 31.890183680582105, "CODE": "320115402", "NAME": "开发区软件园", "NOTE": null, "SHAPE_AREA": 73241240.470899999, "SHAPE_LENG": 50271.742558899998, "SUMCASE": null, "USERID01": null, "USERID012": null, "USERID0123": null, "UserID": null, "UserID0": null, "UserID_1": null }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 118.795924761210415, 31.822844740193673 ], [ 118.791994007008626, 31.821915813271012 ], [ 118.789036842569587, 31.821275807449588 ], [ 118.782049907996893, 31.82025349400611 ], [ 118.773741979907015, 31.819054743529094 ], [ 118.768799612966433, 31.818718500351526 ], [ 118.759493119753984, 31.819742115723148 ], [ 118.751025302463788, 31.820997622322786 ], [ 118.74837406041577, 31.821381065686541 ], [ 118.749448221670164, 31.831464595478231 ], [ 118.74957711296527, 31.83262312332057 ], [ 118.750006509133939, 31.83391043717295 ], [ 118.75030706593347, 31.834639923084726 ], [ 118.751509139595214, 31.836313520295523 ], [ 118.751981376137152, 31.837085919566878 ], [ 118.753483825949885, 31.83893109296622 ], [ 118.751724029417474, 31.839231242234018 ], [ 118.750092994010828, 31.840775608498888 ], [ 118.747938421907378, 31.842308142494456 ], [ 118.745027354391496, 31.84437826161501 ], [ 118.741935838695497, 31.845749876007599 ], [ 118.739101534726359, 31.84634897358438 ], [ 118.734548783169203, 31.847375568138158 ], [ 118.735237043229375, 31.858102807951948 ], [ 118.739017010373232, 31.861280498703735 ], [ 118.742538275761518, 31.859394559490148 ], [ 118.747433140139151, 31.860254654037021 ], [ 118.753185620484203, 31.863345090141635 ], [ 118.758507434406781, 31.865232934511141 ], [ 118.77008105483398, 31.864913510547854 ], [ 118.77118047903501, 31.858323913829825 ], [ 118.77041139498327, 31.856374951295841 ], [ 118.769786635462538, 31.853564041731449 ], [ 118.770132063679711, 31.849482338635532 ], [ 118.770131823336413, 31.846865014246603 ], [ 118.772319290524024, 31.848794552093999 ], [ 118.773005619730995, 31.850553300335875 ], [ 118.773820465965898, 31.851067643996235 ], [ 118.775921704103538, 31.85149521424669 ], [ 118.777465328682553, 31.85149401500593 ], [ 118.778194170522283, 31.850849816789804 ], [ 118.777765195169678, 31.848533195028477 ], [ 118.778879911990003, 31.847974476057928 ], [ 118.779437490353544, 31.850290970503789 ], [ 118.780466508512944, 31.851019474035283 ], [ 118.781581191243134, 31.851361699375271 ], [ 118.783684095891587, 31.847472110963885 ], [ 118.783124504297618, 31.851660554272232 ], [ 118.784217538246963, 31.8508656723988 ], [ 118.785117813125495, 31.851980313270037 ], [ 118.78520339080923, 31.850328307256063 ], [ 118.786081924524183, 31.848418006016917 ], [ 118.787474874071094, 31.847665590412028 ], [ 118.78906061633873, 31.846869981850432 ], [ 118.788096167682511, 31.845648253879666 ], [ 118.78940320863731, 31.843866084922013 ], [ 118.788031604130978, 31.842666287776375 ], [ 118.787067065854714, 31.8408438274368 ], [ 118.784837887271436, 31.837756924790842 ], [ 118.786294979035375, 31.834666043559373 ], [ 118.786294892535878, 31.833722083293804 ], [ 118.782951317023546, 31.832953231291647 ], [ 118.784494287919301, 31.830377228623007 ], [ 118.785093897063817, 31.824884447278194 ], [ 118.794839771769759, 31.826729412247591 ], [ 118.795924761210415, 31.822844740193673 ] ] ] ] } }
+]
+}

src/views/bigScreen/components/mapLeftContent.vue

@@ -4,7 +4,7 @@
  * @Author: JC9527
  * @Date: 2023-08-15 09:44:13
  * @LastEditors: JC9527
- * @LastEditTime: 2023-12-26 09:49:54
+ * @LastEditTime: 2023-12-28 23:51:19
 -->
 <template>
   <div class="left-box">
@@ -142,7 +142,7 @@ export default {
       $listeners:false
     }
   },
-  props:['personLine'],
+  props:['personLine','carLine'],
   watch:{
     personLine:{
       handler(newPerson){
@@ -151,6 +151,13 @@ export default {
       },
       immediate:true,
     },
+    carLine:{
+      handler(newPerson){
+        // console.log(newPerson,'在线人员情况');
+        this.vehicleArray = newPerson
+      },
+      immediate:true,
+    }
   },
   methods:{
     getDomHeight(){
@@ -160,9 +167,11 @@ export default {
         let height2 = dom2[0].getBoundingClientRect();
         let height = dom[0].getBoundingClientRect();
         let windowHeight = window.innerHeight;
-        let relativeHeight = (windowHeight - height.top) / 2 - 14;
+        // let relativeHeight = (windowHeight - height.top) / 2 - 14;
+        let relativeHeight = (windowHeight - height.top) / 2 + 4;
         let sum = relativeHeight * 2 - 2;
-        let relativeHeight2 = (windowHeight - height2.top - sum) / 2 - 55;
+        // let relativeHeight2 = (windowHeight - height2.top - sum) / 2 - 55;
+        let relativeHeight2 = (windowHeight - height2.top - sum) / 2 - 115;
         this.itemOne.height = relativeHeight + 'px';
         this.itemTwo.height = relativeHeight2 + 'px';
         this.oneHeight = Number(relativeHeight);

src/views/bigScreen/index.vue

@@ -4,7 +4,7 @@
  * @Author: JC9527
  * @Date: 2023-08-14 14:40:02
  * @LastEditors: JC9527
- * @LastEditTime: 2023-12-26 21:59:30
+ * @LastEditTime: 2023-12-28 11:10:12
 -->
 <template>
   <div class="pc-container">
@@ -151,16 +151,27 @@ div {
     left: 0px;
     top: 0px;
     width: 510px;
-    height: 99%;
+    height: 100%;
     z-index: 550;
     box-sizing: border-box;
     &::before {
       content: "";
       position: absolute; /* 一定要用绝对定位 */
-      width: 100%;
+      left: -10px;
+      width: calc(100% + 30px);
       height: 100%;
-      backdrop-filter: blur(5px); /* 模糊半径 */
+      background: linear-gradient(
-      background-color: rgba(10,38,75,0.5);
+        to right,
+         rgba(8,21,42,1), 
+         rgba(8,21,42,0.9), 
+         rgba(8,21,42,0.8), 
+         rgba(8,21,42,0.8), 
+         rgba(8,21,42,0.8), 
+         rgba(8,21,42,0.7), 
+         rgba(20,37,50,0.5)
+      );
+      filter: blur(10px);
+      z-index: -1;
     }
   }
   .change-map-before-right {
@@ -168,16 +179,27 @@ div {
     right: 0px;
     top: 0px;
     width: 510px;
-    height: 99%;
+    height: 100%;
     z-index: 550;
     box-sizing: border-box;
     &::before {
       content: "";
       position: absolute; /* 一定要用绝对定位 */
-      width: 100%;
+      right: -10px;
+      width: calc(100% + 10px);
       height: 100%;
-      backdrop-filter: blur(5px); /* 模糊半径 */
+      background: linear-gradient(
-      background-color: rgba(10,38,75,0.5);
+        to left,
+         rgba(8,21,42,1), 
+         rgba(8,21,42,0.9), 
+         rgba(8,21,42,0.8), 
+         rgba(8,21,42,0.8), 
+         rgba(8,21,42,0.8), 
+         rgba(8,21,42,0.7), 
+         rgba(20,37,50,0.5)
+      );
+      filter: blur(10px);
+      z-index: -1;
     }
   }
   .map-before-left {
@@ -185,7 +207,7 @@ div {
     left: 0px;
     top: 0px;
     width: 510px;
-    height: 99%;
+    height: 100%;
     z-index: 550;
     box-sizing: border-box;
   }
@@ -194,7 +216,25 @@ div {
     position: absolute; /* 一定要用绝对定位 */
     width: 100%;
     height: 100%;
-    backdrop-filter: blur(5px); /* 模糊半径 */
+    // backdrop-filter: blur(5px); /* 模糊半径 */
+    // -webkit-filter: blur(5px);
+    // -webkit-backdrop-filter: blur(5px);
+  }
+  @supports (backdrop-filter: none) {
+    .map-before-left::before {
+      backdrop-filter: blur(5px);
+    }
+    .map-before-right::before {
+      backdrop-filter: blur(5px);
+    }
+  }
+  @supports not (backdrop-filter: none) {
+    .map-before-left::before {
+      background-color: rgba(100, 124, 176, 0.29);
+    }
+    .map-before-right::before {
+      background-color: rgba(100, 124, 176, 0.29);
+    }
   }
   // .left-animation-enter-active{
   //   transition: all .8s ease;
@@ -237,7 +277,7 @@ div {
     right: 0px;
     top: 0px;
     width: 510px;
-    height: 99%;
+    height: 100%;
     z-index: 550;
     box-sizing: border-box;
   }
@@ -246,7 +286,19 @@ div {
     position: absolute; /* 一定要用绝对定位 */
     width: 100%;
     height: 100%;
-    backdrop-filter: blur(5px); /* 模糊半径 */
+    // backdrop-filter: blur(5px); /* 模糊半径 */
+    // -webkit-filter: blur(5px);
+    // -webkit-backdrop-filter: blur(5px);
+    @supports (backdrop-filter: none) {
+      & {
+        backdrop-filter: blur(5px);
+      }
+    }
+    @supports not (backdrop-filter: none) {
+      & {
+        background-color: rgba(100, 124, 176, 0.29);
+      }
+    }
   }
   .system-header {
     z-index: 600;

src/views/bigScreen/map/index.vue

@@ -13,15 +13,15 @@
       :events="selfMapEv"
     >
     </el-amap> -->
-
     <el-amap
       ref="map"
       map-style="amap://styles/d02b66b0a7f190d5a1556a3f59c86518"
       :center="center"
       :zoom="zoom"
       :zooms="zooms"
+      v-loading="mapLoading"
+      element-loading-background="rgba(11, 34, 72, 0.8)"
       @init="init"
-      view-mode="3D"
       :extra-options="{ vectorMapForeign: 'style_zh_cn' }"
       class="amap-demo"
     >
@@ -30,15 +30,8 @@
       <!-- 江宁GeoJson文件 -->
       <!-- <el-amap-geojson @init="initLocation" :geo="jiangninggeo" ref="geojson" :polygon-options="polygonOptions" :visible="true" :draggable="draggable"></el-amap-geojson> -->
       
-      <!-- 测试点位 -->
-      <!-- <el-amap-marker :position="componentMarker.position" :visible="componentMarker.visible" :draggable="componentMarker.draggable">
-        <div style="padding: 5px 10px;color: #fff; display:flex;" class="testMarker">
-          <div>{{componentMarker.text}}</div>
-          <img src="../../../assets/images/3.png" alt="" style="width: 40px">
-        </div>
-      </el-amap-marker> -->
       <!-- marker标记点 -->
-      <el-amap-marker v-for="(marker, index) in markers" :key="index + 'marker'" :visible="componentMarker.visible" :offset='[-35,-108]' :position="marker.position" :draggable="false" @click="(e)=> clickMarker(marker,e)">
+      <el-amap-marker v-for="(marker, index) in markers" :key="index + 'marker'" :visible="componentMarker.visible" :offset='markerOffset' :position="marker.position" :draggable="false" @click="(e)=> clickMarker(marker,e)">
         <div class="markerStyles">
           <div v-if="marker.text" class="marker-Text">{{marker.text}}</div>
           <img :src="marker.imgSrc" alt="">
@@ -49,7 +42,7 @@
       <el-amap-info-window
         v-if="personInfo.visible"
         anchor="bottom-center"
-        :offset="[27,0]"
+        :offset="[-10,-123]"
         :closeWhenClickMap="true"
         :position="personInfo.position"
         :visible.sync="personInfo.visible">
@@ -115,7 +108,7 @@
       <!-- 事件弹框 -->
       <el-amap-info-window
         v-if="eventInfo.visible"
-        :offset="[27,0]"
+        :offset="[-10,-113]"
         :closeWhenClickMap="true"
         :position="eventInfo.position"
         :visible.sync="eventInfo.visible"
@@ -156,7 +149,7 @@
       <!-- 执法车辆弹框 -->
       <el-amap-info-window
         v-if="carInfo.visible"
-        :offset="[27,0]"
+        :offset="[-10,-148]"
         :closeWhenClickMap="true"
         :position="carInfo.position"
         :visible.sync="carInfo.visible"
@@ -180,19 +173,19 @@
       <!-- 监控视频弹框 -->
       <el-amap-info-window
         v-if="monitoringInfo.visible"
-        :offset="[27,0]"
+        :offset="[-10,-94]"
         :closeWhenClickMap="true"
         :position="monitoringInfo.position"
         :visible.sync="monitoringInfo.visible"
       >
         <div class="monitoring-popup">
           <div class="monitoring-title">
-            <div class="title">监控视频</div>
+            <div class="title">{{ monitoringInfo.info.name }} {{ monitoringInfo.info.status == 1 ? "在线":"离线" }}</div>
             <div class="mask" @click="markersClosePopup"></div>
           </div>
           <div class="monitoring">
             <div class="bg">
-              <img src="@/assets/images/play-circle-fill@2x.png" alt="" @click="playVideo">
+              <img src="@/assets/images/play-circle-fill@2x.png" alt="" @click="playVideo(monitoringInfo.info.status)">
             </div>
             <div class="btns">
               <div class="btn" @click="monitorVideos">上墙</div>
@@ -205,7 +198,7 @@
       <!-- 沿街商铺分布 -->
       <el-amap-info-window
         v-if="shopInfo.visible"
-        :offset="[27,0]"
+        :offset="[-10,-94]"
         :closeWhenClickMap="true"
         :position="shopInfo.position"
         :visible.sync="shopInfo.visible"
@@ -250,7 +243,7 @@
     </div>
     <transition name="left-animationMap">
       <div class="map-left" v-if="leftAnimationData">
-        <map-left :personLine="personLine" @realTimeLocationClick="realTimeLocationClick"></map-left>
+        <map-left :personLine="personLine" :carLine="carLine" @realTimeLocationClick="realTimeLocationClick"></map-left>
       </div>
     </transition>
 
@@ -433,6 +426,8 @@ import OneGJ02 from "@/utils/mapJson/1GJ02.json";
 import TwoGJ02 from "@/utils/mapJson/2GJ02.json";
 import ThreeGJ02 from "@/utils/mapJson/3GJ02.json";
 import FourGJ02 from "@/utils/mapJson/4GJ02.json";
+import kaifaqu from "@/utils/mapJson/开发区空港开发区GJ02.json";
+import ruanjianyuan from "@/utils/mapJson/开发区软件园GJ02.json";
 // 一级网格
 // import detachment1 from "@/utils/mapJson/detachment1.json";
 // import detachment2 from "@/utils/mapJson/detachment2.json";
@@ -464,7 +459,12 @@ import {
   fence,
   getDeviceList,
   levelQywg,
-  videoSurveillance
+  videoSurveillance,
+  getVideoPageEq,
+  getPreviewURLs,
+  getCarManageList,
+  getQueryViewListPage,
+  eventSaveData
 } from "@/api/bigScreenApi";
 import flvjs from "flv.js";
 import axios from "axios";
@@ -487,17 +487,8 @@ export default {
       zooms:[10,18],
       center: [118.835418, 31.863971],  // 121.59996, 31.197646
       map: null,
-      // GeoJson文件的基本样式
-      polygonOptions: {
-        strokeColor: '#00C5EC',   // 线条颜色，使用16进制颜色代码赋值。默认值为#00D3FC
-        fillColor: 'rgba(64,175,255,0.4)'  // 多边形填充颜色，使用16进制颜色代码赋值，如：#00B2D5
-      },
-      draggable:false,          // 是否可拖动
       componentMarker: {
-        position: [118.79808425903322, 31.96840071263104],
         visible: true,
-        draggable: false,
-        text: '1'
       },
       // 所有点位信息
       markers:[],
@@ -520,6 +511,7 @@ export default {
       // 监控视频弹框信息
       monitoringInfo: {
         position: [],
+        info:{},
         visible: false,
       },
       // 沿街商铺弹框信息
@@ -533,9 +525,12 @@ export default {
       highlightedPolygonId:null,
       layers: {
         layer:null,
+        text: null,
         layer2:null,
         layer3:null,
         layer4:null,
+        text1:null,
+        markers:null,
       },
       showVideo:false,
       videoCondition: {
@@ -545,6 +540,8 @@ export default {
       player:null,
       timer:null,
       isPositioning:false,
+      markerOffset: [-35,-123],
+      mapLoading:false,
 
 
 
@@ -588,6 +585,7 @@ export default {
       weilanData: null, // 考勤围栏数据
       luduanData: null, // 重点路段
       personLine: [], // 在线人员情况
+      carLine: [],    // 车辆情况
       visible: false,   // 卫星底图是否显示
     };
   },
@@ -598,73 +596,16 @@ export default {
       map.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518");
       // console.log(o.getCenter())
       // console.log(this.map,'initMapinitMap');
-      this.layers.layer = new AMap.OverlayGroup();
+     
-      this.layers.layer2 = new AMap.OverlayGroup();
+      this.layers.layer = new AMap.OverlayGroup();            // 一级网格
-      this.layers.layer3 = new AMap.OverlayGroup();
+      this.layers.layer2 = new AMap.OverlayGroup();           // 二级网格
-      this.layers.layer4 = new AMap.OverlayGroup();
+      this.layers.layer3 = new AMap.OverlayGroup();           // 围栏、路段、区域、及文本
-      // this.layers.text = new AMap.OverlayGroup();
+      this.layers.layer4 = new AMap.OverlayGroup();           // 地图扎点
+      this.layers.text = new AMap.OverlayGroup();             // 一级网格文本
+      this.layers.text1 = new AMap.OverlayGroup();            // 二级网格文本
+      this.layers.markers = new AMap.OverlayGroup();            // 监控视频markers
 
       this.$nextTick(() => {
-        // AMap.plugin('AMap.GeoJSON',()=>{
-        //   let polygon
-        //   var geojson1 = new AMap.GeoJSON({
-        //     geoJSON:OneGJ02,
-        //     getPolygon:(geojson, lnglats)=>{
-        //       polygon = new AMap.Polygon({
-        //         path: lnglats,
-        //         strokeColor: '#00C5EC', 
-        //         fillColor: '#00AEFF',
-        //         fillOpacity: 0.4,
-        //       })
-        //       return polygon
-        //     },
-        //     getText:(geo)=>{
-        //       console.log(geo,'geogeot');
-        //     }
-        //   })
-        //   var geojson2 = new AMap.GeoJSON({
-        //     geoJSON:TwoGJ02,
-        //     getPolygon:(geojson, lnglats)=>{
-        //       polygon = new AMap.Polygon({
-        //         path: lnglats,
-        //         strokeColor: '#00C5EC', 
-        //         fillColor: '#00AEFF',
-        //         fillOpacity: 0.4,
-        //       })
-        //       return polygon
-        //     },
-        //   })
-        //   var geojson3 = new AMap.GeoJSON({
-        //     geoJSON:ThreeGJ02,
-        //     getPolygon:(geojson, lnglats)=>{
-        //       polygon = new AMap.Polygon({
-        //         path: lnglats,
-        //         strokeColor: '#00C5EC', 
-        //         fillColor: '#00AEFF',
-        //         fillOpacity: 0.4,
-        //       })
-        //       return polygon
-        //     },
-        //   })
-        //   var geojson4 = new AMap.GeoJSON({
-        //     geoJSON:FourGJ02,
-        //     getPolygon:(geojson, lnglats)=>{
-        //       polygon = new AMap.Polygon({
-        //         path: lnglats,
-        //         strokeColor: '#00C5EC', 
-        //         fillColor: '#00AEFF',
-        //         fillOpacity: 0.4,
-        //       })
-        //       return polygon
-        //     },
-        //   })
-        //   this.layers.layer.addOverlay(geojson1);
-        //   this.layers.layer.addOverlay(geojson2);
-        //   this.layers.layer.addOverlay(geojson3);
-        //   this.layers.layer.addOverlay(geojson4);
-        //   this.map.add(this.layers.layer)
-        //   map.setFitView();
-        // })
         var geojson1 = new AMap.Polygon({
           path:OneGJ02.features[0].geometry.coordinates[0][0],
           strokeColor: '#00C5EC', 
@@ -743,6 +684,7 @@ export default {
           editable:false,
           visible:true,
         })
+
         var text4 = new AMap.Text({
           // position: [element.properties.CENTERX,element.properties.CENTERY],
           position: getCenter(FourGJ02.features[0].geometry.coordinates[0][0]),
@@ -757,15 +699,69 @@ export default {
             'white-space': 'nowrap',
           },
         });
+        var geojson5 = new AMap.Polygon({
+          path:kaifaqu.features[0].geometry.coordinates[0][0],
+          strokeColor: '#00C5EC', 
+          fillColor: '#00AEFF',
+          fillOpacity: 0.4,
+          // fillOpacity: 0.3,
+          editable:false,
+          visible:true,
+        })
+        var text5 = new AMap.Text({
+          // position: [element.properties.CENTERX,element.properties.CENTERY],
+          position: getCenter(kaifaqu.features[0].geometry.coordinates[0][0]),
+          anchor: 'bottom-center',
+          text: kaifaqu.features[0].properties.NAME,
+          style:{
+            'font-size': '16px',
+            'font-weight': 'bold',
+            'text-align': 'center',
+            'color': '#00AEFF',
+            'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
+            'white-space': 'nowrap',
+          },
+        });
+
+        var geojson6 = new AMap.Polygon({
+          path:ruanjianyuan.features[0].geometry.coordinates[0][0],
+          strokeColor: '#00C5EC', 
+          fillColor: '#00AEFF',
+          fillOpacity: 0.4,
+          // fillOpacity: 0.3,
+          editable:false,
+          visible:true,
+        })
+        var text6 = new AMap.Text({
+          // position: [element.properties.CENTERX,element.properties.CENTERY],
+          position: getCenter(ruanjianyuan.features[0].geometry.coordinates[0][0]),
+          anchor: 'bottom-center',
+          text: ruanjianyuan.features[0].properties.NAME,
+          style:{
+            'font-size': '16px',
+            'font-weight': 'bold',
+            'text-align': 'center',
+            'color': '#00AEFF',
+            'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
+            'white-space': 'nowrap',
+          },
+        });
+
+        
         this.layers.layer.addOverlay(geojson1);
-        this.layers.layer.addOverlay(text1);
+        this.layers.text.addOverlay(text1);
         this.layers.layer.addOverlay(geojson2);
-        this.layers.layer.addOverlay(text2);
+        this.layers.text.addOverlay(text2);
         this.layers.layer.addOverlay(geojson3);
-        this.layers.layer.addOverlay(text3);
+        this.layers.text.addOverlay(text3);
         this.layers.layer.addOverlay(geojson4);
-        this.layers.layer.addOverlay(text4);
+        this.layers.text.addOverlay(text4);
+        this.layers.layer.addOverlay(geojson5);
+        this.layers.text.addOverlay(text5);
+        this.layers.layer.addOverlay(geojson6);
+        this.layers.text.addOverlay(text6);
         this.map.add(this.layers.layer);
+        this.map.add(this.layers.text);
         map.setFitView();
         // 一级网格
         // this.stairWangge();
@@ -843,6 +839,9 @@ export default {
         if(this.layers.layer3) {
           this.layers.layer3.hide();
         }
+        if(this.layers.text1){
+          this.layers.text1.hide();
+        }
         // 获取点位
         this.getMarkers(1);
         if(this.layers.layer2) {
@@ -853,14 +852,24 @@ export default {
           let zoom = map.getZoom();
           console.log(zoom,'zoom层级');
 
-          if(zoom < 12) {
+          if(this.actionMap == 4) {
+
+          }
+          
+          if(zoom < 11) {
             this.componentMarker.visible = false;
+            this.personInfo.visible = false;
+            this.eventInfo.visible = false;
+            this.carInfo.visible = false;
+            this.monitoringInfo.visible = false;
+            this.shopInfo.visible = false;
           } else {
             this.componentMarker.visible = true;
             if(zoom < 13.2) {
               this.unlightedPolygonId()
               if(this.layers.layer2) {
                 this.layers.layer2.hide();
+                this.layers.text1.hide();
                 this.isPositioning = false;
               }
               if(this.layers.layer3) {
@@ -868,21 +877,25 @@ export default {
               }
               if(this.layers.layer) {
                 this.layers.layer.show();
+                this.layers.text.show();
               }
             } else if(zoom > 13.2){
               // 获取二级网格数据
               // this.getWanggeGeoJson();
               if(this.layers.layer2) {
                 this.layers.layer2.show();
+                this.layers.text1.hide();
               }
               
               if(this.layers.layer) {
                 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();
               } else {
                 if(this.highlightedPolygonId !== 1) {
@@ -1224,11 +1237,16 @@ export default {
       let ico4 = require("../../../assets/images/icon/icon4.png");
       let ico5 = require("../../../assets/images/icon/icon5.png");
       let ico6 = require("../../../assets/images/icon/icon6.png");
+      let offIcon1 = require("../../../assets/images/icon/offLine1.png");
+      let offIcon2 = require("../../../assets/images/icon/offLine2.png");
+      let offIcon3 = require("../../../assets/images/icon/offLine3.png");
+      let offIcon4 = require("../../../assets/images/icon/offLine4.png");
       this.markers = [];
-      
+      this.mapLoading = true;
       if(id == 1) {
         this.personLine = [];
-        getDeviceList({ imei: "861316060217211" }).then((res) => {
+        getDeviceList({ imei: "861316060216403,861316060216619,861316060207857,861316060214648,861316060214317,861316060215553,861316060212493,861316060214804,861316060207931,861316060216056" }).then((res) => {
+          this.mapLoading = false;
           // console.log(res,'点位信息');
           if (res.data.obj) {
             res.data.obj.forEach((element) => {
@@ -1238,7 +1256,7 @@ export default {
                 obj.position[0] = element.longitude;
                 obj.position[1] = element.latitude;
                 obj.text = element.userName;
-                obj.imgSrc = ico1;
+                obj.imgSrc = element.status == "0" ? offIcon1 : element.status == "1"? ico1 : ico1;
                 obj.userId = element.userId;
                 obj.info = element;
                 this.markers.push(obj)
@@ -1247,6 +1265,8 @@ export default {
           } else {
             this.$modal.msgError("执法人员" + res.data.msg);
           }
+        }).catch(err=>{
+          this.mapLoading = false;
         })
       } else if(id == 2) {
         point.features.forEach((element)=>{
@@ -1254,8 +1274,9 @@ export default {
             let obj = {position:[]};
             obj.position[0] = element.geometry.coordinates[0];
             obj.position[1] = element.geometry.coordinates[1];
-            obj.imgSrc = ico2;
+            obj.imgSrc = element.properties.status == "0"? offIcon2 : ico2;
             this.markers.push(obj)
+            this.mapLoading = false;
           }
           //  else if (element.properties.name == "重点事件") {
           //   let obj = {position:[]};
@@ -1271,20 +1292,36 @@ export default {
             let obj = {position:[]};
             obj.position[0] = element.geometry.coordinates[0];
             obj.position[1] = element.geometry.coordinates[1];
-            obj.imgSrc = ico4;
+            obj.imgSrc = element.properties.status == "0"? offIcon3 : ico4;
             obj.text = element.properties.name;
             this.markers.push(obj)
+            this.mapLoading = false;
           }
         })
       } else if(id == 4){
-        point.features.forEach((element)=>{
+        // point.features.forEach((element)=>{
-          if (element.properties.name == "监控视频") {
+        //   if (element.properties.name == "监控视频") {
+        //     let obj = {position:[]};
+        //     obj.position[0] = element.geometry.coordinates[0];
+        //     obj.position[1] = element.geometry.coordinates[1];
+        //     obj.imgSrc = ico5;
+        //     this.markers.push(obj)
+        //   }
+        // })
+        getVideoPageEq({pageNo:1,pageSize:50}).then(res=>{
+          this.mapLoading = false;
+          // console.log(res,"res");
+          res.data.forEach((element)=>{
             let obj = {position:[]};
-            obj.position[0] = element.geometry.coordinates[0];
+            obj.position[0] = element.longitude;
-            obj.position[1] = element.geometry.coordinates[1];
+            obj.position[1] = element.latitude;
+            // obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
             obj.imgSrc = ico5;
+            obj.info = element
             this.markers.push(obj)
-          }
+          })
+        }).catch(err=>{
+          this.mapLoading = false;
         })
       } else if(id == 5){
         point.features.forEach((element)=>{
@@ -1294,10 +1331,38 @@ export default {
             obj.position[1] = element.geometry.coordinates[1];
             obj.imgSrc = ico6;
             this.markers.push(obj)
+            this.mapLoading = false;
           }
         })
       }
     },
+    // TODO:缩放地图获取新的监控点位
+    getPageEq(pageNum){
+      this.mapLoading = true;
+      let ico5 = require("../../../assets/images/icon/icon5.png");
+      let offIcon4 = require("../../../assets/images/icon/offLine4.png");
+      getVideoPageEq({pageNo:pageNum,pageSize:30}).then(res=>{
+        this.mapLoading = false;
+        // console.log(res,"res");
+        res.data.forEach((element)=>{
+          var marker = new AMap.Marker({
+            position: [element.longitude, element.latitude], // 标记位置
+            offset: new AMap.Pixel(-27, -94),
+            content:`<div class="markerStyles">
+                        <img src="${element.status == "0"? offIcon4 : ico5}" alt="">
+                      </div>`,
+          });
+          marker.on("click",(e)=>{
+            this.monitoringInfo.visible = true;
+            this.monitoringInfo.position = [element.longitude,element.latitude];
+          })
+          this.layers.markers.addLayer(marker);
+          this.map.add(this.layers.markers)
+          })
+        }).catch(err=>{
+          this.mapLoading = false;
+        })
+    },
     // 点位点击事件
     clickMarker(marker,e){
       console.log(marker);
@@ -1313,6 +1378,7 @@ export default {
         this.carInfo.visible = true;
       } else if (this.actionMap == 4) {
         this.monitoringInfo.position = marker.position;
+        this.monitoringInfo.info = marker.info;
         this.monitoringInfo.visible = true;
       } else if (this.actionMap == 5) {
         this.shopInfo.position = marker.position;
@@ -1361,17 +1427,25 @@ export default {
         player.play()
         this.player = player;
         // 视频卡顿导致流断了，那就重连
-        this.player.on(flvjs.Events.ERROR,(errType, errDetail)=>{
+        // this.player.on(flvjs.Events.ERROR,(errType, errDetail)=>{
-          // console.log(errType,'errTypeerrTypeerrType');
+        //   // console.log(errType,'errTypeerrTypeerrType');
-          // console.log(errDetail,'errDetailerrDetailerrDetailerrDetail');
+        //   // console.log(errDetail,'errDetailerrDetailerrDetailerrDetail');
-          if(this.player){
+        //   if(this.player){
-            this.destroyVideos()
+        //     this.destroyVideos()
-            this.initVideoPlayer(videoUrl)
+        //     this.initVideoPlayer(videoUrl)
-          }
+        //   }
-        })
+        // })
         this.instantaneity(this.player,videoUrl)
       })
     },
+    destroyVideos() {
+      if (!this.player) return;
+      this.player.pause();
+      this.player.unload();
+      this.player.detachMediaElement();
+      this.player.destroy();
+      this.player = null;
+    },
     // 可能会有卡顿的情况 重新去拉流由于视频会延时 为保证实时性，我们可以跳帧
     instantaneity(player,videoUrl){
       this.timer = setInterval(() => {
@@ -1401,7 +1475,7 @@ export default {
       this.showVideo = true;
       videoSurveillance({...this.videoCondition,imei:this.personInfo.info.imei}).then(res=>{
         if(res.code == 200 && res.data.msg == '操作成功') {
-          this.initVideoPlayer('http://120.27.25.166:9305/live/9999_112301.flv')
+          this.initVideoPlayer(`http://121.229.2.163:9290/live/9999_${this.personInfo.info.userId}.flv`)
         }
       })
     },
@@ -1421,8 +1495,19 @@ export default {
       this.$refs.crewAssign.open();
     },
     // 监控视频大屏播放
-    playVideo(){
+    playVideo(status){
-      this.$refs.aloneVideo.open();
+      if(status == 1) {
+        getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.cameraIndexCode,expand:"transcode=1"}).then(res=>{
+          if(res.code == 200) {
+            console.log(res);
+            this.$refs.aloneVideo.open(res.msg);
+          }
+        })
+      } else {
+        this.$modal.msgError("该设备已离线");
+      }
+      
+      
     },
     // 监控视频上墙
     monitorVideos(){
@@ -1456,7 +1541,7 @@ export default {
             'font-size': '16px',
             'font-weight': 'bold',
             'text-align': 'center',
-            'color': '#FFDBB7',
+            'color': '#FBFF00',
             'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
             'white-space': 'nowrap',
           },
@@ -1467,8 +1552,9 @@ export default {
         // this.layers.layer.addLayer(wangge);
         // this.layers.layer.addLayer(text);
         this.layers.layer2.addOverlay(wangge);
-        this.layers.layer2.addOverlay(text);
+        this.layers.text1.addOverlay(text);
         this.map.add(this.layers.layer2);
+        this.map.add(this.layers.text1);
       })
       // console.log(this.layers.layer,'this.layers.layer');
       // this.map.add(this.layers.layer);
@@ -1477,13 +1563,16 @@ export default {
     getWeilanGeoJson(){
       fence({ pageNum: 1, pageSize: 100 }).then((res) => {
         this.weilanData = res.rows;
-        this.weilanData.forEach((element) => {
+        this.weilanData.forEach((element,index) => {
           let shapeStr = JSON.parse(element.shapeStr);
           // 圆形围栏
           if (shapeStr.features[0].geometry.type == "Point") {
             var circle = new AMap.Circle({
               center: shapeStr.features[0].geometry.coordinates,
               radius: shapeStr.features[0].properties.radius,
+              extData:{
+                id: '围栏polygon'
+              },
               strokeOpacity: 0.9,
               strokeColor: "#62E1FA",
               fillColor: "#62E1FA",
@@ -1496,6 +1585,9 @@ export default {
               anchor: 'bottom-center',
               offset: [0, 12],
               text: element.name,
+              extData:{
+                id: '围栏text'
+              },
               style: {
                 'font-size': '14px',
                 'text-align': 'center',
@@ -1516,6 +1608,9 @@ export default {
           } else if (shapeStr.features[0].geometry.type == "Polygon") {
             var weilan = new AMap.Polygon({
               path:shapeStr.features[0].geometry.coordinates,
+              extData:{
+                id: '围栏polygon'
+              },
               strokeOpacity: 0.9,
               strokeColor: "#62E1FA",
               fillColor: "#62E1FA",
@@ -1530,6 +1625,9 @@ export default {
               anchor: 'bottom-center',
               offset: [0, 12],
               text: element.name,
+              extData:{
+                id: '围栏text' 
+              },
               style: {
                 'font-size': '14px',
                 'text-align': 'center',
@@ -1555,7 +1653,7 @@ export default {
     getQuyuGeoJson(){
       regionalsettings({ pageNum: 1, pageSize: 100 }).then((res) => {
         this.quyuData = res.rows;
-        this.quyuData.forEach((element) => {
+        this.quyuData.forEach((element,index) => {
           let shapeStr = JSON.parse(element.shapeStr);
           var quyu = new AMap.Polygon({
             path:shapeStr.features[0].geometry.coordinates,
@@ -1565,11 +1663,17 @@ export default {
             fillOpacity:0.38,
             editable:false,
             visible:true,
+            extData:{
+              id: '区域polygon'
+            },
           })
           var text = new AMap.Text({
             position: shapeStr.features[1].geometry.coordinates,
             anchor: 'bottom-center',
             text: element.name,
+            extData:{
+              id: '区域text'
+            },
             style:{
               'font-size': '16px',
               'font-weight': 'bold',
@@ -2307,10 +2411,133 @@ export default {
       this.action = id;
       this.$emit("changeBackground",id)
       if(id == 1) {
-        this.visible = false
+        this.visible = false;
+        // 修改一级网格背景
+        this.layers.layer.setOptions ({
+          strokeColor: '#00C5EC', 
+          fillColor: '#00AEFF',
+          fillOpacity: 0.4,
+          editable:false,
+          visible:true,
+        })
+        // 修改一级网格字体颜色
+        let text = this.layers.text.getOverlays();
+        for (let i = 0; i < text.length; i++) {
+          text[i].setStyle({
+            'font-size': '16px',
+            'font-weight': 'bold',
+            'text-align': 'center',
+            'color': '#00AEFF',
+            'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
+            'white-space': 'nowrap',
+          })
+        }
+        // 修改二级网格背景
+        this.layers.layer2.setOptions ({
+          strokeColor: '#FFBF7A',
+          fillColor: '#DC8419',
+          strokeOpacity: 1,
+          fillOpacity: 0.3,
+        })
+        // 修改围栏区域文本样式
+        var overlays = this.layers.layer3.getOverlays();
+        for (var i = 0; i < overlays.length; i++) {
+          let id = overlays[i].getExtData().id;
+          if(id == "围栏text" || id == "区域text") {
+            overlays[i].setStyle({
+              'font-size': '14px',
+              'text-align': 'center',
+              'color': '#62E1FA',
+              'line-height': '24px',
+              'letter-spacing': '2px',
+              'white-space': 'nowrap',
+            })
+          } else if(id == "区域polygon") {
+            overlays[i].setOptions({
+              strokeOpacity: 0,
+              strokeColor: '#FF0000',
+              fillColor: '#FF0000',
+              fillOpacity:0.38,
+            })
+          } else if(id == "围栏polygon") {
+            overlays[i].setOptions({
+              strokeOpacity: 0.9,
+              strokeColor: "#62E1FA",
+              fillColor: "#62E1FA",
+              fillOpacity: 0.3,
+            })
+          }
+        }
         this.map.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518")
       } else {
         this.visible = true;
+        // 修改一级网格背景
+        this.layers.layer.setOptions ({
+          strokeColor: '#0084FF', 
+          fillColor: '#40AFFF',
+          fillOpacity: 0.8,
+          editable:false,
+          visible:true,
+        })
+        // 修改一级网格字体颜色
+        let text = this.layers.text.getOverlays();
+        for (let i = 0; i < text.length; i++) {
+          text[i].setStyle({
+            'font-size': '16px',
+            'font-weight': 'bold',
+            'text-align': 'center',
+            'color': '#DFFAFF',
+            'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
+            'white-space': 'nowrap',
+          })
+        }
+        // 修改二级网格背景
+        this.layers.layer2.setOptions ({
+          strokeColor: '#FF8400',
+          fillColor: '#FF911A',
+          strokeOpacity: 1,
+          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');
+          if(id == "围栏text" || id == "区域text") {
+            overlays[i].setStyle({
+              'font-size': '14px',
+              'text-align': 'center',
+              'color': '#E4ECFF',
+              'line-height': '24px',
+              'letter-spacing': '2px',
+              'white-space': 'nowrap',
+            })
+          } else if(id == "区域polygon") {
+            overlays[i].setOptions({
+              strokeOpacity: 0,
+              strokeColor: '#FF0000',
+              fillColor: '#FF0000',
+              fillOpacity:0.6,
+            })
+          } else if(id == "围栏polygon") {
+            overlays[i].setOptions({
+              strokeOpacity: 1,
+              strokeColor: "#00B7FF",
+              fillColor: "#001AFF",
+              fillOpacity: 0.5,
+            })
+          }
+        }
+        // this.layers.text.setOptions ({
+        //   setStyle:{
+        //     'font-size': '16px',
+        //     'font-weight': 'bold',
+        //     'text-align': 'center',
+        //     'color': '#DFFAFF',
+        //     'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
+        //     'white-space': 'nowrap',
+        //   }
+        // })
         this.map.setMapStyle("amap://styles/whitesmoke")
         
       }
@@ -2326,7 +2553,28 @@ export default {
       // console.log(id)
     },
     // 输入框的搜索框点击事件
-    search() {},
+    search() {
+      // TODO:新增marker的方法
+      let ico5 = require("../../../assets/images/icon/icon5.png");
+      let offIcon4 = require("../../../assets/images/icon/offLine4.png");
+      point.features.forEach((element)=>{
+        if(element.properties.name == "重点事件"){
+          var marker = new AMap.Marker({
+            position: new AMap.LngLat(element.geometry.coordinates[0], element.geometry.coordinates[1]), // 标记位置
+            offset: new AMap.Pixel(-27, -94),
+            content:`<div class="markerStyles">
+                        <img src="${element.properties.status == "0"? offIcon4 : ico5}" alt="">
+                      </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);
+          this.map.add(this.layers.markers)
+        }
+      })
+    },
     // 新增事件的点击事件
     createdTask() {
       this.$refs.newEvent.open();
@@ -2344,7 +2592,19 @@ export default {
       this.carInfo.visible = false;
       this.monitoringInfo.visible = false;
       this.shopInfo.visible = false;
-      this.getMarkers(id)
+      if (id == 1) {
+        this.markerOffset = new AMap.Pixel(-35, -123);
+      } else if (id == 2) {
+        this.markerOffset = new AMap.Pixel(-27, -113);
+      } else if (id == 3) {
+        this.markerOffset = new AMap.Pixel(-35, -148);
+      } else if (id == 4) {
+        this.markerOffset = new AMap.Pixel(-27, -94);
+      } else if (id == 5) {
+        this.markerOffset = new AMap.Pixel(-27, -94);
+      }
+      this.getMarkers(id);
+      
       // if (id == 1) {
       //   this.getTem();
       // } else {
@@ -2365,9 +2625,16 @@ export default {
       }, 200);
       this.$emit("rightAnimationAction");
     },
+    getCarList(){
+      getCarManageList({pageNum: 1,pageSize: 10}).then(res=>{
+        console.log(res);
+        this.carLine = res.rows
+      })
+    },
   },
-  mounted() {
 
+  mounted() {
+    this.getCarList()
   },
 };
 </script>
@@ -2376,6 +2643,11 @@ export default {
   width: 100%;
   height: 100%;
   position: relative;
+  .map-mengcheng {
+    position: absolute;
+    top: 0;
+
+  }
   .left-animationMap-enter-active,
   .left-animationMap-leave-active {
     transition: all 1s;

src/views/components/mapLeftNumber/index.vue

@@ -8,10 +8,11 @@
       <div>{{ id == 1 ? "姓名" : "车牌号" }}</div>
       <div class="header-title-right">实时定位/行程轨迹</div>
     </div>
-    <div class="left--lists" id="box" :style="{'height':(height - lists.height - 11) + 'px'}">
+    <!-- <div class="left--lists" id="box" :style="{'height':(height - lists.height - 11) + 'px'}"> -->
+    <div class="left--lists" id="box" :style="{'height':(height - lists.height + 5) + '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.userName }}
+          {{ item.userName  || item.carCode}}
         </div>
         <div class="list-right">
           <div class="real-time-location" @click="realTimeLocation(item)">

src/views/components/personagetrack/index.vue

@@ -102,7 +102,7 @@
                 class="amap-person"
               >
                 <!-- 江宁GeoJson文件 -->
-                <el-amap-geojson @init="initLocation" :geo="jiangninggeo" ref="jiangningGeojson" :polygon-options="polygonOptions" :visible="true" :draggable="false"></el-amap-geojson>
+                <!-- <el-amap-geojson @init="initLocation" :geo="jiangninggeo" ref="jiangningGeojson" :polygon-options="polygonOptions" :visible="true" :draggable="false"></el-amap-geojson> -->
               </el-amap>
               <!-- <img src="@/assets/images/minMap.png" alt="" /> -->
             </div>
@@ -115,6 +115,13 @@
 <script>
 import diaLog from "../../components/dialog/index.vue";
 import jiangninggeo from "@/utils/mapJson/jiangningjingkaiqugeo.json";
+
+import OneGJ02 from "@/utils/mapJson/1GJ02.json";
+import TwoGJ02 from "@/utils/mapJson/2GJ02.json";
+import ThreeGJ02 from "@/utils/mapJson/3GJ02.json";
+import FourGJ02 from "@/utils/mapJson/4GJ02.json";
+import kaifaqu from "@/utils/mapJson/开发区空港开发区GJ02.json";
+import ruanjianyuan from "@/utils/mapJson/开发区软件园GJ02.json";
 // import L from "leaflet";
 // import "@/utils/lib/leaflet.ChineseTmsProviders.js";
 // import "@/utils/lib/leaflet-tilelayer-colorizr.js";
@@ -148,12 +155,169 @@ export default {
       track: null,
       mapLayer1: null,
       loading: false,
+      layers:{
+        layer:null,
+      }
     };
   },
   methods: {
     init(map){
       this.map = map;
       map.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518");
+      this.layers.layer = new AMap.OverlayGroup();
+
+      this.$nextTick(() => {
+        var geojson1 = new AMap.Polygon({
+          path:OneGJ02.features[0].geometry.coordinates[0][0],
+          strokeColor: '#00C5EC', 
+          fillColor: '#00AEFF',
+          fillOpacity: 0.4,
+          // fillOpacity: 0.3,
+          editable:false,
+          visible:true,
+        })
+        var text1 = new AMap.Text({
+          // position: [element.properties.CENTERX,element.properties.CENTERY],
+          position: getCenter(OneGJ02.features[0].geometry.coordinates[0][0]),
+          anchor: 'bottom-center',
+          text: OneGJ02.features[0].properties.NAME,
+          style:{
+            'font-size': '16px',
+            'font-weight': 'bold',
+            'text-align': 'center',
+            'color': '#00AEFF',
+            'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
+            'white-space': 'nowrap',
+          },
+        });
+        var geojson2 = new AMap.Polygon({
+          path:TwoGJ02.features[0].geometry.coordinates[0][0],
+          strokeColor: '#00C5EC', 
+          fillColor: '#00AEFF',
+          fillOpacity: 0.4,
+          // fillOpacity: 0.3,
+          editable:false,
+          visible:true,
+        })
+        var text2 = new AMap.Text({
+          // position: [element.properties.CENTERX,element.properties.CENTERY],
+          position: getCenter(TwoGJ02.features[0].geometry.coordinates[0][0]),
+          anchor: 'bottom-center',
+          text: TwoGJ02.features[0].properties.NAME,
+          style:{
+            'font-size': '16px',
+            'font-weight': 'bold',
+            'text-align': 'center',
+            'color': '#00AEFF',
+            'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
+            'white-space': 'nowrap',
+          },
+        });
+        var geojson3 = new AMap.Polygon({
+          path:ThreeGJ02.features[0].geometry.coordinates[0][0],
+          strokeColor: '#00C5EC', 
+          fillColor: '#00AEFF',
+          fillOpacity: 0.4,
+          // fillOpacity: 0.3,
+          editable:false,
+          visible:true,
+        })
+        var text3 = new AMap.Text({
+          // position: [element.properties.CENTERX,element.properties.CENTERY],
+          position: getCenter(ThreeGJ02.features[0].geometry.coordinates[0][0]),
+          anchor: 'bottom-center',
+          text: ThreeGJ02.features[0].properties.NAME,
+          style:{
+            'font-size': '16px',
+            'font-weight': 'bold',
+            'text-align': 'center',
+            'color': '#00AEFF',
+            'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
+            'white-space': 'nowrap',
+          },
+        });
+        var geojson4 = new AMap.Polygon({
+          path:FourGJ02.features[0].geometry.coordinates[0][0],
+          strokeColor: '#00C5EC', 
+          fillColor: '#00AEFF',
+          fillOpacity: 0.4,
+          // fillOpacity: 0.3,
+          editable:false,
+          visible:true,
+        })
+
+        var text4 = new AMap.Text({
+          // position: [element.properties.CENTERX,element.properties.CENTERY],
+          position: getCenter(FourGJ02.features[0].geometry.coordinates[0][0]),
+          anchor: 'bottom-center',
+          text: FourGJ02.features[0].properties.NAME,
+          style:{
+            'font-size': '16px',
+            'font-weight': 'bold',
+            'text-align': 'center',
+            'color': '#00AEFF',
+            'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
+            'white-space': 'nowrap',
+          },
+        });
+        var geojson5 = new AMap.Polygon({
+          path:kaifaqu.features[0].geometry.coordinates[0][0],
+          strokeColor: '#00C5EC', 
+          fillColor: '#00AEFF',
+          fillOpacity: 0.4,
+          // fillOpacity: 0.3,
+          editable:false,
+          visible:true,
+        })
+        var text5 = new AMap.Text({
+          // position: [element.properties.CENTERX,element.properties.CENTERY],
+          position: getCenter(kaifaqu.features[0].geometry.coordinates[0][0]),
+          anchor: 'bottom-center',
+          text: kaifaqu.features[0].properties.NAME,
+          style:{
+            'font-size': '16px',
+            'font-weight': 'bold',
+            'text-align': 'center',
+            'color': '#00AEFF',
+            'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
+            'white-space': 'nowrap',
+          },
+        });
+
+        var geojson6 = new AMap.Polygon({
+          path:ruanjianyuan.features[0].geometry.coordinates[0][0],
+          strokeColor: '#00C5EC', 
+          fillColor: '#00AEFF',
+          fillOpacity: 0.4,
+          // fillOpacity: 0.3,
+          editable:false,
+          visible:true,
+        })
+        var text6 = new AMap.Text({
+          // position: [element.properties.CENTERX,element.properties.CENTERY],
+          position: getCenter(ruanjianyuan.features[0].geometry.coordinates[0][0]),
+          anchor: 'bottom-center',
+          text: ruanjianyuan.features[0].properties.NAME,
+          style:{
+            'font-size': '16px',
+            'font-weight': 'bold',
+            'text-align': 'center',
+            'color': '#00AEFF',
+            'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
+            'white-space': 'nowrap',
+          },
+        });
+
+        
+        this.layers.layer.addOverlay(geojson1);
+        this.layers.layer.addOverlay(geojson2);
+        this.layers.layer.addOverlay(geojson3);
+        this.layers.layer.addOverlay(geojson4);
+        this.layers.layer.addOverlay(geojson5);
+        this.layers.layer.addOverlay(geojson6);
+        this.map.add(this.layers.layer);
+        map.setFitView();
+      })
     },
     initLocation(){
       // 获取地图实例

src/views/components/video/index.vue

@@ -4,7 +4,7 @@
  * @Author: JC9527
  * @Date: 2023-12-26 13:59:07
  * @LastEditors: JC9527
- * @LastEditTime: 2023-12-26 14:26:20
+ * @LastEditTime: 2023-12-28 14:46:59
 -->
 <template>
   <dia-log ref="dialog4" width="45%" title="实时监控" @close="Close">
@@ -35,15 +35,16 @@ export default {
   components:{diaLog},
   data() {
     return {
-      videoUrl: "https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8",
+      videoUrl: "",
       videoPlayer: null,
     }
   },
   props:{},
   methods:{
-    open() {
+    open(url) {
       this.$refs.dialog4.open('3');
       this.initVideo();
+      this.videoUrl = url;
     },
     Close() {
       // this.videoPlayer.dispose();
@@ -70,6 +71,7 @@ export default {
   },
   destroyed() {
     if(this.videoPlayer){
+      console.log("1111111111111111111111");
       this.videoPlayer.dispose();
     }
   }