哈尔滨 真实摄像头添加（暂时不能播放）
This commit is contained in:
joylink_cuiweidong
parent
0f5099221f
commit
e93755a29f
@ -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",
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -1,79 +1,135 @@
|
||||
<template>
|
||||
<div class="jl3dpassflow">
|
||||
<div id="jl3d" class="jl3ddraw">
|
||||
<div class="jl3dpassflow">
|
||||
<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 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-select>
|
||||
</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-option
|
||||
v-for="item in stationlist"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<div class="menutop">
|
||||
<el-button-group>
|
||||
<el-button type="primary" @click="switch4view">四画面</el-button>
|
||||
<el-button type="primary" @click="switch2view">双画面</el-button>
|
||||
<el-button type="primary" @click="switchauto">自由视角</el-button>
|
||||
<!-- <el-button type="primary" @click="switchrender">{{rendermode}}</el-button> -->
|
||||
</el-button-group>
|
||||
</div>
|
||||
<div class="menudown">
|
||||
<el-button-group>
|
||||
<el-button v-show="isCctv" type="primary" @click="back">退出</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menutop">
|
||||
<el-button-group>
|
||||
<el-button type="primary" @click="switch4view">四画面</el-button>
|
||||
<el-button type="primary" @click="switch2view">双画面</el-button>
|
||||
<el-button type="primary" @click="switchauto">自由视角</el-button>
|
||||
<!-- <el-button type="primary" @click="switchrender">{{rendermode}}</el-button> -->
|
||||
</el-button-group>
|
||||
</div>
|
||||
<div class="menudown">
|
||||
<el-button-group>
|
||||
<el-button v-show="isCctv" type="primary" @click="back">退出</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</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';
|
||||
import { ProjectIcon, loginInfo } from '@/scripts/ProjectConfig';
|
||||
|
||||
export default {
|
||||
name: 'Passflow',
|
||||
components: {
|
||||
|
||||
// VideoPlayer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
jl3d: null,
|
||||
rendermode:'监控视角',
|
||||
renderswitch:false,
|
||||
stationlist:[],
|
||||
value:"",
|
||||
isCctv:true,
|
||||
loadingProjectList: ['login', 'design', 'xty', 'designxty', 'gzb', 'designxty', 'xadt', 'designxadt', 'drts', 'designdrts']
|
||||
stationlist:[],
|
||||
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']
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
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)) {
|
||||
this.$store.dispatch('app/transitionAnimations');
|
||||
}
|
||||
if (this.loadingProjectList.includes(this.$route.query.project)) {
|
||||
this.$store.dispatch('app/transitionAnimations');
|
||||
}
|
||||
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"){
|
||||
this.isCctv = false;
|
||||
}
|
||||
window.updatestationlist = this.updatestationlist;
|
||||
if (this.$route.query.type == 'CCTV') {
|
||||
this.isCctv = false;
|
||||
}
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
@ -82,41 +138,41 @@ export default {
|
||||
init: function () {
|
||||
// let mapdata = this.$store.state.socket.device;
|
||||
const dom = document.getElementById('jl3d');
|
||||
this.jl3d = new Jl3dpassflow(dom,this.$route.query.mapid,this.$route.query.group);
|
||||
this.jl3d = new Jl3dpassflow(dom, this.$route.query.mapid, this.$route.query.group);
|
||||
},
|
||||
switchrender() {
|
||||
if (this.renderswitch == true) {
|
||||
this.rendermode = '退出监控';
|
||||
this.renderswitch = false;
|
||||
this.jl3d.switchviews("auto");
|
||||
this.jl3d.switchviews('auto');
|
||||
} else {
|
||||
this.rendermode = '监控视角';
|
||||
this.renderswitch = true;
|
||||
this.jl3d.switchviews(4);
|
||||
}
|
||||
},
|
||||
switch4view(){
|
||||
this.jl3d.switchviews(4);
|
||||
},
|
||||
switch2view(){
|
||||
this.jl3d.switchviews(2);
|
||||
},
|
||||
switchauto(){
|
||||
this.jl3d.switchviews("auto");
|
||||
},
|
||||
updatestationlist(list){
|
||||
// console.log(list);
|
||||
this.value = list[0].name
|
||||
this.stationlist = list;
|
||||
},
|
||||
currentsel(selVal){
|
||||
this.jl3d.changestation(selVal);
|
||||
// let oldgroupnum = this.groupnum;
|
||||
// this.value = selVal;
|
||||
},
|
||||
switch4view() {
|
||||
this.jl3d.switchviews(4);
|
||||
},
|
||||
switch2view() {
|
||||
this.jl3d.switchviews(2);
|
||||
},
|
||||
switchauto() {
|
||||
this.jl3d.switchviews('auto');
|
||||
},
|
||||
updatestationlist(list) {
|
||||
// console.log(list);
|
||||
this.value = list[0].name;
|
||||
this.stationlist = list;
|
||||
},
|
||||
currentsel(selVal) {
|
||||
this.jl3d.changestation(selVal);
|
||||
// let oldgroupnum = this.groupnum;
|
||||
// this.value = selVal;
|
||||
},
|
||||
back() {
|
||||
window.close();
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -129,7 +185,7 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.jl3ddraw {
|
||||
.jl3ddraw1{
|
||||
position: absolute;
|
||||
float: right;
|
||||
top:0%;
|
||||
@ -137,7 +193,53 @@ 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;
|
||||
height:100px;
|
||||
@ -170,4 +272,7 @@ export default {
|
||||
left: 0;
|
||||
z-index: -12;
|
||||
}
|
||||
.video-js video{
|
||||
outline: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -480,6 +480,7 @@ export default {
|
||||
mapid:this.mapId,
|
||||
group:this.group,
|
||||
project: this.project,
|
||||
lineCode:this.lineCode,
|
||||
noPreLogout: true
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user