|
<template>
<div class="orientation-container">
<div class="top-container">
<div class="person-info">
<div>全部<span class="number">{{ personStatistics.allNum }}</span>人</div>
<div>
<div class="normal"></div>
正常<span class="number">{{ personStatistics.normalNum }}</span>人
</div>
<div>
<div class="off-line"></div>
离线<span class="number">{{ personStatistics.offlineNum }}</span>人
</div>
<div>
<div class="out-line"></div>
违规<span class="number">{{ personStatistics.violationNum }}</span>人
</div>
<div>
<div class="sos"></div>
SOS<span class="number">{{ personStatistics.sosNum }}</span>人
</div>
<div class="time">当前时间：{{ nowDate | dateFormat }}</div>
</div>
<div class="right-content">
<!-- <div>
<t-input placeholder="请输入名称或终端编号"></t-input>
</div>
<t-button color="success" icon="search-outline"></t-button> -->
<t-button
color="success"
icon="map-marker-outline"
@click="
() => {
trackModal = true;
}
"
>轨迹</t-button
>
<div style="min-width:100px">悬浮窗<t-switch v-model="switch1" rounded @change="switchChange"></t-switch></div>
</div>
</div>
<div id="div1" style="height: 100%"></div>
<div class="label">
<div class="item">
<div :class="mapShow.sos?'':'cancel'">
<div class="sos"></div>
<div>SOS</div>
</div>
<div :class="mapShow.offLine?'':'cancel'">
<div class="offline"></div>
<div>离线</div>
</div>
<div :class="mapShow.outLine?'':'cancel'">
<div class="outline"></div>
<div>违规</div>
</div>
<div :class="mapShow.normal?'':'cancel'">
<div class="normal"></div>
<div>正常</div>
</div>
</div>
<div class="item">
<div v-for="(item, index) in toolTypes" :key="index" :class="item.show?'':'cancel'" @click="showOrHide(layer.equipmentLayer,item)">
<div :style="{ 'background-image': 'url('+item.iconUrl+')' }" class="chuanbo"></div>
<div>{{ item.name }}</div>
</div>
</div>
<div class="item">
<div v-for="(item, index) in markTypes" :key="index" :class="item.show?'':'cancel'" @click="showOrHide(layer.areaLayer,item)">
<div :style="{ background: item.color}" class="dzwl"></div>
<div>{{ item.name }}</div>
</div>
</div>
</div>
<t-modal
:visibled.sync="trackModal"
:footer-visibled="false"
:mask-closable="false"
:width="1200"
title="历史轨迹"
>
<div class="track-modal-container">
<div class="track-modal-left">
<t-input
v-model="trackSearch"
icon="search-outline"
icon-placement="right"
placeholder="请输入姓名或终端编号"
style="width: 200px"
></t-input>
<div>
<div v-for="(item,index) in personList" :class="trackPerson.workEmployeeCode==item.workEmployeeCode?'active':''" :key="index" @click="personTrack(item)">{{ item.workEmployeeName }}</div>
</div>
</div>
<div class="track-modal-right">
<div style="display: flex">
<t-button-group>
<t-button
v-for="(item, index) in trackTimeList"
:class="
index == trackQueryCondition.currentIndex ? 'active' : ''
"
:key="index"
@click="changeTrackTime(index)"
>{{ item }}</t-button
>
</t-button-group>
<t-date-picker
:class="trackQueryCondition.currentIndex === 3?'':'hidden'"
v-model="rangeDate"
align-right
style="width:350px"
type="dateTimeRange"
placeholder="请选择时间"
@date-change="onChangeDate">
</t-date-picker>
<!-- <div style="display: flex;line-height:32.5px;width: 120px;">
<div>速度</div>
<t-select>
<t-option>1x</t-option>
<t-option>2x</t-option>
</t-select>
</div> -->
<t-button color="success" icon="video-outline" @click="playback()">回放</t-button>
<t-button color="secondary" icon="upload-outline" @click="toExport"
>导出至Excel</t-button
>
</div>
<div id="track-map" style="height: 467.5px;"></div>
</div>
</div>
</t-modal>
<t-modal :visibled.sync="rescueModal" title="指派救援人员">
<t-form
ref="formValidate"
:model="formValidate"
:rules="ruleValidate"
:label-width="80"
label-position="left"
>
<t-form-item label="救援人员" prop="rescue">
<t-select v-model="formValidate.rescue" placeholder="请选择">
<t-option v-for="(item, index) in rescuer" :key="index+'rescuer'" :value="item.ID">{{ item.NAME }}</t-option>
</t-select>
</t-form-item>
</t-form>
<div slot="footer">
<t-button @click="cancel">取消</t-button>
<t-button class="submit-button" @click="appointSubmit()">指派</t-button>
</div>
</t-modal>
</div>
</template>
<script>
import './orientation.scss'
import services from '../../conf/services'
import EventBus from '../../bus'
import { GIS_SEA_LAYER_URL, GIS_SEA_URL } from '../../constants'
export default {
filters: {
dateFormat(value) {
var year = value.getFullYear()
var month =
value.getMonth() >= 10 ? value.getMonth() : '0' + value.getMonth()
var day = value.getDate() >= 10 ? value.getDate() : '0' + value.getDate()
var hours =
value.getHours() >= 10 ? value.getHours() : '0' + value.getHours()
var minutes =
value.getMinutes() >= 10
? value.getMinutes()
: '0' + value.getMinutes()
var seconds =
value.getSeconds() >= 10
? value.getSeconds()
: '0' + value.getSeconds()
return (
year +
'.' +
month +
'.' +
day +
' ' +
hours +
':' +
minutes +
':' +
seconds
)
}
},
data() {
return {
map: null,
tal: 32.465444444444444,
switch1: true,
pointsarr: null,
markTypes: [],
toolTypes: [],
aggregatedMapAreaList: {
mapAreas: [], // 围栏集合
coreEntitys: [] // 聚合设备集合
},
personStatistics: {
all: 0,
offLine: 0,
outLine: 0,
sos: 0,
normal: 0
},
polylinearr:
'122.0352 32.4444,122.0372 32.4444,122.0400 32.4366,122.2922 32.4233',
popup: null,
shadow: false,
dataList: [
],
nowDate: new Date(),
modal: false,
trackModal: false,
trackSearch: '',
trackTimeList: ['-10min', '-1h', '本日', '自定义'],
trackQueryCondition: {
currentIndex: 0
},
trackMap: null,
trackPath: null,
rangeDate: '',
rescueModal: false,
formValidate: {
rescue: ''
},
ruleValidate: {
rescue: [
{
required: true,
message: '救援人员不能为空',
trigger: 'blur',
validator(rule, value, callback) {
console.log(value)
if (!value) {
callback(rule.message)
} else {
callback()
}
}
}
]
},
layer: {
areaLayer: new Ai.FeatureGroup(),
equipmentLayer: new Ai.FeatureGroup(),
personLayer: new Ai.FeatureGroup()
},
mapShow: {
dzwl: true,
zyqy: true,
fenji: true,
chuanbo: true,
shengyazhan: true,
sos: true,
offLine: true,
outLine: true,
normal: true
},
personList: [],
rescuer: [],
appointAlarmId: '',
trackPerson: '',
orgId: ''
}
},
mounted() {
// this.getGisToken().then(() => { // 获取gistoken后加载地图
// })
this.getTagType().then(() => {
this.getToolType().then(() => {
this.initMap()
this.initTrackMap()
this.initStatusCount()
})
})
setInterval(() => { // 当前时间
this.nowDate = new Date()
}, 1000)
EventBus.$on('person', (msg) => { // 获取镜屏推送消息
msg = JSON.parse(msg)
console.log(msg)
this.personStatistics = msg.data.countMap
if (msg.data.aggregatedMapAreaList.length === 1 && msg.data.unaggregatedEntityPositionList.length === 0){
this.removeUnaggregated(msg.data.currentEntityPosition)
}
if (msg.data.aggregatedMapAreaList) {
this.changeLocation(msg.data.aggregatedMapAreaList)
}
if (msg.data.unaggregatedEntityPositionList) {
this.changeUnaggregated(msg.data.unaggregatedEntityPositionList)
}
})
EventBus.$on('ship', (msg) => { // 获取镜屏推送消息
console.log(msg)
this.changeShip(msg)
})
},
methods: {
// async getGisToken() { // 获取GIS token并存入store
// await this.$test
// .post(services.mapTag.GET_MAP_PARAM, '')
// .then((res) => {
// this.$store.commit('setGisToken', res.data.ak)
// this.$store.commit('setMapParam', {center: [res.data.latitude, res.data.longitude], zoom: res.data.scale})
// })
// .catch((res) => {
// // 请求失败处理...
// })
// },
async getTagType() {
await this.$test
.post(services.mapTag.MAP_TAG_TYPE, {})
.then((res) => {
// 请求成功处理...
this.markTypes = res.data
this.markTypes.forEach(e => {
e.show = true
})
})
.catch((res) => {
// 请求失败处理...
})
},
async getToolType() {
await this.$test.post(services.equipment.EQUIPMENT_TYPE, {}
).then(res => {
// 请求成功处理...
this.toolTypes = res.data
this.toolTypes.forEach(e => {
e.show = true
})
}).catch(res => {
// 请求失败处理...
})
},
initMap() { // 加载主屏地图
if (this.map != null && this.map != '') {
this.map.remove()
}
this.map = new Ai.Map('div1', {
ak: this.$store.getters.getGisToken,
center: this.$store.getters.getMapParam.center,
zoom: this.$store.getters.getMapParam.zoom
})
var maplayer = Ai.TileLayer(GIS_SEA_LAYER_URL)
this.map.addLayer(maplayer)
var la = Ai.WMTSLayer(
GIS_SEA_URL,
{ opacity: 0.5 }
)
this.map.addLayer(la)
Ai.Scale({ position: 'bottomright' }).addTo(this.map)
Ai.Zoom({ type: 'small' }).addTo(this.map)
this.$test.post(services.organization.INIT_LOCATION_DETAILS, {}
).then(res => {
// 请求成功处理...
this.loadUnaggregated(res.data.unaggregatedEntityPositionList)
res.data.aggregatedMapAreaList.forEach(e => {
if (e.mapAreaContent) {
this.aggregatedMapAreaList.mapAreas.push(e)
} else {
this.aggregatedMapAreaList.coreEntitys.push(e)
}
})
this.map.on('popupclose', this.popClose)
this.map.on('popupopen', this.popOpen)
this.loadMapArea()
this.loadCoreEntity()
}).catch(res => {
// 请求失败处理...
})
},
loadCoreEntity() {
this.map.addLayer(this.layer.equipmentLayer)
this.aggregatedMapAreaList.coreEntitys.forEach(e => {
if (e.latitude) {
var url = ''
var businessTypeName = ''
this.toolTypes.forEach(t => {
if (e.coreEntityType == t.resourceToolType) {
url = t.iconUrl
businessTypeName = t.name
}
})
var coreEntity = Ai.Point([e.latitude, e.longitude], {
icon: Ai.Icon({
// 设置图标URL路径
iconUrl: url,
// 设置图标大小
iconSize: [20, 20],
// 设置点对象和图标的相对偏移量
iconAnchor: [100, 100]
})
})
coreEntity.setAttributes({'elementId': e.coreEntityId, 'resourceToolType': e.coreEntityType})
this.layer.equipmentLayer.addLayer(coreEntity)
if (e.employeeCount > 0) {
var classStr = this.getClassByStatus(e.locationStatus)
var point = Ai.Point([e.latitude, e.longitude], {
icon: Ai.DivIcon({
html: '<div class="' + classStr + '">' + e.employeeCount + '人</div>',
className: 'person-count',
// 设置图标大小
// iconSize: [20, 20],
// 设置点对象和图标的相对偏移量
iconAnchor: [15, 50]
})
})
this.map.addLayer(point)
this.getPopup(point, e.ebcEntityPositionList, businessTypeName, e.mapAreaName, [0, -40])
coreEntity.point = point
}
}
})
},
loadMapArea() {
this.map.addLayer(this.layer.areaLayer)
this.aggregatedMapAreaList.mapAreas.forEach(e => {
var coverWktStr = e.mapAreaContent
var coverLayer = Ai.Polygon(coverWktStr, {color: e.areaColor, opacity: 1.0, weight: 1.2})
coverLayer.setAttributes({'elementId': e.mapAreaId, 'mapAreaBusinessType': e.businessType})
this.layer.areaLayer.addLayer(coverLayer)
if (e.ebcEntityPositionList.length > 0) {
var la = coverLayer.getCenter()
var classStr = this.getClassByStatus(e.locationStatus)
var point = Ai.Point(la, {
icon: Ai.DivIcon({
html: '<div class="' + classStr + '">' + e.ebcEntityPositionList.length + '人</div>',
className: 'person-count',
// 设置图标大小
// iconSize: [20, 20],
// 设置点对象和图标的相对偏移量
iconAnchor: [15, 15]
})
})
this.map.addLayer(point)
coverLayer.point = point
var businessTypeName
this.markTypes.forEach(m => {
if (m.mapAreaBusinessType == e.businessType) {
businessTypeName = m.name
}
})
this.getPopup(point, e.ebcEntityPositionList, businessTypeName, e.mapAreaName, [0, -10])
}
})
},
switchChange(status) {
if (status) {
this.layer.areaLayer.eachLayer((la) => {
if (la.point) {
la.point.popup.openOn(this.map)
}
})
this.layer.equipmentLayer.eachLayer((la) => {
if (la.point) {
la.point.popup.openOn(this.map)
}
})
this.layer.personLayer.eachLayer((la) => {
if (la.popup) {
la.popup.openOn(this.map)
}
})
} else {
this.layer.areaLayer.eachLayer((la) => {
if (la.point) {
this.map.closePopup(la.point.popup)
}
})
this.layer.equipmentLayer.eachLayer((la) => {
if (la.point) {
this.map.closePopup(la.point.popup)
}
})
this.layer.personLayer.eachLayer((la) => {
if (la.popup) {
this.map.closePopup(la.popup)
}
})
}
},
changeLocation(msg) {
msg.forEach(e => {
if (e.mapAreaContent) {
this.layer.areaLayer.eachLayer((la) => {
if (e.mapAreaId == la.getAttributes().elementId) {
if (la.point) {
this.map.closePopup(la.point.popup)
la.point.popup.remove()
this.map.removeLayer(la.point)
}
if (e.ebcEntityPositionList.length > 0) {
var classStr = this.getClassByStatus(e.locationStatus)
var point = Ai.Point(la.getCenter(), {
icon: Ai.DivIcon({
html: '<div class="' + classStr + '">' + e.ebcEntityPositionList.length + '人</div>',
className: 'person-count',
// 设置图标大小
// iconSize: [20, 20],
// 设置点对象和图标的相对偏移量
iconAnchor: [15, 15]
})
})
this.map.addLayer(point)
la.point = point
var businessTypeName
this.markTypes.forEach(m => {
if (m.mapAreaBusinessType == e.businessType) {
businessTypeName = m.name
}
})
this.getPopup(point, e.ebcEntityPositionList, businessTypeName, e.mapAreaName, [0, -10])
}
}
})
} else {
this.layer.equipmentLayer.eachLayer((la) => {
if (e.coreEntityId == la.getAttributes().elementId) {
if (la.point) {
this.map.closePopup(la.point.popup)
la.point.popup.remove()
this.map.removeLayer(la.point)
}
console.log(la.getAttributes().elementId)
la.setLatLng([e.latitude, e.longitude])
if (e.ebcEntityPositionList.length > 0) {
var classStr = this.getClassByStatus(e.locationStatus)
var point = Ai.Point([e.latitude, e.longitude], {
icon: Ai.DivIcon({
html: '<div class="' + classStr + '">' + e.employeeCount + '人</div>',
className: 'person-count',
// 设置图标大小
// iconSize: [20, 20],
// 设置点对象和图标的相对偏移量
iconAnchor: [15, 50]
})
})
this.map.addLayer(point)
var businessTypeName = '设备'
this.toolTypes.forEach(t => {
if (e.coreEntityType == t.resourceToolType) {
businessTypeName = t.name
}
})
this.getPopup(point, e.ebcEntityPositionList, businessTypeName, e.mapAreaName, [0, -40])
la.point = point
}
}
console.log('..............')
})
}
})
// this.loadMapArea()
// this.loadCoreEntity()
},
getPopup(point, positionList, type, name, offset) {
// if (point.popup) {
// point.popup.remove()
// point.popup = null
// }
var maxWidth = 100
if (type) {
maxWidth = 300
}
point.popup = Ai.Popup({
maxWidth: maxWidth,
minWidth: 100,
offset: offset,
autoClose: false,
autoPan: false,
closeButton: true
})
var content = '<div class="tips-item">'
if (type) {
content += '<div class="top"><div><b>' + type + '</b></div><div>' + name + '</div></div>'
content += '<div class="container">'
positionList.forEach(e => {
content +=
'<div class="' + this.getClassByStatus(e.locationStatus) + '">' + e.name + '</div>'
})
content += '</div></div>'
} else {
content += '<div class="container1">'
positionList.forEach(e => {
content +=
'<div class="' + this.getClassByStatus(e.locationStatus) + '">' + e.name + '</div>'
})
content += '</div></div>'
}
// 设置弹出框弹出位置
point.popup.setLatLng(point.getLatLng())
// 设置弹出框弹出内容
point.popup.setContent(content)
if (this.switch1) {
point.popup.openOn(this.map)
} else {
this.popClose(point.popup)
}
// point.popup = popup
point.on('click', (e) => {
if (point.popup.openo) {
this.map.closePopup(point.popup)
} else {
point.popup.openOn(this.map)
}
})
point.popup.openo = true
// return point.popup
},
popClose(e) {
e.popup.openo = false
},
popOpen(e) {
e.popup.openo = true
},
loadUnaggregated(dataList) { // 加载不聚合的人
this.map.addLayer(this.layer.personLayer)
dataList.forEach(element => {
var classStr = this.getClassByStatus(element.locationStatus)
var point = Ai.Point([element.latitude, element.longitude], {
icon: Ai.DivIcon({
html: '<div class="' + classStr + '">1人</div>',
className: 'person-count',
// 设置图标大小
// iconSize: [20, 20],
// 设置点对象和图标的相对偏移量
iconAnchor: [15, 15]
})
})
point.setAttributes({'elementId': element.entityId})
this.layer.personLayer.addLayer(point)
// this.map.addLayer(point)
this.getPopup(point, [element], '', '', [0, -10])
})
// this.map.setViewPort([points])
},
changeUnaggregated(dataList) { // 修改不聚合的人
dataList.forEach(element => {
var is = true
this.layer.personLayer.eachLayer((la) => {
if (element.entityId == la.getAttributes().elementId) {
is = false
this.map.closePopup(la.popup)
la.popup.remove()
console.log('修改' + element.name)
la.setLatLng([element.latitude, element.longitude])
var classStr = this.getClassByStatus(element.locationStatus)
var icon = Ai.DivIcon({
html: '<div class="' + classStr + '">1人</div>',
className: 'person-count',
// 设置图标大小
// iconSize: [20, 20],
// 设置点对象和图标的相对偏移量
iconAnchor: [15, 15]
})
la.setIcon(icon)
// point.setAttributes({'elementId': element.entityId})
// this.layer.personLayer.addLayer(point)
// this.map.addLayer(point)
this.getPopup(la, [element], '', '', [0, -10])
}
})
if (is) {
console.log('新增' + element.name)
var classStr = this.getClassByStatus(element.locationStatus)
var point = Ai.Point([element.latitude, element.longitude], {
icon: Ai.DivIcon({
html: '<div class="' + classStr + '">1人</div>',
className: 'person-count',
// 设置图标大小
// iconSize: [20, 20],
// 设置点对象和图标的相对偏移量
iconAnchor: [15, 15]
})
})
point.setAttributes({'elementId': element.entityId})
this.layer.personLayer.addLayer(point)
// this.map.addLayer(point)
this.getPopup(point, [element], '', '', [0, -10])
}
})
// this.map.setViewPort([points])
},
removeUnaggregated(po) { // 删除不聚合的人
this.layer.personLayer.eachLayer((la) => {
var e = undefined;
if (po.entityId == la.getAttributes().elementId) {
console.log('删除' + po.name)
this.map.closePopup(la.popup)
la.popup.remove()
e = la
}
if (e) {
this.map.removeLayer(e)
this.layer.personLayer.removeLayer(e)
}
})
},
getClassByStatus(status) {
switch (status) {
case '060': // 救援人员 ------ 黄色
return 'outline'
break
case '050': // 自动告警 ------ 红色
return 'sso'
break
case '040': // 手动告警 ------ 红色
return 'sos'
break
case '030': // 离线 ------ 灰色
return 'offline'
break
case '020': // 进入了禁入区域 ------ 黄色
return 'outline'
break
case '010': // 在限制区域超时 ------ 黄色
return 'outline'
break
case '000': // 正常 ------ 绿色
return 'normal'
break
case '015': // 进入限制区域（尚未超时） ------ 绿色
return 'normal'
break
default:
return 'normal'
}
},
loadAggregated(dataList) {
},
showOrHide(layer, item) { // 地图设备人员围栏显示和隐藏
item.show = !item.show
layer.eachLayer((e) => {
if ((e.getAttributes().resourceToolType == item.resourceToolType && item.resourceToolType != undefined) || (e.getAttributes().mapAreaBusinessType == item.mapAreaBusinessType && item.mapAreaBusinessType != undefined)) {
if (this.map.hasLayer(e)) {
this.map.removeLayer(e)
if (e.point) {
this.map.removeLayer(e.point)
if (e.point.popup) {
this.map.closePopup(e.point.popup)
}
}
} else {
this.map.addLayer(e)
if (e.point) {
this.map.addLayer(e.point)
if (e.point.popup) {
e.point.popup.openOn(this.map)
}
}
}
}
})
},
changeTrackTime(index) { // 速度选择
this.trackQueryCondition.currentIndex = index
},
initTrackMap() { // 加载轨迹地图
if (this.trackMap != null && this.trackMap != '') {
this.trackMap.remove()
}
this.trackMap = new Ai.Map('track-map', {
ak: this.$store.getters.getGisToken,
center: [39.915599, 122.406568]
})
var maplayer = Ai.TileLayer(GIS_SEA_LAYER_URL)
var la = Ai.WMTSLayer(GIS_SEA_URL, {opacity: 0.5})
this.trackMap.addLayer(maplayer)
this.trackMap.addLayer(la)
Ai.Scale({position: 'bottomright'}).addTo(this.trackMap)
Ai.Zoom({type: 'small'}).addTo(this.trackMap)
this.loadBindDevicePerson()
this.loadNotBindEquipment()
},
loadBindDevicePerson() {
this.$test
.post(services.organization.BIND_DEVICE, {})
.then((res) => {
console.log(res)
this.personList = res.data
})
.catch((res) => {
// 请求失败处理...
})
},
initStatusCount() {
this.$test
.post(services.organization.INIT_STATUS_COUNT, {})
.then((res) => {
this.personStatistics = res.data
})
.catch((res) => {
// 请求失败处理...
})
},
loadNotBindEquipment() {
this.$test
.post(services.organization.EQUIPMENT_NOT_BIND, {})
.then((res) => {
console.log(res)
res.data.forEach(e => {
var url = ''
this.toolTypes.forEach(t => {
if (e.resourceToolType == t.resourceToolType) {
url = t.iconUrl
}
})
var point = Ai.Point([e.latitude, e.longitude], {
icon: Ai.Icon({
// 设置图标URL路径
iconUrl: url,
// 设置图标大小
iconSize: [20, 20],
// 设置点对象和图标的相对偏移量
iconAnchor: [0, 0]
})
})
this.trackMap.addLayer(point)
})
})
.catch((res) => {
// 请求失败处理...
})
},
onChangeDate() { // 轨迹时间选择
},
toExport() { // 轨迹导出
},
close(item) { // 人员报警关闭
this.$Confirm.confirm({
title: '确认要关闭张三落水报警吗？',
content: '关闭后将不再进行报警显示',
ok: () => {
console.log(item.alarmLogId)
var params = new FormData()
params.append('data', JSON.stringify({
alarmLogId: item.alarmLogId
}))
this.$test
.post(services.rescue.CLOSE_RESCUE, params)
.then((res) => {
console.log(res.data.result)
if (res.data.result) {
this.layer.personLayer.eachLayer(layer => {
if (layer.getAttributes().deviceId === item.deviceId) {
item.locationStatus = '0'
this.popupContent(item, layer)
}
})
}
})
.catch((res) => {
})
},
cancel: () => {
console.log('点击了取消')
}
})
},
appoint(item) { // 打开指派Modal
console.log(item)
this.$test
.post(services.rescue.RESCUER_LIST, '')
.then((res) => {
this.rescueModal = true
console.log(res)
this.appointAlarmId = item.alarmLogId
this.rescuer = res.data.dataList
})
.catch((res) => {
})
},
cancel() {
this.rescueModal = false
},
appointSubmit() { // 指派
console.log(this.formValidate.rescue)
this.$refs['formValidate'].validate(valid => {
console.log(valid)
if (valid) {
var params = new FormData()
params.append('data', JSON.stringify({
alarmLogId: this.appointAlarmId,
rescuersId: this.formValidate.rescue
}))
this.$test
.post(services.rescue.ASSIGN_RESCUER, params)
.then((res) => {
if (res.data.result) {
this.$Message.success('指派成功！')
this.rescueModal = false
} else {
this.$Message.danger('指派失败！')
this.rescueModal = false
}
})
.catch((res) => {
})
}
})
},
personTrack(item) {
console.log(item)
console.log(this.trackMap.hasLayer(this.trackPath))
if (this.trackMap.hasLayer(this.trackPath)) {
this.trackMap.removeLayer(this.trackPath)
this.trackPath.hideTraceFrom(this.trackMap)
}
this.trackPerson = item
if (this.orgId !== item.orgId) {
this.$test
.post(services.organization.FENCE_BY_DEPARTMENT, {entityId: item.orgId})
.then((res) => {
this.orgId = item.orgId
console.log(res)
var la = new Ai.FeatureGroup()
res.data.forEach(e => {
var wktstr = e.mapAreaContent
debugger
var areaColor = ''
this.markTypes.forEach(m => {
if (m.mapAreaBusinessType == e.businessType) {
areaColor = m.color
}
})
var polygon = Ai.Polygon(wktstr, {color: areaColor, opacity: 1.0, weight: 1.2})
la.addLayer(polygon)
})
this.trackMap.addLayer(la)
})
.catch((res) => {
// 请求失败处理...
})
}
},
playback() {
console.log(this.trackQueryCondition.currentIndex)
var params = {}
if (this.trackQueryCondition.currentIndex === 3) {
if (!this.rangeDate) {
this.$Message.warning('请选择时间！')
return
} else {
params = {
entityId: this.trackPerson.workEmployeeId,
timeType: (this.trackQueryCondition.currentIndex + 1),
startTime: this.rangeDate[0],
endTime: this.rangeDate[1]
}
}
} else {
params = {
entityId: this.trackPerson.workEmployeeId,
timeType: (this.trackQueryCondition.currentIndex + 1)
}
}
console.log(this.rangeDate)
this.$test
.post(services.organization.EMPLOYEE_TRACE, params)
.then((res) => {
console.log(res)
var coords = res.data.coordArray
var defaultOptions = {
paused: false,
reverse: false,
delay: 800,
dashArray: [10, 20],
weight: 5,
opacity: 0.9,
color: '#0000ff',
pulseColor: '#FFFFFF',
playerTrack: true,
traceTitle: false,
traceIcon: new Ai.Icon({
iconUrl: '/static/images/normalworker.png',
iconSize: [16, 16],
iconAnchor: [8, 8]
}),
titleOptions: {
className: 'trace_title',
iconSize: null,
iconAnchor: [48, 57]
}
}
this.trackPath = new Ai.DynamicPath(coords, defaultOptions)
this.trackMap.addLayer(this.trackPath)
this.trackPath.playTraceOn(this.trackMap)
})
.catch((res) => {
// 请求失败处理...
})
}
}
}
</script>
|
