Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
f08d579f 1 parent 950679dd

fix

Inline Side-by-side
Showing 5 changed files with 44 additions and 186 deletions
<!--
* @Date: 2023-05-31 16:10:33
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-10 15:12:29
* @LastEditTime: 2023-07-11 13:32:02
* @FilePath: /map-demo/index.html
* @Description: 文件描述
-->
......@@ -22,7 +22,7 @@
securityJsCode:'8602057c4c8dae5bed9a240c0582c46f',
}
// window._AMapSecurityConfig = {
// serviceHost:'https://oa-dev.onwall.cn/_AMapService',
// 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>
......
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-26 23:52:36
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-10 17:48:24
* @LastEditTime: 2023-07-11 11:01:51
* @FilePath: /map-demo/src/App.vue
* @Description:
-->
......
/*
* @Date: 2023-07-10 16:14:10
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-11 14:30:32
* @FilePath: /map-demo/src/common/alert.js
* @Description: 文件描述
*/
const testInfo = {
id: 'warn',
name: '预警',
......@@ -7,8 +14,8 @@ const testInfo = {
],
list: [
{
name: '厢房',
position: [120.58704, 31.313773],
name: '老念佛堂',
position: [120.587586, 31.315532],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png',
details: [
{
......@@ -23,141 +30,7 @@ const testInfo = {
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: '', // 监控链接
cctv_url: 'https://cdn.ipadbiz.cn/xys/map/oceans.mp4', // 监控链接
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', // 通知链接
......@@ -167,8 +40,8 @@ const testInfo = {
window_type: 'warn',
},
{
name: '休息室',
position: [120.588012, 31.314519],
name: '三慧楼',
position: [120.585574, 31.315843],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png',
details: [
{
......@@ -186,36 +59,7 @@ const testInfo = {
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', // 预案链接
case_url: '', // 预案链接
notice_url: '1', // 通知链接
handle_url: '1', // 处理链接
},
......
......@@ -32,28 +32,33 @@
<div v-if="warn_info.type === 'water'">设定值：{{ warn_info.set_num }}</div>
<div>报警时间：{{ warn_info.datetime }}</div>
</div>
<div v-if="warn_info.cctv_url" class="info-control">
<div v-if="warn_info.cctv_url" @click="goToWatch(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;" />
</div>
<div @click="goTo(warn_info.cctv_url)">监控</div>
<div>监控</div>
</div>
</div>
</div>
<div class="van-hairline--top warn-button-wrapper">
<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;
<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="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;
<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="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;
<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>
</div>
......@@ -100,7 +105,7 @@ export default {
mounted() {
},
computed: {
warn_span1 () {
warn_span1() {
let flag = false;
if (this.warn_info.case_url) {
if (this.warn_info.notice_url || this.warn_info.handle_url) {
......@@ -109,7 +114,7 @@ export default {
}
return flag;
},
warn_span2 () {
warn_span2() {
let flag = false;
if (this.warn_info.notice_url) {
if (this.warn_info.handle_url) {
......@@ -262,6 +267,12 @@ export default {
// location.href = url;
// }
},
goToWatch(url) {
// this.show_popup = true;
if (url) {
location.href = url;
}
},
handleTitle(index) {
this.isActive = index;
this.voice_pause()
......@@ -451,9 +462,13 @@ export default {
}
.warn-button-wrapper {
margin-top: 1rem; display: flex; justify-content: space-around;
margin-top: 1rem;
display: flex;
justify-content: space-around;
.f-line {
text-align: center; margin-top: 1rem;
text-align: center;
margin-top: 1rem;
}
}
......@@ -465,5 +480,4 @@ export default {
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
</style>
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-11 09:35:08
* @LastEditTime: 2023-07-11 15:12:47
* @FilePath: /map-demo/src/views/index.vue
* @Description: 地图主体页面
-->
......@@ -783,7 +783,7 @@ export default {
// 点击后创建自定义信息窗口
this.setInfoWindowsWarn(item)
// 把地图中心点设置为当前点击的标记点
this.map.setZoomAndCenter(this.zoom, item.position);
this.map.setZoomAndCenter(this.zoom, [item.position[0], item.position[1] + 0.000300]);
//
this.show_nav_popup = false;
// 禁止缩放
......