184 lines
3.8 KiB
Vue
184 lines
3.8 KiB
Vue
<template>
|
||
<section class="warningDetail">
|
||
<div flex class="header">
|
||
<b v-text="detail.name"/>
|
||
<div>
|
||
{{ $dict.getLabel('intelligentGuardianshipItem2', detail.item) }}
|
||
{{ detail.itemValue }}
|
||
</div>
|
||
</div>
|
||
<AiMap class="fill" :map.sync="amap" :lib.sync="mapLib"/>
|
||
<div class="navigation">
|
||
<div class="content spb" flex>
|
||
<div flex class="spb wrap">
|
||
<div class="fill" v-text="detail.gpsDesc"/>
|
||
<span>最后更新：{{ detail.createTime }}</span>
|
||
</div>
|
||
<open-map :data="detail"/>
|
||
</div>
|
||
</div>
|
||
<make-calls :list="phoneList">
|
||
<div class="bottomBtn">拨打电话</div>
|
||
</make-calls>
|
||
<AiBack/>
|
||
</section>
|
||
</template>
|
||
|
||
<script>
|
||
import OpenMap from "./component/openMap";
|
||
import MakeCalls from "./component/makeCalls";
|
||
|
||
export default {
|
||
name: "warningDetail",
|
||
components: {MakeCalls, OpenMap},
|
||
computed: {
|
||
phoneList() {
|
||
let {name: guardianName, phone: guardianPhone} = this.detail
|
||
return [{guardianName, guardianPhone}, ...this.detail.guardians]
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
detail: {guardians: []},
|
||
mapLib: null,
|
||
amap: null,
|
||
}
|
||
},
|
||
methods: {
|
||
getDetail(id) {
|
||
return this.$http.post("/app/appintelligentguardianshipalarm/queryDetailById", null, {
|
||
params: {id},
|
||
withoutToken: true
|
||
}).then(res => {
|
||
if (res?.data) {
|
||
this.detail = res.data
|
||
}
|
||
})
|
||
},
|
||
initMap() {
|
||
if (this.mapLib) {
|
||
let pos = new this.mapLib.LngLat(this.detail.lng, this.detail.lat)
|
||
this.amap.add(new this.mapLib.Marker({
|
||
position: pos,
|
||
anchor: 'bottom-center',
|
||
content: `<div class="marker">${this.detail.name}</div>`,
|
||
}))
|
||
this.amap.setFitView()
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
mapLib(v) {
|
||
this.detail.id && v && this.initMap()
|
||
}
|
||
},
|
||
created() {
|
||
this.$dict.load("intelligentGuardianshipItem", 'intelligentGuardianshipItem2', 'sex')
|
||
},
|
||
mounted() {
|
||
this.getDetail(this.$route.query.id).then(() => this.initMap())
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.warningDetail {
|
||
padding: 48px 48px 112px;
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: absolute;
|
||
|
||
.header {
|
||
font-size: 40px;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
justify-content: center;
|
||
margin-bottom: 48px;
|
||
|
||
& > div {
|
||
color: #EC4461;
|
||
}
|
||
}
|
||
|
||
.navigation {
|
||
.content {
|
||
padding: 10px 0 32px;
|
||
font-size: 28px;
|
||
color: #555;
|
||
|
||
& > .spb {
|
||
margin-right: 40px;
|
||
}
|
||
|
||
.fill {
|
||
min-width: 100%;
|
||
flex-shrink: 0;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
span {
|
||
margin-left: 0;
|
||
color: #999;
|
||
font-size: 22px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottomBtn {
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
text-align: center;
|
||
color: #fff;
|
||
background: #1365DD;
|
||
line-height: 112px;
|
||
}
|
||
|
||
.AiMap {
|
||
margin-bottom: 72px;
|
||
}
|
||
|
||
|
||
::v-deep .marker {
|
||
border-radius: 52px;
|
||
background: #F46159;
|
||
color: #fff;
|
||
font-size: 22px;
|
||
padding: 4px 16px;
|
||
white-space: nowrap;
|
||
position: relative;
|
||
|
||
&:before {
|
||
position: absolute;
|
||
left: calc(50% - 30px);
|
||
bottom: -34px;
|
||
z-index: -1;
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50%;
|
||
background-color: #F46159;
|
||
animation: mapWarn 1s ease-out 0s infinite;
|
||
content: " ";
|
||
}
|
||
|
||
&:after {
|
||
position: absolute;
|
||
display: block;
|
||
content: " ";
|
||
bottom: -8px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
border: 8px solid transparent;
|
||
border-bottom: none;
|
||
border-top-color: #F46159;
|
||
height: 0;
|
||
width: 0;
|
||
}
|
||
}
|
||
}
|
||
</style>
|