Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
547467b1 1 parent 0ce4aa9a

细节调整

Inline Side-by-side
Showing 5 changed files with 302 additions and 81 deletions
<!--
* @Date: 2023-05-31 16:10:33
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-10 13:24:19
* @LastEditTime: 2023-07-10 15:12:29
* @FilePath: /map-demo/index.html
* @Description: 文件描述
-->
......@@ -19,8 +19,11 @@
<script type="module" src="/src/main.js"></script>
<script type="text/javascript">
window._AMapSecurityConfig = {
serviceHost:'https://oa-dev.onwall.cn/_AMapService',
securityJsCode:'8602057c4c8dae5bed9a240c0582c46f',
}
// window._AMapSecurityConfig = {
// serviceHost:'https://oa-dev.onwall.cn/_AMapService',
// }
</script>
<script src="https://webapi.amap.com/maps?v=2.0&key=381c6763e1fefd810fbab697f470149c&plugin=AMap.ElasticMarker,AMap.ImageLayer,AMap.ToolBar"></script>
</body>
......
const testInfo = {
id: 'warn',
name: '预警',
icon: [
'https://cdn.ipadbiz.cn/xys/map/%E9%A2%84%E8%AD%A602.png',
'https://cdn.ipadbiz.cn/xys/map/%E9%A2%84%E8%AD%A601.png',
],
list: [
{
name: '厢房',
position: [120.58704, 31.313773],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png',
details: [
{
id: '0',
icon: 'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB.png',
name: '老念佛堂（藏金阁、延寿堂、福慧堂）一层',
code: 'Y0218',
event_name: '火警1', // 事件名称
eq_name: '烟感', // 设备名称
eq_model: '感烟火灾探测器', // 设备型号
eq_address: '2-1-25', // 回路地址号
alert_type: '火警',
datetime: '2021-12-22 16:39:42',
type: 'fire',
cctv_url: '', // 监控链接
case_url:
'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB%E8%AD%A6%E5%A4%84%E7%BD%AE%E6%B5%81%E7%A8%8B%E5%9B%BE.pdf', // 预案链接
notice_url: '1', // 通知链接
handle_url: '1', // 处理链接
},
{
id: '0',
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%B0%B4.png',
name: '三慧楼楼顶',
code: 'Y0218',
event_name: '水警1', // 事件名称
eq_name: '液位', // 设备名称
eq_model: '传感器', // 设备型号
eq_address: '1-1-64', // 回路地址号
alert_type: '',
alarm_num: '1.61m', // 报警侑
set_num: '1.2m-1.6m', // 设定值
datetime: '2021-12-22 16:39:42',
type: 'water',
cctv_url: '', // 监控链接
case_url:
'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB%E8%AD%A6%E5%A4%84%E7%BD%AE%E6%B5%81%E7%A8%8B%E5%9B%BE.pdf', // 预案链接
notice_url: '1', // 通知链接
handle_url: '1', // 处理链接
},
{
id: '0',
icon: 'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB.png',
name: '老念佛堂（藏金阁、延寿堂、福慧堂）一层',
code: 'Y0218',
event_name: '火警3', // 事件名称
eq_name: '烟感', // 设备名称
eq_model: '感烟火灾探测器', // 设备型号
eq_address: '2-1-25', // 回路地址号
alert_type: '火警',
datetime: '2021-12-22 16:39:42',
type: 'fire',
cctv_url: '', // 监控链接
case_url:
'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB%E8%AD%A6%E5%A4%84%E7%BD%AE%E6%B5%81%E7%A8%8B%E5%9B%BE.pdf', // 预案链接
notice_url: '1', // 通知链接
handle_url: '1', // 处理链接
},
{
id: '0',
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%B0%B4.png',
name: '三慧楼楼顶',
code: 'Y0218',
event_name: '水警3', // 事件名称
eq_name: '液位', // 设备名称
eq_model: '传感器', // 设备型号
eq_address: '1-1-64', // 回路地址号
alert_type: '',
alarm_num: '1.61m', // 报警侑
set_num: '1.2m-1.6m', // 设定值
datetime: '2021-12-22 16:39:42',
type: 'water',
cctv_url: '', // 监控链接
case_url:
'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB%E8%AD%A6%E5%A4%84%E7%BD%AE%E6%B5%81%E7%A8%8B%E5%9B%BE.pdf', // 预案链接
notice_url: '1', // 通知链接
handle_url: '1', // 处理链接
},
{
id: '0',
icon: 'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB.png',
name: '老念佛堂（藏金阁、延寿堂、福慧堂）一层',
code: 'Y0218',
event_name: '火警1', // 事件名称
eq_name: '烟感', // 设备名称
eq_model: '感烟火灾探测器', // 设备型号
eq_address: '2-1-25', // 回路地址号
alert_type: '火警',
datetime: '2021-12-22 16:39:42',
type: 'fire',
cctv_url: '', // 监控链接
case_url:
'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB%E8%AD%A6%E5%A4%84%E7%BD%AE%E6%B5%81%E7%A8%8B%E5%9B%BE.pdf', // 预案链接
notice_url: '1', // 通知链接
handle_url: '1', // 处理链接
},
{
id: '0',
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%B0%B4.png',
name: '三慧楼楼顶',
code: 'Y0218',
event_name: '水警1', // 事件名称
eq_name: '液位', // 设备名称
eq_model: '传感器', // 设备型号
eq_address: '1-1-64', // 回路地址号
alert_type: '',
alarm_num: '1.61m', // 报警侑
set_num: '1.2m-1.6m', // 设定值
datetime: '2021-12-22 16:39:42',
type: 'water',
cctv_url: '', // 监控链接
case_url:
'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB%E8%AD%A6%E5%A4%84%E7%BD%AE%E6%B5%81%E7%A8%8B%E5%9B%BE.pdf', // 预案链接
notice_url: '1', // 通知链接
handle_url: '1', // 处理链接
},
{
id: '0',
icon: 'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB.png',
name: '老念佛堂（藏金阁、延寿堂、福慧堂）一层',
code: 'Y0218',
event_name: '火警3', // 事件名称
eq_name: '烟感', // 设备名称
eq_model: '感烟火灾探测器', // 设备型号
eq_address: '2-1-25', // 回路地址号
alert_type: '火警',
datetime: '2021-12-22 16:39:42',
type: 'fire',
cctv_url: '', // 监控链接
case_url:
'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB%E8%AD%A6%E5%A4%84%E7%BD%AE%E6%B5%81%E7%A8%8B%E5%9B%BE.pdf', // 预案链接
notice_url: '1', // 通知链接
handle_url: '1', // 处理链接
},
{
id: '0',
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%B0%B4.png',
name: '三慧楼楼顶',
code: 'Y0218',
event_name: '水警3', // 事件名称
eq_name: '液位', // 设备名称
eq_model: '传感器', // 设备型号
eq_address: '1-1-64', // 回路地址号
alert_type: '',
alarm_num: '1.61m', // 报警侑
set_num: '1.2m-1.6m', // 设定值
datetime: '2021-12-22 16:39:42',
type: 'water',
cctv_url: '', // 监控链接
case_url:
'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB%E8%AD%A6%E5%A4%84%E7%BD%AE%E6%B5%81%E7%A8%8B%E5%9B%BE.pdf', // 预案链接
notice_url: '1', // 通知链接
handle_url: '1', // 处理链接
},
],
window_type: 'warn',
},
{
name: '休息室',
position: [120.588012, 31.314519],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png',
details: [
{
id: '0',
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%B0%B4.png',
name: '三慧楼楼顶',
code: 'Y0218',
event_name: '水警1', // 事件名称
eq_name: '液位', // 设备名称
eq_model: '传感器', // 设备型号
eq_address: '1-1-64', // 回路地址号
alert_type: '',
alarm_num: '1.61m', // 报警侑
set_num: '1.2m-1.6m', // 设定值
datetime: '2021-12-22 16:39:42',
type: 'water',
cctv_url: '', // 监控链接
case_url:
'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB%E8%AD%A6%E5%A4%84%E7%BD%AE%E6%B5%81%E7%A8%8B%E5%9B%BE.pdf', // 预案链接
notice_url: '1', // 通知链接
handle_url: '1', // 处理链接
},
],
window_type: 'warn',
},
{
name: '罗汉堂',
position: [120.587167, 31.314803],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png',
details: [
{
id: '0',
icon: 'https://cdn.ipadbiz.cn/xys/map/%E6%B0%B4.png',
name: '三慧楼楼顶',
code: 'Y0218',
event_name: '水警1', // 事件名称
eq_name: '液位', // 设备名称
eq_model: '传感器', // 设备型号
eq_address: '1-1-64', // 回路地址号
alert_type: '',
alarm_num: '1.61m', // 报警侑
set_num: '1.2m-1.6m', // 设定值
datetime: '2021-12-22 16:39:42',
type: 'water',
cctv_url: '', // 监控链接
case_url:
'https://cdn.ipadbiz.cn/xys/map/%E7%81%AB%E8%AD%A6%E5%A4%84%E7%BD%AE%E6%B5%81%E7%A8%8B%E5%9B%BE.pdf', // 预案链接
notice_url: '1', // 通知链接
handle_url: '1', // 处理链接
},
],
window_type: 'warn',
},
],
};
export default testInfo;
......@@ -8,10 +8,10 @@
<span>{{ item.name }}</span>
</div>
</div>
<div v-if="info?.details?.length > 3" @click="handleNavScroll()" style="position: fixed; right: 0.75rem; width: 1rem; background-color: #FFF;top: 1.5rem;">
<!-- <div v-if="info?.details?.length > 3" @click="handleNavScroll()" style="position: fixed; right: 0.75rem; width: 1rem; background-color: #FFF;top: 1rem;">
<van-icon v-if="!nav_scroll" name="arrow" color="#888" size="1.25rem" style="vertical-align: sub;" />
<van-icon v-else name="arrow-left" color="#888" size="1.25rem" style="vertical-align: sub;" />
</div>
</div> -->
<div v-for="(item, index) in info?.details" :key="index">
<div v-if="isActive === index" :class=" [item.audio ? 'info-text-audio' : 'info-text', 'van-multi-ellipsis--l3'] ">{{ item.note }}</div>
<div v-if="isActive === index && item.audio" class="info-control">
......@@ -163,7 +163,7 @@ export default {
// 滚动状态
this.nav_scroll = false;
// 清空播放计时
this.play_timer = null;
clearInterval(this.play_timer)
},
showDetail() {
this.show_popup = true;
......@@ -216,6 +216,7 @@ export default {
this.audio.pause();
this.is_play = false;
this.changeAudioStatus('pause');
clearInterval(this.play_timer)
},
goToUrl(url) {
location.href = this.info.details[this.isActive].url;
......@@ -223,10 +224,12 @@ export default {
handleTitle (index) {
this.isActive = index;
this.voice_pause()
// 标题滚动
if (index === 2 && this.info.details.length > 3) {
this.handleNavScroll()
}
// // 标题滚动
// if (index === 2 && this.info.details.length > 3) {
// this.handleNavScroll()
// }
clearInterval(this.play_timer)
this.play_time = this.info.details[this.isActive].audio_time;
},
handleNavScroll () { // 滚动标题
this.nav_scroll = !this.nav_scroll;
......@@ -376,7 +379,7 @@ export default {
text-align: left;
.item {
width: 33.333%;
width: 30%;
flex-shrink: 0;
color: #888;
font-size: 1.1rem;
......
......@@ -3,25 +3,36 @@
<div class="info-window-warn-wrapper">
<div :style="{ width: (widow_info.width * 0.8) + 'px', overflow: 'auto' }">
<div class="hideScrollBar info-window-title">
<div class="checked item">
<!-- <div class="checked item">
<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"
color="#FFF" style="vertical-align: sub;" />&nbsp; <span>烟感异常</span>
</div> -->
<div v-for="(item, index) in info?.details" :key="index" @click="handleTitle(index)"
:class="[isActive === index ? 'checked' : '', 'item']">
<span>
{{ item.event_name }}
</span>
</div>
</div>
<!-- <div v-if="info?.details?.length > 3" @click="handleNavScroll()" style="position: fixed; right: 0.75rem; width: 1rem; background-color: #FFF;top: 1rem;">
<van-icon v-if="!nav_scroll" name="arrow" color="#888" size="1.25rem" style="vertical-align: sub;" />
<van-icon v-else name="arrow-left" color="#888" size="1.25rem" style="vertical-align: sub;" />
</div> -->
<div>
<div style="width: 80%; float: left; color: #888; line-height: 1.75;">
<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;" /> -->
{{ warn_info.datetime }}
</div>
<div>建筑: {{ warn_info.name }}</div>
<div>设备名称：{{ warn_info.eq_name }}</div>
<div>设备型号：{{ warn_info.eq_model }}</div>
<div>回路地址号：{{ warn_info.eq_address }}</div>
<div v-if="warn_info.type === 'fire'">类型：{{ warn_info.alert_type }}</div>
<div v-if="warn_info.type === 'water'">报警值：{{ warn_info.alarm_num }}</div>
<div v-if="warn_info.type === 'water'">设定值：{{ warn_info.set_num }}</div>
<div>报警时间：{{ warn_info.datetime }}</div>
</div>
<div class="info-control">
<div v-if="warn_info.cctv_url" class="info-control">
<div class="control-play">
<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;" />
......@@ -31,17 +42,17 @@
</div>
</div>
<div class="van-hairline--top warn-button-wrapper">
<div v-if="warn_info.case_url" @click="goTo(warn_info.case_url)" style="text-align: center; margin-top: 1rem;">
<div v-if="warn_info.case_url" @click="goToCase(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: 1rem;">预案</span>
</div>
<div v-if="warn_span1" class="van-hairline--right f-line"></div>
<div v-if="warn_info.notice_url" @click="goTo(warn_info.notice_url)" style="text-align: center; margin-top: 1rem;">
<div v-if="warn_info.notice_url" @click="goToList(warn_info.id)" 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: 1rem;">通知</span>
</div>
<div v-if="warn_span2" class="van-hairline--right f-line"></div>
<div v-if="warn_info.handle_url" @click="goTo(warn_info.handle_url)" style="text-align: center; margin-top: 1rem;">
<div v-if="warn_info.handle_url" @click="goToHandle(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: 1rem;">处理</span>
</div>
......@@ -232,8 +243,15 @@ export default {
this.audio.pause();
this.is_play = false;
},
goTo(url) {
console.warn(url);
goToCase(url) {
if (url) {
location.href = url;
}
},
goToList(id) {
console.warn(id);
},
goToHandle(url) {
// if (url) {
// location.href = url;
// }
......@@ -241,17 +259,18 @@ export default {
handleTitle(index) {
this.isActive = index;
this.voice_pause()
// 标题滚动
if (index === 2 && this.info.details.length > 3) {
this.handleNavScroll()
}
// // 标题滚动
// if (index === 2 && this.info.details.length > 3) {
// this.handleNavScroll()
// }
this.warn_info = this.info.details[index]
},
handleNavScroll() { // 滚动标题
this.nav_scroll = !this.nav_scroll;
if (this.nav_scroll) {
setTimeout(() => {
$('.info-window-title').animate({
scrollLeft: $('.info-window-title').outerWidth()
scrollLeft: $('.info-window-title .item').outerWidth() * 3
}, 1000);
}, 100);
} else {
......@@ -387,7 +406,7 @@ export default {
text-align: left;
.item {
width: 33.333%;
width: 30%;
flex-shrink: 0;
color: #888;
font-size: 1.1rem;
......@@ -432,4 +451,13 @@ export default {
}
}
.hideScrollBar::-webkit-scrollbar {
display: none;
}
.hideScrollBar {
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
</style>
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-10 13:31:34
* @LastEditTime: 2023-07-10 16:38:30
* @FilePath: /map-demo/src/views/index.vue
* @Description: 地图主体页面
-->
......@@ -92,6 +92,7 @@
// import { mapState } from 'vuex'
import coord from '@/common/map_data'
import map_max from '@/common/max'
import map_alert from '@/common/alert'
import _ from 'lodash';
import $ from 'jquery';
//引入定义的信息窗组件
......@@ -234,55 +235,7 @@ export default {
const code = this.$route.query.id;
// const code = '362800';
const { data } = await mapAPI({i: code});
const temp = {
id: 'warn',
name: '预警',
icon: [
'https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF@2x.png',
'https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF@2x.png',
],
list: [
{
name: '预警演示1',
position: [120.58704, 31.313773],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png',
details: [
{
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: 'warn',
},
{
name: '预警演示2',
position: [120.588012, 31.314519],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png',
details: [
{
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: 'warn',
},
],
}
data.list = data.list.concat(temp);
data.list = data.list.concat(map_alert);
this.navBarList = data.list; // 底部导航条
this.mapTiles = data.level; // 获取图层
this.navKey = data.list[0]['id']; // 默认选中 第一个 id
......@@ -380,12 +333,18 @@ export default {
const entity_info = this.navBarList.filter(item => item.id === id)[0]['list'];
this.markerSum = [];
_.each(entity_info, (x, i) => {
let marker_icon = '';
if (entity_info[i].window_type === 'warn' && entity_info[i].details.length === 1) { // 如果是预警类型并且内部预警项目只有一个取details第一个icon
marker_icon = entity_info[i].details[0]['icon'];
} else {
marker_icon = entity_info[i].icon;
}
var marker = new AMap.ElasticMarker({
position: entity_info[i].position,
zooms: [17, 19],
styles: [{
icon: {
img: entity_info[i].icon,
img: marker_icon, // 标记点图标
size: [28, 28], // 可见区域的大小
anchor: 'bottom-center', // 锚点
fitZoom: 14, // 最合适的级别
......