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);
|
||
}
|
||
|
||
|
||
|