| | |
| | | @mousedown="move" |
| | | :class="{'move': moveFlag}"> |
| | | <div class="title"> |
| | | <img class="icon" |
| | | <img class="icon deblurring" |
| | | src="/img/icon/jg.png" |
| | | alt=""> |
| | | <span> |
| | |
| | | |
| | | <script> |
| | | import { mapGetters } from 'vuex' |
| | | |
| | | var $ = window.$ |
| | | |
| | | export default { |
| | | name: 'OrgNavBar', |
| | |
| | | mapPopup (item) { |
| | | this.$store.commit('CLEAR_ALL', null) |
| | | |
| | | this.$store.commit('SET_POPUPBGURL', item.bgImg) |
| | | 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) |
| | | |
| | | var that = this |
| | | |
| | | this.viewer.zoomToPosition( |
| | | new this.DC.Position(item.longitude, item.latitude, item.alt, item.heading, item.pitch, item.roll), |
| | | 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 () { |
| | | that.newPopup(item) |
| | | } |
| | | }, |
| | | 3 |
| | | ) |
| | | }, |
| | | newPopup (item) { |
| | | const position = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position(item.longitude, item.latitude, item.alt, item.heading, item.pitch, item.roll)) |
| | | 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', |
| | |
| | | border-radius: 8px; |
| | | top: 24%; |
| | | left: 20%; |
| | | background-color: #fff; |
| | | background-color: transparent; |
| | | z-index: 999; |
| | | font-size: 14px; |
| | | |
| | | .container { |
| | | .header { |
| | | position: relative; |
| | |
| | | width: 100%; |
| | | height: 36px; |
| | | line-height: 36px; |
| | | background-color: #020c17; |
| | | 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; |
| | |
| | | color: #fff; |
| | | } |
| | | } |
| | | |
| | | .close { |
| | | position: absolute; |
| | | right: 6px; |
| | |
| | | height: 14px; |
| | | } |
| | | } |
| | | |
| | | .move { |
| | | cursor: move; |
| | | } |
| | | |
| | | .content { |
| | | clear: both; |
| | | width: 100%; |
| | |
| | | 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; |
| | |
| | | list-style: none; |
| | | border-bottom: 1px dashed #ccc; |
| | | text-align: left; |
| | | |
| | | img { |
| | | position: absolute; |
| | | left: 0; |
| | |
| | | margin: auto; |
| | | width: 14px; |
| | | } |
| | | |
| | | span { |
| | | color: #fff; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | span:hover { |
| | | text-decoration: underline; |
| | | } |