diff --git a/package.json b/package.json
index 80eb50f30..be972b538 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "license": "MIT",
   "scripts": {
     "start": "vue-cli-service serve --open",
-    "dev": "node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js serve",
+    "dev": "node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js serve --open",
     "build": "vue-cli-service build --mode production",
     "test": "vue-cli-service build --mode staging",
     "local": "vue-cli-service build --mode",
diff --git a/src/views/newMap/display/index.vue b/src/views/newMap/display/index.vue
index 7196289af..44e0890ba 100644
--- a/src/views/newMap/display/index.vue
+++ b/src/views/newMap/display/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="main" :style="{width: canvasWidth+'px'}">
+  <div class="main">
     <transition name="el-zoom-in-bottom">
       <!-- v-show="!specialDispatch"  -->
       <!--      <map-system-draft ref="mapCanvas" @back="back" />-->
@@ -143,5 +143,7 @@ export default {
 <style lang="scss" scoped>
 .main{
 	height: 100%;
+	width: 100%;
+	overflow: hidden;
 }
 </style>
diff --git a/src/views/newMap/display/simulationMenu.vue b/src/views/newMap/display/simulationMenu.vue
index fe67b2be3..60ac194b7 100644
--- a/src/views/newMap/display/simulationMenu.vue
+++ b/src/views/newMap/display/simulationMenu.vue
@@ -57,6 +57,7 @@
     <training-tip v-if="trainingId" ref="trainingTip" />
     <training-position-tip v-if="trainingId" ref="trainingPositionTip" />
     <training-menu v-if="trainingDetail" ref="trainingMenu" :offset-bottom="offsetBottom" />
+    <TrainingDesign ref="trainingDesign" />
 
   </div>
 </template>
@@ -97,6 +98,7 @@ import TrainingList from './trainingList/index.vue';
 import TrainingTip from './trainingList/trainingTip.vue';
 import TrainingPositionTip from './trainingList/trainingPositionTip.vue';
 import TrainingMenu from './trainingList/trainingMenu';
+import TrainingDesign from '@/views/trainingManage/index.vue';
 
 export default {
     name: 'SimulationMenu',
@@ -128,7 +130,8 @@ export default {
         TrainingList,
         TrainingTip,
         TrainingPositionTip,
-        TrainingMenu
+        TrainingMenu,
+        TrainingDesign
         // StatusIcon
     },
     props: {
@@ -431,6 +434,7 @@ export default {
                 { label: '联系方式', name: 'contectUs', click: this.contectUs, isShow: true },
                 { label: '成员管理', name: 'memberManage', click: this.memberManage, isShow: true },
                 { label: '实训', name: 'trainingPane', click: this.trainingPane, isShow: true },
+                { label: '实训设计', name: 'trainingDesign', click: this.trainingDesign, isShow: true },
                 { label: '切换客流数据', name: 'changeFlowData', click: this.changeFlowData, isShow: true },
                 // { label: '权限分发', name: 'distribute', click: this.distribute, isShow: true },
                 {
@@ -930,6 +934,9 @@ export default {
         trainingPane() {
             this.$refs.trainingList.doShow();
         },
+        trainingDesign() {
+            this.$refs.trainingDesign.doShow();
+        },
         changeFlowData() {
             this.hideMenuList();
             this.$refs.flowData.doShow();
diff --git a/src/views/organization/trainingDesign/index.vue b/src/views/organization/trainingDesign/index.vue
index 6c7f1e1c0..98ecdf8dd 100644
--- a/src/views/organization/trainingDesign/index.vue
+++ b/src/views/organization/trainingDesign/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="width: 100%;height: 100%;">
-    <QueryListPage ref="queryListPage" :card-padding="10" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
+    <QueryListPage v-if="showList" ref="queryListPage" :card-padding="10" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
   </div>
 </template>
 <script>
@@ -8,14 +8,15 @@ import {queryMapListByUser} from '@/api/jmap/map';
 import Cookies from 'js-cookie';
 import ConstConfig from '@/scripts/ConstConfig';
 // import { getPublishSingleList, getPublishScenesList } from '@/api/jmap/training';
-import { deleteTraining, publishTraining } from '@/api/trainingManage';
-import { getTrainingList, getTrainingAll } from '@/api/trainingManage';
+import { deleteTraining } from '@/api/trainingManage';
+import { getTrainingList } from '@/api/trainingManage';
 // getPublishTrainingDetail, loadPublishTraining,
 export default {
     name:'TrainingManage',
     data() {
         return {
             mapList:[],
+            showList: false,
             pagerConfig: {
                 pageSize: 'pageSize',
                 pageIndex: 'pageNum'
@@ -23,7 +24,7 @@ export default {
             queryForm: {
                 labelWidth: '100px',
                 reset: false,
-                // initLoadCallback: this.initLoadCallback,
+                initLoadCallback: this.initLoadCallback,
                 queryObject: {
                     mapId: {
                         type: 'select',
@@ -125,32 +126,19 @@ export default {
                 this.mapList.push({label:element.name, value:element.id});
             });
             this.queryForm.queryObject.mapId.config.data = [...this.mapList];
-            // this.queryForm.queryObject.mapId.config.default = this.mapList[0].value;
+            this.queryForm.queryObject.mapId.config.default = this.mapList[0].value;
+            this.showList = true;
         });
     },
     methods: {
-        // initLoadCallback(form) {
-        //     if (!form.trainingType) {
-        //         form.trainingType = 'training';
-        //     }
-        //     // if (!form.mapId) {
-        //     //     form.mapId = this.mapList[0].value;
-        //     // }
-        // },
-        // queryFunction(param) {
-        //     if (param.mapId) {
-        //         if (param.trainingType == 'training') {
-        //             return getPublishSingleList(param.mapId);
-        //         } else if (param.trainingType == 'scene') {
-        //             return getPublishScenesList(param.mapId);
-        //         }
-        //     } else {
-        //         return new Promise((resolve, reject)=>{
-        //             const result = {data:[]};
-        //             resolve(result);
-        //         });
-        //     }
-        // },
+        initLoadCallback(form) {
+            if (!form.trainingType) {
+                form.trainingType = 'training';
+            }
+            if (!form.mapId) {
+                form.mapId = this.mapList[0] ? this.mapList[0].value : '';
+            }
+        },
         queryFunction(param) {
             if (param.mapId) {
                 return getTrainingList(param);
diff --git a/src/views/trainingManage/editCondition.vue b/src/views/trainingManage/editCondition.vue
index db9128d6f..6413d5d45 100644
--- a/src/views/trainingManage/editCondition.vue
+++ b/src/views/trainingManage/editCondition.vue
@@ -287,10 +287,10 @@ export default {
 /deep/ .el-dialog__wrapper {
 	width: 1px;
 	height: 1px;
-	top: auto;
-	right: auto;
-	bottom: auto;
-	left: auto;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
 	overflow: visible !important;
 }
 // .conditionTab{
diff --git a/src/views/trainingManage/editDetails.vue b/src/views/trainingManage/editDetails.vue
index e038e2f8d..daee69c34 100644
--- a/src/views/trainingManage/editDetails.vue
+++ b/src/views/trainingManage/editDetails.vue
@@ -397,10 +397,11 @@ export default {
 </script>
 <style lang="scss" scoped>
 .editContent {
-	position: absolute;
+	position: fixed;
     right: 0;
 	top: 0;
-    height: 100%;
+	bottom: 0;
+    // height: 100%;
 	width: 800px;
 	transform: translateX(800px);
 	transition: all 0.4s;
@@ -410,20 +411,12 @@ export default {
 		transform: translateX(0px);
 	}
 }
-/deep/ .el-dialog__wrapper {
-	width: 1px;
-	height: 1px;
-	top: auto;
-	right: auto;
-	bottom: auto;
-	left: auto;
-	overflow: visible !important;
-}
 .editContentTab{
     position: absolute;
     z-index: 10;
 	left: -12px;
-	top: calc(45% + 100px);
+	// top: calc(45% + 200px);
+	top: 200px;
 }
 .editContentTabLable{
     position: absolute;
@@ -435,7 +428,7 @@ export default {
     left: 50%;
     transform: translateX(-50%);
     cursor: pointer;
-    top:-28px;
+    top: 0px;
 }
 .tabPaneBox {
 	padding: 0 20px;
diff --git a/src/views/trainingManage/editOperate.vue b/src/views/trainingManage/editOperate.vue
index 6036b6e61..a5232a5fc 100644
--- a/src/views/trainingManage/editOperate.vue
+++ b/src/views/trainingManage/editOperate.vue
@@ -1,10 +1,10 @@
 <template>
-  <div>
-    <div class="editContentTab">
+  <div class="operate-main">
+    <!-- <div class="editContentTab">
       <div v-if="dialogVisible" class="editContentTabLable" @click="minisize">
         <span class="titleStyle">{{ $t('trainingManage.editTagTitle') }}</span>
       </div>
-    </div>
+    </div> -->
     <el-dialog :title="title" :visible.sync="dialogVisible" width="500" :modal="false" :close-on-click-modal="false" :show-close="false" center style="margin-left: 200px">
       <el-row style="font-size: 16px;padding: 5px;">
         <el-col :span="4">步骤描述：</el-col>
@@ -147,35 +147,37 @@ export default {
 };
 </script>
 
-<style scoped>
-/deep/ .el-dialog__wrapper {
-	width: 1px;
-	height: 1px;
-	top: auto;
-	right: auto;
-	bottom: auto;
-	left: auto;
-	overflow: visible !important;
-}
-/deep/ .el-dialog--center{
-	width: 600px;
-}
-.editContentTab{
-	position: absolute;
-	z-index: 10;
-	right: 12px;
-	top: calc(45% + 100px);
-}
-.editContentTabLable{
-	position: absolute;
-	background: #fff;
-	border-radius: 5px 0 0 5px ;
-	padding: 5px 0;
-	width: 23px;
-	text-align: center;
-	left: 50%;
-	transform: translateX(-50%);
-	cursor: pointer;
-	top:-28px;
+<style lang="scss" scoped>
+.operate-main {
+	/deep/ .el-dialog__wrapper {
+		width: 1px;
+		height: 1px;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		overflow: visible !important;
+	}
+	/deep/ .el-dialog--center{
+		width: 600px;
+	}
 }
+// .editContentTab{
+// 	position: absolute;
+// 	z-index: 10;
+// 	right: 12px;
+// 	top: calc(45% + 100px);
+// }
+// .editContentTabLable{
+// 	position: absolute;
+// 	background: #fff;
+// 	border-radius: 5px 0 0 5px ;
+// 	padding: 5px 0;
+// 	width: 23px;
+// 	text-align: center;
+// 	left: 50%;
+// 	transform: translateX(-50%);
+// 	cursor: pointer;
+// 	top:-28px;
+// }
 </style>
diff --git a/src/views/trainingManage/index.vue b/src/views/trainingManage/index.vue
new file mode 100644
index 000000000..4df2804d9
--- /dev/null
+++ b/src/views/trainingManage/index.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="main">
+    <TrainingList ref="trainingList" @updateDetails="updateDetails" @gradeRules="gradeRules" @closeAllDialog="closeAllDialog" @draftTracK="draftTracK" />
+    <EditDetails ref="editDetails" :edit-data="editData" @openEditOperate="openEditOperate" @handleCondition="handleCondition" @publish="publish" @preview="preview" @gradeRules="gradeRules" />
+    <EditCondition ref="editCondition" v-dialogDrag :materials-list="materialsList" @editConditionFn="editConditionFn" @backStep="backStep" />
+    <edit-operate ref="editOperate" v-dialogDrag @backStepList="backStepList" />
+    <grade-rules ref="gradeRules" />
+    <TrackList ref="trackList" />
+  </div>
+</template>
+<script>
+import TrainingList from './trainingList.vue';
+import TrackList from './trackList.vue';
+import EditDetails from './editDetails.vue';
+import EditCondition from './editCondition.vue';
+import EditOperate from './editOperate.vue';
+import GradeRules from './gradeRules.vue';
+import { getTrainingMaterials } from '@/api/trainingManage';
+
+export default {
+    name:'TrainingIndex',
+    components:{
+        TrainingList,
+        TrackList,
+        EditDetails,
+        EditCondition,
+        EditOperate,
+        GradeRules
+    },
+    props:{
+    },
+    data() {
+        return {
+            hoverBtn: false,
+            btnWidth: -600,
+            materialsList: [],
+            refsList: ['editDetails', 'editCondition', 'trackList'],
+            editData: {}
+        };
+    },
+    computed:{
+        group() {
+            return this.$route.query.group;
+        },
+        mapId() {
+            return this.$route.query.mapId;
+        },
+        lineCode() {
+            return this.$route.query.lineCode;
+        }
+    },
+    mounted() {
+        this.getMaterials();
+    },
+    methods:{
+        publish(data) {
+            this.$refs.trainingList.publishScript(null, data);
+        },
+        preview(data) {
+            this.$refs.trainingList.previewScript(null, data);
+        },
+        editConditionFn(data, index, key) {
+            this.$refs.editDetails.editConditionFn(data, index, key);
+        },
+        backStep() {
+            this.$refs.editDetails.backStep();
+        },
+        handleCondition(index, row, key) {
+            this.$refs.editCondition.doShow(row, index, key);
+        },
+        getMaterials() {
+            getTrainingMaterials().then(res => {
+                this.materialsList = res.data;
+            }).catch(err => {
+                console.log(err, 'Materials----');
+                this.materialsList = [];
+            });
+        },
+        draftTracK(row) {
+            this.$refs.trackList.doShow(row);
+        },
+        doShow() {
+            this.$refs.trainingList.doShow();
+        },
+        updateDetails(data) {
+            this.editData = data;
+            this.closeAllDialog('editDetails');
+            this.$refs.editDetails.doShow(data);
+        },
+        closeAllDialog(noCloseName) {
+            this.refsList.forEach(key => {
+                if (key != noCloseName && this.$refs[key]) {
+                    this.$refs[key].doClose();
+                }
+            });
+        },
+        openEditOperate(data) {
+            this.$refs.editOperate.doShow(data);
+        },
+        backStepList(data) {
+            this.$refs.editDetails.setOperations(data);
+            this.$refs.editDetails.minisize();
+        },
+        gradeRules(data) {
+            this.$refs.gradeRules.doShow(data);
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+.main {
+	position: relative;
+	z-index: 2001;
+}
+</style>
diff --git a/src/views/trainingManage/trackList.vue b/src/views/trainingManage/trackList.vue
index b9ab419a0..e0dad86e3 100644
--- a/src/views/trainingManage/trackList.vue
+++ b/src/views/trainingManage/trackList.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog v-dialogDrag title="草稿发布轨迹" :visible.sync="dialogVisible" width="1050px" :before-close="doClose" center>
+  <el-dialog v-dialogDrag title="草稿发布轨迹" :visible.sync="dialogVisible" append-to-body width="1050px" :before-close="doClose" center>
     <div>
       <QueryListPage ref="queryListPage" :card-padding="10" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
     </div>
diff --git a/src/views/trainingManage/trainingList.vue b/src/views/trainingManage/trainingList.vue
index 6bfe4de52..37d745373 100644
--- a/src/views/trainingManage/trainingList.vue
+++ b/src/views/trainingManage/trainingList.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog v-dialogDrag title="实训管理" :visible.sync="dialogVisible" width="1250px" :before-close="doClose" center>
+  <el-dialog v-dialogDrag title="实训管理" :visible.sync="dialogVisible" append-to-body width="1250px" :before-close="doClose" center>
     <div>
       <div class="trainingHeader">
         <div class="trainingList">实训草稿列表</div>