添加视频播放

dcit-hcsystem-hcsystem-master/src/utils/mapUtil.js

@@ -197,10 +197,11 @@ export default class Mutil {
         
     }
     closeAllOverlays(){
-        let lays=this.MAP.getOverlays().getArray();
-        lays.forEach((ele)=>{
-            ele.setPosition(undefined)
-        })
+        let lays=this.MAP.getOverlays().clear();
+   //      lays.forEach((ele)=>{
+   //          ele.setPosition(undefined)
+			// that.MAP.addOverlay(overlay);
+   //      })
     }
     //增加标注弹窗
     addPopup(popConHtml, id, longitude, latitude) {

dcit-hcsystem-hcsystem-master/src/views/qyMap/qyMap.vue

@@ -10,7 +10,9 @@
                 <!-- <button @click="Mutil.tianSlC()" class="map-botton">切换3</button> -->
             </div>
         
-        
+        <div v-show="isShowVideo" style="display: none;position:absolute;left:1000px;top:10px;z-index: 2;background-color: #0BD30B;width: 400px;height: 300px;">
+			<div id="div_video"></div>
+        </div>
 
 		
 		</div>
@@ -66,7 +68,7 @@
                 
                     <div class="markBox">
                         <div style="float: left;background-color: aquamarine;text-align: center;">
-                            <el-tooltip :disabled="disabled" content="企业注册" placement="left" effect="light" style="margin-left: 25%;">
+                            <el-tooltip content="企业注册" placement="left" effect="light" style="margin-left: 25%;">
                                 <div @click="mapqiye">
                                     <img width="15px" src="@/assets/mark/markqy.png" />
                                 </div>
@@ -77,7 +79,7 @@
                             <span>{{tjNumberObj.enterpriseRegNum}}</span>
                         </div>
                         <div style="float: left;text-align: center;">
-                            <el-tooltip :disabled="disabled" content="危险源" placement="left" effect="light">
+                            <el-tooltip content="危险源" placement="left" effect="light">
                                 <div @click="mapwxy">
                                     <img width="20px" src="@/assets/mark/weixianyuan.png" />
                                 </div>
@@ -88,7 +90,7 @@
                             <span>{{tjNumberObj.dangerNum}}</span>
                         </div>
                         <div style="float: left;">
-                            <el-tooltip :disabled="disabled" content="监控监测点" placement="left" effect="light">
+                            <el-tooltip content="监控监测点" placement="left" effect="light">
                                 <div @click="mapshipin">
                                     <img width="20px" src="@/assets/mark/jiankong.png" />
                                 </div>
@@ -99,7 +101,7 @@
                             <span>{{tjNumberObj.cameraNum}}</span>
                         </div>
                         <div style="float: left;">
-                            <el-tooltip :disabled="disabled" content="职业危害场所" placement="left" effect="light">
+                            <el-tooltip content="职业危害场所" placement="left" effect="light">
                                 <div>
                                     <img width="20px" src="@/assets/mark/weihaichangsuo.png" />
                                 </div>
@@ -110,7 +112,7 @@
                             <span>2</span>
                         </div>
                         <div style="float: left;">
-                            <el-tooltip :disabled="disabled" content="隐患" placement="left" effect="light">
+                            <el-tooltip content="隐患" placement="left" effect="light">
                                 <div>
                                     <img width="20px" src="@/assets/mark/yinhuan.png" />
                                 </div>
@@ -171,7 +173,8 @@ export default class GIS extends Vue {
     @Provide() Mutil: any;
     @Provide() mapLoadDone = false;
     @Provide() MAP: any;
-
+	@Provide() isShowVideo:boolean=false;
+	@Provide() player:any;
     @Provide() mapOption = {
         plugin: [{
                 pName: "MapType",
@@ -197,6 +200,7 @@ export default class GIS extends Vue {
     //     city: "石家庄",
     //     citylimit: true,
     // };
+	@Provide() lastVideoPlayId:any="";
     @Provide() markersB: any = [];
     @Provide() toolobj: any;
     @Provide() mouseTool: any; //测量工具
@@ -313,31 +317,28 @@ export default class GIS extends Vue {
     }
     getshipinWindowInfo(deviceId: string) {
         let that = this;
-        // (window as any).checkDetail = function (param: string) {
-        //     that.$router.push({
-        //         path: "/EnDetail",
-        //         query: {
-        //             enterpriseId: param
-        //         }
-        //     });
-        // };
+		this.closeVideo();
         METHOD.axiosGet(
             that,
             `/safetyDeviceInfo/getSafetyDeviceInfoById/${deviceId}`,
             function (res: any) {
                 if (res.code == 0) {
-                    let device = res.data,
-                html = `<div class="windowDg"><h3>${device.deviceName}</h3>` + `<div id="playerWindow" class="playerWindow"></div>` + `</div>`;
-
-                that.Mutil.addPopup(html, device.id, device.longitude, device.latitude)
-                alert(2)
-                var player = new WasmPlayer(null, "playerWindow", null, {Height: true});
-                player.play('http://27.128.189.137:18000/flv/hls/stream_88_0.flv' , 1);
+                    let device = res.data;
+                that.isShowVideo=true;
+                that.player.play('http://27.128.189.137:18000/flv/hls/stream_88_0.flv' , 1);
+				that.lastVideoPlayId="stream_88_0";//记录上次播放的视频ID
                 console.log(device,"de-----")
                 }
             }
         );
     }
+	//关闭视频方法
+	closeVideo(){
+		if(this.lastVideoPlayId!=""){
+			this.player.stop('http://27.128.189.137:18000/flv/hls/'+this.lastVideoPlayId+'.flv' , 1);
+		}
+		this.isShowVideo=false;
+	}
     addMark(obj: any, index: any) {
         let icon,
             that = this;
@@ -488,6 +489,8 @@ export default class GIS extends Vue {
     }
     mounted() {
         let that = this;
+		
+		that.player = new WasmPlayer(null, "div_video", null, {Height: true});
         that.mapLoadDone = true;
         that.Mutil = new Mutil("mapbox");
         that.MAP = that.Mutil.MAP;