diff --git a/src/router/index.js b/src/router/index.js
index 03a46f75a..e7a4c0a99 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -118,6 +118,7 @@ const MapPreviewNew = () => import('@/views/designPlatform/mapPreviewNew');
 const BigScreen = () => import('@/views/designPlatform/bigScreen');
 const BigSplitScreen = () => import('@/views/designPlatform/bigSplitScreen');
 const TrainingDesign = () => import('@/views/designPlatform/trainingDesign');
+const TrainingPreview = () => import('@/views/designPlatform/trainingPreview');
 const TestRunplan = () => import('@/views/designPlatform/testRunplan');
 
 const Package = () => import('@/views/package/index');
@@ -485,6 +486,11 @@ export const publicAsyncRoute = [
         component: TrainingDesign,
         hidden: true
     },
+    {
+        path: '/trainingPreview',
+        component: TrainingPreview,
+        hidden: true
+    },
     {
         path: '/jointTrainingNew',
         component: JointTrainingNew,
diff --git a/src/views/designPlatform/demonList.vue b/src/views/designPlatform/demonList.vue
index db764c81c..9cd295265 100644
--- a/src/views/designPlatform/demonList.vue
+++ b/src/views/designPlatform/demonList.vue
@@ -93,6 +93,7 @@ export default {
             }
         },
         clickEvent(obj, data, ele) {
+            console.log(obj.type, '----------');
             switch (obj.type) {
             case 'scriptDesign': {
                 const query = {lineCode:obj.lineCode};
@@ -147,6 +148,19 @@ export default {
                 });
                 break;
             }
+            case 'trainingPreview': {
+                const data = { mapId: obj.mapId, prdType: '01' };
+                createSimulationNew(data).then(resp => {
+                    if (this.loadingProjectList.includes(this.project)) {
+                        this.$store.dispatch('app/transitionAnimations');
+                    }
+                    const query = { ...data, group: resp.data, scriptId: obj.id, lineCode:obj.lineCode};
+                    this.$router.push({ path: `/trainingPreview`, query });
+                }).catch(error => {
+                    this.$messageBox(`${this.$t('scriptRecord.createSimulationFail')}: ${error.message}`);
+                });
+                break;
+            }
             }
         },
         async refresh(filterSelect) {
@@ -230,7 +244,16 @@ export default {
                             cityCode: elem.cityCode
                         }
                     );
-
+                    elem.children.push(
+                        {
+                            id: '10',
+                            name: '实训预览',
+                            type: 'trainingPreview',
+                            mapId: elem.id,
+                            lineCode: elem.lineCode,
+                            cityCode: elem.cityCode
+                        }
+                    );
                 });
 
                 this.treeData = res.data;
diff --git a/src/views/designPlatform/leftSlider.vue b/src/views/designPlatform/leftSlider.vue
new file mode 100644
index 000000000..e8fb5dd57
--- /dev/null
+++ b/src/views/designPlatform/leftSlider.vue
@@ -0,0 +1,158 @@
+<template>
+  <div id="leftSlider" class="left-slider">
+    <div class="tip-title">
+      <span>
+        {{ $t('display.lesson.coursePracticeList') }}
+      </span>
+    </div>
+    <div class="handleShow">
+      <!-- {{ $t('display.lesson.unfold') }} -->
+      <span v-if="show" class="el-icon-arrow-right" style="cursor:pointer" @click="handleSliderShow(true)">实训列表</span>
+      <!-- {{ $t('display.lesson.fold') }} -->
+      <span v-else class="el-icon-arrow-left" style="cursor:pointer" @click="handleSliderShow(false)">实训列表</span>
+    </div>
+    <div class="slider-tree">
+      <el-scrollbar wrap-class="scrollbar-wrapper" style="background: #fff;">
+        <el-tree
+          ref="tree"
+          style="margin-top: 10px"
+          :data="treeList"
+          node-key="id"
+          :props="defaultProps"
+          highlight-current
+          :span="22"
+          default-expand-all
+          @node-click="clickEvent"
+        >
+          <span slot-scope="{ node }">
+            <span v-if="node.data.type === 'Training'" class="el-icon-goods" />
+            <span v-if="node.data.id === trainingId" :style="{color: 'red'}">&nbsp;{{ node.data.name }}</span>
+            <span v-else-if="node.data.valid" :style="{color: 'green'}">&nbsp;{{ node.data.name }}</span>
+            <span v-else>&nbsp;{{ node.data.name }}</span>
+          </span>
+        </el-tree>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getPublishLessonTree } from '@/api/jmap/lesson';
+// import { trainingNotifyNew } from '@/api/simulation';
+import { launchFullscreen } from '@/utils/screen';
+import { UrlConfig } from '@/scripts/ConstDic';
+export default {
+    name: 'LeftSlider',
+    props:{
+        offsetBottom:{
+            type: Number,
+            required: true
+        }
+    },
+    data() {
+        return {
+            show: true,
+            treeList: [],
+            defaultProps: ''
+        };
+    },
+    computed: {
+        trainingId () {
+            return this.$route.query.trainingId;
+        }
+    },
+    mounted() {
+        this.initLoadPage();
+        // this.$nextTick(() => {
+        //     document.querySelector('.left-slider').style.height = document.querySelector('.left-slider').offsetHeight - this.offsetBottom + 'px';
+        // });
+    },
+    methods: {
+        initLoadPage() {
+            /* getPublishLessonTree(this.$route.query.lessonId).then(response => {
+                if (response.data.tree && response.data.tree.length > 0) {
+                    this.treeList = response.data.tree;
+                }
+            }).catch(error => {
+                this.$message.error(this.$t('tip.failedCourse') + ':' + error.message);
+            });*/
+        },
+        handleSliderShow(flag) {
+            this.$emit('overallTranslation', flag);
+            const slider = document.getElementById('leftSlider');
+            if (flag) {
+                slider.style.transform = 'translateX(0)';
+                this.show = false;
+            } else {
+                slider.style.transform = '';
+                this.show = true;
+            }
+        },
+        clickEvent(obj, node, ele) {
+            if (obj && obj.type === 'Training') {
+                if (obj.valid) {
+                    this.disabled = true;
+                    // trainingNotifyNew({ trainingId: obj.id }).then(resp => {
+                    const query = {
+                        group: this.$route.query.group, trainingId: obj.id, lessonId: this.$route.query.lessonId, mapId: this.$route.query.mapId, lineCode:this.$route.query.lineCode, noPreLogout: this.$route.query.noPreLogout
+                    };
+                    this.$router.replace({ path: `${UrlConfig.displayNew}/teach`, query: query });
+                    launchFullscreen();
+                    // }).catch(error => {
+                    //     this.$messageBox(`${this.$t('tip.createSimulationFaild')} : ${error.message}`);
+                    //     this.disabled = false;
+                    // });
+                } else {
+                    this.$confirm(this.$t('tip.accessCourseNo'), this.$t('tip.hint'), {
+                        confirmButtonText: this.$t('tip.confirm'),
+                        cancelButtonText: this.$t('tip.cancel')
+                    }).then(() => {
+                        // this.buy();
+                    }).catch(() => { });
+                }
+            }
+        }
+    }
+};
+</script>
+
+<style scoped>
+.left-slider{
+	z-index: 10;
+	width: 400px;
+	height: 100%;
+	position: absolute;
+	left: 0;
+	top: 0;
+	transform: translateX(-400px);
+}
+.slider-tree{
+	height: calc(100% - 40px);
+	border: 2px solid #409EFF;
+}
+.handleShow{
+	position: absolute;
+	left: 400px;
+	top: 50%;
+	background: #fff;
+	color: #000;
+	border-radius: 3px;
+	box-shadow: 3px 1px 5px #000;
+	padding: 3px;
+}
+.tip-title {
+	width: 100%;
+	overflow: hidden;
+	height: 40px;
+	display: flex;
+	align-items: center;
+	flex-direction: row-reverse;
+	background-color: #409EFF;
+	border-radius: 5px 5px 0 0;
+	justify-content: center;
+	padding: 0 10px;
+	color: #fff;
+	font-size: 18px;
+	text-align: center;
+}
+</style>
diff --git a/src/views/designPlatform/tipTrainingDetail.vue b/src/views/designPlatform/tipTrainingDetail.vue
new file mode 100644
index 000000000..02da179fb
--- /dev/null
+++ b/src/views/designPlatform/tipTrainingDetail.vue
@@ -0,0 +1,305 @@
+<template>
+  <!-- v-drag  拖拽 调整宽高 -->
+  <div v-quickMenuDrag class="reminder-drag" :style="{bottom: offsetBottom + 'px'}">
+    <div ref="drapBox" class="reminder-box">
+      <div class="tip-title">
+        <i v-show="isShrink" class="icon el-icon-minus" @click="shrink" />
+        <i v-show="!isShrink" class="icon el-icon-plus" @click="shrink" />
+        <p v-if="isShrink" style="color: #fff;">
+          <span>{{ lessonName }}</span>
+        </p>
+      </div>
+      <div v-if="isShrink" class="reminder-box-content">
+        <div class="zhezhao" />
+        <div ref="dragBody" class="tip-body-box">
+          <div class="tip-body">
+            <el-scrollbar wrap-class="scrollbar-wrapper">
+              <p class="list-item">
+                <span class="list-label">{{ $t('display.training.trainingName') }}</span>
+                <span class="list-elem">{{ courseModel.name }}</span>
+              </p>
+
+              <p class="list-item">
+                <span class="list-label" style="vertical-align: top;"> {{ $t('display.training.trainingInstructions') }}</span>
+                <span class="list-elem elem-span">{{ courseModel.remarks }}</span>
+              </p>
+              <p class="list-item">
+                <span class="list-label">当前操作：</span>
+                <span class="list-elem">{{ courseModel.minDuration }}</span>
+              </p>
+              <!--				<p class="list-item">
+					<span class="list-label">{{ $t('display.training.maximumTime') }}</span>
+					<span class="list-elem">{{ courseModel.maxDuration }} {{ $t('display.seconds') }} </span>
+				</p>-->
+            </el-scrollbar>
+          </div>
+          <div class="drag-right" />
+          <div class="drag-left" />
+          <div class="drag-bottom" />
+          <div class="drag-top" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { getPublishLessonDetail } from '@/api/jmap/lesson';
+import { launchFullscreen } from '@/utils/screen';
+
+export default {
+    name: 'TipTrainingDetail',
+    props: {
+        trainingObj: {
+            type: Object,
+            default() {
+                return null;
+            }
+        },
+        offsetBottom: {
+            type: Number,
+            required: true
+        }
+    },
+    data() {
+        return {
+            training: {
+                id: '',
+                name: '',
+                remarks: ''
+            },
+            isShrink: true,
+            lessonName: '',
+            courseModel: {
+                id: '',
+                name: '',
+                maxDuration: '',
+                minDuration: '',
+                remarks: '',
+                updateTime: ''
+            },
+            showSumbit: false,
+            lessonIndex: 0
+        };
+    },
+    computed: {
+        ...mapGetters('trainingList', [
+            'trainingList'
+        ])
+    },
+    watch: {
+        'trainingObj': function (val) {
+            if (val) {
+                this.courseModel = {
+                    id: val.id,
+                    name: val.name,
+                    maxDuration: val.maxDuration,
+                    minDuration: val.minDuration,
+                    remarks: val.remarks,
+                    updateTime: val.updateTime
+                };
+            }
+        }
+    },
+    mounted() {
+        this.loadInitData(this.$route.query);
+    },
+    methods: {
+        loadInitData(obj) {
+            this.showSumbit = false;
+            this.lessonName = '';
+            this.courseModel = {
+                id: '',
+                name: '',
+                maxDuration: '',
+                minDuration: '',
+                remarks: '',
+                updateTime: ''
+            };
+
+            if (parseInt(obj.lessonId)) {
+                // getPublishLessonDetail({ id: obj.lessonId }).then(response => {
+                //     this.lessonName = response.data.name;
+                // }).catch(error => {
+                //     this.$message.error(this.$t('display.training.getCourseInformationFail') + ':' + error.message);
+                // });
+            }
+        },
+        jump(obj) {
+            const query = {
+                group: this.$route.query.group,
+                trainingId: this.$route.query.trainingId,
+                lessonId: this.$route.query.lessonId
+            };
+            this.$router.push({ path: `/display/${this.$route.params.mode}`, query: query });
+            launchFullscreen();
+        },
+        shrink() {
+            // const height = this.$refs.dragBody.offsetHeight + 40;
+            // const top = this.$refs.drapBox.style.top;
+            if (this.isShrink) {
+                //
+                // this.$refs.drapBox.style.height = '40px';
+                // this.$refs.drapBox.style.top = '';
+                this.isShrink = false;
+            } else {
+                this.isShrink = true;
+                this.$nextTick(()=>{
+                    const dragDom = document.querySelector('.reminder-drag').style.bottom;
+                    if (document.body.clientHeight - 300 - parseInt(dragDom.replace('px', '')) < 0) {
+                        document.querySelector('.reminder-drag').style.bottom = `${document.body.clientHeight - 300}px`;
+                    }
+                });
+                // this.$refs.drapBox.style.height = height + 'px';
+                // this.$refs.drapBox.style.top = top;
+            }
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "src/styles/mixin.scss";
+
+.tip-body-box {
+	position: relative;
+	height: 260px;
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+}
+
+.reminder-drag{
+	position: absolute;
+	bottom: 0px;
+	left: 15px;
+	z-index: 10;
+}
+
+.elem-span{
+	display:inline-block;width:77%;line-height:26px;margin-top:-4px;
+}
+
+.zhezhao{
+	width: 100%;
+	height: 100%;
+	filter: blur(8px);
+	background: rgba(255,255,255,0.9);
+	position:absolute;
+}
+.reminder-box-content{
+	width: 500px;
+	height: 260px;
+	left: 0;
+	top: 0;
+	z-index: 2;
+	background: rgba(255,255,255,0.8);
+	position: relative;
+}
+.reminder-box {
+	border-radius: 5px;
+	overflow: hidden;
+	z-index: 10;
+	font-size: 18px;
+
+	.tip-title {
+		width: 500px;
+		overflow: hidden;
+		height: 40px;
+		display: flex;
+		align-items: center;
+		flex-direction: row-reverse;
+		background-color: rgba(64, 158, 255,1);
+		border-radius: 5px 5px 0 0;
+		justify-content: space-between;
+		padding: 0 10px;
+	}
+
+	.drag-right,
+	.drag-left {
+		width: 10px;
+		cursor: e-resize;
+		background-color: yellow;
+		height: 100%;
+		position: absolute;
+		right: 0;
+		top: 0;
+		opacity: 0;
+	}
+
+	.drag-left {
+		left: 0;
+	}
+
+	.drag-bottom {
+		position: absolute;
+		bottom: 0;
+		width: 100%;
+		height: 10px;
+		cursor: s-resize;
+		background-color: yellow;
+		opacity: 0;
+	}
+
+	.drag-top {
+		position: absolute;
+		top: -45px;
+		left: 0;
+		width: 100%;
+		height: 10px;
+		cursor: s-resize;
+		background-color: yellow;
+		opacity: 0;
+	}
+
+	.tip-body {
+		height: 260px;
+		padding: 10px;
+
+		.list-label {
+			width: 105px;
+		}
+	}
+
+	.tip-foot {
+		width: 100%;
+		position: absolute;
+		right: 0px;
+		bottom: 0px;
+		background-color: #fff;
+		padding: 10px 0 10px 10px;
+
+		.foot-detail {
+			height: 100%;
+			float: right;
+			margin-top: 9px;
+			padding-right: 15px;
+		}
+
+		.foot-submit {
+			float: right;
+			margin-top: 9px;
+			padding-right: 15px;
+		}
+	}
+
+	.icon {
+		float: right;
+		margin-right: 10px;
+		cursor: pointer;
+		background-color: #f3f3f3;
+		border-radius: 50%;
+	}
+
+	/deep/ {
+		.el-tree-node__content {
+			margin-bottom: 4px;
+		}
+
+		.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+			background-color: #d6e5f7;
+		}
+	}
+}
+</style>
diff --git a/src/views/designPlatform/trainingPreview.vue b/src/views/designPlatform/trainingPreview.vue
new file mode 100644
index 000000000..ebc401f9a
--- /dev/null
+++ b/src/views/designPlatform/trainingPreview.vue
@@ -0,0 +1,186 @@
+<template>
+  <div class="train">
+    <div v-show="maskOpen" class="trainMask" />
+    <jlmap-visual ref="jlmapVisual" />
+    <menu-demon ref="menuDemon" />
+    <voice-chat-box v-if="$route.query.lineCode == '16'" ref="chatbox" :group="group" :user-role="userRole" />
+    <chat-box v-else ref="chatbox" :group="group" :user-role="userRole" />
+    <tip-training-detail :training-obj="trainingObj" :offset-bottom="offsetBottom" />
+    <left-slider :offset-bottom="offsetBottom" @overallTranslation="overallTranslation" />
+    <div class="trainBack">
+      <el-button-group>
+        <el-button type="primary" @click="back">返回</el-button>
+      </el-button-group>
+    </div>
+  </div>
+</template>
+<script>
+import JlmapVisual from '@/views/newMap/jlmapNew/index';
+import {loadMapDataById } from '@/utils/loaddata';
+import { clearSimulation } from '@/api/simulation';
+import { creatSubscribe, clearSubscribe, displayTopic} from '@/utils/stomp';
+import { getToken } from '@/utils/auth';
+import chatBox from '@/views/newMap/chatView/chatBox.vue';
+import VoiceChatBox from '@/views/newMap/chatView/voiceChatBox.vue';
+import MenuDemon from '@/views/trainingManage/demonMenu.vue';
+import LeftSlider from './leftSlider';
+import TipTrainingDetail from './tipTrainingDetail';
+export default {
+    name: 'TrainingDesign',
+    components: {
+        JlmapVisual,
+        MenuDemon,
+        chatBox,
+        VoiceChatBox,
+        LeftSlider,
+        TipTrainingDetail
+    },
+    props: {
+        widthLeft: {
+            type: Number,
+            default: 0,
+            trainingObj: null
+        }
+    },
+    data() {
+        return {
+            maskOpen: false,
+            offsetBottom: 0
+        };
+    },
+    computed: {
+        mapId() {
+            return this.$route.query.mapId;
+        },
+        width() {
+            return this.$store.state.app.width;
+        },
+        height() {
+            return this.$store.state.app.height;
+        },
+        group() {
+            return this.$route.query.group;
+        },
+        userRole() {
+            let role = 'AUDIENCE';
+            switch (this.$store.state.training.prdType) {
+            case '02': { role = 'DISPATCHER'; break; }
+            case '01': { role = 'STATION_SUPERVISOR'; break; }
+            case '04': { role = 'DRIVER'; break; }
+            case '05': { role = 'DEPOT_DISPATCHER'; break; }
+            default: { role = 'AUDIENCE'; break; }
+            }
+            return role;
+        }
+    },
+    watch: {
+        $route() {
+            this.$nextTick(() => {
+                this.initLoadData();
+            });
+        },
+        '$store.state.app.windowSizeCount': function() { // 窗口缩放
+            this.setWindowSize();
+        },
+        '$store.state.map.mapViewLoadedCount':function() {
+            this.$store.dispatch('map/setTrainWindowShow', false);
+            if (this.$route.query.group && !this.$route.path.includes('displayIscs')) {
+                this.subscribe();
+            }
+        },
+        '$store.state.socket.equipmentStatus': function (val) {
+            if (val.length && this.$route.query.group) {
+                this.statusMessage(val);
+            }
+        },
+        '$store.state.socket.simulationOver':function(val) {
+            this.backOut();
+        }
+    },
+    async beforeDestroy() {
+        await this.$store.dispatch('map/mapClear');
+        this.$store.dispatch('training/setPrdType', '');
+    },
+    mounted() {
+        this.$store.dispatch('training/setPrdType', '01');
+        this.setWindowSize();
+        this.initLoadData();
+    },
+    methods: {
+        initLoadData() { // 加载地图数据
+            if (this.$route.query.group) {
+                loadMapDataById(this.mapId, 'simulation');
+            } else {
+                this.$store.dispatch('training/changeMode', { mode: null });
+                loadMapDataById(this.mapId, 'preview');
+            }
+        },
+        overallTranslation(flag) {
+            const panel = document.getElementById('leftSlider');
+            if (flag) {
+                panel.style.transform = 'translateX(400px)';
+            } else {
+                panel.style.transform = '';
+            }
+        },
+        async statusMessage(list) {
+            await this.$store.dispatch('training/updateMapState', list);
+            await this.$store.dispatch('socket/setEquipmentStatus');
+        },
+        setWindowSize() {
+            const width = this.width;
+            const height = this.height;
+            this.$store.dispatch('config/resize', { width, height });
+        },
+        async back() {
+            if (this.$route.query.group) {
+                await clearSimulation(this.$route.query.group);
+                this.clearSubscribe();
+            }
+            this.$store.dispatch('training/over').then(() => {
+                history.go(-1);
+            });
+        },
+        backOut() {
+            if (this.$route.query.projectDevice) {
+                this.$store.dispatch('LogOut').then(() => {
+                    location.reload();
+                });
+            }
+        },
+        async subscribe() {
+            this.clearSubscribe();
+            const header = { group: this.$route.query.group || '', 'X-Token': getToken() };
+            creatSubscribe(`${displayTopic}\/${this.$route.query.group}`, header);
+            // await this.$store.dispatch('training/setHasSubscribed');
+        },
+        clearSubscribe() {
+            clearSubscribe(`${displayTopic}\/${this.$route.query.group}`);
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+    .train {
+        width: 100%;
+		overflow: hidden;
+        position: relative;
+    }
+	.trainMask{
+        opacity: 1;
+        background: #000;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 9;
+    }
+	.trainBack {
+        position: absolute;
+        float: right;
+        right: 15px;
+        bottom: 15px;
+		z-index: 19;
+    }
+</style>