提交

public/webClient/webClient_initWnd.js

@@ -28,7 +28,7 @@ class VideoPlay {
             letPort: defaultConfig.port, // 端口配置
             letUserCode: localStorage.getItem("userId"), // 用户code
             wsUri: "ws://localhost:1234",
-            token: localStorage.getItem("token"), // token
+            token: localStorage.getItem("DAHUA_token"), // token
             getVersion: null, // option里面的获取版本信息的回调函数通知
             loginSuccess: null, // 登陆成功会调通知
             errorInfo: null, // 异常回调通知
@@ -197,6 +197,7 @@ class VideoPlay {
         // this._toolHeight = toolh < 0 ? 80 : toolh;
         // this.zoom = this.detectZoom() / 100;
         this.zoom = this.detectZoom() / 100;
+        // console.log(this.zoom);
         if (this.zoom === 0.67) {
             // 现场笔记本
             this._toolHeight = 80;
@@ -214,9 +215,13 @@ class VideoPlay {
     }
     // 网页变操作化大小
     resize() {
-        if (!this.status || !this.vModeObj.embedVideoMode) {
-            return false;
-        }
+        // console.log(33333);
+        console.log(this.status);
+        console.log(this.vModeObj.embedVideoMode);
+        // if (!this.status || !this.vModeObj.embedVideoMode) {
+        //     console.log('false');
+        //     return false;
+        // }
         const calcDomWidth =
             this.space.clientWidth || this.space.getBoundingClientRect().width;
         const calcDomheight =
@@ -320,6 +325,7 @@ class VideoPlay {
     }
     // 创建视频窗口
     createVideoDialog(obj) {
+        console.log(obj);
         const {
             rows = 2,
             cols = 2,
@@ -351,6 +357,7 @@ class VideoPlay {
                 webControlExpend: webControlExpend
             }
         });
+        console.log(params);
         this.webSocketSend(params);
     }
     //初始化窗口
@@ -442,6 +449,7 @@ class VideoPlay {
         };
         this.display = flag;
         this.status = flag;
+        console.log(flag);
         this.resize(); // 隐藏时候不走resize，显示时候感知下位置，但是，这不能加延时，否则切换标签页有问题。
         this.webSocketSend(JSON.stringify(params));
     }
@@ -475,7 +483,9 @@ class VideoPlay {
     // 最大化最小化操作；
     winMaxMinOpt() {
         if (document.addEventListener) {
+            // debugger;
             document.addEventListener("webkitvisibilitychange", () => {
+                // debugger;
                 if (document.webkitVisibilityState === "hidden") {
                     // 最小化
                     const temp = this.status;
@@ -566,3 +576,5 @@ class VideoPlay {
         this.webSocketSend(params);
     }
 }
+
+window.VideoPlay = VideoPlay;

src/components/MarkerMap/dialog.ts

@@ -173,7 +173,7 @@ export const GET_TEAM_DIALOG_HTML = (item: ResourceItemDetail) => {
 
 export const GET_SINGLE_DEVICE_DIALOG_HTML = (
   item: SingleDeviceItem,
-  callback: Function 
+  callback: Function,
 ) => {
   const el = document.createElement('div');
   el.innerHTML = `
@@ -197,8 +197,20 @@ export const GET_SINGLE_DEVICE_DIALOG_HTML = (
   action.appendChild(button);
   button.addEventListener('click', callback);
 
+  // const action2 = document.createElement('div');
+  // action2.className = 'action';
+  // const button2 = document.createElement('button');
+  // button2.className = 'el-button el-button--primary el-button--small';
+  // button2.innerHTML = '查看视频';
+  // action2.appendChild(button);
+  // button2.addEventListener('click', videoplay);
+
   el.appendChild(action);
 
+  // el.appendChild(action2);
+
+  console.log(el);
+
   return el;
 };
 

src/components/MarkerMap/index.tsx

@@ -85,9 +85,9 @@ interface ActionType {
 // 路况信息刷新间隔
 const REFRESH_TRAFFIC_TIME = 60000;
 
-let theSocket = null;
+// let theSocket = null;
 
-let vPlayArea =null;
+// let vPlayArea =null;
 
 const getIncidentImage = (status: MarkerType['status']) =>
   status?.toString() === '1'
@@ -204,6 +204,7 @@ export default defineComponent({
             console.log(marker["deviceCode"])
             console.log(marker["userId"])
             const self = this;
+            
             daHuaStore.DAHUAUserObj(marker["userId"]).then(deviceUser=>{
                          console.log(deviceUser);
                          let memberObj = {
@@ -224,8 +225,11 @@ export default defineComponent({
                          console.log(meetObj);
                          daHuaStore.DAHUAMeetingMember(meetObj).then(data=>{
                                   //  console.log(11111111)
-                                  //  daHuaStore.DAHUAMeetingUser(meetObj.meetId);
-                                initSocket(meetObj.user.userCode);
+                                   daHuaStore.DAHUAMeetingUser(meetObj.meetId);
+                                  daHuaStore.DAHUAUserInfo().then(u => {
+                                    console.log(u,'+++++++');    
+                                    initSocket(u.userCode,memberObj);
+                                  })
                          })
                          
                         //  console.log(memberObj);
@@ -289,11 +293,41 @@ export default defineComponent({
       }
     };
 
-    const initSocket =(userCode) => {
+    const videoplay =(item)=>{
+      console.log('播放视频');
+      console.log(item);   
+      if (!theSocket.websocket) {
+        this.$Message.warning("请先打开视频插件");
+        return;
+      }
+      if (item.type == "client") {
+        this.slectOptionmini(item.userId).then((arr) => {
+          if (arr) {
+            this.vPlayArea.openAppVideo(arr);
+          }
+        });
+      } else if (item.type == "single") { //播放单兵视频
+        pullFlow(item.channelId);
+      } else if (item.type == "vehicle") { //播放车载视频
+        pullFlow(item.channelId);
+      } else if (item.type == "uav_dev") { //播放无人机视频
+        pullFlow(item.channelId);
+      }         
+     };
+
+     const pullFlow = (chinnelId) => {
+      if (chinnelId) {
+        window.vPlayArea&&window.vPlayArea.realTimeVideo([{"channelId": chinnelId}]);
+      }
+    };
+
+
+    const initSocket =(userCode,memberObj) => {
       const self = this;
       console.log(userCode);
+      localStorage.setItem("userId",userCode);
       //初始websocket实例，保存在window中方便调用。一个浏览器tab页面只能初始化一次。所有的控件窗口，通过该websocket实例去生成不同的窗口实例，不同的控件窗口通过自己的窗口实例去调用初始化、关闭、隐藏等
-      window.theSocket = theSocket = new InitWebSocketClass(
+      window.theSocket = new InitWebSocketClass(
         userCode,localStorage.getItem("DAHUA_token"), {
           //客户端登陆成功通知;
           loginSuccess: (v)=> {
@@ -312,8 +346,9 @@ export default defineComponent({
               if (
                 data.params.handleName === "#vPlayArea") {
                 //客户端窗口创建好后,界面显示窗口;
-                vPlayArea.resize();
-                this.$Message.warning("视频窗口创建成功！");
+                window.vPlayArea.resize();
+                ElMessage.warning("视频窗口创建成功！");
+                videoplay(memberObj);
               }
             }
           }
@@ -321,16 +356,16 @@ export default defineComponent({
       );
       console.log(theSocket);
       //socket实例初始化websocket回调方法;
-      theSocket
+      window.theSocket
         .initWebSocket()
         .then(v => {
           console.log();
           if (v) {
-            this.$Message.warning("视频插件登陆完成!");
+            ElMessage.warning("视频插件登陆完成!");
           }
         })
         .catch(v => {
-          this.$Message.warning("若要观看实时视频，请先安装视频插件");
+          ElMessage.warning("若要观看实时视频，请先安装视频插件");
         });
     }
 
@@ -348,14 +383,14 @@ export default defineComponent({
         playParams: {}
       };
       //左边窗口实例
-      window.vPlayArea = vPlayArea = new VideoPlay(
+      window.vPlayArea = new window.VideoPlay(
         "#vPlayArea",
         window.theSocket.websocket,//一个浏览器tab页面公用一个
         window.theSocket.socketCode,//一个浏览器tab页面公用一个
         typeObj
       );
       //左边窗口初始化
-       vPlayArea.init();
+       window.vPlayArea.init();
     }
 
     const updateTrafficSource = () => {
@@ -608,6 +643,9 @@ export default defineComponent({
       // 如果存在id
       await incidentStore.getIncidentItem(route.query.id as string);
       handleSetDetailMarker(incidentStore.incidentDetail.baseInfo ?? {});
+      
+        document.getElementById("vPlayArea").style.height = (window.innerHeight - 20) + "px";
+        window.theSocket && window.theSocket.resize();
     });
 
     watch(
@@ -659,6 +697,7 @@ export default defineComponent({
     return () => (
       <div class="task-map-container">
         <MapView v-model:map={state.map} />
+        <div id='vPlayArea' />
         <div
           class={clsx('address-type-card-container', {
             ['in-detail']: props.readonly,

src/layout/BaseLayout/index.tsx

@@ -20,34 +20,34 @@ export default defineComponent({
 
     // login da hua
     onMounted(() => {
-      if(!localStorage.getItem("DAHUA_token")){
-               daHuaStore.DAHUALogin();
-      }else{
+      if (!localStorage.getItem("DAHUA_token")) {
+        daHuaStore.DAHUALogin();
+      } else {
         daHuaStore.KEEPAlive();  //保活 //获取当前用户信息
-        daHuaStore.DAHUAUserInfo().then(res=>{
-              console.log(res);
-              daHuaStore.DAHUACreateMeet(res).then(data=>{         //创建会议
-                      console.log(data);
-                      let obj ={
-                        user:res,
-                        meetId:data.id,
-                        member:[{
-                          userName:res.userName,
-                          userId:res.userCode,
-                          region:res.paasId,
-                          type:'client',
-                          // speak:'true',
-                          number:res.userPhone,
-                          // department:'根组织'
-                        }]
-                      }
-                      localStorage.setItem('meeting',JSON.stringify(obj));
-                      // console.log(obj);
-                      // daHuaStore.DAHUAMeetingMember(obj);
-                      // daHuaStore.DAHUAMeetingUser(data.id);
-                      // daHuaStore.DAHUADeleteMeet(data.id);
-              });
-       })
+        daHuaStore.DAHUAUserInfo().then(res => {
+          console.log(res);
+          daHuaStore.DAHUACreateMeet(res).then(data => {         //创建会议
+            console.log(data);
+            let obj = {
+              user: res,
+              meetId: data.id,
+              member: [{
+                userName: res.userName,
+                userId: res.userCode,
+                region: res.paasId,
+                type: 'client',
+                // speak:'true',
+                number: res.userPhone,
+                // department:'根组织'
+              }]
+            }
+            localStorage.setItem('meeting', JSON.stringify(obj));
+            // console.log(obj);
+            // daHuaStore.DAHUAMeetingMember(obj);
+            // daHuaStore.DAHUAMeetingUser(data.id);
+            // daHuaStore.DAHUADeleteMeet(data.id);
+          });
+        })
         // console.log(dhUser);
         daHuaStore.DAHUADeviceList('S4NbecfYB1DFLAIM9FFHQ8');   //测试执法记录仪
         daHuaStore.DAHUADeviceList('S4NbecfYB1DGB68AN187Q8');   //执法人员设备列表
@@ -57,14 +57,14 @@ export default defineComponent({
 
     return () => (
       <section class="base-layout-container">
-        <header class="base-layout-title-contatiner">
+        <header class="base-layout-title-contatisner">
           <div class="back-to-home" onClick={() => router.push('/home')}></div>
         </header>
         <main>
           <RouterView />
           <MarkerMap
             readonly={route.path.includes('incidentDetail')}
-            // marker={store.incidentDetail}
+          // marker={store.incidentDetail}
           />
         </main>
       </section>

src/views/HomePage/index.tsx

@@ -22,14 +22,9 @@ export default defineComponent({
       });
     });
     return () => (
-      <div>
       <div class="home-page-container">
         <MessageCard />
       </div>
-        <div id='vPlayArea'>
-           
-        </div>
-      </div>
     );
   },
 });