内网开发
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user