转换绝对引入为相对引入，AnyR=>.+2

src/App.vue

@@ -37,12 +37,11 @@ watch(() => chatChannelState.value.currentState, function (value: any) {
       contactsStore.changeWait(true)
     } else {
       if (AnyR.agora) {
-       AnyR.agora.joinChatRoom()
-           .then(function () {
         contactsStore.changeWait(false);
-             return router.push({
+        router.push({
           name: "VideoCall"
-             })
+        }).then(function () {
+          return AnyR.agora.joinChatRoom()
         })
       }
     }

src/views/remote/videoCall/videoChat.vue

 <template>
     <div class="g-block ml-4 pb-0">
         <div class="px-4">
-            <video-item></video-item>
+            <video-item :is-self="true" :id="''"></video-item>
         </div>
         <a-row class="mt-2 px-4">
             <a-col :span="12">

src/views/remote/videoCall/videoInfo.vue

@@ -15,7 +15,9 @@
                 </div>
             </a-space>
         </div>
+<!--      其余的视频窗口-->
         <video-slider class="mb-3 px-4"></video-slider>
+<!--        放大的窗口-->
         <video-tools class="px-4"></video-tools>
     </div>
 </template>
@@ -23,6 +25,12 @@
 <script setup lang="ts">
 import VideoSlider from './videoSlider.vue'
 import VideoTools from './videoTools.vue'
+import {useAnyR} from "AnyR/index";
+import {allOtherChattersIdSet} from "AnyR/states/chatChannelStates";
+
+
+const AnyR = useAnyR()
+
 
 const videoTitle = ref('2024-02-17 10:22:23远程协助事件')
 </script>

src/views/remote/videoCall/videoItem.vue

 <template>
-    <div class="relative">
+    <div class="relative" :id="ps.isSelf ? 'LocalVideo' : `RemoteVideo${ps.id}`" style="height: 300px;">
         <div class="absolute flex justify-between items-center p-1 top-0 left-0 w-full z-10">
             <div class="text-xs px-2 rounded-sm leading-5 bg-primary-disable text-primary">冯云</div>
             <a-space :size="4">
@@ -23,13 +23,13 @@
                 <global-icon icon="phone-hangup" :size="20" color="var(--color-bg-white)"></global-icon>
             </a-button>
         </div>
-        <a-image
-            width="100%"
-            :preview="false"
-            src="https://s3-alpha-sig.figma.com/img/b060/b602/cabebaea2d4e243fae3c3f4a84c8bbd8?Expires=1714953600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=S~hrEGVCWq9THKFJ~xDhZ3Up8Lrjkl5lYLVz~9WZwC1yZNm5jtXYN6g3tcmecPgoWFuLp7RBz-IEyFDy8Sam8BWP3~Pvd~2Zyhq8yrDksZSrbcIciAV6fhPLAaZ-6uMZ2-KOcHsVMSfpihf-r8XWo1ovXBdcBjNHfCSGwMrGfnrCUpb5zoBCakrwxaPpHkakLBBMshVm0WDYM07QB-5Vf-HMo3~IYZcCNogGI-Eg6kH~QUrB~L~g6fGjvGr-aDiCKTMy2zHVKSHqU1Bvx0QNvq-15Wofshs6wQSGkM0GrfiwUCjMYl-9r-Fyxb093rw2pCMsOvGCwP0MaTKAubfZtQ__"
-        />
     </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const ps = defineProps({
+  isSelf: Boolean,
+  id: String
+})
+</script>
 <style lang="less" scoped></style>

src/views/remote/videoCall/videoTools.vue

@@ -7,15 +7,9 @@
                     <global-icon icon="mic" :size="12" color="rgb(var(--success-6))"></global-icon>
                 </div>
             </div>
-            <a-image
-                width="100%"
-                :height="500"
-                :preview="false"
-                src="https://s3-alpha-sig.figma.com/img/c028/6bf9/6d366fb8f403413739dd9d69011c5be8?Expires=1714953600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=pPeI3Z7apUwh723BAGSH5owGG0AeyS8Flw4Nmn8PSU9ekyiMwxvAYQn0~sgCbWxIRkS2IdxzmM4vo3Qihhf8eQJzFGRQMKWC4ISp0P5XX9hrnJjWecLLsMqgmyKBsP5cDS-yuyt0JcdgiMMd6Yo1M7Y-CxjLLfcj-BD~zd3h0mm2USIKlgk9ZrANkIolmf9X3HBfd0DFfuqRUDjYrzBPUO7B7LxhtG57Uu0gEZ2hJIoT7eFQASIZk-ZrNQkPnSTvIvKS99~ZE4F1zoDY4dcnL~CQV5j~11H6yBaR6RfswVfJb2TEsjDjPe0g-m8fZRZqSpGYJfEtyTX7kswKkODEQw__"
-            />
         </div>
         <div class="flex justify-center w-full">
-            <div class="w-[120px] h-[72px] item">
+            <div class="w-[120px] h-[72px] item" @click="hangupCall">
                 <global-icon icon="phone-hangup" :size="21" color="rgb(var(--danger-5))"></global-icon>
                 <span class="mt-1" style="color: rgb(var(--danger-5))">挂断</span>
             </div>
@@ -47,7 +41,15 @@
     </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import {useAnyR} from "AnyR/index";
+
+const AnyR = useAnyR();
+
+function hangupCall() {
+  AnyR?.agora.hangUpCurrentCall();
+}
+</script>
 <style lang="less" scoped>
 .item {
     @apply flex-center flex-col rounded cursor-pointer;