<!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="../font-awesome-4.7.0/css/font-awesome.css">
|
</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"></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="addHome">提交机房信息</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">
|
<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>
|
<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">
|
// 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');
|
setHomeInfo(homeInfo);
|
// 设置机房信息的内容
|
function setHomeInfo(data) {
|
$('#lng').val(data.lng); // 经度
|
$('#lat').val(data.lat); // 纬度
|
$('#addr').val(data.addr); // 地址
|
$('#homeName').val(data.homeName); // 机房名称
|
$('#homeId').val(data.homeId);
|
console.log(data);
|
}
|
|
// 点击设置机房
|
$('#addHome').click(function() {
|
getAddHomeInfo(homeInfo);
|
});
|
|
|
// 关闭form
|
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
|
$('#closeIframe').click(function() { // 设置点击按钮关闭当前iframe
|
parent.layer.close(index);
|
});
|
|
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(files);
|
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>
|
