|
|
|
@ -4,8 +4,9 @@ |
|
|
|
<AMapContainer |
|
|
|
ref="AMapContainerRef" |
|
|
|
v-if="delayLoad" |
|
|
|
@update:isGisCompleted="(data) => { |
|
|
|
this.bindMap(data) |
|
|
|
@update:isGisCompleted=" |
|
|
|
(data) => { |
|
|
|
this.bindMap(data); |
|
|
|
} |
|
|
|
" |
|
|
|
style="z-index: 9" |
|
|
|
@ -90,6 +91,7 @@ export default { |
|
|
|
AMapContainer, |
|
|
|
}, |
|
|
|
mixins: [provideMixin], |
|
|
|
inject: ["provideData"], |
|
|
|
data() { |
|
|
|
return { |
|
|
|
active: [], |
|
|
|
@ -145,6 +147,9 @@ export default { |
|
|
|
if (!bool) return; |
|
|
|
}, |
|
|
|
}, |
|
|
|
// "provideData.detail"(newValue, oldValue) { |
|
|
|
// this.provideDetail = newValue; |
|
|
|
// }, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
handleClick(item) { |
|
|
|
@ -162,9 +167,9 @@ export default { |
|
|
|
}); |
|
|
|
} else if (item.key === "bar") { |
|
|
|
this.$refs.AMapContainerRef.showRoadConditions(findIndex === -1); |
|
|
|
} else if (item.key === 'level'){ |
|
|
|
} else if (item.key === "level") { |
|
|
|
this.getBoard(findIndex === -1); |
|
|
|
} else if (item.key === 'camera'){ |
|
|
|
} else if (item.key === "camera") { |
|
|
|
this.getCamera(findIndex === -1); |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -178,28 +183,36 @@ export default { |
|
|
|
params: { |
|
|
|
pileNum: this.detailData.stakeMark, |
|
|
|
}, |
|
|
|
}).then(result=>{ |
|
|
|
if (result.code != 200) return Message.error(`查询失败!${result.msg}`); |
|
|
|
}).then((result) => { |
|
|
|
if (result.code != 200) |
|
|
|
return Message.error(`查询失败!${result.msg}`); |
|
|
|
const list = [...result.data.downCamera, ...result.data.upCamera]; |
|
|
|
|
|
|
|
const icon = require(`@screen/images/layer/路测设备/摄像机_active.svg`); |
|
|
|
const icon_f = require(`@screen/images/layer/路测设备/摄像机_fault.svg`); |
|
|
|
list.forEach(e => { |
|
|
|
const p = new AMap.LngLat(parseFloat(e.longitude), parseFloat(e.latitude)); |
|
|
|
const m = this.addMarker(p,e.useState?icon:icon_f,e.useState,function(){ |
|
|
|
console.log(e,'-------------') |
|
|
|
list.forEach((e) => { |
|
|
|
const p = new AMap.LngLat( |
|
|
|
parseFloat(e.longitude), |
|
|
|
parseFloat(e.latitude) |
|
|
|
); |
|
|
|
const m = this.addMarker( |
|
|
|
p, |
|
|
|
e.useState ? icon : icon_f, |
|
|
|
e.useState, |
|
|
|
function () { |
|
|
|
if (e.useState === 1) { |
|
|
|
self.dialogDataCamera = e; |
|
|
|
self.dialogVisibleCamera = true; |
|
|
|
} else { |
|
|
|
self.$message.warning("设备未接入！！"); |
|
|
|
} |
|
|
|
}) |
|
|
|
this.markerCamera.push(m) |
|
|
|
} |
|
|
|
); |
|
|
|
this.markerCamera.push(m); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}) |
|
|
|
} else { |
|
|
|
this.markerCamera.forEach(e => { |
|
|
|
this.markerCamera.forEach((e) => { |
|
|
|
e.setMap(null); |
|
|
|
e = null; |
|
|
|
}); |
|
|
|
@ -214,30 +227,42 @@ export default { |
|
|
|
this.markerBoard = []; |
|
|
|
const fileData = new FormData(); // new formData对象 |
|
|
|
fileData.append("stakeMark", this.detailData.stakeMark); |
|
|
|
fileData.append("direction", this.detailData.direction ==='济南方向'?1:2); |
|
|
|
fileData.append( |
|
|
|
"direction", |
|
|
|
this.detailData.direction === "济南方向" ? 1 : 2 |
|
|
|
); |
|
|
|
request({ |
|
|
|
url: "/business/device/selectNearBoard", |
|
|
|
method: "post", |
|
|
|
data:fileData |
|
|
|
}).then(result=>{ |
|
|
|
if (result.code != 200) return Message.error(`查询失败!${result.msg}`); |
|
|
|
data: fileData, |
|
|
|
}).then((result) => { |
|
|
|
if (result.code != 200) |
|
|
|
return Message.error(`查询失败!${result.msg}`); |
|
|
|
const icon = require(`@screen/images/layer/路测设备/情报板_active.svg`); |
|
|
|
const icon_f = require(`@screen/images/layer/路测设备/情报板_fault.svg`); |
|
|
|
result.data.forEach(e => { |
|
|
|
const p = new AMap.LngLat(parseFloat(e.longitude), parseFloat(e.latitude)); |
|
|
|
const m = this.addMarker(p,e.useState?icon:icon_f,e.useState,function(){ |
|
|
|
result.data.forEach((e) => { |
|
|
|
const p = new AMap.LngLat( |
|
|
|
parseFloat(e.longitude), |
|
|
|
parseFloat(e.latitude) |
|
|
|
); |
|
|
|
const m = this.addMarker( |
|
|
|
p, |
|
|
|
e.useState ? icon : icon_f, |
|
|
|
e.useState, |
|
|
|
function () { |
|
|
|
if (e.useState === 1) { |
|
|
|
self.dialogData = e; |
|
|
|
self.dialogVisible = true; |
|
|
|
} else { |
|
|
|
self.$message.warning("设备未接入！"); |
|
|
|
} |
|
|
|
}) |
|
|
|
this.markerBoard.push(m) |
|
|
|
} |
|
|
|
); |
|
|
|
this.markerBoard.push(m); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}) |
|
|
|
} else { |
|
|
|
this.markerBoard.forEach(e => { |
|
|
|
this.markerBoard.forEach((e) => { |
|
|
|
e.setMap(null); |
|
|
|
e = null; |
|
|
|
}); |
|
|
|
@ -247,10 +272,12 @@ export default { |
|
|
|
this.dialogVisible = bool; |
|
|
|
}, |
|
|
|
getWeather() { |
|
|
|
getWeatherForecast(117.2, 36.65).then((res) => { |
|
|
|
getWeatherForecast( |
|
|
|
this.detailData.longitude, |
|
|
|
this.detailData.dimension |
|
|
|
).then((res) => { |
|
|
|
this.weatherData = |
|
|
|
res.data.weatherInTheAreaWhereTheIncidentOccurred.now; |
|
|
|
console.log("气象", res); |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 绑定地图事件 |
|
|
|
@ -264,14 +291,16 @@ export default { |
|
|
|
const { AMap, mapIns } = self.$refs.AMapContainerRef.getMapInstance(); |
|
|
|
const { longitude, dimension, eventName } = self.detailData; |
|
|
|
const icon = require(`@screen/images/layer/事件专题/${eventName}_active.svg`); |
|
|
|
const center = new AMap.LngLat(parseFloat(longitude), parseFloat(dimension)); |
|
|
|
const center = new AMap.LngLat( |
|
|
|
parseFloat(longitude), |
|
|
|
parseFloat(dimension) |
|
|
|
); |
|
|
|
self.addMarker(center, icon, 1); |
|
|
|
mapIns.setZoomAndCenter(12, center); |
|
|
|
// |
|
|
|
console.log(mapIns,AMap,'--------') |
|
|
|
console.log(self.detailData,'############'); |
|
|
|
console.log(mapIns, AMap, "--------"); |
|
|
|
console.log(self.detailData, "############"); |
|
|
|
}, 500); |
|
|
|
|
|
|
|
}, |
|
|
|
addMarker(position, icon, state, fn = null) { |
|
|
|
const { AMap, mapIns } = this.$refs.AMapContainerRef.getMapInstance(); |
|
|
|
@ -300,16 +329,16 @@ export default { |
|
|
|
> |
|
|
|
</div> |
|
|
|
`, |
|
|
|
anchor: 'bottom-center', |
|
|
|
anchor: "bottom-center", |
|
|
|
}); |
|
|
|
marker.on("click", (e) => { |
|
|
|
if (fn) { |
|
|
|
fn(e) |
|
|
|
fn(e); |
|
|
|
} |
|
|
|
}) |
|
|
|
}); |
|
|
|
mapIns.add(marker); |
|
|
|
return marker; |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.bindMap(); |
|
|
|
|
