joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

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

4
src/views/demonstration/detail/index.vue
View File

@ -246,7 +246,7 @@ export default {
async enterISCS() { async enterISCS() {
try { try {
this.disabled = true; 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 = {}; let res = {};
if (!this.drawWay) { if (!this.drawWay) {
res = await simulationNotify(data); res = await simulationNotify(data);
@ -254,7 +254,7 @@ export default {
res = await createSimulationNew(data); res = await createSimulationNew(data);
} }
if (res && res.code == 200) { 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 }); this.$router.push({ path: `/displayIscs/system`, query: query });
} }
} catch (error) { } catch (error) {

241
src/views/jlmap3d/passflow/jl3dpassflow.vue
View File

@ -1,79 +1,135 @@
<template> <template>
<div class="jl3dpassflow"> <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 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="menutop">
<div class = "station"> <el-button-group>
<div style="margin-top:5%;font-size: 30px;">当前车站:</div> <el-button type="primary" @click="switch4view">四画面</el-button>
<el-select class="listmenu" v-model="value" placeholder="当前车站" @change="currentsel" > <el-button type="primary" @click="switch2view">双画面</el-button>
<el-option <el-button type="primary" @click="switchauto">自由视角</el-button>
v-for="item in stationlist" <!-- <el-button type="primary" @click="switchrender">{{rendermode}}</el-button> -->
:key="item.name" </el-button-group>
:label="item.name" </div>
:value="item.name" <div class="menudown">
:disabled="item.disabled" <el-button-group>
> <el-button v-show="isCctv" type="primary" @click="back">退出</el-button>
</el-option> </el-button-group>
</el-select> </div>
</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> </template>
<script> <script>
import Vue from 'vue'; import Vue from 'vue';
import Video from 'video.js';
import 'video.js/dist/video-js.css';
import { Jl3dpassflow } from '@/jlmap3d/jl3dpassflow/jl3dpassflownew.js'; import { Jl3dpassflow } from '@/jlmap3d/jl3dpassflow/jl3dpassflownew.js';
import { ProjectIcon,loginInfo } from '@/scripts/ProjectConfig'; import { ProjectIcon, loginInfo } from '@/scripts/ProjectConfig';
export default { export default {
name: 'Passflow', name: 'Passflow',
components: { components: {
// VideoPlayer
}, },
data() { data() {
return { return {
jl3d: null, jl3d: null,
rendermode:'监控视角', rendermode:'监控视角',
renderswitch:false, renderswitch:false,
stationlist:[], stationlist:[],
value:"", value:'',
isCctv:true, isCctv:true,
loadingProjectList: ['login', 'design', 'xty', 'designxty', 'gzb', 'designxty', 'xadt', 'designxadt', 'drts', 'designdrts'] 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: { computed: {
code() { code() {
return this.$route.query.code; return this.$route.query.code;
}, },
lineCode() {
return this.$route.query.lineCode;
}
}, },
watch: { 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() { created() {
if (this.loadingProjectList.includes(this.$route.query.project)) { if (this.loadingProjectList.includes(this.$route.query.project)) {
this.$store.dispatch('app/transitionAnimations'); this.$store.dispatch('app/transitionAnimations');
} }
document.querySelector("link[rel*='icon']").href = loginInfo[this.$route.query.project].linkIcon || ProjectIcon[this.$route.query.project]; document.querySelector("link[rel*='icon']").href = loginInfo[this.$route.query.project].linkIcon || ProjectIcon[this.$route.query.project];
}, },
mounted() { 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(); this.init();
window.updatestationlist = this.updatestationlist; window.updatestationlist = this.updatestationlist;
if(this.$route.query.type == "CCTV"){ if (this.$route.query.type == 'CCTV') {
this.isCctv = false; this.isCctv = false;
} }
}, },
beforeDestroy() { beforeDestroy() {
@ -82,41 +138,41 @@ export default {
init: function () { init: function () {
// let mapdata = this.$store.state.socket.device; // let mapdata = this.$store.state.socket.device;
const dom = document.getElementById('jl3d'); 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() { switchrender() {
if (this.renderswitch == true) { if (this.renderswitch == true) {
this.rendermode = '退出监控'; this.rendermode = '退出监控';
this.renderswitch = false; this.renderswitch = false;
this.jl3d.switchviews("auto"); this.jl3d.switchviews('auto');
} else { } else {
this.rendermode = '监控视角'; this.rendermode = '监控视角';
this.renderswitch = true; this.renderswitch = true;
this.jl3d.switchviews(4); this.jl3d.switchviews(4);
} }
}, },
switch4view(){ switch4view() {
this.jl3d.switchviews(4); this.jl3d.switchviews(4);
}, },
switch2view(){ switch2view() {
this.jl3d.switchviews(2); this.jl3d.switchviews(2);
}, },
switchauto(){ switchauto() {
this.jl3d.switchviews("auto"); this.jl3d.switchviews('auto');
}, },
updatestationlist(list){ updatestationlist(list) {
// console.log(list); // console.log(list);
this.value = list[0].name this.value = list[0].name;
this.stationlist = list; this.stationlist = list;
}, },
currentsel(selVal){ currentsel(selVal) {
this.jl3d.changestation(selVal); this.jl3d.changestation(selVal);
// let oldgroupnum = this.groupnum; // let oldgroupnum = this.groupnum;
// this.value = selVal; // this.value = selVal;
}, },
back() { back() {
window.close(); window.close();
}, }
} }
}; };
</script> </script>
@ -129,7 +185,7 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.jl3ddraw { .jl3ddraw1{
position: absolute; position: absolute;
float: right; float: right;
top:0%; top:0%;
@ -137,7 +193,53 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 0; 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{ .station{
width:250px; width:250px;
height:100px; height:100px;
@ -170,4 +272,7 @@ export default {
left: 0; left: 0;
z-index: -12; z-index: -12;
} }
.video-js video{
outline: none !important;
}
</style> </style>

1
src/views/login/index.vue
View File

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

5
src/views/newMap/displayNew/demonMenu.vue
View File

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

1
src/views/newMap/jointTrainingNew/index.vue
View File

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