|
@@ -1,56 +1,56 @@
|
|
|
<template>
|
|
|
- <v-scale-screen width="2200" height="1080">
|
|
|
- <div class="task_screen_cotainer">
|
|
|
- <div class="task_header">训练态势监控大屏</div>
|
|
|
- <div class="exit_box_hanlde">
|
|
|
- <el-image
|
|
|
- @click="showFull"
|
|
|
- style="width: 20px; height: 20px; margin-right:6px; margin-top: -10px;"
|
|
|
- :src="require('../assets/img/small.svg')"
|
|
|
- fit="contain"
|
|
|
- class="moreBtn_style"
|
|
|
- >
|
|
|
- </el-image>
|
|
|
- </div>
|
|
|
- <div class="monitor_video_box">
|
|
|
- <div class="full_video_box">
|
|
|
- <div class="video_title_new">监控名称</div>
|
|
|
- <!-- <video id="videoPlayerTask" class="video-js" muted></video> -->
|
|
|
- <MonitorHK :companyVideoData="videoData" v-if="isShow"/>
|
|
|
- </div>
|
|
|
- <div class="full_video_list">
|
|
|
- <!-- <div>
|
|
|
- <div class="video_title_new_child">
|
|
|
- <div>监控名称</div>
|
|
|
- <div class="play_to_full">大屏播放</div>
|
|
|
- </div>
|
|
|
- <video id="videoPlayer_first" class="video-js" muted></video>
|
|
|
- </div> -->
|
|
|
- <!-- <div>
|
|
|
- <div class="video_title_new_child">
|
|
|
- <div>监控名称</div>
|
|
|
- <div class="play_to_full">大屏播放</div>
|
|
|
- </div>
|
|
|
- <video id="videoPlayer_second" class="video-js" muted></video>
|
|
|
- </div> -->
|
|
|
- <!-- <div>
|
|
|
- <div class="video_title_new_child">
|
|
|
- <div>监控名称</div>
|
|
|
- <div class="play_to_full">大屏播放</div>
|
|
|
- </div>
|
|
|
- <video id="videoPlayer_third" class="video-js" muted></video>
|
|
|
- </div> -->
|
|
|
- <!-- <div>
|
|
|
- <div class="video_title_new_child">
|
|
|
- <div>监控名称</div>
|
|
|
- <div class="play_to_full">大屏播放</div>
|
|
|
- </div>
|
|
|
- <video id="videoPlayer_fourth" class="video-js" muted></video>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <v-scale-screen width="2200" height="1080">
|
|
|
+ <div class="task_screen_cotainer">
|
|
|
+ <div class="task_header">训练态势监控大屏</div>
|
|
|
+ <div class="exit_box_hanlde">
|
|
|
+ <el-image
|
|
|
+ @click="showFull"
|
|
|
+ style="width: 20px; height: 20px; margin-right:6px; margin-top: -10px;"
|
|
|
+ :src="require('../assets/img/small.svg')"
|
|
|
+ fit="contain"
|
|
|
+ class="moreBtn_style"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ </div>
|
|
|
+ <div class="monitor_video_box">
|
|
|
+ <div class="full_video_box">
|
|
|
+ <div class="video_title_new">监控名称</div>
|
|
|
+ <!-- <video id="videoPlayerTask" class="video-js" muted></video> -->
|
|
|
+ <MonitorHK :companyVideoData="videoData" v-if="isShow"/>
|
|
|
</div>
|
|
|
- </v-scale-screen>
|
|
|
+ <div class="full_video_list">
|
|
|
+ <!-- <div>
|
|
|
+ <div class="video_title_new_child">
|
|
|
+ <div>监控名称</div>
|
|
|
+ <div class="play_to_full">大屏播放</div>
|
|
|
+ </div>
|
|
|
+ <video id="videoPlayer_first" class="video-js" muted></video>
|
|
|
+ </div> -->
|
|
|
+ <!-- <div>
|
|
|
+ <div class="video_title_new_child">
|
|
|
+ <div>监控名称</div>
|
|
|
+ <div class="play_to_full">大屏播放</div>
|
|
|
+ </div>
|
|
|
+ <video id="videoPlayer_second" class="video-js" muted></video>
|
|
|
+ </div> -->
|
|
|
+ <!-- <div>
|
|
|
+ <div class="video_title_new_child">
|
|
|
+ <div>监控名称</div>
|
|
|
+ <div class="play_to_full">大屏播放</div>
|
|
|
+ </div>
|
|
|
+ <video id="videoPlayer_third" class="video-js" muted></video>
|
|
|
+ </div> -->
|
|
|
+ <!-- <div>
|
|
|
+ <div class="video_title_new_child">
|
|
|
+ <div>监控名称</div>
|
|
|
+ <div class="play_to_full">大屏播放</div>
|
|
|
+ </div>
|
|
|
+ <video id="videoPlayer_fourth" class="video-js" muted></video>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </v-scale-screen>
|
|
|
</template>
|
|
|
<script>
|
|
|
import * as echarts from 'echarts';
|
|
@@ -60,161 +60,161 @@ import sacleBox from '../components/sacle-box/index'
|
|
|
import { request } from '../utils/request';
|
|
|
var uploadedDataURL = require('../../public/json/taiyuan.json')
|
|
|
import './taskScreen.css'
|
|
|
-import Videojs from "video.js"; // 引入Videojs
|
|
|
+import Videojs from "video.js"; // 引入Videojs
|
|
|
|
|
|
import MonitorHK from '../components/hk/monitorHK.vue';
|
|
|
export default {
|
|
|
- name: 'monitorScreen',
|
|
|
- components:{
|
|
|
- myFlylineChartEnhanced,
|
|
|
- sacleBox,
|
|
|
- myscrollBoard,
|
|
|
-
|
|
|
- MonitorHK
|
|
|
- },
|
|
|
- props: {
|
|
|
+ name: 'monitorScreen',
|
|
|
+ components:{
|
|
|
+ myFlylineChartEnhanced,
|
|
|
+ sacleBox,
|
|
|
+ myscrollBoard,
|
|
|
+
|
|
|
+ MonitorHK
|
|
|
+ },
|
|
|
+ props: {
|
|
|
videoData: {
|
|
|
type: Array
|
|
|
},
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
-
|
|
|
- dataSrc:'https://cctvwbndbd.a.bdydns.com/cctvwbnd/cctv1_2/index.m3u8?BR=single',
|
|
|
- playerList:[],
|
|
|
- isShow: false
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- methods:{
|
|
|
-
|
|
|
- showFull(){
|
|
|
- this.$router.push('/taskScreen')
|
|
|
- },
|
|
|
-
|
|
|
- // 初始化视频
|
|
|
- initVideo(nowPlayVideoUrl,id,isAuto) {
|
|
|
- let that =this
|
|
|
- // 这些options属性也可直接设置在video标签上,见 muted
|
|
|
- let options = {
|
|
|
- autoplay: isAuto, // 设置自动播放
|
|
|
- controls: true, // 显示播放的控件
|
|
|
- sources: [
|
|
|
- // 注意,如果是以option方式设置的src,是不能实现 换台的 (即使监听了nowPlayVideoUrl也没实现)
|
|
|
- {
|
|
|
- src: nowPlayVideoUrl,
|
|
|
- type: "application/x-mpegURL" // 告诉videojs,这是一个hls流
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- // videojs的第一个参数表示的是,文档中video的id
|
|
|
- const myPlyer= Videojs(id, options, function onPlayerReady() {
|
|
|
- console.log("onPlayerReady 中的this指的是:", this); // 这里的this是指Player,是由Videojs创建出来的实例
|
|
|
- console.log(myPlyer === this); // 这里返回的是true
|
|
|
- });
|
|
|
- this.playerList.push(myPlyer)
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ dataSrc:'https://cctvwbndbd.a.bdydns.com/cctvwbnd/cctv1_2/index.m3u8?BR=single',
|
|
|
+ playerList:[],
|
|
|
+ isShow: false
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+
|
|
|
+ showFull(){
|
|
|
+ this.$router.push('/taskScreen')
|
|
|
},
|
|
|
- created(){
|
|
|
+
|
|
|
+ // 初始化视频
|
|
|
+ initVideo(nowPlayVideoUrl,id,isAuto) {
|
|
|
+ let that =this
|
|
|
+ // 这些options属性也可直接设置在video标签上,见 muted
|
|
|
+ let options = {
|
|
|
+ autoplay: isAuto, // 设置自动播放
|
|
|
+ controls: true, // 显示播放的控件
|
|
|
+ sources: [
|
|
|
+ // 注意,如果是以option方式设置的src,是不能实现 换台的 (即使监听了nowPlayVideoUrl也没实现)
|
|
|
+ {
|
|
|
+ src: nowPlayVideoUrl,
|
|
|
+ type: "application/x-mpegURL" // 告诉videojs,这是一个hls流
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ // videojs的第一个参数表示的是,文档中video的id
|
|
|
+ const myPlyer= Videojs(id, options, function onPlayerReady() {
|
|
|
+ console.log("onPlayerReady 中的this指的是:", this); // 这里的this是指Player,是由Videojs创建出来的实例
|
|
|
+ console.log(myPlyer === this); // 这里返回的是true
|
|
|
+ });
|
|
|
+ this.playerList.push(myPlyer)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ created(){
|
|
|
// this.videoData = this.$route.query.videoData;
|
|
|
// console.log(this.$route.query.videoData);
|
|
|
-this.videoData = JSON.parse(this.$route.query.videoData);
|
|
|
- },
|
|
|
- mounted(){
|
|
|
- setTimeout(() => {
|
|
|
- this.isShow = true;
|
|
|
- }, 1000);
|
|
|
-
|
|
|
-
|
|
|
- // this.initVideo(this.dataSrc,'videoPlayerTask',true)
|
|
|
- // this.initVideo(this.dataSrc,'videoPlayer_first',false)
|
|
|
- // this.initVideo(this.dataSrc,'videoPlayer_second',false)
|
|
|
- // this.initVideo(this.dataSrc,'videoPlayer_third',false)
|
|
|
- // this.initVideo(this.dataSrc,'videoPlayer_fourth',false)
|
|
|
- },
|
|
|
- beforeDestroy() {
|
|
|
- if(this.playerList.length){
|
|
|
- this.playerList.forEach((item)=>{
|
|
|
- item.dispose()
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
+ this.videoData = JSON.parse(this.$route.query.videoData);
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ setTimeout(() => {
|
|
|
+ this.isShow = true;
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
+
|
|
|
+ // this.initVideo(this.dataSrc,'videoPlayerTask',true)
|
|
|
+ // this.initVideo(this.dataSrc,'videoPlayer_first',false)
|
|
|
+ // this.initVideo(this.dataSrc,'videoPlayer_second',false)
|
|
|
+ // this.initVideo(this.dataSrc,'videoPlayer_third',false)
|
|
|
+ // this.initVideo(this.dataSrc,'videoPlayer_fourth',false)
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ if(this.playerList.length){
|
|
|
+ this.playerList.forEach((item)=>{
|
|
|
+ item.dispose()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
.monitor_video_box {
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- color: #fff;
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- padding: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ color: #fff;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
.full_video_box {
|
|
|
- width: 80%;
|
|
|
- height: 100%;
|
|
|
- /* border:1px solid red; */
|
|
|
- padding: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- background-image:url('../assets/img/opitty.png');
|
|
|
- background-repeat:no-repeat;
|
|
|
- background-size:100% 100%;
|
|
|
- margin-right: 15px;
|
|
|
+ width: 80%;
|
|
|
+ height: 100%;
|
|
|
+ /* border:1px solid red; */
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-image:url('../assets/img/opitty.png');
|
|
|
+ background-repeat:no-repeat;
|
|
|
+ background-size:100% 100%;
|
|
|
+ margin-right: 15px;
|
|
|
}
|
|
|
.full_video_list {
|
|
|
- width: 20%;
|
|
|
- height: 100%;
|
|
|
- /* border:1px solid yellow; */
|
|
|
- padding:17px 10px 10px 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- background-image:url('../assets/img/opitty.png');
|
|
|
- background-repeat:no-repeat;
|
|
|
- background-size:100% 100%;
|
|
|
+ width: 20%;
|
|
|
+ height: 100%;
|
|
|
+ /* border:1px solid yellow; */
|
|
|
+ padding:17px 10px 10px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-image:url('../assets/img/opitty.png');
|
|
|
+ background-repeat:no-repeat;
|
|
|
+ background-size:100% 100%;
|
|
|
}
|
|
|
|
|
|
.video_title_new {
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 600;
|
|
|
- margin: 10px 0;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin: 10px 0;
|
|
|
}
|
|
|
.exit_box_hanlde {
|
|
|
- display: flex;
|
|
|
- justify-content: end;
|
|
|
- padding-right: 4px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: end;
|
|
|
+ padding-right: 4px;
|
|
|
}
|
|
|
|
|
|
#videoPlayerTask {
|
|
|
- width: 100%;
|
|
|
- height: 95%;
|
|
|
+ width: 100%;
|
|
|
+ height: 95%;
|
|
|
}
|
|
|
|
|
|
#videoPlayer_first {
|
|
|
- width: 419px;
|
|
|
- height: 182px;
|
|
|
- margin-right: 10px;
|
|
|
- margin-bottom: 10px;
|
|
|
+ width: 419px;
|
|
|
+ height: 182px;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
#videoPlayer_second {
|
|
|
- width: 419px;
|
|
|
- height: 182px;
|
|
|
- margin-bottom: 10px;
|
|
|
+ width: 419px;
|
|
|
+ height: 182px;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
#videoPlayer_third {
|
|
|
- width: 419px;
|
|
|
- height: 182px;
|
|
|
- margin-right: 10px;
|
|
|
- margin-bottom: 10px;
|
|
|
+ width: 419px;
|
|
|
+ height: 182px;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
#videoPlayer_fourth {
|
|
|
- width: 419px;
|
|
|
- height: 182px;
|
|
|
+ width: 419px;
|
|
|
+ height: 182px;
|
|
|
}
|
|
|
|
|
|
</style>
|