418 lines
15 KiB
JavaScript
418 lines
15 KiB
JavaScript
|
let element, layer, table, tree, from, $, colorpicker;
|
|||
|
|
const bidCode = parent.$('#bidPro').val();
|
|||
|
|
let map;
|
|||
|
|
let overlays = [];
|
|||
|
|
let coordinates = []; //电子围栏坐标存放处
|
|||
|
|
|
|||
|
|
layui.use(['layer', 'element', 'table', 'tree', 'form', 'jquery'], function () {
|
|||
|
|
element = layui.element;
|
|||
|
|
colorpicker = layui.colorpicker;
|
|||
|
|
layer = layui.layer;
|
|||
|
|
table = layui.table;
|
|||
|
|
tree = layui.tree;
|
|||
|
|
form = layui.form;
|
|||
|
|
$ = layui.jquery;
|
|||
|
|
|
|||
|
|
// 响应成功后的拦截器
|
|||
|
|
$.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)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
//围栏类型下拉选
|
|||
|
|
getRailLists();
|
|||
|
|
//报警下拉选
|
|||
|
|
getGiveAnAlarmLists();
|
|||
|
|
//警戒等级下拉选
|
|||
|
|
getGuardAgainstLists();
|
|||
|
|
|
|||
|
|
colorpicker.render({
|
|||
|
|
elem: '#ID-colorpicker-demo-form',
|
|||
|
|
color: '#1c97f5',
|
|||
|
|
done: function(color){
|
|||
|
|
$('#color').val(color);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
mapInit('recreate');
|
|||
|
|
|
|||
|
|
$('#addButton').on('click', function(){
|
|||
|
|
$('#hiddenContent').toggle(); // 切换显示与隐藏
|
|||
|
|
$('#content').toggle(); // 切换显示与隐藏
|
|||
|
|
mapInit('draw');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('#return').on('click', function(){
|
|||
|
|
$('#hiddenContent').toggle(); // 切换显示与隐藏
|
|||
|
|
$('#content').toggle(); // 切换显示与隐藏
|
|||
|
|
mapInit('recreate');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
form.on('submit(demo1)', function(data){
|
|||
|
|
let field = data.field; // 获取表单字段值
|
|||
|
|
field.arrayField = coordinates.toString();
|
|||
|
|
|
|||
|
|
field.roleCode = roleCode;
|
|||
|
|
field.orgId = orgId;
|
|||
|
|
field.userId = userId;
|
|||
|
|
field.bidCode = bidCode;
|
|||
|
|
console.log(field);
|
|||
|
|
const url = commonUrl + "screen/largeScreen/personnelControl/addNewFence";
|
|||
|
|
let encryptStr = encryptCBC(JSON.stringify(field));
|
|||
|
|
ajaxRequest(url, "POST", encryptStr, true, function () {
|
|||
|
|
}, function (result) {
|
|||
|
|
console.log(result);
|
|||
|
|
if (result.code === 200) {
|
|||
|
|
$('#hiddenContent').toggle(); // 切换显示与隐藏
|
|||
|
|
$('#content').toggle(); // 切换显示与隐藏
|
|||
|
|
table.reload('dome');
|
|||
|
|
} 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);
|
|||
|
|
|
|||
|
|
// return false; // 阻止默认 form 跳转
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//穿戴装备
|
|||
|
|
wearGarList();
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//穿戴装备
|
|||
|
|
function wearGarList(){
|
|||
|
|
const url = commonUrl + "screen/largeScreen/personnelControl/getNewFenceList";
|
|||
|
|
|
|||
|
|
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: 'number', width:60,title: '序号', align: 'center', type: 'numbers'},
|
|||
|
|
{field: 'fenceName', width:110, align: 'center', title: '围栏名称'},
|
|||
|
|
{field: 'fenceType', width:110, align: 'center', title: '围栏类型'},
|
|||
|
|
{field: 'alarmType', width:100, align: 'center', title: '报警类型'},
|
|||
|
|
{field: 'alertType', width:100, align: 'center', title: '警戒等级'},
|
|||
|
|
{field: 'color', width:80, align: 'center', title: '颜色', templet: d => {
|
|||
|
|
return '<div style="width: 20px;height: 20px;background-color: '+d.color+'"></div>';
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{field: 'status', align: 'center', title: '状态', templet: '#switchTpl'},
|
|||
|
|
{
|
|||
|
|
fixed: 'right', width:80, title: '操作', align: 'center', templet: d => {
|
|||
|
|
let text = "";
|
|||
|
|
text +='<a lay-event="del" style="color: #f80b37;cursor: pointer;font-size: 16px">删除</a>';
|
|||
|
|
return text;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]],
|
|||
|
|
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);
|
|||
|
|
},
|
|||
|
|
page: true, //开启分页
|
|||
|
|
loading: true, //数据加载中。。。
|
|||
|
|
limits: [5, 10, 20, 100],
|
|||
|
|
limit: 7
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
table.on('tool(test)', function (obj) {
|
|||
|
|
var data = obj.data; //当前行数据
|
|||
|
|
var rowIndex = obj.index;
|
|||
|
|
var layEvent = obj.event; //当前点击的事件名
|
|||
|
|
if (layEvent === 'del') {
|
|||
|
|
layer.confirm('确定要删除吗？', {
|
|||
|
|
btn : [ '确定', '取消' ]
|
|||
|
|
}, function(index) {
|
|||
|
|
const url = commonUrl + "screen/largeScreen/personnelControl/delSubcontractorById";
|
|||
|
|
|
|||
|
|
const params = {
|
|||
|
|
"roleCode": roleCode,
|
|||
|
|
"orgId": orgId,
|
|||
|
|
"userId": userId,
|
|||
|
|
"bidCode": bidCode,
|
|||
|
|
"id": data.id
|
|||
|
|
}
|
|||
|
|
let encryptStr = encryptCBC(JSON.stringify(params));
|
|||
|
|
ajaxRequest(url, "POST", encryptStr, true, function () {
|
|||
|
|
}, function (result) {
|
|||
|
|
if (result.code === 200) {
|
|||
|
|
layer.close(index);
|
|||
|
|
table.reload('dome');
|
|||
|
|
} 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);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//权限判断
|
|||
|
|
form.on('switch(statusSwitch)', function(data){
|
|||
|
|
debugger
|
|||
|
|
var isChecked = data.elem.checked; // 获取复选框的当前状态
|
|||
|
|
var value = data.value; // 获取复选框的值
|
|||
|
|
let status = isChecked ? 1 : 0;
|
|||
|
|
const url = commonUrl + "screen/largeScreen/personnelControl/subcontractorSwitchListen";
|
|||
|
|
|
|||
|
|
const params = {
|
|||
|
|
"roleCode": roleCode,
|
|||
|
|
"orgId": orgId,
|
|||
|
|
"userId": userId,
|
|||
|
|
"bidCode": bidCode,
|
|||
|
|
"id": value,
|
|||
|
|
"status": status
|
|||
|
|
}
|
|||
|
|
let encryptStr = encryptCBC(JSON.stringify(params));
|
|||
|
|
ajaxRequest(url, "POST", encryptStr, true, function () {
|
|||
|
|
}, function (result) {
|
|||
|
|
if (result.code === 200) {
|
|||
|
|
layer.msg('状态更新成功');
|
|||
|
|
table.reload('dome');
|
|||
|
|
} 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 mapInit(module){
|
|||
|
|
// 获取经纬度
|
|||
|
|
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 BMap.Map("map");
|
|||
|
|
map.centerAndZoom(new BMap.Point(lon,lat), 15);
|
|||
|
|
map.enableScrollWheelZoom();
|
|||
|
|
|
|||
|
|
|
|||
|
|
var marker = new BMap.Marker(new BMap.Point(lon,lat)); // 创建标注
|
|||
|
|
map.addOverlay(marker);
|
|||
|
|
if (module === 'draw') {
|
|||
|
|
drawAFence();
|
|||
|
|
} else if (module === 'recreate') {
|
|||
|
|
RecreateFence();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// });
|
|||
|
|
// } else {
|
|||
|
|
// console.log("浏览器不支持 Geolocation API");
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//围栏显示
|
|||
|
|
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 polygonsDatas = [];
|
|||
|
|
|
|||
|
|
// 将原始数据按 id 分组
|
|||
|
|
let idGroups = {};
|
|||
|
|
rawData.forEach(function(item) {
|
|||
|
|
if (!idGroups[item.id]) {
|
|||
|
|
idGroups[item.id] = [];
|
|||
|
|
}
|
|||
|
|
idGroups[item.id].push(item);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 将每组数据转换为 BMapGL.Point 格式并添加到 polygonsDatas 中
|
|||
|
|
for (let id in idGroups) {
|
|||
|
|
let points = idGroups[id].map(function(item) {
|
|||
|
|
return new BMap.Point(parseFloat(item.longitude), parseFloat(item.latitude));
|
|||
|
|
});
|
|||
|
|
let color = idGroups[id][0].color;
|
|||
|
|
polygonsDatas.push({ points: points, color: color });
|
|||
|
|
}
|
|||
|
|
console.log(polygonsDatas);
|
|||
|
|
polygonsDatas.forEach(function(data) {
|
|||
|
|
// 创建一个多边形对象
|
|||
|
|
var polygon = new BMap.Polygon([data.points], {
|
|||
|
|
zIndex: 999,
|
|||
|
|
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 drawAFence(){
|
|||
|
|
var overlaycomplete = function (e) {
|
|||
|
|
overlays.push(e.overlay);
|
|||
|
|
debugger
|
|||
|
|
if (overlays.length > 0) {
|
|||
|
|
console.log(overlays[0])
|
|||
|
|
var polygon = e.overlay.getPath();//Array<Point> 返回多边型的点数组
|
|||
|
|
|
|||
|
|
// const polygon = overlays[0].Po;
|
|||
|
|
for (let i = 0; i < polygon.length; i++) {
|
|||
|
|
coordinates.push(polygon[i].lng + '@' +polygon[i].lat);
|
|||
|
|
}
|
|||
|
|
console.log("多边形顶点坐标:", coordinates);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var styleOptions = {
|
|||
|
|
strokeColor: "red", //边线颜色。
|
|||
|
|
fillColor: "red", //填充颜色。当参数为空时，圆形将没有填充效果。
|
|||
|
|
strokeWeight: 3, //边线的宽度，以像素为单位。
|
|||
|
|
strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
|
|||
|
|
fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
|
|||
|
|
strokeStyle: 'solid' //边线的样式，solid或dashed。
|
|||
|
|
}
|
|||
|
|
//实例化鼠标绘制工具
|
|||
|
|
var drawingManager = new BMapLib.DrawingManager(map, {
|
|||
|
|
isOpen: false, //是否开启绘制模式
|
|||
|
|
enableDrawingTool: true, //是否显示工具栏
|
|||
|
|
drawingToolOptions: {
|
|||
|
|
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
|
|||
|
|
offset: new BMap.Size(5, 5), //偏离值
|
|||
|
|
},
|
|||
|
|
circleOptions: styleOptions, //圆的样式
|
|||
|
|
polylineOptions: styleOptions, //线的样式
|
|||
|
|
polygonOptions: styleOptions, //多边形的样式
|
|||
|
|
rectangleOptions: styleOptions //矩形的样式
|
|||
|
|
});
|
|||
|
|
//添加鼠标绘制工具监听事件，用于获取绘制结果
|
|||
|
|
drawingManager.addEventListener('overlaycomplete', overlaycomplete);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getRailLists(){
|
|||
|
|
// let paramData = 'bidCode=' + bidCode + '&roleCode=' + roleCode + '&orgId=' + orgId + '&userId=' + userId;
|
|||
|
|
// let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
|
|||
|
|
const url = commonUrl + "system/sys/select/getRailLists"; // url
|
|||
|
|
ajaxRequestGet(url, "GET", true, function () {
|
|||
|
|
}, function (result) {
|
|||
|
|
if (result.code === 200) {
|
|||
|
|
let html = '';
|
|||
|
|
if (result.data && result.data.length > 0) {
|
|||
|
|
$.each(result.data, function (index, item) {
|
|||
|
|
html += '<option value="' + item.id + '">' + item.name + '</option>'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
$('#railType').empty().append(html);
|
|||
|
|
layui.form.render();
|
|||
|
|
} else if (result.code === 500) {
|
|||
|
|
layer.msg(result.msg, { icon: 2 });
|
|||
|
|
}
|
|||
|
|
}, function (xhr, status, error) {
|
|||
|
|
error(xhr, status, error)
|
|||
|
|
}, aqEnnable);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getGiveAnAlarmLists(){
|
|||
|
|
let paramData = 'bidCode=' + bidCode + '&roleCode=' + roleCode + '&orgId=' + orgId + '&userId=' + userId;
|
|||
|
|
let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
|
|||
|
|
const url = commonUrl + "system/sys/select/getGiveAnAlarmLists?params=" + montageParam; // url
|
|||
|
|
ajaxRequestGet(url, "GET", true, function () {
|
|||
|
|
}, function (result) {
|
|||
|
|
if (result.code === 200) {
|
|||
|
|
let html = '';
|
|||
|
|
if (result.data && result.data.length > 0) {
|
|||
|
|
$.each(result.data, function (index, item) {
|
|||
|
|
html += '<option value="' + item.id + '">' + item.name + '</option>'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
$('#giveAnAlarmType').empty().append(html);
|
|||
|
|
layui.form.render();
|
|||
|
|
} else if (result.code === 500) {
|
|||
|
|
layer.msg(result.msg, { icon: 2 });
|
|||
|
|
}
|
|||
|
|
}, function (xhr, status, error) {
|
|||
|
|
error(xhr, status, error)
|
|||
|
|
}, aqEnnable);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getGuardAgainstLists(){
|
|||
|
|
let paramData = 'bidCode=' + bidCode + '&roleCode=' + roleCode + '&orgId=' + orgId + '&userId=' + userId;
|
|||
|
|
let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
|
|||
|
|
const url = commonUrl + "system/sys/select/getGuardAgainstLists?params=" + montageParam; // url
|
|||
|
|
ajaxRequestGet(url, "GET", true, function () {
|
|||
|
|
}, function (result) {
|
|||
|
|
if (result.code === 200) {
|
|||
|
|
let html = '';
|
|||
|
|
if (result.data && result.data.length > 0) {
|
|||
|
|
$.each(result.data, function (index, item) {
|
|||
|
|
html += '<option value="' + item.id + '">' + item.name + '</option>'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
$('#guardAgainstType').empty().append(html);
|
|||
|
|
layui.form.render();
|
|||
|
|
} else if (result.code === 500) {
|
|||
|
|
layer.msg(result.msg, { icon: 2 });
|
|||
|
|
}
|
|||
|
|
}, function (xhr, status, error) {
|
|||
|
|
error(xhr, status, error)
|
|||
|
|
}, aqEnnable);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|