增加房屋综合管理页面
This commit is contained in:
TS-QD1
parent
5377f14d86
commit
cdb4b6cd25
@ -49,4 +49,15 @@ public class HouseRouteController extends AbstractController {
|
||||
public ModelAndView listMyself() {
|
||||
return new ModelAndView("house/list-myself");
|
||||
}
|
||||
|
||||
@GetMapping("save-batch")
|
||||
public ModelAndView saveBatch() {
|
||||
return new ModelAndView("house/save-batch");
|
||||
}
|
||||
|
||||
@GetMapping("list-summary")
|
||||
public ModelAndView listSummary() {
|
||||
return new ModelAndView("house/list-summary");
|
||||
}
|
||||
|
||||
}
|
||||
513
src/main/resources/templates/house/list-summary.html
Normal file
513
src/main/resources/templates/house/list-summary.html
Normal file
@ -0,0 +1,513 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<base th:href="${#request.getContextPath() + '/'}">
|
||||
<meta charset="utf-8">
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=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>
|
||||
.layui-form-pane .layui-inline {margin-top: 10px;}
|
||||
.layui-form-pane .layui-form-label {width: 100%; padding: 0; height: 20px; line-height: 20px; border: unset; background-color: unset; box-sizing: unset; text-align: left;}
|
||||
.layui-form-pane .layui-input-block {margin-left: 0; width: 100%;}
|
||||
.layui-form-pane .layui-form-select .layui-edge {margin-top: 8px;}
|
||||
.layui-form-pane .layui-form-selected .layui-edge {margin-top: 2px;}
|
||||
.layui-form-pane .layui-form-select dl {top: 60px;}
|
||||
#treeHeader {padding: 0 10px 10px 10px; height: auto;}
|
||||
#treeBody {overflow: auto;}
|
||||
#treeBody ul li{border-bottom: 1px solid #f6f6f6; cursor: pointer; width: 100%;}
|
||||
#treeBody ul li:last-child{border-bottom: none;}
|
||||
#treeBody ul li.active{font-weight: bold;}
|
||||
#treeFooter {padding: 15px; border-top: 1px solid rgb(246, 246, 246);}
|
||||
#contentBody {width: 100%; height: 300px; position: relative; overflow: hidden; padding: 0px; border: 1px solid #e6e6e6; font-size: 0;}
|
||||
#contentBody:after {content: ' '; display: block; position: absolute; top: 0; left: 0; background-color: #f2f2f2; width: 100px; height: 50px; z-index: 10; border: 1px solid #e6e6e6; box-sizing: border-box;}
|
||||
#contentBody .left {width: 100px; position: absolute; top: 50px; left: 0px; user-select:none; background-color: #f2f2f2;}
|
||||
#contentBody .left .floor {height: 100px; border: 1px solid #e6e6e6; box-sizing: border-box; font-size: 14px; font-weight: bold; text-align: center; line-height: 100px;}
|
||||
#contentBody .top {height: 50px; position: absolute; top: 0px; left: 100px; white-space: nowrap;}
|
||||
#contentBody .top .unit {width: 200px; height: 100%; border: 1px solid #e6e6e6; display: inline-block; box-sizing: border-box; font-size: 14px; font-weight: bold; text-align: center; line-height: 50px; user-select:none; background-color: #f2f2f2;}
|
||||
#contentBody .center {margin-top: 50px; margin-left: 100px; overflow: scroll;}
|
||||
#contentBody .center .main {}
|
||||
#contentBody .center .main .floor {height: 100px; box-sizing: border-box; white-space: nowrap;}
|
||||
#contentBody .center .main .floor .unit {display: inline-block; box-sizing: border-box;}
|
||||
#contentBody .center .main .floor .unit .house {width: 200px; height: 100px; border: 1px solid #e6e6e6; box-sizing: border-box; display: inline-block; font-size: 14px; cursor: pointer; text-align: center; line-height: 100px; user-select:none; transition: background-color .3s, font-weight .3s;}
|
||||
#contentBody .center .main .floor .unit .house:hover {font-weight: bold; background-color: #f2f2f2;}
|
||||
#contentBody .center .main .floor .unit .house .info {display: flex; justify-content: center; align-items: center;}
|
||||
#contentBody .center .main .floor .unit .house .info .option {display: none;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-fluid layui-anim layui-anim-fadein">
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-xs2">
|
||||
<div class="layui-card">
|
||||
<div id="treeHeader" class="layui-card-header">
|
||||
<form class="layui-form layui-form-pane" lay-filter="dataForm">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">街道</label>
|
||||
<input type="hidden" id="streetName" name="streetName"/>
|
||||
<div id="streetIdContainer" class="layui-input-block"></div>
|
||||
</div>
|
||||
<div id="communityBox" class="layui-inline" style="display: none;">
|
||||
<label class="layui-form-label">社区</label>
|
||||
<input type="hidden" id="communityName" name="communityName"/>
|
||||
<div id="communityIdContainer" class="layui-input-block"></div>
|
||||
</div>
|
||||
<div id="housingEstateBox" class="layui-inline" style="display: none;">
|
||||
<label class="layui-form-label">小区</label>
|
||||
<input type="hidden" id="housingEstateName" name="housingEstateName"/>
|
||||
<div id="housingEstateIdContainer" class="layui-input-block"></div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div id="treeBody" class="layui-card-body"></div>
|
||||
<div id="treeFooter" class="layui-card-footer">
|
||||
<div class="layui-btn-group">
|
||||
<button type="button" class="layui-btn layui-btn-xs">上一页</button>
|
||||
<button type="button" class="layui-btn layui-btn-xs">下一页</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs10">
|
||||
<div class="layui-card">
|
||||
<div id="contentHeader" class="layui-card-header">
|
||||
<div class="layui-btn-group">
|
||||
<button type="button" class="layui-btn layui-btn-xs">快速新增 <i class="fa fa-plus"></i></button>
|
||||
<button type="button" class="layui-btn layui-btn-xs layui-btn-normal">批量新增 <i class="fa fa-plus"></i></button>
|
||||
<button type="button" class="layui-btn layui-btn-xs layui-btn-primary">单独新增 <i class="fa fa-plus"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="contentBody">
|
||||
<div class="left"></div>
|
||||
<div class="top"></div>
|
||||
<div class="center">
|
||||
<div class="main"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script src="assets/layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: 'assets/layuiadmin/'
|
||||
}).extend({
|
||||
index: 'lib/index'
|
||||
}).use(['index', 'table', 'laydate', 'common', 'form', 'select'], function() {
|
||||
var $ = layui.$;
|
||||
var $win = $(window);
|
||||
var table = layui.table;
|
||||
var admin = layui.admin;
|
||||
var laydate = layui.laydate;
|
||||
var common = layui.common;
|
||||
var select = layui.select;
|
||||
var resizeTimeout = null;
|
||||
|
||||
var selectedRelation = {
|
||||
street: '',
|
||||
community: '',
|
||||
housingEstate: '',
|
||||
buildingId: '',
|
||||
}
|
||||
var buildingPager = {
|
||||
currentPage: 1,
|
||||
rows: 20,
|
||||
total: 0,
|
||||
totalPage: 1,
|
||||
data: []
|
||||
}
|
||||
|
||||
var initStreetSelect = function() {
|
||||
select.dataDynamic({
|
||||
url: 'api/residential/getStreetList',
|
||||
name: 'streetId',
|
||||
valueKey: 'id',
|
||||
nameKey: 'name',
|
||||
formFilter: 'dataForm',
|
||||
where: {},
|
||||
selectedValue: '',
|
||||
optionDatasetKeyArray: [],
|
||||
onSelect: function(data, option) {
|
||||
selectedRelation.street = data.value;
|
||||
if(data.value) {
|
||||
$('#streetName').val(option.innerHTML);
|
||||
} else {
|
||||
$('#streetName').val('');
|
||||
}
|
||||
initCommunitySelect();
|
||||
initHousingEstateSelect();
|
||||
initBuilding();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var initCommunitySelect = function() {
|
||||
selectedRelation.community = '';
|
||||
var $communityBox = $('#communityBox');
|
||||
if(!selectedRelation.street) {
|
||||
$communityBox.hide();
|
||||
return;
|
||||
}
|
||||
$communityBox.show();
|
||||
select.dataDynamic({
|
||||
url: 'api/residential/getCommunityList',
|
||||
name: 'communityId',
|
||||
valueKey: 'communityId',
|
||||
nameKey: 'communityName',
|
||||
formFilter: 'dataForm',
|
||||
where: {areaId: selectedRelation.street},
|
||||
selectedValue: '',
|
||||
optionDatasetKeyArray: [],
|
||||
onSelect: function(data, option) {
|
||||
selectedRelation.community = data.value;
|
||||
if(data.value) {
|
||||
$('#communityName').val(option.innerHTML);
|
||||
} else {
|
||||
$('#communityName').val('');
|
||||
}
|
||||
initHousingEstateSelect();
|
||||
initBuilding();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var initHousingEstateSelect = function() {
|
||||
selectedRelation.housingEstate = '';
|
||||
var $housingEstateBox = $('#housingEstateBox');
|
||||
if(!selectedRelation.community) {
|
||||
$housingEstateBox.hide();
|
||||
return;
|
||||
}
|
||||
$housingEstateBox.show();
|
||||
select.dataDynamic({
|
||||
url: 'api/residential/list',
|
||||
name: 'housingEstateId',
|
||||
valueKey: 'residentialId',
|
||||
nameKey: 'name',
|
||||
formFilter: 'dataForm',
|
||||
where: {street: selectedRelation.street, community: selectedRelation.community},
|
||||
selectedValue: '',
|
||||
optionDatasetKeyArray: [],
|
||||
onSelect: function(data, option) {
|
||||
selectedRelation.housingEstate = data.value;
|
||||
if(data.value) {
|
||||
$('#housingEstateName').val(option.innerHTML);
|
||||
} else {
|
||||
$('#housingEstateName').val('');
|
||||
}
|
||||
initBuilding();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var renderBuilding = function() {
|
||||
var lis = '';
|
||||
$.each(buildingPager.datas, function(index, item) {
|
||||
lis += `<li data-id="${item.buildingId}">${index + 1}.${item.name}</li>`;
|
||||
});
|
||||
var $treeBody = $('#treeBody');
|
||||
$treeBody.empty();
|
||||
if(lis) {
|
||||
$treeBody.append(`<span>楼宇</span><ul>${lis}</ul>`);
|
||||
} else {
|
||||
$treeBody.append('<div>暂无数据</div>')
|
||||
}
|
||||
initHouse();
|
||||
}
|
||||
|
||||
var initBuilding = function() {
|
||||
selectedRelation.buildingId = '';
|
||||
top.restAjax.get(top.restAjax.path('api/building/listpage', []), {
|
||||
page: buildingPager.currentPage,
|
||||
rows: buildingPager.rows,
|
||||
street: selectedRelation.street,
|
||||
community: selectedRelation.community,
|
||||
residentialId: selectedRelation.housingEstate
|
||||
}, null, function(code, data) {
|
||||
buildingPager.currentPage = data.page;
|
||||
buildingPager.datas = data.rows;
|
||||
buildingPager.total = data.total;
|
||||
buildingPager.totalPage = buildingPager.total % buildingPager.rows === 0? buildingPager.total / buildingPager.rows : Math.floor(buildingPager.total / buildingPager.rows) + 1;
|
||||
renderBuilding();
|
||||
|
||||
}, function(code, data) {
|
||||
top.dialog.msg(data.msg);
|
||||
})
|
||||
}
|
||||
|
||||
var initHouse = function() {
|
||||
var data = {
|
||||
floorCount: 18, // 层
|
||||
unitCount: 3, // 单元
|
||||
units: [],
|
||||
floors: [{
|
||||
name: '1层', // 所在楼层, 完整数据
|
||||
units: [{
|
||||
name: '1单元', // 所在单元
|
||||
houses: [{
|
||||
houseId: '1', // ID
|
||||
name: '101', // 名称
|
||||
}, {
|
||||
houseId: '1', // ID
|
||||
name: '101', // 名称
|
||||
}, {
|
||||
houseId: '1', // ID
|
||||
name: '101', // 名称
|
||||
}, ]
|
||||
}, {
|
||||
name: '2单元', // 所在单元
|
||||
houses: [{
|
||||
houseId: '1', // ID
|
||||
name: '101', // 名称
|
||||
}, {
|
||||
houseId: '1', // ID
|
||||
name: '101', // 名称
|
||||
}]
|
||||
}, {
|
||||
name: '3单元', // 所在单元
|
||||
houses: [{
|
||||
houseId: '1', // ID
|
||||
name: '101', // 名称
|
||||
}, {
|
||||
houseId: '1', // ID
|
||||
name: '101', // 名称
|
||||
}, {
|
||||
houseId: '1', // ID
|
||||
name: '101', // 名称
|
||||
}, {
|
||||
houseId: '1', // ID
|
||||
name: '104', // 名称
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
name: '1层', // 所在楼层, 完整数据
|
||||
units: [{
|
||||
name: '1单元', // 所在单元
|
||||
houses: [{
|
||||
houseId: '1', // ID
|
||||
name: '101', // 名称
|
||||
}, {
|
||||
houseId: '1', // ID
|
||||
name: '101', // 名称
|
||||
}, {
|
||||
houseId: '1', // ID
|
||||
name: '101', // 名称
|
||||
}, ]
|
||||
}, {
|
||||
name: '2单元', // 所在单元
|
||||
houses: []
|
||||
}, {
|
||||
name: '3单元', // 所在单元
|
||||
houses: [{
|
||||
houseId: '1', // ID
|
||||
name: '101', // 名称
|
||||
}, {
|
||||
houseId: '1', // ID
|
||||
name: '101', // 名称
|
||||
}, {
|
||||
houseId: '1', // ID
|
||||
name: '101', // 名称
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
name: '1层', // 所在楼层，整层楼没有数据
|
||||
units: []
|
||||
}, {
|
||||
name: '1层', // 所在楼层，某一单元没有数据
|
||||
units: [{
|
||||
name: '1单元',
|
||||
houses: [],
|
||||
}, {
|
||||
name: '2单元', // 所在单元
|
||||
houses: [{
|
||||
houseId: '1', // ID
|
||||
name: '101', // 名称
|
||||
}]
|
||||
}, {
|
||||
name: '3单元', // 所在单元
|
||||
houses: [{
|
||||
houseId: '1', // ID
|
||||
name: '101', // 名称
|
||||
}, {
|
||||
houseId: '1', // ID
|
||||
name: '103', // 名称
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
};
|
||||
var $left = $('#contentBody .left');
|
||||
var $top = $('#contentBody .top');
|
||||
var $main = $('#contentBody .main');
|
||||
$main.empty();
|
||||
$left.empty();
|
||||
$top.empty();
|
||||
var unitCount2Units = function() {
|
||||
for(var i = 0; i < data.unitCount; i++) {
|
||||
data.units.push({
|
||||
maxHouseCount: 0
|
||||
})
|
||||
}
|
||||
}
|
||||
var renderLeft = function() {
|
||||
var left = '';
|
||||
for(var i = 0; i < data.floorCount; i++) {
|
||||
left += `<div class="floor">${i + 1}层</div>`;
|
||||
}
|
||||
return left;
|
||||
}
|
||||
var renderTop = function() {
|
||||
var top = '';
|
||||
for(var i = 0; i < data.units.length; i++) {
|
||||
var count = data.units[i].maxHouseCount;
|
||||
count = count > 0 ? count : 1;
|
||||
top += `<div class="unit" style="width: ${count * 200}px">${i + 1}单元</div>`;
|
||||
}
|
||||
return top;
|
||||
}
|
||||
var renderMain = function() {
|
||||
var main = '';
|
||||
$.each(data.floors, function(index, item) {
|
||||
var units = '';
|
||||
$.each(item.units, function(jndex, jtem) {
|
||||
var houses = '';
|
||||
if(jtem.houses.length > data.units[jndex].maxHouseCount) {
|
||||
data.units[jndex].maxHouseCount = jtem.houses.length;
|
||||
}
|
||||
$.each(jtem.houses, function(kndex, ktem) {
|
||||
houses += `
|
||||
<div class="house" data-id="${ktem.houseId}">
|
||||
<div class="info">
|
||||
<div class="name">${ktem.name}</div>
|
||||
<div class="option">
|
||||
<a href="javascript:void(0)" class="house-edit" data-id="${ktem.houseId}">编辑</a>
|
||||
<span>|</span>
|
||||
<a href="javascript:void(0)" class="house-remove" data-id="${ktem.houseId}">删除</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
units += `<div class="unit" style="width: ${data.units[jndex].maxHouseCount * 200}px">${houses}</div>`;
|
||||
})
|
||||
main += `<div class="floor">${units}</div>`;
|
||||
});
|
||||
return main;
|
||||
}
|
||||
|
||||
var initData = function() {
|
||||
if(!selectedRelation.buildingId) {
|
||||
$top.append(`<div style="font-size: 14px; width: ${$('#contentBody').width() - 100}px; height: 100%; display: flex; justify-content: center; align-items: center; border: 1px solid #e6e6e6; box-sizing: border-box; background-color: #f2f2f2;">请选择楼宇</div>`)
|
||||
return;
|
||||
}
|
||||
var loadLayerIndex;
|
||||
top.restAjax.get(top.restAjax.path('api/house/getAllHouse/{buildingId}', [selectedRelation.buildingId]), {}, null, function(code, respData) {
|
||||
data.floorCount = parseInt(respData.floorCount);
|
||||
data.unitCount = parseInt(respData.unitCount);
|
||||
data.floors = respData.floors;
|
||||
|
||||
unitCount2Units();
|
||||
$main.append(renderMain());
|
||||
$left.append(renderLeft());
|
||||
$top.append(renderTop());
|
||||
}, function(code, data) {
|
||||
top.dialog.msg(data.msg);
|
||||
}, function() {
|
||||
loadLayerIndex = top.dialog.msg(top.dataMessage.committing, {icon: 16, time: 0, shade: 0.3});
|
||||
}, function() {
|
||||
top.dialog.close(loadLayerIndex);
|
||||
});
|
||||
}
|
||||
initData();
|
||||
}
|
||||
|
||||
var event = function() {
|
||||
$(document).on('click', '#treeBody ul li', function() {
|
||||
var $lis = $('#treeBody ul li');
|
||||
$lis.filter('.active').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
selectedRelation.buildingId = this.dataset.id;
|
||||
initHouse();
|
||||
});
|
||||
$('#contentBody .center').scroll(function(e) {
|
||||
var $top = $('#contentBody .top');
|
||||
var $left = $('#contentBody .left');
|
||||
var $this = $(this);
|
||||
var scroll = {
|
||||
left: $this.scrollLeft(),
|
||||
top: $this.scrollTop()
|
||||
}
|
||||
$this.scrollLeft(scroll.left);
|
||||
$this.scrollTop(scroll.top);
|
||||
$left.css('top', `${50 - scroll.top}px`);
|
||||
$top.css('left', `${100 - scroll.left}px`);
|
||||
});
|
||||
$(document).on('mouseover', '#contentBody .center .main .floor .unit .house', function() {
|
||||
var $this = $(this);
|
||||
$this.find('.option').show();
|
||||
$this.find('.name').hide();
|
||||
});
|
||||
$(document).on('mouseout', '#contentBody .center .main .floor .unit .house', function() {
|
||||
var $this = $(this);
|
||||
$this.find('.option').hide();
|
||||
$this.find('.name').show();
|
||||
});
|
||||
$(document).on('click', '#contentBody .center .main .floor .unit .house .info .option .house-edit', function() {
|
||||
var houseId = this.dataset.id;
|
||||
console.log('edit', houseId);
|
||||
});
|
||||
$(document).on('click', '#contentBody .center .main .floor .unit .house .info .option .house-remove', function() {
|
||||
var houseId = this.dataset.id;
|
||||
console.log('remove', houseId);
|
||||
});
|
||||
}
|
||||
|
||||
var resize = function() {
|
||||
var renderTree = function() {
|
||||
var $treeBody = $('#treeBody');
|
||||
$treeBody.css({
|
||||
height: `${$win.height() - 318}px`
|
||||
});
|
||||
}
|
||||
|
||||
var renderContentBody = function() {
|
||||
var $contentBody = $('#contentBody');
|
||||
$contentBody.height(`${$win.height() - 95}px`);
|
||||
var contentBody = {
|
||||
width: $contentBody.width(),
|
||||
height: $contentBody.height()
|
||||
}
|
||||
var $center = $contentBody.find('.center');
|
||||
var $main = $center.find('.main');
|
||||
var $top = $center.find('.top');
|
||||
var $left = $center.find('.left');
|
||||
$center.css({
|
||||
width: `${contentBody.width - 80}px`,
|
||||
height: `${contentBody.height - 30}px`
|
||||
})
|
||||
}
|
||||
|
||||
renderTree();
|
||||
renderContentBody();
|
||||
}
|
||||
|
||||
var init = function(){
|
||||
initStreetSelect();
|
||||
initCommunitySelect();
|
||||
initHousingEstateSelect();
|
||||
initBuilding();
|
||||
event();
|
||||
resize();
|
||||
}
|
||||
init();
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user