哈尔滨 真实摄像头添加(暂时不能播放)

This commit is contained in:
joylink_cuiweidong 2020-09-17 15:19:00 +08:00
parent 0f5099221f
commit e93755a29f
6 changed files with 182 additions and 71 deletions

View File

@ -35,6 +35,7 @@
"stompjs": "^2.3.3",
"storejs": "^1.0.25",
"three": "^0.107.0",
"video.js": "^7.8.4",
"vue": "^2.6.10",
"vue-i18n": "^8.12.0",
"vue-quill-editor": "^3.0.6",

View File

@ -246,7 +246,7 @@ export default {
async enterISCS() {
try {
this.disabled = true;
const data = { mapId: this.courseModel.mapId, prdType: this.currentPrdType };
const data = { mapId: this.courseModel.mapId, prdType: this.currentPrdType, lineCode: this.courseModel.lineCode };
let res = {};
if (!this.drawWay) {
res = await simulationNotify(data);
@ -254,7 +254,7 @@ export default {
res = await createSimulationNew(data);
}
if (res && res.code == 200) {
const query = { group: res.data };
const query = { group: res.data, lineCode:this.courseModel.lineCode };
this.$router.push({ path: `/displayIscs/system`, query: query });
}
} catch (error) {

View File

@ -1,19 +1,38 @@
<template>
<div class="jl3dpassflow">
<div id="jl3d" class="jl3ddraw">
<div id="jl3d" :class="lineCode=='07'?'jl3ddraw':'jl3ddraw1'" />
<div v-if="lineCode=='07'" 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 class="realCctv3">
<video id="myvideo2" class="video-js">
<source src="http://160.20.60.15/hls/cctv3.m3u8" type="application/x-mpegURL">
</video>
</div>
<div class="realCctv4">
<video id="myvideo3" class="video-js">
<source src="http://160.20.60.15/hls/cctv4.m3u8" type="application/x-mpegURL">
</video>
</div>
</div>
<div class="station">
<div style="margin-top:5%;font-size: 30px;">当前车站:</div>
<el-select class="listmenu" v-model="value" placeholder="当前车站" @change="currentsel" >
<el-select v-model="value" class="listmenu" placeholder="当前车站" @change="currentsel">
<el-option
v-for="item in stationlist"
:key="item.name"
:label="item.name"
:value="item.name"
:disabled="item.disabled"
>
</el-option>
/>
</el-select>
</div>
@ -35,13 +54,15 @@
</template>
<script>
import Vue from 'vue';
import Video from 'video.js';
import 'video.js/dist/video-js.css';
import { Jl3dpassflow } from '@/jlmap3d/jl3dpassflow/jl3dpassflownew.js';
import { ProjectIcon, loginInfo } from '@/scripts/ProjectConfig';
export default {
name: 'Passflow',
components: {
// VideoPlayer
},
data() {
return {
@ -49,8 +70,17 @@ export default {
rendermode:'监控视角',
renderswitch:false,
stationlist:[],
value:"",
value:'',
isCctv:true,
videoList:[],
// playerOptionList:[
// http://hls.cntv.lxdns.com/asp/hls/main/0303000a/3/default/978a64ddd3a1caa85ae70a23414e6540/main.m3u8
// // http://160.20.60.15/hls/cctv1.m3u8
// {sources: [{ type:'application/x-mpegURL', src: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8'}]},
// {sources: [{ type:'application/x-mpegURL', src: 'http://192.168.3.6/hls/vlc.m3u8'}]},
// {sources: [{ type:'application/x-mpegURL', src: 'http://192.168.3.6/hls/vlc.m3u8'}]},
// {sources: [{ type:'application/x-mpegURL', src: 'http://192.168.3.6/hls/vlc.m3u8'}]}
// ],
loadingProjectList: ['login', 'design', 'xty', 'designxty', 'gzb', 'designxty', 'xadt', 'designxadt', 'drts', 'designdrts']
};
},
@ -58,9 +88,19 @@ export default {
code() {
return this.$route.query.code;
},
lineCode() {
return this.$route.query.lineCode;
}
},
watch: {
'$store.state.app.windowSizeCount': function() {
this.videoList.forEach((videoPlay, index)=>{
document.querySelector('.myvideo' + index + '-dimensions').style.width = window.innerWidth / 4 + 'px';
document.querySelector('.myvideo' + index + '-dimensions').style.height = window.innerHeight / 2 + 'px';
// videoPlay.width_ = window.innerWidth / 4;
// videoPlay.height_ = window.innerHeight / 2;
});
}
},
created() {
if (this.loadingProjectList.includes(this.$route.query.project)) {
@ -69,9 +109,25 @@ export default {
document.querySelector("link[rel*='icon']").href = loginInfo[this.$route.query.project].linkIcon || ProjectIcon[this.$route.query.project];
},
mounted() {
if (this.lineCode == '07') {
for (var i = 0; i < 4; i++) {
const videoPlay = new Video('myvideo' + i, {
controls: false,
autoplay: 'muted',
loop:true,
preload: 'auto',
width: window.innerWidth / 4 + 'px',
height: window.innerHeight / 2 + 'px',
hls: {
withCredentials: true
}
}, function () { console.log('videojs播放器初始化成功'); });
this.videoList.push(videoPlay);
}
}
this.init();
window.updatestationlist = this.updatestationlist;
if(this.$route.query.type == "CCTV"){
if (this.$route.query.type == 'CCTV') {
this.isCctv = false;
}
},
@ -88,7 +144,7 @@ export default {
if (this.renderswitch == true) {
this.rendermode = '退出监控';
this.renderswitch = false;
this.jl3d.switchviews("auto");
this.jl3d.switchviews('auto');
} else {
this.rendermode = '监控视角';
this.renderswitch = true;
@ -102,11 +158,11 @@ export default {
this.jl3d.switchviews(2);
},
switchauto() {
this.jl3d.switchviews("auto");
this.jl3d.switchviews('auto');
},
updatestationlist(list) {
// console.log(list);
this.value = list[0].name
this.value = list[0].name;
this.stationlist = list;
},
currentsel(selVal) {
@ -116,7 +172,7 @@ export default {
},
back() {
window.close();
},
}
}
};
</script>
@ -129,7 +185,7 @@ export default {
width: 100%;
height: 100%;
}
.jl3ddraw {
.jl3ddraw1{
position: absolute;
float: right;
top:0%;
@ -137,6 +193,52 @@ export default {
width: 100%;
height: 100%;
z-index: 0;
}
.jl3ddraw {
position: absolute;
float: right;
top:0%;
/* left: 0; */
width: 50%;
height: 100%;
z-index: 0;
}
.jlReal3d{
position: absolute;
top:0%;
left: 50%;
width: 50%;
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;
}
.realCctv3{
position: absolute;
width:50%;
height:50%;
left:0;
top:50%;
}
.realCctv4{
position: absolute;
width:50%;
height:50%;
left:50%;
top:50%;
}
.station{
width:250px;
@ -170,4 +272,7 @@ export default {
left: 0;
z-index: -12;
}
.video-js video{
outline: none !important;
}
</style>

View File

@ -511,6 +511,7 @@ export default {
this.$router.push({ path: `/jlmap3d/passengerflow`, query:{
mapid:resp.data.map.id,
group:res.data.group,
lineCode: resp.data.map.lineCode,
project: getSessionStorage('project'),
projectDevice: this.$route.query.projectDevice,
type: this.$route.query.type

View File

@ -98,6 +98,7 @@ export default {
btnWidth: 0,
group:'',
mapId:'',
lineCode:'',
deviceShow: false,
drivingShow: false,
jl3dpassflow:this.$t('display.demon.passengerflow'),
@ -119,6 +120,7 @@ export default {
mounted() {
this.group = this.$route.query.group;
this.mapId = this.$route.query.mapId;
this.lineCode = this.$route.query.lineCode;
},
methods:{
menuClick() {
@ -161,7 +163,8 @@ export default {
mapid:this.mapId,
group:this.group,
project: this.project,
noPreLogout: true
noPreLogout: true,
lineCode:this.lineCode
}
});
window.open(routeData.href, '_blank', 'noopener noreferrer');

View File

@ -480,6 +480,7 @@ export default {
mapid:this.mapId,
group:this.group,
project: this.project,
lineCode:this.lineCode,
noPreLogout: true
}
});