desc: 调整检测高度问题

2019-10-28 11:07:33 +08:00 · 2019-10-28 11:07:33 +08:00 · 285b80ffb7
commit 285b80ffb7
parent 50f87895c6
8 changed files with 253 additions and 252 deletions
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@ -2,7 +2,14 @@
  <div class="app-wrapper" :class="classObj">
    <div class="main-container">
      <navbar />
-      <app-main :style="{width: width+'px', height: height+'px'}" />
+      <!-- <app-main :style="{width: width+'px', height: height+'px'}" /> -->
+      <section class="app-main" :style="{height: height+'px'}">
+        <el-scrollbar wrap-class="scrollbar-wrapper app_scrollbar_box">
+          <transition name="fade" mode="out-in">
+            <router-view />
+          </transition>
+        </el-scrollbar>
+      </section>
      <el-footer style="height:30px;text-align:right;line-height: 30px;">
        <span style="font-size:14px;">Copyright ©2018 北京玖琏科技有限公司 京ICP备18028522号</span>
      </el-footer>
@ -11,13 +18,13 @@
 </template>

 <script>
-import { Navbar, AppMain } from './components'; // Sidebar
+import { Navbar } from './components'; // Sidebar

 export default {
 	name: 'Layout',
 	components: {
-		Navbar,
-		AppMain
+		Navbar
+		// AppMain
 	},
 	data() {
 		return {
@ -40,7 +47,7 @@ export default {
 			return this.$store.state.app.width;
 		},
 		height() {
-			return this.$store.state.app.height-60-30;
+			return this.$store.state.app.height - 90;
 		}
 	},
 	created() {
@ -81,3 +88,10 @@ export default {
        z-index: 999;
    }
 </style>
+<style rel="stylesheet/scss" lang="scss">
+	.app_scrollbar_box{
+		.el-scrollbar__view{
+			height: 100%;
+		}
+	}
+</style>
--- a/src/utils/baseUrl.js
+++ b/src/utils/baseUrl.js
@ -3,9 +3,9 @@ export function getBaseUrl() {
 	let BASE_API;
 	if (process.env.NODE_ENV === 'development') {
 		// BASE_API = 'https://joylink.club/jlcloud';
-		// BASE_API = 'https://test.joylink.club/jlcloud';
+		BASE_API = 'https://test.joylink.club/jlcloud';
 		// BASE_API = 'http://192.168.3.5:9000'; // 袁琪
-		BASE_API = 'http://192.168.3.6:9000'; // 旭强
+		// BASE_API = 'http://192.168.3.6:9000'; // 旭强
 		// BASE_API = 'http://192.168.3.41:9000'; // 王兴杰
 	} else {
 		BASE_API = process.env.VUE_APP_BASE_API;
--- a/src/views/designPlatform/demonList.vue
+++ b/src/views/designPlatform/demonList.vue
@ -4,23 +4,10 @@
      <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' }">
-        <el-tree
-          ref="tree"
-          :data="treeList"
-          node-key="id"
-          :props="defaultProps"
-          highlight-current
-          :span="22"
-          :filter-node-method="filterNode"
-          @node-click="clickEvent"
-        >
-          <!-- @node-contextmenu="showContextMenu" -->
-          <span slot-scope="{ node:tnode, data }" >
-            <span
-              class="el-icon-tickets"
-              :style="{color: data.valid ? 'green':''}"
-            ></span>
-			<span>&nbsp;{{ tnode.label }}</span>
+        <el-tree ref="tree" :data="treeList" node-key="id" :props="defaultProps" highlight-current :span="22" :filter-node-method="filterNode" @node-click="clickEvent">
+          <span slot-scope="{ node:tnode, data }">
+            <span class="el-icon-tickets" :style="{color: data.valid ? 'green':''}" />
+            <span>&nbsp;{{ tnode.label }}</span>
          </span>
        </el-tree>
      </el-scrollbar>
@ -41,10 +28,6 @@ export default {
 		FilterCity
 	},
 	props: {
-		height: {
-			type: Number,
-			required: true
-		},
 		width: {
 			type: Number,
 			required: true
@ -74,6 +57,11 @@ export default {
 			cityCode: ''
 		};
 	},
+	computed: {
+		height() {
+			return this.$store.state.app.height - 93;
+		}
+	},
 	watch: {
 		filterText(val) {
 			this.treeList = this.treeData.filter((res) => {
@ -97,29 +85,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);
-					break;
-				}
-				case 'mapPreview':{
-					this.$router.push({ path: `${UrlConfig.design.mapPreview}/${obj.mapId}` });
-					break;
-				}
+			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();
 		},
@ -134,17 +122,16 @@ export default {
 				const res = await listPublishMap({cityCode: filterSelect});

 				res.data.forEach(elem=>{
-					// debugger;
 					// elem.children.find(n => { return n.name.includes("行调")})
 					elem.children=[
 						{
-						    id:'1',
-						    name:this.$t('designPlatform.mapPreview'),
-							type:'mapPreview',
+							id: '1',
+							name: this.$t('designPlatform.mapPreview'),
+							type: 'mapPreview',
 							mapId: elem.id
 						}
 					];
-					this.isAdministrator()?elem.children.push({id: '2',name: this.$t('designPlatform.lessonDesign'),type: 'lessonDesign',mapId: elem.id,skinCode: elem.skinCode}):'';
+					this.isAdministrator()?elem.children.push({id: '2', name: this.$t('designPlatform.lessonDesign'), type: 'lessonDesign', mapId: elem.id, skinCode: elem.skinCode}):'';
 					elem.children.push(
 						{
 							id: '3',
@ -186,10 +173,7 @@ export default {
 		},
 		isAdministrator() {
 			return this.$store.state.user.roles.includes(superAdmin) || this.$store.state.user.roles.includes(admin);
-		},
-		// createMap() {
-		//     this.$emit("createMap");
-		// },
+		}
 	}
 };
 </script>
--- a/src/views/designPlatform/home.vue
+++ b/src/views/designPlatform/home.vue
@ -1,53 +1,53 @@
 <template>
-    <el-card :style="{height: height+'px'}">
-        <div class="home-box" :style="{height: height+'px'}">
-            <el-scrollbar wrap-class="scrollbar-wrapper">
-                <h1 class="title">
-                    城市轨道交通设计平台
-                    <!-- <img :src="logo" alt="" class="logo-img"> -->
-                </h1>
-                <div class="card-box">
-                    <el-carousel :interval="4000" type="card" height="380px">
-                        <el-carousel-item v-for="(item, index) in listImg" :key="index">
-                            <img :src="item.src" alt="" height="100%" width="100%">
-                        </el-carousel-item>
-                    </el-carousel>
-                </div>
-                <div class="brief-box">{{ $t('demonstration.simulationSystemDescription') }}</div>
-            </el-scrollbar>
+  <el-card>
+    <div class="home-box" :style="{height: height+'px'}">
+      <el-scrollbar wrap-class="scrollbar-wrapper">
+        <div class="content_box">
+          <h1 class="title">
+            城市轨道交通设计平台
+          </h1>
+          <div class="card-box">
+            <el-carousel :interval="4000" type="card" height="380px">
+              <el-carousel-item v-for="(item, index) in listImg" :key="index">
+                <img :src="item.src" alt="" height="100%" width="100%">
+              </el-carousel-item>
+            </el-carousel>
+          </div>
+          <div class="brief-box">{{ $t('demonstration.simulationSystemDescription') }}</div>
        </div>
-    </el-card>
+      </el-scrollbar>
+    </div>
+  </el-card>
 </template>

 <script>
-    import logo from '@/assets/logo.png';
-    import home1 from '@/assets/home/home1.png';
-    import home2 from '@/assets/home/home2.png';
-    import home3 from '@/assets/home/demon1.jpg';
-    import home4 from '@/assets/home/tring1.png';
-    import home5 from '@/assets/home/tring4.jpg';
-    import home6 from '@/assets/home/demon2.jpg';
-    export default {
-        name: 'Home',
-        data() {
-            return {
-                listImg: [
-                    { src: home1 },
-                    { src: home2 },
-                    { src: home3 },
-                    { src: home4 },
-                    { src: home5 },
-                    { src: home6 }
-                ],
-                logo: logo
-            };
-        },
-        computed: {
-            height() {
-                return this.$store.state.app.height - 50-30;
-            }
-        }
-    };
+import home1 from '@/assets/home/home1.png';
+import home2 from '@/assets/home/home2.png';
+import home3 from '@/assets/home/demon1.jpg';
+import home4 from '@/assets/home/tring1.png';
+import home5 from '@/assets/home/tring4.jpg';
+import home6 from '@/assets/home/demon2.jpg';
+
+export default {
+	name: 'Home',
+	data() {
+		return {
+			listImg: [
+				{ src: home1 },
+				{ src: home2 },
+				{ src: home3 },
+				{ src: home4 },
+				{ src: home5 },
+				{ src: home6 }
+			]
+		};
+	},
+	computed: {
+		height() {
+			return this.$store.state.app.height - 93;
+		}
+	}
+};
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
@ -57,41 +57,43 @@
    }

    .home-box {
-        padding: 15px 100px;
        float: left;
        width: 100%;
        font-family: 'Microsoft YaHei';

-    .title {
-        font-size: 35px;
-        width: 100%;
-        text-align: center;
-        font-weight: 400;
-        margin-top: 55px;
-        border-bottom: 2px dashed #333;
-        padding-bottom: 15px;
-        margin-bottom: 70px;
-        position: relative;
+        .content_box{
+            padding: 0 100px 15px;
+        }
+        .title {
+            font-size: 35px;
+            width: 100%;
+            text-align: center;
+            font-weight: 400;
+            margin-top: 55px;
+            border-bottom: 2px dashed #333;
+            padding-bottom: 15px;
+            margin-bottom: 70px;
+            position: relative;

-    .logo-img {
-        position: absolute;
-        right: 0;
-        top: 0;
-        width: 55px;
-    }
-    }
+            .logo-img {
+                position: absolute;
+                right: 0;
+                top: 0;
+                width: 55px;
+            }
+        }

-    .card-box {
-        width: 100%;
-        padding: 0 50px;
-    }
+        .card-box {
+            width: 100%;
+            padding: 0 50px;
+        }

-    .brief-box {
-        font-size: 18px;
-        text-indent: 2em;
-        line-height: 32px;
-        padding: 40px 20px 0;
-        font-family: unset;
-    }
+        .brief-box {
+            font-size: 18px;
+            text-indent: 2em;
+            line-height: 32px;
+            padding: 40px 20px 0;
+            font-family: unset;
+        }
    }
 </style>
--- a/src/views/designPlatform/index.vue
+++ b/src/views/designPlatform/index.vue
@ -2,11 +2,11 @@
  <div class="app-wrapper">
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <div v-show="listShow" class="examList" :style="{width: widthLeft+'px'}">
-        <demon-list ref="demonList" :height="height" :width="widthLeft" />
+        <demon-list ref="demonList" :width="widthLeft" />
      </div>
      <drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
      <transition>
-        <router-view :product-list="productList" :widthLeft="widthLeft"/>
+        <router-view :product-list="productList" :width-left="widthLeft" />
      </transition>
    </el-scrollbar>
  </div>
@ -39,9 +39,6 @@ export default {
 		...mapGetters([
 			'lessonbar'
 		]),
-		height() {
-			return this.$store.state.app.height - 50-30;
-		},
 		width() {
 			return this.$store.state.app.width;
 		}
@ -77,14 +74,14 @@ export default {
 		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 });
+			// const height = this.$store.state.app.height - 90;
+			this.$store.dispatch('config/resize', { width: width });
 		},
 		setMapResize(LeftWidth) {
 			this.currentWidth=this.$store.state.app.width - this.widthLeft;
 			const widths = this.$store.state.app.width - 521 - LeftWidth;
-			const heights = this.$store.state.app.height - 90;
-			this.$store.dispatch('config/resize', { width: widths, height: heights });
+			// const heights = this.$store.state.app.height - 90;
+			this.$store.dispatch('config/resize', { width: widths });
 		}

 	}
--- a/src/views/designPlatform/mapPreview.vue
+++ b/src/views/designPlatform/mapPreview.vue
@ -1,116 +1,119 @@
 <template>
-    <div class="map-view">
-        <jlmap-visual ref="jlmapVisual" @onSelect="clickEvent" @onMenu="onContextmenu" />
-    </div>
+  <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 this.$store.dispatch('training/changeMode', { mode: null });
-                    await loadMapDataById(mapId);
-                    await this.$store.dispatch('training/over');
-                    await this.$store.dispatch('training/setMapDefaultState');
-                    await this.$store.dispatch('map/clearJlmapTrainView');
-                    await this.$store.dispatch('map/setTrainWindowShow', false);
-                } catch (error) {
-                    this.$messageBox(`获取地图数据失败: ${error.message}`);
-                    this.endViewLoading();
-                }
-            },
-            // 结束加载状态
-            endViewLoading(isSuccess) {
-                if (!isSuccess) {
-                    this.$store.dispatch('map/mapClear');
-                }
+import JlmapVisual from '@/views/jlmap/index';
+import { loadMapDataById } from '@/utils/loaddata';
+import { EventBus } from '@/scripts/event-bus';

-                this.$nextTick(() => {
-                    EventBus.$emit('viewLoading', false);
-                });
-            },
-            clickEvent(em){
+export default {
+	name: 'MapPreview',
+	components: {
+		JlmapVisual
+	},
+	props: {
+		widthLeft: {
+			type: Number,
+			required: true
+		}
+	},
+	data() {
+		return {
+			size: {
+				width: document.documentElement.clientWidth - 400,
+				height: document.documentElement.clientHeight - 80
+			}
+		};
+	},
+	computed: {
+		mapId() {
+			return this.$route.params.mapId;
+		},
+		height() {
+			return this.$store.state.app.height - 50-30;
+		}
+	},
+	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 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');
+	},
+	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 this.$store.dispatch('training/changeMode', { mode: null });
+				await loadMapDataById(mapId);
+				await this.$store.dispatch('training/over');
+				await this.$store.dispatch('training/setMapDefaultState');
+				await this.$store.dispatch('map/clearJlmapTrainView');
+				await this.$store.dispatch('map/setTrainWindowShow', false);
+			} catch (error) {
+				this.$messageBox(`获取地图数据失败: ${error.message}`);
+				this.endViewLoading();
+			}
+		},
+		// 结束加载状态
+		endViewLoading(isSuccess) {
+			if (!isSuccess) {
+				this.$store.dispatch('map/mapClear');
+			}

-            },
-            onContextmenu(em){
+			this.$nextTick(() => {
+				EventBus.$emit('viewLoading', false);
+			});
+		},
+		clickEvent(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 });
-                });
-            }
-        }
-    };
+		},
+		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 {
--- a/src/views/designPlatform/userDemonList.vue
+++ b/src/views/designPlatform/userDemonList.vue
@ -17,8 +17,8 @@
          <span
            class="el-icon-tickets"
            :style="{color: data.valid ? 'green':''}"
-          ></span>
-		  <span>&nbsp;{{ tnode.label }}</span>
+          />
+          <span>&nbsp;{{ tnode.label }}</span>
        </span>
      </el-tree>
    </el-scrollbar>
--- a/src/views/designPlatform/userIndex.vue
+++ b/src/views/designPlatform/userIndex.vue
@ -26,6 +26,7 @@ import { launchFullscreen } from '@/utils/screen';
 import localStore from 'storejs';
 import { getSessionStorage, setSessionStorage } from '@/utils/auth';
 import MapCreate from '@/views/map/mapdraft/mapmanage/create';
+import { UrlConfig } from '@/router/index';

 export default {
 	name: 'DesignPlatform',