From 5336a1899e30e38f94c5f5f770998b03896d9d41 Mon Sep 17 00:00:00 2001
From: joylink_cuiweidong <364937672@qq.com>
Date: Thu, 18 Mar 2021 11:12:31 +0800
Subject: [PATCH] =?UTF-8?q?demo=20=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/index.vue                      | 228 ++++++++++++++----
 .../newMap/displayNew/demoTraining/index.vue  |  93 ++++---
 src/views/newMap/displayNew/index.vue         |  20 +-
 src/views/newMap/displayNew/lesson/index.vue  |  20 +-
 src/views/newMap/jlmapNew/index.vue           |  14 +-
 5 files changed, 251 insertions(+), 124 deletions(-)

diff --git a/src/views/demo/index.vue b/src/views/demo/index.vue
index 209a106bf..d387508d3 100644
--- a/src/views/demo/index.vue
+++ b/src/views/demo/index.vue
@@ -1,9 +1,32 @@
 <template>
-  <div>
-		<div v-for="(el, i) in trainingList" :key="i" >
-			<el-button @click="doClick(el)">{{el.title}}</el-button>
-		</div>
-		<iframe class="dialog" :style="{display:show?'block': 'none'}" :src="src" width="100%" height="100%"/>
+  <div v-loading="loading" class="demoContainer">
+    <div class="demoPage">
+      <div class="demoTop">
+        <div class="demoTopTitle">教学系统</div>
+      </div>
+      <div class="demoBottom">
+        <div class="demoBottomL">
+          <div class="demoMenuList">
+            <div class="eachDemoMenu">教学计划</div>
+            <div class="eachDemoMenu">公告</div>
+            <div class="eachDemoMenu">评分标准</div>
+            <div class="eachDemoMenu active">课件</div>
+            <div class="eachDemoMenu">讨论区</div>
+          </div>
+        </div>
+        <div class="demoBottomC">
+          <div class="demoBottomCT">课件 > 现地工作站视频 > 教学视频</div>
+          <div class="video_container" />
+        </div>
+        <div class="demoBottomR">
+          <div class="demoBottomRT">实训列表</div>
+          <div v-for="(el, i) in trainingList" :key="i" class="traingList">
+            <div class="eachTraining" @click="doClick(el)">{{ el.title }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <iframe class="dialog" :style="{display:show?'block': 'none'}" :src="src" width="100%" height="100%" />
   </div>
 </template>
 
@@ -13,54 +36,65 @@ import { getToken } from '@/utils/auth';
 export default {
     data() {
         return {
-			src: '',
-			show: false,
-			trainingList: [
-				{
-					title: '全站取消联锁自动触发',
-					id: '4994993'
-				},
-				{
-					title: '2222',
-					id: 1
-				},
-				{
-					title: '33333',
-					id: 1
-				}
-			]
+            // src: `http://localhost:9527/cbtc/trainingPlatform`,
+            src:'',
+            // demoTraining/teach?lessonId=101&mapId=49&lineCode=02&prdType=01&noPreLogout=true&trainingId=4994993&token=${getToken()}
+            show: false,
+            loading:false,
+            trainingList: [
+                {
+                    title: '区段设置限速(TA1006E)',
+                    id: '4994993'
+                },
+                {
+                    title: '道岔封锁(W0103)',
+                    id: '4993549'
+                },
+                {
+                    title: '进路选排(S0916-S0901)',
+                    id: '4991607'
+                }
+            ]
         };
     },
-	mounted() {
-		window.addEventListener('message',  (e) => {
-			// console.log(e, e.data)  //e.data为传递过来的数据
-			// console.log(e.origin)  //e.origin为调用 postMessage 时消息发送方窗口的 origin（域名、协议和端口）
-			// console.log(e.source)  //e.source为对发送消息的窗口对象的引用，可以使用此来在具有不同origin的两个窗口之间建立双向通信
-			this.src = '';
-			this.show = false;
-			this.$nextTick(_ => {
-				const result = e.data;
-				if (result.type == 'DEMO_RESULT' && result.hasOwnProperty('score')) {
-					this.$confirm(`得分：${result.score}分`, "结果", {
-						confirmButtonText: "确定",
-						type:'warning',
-						showCancelButton: false,
-						center: true
-					}).then(_ => {
-					}).catch(_ => {
-					});
-				}
-			})
-		})
-	},
-	destroyed() {
-		window.removeEventListener('message');
-	},
+    mounted() {
+        window.addEventListener('message', (e) => {
+            const result = e.data;
+            if (result.type == 'DEMO_MAP_LOADED') {
+                this.loading = false;
+            } else {
+                this.show = false;
+                this.src = 'http://localhost:9527/cbtc/trainingPlatform';
+                this.$nextTick(_ => {
+                    if (result.type == 'DEMO_RESULT' && result.hasOwnProperty('score')) {
+                        this.$confirm(`得分：${result.score}分`, '结果', {
+                            confirmButtonText: '确定',
+                            type:'warning',
+                            showCancelButton: false,
+                            center: true
+                        }).then(_ => {
+                        }).catch(_ => {
+                        });
+                    }
+                });
+            }
+            // console.log(e, e.data)  //e.data为传递过来的数据
+            // console.log(e.origin)  //e.origin为调用 postMessage 时消息发送方窗口的 origin（域名、协议和端口）
+            // console.log(e.source)  //e.source为对发送消息的窗口对象的引用，可以使用此来在具有不同origin的两个窗口之间建立双向通信
+        });
+    },
+    destroyed() {
+        window.removeEventListener('message');
+    },
     methods: {
-		doClick(el) {
-			this.show = true;
-			this.src = `http://localhost:9527/cbtc/demoTraining/teach?lessonId=101&mapId=49&lineCode=02&prdType=01&noPreLogout=true&trainingId=${el.id}&token=${getToken()}`;
-		}
+        doClick(el) {
+            // &noPreLogout=true
+            this.src = `http://localhost:9527/cbtc/demoTraining/teach?lessonId=101&mapId=49&lineCode=02&prdType=01&trainingId=${el.id}&token=${getToken()}`;
+            this.loading = true;
+            setTimeout(()=>{
+                this.show = true;
+            }, 300);
+        }
     }
 };
 
@@ -73,5 +107,99 @@ export default {
 		right: 0;
 		left: 0;
 		bottom: 0;
+        border: none;
+        width:100%;
+        height:100%;
 	}
+	.demoContainer{
+		width:100%;
+		height: 100%;
+	}
+    .eachTraining{
+        cursor: pointer;
+        &:hover{
+            text-decoration: underline;
+        }
+        margin-top:10px;
+        margin-left: 8px;
+        font-size: 15px;
+    }
+    .traingList{
+
+    }
+    .demoPage{
+        width: 100%;
+        height: 100%;
+    }
+    .demoTop{
+        position:absolute;
+        width: 100%;
+        height: 60px;
+        left:0;
+        top:0;
+        border-bottom: 1px #ccc solid;
+    }
+    .demoBottom{
+        padding-top: 60px;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+    }
+    .demoBottomL{
+        width: 200px;
+        border-right: 1px #ccc solid;
+        padding: 30px 10px;
+        background: #f2f2f2;
+    }
+    .demoBottomC{
+        flex: 1;
+        padding: 20px;
+    }
+    .demoBottomRT{
+        font-size:16px;
+    }
+    .demoBottomR{
+        width: 300px;
+        border-left: 1px #ccc solid;
+        padding: 15px;
+    }
+    .demoBottomCT{
+        font-size: 15px;
+    }
+    .video_container{
+        width: 600px;
+        height: 400px;
+        border: 1px #ccc solid;
+        margin-top: 80px;
+        margin-left: 50%;
+        transform: translateX(-50%);
+    }
+    .demoMenuList{
+        background:#fff;
+        box-shadow: 1px 3px 5px #dedede;
+    }
+    .eachDemoMenu{
+        padding-left: 20px;
+        font-size: 15px;
+        padding-top: 10px;
+        cursor: pointer;
+        padding-bottom: 10px;
+        border-bottom: 1px #f5f5f5 solid;
+        color:#000;
+        &.active{
+            background:#64a3f5;
+            color:#fff;
+        }
+    }
+    .demoTopTitle{
+        font-size: 22px;
+        font-weight: bold;
+        padding: 15px 10px 15px 30px
+    }
+</style>
+<style lang="scss">
+    .demoContainer .el-loading-mask{
+        background-color:rgba(255,255,255,1);
+    }
 </style>
diff --git a/src/views/newMap/displayNew/demoTraining/index.vue b/src/views/newMap/displayNew/demoTraining/index.vue
index 257ef514b..e92ce2594 100644
--- a/src/views/newMap/displayNew/demoTraining/index.vue
+++ b/src/views/newMap/displayNew/demoTraining/index.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="demo" v-loading="loading">
-		<lesson-training v-if="hasGroup"/>
-	</div>
+  <div class="demo">
+    <lesson-training v-if="hasGroup" />
+  </div>
 </template>
 
 <script>
@@ -10,58 +10,57 @@ import { trainingNotifyNew } from '@/api/simulation';
 import { EventBus } from '@/scripts/event-bus';
 
 export default {
-	components: {
-		LessonTraining
-	},
+    components: {
+        LessonTraining
+    },
     data() {
         return {
-			loading: false,
-			result: {
-			}
+            loading: false,
+            result: {
+            }
         };
     },
-	computed: {
-		hasGroup() {
-			return this.$route.query.group;
-		},
-	},
-	watch: {
-		'$route': function() {
-			this.loading = false;
-		}
-	},
+    computed: {
+        hasGroup() {
+            return this.$route.query.group;
+        }
+    },
+    watch: {
+        '$route': function() {
+        },
+        '$store.state.map.mapViewLoadedCount': function (val) {
+            window.parent.postMessage(Object.assign({}, {type: 'DEMO_MAP_LOADED'}), 'http://localhost:9527/cbtc/demo');
+        }
+    },
     async mounted() {
-		await this.createSimulation();
+        await this.createSimulation();
     },
     methods: {
-		async createSimulation() {
-			const lineCode = this.$route.query.lineCode;
-			const mapId = this.$route.query.mapId;
-			const prdType = this.$route.query.prdType;
-			const trainingId = this.$route.query.trainingId;
-			const lessonId = this.$route.query.lessonId;
-			const mode = this.$route.params.mode;
-			const goodsId = '';
+        async createSimulation() {
+            const lineCode = this.$route.query.lineCode;
+            const mapId = this.$route.query.mapId;
+            const prdType = this.$route.query.prdType;
+            const trainingId = this.$route.query.trainingId;
+            const lessonId = this.$route.query.lessonId;
+            const mode = this.$route.params.mode;
+            const goodsId = '';
 
-			this.loading = true;
-			const resp = await trainingNotifyNew({trainingId});
-			if (resp && resp.code == 200) {
-				const query = { lineCode, group: resp.data, prdType, mapId, lessonId, trainingId, goodsId, from: 'kzfmooc', project: 'login', try: '0'};
-				this.$store.dispatch('training/setPrdType', prdType);
-				this.$router.replace({ path: `/demoTraining/${mode}`, query: query });
-				EventBus.$on('demoResult', e => this.exitSimulation(e) );
-			} else if (resp.code == 10003) {
-				this.loading = false;
-				this.$messageBox(this.$t('error.createSimulationFailed') + '：您的仿真权限不足！');
-			} else {
-				this.loading = false;
-				this.$messageBox(this.$t('error.createSimulationFailed') + error.message);
-			};
-		},
-		exitSimulation(result={}) {
-			window.parent.postMessage(Object.assign(result, {type: 'DEMO_RESULT'}), 'http://localhost:9527/cbtc/demo')
-		}
-	}
+            const resp = await trainingNotifyNew({trainingId});
+            if (resp && resp.code == 200) {
+                const query = { lineCode, group: resp.data, prdType, mapId, lessonId, trainingId, goodsId, from: 'kzfmooc', project: 'login', try: '0'};
+                this.$store.dispatch('training/setPrdType', prdType);
+                this.$router.replace({ path: `/demoTraining/${mode}`, query: query });
+                EventBus.$on('demoResult', e => this.exitSimulation(e) );
+            } else if (resp.code == 10003) {
+                this.$messageBox(this.$t('error.createSimulationFailed') + '：您的仿真权限不足！');
+            } else {
+                this.$messageBox(this.$t('error.createSimulationFailed') + resp.error.message);
+            }
+        },
+        exitSimulation(result = {}) {
+            window.parent.postMessage(Object.assign(result, {type: 'DEMO_RESULT'}), 'http://localhost:9527/cbtc/demo');
+        }
+    }
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/newMap/displayNew/index.vue b/src/views/newMap/displayNew/index.vue
index bb984d175..5871bd1f2 100644
--- a/src/views/newMap/displayNew/index.vue
+++ b/src/views/newMap/displayNew/index.vue
@@ -4,11 +4,11 @@
       <transition name="el-zoom-in-bottom">
         <map-system-draft ref="mapCanvas" @back="back" />
       </transition>
-      <menu-demon v-if="isDemon" ref="menuDemon" :offset="offset" :offset-bottom="offsetBottom" :data-error="dataError" :text-status-height="textStatusHeight" @start="start" @end="end"/>
-      <menu-lesson v-if="isLesson" ref="lessonMenu" :offset="offset" :data-error="dataError" :offset-bottom="offsetBottom" :tip-bottom="tipBottom"/>
-      <menu-exam v-if="isExam" ref="menuExam" :offset="offset" :data-error="dataError" :offset-bottom="offsetBottom"/>
-      <menu-script v-if="isScript" ref="menuScript" :offset-bottom="offsetBottom" :offset="offset" :text-status-height="textStatusHeight" :data-error="dataError" @start="start" @end="end"/>
-      <menu-dispather-contest v-if="isContest" ref="menuDispatherContest" :offset="offset" :offset-bottom="offsetBottom" :data-error="dataError" :text-status-height="textStatusHeight" @start="start" @end="end"/>
+      <menu-demon v-if="isDemon" ref="menuDemon" :offset="offset" :offset-bottom="offsetBottom" :data-error="dataError" :text-status-height="textStatusHeight" @start="start" @end="end" />
+      <menu-lesson v-if="isLesson" ref="lessonMenu" :offset="offset" :data-error="dataError" :offset-bottom="offsetBottom" :tip-bottom="tipBottom" />
+      <menu-exam v-if="isExam" ref="menuExam" :offset="offset" :data-error="dataError" :offset-bottom="offsetBottom" />
+      <menu-script v-if="isScript" ref="menuScript" :offset-bottom="offsetBottom" :offset="offset" :text-status-height="textStatusHeight" :data-error="dataError" @start="start" @end="end" />
+      <menu-dispather-contest v-if="isContest" ref="menuDispatherContest" :offset="offset" :offset-bottom="offsetBottom" :data-error="dataError" :text-status-height="textStatusHeight" @start="start" @end="end" />
     </template>
     <menu-train-list v-if="isDemon||isContest||isScript" />
     <menu-system-time ref="menuSystemTime" :offset="offset" :group="group" />
@@ -98,8 +98,8 @@ export default {
                 }
             });
         },
-		// 此处代码似乎没什么用，之前从menuSchema复制过来的
-		'$store.state.training.prdType':function(val) {
+        // 此处代码似乎没什么用，之前从menuSchema复制过来的
+        '$store.state.training.prdType':function(val) {
             if (val == '01') { this.switchModeInner('01'); } else { this.switchModeInner('02'); }
         },
         '$store.state.config.menuBarLoadedCount': function (val) { // menuBar加载完成
@@ -217,8 +217,8 @@ export default {
                 this.dataError = resp.data.dataError;
             }
         },
-		// 通过showMode切换显示效果
-		switchModeInner(swch) {
+        // 通过showMode切换显示效果
+        switchModeInner(swch) {
             let showMode = '03';
             if (swch == '01') {
                 showMode = '03';
@@ -238,7 +238,7 @@ export default {
             });
 
             if (swch == '01') {
-				this.$jlmap.updateShowStation(list, this.$store.state.training.centerStationCode); // 显示全部元素
+                this.$jlmap.updateShowStation(list, this.$store.state.training.centerStationCode); // 显示全部元素
             } else {
                 this.$jlmap.updateShowStation(list, ''); // 显示全部元素
             }
diff --git a/src/views/newMap/displayNew/lesson/index.vue b/src/views/newMap/displayNew/lesson/index.vue
index f057c8cb0..f5d062aa3 100644
--- a/src/views/newMap/displayNew/lesson/index.vue
+++ b/src/views/newMap/displayNew/lesson/index.vue
@@ -67,7 +67,7 @@ export default {
     },
     data() {
         return {
-			result: {},
+            result: {},
             timeInterval: null,
             TrainingMode: TrainingMode,
             trainingObj:{},
@@ -108,9 +108,9 @@ export default {
         project() {
             return getSessionStorage('project');
         },
-		isOther() {
-			return this.$route.query.from == 'kzfmooc';
-		}
+        isOther() {
+            return this.$route.query.from == 'kzfmooc';
+        }
     },
     watch: {
         demoMode: function (val) {
@@ -159,7 +159,7 @@ export default {
             }
         },
         setTrainingData(resp) {
-			const detail = resp.data;
+            const detail = resp.data;
             this.trainingObj = detail;
             this.$store.dispatch('exam/setCenter', detail.locateDeviceCode);
             this.$store.dispatch('training/setTrainingData', this.trainingObj); // 设置实训教学信息
@@ -228,7 +228,7 @@ export default {
             };
             endTrainingNew(mode, this.group).then(response => {
                 const data = response.data;
-				this.result = data;
+                this.result = data;
                 this.$store.dispatch('training/judgeFinish', data).then(rsp => {
                     this.$store.dispatch('training/setStopCountTime');
                     this.$store.dispatch('training/emitTipFresh');
@@ -262,7 +262,7 @@ export default {
                                 usedTime: this.usedTime
                             };
                             endTrainingNew(mode, this.group).then(response => {
-								this.result = response.data;
+                                this.result = response.data;
                                 this.$store.dispatch('training/end', null);
                                 this.$store.dispatch('training/setStopCountTime');
                                 this.$store.dispatch('training/setScore', 0);
@@ -281,9 +281,9 @@ export default {
         },
         back() {
             Notification.closeAll();
-			if (this.isOther) {
-				EventBus.$emit('demoResult', this.result);
-			} else if (this.$route.params.mode == 'record') {
+            if (this.isOther) {
+                EventBus.$emit('demoResult', this.result);
+            } else if (this.$route.params.mode == 'record') {
                 /** 如果是演示返回时，需要重新创建仿真*/
                 trainingNotifyNew({ trainingId: this.$route.query.trainingId }).then(resp => {
                     this.$router.push({ path: `${UrlConfig.lesson.record}/${this.$route.query.trainingId}/${this.$route.query.trainingName}`, query: { group: resp.data } });
diff --git a/src/views/newMap/jlmapNew/index.vue b/src/views/newMap/jlmapNew/index.vue
index cb2985d6b..19287cbd8 100644
--- a/src/views/newMap/jlmapNew/index.vue
+++ b/src/views/newMap/jlmapNew/index.vue
@@ -176,12 +176,12 @@ export default {
                     if (deviceModel.centralized) {
                         stationModel = deviceModel;
                     } else {
-						this.$store.state.map.map.stationList.forEach(it => {
-							(it.chargeStationCodeList||[]).forEach(code => {
-								if (code === deviceModel.code) {
-									stationModel = it;
-								}
-							});
+                        this.$store.state.map.map.stationList.forEach(it => {
+                            (it.chargeStationCodeList || []).forEach(code => {
+                                if (code === deviceModel.code) {
+                                    stationModel = it;
+                                }
+                            });
                         });
                     }
 
@@ -237,7 +237,7 @@ export default {
                 this.previewOrMapDraw = true;
             }
             const prdType = this.$store.state.training.prdType;
-			const showMode = { '01': '03', '02': '02'}[prdType]||'';
+            const showMode = { '01': '03', '02': '02'}[prdType] || '';
 
             Vue.prototype.$theme = new Theme();
             Vue.prototype.$jlmap = new Jlmap({