diff --git a/src/layout/index.vue b/src/layout/index.vue
index d1669aa3d..ed158e407 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -40,7 +40,7 @@ export default {
 			return this.$store.state.app.width;
 		},
 		height() {
-			return this.$store.state.app.height - 60-30;
+			return this.$store.state.app.height-60-30;
 		}
 	},
 	created() {
diff --git a/src/router/index.js b/src/router/index.js
index d60437893..9015b4fbb 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -66,6 +66,7 @@ import PlanMonitorDetail from '@/views/planMonitor/detail';
 import DesignPlatformHome from '@/views/designPlatform/home';
 import DesignPlatform from '@/views/designPlatform/index';
 import DesignPlatformUser from '@/views/designPlatform/userIndex';
+import MapPreview from '@/views/designPlatform/mapPreview';
 
 import Replay from '@/views/replay/index';
 import Package from '@/views/package/index';
@@ -196,7 +197,8 @@ export const UrlConfig = {
 		trainingRecord: '/design/lesson/training',
 		runPlan: '/design/runPlan/detail',
 		scriptHome: '/design/script/home',
-		display: '/design/display'
+		display: '/design/display',
+		mapPreview: '/design/mapPreview'
 	},
 	designUser: {
 		prefix: '/design/userlist/home',
@@ -395,6 +397,12 @@ export const asyncRouter = [
 						path: 'lesson/training/:trainingId/:trainingName',
 						component: TrainingrecordManage,
 						hidden: true
+					},
+					{
+						path: 'mapPreview/:mapId',
+						component: MapPreview,
+						hidden: true
+
 					}
 				]
 			}
diff --git a/src/views/designPlatform/demonList.vue b/src/views/designPlatform/demonList.vue
index 1fc5738de..e3ffd3706 100644
--- a/src/views/designPlatform/demonList.vue
+++ b/src/views/designPlatform/demonList.vue
@@ -4,7 +4,6 @@
       <filter-city ref="filerCity" filter-empty :query-function="queryFunction" :local-param-name="localParamName" @filterSelectChange="refresh" />
       <el-input v-model="filterText" :placeholder="this.$t('global.filteringKeywords')" clearable />
       <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: (height-125) +'px' }">
-        <!-- :style="{ height: heightUp +'px' }" -->
         <el-tree
           ref="tree"
           :data="treeList"
@@ -31,6 +30,7 @@
 <script>
 import { listPublishMap } from '@/api/jmap/map';
 import { UrlConfig } from '@/router/index';
+import { superAdmin, admin } from '@/router';
 import { getSessionStorage, setSessionStorage, removeSessionStorage } from '@/utils/auth';
 import FilterCity from '@/views/components/filterCity';
 import localStore from 'storejs';
@@ -65,8 +65,6 @@ export default {
 			},
 			node: {
 			},
-			// mapId: '',
-			heightUp: 450,
 			point: {
 				x: 0,
 				y: 0
@@ -74,16 +72,8 @@ export default {
 			editModel: {},
 			localParamName: 'publish_cityCode',
 			cityCode: ''
-			// skinCode:''
 		};
 	},
-	computed: {
-		role() {
-			return this.$store.state.user.roles.includes('04') ||
-                    this.$store.state.user.roles.includes('05') ||
-                    this.$store.state.user.roles.includes('01');
-		}
-	},
 	watch: {
 		filterText(val) {
 			this.treeList = this.treeData.filter((res) => {
@@ -94,9 +84,6 @@ export default {
 	beforeDestroy () {
 		removeSessionStorage('demonList');
 	},
-	mounted() {
-		this.heightUp = Number(localStore.get('upHeight')?localStore.get('upHeight'):(this.height)/2);
-	},
 	methods: {
 		filterNode(value, data) {
 			if (!value) return true;
@@ -110,24 +97,29 @@ export default {
 		},
 		clickEvent(obj, data, ele) {
 			switch (obj.type) {
-			case 'scriptDesign': {
-				setSessionStorage('designType', 'scriptDesign');
-				this.$router.push({ path: `${UrlConfig.design.scriptHome}/${obj.mapId}?skinCode=${obj.skinCode}` });
-				break;
-			}
-			case 'lessonDesign': {
-				setSessionStorage('designType', 'lessonDesign');
-				this.$router.push({ path: `${UrlConfig.design.lessonHome}/${obj.mapId}/${obj.skinCode}`, query: {cityCode: this.cityCode} });
-				break;
-			}
-			case 'runPlanDesign': {
-				setSessionStorage('designType', 'runPlanDesign');
-				this.$router.push({ path: `${UrlConfig.design.runPlan}/${obj.mapId}?skinCode=${obj.skinCode}` });
-				break;
-			}
-			case 'map': {
-				setSessionStorage('demonList', obj.id);
-			}
+				case 'scriptDesign': {
+					setSessionStorage('designType', 'scriptDesign');
+					this.$router.push({ path: `${UrlConfig.design.scriptHome}/${obj.mapId}?skinCode=${obj.skinCode}` });
+					break;
+				}
+				case 'lessonDesign': {
+					setSessionStorage('designType', 'lessonDesign');
+					this.$router.push({ path: `${UrlConfig.design.lessonHome}/${obj.mapId}/${obj.skinCode}`, query: {cityCode: this.cityCode} });
+					break;
+				}
+				case 'runPlanDesign': {
+					setSessionStorage('designType', 'runPlanDesign');
+					this.$router.push({ path: `${UrlConfig.design.runPlan}/${obj.mapId}?skinCode=${obj.skinCode}` });
+					break;
+				}
+				case 'map': {
+					setSessionStorage('demonList', obj.id);
+					break;
+				}
+				case 'mapPreview':{
+					this.$router.push({ path: `${UrlConfig.design.mapPreview}/${obj.mapId}` });
+					break;
+				}
 			}
 			// this.$refs.menu.doClose();
 		},
@@ -144,24 +136,28 @@ export default {
 					// debugger;
 					// elem.children.find(n => { return n.name.includes("行调")})
 					elem.children=[
-						// {
-						//     id:'1',
-						//     name:'地图设计',
-						//     type:'mapDesign'
-						// },
+						{
+						    id:'1',
+						    name:'地图预览',
+							type:'mapPreview',
+							mapId: elem.id,
+							hidden:false
+						},
 						{
 							id: '2',
 							name: '课程设计',
 							type: 'lessonDesign',
 							mapId: elem.id,
-							skinCode: elem.skinCode
+							skinCode: elem.skinCode,
+							hidden:this.isAdministrator()
 						},
 						{
 							id: '3',
 							name: '剧本设计',
 							type: 'scriptDesign',
 							mapId: elem.id,
-							skinCode: elem.skinCode
+							skinCode: elem.skinCode,
+							hidden:false
 							// code:elem.children.find(n => { return n.name.includes("行调")})
 						},
 						{
@@ -169,7 +165,8 @@ export default {
 							name: '运行图设计',
 							type: 'runPlanDesign',
 							mapId: elem.id,
-							skinCode: elem.skinCode
+							skinCode: elem.skinCode,
+							hidden:false
 						}
 					];
 				});
@@ -187,18 +184,15 @@ export default {
 				this.$messageBox(this.$t('error.refreshFailed'));
 			}
 		},
-		// refresh1(){
-
-		// },
-		drapHeight(height) {
-			this.heightUp = Number(height);
-		},
 		resize() {
 			this.widthLeft = Number(localStore.get('LeftWidth')) || this.widthLeft;
 			const width = this.$store.state.app.width - 521 - this.widthLeft;
 			const height = this.$store.state.app.height - 90;
 			this.$store.dispatch('config/resize', { width: width, height: height });
-		}
+		},
+		isAdministrator() {
+			return this.$store.state.user.roles.indexOf(superAdmin) || this.$store.state.user.roles.indexOf(admin);
+		},
 		// createMap() {
 		//     this.$emit("createMap");
 		// },
diff --git a/src/views/designPlatform/index.vue b/src/views/designPlatform/index.vue
index b3e427ad1..932a76f6c 100644
--- a/src/views/designPlatform/index.vue
+++ b/src/views/designPlatform/index.vue
@@ -6,7 +6,7 @@
       </div>
       <drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
       <transition>
-        <router-view :product-list="productList" />
+        <router-view :product-list="productList" :widthLeft="widthLeft"/>
       </transition>
     </el-scrollbar>
   </div>
diff --git a/src/views/designPlatform/mapPreview.vue b/src/views/designPlatform/mapPreview.vue
new file mode 100644
index 000000000..3b59dab4b
--- /dev/null
+++ b/src/views/designPlatform/mapPreview.vue
@@ -0,0 +1,117 @@
+<template>
+    <div class="map-view">
+        <jlmap-visual ref="jlmapVisual" @onSelect="clickEvent" @onMenu="onContextmenu" />
+    </div>
+</template>
+<script>
+    import JlmapVisual from '@/views/jlmap/index';
+    import { loadMapData, loadMapDataById } from '@/utils/loaddata';
+    export default {
+        name: 'mapPreview',
+        components: {
+            JlmapVisual
+        },
+        data(){
+            return{
+                size: {
+                    width: document.documentElement.clientWidth - 400,
+                    height: document.documentElement.clientHeight-80
+                },
+            }
+        },
+        props: {
+            widthLeft: {
+                required: true
+            }
+        },
+        computed: {
+            mapId() {
+                return this.$route.params.mapId;
+            },
+            height() {
+                return this.$store.state.app.height - 50-30;
+            }
+        },
+        async beforeDestroy() {
+            // await this.clearAllTimer();
+            // if (!this.isReplay) {
+            //     await this.quit();
+            // }
+            // await this.$store.dispatch('training/reset');
+            await this.$store.dispatch('map/mapClear');
+            // EventBus.$off('clearCheckLogin');
+        },
+        watch: {
+            widthLeft(val){
+                this.setWindowSize();
+            },
+            $route() {
+                this.$nextTick(() => {
+                    this.initLoadData();
+                });
+            },
+            // '$store.state.map.mapViewLoadedCount': function (val) {
+            //     // this.subscribe();
+            //     debugger;
+            //     this.$store.dispatch('map/setTrainWindowShow', false);
+            // },
+            '$store.state.app.windowSizeCount': function() {
+                this.setWindowSize();
+            },
+        },
+        async mounted() {
+            await this.setWindowSize();
+            await this.initLoadData();
+        },
+        methods:{
+            async initLoadData(){
+                if (parseInt(this.mapId)) {
+                    await this.loadMapDataById(this.mapId);
+                } else {
+                    this.endViewLoading();
+                }
+            },
+            // 通过id加载地图数据
+            async loadMapDataById(mapId) {
+                try {
+                    await loadMapDataById(mapId);
+                    await this.$store.dispatch('training/setMapDefaultState');
+                    await this.$store.dispatch('map/setTrainWindowShow', false);
+                } catch (error) {
+                    this.$messageBox(`获取地图数据失败: ${error.message}`);
+                    this.endViewLoading();
+                }
+            },
+            // 结束加载状态
+            endViewLoading(isSuccess) {
+                if (!isSuccess) {
+                    this.$store.dispatch('map/mapClear');
+                }
+
+                this.$nextTick(() => {
+                    EventBus.$emit('viewLoading', false);
+                });
+            },
+            clickEvent(em){
+
+            },
+            onContextmenu(em){
+
+            },
+            setWindowSize() {
+                this.$nextTick(() => {
+                    const width = this.$store.state.app.width-this.widthLeft;
+                    const height = this.height;
+                    this.$store.dispatch('config/resize', { width, height });
+                    this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: this.offsetStationCode });
+                });
+            }
+        }
+    };
+</script>
+<style lang="scss" scoped>
+    .map-view {
+        float: left;
+        width: auto;
+    }
+</style>