<!DOCTYPE html>
|
<html lang="en" class="full-height">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<title>百度地图</title>
|
<link rel="stylesheet" href="../css/basic.css">
|
<link rel="stylesheet" href="../src/css/layui.css">
|
<link rel="stylesheet" href="../app/css/common.css">
|
<link rel="stylesheet" href="../app/css/map.css">
|
<link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
|
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
|
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=QAerSFEiGDCx1oHPB7Z5XYcBHI6R3qwx"></script>
|
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
|
<style>
|
.page-fixed {
|
display:none;
|
position:fixed;
|
top: 0;
|
left: 0;
|
bottom: 0;
|
right: 0;
|
z-index: 99999999;
|
background-color: #FFFFFF;
|
}
|
.page-fixed.page-fixed-show {
|
display: block;
|
}
|
</style>
|
</head>
|
<body class="full-height">
|
<div class="rel-full">
|
<div class="page-header bg-gay3">
|
<div class="layui-row h40">
|
<div class="layui-col-xs3 layui-col-md1 full-height">
|
<button class="layui-btn layui-btn-primary layui-btn-sm mrt5 mrl8" id="closeIframe"><i class="fa fa-close mrr4"></i>关闭</button>
|
</div>
|
<div class="layui-col-xs6 layui-col-md10 full-height line-height40">机房信息录入</div>
|
<div class="layui-col-xs3 layui-col-md1 full-height line-height40 t-align-right">
|
<button class="layui-btn layui-btn-primary layui-btn-sm mrl8" id="yanshou">申请验收</button>
|
</div>
|
</div>
|
</div>
|
<div class="page-content abs abs-top40 abs-bottom60">
|
<div class="rel-full">
|
<div class="abs footer-menu-content-show" id="homeInfo">
|
<div class="rel-full">
|
<div class="layui-form layui-form-pane layui-form-default mrt5 mrl8 mrr8 mrb10" action="" lay-filter="homeInfoForm">
|
<div class="layui-form-item">
|
<label class="layui-form-label">经度</label>
|
<div class="layui-input-block">
|
<input type="text" disabled="" name="title" autocomplete="off" class="layui-input gray1" id="lng">
|
</div>
|
</div>
|
<div class="layui-form-item">
|
<label class="layui-form-label">纬度</label>
|
<div class="layui-input-block">
|
<input type="text" disabled="" name="title" autocomplete="off" class="layui-input gray1" id="lat">
|
</div>
|
</div>
|
<div class="layui-form-item layui-form-text">
|
<label class="layui-form-label">地址信息</label>
|
<div class="layui-input-block">
|
<textarea class="layui-textarea" id="addr"></textarea>
|
</div>
|
</div>
|
<div class="layui-form-item layui-form-text">
|
<label class="layui-form-label">机房名称</label>
|
<div class="layui-input-block">
|
<textarea class="layui-textarea gray1" disabled="" id="homeName"></textarea>
|
</div>
|
</div>
|
<div class="layui-row">
|
<div class="layui-col-*-12 t-align-right">
|
<button class="layui-btn layui-btn-normal layui-btn-sm" id="checkAddr">查看位置</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="abs" id="videoUpload">
|
<div class="rel-full">
|
<div class="layui-form layui-form-pane layui-form-default mrt5 mrl8 mrr8 mrb10" action="" lay-filter="">
|
<div class="layui-row">
|
<div class="layui-col-12">
|
<button class="layui-btn layui-btn-normal layui-btn-sm" id="videoSelect">视频选择</button>
|
<span style="color: #FF0000;">请上传有关机房的视频</span>
|
</div>
|
<div class="layui-col-12 mrt5">
|
<div class="layui-upload">
|
<div class="layui-upload-list">
|
<table class="layui-table">
|
<thead>
|
<tr>
|
<th>文件名</th>
|
<th>大小</th>
|
<th>操作</th>
|
</tr>
|
</thead>
|
<tbody id="videoInfoTbl"></tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-12 mrt5">
|
<div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="uploadProgress">
|
<div class="layui-progress-bar" lay-percent="0%"></div>
|
</div>
|
</div>
|
<div class="layui-col-12 t-align-right mrt5">
|
<span style="color: #FF0000;" class="mrr4">请上传微信拍摄的视频</span><button class="layui-btn layui-btn-normal layui-btn-sm" id="uploadVideo">视频上传</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="abs" id="imgUpload">
|
<div class="rel-full">
|
<div class="layui-form layui-form-pane layui-form-default mrt5 mrl8 mrr8 mrb10" action="" lay-filter="">
|
<div class="layui-col-12">
|
<button class="layui-btn layui-btn-normal layui-btn-sm" id="imgsSelect">图片选择</button>
|
<span style="color: #FF0000;">请上传有关机房的图片</span>
|
</div>
|
<div class="layui-col-12">
|
<div class="layui-upload">
|
<div class="layui-upload-list">
|
<table class="layui-table">
|
<thead>
|
<tr>
|
<th>图片预览</th>
|
<th>文件名</th>
|
<th>大小</th>
|
<th lay-data="{fixed: 'right', sort: true, minWidth: 100, align: 'center'}">操作</th>
|
</tr>
|
</thead>
|
<tbody id="imgInfoTbl"></tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-12 t-align-right mrt5">
|
<button class="layui-btn layui-btn-normal layui-btn-sm" id="uploadImgs">图片上传</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div id="pageFooter" class="page-footer" style="position:absolute; bottom: 0;width: 100%; height: 59px; background-color: #FFFFFF; border-top: 1px solid #eeeeee">
|
<div class="layui-row">
|
<div class="layui-col-xs4 layui-col-md4">
|
<div class="hdw-btn">
|
<a href="javascript:;" class="this-active h59" data-href="#homeInfo"><i class="fa fa-home mrt8 mrb4"></i><br><span>机房信息</span></a>
|
</div>
|
</div>
|
<div class="layui-col-xs4 layui-col-md4">
|
<div class="hdw-btn">
|
<a href="javascript:;" class="h59" data-href="#videoUpload"><i class="fa fa-video-camera mrt8 mrb4"></i><br><span>视频上传</span></a>
|
</div>
|
</div>
|
<div class="layui-col-xs4 layui-col-md4">
|
<div class="hdw-btn">
|
<a href="javascript:;" class="h59" data-href="#imgUpload"><i class="fa fa-image mrt8 mrb4"></i><br><span>图片上传</span></a>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="page-fixed" id="pageFixedFull">
|
<div class="rel-full">
|
<div id="tempMapContainer" class="temp-map-container temp-map-container-show ">
|
<div class="temp-map-container-rel">
|
<div class="temp-map-container-close"><i class="fa fa-close"></i></div>
|
<div id="changeMapMarker" class="temp-map"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<input type="hidden" id="homeId">
|
<script type="text/html" id="homeInfoTpl"></script>
|
<script src="../js/jquery-1.8.3.js"></script>
|
<script src="../../src/layui.js"></script>
|
<script src="../app/js/common.js"></script>
|
<script src="../../pages/js/GPS.js"></script>
|
<script type="text/javascript">
|
// 百度地图模块
|
var map = new BMap.Map('changeMapMarker');
|
var point = new BMap.Point(125.3192,43.8090);
|
map.centerAndZoom(point, 11); // 用城市名设置地图中心点
|
map.enableScrollWheelZoom();
|
map.disableDoubleClickZoom();
|
// 给地图添加工具条(地图-卫星-三维)和比例尺控件
|
map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));
|
|
// 浏览器定位（前提是有网络和开启GPS权限）
|
var geolocation = new BMap.Geolocation();
|
|
// 关闭重新定位机房面板
|
$('#tempMapContainer .temp-map-container-close').click(function() {
|
$('#pageFixedFull').removeClass('page-fixed-show'); // 关闭面板
|
});
|
|
// layui模块
|
layui.use(['layer', 'laytpl', 'form', 'upload', 'element'], function() {
|
var layer = layui.layer; // 获取layer模块
|
var laytpl = layui.laytpl; // 获取laytpl模块
|
var form = layui.form; // 获取form模块
|
var upload = layui.upload; // 获取upload模块
|
var element = layui.element; // 获取element模块
|
|
var homeInfo = parent.$('#homeInfoIframe').data('homeInfo');
|
var homeInfoAll = parent.$('#homeInfoIframeAll').data('allData');
|
// console.log(homeInfoAll);
|
setHomeInfo(homeInfo);
|
|
// 关闭form
|
var parentIndex = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
|
$('#closeIframe').click(function() { // 设置点击按钮关闭当前iframe
|
parent.layer.close(parentIndex);
|
});
|
|
|
// 设置机房信息的内容
|
function setHomeInfo(data) {
|
$('#lng').val(data.lng); // 经度
|
$('#lat').val(data.lat); // 纬度
|
$('#addr').val(data.addr); // 地址
|
$('#homeName').val(data.homeName); // 机房名称
|
$('#homeId').val(data.homeId);
|
var load = layer.load(1);
|
geolocation.getCurrentPosition(function(r){
|
if(this.getStatus() == BMAP_STATUS_SUCCESS){
|
//console.log(r.point);
|
$('#lng').val(r.point.lng); // 经度
|
$('#lat').val(r.point.lat); // 纬度
|
$('#addr').val(getAddr(r.address)); // 位置信息
|
|
}else {
|
layer.msg('定位失败，请检查GPS或网络！');
|
}
|
layer.close(load);
|
});
|
}
|
|
// 解析地址信息
|
function getAddr(addr) {
|
var rs = '';
|
var province = addr.province?addr.province: '';
|
var city = addr.city?'-'+addr.city: '';
|
var district = addr.district?'-'+addr.district:'';
|
var street = addr.street?'-'+addr.street:'';
|
var street_number = addr.street_number?'-'+addr.street_number:'';
|
rs = province+city+district+street+street_number;
|
return rs;
|
}
|
|
// 点击申请验收
|
$('#yanshou').click(function() {
|
var _data = [];
|
var lng = $('#lng').val();
|
var lat = $('#lat').val();
|
var wgsPoint = GPS.bd2wgs(lat, lng); // 百度地图坐标转化为GPS
|
for(var i=0; i<homeInfoAll.length; i++) {
|
var _homeInfoAll = homeInfoAll[i];
|
var temp = {
|
binf: _homeInfoAll.binf
|
,longitude: wgsPoint.lon
|
,latitude: wgsPoint.lat
|
,address: $('#addr').val()
|
};
|
|
_data.push(temp);
|
}
|
if($('#addr').val().trim().length == 0) {
|
layer.msg('请输入地址信息！');
|
return;
|
}
|
|
// 申请验收确认框
|
layer.confirm('是否确认申请验收',{icon: 3, title: '申请验收'}, function(index) {
|
layer.close(index);
|
|
// 申请验收
|
applyendyanshou(_data);
|
});
|
|
});
|
|
// 申请验收
|
function applyendyanshou(arr){
|
var temp = JSON.stringify(arr);
|
$.ajax({ //申请验收
|
type: 'post',
|
async: true,
|
url: 'Battinf_applyAction!checkPro',
|
data: "json="+temp,
|
dataType: 'json',
|
success:function(data) {
|
console.info(data);
|
data = JSON.parse(data.result);
|
if(data.code==1){
|
layer.msg("申请验收成功!3秒后关闭面板");
|
setTimeout(function() {
|
parent.layer.close(parentIndex);
|
}, 3000)
|
|
}
|
}
|
});
|
|
}
|
|
// 查看位置
|
$('#checkAddr').click(function() {
|
$('#pageFixedFull').addClass('page-fixed-show'); // 关闭面板
|
setTimeout(function() {
|
var lng = $('#lng').val(); // 经度
|
var lat = $('#lat').val(); // 纬度
|
console.log(lng+'***'+lat);
|
var point = new BMap.Point(lng, lat);
|
delMkByLabel('新机房');
|
var mk = new BMap.Marker(point);
|
var label = new BMap.Label("新机房",{offset:new BMap.Size(20,-10)});
|
label.setStyle({display: 'none', padding: '4px 2px'});
|
mk.enableDragging(); // 设置可拖动
|
map.addOverlay(mk); // 将覆盖物添加到地图中
|
mk.setLabel(label); // 给覆盖物添加label提示
|
map.panTo(point); // 将地图移动到添加的点位置
|
map.setZoom(20); // 设置地图的缩放等级
|
|
// 给mk点添加移动事件
|
mk.addEventListener('dragend', function(e) {
|
console.log(e.point);
|
var lat = e.point.lat;
|
var lng = e.point.lng;
|
|
// 根据拖动的位置更新经纬度
|
$('#lng').val(lng);
|
$('#lat').val(lat);
|
|
});
|
}, 500);
|
});
|
|
// 删除
|
function delMkByLabel(str) {
|
var allOverlay = map.getOverlays();
|
for (var i = 0; i < allOverlay.length -1; i++){
|
if(allOverlay[i].getLabel) {
|
if(allOverlay[i].getLabel()) {
|
if(allOverlay[i].getLabel().content == str){
|
map.removeOverlay(allOverlay[i]);
|
return false;
|
}
|
}
|
|
}
|
|
}
|
}
|
|
|
|
var footerMenu = new FooterMenu($('#pageFooter')); // 实例化底部导航栏
|
|
// 上传视频模块
|
var videoInfoTbl = $('#videoInfoTbl');
|
// 渲染并初始化上传按钮
|
var uploadVideo = upload.render({
|
elem: '#videoSelect'
|
,url: 'MyFileAction!uploadStationFile'
|
,auto: false
|
,bindAction: '#uploadVideo'
|
,multiple: true
|
,number: 1
|
,data: {
|
json:JSON.stringify( {
|
StationId: homeInfo.homeId,
|
VideoOrImage: 'video'
|
})
|
}
|
,accept: 'video' //视频
|
,choose: function(obj) {
|
|
var files = this.files = obj.pushFile();
|
console.log(obj.pushFile());
|
videoInfoTbl.text('');
|
// 遍历
|
Object.keys(files).forEach(function(key) {
|
var file = files[key];
|
//console.log(file);
|
var tr = $(['<tr id="upload-'+ key +'">'
|
,'<td>'+ file.name +'</td>'
|
,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
|
,'<td>'
|
,'<button class="layui-btn layui-btn-xs layui-btn-danger imgs-delete">删除</button>'
|
,'</td>'
|
,'</tr>'].join(''));
|
|
//删除
|
tr.find('.imgs-delete').on('click', function(){
|
delete files[key]; //删除对应的文件
|
tr.remove();
|
uploadVideo.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
|
});
|
|
videoInfoTbl.append(tr);
|
});
|
}
|
,progress: function(e , percent) {
|
console.log(percent);
|
element.progress('uploadProgress',percent + '%');
|
}
|
,done: function(res, index, upload) {
|
var rs = JSON.parse(res.result);
|
if(rs.code == 1) {
|
element.progress('uploadProgress', '上传成功！');
|
}
|
}
|
});
|
|
// 图片上传模块
|
var imgsInfo = $('#imgInfoTbl');
|
var uploadImgsLoad;
|
var uploadImgs = upload.render({
|
elem: '#imgsSelect'
|
,url: 'MyFileAction!uploadStationFile'
|
,accept: 'image'
|
,multiple: true
|
,data: {
|
json:JSON.stringify( {
|
StationId: homeInfo.homeId,
|
VideoOrImage: 'image'
|
})
|
}
|
,auto: false
|
,bindAction: '#uploadImgs'
|
,choose: function(obj){
|
var files = this.files = obj.pushFile();
|
imgsInfo.text('');
|
//读取本地文件
|
obj.preview(function(index, file, result){
|
var tr = $(['<tr id="upload-'+ index +'">'
|
,'<td><img src="'+result+'">'
|
,'<td>'+ file.name +'</td>'
|
,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
|
,'<td>'
|
,'<button class="layui-btn layui-btn-xs imgs-reload layui-hide">重传</button>'
|
,'<button class="layui-btn layui-btn-xs layui-btn-danger imgs-delete">删除</button>'
|
,'</td>'
|
,'</tr>'].join(''));
|
|
//单个重传
|
tr.find('.imgs-reload').on('click', function(){
|
obj.upload(index, file);
|
});
|
|
//删除
|
tr.find('.imgs-delete').on('click', function(){
|
delete files[index]; //删除对应的文件
|
tr.remove();
|
uploadImgs.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
|
});
|
|
imgsInfo.append(tr);
|
});
|
}
|
,before:function() {
|
uploadImgsLoad = layer.load(1);
|
}
|
,done:function(res) {
|
var rs = JSON.parse(res.result);
|
if(rs.code == 1) {
|
layer.msg('上传成功！');
|
}else {
|
layer.msg('上传失败！');
|
}
|
layer.close(uploadImgsLoad);
|
}
|
});
|
|
|
// 获取添加机房的机房信息
|
function getAddHomeInfo(data) {
|
var lng = data.lng; // 获取经度
|
var lat = data.lat; // 获取纬度
|
var wgsPoint = GPS.bd2wgs(lat, lng); // 百度地图坐标转化为GPS
|
var addr = $('#addr').val(); // 获取地址
|
var homeName = data.homeName; // 机房名称
|
var homeId = data.homeId; // 机房ID
|
if(homeId !=0 && confirm("确认将"+homeName+"机房设置到该位置吗？")){
|
var temp = {
|
StationId:homeId, //机房编号
|
StationName:homeName, //机房名称
|
Address:addr, //机房物理信息
|
longitude: wgsPoint.lon, // 经度
|
latitude: wgsPoint.lat, // 纬度
|
information:"", //备注
|
};
|
var json = JSON.stringify(temp);
|
//console.info(json);
|
$.ajax({
|
type: "post",
|
url: "BattMap_informationAction!add",
|
async:true,
|
dataType:'text',
|
data:"json="+json,
|
success: function(data){
|
data = eval('('+data+')');
|
var model = eval('('+data.result+')');
|
if(model.code == 1){
|
alert("设置成功");
|
}else{
|
alert("设置失败");
|
}
|
}
|
});
|
}
|
}
|
});
|
</script>
|
</body>
|
</html>
|
