fix

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

@@ -2,16 +2,25 @@
   <div class="box">
     <div id="middleMap"></div>
     <div class="sl">
-        <div class="left">
+      <div class="left">
-            <div class="sxt"></div>
+        <div class="sxt"></div>
-            <div>监控</div>
+        <div>监控</div>
-        </div>
+      </div>
-        <div class="right">
+      <div class="right">
-            <div class="warn"></div>
+        <div class="warn"></div>
-            <div>预警</div>
+        <div>预警</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,61 +44,92 @@ 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], //中心点坐标
+            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()}],`
             );
           });
           const marks = [
             {
-              locaton: [106.46174288158418,29.53138123556404],
+              locaton: [106.46174288158418, 29.53138123556404],
               name: "重庆亿利宝汽车配件有限公司",
               device: "AI摄像头-CAM90802",
             },
             {
-              locaton: [106.45773188158418,29.54092123556404],
+              locaton: [106.45773188158418, 29.54092123556404],
               name: "重庆市沙坪坝区人民政府",
               device: "AI摄像头-CAM90804",
             },
           ];
           const marks2 = [
             {
-              locaton: [106.45413980158418,29.55100123556404],
+              locaton: [106.45413980158418, 29.55100123556404],
               name: "沙坪公园",
               device: "AI摄像头-CAM90801",
               address: "游客溺水",
+              src: '/images/mapIcon/img1.png'
             },
             {
-              locaton: [106.48074381158418,29.54188923556404],
+              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);
         });
     },
-     // 添加图形点标记
+    // 添加图形点标记
     addMapMarker(sourceData = [], type = "sxt", info = {}) {
       const marker = new AMap.Marker({
         position: new AMap.LngLat(sourceData[0], sourceData[1]),
@@ -161,44 +205,61 @@ export default {
   width: 100vw;
   height: calc(100vh - 84px);
 }
-.box{
+
-    position: relative;
+.box {
-    .sl{
+  position: relative;
-        width: 250px;
+  .right-panel {
-        height: 70px;
+    position: absolute;
-        position: absolute;
+    right: 1rem;
-        bottom: 3%;
+    top: 1rem;
-        right:3%;
+    width: 18rem;
-        display: flex;
+    padding: 1rem;
-        align-items: center;
+    z-index: 999;
-        justify-content: space-between;
+    background-color: white;
-        .left{
+    border-radius: .4rem;
-            width: 49%;
+    box-shadow: 2px 2px 4px #25252525, -2px -2px 2px #14141414;
-            height: 100%;
+  }
-            display: flex;
+
-            align-items: center;
+  .sl {
-            justify-content: space-around;
+    width: 250px;
-            .sxt{
+    height: 70px;
-                width: 2.5rem;
+    position: absolute;
-                height: 2.5rem;
+    bottom: 3%;
-                background-size: 100% 100%;
+    right: 3%;
-                background-image: url(./assets/jk.png);
+    display: flex;
-            }
+    align-items: center;
-        }
+    justify-content: space-between;
-        .right{
+
-            width: 49%;
+    .left {
-            height: 100%;
+      width: 49%;
-            display: flex;
+      height: 100%;
-            align-items: center;
+      display: flex;
-            justify-content: space-around;
+      align-items: center;
-            .warn{
+      justify-content: space-around;
-                width: 2.5rem;
+
-                height: 2.5rem;
+      .sxt {
-                background-size: 100% 100%;
+        width: 2.5rem;
-                background-image: url(./assets/warn.png);
+        height: 2.5rem;
-            }
+        background-size: 100% 100%;
-        }
+        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;
+        background-size: 100% 100%;
+        background-image: url(./assets/warn.png);
+      }
+    }
+
+  }
 }
 </style>

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) => {