fix: use iframe to call device

index.html

@@ -108,8 +108,8 @@
 
         function refreshRem() {
           var width = docEl.getBoundingClientRect().width;
-          if (width / dpr > 540) {
-            width = 540 * dpr;
+          if (width / dpr > 5760) {
+            width = 5760 * dpr;
           }
           var rem = width / 10;
           docEl.style.fontSize = rem + 'px';

src/components/MarkerMap/index.tsx

@@ -223,6 +223,19 @@ export default defineComponent({
             console.log(marker['userId']);
             const self = this;
 
+            const DAHUA = document.getElementById('DAHUA') as HTMLIFrameElement;
+            DAHUA?.contentWindow?.postMessage(
+              {
+                key: 'danbing',
+                value: marker['userId'],
+                deviceId: marker['deviceCode'],
+                channelId: marker['channelId'],
+              },
+              '*',
+            );
+
+            return;
+
             marker['userId'] &&
               daHuaStore.DAHUAUserObj(marker['userId']).then((deviceUser) => {
                 console.log(deviceUser);

src/layout/BaseLayout/index.scss

@@ -1,4 +1,4 @@
-@import '../../styles//utils.scss';
+@import '../../styles/utils.scss';
 
 .base-layout-container {
   height: 100vh;
@@ -7,6 +7,19 @@
   background-size: cover;
   background-position: top center;
 
+  .dahua-content {
+    position: fixed;
+    opacity: 1!important;
+    top: 0;
+    left: 0;
+    &.display {
+      opacity: 1!important;
+      width: 100%;
+      height: 100vh;
+      z-index: 10;
+    }
+  }
+
   header {
     width: 100%;
     height: 94px * 2;

src/layout/BaseLayout/index.tsx

@@ -1,9 +1,10 @@
-import { defineComponent, onMounted } from 'vue';
+import { defineComponent, onMounted, watchEffect } from "vue";
 import { RouterView, useRoute, useRouter } from 'vue-router';
 import MarkerMap from '@/components/MarkerMap';
 import './index.scss';
 import { useIncidentStore, useDaHuaStore } from '@/store';
 import { constants } from 'zlib';
+import clsx from "clsx";
 
 export default defineComponent({
   setup() {
@@ -20,46 +21,54 @@ export default defineComponent({
 
     // login da hua
     onMounted(() => {
-      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);
-          });
-        });
-        // console.log(dhUser);
-        daHuaStore.DAHUADeviceList('S4NbecfYB1DFLAIM9FFHQ8'); //测试执法记录仪
-        daHuaStore.DAHUADeviceList('S4NbecfYB1DGB68AN187Q8'); //执法人员设备列表
-        daHuaStore.DAHUADeviceList('S4NbecfYB1DGB68S6S0UFC'); //执法车辆列表
+      // 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);
+      //     });
+      //   });
+      //   // console.log(dhUser);
+      //   daHuaStore.DAHUADeviceList('S4NbecfYB1DFLAIM9FFHQ8'); //测试执法记录仪
+      //   daHuaStore.DAHUADeviceList('S4NbecfYB1DGB68AN187Q8'); //执法人员设备列表
+      //   daHuaStore.DAHUADeviceList('S4NbecfYB1DGB68S6S0UFC'); //执法车辆列表
+      // }
+      const DAHUA = document.getElementById('DAHUA') as HTMLIFrameElement;
+      if (!DAHUA) return
+      DAHUA.onload = function(){
+        // @ts-ignore
+        DAHUA.contentWindow.postMessage('onload','*');
       }
     });
 
     return () => (
       <section class="base-layout-container">
+        <iframe style={{opacity: 0}} class={clsx('dahua-content',{['display']: daHuaStore.dahuaUserVisible})}
+                id="DAHUA" name="DAHUA" src="http://127.0.0.1:8080" frameborder="0" />
         <header class="base-layout-title-contatisner">
           <div class="back-to-home" onClick={() => router.push('/home')}></div>
         </header>

src/views/IncidentDetail/index.tsx

@@ -29,7 +29,7 @@ export default defineComponent({
     const commonStore = useCommonStore();
     const mainStore = useMainStore();
     const markerStore = useMarkerStore();
-    const dahuaStore = useDaHuaStore();
+    const daHuaStore = useDaHuaStore();
     const route = useRoute();
 
     const liveVideoRef = ref<HTMLElement>();
@@ -106,7 +106,7 @@ export default defineComponent({
             </div>
           )}
 
-          {!dahuaStore.dahuaUserVisible && (
+          {!daHuaStore.dahuaUserVisible && (
             <div class="detail-right">
               <ExecutionLogCard />
               <LiveMonitoringCard />
@@ -114,17 +114,17 @@ export default defineComponent({
           )}
         </div>
         {/*大华 相关的通讯录可以放这里*/}
-        {dahuaStore.dahuaUserVisible && (
-          <div ref={liveVideoRef} class="live-video-container-left right">
-            <div class="live-video-container">
-              <LiveVideoCard />
-              <div
-                class="live-video-close"
-                onClick={() => (dahuaStore.dahuaUserVisible = false)}
-              />
-            </div>
-          </div>
-        )}
+        {/*{daHuaStore.dahuaUserVisible && (*/}
+        {/*  <div ref={liveVideoRef} class="live-video-container-left right">*/}
+        {/*    <div class="live-video-container">*/}
+        {/*      <LiveVideoCard />*/}
+        {/*      <div*/}
+        {/*        class="live-video-close"*/}
+        {/*        onClick={() => (daHuaStore.dahuaUserVisible = false)}*/}
+        {/*      />*/}
+        {/*    </div>*/}
+        {/*  </div>*/}
+        {/*)}*/}
 
         {markerStore.livevideovisible && (
           <div ref={liveVideoRef} class="live-video-container-left">