<template>
<el-dialog :close-on-click-modal="false" id="detailrecord" :visible.sync="dialogFormVisible" title="违规记录详情" append-to-body width="900px" >
<el-form ref="dataForm" :model="recordForm" label-position="right" label-width="100px" style="padding-top:20px;padding-left: 20px">
<el-row :gutter="20">
<el-col :span="7" style="padding: 0px">
<el-form-item label="报警类型：" >
<label style="font-size: 14px;font-weight: 500">{{ recordForm.alarmRecord.alarmTypeName }}</label>
</el-form-item>
</el-col>
<el-col :span="7" style="padding: 0px">
<el-form-item label="报警原因：" >
<label style="font-size: 14px;font-weight: 500">{{ recordForm.alarmRecord.alarmReasonName }}</label>
</el-form-item>
</el-col>
<el-col :span="10" style="padding: 0px">
<el-form-item label="报警信息：" >
<label style="font-size: 14px;font-weight: 500">{{ recordForm.alarmRecord.alarmMsg }}</label>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="7" style="padding: 0px">
<el-form-item label="报警时间：" >
<label style="font-size: 14px;font-weight: 500">{{ recordForm.alarmRecord.alarmTime }}</label>
</el-form-item>
</el-col>
<el-col :span="7" style="padding: 0px">
<el-form-item label="车辆描述：" >
<label style="font-size: 14px;font-weight: 500">{{ recordForm.carInfo.description }}</label>
</el-form-item>
</el-col>
<el-col :span="10" style="padding: 0px">
<el-form-item label="车辆类型：" >
<label style="font-size: 14px;font-weight: 500">{{ recordForm.carInfo.carTypeName }}</label>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="7" style="padding: 0px">
<el-form-item label="使用单位：" >
<label style="font-size: 14px;font-weight: 500">{{ recordForm.carInfo.deptName }}</label>
</el-form-item>
</el-col>
<el-col :span="7" style="padding: 0px">
<el-form-item label="车牌号：" >
<label style="font-size: 14px;font-weight: 500">{{ recordForm.carInfo.carCode }}</label>
</el-form-item>
</el-col>
<el-col :span="10" style="padding: 0px">
<el-form-item label="品牌型号：" >
<label style="font-size: 14px;font-weight: 500">{{ recordForm.carInfo.brandModel }}</label>
</el-form-item>
</el-col>
</el-row>
<el-row v-show="recordForm.alarmRecord.alarmReason==='4'" :gutter="20">
<el-col :span="7" style="padding: 0px">
<el-form-item label=" 围栏描述：" >
<label style="font-size: 14px;font-weight: 500">{{ recordForm.fenceInfo.fenceName }}</label>
</el-form-item>
</el-col>
<el-col :span="7" style="padding: 0px">
<el-form-item label="开始日期：" >
<label style="font-size: 14px;font-weight: 500">{{ recordForm.fenceInfo.startDate }}</label>
</el-form-item>
</el-col>
<el-col :span="7" style="padding: 0px">
<el-form-item label="结束日期：" >
<label style="font-size: 14px;font-weight: 500">{{ recordForm.fenceInfo.endDate }}</label>
</el-form-item>
</el-col>
</el-row>
<el-row v-show="recordForm.alarmRecord.alarmReason==='4'" :gutter="20">
<el-col :span="20" style="padding: 0px">
<el-form-item label="准行时间段：" >
<label style="font-size: 14px;font-weight: 500">{{ recordForm.fenceInfo.accessTime }}</label>
</el-form-item>
</el-col>
</el-row>
<el-row v-show="recordForm.alarmRecord.alarmReason==='5'" :gutter="20">
<el-col :span="7" style="padding: 0px">
<el-form-item label=" 路线描述：" >
<label style="font-size: 14px;font-weight: 500">{{ recordForm.routeInfo.routeName }}</label>
</el-form-item>
</el-col>
<el-col :span="7" style="padding: 0px">
<el-form-item label="开始日期：" >
<label style="font-size: 14px;font-weight: 500">{{ recordForm.routeInfo.startDate }}</label>
</el-form-item>
</el-col>
<el-col :span="7" style="padding: 0px">
<el-form-item label="结束日期：" >
<label style="font-size: 14px;font-weight: 500">{{ recordForm.routeInfo.endDate }}</label>
</el-form-item>
</el-col>
</el-row>
<el-row v-show="recordForm.alarmRecord.alarmReason==='5'" :gutter="20">
<el-col :span="20" style="padding: 0px">
<el-form-item label="准行时间段：" >
<label style="font-size: 14px;font-weight: 500">{{ recordForm.routeInfo.accessTime }}</label>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div v-show="recordForm.alarmRecord.alarmReason==='2'" style="height: 30px"/>
<div v-show="recordForm.alarmRecord.alarmReason!=='2'" id="map"/>
</el-dialog>
</template>
<script>
import { getRecordDetail } from '@/api/alarm'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
export default {
data() {
return {
dialogFormVisible: false, // 对话框是否显示
deptShow: true,
id: '',
map: null,
baselayer: [],
markerlayer: null,
recordForm: {
alarmRecord: {
alarmFence: '',
alarmMsg: '',
alarmReason: '',
alarmRoute: '',
alarmStatus: '',
alarmTime: '',
alarmType: '',
carId: '',
id: '',
posId: ''
},
carInfo: {
brandModel: '',
carCode: '',
carType: '',
carTypeName: '',
chargePerson: '',
chargePhone: '',
delflag: '',
deptId: '',
deptName: '',
description: '',
deviceId: '',
engine: '',
id: '',
imei: '',
iot: '',
peopleNumber: '',
purchaseDate: '',
registerDate: '',
remarks: '',
userPerson: '',
userPhone: ''
},
fenceInfo: {
accessTime: '',
alarmType: '',
alarmTypeName: '',
delflag: '',
deptId: '',
deptName: '',
endDate: '',
fenceName: '',
fenceType: '',
fenceTypeName: '',
id: '',
remarks: '',
startDate: ''
},
routeInfo: {
accessTime: '',
alarmDistance: '',
alarmType: '',
alarmTypeName: '',
delflag: '',
deptId: '',
deptName: '',
endAddress: '',
endDate: '',
id: '',
mainRoad: '',
remarks: '',
routeName: '',
startAddress: '',
startDate: ''
}
} // 表单
}
},
methods: {
initDialog: function(dialogFormVisible, id) {
this.dialogFormVisible = dialogFormVisible
this.recordForm = {
alarmRecord: {
alarmFence: '',
alarmMsg: '',
alarmReason: '',
alarmRoute: '',
alarmStatus: '',
alarmTime: '',
alarmType: '',
carId: '',
id: '',
posId: ''
},
carInfo: {
brandModel: '',
carCode: '',
carType: '',
carTypeName: '',
chargePerson: '',
chargePhone: '',
delflag: '',
deptId: '',
deptName: '',
description: '',
deviceId: '',
engine: '',
id: '',
imei: '',
iot: '',
peopleNumber: '',
purchaseDate: '',
registerDate: '',
remarks: '',
userPerson: '',
userPhone: ''
},
fenceInfo: {
accessTime: '',
alarmType: '',
alarmTypeName: '',
delflag: '',
deptId: '',
deptName: '',
endDate: '',
fenceName: '',
fenceType: '',
fenceTypeName: '',
id: '',
remarks: '',
startDate: ''
},
routeInfo: {
accessTime: '',
alarmDistance: '',
alarmType: '',
alarmTypeName: '',
delflag: '',
deptId: '',
deptName: '',
endAddress: '',
endDate: '',
id: '',
mainRoad: '',
remarks: '',
routeName: '',
startAddress: '',
startDate: ''
}
}
if (this.map !== null) {
var base = this.baselayer
this.map.eachLayer(function(layer) {
if (layer !== base[0] && layer !== base[1]) {
layer.remove()
}
})
}
this.id = id
this.initdata()
},
initdata() {
getRecordDetail(this.id).then(response => {
console.log(response.data,'!!!!!!!!!!!!!')
this.recordForm = response.data
if (this.recordForm.alarmRecord.alarmReason !== '2') {
if (this.map === null) {
this.initMap()
}
}
if (this.recordForm.alarmRecord.alarmReason === '5') {
this.drawroute()
this.drawpoint()
} else if (this.recordForm.alarmRecord.alarmReason === '4') {
this.drawfence()
this.drawpoint()
} else if (this.recordForm.alarmRecord.alarmReason === '1' || this.recordForm.alarmRecord.alarmReason === '3') {
this.drawpoint()
}
})
},
initMap() {
const map = L.map('map', {
minZoom: 3,
maxZoom: 18,
// center: [39.550339, 116.114129],
center: [27.75962, 116.06021],
zoom: 12,
zoomControl: false,
attributionControl: false,
crs: L.CRS.EPSG3857
})
this.map = map // data上需要挂载
window.map = map
this.baselayer.push(L.tileLayer(
'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
{ subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
).addTo(map))
this.baselayer.push(L.tileLayer(
'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8',
{ subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'] }
).addTo(map))
},
drawpoint() {
var Icon = L.icon({
iconUrl: require('../../assets/global_images/car.png'),
iconSize: [40, 40]
})
var item = this.recordForm.position
var str = '<div style="font-size: 14px;padding: 6px"> <div style="font-weight: bold;padding-bottom: 10px">车辆违规点信息</div>' +
'<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">定位</label>' + item.lng + ' , ' + item.lat + '</div>' +
'<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">时间</label>' + item.upTime + '</div>' +
'<div style="padding-bottom: 6px"><label style="font-weight: bold;padding-right: 15px">速度</label>' + item.speed + '(km/h)</div>' +
'</div>'
var popup = L.popup().setContent(str)
this.carpoint = L.marker([item.lat, item.lng], {
icon: Icon,
rotationAngle: item.directions
}).addTo(this.map).bindPopup(popup)
this.carpoint.openPopup()
this.map.setView({ lat: item.lat, lng: item.lng })
},
drawfence() {
var myStyle = {
'color': '#409eff',
'weight': 4,
'opacity': 0.7
}
var fencelist = []
for (i = 0; i < this.recordForm.fencePoints.length; i++) {
var item = [Number(this.recordForm.fencePoints[i].pointY), Number(this.recordForm.fencePoints[i].pointX)]
fencelist.push(item)
}
if (fencelist.length === 0) {
return
}
L.polygon(fencelist, myStyle).addTo(this.map)
var Icon
for (var i = 0; i < fencelist.length; i++) {
Icon = L.divIcon({
className: 'my-div-icon', // 自定义icon css样式
iconSize: [15, 15]// 点大小
})
L.marker([fencelist[i][0], fencelist[i][1]], {
icon: Icon
}).addTo(this.map)
}
},
drawroute() {
var myStyle = {
'color': '#409eff',
'weight': 4.5,
'opacity': 0.7
}
var pathlist = []
for (i = 0; i < this.recordForm.routePaths.length; i++) {
var item = [Number(this.recordForm.routePaths[i].startLat), Number(this.recordForm.routePaths[i].startLng)]
pathlist.push(item)
if (i === this.recordForm.routePaths.length - 1) {
item = [Number(this.recordForm.routePaths[i].endLat), Number(this.recordForm.routePaths[i].endLng)]
pathlist.push(item)
}
}
if (pathlist.length === 0) {
return
}
L.polyline(pathlist, myStyle).addTo(this.map)
var Icon
for (var i = 0; i < pathlist.length; i++) {
if (i === 0) {
Icon = L.icon({
iconUrl: require('../../assets/global_images/start.png'),
iconSize: [45, 45]
})
} else if (i === pathlist.length - 1) {
Icon = L.icon({
iconUrl: require('../../assets/global_images/end.png'),
iconSize: [45, 45]
})
} else {
Icon = L.divIcon({
className: 'my-div-icon', // 自定义icon css样式
iconSize: [15, 15]// 点大小
})
}
L.marker([pathlist[i][0], pathlist[i][1]], {
icon: Icon
}).addTo(this.map)
}
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
#detailrecord .el-form-item__label {
font-size: 14px ;
font-weight: bold;
padding-right: 5px;
}
#detailrecord .el-form-item {
margin-bottom: 0px;
}
#detailrecord .el-dialog__body {
padding: 0px ;
padding-left: 0px;
padding-right: 0px;
}
#map {
width:100%;
height:50vh;
}
.my-div-icon {
width: 10px;
height: 10px;
background-color: orange;
border-radius: 50%;
}
</style>
