中航锐创 实训平台 综合演练添加 cctv页面

src/router/index.js

@@ -17,7 +17,6 @@ const Jlmap3dLesson3dEdit = () => import('@/views/jlmap3d/lesson3dedit/lesson3de
 const Jlmap3dLesson3dPlayer = () => import('@/views/jlmap3d/lesson3dplayer/lesson3dplayer');
 const Jlmap3dLesson3dSelect = () => import('@/views/jlmap3d/lesson3dplayer/lesson3dselect');
 
-
 const Jlmap3d = () => import('@/views/jlmap3d/drive/jl3ddrive');
 const Jlmap3dSandbox = () => import('@/views/jlmap3d/simulation/jl3dsimulation');
 const Jlmap3dPassFlow = () => import('@/views/jlmap3d/passflow/jl3dpassflow');
@@ -43,6 +42,7 @@ const PracticeDisplay = () => import('@/views/newMap/displayNew/practiceDisplay'
 const BigLPFStrategy = () => import('@/views/newMap/displayNew/bigLPFStrategy');
 
 const JointTrainingNew = () => import('@/views/newMap/jointTrainingNew/index');
+const jointTrainingNewCCTV = () => import('@/views/newMap/jointTrainingNew/realCCTV');
 
 const Errpr404 = () => import('@/views/error-page/404');
 
@@ -354,7 +354,7 @@ export const constantRoutes = [
         component: Jl3dRailwayDrive,
         hidden: true
     },
-    
+
     {
         path: '/jlmap3d/devicemodel',
         component: Jlmap3dModel,
@@ -451,6 +451,11 @@ export const publicAsyncRoute = [
         component: JointTrainingNew,
         hidden: true
     },
+    {
+        path: '/jointTrainingNewCCTV',
+        component: jointTrainingNewCCTV,
+        hidden: true
+    },
     {
         path: '/jlmap3d',
         component: Jlmap3d,

src/views/newMap/jointTrainingNew/menuDemon.vue

@@ -409,7 +409,21 @@ export default {
             this.$emit('hidejl3dcctv');
         },
         jumpjl3dpassflow() {
-            this.$emit('passflow');
+            if (this.project == 'richorjoint') {
+                const routeData = this.$router.resolve({
+                    path:'/jointTrainingNewCCTV',
+                    query:{
+                        mapid:this.mapId,
+                        group:this.group,
+                        project: this.project,
+                        noPreLogout: true,
+                        lineCode:this.lineCode
+                    }
+                });
+                window.open(routeData.href, '_blank');
+            } else {
+                this.$emit('passflow');
+            }
         },
         jumpjl3dtrafficplan() {
             const routeData = this.$router.resolve({

src/views/newMap/jointTrainingNew/realCCTV.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="jl3dpassflow">
+    <div id="jlReal3d" class="jlReal3d">
+      <div class="realCctv1">
+        <video id="myvideo0" class="video-js">
+          <source src="http://160.20.60.15/hls/cctv1.m3u8" type="application/x-mpegURL">
+        </video>
+      </div>
+      <div class="realCctv2">
+        <video id="myvideo1" class="video-js">
+          <source src="http://160.20.60.15/hls/cctv2.m3u8" type="application/x-mpegURL">
+        </video>
+      </div>
+    </div>
+    <div class="menudown">
+      <el-button-group>
+        <el-button type="primary" @click="back">退出</el-button>
+      </el-button-group>
+    </div>
+  </div>
+</template>
+<script>
+import Video from 'video.js';
+import 'video.js/dist/video-js.css';
+export default {
+    name:'RealCCTV',
+    data() {
+        return {
+            videoList:[]
+        };
+    },
+    mounted() {
+        for (var i = 0; i < 2; i++) {
+            const videoPlay = new Video('myvideo' + i, {
+                controls: false,
+                autoplay: 'muted',
+                loop:true,
+                preload: 'auto',
+                width: window.innerWidth / 2 + 'px',
+                height: window.innerHeight + 'px',
+                hls: {
+                    withCredentials: true
+                }
+            }, function () { console.log('videojs播放器初始化成功'); });
+            this.videoList.push(videoPlay);
+        }
+    },
+    methods:{
+        back() {
+            window.close();
+        }
+    }
+};
+</script>
+<style>
+.jl3dpassflow{
+    width: 100%;
+    height: 100%;
+}
+.jlReal3d{
+	width: 100%;
+    height: 100%;
+	z-index: 0;
+    font-size:0;
+}
+.realCctv1{
+    position: absolute;
+    width:50%;
+    height:50%;
+    left:0;
+    top:0;
+}
+.realCctv2{
+    position: absolute;
+    width:50%;
+    height:50%;
+    left:50%;
+    top:0;
+}
+  .menudown{
+    bottom:0;
+    right:0;
+    position:absolute;
+    z-index: 2;
+}
+.video-js video{
+    outline: none !important;
+}
+</style>
+