xiaoxin 1 rok temu
rodzic
commit
2594d1d353

+ 1 - 1
src/App.vue

@@ -13,7 +13,7 @@
         playsinline
         autoplay
         muted
-        src="@/assets/videos/3.mp4"
+        src="@/assets/videos/1.mp4"
       ></video>
     </div>
   </div>

BIN
src/assets/videos/1.mp4


BIN
src/assets/videos/2.mp4


BIN
src/assets/videos/3.mp4


+ 113 - 80
src/components/map/scenicData.ts

@@ -25,6 +25,7 @@ export const scenicData = [
     rtspaddr: "rtsp://admin:hik12345@6.205.68.69:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
@@ -48,6 +49,7 @@ export const scenicData = [
     rtspaddr: "rtsp://admin:hik12345@6.205.68.74:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
@@ -71,6 +73,7 @@ export const scenicData = [
     rtspaddr: "rtsp://admin:hik12345@6.205.68.79:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
@@ -94,12 +97,13 @@ export const scenicData = [
     rtspaddr: "rtsp://admin:hik12345@6.205.68.114:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
     <div class="scenic"">
       <div class="scenic_text">
-      三爪仑观音岩
+      东周古墓陈列馆
          <div class="icon"></div>
       </div>
       <div class="scenic_icon">
@@ -107,22 +111,23 @@ export const scenicData = [
       </div>
     </div>
     `,
-    lng: 115.272035,
-    lat: 29.040316,
+    lng: 115.27436,
+    lat: 28.891129,
     ele: ".marker",
-    title: "三爪仑观音岩",
-    left: 16,
-    right: -39,
-    iframeUrl: `${baseUrl}/hik/cn/ch35_two.html`,
-    rtspaddr: "rtsp://admin:hik12345@6.205.68.34:554/Streaming/Channels/102",
+    title: "东周古墓陈列馆",
+    left: -6,
+    right: -29,
+    iframeUrl: `${baseUrl}/hik/cn/ch105_two.html`,
+    rtspaddr: "rtsp://admin:hik12345@6.205.68.104:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
     <div class="scenic"">
       <div class="scenic_text">
-      三爪仑白水洞
+      九岭森林温泉
          <div class="icon"></div>
       </div>
       <div class="scenic_icon">
@@ -130,22 +135,23 @@ export const scenicData = [
       </div>
     </div>
     `,
-    lng: 115.192029,
-    lat: 29.025974,
+    lng: 115.374803,
+    lat: 28.850597,
     ele: ".marker",
-    title: "三爪仑白水洞",
-    left: -30,
-    right: -40,
-    iframeUrl: `${baseUrl}/hik/cn/ch45_two.html`,
-    rtspaddr: "rtsp://admin:hik12345@6.205.68.44:554/Streaming/Channels/102",
+    title: "九岭森林温泉",
+    left: 30,
+    right: -45,
+    iframeUrl: `${baseUrl}/hik/cn/ch85_two.html`,
+    rtspaddr: "rtsp://admin:hik12345@6.205.68.84:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
     <div class="scenic"">
       <div class="scenic_text">
-      三爪仑红星游乐园
+      东白源生态谷
          <div class="icon"></div>
       </div>
       <div class="scenic_icon">
@@ -153,22 +159,23 @@ export const scenicData = [
       </div>
     </div>
     `,
-    lng: 115.250158,
-    lat: 29.053109,
+    lng: 115.326942,
+    lat: 28.881085,
     ele: ".marker",
-    title: "三爪仑红星游乐园",
-    left: -22,
-    right: -12,
-    iframeUrl: `${baseUrl}/hik/cn/ch50_two.html`,
-    rtspaddr: "rtsp://admin:hik12345@6.205.68.49:554/Streaming/Channels/102",
+    title: "东白源生态谷",
+    left: 26,
+    right: -29,
+    iframeUrl: `${baseUrl}/hik/cn/ch90_two.html`,
+    rtspaddr: "rtsp://admin:hik12345@6.205.68.89:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
     <div class="scenic"">
       <div class="scenic_text">
-      三爪仑高空玻璃漂流
+      西门外历史文化街区
          <div class="icon"></div>
       </div>
       <div class="scenic_icon">
@@ -176,22 +183,23 @@ export const scenicData = [
       </div>
     </div>
     `,
-    lng: 115.220428,
-    lat: 29.040428,
+    lng: 115.354324,
+    lat: 28.864142,
     ele: ".marker",
-    title: "三爪仑高空玻璃漂流",
-    left: -20,
-    right: -55,
-    iframeUrl: `${baseUrl}/hik/cn/ch55_two.html`,
-    rtspaddr: "rtsp://admin:hik12345@6.205.68.54:554/Streaming/Channels/102",
+    title: "西门外历史文化街区",
+    left: -32,
+    right: -20,
+    iframeUrl: `${baseUrl}/hik/cn/ch95_two.html`,
+    rtspaddr: "rtsp://admin:hik12345@6.205.68.94:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
     <div class="scenic"">
       <div class="scenic_text">
-      恒茂御泉谷
+      况钟纪念馆
          <div class="icon"></div>
       </div>
       <div class="scenic_icon">
@@ -199,22 +207,23 @@ export const scenicData = [
       </div>
     </div>
     `,
-    lng: 115.184038,
-    lat: 28.944351,
+    lng: 115.352865,
+    lat: 28.846932,
     ele: ".marker",
-    title: "恒茂御泉谷",
-    left: 6,
-    right: -49,
-    iframeUrl: `${baseUrl}/hik/cn/ch10_two.html`,
-    rtspaddr: "rtsp://admin:hik12345@6.205.68.9:554/Streaming/Channels/102",
+    title: "况钟纪念馆",
+    left: -16,
+    right: 9,
+    iframeUrl: `${baseUrl}/hik/cn/ch100_two.html`,
+    rtspaddr: "rtsp://admin:hik12345@6.205.68.99:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
     <div class="scenic"">
       <div class="scenic_text">
-      九岭森林温泉
+      恒茂御泉谷
          <div class="icon"></div>
       </div>
       <div class="scenic_icon">
@@ -222,22 +231,23 @@ export const scenicData = [
       </div>
     </div>
     `,
-    lng: 115.374803,
-    lat: 28.850597,
+    lng: 115.184038,
+    lat: 28.944351,
     ele: ".marker",
-    title: "九岭森林温泉",
-    left: 30,
-    right: -45,
-    iframeUrl: `${baseUrl}/hik/cn/ch85_two.html`,
-    rtspaddr: "rtsp://admin:hik12345@6.205.68.84:554/Streaming/Channels/102",
+    title: "恒茂御泉谷",
+    left: 6,
+    right: -49,
+    iframeUrl: `${baseUrl}/hik/cn/ch10_two.html`,
+    rtspaddr: "rtsp://admin:hik12345@6.205.68.9:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
     <div class="scenic"">
       <div class="scenic_text">
-      东白源生态谷
+      三爪仑观音岩
          <div class="icon"></div>
       </div>
       <div class="scenic_icon">
@@ -245,22 +255,23 @@ export const scenicData = [
       </div>
     </div>
     `,
-    lng: 115.326942,
-    lat: 28.881085,
+    lng: 115.272035,
+    lat: 29.040316,
     ele: ".marker",
-    title: "东白源生态谷",
-    left: 26,
-    right: -29,
-    iframeUrl: `${baseUrl}/hik/cn/ch90_two.html`,
-    rtspaddr: "rtsp://admin:hik12345@6.205.68.89:554/Streaming/Channels/102",
+    title: "三爪仑观音岩",
+    left: 16,
+    right: -39,
+    iframeUrl: `${baseUrl}/hik/cn/ch35_two.html`,
+    rtspaddr: "rtsp://admin:hik12345@6.205.68.34:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
     <div class="scenic"">
       <div class="scenic_text">
-      西门外历史文化街区
+      三爪仑白水洞
          <div class="icon"></div>
       </div>
       <div class="scenic_icon">
@@ -268,22 +279,23 @@ export const scenicData = [
       </div>
     </div>
     `,
-    lng: 115.354324,
-    lat: 28.864142,
+    lng: 115.192029,
+    lat: 29.025974,
     ele: ".marker",
-    title: "西门外历史文化街区",
-    left: -32,
-    right: -20,
-    iframeUrl: `${baseUrl}/hik/cn/ch95_two.html`,
-    rtspaddr: "rtsp://admin:hik12345@6.205.68.94:554/Streaming/Channels/102",
+    title: "三爪仑白水洞",
+    left: -30,
+    right: -40,
+    iframeUrl: `${baseUrl}/hik/cn/ch45_two.html`,
+    rtspaddr: "rtsp://admin:hik12345@6.205.68.44:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
     <div class="scenic"">
       <div class="scenic_text">
-      况钟纪念馆
+      三爪仑红星游乐园
          <div class="icon"></div>
       </div>
       <div class="scenic_icon">
@@ -291,22 +303,23 @@ export const scenicData = [
       </div>
     </div>
     `,
-    lng: 115.352865,
-    lat: 28.846932,
+    lng: 115.250158,
+    lat: 29.053109,
     ele: ".marker",
-    title: "况钟纪念馆",
-    left: -16,
-    right: 9,
-    iframeUrl: `${baseUrl}/hik/cn/ch100_two.html`,
-    rtspaddr: "rtsp://admin:hik12345@6.205.68.99:554/Streaming/Channels/102",
+    title: "三爪仑红星游乐园",
+    left: -22,
+    right: -12,
+    iframeUrl: `${baseUrl}/hik/cn/ch50_two.html`,
+    rtspaddr: "rtsp://admin:hik12345@6.205.68.49:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
     <div class="scenic"">
       <div class="scenic_text">
-      东周古墓陈列馆
+      三爪仑高空玻璃漂流
          <div class="icon"></div>
       </div>
       <div class="scenic_icon">
@@ -314,16 +327,17 @@ export const scenicData = [
       </div>
     </div>
     `,
-    lng: 115.27436,
-    lat: 28.891129,
+    lng: 115.220428,
+    lat: 29.040428,
     ele: ".marker",
-    title: "东周古墓陈列馆",
-    left: -6,
-    right: -29,
-    iframeUrl: `${baseUrl}/hik/cn/ch105_two.html`,
-    rtspaddr: "rtsp://admin:hik12345@6.205.68.104:554/Streaming/Channels/102",
+    title: "三爪仑高空玻璃漂流",
+    left: -20,
+    right: -55,
+    iframeUrl: `${baseUrl}/hik/cn/ch55_two.html`,
+    rtspaddr: "rtsp://admin:hik12345@6.205.68.54:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
@@ -347,6 +361,7 @@ export const scenicData = [
     rtspaddr: "rtsp://admin:hik12345@6.205.67.239:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
@@ -370,6 +385,7 @@ export const scenicData = [
     rtspaddr: "rtsp://admin:hik12345@6.205.68.144:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
@@ -393,6 +409,7 @@ export const scenicData = [
     rtspaddr: "rtsp://admin:hik12345@6.205.68.59:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
@@ -416,6 +433,7 @@ export const scenicData = [
     rtspaddr: "rtsp://admin:hik12345@6.205.68.64:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
@@ -439,6 +457,7 @@ export const scenicData = [
     rtspaddr: "rtsp://admin:hik12345@6.205.68.109:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
@@ -462,6 +481,7 @@ export const scenicData = [
     rtspaddr: "rtsp://admin:hik12345@6.205.68.119:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
@@ -485,6 +505,7 @@ export const scenicData = [
     rtspaddr: "rtsp://admin:hik12345@6.205.68.124:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
@@ -508,6 +529,7 @@ export const scenicData = [
     rtspaddr: "rtsp://admin:hik12345@6.205.68.14:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
@@ -531,6 +553,7 @@ export const scenicData = [
     rtspaddr: "rtsp://admin:hik12345@6.205.68.19:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
@@ -554,6 +577,7 @@ export const scenicData = [
     rtspaddr: "rtsp://admin:hik12345@6.205.68.159:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
@@ -577,6 +601,7 @@ export const scenicData = [
     rtspaddr: "rtsp://admin:hik12345@6.205.68.24:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
@@ -600,6 +625,7 @@ export const scenicData = [
     rtspaddr: "rtsp://admin:hik12345@6.205.68.184:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
@@ -623,6 +649,7 @@ export const scenicData = [
     rtspaddr: "rtsp://admin:hik12345@6.205.68.149:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
@@ -646,6 +673,7 @@ export const scenicData = [
     rtspaddr: "rtsp://admin:hik12345@6.205.68.129:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
@@ -669,6 +697,7 @@ export const scenicData = [
     rtspaddr: "rtsp://admin:hik12345@6.205.67.244:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
@@ -693,6 +722,7 @@ export const scenicData = [
     VRurl: "https://www.720yun.com/t/cavkieih02e?scene_id=33545192",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
@@ -716,6 +746,7 @@ export const scenicData = [
     rtspaddr: "rtsp://admin:hik12345@6.205.67.229:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
@@ -739,6 +770,7 @@ export const scenicData = [
     rtspaddr: "rtsp://admin:hik12345@6.205.67.234:554/Streaming/Channels/102",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     markerContent: `
@@ -763,6 +795,7 @@ export const scenicData = [
     VRurl: "https://www.720yun.com/t/67djz5hn5n5?scene_id=8195316",
     isShow: false,
     timer: null,
+    player: null,
   },
   // {
   //   title: "璪都红绿灯路口",

+ 2 - 2
src/views/analyse/center/scenicDetailTrend.vue

@@ -152,7 +152,7 @@ const initLineChart = () => {
             ],
           },
         },
-        data: todayData.value.slice(0, 8),
+        data: todayData.value.slice(0, 8).reverse(),
       },
       {
         name: "昨日",
@@ -186,7 +186,7 @@ const initLineChart = () => {
             ],
           },
         },
-        data: yesterdayData.value.slice(0, 8),
+        data: yesterdayData.value.slice(0, 8).reverse(),
       },
     ],
   };

+ 15 - 15
src/views/safe/center/watchDetailDialog.vue

@@ -29,7 +29,7 @@
           <div class="noSignal">无信号</div>
 
           <!-- 监控展示区域 -->
-          <div class="iframe" id="videoDom5" v-show="isShow"></div>
+          <div class="iframe" id="videoDom5"></div>
         </div>
       </div>
 
@@ -164,21 +164,21 @@ const getVideosData = async (url: string) => {
     res = await getVedio(Obj?.rtspaddr as string);
   }
 
-  player.value = new WasmPlayer(null, "videoDom5", (a: any) => {
+  player.value = new WasmPlayer(null, "videoDom5", (_a: any) => {
     // a表示当前播放的状态
-    if (a === "videoTimestamp") {
-      isShow.value = true;
-    } else {
-      // 开启一个延时10秒的延时器
-      if (!timer.value) {
-        timer.value = setTimeout(() => {
-          //  如果isShow为false表示播放失败,此时断开连接节约性能
-          if (!isShow.value) {
-            player.value.destroy();
-          }
-        }, 10000);
-      }
-    }
+    // if (a === "videoTimestamp") {
+    //   isShow.value = true;
+    // } else {
+    //   // 开启一个延时10秒的延时器
+    //   if (!timer.value) {
+    //     timer.value = setTimeout(() => {
+    //       //  如果isShow为false表示播放失败,此时断开连接节约性能
+    //       if (!isShow.value) {
+    //         player.value.destroy();
+    //       }
+    //     }, 10000);
+    //   }
+    // }
   });
 
   player.value.play(res, 1);

+ 53 - 28
src/views/safe/left/leftSafe.vue

@@ -42,11 +42,7 @@
             :key="index"
           >
             <div class="box_mask">无信号</div>
-            <div
-              v-show="item.isShow"
-              class="box_video"
-              :id="index + 'leftWatch'"
-            ></div>
+            <div class="box_video" :id="index + 'leftWatch'"></div>
             <div class="box_name">{{ item.title }}</div>
           </div>
         </div>
@@ -107,33 +103,62 @@ onUnmounted(() => {
 });
 
 // 获取监控视频地址
-const getVideosData = () => {
+const getVideosData = async () => {
   videoList.value = scenicData.slice(0, 9);
 
-  videoList.value.forEach(async (ele: any, index: number) => {
-    const res = await getVedio(ele.rtspaddr);
+  // videoList.value.forEach(async (ele: any, index: number) => {
+  //   const res = await getVedio(ele.rtspaddr);
+  //   // console.log(res);
+  //   let player = new WasmPlayer(null, index + "leftWatch", (a: any) => {
+  //     // a表示当前播放的状态
+  //     if (a === "videoTimestamp") {
+  //       ele.isShow = true;
+  //     } else {
+  //       // 开启一个延时60秒的延时器
+  //       if (!ele.timer) {
+  //         (ele.timer as any) = setTimeout(() => {
+  //           //  如果isShow为false表示播放失败,此时断开连接节约性能
+  //           if (!ele.isShow) {
+  //             player.destroy();
+  //           }
+  //           // 收集延时器实例方便后面销毁
+  //           timerList.value.push(ele.timer);
+  //         }, 60000);
+  //       }
+  //     }
+  //   });
+  //   player.play(res, 1);
+  //   playerList.value.push(player);
+  // });
+
+  for (let index = 0; index < videoList.value.length; index++) {
+    const res = await getVedio(videoList.value[index].rtspaddr);
     // console.log(res);
-    let player = new WasmPlayer(null, index + "leftWatch", (a: any) => {
-      // a表示当前播放的状态
-      if (a === "videoTimestamp") {
-        ele.isShow = true;
-      } else {
-        // 开启一个延时20秒的延时器
-        if (!ele.timer) {
-          (ele.timer as any) = setTimeout(() => {
-            //  如果isShow为false表示播放失败,此时断开连接节约性能
-            if (!ele.isShow) {
-              player.destroy();
-            }
-            // 收集延时器实例方便后面销毁
-            timerList.value.push(ele.timer);
-          }, 20000);
-        }
+    videoList.value[index].player = new WasmPlayer(
+      null,
+      index + "leftWatch",
+      (_a: any) => {
+        // a表示当前播放的状态
+        // if (a === "videoTimestamp") {
+        //   videoList.value[index].isShow = true;
+        // } else {
+        //   // 开启一个延时60秒的延时器
+        //   if (!videoList.value[index].timer) {
+        //     (videoList.value[index].timer as any) = setTimeout(() => {
+        //       //  如果isShow为false表示播放失败,此时断开连接节约性能
+        //       if (!videoList.value[index].isShow) {
+        //         videoList.value[index].player.destroy();
+        //       }
+        //       // 收集延时器实例方便后面销毁
+        //       timerList.value.push(videoList.value[index].timer);
+        //     }, 60000);
+        //   }
+        // }
       }
-    });
-    player.play(res, 1);
-    playerList.value.push(player);
-  });
+    );
+    videoList.value[index].player.play(res, 1);
+    playerList.value.push(videoList.value[index].player);
+  }
 };
 
 // 点击每一个景区时的回调

+ 63 - 29
src/views/safe/right/rightSafe.vue

@@ -12,7 +12,7 @@
       <!-- 每一个监控区域 -->
       <div class="video_item" v-for="(item, index) in videoList" :key="index">
         <div class="item_noSignal">无信号</div>
-        <div class="item_box" :id="item.id" v-show="item.isShow"></div>
+        <div class="item_box" :id="item.id"></div>
         <div class="item_mask">{{ item.name }}</div>
       </div>
     </div>
@@ -284,23 +284,26 @@ const videoList = ref<any>([
   {
     id: "4",
     name: "宝峰小湾森林防火",
-    rtspaddr: "rtsp://admin:hik12345@6.205.67.206:554/Streaming/Channels/102",
+    rtspaddr: "rtsp://admin:hik12345@6.205.67.206:554/Streaming/Channels/101",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     id: "5",
     name: "三爪仑虎啸峡森林防火",
-    rtspaddr: "rtsp://admin:hik12345@6.205.67.207:554/Streaming/Channels/102",
+    rtspaddr: "rtsp://admin:hik12345@6.205.67.207:554/Streaming/Channels/101",
     isShow: false,
     timer: null,
+    player: null,
   },
   {
     id: "6",
     name: "中源景区防火",
-    rtspaddr: "rtsp://admin:hik12345@6.205.67.208:554/Streaming/Channels/102",
+    rtspaddr: "rtsp://admin:hik12345@6.205.67.208:554/Streaming/Channels/101",
     isShow: false,
     timer: null,
+    player: null,
   },
 ]);
 
@@ -413,32 +416,63 @@ onUnmounted(() => {
 });
 
 // 获取监控视频地址
-const getVideosData = () => {
-  videoList.value.forEach(async (ele: any) => {
-    const res = await getVedio(ele.rtspaddr);
-
-    let player = new WasmPlayer(null, ele.id, (a: any) => {
-      // a表示当前播放的状态
-      if (a === "videoTimestamp") {
-        ele.isShow = true;
-      } else {
-        // 开启一个延时20秒的延时器
-        if (!ele.timer) {
-          ele.timer = setTimeout(() => {
-            //  如果isShow为false表示播放失败,此时断开连接节约性能
-            if (!ele.isShow) {
-              player.destroy();
-            }
-            // 收集延时器实例方便后面销毁
-            timerList.value.push(ele.timer);
-          }, 20000);
-        }
+const getVideosData = async () => {
+  // videoList.value.forEach(async (ele: any) => {
+  //   const res = await getVedio(ele.rtspaddr);
+  //   // console.log(res);
+
+  //   let player = new WasmPlayer(null, ele.id, (a: any) => {
+  //     // a表示当前播放的状态
+  //     if (a === "videoTimestamp") {
+  //       ele.isShow = true;
+  //     } else {
+  //       // 开启一个延时60秒的延时器
+  //       if (!ele.timer) {
+  //         ele.timer = setTimeout(() => {
+  //           //  如果isShow为false表示播放失败,此时断开连接节约性能
+  //           if (!ele.isShow) {
+  //             player.destroy();
+  //           }
+  //           // 收集延时器实例方便后面销毁
+  //           timerList.value.push(ele.timer);
+  //         }, 60000);
+  //       }
+  //     }
+  //   });
+
+  //   player.play(res, 1);
+  //   playerList.value.push(player);
+  // });
+
+  for (let index = 0; index < videoList.value.length; index++) {
+    const res = await getVedio(videoList.value[index].rtspaddr);
+    // console.log(res);
+    videoList.value[index].player = new WasmPlayer(
+      null,
+      videoList.value[index].id,
+      (_a: any) => {
+        // console.log(a);
+        // a表示当前播放的状态
+        // if (a === "videoTimestamp") {
+        //   videoList.value[index].isShow = true;
+        // } else {
+        //   // 开启一个延时60秒的延时器
+        //   if (!videoList.value[index].timer) {
+        //     (videoList.value[index].timer as any) = setTimeout(() => {
+        //       //  如果isShow为false表示播放失败,此时断开连接节约性能
+        //       if (!videoList.value[index].isShow) {
+        //         videoList.value[index].player.destroy();
+        //       }
+        //       // 收集延时器实例方便后面销毁
+        //       timerList.value.push(videoList.value[index].timer);
+        //     }, 60000);
+        //   }
+        // }
       }
-    });
-
-    player.play(res, 1);
-    playerList.value.push(player);
-  });
+    );
+    videoList.value[index].player.play(res, 1);
+    playerList.value.push(videoList.value[index].player);
+  }
 };
 
 // 获取当前防火等级