Tenlion/btgxq-partybuilding
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

后台首页

Browse Source
This commit is contained in:
wans 2020-11-03 18:08:50 +08:00
parent 9159bf46b4
commit f6c769a08e
1 changed files with 527 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

544
src/main/resources/static/default.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<!doctype html>
<html lang="en">
<head>
<base href="/partybuilding/">
<meta charset="utf-8">
@ -9,30 +9,540 @@
<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>
*{margin:0;padding:0;}
.marker-container{position: absolute;top:50%;left:50%;transform: translate(-50%,-50%)}
.top{overflow:hidden;width:35px;height:20px;background-color:red;border-radius:50px 50px 0 0;padding: 5px 5px 0;box-sizing: border-box;}
.mid{width:35px;height:10px;background: red;}
.top img{width: 100%;}
.bottom{width :0px;
height :0px;
border-top: 20px solid red;
border-left: 18px solid transparent;
border-right: 17px solid transparent;}
</style>
</head>
<body>
<div id="LAY-app" class="layui-fluid">
<div class="layui-row layui-col-space15"></div>
<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" style="height: 512px;">
<div class="layui-card">
<div class="layui-card-header">人员选择</div>
<div class="layui-card-body" id="areaConfigBox">
<div style="margin-left: -115px;" id="divArea">
<div class="layui-input-block layui-form" id="areaSelectTemplateBox" lay-filter="areaSelectTemplateBox"></div>
<script id="areaSelectTemplate" type="text/html">
<select id="area" name="area" lay-filter="area">
<option value="">选择所在区域-自治区</option>
{{# for(var i = 0, item; item = d[i++];) { }}
<option value="{{item.areaId}}">{{item.areaName}}</option>
{{# } }}
</select>
</script>
</div>
<div style="margin-left: -115px;" id="divCity">
<div class="layui-input-block layui-form" id="areaCitySelectTemplateBox" lay-filter="areaCitySelectTemplateBox"></div>
<script id="areaCitySelectTemplate" type="text/html">
<select id="areaCity" name="areaCity" lay-filter="areaCity">
<option value="">请选择所在区域-盟市</option>
{{# for(var i = 0, item; item = d[i++];) { }}
<option value="{{item.areaId}}">{{item.areaName}}</option>
{{# } }}
</select>
</script>
</div>
<div style="margin-left: -115px;" id="divCounty">
<div class="layui-input-block layui-form" id="areaCountySelectTemplateBox" lay-filter="areaCountySelectTemplateBox"></div>
<script id="areaCountySelectTemplate" type="text/html">
<select id="areaCounty" name="areaCounty" lay-filter="areaCounty">
<option value="">请选择所在区域-旗县</option>
{{# for(var i = 0, item; item = d[i++];) { }}
<option value="{{item.areaId}}">{{item.areaName}}</option>
{{# } }}
</select>
</script>
</div>
<div style="margin-left: -115px;" id="divRural">
<div class="layui-input-block layui-form" id="areaRuralSelectTemplateBox" lay-filter="areaRuralSelectTemplateBox"></div>
<script id="areaRuralSelectTemplate" type="text/html">
<select id="areaRural" name="areaRural" lay-filter="areaRural">
<option value="">请选择所在区域-乡村</option>
{{# for(var i = 0, item; item = d[i++];) { }}
<option value="{{item.areaId}}">{{item.areaName}}</option>
{{# } }}
</select>
</script>
</div>
<div style="margin-left: -115px;" id="divStreet">
<div class="layui-input-block layui-form" id="areaStreetSelectTemplateBox" lay-filter="areaStreetSelectTemplateBox"></div>
<script id="areaStreetSelectTemplate" type="text/html">
<select id="areaStreet" name="areaStreet" lay-filter="areaStreet">
<option value="">请选择所在区域-街道</option>
{{# for(var i = 0, item; item = d[i++];) { }}
<option value="{{item.areaId}}">{{item.areaName}}</option>
{{# } }}
</select>
</script>
</div>
<button id="search" class="layui-btn layui-btn-normal" style="width: 100%;margin-top:15px;">查询</button>
</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-col-md12 layui-col-space10" id="threeMeetLessonTemplateBox"></div>
<script type="text/html" id="threeMeetLessonTemplate">
{{# for ( var i = 0,item; item = d[i++];){ }}
<div class="layui-col-md3">
<div class="layui-card" style="border-radius: 5px;">
<div class="layui-card-header">
{{item.categoryName}}
</div>
<div class="layui-card-body layuiadmin-card-list">
<p class="layuiadmin-big-font">{{item.counts}}</p>
</div>
</div>
</div>
{{# } }}
</script>
</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>
</div>
<script type="text/javascript" src="assets/js/vue.min.js"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=2qzNKd33lQERUDakqDDyvLOyqM1x2i8y"></script>
<script src="assets/layuiadmin/layui/layui.js"></script>
<script>
layui.config({
base: 'assets/layuiadmin/' //静态资源所在路径
base: 'assets/layuiadmin/'
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'animate-numbers'], function() {
index: 'lib/index'
}).use(['index', 'table', 'laydate', 'common', 'laytpl'], function() {
var $ = layui.$;
new Vue({
el: '#LAY-app',
data: {},
methods: {},
mounted: function() {
var self = this;
var $win = $(window);
var table = layui.table;
var admin = layui.admin;
var laydate = layui.laydate;
var common = layui.common;
var laytpl = layui.laytpl;
var form = layui.form;
var map = null;
var markUserPoints = [];
var markersArray = [];
var markerList = [];
function initThreeMeetLessonData(){
top.restAjax.get(top.restAjax.path('api/threemeetlesson/countthreemeetlessondesc', []), {}, null, function(code, data) {
var item = data.data;
if(item.length > 4){
item = item.slice(0,4);
}
laytpl($('#threeMeetLessonTemplate').html()).render(item,function (html){
$('#threeMeetLessonTemplateBox').html(html);
form.render();
});
}, function(code, data) {
top.dialog.message(data.msg);
});
}
initThreeMeetLessonData();
// 事件 - 搜索
$(document).on('click', '#search', function() {
reloadMap();
});
// 重载表格
function reloadMap() {
map.clearOverlays();
var loadLayerIndex;
var params = {};
var area = $('#area option:selected').val();
var areaCity = $('#areaCity option:selected').val();
var areaCounty = $('#areaCounty option:selected').val();
var areaRural = $('#areaRural option:selected').val();
var areaStreet = $('#areaStreet option:selected').val();
console.log(area)
if(area) {
params.area = area;
}
})
if(areaCity) {
params.areaCity = areaCity;
}
if(areaCounty) {
params.areaCounty = areaCounty;
}
if(areaRural) {
params.areaRural = areaRural;
}
if(areaStreet) {
params.areaStreet = areaStreet;
}
top.restAjax.get(top.restAjax.path('api/partyorganize/listpartyorganize', []), params, null, function(code, data) {
// 划片
initPartyOrganize(data);
}, function(code, data) {
top.dialog.msg(data.msg);
});
}
// 重置页面大小
function resizePage() {
$('#areaConfigBox').css({
height: ($win.height() - 96) +'px'
});
$('#areaMapBox').css({
height: ($win.height() - 192) +'px'
});
}
resizePage();
// 地图初始化
function initMap() {
top.restAjax.get(top.restAjax.path('api/partyorganize/listpartyorganize', []), {}, null, function(code, data) {
var pointArray = [];
// 初始化地图
map = new BMap.Map('mapContainer', {
enableMapClick: false,
});
map.disableDoubleClickZoom();
map.enableScrollWheelZoom();
map.centerAndZoom(new BMap.Point(109.845965, 40.664461), 11);
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl({
mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
anchor: BMAP_ANCHOR_BOTTOM_RIGHT
})
);
initPartyOrganize(data);
}, function(code, data) {
top.dialog.msg(data.msg);
});
}
initMap();
function initPartyOrganize(data) {
for(var i = 0, item = data[i]; item = data[i++];) {
var point = new BMap.Point(item.longitude, item.latitude);
var imgSrc = 'route/file/downloadfile/false/' + item.logo;
var el = createMark(point, imgSrc, item.partyOrganizeId);
/*var img = new BMap.Icon(markerImg, new BMap.Size(48, 48), {imageOffset: new BMap.Size(0, 0)});
var marker = new BMap.Marker(point, {icon: markerImg});
/!*var marker = new BMap.Marker(point);*!/
map.addOverlay(marker);*/
// showPartyOrganize(item.partyOrganizeId, el);
}
}
function showPartyOrganize(partyOrganizeId) {
top.dialog.open({
url: top.restAjax.path('route/defaultindex/include.html?partyOrganizeId={partyOrganizeId}', [partyOrganizeId]),
title: '详情',
width: '1040px',
height: '98%',
onClose: function(data) {
}
});
}
// 初始状态下，盟市、旗县、乡村、街道这几个选项隐藏
function showHide() {
$('#divCity').hide();
$('#divCounty').hide();
$('#divRural').hide();
$('#divStreet').hide();
}
showHide();
// 初始化所在区域-自治区下拉选择
function initAreaSelect() {
top.restAjax.get(top.restAjax.path('app/dataarea/listareabyparentidrelease/0', []), {}, null, function(code, data, args) {
laytpl(document.getElementById('areaSelectTemplate').innerHTML).render(data, function(html) {
document.getElementById('areaSelectTemplateBox').innerHTML = html;
});
form.render('select', 'areaSelectTemplateBox');
}, function(code, data) {
top.dialog.msg(data.msg);
});
}
// 初始化所在区域-盟市下拉选择
function initAreaCitySelect(value) {
if(!value) {
var data = [
{
areaId: '',
areaName: '请选择上级数据'
}
];
laytpl(document.getElementById('areaCitySelectTemplate').innerHTML).render(data, function(html) {
document.getElementById('areaCitySelectTemplateBox').innerHTML = html;
});
form.render('select', 'areaCitySelectTemplateBox');
}else {
top.restAjax.get(top.restAjax.path('app/dataarea/listareabyparentidrelease/' + value, []), {}, null, function(code, data, args) {
laytpl(document.getElementById('areaCitySelectTemplate').innerHTML).render(data, function(html) {
document.getElementById('areaCitySelectTemplateBox').innerHTML = html;
});
form.render('select', 'areaCitySelectTemplateBox');
}, function(code, data) {
top.dialog.msg(data.msg);
});
}
}
// 初始化所在区域-旗县下拉选择
function initAreaCountySelect(value) {
if(!value) {
var data = [
{
areaId: '',
areaName: '请选择上级数据'
}
];
laytpl(document.getElementById('areaCountySelectTemplate').innerHTML).render(data, function(html) {
document.getElementById('areaCountySelectTemplateBox').innerHTML = html;
});
form.render('select', 'areaCountySelectTemplateBox');
}else {
top.restAjax.get(top.restAjax.path('app/dataarea/listareabyparentidrelease/' + value, []), {}, null, function(code, data, args) {
laytpl(document.getElementById('areaCountySelectTemplate').innerHTML).render(data, function(html) {
document.getElementById('areaCountySelectTemplateBox').innerHTML = html;
});
form.render('select', 'areaCountySelectTemplateBox');
}, function(code, data) {
top.dialog.msg(data.msg);
});
}
}
// 初始化所在区域-乡村下拉选择
function initAreaRuralSelect(value) {
if(!value) {
var data = [
{
areaId: '',
areaName: '请选择上级数据'
}
];
laytpl(document.getElementById('areaRuralSelectTemplate').innerHTML).render(data, function(html) {
document.getElementById('areaRuralSelectTemplateBox').innerHTML = html;
});
form.render('select', 'areaRuralSelectTemplateBox');
}else {
top.restAjax.get(top.restAjax.path('app/dataarea/listareabyparentidrelease/' + value, []), {}, null, function(code, data, args) {
laytpl(document.getElementById('areaRuralSelectTemplate').innerHTML).render(data, function(html) {
document.getElementById('areaRuralSelectTemplateBox').innerHTML = html;
});
form.render('select', 'areaRuralSelectTemplateBox');
}, function(code, data) {
top.dialog.msg(data.msg);
});
}
}
// 初始化所在区域-街道下拉选择
function initAreaStreetSelect(value) {
if(!value) {
var data = [
{
areaId: '',
areaName: '请选择上级数据'
}
];
laytpl(document.getElementById('areaStreetSelectTemplate').innerHTML).render(data, function(html) {
document.getElementById('areaStreetSelectTemplateBox').innerHTML = html;
});
form.render('select', 'areaStreetSelectTemplateBox');
}else {
top.restAjax.get(top.restAjax.path('app/dataarea/listareabyparentidrelease/' + value, []), {}, null, function(code, data, args) {
laytpl(document.getElementById('areaStreetSelectTemplate').innerHTML).render(data, function(html) {
document.getElementById('areaStreetSelectTemplateBox').innerHTML = html;
});
form.render('select', 'areaStreetSelectTemplateBox');
}, function(code, data) {
top.dialog.msg(data.msg);
});
}
}
// 所在区域-自治区change事件
form.on('select(area)', function(data){
if(!data.value) {
$('#areaName').val('')
$('#divCity').hide();
$('#city').empty();
$('#divCounty').hide();
$('#county').empty();
$('#divRural').hide();
$('#rural').empty();
$('#divStreet').hide();
$('#street').empty();
}else {
$('#areaName').val($("#area").find("option:selected").text())
$('#divCity').show();
$('#divCounty').hide();
$('#county').empty();
$('#divRural').hide();
$('#rural').empty();
$('#divStreet').hide();
$('#street').empty();
initAreaCitySelect(data.value);
}
$("#areaCity").empty();
form.render("select");
});
// 所在区域-盟市change事件
form.on('select(areaCity)', function(data){
if(!data.value) {
$('#areaCityName').val('')
$('#divCounty').hide();
$('#county').empty();
$('#divRural').hide();
$('#rural').empty();
$('#divStreet').hide();
$('#street').empty();
}else {
$('#areaCityName').val($("#areaCity").find("option:selected").text())
$('#divCounty').show();
$('#divRural').hide();
$('#rural').empty();
$('#divStreet').hide();
$('#street').empty();
initAreaCountySelect(data.value);
}
$("#areaCounty").empty();
form.render("select");
});
// 所在区域-旗县change事件
form.on('select(areaCounty)', function(data){
if(!data.value) {
$('#areaCountyName').val('')
$('#divRural').hide();
$('#rural').empty();
$('#divStreet').hide();
$('#street').empty();
}else {
$('#areaCountyName').val($("#areaCounty").find("option:selected").text())
$('#divRural').show();
$('#divStreet').hide();
$('#street').empty();
initAreaRuralSelect(data.value);
}
$("#areaRural").empty();
form.render("select");
});
// 所在区域-乡村change事件
form.on('select(areaRural)', function(data){
if(!data.value) {
$('#areaRuralName').val('')
$('#divStreet').hide();
$('#street').empty();
}else {
$('#areaRuralName').val($("#areaRural").find("option:selected").text())
$('#divStreet').show();
initAreaStreetSelect(data.value);
}
$("#areaStreet").empty();
form.render("select");
});
// 所在区域-街道change事件
form.on('select(areaStreet)', function(data){
if(!data.value) {
$('#areaStreetName').val('')
}else {
$('#areaStreetName').val($("#areaStreet").find("option:selected").text())
}
});
// 初始化内容
function initData() {
initAreaSelect();
}
initData();
function creatMarkerDiv (imgSrc) {
/*var oContainer = document.getElementsByClassName('container');*/
var oDiv = document.createElement('div');
oDiv.className = 'marker-container';
var oTop = document.createElement('div');
oTop.className = 'top';
console.log(oTop);
var img = new Image();
img.src = imgSrc;
var oMid = document.createElement('div');
oMid.className = 'mid'
var oBottom = document.createElement('div');
oBottom.className = 'bottom'
/*oContainer[0].appendChild(oDiv);*/
oDiv.appendChild(oTop);
oTop.appendChild(img);
oDiv.appendChild(oMid);
oDiv.appendChild(oBottom);
return oDiv;
}
// 给地图添加点
function createMark(point, imgSrc, partyOrganizeId) {
// 定义绘制图标方法
function customizeOverlay(center, length){
this._center = center;
this._length = length;
}
customizeOverlay.prototype = new BMap.Overlay();
customizeOverlay.prototype.initialize = function(map){
// 保存map对象实例
map = map;
// 创建div元素，作为自定义覆盖物的容器
var el = creatMarkerDiv(imgSrc);
// 将el添加到覆盖物容器中
map.getPanes().markerPane.appendChild(el);
// 监听点击
$(el).on('click', function(e){
showPartyOrganize(partyOrganizeId);
})
// 保存div实例
this._div = el;
// 需要将el元素作为方法的返回值，当调用该覆盖物的show、hide方法，或者对覆盖物进行移除时，API都将操作此元素。
return el;
}
// 根据地理坐标转换为像素坐标，并设置给容器
customizeOverlay.prototype.draw = function(){
var position = map.pointToOverlayPixel(this._center);
this._div.style.left = position.x - this._length / 2 + "px";
this._div.style.top = position.y - this._length / 2 + "px";
};
var mark = new customizeOverlay(point, 36);
markerList.push(mark); // 把mak加入到数组中方便下次添加mark时清除原有点和操作选中状态
map.addOverlay(mark);
}
});
</script>
</body>