ar问题初步修改

src/api/screenDisplay.js

@@ -44,6 +44,12 @@ export const getForecast = params => {
   })
 }
 
+export const getPlanIdApi = params => {
+  return http.post(`/api/HIK/getPlanId`,params).then(res => res).catch(function (error) {
+    console.log(error);
+  })
+}
+
 //获取港益换热站实时能耗数据
 export const getGYTransferRealData = params => {
   return http.post(`/api/gis/GYTransferRealData`, params).then(res => res).catch(function (error) {

src/components/screenDisplay.vue

@@ -586,6 +586,7 @@ import {
   getGYTransferRealData,
   getGYTransferAlarmData,
   GYTransferVideo,
+  getPlanIdApi,
 } from "../api/screenDisplay";
 import moment from 'moment'
 import {defineComponent} from "vue";
@@ -755,6 +756,21 @@ export default defineComponent({
     };
   },
   methods: {
+    thirdLevelDblclick(stationId) {
+      console.log('stationId',stationId)
+      const params = {
+        StationId: stationId
+      }
+      getPlanIdApi(params).then(res => {
+        if(res.status === 0) {
+          const id = res.data.id
+          window.open('/GisAr?id=' + id, '_blank');
+          console.log('ggggggggggggggggggggggggggggggggggggggggggggggggggggggg')
+        }else {
+          ElMessage.error('此换热站暂无ar监控点');
+        }
+      })
+    },
     // 第二级大屏接口
     async secondPageData() {
       this.firstCardLoading = true
@@ -1012,8 +1028,7 @@ export default defineComponent({
         });
         popupButtons2.addEventListener("dblclick", function (event) {
           if (markerId.includes("marker3")) {
-            window.open('/GisAr', '_blank');
-            console.log('ggggggggggggggggggggggggggggggggggggggggggggggggggggggg')
+            _this.thirdLevelDblclick(stationId) // 第三级页面双击
           }
         })
         popupButtons2.addEventListener("click", function (event) {

src/views/Gis/arDisplay.vue

 <template>
   <div id="panel">
+    <div v-if="videoLoading" class="videoLoading-overlay">
+      <div class="videoLoading-spinner"></div>
+      <p> 视频加载中，请稍后......</p>
+    </div>
     <div id="ar-div" class="panel-child"></div>
     <div v-if="outTime" class="errorContent">
 <!--      <h-empty>-->
@@ -29,13 +33,14 @@
 import ARWebControl from "./arWebControl.debug";
 // 该接口为vlmas组件ui接口，如果是在copas中调用，可以使用vlmas wiki中提供的api接口，如果是组件中使用，需要对应组件参照wiki提供相应接口
 import { getLoginTgc } from "@/api/ar";
-
+import { useRoute } from 'vue-router'
 export default {
   name: "OpenClient",
   components: {},
   props: {},
   data() {
     return {
+      videoLoading: false,
       raData: {},
       control: null,
       ip: "",
@@ -78,6 +83,9 @@ export default {
     next();
   },
   methods: {
+    handleBeforeUnload(event) {
+      console.log('jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj')
+    },
     handleVisibilityChange() {
       if (document.hidden) {
         console.log('隐藏隐藏隐藏隐藏隐藏隐藏隐藏隐藏隐藏隐藏隐藏')
@@ -100,13 +108,15 @@ export default {
       }
     },
     init() {
-      console.log('window.innerWidth',window.innerWidth)
-      console.log('window.innerHeight',window.innerHeight)
       // // 初始化
       // if (this.control) {
       //   this.control.setWindowStatus(2);
       //   this.control = null;
       // }
+      const urlParams = new URLSearchParams(window.location.search);
+      const arIndexCode = urlParams.get('id');
+      console.log('id',arIndexCode)
+
       const loginType = 3;
       const ip = '111.160.132.74';
       const port = this.raData.port;
@@ -133,10 +143,16 @@ export default {
           height,
           protocolType,
           domainId,
+          arIndexCode,
           title,
       );
-      console.log('this.control',this.control)
+      // 程序挂载成功
+      window.addEventListener("ar_start", event => {
+        console.log('kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk')
+          this.videoLoading = false
+      });
       window.addEventListener("ar_loaded", event => {
+        console.log('ar_loadedar_loadedar_loadedar_loadedar_loaded')
         if (event.detail.loadingStatus) {
           this.outTime = 0;
           this.connectError = false;
@@ -168,6 +184,7 @@ export default {
       this.control.setupControl();
     },
     async getClientInfo() {
+      this.videoLoading = true
       try {
         const { status, data } = await getLoginTgc();
         console.log('data',JSON.parse(data))
@@ -189,7 +206,72 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.videoLoading-overlay {
+  position: fixed;
+  top: 5px;
+  left: 5px;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(230, 253, 260, 0.3);//rgba(0, 0, 0, 0.6);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  p {
+    margin-top: 60px;
+    font-size: 26px;
+    color: #29d78b;
+  }
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  .videoLoading-spinner {
+    position: relative;
+    width: 106px;
+    height: 56px;
+    background-image: linear-gradient(#29d78b 50px, transparent 0),
+    linear-gradient(#29d78b 50px, transparent 0),
+    linear-gradient(#29d78b 50px, transparent 0),
+    linear-gradient(#29d78b 50px, transparent 0),
+    radial-gradient(circle 14px, #29d78b 100%, transparent 0);
+    background-size: 48px 15px, 15px 35px, 15px 35px, 25px 15px, 28px 28px;
+    background-position: 25px 5px, 58px 20px, 25px 17px, 2px 37px, 76px 0px;
+    background-repeat: no-repeat;
+    transform: rotate(-45deg);
+
+    &::after,
+    &::before {
+      content: "";
+      position: absolute;
+      left: -45px;
+      top: -10px;
+      width: 56px;
+      height: 56px;
+      border: 6px solid #29d78b;
+      border-radius: 50%;
+      background-repeat: no-repeat;
+      background-image: linear-gradient(#29d78b 64px, transparent 0),
+      linear-gradient(#29d78b 66px, transparent 0),
+      radial-gradient(circle 4px, #29d78b 100%, transparent 0);
+      background-size: 40px 1px, 1px 40px, 8px 8px;
+      background-position: center center;
+      -webkit-animation: rotation 0.3s linear infinite;
+      animation: rotation 0.3s linear infinite;
+    }
+
+    &::before {
+      left: 25px;
+      top: 60px;
+    }
+  }
+}
 html,
 body {
   height: 100%;

src/views/Gis/arWebControl.debug.js

@@ -579,11 +579,11 @@ import store from "@/store/index.js";
           } else if (loginType == 2) {
             this.controlSetupDom.href = `PCCloudVideoLabel://UP --ip ${ip} --port ${port} --user-name ${userName} --login-key ${loginKey} --start-plan-id ${arIndexCode} --left ${left} --top ${top} --width ${width} --height ${height} --login-method sg --domain-id ${domainId} --protocolType ${protocolType} --title ${title}`
           } else if (loginType == 3) {
-            const href =  `PCCloudVideoLabel://UP --ip ${ip} --port ${port} --user-name ${userName} --login-key ${loginKey}  --left ${left} --top ${top} --width ${width} --height ${height} --login-method tgc --domain-id ${domainId} --protocolType ${protocolType} --title ${title}`
+            const href =  `PCCloudVideoLabel://UP --ip ${ip} --port ${port} --user-name ${userName} --login-key ${loginKey} --start-plan-id ${arIndexCode}  --left ${left} --top ${top} --width ${width} --height ${height} --login-method tgc --domain-id ${domainId} --protocolType ${protocolType} --title ${title}`
             console.log('hrefaaaaaaaaaaaaaaaaaaaaaa',href)
             this.controlSetupDom.href = encodeURI(href)
           }
-          console.log('href------', this.controlSetupDom.href)
+          // console.log('href------', this.controlSetupDom.href)
 
           this.webSocketPort = '7789'
           this.lastPosition = {
@@ -887,7 +887,7 @@ import store from "@/store/index.js";
               }
 
               var msgObejct = JSON.parse(messageString)
-
+              console.log('msgObejct',msgObejct)
               if (msgObejct && msgObejct.topic) {
                 if (msgObejct.topic == 'ARToWebKeys') {
                   if (msgObejct.content == 'F11') {
@@ -940,7 +940,15 @@ import store from "@/store/index.js";
                       }
                     })
                   )
-                } else if (msgObejct.topic == 'ARWebLoaded' && msgObejct.content == '1') {
+                } else if (msgObejct.topic == 'clientStart' && msgObejct.content == 'ARStarted') {
+                  window.dispatchEvent(
+                      new CustomEvent('ar_start', {
+                        detail: {
+                          loadingStatus: true
+                        }
+                      })
+                  )
+                }  else if (msgObejct.topic == 'ARWebLoaded' && msgObejct.content == '1') {
                   window.dispatchEvent(
                     new CustomEvent('ar_loaded', {
                       detail: {