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

src/views/demo/index.vue

@@ -1,7 +1,30 @@
 <template>
-  <div>
-		<div v-for="(el, i) in trainingList" :key="i" >
-			<el-button @click="doClick(el)">{{el.title}}</el-button>
+  <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>
@@ -13,36 +36,39 @@ import { getToken } from '@/utils/auth';
 export default {
     data() {
         return {
+            // 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: '全站取消联锁自动触发',
+                    title: '区段设置限速(TA1006E)',
                     id: '4994993'
                 },
                 {
-					title: '2222',
-					id: 1
+                    title: '道岔封锁(W0103)',
+                    id: '4993549'
                 },
                 {
-					title: '33333',
-					id: 1
+                    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_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: "确定",
+                        this.$confirm(`得分：${result.score}分`, '结果', {
+                            confirmButtonText: '确定',
                             type:'warning',
                             showCancelButton: false,
                             center: true
@@ -50,16 +76,24 @@ export default {
                         }).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) {
+            // &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;
-			this.src = `http://localhost:9527/cbtc/demoTraining/teach?lessonId=101&mapId=49&lineCode=02&prdType=01&noPreLogout=true&trainingId=${el.id}&token=${getToken()}`;
+            }, 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>

src/views/newMap/displayNew/demoTraining/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="demo" v-loading="loading">
+  <div class="demo">
     <lesson-training v-if="hasGroup" />
   </div>
 </template>
@@ -23,11 +23,13 @@ export default {
     computed: {
         hasGroup() {
             return this.$route.query.group;
-		},
+        }
     },
     watch: {
         '$route': function() {
-			this.loading = false;
+        },
+        '$store.state.map.mapViewLoadedCount': function (val) {
+            window.parent.postMessage(Object.assign({}, {type: 'DEMO_MAP_LOADED'}), 'http://localhost:9527/cbtc/demo');
         }
     },
     async mounted() {
@@ -43,7 +45,6 @@ export default {
             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'};
@@ -51,15 +52,13 @@ export default {
                 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);
-			};
+                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')
+            window.parent.postMessage(Object.assign(result, {type: 'DEMO_RESULT'}), 'http://localhost:9527/cbtc/demo');
         }
     }
 };