505 lines
23 KiB
HTML
Executable File
505 lines
23 KiB
HTML
Executable File
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<base href="/servicecity/">
|
|
<meta charset="UTF-8"/>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=11,chrome=1"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
|
|
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
|
|
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
|
|
<style>
|
|
.area-select-item {width: 100%; margin-bottom: 15px;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="layui-fluid layui-anim layui-anim-fadein">
|
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-lg2 layui-col-md2 layui-col-sm-2 layui-col-xs12">
|
|
<div class="layui-card">
|
|
<div id="areaConfigBox">
|
|
<div style="position: relative;">
|
|
<div class="layui-card-header">人员选择</div>
|
|
<div class="layui-card-body">
|
|
<div class="layui-inline layui-form area-select-item">
|
|
<select id="userType" name="userType" class="area-edit" lay-filter="userType" lay-search>
|
|
<option value="1" selected>网格长</option>
|
|
<option value="2">N员</option>
|
|
</select>
|
|
</div>
|
|
<div class="layui-inline layui-form area-select-item" id="selectNPersonBox" style="display: none;">
|
|
<input type="text" id="selectNPerson" class="layui-input area-edit" value="" placeholder="选择N人员" lay-verify="required" readonly style="cursor: pointer;">
|
|
</div>
|
|
<div id="userBox">
|
|
<div class="layui-inline layui-form area-select-item" id="area1SelectTemplateBox" lay-filter="area1SelectTemplateBox"></div>
|
|
<script id="area1SelectTemplate" type="text/html">
|
|
<select id="area1" name="area1" class="area-edit" lay-filter="area1" lay-search>
|
|
<option value="">选择一级区域</option>
|
|
{{# for(var i = 0, item; item = d[i++];) { }}
|
|
<option value="{{item.dictId}}">{{item.dictName}}</option>
|
|
{{# } }}
|
|
</select>
|
|
</script>
|
|
<div id="communityBox">
|
|
<div id="communityBossLevelBox" class="layui-inline layui-form area-select-item">
|
|
<select id="communityBossLevel" name="communityBossLevel" class="area-edit" lay-filter="communityBossLevel" lay-search>
|
|
<option value="">选择网格长级别</option>
|
|
<option value="1">二级网格长</option>
|
|
<option value="2">三级网格长</option>
|
|
<option value="3">四级网格长</option>
|
|
<option value="4">五级网格长</option>
|
|
<!--<option value="5">五级网格长</option>-->
|
|
</select>
|
|
</div>
|
|
<div class="layui-inline layui-form area-select-item" id="communityIdSelectTemplateBox" lay-filter="communityIdSelectTemplateBox" style="display: none;"></div>
|
|
<script id="communityIdSelectTemplate" type="text/html">
|
|
<select id="communityId" name="communityId" class="area-edit" lay-filter="communityId" lay-search>
|
|
<option value="">选择社区</option>
|
|
{{# for(var i = 0, item; item = d[i++];) { }}
|
|
<option value="{{item.communityId}}">{{item.communityName}}</option>
|
|
{{# } }}
|
|
</select>
|
|
</script>
|
|
</div>
|
|
<div class="layui-inline layui-form area-select-item" id="selectCommunityBossBox">
|
|
<input type="text" id="selectCommunityBoss" name="selectCommunityBoss" class="layui-input area-edit" value="" placeholder="选择网格长" lay-verify="required" readonly style="cursor: pointer;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="configMask" style="background: #00000022; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; display: none;"></div>
|
|
</div>
|
|
<div style="padding: 0 15px 15px 15px;">
|
|
<div>
|
|
<button id="saveEditBtn" class="layui-btn layui-btn-normal" style="width: 100%; display: none;">保存编辑</button>
|
|
</div>
|
|
<!--
|
|
<div>
|
|
<button id="gridListBtn" class="layui-btn layui-btn-primary" style="width: 100%;">网格列表</button>
|
|
</div>
|
|
-->
|
|
<div>
|
|
<button id="goCenter" class="layui-btn" style="width: 100%;">回到中心点</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-lg10 layui-col-md10 layui-col-sm-10 layui-col-xs12">
|
|
<div class="layui-card">
|
|
<div class="layui-card-body" id="areaMapBox">
|
|
<div id="mapContainer" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=mlfOah4gWM1FjEo9CmlI64zK6MhyiMPW"></script>
|
|
<script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
|
|
<script type="text/javascript" src="assets/js/baidu-map-0.0.1.min.js?v=5"></script>
|
|
<script src="assets/layuiadmin/layui/layui.js"></script>
|
|
<script type="text/javascript">
|
|
layui.config({
|
|
base: 'assets/layuiadmin/' //静态资源所在路径
|
|
}).extend({
|
|
index: 'lib/index' //主入口模块
|
|
}).use(['index', 'form', 'laydate', 'laytpl'], function () {
|
|
var $ = layui.$;
|
|
var $win = $(window);
|
|
var form = layui.form;
|
|
var laytpl = layui.laytpl;
|
|
var resizeTimeout = null;
|
|
var baiduMap = null;
|
|
var centerPoint = {};
|
|
var gridMember = {
|
|
userType: 1,
|
|
communityBossLevel: 1,
|
|
communityId: null,
|
|
users: [],
|
|
gridArray: null
|
|
}
|
|
|
|
function initBaiduMap() {
|
|
top.restAjax.get(top.restAjax.path('api/config/getmapinit', []), {}, null, function(code, data) {
|
|
centerPoint.lng = data.mapLng;
|
|
centerPoint.lat = data.mapLat;
|
|
baiduMap = new BaiduMap('mapContainer', {
|
|
onGridStartEdit: function(baiduMap) {
|
|
if(gridMember.users.length == 0) {
|
|
top.dialog.msg('选择人员');
|
|
return false;
|
|
}
|
|
$('#saveEditBtn').hide();
|
|
$('#configMask').show();
|
|
},
|
|
onGridStopEdit: function(gridArray) {
|
|
gridMember.gridArray = gridArray;
|
|
$('#saveEditBtn').show();
|
|
$('#configMask').hide();
|
|
}
|
|
});
|
|
baiduMap.setCenterAndZoom({
|
|
lng: data.mapLng,
|
|
lat: data.mapLat
|
|
}, 14);
|
|
var mapTypeControl = new BMap.MapTypeControl({
|
|
mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP],
|
|
});
|
|
baiduMap.getMap().addControl(mapTypeControl);
|
|
var areaBounds = new BMap.Bounds(new BMap.Point(109.591583, 40.458812),new BMap.Point(110.505699, 40.826688));
|
|
try {
|
|
//BMapLib.AreaRestriction.setBounds(baiduMap.getMap(), areaBounds);
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
baiduMap.setDefaultConfig();
|
|
baiduMap.initGridOption();
|
|
baiduMap.initGridOptionEvent();
|
|
baiduMap.initColorOption();
|
|
}, function(code, data) {
|
|
top.DialogBox.msg(data.msg);
|
|
});
|
|
|
|
}
|
|
|
|
// 重置页面大小
|
|
function resizePage() {
|
|
$('#areaConfigBox').css({
|
|
height: ($win.height() - 31) +'px',
|
|
overflow: 'auto'
|
|
});
|
|
$('#areaMapBox').css({
|
|
height: ($win.height() - 51) +'px'
|
|
});
|
|
}
|
|
|
|
// 初始化选择框、单选、复选模板
|
|
function initSelectRadioCheckboxTemplate(templateId, templateBoxId, data, callback) {
|
|
laytpl(document.getElementById(templateId).innerHTML).render(data, function(html) {
|
|
document.getElementById(templateBoxId).innerHTML = html;
|
|
});
|
|
form.render('select', templateBoxId);
|
|
}
|
|
|
|
// 初始化1级区域下拉选择
|
|
function initArea1Select() {
|
|
// api/datadictionary/listdictionarybyparentid/6985e913-4766-4841-bdce-7a394e65093b
|
|
// api/dict/listdict/9d179f05-3ea0-48f7-853c-d3b7124b791c
|
|
top.restAjax.get(top.restAjax.path('api/dict/listdict/9d179f05-3ea0-48f7-853c-d3b7124b791c', []), {}, null, function(code, data, args) {
|
|
initSelectRadioCheckboxTemplate('area1SelectTemplate', 'area1SelectTemplateBox', data);
|
|
}, function(code, data) {
|
|
top.dialog.msg(data.msg);
|
|
});
|
|
}
|
|
|
|
// 初始化1级区域下拉选择
|
|
function initCommunityIdSelect(selectValue) {
|
|
top.restAjax.get(top.restAjax.path('api/community/listcommunity?areaId={areaId}', [selectValue]), {}, null, function(code, data, args) {
|
|
initSelectRadioCheckboxTemplate('communityIdSelectTemplate', 'communityIdSelectTemplateBox', data);
|
|
}, function(code, data) {
|
|
top.dialog.msg(data.msg);
|
|
});
|
|
}
|
|
// 选择网格长
|
|
function selectCommunityBoss() {
|
|
var selectedNodes = [];
|
|
for(var i = 0, item; item = gridMember.users[i++];) {
|
|
selectedNodes.push({
|
|
id: item.userId,
|
|
name: item.userName,
|
|
title: item.userName
|
|
})
|
|
}
|
|
if(gridMember.communityBossLevel == 1) {
|
|
gridMember.communityId = 'nocummonity';
|
|
} else {
|
|
if(!gridMember.communityId) {
|
|
top.dialog.msg('请先选择社区');
|
|
return;
|
|
}
|
|
}
|
|
top.dialog.tree({
|
|
title: '选择级网格长',
|
|
apiUri: top.restAjax.path('api/communityboss/listcommunitybossbycommunity/{communityId}', [gridMember.communityId]),
|
|
width: '200px',
|
|
height: '400px',
|
|
otherParams: {
|
|
communityBossLevel: gridMember.communityBossLevel
|
|
},
|
|
dataFilter: function(treeId, parentNode, childNodes) {
|
|
for(var i = 0, item = childNodes[i]; item = childNodes[i++];) {
|
|
item.id = item.communityBossId;
|
|
item.name = item.communityBossName;
|
|
}
|
|
return childNodes;
|
|
},
|
|
check: {
|
|
enable: true,
|
|
selectType: 'checkbox',
|
|
checkboxType: {Y: 'ps', N: 'ps', SB: false},
|
|
radioType: 'level',
|
|
},
|
|
selectedNodes: selectedNodes,
|
|
onClose: function() {
|
|
gridMember.users.splice(0, gridMember.users.length);
|
|
var selectNodes = top.dialog.dialogTreeData.selectedNodes;
|
|
var userIds = '';
|
|
var userNames = '';
|
|
if(selectNodes && selectNodes.length > 0) {
|
|
var relationArray = [];
|
|
for(var i = 0, item = selectNodes[i]; item = selectNodes[i++];) {
|
|
gridMember.users.push({
|
|
userId: item.id,
|
|
userName: item.name
|
|
});
|
|
if(userIds.length > 0) {
|
|
userIds += ',';
|
|
userNames += ',';
|
|
}
|
|
userIds += item.id;
|
|
userNames += item.name;
|
|
}
|
|
}
|
|
$('#selectCommunityBoss').val(userNames);
|
|
baiduMap.setRelationGroup(relationArray);
|
|
initGrid();
|
|
}
|
|
});
|
|
}
|
|
// 选择N员
|
|
function selectNPerson() {
|
|
var selectedUserIds = '';
|
|
for(var i = 0, item; item = gridMember.users[i++];) {
|
|
if(selectedUserIds.length > 0) {
|
|
selectedUserIds += '_';
|
|
}
|
|
selectedUserIds += item.userId;
|
|
}
|
|
top.dialog.dialogData.selectedUserIds = selectedUserIds;
|
|
top.dialog.user({
|
|
url: top.restAjax.path('route/system/user/select-department-user.html', []),
|
|
title: '选择N员',
|
|
width: '500px',
|
|
height: '500px',
|
|
onClose: function () {
|
|
var userIds = '';
|
|
var userNames = '';
|
|
gridMember.users.splice(0, gridMember.users.length);
|
|
var selectedUsers = top.dialog.dialogData.selectedDepartmentUsers;
|
|
if(selectedUsers != null && selectedUsers.length > 0) {
|
|
var selectedUserIds = '';
|
|
for (var i = 0, item; item = selectedUsers[i++];) {
|
|
gridMember.users.push({
|
|
userId: item.userId,
|
|
userName: item.userName
|
|
});
|
|
if(userIds.length > 0) {
|
|
userIds += ',';
|
|
userNames += ',';
|
|
}
|
|
userIds += item.userId;
|
|
userNames += item.userName;
|
|
}
|
|
}
|
|
$('#selectNPerson').val(userNames);
|
|
initGrid();
|
|
}
|
|
});
|
|
}
|
|
// 初始化网格背景
|
|
function initGridBG(userIds) {
|
|
var layIndex;
|
|
top.restAjax.get(top.restAjax.path('api/userpoints/listgrid/{userType}', [$('#userType').val()]), {
|
|
userIds: userIds,
|
|
communityId: $('#communityId').val(),
|
|
communityBossLevel: $('#communityBossLevel').val()
|
|
}, null, function(code, data) {
|
|
var gridArray = [];
|
|
for(var i = 0, item; item = data[i++];) {
|
|
var pointArray = [];
|
|
for(var j = 0, jItem; jItem = item.pointArray[j++];) {
|
|
pointArray.push(new BaiduMap.Point(jItem.lng, jItem.lat));
|
|
}
|
|
gridArray.push({
|
|
id: item.gridId,
|
|
label: item.gridName,
|
|
fillColor: item.fillColor,
|
|
pointArray: pointArray
|
|
})
|
|
}
|
|
baiduMap.initBackgroundGrid({
|
|
gridArray: gridArray
|
|
});
|
|
}, function(code, data) {
|
|
top.dialog.msg(data.msg);
|
|
}, function () {
|
|
layIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
|
|
}, function () {
|
|
top.dialog.close(layIndex);
|
|
});
|
|
}
|
|
// 初始化编辑网格
|
|
function initEditGrid(userIds) {
|
|
var layIndex;
|
|
top.restAjax.get(top.restAjax.path('api/userpoints/getgridbyuserids/{userType}/{userIds}', [$('#userType').val(), userIds]), {}, null, function(code, data) {
|
|
// 设置背景
|
|
var bgGridArray = [];
|
|
for(var i = 0, item; item = data.otherGrids[i++];) {
|
|
var pointArray = [];
|
|
for(var j = 0, jItem; jItem = item.pointArray[j++];) {
|
|
pointArray.push(new BaiduMap.Point(jItem.lng, jItem.lat));
|
|
}
|
|
bgGridArray.push({
|
|
id: item.gridId,
|
|
// label: item.gridName,
|
|
pointArray: pointArray
|
|
})
|
|
}
|
|
baiduMap.initBackgroundGrid({
|
|
gridArray: bgGridArray
|
|
});
|
|
// 设置编辑网格
|
|
baiduMap.setGridArray(data.currentGrids);
|
|
}, function(code, data) {
|
|
top.dialog.msg(data.msg);
|
|
}, function () {
|
|
layIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
|
|
}, function () {
|
|
top.dialog.close(layIndex);
|
|
});
|
|
}
|
|
// 加载背景网格
|
|
function initGrid() {
|
|
baiduMap.clearMap();
|
|
var userIds = '';
|
|
var relationArray = [];
|
|
for (var i = 0, item; item = gridMember.users[i++];) {
|
|
if (userIds.length > 0) {
|
|
userIds += '_';
|
|
}
|
|
userIds += item.userId;
|
|
relationArray.push(new BaiduMap.Relation(item.userId, item.userName));
|
|
}
|
|
baiduMap.setRelationGroup(relationArray);
|
|
// 默认显示所有网格员网格
|
|
if (userIds == '') {
|
|
initGridBG(userIds);
|
|
} else {
|
|
initEditGrid(userIds);
|
|
}
|
|
}
|
|
|
|
// 保存网格
|
|
function saveUserGrid() {
|
|
if(!gridMember.users) {
|
|
top.dialog.msg('选择人员');
|
|
return;
|
|
}
|
|
var userIds = '';
|
|
for(var i = 0, item; item = gridMember.users[i++];) {
|
|
if(userIds.length > 0) {
|
|
userIds += ',';
|
|
}
|
|
userIds += item.userId;
|
|
}
|
|
top.dialog.confirm('确定保存网格配置吗？', function(index) {
|
|
top.dialog.close(index);
|
|
var layIndex;
|
|
top.restAjax.post(top.restAjax.path('api/userpoints/saveareagrid', []), {
|
|
userIds: userIds,
|
|
grids: gridMember.gridArray
|
|
}, null, function(code, data) {
|
|
top.dialog.msg('保存成功', {time: 500}, function() {
|
|
initGrid();
|
|
});
|
|
}, function(code, data) {
|
|
$('#saveEditBtn').show();
|
|
top.dialog.msg(data.msg);
|
|
}, function () {
|
|
$('#saveEditBtn').hide();
|
|
layIndex = top.dialog.msg(top.dataMessage.committing, {icon: 16, time: 0, shade: 0.3});
|
|
}, function () {
|
|
top.dialog.close(layIndex);
|
|
});
|
|
})
|
|
}
|
|
|
|
resizePage();
|
|
initBaiduMap();
|
|
initArea1Select();
|
|
initCommunityIdSelect();
|
|
|
|
$('#saveEditBtn').click(saveUserGrid);
|
|
// $('#gridListBtn').click(function() {
|
|
// top.dialog.open({
|
|
// url: top.restAjax.path('route/userpoints/map_user_list.html?userType={userType}&userType={userType}&userIds={userIds}&communityId={communityId}&communityBossLevel={communityBossLevel}', [
|
|
// $('#userType').val(),
|
|
// ]),
|
|
// title: '网格列表',
|
|
// width: '80%',
|
|
// height: '80%',
|
|
// onClose: function() {
|
|
// initGrid();
|
|
// }
|
|
// });
|
|
// });
|
|
$('#goCenter').click(function() {
|
|
baiduMap.setCenterAndZoom(centerPoint, 14);
|
|
});
|
|
|
|
$('#selectCommunityBoss').click(function() {
|
|
selectCommunityBoss();
|
|
});
|
|
|
|
$('#selectNPerson').click(function() {
|
|
selectNPerson();
|
|
});
|
|
|
|
// 选择地区
|
|
form.on('select(area1)', function(data) {
|
|
if(data.value) {
|
|
$('#userBox').show();
|
|
initCommunityIdSelect(data.value);
|
|
} else {
|
|
$('#userBox').hide();
|
|
}
|
|
gridMember.users.splice(0, gridMember.users.length);
|
|
$('#selectUser').val('');
|
|
initGrid();
|
|
})
|
|
// userType 选择事件
|
|
form.on('select(userType)', function(data) {
|
|
if(data.value == 1) {
|
|
$('#userBox').show();
|
|
$('#selectNPersonBox').hide();
|
|
} else {
|
|
$('#userBox').hide();
|
|
$('#selectNPersonBox').show();
|
|
}
|
|
gridMember.users.splice(0, gridMember.users.length);
|
|
$('#selectUser').val('');
|
|
$('#selectNPerson').val('');
|
|
initGrid();
|
|
});
|
|
// 选择片区级别
|
|
form.on('select(communityBossLevel)', function(data) {
|
|
gridMember.communityBossLevel = data.value;
|
|
if(data.value == 1) {
|
|
$('#communityIdSelectTemplateBox').hide();
|
|
} else {
|
|
$('#communityIdSelectTemplateBox').show();
|
|
}
|
|
gridMember.users.splice(0, gridMember.users.length);
|
|
$('#selectCommunityBoss').val('');
|
|
initGrid();
|
|
});
|
|
// 选择片区
|
|
form.on('select(communityId)', function(data) {
|
|
gridMember.communityId = data.value;
|
|
gridMember.users.splice(0, gridMember.users.length);
|
|
$('#selectCommunityBoss').val('');
|
|
initGrid();
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |