fix

god-ui/src/views/monitoringwarning/screenVideo/index.vue

@@ -11,7 +11,16 @@
         <div>预警</div>
       </div>
     </div>
-    
+    <div class="right-panel" v-show="rightList.length > 0">
+      <el-collapse v-model="activeName" accordion>
+        <el-collapse-item :title="item.name" :name="(index + 1)" v-for="(item, index) in rightList" :key="index">
+          <div v-if="item.src">
+            <img :src="item.src" alt="" style="width: 100%;">
+          </div>
+          <div v-else style="width: 100%;padding: 1rem 0;text-align: center;">暂无视频</div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
   </div>
 </template>
 <script>
@@ -23,7 +32,11 @@ export default {
   data() {
     return {
       map: null,
+      mouseTool: null,
+      overlays: [],
 
+      activeName: '1',
+      rightList: []
     };
   },
   mounted() {
@@ -31,18 +44,19 @@ export default {
   },
   methods: {
     initMap() {
+      const that = this
       AMapLoader.load({
         key: "e49669059fa36494531a82ed982f395c", // 申请好的Web端开发者Key，首次调用 load 时必填
         version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
         // plugins: ["AMap.AutoComplete", "AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
       })
         .then((AMap) => {
-          this.map = new AMap.Map("middleMap", {
+          that.map = new AMap.Map("middleMap", {
             zoom: 13, //级别
             center: [106.45773, 29.54098], //中心点坐标
             mapStyle: "",
           });
-          this.map.on("click", (e) => {
+          that.map.on("click", (e) => {
             navigator.clipboard.writeText(
               `[${e.lnglat.R.toString()}, ${e.lnglat.Q.toString()}],`
             );
@@ -65,21 +79,51 @@ export default {
               name: "沙坪公园",
               device: "AI摄像头-CAM90801",
               address: "游客溺水",
+              src: '/images/mapIcon/img1.png'
             },
             {
               locaton: [106.48074381158418, 29.54188923556404],
               name: "森林实验小学",
               device: "AI摄像头-CAM90801",
               address: "校门口出现车不礼让行人现象",
-              src:this.sp2
+              src: '/images/mapIcon/img2.jpeg'
             },
           ];
+
+          AMap.plugin(
+            ["AMap.PlaceSearch", "AMap.Autocomplete", "AMap.MouseTool"],
+            (status, result) => {
+              that.mouseTool = new AMap.MouseTool(that.map);
+              that.mouseTool.on('draw', function (e) {
+                that.overlays.push(e.obj);
+                console.log('dasda', e.obj.De.path);
+                const _path = e.obj.De.path.map(item => ([item.R, item.Q]))
+                console.log('_path', _path);
+                setTimeout(() => {
+                  const innerItem = [...marks, ...marks2].filter(item => {
+                    return AMap.GeometryUtil.isPointInRing(item.locaton, _path);
+                  })
+                  console.log('innerItem', innerItem);
+                  that.rightList = innerItem
+                  that.map.remove(that.overlays)
+                }, 200)
+              })
+              that.mouseTool.rectangle({
+                fillColor: '#00b0ff',
+                strokeColor: '#80d8ff'
+                // 同Polygon的Option设置
+              });
+            }
+          );
+          
           marks.forEach((item, index) => {
-            this.addMapMarker(item.locaton, 'sxt2', { name: item.name, device: item.device })
+            that.addMapMarker(item.locaton, 'sxt2', { name: item.name, device: item.device })
           });
           marks2.forEach((item, index) => {
-            this.addMapMarker2(item.locaton, 'jb', { name: item.name, device: item.device,address: item.address})
+            that.addMapMarker2(item.locaton, 'jb', { name: item.name, device: item.device, address: item.address })
           });
+
+
         })
         .catch((e) => {
           console.log(e);
@@ -161,8 +205,21 @@ export default {
   width: 100vw;
   height: calc(100vh - 84px);
 }
+
 .box {
   position: relative;
+  .right-panel {
+    position: absolute;
+    right: 1rem;
+    top: 1rem;
+    width: 18rem;
+    padding: 1rem;
+    z-index: 999;
+    background-color: white;
+    border-radius: .4rem;
+    box-shadow: 2px 2px 4px #25252525, -2px -2px 2px #14141414;
+  }
+
   .sl {
     width: 250px;
     height: 70px;
@@ -172,12 +229,14 @@ export default {
     display: flex;
     align-items: center;
     justify-content: space-between;
+
     .left {
       width: 49%;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: space-around;
+
       .sxt {
         width: 2.5rem;
         height: 2.5rem;
@@ -185,12 +244,14 @@ export default {
         background-image: url(./assets/jk.png);
       }
     }
+
     .right {
       width: 49%;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: space-around;
+
       .warn {
         width: 2.5rem;
         height: 2.5rem;

god-ui/src/views/rescue/fixedVideo/index.vue

@@ -68,21 +68,21 @@ export default {
               name: "沙坪公园",
               device: "AI摄像头-CAM90801",
               address: "游客溺水",
-              src:'./assets/img1.png'
+              src:'/images/mapIcon/img1.png'
             },
             {
               locaton: [106.48074381158418,29.54188923556404],
               name: "森林实验小学",
               device: "AI摄像头-CAM90801",
               address: "校门口出现车不礼让行人现象",
-              src:'./assets/img2.jpeg'
+              src:'/images/mapIcon/img2.jpeg'
             },
           ];
           marks.forEach((item, index) => {
             this.addMapMarker(item.locaton, 'sxt2', { name: item.name, device: item.device })
           });
           marks2.forEach((item, index) => {
-            this.addMapMarker2(item.locaton, 'jb', { name: item.name, device: item.device,address: item.address})
+            this.addMapMarker2(item.locaton, 'jb', item)
           });
         })
         .catch((e) => {