From ff7b7d4b3e46f943b46efda7aba309b7a818929a Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 15 Feb 2022 11:58:45 +0800
Subject: [PATCH] 部分公用代码提取，导航路线的逻辑优化
---
src/components/campusNav/index.vue | 314 +++++++---------------------------------------------
1 files changed, 43 insertions(+), 271 deletions(-)
diff --git a/src/components/campusNav/index.vue b/src/components/campusNav/index.vue
index b2e5caa..1a664ae 100644
--- a/src/components/campusNav/index.vue
+++ b/src/components/campusNav/index.vue
@@ -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>
--
Gitblit v1.9.3