This commit is contained in:
2309368887@qq.com 2022-07-08 16:31:00 +08:00
commit 4349b634dd
2 changed files with 109 additions and 111 deletions

View File

@ -1,8 +1,10 @@
<template> <template>
<el-drawer <el-drawer
id="mapDrawer"
:title="channelName+'位置标记'" :title="channelName+'位置标记'"
v-model="visible" v-model="visible"
destroy-on-close destroy-on-close
:size="'80%'"
@closed="closeDrawer" @closed="closeDrawer"
> >
<el-form <el-form
@ -193,14 +195,12 @@
// //
submit() { submit() {
let that = this; let that = this;
/*let item = this.form.location; let item = this.form.location;
let tool = new jsmap.JSMapCoordTool(window.map); console.log(this.form.location);
let coordinate = {x:item[0],y:item[1],z:item.z}; that.form.code = that.channelCode;
let pixel = tool.mapToScreenCoordinate(coordinate); that.form.type = that.channelType;
that.form.location = pixel;*/ that.form.name = that.channelName;
this.form.code = this.channelCode; that.form.location = {x:item[0],y:item[1],z:item[2]};
this.form.type = this.channelType;
this.form.name = this.channelName;
that.$API.am.tdevice.labelLocation.req(that.form) that.$API.am.tdevice.labelLocation.req(that.form)
.then(res => { .then(res => {
that.isSaveing = false; that.isSaveing = false;
@ -217,6 +217,8 @@
}; };
</script> </script>
<style> <style scoped>
.el-drawer.open{
width: 70%!important;
}
</style> </style>

View File

@ -327,7 +327,13 @@
<div class="simple-btn-bg alarm-btn">需充电卡片0人</div> <div class="simple-btn-bg alarm-btn">需充电卡片0人</div>
</div> </div>
<div class="info-body"> <div class="info-body">
<el-table :data="areaList" style="width: 100%" highlight-current-row class="bigScreenTable"> <el-table
:data="areaList"
style="width: 100%"
highlight-current-row
class="bigScreenTable"
@row-click="areaRowClick"
>
<el-table-column label="区域" prop="name"></el-table-column> <el-table-column label="区域" prop="name"></el-table-column>
<el-table-column label="当前人数" prop="count_people"></el-table-column> <el-table-column label="当前人数" prop="count_people"></el-table-column>
</el-table> </el-table>
@ -342,7 +348,18 @@
@node-click="groupClick" @node-click="groupClick"
></el-tree>--> ></el-tree>-->
</div> </div>
<div class="alarm-detail-info left_arrow" v-if="areaDetail">
<div class="simple-title">
<div><span>区域统计</span></div>
<span class="icon-close" @click="areaDetail=false"></span>
</div>
<div class="detail-content">
<div class="content-head">
</div>
<div class="content-body">
</div>
</div>
</div>
</div> </div>
</div> </div>
<!--切换--> <!--切换-->
@ -701,7 +718,7 @@
<!--风险区域--> <!--风险区域-->
<div class="screen-risk" v-if="screenRisk"> <div class="screen-risk" v-if="screenRisk">
<div class="simple-title"> <div class="simple-title">
<div>区域风险详情</div> <div>风险区域详情</div>
<div class="simple-btn" @click="closeScreenRisk">关闭</div> <div class="simple-btn" @click="closeScreenRisk">关闭</div>
</div> </div>
<div class="risk-content"> <div class="risk-content">
@ -818,6 +835,7 @@
countIndex: '2', countIndex: '2',
markList: [false, false, false, false, false, false, false], markList: [false, false, false, false, false, false, false],
autoRun: false, autoRun: false,
areaDetail: false,
screenJob: false, screenJob: false,
screenUser: false, screenUser: false,
screenRisk: false, screenRisk: false,
@ -934,7 +952,6 @@
this.polygonMarkerLayers();// this.polygonMarkerLayers();//
this.speakersMaskerLayers();// this.speakersMaskerLayers();//
this.jobDomMarkerLayers();// this.jobDomMarkerLayers();//
// let compassControl = new jsmap.JSMapGestureController(map);
let compassControl = new jsmap.JSCompassControl({ let compassControl = new jsmap.JSCompassControl({
position: jsmap.JSControlPosition.LEFT_TOP, position: jsmap.JSControlPosition.LEFT_TOP,
offset: { offset: {
@ -1058,7 +1075,7 @@
this.getAreas();///$$ this.getAreas();///$$
this.getGroup();//$$ this.getGroup();//$$
// //
this.getVchannels();//$$ // this.getVchannels();//$$
this.getDangers();//$$ this.getDangers();//$$
// this.getRisks();//$$ // this.getRisks();//$$
this.getSpeakers();//$$ this.getSpeakers();//$$
@ -1069,8 +1086,12 @@
this.getWarnings();//$$ this.getWarnings();//$$
this.getAreas();//*/ this.getAreas();//*/
},3000) },3000)
}, },
methods: { methods: {
areaRowClick(){
this.areaDetail = true;
},
// //
getAllPost(){ getAllPost(){
this.$API.system.post.list.req({page:0}).then(res=>{ this.$API.system.post.list.req({page:0}).then(res=>{
@ -1099,7 +1120,7 @@
arr.push(obj) arr.push(obj)
} }
this.postList =arr; this.postList =arr;
console.log(arr) // console.log(arr)
}) })
}, },
// //
@ -1166,7 +1187,7 @@
this.userList = res.filter(item => { this.userList = res.filter(item => {
return item.my_info.employee return item.my_info.employee
}); });
console.log(this.userList) // console.log(this.userList)
} }
}) })
}, },
@ -1197,19 +1218,19 @@
if (res.err_msg) { if (res.err_msg) {
} else { } else {
this.group = genTree(res); this.group = genTree(res);
console.log(this.group); // console.log(this.group);
} }
}); });
}, },
// //
groupClick(data) { groupClick(data) {
console.log(data); // console.log(data);
}, },
// //
showUserDetail() { showUserDetail() {
this.screenUserDetail = true; this.screenUserDetail = true;
this.$API.hrm.employee.item.req(this.screenUserItem.id).then(res=>{ this.$API.hrm.employee.item.req(this.screenUserItem.id).then(res=>{
console.log(res); // console.log(res);
this.screenUserItemDetail = res; this.screenUserItemDetail = res;
}) })
}, },
@ -1227,70 +1248,79 @@
}, },
//layer //layer
riskMaskerLayers() { riskMaskerLayers() {
this.riskMarkerLayer = new jsmap.JSBoxMarkerLayer({ let that = this;
that.riskMarkerLayer = new jsmap.JSBoxMarkerLayer({
minimumLevel: 3, minimumLevel: 3,
maxmumLevel: 22, maxmumLevel: 22,
show: false show: false
}); });
window.map.addLayer(this.riskMarkerLayer); window.map.addLayer(that.riskMarkerLayer);
this.showRiskMarkers(); that.showRiskMarkers();
}, },
//layer //layer
cameraMaskerLayers() {// cameraMaskerLayers() {//
this.cameraMaskerLayer = new jsmap.JSIconTextMarkerLayer({ let that = this;
that.cameraMaskerLayer = new jsmap.JSIconTextMarkerLayer({
minimumLevel: 3, minimumLevel: 3,
maxmumLevel: 22, maxmumLevel: 22,
show: false show: false
}); });
window.map.addLayer(this.cameraMaskerLayer); window.map.addLayer(that.cameraMaskerLayer);
this.showCameraMarkers(); debugger;
console.log(that.cameraMaskerLayer);
that.getVchannels();
}, },
// //
domMarkerLayers() { domMarkerLayers() {
this.domMarkerLayer = new jsmap.JSDomMarkerLayer({ let that = this;
that.domMarkerLayer = new jsmap.JSDomMarkerLayer({
minimumLevel: 3, minimumLevel: 3,
maxmumLevel: 22, maxmumLevel: 22,
show: true show: true
}); });
window.map.addLayer(this.domMarkerLayer); window.map.addLayer(that.domMarkerLayer);
}, },
jobDomMarkerLayers() { jobDomMarkerLayers() {
this.jobDomMarkerLayer = new jsmap.JSDomMarkerLayer({ let that = this;
that.jobDomMarkerLayer = new jsmap.JSDomMarkerLayer({
minimumLevel: 3, minimumLevel: 3,
maxmumLevel: 22, maxmumLevel: 22,
show: false show: false
}); });
window.map.addLayer(this.jobDomMarkerLayer); window.map.addLayer(that.jobDomMarkerLayer);
this.showJobDomMarkers(); that.showJobDomMarkers();
}, },
//layer //layer
userMaskerLayers() {// userMaskerLayers() {//
this.userMaskerLayer = new jsmap.JSIconTextMarkerLayer({ let that = this;
that.userMaskerLayer = new jsmap.JSIconTextMarkerLayer({
minimumLevel: 3, minimumLevel: 3,
maxmumLevel: 22, maxmumLevel: 22,
show: false show: false
}); });
window.map.addLayer(this.userMaskerLayer); window.map.addLayer(that.userMaskerLayer);
}, },
//layer //layer
speakersMaskerLayers() {// speakersMaskerLayers() {//
this.materialsMaskerLayer = new jsmap.JSIconTextMarkerLayer({ let that = this;
that.materialsMaskerLayer = new jsmap.JSIconTextMarkerLayer({
minimumLevel: 3, minimumLevel: 3,
maxmumLevel: 22, maxmumLevel: 22,
show: false show: false
}); });
window.map.addLayer(this.materialsMaskerLayer); window.map.addLayer(that.materialsMaskerLayer);
this.showSpeakersMarkers(); this.showSpeakersMarkers();
}, },
//Layer //Layer
polygonMarkerLayers() {// polygonMarkerLayers() {//
this.polygonMaskerLayer = new jsmap.JSPolygonMarkerLayer({ let that = this;
that.polygonMaskerLayer = new jsmap.JSPolygonMarkerLayer({
minimumLevel: 3, minimumLevel: 3,
maxmumLevel: 22, maxmumLevel: 22,
show: false show: false
}); });
window.map.addLayer(this.polygonMaskerLayer); window.map.addLayer(that.polygonMaskerLayer);
this.showPolygonMarkers(); that.showPolygonMarkers();
}, },
// //
showRiskMarkers() { showRiskMarkers() {
@ -1360,14 +1390,14 @@
this.pointMarkerLayer.addMarker(pointMarker); this.pointMarkerLayer.addMarker(pointMarker);
},*/ },*/
// //
showCameraMarkers() { showCameraMarkers(list) {
let that = this; let that = this;
let iconTextMarker = null; list.forEach(item => {
that.Vchannels.forEach(item => { let cameraMarker = null;
let pixel = item.my_info.location; let pixel = item.my_info.location;
iconTextMarker = new jsmap.JSIconTextMarker({ cameraMarker = new jsmap.JSIconTextMarker({
id: item.channelCode, id: item.channelCode,
position: {x: pixel[0], y: pixel[1], z: pixel[2]}, // position: {x: pixel.x, y: pixel.y, z: pixel.z}, //
floorId: 1, //id,1 floorId: 1, //id,1
image: "/img/camera.svg", image: "/img/camera.svg",
text: '摄像头', text: '摄像头',
@ -1384,20 +1414,18 @@
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000), displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
nearFarScale: new jsmap.JSNearFarScale(0.0, 1, 500, 1), nearFarScale: new jsmap.JSNearFarScale(0.0, 1, 500, 1),
show: true, show: true,
callback: (marker) => { callback: () => {
// iconTextMarker.jump();
console.log(marker);
} }
}); });
that.cameraMaskerLayer.addMarker(iconTextMarker); debugger;
console.log(that.cameraMaskerLayer);
that.cameraMaskerLayer.addMarker(cameraMarker);
}) })
}, },
// //
showUserMarkers() { showUserMarkers() {
let that = this; let that = this;
let iconTextMarker = null,iconTextMarker1 = null; let iconTextMarker = null;
debugger;
if(that.userList.length>0){ if(that.userList.length>0){
let employee_ = that.userList[0].my_info.employee_; let employee_ = that.userList[0].my_info.employee_;
iconTextMarker = new jsmap.JSIconTextMarker({ iconTextMarker = new jsmap.JSIconTextMarker({
@ -1426,9 +1454,26 @@
return employee_ return employee_
} }
}); });
that.userMaskerLayer.addMarker(iconTextMarker); that.userMaskerLayer.addMarker(iconTextMarker);
setTimeout(function () {
console.log(that.userMaskerLayer);
that.userMaskerLayer.updateMarkerPosition(iconTextMarker,{
floorId:1,
position: {x:114.62923138539462, y:38.8133418942642, z:0},
animate: true
});//,
},3000);
setTimeout(function () {
console.log(that.userMaskerLayer);
that.userMaskerLayer.updateMarkerPosition(iconTextMarker,{
floorId:1,
position: {x:114.6315404372349, y: 38.813557855009435, z:0},
animate: true
});//,
},6000);
debugger; debugger;
let employee_1 = that.userList[1].my_info.employee_; /*let employee_1 = that.userList[1].my_info.employee_;
iconTextMarker1 = new jsmap.JSIconTextMarker({ iconTextMarker1 = new jsmap.JSIconTextMarker({
id: that.userList[1].my_info.code, id: that.userList[1].my_info.code,
position: {x: 114.62923138539462, y: 38.8133418942642, z: 0}, // position: {x: 114.62923138539462, y: 38.8133418942642, z: 0}, //
@ -1456,66 +1501,15 @@
} }
}); });
that.userMaskerLayer.addMarker(iconTextMarker1); that.userMaskerLayer.addMarker(iconTextMarker1);
}else{
setTimeout(function () { setTimeout(function () {
let employee_ = that.userList[0].my_info.employee_; that.userMaskerLayer.updateMarkerPosition(jsmap.JSIconTextMarker,{
iconTextMarker = new jsmap.JSIconTextMarker({ floorId:1,
id: that.userList[0].my_info.code, position: {x:114.6315404372349, y:38.813557855009435, z:0},
position: {x: 114.6315404372349, y: 38.813557855009435, z: 0}, // animate: true
floorId: 1, //id,1 });//,
image: "/img/user.png",
text: employee_.name,
font: '10px sans-serif',
fontColor: '#ffffff',
imageHeight: 25,
imageWidth: 25,
backgroundColor: 'rgba(0,0,0,0.3)',
backgroundRadius: 1,
backgroundStrokeColor: 'rgba(0,0,0,0.3)',
backgroundStrokeWidth: 1,
iconTextType: jsmap.JSIconTextType.TOPTEXT_BOTTOMICON,
allowPicking: true,
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
nearFarScale: new jsmap.JSNearFarScale(0.0, 1, 500, 1),
show: true,
properties: {
employee: employee_
},
callback: (marker) => {
return employee_
}
});
that.userMaskerLayer.addMarker(iconTextMarker);
let employee_1 = that.userList[1].my_info.employee_; },3000)*/
iconTextMarker1 = new jsmap.JSIconTextMarker({ }else{
id: that.userList[1].my_info.code,
position: {x: 114.62923138539462, y: 38.8133418942642, z: 0}, //
floorId: 1, //id,1
image: "/img/user.png",
text: employee_1.name,
font: '10px sans-serif',
fontColor: '#ffffff',
imageHeight: 25,
imageWidth: 25,
backgroundColor: 'rgba(0,0,0,0.3)',
backgroundRadius: 1,
backgroundStrokeColor: 'rgba(0,0,0,0.3)',
backgroundStrokeWidth: 1,
iconTextType: jsmap.JSIconTextType.TOPTEXT_BOTTOMICON,
allowPicking: true,
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
nearFarScale: new jsmap.JSNearFarScale(0.0, 1, 500, 1),
show: true,
properties: {
employee: employee_1
},
callback: (marker) => {
return employee_1
}
});
that.userMaskerLayer.addMarker(iconTextMarker1);
},3000)
} }
/*that.userList.forEach(item => { /*that.userList.forEach(item => {
if (item.my_info.code) { if (item.my_info.code) {
@ -1760,11 +1754,13 @@
}, },
// //
getVchannels() { getVchannels() {
this.$API.am.video.list.req(this.params).then(res => { let that = this;
this.$API.am.video.list.req(that.params).then(res => {
if (res.err_msg) { if (res.err_msg) {
this.$message.error(res.err_msg); this.$message.error(res.err_msg);
} else { } else {
this.Vchannels = res.pageData; that.Vchannels = res.pageData;
that.showCameraMarkers(res.pageData);
} }
}); });
}, },