This commit is contained in:
fan 2020-09-17 15:37:01 +08:00
commit 28e9bf2dae
10 changed files with 203 additions and 86 deletions

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",

View File

@ -261,7 +261,9 @@ class MouseController extends Eventful {
} }
} }
if (this.eventTarget.grouper) { if (this.eventTarget.grouper) {
if (!(e.event.x <= this.boundingRect.x2 && e.event.x >= this.boundingRect.x1 && e.event.y <= this.boundingRect.y2 && e.event.y >= this.boundingRect.y1)) { const x = e.event.x + this.$ibp.$options.offsetX;
const y = e.event.y + this.$ibp.$options.offsetY;
if (!(x <= this.boundingRect.x2 && x >= this.boundingRect.x1 && y <= this.boundingRect.y2 && y >= this.boundingRect.y1)) {
this.targetView.eventTarget.close(); this.targetView.eventTarget.close();
} }
} }

View File

@ -16,8 +16,8 @@ class SkinCode extends defaultStyle {
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 10, // 文字离区段距离 distance: 10, // 文字离区段距离
fontSize: 12, // 字体大小 fontSize: 12, // 字体大小
fontWeight: 'normal', // 字体粗细 fontWeight: '600', // 字体粗细
fontColor: 'lightgreen', // 字体颜色 fontColor: '#000', // 字体颜色
textAlign: 'center', // 水平对齐方式 textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置 textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式 textVerticalAlign: 'middle' // 文字垂直对齐方式
@ -27,7 +27,7 @@ class SkinCode extends defaultStyle {
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 12, // 文字离区段距离 distance: 12, // 文字离区段距离
fontSize: 11, // 字体大小 fontSize: 11, // 字体大小
fontWeight: 'normal', // 字体粗细 fontWeight: '600', // 字体粗细
fontColor: '#FFFFFF', // 字体颜色 fontColor: '#FFFFFF', // 字体颜色
textAlign: 'center', // 水平对齐方式 textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置 textPosition: 'inside', // 文字位置
@ -38,8 +38,8 @@ class SkinCode extends defaultStyle {
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 24, // 文字离区段距离 distance: 24, // 文字离区段距离
fontSize: 11, // 字体大小 fontSize: 11, // 字体大小
fontWeight: 'normal', // 字体粗细 fontWeight: '600', // 字体粗细
fontColor: '#FFFFFF', // 字体颜色 fontColor: '#000', // 字体颜色
textAlign: 'center', // 水平对齐方式 textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置 textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式 textVerticalAlign: 'middle' // 文字垂直对齐方式
@ -49,8 +49,8 @@ class SkinCode extends defaultStyle {
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 36, // 文字离区段距离 distance: 36, // 文字离区段距离
fontSize: 11, // 字体大小 fontSize: 11, // 字体大小
fontWeight: 'normal', // 字体粗细 fontWeight: '600', // 字体粗细
fontColor: '#FFFFFF', // 字体颜色 fontColor: '#000', // 字体颜色
textAlign: 'center', // 水平对齐方式 textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置 textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式 textVerticalAlign: 'middle' // 文字垂直对齐方式
@ -60,8 +60,8 @@ class SkinCode extends defaultStyle {
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 36, // 文字离区段距离 distance: 36, // 文字离区段距离
fontSize: 11, // 字体大小 fontSize: 11, // 字体大小
fontWeight: 'normal', // 字体粗细 fontWeight: '600', // 字体粗细
fontColor: '#FFFFFF', // 字体颜色 fontColor: '#000', // 字体颜色
textAlign: 'center', // 水平对齐方式 textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置 textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式 textVerticalAlign: 'middle' // 文字垂直对齐方式
@ -71,8 +71,8 @@ class SkinCode extends defaultStyle {
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 12, // 文字离区段距离 distance: 12, // 文字离区段距离
fontSize: 11, // 字体大小 fontSize: 11, // 字体大小
fontWeight: 'bold', // 字体粗细 fontWeight: '600', // 字体粗细
fontColor: 'yellow', // 字体颜色 fontColor: '#000', // 字体颜色
textAlign: 'center', // 水平对齐方式 textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置 textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式 textVerticalAlign: 'middle' // 文字垂直对齐方式
@ -314,7 +314,7 @@ class SkinCode extends defaultStyle {
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称 position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
offset: { x: 5, y: -10 }, // 道岔名称与区段距离 offset: { x: 5, y: -10 }, // 道岔名称与区段距离
fontSize: 12, // 字体大小 fontSize: 12, // 字体大小
fontColor: '#C0C0C0', // 道岔名称颜色 fontColor: '#333', // 道岔名称颜色
fontWeight: '600', // 字体粗细 fontWeight: '600', // 字体粗细
borderColor: '#FE0000', // 道岔名称边框颜色 borderColor: '#FE0000', // 道岔名称边框颜色
lossColor: 'lightgreen', // 道岔名称失去颜色 lossColor: 'lightgreen', // 道岔名称失去颜色

View File

@ -66,6 +66,7 @@ function queryDeleteModels(state, device, dict) {
copyModel.isSwitchSection = false; copyModel.isSwitchSection = false;
copyModel.switchSection = false; copyModel.switchSection = false;
copyModel.type = '01'; copyModel.type = '01';
copyModel.name = copyModel.name.split('-')[0];
dict[elem.code] = copyModel; dict[elem.code] = copyModel;
} }
} }

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) {

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,"normal"); this.jl3d = new Jl3dpassflow(dom, this.$route.query.mapid, this.$route.query.group, 'normal');
}, },
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>

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

View File

@ -100,6 +100,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'),
@ -121,6 +122,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() {
@ -163,7 +165,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');

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

View File

@ -24,13 +24,16 @@ export default {
const createArr = []; // model const createArr = []; // model
const changeSectionList = this.changeSectionAttr(); const changeSectionList = this.changeSectionAttr();
changeSectionList.forEach(section => { changeSectionList.forEach(section => {
// if (section.code == 'T449' || section.code == 'T501' || section.code == 'T502') {
// debugger;
// }
if (!section.rightSectionCode) { // if (!section.rightSectionCode) { //
const list = this.findSectionA(section.points[section.points.length - 1].x, section.points[section.points.length - 1].y); const list = this.findSectionA(section.points[section.points.length - 1].x, section.points[section.points.length - 1].y);
let sectionB = {}; let sectionB = {};
let sectionC = {}; let sectionC = {};
if (list.length >= 2) { if (list.length >= 2) {
list.forEach(item => { list.forEach(item => {
if (item.points[1].y == section.points[section.points.length - 1].y) { // if ((item.points[1].y == section.points[section.points.length - 1].y) || (item.points[1].x == section.points[section.points.length - 1].x)) { //
sectionB = item; sectionB = item;
} else { } else {
sectionC = item; sectionC = item;
@ -70,7 +73,7 @@ export default {
let sectionC = {}; let sectionC = {};
if (list.length >= 2) { if (list.length >= 2) {
list.forEach(item => { list.forEach(item => {
if (item.points[item.points.length - 2].y == section.points[0].y) { // if ((item.points[item.points.length - 2].y == section.points[0].y) || (item.points[item.points.length - 2].x == section.points[0].x)) { //
sectionB = item; sectionB = item;
} else { } else {
sectionC = item; sectionC = item;