From e40ee62d3e9b71ffe3432d32a53a00c4097b5708 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Fri, 31 Dec 2021 09:03:28 +0800
Subject: [PATCH] +3d 2.5d
---
src/components/orgNavBar/index.vue | 114 +++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 103 insertions(+), 11 deletions(-)
diff --git a/src/components/orgNavBar/index.vue b/src/components/orgNavBar/index.vue
index 16f1fe4..d8f67e1 100644
--- a/src/components/orgNavBar/index.vue
+++ b/src/components/orgNavBar/index.vue
@@ -6,7 +6,7 @@
@mousedown="move"
:class="{'move': moveFlag}">
<div class="title">
- <img class="icon"
+ <img class="icon deblurring"
src="/img/icon/jg.png"
alt="">
<span>
@@ -21,7 +21,8 @@
<div class="content">
<ul>
<li v-for="(item, index) in navList"
- :key="index">
+ :key="index"
+ @click="mapPopup(item)">
<img :src="item.icon"
alt="">
<span>
@@ -35,11 +36,14 @@
</template>
<script>
+import { mapGetters } from 'vuex'
+
export default {
name: 'OrgNavBar',
data () {
return {
- moveFlag: false
+ moveFlag: false,
+ DC: null
}
},
props: {
@@ -49,6 +53,26 @@
title: {
type: String
}
+ },
+ created () {
+ this.DC = global.DC
+ },
+ computed: {
+ ...mapGetters([
+ 'viewer',
+ 'popupBgUrl',
+ 'pupupQRUrl',
+ // 点信息
+ 'pointPosition',
+ // 点名称
+ 'stateName',
+ // 地址
+ 'siteName',
+ // 介绍
+ 'introduceText',
+ // 全景地址
+ 'panoramaUrl'
+ ])
},
methods: {
move (e) {
@@ -99,6 +123,41 @@
},
closeModel () {
this.$parent.closeModel()
+ },
+ mapPopup (item) {
+ this.$store.commit('CLEAR_ALL', null)
+
+ var imgArr = item.bgImg.split(',')
+
+ this.$store.commit('SET_POPUPBGURL', imgArr[0])
+ this.$store.commit('SET_POPUPQRURL', item.QRImg)
+ this.$store.commit('SET_POINTPOSITION', [Number(item.longitude), Number(item.latitude), Number(item.alt), Number(item.heading), Number(item.pitch), Number(item.roll)])
+ this.$store.commit('SET_STATENAME', item.navTitle)
+ this.$store.commit('SET_SITENAME', item.address)
+ this.$store.commit('SET_TELEPHONE', item.telephone)
+ this.$store.commit('SET_INTRODUCETEXT', item.introduce)
+ this.$store.commit('SET_POPUPIMGATLAS', imgArr)
+
+ this.newPopup(item)
+ this.viewer.flyToPosition(
+ new this.DC.Position(Number(item.longitude), Number(item.latitude), 3000, Number(item.heading), Number(item.pitch), Number(item.roll)),
+ function () {
+ },
+ 3
+ )
+ },
+ newPopup (item) {
+ const position = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position(Number(item.longitude), Number(item.latitude), Number(item.alt), 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_DETAILSPOPUP', true)
}
}
}
@@ -110,11 +169,12 @@
width: 322px;
height: auto;
border-radius: 8px;
- top: 24%;
- left: 20%;
- background-color: #fff;
+ top: 140px;
+ left: 140px;
+ background-color: transparent;
z-index: 999;
font-size: 14px;
+
.container {
.header {
position: relative;
@@ -122,14 +182,27 @@
width: 100%;
height: 36px;
line-height: 36px;
- background-color: #2196f3;
+ background: rgba(0, 131, 176, 0.9); /* fallback for old browsers */
+ background: -webkit-linear-gradient(
+ to left,
+ rgba(0, 180, 219, 0.9),
+ rgba(0, 131, 176, 0.9)
+ ); /* Chrome 10-25, Safari 5.1-6 */
+ background: linear-gradient(
+ to left,
+ rgba(0, 180, 219, 0.9),
+ rgba(0, 131, 176, 0.9)
+ ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
.title {
padding-left: 10px;
+
img {
- width: 18px;
- height: 18px;
+ width: 20px;
+ height: 20px;
vertical-align: middle;
}
+
span {
margin-left: 6px;
display: inline-block;
@@ -137,6 +210,7 @@
color: #fff;
}
}
+
.close {
position: absolute;
right: 6px;
@@ -146,11 +220,14 @@
margin: auto;
width: 14px;
height: 14px;
+ cursor: pointer;
}
}
+
.move {
cursor: move;
}
+
.content {
clear: both;
width: 100%;
@@ -158,11 +235,23 @@
margin-top: 0px;
text-align: center;
overflow-y: auto;
- background: url(/img/bg/nav-bg.jpeg) no-repeat;
- background-size: 100% 100%;
+ background: rgba(0, 131, 176, 0.9); /* fallback for old browsers */
+ background: -webkit-linear-gradient(
+ to left,
+ rgba(0, 180, 219, 0.9),
+ rgba(0, 131, 176, 0.9)
+ ); /* Chrome 10-25, Safari 5.1-6 */
+ background: linear-gradient(
+ to left,
+ rgba(0, 180, 219, 0.9),
+ rgba(0, 131, 176, 0.9)
+ ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+ border-radius: 0 0 8px 8px;
+
ul {
padding: 15px;
padding-top: 4px;
+
li {
padding-left: 24px;
position: relative;
@@ -171,6 +260,7 @@
list-style: none;
border-bottom: 1px dashed #ccc;
text-align: left;
+
img {
position: absolute;
left: 0;
@@ -180,10 +270,12 @@
margin: auto;
width: 14px;
}
+
span {
color: #fff;
cursor: pointer;
}
+
span:hover {
text-decoration: underline;
}
--
Gitblit v1.9.3