内网开发

This commit is contained in:
2023-11-09 11:12:08 +08:00
parent 336bcc662b
commit 75000d846b
34 changed files with 2153 additions and 283 deletions

View File

@@ -61,6 +61,7 @@ import GeoJSON from 'ol/format/GeoJSON'
import service from "@/utils/service";
import {appInit, getStatisFileUrl} from "../utils/publicFun";
export default {
data() {
return {
@@ -125,9 +126,17 @@ export default {
};
},
mounted() {
console.log(location.href)
this.page = this.$route.query.page;
this.pageType = this.$route.query.type;
this.token = this.$route.query.token || "";
if (this.token > 10) {
localStorage.setItem("hd_token", this.token)
}
setInterval(() => {
let hd_gps_location = localStorage.getItem("hd_gps_location")
if (hd_gps_location) {
@@ -342,7 +351,7 @@ export default {
type: "featureMove",
geometry: geometryMove,
});
this.planningVectorLayer.set('id', 'planningVectorLayer');
// this.planningVectorLayer.set('id', 'planningVectorLayer');
//先清空 再清除
this.map.removeLayer(this.planningVectorLayer)
this.planningVectorLayer = new VectorLayer({
@@ -375,7 +384,7 @@ export default {
* 根据经纬度坐标添加摄像头要素
*/
addPoints(coordinate) {
console.log("点击触发addPoints")
if (this.selectPoint.length > 0) {
this.coordinate = []
this.map.removeLayer(this.pointLayer);
@@ -591,9 +600,12 @@ export default {
service.get(`/api/alarm/list`, {
params: {
sendStatus: 1,
sendStatus: "1",
disposition: "0",
pageNo: 1,
pageSize: 50
pageSize: 50,
column: "createTime",
order: "desc",
}
}).then((res) => {
if (res.status == 200) {
@@ -601,11 +613,11 @@ export default {
this.alarmAnimation = null
this.map.removeLayer(this.alarmLayer)
this.alarmLayer = {};
res.data.result.records.map(record => {
res.data.result.records.map((record, index) => {
try {
if (record.location != null) {
this.addPointWidthCoordinate(record.location, "alarm", record)
this.addPointWidthCoordinate(record.location, "alarm", record, index + 1)
}
} catch (e) {
console.error(e)
@@ -618,14 +630,14 @@ export default {
switchFullScreen() {
location.href = "uniwebview://action?function=switchBigScreen"
},
addPointWidthCoordinate(coordinate, type, record) {
addPointWidthCoordinate(coordinate, type, record, _index = 0) {
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) {
// 创建图层
@@ -641,61 +653,83 @@ export default {
}, 900);
}
const feature = new Feature({
geometry: new Point(coordinate),
data: record,
type: 'alarm'
});
// 设置要素的图标
feature.setStyle(
new Style({
// 设置图片效果
image: new Icon({
src: getStatisFileUrl("/map/icon_paishuibeng_h.png"),
// anchor: [0.5, 0.5],
scale: 0.4,
}),
})
);
// 要素添加到地图图层上
this.alarmLayer.getSource().addFeature(feature);
}
if (type == 'equipment') {
if (Object.keys(this.equipmentLayer).length == 0) {
// 创建图层
this.equipmentLayer = new VectorLayer({
source: new VectorSource(),
});
// 图层添加到地图上
this.map.addLayer(this.equipmentLayer);
}
if (record.isOnline == "true") {
const feature = new Feature({
geometry: new Point(coordinate),
data: record,
type: 'equipment'
});
const alarmCategory_dictText=record.alarmCategory_dictText||"未知类型"
//临时智慧所,小红旗
if (record.alarmCategory == "1706273001850601474") {
// 设置要素的图标
feature.setStyle(
new Style({
// 设置图片效果
image: new Icon({
src: getStatisFileUrl("/map/Group_29@2x.png"),
// anchor: [0.5, 0.5],
scale: 0.4,
src: getStatisFileUrl("/map/hongqi.png"),
anchor: [0.5, 0.5],
scale: 0.3,
}),
text: new Text({
testAlign: 'center',
text: [_index.toString(), 'bold 16px sans-serif', '\n','',alarmCategory_dictText, 'italic 16px sans-serif'],
font: 'bold 20px 微软雅黑',
fill: new Fill({
color: '#ffa502',
}),
offsetY: -2
})
})
);
} else {
// 设置要素的图标
feature.setStyle(
new Style({
// 设置图片效果
image: new Icon({
src: getStatisFileUrl("/map/icon_paishuibeng_h.png"),
anchor: [0.5, 0.5],
scale: 0.4,
}),
text: new Text({
testAlign: 'center',
text: [_index.toString(), 'bold 16px sans-serif', '\n','',alarmCategory_dictText, 'italic 16px sans-serif'],
font: 'bold 20px 微软雅黑',
fill: new Fill({
color: '#ffa502',
})
})
})
);
// 要素添加到地图图层上
this.equipmentLayer.getSource().addFeature(feature);
}
if (record.isOnline == "false") {
const feature = new Feature({
geometry: new Point(coordinate),
data: record,
type: 'equipment'
// 要素添加到地图图层上
this.alarmLayer.getSource().addFeature(feature);
console.log("===============结束告警点位添加")
}
//设备相关
if (type == 'equipment') {
let alarmNum=record.alarmNum||0;
// 模拟数据
// record.isOnline="true";
// alarmNum=0;
const feature = new Feature({
geometry: new Point(coordinate),
data: record,
type: 'equipment'
});
if (Object.keys(this.equipmentLayer).length == 0) {
// 创建图层
this.equipmentLayer = new VectorLayer({
source: new VectorSource(),
});
this.map.addLayer(this.equipmentLayer);
}
// 设备离线 设置样式
if (record.isOnline == "false") {
// 设置要素的图标
feature.setStyle(
new Style({
@@ -707,33 +741,48 @@ export default {
}),
})
);
// 要素添加到地图图层上
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);
if (record.isOnline == "true") {
// 未接受告警数量为0全部都接受 绿色
if(alarmNum==0){
feature.setStyle(
new Style({
// 设置图片效果
image: new Icon({
src: getStatisFileUrl("/map/Group_190514@2x.png"),
// anchor: [0.5, 0.5],
scale: 0.4,
}),
})
);
}
if(alarmNum>0){
feature.setStyle(
new Style({
// 设置图片效果
image: new Icon({
src: getStatisFileUrl("/map/Group_29@2x.png"),
// anchor: [0.5, 0.5],
scale: 0.4,
}),
text:new Text({
testAlign: 'center',
text: `${alarmNum}条告警未接受`,
font: 'bold 16px 微软雅黑',
fill: new Fill({
color: '#369FFF',
}),
// offsetX: 40,
offsetY: 26
})
})
);
}
}
this.equipmentLayer.getSource().addFeature(feature);
}
@@ -810,23 +859,21 @@ export default {
this.map.addLayer(this.drawPlanningPathLayer);
service.get(`/api/patrol/area/list`, {
}).then((res) => {
service.get(`/api/patrol/area/list`, {}).then((res) => {
if (res.status == 200) {
console.log(res.data.result.records)
res.data.result.records.map((record) =>{
res.data.result.records.map((record) => {
console.log(record)
this.drawAreaLayer(record.areaName,JSON.parse(record.area))
this.drawAreaLayer(record.areaName, JSON.parse(record.area))
})
}
})
},
drawAreaLayer(title,areaList) {
drawAreaLayer(title, areaList) {
console.log(title)
areaList=areaList[0]
areaList = areaList[0]
console.log(areaList)
const tempGeometryList = []
@@ -837,7 +884,7 @@ export default {
tempGeometryList.push(tempGeometryList[0])
const _list=[tempGeometryList]
const _list = [tempGeometryList]
console.log(_list)
@@ -847,7 +894,7 @@ export default {
const polygonFeature = new Feature({
geometry: polygonGeometry,
name:title
name: title
})
polygonFeature.setStyle(new Style({
@@ -859,10 +906,10 @@ export default {
color: 'rgba(255,255,0,0.1)'
}),
text: new Text({
testAlign:'center',
text:title,
font:'bold 20px 微软雅黑',
fill:new Fill({
testAlign: 'center',
text: title,
font: 'bold 20px 微软雅黑',
fill: new Fill({
color: '#ffa502',
})
})
@@ -992,7 +1039,7 @@ export default {
display: flex;
flex-direction: column;
justify-content: flex-end;
font-size: 14px;
font-size: 18px !important;
padding-top: 50px;
.alarmDetailsBox {