school-web.git - Gitblit

			@@ -1,83 +1,66 @@
			<template>
			<div class="campus-nav-box"
			ref="campusNavBox">
			<div class="header"
			@mousedown="move"
			:class="{'move': moveFlag}">
			<tool-small-box class="campus-nav-box">
			<template slot="tool-small-box-header">
			<div class="title">
			<img class="icon deblurring"
			src="/img/icon/xndh.png"
			alt="">
			<span>
			社区内导航
			</span>
			<img class="icon deblurring" src="/img/icon/xndh.png" alt />
			<span>社区内导航</span>
			</div>
			<img class="close"
			src="/img/navicon/close.png"
			alt=""
			@click="closeModel">
			</div>
			<div class="container">
			<img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
			</template>
			<template slot="tool-small-box-content">
			<div class="tab">
			<ul>
			<li @click="tabClick('步行')"
			:class="{on:tabOneFlag}">
			<li @click="tabClick('步行')" :class="{on:tabOneFlag}">
			<i></i>
			步行
			</li>
			<li @click="tabClick('驾车')"
			:class="{on:tabTwoFlag}">
			<li @click="tabClick('驾车')" :class="{on:tabTwoFlag}">
			<i></i>
			驾车
			</li>
			</ul>
			</div>
			<div class="content">
			<div class="container">
			<div>
			<div id="ToNameContainer">
			<el-input v-model="toNameText"
			@input="toNameChange"
			placeholder="起点……">
			<template slot="prepend"><i class="el-icon-location"
			style="color: green;"></i></template>
			<el-input v-model="toNameText" @input="toNameChange" placeholder="起点……">
			<template slot="prepend">
			<i class="el-icon-location" style="color: green;"></i>
			</template>
			</el-input>
			<div v-show="toNameShow"
			class="toname-value-box">
			<div v-show="toNameShow" class="toname-value-box">
			<ul>
			<li v-for="(item, index) in toNameList"
			<li
			v-for="(item, index) in toNameList"
			:key="index"
			@click="originChange(item)">
			{{item.mechanismname}}
			</li>
			@click="originChange(item)"
			>{{item.mechanismname}}</li>
			</ul>
			</div>
			</div>
			<div id="ComeNameContainer">
			<el-input v-model="comeNameText"
			@input="comeNameChange"
			placeholder="终点……">
			<template slot="prepend"><i class="el-icon-location"
			style="color: red;"></i></template>
			<el-input v-model="comeNameText" @input="comeNameChange" placeholder="终点……">
			<template slot="prepend">
			<i class="el-icon-location" style="color: red;"></i>
			</template>
			</el-input>
			<div v-show="comeNameShow"
			class="comename-value-box">
			<div v-show="comeNameShow" class="comename-value-box">
			<ul>
			<li v-for="(item, index) in comeNameList"
			<li
			v-for="(item, index) in comeNameList"
			:key="index"
			@click="terminusChange(item)">
			{{item.mechanismname}}
			</li>
			@click="terminusChange(item)"
			>{{item.mechanismname}}</li>
			</ul>
			</div>
			</div>
			</div>
			<div>
			<el-button @click="startNavigation"
			type="primary">导航</el-button>
			<el-button @click="startNavigation" type="primary">导航</el-button>
			</div>
			</div>
			</div>
			</div>
			</template>
			</tool-small-box>
			</template>

			<script>
			@@ -88,7 +71,6 @@
			name: 'campusNav',
			data () {
			return {
			moveFlag: false,
			tabOneFlag: true,
			tabTwoFlag: false,
			DC: null,
			@@ -116,7 +98,8 @@
			// 到达名称
			'comeName',
			// 点信息
			'pointPosition'
			'pointPosition',
			'campusNavFlag'
			])
			},
			watch: {
			@@ -131,59 +114,22 @@
			handler (newCode, oldCode) {
			this.comeNameText = newCode
			}
			},
			campusNavFlag: {
			immediate: true,
			handler (newCode, oldCode) {
			if (newCode == false) {
			this.navigationWay = '步行'
			this.tabOneFlag = true
			this.tabTwoFlag = false
			}
			}
			}
			},
			created () {
			this.DC = global.DC
			},
			methods: {
			move (e) {
			const that = this
			const odiv = this.$refs.campusNavBox // 获取目标元素
			// 算出鼠标相对元素的位置
			const disX = e.clientX - odiv.offsetLeft
			const disY = e.clientY - odiv.offsetTop

			const disH = odiv.offsetHeight
			const disW = odiv.offsetWidth

			document.onmousemove = (e) => {
			that.moveFlag = true
			// 鼠标按下并移动的事件
			// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
			let left = e.clientX - disX
			let top = e.clientY - disY

			// 绑定元素位置到positionX和positionY上面

			if (left >= window.innerWidth - disW) {
			left = window.innerWidth - disW
			}

			if (left <= 0) {
			left = 0
			}

			if (top >= window.innerHeight - disH) {
			top = window.innerHeight - disH
			}

			if (top <= 60) {
			top = 60
			}

			// 移动当前元素
			odiv.style.left = (left) + 'px'
			odiv.style.top = (top) + 'px'
			odiv.style.bottom = 'auto'
			}
			document.onmouseup = (e) => {
			that.moveFlag = false
			document.onmousemove = null
			document.onmouseup = null
			}
			},

			closeModel () {
			if (this.$route.path.indexOf('/campusnavi') != -1) {
			this.$store.dispatch('delVisitedViews', this.$route)
			@@ -487,178 +433,4 @@
			</script>

			<style lang='scss' scope>
			.campus-nav-box {
			position: fixed;
			top: 20%;
			left: 20%;
			width: 320px;
			height: 186px;
			z-index: 99;
			color: #fff;
			background: #fff;
			border-radius: 8px;

			.header {
			position: relative;
			border-radius: 8px 8px 0 0;
			width: 100%;
			height: 36px;
			line-height: 36px;
			background-color: #2196f3;

			.title {
			padding-left: 10px;

			img {
			width: 20px;
			height: 20px;
			vertical-align: middle;
			}

			span {
			margin-left: 6px;
			display: inline-block;
			vertical-align: middle;
			color: #fff;
			}
			}

			.close {
			position: absolute;
			right: 6px;
			top: 0;
			left: auto;
			bottom: 0;
			margin: auto;
			width: 14px;
			height: 14px;
			cursor: pointer;
			}
			}

			.move {
			cursor: move;
			}

			.container {
			height: calc(100% - 36px);

			.tab {
			height: 44px;
			line-height: 44px;

			ul {
			display: flex;

			li {
			text-align: center;
			flex: 1;
			color: #337ab7;
			cursor: pointer;
			border-bottom: 1px solid #ccc;

			i {
			display: inline-block;
			width: 16px;
			height: 16px;
			vertical-align: text-bottom;
			}
			}

			li:nth-child(1) {
			border-right: 1px solid #ccc;

			i {
			background: url(/img/navicon/walk-one.png) no-repeat;
			background-size: 100% 100%;
			}
			}

			li:nth-child(2) {
			i {
			background: url(/img/navicon/drive-one.png) no-repeat;
			background-size: 100% 100%;
			}
			}

			li.on {
			color: #a40000;
			border-bottom: none;
			}

			li.on:nth-child(1) {
			i {
			background: url(/img/navicon/walk-two.png) no-repeat;
			background-size: 100% 100%;
			}
			}

			li.on:nth-child(2) {
			i {
			background: url(/img/navicon/drive-two.png) no-repeat;
			background-size: 100% 100%;
			}
			}
			}
			}

			.content {
			position: relative;
			padding: 0 10px;
			display: flex;
			align-items: center;
			height: calc(100% - 44px);

			& > div:nth-child(1) {
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 100%;

			& > div {
			flex: 1;
			line-height: 53px;
			}
			}

			& > div:nth-child(2) {
			width: 100px;
			text-align: center;
			}

			.toname-value-box,
			.comename-value-box {
			position: absolute;
			top: 48px;
			left: 65px;
			width: auto;
			min-width: 160px;
			max-height: 520px;
			color: #2c3e50;
			background: #fff;
			overflow-y: auto;
			box-shadow: 0 0 14px 2px rgb(221, 221, 221);
			border-radius: 5px;
			z-index: 11;

			ul {
			li {
			padding-left: 20px;
			height: 36px;
			line-height: 36px;
			cursor: pointer;
			}

			li:hover {
			background: #f5f5f5;
			}
			}
			}

			.comename-value-box {
			top: 100px;
			}
			}
			}
			}
			</style>