边坡雷达系统内嵌

package.json

@@ -25,6 +25,7 @@
     "element-ui": "^2.13.2",
     "file-saver": "1.3.8",
     "fuse.js": "3.4.4",
+    "hls.js": "^1.5.15",
     "js-beautify": "^1.10.2",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",

src/router/routers.js

@@ -51,19 +51,34 @@ export const constantRouterMap = [
 		]
 
     },
+    // {
+    //     path: '/video',
+    //     component: HomeLayout,
+    //     redirect: "noredirect",
+	// 	children: [
+	// 		{
+	// 			path: "index",
+    //             component: (resolve) => require(['@/views/video/index'], resolve),
+	// 			name: "视频监控",
+    //             meta: { title: '视频监控', icon: 'index', affix: true, noCache: true }
+	// 		}
+	// 	]
+    // },
+
     {
-        path: '/video',
+        path: '/leida',
         component: HomeLayout,
         redirect: "noredirect",
 		children: [
 			{
 				path: "index",
-                component: (resolve) => require(['@/views/video/index'], resolve),
-				name: "视频监控",
-                meta: { title: '视频监控', icon: 'index', affix: true, noCache: true }
+                component: (resolve) => require(['@/views/leida/index'], resolve),
+				name: "边坡雷达",
+                meta: { title: '边坡雷达', icon: 'index', noCache: true }
 			}
 		]
     },
+
     {
 		path: "/user",
 		//component: Layout,

src/views/leida/index.vue

+<template>
+	<div class="" style="background-color: #fff;">
+		<div class="m-view">
+			<!-- 视频监控 -->
+            <div class="page-wrapper1">
+                <!-- height="780px" -->
+                <iframe ref="myIframe" src="https://gbsar.mypattern.cn/#/skip?clientId=9237a398-f0cb-4e1c-bdaa-3be398f8e805&secretId=f1e97bb3-9a30-48c9-b705-2c5e59dd3bae" frameborder="0" width="100%"  allowfullscreen></iframe>
+            </div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { Tools} from '@/assets/js/common.js';
+import { reqApi, Config} from '@/assets/js/httpApi.js';
+export default {
+	name: 'videoMonitor',
+	data() {
+		return {
+            dialogVisible: false,
+		}
+	},
+	mounted() {
+		// var that = this;
+		// this.$nextTick(() => {
+		// 	this.pageApi = Config.getModuleInfo(this);
+		// })
+        this.setIframeHeight(); // 组件挂载后设置高度
+        window.addEventListener('resize', this.setIframeHeight); // 监听窗口尺寸变化
+	},
+	methods: {
+        setIframeHeight() {
+            const iframe = this.$refs.myIframe;
+            const viewportHeight = window.innerHeight -145; // 获取视口高度
+            iframe.style.height = `${viewportHeight}px`; // 设置iframe高度
+        },
+        openDialog(url) {
+            this.currentVideoUrl = url;
+            this.dialogVisible = true;
+        },
+		loadData() {
+		},
+	}
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scope>
+    .page-wrapper1{
+        width: 100%;
+        height: 100%;
+        // background:no-repeat center center url('~@/assets/images/layout/main_bg.png');
+        // background-size:100% 100%;
+    }
+
+
+	// .home_manage{
+	// 	position:relative;height:100%;width:100%;flex:1;display:flex;justify-content:center;
+	// 	//background:no-repeat bottom center url('~@/assets/images/layout/main_bg.png');background-size:100% 100%;
+		
+	// 	.m-view{
+	// 		position:relative;width:100%;
+	// 	}
+
+	// 	.b_0{
+	// 		border:1px solid #143D96;
+	// 		position:absolute;top:.20rem;left:.10rem;width:max-content;padding:.10rem;user-select:none;
+	// 		// background-color:rgba(0,16,52, .7);border-radius:.12rem;line-height:26px;
+	// 		li{
+	// 			span:first-child{color:#ccc;}
+	// 			span{color:#fff;}
+	// 		}
+	// 	}
+	// }
+	
+</style>

src/views/video/VideoPlayer.vue

+<!-- <template>
+    <div class="video-container">
+      <video ref="video" controls autoplay></video>
+    </div>
+  </template>
+  
+  <script>
+  import Hls from 'hls.js';
+  
+  export default {
+    props: {
+      videoUrl: {
+        type: String,
+        required: true,
+      },
+    },
+    mounted() {
+      const video = this.$refs.video;
+  
+      if (Hls.isSupport()) {
+        const hls = new Hls();
+  
+        hls.loadSource(this.videoUrl);
+        hls.attachMedia(video);
+        hls.on(Hls.Events.MANIFEST_PARSED, () => {
+          video.play();
+        });
+      } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        video.src = this.videoUrl;
+        video.addEventListener('loadedmetadata', () => {
+          video.play();
+        });
+      }
+    },
+  };
+  </script>
+  
+  <style scoped>
+  .video-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  video {
+    width: 100%;
+    max-width: 800px;
+  }
+  </style> -->
\ No newline at end of file