|
|
|
|
@ -179,11 +179,28 @@
|
|
|
|
|
<el-dialog :visible.sync="realMap" width="80%" @close="monitorUnitId = null">
|
|
|
|
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
|
|
|
|
<el-form-item label="名称">
|
|
|
|
|
<el-input v-model="formInline.name" placeholder="名称"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button type="primary" @click="searchMap">查询</el-button>
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="value"
|
|
|
|
|
multiple
|
|
|
|
|
filterable
|
|
|
|
|
remote
|
|
|
|
|
reserve-keyword
|
|
|
|
|
placeholder="请输入关键词"
|
|
|
|
|
@change="setMarker2"
|
|
|
|
|
:remote-method="searchMap1"
|
|
|
|
|
:loading="loading">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in options"
|
|
|
|
|
:key="item.value.deviceId"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value.deviceId">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
<!-- <el-input v-model="formInline.name" placeholder="名称"></el-input>-->
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- <el-form-item>-->
|
|
|
|
|
<!-- <el-button type="primary" @click="searchMap">查询</el-button>-->
|
|
|
|
|
<!-- </el-form-item>-->
|
|
|
|
|
</el-form>
|
|
|
|
|
|
|
|
|
|
<el-switch
|
|
|
|
|
@ -295,6 +312,9 @@ export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
containerPic,
|
|
|
|
|
value:[],
|
|
|
|
|
loading:false,
|
|
|
|
|
options:[],
|
|
|
|
|
isRail: true,
|
|
|
|
|
monitorUnitId: null,
|
|
|
|
|
equipmentInfoDialog: false,
|
|
|
|
|
@ -908,6 +928,54 @@ export default {
|
|
|
|
|
map.add(marker);
|
|
|
|
|
markers.push(marker)
|
|
|
|
|
},
|
|
|
|
|
setMarker1(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(-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;">
|
|
|
|
|
<path style="animation: ${(e.ifAlarm === '1') ? 'an1' : 'an2'} 2s ease-in-out infinite;" 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>`
|
|
|
|
|
});
|
|
|
|
|
marker.on('click', 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 = e
|
|
|
|
|
this.monitorUnitId = e.monitorUnitId
|
|
|
|
|
// this.$router.push({path: '/board/equipment', query: {monitorUnitId: e.monitorUnitId}})
|
|
|
|
|
});
|
|
|
|
|
map.add(marker);
|
|
|
|
|
markers.push(marker)
|
|
|
|
|
},
|
|
|
|
|
setMarker2(e) {
|
|
|
|
|
map.remove(markers)
|
|
|
|
|
map.remove(polygons)
|
|
|
|
|
map.remove(circles)
|
|
|
|
|
markers = []
|
|
|
|
|
e.forEach(v=>{
|
|
|
|
|
let arr = this.options.filter(r=>r.value.deviceId === v) || []
|
|
|
|
|
if(arr.length >0){
|
|
|
|
|
this.setMarker(arr[0].value)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
map.setFitView(markers)
|
|
|
|
|
},
|
|
|
|
|
getDeviceInfo() {
|
|
|
|
|
this.$router.push({path: '/board/equipment', query: {monitorUnitId: this.monitorUnitId}})
|
|
|
|
|
},
|
|
|
|
|
@ -957,11 +1025,32 @@ export default {
|
|
|
|
|
markers = []
|
|
|
|
|
data.forEach(e => {
|
|
|
|
|
if (e.latitude && e.longitude) {
|
|
|
|
|
this.setMarker(e)
|
|
|
|
|
this.setMarker1(e)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
map.setFitView(markers)
|
|
|
|
|
},
|
|
|
|
|
async searchMap1(name) {
|
|
|
|
|
this.value = []
|
|
|
|
|
map.remove(markers)
|
|
|
|
|
map.remove(polygons)
|
|
|
|
|
map.remove(circles)
|
|
|
|
|
markers = []
|
|
|
|
|
this.loading = true;
|
|
|
|
|
const {data} = await selectDeviceByName({name:name})
|
|
|
|
|
this.loading = false;
|
|
|
|
|
let option = []
|
|
|
|
|
data.forEach(e => {
|
|
|
|
|
if (e.latitude && e.longitude) {
|
|
|
|
|
option.push({
|
|
|
|
|
label:e.deviceName,
|
|
|
|
|
value:e
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
console.log(option)
|
|
|
|
|
this.options = option
|
|
|
|
|
},
|
|
|
|
|
exTable() {
|
|
|
|
|
let query = {}
|
|
|
|
|
query.startTime = this.parseTime(this.exTableTime?.[0]?.getTime())
|
|
|
|
|
@ -1180,3 +1269,28 @@ export default {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<style>
|
|
|
|
|
|
|
|
|
|
@keyframes an1 {
|
|
|
|
|
0% {
|
|
|
|
|
fill:#3D93FD;
|
|
|
|
|
}
|
|
|
|
|
50% {
|
|
|
|
|
fill:#ffffff;
|
|
|
|
|
}
|
|
|
|
|
100% {
|
|
|
|
|
fill:#3D93FD;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@keyframes an2 {
|
|
|
|
|
0% {
|
|
|
|
|
fill:#ff0000;
|
|
|
|
|
}
|
|
|
|
|
50% {
|
|
|
|
|
fill:#ffffff;
|
|
|
|
|
}
|
|
|
|
|
100% {
|
|
|
|
|
fill:#ff0000;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
夜笙歌
5 months ago