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

2020-09-17 15:37:01 +08:00 · 2020-09-17 15:37:01 +08:00 · 28e9bf2dae
commit 28e9bf2dae
parent 588f77173a 5428f98843
10 changed files with 203 additions and 86 deletions
--- a/package.json
+++ b/package.json
@ -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",
--- a/src/ibp/mouseController.js
+++ b/src/ibp/mouseController.js
@ -261,7 +261,9 @@ class MouseController extends Eventful {
            }
        }
        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();
            }
        }
--- a/src/jmapNew/config/skinCode/ningbo_03.js
+++ b/src/jmapNew/config/skinCode/ningbo_03.js
@ -16,8 +16,8 @@ class SkinCode extends defaultStyle {
                position: 0, 								// 区段名称位置 1 上面 -1 下面 0 对称
                distance: 10,								// 文字离区段距离
                fontSize: 12, 								// 字体大小
-                fontWeight: 'normal',						// 字体粗细
-                fontColor: 'lightgreen', 						// 字体颜色
+                fontWeight: '600',						// 字体粗细
+                fontColor: '#000', 						// 字体颜色
                textAlign: 'center', 						// 水平对齐方式
                textPosition: 'inside', 					// 文字位置
                textVerticalAlign: 'middle' 				// 文字垂直对齐方式
@ -27,7 +27,7 @@ class SkinCode extends defaultStyle {
                position: 0, 								// 区段名称位置 1 上面 -1 下面 0 对称
                distance: 12,								// 文字离区段距离
                fontSize: 11, 								// 字体大小
-                fontWeight: 'normal',						// 字体粗细
+                fontWeight: '600',						// 字体粗细
                fontColor: '#FFFFFF', 						// 字体颜色
                textAlign: 'center', 						// 水平对齐方式
                textPosition: 'inside', 					// 文字位置
@ -38,8 +38,8 @@ class SkinCode extends defaultStyle {
                position: 0, 								// 区段名称位置 1 上面 -1 下面 0 对称
                distance: 24,								// 文字离区段距离
                fontSize: 11, 								// 字体大小
-                fontWeight: 'normal',						// 字体粗细
-                fontColor: '#FFFFFF', 						// 字体颜色
+                fontWeight: '600',						// 字体粗细
+                fontColor: '#000', 						// 字体颜色
                textAlign: 'center', 						// 水平对齐方式
                textPosition: 'inside', 					// 文字位置
                textVerticalAlign: 'middle' 				// 文字垂直对齐方式
@ -49,8 +49,8 @@ class SkinCode extends defaultStyle {
                position: 0, 								// 区段名称位置 1 上面 -1 下面 0 对称
                distance: 36,								// 文字离区段距离
                fontSize: 11, 								// 字体大小
-                fontWeight: 'normal',						// 字体粗细
-                fontColor: '#FFFFFF', 						// 字体颜色
+                fontWeight: '600',						// 字体粗细
+                fontColor: '#000', 						// 字体颜色
                textAlign: 'center', 						// 水平对齐方式
                textPosition: 'inside', 					// 文字位置
                textVerticalAlign: 'middle' 				// 文字垂直对齐方式
@ -60,8 +60,8 @@ class SkinCode extends defaultStyle {
                position: 0, 								// 区段名称位置 1 上面 -1 下面 0 对称
                distance: 36,								// 文字离区段距离
                fontSize: 11, 								// 字体大小
-                fontWeight: 'normal',						// 字体粗细
-                fontColor: '#FFFFFF', 						// 字体颜色
+                fontWeight: '600',						// 字体粗细
+                fontColor: '#000', 						// 字体颜色
                textAlign: 'center', 						// 水平对齐方式
                textPosition: 'inside', 					// 文字位置
                textVerticalAlign: 'middle' 				// 文字垂直对齐方式
@ -71,8 +71,8 @@ class SkinCode extends defaultStyle {
                position: 0, 								// 区段名称位置 1 上面 -1 下面 0 对称
                distance: 12,								// 文字离区段距离
                fontSize: 11, 								// 字体大小
-                fontWeight: 'bold',							// 字体粗细
-                fontColor: 'yellow', 						// 字体颜色
+                fontWeight: '600',							// 字体粗细
+                fontColor: '#000', 						// 字体颜色
                textAlign: 'center', 						// 水平对齐方式
                textPosition: 'inside', 					// 文字位置
                textVerticalAlign: 'middle' 				// 文字垂直对齐方式
@ -314,7 +314,7 @@ class SkinCode extends defaultStyle {
                position: 0, 								// 区段名称位置 1 上面 -1 下面 0 对称
                offset: { x: 5, y: -10 },					// 道岔名称与区段距离
                fontSize: 12,								// 字体大小
-                fontColor: '#C0C0C0',						// 道岔名称颜色
+                fontColor: '#333',						// 道岔名称颜色
                fontWeight: '600',							// 字体粗细
                borderColor: '#FE0000',						// 道岔名称边框颜色
                lossColor: 'lightgreen',					// 道岔名称失去颜色
--- a/src/store/modules/map.js
+++ b/src/store/modules/map.js
@ -66,6 +66,7 @@ function queryDeleteModels(state, device, dict) {
                        copyModel.isSwitchSection = false;
                        copyModel.switchSection = false;
                        copyModel.type = '01';
+                        copyModel.name = copyModel.name.split('-')[0];
                        dict[elem.code] = copyModel;
                    }
                }
--- a/src/views/demonstration/detail/index.vue
+++ b/src/views/demonstration/detail/index.vue
@ -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) {
--- a/src/views/jlmap3d/passflow/jl3dpassflow.vue
+++ b/src/views/jlmap3d/passflow/jl3dpassflow.vue
@ -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,"normal");
+            this.jl3d = new Jl3dpassflow(dom, this.$route.query.mapid, this.$route.query.group, 'normal');
        },
        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>
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@ -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
--- a/src/views/newMap/displayNew/demonMenu.vue
+++ b/src/views/newMap/displayNew/demonMenu.vue
@ -100,6 +100,7 @@ export default {
            btnWidth: 0,
            group:'',
            mapId:'',
+            lineCode:'',
            deviceShow: false,
            drivingShow: false,
            jl3dpassflow:this.$t('display.demon.passengerflow'),
@ -121,6 +122,7 @@ export default {
    mounted() {
        this.group = this.$route.query.group;
        this.mapId = this.$route.query.mapId;
+        this.lineCode = this.$route.query.lineCode;
    },
    methods:{
        menuClick() {
@ -163,7 +165,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');
--- a/src/views/newMap/jointTrainingNew/index.vue
+++ b/src/views/newMap/jointTrainingNew/index.vue
@ -480,6 +480,7 @@ export default {
                    mapid:this.mapId,
                    group:this.group,
                    project: this.project,
+                    lineCode:this.lineCode,
                    noPreLogout: true
                }
            });
--- a/src/views/newMap/newMapdraft/mapoperate/switch/create.vue
+++ b/src/views/newMap/newMapdraft/mapoperate/switch/create.vue
@ -24,13 +24,16 @@ export default {
            const createArr = []; // 创建model列表
            const changeSectionList = this.changeSectionAttr();
            changeSectionList.forEach(section => {
+                // if (section.code == 'T449' || section.code == 'T501' || section.code == 'T502') {
+                //     debugger;
+                // }
                if (!section.rightSectionCode) { // 右侧关联关系为空 且 道岔区段
                    const list = this.findSectionA(section.points[section.points.length - 1].x, section.points[section.points.length - 1].y);
                    let sectionB = {};
                    let sectionC = {};
                    if (list.length >= 2) {
                        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;
                            } else {
                                sectionC = item;
@ -70,7 +73,7 @@ export default {
                    let sectionC = {};
                    if (list.length >= 2) {
                        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;
                            } else {
                                sectionC = item;