Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b7e8805a 1 parent fc46f6b8

调整报警弹框

Inline Side-by-side
Showing 3 changed files with 70 additions and 45 deletions
/*
* @Date: 2023-06-30 16:48:58
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-06-30 17:09:30
* @LastEditTime: 2023-07-04 17:26:20
* @FilePath: /map-demo/src/common/max.js
* @Description: 文件描述
*/
......@@ -477,12 +477,18 @@ const testInfo = [
icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png',
details: [
{
name: '',
note: '',
url: '',
name: '预警演示',
code: 'Y0218',
note: '烟感异常',
status: '异常',
datetime: '2021-12-22 16:39:42',
cctv_url: '', // 监控链接
case_url: '1', // 预案链接
notice_url: '1', // 通知链接
handle_url: '1', // 处理链接
},
],
window_type: 'lite',
window_type: 'warn',
},
],
},
......
......@@ -4,7 +4,7 @@
<div :style="{ width: (widow_info.width * 0.8) + 'px', overflow: 'auto' }">
<div class="hideScrollBar info-window-title">
<div class="checked item">
<span>{{ info.name }}</span>
<span>{{ warn_info.name }}</span>
</div>
<div style="width: 66.66%; text-align: right; margin-bottom: 0.75rem; display: inline-block; color: #888; font-size: 0.9rem;">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B8@2x.png" size="1.25rem"
......@@ -13,12 +13,12 @@
</div>
<div>
<div style="width: 80%; float: left; color: #888; line-height: 1.75;">
<div>编号: Y0218</div>
<div>状态: 异常</div>
<div>编号: {{ warn_info.code }}</div>
<div>状态: {{ warn_info.status }}</div>
<div>
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E6%97%B6%E9%97%B4@2x.png" size="1.5rem"
color="#FFF" style="vertical-align: sub;" />
2021-12-22 16:39:42
<!-- <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E6%97%B6%E9%97%B4@2x.png" size="1.5rem"
color="#FFF" style="vertical-align: sub;" /> -->
{{ warn_info.datetime }}
</div>
</div>
<div class="info-control">
......@@ -26,26 +26,27 @@
<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"
color="#FFF" style="margin-top: 0.5rem;" />
</div>
<div>监控</div>
<div @click="goTo(warn_info.cctv_url)">监控</div>
</div>
</div>
</div>
<div class="van-hairline--top" style="margin: 1rem 0;">
<div @click="goTo()" style="width: 33.33%; float: left; text-align: center; margin-top: 1rem;"
class="van-hairline--right">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E9%A2%84%E6%A1%88@2x.png" size="1.5rem" color="#FFF"
<div class="van-hairline--top" style="margin-top: 1rem; display: flex; justify-content: space-around;">
<div v-if="warn_info.case_url" @click="goTo(warn_info.case_url)" style="text-align: center; margin-top: 1rem;">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E9%A2%84%E6%A1%88@2x.png" size="1.25rem" color="#FFF"
style="vertical-align: bottom;" />&nbsp;
<span style="color: #AB8F57; font-size: 1.1rem;">预案</span>
<span style="color: #AB8F57; font-size: 1rem;">预案</span>
</div>
<div style="width: 33.33%; float: left; text-align: center; margin-top: 1rem;" class="van-hairline--right">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E9%80%9A%E7%9F%A5@2x.png" size="1.5rem" color="#FFF"
<div v-if="warn_span1" style="text-align: center; margin-top: 1rem;" class="van-hairline--right"></div>
<div v-if="warn_info.notice_url" @click="goTo(warn_info.notice_url)" style="text-align: center; margin-top: 1rem;">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E9%80%9A%E7%9F%A5@2x.png" size="1.25rem" color="#FFF"
style="vertical-align: bottom;" />&nbsp;
<span style="color: #AB8F57; font-size: 1.1rem;">通知</span>
<span style="color: #AB8F57; font-size: 1rem;">通知</span>
</div>
<div style="width: 33.33%; float: left; text-align: center; margin-top: 1rem;">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%A4%84%E7%90%86@2x.png" size="1.5rem" color="#FFF"
<div v-if="warn_span2" style="text-align: center; margin-top: 1rem;" class="van-hairline--right"></div>
<div v-if="warn_info.handle_url" @click="goTo(warn_info.handle_url)" style="text-align: center; margin-top: 1rem;">
<van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%A4%84%E7%90%86@2x.png" size="1.25rem" color="#FFF"
style="vertical-align: bottom;" />&nbsp;
<span style="color: #AB8F57; font-size: 1.1rem;">处理</span>
<span style="color: #AB8F57; font-size: 1rem;">处理</span>
</div>
</div>
</div>
......@@ -90,25 +91,38 @@ export default {
},
mounted() {
},
computed: {
warn_span1 () {
const raw = [this.warn_info.case_url, this.warn_info.notice_url, this.warn_info.handle_url]
const count = raw.filter(item => item)
return count.length > 1 ;
},
warn_span2 () {
const raw = [this.warn_info.case_url, this.warn_info.notice_url, this.warn_info.handle_url]
const count = raw.filter(item => item)
return count.length > 2;
},
},
watch: {
rect(val) {
this.widow_info = val;
},
infoWindow(val) {
if (val) {
// 加载录音
this.audio.src = this.info?.details[this.isActive]['audio'];
let play_status = this.audio.play() // 播放
if (play_status) {
play_status.then(() => {
// 音频的播放需要耗时
this.audio.pause();
this.play_time = this.getAudioTime(this.audio.duration)
}).catch((e) => {
// 失败
console.log('Operation is too fast, audio play fails')
})
}
this.warn_info = this.info.details[0]
// // 加载录音
// this.audio.src = this.info?.details[this.isActive]['audio'];
// let play_status = this.audio.play() // 播放
// if (play_status) {
// play_status.then(() => {
// // 音频的播放需要耗时
// this.audio.pause();
// this.play_time = this.getAudioTime(this.audio.duration)
// }).catch((e) => {
// // 失败
// console.log('Operation is too fast, audio play fails')
// })
// }
}
}
},
......@@ -125,6 +139,7 @@ export default {
play_time: '00:00',
isActive: 0,
nav_scroll: false,
warn_info: {}
}
},
methods: {
......@@ -164,12 +179,12 @@ export default {
// 滚动状态
this.nav_scroll = false;
},
showDetail() {
this.show_popup = true;
this.popup_title = '三宝楼';
this.popup_content = '尊敬的游客朋友们您好，欢迎来到西园寺，您现在所到的地方是“三宝楼......';
this.video_src = 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4'
},
// showDetail() {
// this.show_popup = true;
// this.popup_title = '三宝楼';
// this.popup_content = '尊敬的游客朋友们您好，欢迎来到西园寺，您现在所到的地方是“三宝楼......';
// this.video_src = 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4'
// },
play() {
this.voice_play(this.info.details[this.isActive]['audio'], 0)
},
......@@ -209,7 +224,7 @@ export default {
this.is_play = false;
},
goTo(url) {
location.href = this.info.details[this.isActive].url;
location.href = url;
},
handleTitle(index) {
this.isActive = index;
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-04 15:09:26
* @LastEditTime: 2023-07-04 16:47:51
* @FilePath: /map-demo/src/views/index.vue
* @Description: 地图主体页面
-->
......@@ -226,6 +226,7 @@ export default {
}
},
mounted() {
// console.log(this.$route.query);
this.navBarList = map_max; // 底部导航条
this.navKey = map_max[0]['key']; // 默认选中 第一个 key
this.navList = map_max.filter(item => item.key === this.navKey)[0]['entity_info']; // 返回默认选中项的实体信息
......@@ -350,8 +351,10 @@ export default {
// 不同弹框类型
if (entity_info[i].window_type === 'normal') {
this.positionMarker(entity_info[i])
} else {
} else if(entity_info[i].window_type === 'lite') {
this.positionLiteMarker(entity_info[i])
} else if (entity_info[i].window_type === 'warn') {
this.positionWarnMarker(entity_info[i])
}
})
// marker合集
......@@ -750,6 +753,7 @@ export default {
});
},
positionWarnMarker(item) {
console.log(item);
// 点击后创建自定义信息窗口
this.setInfoWindowsWarn(item)
// 把地图中心点设置为当前点击的标记点
......