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

@@ -2,25 +2,16 @@
   <div class="box">
     <div id="middleMap"></div>
     <div class="sl">
-      <div class="left">
-        <div class="sxt"></div>
-        <div>监控</div>
-      </div>
-      <div class="right">
-        <div class="warn"></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 class="left">
+            <div class="sxt"></div>
+            <div>监控</div>
+        </div>
+        <div class="right">
+            <div class="warn"></div>
+            <div>预警</div>
+        </div>
     </div>
+    
   </div>
 </template>
 <script>
@@ -32,11 +23,7 @@ export default {
   data() {
     return {
       map: null,
-      mouseTool: null,
-      overlays: [],
-
-      activeName: '1',
-      rightList: []
+    
     };
   },
   mounted() {
@@ -44,92 +31,61 @@ 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) => {
-          that.map = new AMap.Map("middleMap", {
+          this.map = new AMap.Map("middleMap", {
             zoom: 13, //级别
-            center: [106.45773, 29.54098], //中心点坐标
+            center: [106.45773,29.54098], //中心点坐标
             mapStyle: "",
           });
-          that.map.on("click", (e) => {
+          this.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: '/images/mapIcon/img2.jpeg'
+              src:this.sp2
             },
           ];
-
-          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) => {
-            that.addMapMarker(item.locaton, 'sxt2', { name: item.name, device: item.device })
+            this.addMapMarker(item.locaton, 'sxt2', { name: item.name, device: item.device })
           });
           marks2.forEach((item, index) => {
-            that.addMapMarker2(item.locaton, 'jb', { name: item.name, device: item.device, address: item.address })
+            this.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]),
@@ -205,61 +161,44 @@ 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;
-    position: absolute;
-    bottom: 3%;
-    right: 3%;
-    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;
-        background-size: 100% 100%;
-        background-image: url(./assets/jk.png);
-      }
+.box{
+    position: relative;
+    .sl{
+        width: 250px;
+        height: 70px;
+        position: absolute;
+        bottom: 3%;
+        right:3%;
+        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;
+                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);
+            }
+        }
+        
     }
-
-    .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:'/images/mapIcon/img1.png'
+              src:'./assets/img1.png'
             },
             {
               locaton: [106.48074381158418,29.54188923556404],
               name: "森林实验小学",
               device: "AI摄像头-CAM90801",
               address: "校门口出现车不礼让行人现象",
-              src:'/images/mapIcon/img2.jpeg'
+              src:'./assets/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', item)
+            this.addMapMarker2(item.locaton, 'jb', { name: item.name, device: item.device,address: item.address})
           });
         })
         .catch((e) => {