<template>
|
<div class="details-content">
|
<div class="nav">
|
<span>查看事件</span>
|
<el-button type="primary" size="medium" @click="$router.go(-1)">返回</el-button>
|
</div>
|
<div class="content">
|
<el-form ref="form" :model="form" label-width="80px">
|
<el-form-item label="事件分类">{{['','治安隐患','公共服务','矛盾纠纷','不稳定因素','突发事件'][details.eventType]}}</el-form-item>
|
<el-form-item label="事件类型">{{details.eventClazz}}</el-form-item>
|
<el-form-item label="事件标题">{{details.eventTitle}}</el-form-item>
|
<el-form-item label="事件描述">{{details.eventDes}}</el-form-item>
|
<el-form-item label="危险级别">{{['',"特别重大", "重大", "较大", "一般"][details.dangerLevel]}}</el-form-item>
|
|
<el-form-item label="发生时间">{{details.happenTime}}</el-form-item>
|
<el-form-item label="网格员">{{details.gridMemberName}}</el-form-item>
|
<el-form-item label="是否紧急">{{details.urgent?'是':'否'}}</el-form-item>
|
<el-form-item label="是否重大">{{details.major?'是':'否'}}</el-form-item>
|
<el-form-item label="死亡人数">{{details.deathsNumber}}</el-form-item>
|
<el-form-item label="受伤人数">{{details.injuriesNumber}}</el-form-item>
|
|
<el-form-item label="发生地点">{{details.happenAddress}}
|
<!-- <MapBox ref="mapContent" /> -->
|
<div id="container"></div>
|
</el-form-item>
|
<el-form-item label="发生区域">{{details.gridName}}</el-form-item>
|
<el-form-item label="音频">
|
<article v-for="(au ,s) in details.audios" :key="s">
|
<audio
|
ref="audio"
|
:src="au.url"
|
controls="controls"
|
/>
|
</article>
|
</el-form-item>
|
<el-form-item label="视频">
|
<article v-for="(v ,i) in details.videos" :key="i">
|
<video
|
:src="v.url"
|
controls
|
></video>
|
</article>
|
</el-form-item>
|
<el-form-item label="图片">
|
<div v-for="(img,a) in details.pics" :key="a">
|
<el-image
|
style="width: 100px; height: 100px"
|
:src="img.url"
|
:preview-src-list="[img.url]">
|
</el-image>
|
</div>
|
</el-form-item>
|
<div>
|
<el-form-item label="创建人">{{details.creator}}</el-form-item>
|
<el-form-item label="创建时间">{{details.createAt}}</el-form-item>
|
</div>
|
<div>
|
<el-form-item label="撤销人">{{details.revoke}}</el-form-item>
|
<el-form-item label="撤销时间"></el-form-item>
|
</div>
|
<el-form-item label="处理意见">{{details.processDesc ||'无'}}</el-form-item>
|
<el-form-item label="处理记录">
|
<article>
|
<ul class="lis">
|
<li
|
v-for="i in details.trans"
|
:key="i.id"
|
>{{i.createAt}} {{i.fromName}}办理意见：{{i.processResult}}</li>
|
</ul>
|
</article>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import MapBox from "../../components/map/map.vue";
|
export default {
|
components: { MapBox },
|
data() {
|
return {
|
form:{},
|
details:{},
|
mapObj:{}
|
}
|
},
|
|
mounted() {
|
let Did = this.$route.query.id;
|
this.getDetails(Did)
|
},
|
|
methods: {
|
|
getDetails(id){
|
this.$api.get("fms/event/detail", {eventId:id}, e => {
|
this.details = e;
|
let lng = e.happentLatLng.split(",")
|
this.mapObj = new AMap.Map("container", {
|
resizeEnable: true, //是否监控地图容器尺寸变化
|
zoom: 14, //初始化地图层级
|
center: [lng[1], lng[0]],
|
});
|
this.addMarker(lng)
|
});
|
},
|
addMarker() {
|
marker = new AMap.Marker({
|
icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
|
position: new AMap.LngLat(lng[1], lng[0]),
|
offset: new AMap.Pixel(-13, -30)
|
});
|
this.mapObj.add(marker);
|
}
|
|
}
|
|
|
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.details-content {
|
overflow-y: auto;
|
}
|
.map-box {
|
position: relative;
|
}
|
#container {
|
width: 100%;
|
height: 500px;
|
}
|
.nav {
|
padding: 20px 0;
|
span {
|
font-size: 18px;
|
height: 40px;
|
line-height: 40px;
|
font-weight: 700;
|
margin-right: 30px;
|
}
|
}
|
.lis {
|
padding-left: 25px;
|
font-size: 14px;
|
line-height: 1.2;
|
color: #667;
|
li {
|
margin-bottom: 8px;
|
}
|
}
|
</style>
|
