|
|
|
@ -184,11 +184,11 @@
|
|
|
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
|
|
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
|
|
|
<el-form-item label="搜索">
|
|
|
|
<el-form-item label="搜索">
|
|
|
|
<el-select
|
|
|
|
<el-select
|
|
|
|
|
|
|
|
:reserve-keyword="true"
|
|
|
|
v-model="value"
|
|
|
|
v-model="value"
|
|
|
|
multiple
|
|
|
|
multiple
|
|
|
|
filterable
|
|
|
|
filterable
|
|
|
|
remote
|
|
|
|
remote
|
|
|
|
reserve-keyword
|
|
|
|
|
|
|
|
placeholder="请输入关键词"
|
|
|
|
placeholder="请输入关键词"
|
|
|
|
@change="setMarker2"
|
|
|
|
@change="setMarker2"
|
|
|
|
:remote-method="searchMap1"
|
|
|
|
:remote-method="searchMap1"
|
|
|
|
@ -253,7 +253,7 @@
|
|
|
|
{{ warInfo.alarmInfoType === '2' ? '监控单元报警' : '' }}
|
|
|
|
{{ warInfo.alarmInfoType === '2' ? '监控单元报警' : '' }}
|
|
|
|
{{ warInfo.alarmInfoType === '3' ? '离线报警' : '' }}
|
|
|
|
{{ warInfo.alarmInfoType === '3' ? '离线报警' : '' }}
|
|
|
|
{{ warInfo.alarmInfoType === '4' ? '电子围栏' : '' }}
|
|
|
|
{{ warInfo.alarmInfoType === '4' ? '电子围栏' : '' }}
|
|
|
|
<!-- {{ warInfo.alarmTypeName }}-->
|
|
|
|
<!-- {{ warInfo.alarmTypeName }}-->
|
|
|
|
</el-descriptions-item>
|
|
|
|
</el-descriptions-item>
|
|
|
|
<el-descriptions-item>
|
|
|
|
<el-descriptions-item>
|
|
|
|
<template slot="label">
|
|
|
|
<template slot="label">
|
|
|
|
@ -581,9 +581,9 @@ export default {
|
|
|
|
this.setChart2()
|
|
|
|
this.setChart2()
|
|
|
|
this.setAllNums()
|
|
|
|
this.setAllNums()
|
|
|
|
this.setDeviceOperations()
|
|
|
|
this.setDeviceOperations()
|
|
|
|
setInterval(()=>{
|
|
|
|
setInterval(() => {
|
|
|
|
this.setTable3()
|
|
|
|
this.setTable3()
|
|
|
|
},5000)
|
|
|
|
}, 5000)
|
|
|
|
|
|
|
|
|
|
|
|
// let data = await axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${this.code}_full.json`)
|
|
|
|
// let data = await axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${this.code}_full.json`)
|
|
|
|
// let data = await axios.get(`http://124.223.15.102:3333/componentLib/getMap?id=${this.code}`)
|
|
|
|
// let data = await axios.get(`http://124.223.15.102:3333/componentLib/getMap?id=${this.code}`)
|
|
|
|
@ -672,7 +672,8 @@ export default {
|
|
|
|
})
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
async setDeviceOperations() {
|
|
|
|
async setDeviceOperations() {
|
|
|
|
let {data: data} = await getDeviceOperations()
|
|
|
|
// let {data: data} = await getDeviceOperations(this.$store.getters.tenantId)
|
|
|
|
|
|
|
|
let {data: data} = await getDeviceOperations(0)
|
|
|
|
let onlineDevicesTrend = data["onlineDevicesTrend"];
|
|
|
|
let onlineDevicesTrend = data["onlineDevicesTrend"];
|
|
|
|
let sortArr = Object.keys(onlineDevicesTrend)
|
|
|
|
let sortArr = Object.keys(onlineDevicesTrend)
|
|
|
|
sortArr = sortArr.sort((a, b) => {
|
|
|
|
sortArr = sortArr.sort((a, b) => {
|
|
|
|
@ -1028,7 +1029,13 @@ export default {
|
|
|
|
const data = await getDeviceByAreaId(this.$store.getters.tenantId)
|
|
|
|
const data = await getDeviceByAreaId(this.$store.getters.tenantId)
|
|
|
|
this.markerData = data.data.map(e => e.devicesList).flat(1)
|
|
|
|
this.markerData = data.data.map(e => e.devicesList).flat(1)
|
|
|
|
data.data.map(e => e.devicesList).flat(1).forEach(e => {
|
|
|
|
data.data.map(e => e.devicesList).flat(1).forEach(e => {
|
|
|
|
this.setMarker(e)
|
|
|
|
if (e.latitude && e.longitude) {
|
|
|
|
|
|
|
|
if (e.ifAlarm !== '1') {
|
|
|
|
|
|
|
|
this.setMarker3(e)
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
this.setMarker(e)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
@ -1041,25 +1048,27 @@ export default {
|
|
|
|
title: `信息\n经度：${e.longitude}\n纬度：${e.latitude}\n名称：${e.deviceName}\n`,
|
|
|
|
title: `信息\n经度：${e.longitude}\n纬度：${e.latitude}\n名称：${e.deviceName}\n`,
|
|
|
|
offset: new AMap.Pixel(-15, -30),
|
|
|
|
offset: new AMap.Pixel(-15, -30),
|
|
|
|
content: `<div> <svg t="1718261114618" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="4305" style="width: 30px;height: 30px;">
|
|
|
|
content: `<div> <svg t="1718261114618" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="4305" style="width: 30px;height: 30px;">
|
|
|
|
<path fill="${(e.ifAlarm === '1') ? '#3D93FD' : '#ff0000'}" d="M512 64.5c-180.5 0-326.9 146.4-326.9 326.9 0 63.3 18 122.3 49.2 172.4 1.1 2 2.1 4 3.2 5.9 34.9 58.2 113.9 128.8 165.5 194.5 66.3 84.4 93.2 158 93.2 158 1.6 1.4 13.1 35.6 15.1 35.8 2.5 0.2 12.6-34 14.5-35.8 0 0 22-69.2 83.7-146.6 56-70.1 142.8-145.7 177-206 0.9-1.6 1.8-3.3 2.6-5 31.5-50.2 49.7-109.6 49.7-173.3 0.1-180.5-146.3-326.8-326.8-326.8z" p-id="4306">
|
|
|
|
<path fill="${(e.ifAlarm !== '1') ? '#3D93FD' : '#ff0000'}" d="M512 64.5c-180.5 0-326.9 146.4-326.9 326.9 0 63.3 18 122.3 49.2 172.4 1.1 2 2.1 4 3.2 5.9 34.9 58.2 113.9 128.8 165.5 194.5 66.3 84.4 93.2 158 93.2 158 1.6 1.4 13.1 35.6 15.1 35.8 2.5 0.2 12.6-34 14.5-35.8 0 0 22-69.2 83.7-146.6 56-70.1 142.8-145.7 177-206 0.9-1.6 1.8-3.3 2.6-5 31.5-50.2 49.7-109.6 49.7-173.3 0.1-180.5-146.3-326.8-326.8-326.8z" p-id="4306">
|
|
|
|
</path></svg></div>`
|
|
|
|
</path></svg></div>`
|
|
|
|
});
|
|
|
|
});
|
|
|
|
marker.on('rightclick', async () => {
|
|
|
|
marker.on('rightclick', async () => {
|
|
|
|
// if (markerIds.includes(e.deviceId)) {
|
|
|
|
if(polygons.length>0||circles.length>0){
|
|
|
|
// return
|
|
|
|
polygons = []
|
|
|
|
// } else {
|
|
|
|
circles = []
|
|
|
|
// markerIds.push(e.deviceId)
|
|
|
|
map.remove(polygons)
|
|
|
|
// }
|
|
|
|
map.remove(circles)
|
|
|
|
const {data} = await selectMonitorElectronic(e.deviceId)
|
|
|
|
}else{
|
|
|
|
data.map(e => e.hwFenceAreaList).flat(1).forEach(e => {
|
|
|
|
const {data} = await selectMonitorElectronic(e.deviceId)
|
|
|
|
if (e.areaShapeFlag === '1') {
|
|
|
|
data.map(e => e.hwFenceAreaList).flat(1).forEach(e => {
|
|
|
|
this.setPolygon(e.areaRange.split('_').map(e => e.split(',').map(v => parseFloat(v))))
|
|
|
|
if (e.areaShapeFlag === '1') {
|
|
|
|
}
|
|
|
|
this.setPolygon(e.areaRange.split('_').map(e => e.split(',').map(v => parseFloat(v))))
|
|
|
|
if (e.areaShapeFlag === '2') {
|
|
|
|
}
|
|
|
|
let arr = e.areaRange.split(',')
|
|
|
|
if (e.areaShapeFlag === '2') {
|
|
|
|
this.setCircle([arr[0], arr[1]], arr[2])
|
|
|
|
let arr = e.areaRange.split(',')
|
|
|
|
}
|
|
|
|
this.setCircle([arr[0], arr[1]], arr[2])
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
marker.on('dblclick', () => {
|
|
|
|
marker.on('dblclick', () => {
|
|
|
|
this.equipmentInfoDialog = true
|
|
|
|
this.equipmentInfoDialog = true
|
|
|
|
@ -1118,19 +1127,60 @@ export default {
|
|
|
|
map.remove(markers)
|
|
|
|
map.remove(markers)
|
|
|
|
map.remove(polygons)
|
|
|
|
map.remove(polygons)
|
|
|
|
map.remove(circles)
|
|
|
|
map.remove(circles)
|
|
|
|
|
|
|
|
polygons = []
|
|
|
|
|
|
|
|
circles = []
|
|
|
|
markers = []
|
|
|
|
markers = []
|
|
|
|
e.forEach(v => {
|
|
|
|
e.forEach(v => {
|
|
|
|
console.log(v)
|
|
|
|
console.log(v)
|
|
|
|
console.log(this.options)
|
|
|
|
console.log(this.options)
|
|
|
|
let arr = this.options.filter(r => r.value.deviceId === v) || []
|
|
|
|
let arr = this.options.filter(r => r.value.deviceId === v) || []
|
|
|
|
if (arr.length > 0) {
|
|
|
|
if (arr.length > 0) {
|
|
|
|
this.setMarker1(arr[0].value)
|
|
|
|
if (arr[0].value.ifAlarm !== '1') {
|
|
|
|
|
|
|
|
this.setMarker1(arr[0].value)
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
this.setMarker(arr[0].value)
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
if(!bl){
|
|
|
|
if (!bl) {
|
|
|
|
map.setFitView(markers)
|
|
|
|
map.setFitView(markers)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
setMarker3(e) {
|
|
|
|
|
|
|
|
let marker = new AMap.Marker({
|
|
|
|
|
|
|
|
position: [e.longitude, e.latitude],
|
|
|
|
|
|
|
|
title: `信息\n经度：${e.longitude}\n纬度：${e.latitude}\n名称：${e.deviceName}\n`,
|
|
|
|
|
|
|
|
offset: new AMap.Pixel(-20, -40),
|
|
|
|
|
|
|
|
content: `<div>
|
|
|
|
|
|
|
|
<img src="${gif}" alt="" width=" 40px" >
|
|
|
|
|
|
|
|
</div>`
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
marker.on('rightclick', async () => {
|
|
|
|
|
|
|
|
// if (markerIds.includes(e.deviceId)) {
|
|
|
|
|
|
|
|
// return
|
|
|
|
|
|
|
|
// } else {
|
|
|
|
|
|
|
|
// markerIds.push(e.deviceId)
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
const {data} = await selectMonitorElectronic(e.deviceId)
|
|
|
|
|
|
|
|
data.map(e => e.hwFenceAreaList).flat(1).forEach(e => {
|
|
|
|
|
|
|
|
if (e.areaShapeFlag === '1') {
|
|
|
|
|
|
|
|
this.setPolygon(e.areaRange.split('_').map(e => e.split(',').map(v => parseFloat(v))))
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (e.areaShapeFlag === '2') {
|
|
|
|
|
|
|
|
let arr = e.areaRange.split(',')
|
|
|
|
|
|
|
|
this.setCircle([arr[0], arr[1]], arr[2])
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
marker.on('dblclick', () => {
|
|
|
|
|
|
|
|
this.equipmentInfoDialog = true
|
|
|
|
|
|
|
|
this.equipmentInfo = this.markerData.filter(v => v.monitorUnitId === e.monitorUnitId)
|
|
|
|
|
|
|
|
this.monitorUnitId = e.monitorUnitId
|
|
|
|
|
|
|
|
// this.$router.push({path: '/board/equipment', query: {monitorUnitId: e.monitorUnitId}})
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
map.add(marker);
|
|
|
|
|
|
|
|
markers.push(marker)
|
|
|
|
|
|
|
|
},
|
|
|
|
getDeviceInfo() {
|
|
|
|
getDeviceInfo() {
|
|
|
|
this.$router.push({path: '/board/equipment', query: {monitorUnitId: this.monitorUnitId}})
|
|
|
|
this.$router.push({path: '/board/equipment', query: {monitorUnitId: this.monitorUnitId}})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
@ -1168,7 +1218,7 @@ export default {
|
|
|
|
createMap() {
|
|
|
|
createMap() {
|
|
|
|
map = new AMap.Map('map', {
|
|
|
|
map = new AMap.Map('map', {
|
|
|
|
zoom: 11,
|
|
|
|
zoom: 11,
|
|
|
|
center: this.centerGeo,
|
|
|
|
center: this.centerGeo.length === 2 ? this.centerGeo : [116.23, 39.54],
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
async searchMap() {
|
|
|
|
async searchMap() {
|
|
|
|
@ -1176,33 +1226,53 @@ export default {
|
|
|
|
map.remove(markers)
|
|
|
|
map.remove(markers)
|
|
|
|
map.remove(polygons)
|
|
|
|
map.remove(polygons)
|
|
|
|
map.remove(circles)
|
|
|
|
map.remove(circles)
|
|
|
|
|
|
|
|
polygons = []
|
|
|
|
|
|
|
|
circles = []
|
|
|
|
markers = []
|
|
|
|
markers = []
|
|
|
|
this.markerData = data
|
|
|
|
this.markerData = data
|
|
|
|
console.log(data)
|
|
|
|
console.log(data)
|
|
|
|
data.forEach(e => {
|
|
|
|
data.forEach(e => {
|
|
|
|
if (e.latitude && e.longitude) {
|
|
|
|
if (e.latitude && e.longitude) {
|
|
|
|
this.setMarker1(e)
|
|
|
|
if (e.ifAlarm !== '1') {
|
|
|
|
|
|
|
|
this.setMarker1(e)
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
this.setMarker(e)
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
map.setFitView(markers)
|
|
|
|
map.setFitView(markers)
|
|
|
|
},
|
|
|
|
},
|
|
|
|
async searchMap1(name, e) {
|
|
|
|
async searchMap1(name, e) {
|
|
|
|
|
|
|
|
console.log(111)
|
|
|
|
// if(!e){
|
|
|
|
// if(!e){
|
|
|
|
if (time2) {
|
|
|
|
if (time2) {
|
|
|
|
clearInterval(time2)
|
|
|
|
clearInterval(time2)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
time2 = null
|
|
|
|
time2 = null
|
|
|
|
if(name.length === 0){
|
|
|
|
if (name.length === 0) {
|
|
|
|
|
|
|
|
|
|
|
|
const data = await getDeviceByAreaId(this.$store.getters.tenantId)
|
|
|
|
const data = await getDeviceByAreaId(this.$store.getters.tenantId)
|
|
|
|
this.markerData = data.data.map(e => e.devicesList).flat(1)
|
|
|
|
this.markerData = data.data.map(e => e.devicesList).flat(1)
|
|
|
|
data.data.map(e => e.devicesList).flat(1).forEach(e => {
|
|
|
|
data.data.map(e => e.devicesList).flat(1).forEach(e => {
|
|
|
|
this.setMarker(e)
|
|
|
|
if (e.ifAlarm !== '1') {
|
|
|
|
|
|
|
|
this.setMarker1(e)
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
this.setMarker(e)
|
|
|
|
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}else{
|
|
|
|
} else {
|
|
|
|
time2 = setInterval(async () => {
|
|
|
|
time2 = setInterval(async () => {
|
|
|
|
const {data} = await selectDeviceByName({name: name})
|
|
|
|
const {data} = await selectDeviceByName({name: name})
|
|
|
|
this.markerData = data
|
|
|
|
this.markerData = data
|
|
|
|
|
|
|
|
map.remove(markers)
|
|
|
|
|
|
|
|
markers = []
|
|
|
|
|
|
|
|
data.forEach(e => {
|
|
|
|
|
|
|
|
if (e.ifAlarm !== '1') {
|
|
|
|
|
|
|
|
this.setMarker1(e)
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
this.setMarker(e)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
}, 5000)
|
|
|
|
}, 5000)
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
const {data} = await selectDeviceByName({name: name})
|
|
|
|
const {data} = await selectDeviceByName({name: name})
|
|
|
|
@ -1210,6 +1280,8 @@ export default {
|
|
|
|
map.remove(markers)
|
|
|
|
map.remove(markers)
|
|
|
|
map.remove(polygons)
|
|
|
|
map.remove(polygons)
|
|
|
|
map.remove(circles)
|
|
|
|
map.remove(circles)
|
|
|
|
|
|
|
|
polygons = []
|
|
|
|
|
|
|
|
circles = []
|
|
|
|
markers = []
|
|
|
|
markers = []
|
|
|
|
this.loading = true;
|
|
|
|
this.loading = true;
|
|
|
|
this.loading = false;
|
|
|
|
this.loading = false;
|
|
|
|
@ -1220,6 +1292,11 @@ export default {
|
|
|
|
label: e.deviceName,
|
|
|
|
label: e.deviceName,
|
|
|
|
value: e
|
|
|
|
value: e
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
if (e.ifAlarm !== '1') {
|
|
|
|
|
|
|
|
this.setMarker1(e)
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
this.setMarker(e)
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
this.options = option
|
|
|
|
this.options = option
|
|
|
|
@ -1235,7 +1312,11 @@ export default {
|
|
|
|
if (this.isRail) {
|
|
|
|
if (this.isRail) {
|
|
|
|
const data = await getDeviceByAreaId(this.$store.getters.tenantId)
|
|
|
|
const data = await getDeviceByAreaId(this.$store.getters.tenantId)
|
|
|
|
data.data.map(e => e.devicesList).flat(1).forEach(e => {
|
|
|
|
data.data.map(e => e.devicesList).flat(1).forEach(e => {
|
|
|
|
this.setMarker(e)
|
|
|
|
if (e.ifAlarm !== '1') {
|
|
|
|
|
|
|
|
this.setMarker3(e)
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
this.setMarker(e)
|
|
|
|
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
map.remove(markers)
|
|
|
|
map.remove(markers)
|
|
|
|
|
夜笙歌
2 weeks ago