From 4593a5c6ef4549a519681fa44d94fa242d15bec4 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Thu, 30 Dec 2021 11:57:28 +0800
Subject: [PATCH] 完善
---
src/components/map/components/campusBuildingSearch.vue | 359 +++++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 332 insertions(+), 27 deletions(-)
diff --git a/src/components/map/components/campusBuildingSearch.vue b/src/components/map/components/campusBuildingSearch.vue
index bccc2f3..3ddaea0 100644
--- a/src/components/map/components/campusBuildingSearch.vue
+++ b/src/components/map/components/campusBuildingSearch.vue
@@ -1,9 +1,12 @@
<template>
<div>
- <div class="map-campus-serarch">
+ <div class="map-campus-search"
+ id="CampusSearchPanel">
<el-input class="search-input"
placeholder="校园搜索…"
- v-model="input3">
+ v-model="searchInput"
+ @input="searchValueChange"
+ @focus="shortcutFlag = true">
</el-input>
<el-button-group>
<el-button @click="navigationShow"
@@ -13,22 +16,31 @@
type="primary"
icon="el-icon-my-search"></el-button>
</el-button-group>
- </div>
- <div class="map-campus-shortcut">
- <div class="shortcut-box">
+ <div v-show="searchValShow"
+ class="search-value-box">
<ul>
- <li><img src="" alt=""><span>党群机构</span></li>
- <li><img src="" alt=""><span></span></li>
- <li><img src="" alt=""><span></span></li>
- <li><img src="" alt=""><span></span></li>
- <li><img src="" alt=""><span></span></li>
- <li><img src="" alt=""><span></span></li>
- <li><img src="" alt=""><span></span></li>
- <li><img src="" alt=""><span></span></li>
- <li><img src="" alt=""><span></span></li>
+ <li v-for="(item, index) in searchValList"
+ :key="index"
+ @click="loadPopup(item)">
+ {{item.name}}
+ </li>
</ul>
</div>
-
+ <div class="map-campus-shortcut"
+ v-show="shortcutFlag">
+ <div class="shortcut-box">
+ <ul>
+ <li v-for="(item, index) in shortcutList"
+ :key="index">
+ <el-button @click="openModelPopup(item)">
+ <img :src="item.bgimg"
+ alt="">
+ <span>{{item.title}}</span>
+ </el-button>
+ </li>
+ </ul>
+ </div>
+ </div>
</div>
</div>
</template>
@@ -37,29 +49,230 @@
import { mapGetters } from 'vuex'
+import { getList } from '@/api/pc/orgnav/index'
+import { getSearchList } from '@/api/pc/public/search'
+
export default {
name: 'campusBuildingSearch',
data () {
return {
+ DC: null,
shortcutList: [
{
- bgimg: '/img/search/',
- span: '党群机构'
+ bgimg: '/img/search/org.png',
+ title: '党群机构',
+ type: 'orgnav',
+ code: 1
+ },
+ {
+ bgimg: '/img/search/ofc.png',
+ title: '职能部处',
+ type: 'orgnav',
+ code: 2
+ },
+ {
+ bgimg: '/img/search/teach.png',
+ title: '教学科研',
+ type: 'orgnav',
+ code: 4
+ },
+ {
+ bgimg: '/img/search/venue.png',
+ title: '校内场馆',
+ type: 'arc',
+ code: 3
+ },
+ {
+ bgimg: '/img/search/dorm.png',
+ title: '学生宿舍',
+ type: 'arc',
+ code: 4
+ },
+ {
+ bgimg: '/img/search/scenery.png',
+ title: '文化风景',
+ type: 'arc',
+ code: 5
}
- ]
+ ],
+ shortcutFlag: false,
+ searchInput: '',
+ searchValShow: false,
+ searchValList: []
}
},
computed: {
...mapGetters([
+ 'viewer',
// 校内导航的显示关闭
- 'campusNavFlag'
+ 'campusNavFlag',
+ 'orgNavBarFlag',
+ 'arcNavBarFlag'
])
},
+ created () {
+ this.DC = global.DC
+ },
methods: {
+ searchValueChange () {
+ if (this.searchInput == '') {
+ this.searchValList = []
+ this.searchValShow = false
+ return
+ }
+ getSearchList({ mechanismName: this.searchInput }).then(res => {
+ if (res.data.data.length > 0) {
+ this.searchValList = res.data.data
+ this.searchValShow = true
+ }
+ })
+ },
+
navigationShow () {
if (this.campusNavFlag == false) {
this.$store.commit('SET_CAMPUSNAVFLAG', true)
}
+ },
+
+ openModelPopup (param) {
+ var list = []
+ if (param.type == 'orgnav') {
+ var path = this.$route.path
+ if (path.indexOf('/arc') != -1) {
+ this.$store.dispatch('delVisitedViews', this.$route)
+ this.$router.push('/pcLayout/default')
+ this.$store.commit('SET_ARCNAVBARTITLE', '')
+ this.$store.commit('SET_ARCNAVBARCODE', '')
+ this.$store.commit('SET_ARCNAVBARFLAG', false)
+ }
+
+ if (this.arcNavBarFlag == true) {
+ this.$store.commit('SET_ARCNAVBARTITLE', '')
+ this.$store.commit('SET_ARCNAVBARCODE', '')
+ this.$store.commit('SET_ARCNAVBARFLAG', false)
+ }
+
+ this.$store.commit('SET_ORGNAVBARTITLE', param.title)
+ this.$store.commit('SET_ORGNAVBARLIST', [])
+
+ this.$store.commit('SET_ORGNAVBARFLAG', true)
+
+ getList({ type: param.code }).then(res => {
+ res.data.data.records.forEach(item => {
+ list.push({
+ navTitle: item.mechanismname,
+ icon: '/img/navicon/tag.png',
+ longitude: item.jd,
+ latitude: item.wd,
+ alt: item.gd,
+ heading: item.heading,
+ pitch: item.pitch,
+ roll: item.roll,
+ bgImg: item.tpurl,
+ QRImg: item.codeurl,
+ address: item.address,
+ telephone: item.telephone,
+ introduce: item.introduce
+ })
+ })
+
+ this.$store.commit('SET_ORGNAVBARLIST', list)
+ })
+ } else if (param.type == 'arc') {
+ if (this.$route.path.indexOf('/orgnav') != -1) {
+ this.$store.dispatch('delVisitedViews', this.$route)
+ this.$router.push('/pcLayout/default')
+ this.$store.commit('SET_ORGNAVBARTITLE', '')
+ this.$store.commit('SET_ORGNAVBARLIST', [])
+ this.$store.commit('SET_ORGNAVBARFLAG', false)
+ }
+
+ if (this.orgNavBarFlag == true) {
+ this.$store.commit('SET_ORGNAVBARTITLE', '')
+ this.$store.commit('SET_ORGNAVBARLIST', [])
+ this.$store.commit('SET_ORGNAVBARFLAG', false)
+ }
+
+ this.$store.commit('SET_ARCNAVBARTITLE', param.title)
+ this.$store.commit('SET_ARCNAVBARCODE', param.code)
+ this.$store.commit('SET_ARCNAVBARFLAG', true)
+ }
+ },
+
+ shortcutShow (event) {
+ var sp = document.getElementById('CampusSearchPanel')
+
+ if (sp) {
+ if (!sp.contains(event.target)) { // 这句是说如果我们点击到了id为myPanel以外的区域
+ this.shortcutFlag = false
+ }
+ }
+ },
+
+ loadPopup (param) {
+ var that = this
+
+ that.searchInput = ''
+ that.searchValList = []
+ that.searchValShow = false
+
+ this.$store.commit('CLEAR_ALL', null)
+
+ var result = param.list
+
+ var imgArr = result.tpurl.split(',')
+ var tabOne = param.jx.split(',')
+ var tabTwo = param.sh.split(',')
+
+ this.$store.commit('SET_POPUPBGURL', imgArr[0])
+ this.$store.commit('SET_POPUPQRURL', result.codeurl)
+ this.$store.commit('SET_POINTPOSITION', [Number(result.jd), Number(result.wd), Number(result.gd), Number(result.heading), Number(result.pitch), Number(result.roll)])
+ this.$store.commit('SET_STATENAME', result.mechanismname)
+ this.$store.commit('SET_SITENAME', result.address)
+ this.$store.commit('SET_TELEPHONE', result.telephone)
+ this.$store.commit('SET_INTRODUCETEXT', result.introduce)
+ if (result.panoramaurl != '') {
+ this.$store.commit('SET_PANORAMAURL', result.panoramaurl)
+ }
+ if (result.videourl != '') {
+ this.$store.commit('SET_MONITORURL', result.videourl)
+ }
+ this.$store.commit('SET_POPUPIMGATLAS', imgArr)
+ if (param.jx != '') {
+ this.$store.commit('SET_TEACHLIST', tabOne)
+ } else {
+ this.$store.commit('SET_TEACHLIST', [])
+ }
+
+ if (param.sh != '') {
+ this.$store.commit('SET_LIVELIST', tabTwo)
+ } else {
+ this.$store.commit('SET_LIVELIST', [])
+ }
+
+ this.newPopup(result)
+ this.viewer.flyToPosition(
+ new this.DC.Position(Number(result.jd), Number(result.wd), 3000, Number(result.heading), Number(result.pitch), Number(result.roll)),
+ () => {
+
+ },
+ 3
+ )
+ },
+
+ newPopup (item) {
+ const position = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position(Number(item.jd), Number(item.wd), Number(item.gd), Number(item.heading), Number(item.pitch), Number(item.roll)))
+ // eslint-disable-next-line no-unused-vars
+ var popup = new this.DC.DivForms(this.viewer, {
+ domId: 'divFormsDomBox',
+ position: [
+ position
+ ]
+ })
+
+ this.$store.commit('SET_PANORAMAPOPUP', false)
+ this.$store.commit('SET_MONITORPOPUP', false)
+ this.$store.commit('SET_DETAILSPOPUP', true)
}
}
@@ -67,7 +280,7 @@
</script>
<style lang='scss' scope>
-.map-campus-serarch {
+.map-campus-search {
position: fixed;
top: 100px;
left: 0;
@@ -75,19 +288,21 @@
bottom: auto;
margin: auto;
width: 320px;
- height: 40px;
+ min-height: 40px;
+ max-height: 360px;
+ height: auto;
z-index: 11;
border-radius: 5px;
- box-shadow: 0 0 10px 2px #666;
+ box-shadow: 0 0 14px 2px rgb(221, 221, 221);
.search-input {
float: left;
width: 240px;
+ height: 40px;
border-radius: 5px 0 0 5px;
input {
- border: none;
- border-right: 1px solid #dcdfe6;
+ box-sizing: border-box;
border-radius: 5px 0 0 5px;
}
}
@@ -98,11 +313,12 @@
.el-button {
margin: 0;
- position: relative;
+ padding: 0;
width: 40px;
- height: 40px;
+ height: 40px !important;
+ position: relative;
border-radius: 0;
- border: none;
+ border: 1px solid #dcdfe6;
i {
margin: auto;
@@ -114,9 +330,98 @@
}
}
+ .el-button:nth-child(1) {
+ border-left: none;
+ border-right: none;
+ }
+
.el-button:nth-child(2) {
+ border-left: none;
+ border-right: none;
border-radius: 0 5px 5px 0;
}
}
+
+ .search-value-box {
+ position: absolute;
+ top: 41px;
+ left: 0;
+ width: auto;
+ min-width: 240px;
+ max-height: 520px;
+ background: #fff;
+ overflow-y: auto;
+ box-shadow: 0 0 14px 2px rgb(221, 221, 221);
+ border-radius: 5px;
+
+ ul {
+ li {
+ padding-left: 20px;
+ height: 36px;
+ line-height: 36px;
+ cursor: pointer;
+ }
+
+ li:hover {
+ background: #f5f5f5;
+ }
+ }
+ }
+
+ .map-campus-shortcut {
+ margin-top: 20px;
+ width: 100%;
+ height: 320px;
+ background: #fff;
+ border-radius: 5px;
+
+ .shortcut-box {
+ padding-top: 36px;
+ ul {
+ display: flex;
+ width: 100%;
+ height: 120px;
+ justify-content: space-around;
+ flex-wrap: wrap;
+
+ li {
+ width: 84px;
+ height: 76px;
+
+ .el-button {
+ width: 80px;
+ height: 70px;
+ padding: 6px 12px;
+ background: #efefef;
+ border: none;
+ border-radius: 5px;
+ box-sizing: border-box;
+ text-align: center;
+
+ & > span {
+ width: auto;
+ height: auto;
+
+ img {
+ margin-top: 4px;
+ width: 26px;
+ height: 26px;
+ }
+
+ span {
+ display: block;
+ font-size: 14px;
+ line-height: 28px;
+ }
+ }
+ }
+
+ .el-button:focus {
+ border: 1px solid #000;
+ }
+ }
+ }
+ }
+ }
}
</style>
--
Gitblit v1.9.3