Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
4e7a76f9 1 parent 68a9188f

垂直标题点击弹框样式调整

Inline Side-by-side
Showing 5 changed files with 1350 additions and 4 deletions
...@@ -10,7 +10,11 @@ export {} ...@@ -10,7 +10,11 @@ export {}
10 declare module '@vue/runtime-core' { 10 declare module '@vue/runtime-core' {
11 export interface GlobalComponents { 11 export interface GlobalComponents {
12 AudioBackground: typeof import('./src/components/audioBackground.vue')['default'] 12 AudioBackground: typeof import('./src/components/audioBackground.vue')['default']
13 + copy: typeof import('./src/components/InfoWindowWarn copy.vue')['default']
13 Floor: typeof import('./src/components/Floor/index.vue')['default'] 14 Floor: typeof import('./src/components/Floor/index.vue')['default']
15 + InfoPopup: typeof import('./src/components/InfoPopup.vue')['default']
16 + InfoPopupLite: typeof import('./src/components/InfoPopupLite.vue')['default']
17 + InfoPopupWarn: typeof import('./src/components/InfoPopupWarn.vue')['default']
14 InfoWindow: typeof import('./src/components/InfoWindow.vue')['default'] 18 InfoWindow: typeof import('./src/components/InfoWindow.vue')['default']
15 InfoWindowLite: typeof import('./src/components/InfoWindowLite.vue')['default'] 19 InfoWindowLite: typeof import('./src/components/InfoWindowLite.vue')['default']
16 InfoWindowWarn: typeof import('./src/components/InfoWindowWarn.vue')['default'] 20 InfoWindowWarn: typeof import('./src/components/InfoWindowWarn.vue')['default']
......
1 +<template>
2 + <div style="position: relative;">
3 + <!-- <div class="info-window-wrapper">
4 + <div :style="{ width: (widow_info.width * 0.8) + 'px', overflow: 'auto' }">
5 + <div class="hideScrollBar info-window-title">
6 + <div v-for="(item, index) in info?.details" :key="index" @click="handleTitle(index)"
7 + :class="[isActive === index ? 'checked' : '', 'item']">
8 + <span>{{ item.name }}</span>
9 + </div>
10 + </div>
11 + <div v-for="(item, index) in info?.details" :key="index">
12 + <div v-if="isActive === index" :class=" [item.audio ? 'info-text-audio' : 'info-text', 'van-multi-ellipsis--l3'] ">{{ item.note }}</div>
13 + <div v-if="isActive === index && item.audio" class="info-control">
14 + <div v-if="!is_play" @click="play()" class="control-play">
15 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E6%92%AD%E6%94%BE%E6%9A%82%E5%81%9C@2x.png" size="3rem"
16 + color="#FFF" style="margin-top: 0.5rem;" />
17 + </div>
18 + <div v-else @click="pause()" class="control-play" style="text-align: center;">
19 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E6%92%AD%E6%94%BE@2x.png" size="3rem" color="#FFF"
20 + style="margin-top: 0.5rem;" />
21 + </div>
22 + <div>{{ play_time }}</div>
23 + </div>
24 + </div>
25 + </div>
26 + <div class="van-hairline--top" style="margin: 1rem 0;">
27 + <div @click="goToUrl()" style="width: 50%; float: left; text-align: center; margin-top: 0.75rem;"
28 + class="van-hairline--right">
29 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E8%AF%A6%E6%83%85@2x.png" size="1.25rem" color="#FFF"
30 + style="vertical-align: sub;" />&nbsp;
31 + <span style="color: #AB8F57; font-size: 1rem;">详情</span>
32 + </div>
33 + <div @click="goToLocation()" style="width: 50%; float: left; text-align: center; margin-top: 0.75rem;">
34 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%89%8D%E5%BE%80@2x.png" size="1.25rem" color="#FFF"
35 + style="vertical-align: sub;" />&nbsp;
36 + <span style="color: #AB8F57; font-size: 1rem;">前往</span>
37 + </div>
38 + </div>
39 + </div>
40 + <div class="leaflet-popup-tip-container" style="left: 50%; position: relative;">
41 + <div class="leaflet-popup-tip"></div>
42 + </div> -->
43 +
44 + <van-popup teleport="body" v-model:show="show_popup" position="bottom" :overlay="true" :close-on-click-overlay="false"
45 + :style="{ padding: '1rem', height: '50%' }">
46 + <van-icon name="cross" size="1.35rem" @click="onClose" style="float: right; color: gray;" />
47 + <div class="popup-wrapper">
48 + <div class="info-window-wrapper1">
49 + <div :style="{ width: (widow_info.width * 0.8) + 'px', overflow: 'auto' }">
50 + <div class="hideScrollBar info-window-title">
51 + <div v-for="(item, index) in info?.details" :key="index" @click="handleTitle(index)"
52 + :class="[isActive === index ? 'checked' : '', 'item']">
53 + <span>{{ item.name }}</span>
54 + </div>
55 + </div>
56 + <div v-for="(item, index) in info?.details" :key="index">
57 + <div v-if="isActive === index" :class=" [item.audio ? 'info-text-audio' : 'info-text', 'van-multi-ellipsis--l3'] ">{{ item.note }}</div>
58 + <div v-if="isActive === index && item.audio" class="info-control">
59 + <div v-if="!is_play" @click="play()" class="control-play">
60 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E6%92%AD%E6%94%BE%E6%9A%82%E5%81%9C@2x.png" size="3rem"
61 + color="#FFF" style="margin-top: 0.5rem;" />
62 + </div>
63 + <div v-else @click="pause()" class="control-play" style="text-align: center;">
64 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E6%92%AD%E6%94%BE@2x.png" size="3rem" color="#FFF"
65 + style="margin-top: 0.5rem;" />
66 + </div>
67 + <div>{{ play_time }}</div>
68 + </div>
69 + </div>
70 + </div>
71 + <!-- <div class="van-hairline--top" style="margin: 1rem 0;">
72 + <div @click="goToUrl()" style="width: 50%; float: left; text-align: center; margin-top: 0.75rem;"
73 + class="van-hairline--right">
74 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E8%AF%A6%E6%83%85@2x.png" size="1.25rem" color="#FFF"
75 + style="vertical-align: sub;" />&nbsp;
76 + <span style="color: #AB8F57; font-size: 1rem;">详情</span>
77 + </div>
78 + <div @click="goToLocation()" style="width: 50%; float: left; text-align: center; margin-top: 0.75rem;">
79 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%89%8D%E5%BE%80@2x.png" size="1.25rem" color="#FFF"
80 + style="vertical-align: sub;" />&nbsp;
81 + <span style="color: #AB8F57; font-size: 1rem;">前往</span>
82 + </div>
83 + </div> -->
84 + </div>
85 + <div class="van-hairline--top" style="margin: 1rem 0; position: absolute; bottom: 0; display: flex; width: 90%; justify-content: space-around;">
86 + <div @click="goToUrl()" style="text-align: center; margin-top: 0.75rem;"
87 + >
88 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E8%AF%A6%E6%83%85@2x.png" size="1.25rem" color="#FFF"
89 + style="vertical-align: sub;" />&nbsp;
90 + <span style="color: #AB8F57; font-size: 1rem;">详情</span>
91 + </div>
92 + <div class="van-hairline--right"></div>
93 + <div @click="goToLocation()" style="text-align: center; margin-top: 0.75rem;">
94 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%89%8D%E5%BE%80@2x.png" size="1.25rem" color="#FFF"
95 + style="vertical-align: sub;" />&nbsp;
96 + <span style="color: #AB8F57; font-size: 1rem;">前往</span>
97 + </div>
98 + </div>
99 + </div>
100 + </van-popup>
101 + </div>
102 +</template>
103 +
104 +<script>
105 +import $ from 'jquery'
106 +import { mapState, mapActions } from 'pinia'
107 +import { mainStore } from '@/store'
108 +
109 +export default {
110 + props: {
111 + infoWindow: {
112 + type: Object,
113 + default: () => { }
114 + },
115 + info: {
116 + type: Object,
117 + default: () => { }
118 + },
119 + rect: {
120 + type: Object,
121 + default: () => { }
122 + },
123 + show: {
124 + type: Boolean,
125 + default: false
126 + }
127 + },
128 + mounted() {
129 + },
130 + computed: {
131 + ...mapState(mainStore, ['audio_entity', 'audio_src', 'audio_status'])
132 + },
133 + watch: {
134 + show(val) {
135 + this.show_popup = val;
136 + },
137 + rect(val) {
138 + this.widow_info = val;
139 + },
140 + infoWindow(val) {
141 + if (val) {
142 + if (this.info?.details.length && this.info?.details[this.isActive]['audio']) { // 实体有音频时
143 + // 存放到pinia里面控制
144 + this.changeAudio(this.audio);
145 + this.changeAudioStatus('pause');
146 + // 加载录音
147 + this.play_time = this.info?.details[this.isActive]['audio_time']
148 + }
149 + }
150 + },
151 + audio_status (v) {
152 + if (v === 'pause') {
153 + this.voice_pause()
154 + }
155 + }
156 + },
157 + data() {
158 + return {
159 + show_popup: false,
160 + popup_title: '',
161 + popup_content: '',
162 + video_src: '',
163 + ind: '',
164 + is_play: false,
165 + audio: new Audio(),
166 + widow_info: {},
167 + play_time: '00:00',
168 + isActive: 0,
169 + nav_scroll: false,
170 + play_timer: null,
171 + }
172 + },
173 + methods: {
174 + ...mapActions(mainStore, ['changeAudio', 'changeAudioSrc', 'changeAudioStatus']),
175 + getAudioTime(audio) {
176 + let time = Math.floor(audio);
177 + var minute = time / 60;
178 + var minutes = parseInt(minute);
179 + if (minutes < 10) {
180 + minutes = "0" + minutes;
181 + }
182 + //秒
183 + var second = time % 60;
184 + var seconds = Math.round(second);
185 + if (seconds < 10) {
186 + seconds = "0" + seconds;
187 + }
188 + return `${minutes}:${second}`;
189 + },
190 + calculateCurrentValue(currentTime) {
191 + var current_hour = parseInt(+currentTime / 3600) % 24,
192 + current_minute = parseInt(+currentTime / 60) % 60,
193 + current_seconds_long = +currentTime % 60,
194 + current_seconds = current_seconds_long.toFixed(),
195 + current_time = (current_minute < 10 ? "0" + current_minute : current_minute) + ":" + (current_seconds < 10 ? "0" + current_seconds : current_seconds);
196 +
197 + return current_time;
198 + },
199 + // 关闭
200 + close() {
201 + // 高德地图信息窗关闭的api
202 + this.infoWindow.close()
203 + // 处理音频
204 + // TAG：临时屏蔽关闭窗口暂停音频播放测试
205 + // this.voice_pause();
206 + // this.audio.currentTime = 0
207 + // 默认选中项
208 + this.isActive = 0;
209 + // 滚动状态
210 + this.nav_scroll = false;
211 + // 清空播放计时
212 + clearInterval(this.play_timer)
213 + },
214 + showDetail() {
215 + this.show_popup = true;
216 + this.popup_title = '三宝楼';
217 + this.popup_content = '尊敬的游客朋友们您好，欢迎来到西园寺，您现在所到的地方是“三宝楼......';
218 + this.video_src = 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4'
219 + },
220 + play() {
221 + this.voice_play(this.info.details[this.isActive]['audio'], 0)
222 + this.changeAudioSrc(this.audio.src);
223 + this.changeAudioStatus('play');
224 + this.$emit('onPlay', this.info.name)
225 + },
226 + pause() {
227 + this.voice_pause();
228 + this.changeAudioStatus('pause');
229 + this.$emit('onPause', this.info.name)
230 + },
231 + // 声音播放
232 + voice_play(src, index) {
233 + this.audio.src = src
234 + if (this.ind) {
235 + this.audio.currentTime = 0
236 + this.ind = 0
237 + return
238 + }
239 + this.ind = index
240 + let play_status = this.audio.play() // 播放
241 + if (play_status) {
242 + this.is_play = true;
243 + play_status.then(() => {
244 + // 音频加载成功
245 + setTimeout(() => { // 后续操作(同为播放完成)
246 + this.ind = 0
247 + }, this.audio.duration * 1000) // audio.duration 为音频的时长单位为秒
248 + this.play_timer = setInterval(() => {
249 + let timer = this.audio.duration - this.audio.currentTime;
250 + if (isNaN(timer)) {
251 + timer = 0
252 + }
253 + this.play_time = this.calculateCurrentValue(timer);
254 + // 音频播放完毕
255 + if (this.play_time === '00:00') {
256 + clearInterval(this.play_timer);
257 + this.is_play = false;
258 + }
259 + }, 1000);
260 + }).catch((e) => {
261 + // 失败
262 + console.log('Operation is too fast, audio play fails')
263 + })
264 + }
265 + },
266 + voice_pause() {
267 + this.audio.pause();
268 + this.is_play = false;
269 + this.changeAudioStatus('pause');
270 + clearInterval(this.play_timer);
271 + },
272 + goToUrl(url) {
273 + location.href = this.info.details[this.isActive].url;
274 + },
275 + handleTitle (index) {
276 + this.isActive = index;
277 + this.voice_pause()
278 + // // 标题滚动
279 + // if (index === 2 && this.info.details.length > 3) {
280 + // this.handleNavScroll()
281 + // }
282 + clearInterval(this.play_timer)
283 + this.play_time = this.info.details[this.isActive].audio_time;
284 + },
285 + handleNavScroll () { // 滚动标题
286 + this.nav_scroll = !this.nav_scroll;
287 + if (this.nav_scroll) {
288 + setTimeout(() => {
289 + $('.info-window-title').animate({
290 + scrollLeft: $('.info-window-title').outerWidth()
291 + }, 1000);
292 + }, 100);
293 + } else {
294 + setTimeout(() => {
295 + $('.info-window-title').animate({
296 + scrollLeft: 0
297 + }, 1000);
298 + }, 100);
299 + }
300 + },
301 + goToLocation () {
302 + // this.$emit('onLocation', this.info.position)
303 + this.$emit('onLocation', this.info.position)
304 + },
305 + onClose () {
306 + this.$emit('onClose')
307 + }
308 + }
309 +}
310 +</script>
311 +
312 +<style lang="less">
313 +.info-window-wrapper1 {
314 + background: #fff;
315 + color: #333;
316 + // -webkit-box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
317 + // box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
318 + // text-align: left;
319 + // border-radius: 5px;
320 + // padding: 1rem 1.25rem;
321 + overflow: auto;
322 +
323 + .info-text {
324 + // width: 100%;
325 + line-height: 1.5;
326 + float: left;
327 + color: #7A6C6C;
328 + font-size: 0.9rem;
329 + margin-top: 0.5rem;
330 + }
331 + .info-text-audio {
332 + width: 80%;
333 + line-height: 1.5;
334 + float: left;
335 + color: #7A6C6C;
336 + font-size: 0.9rem;
337 + margin-top: 0.5rem;
338 + }
339 +
340 + .info-control {
341 + width: 20%;
342 + float: left;
343 + text-align: center;
344 + color: #AB8F57;
345 +
346 + .control-play {
347 + text-align: center;
348 + margin-bottom: 0.5rem;
349 +
350 + i {
351 + margin-top: 0 !important;
352 + }
353 + }
354 + }
355 +
356 + // .t-popup-content {
357 + // position: relative;
358 + // width: 25rem;
359 + // padding: 0;
360 + // margin: 0;
361 + // border-radius: 0.1rem;
362 + // background: rgba(255, 255, 255, 0.9);
363 + // -webkit-box-shadow: 0 0.02rem 0.05rem 0 rgba(0, 0, 0, 0.1);
364 + // box-shadow: 0 0.02rem 0.05rem 0 rgba(0, 0, 0, 0.1);
365 + // line-height: 1.4;
366 +
367 + // .view-name {
368 + // margin: 0;
369 + // padding: 0.5rem;
370 + // width: 25rem;
371 + // height: 2.5rem;
372 + // font-size: 1.2rem;
373 + // text-indent: 0.2rem;
374 + // white-space: nowrap;
375 + // text-overflow: ellipsis;
376 + // color: #5b5b5b;
377 + // -webkit-box-sizing: border-box;
378 + // box-sizing: border-box;
379 + // border-bottom: solid 1px #e8e8e8;
380 + // border-radius: 0.1rem 0.1rem 0 0;
381 + // background: #f7f7f7;
382 + // overflow: hidden;
383 + // }
384 +
385 + // .view-photo {
386 + // display: block;
387 + // float: left;
388 + // margin: 0.5rem;
389 + // height: 100%;
390 + // width: 9rem;
391 + // height: 9rem;
392 + // border-radius: 3px;
393 + // }
394 +
395 + // .introduction {
396 + // float: left;
397 + // margin: 0.2rem 0;
398 + // width: 13.5rem;
399 + // height: 6.75rem;
400 + // font-size: 0.9rem;
401 + // color: #202020;
402 + // overflow: hidden;
403 + // }
404 +
405 + // // .control-play {
406 + // // display: block;
407 + // // float: left;
408 + // // margin-right: 0.5rem;
409 + // // width: 7rem;
410 + // // height: 3rem;
411 + // // border-radius: 2px;
412 + // // background: #ffdd02 center no-repeat;
413 + // // background-size: 6.5rem 3rem;
414 + // // }
415 +
416 + // .show-details {
417 + // display: block;
418 + // float: left;
419 + // width: 7rem;
420 + // height: 3rem;
421 + // border-radius: 2px;
422 + // background: #9196a9 center no-repeat;
423 + // background-size: 6.5rem 3rem;
424 + // }
425 + // }
426 +
427 + .info-window-title {
428 + display: flex;
429 + overflow-x: scroll;
430 + overflow-y: hidden;
431 + -webkit-overflow-scrolling: touch;
432 + position: relative;
433 + text-align: left;
434 +
435 + .item {
436 + width: 30%;
437 + flex-shrink: 0;
438 + color: #888;
439 + font-size: 1.1rem;
440 + margin-bottom: 0.75rem;
441 + display: inline-block;
442 + }
443 +
444 + .checked {
445 + color: #AB8F57;
446 + span {
447 + border-bottom: 1.5px solid #AB8F57; padding-bottom: 3px;
448 + }
449 + }
450 + }
451 +}
452 +
453 +.leaflet-popup-tip-container { // 信息框箭头样式
454 + margin-top: -1px;
455 + width: 2rem;
456 + height: 2rem;
457 + margin-left: -10px;
458 + overflow: hidden;
459 + pointer-events: none;
460 +}
461 +
462 +.leaflet-popup-tip {
463 + width: 1rem;
464 + height: 1rem;
465 + -webkit-transform: rotate(0);
466 + transform: rotate(0);
467 + background: transparent url(https://map.365daoyou.cn/web/images/info-sharp.png) center no-repeat;
468 + background-size: 1rem 1rem;
469 + box-shadow: none;
470 +}
471 +
472 +</style>
1 +<template>
2 + <div style="position: relative;">
3 + <!-- <div class="info-window-lite-wrapper">
4 + <div :style="{ width: (widow_info.width * 0.8) + 'px', overflow: 'auto' }">
5 + <div class="hideScrollBar info-window-title">
6 + <div class="checked">
7 + <span>{{ info.name }}</span>
8 + </div>
9 + </div>
10 + <div v-if="info?.details?.length > 3" @click="handleNavScroll()" style="position: fixed; right: 0.75rem; width: 1rem; background-color: #FFF;top: 1.5rem;">
11 + <van-icon v-if="!nav_scroll" name="arrow" color="#888" size="1.25rem" style="vertical-align: sub;" />
12 + <van-icon v-else name="arrow-left" color="#888" size="1.25rem" style="vertical-align: sub;" />
13 + </div>
14 + </div>
15 + <div class="van-hairline--top" style="margin: 1rem 0;">
16 + <div @click="goToLocation()" style="width: 100%; float: left; text-align: center; margin-top: 1rem;">
17 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%89%8D%E5%BE%80@2x.png" size="1.25rem" color="#FFF"
18 + style="vertical-align: bottom;" />&nbsp;
19 + <span style="color: #AB8F57; font-size: 1rem;">前往</span>
20 + </div>
21 + </div>
22 + </div>
23 + <div class="leaflet-popup-tip-container" style="left: 50%; position: relative;">
24 + <div class="leaflet-popup-tip"></div>
25 + </div> -->
26 +
27 + <van-popup teleport="body" v-model:show="show_popup" position="bottom" :overlay="true" :close-on-click-overlay="false"
28 + :style="{ padding: '1rem', height: '50%' }">
29 + <van-icon name="cross" size="1.35rem" @click="show_popup = false" style="float: right; color: gray;" />
30 + <div class="popup-wrapper">
31 + <div class="info-window-lite-wrapper1">
32 + <div :style="{ width: (widow_info.width * 0.8) + 'px', overflow: 'auto' }">
33 + <div class="hideScrollBar info-window-title">
34 + <div class="checked">
35 + <span>{{ info.name }}</span>
36 + </div>
37 + </div>
38 + <div v-if="info?.details?.length > 3" @click="handleNavScroll()" style="position: fixed; right: 0.75rem; width: 1rem; background-color: #FFF;top: 1.5rem;">
39 + <van-icon v-if="!nav_scroll" name="arrow" color="#888" size="1.25rem" style="vertical-align: sub;" />
40 + <van-icon v-else name="arrow-left" color="#888" size="1.25rem" style="vertical-align: sub;" />
41 + </div>
42 + </div>
43 + <div class="van-hairline--top" style="margin: 1rem 0;">
44 + <div @click="goToLocation()" style="width: 100%; float: left; text-align: center; margin-top: 1rem;">
45 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%89%8D%E5%BE%80@2x.png" size="1.25rem" color="#FFF"
46 + style="vertical-align: bottom;" />&nbsp;
47 + <span style="color: #AB8F57; font-size: 1rem;">前往</span>
48 + </div>
49 + </div>
50 + </div>
51 + </div>
52 + </van-popup>
53 + </div>
54 +</template>
55 +
56 +<script>
57 +import $ from 'jquery'
58 +
59 +export default {
60 + props: {
61 + infoWindow: {
62 + type: Object,
63 + default: () => { }
64 + },
65 + info: {
66 + type: Object,
67 + default: () => { }
68 + },
69 + rect: {
70 + type: Object,
71 + default: () => { }
72 + },
73 + show: {
74 + type: Boolean,
75 + default: false
76 + }
77 + },
78 + mounted() {
79 + },
80 + watch: {
81 + show(val) {
82 + this.show_popup = val;
83 + },
84 + rect(val) {
85 + this.widow_info = val;
86 + },
87 + },
88 + data() {
89 + return {
90 + show_popup: false,
91 + popup_title: '',
92 + popup_content: '',
93 + video_src: '',
94 + ind: '',
95 + is_play: false,
96 + audio: new Audio(),
97 + widow_info: {},
98 + play_time: '00:00',
99 + isActive: 0,
100 + nav_scroll: false,
101 + }
102 + },
103 + methods: {
104 + // 关闭
105 + close() {
106 + // 高德地图信息窗关闭的api
107 + this.infoWindow.close()
108 + },
109 + showDetail() {
110 + this.show_popup = true;
111 + this.popup_title = '三宝楼';
112 + this.popup_content = '尊敬的游客朋友们您好，欢迎来到西园寺，您现在所到的地方是“三宝楼......';
113 + this.video_src = 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4'
114 + },
115 + goTo(url) {
116 + location.href = this.info.details[this.isActive].url;
117 + },
118 + goToLocation() {
119 + // this.$emit('onLocation', this.info.position)
120 + this.$emit('onLocation', this.info.position)
121 + },
122 + onClose () {
123 + this.$emit('onClose')
124 + }
125 + }
126 +}
127 +</script>
128 +
129 +<style lang="less">
130 +.info-window-lite-wrapper1 {
131 + background: #fff;
132 + color: #333;
133 + // -webkit-box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
134 + // box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
135 + // text-align: left;
136 + // border-radius: 5px;
137 + // padding: 1rem 1.25rem;
138 + overflow: auto;
139 +
140 + .info-text {
141 + // width: 100%;
142 + line-height: 1.5;
143 + float: left;
144 + color: #7A6C6C;
145 + font-size: 0.9rem;
146 + margin-top: 0.5rem;
147 + }
148 + .info-text-audio {
149 + width: 80%;
150 + line-height: 1.5;
151 + float: left;
152 + color: #7A6C6C;
153 + }
154 +
155 + .info-control {
156 + width: 20%;
157 + float: left;
158 + text-align: center;
159 + color: #AB8F57;
160 +
161 + .control-play {
162 + text-align: center;
163 + margin-bottom: 0.5rem;
164 +
165 + i {
166 + margin-top: 0 !important;
167 + }
168 + }
169 + }
170 +
171 + // .t-popup-content {
172 + // position: relative;
173 + // width: 25rem;
174 + // padding: 0;
175 + // margin: 0;
176 + // border-radius: 0.1rem;
177 + // background: rgba(255, 255, 255, 0.9);
178 + // -webkit-box-shadow: 0 0.02rem 0.05rem 0 rgba(0, 0, 0, 0.1);
179 + // box-shadow: 0 0.02rem 0.05rem 0 rgba(0, 0, 0, 0.1);
180 + // line-height: 1.4;
181 +
182 + // .view-name {
183 + // margin: 0;
184 + // padding: 0.5rem;
185 + // width: 25rem;
186 + // height: 2.5rem;
187 + // font-size: 1.2rem;
188 + // text-indent: 0.2rem;
189 + // white-space: nowrap;
190 + // text-overflow: ellipsis;
191 + // color: #5b5b5b;
192 + // -webkit-box-sizing: border-box;
193 + // box-sizing: border-box;
194 + // border-bottom: solid 1px #e8e8e8;
195 + // border-radius: 0.1rem 0.1rem 0 0;
196 + // background: #f7f7f7;
197 + // overflow: hidden;
198 + // }
199 +
200 + // .view-photo {
201 + // display: block;
202 + // float: left;
203 + // margin: 0.5rem;
204 + // height: 100%;
205 + // width: 9rem;
206 + // height: 9rem;
207 + // border-radius: 3px;
208 + // }
209 +
210 + // .introduction {
211 + // float: left;
212 + // margin: 0.2rem 0;
213 + // width: 13.5rem;
214 + // height: 6.75rem;
215 + // font-size: 0.9rem;
216 + // color: #202020;
217 + // overflow: hidden;
218 + // }
219 +
220 + // // .control-play {
221 + // // display: block;
222 + // // float: left;
223 + // // margin-right: 0.5rem;
224 + // // width: 7rem;
225 + // // height: 3rem;
226 + // // border-radius: 2px;
227 + // // background: #ffdd02 center no-repeat;
228 + // // background-size: 6.5rem 3rem;
229 + // // }
230 +
231 + // .show-details {
232 + // display: block;
233 + // float: left;
234 + // width: 7rem;
235 + // height: 3rem;
236 + // border-radius: 2px;
237 + // background: #9196a9 center no-repeat;
238 + // background-size: 6.5rem 3rem;
239 + // }
240 + // }
241 +
242 + .info-window-title {
243 + display: flex;
244 + overflow-x: scroll;
245 + overflow-y: hidden;
246 + -webkit-overflow-scrolling: touch;
247 + position: relative;
248 + text-align: left;
249 +
250 + .item {
251 + width: 33.333%;
252 + flex-shrink: 0;
253 + color: #888;
254 + font-size: 1.1rem;
255 + margin-bottom: 0.75rem;
256 + display: inline-block;
257 + }
258 +
259 + .checked {
260 + color: #AB8F57;
261 + span {
262 + border-bottom: 1.5px solid #AB8F57; padding-bottom: 3px;
263 + }
264 + }
265 + }
266 +}
267 +
268 +.leaflet-popup-tip-container {
269 + margin-top: -1px;
270 + width: 2rem;
271 + height: 2rem;
272 + margin-left: -10px;
273 + overflow: hidden;
274 + pointer-events: none;
275 +}
276 +
277 +.leaflet-popup-tip {
278 + width: 1rem;
279 + height: 1rem;
280 + -webkit-transform: rotate(0);
281 + transform: rotate(0);
282 + background: transparent url(https://map.365daoyou.cn/web/images/info-sharp.png) center no-repeat;
283 + background-size: 1rem 1rem;
284 + box-shadow: none;
285 +}
286 +
287 +</style>
1 +<template>
2 + <div style="position: relative;">
3 + <!--<div class="info-window-warn-wrapper">
4 + <div :style="{ width: (widow_info.width * 0.8) + 'px', overflow: 'auto' }">
5 + <div class="hideScrollBar info-window-title">
6 + <!~~ <div class="checked item">
7 + <span>{{ warn_info.name }}</span>
8 + </div>
9 + <div style="width: 66.66%; text-align: right; margin-bottom: 0.75rem; display: inline-block; color: #888; font-size: 0.9rem;">
10 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B8@2x.png" size="1.25rem"
11 + color="#FFF" style="vertical-align: sub;" />&nbsp; <span>烟感异常</span>
12 + </div> ~~>
13 + <div v-for="(item, index) in info?.details" :key="index" @click="handleTitle(index)"
14 + :class="[isActive === index ? 'checked' : '', 'item']">
15 + <span>
16 + {{ item.event_name }}
17 + </span>
18 + </div>
19 + </div>
20 + <!~~ <div v-if="info?.details?.length > 3" @click="handleNavScroll()" style="position: fixed; right: 0.75rem; width: 1rem; background-color: #FFF;top: 1rem;">
21 + <van-icon v-if="!nav_scroll" name="arrow" color="#888" size="1.25rem" style="vertical-align: sub;" />
22 + <van-icon v-else name="arrow-left" color="#888" size="1.25rem" style="vertical-align: sub;" />
23 + </div> ~~>
24 + <div>
25 + <div style="width: 80%; float: left; color: #888; line-height: 1.75;">
26 + <div>建筑: {{ warn_info.name }}</div>
27 + <div>设备名称：{{ warn_info.eq_name }}</div>
28 + <div>设备型号：{{ warn_info.eq_model }}</div>
29 + <div>回路地址号：{{ warn_info.eq_address }}</div>
30 + <div v-if="warn_info.type === 'fire'">类型：{{ warn_info.alert_type }}</div>
31 + <div v-if="warn_info.type === 'water'">报警值：{{ warn_info.alarm_num }}</div>
32 + <div v-if="warn_info.type === 'water'">设定值：{{ warn_info.set_num }}</div>
33 + <div>报警时间：{{ warn_info.datetime }}</div>
34 + </div>
35 + <div v-if="warn_info.cctv_url" @click="goToWatch(warn_info.cctv_url)" class="info-control">
36 + <div class="control-play">
37 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E6%92%AD%E6%94%BE%E6%9A%82%E5%81%9C@2x.png" size="3rem"
38 + color="#FFF" style="margin-top: 0.5rem;" />
39 + </div>
40 + <div>监控</div>
41 + </div>
42 + </div>
43 + </div>
44 + <div class="van-hairline--top warn-button-wrapper">
45 + <div v-if="warn_info.case_url" @click="goToCase(warn_info.case_url)"
46 + style="text-align: center; margin-top: 1rem;">
47 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E9%A2%84%E6%A1%88@2x.png" size="1.25rem" color="#FFF"
48 + style="vertical-align: bottom;" />&nbsp;
49 + <span style="color: #AB8F57; font-size: 1rem;">预案</span>
50 + </div>
51 + <div v-if="warn_span1" class="van-hairline--right f-line"></div>
52 + <div v-if="warn_info.notice_url" @click="goToList(warn_info.id)" style="text-align: center; margin-top: 1rem;">
53 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E9%80%9A%E7%9F%A5@2x.png" size="1.25rem" color="#FFF"
54 + style="vertical-align: bottom;" />&nbsp;
55 + <span style="color: #AB8F57; font-size: 1rem;">通知</span>
56 + </div>
57 + <div v-if="warn_span2" class="van-hairline--right f-line"></div>
58 + <div v-if="warn_info.handle_url" @click="goToHandle(warn_info.handle_url)"
59 + style="text-align: center; margin-top: 1rem;">
60 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%A4%84%E7%90%86@2x.png" size="1.25rem" color="#FFF"
61 + style="vertical-align: bottom;" />&nbsp;
62 + <span style="color: #AB8F57; font-size: 1rem;">处理</span>
63 + </div>
64 + </div>
65 + </div>
66 + <div class="leaflet-popup-tip-container" style="left: 50%; position: relative;">
67 + <div class="leaflet-popup-tip"></div>
68 + </div>-->
69 +
70 + <van-popup teleport="body" v-model:show="show_popup" position="bottom" :overlay="true" :close-on-click-overlay="false"
71 + :style="{ padding: '1rem', height: '50%' }">
72 + <van-icon name="cross" size="1.35rem" @click="show_popup = false" style="float: right; color: gray;" />
73 + <div class="popup-wrapper">
74 + <div class="info-window-warn-wrapper1">
75 + <div :style="{ width: (widow_info.width * 0.8) + 'px', overflow: 'auto' }">
76 + <div class="hideScrollBar info-window-title">
77 + <!-- <div class="checked item">
78 + <span>{{ warn_info.name }}</span>
79 + </div>
80 + <div style="width: 66.66%; text-align: right; margin-bottom: 0.75rem; display: inline-block; color: #888; font-size: 0.9rem;">
81 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B8@2x.png" size="1.25rem"
82 + color="#FFF" style="vertical-align: sub;" />&nbsp; <span>烟感异常</span>
83 + </div> -->
84 + <div v-for="(item, index) in info?.details" :key="index" @click="handleTitle(index)"
85 + :class="[isActive === index ? 'checked' : '', 'item']">
86 + <span>
87 + {{ item.event_name }}
88 + </span>
89 + </div>
90 + </div>
91 + <!-- <div v-if="info?.details?.length > 3" @click="handleNavScroll()" style="position: fixed; right: 0.75rem; width: 1rem; background-color: #FFF;top: 1rem;">
92 + <van-icon v-if="!nav_scroll" name="arrow" color="#888" size="1.25rem" style="vertical-align: sub;" />
93 + <van-icon v-else name="arrow-left" color="#888" size="1.25rem" style="vertical-align: sub;" />
94 + </div> -->
95 + <div>
96 + <div style="width: 80%; float: left; color: #888; line-height: 1.75;">
97 + <div>建筑: {{ warn_info.name }}</div>
98 + <div>设备名称：{{ warn_info.eq_name }}</div>
99 + <div>设备型号：{{ warn_info.eq_model }}</div>
100 + <div>回路地址号：{{ warn_info.eq_address }}</div>
101 + <div v-if="warn_info.type === 'fire'">类型：{{ warn_info.alert_type }}</div>
102 + <div v-if="warn_info.type === 'water'">报警值：{{ warn_info.alarm_num }}</div>
103 + <div v-if="warn_info.type === 'water'">设定值：{{ warn_info.set_num }}</div>
104 + <div>报警时间：{{ warn_info.datetime }}</div>
105 + </div>
106 + <div v-if="warn_info.cctv_url" @click="goToWatch(warn_info.cctv_url)" class="info-control">
107 + <div class="control-play">
108 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E6%92%AD%E6%94%BE%E6%9A%82%E5%81%9C@2x.png" size="3rem"
109 + color="#FFF" style="margin-top: 0.5rem;" />
110 + </div>
111 + <div>监控</div>
112 + </div>
113 + </div>
114 + </div>
115 + <div class="van-hairline--top warn-button-wrapper">
116 + <div v-if="warn_info.case_url" @click="goToCase(warn_info.case_url)"
117 + style="text-align: center; margin-top: 1rem;">
118 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E9%A2%84%E6%A1%88@2x.png" size="1.25rem" color="#FFF"
119 + style="vertical-align: bottom;" />&nbsp;
120 + <span style="color: #AB8F57; font-size: 1rem;">预案</span>
121 + </div>
122 + <div v-if="warn_span1" class="van-hairline--right f-line"></div>
123 + <div v-if="warn_info.notice_url" @click="goToList(warn_info.id)" style="text-align: center; margin-top: 1rem;">
124 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E9%80%9A%E7%9F%A5@2x.png" size="1.25rem" color="#FFF"
125 + style="vertical-align: bottom;" />&nbsp;
126 + <span style="color: #AB8F57; font-size: 1rem;">通知</span>
127 + </div>
128 + <div v-if="warn_span2" class="van-hairline--right f-line"></div>
129 + <div v-if="warn_info.handle_url" @click="goToHandle(warn_info.handle_url)"
130 + style="text-align: center; margin-top: 1rem;">
131 + <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%A4%84%E7%90%86@2x.png" size="1.25rem" color="#FFF"
132 + style="vertical-align: bottom;" />&nbsp;
133 + <span style="color: #AB8F57; font-size: 1rem;">处理</span>
134 + </div>
135 + </div>
136 + </div>
137 + </div>
138 + </van-popup>
139 + </div>
140 +</template>
141 +
142 +<script>
143 +import $ from 'jquery'
144 +
145 +export default {
146 + props: {
147 + infoWindow: {
148 + type: Object,
149 + default: () => { }
150 + },
151 + info: {
152 + type: Object,
153 + default: () => { }
154 + },
155 + rect: {
156 + type: Object,
157 + default: () => { }
158 + },
159 + show: {
160 + type: Boolean,
161 + default: false
162 + }
163 + },
164 + mounted() {
165 + },
166 + computed: {
167 + warn_span1() {
168 + let flag = false;
169 + if (this.warn_info.case_url) {
170 + if (this.warn_info.notice_url || this.warn_info.handle_url) {
171 + flag = true
172 + }
173 + }
174 + return flag;
175 + },
176 + warn_span2() {
177 + let flag = false;
178 + if (this.warn_info.notice_url) {
179 + if (this.warn_info.handle_url) {
180 + flag = true
181 + }
182 + }
183 + return flag;
184 + },
185 + },
186 + watch: {
187 + show(val) {
188 + this.show_popup = val;
189 + },
190 + rect(val) {
191 + this.widow_info = val;
192 + },
193 + infoWindow(val) {
194 + if (val) {
195 + this.warn_info = this.info.details[0]
196 + // // 加载录音
197 + // this.audio.src = this.info?.details[this.isActive]['audio'];
198 + // let play_status = this.audio.play() // 播放
199 + // if (play_status) {
200 + // play_status.then(() => {
201 + // // 音频的播放需要耗时
202 + // this.audio.pause();
203 + // this.play_time = this.getAudioTime(this.audio.duration)
204 + // }).catch((e) => {
205 + // // 失败
206 + // console.log('Operation is too fast, audio play fails')
207 + // })
208 + // }
209 + }
210 + }
211 + },
212 + data() {
213 + return {
214 + show_popup: false,
215 + popup_title: '',
216 + popup_content: '',
217 + video_src: '',
218 + ind: '',
219 + is_play: false,
220 + audio: new Audio(),
221 + widow_info: {},
222 + play_time: '00:00',
223 + isActive: 0,
224 + nav_scroll: false,
225 + warn_info: {}
226 + }
227 + },
228 + methods: {
229 + getAudioTime(audio) {
230 + let time = Math.floor(audio);
231 + var minute = time / 60;
232 + var minutes = parseInt(minute);
233 + if (minutes < 10) {
234 + minutes = "0" + minutes;
235 + }
236 + //秒
237 + var second = time % 60;
238 + var seconds = Math.round(second);
239 + if (seconds < 10) {
240 + seconds = "0" + seconds;
241 + }
242 + return `${minutes}:${second}`;
243 + },
244 + calculateCurrentValue(currentTime) {
245 + var current_hour = parseInt(currentTime / 3600) % 24,
246 + current_minute = parseInt(currentTime / 60) % 60,
247 + current_seconds_long = currentTime % 60,
248 + current_seconds = current_seconds_long.toFixed(),
249 + current_time = (current_minute < 10 ? "0" + current_minute : current_minute) + ":" + (current_seconds < 10 ? "0" + current_seconds : current_seconds);
250 +
251 + return current_time;
252 + },
253 + // 关闭
254 + close() {
255 + // 高德地图信息窗关闭的api
256 + this.infoWindow.close()
257 + // 处理音频
258 + this.voice_pause();
259 + this.audio.currentTime = 0
260 + // 默认选中项
261 + this.isActive = 0;
262 + // 滚动状态
263 + this.nav_scroll = false;
264 + },
265 + // showDetail() {
266 + // this.show_popup = true;
267 + // this.popup_title = '三宝楼';
268 + // this.popup_content = '尊敬的游客朋友们您好，欢迎来到西园寺，您现在所到的地方是“三宝楼......';
269 + // this.video_src = 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4'
270 + // },
271 + play() {
272 + this.voice_play(this.info.details[this.isActive]['audio'], 0)
273 + },
274 + pause() {
275 + this.voice_pause()
276 + },
277 + // 声音播放
278 + voice_play(src, index) {
279 + this.audio.src = src
280 + if (this.ind) {
281 + this.audio.currentTime = 0
282 + this.ind = 0
283 + return
284 + }
285 + this.ind = index
286 + let play_status = this.audio.play() // 播放
287 + if (play_status) {
288 + this.is_play = true;
289 + play_status.then(() => {
290 + // 音频加载成功
291 + setTimeout(() => { // 后续操作(同为播放完成)
292 + this.ind = 0
293 + }, this.audio.duration * 1000) // audio.duration 为音频的时长单位为秒
294 + setInterval(() => {
295 + let timer = this.audio.duration - this.audio.currentTime;
296 + if (isNaN(timer)) {
297 + timer = 0
298 + }
299 + this.play_time = this.calculateCurrentValue(timer)
300 + }, 1000);
301 + }).catch((e) => {
302 + // 失败
303 + console.log('Operation is too fast, audio play fails')
304 + })
305 +
306 +
307 + }
308 + },
309 + voice_pause() {
310 + this.audio.pause();
311 + this.is_play = false;
312 + },
313 + goToCase(url) {
314 + if (url) {
315 + location.href = url;
316 + }
317 + },
318 + goToList(id) {
319 + this.$router.push({
320 + path: '/noticeList',
321 + query: {
322 + id
323 + }
324 + })
325 + },
326 + goToHandle(url) {
327 + // if (url) {
328 + // location.href = url;
329 + // }
330 + },
331 + goToWatch(url) {
332 + // this.show_popup = true;
333 + if (url) {
334 + location.href = url;
335 + }
336 + },
337 + handleTitle(index) {
338 + this.isActive = index;
339 + this.voice_pause()
340 + // // 标题滚动
341 + // if (index === 2 && this.info.details.length > 3) {
342 + // this.handleNavScroll()
343 + // }
344 + this.warn_info = this.info.details[index]
345 + },
346 + handleNavScroll() { // 滚动标题
347 + this.nav_scroll = !this.nav_scroll;
348 + if (this.nav_scroll) {
349 + setTimeout(() => {
350 + $('.info-window-title').animate({
351 + scrollLeft: $('.info-window-title .item').outerWidth() * 3
352 + }, 1000);
353 + }, 100);
354 + } else {
355 + setTimeout(() => {
356 + $('.info-window-title').animate({
357 + scrollLeft: 0
358 + }, 1000);
359 + }, 100);
360 + }
361 + },
362 + onClose () {
363 + this.$emit('onClose')
364 + }
365 + }
366 +}
367 +</script>
368 +
369 +<style lang="less">
370 +.info-window-warn-wrapper {
371 + background: #fff;
372 + color: #333;
373 + // -webkit-box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
374 + // box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
375 + // text-align: left;
376 + // border-radius: 5px;
377 + // padding: 1.5rem 1.25rem;
378 + overflow: auto;
379 +
380 + .info-text {
381 + width: 100%;
382 + line-height: 1.5;
383 + float: left;
384 + color: #7A6C6C;
385 + }
386 +
387 + .info-text-audio {
388 + width: 80%;
389 + line-height: 1.5;
390 + float: left;
391 + color: #7A6C6C;
392 + }
393 +
394 + .info-control {
395 + width: 20%;
396 + float: left;
397 + text-align: center;
398 + color: #AB8F57;
399 +
400 + .control-play {
401 + text-align: center;
402 + margin-bottom: 0.5rem;
403 +
404 + i {
405 + margin-top: 0 !important;
406 + }
407 + }
408 + }
409 +
410 + // .t-popup-content {
411 + // position: relative;
412 + // width: 25rem;
413 + // padding: 0;
414 + // margin: 0;
415 + // border-radius: 0.1rem;
416 + // background: rgba(255, 255, 255, 0.9);
417 + // -webkit-box-shadow: 0 0.02rem 0.05rem 0 rgba(0, 0, 0, 0.1);
418 + // box-shadow: 0 0.02rem 0.05rem 0 rgba(0, 0, 0, 0.1);
419 + // line-height: 1.4;
420 +
421 + // .view-name {
422 + // margin: 0;
423 + // padding: 0.5rem;
424 + // width: 25rem;
425 + // height: 2.5rem;
426 + // font-size: 1.2rem;
427 + // text-indent: 0.2rem;
428 + // white-space: nowrap;
429 + // text-overflow: ellipsis;
430 + // color: #5b5b5b;
431 + // -webkit-box-sizing: border-box;
432 + // box-sizing: border-box;
433 + // border-bottom: solid 1px #e8e8e8;
434 + // border-radius: 0.1rem 0.1rem 0 0;
435 + // background: #f7f7f7;
436 + // overflow: hidden;
437 + // }
438 +
439 + // .view-photo {
440 + // display: block;
441 + // float: left;
442 + // margin: 0.5rem;
443 + // height: 100%;
444 + // width: 9rem;
445 + // height: 9rem;
446 + // border-radius: 3px;
447 + // }
448 +
449 + // .introduction {
450 + // float: left;
451 + // margin: 0.2rem 0;
452 + // width: 13.5rem;
453 + // height: 6.75rem;
454 + // font-size: 0.9rem;
455 + // color: #202020;
456 + // overflow: hidden;
457 + // }
458 +
459 + // // .control-play {
460 + // // display: block;
461 + // // float: left;
462 + // // margin-right: 0.5rem;
463 + // // width: 7rem;
464 + // // height: 3rem;
465 + // // border-radius: 2px;
466 + // // background: #ffdd02 center no-repeat;
467 + // // background-size: 6.5rem 3rem;
468 + // // }
469 +
470 + // .show-details {
471 + // display: block;
472 + // float: left;
473 + // width: 7rem;
474 + // height: 3rem;
475 + // border-radius: 2px;
476 + // background: #9196a9 center no-repeat;
477 + // background-size: 6.5rem 3rem;
478 + // }
479 + // }
480 +
481 + .info-window-title {
482 + display: flex;
483 + overflow-x: scroll;
484 + overflow-y: hidden;
485 + -webkit-overflow-scrolling: touch;
486 + position: relative;
487 + text-align: left;
488 +
489 + .item {
490 + width: 30%;
491 + flex-shrink: 0;
492 + color: #888;
493 + font-size: 1.1rem;
494 + margin-bottom: 0.75rem;
495 + display: inline-block;
496 + }
497 +
498 + .checked {
499 + color: #AB8F57;
500 +
501 + span {
502 + // border-bottom: 1.5px solid #AB8F57;
503 + padding-bottom: 3px;
504 + }
505 + }
506 + }
507 +}
508 +
509 +.leaflet-popup-tip-container {
510 + margin-top: -1px;
511 + width: 2rem;
512 + height: 2rem;
513 + margin-left: -20px;
514 + overflow: hidden;
515 + pointer-events: none;
516 +}
517 +
518 +.leaflet-popup-tip {
519 + width: 1rem;
520 + height: 1rem;
521 + -webkit-transform: rotate(0);
522 + transform: rotate(0);
523 + background: transparent url(https://map.365daoyou.cn/web/images/info-sharp.png) center no-repeat;
524 + background-size: 1rem 1rem;
525 + box-shadow: none;
526 +}
527 +
528 +.warn-button-wrapper {
529 + margin-top: 1rem;
530 + display: flex;
531 + justify-content: space-around;
532 +
533 + .f-line {
534 + text-align: center;
535 + margin-top: 1rem;
536 + }
537 +}
538 +
539 +.hideScrollBar::-webkit-scrollbar {
540 + display: none;
541 +}
542 +
543 +.hideScrollBar {
544 + -ms-overflow-style: none;
545 + overflow: -moz-scrollbars-none;
546 +}
547 +</style>
1 <!-- 1 <!--
2 * @Date: 2023-05-19 14:54:27 2 * @Date: 2023-05-19 14:54:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-09-10 17:37:37 4 + * @LastEditTime: 2024-09-11 18:17:44
5 * @FilePath: /map-demo/src/views/index.vue 5 * @FilePath: /map-demo/src/views/index.vue
6 * @Description: 公众地图主体页面 6 * @Description: 公众地图主体页面
7 --> 7 -->
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
70 关闭步行导航 70 关闭步行导航
71 </div> 71 </div>
72 72
73 - <!-- <van-popup v-model:show="show_popup" position="bottom" :overlay="true" :style="{ padding: '1rem', height: '100%' }"> 73 + <!-- <van-popup v-model:show="show_popup" position="bottom" :overlay="true" teleport="body" :close-on-click-overlay="false" :style="{ padding: '1rem', height: '50%' }">
74 <van-icon name="cross" size="1.35rem" @click="show_popup = false" style="float: right; color: gray;" /> 74 <van-icon name="cross" size="1.35rem" @click="show_popup = false" style="float: right; color: gray;" />
75 <div class="popup-wrapper"> 75 <div class="popup-wrapper">
76 <div class="title"> 76 <div class="title">
...@@ -97,6 +97,11 @@ ...@@ -97,6 +97,11 @@
97 :rect="rect"></InfoWindowWarn> 97 :rect="rect"></InfoWindowWarn>
98 98
99 <audioBackground></audioBackground> 99 <audioBackground></audioBackground>
100 +
101 + <InfoPopup :show="showInfoPopup" :info-window="infoWindow" :info="itemInfo"
102 + @onLocation="infoWindowLocation" @onPlay="onPlay" @onPause="onPause" @onClose="onClose"></InfoPopup>
103 + <InfoPopupLite :show="showInfoLitePopup" :info="itemInfo" @onClose="onLiteClose"></InfoPopupLite>
104 + <InfoPopupWarn :show="showInfoWarnPopup" :info="itemInfo" @onClose="onWarnClose"></InfoPopupWarn>
100 </div> 105 </div>
101 </template> 106 </template>
102 107
...@@ -116,6 +121,9 @@ import audioBackground from '@/components/audioBackground' ...@@ -116,6 +121,9 @@ import audioBackground from '@/components/audioBackground'
116 import { useRect } from '@vant/use'; 121 import { useRect } from '@vant/use';
117 import { mapAPI } from '@/api/map.js' 122 import { mapAPI } from '@/api/map.js'
118 import wx from 'weixin-js-sdk' 123 import wx from 'weixin-js-sdk'
124 +import InfoPopup from '@/components/InfoPopup'
125 +import InfoPopupLite from '@/components/InfoPopupLite'
126 +import InfoPopupWarn from '@/components/InfoPopupWarn'
119 127
120 const GPS = { 128 const GPS = {
121 PI: 3.14159265358979324, 129 PI: 3.14159265358979324,
...@@ -174,7 +182,7 @@ const GPS = { ...@@ -174,7 +182,7 @@ const GPS = {
174 }; 182 };
175 183
176 export default { 184 export default {
177 - components: { InfoWindow, InfoWindowLite, InfoWindowWarn, audioBackground }, 185 + components: { InfoWindow, InfoWindowLite, InfoWindowWarn, audioBackground, InfoPopup, InfoPopupLite, InfoPopupWarn },
178 data() { 186 data() {
179 return { 187 return {
180 map: '', 188 map: '',
...@@ -204,7 +212,7 @@ export default { ...@@ -204,7 +212,7 @@ export default {
204 current_lat: '', 212 current_lat: '',
205 current_route: '', 213 current_route: '',
206 current_safe_route: [], 214 current_safe_route: [],
207 - // show_popup: false, 215 + show_popup: false,
208 dialog_show: false, 216 dialog_show: false,
209 dialog_text: '', 217 dialog_text: '',
210 walk_route: '', 218 walk_route: '',
...@@ -250,6 +258,9 @@ export default { ...@@ -250,6 +258,9 @@ export default {
250 data_rotation: 0, // 接口获取-地图旋转角度 258 data_rotation: 0, // 接口获取-地图旋转角度
251 data_paths: {}, // 接口获取-地图导航路径 259 data_paths: {}, // 接口获取-地图导航路径
252 data_path_list: [], // 接口获取-地图导航路径 260 data_path_list: [], // 接口获取-地图导航路径
261 + showInfoPopup: false,
262 + showInfoLitePopup: false,
263 + showInfoWarnPopup: false,
253 } 264 }
254 }, 265 },
255 async mounted() { 266 async mounted() {
...@@ -449,6 +460,22 @@ export default { ...@@ -449,6 +460,22 @@ export default {
449 }, 460 },
450 position: entity_info[i].position, //点标记在地图上显示的位置 461 position: entity_info[i].position, //点标记在地图上显示的位置
451 }); 462 });
463 + if (clickListener) {
464 + textMarker.off('click', clickListener)
465 + }
466 + // 绑定景点的点击事件 - 文字出现才能触发
467 + var clickListener = textMarker.on('click', (e) => {
468 + console.warn(e);
469 + this.itemInfo = entity_info[i];
470 + // 不同弹框类型
471 + if (entity_info[i].window_type === 'normal') {
472 + this.showInfoPopup = true;
473 + } else if (entity_info[i].window_type === 'lite') {
474 + this.showInfoLitePopup = true;
475 + } else if (entity_info[i].window_type === 'warn') {
476 + this.showInfoWarnPopup = true;
477 + }
478 + })
452 textMarker.setMap(this.map); //将文本标记设置到地图上 479 textMarker.setMap(this.map); //将文本标记设置到地图上
453 } else { // 默认方向 480 } else { // 默认方向
454 // 创建一个 LabelMarker 实例 481 // 创建一个 LabelMarker 实例
...@@ -1277,6 +1304,15 @@ export default { ...@@ -1277,6 +1304,15 @@ export default {
1277 // this.map.add(this.spotInfo); 1304 // this.map.add(this.spotInfo);
1278 }, 1305 },
1279 onPause(name) { }, 1306 onPause(name) { },
1307 + onClose () {
1308 + this.showInfoPopup = false;
1309 + },
1310 + onLiteClose () {
1311 + this.showInfoLitePopup = false;
1312 + },
1313 + onWarnClose () {
1314 + this.showInfoWarnPopup = false;
1315 + },
1280 } 1316 }
1281 } 1317 }
1282 </script> 1318 </script>
......