地图资源按需加载
This commit is contained in:
parent
7e802739e7
commit
3a870ed8e2
|
|
@ -6,7 +6,7 @@
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
<title><%= VUE_APP_TITLE %></title>
|
<title><%= VUE_APP_TITLE %></title>
|
||||||
<script src="./jsmap/jsmap.js"> </script>
|
<!-- <script src="./jsmap/jsmap.js"> </script> -->
|
||||||
<link type="text/css" href="./jsmap/jsmap.css" rel="stylesheet"/>
|
<link type="text/css" href="./jsmap/jsmap.css" rel="stylesheet"/>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
document.write("<script src='config.js?"+new Date().getTime()+"'><\/script>");
|
document.write("<script src='config.js?"+new Date().getTime()+"'><\/script>");
|
||||||
|
|
|
||||||
|
|
@ -793,198 +793,206 @@ export default {
|
||||||
that.timerTime = setInterval(() => {
|
that.timerTime = setInterval(() => {
|
||||||
that.showTime();
|
that.showTime();
|
||||||
}, 1000);
|
}, 1000);
|
||||||
window.map = new jsmap.JSMap({
|
debugger;
|
||||||
mapType: jsmap.JSMapType.MAP_3D,
|
console.log( window.location.host);
|
||||||
container: 'mapContainer',
|
let host = window.location.host;
|
||||||
mapServerURL: 'data/map',
|
let jsUrl = host.indexOf('localhost')>-1?'/http://222.222.144.147:6013/jsmap/jsmap.js':host+'/jsmap/jsmap.js';
|
||||||
enableShadows: false, //是否开启阴影 默认false
|
that.loadScript('mapId', 'http://222.222.144.147:6013/jsmap/jsmap.js', () => {
|
||||||
enableLighting: false, //是否开发光照 默认false
|
debugger;
|
||||||
showBuildingMarker: true,
|
window.map = new jsmap.JSMap({
|
||||||
// showNavigationDisplay: true,
|
mapType: jsmap.JSMapType.MAP_3D,
|
||||||
mapScaleLevelRange: [16, 23],//比例尺级别范围， 16级到23级,默认[1,24]
|
container: 'mapContainer',
|
||||||
floorControlOptions: {
|
mapServerURL: 'data/map',
|
||||||
floorHeight: 20,//楼层间距
|
enableShadows: false, //是否开启阴影 默认false
|
||||||
position: jsmap.JSControlPosition.RIGHT_TOP,//控件位置
|
enableLighting: false, //是否开发光照 默认false
|
||||||
offset: {
|
showBuildingMarker: true,
|
||||||
x: 50,
|
// showNavigationDisplay: true,
|
||||||
y: 200,
|
mapScaleLevelRange: [16, 23],//比例尺级别范围， 16级到23级,默认[1,24]
|
||||||
}//控件偏移位置
|
floorControlOptions: {
|
||||||
},
|
floorHeight: 20,//楼层间距
|
||||||
imageryProvider: jsmap.JSImageryProviderType.IMAGE_TDT,
|
position: jsmap.JSControlPosition.RIGHT_TOP,//控件位置
|
||||||
backgroundColor: '#3798ff', //背景颜色
|
offset: {
|
||||||
viewOptions: {
|
x: 50,
|
||||||
//屏幕中心坐标
|
y: 200,
|
||||||
center: { x: 114.63059258861512, y: 38.81407163905287, z: 1 },
|
}//控件偏移位置
|
||||||
// center: {x:120,y:30,z:10},
|
},
|
||||||
//相机距屏幕中心点距离（单位m）
|
imageryProvider: jsmap.JSImageryProviderType.IMAGE_TDT,
|
||||||
distance: 550,
|
backgroundColor: '#3798ff', //背景颜色
|
||||||
// 旋转角（单位°）
|
viewOptions: {
|
||||||
rotate: 0,
|
//屏幕中心坐标
|
||||||
//倾斜角（单位°）
|
center: { x: 114.63059258861512, y: 38.81407163905287, z: 1 },
|
||||||
tilt: 45,
|
// center: {x:120,y:30,z:10},
|
||||||
}
|
//相机距屏幕中心点距离（单位m）
|
||||||
});
|
distance: 550,
|
||||||
window.map.openMapById('0000');
|
// 旋转角（单位°）
|
||||||
window.map.on('loadComplete', e => {
|
rotate: 0,
|
||||||
that.riskMaskerLayers();//风险区域
|
//倾斜角（单位°）
|
||||||
that.userMaskerLayers();//人员
|
tilt: 45,
|
||||||
that.cameraMaskerLayers();//摄像头
|
|
||||||
that.domMarkerLayers();//监控视频
|
|
||||||
that.polygonMarkerLayers();//危险作业
|
|
||||||
that.speakersMaskerLayers();//喇叭
|
|
||||||
// that.jobDomMarkerLayers();//危险作业图片
|
|
||||||
that.areaMarkerLayers();//危险作业图片
|
|
||||||
let compassControl = new jsmap.JSCompassControl({
|
|
||||||
position: jsmap.JSControlPosition.LEFT_TOP,
|
|
||||||
offset: {
|
|
||||||
x: 420,
|
|
||||||
y: 50
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
window.map.addControl(compassControl);
|
window.map.openMapById('0000');
|
||||||
let zoomControl = new jsmap.JSZoomControl({
|
window.map.on('loadComplete', e => {
|
||||||
position: jsmap.JSControlPosition.LEFT_TOP,
|
that.riskMaskerLayers();//风险区域
|
||||||
offset: {
|
that.userMaskerLayers();//人员
|
||||||
x: 450,
|
that.cameraMaskerLayers();//摄像头
|
||||||
y: 5
|
that.domMarkerLayers();//监控视频
|
||||||
}
|
that.polygonMarkerLayers();//危险作业
|
||||||
});
|
that.speakersMaskerLayers();//喇叭
|
||||||
window.map.addControl(zoomControl);
|
// that.jobDomMarkerLayers();//危险作业图片
|
||||||
});
|
that.areaMarkerLayers();//危险作业图片
|
||||||
window.map.on('mapClickNode', event => {
|
let compassControl = new jsmap.JSCompassControl({
|
||||||
let item = event;
|
position: jsmap.JSControlPosition.LEFT_TOP,
|
||||||
let that = this;
|
offset: {
|
||||||
let type = event.nodeType.toString();
|
x: 420,
|
||||||
console.log(type === 'Symbol(icontextmaker)');
|
y: 50
|
||||||
if (item.markers.length > 0) {
|
|
||||||
if (type === 'Symbol(boxmarker)') {
|
|
||||||
let areaId = item.properties.get("areaId");
|
|
||||||
console.log(areaId);
|
|
||||||
that.$API.am.area.item.req(areaId).then(res=>{
|
|
||||||
that.areaItemDetail = res;
|
|
||||||
that.screenJob = false;
|
|
||||||
that.screenWarning = false;
|
|
||||||
that.screenRisk = true;
|
|
||||||
})
|
|
||||||
//风险区域
|
|
||||||
} else if (type === 'Symbol(icontextmaker)') {
|
|
||||||
//摄像头和人员
|
|
||||||
if (document.getElementById(item.markers[0].id) === null) {
|
|
||||||
if (item.markers[0].image === "/img/camera.svg") {
|
|
||||||
//摄像头
|
|
||||||
this.params.json.data.channelId = item.markers[0].id;
|
|
||||||
let domMarker = new jsmap.JSDomMarker({
|
|
||||||
id: item.markers[0].id + 'mark',
|
|
||||||
position: new jsmap.JSPoint(item.markers[0].position.x, item.markers[0].position.y, 0),
|
|
||||||
floorId: 1,
|
|
||||||
depthTest: true,
|
|
||||||
content: `<div id="` + item.markers[0].id + `" style="display: block;position:absolute;z-index: 10;top: 0;background: rgba(24,36,51,.7);padding: 0 16px 16px;box-sizing: border-box" id="vchannelWrap"></div>`,
|
|
||||||
offset: jsmap.JSControlPosition.RIGHT_CENTER,
|
|
||||||
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
|
|
||||||
marginOffset: {
|
|
||||||
x: 30,
|
|
||||||
y: -50
|
|
||||||
},
|
|
||||||
properties: {
|
|
||||||
type: 0,
|
|
||||||
},
|
|
||||||
callback: (node) => {
|
|
||||||
console.log(node);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.domMarkerLayer.addMarker(domMarker);
|
|
||||||
var otest = document.getElementById(item.markers[0].id);
|
|
||||||
// 创建一个新dom,并设置icon，绑定点击事件
|
|
||||||
let newEle = document.createElement("div");
|
|
||||||
newEle.className = "v_title";
|
|
||||||
newEle.setAttribute("style", "display:flex;justify-content: space-between;padding:10px 0");
|
|
||||||
let title = document.createElement("div");
|
|
||||||
title.innerText = "实时监控";
|
|
||||||
newEle.style.color = "#ffffff";
|
|
||||||
let close = document.createElement("div");
|
|
||||||
close.className = "v_close";
|
|
||||||
close.setAttribute("style", "width: 16px;height: 16px;background: url(/img/close.png) no-repeat;background-size: 100% 100%;");
|
|
||||||
newEle.appendChild(title);
|
|
||||||
newEle.appendChild(close);
|
|
||||||
let newEle2 = document.createElement("video");
|
|
||||||
newEle2.id = item.markers[0].id + 'videoPlayer';
|
|
||||||
newEle2.setAttribute("style", "width: 327px;height:183px;background:url('/img/v_mask.png') no-repeat;background-size: 100% 100%;");
|
|
||||||
// 在对应dom 下追加创建的dom
|
|
||||||
otest.appendChild(newEle);
|
|
||||||
otest.appendChild(newEle2);
|
|
||||||
newEle2.onclick = () => {
|
|
||||||
newEle2.setAttribute("style", "width: 327px;height:183px;background:url(/img/rotate_line.png) no-repeat;background-size:60px 60px;background-position:center center;");
|
|
||||||
this.$API.am.video.item.req(this.params).then(res => {
|
|
||||||
console.log(res);
|
|
||||||
this.url = res.url;
|
|
||||||
let URLS = res.url.replace('192.168.10.253',sysConfig.VUE_APP_VIDEOHOST);
|
|
||||||
if (flvjs.isSupported()) {
|
|
||||||
let videoElement = document.getElementById(item.markers[0].id + 'videoPlayer');
|
|
||||||
var mediaDataSource = {
|
|
||||||
type: 'flv',
|
|
||||||
hasAudio:false,
|
|
||||||
hasVideo:true,
|
|
||||||
isLive:false,
|
|
||||||
withCredentials:false,
|
|
||||||
url:URLS
|
|
||||||
};
|
|
||||||
let flvPlayer = flvjs.createPlayer(mediaDataSource, {
|
|
||||||
enableWorker: false,
|
|
||||||
lazyLoadMaxDuration: 3 * 60,
|
|
||||||
seekType: 'range',
|
|
||||||
});
|
|
||||||
flvPlayer.attachMediaElement(videoElement);
|
|
||||||
newEle2.setAttribute("style", "width: 327px;height:183px;background:url(/img/rotate_line.png) no-repeat;background-size:60px 60px;background-position:center center;");
|
|
||||||
flvPlayer.load();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
};
|
|
||||||
close.onclick = () => {
|
|
||||||
let nodeMark = document.getElementById(item.markers[0].id);
|
|
||||||
nodeMark.remove();
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
//人员
|
|
||||||
that.screenUserItem = item.properties.get("employee");
|
|
||||||
that.screenUser = true;
|
|
||||||
// debugger;
|
|
||||||
window.map.flyToMarker(that.userMarker[that.screenUserItem.mac], {
|
|
||||||
duration: 1000,
|
|
||||||
range: 200
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
} else if (type === 'Symbol(polygonmarker)') {
|
});
|
||||||
//危险作业
|
window.map.addControl(compassControl);
|
||||||
that.screenRisk = false;
|
let zoomControl = new jsmap.JSZoomControl({
|
||||||
that.screenWarning = false;
|
position: jsmap.JSControlPosition.LEFT_TOP,
|
||||||
that.areaDetailId = item.properties.get("area");
|
offset: {
|
||||||
let areaWork = that.areaList.filter(area=>{
|
x: 450,
|
||||||
return area.id==that.areaDetailId
|
y: 5
|
||||||
});
|
}
|
||||||
|
});
|
||||||
|
window.map.addControl(zoomControl);
|
||||||
|
});
|
||||||
|
window.map.on('mapClickNode', event => {
|
||||||
|
let item = event;
|
||||||
|
let that = this;
|
||||||
|
let type = event.nodeType.toString();
|
||||||
|
console.log(type === 'Symbol(icontextmaker)');
|
||||||
|
if (item.markers.length > 0) {
|
||||||
|
if (type === 'Symbol(boxmarker)') {
|
||||||
|
let areaId = item.properties.get("areaId");
|
||||||
|
console.log(areaId);
|
||||||
|
that.$API.am.area.item.req(areaId).then(res=>{
|
||||||
|
that.areaItemDetail = res;
|
||||||
|
that.screenJob = false;
|
||||||
|
that.screenWarning = false;
|
||||||
|
that.screenRisk = true;
|
||||||
|
})
|
||||||
|
//风险区域
|
||||||
|
} else if (type === 'Symbol(icontextmaker)') {
|
||||||
|
//摄像头和人员
|
||||||
|
if (document.getElementById(item.markers[0].id) === null) {
|
||||||
|
if (item.markers[0].image === "/img/camera.svg") {
|
||||||
|
//摄像头
|
||||||
|
this.params.json.data.channelId = item.markers[0].id;
|
||||||
|
let domMarker = new jsmap.JSDomMarker({
|
||||||
|
id: item.markers[0].id + 'mark',
|
||||||
|
position: new jsmap.JSPoint(item.markers[0].position.x, item.markers[0].position.y, 0),
|
||||||
|
floorId: 1,
|
||||||
|
depthTest: true,
|
||||||
|
content: `<div id="` + item.markers[0].id + `" style="display: block;position:absolute;z-index: 10;top: 0;background: rgba(24,36,51,.7);padding: 0 16px 16px;box-sizing: border-box" id="vchannelWrap"></div>`,
|
||||||
|
offset: jsmap.JSControlPosition.RIGHT_CENTER,
|
||||||
|
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
|
||||||
|
marginOffset: {
|
||||||
|
x: 30,
|
||||||
|
y: -50
|
||||||
|
},
|
||||||
|
properties: {
|
||||||
|
type: 0,
|
||||||
|
},
|
||||||
|
callback: (node) => {
|
||||||
|
console.log(node);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.domMarkerLayer.addMarker(domMarker);
|
||||||
|
var otest = document.getElementById(item.markers[0].id);
|
||||||
|
// 创建一个新dom,并设置icon，绑定点击事件
|
||||||
|
let newEle = document.createElement("div");
|
||||||
|
newEle.className = "v_title";
|
||||||
|
newEle.setAttribute("style", "display:flex;justify-content: space-between;padding:10px 0");
|
||||||
|
let title = document.createElement("div");
|
||||||
|
title.innerText = "实时监控";
|
||||||
|
newEle.style.color = "#ffffff";
|
||||||
|
let close = document.createElement("div");
|
||||||
|
close.className = "v_close";
|
||||||
|
close.setAttribute("style", "width: 16px;height: 16px;background: url(/img/close.png) no-repeat;background-size: 100% 100%;");
|
||||||
|
newEle.appendChild(title);
|
||||||
|
newEle.appendChild(close);
|
||||||
|
let newEle2 = document.createElement("video");
|
||||||
|
newEle2.id = item.markers[0].id + 'videoPlayer';
|
||||||
|
newEle2.setAttribute("style", "width: 327px;height:183px;background:url('/img/v_mask.png') no-repeat;background-size: 100% 100%;");
|
||||||
|
// 在对应dom 下追加创建的dom
|
||||||
|
otest.appendChild(newEle);
|
||||||
|
otest.appendChild(newEle2);
|
||||||
|
newEle2.onclick = () => {
|
||||||
|
newEle2.setAttribute("style", "width: 327px;height:183px;background:url(/img/rotate_line.png) no-repeat;background-size:60px 60px;background-position:center center;");
|
||||||
|
this.$API.am.video.item.req(this.params).then(res => {
|
||||||
|
console.log(res);
|
||||||
|
this.url = res.url;
|
||||||
|
let URLS = res.url.replace('192.168.10.253',sysConfig.VUE_APP_VIDEOHOST);
|
||||||
|
if (flvjs.isSupported()) {
|
||||||
|
let videoElement = document.getElementById(item.markers[0].id + 'videoPlayer');
|
||||||
|
var mediaDataSource = {
|
||||||
|
type: 'flv',
|
||||||
|
hasAudio:false,
|
||||||
|
hasVideo:true,
|
||||||
|
isLive:false,
|
||||||
|
withCredentials:false,
|
||||||
|
url:URLS
|
||||||
|
};
|
||||||
|
let flvPlayer = flvjs.createPlayer(mediaDataSource, {
|
||||||
|
enableWorker: false,
|
||||||
|
lazyLoadMaxDuration: 3 * 60,
|
||||||
|
seekType: 'range',
|
||||||
|
});
|
||||||
|
flvPlayer.attachMediaElement(videoElement);
|
||||||
|
newEle2.setAttribute("style", "width: 327px;height:183px;background:url(/img/rotate_line.png) no-repeat;background-size:60px 60px;background-position:center center;");
|
||||||
|
flvPlayer.load();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
};
|
||||||
|
close.onclick = () => {
|
||||||
|
let nodeMark = document.getElementById(item.markers[0].id);
|
||||||
|
nodeMark.remove();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
//人员
|
||||||
|
that.screenUserItem = item.properties.get("employee");
|
||||||
|
that.screenUser = true;
|
||||||
|
// debugger;
|
||||||
|
window.map.flyToMarker(that.userMarker[that.screenUserItem.mac], {
|
||||||
|
duration: 1000,
|
||||||
|
range: 200
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (type === 'Symbol(polygonmarker)') {
|
||||||
|
//危险作业
|
||||||
|
that.screenRisk = false;
|
||||||
|
that.screenWarning = false;
|
||||||
|
that.areaDetailId = item.properties.get("area");
|
||||||
|
let areaWork = that.areaList.filter(area=>{
|
||||||
|
return area.id==that.areaDetailId
|
||||||
|
});
|
||||||
|
|
||||||
that.areaRowClick(areaWork[0]);
|
that.areaRowClick(areaWork[0]);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
}
|
}
|
||||||
} else {
|
});
|
||||||
}
|
|
||||||
});
|
})
|
||||||
//左侧数据统计
|
//左侧数据统计
|
||||||
this.getManCount();//人员统计$$
|
this.getManCount();//人员统计$$
|
||||||
this.getWarnings();//报警统计$$
|
this.getWarnings();//报警统计$$
|
||||||
this.getAreaList();//区域/风险区域$$
|
this.getAreaList();//区域/风险区域$$
|
||||||
this.getGroup();//部门$$
|
this.getGroup();//部门$$
|
||||||
//右上展示数据
|
//右上展示数据
|
||||||
this.getWarningTotal();//事件统计
|
this.getWarningTotal();//事件统计
|
||||||
this.getWarningType();//事件类型
|
this.getWarningType();//事件类型
|
||||||
let pageHeight = document.getElementsByClassName('screen-cockpit')[0].clientHeight;
|
let pageHeight = document.getElementsByClassName('screen-cockpit')[0].clientHeight;
|
||||||
let height1 = document.getElementsByClassName('cockpit-count')[0].clientHeight;
|
let height1 = document.getElementsByClassName('cockpit-count')[0].clientHeight;
|
||||||
let height2 = document.getElementsByClassName('cockpit-alarm')[0].clientHeight;
|
let height2 = document.getElementsByClassName('cockpit-alarm')[0].clientHeight;
|
||||||
let height3 = document.getElementsByClassName('area-simple-title')[0].clientHeight;
|
let height3 = document.getElementsByClassName('area-simple-title')[0].clientHeight;
|
||||||
// debugger;
|
// debugger;
|
||||||
let domHeight = pageHeight - height1 - 310 - 84;
|
let domHeight = pageHeight - height1 - 310 - 84;
|
||||||
let areaTableHeight = domHeight - height3 - 50;
|
let areaTableHeight = domHeight - height3 - 50;
|
||||||
this.areaTableHeight = areaTableHeight;
|
this.areaTableHeight = areaTableHeight;
|
||||||
document.getElementsByClassName('cockpit-info')[0].style.height = domHeight + 'px';
|
document.getElementsByClassName('cockpit-info')[0].style.height = domHeight + 'px';
|
||||||
// document.getElementsByClassName('area-info-body')[0].style.height = simpleBodyHeight + 'px';
|
// document.getElementsByClassName('area-info-body')[0].style.height = simpleBodyHeight + 'px';
|
||||||
},
|
},
|
||||||
computed:{
|
computed:{
|
||||||
|
|
@ -1007,6 +1015,29 @@ export default {
|
||||||
clearInterval(this.eventAudioTimer)//事件
|
clearInterval(this.eventAudioTimer)//事件
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
loadScript(id, url, callback) {
|
||||||
|
//如果已经存在这个id，则证明已经加载过，已经有这个js文件了，可以直接执行回调里面的操作
|
||||||
|
if (document.querySelector(`#${id}`)) {
|
||||||
|
callback && callback()
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
//第一次加载，先创建 script 标签
|
||||||
|
const script = document.createElement('script');
|
||||||
|
script.src = url;
|
||||||
|
//创建id属性
|
||||||
|
script.setAttribute('id', id);
|
||||||
|
//获取第一个script标签
|
||||||
|
const firstScript = document.getElementsByTagName('script')[0];
|
||||||
|
//获取第一个script标签的父节点 BODY,在body的第一个script引用之前插入，即把这个动态的js文件放在第一个调用
|
||||||
|
firstScript.parentNode.insertBefore(script, firstScript);
|
||||||
|
//script 一加载就执行
|
||||||
|
script.onload = script.onreadystatechange = function() {
|
||||||
|
// 加载完成
|
||||||
|
if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
|
||||||
|
callback && callback()
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
//查询某个人员
|
//查询某个人员
|
||||||
searchOne(keyword){
|
searchOne(keyword){
|
||||||
let that = this;
|
let that = this;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue