From 72d0bb084fa7cca1d0e87fb6d545b121bcbf5721 Mon Sep 17 00:00:00 2001
From: sunzhenyu <sunzhenyu@joylink.club>
Date: Fri, 16 Apr 2021 13:18:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=89=E7=BB=B4=E5=8D=95?=
 =?UTF-8?q?=E4=BD=93=E8=AE=BE=E5=A4=87=E4=BF=A1=E5=8F=B7=E6=9C=BA=E4=BA=AE?=
 =?UTF-8?q?=E7=81=AF=E9=80=BB=E8=BE=91=EF=BC=8C=E4=BF=AE=E6=94=B9=E4=B8=89?=
 =?UTF-8?q?=E7=BB=B4=E8=AF=BE=E7=A8=8B=E7=BC=96=E8=BE=91=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/jlmap3d/jl3ddevice/jl3ddeviceNew.js       |  78 +++---
 src/router/index.js                           |   7 +
 src/views/jlmap3d/lesson3d/lesson3dshow.vue   |  75 ------
 .../lesson3dedit/component/property.vue       |  10 +-
 .../jlmap3d/lesson3dedit/lesson3dedit.vue     |   6 +-
 .../jlmap3d/lesson3dplayer/lesson3dplayer.vue | 241 ++++++++++++++++++
 .../lesson3dplayer/tools/actiontips.vue       |  71 ++++++
 .../lesson3dplayer/tools/errortips.vue        |  71 ++++++
 .../lesson3dplayer/tools/explainpane.vue      |  84 ++++++
 .../jlmap3d/lesson3dplayer/tools/jobpane.vue  | 206 +++++++++++++++
 .../lesson3dplayer/tools/processlog.vue       |  82 ++++++
 .../lesson3dplayer/tools/stepstips.vue        |  75 ++++++
 .../jlmap3d/lesson3dplayer/tools/toolbar.vue  | 201 +++++++++++++++
 13 files changed, 1092 insertions(+), 115 deletions(-)
 delete mode 100644 src/views/jlmap3d/lesson3d/lesson3dshow.vue
 create mode 100644 src/views/jlmap3d/lesson3dplayer/lesson3dplayer.vue
 create mode 100644 src/views/jlmap3d/lesson3dplayer/tools/actiontips.vue
 create mode 100644 src/views/jlmap3d/lesson3dplayer/tools/errortips.vue
 create mode 100644 src/views/jlmap3d/lesson3dplayer/tools/explainpane.vue
 create mode 100644 src/views/jlmap3d/lesson3dplayer/tools/jobpane.vue
 create mode 100644 src/views/jlmap3d/lesson3dplayer/tools/processlog.vue
 create mode 100644 src/views/jlmap3d/lesson3dplayer/tools/stepstips.vue
 create mode 100644 src/views/jlmap3d/lesson3dplayer/tools/toolbar.vue

diff --git a/src/jlmap3d/jl3ddevice/jl3ddeviceNew.js b/src/jlmap3d/jl3ddevice/jl3ddeviceNew.js
index 5ed51299c..c535b5fef 100644
--- a/src/jlmap3d/jl3ddevice/jl3ddeviceNew.js
+++ b/src/jlmap3d/jl3ddevice/jl3ddeviceNew.js
@@ -509,26 +509,28 @@ export function Jl3ddeviceNew(dom,group,token,skinCode) {
 
 		}
 		if (data.type == "SIGNAL") {//从上往下红绿黄
+
 			if(data.red == 1){
-				scope.modelmanager.signalmodel.mesh.children[0].material.map = scope.signallights["red"];
-				scope.modelmanager.signalmodel.mesh.children[0].material.map.needsUpdate = true;
+				scope.modelmanager.signalmodel.mesh.getObjectByName("d3d001").material.map = scope.signallights["red"];
+				scope.modelmanager.signalmodel.mesh.getObjectByName("d3d001").material.map.needsUpdate = true;
 			}else{
-				scope.modelmanager.signalmodel.mesh.children[0].material.map = scope.signallights["black"];
-				scope.modelmanager.signalmodel.mesh.children[0].material.map.needsUpdate = true;
+				scope.modelmanager.signalmodel.mesh.getObjectByName("d3d001").material.map = scope.signallights["black"];
+				scope.modelmanager.signalmodel.mesh.getObjectByName("d3d001").material.map.needsUpdate = true;
 			}
 			if(data.yellow == 1){
-				scope.modelmanager.signalmodel.mesh.children[2].material.map = scope.signallights["yellow"];
-				scope.modelmanager.signalmodel.mesh.children[2].material.map.needsUpdate = true;
+				scope.modelmanager.signalmodel.mesh.getObjectByName("d3d002").material.map = scope.signallights["yellow"];
+				scope.modelmanager.signalmodel.mesh.getObjectByName("d3d002").material.map.needsUpdate = true;
 			}else{
-				scope.modelmanager.signalmodel.mesh.children[2].material.map = scope.signallights["black"];
-				scope.modelmanager.signalmodel.mesh.children[2].material.map.needsUpdate = true;
+				scope.modelmanager.signalmodel.mesh.getObjectByName("d3d003").material.map = scope.signallights["black"];
+				scope.modelmanager.signalmodel.mesh.getObjectByName("d3d003").material.map.needsUpdate = true;
 			}
 			if(data.green == 1){
-				scope.modelmanager.signalmodel.mesh.children[1].material.map = scope.signallights["green"];
-				scope.modelmanager.signalmodel.mesh.children[1].material.map.needsUpdate = true;
+
+				scope.modelmanager.signalmodel.mesh.getObjectByName("d3d003").material.map = scope.signallights["green"];
+				scope.modelmanager.signalmodel.mesh.getObjectByName("d3d003").material.map.needsUpdate = true;
 			}else{
-				scope.modelmanager.signalmodel.mesh.children[1].material.map = scope.signallights["black"];
-				scope.modelmanager.signalmodel.mesh.children[1].material.map.needsUpdate = true;
+				scope.modelmanager.signalmodel.mesh.getObjectByName("d3d003").material.map = scope.signallights["black"];
+				scope.modelmanager.signalmodel.mesh.getObjectByName("d3d003").material.map.needsUpdate = true;
 			}
 		}
 
@@ -541,7 +543,7 @@ export function Jl3ddeviceNew(dom,group,token,skinCode) {
 					scope.modelmanager.standmodel.action.time = 0;
 					scope.modelmanager.standmodel.action.timeScale = 1;
 					scope.modelmanager.standmodel.action.play();
-					console.log(data);
+
 					localVoicePlay("开往"+psdVoiceStationList[data.code].finlStationName+"方向的列车进站了！");
 				}
 
@@ -562,12 +564,12 @@ export function Jl3ddeviceNew(dom,group,token,skinCode) {
 	this.deviceFaultSet = function (data) {
 
 		if (data.type == "SIGNAL") {//从上往下红绿黄
-			scope.modelmanager.signalmodel.mesh.children[0].material.map = scope.signallights["black"];
-			scope.modelmanager.signalmodel.mesh.children[0].material.map.needsUpdate = true;
-			scope.modelmanager.signalmodel.mesh.children[2].material.map = scope.signallights["black"];
-			scope.modelmanager.signalmodel.mesh.children[2].material.map.needsUpdate = true;
-			scope.modelmanager.signalmodel.mesh.children[1].material.map = scope.signallights["black"];
-			scope.modelmanager.signalmodel.mesh.children[1].material.map.needsUpdate = true;
+			scope.modelmanager.signalmodel.mesh.getObjectByName("d3d001").material.map = scope.signallights["black"];
+			scope.modelmanager.signalmodel.mesh.getObjectByName("d3d001").material.map.needsUpdate = true;
+			scope.modelmanager.signalmodel.mesh.getObjectByName("d3d002").material.map = scope.signallights["black"];
+			scope.modelmanager.signalmodel.mesh.getObjectByName("d3d002").material.map.needsUpdate = true;
+			scope.modelmanager.signalmodel.mesh.getObjectByName("d3d003").material.map = scope.signallights["black"];
+			scope.modelmanager.signalmodel.mesh.getObjectByName("d3d003").material.map.needsUpdate = true;
 		}
 		if (data.type == "PSD" || data.type == "STAND") {
 			scope.modelmanager.standmodel.screenDoorOpenStatus = "0";
@@ -653,35 +655,37 @@ export function Jl3ddeviceNew(dom,group,token,skinCode) {
 		}
 
 		if (data._type == "Signal") {
+
 			if(data.logicLight == 0){
 				if(data.redOpen == 1){
-					scope.modelmanager.signalmodel.mesh.children[0].material.map = scope.signallights["red"];
-					scope.modelmanager.signalmodel.mesh.children[0].material.map.needsUpdate = true;
+
+					scope.modelmanager.signalmodel.mesh.getObjectByName("d3d001").material.map = scope.signallights["red"];
+					scope.modelmanager.signalmodel.mesh.getObjectByName("d3d001").material.map.needsUpdate = true;
 				}else{
-					scope.modelmanager.signalmodel.mesh.children[0].material.map = scope.signallights["black"];
-					scope.modelmanager.signalmodel.mesh.children[0].material.map.needsUpdate = true;
+					scope.modelmanager.signalmodel.mesh.getObjectByName("d3d001").material.map = scope.signallights["black"];
+					scope.modelmanager.signalmodel.mesh.getObjectByName("d3d001").material.map.needsUpdate = true;
 				}
 				if(data.yellowOpen == 1){
-					scope.modelmanager.signalmodel.mesh.children[2].material.map = scope.signallights["yellow"];
-					scope.modelmanager.signalmodel.mesh.children[2].material.map.needsUpdate = true;
+					scope.modelmanager.signalmodel.mesh.getObjectByName("d3d002").material.map = scope.signallights["yellow"];
+					scope.modelmanager.signalmodel.mesh.getObjectByName("d3d002").material.map.needsUpdate = true;
 				}else{
-					scope.modelmanager.signalmodel.mesh.children[2].material.map = scope.signallights["black"];
-					scope.modelmanager.signalmodel.mesh.children[2].material.map.needsUpdate = true;
+					scope.modelmanager.signalmodel.mesh.getObjectByName("d3d002").material.map = scope.signallights["black"];
+					scope.modelmanager.signalmodel.mesh.getObjectByName("d3d002").material.map.needsUpdate = true;
 				}
 				if(data.greenOpen == 1){
-					scope.modelmanager.signalmodel.mesh.children[1].material.map = scope.signallights["green"];
-					scope.modelmanager.signalmodel.mesh.children[1].material.map.needsUpdate = true;
+					scope.modelmanager.signalmodel.mesh.getObjectByName("d3d003").material.map = scope.signallights["green"];
+					scope.modelmanager.signalmodel.mesh.getObjectByName("d3d003").material.map.needsUpdate = true;
 				}else{
-					scope.modelmanager.signalmodel.mesh.children[1].material.map = scope.signallights["black"];
-					scope.modelmanager.signalmodel.mesh.children[1].material.map.needsUpdate = true;
+					scope.modelmanager.signalmodel.mesh.getObjectByName("d3d003").material.map = scope.signallights["black"];
+					scope.modelmanager.signalmodel.mesh.getObjectByName("d3d003").material.map.needsUpdate = true;
 				}
 			}else{
-				scope.modelmanager.signalmodel.mesh.children[0].material.map = scope.signallights["black"];
-				scope.modelmanager.signalmodel.mesh.children[0].material.map.needsUpdate = true;
-				scope.modelmanager.signalmodel.mesh.children[1].material.map = scope.signallights["black"];
-				scope.modelmanager.signalmodel.mesh.children[1].material.map.needsUpdate = true;
-				scope.modelmanager.signalmodel.mesh.children[2].material.map = scope.signallights["black"];
-				scope.modelmanager.signalmodel.mesh.children[2].material.map.needsUpdate = true;
+				scope.modelmanager.signalmodel.mesh.getObjectByName("d3d001").material.map = scope.signallights["black"];
+				scope.modelmanager.signalmodel.mesh.getObjectByName("d3d001").material.map.needsUpdate = true;
+				scope.modelmanager.signalmodel.mesh.getObjectByName("d3d002").material.map = scope.signallights["black"];
+				scope.modelmanager.signalmodel.mesh.getObjectByName("d3d002").material.map.needsUpdate = true;
+				scope.modelmanager.signalmodel.mesh.getObjectByName("d3d003").material.map = scope.signallights["black"];
+				scope.modelmanager.signalmodel.mesh.getObjectByName("d3d003").material.map.needsUpdate = true;
 			}
 		}
 
diff --git a/src/router/index.js b/src/router/index.js
index 6ecd3baea..e506b6077 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -14,6 +14,8 @@ const AuthorList = () => import('@/views/authorization/list');
 const Jlmap3dedit = () => import('@/views/jlmap3d/edit/jlmap3dedit');
 const Jlmap3dAssetManager = () => import('@/views/jlmap3d/jl3dassetmanager/assetmanager');
 const Jlmap3dLesson3dEdit = () => import('@/views/jlmap3d/lesson3dedit/lesson3dedit');
+const Jlmap3dLesson3dPlayer = () => import('@/views/jlmap3d/lesson3dplayer/lesson3dplayer');
+
 const Jlmap3d = () => import('@/views/jlmap3d/drive/jl3ddrive');
 const Jlmap3dSandbox = () => import('@/views/jlmap3d/simulation/jl3dsimulation');
 const Jlmap3dPassFlow = () => import('@/views/jlmap3d/passflow/jl3dpassflow');
@@ -259,6 +261,11 @@ export const constantRoutes = [
         component: Jlmap3dLesson3dEdit,
         hidden: true
     },
+    {
+        path: '/design/jlmap3d/lesson3dplayer',
+        component: Jlmap3dLesson3dPlayer,
+        hidden: true
+    },
     {
         path: '/data2json',
         component: () => import('@/views/planMonitor/data2json/page.vue'),
diff --git a/src/views/jlmap3d/lesson3d/lesson3dshow.vue b/src/views/jlmap3d/lesson3d/lesson3dshow.vue
deleted file mode 100644
index c9eaaf43e..000000000
--- a/src/views/jlmap3d/lesson3d/lesson3dshow.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-
-  <div id="lesson3ddiv" class="lesson3ddiv">
-
-    <div id="lesson3ddraw" class="lesson3ddraw">
-    </div>
-
-
-    <canvas id="canvastexture" width="128px" height="64px"></canvas>
-  </div>
-
-
-
-</template>
-<script>
-  import Vue from 'vue';
-  import localStore from 'storejs';
-
-
-  
-
-  var train;
-  export default {
-    name: 'Lesson3dEdit',
-    components: {
-
-    },
-    data() {
-      return {
-
-      }
-    },
-    computed: {
-
-    },
-    watch: {
-
-    },
-    mounted() {
-
-    },
-    beforeDestroy() {
-
-    },
-    methods: {
-
-
-    },
-
-  }
-</script>
-
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  @import "src/styles/mixin.scss";
-
-  * {
-    touch-action: none;
-  }
-
-  .lesson3ddiv {
-
-    width: 100%;
-    height: 100%;
-  }
-
-  .lesson3ddraw {
-    float: left;
-    //left:20%;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-inde: -1;
-  }
-</style>
diff --git a/src/views/jlmap3d/lesson3dedit/component/property.vue b/src/views/jlmap3d/lesson3dedit/component/property.vue
index c359a5446..241450d19 100644
--- a/src/views/jlmap3d/lesson3dedit/component/property.vue
+++ b/src/views/jlmap3d/lesson3dedit/component/property.vue
@@ -49,8 +49,8 @@
              </el-option>
            </el-select>
 
-           <el-button v-if="selectLesson3dControl" @click="">重置镜头位置</el-button>
-            <el-button v-if="selectLesson3dControl" @click="">记录初始镜头位置</el-button>
+           <el-button v-if="selectLesson3dControl" @click="resetCamera">重置镜头位置</el-button>
+            <el-button v-if="selectLesson3dControl" @click="recordCamera">记录初始镜头位置</el-button>
         </el-form>
       </el-tab-pane>
 
@@ -273,6 +273,12 @@
       },
       updateData(){
         // this.lessonData.lessonData.lessonProgress[this.lessonEditIndex].stepTipsData;
+      },
+      resetCamera(){
+
+      },
+      recordCamera(){
+
       },
       lesson3dUpdatePicurl(picAsset){
         if(this.selectType == "explainpane"){
diff --git a/src/views/jlmap3d/lesson3dedit/lesson3dedit.vue b/src/views/jlmap3d/lesson3dedit/lesson3dedit.vue
index ba515d481..9f3c14906 100644
--- a/src/views/jlmap3d/lesson3dedit/lesson3dedit.vue
+++ b/src/views/jlmap3d/lesson3dedit/lesson3dedit.vue
@@ -58,7 +58,7 @@
         <el-button @click="setupclick">课程设置</el-button>
       </el-row>
       <el-row>
-        <el-button>预览课程</el-button>
+        <el-button @click="jumpPlayer">预览课程</el-button>
       </el-row>
       <el-row>
         <el-button @click="saveLesson3dData">保存当前课程</el-button>
@@ -252,6 +252,10 @@
         this.triggerList = newTriggerList;
         console.log(this.triggerList);
       },
+      jumpPlayer(){
+        this.$router.push({ path: '/design/jlmap3d/lesson3dplayer', query: {lessonId: this.$route.query.lessonId} });
+
+      },
     },
 
   }
diff --git a/src/views/jlmap3d/lesson3dplayer/lesson3dplayer.vue b/src/views/jlmap3d/lesson3dplayer/lesson3dplayer.vue
new file mode 100644
index 000000000..8d60af054
--- /dev/null
+++ b/src/views/jlmap3d/lesson3dplayer/lesson3dplayer.vue
@@ -0,0 +1,241 @@
+<template>
+
+  <div id="lesson3ddiv" class="lesson3ddiv">
+
+    <div class="lesson3dplayer">
+      <Step-Tips
+        :lessonData='lessonData'
+        :lessonEditIndex='lessonEditIndex'
+        v-show="lessonTools[0].isShow && lessonData.lessonData.lessonProgress[lessonEditIndex].progressScene == 'standstation'">
+      </Step-Tips>
+
+      <Process-Log
+        v-show="lessonTools[1].isShow && lessonData.lessonData.lessonProgress[lessonEditIndex].progressScene == 'standstation'">
+      </Process-Log>
+
+      <Explain-Pane
+        :lessonData='lessonData'
+        :lessonEditIndex='lessonEditIndex'
+        v-show="lessonTools[2].isShow && lessonData.lessonData.lessonProgress[lessonEditIndex].progressScene == 'standstation'">
+      </Explain-Pane>
+
+      <Job-Pane
+        :jobPaneData='jobPaneData'
+        :lessonData='lessonData'
+        :lessonEditIndex='lessonEditIndex'
+        ref="jobpane"
+        v-show="lessonTools[3].isShow && lessonData.lessonData.lessonProgress[lessonEditIndex].progressScene == 'standstation'">
+      </Job-Pane>
+
+      <Tool-Bar v-show="lessonTools[4].isShow && lessonData.lessonData.lessonProgress[lessonEditIndex].progressScene == 'standstation'"></Tool-Bar>
+
+      <div id="lesson3ddraw" class="lesson3ddraw">
+      </div>
+    </div>
+
+    <canvas id="canvastexture" width="128px" height="64px"></canvas>
+  </div>
+
+</template>
+<script>
+  import Vue from 'vue';
+  import localStore from 'storejs';
+
+  // import AssetsModel from '@/views/jlmap3d/lesson3dedit/component/assetsmodel';
+
+  import StepTips from '@/views/jlmap3d/lesson3dplayer/tools/stepstips';
+  import ProcessLog from '@/views/jlmap3d/lesson3dplayer/tools/processlog';
+  import ExplainPane from '@/views/jlmap3d/lesson3dplayer/tools/explainpane';
+  import JobPane from '@/views/jlmap3d/lesson3dplayer/tools/jobpane';
+  import ToolBar from '@/views/jlmap3d/lesson3dplayer/tools/toolbar';
+
+
+  import { Lesson3dEditor } from '@/jlmap3d/lesson3dedit/lesson3deditor.js';
+
+  import { LessonData } from '@/jlmap3d/lesson3dedit/model/lessondata.js';
+  import { JobPaneData } from '@/jlmap3d/lesson3dedit/toolsmodel/jobpanedata.js';
+
+  import { getLesson3dData,updateLesson3dData } from '@/api/jmap/lesson3d';
+  export default {
+    name: 'Lesson3dPlayer',
+    components: {
+
+      // AssetsModel,
+
+      StepTips,
+      ProcessLog,
+      ExplainPane,
+      JobPane,
+      ToolBar
+    },
+    data() {
+      return {
+        jl3d: null,
+        netData:{
+          name:'',
+          type:'',
+          data:{},
+        },
+        triggerList:[],
+        lessonData:{
+          lessonData:{
+            lessonProgress:[
+
+            ]
+          }
+        },
+        jobPaneData:{},
+        lessonEditIndex:0,
+        lessonTools:[
+          {
+            name:"步骤组件",
+            isShow:false,
+          },
+          {
+            name:"步骤进程日志",
+            isShow:false,
+          },
+          {
+            name:"步骤提示组件",
+            isShow:false,
+          },
+          {
+            name:"岗位联络操作",
+            isShow:false,
+          },
+          {
+            name:"导航工具栏",
+            isShow:false,
+          },
+        ],
+      }
+    },
+    computed: {
+
+    },
+    watch: {
+
+    },
+    mounted() {
+      window.updateTriggerList = this.updateTriggerList;
+
+      this.init(this.$route.query.lessonId);
+    },
+    beforeDestroy() {
+
+    },
+    methods: {
+      init(lessonId){
+
+        getLesson3dData(lessonId).then(data => {
+          this.netData.name = data.data.name;
+          this.netData.type = data.data.type;
+
+          let dom = document.getElementById('lesson3ddraw');
+
+          this.lessonData = new LessonData();
+          this.jobPaneData = new JobPaneData();
+          let loadData;
+          if(data.data.data){
+            loadData = JSON.parse(data.data.data);
+            console.log(loadData);
+
+            this.jobPaneData.dataList = loadData.toolJobPane;
+            this.$refs.jobpane.initJobList(this.jobPaneData.dataList);
+
+            this.lessonTools = loadData.lessonTools;
+            this.lessonData.loadLessonProgress(loadData.lessonProgress);
+          }else{
+            this.lessonData.initLessonProgress();
+            this.$refs.jobpane.initJobList(this.jobPaneData.dataList);
+          }
+          console.log("loaddata----------------");
+          console.log(loadData);
+          this.jl3d = new Lesson3dEditor(dom,loadData);
+        }).catch(() => {
+        });
+      },
+
+      saveLesson3dData(){
+        this.lessonData.lessonData.lessonTools = this.lessonTools;
+        let saveData = this.lessonData.lessonData;
+        saveData.toolJobPane = this.jobPaneData.dataList;
+
+        let assetModelData = this.jl3d.saveAssetModel();
+        saveData.assetList = assetModelData.assetList;
+        saveData.modelList = assetModelData.modelList;
+
+        this.netData.data = JSON.stringify(saveData);
+        // console.log();
+        updateLesson3dData(this.$route.query.lessonId,this.netData).then(data => {
+          console.log(data);
+        }).catch(() => {
+        });
+      },
+
+
+      updateTriggerList(newTriggerList){
+        this.triggerList = newTriggerList;
+        console.log(this.triggerList);
+      },
+    },
+
+  }
+</script>
+
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+
+  * {
+    touch-action: none;
+  }
+
+  .lesson3ddiv {
+
+    width: 100%;
+    height: 100%;
+  }
+
+  .lesson3dplayer{
+      width:100%;
+      height:100%;
+      position: absolute;
+      // top: 0;
+      // left:15%;
+      // border:solid 2px #000;
+  }
+  .lesson3ddraw {
+    float: left;
+    //left:20%;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-inde: -1;
+  }
+
+  .activediv{
+    position: absolute;
+    width: 15%;
+    height:100%;
+    left:0;
+
+    border-radius:10px;
+    border:solid 2px #000;
+  }
+
+  .lessonsetup {
+    position: absolute;
+    width: 15%;
+    height: 20%;
+    right:0;
+    top:0;
+    border-radius:10px;
+    border:solid 2px #000;
+    text-align:center;
+  }
+
+  .el-tabs__content{
+    position: absolute;
+  }
+</style>
diff --git a/src/views/jlmap3d/lesson3dplayer/tools/actiontips.vue b/src/views/jlmap3d/lesson3dplayer/tools/actiontips.vue
new file mode 100644
index 000000000..781be9fb7
--- /dev/null
+++ b/src/views/jlmap3d/lesson3dplayer/tools/actiontips.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="stepstipsdiv" >
+    <div class="stepstipstittle" >
+      {{tipsTittle}}
+    </div>
+    <div class="stepstipstext" >
+      {{tipsText}}
+    </div>
+  </div>
+</template>
+<script>
+  import Vue from 'vue';
+  import localStore from 'storejs';
+	import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
+  //操作提示
+  export default {
+    name: 'ActionTips',
+    components: {
+
+    },
+    data() {
+      return {
+        tipsTittle:"步骤一",
+        tipsText:"步骤一",
+      }
+    },
+    computed: {
+
+    },
+    watch: {
+
+    },
+    mounted() {
+
+    },
+    beforeDestroy() {
+
+    },
+    methods: {
+
+
+
+    },
+
+  }
+</script>
+
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .stepstipsdiv {
+    position: absolute;
+    width: 20%;
+    height: 20%;
+    left:0;
+    top:0;
+    border-radius:10px;
+    border:solid 2px #000;
+    background-color: #fff;
+    z-index:1;
+  }
+  .stepstipstittle{
+    text-align: center;
+    font-size: 20px;
+  }
+  .stepstipstext{
+    font-size: 16px;
+  }
+
+
+</style>
diff --git a/src/views/jlmap3d/lesson3dplayer/tools/errortips.vue b/src/views/jlmap3d/lesson3dplayer/tools/errortips.vue
new file mode 100644
index 000000000..adfb3b9ab
--- /dev/null
+++ b/src/views/jlmap3d/lesson3dplayer/tools/errortips.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="stepstipsdiv" >
+    <div class="stepstipstittle" >
+      {{tipsTittle}}
+    </div>
+    <div class="stepstipstext" >
+      {{tipsText}}
+    </div>
+  </div>
+</template>
+<script>
+  import Vue from 'vue';
+  import localStore from 'storejs';
+	import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
+  //报错警告提示
+  export default {
+    name: 'ErrorTips',
+    components: {
+
+    },
+    data() {
+      return {
+        tipsTittle:"步骤一",
+        tipsText:"步骤一",
+      }
+    },
+    computed: {
+
+    },
+    watch: {
+
+    },
+    mounted() {
+
+    },
+    beforeDestroy() {
+
+    },
+    methods: {
+
+
+
+    },
+
+  }
+</script>
+
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .stepstipsdiv {
+    position: absolute;
+    width: 20%;
+    height: 20%;
+    left:0;
+    top:0;
+    border-radius:10px;
+    border:solid 2px #000;
+    background-color: #fff;
+    z-index:1;
+  }
+  .stepstipstittle{
+    text-align: center;
+    font-size: 20px;
+  }
+  .stepstipstext{
+    font-size: 16px;
+  }
+
+
+</style>
diff --git a/src/views/jlmap3d/lesson3dplayer/tools/explainpane.vue b/src/views/jlmap3d/lesson3dplayer/tools/explainpane.vue
new file mode 100644
index 000000000..e24bb0413
--- /dev/null
+++ b/src/views/jlmap3d/lesson3dplayer/tools/explainpane.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="explainpanediv" v-if="lessonData.lessonData.lessonProgress[lessonEditIndex]" @click="selectTool">
+    <div class="explainpanetittle" >
+      {{lessonData.lessonData.lessonProgress[lessonEditIndex].explainPane.tittle}}
+    </div>
+    <div class="explainpanepic" :style="{'background-image': 'url('+localStatic+lessonData.lessonData.lessonProgress[lessonEditIndex].explainPane.picurl+')'}" >
+
+    </div>
+    <div class="explainpanetext" >
+      {{lessonData.lessonData.lessonProgress[lessonEditIndex].explainPane.text}}
+    </div>
+  </div>
+</template>
+<script>
+  import Vue from 'vue';
+  import localStore from 'storejs';
+	import { JL3D_LOCAL_STATIC,BASE_ASSET_API } from '@/api/jlmap3d/assets3d.js';
+
+
+  export default {
+    name: 'ExplainPane',
+    props:['lessonData','lessonEditIndex'],
+    components: {
+
+    },
+    data() {
+      return {
+        localStatic:BASE_ASSET_API,
+      }
+    },
+    computed: {
+
+    },
+    watch: {
+
+    },
+    mounted() {
+
+    },
+    beforeDestroy() {
+
+    },
+    methods: {
+      selectTool(){
+        lesson3dSelect('toolproperty','explainpane');
+      },
+    },
+
+  }
+</script>
+
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .explainpanediv {
+    position: absolute;
+    width: 25%;
+    height: 25%;
+    left:20%;
+    top:0;
+    border-radius:10px;
+    border:solid 2px #000;
+    background-color: #fff;
+    z-index:1;
+  }
+  .explainpanetittle{
+    // height:15%;
+    text-align: center;
+    font-size: 20px;
+  }
+
+  .explainpanepic{
+    height:65%;
+    border:solid 2px #000;
+    background-size: 100%;
+  }
+
+  .explainpanetext{
+    font-size: 14px;
+    // height:20%;
+  }
+
+
+</style>
diff --git a/src/views/jlmap3d/lesson3dplayer/tools/jobpane.vue b/src/views/jlmap3d/lesson3dplayer/tools/jobpane.vue
new file mode 100644
index 000000000..11c0375e3
--- /dev/null
+++ b/src/views/jlmap3d/lesson3dplayer/tools/jobpane.vue
@@ -0,0 +1,206 @@
+<template>
+
+  <div class="jobpanediv">
+    <div class="jobshowbutton" @click="openList">岗位联络</div>
+    <div class="joblistdiv" v-show="showJobList">
+      <div class="jobdiv" v-for="(jobitem,index) in jobList" @click="selectJob(jobitem)" >{{jobitem.name}}</div>
+    </div>
+    <div class="jobtab" v-if="selectedJob">
+      <div class="jobtabmsg" >
+        <div class="jobtabmsgdiv" >{{selectedJob.name}}</div>
+        <div class="jobtabmsgtext" >{{selectedJob.text}}</div>
+      </div>
+      <div class="eltabpaneover" >
+        <el-tabs >
+          <el-tab-pane v-for="(item,index) in selectedJob.controlList" label-width="33%" :key="item.name" :label="item.name" >
+            <div class="addjobdivs" v-for="(itemin,indexin) in selectedJob.controlList[index].data" @click="selsectJobTool(itemin)">{{itemin.text}}</div>
+            <div class="addjobdiv" @click="addjob(index)">添加</div>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+
+    </div>
+  </div>
+
+</template>
+<script>
+  import Vue from 'vue';
+  import localStore from 'storejs';
+	import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
+
+
+  //岗位
+  export default {
+    name: 'JobPane',
+    props:['jobPaneData','lessonData','lessonEditIndex'],
+
+    components: {
+
+    },
+    data() {
+      return {
+        jobList:[],
+        showJobList:false,
+        showJob:false,
+        selectedJob:null,
+      }
+    },
+    computed: {
+
+    },
+    watch: {
+
+    },
+    mounted() {
+      // this.initJobList();
+    },
+    beforeDestroy() {
+
+    },
+    methods: {
+      openList(){
+        if(this.showJobList ==false){
+          this.showJobList = true;
+          // this.showJob = true;
+        }else{
+          this.showJobList = false;
+          this.selectedJob = null;
+        }
+
+      },
+      initJobList(data){
+        this.jobList = data;
+        console.log(data);
+      },
+      selectJob(item){
+        console.log(item);
+        this.selectedJob = item;
+
+      },
+      addjob(index){
+        this.selectedJob.controlList[index].data.push({
+          cname:"1",
+          text:"123",
+          nextNode:"null",
+          sceneId:this.lessonData.lessonData.lessonProgress[this.lessonEditIndex].id,
+          type:"",
+        });
+      },
+      selsectJobTool(selectTool){
+        lesson3dSelect('toolproperty','jobpane',selectTool);
+        console.log(selectTool);
+      },
+    },
+
+  }
+</script>
+
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .jobpanediv {
+    position: absolute;
+    // height: 500px;
+    min-width: 100px;
+    right:0;
+    top:0;
+    // border:solid 2px #000;
+
+    z-index:1;
+  }
+
+  .jobshowbutton{
+    position: absolute;
+    width:100px;
+    height:50px;
+    right:0;
+    top:0;
+    border:solid 2px #000;
+    background-color: #fff;
+  }
+
+  .joblistdiv{
+    position: absolute;
+    width:100px;
+    height:450px;
+    right:0;
+    top:50px;
+    border:solid 2px #000;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background-color: #fff;
+  }
+
+  .jobdiv{
+    width:75px;
+    height:75px;
+    margin-top: 5px;
+    margin-left: 2px;
+    border:solid 2px #000;
+    background-color: #fff;
+  }
+
+
+  .jobtab{
+    position: absolute;
+
+    right:100px;
+    top:50px;
+    width: 300px;
+    height:450px;
+    background-color: #fff;
+  }
+
+  .eltabpaneover{
+    width:300px;
+    height:350px;
+    overflow-y:auto;
+    overflow-x:hidden;
+  }
+
+  .jobtabmsg{
+    width:300px;
+    height:100px;
+    border:solid 2px #000;
+    // position: relative;
+  }
+
+  .jobtabmsgdiv{
+    width:80px;
+    height:80px;
+    position:absolute;
+    top:10px;
+    left:5px;
+    border:solid 2px #000;
+    background-color: #fff;
+  }
+
+  .jobtabmsgtext{
+    width:200px;
+    height:80px;
+    // margin-top: 5px;
+    // margin-left: 2px;
+    border:solid 2px #000;
+    background-color: #fff;
+    position: absolute;
+    font-size: 12px;
+    right:10px;
+    top:10px;
+  }
+
+  .addjobdivs{
+
+    width:98%;
+    margin: 1%;
+    border:solid 2px #000;
+  }
+
+  .addjobdiv{
+    width:98%;
+    height:50px;
+    margin: 1%;
+    border:solid 2px #000;
+  }
+
+
+</style>
diff --git a/src/views/jlmap3d/lesson3dplayer/tools/processlog.vue b/src/views/jlmap3d/lesson3dplayer/tools/processlog.vue
new file mode 100644
index 000000000..9398a7b21
--- /dev/null
+++ b/src/views/jlmap3d/lesson3dplayer/tools/processlog.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="processlogdiv" >
+
+    <el-tabs  type="border-card">
+      <el-tab-pane label="进程">
+        <div class="processtext" >
+          {{processText}}
+        </div>
+      </el-tab-pane>
+
+      <el-tab-pane label="日志">
+        <div class="logtext" >
+          {{logText}}
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+
+
+
+
+  </div>
+</template>
+<script>
+  import Vue from 'vue';
+  import localStore from 'storejs';
+	import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
+  //进程日志
+  export default {
+    name: 'ProcessLog',
+    components: {
+
+    },
+    data() {
+      return {
+        processText:"",
+        logText:"",
+      }
+    },
+    computed: {
+
+    },
+    watch: {
+
+    },
+    mounted() {
+
+    },
+    beforeDestroy() {
+
+    },
+    methods: {
+
+
+
+    },
+
+  }
+</script>
+
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .processlogdiv {
+    position: absolute;
+    width: 28%;
+    height: 25%;
+    right:0;
+    bottom:0;
+    // border-radius:10px;
+    border:solid 2px #000;
+    background-color: #fff;
+    z-index:1;
+  }
+  .processtext{
+    font-size: 16px;
+  }
+  .logtext{
+    font-size: 16px;
+  }
+
+
+</style>
diff --git a/src/views/jlmap3d/lesson3dplayer/tools/stepstips.vue b/src/views/jlmap3d/lesson3dplayer/tools/stepstips.vue
new file mode 100644
index 000000000..cbdf43c93
--- /dev/null
+++ b/src/views/jlmap3d/lesson3dplayer/tools/stepstips.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="stepstipsdiv" v-if="lessonData.lessonData.lessonProgress[lessonEditIndex]" @click="selectTool">
+    <div class="stepstipstittle" >
+      {{lessonData.lessonData.lessonProgress[lessonEditIndex].stepTipsData.tittle}}
+    </div>
+    <div class="stepstipstext" >
+      {{lessonData.lessonData.lessonProgress[lessonEditIndex].stepTipsData.text}}
+    </div>
+  </div>
+</template>
+<script>
+  import Vue from 'vue';
+  import localStore from 'storejs';
+	import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
+  //步骤提示
+  export default {
+    name: 'StepTips',
+    props:['lessonData','lessonEditIndex'],
+    components: {
+
+    },
+    data() {
+      return {
+
+      }
+    },
+    computed: {
+
+    },
+    watch: {
+
+    },
+    mounted() {
+
+    },
+    beforeDestroy() {
+
+    },
+    methods: {
+
+      selectTool(){
+        lesson3dSelect('toolproperty','stepTips');
+      },
+
+
+
+    },
+
+  }
+</script>
+
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .stepstipsdiv {
+    position: absolute;
+    width: 20%;
+    height: 20%;
+    left:0;
+    top:0;
+    border-radius:10px;
+    border:solid 2px #000;
+    background-color: #fff;
+    z-index:1;
+  }
+  .stepstipstittle{
+    text-align: center;
+    font-size: 20px;
+  }
+  .stepstipstext{
+    font-size: 16px;
+  }
+
+
+</style>
diff --git a/src/views/jlmap3d/lesson3dplayer/tools/toolbar.vue b/src/views/jlmap3d/lesson3dplayer/tools/toolbar.vue
new file mode 100644
index 000000000..0ca06a3d0
--- /dev/null
+++ b/src/views/jlmap3d/lesson3dplayer/tools/toolbar.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class="toolbardiv" >
+    <div class="toolbarbutton" @click="openGuide"></div>
+    <div class="toolbarbutton" @click="openBag"></div>
+    <div class="toolbarbutton" ></div>
+
+    <div class="toolbarguides" v-show="showGuide">
+      <div class="toolbarguide" v-for="(guide,index) in guideList">
+        {{guide.name}}
+      </div>
+    </div>
+
+
+    <div class="toolbarbag" v-show="showBag">
+      <div class="toolbarplaid"  v-for="(tool,index) in toolsList"></div>
+    </div>
+  </div>
+</template>
+<script>
+  import Vue from 'vue';
+  import localStore from 'storejs';
+	import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
+  //导航道具栏
+  export default {
+    name: 'ToolBar',
+    components: {
+
+    },
+    data() {
+      return {
+        tipsTittle:"步骤一",
+        tipsText:"步骤一",
+        guideList:[],
+        toolsList:[],
+        showGuide:false,
+        showBag:false,
+      }
+    },
+    computed: {
+
+    },
+    watch: {
+
+    },
+    mounted() {
+      this.initList();
+    },
+    beforeDestroy() {
+
+    },
+    methods: {
+      openGuide(){
+        if(this.showGuide == false){
+          this.showGuide = true;
+          this.showBag = false;
+        }else{
+          this.showGuide = false;
+          this.showBag = false;
+        }
+      },
+      openBag(){
+        if(this.showBag == false){
+          this.showGuide = false;
+          this.showBag = true;
+        }else{
+          this.showGuide = false;
+          this.showBag = false;
+        }
+      },
+      initList(){
+        for(let i=0;i<12;i++){
+          this.toolsList.push(
+            {
+              name:"",
+              picrul:"",
+              uesmode:"",
+            }
+          );
+        }
+        this.guideList=[
+          {
+            name:"站台",
+            pos:"",
+          },
+          {
+            name:"站厅",
+            pos:"",
+          },
+          {
+            name:"车控台",
+            pos:"",
+          },
+          {
+            name:"票务室",
+            pos:"",
+          },
+          {
+            name:"站长室",
+            pos:"",
+          },
+          {
+            name:"备品间",
+            pos:"",
+          },
+          {
+            name:"电梯",
+            pos:"",
+          },
+          {
+            name:"上行站台",
+            pos:"",
+          },
+          {
+            name:"下行站台",
+            pos:"",
+          },
+        ];
+
+      },
+
+
+    },
+
+  }
+</script>
+
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .toolbardiv {
+    position: absolute;
+    width: 240px;
+    height: 80px;
+    left:0;
+    bottom:0;
+    border-radius:10px;
+    border:solid 2px #000;
+    background-color: #fff;
+    z-index:1;
+  }
+
+  .toolbarbutton{
+    float:left;
+    width: 74px;
+    height: 74px;
+    border-radius:10px;
+    border:solid 2px #000;
+    margin: 2px;
+  }
+
+  .toolbarguides{
+    position: absolute;
+    bottom: 80px;
+    left:0;
+    width:100px;
+    height:350px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    border-radius:10px;
+    border:solid 2px #000;
+  }
+
+  .toolbarguide{
+    width: 90px;
+    height: 30px;
+    border-radius:10px;
+    border:solid 2px #000;
+    margin: 5px;
+  }
+
+  .toolbarbag{
+    position: absolute;
+    bottom: 80px;
+    left:0;
+    width:240px;
+    height:320px;
+    overflow-y: auto;
+    border-radius:10px;
+    border:solid 2px #000;
+  }
+
+  .toolbarplaid{
+    float:left;
+    width: 74px;
+    height: 74px;
+    border-radius:10px;
+    border:solid 2px #000;
+    margin: 2px;
+  }
+
+
+  .stepstipstittle{
+    text-align: center;
+    font-size: 20px;
+  }
+  .stepstipstext{
+    font-size: 16px;
+  }
+
+
+</style>