|
|
|
@@ -1,19 +1,19 @@ |
|
|
|
<template> |
|
|
|
<div class="alarm-container"> |
|
|
|
<van-nav-bar :title="title" left-arrow :border="true" @click-left="onNavBack"></van-nav-bar> |
|
|
|
<div class="alarm-container" v-show="isPageShow"> |
|
|
|
<van-nav-bar :title="title" :left-arrow="false" :border="true" @click-left="onNavBack"></van-nav-bar> |
|
|
|
<div id="details_map" class="details_map" style="width: 100%;height: 100vh"></div> |
|
|
|
<div class="notice">{{ alarm.message + '' }}</div> |
|
|
|
<div class="refresh"> |
|
|
|
<div class="refresh" @click="onRefresh"> |
|
|
|
<van-icon name="replay" size="25"/> |
|
|
|
<span>刷新</span> |
|
|
|
</div> |
|
|
|
<div class="bottom"> |
|
|
|
<div class="address"> |
|
|
|
<div class="title"> |
|
|
|
<p>{{ alarm.address }}</p> |
|
|
|
<p>{{ params.address }}</p> |
|
|
|
</div> |
|
|
|
<div class="time"> |
|
|
|
<span>{{ alarm.time }}</span> |
|
|
|
<span>{{ params.time }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="action"> |
|
|
|
@@ -41,8 +41,11 @@ |
|
|
|
|
|
|
|
<script> |
|
|
|
import MapLoader from "@/config/amap.js"; |
|
|
|
import APICore from "@/api/core"; |
|
|
|
import { isNotNull } from "@/utils/index"; |
|
|
|
export default { |
|
|
|
name: 'alarm-details', |
|
|
|
inject: ["reload"], |
|
|
|
data(){ |
|
|
|
return { |
|
|
|
title: '进入涉水区域警报', |
|
|
|
@@ -75,20 +78,57 @@ export default { |
|
|
|
mapAppList: [ |
|
|
|
{ name: "高德地图", wakeUpUrl: "https://uri.amap.com/marker?", number: 0 }, |
|
|
|
{ name: "腾讯地图", wakeUpUrl: "https://apis.map.qq.com/tools/poimarker?", number: 1 } |
|
|
|
] |
|
|
|
], |
|
|
|
params: { |
|
|
|
imei: '', |
|
|
|
poiId: '', |
|
|
|
title: '', |
|
|
|
lng: '', |
|
|
|
lat: '', |
|
|
|
address: '', |
|
|
|
status: true, |
|
|
|
time: '' |
|
|
|
}, |
|
|
|
isPageShow: null, |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.initAmap() |
|
|
|
this.getAuth(); |
|
|
|
this.getParams(); |
|
|
|
//this.initAmap(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 获取b端接口的token |
|
|
|
getAuth() { |
|
|
|
let manufactorId = "5bf13062-a41e-4d00-ba14-1101aad12650"; |
|
|
|
APICore.getAuth({ manufactorId: manufactorId }).then(res => { |
|
|
|
this.$store.commit("gatewayToken", res.data.data); |
|
|
|
}); |
|
|
|
}, |
|
|
|
getParams() { |
|
|
|
let params = this.$route.query; |
|
|
|
if (isNotNull(params)) { |
|
|
|
console.log("params", params); |
|
|
|
this.params = {...params}; |
|
|
|
this.isPageShow = true; |
|
|
|
this.initAmap(); |
|
|
|
console.log("this.params", this.params); |
|
|
|
} else { |
|
|
|
this.$dialog.confirm({ |
|
|
|
message: '跳转参数错误,请联系管理员', |
|
|
|
showCancelButton: false |
|
|
|
}) |
|
|
|
this.isPageShow = false; |
|
|
|
} |
|
|
|
}, |
|
|
|
onNavBack() {}, |
|
|
|
// 初始化地图 |
|
|
|
initAmap() { |
|
|
|
this.$toast.loading('地图加载中'); |
|
|
|
MapLoader(false, [ 'AMap.PolyEditor', 'AMap.MouseTool', 'AMap.Geocoder', 'AMap.Geolocation' ]).then( |
|
|
|
AMap => { |
|
|
|
this.map.instance = new AMap.Map("details_map", { |
|
|
|
center: this.map.center, |
|
|
|
center: [this.params.lng, this.params.lat], |
|
|
|
resizeEnable: this.map.resizeEnable, |
|
|
|
zoom: this.map.zoom, |
|
|
|
zoomEnable: true |
|
|
|
@@ -97,12 +137,16 @@ export default { |
|
|
|
extensions: "all" |
|
|
|
}); |
|
|
|
this.initCenterMarker(); |
|
|
|
this.$toast.success('地图加载完成'); |
|
|
|
}, |
|
|
|
err => { |
|
|
|
this.$toast.clear(); |
|
|
|
console.log("加载地图失败:::", err); |
|
|
|
} |
|
|
|
); |
|
|
|
setTimeout(() => { |
|
|
|
this.$toast.clear(); |
|
|
|
}, 5000) |
|
|
|
}, |
|
|
|
// 初始化marker |
|
|
|
initCenterMarker() { |
|
|
|
@@ -176,8 +220,45 @@ export default { |
|
|
|
if(name === 'goHere') { |
|
|
|
// 根据选择的地图跳转不同地图app的url |
|
|
|
this.actionSheetShow = true; |
|
|
|
} else { |
|
|
|
this.$dialog({ |
|
|
|
title: '', |
|
|
|
message: '是否永不提示', |
|
|
|
showCancelButton: true, |
|
|
|
closeOnClickOverlay: true, |
|
|
|
}).then(() => { |
|
|
|
// 调取接口设置该设备IMEI与该水域告警poi_id不做任何报警信息处理 |
|
|
|
this.drownReportFilterAdd(); |
|
|
|
}).catch(() => { |
|
|
|
console.log("取消"); |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
drownReportFilterAdd() { |
|
|
|
this.$toast.loading('设置中'); |
|
|
|
let reqBody = { |
|
|
|
...this.params |
|
|
|
}; |
|
|
|
reqBody['status'] = true; |
|
|
|
delete reqBody.message; |
|
|
|
delete reqBody.time; |
|
|
|
console.log("请求的参数", reqBody); |
|
|
|
APICore.drownReportFilterAdd(reqBody).then(res => { |
|
|
|
console.log("res", res); |
|
|
|
let data = res.data; |
|
|
|
if(data.code === 0) { |
|
|
|
this.$toast.success('设置成功') |
|
|
|
}; |
|
|
|
}).catch(error => { |
|
|
|
this.$dialog.confirm({ |
|
|
|
message: `${error.message}` |
|
|
|
}); |
|
|
|
}).finally(() => { |
|
|
|
setTimeout(() => { |
|
|
|
this.$toast.clear(); |
|
|
|
},1500) |
|
|
|
}) |
|
|
|
}, |
|
|
|
onSelect(item) { |
|
|
|
if(item.number === 0) { |
|
|
|
// 高德 |
|
|
|
@@ -187,16 +268,19 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
wakeUpGaodeMap(wakeUpUrl) { |
|
|
|
const position = this.alarm.glng + ',' +this.alarm.glat; |
|
|
|
const name = this.alarm.address; |
|
|
|
const position = this.params.lng + ',' +this.params.lat; |
|
|
|
const name = this.params.address; |
|
|
|
window.location.href = `${wakeUpUrl}position=${position}&name=${name}&callnative=1`; |
|
|
|
}, |
|
|
|
wakeUpTencentMap(wakeUpUrl) { |
|
|
|
const position = this.alarm.glat + ',' + this.alarm.glng ; |
|
|
|
const address = this.alarm.address; |
|
|
|
const position = this.params.lat + ',' + this.params.lng ; |
|
|
|
const address = this.params.address; |
|
|
|
const key = 'UHFBZ-I5ECQ-GSA5B-GW3UW-V2NL5-A3FNY'; |
|
|
|
const myAppName = 'ssjlqqmap'; |
|
|
|
window.location.href = `${wakeUpUrl}type=0&marker=coord:${position};title:${address};addr:${address}&key=${key}&referer=${myAppName}`; |
|
|
|
}, |
|
|
|
onRefresh() { |
|
|
|
this.reload(); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@@ -271,11 +355,14 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
.bottom { |
|
|
|
width: 100%; |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
left: 0; |
|
|
|
background-color: $background; |
|
|
|
z-index: 999; |
|
|
|
padding-bottom: constant(safe-area-inset-bottom); //* 兼容 iOS<11.2 */ |
|
|
|
padding-bottom: env(safe-area-inset-bottom); ///* 兼容iOS>= 11.2 */ |
|
|
|
.address { |
|
|
|
padding: 10px; |
|
|
|
display: flex; |
|
|
|
|
