From 6851cc1e217a2af9ae62ebb3bf28e00a0d8ddadb Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Fri, 31 Dec 2021 09:06:55 +0800
Subject: [PATCH] +
---
src/components/arcNavBar/index.vue | 203 +++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 175 insertions(+), 28 deletions(-)
diff --git a/src/components/arcNavBar/index.vue b/src/components/arcNavBar/index.vue
index 1d58fc4..636466e 100644
--- a/src/components/arcNavBar/index.vue
+++ b/src/components/arcNavBar/index.vue
@@ -6,11 +6,11 @@
@mousedown="move"
:class="{'move': moveFlag}">
<div class="title">
- <img class="icon"
- src="/img/icon/jg.png"
+ <img class="icon deblurring"
+ src="/img/icon/xyjz.png"
alt="">
<span>
- {{title}}
+ {{arcNavBarTitle}}
</span>
</div>
<img class="close"
@@ -21,12 +21,16 @@
<div class="content">
<div class="tab">
<ul>
- <li :class="{'on': item.flag}" v-for="(item, index) in navList" :key="index" @click="topNavClick(index)">{{ item.title }}</li>
+ <li :class="{'on': item.flag}"
+ v-for="(item, index) in titleList"
+ :key="index"
+ @click="topNavClick(item, index)">{{ item.title }}</li>
</ul>
</div>
<ul>
<li v-for="(item, index) in itemNavList"
- :key="index">
+ :key="index"
+ @click="mapPopup(item)">
<img :src="item.icon"
alt="">
<span>
@@ -40,24 +44,63 @@
</template>
<script>
+import { mapGetters } from 'vuex'
+import { getList, getChildNavList, getChildNavDetail } from '@/api/pc/public/arc'
+
export default {
name: 'ArcNavBar',
data () {
return {
moveFlag: false,
- itemNavList: []
+ itemNavList: [],
+ titleList: [],
+ DC: null
}
},
props: {
- navList: {
- type: Array
- },
- title: {
- type: String
- }
+
+ },
+ computed: {
+ ...mapGetters([
+ 'viewer',
+ 'popupBgUrl',
+ 'pupupQRUrl',
+ // 点信息
+ 'pointPosition',
+ // 点名称
+ 'stateName',
+ // 地址
+ 'siteName',
+ // 介绍
+ 'introduceText',
+ // 全景地址
+ 'panoramaUrl',
+ 'arcNavBarTitle',
+ 'arcNavBarCode'
+ ])
+ },
+ created () {
+ this.DC = global.DC
},
mounted () {
- this.itemNavList = this.navList[0].list
+
+ },
+ watch: {
+ arcNavBarCode: {
+ immediate: true,
+ handler (newCode, oldCode) {
+ this.titleList = []
+ getList().then(res => {
+ res.data.data.forEach(item => {
+ this.titleList.push({ title: item.dictValue, flag: false, key: item.dictKey })
+ })
+
+ this.titleList[0].flag = true
+
+ this.getChilsNavs(this.titleList[0].key)
+ })
+ }
+ }
},
methods: {
move (e) {
@@ -106,17 +149,98 @@
document.onmouseup = null
}
},
- closeModel () {
- this.$parent.closeModel()
- },
- topNavClick (index) {
- this.navList.forEach(item => {
+
+ topNavClick (item, index) {
+ this.titleList.forEach(item => {
item.flag = false
})
- this.navList[index].flag = true
+ this.titleList[index].flag = true
- this.itemNavList = this.navList[index].list
+ this.getChilsNavs(item.key)
+ },
+
+ getChilsNavs (campus) {
+ this.itemNavList = []
+
+ getChildNavList({ campus: campus, type: this.arcNavBarCode }).then(res => {
+ res.data.data.forEach(item => {
+ this.itemNavList.push({
+ navTitle: item.mechanismname,
+ icon: '/img/navicon/tag.png',
+ id: item.id
+ })
+ })
+ })
+ },
+
+ mapPopup (param) {
+ getChildNavDetail({ id: param.id }).then(res => {
+ var result = res.data.data[0].list
+ this.$store.commit('CLEAR_ALL', null)
+
+ var imgArr = result.tpurl.split(',')
+ var tabOne = res.data.data[0].jx.split(',')
+ var tabTwo = res.data.data[0].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)
+ this.$store.commit('SET_PANORAMAURL', result.panoramaurl)
+ this.$store.commit('SET_POPUPIMGATLAS', imgArr)
+ if (result.videourl && result.videourl != '') {
+ this.$store.commit('SET_MONITORURL', result.videourl)
+ }
+ if (res.data.data[0].jx != '') {
+ this.$store.commit('SET_TEACHLIST', tabOne)
+ } else {
+ this.$store.commit('SET_TEACHLIST', [])
+ }
+
+ if (res.data.data[0].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)),
+ function () {
+ },
+ 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_DETAILSPOPUP', true)
+ },
+
+ closeModel () {
+ 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)
}
}
}
@@ -128,9 +252,9 @@
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 {
@@ -140,12 +264,23 @@
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 {
@@ -164,6 +299,7 @@
margin: auto;
width: 14px;
height: 14px;
+ cursor: pointer;
}
}
.move {
@@ -176,8 +312,19 @@
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;
+
.tab {
height: 42px;
border-bottom: 1px solid #ccc;
--
Gitblit v1.9.3