feat：融合通信管理平台 bug
This commit is contained in:
parent
fd1f3470e9
commit
8b0ad42e49
BIN
god-ui/src/views/monitoringwarning/lookVideo/assets/jk.png
Normal file
BIN
god-ui/src/views/monitoringwarning/lookVideo/assets/jk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
god-ui/src/views/monitoringwarning/lookVideo/assets/warn.png
Normal file
BIN
god-ui/src/views/monitoringwarning/lookVideo/assets/warn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
188
god-ui/src/views/monitoringwarning/lookVideo/index.vue
Normal file
188
god-ui/src/views/monitoringwarning/lookVideo/index.vue
Normal file
@ -0,0 +1,188 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div id="middleMap"></div>
|
||||||
|
<div class="sl">
|
||||||
|
<div class="left">
|
||||||
|
<div class="sxt"></div>
|
||||||
|
<div>监控</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||||
|
window._AMapSecurityConfig = {
|
||||||
|
securityJsCode: "b6314ade5a42c3f3ac2284b6d4d89b1f",
|
||||||
|
};
|
||||||
|
import sp2 from './assets/20240325144727.mp4'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
map: null,
|
||||||
|
sp2
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initMap()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initMap() {
|
||||||
|
AMapLoader.load({
|
||||||
|
key: "e49669059fa36494531a82ed982f395c", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||||
|
version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||||
|
// plugins: ["AMap.AutoComplete", "AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||||
|
})
|
||||||
|
.then((AMap) => {
|
||||||
|
this.map = new AMap.Map("middleMap", {
|
||||||
|
zoom: 13, //级别
|
||||||
|
center: [106.45773,29.54098], //中心点坐标
|
||||||
|
mapStyle: "",
|
||||||
|
});
|
||||||
|
this.map.on("click", (e) => {
|
||||||
|
navigator.clipboard.writeText(
|
||||||
|
`[${e.lnglat.R.toString()}, ${e.lnglat.Q.toString()}],`
|
||||||
|
);
|
||||||
|
});
|
||||||
|
const marks = [
|
||||||
|
{
|
||||||
|
locaton: [106.46174288158418,29.53138123556404],
|
||||||
|
name: "重庆亿利宝汽车配件有限公司",
|
||||||
|
device: "AI摄像头-CAM90802",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
locaton: [106.45773188158418,29.54092123556404],
|
||||||
|
name: "重庆市沙坪坝区人民政府",
|
||||||
|
device: "AI摄像头-CAM90804",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const marks2 = [
|
||||||
|
{
|
||||||
|
locaton: [106.45413980158418,29.55100123556404],
|
||||||
|
name: "沙坪公园",
|
||||||
|
device: "AI摄像头-CAM90801",
|
||||||
|
address: "游客溺水",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
locaton: [106.48074381158418,29.54188923556404],
|
||||||
|
name: "森林实验小学",
|
||||||
|
device: "AI摄像头-CAM90801",
|
||||||
|
address: "校门口出现车不礼让行人现象",
|
||||||
|
src:this.sp2
|
||||||
|
},
|
||||||
|
];
|
||||||
|
marks.forEach((item, index) => {
|
||||||
|
this.addMapMarker(item.locaton, 'sxt2', { name: item.name, device: item.device })
|
||||||
|
});
|
||||||
|
marks2.forEach((item, index) => {
|
||||||
|
this.addMapMarker2(item.locaton, 'jb', { name: item.name, device: item.device,address: item.address})
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
console.log(e);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 添加图形点标记
|
||||||
|
addMapMarker(sourceData = [], type = "sxt", info = {}) {
|
||||||
|
const marker = new AMap.Marker({
|
||||||
|
position: new AMap.LngLat(sourceData[0], sourceData[1]),
|
||||||
|
offset: new AMap.Pixel(-30, -52),
|
||||||
|
icon: `/images/${type}.png`, // 添加 Icon 图标 URL
|
||||||
|
title: "",
|
||||||
|
});
|
||||||
|
this.map.add(marker);
|
||||||
|
marker.on("click", (e) => {
|
||||||
|
this.showInfoWindow(sourceData[0], sourceData[1], {
|
||||||
|
type: "#304156",
|
||||||
|
...info,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
addMapMarker2(sourceData = [], type = "jb", info = {}) {
|
||||||
|
const marker = new AMap.Marker({
|
||||||
|
position: new AMap.LngLat(sourceData[0], sourceData[1]),
|
||||||
|
offset: new AMap.Pixel(-30, -52),
|
||||||
|
icon: `/images/${type}.png`, // 添加 Icon 图标 URL
|
||||||
|
title: "",
|
||||||
|
});
|
||||||
|
this.map.add(marker);
|
||||||
|
marker.on("click", (e) => {
|
||||||
|
this.showInfoWindow2(sourceData[0], sourceData[1], {
|
||||||
|
type: "#304156",
|
||||||
|
...info,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 显示信息窗体
|
||||||
|
showInfoWindow(lng, lat, sourceInfo) {
|
||||||
|
let content = `
|
||||||
|
<div style="padding: 6px;background-color: #32b9ef;">
|
||||||
|
<div>
|
||||||
|
<div style="padding: 4px;fontweigth:500"><b>${sourceInfo.device}</b></div>
|
||||||
|
<div style="padding: 4px;margin:5px 0">${sourceInfo.name}</div>
|
||||||
|
<div style="padding: 4px;">正常运行</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
const infoWindow = new AMap.InfoWindow({
|
||||||
|
content,
|
||||||
|
anchor: "middle-left",
|
||||||
|
isCustom: true,
|
||||||
|
});
|
||||||
|
infoWindow.open(this.map, [lng, lat]);
|
||||||
|
},
|
||||||
|
// 显示信息窗体
|
||||||
|
showInfoWindow2(lng, lat, sourceInfo) {
|
||||||
|
let content = `
|
||||||
|
<div style="padding: 6px;background-color: #cce0f1;">
|
||||||
|
<div>
|
||||||
|
<div style="padding: 4px;margin:5px 0;color:red;"><b>${sourceInfo.address}</b></div>
|
||||||
|
<div style="padding: 4px;fontweigth:500"><b>${sourceInfo.device}</b></div>
|
||||||
|
<div style="padding: 4px;"><b>${sourceInfo.name}</b></div>
|
||||||
|
<video src="./assets/20240325144727.mp4" style="width:100%;height:100px;"></video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
const infoWindow = new AMap.InfoWindow({
|
||||||
|
content,
|
||||||
|
anchor: "middle-left",
|
||||||
|
isCustom: true,
|
||||||
|
});
|
||||||
|
infoWindow.open(this.map, [lng, lat]);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
#middleMap {
|
||||||
|
width: 100vw;
|
||||||
|
height: calc(100vh - 84px);
|
||||||
|
}
|
||||||
|
.box{
|
||||||
|
position: relative;
|
||||||
|
.sl{
|
||||||
|
width: 130px;
|
||||||
|
height: 70px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 3%;
|
||||||
|
right:3%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.left{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
.sxt{
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-image: url(./assets/jk.png);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
god-ui/src/views/monitoringwarning/screenVideo/assets/jk.png
Normal file
BIN
god-ui/src/views/monitoringwarning/screenVideo/assets/jk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
god-ui/src/views/monitoringwarning/screenVideo/assets/warn.png
Normal file
BIN
god-ui/src/views/monitoringwarning/screenVideo/assets/warn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
205
god-ui/src/views/monitoringwarning/screenVideo/index.vue
Normal file
205
god-ui/src/views/monitoringwarning/screenVideo/index.vue
Normal file
@ -0,0 +1,205 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div id="middleMap"></div>
|
||||||
|
<div class="sl">
|
||||||
|
<div class="left">
|
||||||
|
<div class="sxt"></div>
|
||||||
|
<div>监控</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="warn"></div>
|
||||||
|
<div>预警</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||||
|
window._AMapSecurityConfig = {
|
||||||
|
securityJsCode: "b6314ade5a42c3f3ac2284b6d4d89b1f",
|
||||||
|
};
|
||||||
|
import sp2 from './assets/20240325144727.mp4'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
map: null,
|
||||||
|
sp2
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initMap()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initMap() {
|
||||||
|
AMapLoader.load({
|
||||||
|
key: "e49669059fa36494531a82ed982f395c", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||||
|
version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||||
|
// plugins: ["AMap.AutoComplete", "AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||||
|
})
|
||||||
|
.then((AMap) => {
|
||||||
|
this.map = new AMap.Map("middleMap", {
|
||||||
|
zoom: 13, //级别
|
||||||
|
center: [106.45773,29.54098], //中心点坐标
|
||||||
|
mapStyle: "",
|
||||||
|
});
|
||||||
|
this.map.on("click", (e) => {
|
||||||
|
navigator.clipboard.writeText(
|
||||||
|
`[${e.lnglat.R.toString()}, ${e.lnglat.Q.toString()}],`
|
||||||
|
);
|
||||||
|
});
|
||||||
|
const marks = [
|
||||||
|
{
|
||||||
|
locaton: [106.46174288158418,29.53138123556404],
|
||||||
|
name: "重庆亿利宝汽车配件有限公司",
|
||||||
|
device: "AI摄像头-CAM90802",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
locaton: [106.45773188158418,29.54092123556404],
|
||||||
|
name: "重庆市沙坪坝区人民政府",
|
||||||
|
device: "AI摄像头-CAM90804",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const marks2 = [
|
||||||
|
{
|
||||||
|
locaton: [106.45413980158418,29.55100123556404],
|
||||||
|
name: "沙坪公园",
|
||||||
|
device: "AI摄像头-CAM90801",
|
||||||
|
address: "游客溺水",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
locaton: [106.48074381158418,29.54188923556404],
|
||||||
|
name: "森林实验小学",
|
||||||
|
device: "AI摄像头-CAM90801",
|
||||||
|
address: "校门口出现车不礼让行人现象",
|
||||||
|
src:this.sp2
|
||||||
|
},
|
||||||
|
];
|
||||||
|
marks.forEach((item, index) => {
|
||||||
|
this.addMapMarker(item.locaton, 'sxt2', { name: item.name, device: item.device })
|
||||||
|
});
|
||||||
|
marks2.forEach((item, index) => {
|
||||||
|
this.addMapMarker2(item.locaton, 'jb', { name: item.name, device: item.device,address: item.address})
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
console.log(e);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 添加图形点标记
|
||||||
|
addMapMarker(sourceData = [], type = "sxt", info = {}) {
|
||||||
|
const marker = new AMap.Marker({
|
||||||
|
position: new AMap.LngLat(sourceData[0], sourceData[1]),
|
||||||
|
offset: new AMap.Pixel(-30, -52),
|
||||||
|
icon: `/images/${type}.png`, // 添加 Icon 图标 URL
|
||||||
|
title: "",
|
||||||
|
});
|
||||||
|
this.map.add(marker);
|
||||||
|
marker.on("click", (e) => {
|
||||||
|
this.showInfoWindow(sourceData[0], sourceData[1], {
|
||||||
|
type: "#304156",
|
||||||
|
...info,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
addMapMarker2(sourceData = [], type = "jb", info = {}) {
|
||||||
|
const marker = new AMap.Marker({
|
||||||
|
position: new AMap.LngLat(sourceData[0], sourceData[1]),
|
||||||
|
offset: new AMap.Pixel(-30, -52),
|
||||||
|
icon: `/images/${type}.png`, // 添加 Icon 图标 URL
|
||||||
|
title: "",
|
||||||
|
});
|
||||||
|
this.map.add(marker);
|
||||||
|
marker.on("click", (e) => {
|
||||||
|
this.showInfoWindow2(sourceData[0], sourceData[1], {
|
||||||
|
type: "#304156",
|
||||||
|
...info,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 显示信息窗体
|
||||||
|
showInfoWindow(lng, lat, sourceInfo) {
|
||||||
|
let content = `
|
||||||
|
<div style="padding: 6px;background-color: #32b9ef;">
|
||||||
|
<div>
|
||||||
|
<div style="padding: 4px;fontweigth:500"><b>${sourceInfo.device}</b></div>
|
||||||
|
<div style="padding: 4px;margin:5px 0">${sourceInfo.name}</div>
|
||||||
|
<div style="padding: 4px;">正常运行</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
const infoWindow = new AMap.InfoWindow({
|
||||||
|
content,
|
||||||
|
anchor: "middle-left",
|
||||||
|
isCustom: true,
|
||||||
|
});
|
||||||
|
infoWindow.open(this.map, [lng, lat]);
|
||||||
|
},
|
||||||
|
// 显示信息窗体
|
||||||
|
showInfoWindow2(lng, lat, sourceInfo) {
|
||||||
|
let content = `
|
||||||
|
<div style="padding: 6px;background-color: #cce0f1;">
|
||||||
|
<div>
|
||||||
|
<div style="padding: 4px;margin:5px 0;color:red;"><b>${sourceInfo.address}</b></div>
|
||||||
|
<div style="padding: 4px;fontweigth:500"><b>${sourceInfo.device}</b></div>
|
||||||
|
<div style="padding: 4px;"><b>${sourceInfo.name}</b></div>
|
||||||
|
<video src="./assets/20240325144727.mp4" style="width:100%;height:100px;"></video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
const infoWindow = new AMap.InfoWindow({
|
||||||
|
content,
|
||||||
|
anchor: "middle-left",
|
||||||
|
isCustom: true,
|
||||||
|
});
|
||||||
|
infoWindow.open(this.map, [lng, lat]);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
#middleMap {
|
||||||
|
width: 100vw;
|
||||||
|
height: calc(100vh - 84px);
|
||||||
|
}
|
||||||
|
.box{
|
||||||
|
position: relative;
|
||||||
|
.sl{
|
||||||
|
width: 250px;
|
||||||
|
height: 70px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 3%;
|
||||||
|
right:3%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
.left{
|
||||||
|
width: 49%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
.sxt{
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-image: url(./assets/jk.png);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right{
|
||||||
|
width: 49%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
.warn{
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-image: url(./assets/warn.png);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
god-ui/src/views/rescue/fixedVideo/assets/img1.png
Normal file
BIN
god-ui/src/views/rescue/fixedVideo/assets/img1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 349 KiB |
BIN
god-ui/src/views/rescue/fixedVideo/assets/img2.jpeg
Normal file
BIN
god-ui/src/views/rescue/fixedVideo/assets/img2.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
BIN
god-ui/src/views/rescue/fixedVideo/assets/jk.png
Normal file
BIN
god-ui/src/views/rescue/fixedVideo/assets/jk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
god-ui/src/views/rescue/fixedVideo/assets/warn.png
Normal file
BIN
god-ui/src/views/rescue/fixedVideo/assets/warn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
208
god-ui/src/views/rescue/fixedVideo/index.vue
Normal file
208
god-ui/src/views/rescue/fixedVideo/index.vue
Normal file
@ -0,0 +1,208 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div id="middleMap"></div>
|
||||||
|
<div class="sl">
|
||||||
|
<div class="left">
|
||||||
|
<div class="sxt"></div>
|
||||||
|
<div>监控</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="warn"></div>
|
||||||
|
<div>预警</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||||
|
window._AMapSecurityConfig = {
|
||||||
|
securityJsCode: "b6314ade5a42c3f3ac2284b6d4d89b1f",
|
||||||
|
};
|
||||||
|
import img1 from './assets/img1.png'
|
||||||
|
import img2 from './assets/img2.jpeg'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
map: null,
|
||||||
|
img1,img2
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initMap()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initMap() {
|
||||||
|
AMapLoader.load({
|
||||||
|
key: "e49669059fa36494531a82ed982f395c", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||||
|
version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||||
|
// plugins: ["AMap.AutoComplete", "AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||||
|
})
|
||||||
|
.then((AMap) => {
|
||||||
|
this.map = new AMap.Map("middleMap", {
|
||||||
|
zoom: 13, //级别
|
||||||
|
center: [106.45773,29.54098], //中心点坐标
|
||||||
|
mapStyle: "",
|
||||||
|
});
|
||||||
|
this.map.on("click", (e) => {
|
||||||
|
navigator.clipboard.writeText(
|
||||||
|
`[${e.lnglat.R.toString()}, ${e.lnglat.Q.toString()}],`
|
||||||
|
);
|
||||||
|
});
|
||||||
|
const marks = [
|
||||||
|
{
|
||||||
|
locaton: [106.46174288158418,29.53138123556404],
|
||||||
|
name: "重庆亿利宝汽车配件有限公司",
|
||||||
|
device: "AI摄像头-CAM90802",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
locaton: [106.45773188158418,29.54092123556404],
|
||||||
|
name: "重庆市沙坪坝区人民政府",
|
||||||
|
device: "AI摄像头-CAM90804",
|
||||||
|
src:this.sp2
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const marks2 = [
|
||||||
|
{
|
||||||
|
locaton: [106.45413980158418,29.55100123556404],
|
||||||
|
name: "沙坪公园",
|
||||||
|
device: "AI摄像头-CAM90801",
|
||||||
|
address: "游客溺水",
|
||||||
|
src:'./assets/img1.png'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
locaton: [106.48074381158418,29.54188923556404],
|
||||||
|
name: "森林实验小学",
|
||||||
|
device: "AI摄像头-CAM90801",
|
||||||
|
address: "校门口出现车不礼让行人现象",
|
||||||
|
src:'./assets/img2.jpeg'
|
||||||
|
},
|
||||||
|
];
|
||||||
|
marks.forEach((item, index) => {
|
||||||
|
this.addMapMarker(item.locaton, 'sxt2', { name: item.name, device: item.device })
|
||||||
|
});
|
||||||
|
marks2.forEach((item, index) => {
|
||||||
|
this.addMapMarker2(item.locaton, 'jb', { name: item.name, device: item.device,address: item.address})
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
console.log(e);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 添加图形点标记
|
||||||
|
addMapMarker(sourceData = [], type = "sxt", info = {}) {
|
||||||
|
const marker = new AMap.Marker({
|
||||||
|
position: new AMap.LngLat(sourceData[0], sourceData[1]),
|
||||||
|
offset: new AMap.Pixel(-50, -52),
|
||||||
|
icon: `/images/${type}.png`, // 添加 Icon 图标 URL
|
||||||
|
title: "",
|
||||||
|
});
|
||||||
|
this.map.add(marker);
|
||||||
|
marker.on("click", (e) => {
|
||||||
|
this.showInfoWindow(sourceData[0], sourceData[1], {
|
||||||
|
type: "#304156",
|
||||||
|
...info,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
addMapMarker2(sourceData = [], type = "jb", info = {}) {
|
||||||
|
const marker = new AMap.Marker({
|
||||||
|
position: new AMap.LngLat(sourceData[0], sourceData[1]),
|
||||||
|
offset: new AMap.Pixel(-40, -62),
|
||||||
|
icon: `/images/${type}.png`, // 添加 Icon 图标 URL
|
||||||
|
title: "",
|
||||||
|
});
|
||||||
|
this.map.add(marker);
|
||||||
|
marker.on("click", (e) => {
|
||||||
|
this.showInfoWindow2(sourceData[0], sourceData[1], {
|
||||||
|
type: "#304156",
|
||||||
|
...info,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 显示信息窗体
|
||||||
|
showInfoWindow(lng, lat, sourceInfo) {
|
||||||
|
let content = `
|
||||||
|
<div style="padding: 6px;background-color: #32b9ef;">
|
||||||
|
<div>
|
||||||
|
<div style="padding: 4px;fontweigth:500"><b>${sourceInfo.device}</b></div>
|
||||||
|
<div style="padding: 4px;margin:5px 0">${sourceInfo.name}</div>
|
||||||
|
<div style="padding: 4px;">正常运行</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
const infoWindow = new AMap.InfoWindow({
|
||||||
|
content,
|
||||||
|
anchor: "middle-left",
|
||||||
|
isCustom: true,
|
||||||
|
});
|
||||||
|
infoWindow.open(this.map, [lng, lat]);
|
||||||
|
},
|
||||||
|
// 显示信息窗体
|
||||||
|
showInfoWindow2(lng, lat, sourceInfo) {
|
||||||
|
let content = `
|
||||||
|
<div style="padding: 6px;background-color: #cce0f1;">
|
||||||
|
<div>
|
||||||
|
<div style="padding: 4px;margin:5px 0;color:red;"><b>${sourceInfo.address}</b></div>
|
||||||
|
<div style="padding: 4px;fontweigth:500"><b>${sourceInfo.device}</b></div>
|
||||||
|
<div style="padding: 4px;"><b>${sourceInfo.name}</b></div>
|
||||||
|
<img src="${sourceInfo.src}" style="width:100%;height:100px;" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
const infoWindow = new AMap.InfoWindow({
|
||||||
|
content,
|
||||||
|
anchor: "middle-left",
|
||||||
|
isCustom: true,
|
||||||
|
});
|
||||||
|
infoWindow.open(this.map, [lng, lat]);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
#middleMap {
|
||||||
|
width: 100vw;
|
||||||
|
height: calc(100vh - 84px);
|
||||||
|
}
|
||||||
|
.box{
|
||||||
|
position: relative;
|
||||||
|
.sl{
|
||||||
|
width: 250px;
|
||||||
|
height: 70px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 3%;
|
||||||
|
right:3%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
.left{
|
||||||
|
width: 49%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
.sxt{
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-image: url(./assets/jk.png);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right{
|
||||||
|
width: 49%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
.warn{
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-image: url(./assets/warn.png);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user