代码调整
This commit is contained in:
joylink_cuiweidong
parent
79e21f84cc
commit
5094610c4c
31
src/views/newMap/display/terminals/cctvView.vue
Normal file
31
src/views/newMap/display/terminals/cctvView.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div class="CctvView">
|
||||
<div v-if="RealCctvList.includes(project)&&this.$route.query.projectDevice">
|
||||
<real-cctv ref="realCctv" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<jl3d-passflow ref="cctvView3d" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Jl3dPassflow from '@/views/jlmap3d/passflow/jl3dpassflow';
|
||||
import RealCctv from './realCctv';
|
||||
export default {
|
||||
name:'CctvView',
|
||||
components:{
|
||||
Jl3dPassflow,
|
||||
RealCctv
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
RealCctvList:['richorjoint', 'richorhhcj']
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
project() {
|
||||
return this.$route.query.project || 'login';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -4,7 +4,8 @@
|
||||
<local-work v-else-if="picture === 'localWork'" ref="localWork" :centralized-station-map="centralizedStationMap" />
|
||||
<jl3d-drive v-else-if="picture === 'drivingPlan'" ref="jl3dDrive" />
|
||||
<jl3d-device v-else-if="picture === 'jl3dModle'" ref="jl3dModle" />
|
||||
<jl3d-passflow v-else-if="picture === 'cctvView'" ref="cctvView" />
|
||||
<cctv-view v-else-if="picture === 'cctvView'" ref="cctvView" />
|
||||
|
||||
<digital-stand v-else-if="picture === 'digitalStand'" ref="digitalStand" />
|
||||
<iscs-system v-else-if="picture === 'iscsView'" ref="IscsSystem" />
|
||||
<traffic-terminal-work v-else-if="picture === 'trafficTerminal'" ref="trafficTerminalWork" :centralized-station-map="centralizedStationMap" />
|
||||
@ -55,7 +56,7 @@ import DispatchCmd from './dispatchCmd';
|
||||
import DispatcherLoger from './dispatcherLoger/index';
|
||||
import Jl3dDrive from '@/views/jlmap3d/drive/jl3ddrive';
|
||||
import Jl3dDevice from '@/views/jlmap3d/device/jl3ddevice';
|
||||
import Jl3dPassflow from '@/views/jlmap3d/passflow/jl3dpassflow';
|
||||
import cctvView from './cctvView';
|
||||
import DigitalStand from '@/views/jlmap3d/simulation/jl3dsimulation';
|
||||
import IbpPlate from '@/views/ibp/ibpsystem/index';
|
||||
import TrafficTerminalWork from './trafficTerminalWork';
|
||||
@ -90,7 +91,7 @@ export default {
|
||||
DispatcherLoger,
|
||||
Jl3dDevice,
|
||||
Jl3dDrive,
|
||||
Jl3dPassflow,
|
||||
cctvView,
|
||||
IbpPlate,
|
||||
TrafficTerminalWork,
|
||||
DigitalStand,
|
||||
@ -259,8 +260,14 @@ export default {
|
||||
this.$nextTick(() => { this.subscribe('YJDDZH'); });
|
||||
} else if (val === 'diagramPreview') {
|
||||
this.$nextTick(() => { this.subscribe('RUNFACT'); });
|
||||
} else if (val === 'digitalStand' || val == 'cctvView') {
|
||||
} else if (val === 'digitalStand') {
|
||||
this.$nextTick(() => { this.subscribe('JL3D'); });
|
||||
} else if (val === 'cctvView') {
|
||||
const RealCctvList = ['richorjoint', 'richorhhcj'];
|
||||
const project = this.$route.query.project || 'login';
|
||||
if (!RealCctvList.includes(project)) {
|
||||
this.$nextTick(() => { this.subscribe('JL3D'); });
|
||||
}
|
||||
} else if (val === 'scheduleWork') {
|
||||
this.mapViewLoaded(true);
|
||||
}
|
||||
|
||||
159
src/views/newMap/display/terminals/realCctv.vue
Normal file
159
src/views/newMap/display/terminals/realCctv.vue
Normal file
@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="jl3dpassflow">
|
||||
<div id="jlReal3d" class="jlReal3d">
|
||||
<div class="realCctv1">
|
||||
<video id="myvideo0" class="video-js">
|
||||
<source :src="`${host}/hls/cctv1.m3u8`" type="application/x-mpegURL">
|
||||
</video>
|
||||
</div>
|
||||
<div class="realCctv2">
|
||||
<video id="myvideo1" class="video-js">
|
||||
<source :src="`${host}/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';
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
export default {
|
||||
name:'RealCCTV',
|
||||
data() {
|
||||
return {
|
||||
videoList:[]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
host() {
|
||||
const project = getSessionStorage('project');
|
||||
const RealCctvMap = {
|
||||
richorjoint: 'http://192.168.1.254',
|
||||
richorhhcj: 'http://192.168.0.254'
|
||||
};
|
||||
return RealCctvMap[project];
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
for (var i = 0; i < 2; i++) {
|
||||
const videoPlay = new Video('myvideo' + i, {
|
||||
controls: false,
|
||||
autoplay: 'muted',
|
||||
loop: false,
|
||||
preload: 'auto',
|
||||
width: window.innerWidth / 2 + 'px',
|
||||
height: window.innerHeight + 'px',
|
||||
hls: {
|
||||
withCredentials: true
|
||||
}
|
||||
}, function () {
|
||||
console.log('videojs播放器初始化成功');
|
||||
const video = this;
|
||||
var lastTime = -1;
|
||||
this.on('loadeddata', function() {
|
||||
console.log('loadeddata');
|
||||
});
|
||||
this.on('seeked', function() {
|
||||
// 已经拿到视频流,可以播放
|
||||
console.log('seeked');
|
||||
// var currentTime = video.currentTime();
|
||||
// if (currentTime != lastTime) {
|
||||
// video.currentTime(currentTime + 10000);
|
||||
// video.play();
|
||||
// }
|
||||
});
|
||||
this.on('error', function() {
|
||||
console.log('error');
|
||||
if (video.error().code == '') {
|
||||
const src = video.getMedia().src[0].src;
|
||||
video.reset();
|
||||
video.src(src);
|
||||
video.load();
|
||||
video.play();
|
||||
var currentTime = video.currentTime();
|
||||
lastTime = currentTime;
|
||||
}
|
||||
});
|
||||
this.on('loadedmetadata', function() {
|
||||
console.log('loadedmetadata');
|
||||
// 加载到元数据后开始播放视频
|
||||
// startVideo();
|
||||
video.autoplay(true);
|
||||
|
||||
// var tryTimes = 0;
|
||||
let isVideoBreak = null;
|
||||
clearInterval(isVideoBreak);
|
||||
isVideoBreak = setInterval(function() {
|
||||
// debugger;
|
||||
var currentTime = video.currentTime();
|
||||
console.log('currentTime' + currentTime + 'lastTime' + lastTime);
|
||||
if (currentTime == lastTime) {
|
||||
video.currentTime(currentTime + 10000);
|
||||
video.play();
|
||||
// video.src({
|
||||
// src:that.videosrc
|
||||
// });
|
||||
// // 尝试5次播放后，如仍未播放成功提示刷新
|
||||
// if (++tryTimes > 5) {
|
||||
// alert('您的网速有点慢，刷新下试试');
|
||||
// tryTimes = 0;
|
||||
// }
|
||||
} else {
|
||||
lastTime = currentTime;
|
||||
// tryTimes = 0;
|
||||
}
|
||||
}, 3000);
|
||||
});
|
||||
this.on('play', function() {
|
||||
console.log('play');
|
||||
});
|
||||
});
|
||||
this.videoList.push(videoPlay);
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
}
|
||||
};
|
||||
</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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user