276 lines
16 KiB
HTML
Executable File
276 lines
16 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" type="text/css" href="assets/fonts/font-awesome/css/font-awesome.css"/>
|
|
<link rel="stylesheet" type="text/css" href="assets/js/vendor/bootstrap/css/bootstrap.min.css"/>
|
|
<link rel="stylesheet" type="text/css" href="assets/js/vendor/chosen/css/chosen-bootstrap.css">
|
|
<link rel="stylesheet" type="text/css" href="assets/js/vendor/chosen/css/chosen.min.css">
|
|
<link rel="stylesheet" type="text/css" href="assets/css/vendor/bootstrap-checkbox.css">
|
|
<link rel="stylesheet" type="text/css" href="assets/css/minimal.css"/>
|
|
<link rel="stylesheet" type="text/css" href="assets/css/system.css"/>
|
|
<link rel="stylesheet" type="text/css" href="assets/css/menu.css"/>
|
|
<link rel="stylesheet" type="text/css" href="assets/css/system-style1.css"/>
|
|
</head>
|
|
<body>
|
|
<div id="content" class="edit-content">
|
|
<div class="tile color">
|
|
<form id="form" class="form-horizontal" group="form" parsley-validate>
|
|
<div class="form-group">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<label class="col-lg-4 control-label">人员名称</label>
|
|
<div class="col-lg-8">
|
|
<input type="text" class="form-control" id="userName" v-model="formObject.userName" parsley-trigger="change" parsley-required="true" parsley-minlength="1" parsley-maxlength="255" parsley-validation-minlength="1" placeholder="请输入人员名称" maxlength="255" readonly/>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<label class="col-lg-4 control-label">签退时间</label>
|
|
<div class="col-lg-8">
|
|
<input id="signoutTime" class="form-control" v-model="formObject.signoutTime" placeholder="请选择签退时间" parsley-trigger="change" parsley-required="true" parsley-minlength="1" parsley-maxlength="255" parsley-validation-minlength="1" readonly/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<label class="col-lg-4 control-label">是否早退</label>
|
|
<div class="col-lg-8">
|
|
<div class="radio radio-transparent" style="margin: 0;">
|
|
<input type="radio" name="isEarly" id="isEarly_0" v-model="formObject.isEarly" value="1">
|
|
<label for="isEarly_0">是</label>
|
|
<input type="radio" name="isEarly" id="isEarly_1" v-model="formObject.isEarly" value="0">
|
|
<label for="isEarly_1">否</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<label class="col-lg-4 control-label">是否范围外</label>
|
|
<div class="col-lg-8">
|
|
<div class="radio radio-transparent" style="margin: 0;">
|
|
<input type="radio" name="isOutside" id="isOutside_0" v-model="formObject.isOutside" value="1">
|
|
<label for="isOutside_0">是</label>
|
|
<input type="radio" name="isOutside" id="isOutside_1" v-model="formObject.isOutside" value="0">
|
|
<label for="isOutside_1">否</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-sm-12">
|
|
<div id="mapContainer" style="width: 100%;height: 300px;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group form-footer edit-button-footer">
|
|
<div class="col-sm-offset-4 col-sm-4 text-center">
|
|
<button type="button" class="btn btn-primary" @click="submitForm()">提交</button>
|
|
<button type="button" class="btn btn-default" @click="closeBox()">关闭</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=pFMM3KjMlPlpzEGTXwB5vdj6cDCfB6Py"></script>
|
|
<script type="text/javascript" src="assets/js/jquery-3.5.1.min.js"></script>
|
|
<script type="text/javascript" src="assets/js/vendor/bootstrap/js/bootstrap.min.js"></script>
|
|
<script type="text/javascript" src="assets/js/vendor/chosen/chosen.jquery.min.js"></script>
|
|
<script type="text/javascript" src="assets/js/vendor/parsley/parsley.min.js"></script>
|
|
<script type="text/javascript" src="assets/js/vendor/laydate/laydate.js"></script>
|
|
<script type="text/javascript" src="assets/js/vue.min.js"></script>
|
|
<script type="text/javascript" src="assets/js/common.js"></script>
|
|
<script type="text/javascript">
|
|
new Vue({
|
|
el: '#content',
|
|
data: {
|
|
userSignoutId: top.restAjax.params(window.location.href).userSignoutId,
|
|
formObject: {
|
|
userId: null,
|
|
userName: null,
|
|
isEarly: '1',
|
|
isOutside: '1',
|
|
signoutTime: null,
|
|
signoutLongitude: '0',
|
|
signoutLatitude: '0',
|
|
},
|
|
map: null,
|
|
marker: null,
|
|
isLoad: true
|
|
},
|
|
methods: {
|
|
addAreaLabel: function(content, lng, lat) {
|
|
var self = this;
|
|
var label = new BMap.Label('<div>' + content + '</div>', {
|
|
position: new BMap.Point(lng, lat),
|
|
offset: new BMap.Size(-content.length * 6, -10)
|
|
});
|
|
label.setStyle({
|
|
backgroundColor: 'none',
|
|
border: 'none',
|
|
color: 'black',
|
|
fontSize: '12px',
|
|
height: '20px',
|
|
lineHeight: '20px',
|
|
textShadow: '0 0 5px #FFF',
|
|
fontWeight: 'bold'
|
|
});
|
|
self.map.addOverlay(label);
|
|
},
|
|
// 初始化人员地区
|
|
initUserArea: function() {
|
|
var self = this;
|
|
top.restAjax.post(top.restAjax.path('api/userpoints/listuserandpointsbyuserids', []), {
|
|
userIds: self.formObject.userId
|
|
}, null, function(code, data) {
|
|
if (data.length == 0) {
|
|
return;
|
|
}
|
|
var allPoints = [];
|
|
for(var i = 0, points = data[i]; points = data[i++];) {
|
|
var pointArray = [];
|
|
for (var j = 0, item = points.areaPoints[j]; item = points.areaPoints[j++];) {
|
|
allPoints.push({
|
|
lng: item.longitude,
|
|
lat: item.latitude
|
|
});
|
|
pointArray.push(new BMap.Point(item.longitude, item.latitude));
|
|
}
|
|
var polygonArea = new BMap.Polygon(pointArray, {
|
|
strokeColor: 'rgb(' + points.borderRed + ',' + points.borderGreen + ',' + points.borderBlue + ')',
|
|
strokeWeight: 1,
|
|
strokeOpacity: 0.5,
|
|
fillColor: 'rgb(' + points.areaRed + ',' + points.areaGreen + ',' + points.areaBlue + ')',
|
|
fillOpacity: 0.5
|
|
});
|
|
self.addAreaLabel(points.userNames, points.labelLongitude, points.labelLatitude);
|
|
self.map.addOverlay(polygonArea);
|
|
}
|
|
allPoints.push(self.center);
|
|
self.map.setViewport(allPoints);
|
|
}, function(code, data) {
|
|
top.DialogBox.msg(data.msg);
|
|
});
|
|
},
|
|
initMap: function() {
|
|
var self = this;
|
|
this.map = new BMap.Map("mapContainer", {
|
|
enableMapClick: false,
|
|
});
|
|
this.map.centerAndZoom(new BMap.Point(this.formObject.signoutLongitude, this.formObject.signoutLatitude), 15);
|
|
this.map.disableDoubleClickZoom();
|
|
this.map.enableScrollWheelZoom();
|
|
this.map.addControl(new BMap.NavigationControl());
|
|
this.map.addControl(new BMap.ScaleControl());
|
|
this.map.addControl(new BMap.MapTypeControl({
|
|
mapTypes:[BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
|
|
anchor: BMAP_ANCHOR_BOTTOM_RIGHT
|
|
}));
|
|
this.map.setDefaultCursor('crosshair');
|
|
this.map.addEventListener('dblclick', function(e) {
|
|
self.formObject.signoutLongitude = e.point.lng;
|
|
self.formObject.signoutLatitude = e.point.lat;
|
|
self.marker.setPosition(new BMap.Point(e.point.lng, e.point.lat));
|
|
});
|
|
|
|
this.initUserArea();
|
|
|
|
this.marker = new BMap.Marker(new BMap.Point(this.formObject.signoutLongitude, this.formObject.signoutLatitude));
|
|
this.map.addOverlay(this.marker);
|
|
this.marker.setAnimation(BMAP_ANIMATION_BOUNCE);
|
|
},
|
|
closeBox: function() {
|
|
top.DialogBox.closeBox();
|
|
},
|
|
initData: function() {
|
|
var self = this;
|
|
var loadLayerIndex;
|
|
top.restAjax.get(top.restAjax.path('api/usersignout/getusersignout/{userSignoutId}', [self.userSignoutId]), {}, null, function(code, data) {
|
|
self.formObject.userId = data.creator;
|
|
self.formObject.userName = data.userName;
|
|
self.formObject.isEarly = data.isEarly;
|
|
self.formObject.isOutside = data.isOutside;
|
|
self.formObject.signoutTime = data.gmtCreate;
|
|
self.formObject.signoutLongitude = data.signoutLongitude;
|
|
self.formObject.signoutLatitude = data.signoutLatitude;
|
|
self.updateChosen();
|
|
self.$nextTick(function() {
|
|
self.isLoad = false;
|
|
self.initMap();
|
|
|
|
var day = data.gmtCreate.substring(0, 10);
|
|
var min = null;
|
|
var max = null;
|
|
if(data.amPm == 'AM') {
|
|
min = day + ' 00:00:00';
|
|
max = day + ' 11:59:59';
|
|
} else if(data.amPm == 'PM') {
|
|
min = day + ' 12:00:00';
|
|
max = day + ' 23:59:59';
|
|
}
|
|
laydate.render({
|
|
elem: '#signoutTime',
|
|
type: 'datetime',
|
|
trigger: 'click',
|
|
min: min,
|
|
max: max,
|
|
done: function(value, date, endDate){
|
|
self.formObject.signoutTime = value;
|
|
}
|
|
});
|
|
});
|
|
}, function(code, data) {
|
|
top.DialogBox.msg(data.msg);
|
|
}, function() {
|
|
loadLayerIndex = top.DialogBox.msg(TextMessage.loading, {icon: 16, time: 0, shade: 0.3});
|
|
}, function() {
|
|
top.DialogBox.close(loadLayerIndex);
|
|
});
|
|
},
|
|
submitForm: function() {
|
|
if(!$('#form').parsley().validate()) {
|
|
return false;
|
|
}
|
|
var self = this;
|
|
var loadLayerIndex;
|
|
top.restAjax.put(top.restAjax.path('api/usersignout/updateusersignout/{userSignoutId}', [self.userSignoutId]), self.formObject, null, function(code, data) {
|
|
// success
|
|
var layerIndex = top.DialogBox.msg(TextMessage.commitSuccess, {
|
|
time: 0,
|
|
btn: [TextMessage.button.yes, TextMessage.button.no],
|
|
shade: 0.3,
|
|
yes: function() {
|
|
top.DialogBox.close(layerIndex);
|
|
window.location.reload();
|
|
},
|
|
btn2: function() {
|
|
self.closeBox();
|
|
}
|
|
});
|
|
}, function(code, data) {
|
|
// error
|
|
top.DialogBox.msg(data.msg);
|
|
}, function() {
|
|
// before
|
|
loadLayerIndex = top.DialogBox.msg(TextMessage.committing, {icon: 16, time: 0, shade: 0.3});
|
|
}, function() {
|
|
// complete
|
|
top.DialogBox.close(loadLayerIndex);
|
|
});
|
|
return false;
|
|
},
|
|
updateChosen: function() {
|
|
var self = this;
|
|
},
|
|
},
|
|
mounted: function() {
|
|
var self = this;
|
|
self.initData();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |