|
|
|
@ -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" |
|
|
|
@ -19,7 +20,7 @@ |
|
|
|
@click="handleClick(item)" |
|
|
|
> |
|
|
|
<div |
|
|
|
v-if="['bar','level','camera'].indexOf(item.key) !== -1" |
|
|
|
v-if="['bar', 'level', 'camera'].indexOf(item.key) !== -1" |
|
|
|
class="label" |
|
|
|
slot="reference" |
|
|
|
:style="{ |
|
|
|
@ -90,6 +91,7 @@ export default { |
|
|
|
AMapContainer, |
|
|
|
}, |
|
|
|
mixins: [provideMixin], |
|
|
|
inject: ["provideData"], |
|
|
|
data() { |
|
|
|
return { |
|
|
|
active: [], |
|
|
|
@ -117,11 +119,11 @@ export default { |
|
|
|
], |
|
|
|
delayLoad: true, |
|
|
|
weatherData: {}, |
|
|
|
markerBoard:[], |
|
|
|
dialogVisible:false, |
|
|
|
markerBoard: [], |
|
|
|
dialogVisible: false, |
|
|
|
dialogData: null, |
|
|
|
markerCamera:[], |
|
|
|
dialogVisibleCamera:false, |
|
|
|
markerCamera: [], |
|
|
|
dialogVisibleCamera: false, |
|
|
|
dialogDataCamera: null, |
|
|
|
}; |
|
|
|
}, |
|
|
|
@ -145,6 +147,9 @@ export default { |
|
|
|
if (!bool) return; |
|
|
|
}, |
|
|
|
}, |
|
|
|
// "provideData.detail"(newValue, oldValue) { |
|
|
|
// this.provideDetail = newValue; |
|
|
|
// }, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
handleClick(item) { |
|
|
|
@ -162,14 +167,14 @@ 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); |
|
|
|
} |
|
|
|
}, |
|
|
|
getCamera(isShow){ |
|
|
|
if(isShow){ |
|
|
|
getCamera(isShow) { |
|
|
|
if (isShow) { |
|
|
|
const self = this; |
|
|
|
this.markerCamera = []; |
|
|
|
request({ |
|
|
|
@ -178,28 +183,36 @@ export default { |
|
|
|
params: { |
|
|
|
pileNum: this.detailData.stakeMark, |
|
|
|
}, |
|
|
|
}).then(result=>{ |
|
|
|
if (result.code != 200) return Message.error(`查询失败!${result.msg}`); |
|
|
|
const list = [...result.data.downCamera,...result.data.upCamera]; |
|
|
|
}).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,'-------------') |
|
|
|
if(e.useState === 1){ |
|
|
|
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; |
|
|
|
}); |
|
|
|
@ -208,36 +221,48 @@ export default { |
|
|
|
handledDialogCamera(bool) { |
|
|
|
this.dialogVisibleCamera = bool; |
|
|
|
}, |
|
|
|
getBoard(isShow){ |
|
|
|
if(isShow){ |
|
|
|
getBoard(isShow) { |
|
|
|
if (isShow) { |
|
|
|
const self = this; |
|
|
|
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(){ |
|
|
|
if(e.useState === 1){ |
|
|
|
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,41 +272,45 @@ 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); |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 绑定地图事件 |
|
|
|
bindMap(isLoaded){ |
|
|
|
if(!isLoaded){ |
|
|
|
bindMap(isLoaded) { |
|
|
|
if (!isLoaded) { |
|
|
|
return; |
|
|
|
} |
|
|
|
const self = this; |
|
|
|
setTimeout(() => { |
|
|
|
// 获取map接口 |
|
|
|
const {AMap,mapIns} = self.$refs.AMapContainerRef.getMapInstance(); |
|
|
|
const {longitude,dimension,eventName} = self.detailData; |
|
|
|
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)); |
|
|
|
self.addMarker(center,icon, 1); |
|
|
|
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(); |
|
|
|
addMarker(position, icon, state, fn = null) { |
|
|
|
const { AMap, mapIns } = this.$refs.AMapContainerRef.getMapInstance(); |
|
|
|
const nowBg = require(`@screen/images/mapBg/active.svg`); |
|
|
|
const nowBg_f = require(`@screen/images/mapBg/fault.svg`); |
|
|
|
var marker = new AMap.Marker({ |
|
|
|
position:position, |
|
|
|
position: position, |
|
|
|
content: ` |
|
|
|
<div style=" |
|
|
|
background-image: url(${state?nowBg:nowBg_f}); |
|
|
|
background-image: url(${state ? nowBg : nowBg_f}); |
|
|
|
background-size: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
width: 51px; |
|
|
|
@ -300,16 +329,16 @@ export default { |
|
|
|
> |
|
|
|
</div> |
|
|
|
`, |
|
|
|
anchor: 'bottom-center', |
|
|
|
anchor: "bottom-center", |
|
|
|
}); |
|
|
|
marker.on("click", (e) => { |
|
|
|
if(fn){ |
|
|
|
fn(e) |
|
|
|
if (fn) { |
|
|
|
fn(e); |
|
|
|
} |
|
|
|
}) |
|
|
|
}); |
|
|
|
mapIns.add(marker); |
|
|
|
return marker; |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.bindMap(); |
|
|
|
|
