Merge branch 'test_dispaly' of https://git.code.tencent.com/lian-cbtc/jl-client into test_dispaly1

This commit is contained in:
fan 2023-01-04 14:32:20 +08:00
commit 8084698cd8
3 changed files with 201 additions and 4 deletions

View 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>

View File

@ -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);
}

View 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>