hsai/im-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

内网开发

Browse Source
This commit is contained in:
luojie
2023-10-26 21:02:51 +08:00
parent 368ca335fe
commit 4e190cec87
308 changed files with 7135 additions and 2175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

571
hd-glasses-app/src/pages/hd_map.vue
View File

@@ -8,6 +8,29 @@
<div class="mobileHomePageExpandBtn" v-if="page=='mobileHomePage'">
<van-icon name="expand-o" color="white" @click="switchFullScreen"/>
</div>
<div class="iconColorList" v-if="page=='mobileHomePage'&&pageType=='large'">
<div class="iconColorListItem"><span style="background-color: #FF0000"></span>报警点位</div>
<div class="iconColorListItem"><span style="background-color: #369FFF"></span>在线</div>
<div class="iconColorListItem"><span style="background-color: #9B9B9B"></span>离线</div>
<div class="iconColorListItem"><span style="background-color: #16CE81"></span>接收报警</div>
</div>
<van-overlay :show="alarmDetailsOverlay" @click="alarmDetailsOverlay = false" z-index="20">
<div class="alarmDetailsOverlayWrapper" @click.stop>
<div class="alarmDetailsBox">
<div class="title">{{ alarmDetailsData.title }}</div>
<div class="alarmDetailsBoxItem"><span>报警类型:</span><span>{{ alarmDetailsData.alarmCategory_dictText }}</span>
</div>
<div class="alarmDetailsBoxItem"><span>报警时间:</span><span>{{ alarmDetailsData.createTime }}</span></div>
<div class="alarmDetailsBoxItem"><span>警情内容:</span><span>{{ alarmDetailsData.msgContent }}</span></div>
<div class="alarmDetailsBoxItem"><span>发布人:</span><span>{{ alarmDetailsData.sender }}</span></div>
<div class="alarmDetailsBoxItem"><span>关联设备:</span><span>内容</span></div>
</div>
<div class="btnList">
<div class="btnItem" @click="alarmClickAction(1)">确认</div>
<div class="btnItem" @click="alarmClickAction(2)">导航</div>
</div>
</div>
</van-overlay>
<!--
<div class="pcPlanningPath" v-if="page=='pcPlanningPath'">
<div class="pcPlanningPathNext" @click="clearPcPlanningPath">清空重新绘制</div>
@@ -23,12 +46,14 @@ import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import XYZ from "ol/source/XYZ";
import {Map, View, Feature} from "ol";
import {Icon, Fill, Stroke, Style, Circle} from "ol/style";
import {Icon, Fill, Stroke, Style, Circle, Text} from "ol/style";
import Overlay from "ol/Overlay";
import {Point, LineString} from "ol/geom.js";
import {Point, LineString, Polygon} from "ol/geom.js";
import {getVectorContext} from "ol/render";
import axios from "axios";
import TileWMS from "ol/source/TileWMS"
import WMTS from "ol/source/WMTS"
import TileGrid from "ol/tilegrid/TileGrid"
import {Notify, Dialog} from 'vant';
import * as interaction from 'ol/interaction'; // 交互
import {OL as ol} from "plot-ol/plottingol";
@@ -83,38 +108,100 @@ export default {
snap: null,
pcDrawType: "",
equipmentLayer: {},
alarmLayer: {}
alarmLayer: {},
alarmAnimation: null,
planningTargetPoint: [],
alarmDetailsOverlay: false,
alarmDetailsData: {
alarmCategory_dictText: ""
},
navigationStartPoint: [],
navigationEndPoint: [],
hd_gps_location: [],
pageType: "",
planningVectorLayer: {},
parentPostMessageData: [],
isCanDraw: true,
};
},
mounted() {
this.page = this.$route.query.page;
this.pageType = this.$route.query.type;
setInterval(() => {
let hd_gps_location = localStorage.getItem("hd_gps_location")
if (hd_gps_location) {
hd_gps_location = hd_gps_location.split(",")
this.hd_gps_location = hd_gps_location
this.navigationStartPoint = this.hd_gps_location
}
}, 2000)
this.initMap();
switch (this.page) {
case "addAlarmPoint":
console.log("新增报警点");
//处理ok
this.PageAddAlarmPoint()
break
case "pcPlanningPath":
this.pcDrawType = "LineString";
window.addEventListener('message', (event) => {
this.isCanDraw = false
if (this.parentPostMessageData.length == 0) {
this.map.removeLayer(this.drawPlanningPathLayer);
this.parentPostMessageData = event.data;
this.drawPcPostMessageDataLayer()
}
});
//处理ok
this.pcPlanningPath()
break
case "pcDrawArea":
this.pcDrawType = "Polygon"
window.addEventListener('message', (event) => {
this.isCanDraw = false
if (this.parentPostMessageData.length == 0) {
this.map.removeLayer(this.drawPlanningPathLayer);
this.parentPostMessageData = event.data;
this.drawPcPostMessageDataLayer()
}
});
//处理ok
this.pcPlanningPath();
break
case "planningPath":
// http://localhost:8080/hd-glasses-app/#/hd_map?page=planningPath&alarmId=1714938284919808002
if (this.$route.query.alarmId == null) {
console.error("告警id不可为空")
}
this.getAlarmDetails(this.$route.query.alarmId)
// this.planningPath()
break
case "mobileHomePage":
// http://localhost:8080/hd-glasses-app/#/hd_map?page=mobileHomePage
appInit(500).then((e) => {
console.log("获取到token，开始执行后续")
console.log(e)
this.queryAlarmList();
this.queryAllEquipment();
this.getAreaList()
setInterval(() => {
this.queryAlarmList();
}, 3500)
setInterval(() => {
this.queryAllEquipment();
}, 5000)
}).then((e) => {
console.error(e)
})
break
default:
console.log("未匹配到page参数")
this.planningPath()
// this.planningPath()
// this.queryAlarmList()
// this.queryAllEquipment()
}
@@ -129,7 +216,6 @@ export default {
showHistory() {
var _list = [[113.94755498147583, 22.565597285534384], [113.9468468782959, 22.563151110912802], [113.9487566111145, 22.56018995216036], [113.95017281747437, 22.55748628547335]]
console.log(_list)
},
clearPointsLayers() {
@@ -147,72 +233,63 @@ export default {
},
initMap() {
this.geometryMove = new Point(this.route.getFirstCoordinate());
this.featureMove = new Feature({
type: "featureMove",
geometry: this.geometryMove,
});
console.log(this.route)
this.vectorLayer = new VectorLayer({
source: new VectorSource({
features: [
new Feature({
type: "route",
geometry: this.route,
}),
this.featureMove,
new Feature({
type: "icon",
geometry: new Point(this.route.getFirstCoordinate()),
}),
new Feature({
type: "icon",
geometry: new Point(this.route.getLastCoordinate()),
}),
],
}),
style: (feature) => {
return this.styles[feature.get("type")];
},
});
const wmsLayer = new TileLayer({
const wmsLayer_0 = new TileLayer({
source: new TileWMS({
// 设置 Geoserver 服务的 URL
url: process.env.VUE_APP_MAP_URL + "/wms",
// 设置请求参数
params: {
// 指定要获取的图层名称
LAYERS: "china:yangjianghedian",
// 设置为平铺模式获取
TILED: true
}
})
});
const wmsLayer_1 = new TileLayer({
source: new TileWMS({
// 设置 Geoserver 服务的 URL
url: process.env.VUE_APP_MAP_URL + "/wms",
params: {
LAYERS: "china:yangjianghedian_dt",
TILED: true
}
})
});
this.map = new Map({
target: "map",
layers: [
new TileLayer({
source: new XYZ({
url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
}),
}),
wmsLayer
// new TileLayer({
// source: new XYZ({
// url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
// }),
// }),
wmsLayer_1,
wmsLayer_0,
],
view: new View({
projection: "EPSG:4326",
center: [112.26173, 21.70896],
projection: "EPSG:3857",
center: [12497018.585823221, 2476783.2447665134],
zoom: 15,
}),
});
this.map.on('singleclick', e => {
this.map.forEachFeatureAtPixel(
e.pixel,
(feature) => {
console.log("Feature被点击了")
console.log(feature)
if (feature.values_.type == 'alarm') {
this.alarmDetailsData = feature.values_.data;
this.alarmDetailsOverlay = true;
}
},
{
hitTolerance: 30
}
);
});
// this.map.addLayer(this.vectorLayer);
},
/**
* 点击地图添加摄像头要素
@@ -227,6 +304,13 @@ export default {
},
planningPath() {
const startPoint = ol.proj.transform(this.navigationStartPoint, 'EPSG:4326', 'EPSG:3857');
const endPoint = ol.proj.transform(this.navigationEndPoint, 'EPSG:4326', 'EPSG:3857');
console.log(startPoint)
console.log(endPoint)
const _points = `${startPoint[0]}#${startPoint[1]}@${endPoint[0]}#${endPoint[1]}`
axios({
method: "post",
url: process.env.VUE_APP_MAP_URL + "/wfs?authkey=" + process.env.VUE_APP_MAP_AUTHKEY,
@@ -235,13 +319,13 @@ export default {
},
data: `<GetFeature xmlns="http://www.opengis.net/wfs" service="WFS" version="1.1.0"
outputFormat="application/json"
viewParams="points:12496603.063359383#2476576.2207514597@12497163.153583003#2477213.6636166913@12497590.025377853#2477169.2574819643@12497545.869867127#2477020.727166339@12496603.063359383#2476576.2207514597"
viewParams="points:${_points}"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd">
<Query typeName="china:planning-path" xmlns:china="www.shgis.com"/>
</GetFeature>`,
}).then(res => {
// console.log(res.data.features)
// console.log("================================获取到了导航结果")
let pathList = [];
res.data.features.map((item, index) => {
@@ -250,8 +334,6 @@ export default {
// console.log(item.geometry.coordinates[0])
// console.log(item.geometry.coordinates[0])
})
const route = new LineString(pathList)
const geometryMove = new Point(route.getFirstCoordinate());
@@ -260,8 +342,10 @@ export default {
type: "featureMove",
geometry: geometryMove,
});
const vectorLayer = new VectorLayer({
this.planningVectorLayer.set('id', 'planningVectorLayer');
//先清空 再清除
this.map.removeLayer(this.planningVectorLayer)
this.planningVectorLayer = new VectorLayer({
source: new VectorSource({
features: [
new Feature({
@@ -284,18 +368,15 @@ export default {
},
});
console.log(route.getFirstCoordinate())
console.log(route.getLastCoordinate())
this.map.addLayer(vectorLayer)
this.map.addLayer(this.planningVectorLayer)
})
},
/**
* 根据经纬度坐标添加摄像头要素
*/
addPoints(coordinate) {
console.log(coordinate)
if (this.selectPoint.length > 0) {
if (this.selectPoint.length > 0) {
this.coordinate = []
this.map.removeLayer(this.pointLayer);
this.pointLayer = {};
@@ -307,8 +388,15 @@ export default {
// 图层添加到地图上
this.map.addLayer(this.pointLayer);
}
} else {
// 创建图层
this.pointLayer = new VectorLayer({
source: new VectorSource(),
});
// 图层添加到地图上
this.map.addLayer(this.pointLayer);
}
this.selectPoint = coordinate;
this.coordinate = coordinate;
@@ -380,13 +468,15 @@ export default {
if (this.selectPoint.length == 0) {
Dialog({message: '请先选择点位'});
}
const result = JSON.stringify(this.selectPoint)
// 上传之前将3857转4326
const center = ol.proj.transform(this.selectPoint, 'EPSG:3857', 'EPSG:4326');
console.log("================center: " + JSON.stringify(center))
const result = JSON.stringify(center)
location.href = "uniwebview://action?function=addAlarmPoint&params1=" + result;
},
pcPlanningPath() {
//https://blog.csdn.net/Raccon_/article/details/127491268
console.log("pcPlanningPath")
// const interaction = this.map
// .getInteractions()
// .getArray()
@@ -438,17 +528,28 @@ export default {
this.map.addInteraction(this.snap);
this.draw.on('drawend', (e) => {
if (!this.isCanDraw) {
return;
}
Dialog.confirm({
title: '绘制完成',
message: '取消则会重新绘制',
})
.then(() => {
// on confirm
console.log(this.drawPlanningPathLayer.getSource().getFeatures())
const featureGeoJson = JSON.parse(new GeoJSON().writeFeature(e.feature))
console.log(featureGeoJson.geometry.coordinates)
window.parent.postMessage(JSON.stringify(featureGeoJson.geometry.coordinates), "*");
// on confirm
const featureGeoJson = JSON.parse(new GeoJSON().writeFeature(e.feature))
let pointList = []
featureGeoJson.geometry.coordinates.map(item => {
const _item = ol.proj.transform(item, 'EPSG:3857', 'EPSG:4326');
pointList.push(_item)
})
console.log(pointList)
window.parent.postMessage(JSON.stringify(pointList), "*");
})
.catch(() => {
@@ -472,19 +573,22 @@ export default {
}
}).then((res) => {
if (res.status == 200) {
this.map.removeLayer(this.equipmentLayer)
this.equipmentLayer = {};
res.data.result.records.map(record => {
try {
if (record.leastLocation!=null) {
this.addPointWidthCoordinate(record.leastLocation, "equipment")
if (record.leastLocation != null) {
this.addPointWidthCoordinate(record.leastLocation, "equipment", record)
}
} catch (e) {
console.error(e)
console.log(e)
}
})
}
})
},
queryAlarmList() {
service.get(`/api/alarm/list`, {
params: {
sendStatus: 1,
@@ -493,10 +597,15 @@ export default {
}
}).then((res) => {
if (res.status == 200) {
clearInterval(this.alarmAnimation)
this.alarmAnimation = null
this.map.removeLayer(this.alarmLayer)
this.alarmLayer = {};
res.data.result.records.map(record => {
try {
if (record.location!=null) {
this.addPointWidthCoordinate(record.location, "alarm")
if (record.location != null) {
this.addPointWidthCoordinate(record.location, "alarm", record)
}
} catch (e) {
console.error(e)
@@ -509,10 +618,15 @@ export default {
switchFullScreen() {
location.href = "uniwebview://action?function=switchBigScreen"
},
addPointWidthCoordinate(coordinate, type) {
coordinate=coordinate.split(",")
if(type=='alarm'){
console.log("addPointWidthCoordinate", type, coordinate)
addPointWidthCoordinate(coordinate, type, record) {
coordinate = coordinate.split(",")
coordinate = ol.proj.transform(coordinate, 'EPSG:4326', 'EPSG:3857');
// console.log("================addPointWidthCoordinate",coordinate)
if (type == 'alarm') {
if (Object.keys(this.alarmLayer).length == 0) {
// 创建图层
this.alarmLayer = new VectorLayer({
@@ -520,15 +634,17 @@ export default {
});
// 图层添加到地图上
this.map.addLayer(this.alarmLayer);
var flag=true
var animation=setInterval(() => {
flag=!flag
var flag = true
this.alarmAnimation = setInterval(() => {
flag = !flag
this.alarmLayer.setVisible(flag)
}, 300);
}, 900);
}
const feature = new Feature({
geometry: new Point(coordinate),
data: record,
type: 'alarm'
});
// 设置要素的图标
feature.setStyle(
@@ -545,8 +661,7 @@ export default {
this.alarmLayer.getSource().addFeature(feature);
}
if(type=='equipment'){
console.log("addPointWidthCoordinate", type, coordinate)
if (type == 'equipment') {
if (Object.keys(this.equipmentLayer).length == 0) {
// 创建图层
this.equipmentLayer = new VectorLayer({
@@ -555,32 +670,206 @@ export default {
// 图层添加到地图上
this.map.addLayer(this.equipmentLayer);
}
const feature = new Feature({
geometry: new Point(coordinate),
});
// 设置要素的图标
feature.setStyle(
new Style({
// 设置图片效果
image: new Icon({
src: getStatisFileUrl("/map/icon_paishuibeng_h_2.png"),
// anchor: [0.5, 0.5],
scale: 0.4,
}),
})
);
// 要素添加到地图图层上
this.equipmentLayer.getSource().addFeature(feature);
if (record.isOnline == "true") {
const feature = new Feature({
geometry: new Point(coordinate),
data: record,
type: 'equipment'
});
// 设置要素的图标
feature.setStyle(
new Style({
// 设置图片效果
image: new Icon({
src: getStatisFileUrl("/map/Group_29@2x.png"),
// anchor: [0.5, 0.5],
scale: 0.4,
}),
})
);
// 要素添加到地图图层上
this.equipmentLayer.getSource().addFeature(feature);
}
if (record.isOnline == "false") {
const feature = new Feature({
geometry: new Point(coordinate),
data: record,
type: 'equipment'
});
// 设置要素的图标
feature.setStyle(
new Style({
// 设置图片效果
image: new Icon({
src: getStatisFileUrl("/map/Group_30@2x.png"),
// anchor: [0.5, 0.5],
scale: 0.4,
}),
})
);
// 要素添加到地图图层上
this.equipmentLayer.getSource().addFeature(feature);
}
if (record.isAlarm == false) {
const feature = new Feature({
geometry: new Point(coordinate),
data: record,
type: 'equipment'
});
// 设置要素的图标
feature.setStyle(
new Style({
// 设置图片效果
image: new Icon({
src: getStatisFileUrl("/map/Group_190514@2x.png"),
// anchor: [0.5, 0.5],
scale: 0.4,
}),
})
);
feature.on("click", (event) => {
console.log("告警图标被点击")
console.log(event)
})
// 要素添加到地图图层上
this.equipmentLayer.getSource().addFeature(feature);
}
}
},
alarmClickAction(index) {
if (index == 1) {
location.href = "uniwebview://action?function=alarmConfirmAction&params1=" + this.alarmDetailsData.id;
}
if (index == 2) {
location.href = "uniwebview://action?function=alarmPlanningAction&params1=" + this.alarmDetailsData.id + "&params2=" + this.alarmDetailsData.location;
}
},
getAlarmDetails(id) {
service.get(`/api/alarm/queryById`, {
params: {
id: id
}
}).then((res) => {
if (res.status == 200) {
console.log(res.data.result)
this.navigationEndPoint = res.data.result.location.split(",")
this.addPointWidthCoordinate(res.data.result.location, "alarm", res.data.result)
setInterval(() => {
this.planningPath()
}, 2000)
}
})
},
drawPcPostMessageDataLayer() {
const tempGeometryList = []
this.parentPostMessageData.map(item => {
tempGeometryList.push(ol.proj.transform(item, 'EPSG:4326', 'EPSG:3857'))
})
const polygonGeometry = new LineString(tempGeometryList)
const polygonFeature = new Feature({
geometry: polygonGeometry
})
polygonFeature.setStyle(new Style({
stroke: new Stroke({
color: '#ffa502',
width: 2
}),
fill: new Fill({
color: '#ffffff00'
})
}))
this.drawPlanningPathLayer.getSource().addFeature(polygonFeature)
this.map.addLayer(this.drawPlanningPathLayer)
},
removeMapLayerById(id) {
this.map.getLayers().forEach(function (layer) {
if (layer instanceof ol.layer.Tile && layer.get('id') === id) {
this.map.removeLayer(layer);
}
});
},
getAreaList() {
let vectorSource = new VectorSource();
// 矢量地图
this.drawPlanningPathLayer = new VectorLayer({
source: vectorSource,
style: new Style({
stroke: new Stroke({
width: 6,
color: [237, 212, 0, 0.8],
})
})
});
this.map.addLayer(this.drawPlanningPathLayer);
service.get(`/api/patrol/area/list`, {
}).then((res) => {
if (res.status == 200) {
console.log(res.data.result.records)
res.data.result.records.map((record) =>{
console.log(record)
this.drawAreaLayer(record.areaName,JSON.parse(record.area))
})
}
})
},
drawAreaLayer(title,areaList) {
console.log(title)
areaList=areaList[0]
console.log(areaList)
const tempGeometryList = []
areaList.map(item => {
tempGeometryList.push(ol.proj.transform(item, 'EPSG:4326', 'EPSG:3857'))
})
tempGeometryList.push(tempGeometryList[0])
const _list=[tempGeometryList]
console.log(_list)
const polygonGeometry = new Polygon(_list)
console.log(polygonGeometry)
const polygonFeature = new Feature({
geometry: polygonGeometry,
name:title
})
polygonFeature.setStyle(new Style({
stroke: new Stroke({
color: '#ffa502',
width: 2
}),
fill: new Fill({
color: 'rgba(255,255,0,0.1)'
}),
text: new Text({
testAlign:'center',
text:title,
font:'bold 20px 微软雅黑',
fill:new Fill({
color: '#ffa502',
})
})
}))
this.drawPlanningPathLayer.getSource().addFeature(polygonFeature)
}
},
};
</script>
@@ -667,4 +956,80 @@ export default {
right: 30px;
z-index: 100;
}
.iconColorList {
position: fixed;
bottom: 20px;
left: 30px;
z-index: 2;
text-align: left;
font-size: 16px;
color: #333333;
.iconColorListItem {
display: flex;
flex-direction: row;
justify-content: start;
margin-top: 10px;
}
span {
width: 20px;
height: 20px;
border-radius: 20px;
margin-right: 20px;
display: block;
}
}
.alarmDetailsOverlayWrapper {
background-color: white;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
z-index: 999;
display: flex;
flex-direction: column;
justify-content: flex-end;
font-size: 14px;
padding-top: 50px;
.alarmDetailsBox {
margin-left: 20px;
.title {
width: 100%;
font-weight: 900;
font-size: 10px;
text-align: left;
}
.alarmDetailsBoxItem {
font-weight: 700;
width: 100%;
text-align: left;
margin-top: 20px;
}
}
.btnList {
margin-top: 20px;
margin-bottom: 20px;
display: flex;
width: 100%;
flex-direction: row;
justify-content: space-around;
.btnItem {
background-color: #369FFF;
border-radius: 10px;
width: 40%;
height: 80px;
line-height: 80px;
color: white;
font-weight: bold;
}
}
}
</style>