387 lines
13 KiB
JavaScript
387 lines
13 KiB
JavaScript
let element, layer, table, tree;
|
|
const bidCode = parent.$('#bidPro').val();
|
|
let map;
|
|
|
|
layui.use(['layer', 'element', 'table', 'tree'], function () {
|
|
element = layui.element;
|
|
layer = layui.layer;
|
|
table = layui.table;
|
|
tree = layui.tree;
|
|
|
|
document.getElementById("myButton").addEventListener("click", function() {
|
|
window.location.href = "../personnelControl/personnelControlList.html";
|
|
});
|
|
|
|
// 响应成功后的拦截器
|
|
$.ajaxSetup({
|
|
beforeSend: function(xhr, options) {
|
|
var originalSuccess = options.success
|
|
options.success = function(data, textStatus, jqXhr) {
|
|
data = modifyResponseData(data);
|
|
// success(data,textStatus, jqXhr);
|
|
originalSuccess.apply(this, arguments)
|
|
}
|
|
}
|
|
})
|
|
|
|
mapInit();
|
|
|
|
//人员列表
|
|
PersonnelList();
|
|
|
|
//人员运动趋预警
|
|
PersonnelMovementWarning();
|
|
|
|
//穿戴装备
|
|
wearGarList();
|
|
|
|
|
|
});
|
|
|
|
// 人员列表
|
|
function PersonnelList(){
|
|
const url = commonUrl + "screen/largeScreen/personnelControl/getPersonnelList";
|
|
const params = {
|
|
"roleCode": roleCode,
|
|
"orgId": orgId,
|
|
"userId": userId,
|
|
"bidCode": bidCode,
|
|
"keyWord": $("#keyWord").val()
|
|
}
|
|
let encryptStr = encryptCBC(JSON.stringify(params));
|
|
ajaxRequest(url, "POST", encryptStr, true, function () {
|
|
}, function (result) {
|
|
console.log(result);
|
|
if (result.code === 200) {
|
|
// 人员列表树
|
|
let treeList = getTreeList(result.data, bidCode, []);
|
|
renderTree(treeList);
|
|
} else if (result.code === 500) {
|
|
layer.msg(result.msg, { icon: 2 });
|
|
}else if(result.code === 401){
|
|
loginout(1)
|
|
}
|
|
}, function (xhr) {
|
|
// error(xhr)
|
|
} , "application/json",aqEnnable);
|
|
|
|
}
|
|
|
|
//递归拼接树
|
|
function getTreeList(rootList, id, List) {
|
|
for (let item of rootList) {
|
|
if (item.parentId == id) {
|
|
let newItem = Object.assign({}, item); // 创建一个新的对象，避免直接修改原始对象
|
|
newItem.spread = true;
|
|
newItem.children = [];
|
|
List.push(newItem);
|
|
getTreeList(rootList, newItem.id, newItem.children);
|
|
}
|
|
}
|
|
return List;
|
|
}
|
|
|
|
//layui渲染树
|
|
function renderTree(treeList) {
|
|
tree.render({
|
|
elem: '#tree',
|
|
data: treeList,
|
|
isJump: false, // 禁止点击节点时跳转
|
|
showLine: false, // 不显示连接线
|
|
onlyIconControl: false, // 仅允许节点左侧图标控制展开收起
|
|
click: function(obj) {
|
|
}
|
|
});
|
|
}
|
|
|
|
//人员运动趋预警
|
|
function PersonnelMovementWarning(){
|
|
const url = commonUrl + "screen/largeScreen/personnelControl/getPersonnelMovementList";
|
|
|
|
table.render({
|
|
elem: '#dome',
|
|
url: url,
|
|
skin: 'line',
|
|
page: false,
|
|
headers:{
|
|
decrypt:"decrypt",
|
|
"Authorization":token
|
|
},
|
|
where: {
|
|
roleCode: roleCode,
|
|
orgId: orgId,
|
|
userId: userId,
|
|
bidCode: bidCode
|
|
},
|
|
cols: [[
|
|
{field: 'warningTime', align: 'center', title: '时间'},
|
|
{field: 'warningContent', align: 'center', title: '预警内容'},
|
|
]],
|
|
initComplete: function () {
|
|
// 在表格渲染完成后，重新渲染序号列
|
|
var that = this.elem.next();
|
|
var tool = that.children('.layui-table-box').children('.layui-table-fixed').children('.layui-table-body').children('.layui-table');
|
|
tool.find("tr").each(function (index, item) {
|
|
$(this).find('td[data-field="LAY_TABLE_INDEX"]').text(index + 1);
|
|
});
|
|
},
|
|
done:function(res, curr, count, origin){
|
|
console.log(res);
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
//穿戴装备
|
|
function wearGarList(){
|
|
const url = commonUrl + "screen/largeScreen/personnelControl/getWearEquipmentList";
|
|
|
|
table.render({
|
|
elem: '#dome1',
|
|
url: url,
|
|
skin: 'line',
|
|
page: false,
|
|
headers:{
|
|
decrypt:"decrypt",
|
|
"Authorization":token
|
|
},
|
|
where: {
|
|
roleCode: roleCode,
|
|
orgId: orgId,
|
|
userId: userId,
|
|
bidCode: bidCode
|
|
},
|
|
cols: [[
|
|
{field: 'number', width:'10%',title: '序号', align: 'center', type: 'numbers'},
|
|
{field: 'deviceType', width:'20%', align: 'center', title: '装备类型'},
|
|
{field: 'deviceName', width:'20%', align: 'center', title: '装备名称'},
|
|
{field: 'userName', width:'20%', align: 'center', title: '负责人'},
|
|
{field: 'status', align: 'center', width:'10%', title: '状态' ,templet: function (d) {
|
|
if(d.status == 1){
|
|
return "在线";
|
|
}else if(d.status == 0){
|
|
return '<span color={red}>离线</span>';
|
|
}
|
|
}
|
|
},
|
|
{field: 'warningContent', align: 'center', fixed: 'right', width:'10%', title: '操作', templet: function (d) {
|
|
if (d.status == 0) {
|
|
return "--";
|
|
}else{
|
|
return '<a style="color:#008000;cursor: pointer;" onclick="openTalk()">开启对讲</a>';
|
|
}
|
|
|
|
}
|
|
},
|
|
]],
|
|
initComplete: function () {
|
|
// 在表格渲染完成后，重新渲染序号列
|
|
var that = this.elem.next();
|
|
var tool = that.children('.layui-table-box').children('.layui-table-fixed').children('.layui-table-body').children('.layui-table');
|
|
tool.find("tr").each(function (index, item) {
|
|
$(this).find('td[data-field="LAY_TABLE_INDEX"]').text(index + 1);
|
|
});
|
|
},
|
|
done:function(res, curr, count, origin){
|
|
console.log(res);
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
// 安全帽开启对讲
|
|
function openTalk(){
|
|
return layer.msg('网络异常，无法开启对讲',{icon:2});
|
|
}
|
|
|
|
function mapInit(){
|
|
var lat,lon;
|
|
// if (navigator.geolocation) {
|
|
// navigator.geolocation.getCurrentPosition(function (position) {
|
|
// lat = position.coords.latitude;
|
|
// lon = position.coords.longitude;
|
|
lat = '31.93566198931321';
|
|
lon = '117.16010067578883';
|
|
console.log(lon,lat)
|
|
map= new BMapGL.Map("map");
|
|
map.centerAndZoom(new BMapGL.Point(lon,lat), 11);
|
|
map.enableScrollWheelZoom(true);
|
|
|
|
// 人员定位
|
|
personnelPositioning();
|
|
|
|
// 绘制镂空面
|
|
RecreateFence();
|
|
|
|
|
|
// });
|
|
// } else {
|
|
// console.log("浏览器不支持 Geolocation API");
|
|
// }
|
|
|
|
}
|
|
|
|
//人员定位
|
|
function personnelPositioning(){
|
|
const url = commonUrl + "screen/largeScreen/personnelControl/personnelCoordinatePoint";
|
|
const params = {
|
|
"roleCode": roleCode,
|
|
"orgId": orgId,
|
|
"userId": userId,
|
|
"bidCode": bidCode
|
|
}
|
|
let encryptStr = encryptCBC(JSON.stringify(params));
|
|
ajaxRequest(url, "POST", encryptStr, true, function () {
|
|
}, function (result) {
|
|
console.log(result);
|
|
if (result.code === 200) {
|
|
|
|
let data = result.data;
|
|
data.forEach(function(item) {
|
|
let arrName = item.modeName.split(',');
|
|
let arr = item.val.split(',')
|
|
for (let i = 0; i < arrName.length; i++) {
|
|
item[arrName[i]] = arr[i];
|
|
}
|
|
// 解析经纬度和绑定人
|
|
var latitude = parseFloat(item.维度); // 维度
|
|
var longitude = parseFloat(item.经度); // 经度
|
|
var userId=item.绑定人;
|
|
var bindUser = item.userName; // 绑定人
|
|
|
|
//创建标记点
|
|
var point = new BMapGL.Point(longitude, latitude);
|
|
var marker = new BMapGL.Marker(point);
|
|
map.addOverlay(marker);
|
|
|
|
// 创建信息窗口
|
|
var opts = {
|
|
width: 200,
|
|
height: 100,
|
|
title: '人员信息'
|
|
};
|
|
var content = createInfoWindowContent(item.userName, userId, item.phone); // 使用解析后的数据创建信息窗口内容
|
|
var infoWindow = new BMapGL.InfoWindow(content, opts);
|
|
|
|
// 点标记添加点击事件
|
|
marker.addEventListener('click', function () {
|
|
map.openInfoWindow(infoWindow, point); // 开启信息窗口
|
|
});
|
|
});
|
|
console.log(data);
|
|
// 创建信息窗口内容
|
|
function createInfoWindowContent(userName, bindUser, phone) {
|
|
return '<div>' + userName + ' ' + '</div>' +
|
|
'<div>' + phone + '</div>' +
|
|
'<div id="showTrack" onclick="test(\'' + bindUser + '\')"><a style="color: #1e9fff" href="#"">查看轨迹</a></div>';
|
|
}
|
|
// // 创建点标记
|
|
// let marker = new BMapGL.Marker(new BMapGL.Point(lon,lat));
|
|
// map.addOverlay(marker);
|
|
// // 创建信息窗口
|
|
// var opts = {
|
|
// width: 200,
|
|
// height: 100,
|
|
// title: '人员信息'
|
|
// };
|
|
// var content = createInfoWindowContent();
|
|
// var infoWindow = new BMapGL.InfoWindow(content, opts);
|
|
// // 点标记添加点击事件
|
|
// marker.addEventListener('click', function () {
|
|
// map.openInfoWindow(infoWindow, new BMapGL.Point(lon,lat)); // 开启信息窗口
|
|
// });
|
|
// // 创建信息窗口内容
|
|
// function createInfoWindowContent() {
|
|
// return '<div>张三 男 xx岁</div>' +
|
|
// '<div>17681010134</div>' +
|
|
// '<div id="showTrack" onclick="test()"><a style="color: #1e9fff" href="#"">查看轨迹</a></div>';
|
|
// }
|
|
|
|
} else if (result.code === 500) {
|
|
layer.msg(result.msg, { icon: 2 });
|
|
}else if(result.code === 401){
|
|
loginout(1)
|
|
}
|
|
}, function (xhr) {
|
|
// error(xhr)
|
|
} , "application/json",aqEnnable);
|
|
}
|
|
|
|
// 重新绘制围栏
|
|
function RecreateFence(){
|
|
const url = commonUrl + "screen/largeScreen/personnelControl/getReplicaFence";
|
|
const params = {
|
|
"roleCode": roleCode,
|
|
"orgId": orgId,
|
|
"userId": userId,
|
|
"bidCode": bidCode
|
|
}
|
|
let encryptStr = encryptCBC(JSON.stringify(params));
|
|
ajaxRequest(url, "POST", encryptStr, true, function () {
|
|
}, function (result) {
|
|
// console.log(result);
|
|
if (result.code === 200) {
|
|
|
|
let rawData = result.data;
|
|
let polygonsData = [];
|
|
|
|
// 将原始数据按 id 分组
|
|
let idGroups = {};
|
|
rawData.forEach(function(item) {
|
|
if (!idGroups[item.id]) {
|
|
idGroups[item.id] = [];
|
|
}
|
|
idGroups[item.id].push(item);
|
|
});
|
|
|
|
// 将每组数据转换为 BMapGL.Point 格式并添加到 polygonsData 中
|
|
for (let id in idGroups) {
|
|
let points = idGroups[id].map(function(item) {
|
|
return new BMapGL.Point(parseFloat(item.longitude), parseFloat(item.latitude));
|
|
});
|
|
let color = idGroups[id][0].color;
|
|
polygonsData.push({ points: points, color: color });
|
|
}
|
|
console.log(polygonsData);
|
|
polygonsData.forEach(function(data) {
|
|
// 创建一个多边形对象
|
|
var polygon = new BMapGL.Polygon([data.points], {
|
|
zIndex: 5,
|
|
fillOpacity: 0,
|
|
strokeColor: data.color,
|
|
strokeWeight: 2,
|
|
strokeOpacity: 1
|
|
});
|
|
map.addOverlay(polygon);
|
|
});
|
|
|
|
} else if (result.code === 500) {
|
|
layer.msg(result.msg, { icon: 2 });
|
|
}else if(result.code === 401){
|
|
loginout(1)
|
|
}
|
|
}, function (xhr) {
|
|
// error(xhr)
|
|
} , "application/json",aqEnnable);
|
|
}
|
|
function test(bindUser){
|
|
// 查看轨迹函数
|
|
sessionStorage.setItem("bindUser", bindUser);
|
|
sessionStorage.setItem("bidCode", bidCode);
|
|
layer.open({
|
|
type: 2,
|
|
title: '运动轨迹',
|
|
shadeClose: true,
|
|
shade: 0.8,
|
|
area: ['50%', '80%'],
|
|
content: './MovementTrack.html'
|
|
});
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|