<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<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="../css/common.css">
|
<link rel="stylesheet" href="../pages/css/mylayui.css">
|
<link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
|
<!-- 导入百度地图API -->
|
<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>
|
body.homeinfo-tab .layui-tab {
|
margin: 0;
|
}
|
body.homeinfo-tab .layui-tab-card{
|
border: none;
|
}
|
body.homeinfo-tab .layui-tab-content {
|
padding: 0;
|
}
|
body.homeinfo-tab .layui-tab-content .layui-tab-item.layui-show {
|
height: 100%;
|
}
|
#imgCarousel .carousel-item div {
|
text-align: center;
|
}
|
#imgCarousel img {
|
position: relative;
|
width: auto;
|
height: 100%;
|
}
|
#imgCarousel .carousel-img-del-container {
|
position: absolute;
|
right: 10px;
|
top: 10px;
|
z-index: 9;
|
}
|
</style>
|
</head>
|
<body class="homeinfo-tab">
|
<div class="abs">
|
<div class="abs-container">
|
<div class="layui-tab layui-tab-card" lay-filter="homeInfoTab" id="homeInfoTab" style="height: 100%;"></div>
|
</div>
|
</div>
|
<script src="../js/jquery-1.8.3.js"></script>
|
<script src="../src/layui.js"></script>
|
<script src="../ckplayer/ckplayer.js"></script>
|
<script src="../pages/js/mylayui.js"></script>
|
<script type="text/html" id="homeTab">
|
<ul class="layui-tab-title">
|
{{# layui.each(d.tabc, function(index, item){ }}
|
<li class="{{ item.tshow }}">{{ item.title }}</li>
|
{{# }); }}
|
</ul>
|
<div class="layui-tab-content abs abs-top41 abs-overflow-y">
|
{{# layui.each(d.tabc, function(index, item){ }}
|
{{# if(item.type == 'group'){ }}
|
<div class="layui-tab-item {{ item.cshow }}">
|
<table class="hdw-tbl mrb8">
|
<thead>
|
<tr>
|
<th style="width:30%">参数名称</th>
|
<th>参数值</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr>
|
<td>机房ID</td>
|
<td>{{ item.content.homeid }}</td>
|
</tr>
|
<tr>
|
<td>机房名称</td>
|
<td>{{ item.content.homename }}</td>
|
</tr>
|
<tr>
|
<td>机房IP</td>
|
<td>{{ item.content.homeip }}</td>
|
</tr>
|
<tr>
|
<td>电池组ID</td>
|
<td>{{ item.content.groupid }}</td>
|
</tr>
|
<tr>
|
<td>电池组名称</td>
|
<td>{{ item.content.groupname }}</td>
|
</tr>
|
<tr>
|
<td>电池组序号</td>
|
<td>{{ item.content.ordernum }}</td>
|
</tr>
|
<tr>
|
<td>电池组品牌</td>
|
<td>{{ item.content.brand }}</td>
|
</tr>
|
<tr>
|
<td>电池组型号</td>
|
<td>{{ item.content.model }}</td>
|
</tr>
|
<tr>
|
<td>单体电池属性</td>
|
<td>{{ item.content.monproperty }}</td>
|
</tr>
|
<tr>
|
<td>投入使用日期（y-M-d）</td>
|
<td>{{ item.content.startusetime }}</td>
|
</tr>
|
<tr>
|
<td>电池浮充电流阀值（A）</td>
|
<td>{{ item.content.chargecurr }}</td>
|
</tr>
|
<tr>
|
<td>电池均充电压阀值（V）</td>
|
<td>{{ item.content.chargevol }}</td>
|
</tr>
|
<tr>
|
<td>充放电设备信息</td>
|
<td>{{ item.content.equipeinfo }}</td>
|
</tr>
|
<tr>
|
<td>负责人</td>
|
<td>{{ item.content.person }}</td>
|
</tr>
|
<tr>
|
<td>安装人员</td>
|
<td>{{ item.content.install_user }}</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
{{# }else if(item.type == 'home'){ }}
|
<div class="layui-tab-item {{ item.cshow }}">
|
<table class="hdw-tbl mrb8">
|
<thead>
|
<tr>
|
<th style="width:30%">参数名称</th>
|
<th>参数值</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr>
|
<td>站点ID</td>
|
<td>{{ item.content.stationid }}</td>
|
</tr>
|
<tr>
|
<td>站点名称</td>
|
<td>{{ item.content.stationname }}</td>
|
</tr>
|
<tr>
|
<td>机房ID</td>
|
<td>{{ item.content.homeid }}</td>
|
</tr>
|
<tr>
|
<td>所属组织</td>
|
<td>{{ item.content.organize }}</td>
|
</tr>
|
<tr>
|
<td>数据来源</td>
|
<td>{{ item.content.datasource }}</td>
|
</tr>
|
<tr>
|
<td>站址类型</td>
|
<td>{{ item.content.addrstyle }}</td>
|
</tr>
|
<tr>
|
<td>经纬度</td>
|
<td>{{ item.content.position }}</td>
|
</tr>
|
<tr>
|
<td>所在地址</td>
|
<td>{{ item.content.addr }}</td>
|
</tr>
|
<tr>
|
<td>站址状态</td>
|
<td>{{ item.content.stationstatus }}</td>
|
</tr>
|
<tr>
|
<td>维护单位</td>
|
<td>{{ item.content.maintain }}</td>
|
</tr>
|
<tr>
|
<td>站址场景</td>
|
<td>{{ item.content.environment }}</td>
|
</tr>
|
<tr>
|
<td>站址产权</td>
|
<td>{{ item.content.addrpower }}</td>
|
</tr>
|
<tr>
|
<td>使用单位</td>
|
<td>{{ item.content.usecompany }}</td>
|
</tr>
|
<tr>
|
<td>物理站址编码</td>
|
<td>{{ item.content.physicsaddrnum }}</td>
|
</tr>
|
<tr>
|
<td>历史物理站址编码</td>
|
<td>{{ item.content.hisphysicsaddrnum }}</td>
|
</tr>
|
<tr>
|
<td>站址内部编码</td>
|
<td>{{ item.content.addrinsidenum }}</td>
|
</tr>
|
<tr>
|
<td>站址拼音简称</td>
|
<td>{{ item.content.addrpinyin }}</td>
|
</tr>
|
<tr>
|
<td>中文简称</td>
|
<td>{{ item.content.chinesename }}</td>
|
</tr>
|
<tr>
|
<td>是否开通业务</td>
|
<td>{{ item.content.isopenbusiness }}</td>
|
</tr>
|
<tr>
|
<td>录入人员</td>
|
<td>{{ item.content.entryperson }}</td>
|
</tr>
|
<tr>
|
<td>录入时间</td>
|
<td>{{ item.content.entrytime }}</td>
|
</tr>
|
<tr>
|
<td>修改人</td>
|
<td>{{ item.content.revisedperson }}</td>
|
</tr>
|
<tr>
|
<td>修改时间</td>
|
<td>{{ item.content.revisedtime }}</td>
|
</tr>
|
<tr>
|
<td>备注</td>
|
<td>{{ item.content.remark }}</td>
|
</tr>
|
<tr>
|
<td>站址接收标记及是否有效</td>
|
<td>{{ item.content.isactive }}</td>
|
</tr>
|
<tr>
|
<td>移动站址名称</td>
|
<td>{{ item.content.yidongaddrname }}</td>
|
</tr>
|
<tr>
|
<td>电信站址名称</td>
|
<td>{{ item.content.dianxinaddrname }}</td>
|
</tr>
|
<tr>
|
<td>联通站址名称</td>
|
<td>{{ item.content.liantongaddrname }}</td>
|
</tr>
|
<tr>
|
<td>品牌</td>
|
<td>{{ item.content.brand }}</td>
|
</tr>
|
<tr>
|
<td>续航测算时间</td>
|
<td>{{ item.content.endurtime }}</td>
|
</tr>
|
<tr>
|
<td>续航测算类型</td>
|
<td>{{ item.content.endurstyle }}</td>
|
</tr>
|
<tr>
|
<td>续航发生时间</td>
|
<td>{{ item.content.endurstarttime }}</td>
|
</tr>
|
<tr>
|
<td>共享情况</td>
|
<td>{{ item.content.shareinfo }}</td>
|
</tr>
|
<tr>
|
<td>运营商购买发电服务状态</td>
|
<td>{{ item.content.buystatus }}</td>
|
</tr>
|
<tr>
|
<td>是否具备发电条件</td>
|
<td>{{ item.content.ischarge }}</td>
|
</tr>
|
<tr>
|
<td>上站路程</td>
|
<td>{{ item.content.distance }}</td>
|
</tr>
|
<tr>
|
<td>上站难易程度</td>
|
<td>{{ item.content.degree }}</td>
|
</tr>
|
<tr>
|
<td>客户问题库未完成蓄电池维修</td>
|
<td>{{ item.content.repair }}</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
{{# }else if(item.type == 'env'){ }}
|
<div class="layui-tab-item {{ item.cshow }}">
|
<div id="video" style="width: 100%;height: 100%;"></div>
|
<div id="videos" class="video-list">
|
<div class="video-list-container">
|
<div class="video-slideToggle"><i class="fa fa-chevron-right"></i></div>
|
<div class="video-list-content">
|
<div class="video-item video-item-active"><a href="javascript:;">视频1.mp4</a></div>
|
<div class="video-item"><a href="javascript:;">视频2.mp4</a></div>
|
<div class="video-item"><a href="javascript:;">视频3.mp4</a></div>
|
</div>
|
<div class="video-list-bg"></div>
|
</div>
|
</div>
|
</div>
|
{{# }else if(item.type == 'upload'){ }}
|
<div class="layui-tab-item">
|
<div class="upload-form-container">
|
<br>
|
<div class="layui-form mrl8">
|
<div class="layui-form-item">
|
<button type="button" class="layui-btn" id="test5"><i class="layui-icon"> </i>视频选择</button>
|
<span style="color: #FF0000;">请上传有关机房的视频</span>
|
</div>
|
</div>
|
<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 class="layui-progress layui-progress-big mrl8 mrr8" lay-showPercent="yes" lay-filter="uploadProgress">
|
<div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
|
</div>
|
<div class="bottom-btn">
|
<button type="button" class="layui-btn layui-btn-normal" id="upload">确认上传</button>
|
</div>
|
</div>
|
</div>
|
{{# }else if(item.type == 'envImg'){ }}
|
<div class="layui-tab-item {{ item.cshow }}">
|
<div class="layui-carousel" id="imgCarousel" lay-filter="imgCarousel">
|
<div carousel-item="" class="carousel-item" id="carouselItems"></div>
|
</div>
|
</div>
|
{{# }else if(item.type == 'envImgUpload'){ }}
|
<div class="layui-tab-item">
|
<div class="upload-form-container">
|
<br>
|
<div class="layui-form mrl8">
|
<div class="layui-form-item">
|
<button type="button" class="layui-btn" id="addImgs"><i class="layui-icon"> </i>图片选择</button>
|
<span style="color: #FF0000;">请上传电话卡、机房名称、电池型号、负载电流、bts设备接线、电池接线、整体安装效果图等图片</span>
|
</div>
|
</div>
|
<div class="layui-upload">
|
<div class="layui-upload-list">
|
<table class="layui-table">
|
<thead>
|
<tr>
|
<th>图片预览</th>
|
<th>文件名</th>
|
<th>大小</th>
|
<th>操作</th>
|
</tr>
|
</thead>
|
<tbody id="imgInfoTbl"></tbody>
|
</table>
|
</div>
|
</div>
|
<div class="bottom-btn">
|
<button type="button" class="layui-btn layui-btn-normal" id="uploadImgs">确认上传</button>
|
</div>
|
</div>
|
</div>
|
{{# }else if(item.type=='homeMap'){ }}
|
<div class="layui-tab-item {{ item.cshow }}">
|
<div id="BMap" style="width: 100%; height: 100%;"></div>
|
</div>
|
{{# } }}
|
{{# }); }}
|
</div>
|
</script>
|
<script>
|
layui.use(['element', 'laytpl', 'upload', 'carousel', 'layer'], function() {
|
var element = layui.element;
|
var laytpl = layui.laytpl;
|
var upload = layui.upload;
|
var carousel = layui.carousel;
|
var layer = layui.layer;
|
|
var permits = getterUserPermits(); // 获取所有的权限
|
var isCanDelImgs = isHasPermit('batt_discharge_model_permit', permits); // 判断是否有删除图片的权限
|
|
var tabTpl = $('#homeTab').html();
|
var homeInfo = parent.$('#homeInfoIframeData').data('data');
|
console.log(homeInfo);
|
updatehomeInfoTab(homeInfo);
|
|
// 重新渲染
|
element.render('progress','uploadProgress');
|
|
// 视频浏览模块
|
var videoObject = {
|
container: '#video', //容器的ID或className
|
variable: 'player', //播放函数名称
|
loop: false, //播放结束是否循环播放
|
autoplay: false,//是否自动播放
|
//poster: 'material/poster.jpg', //封面图片
|
preview: {},
|
drag: 'start', //拖动的属性
|
video: [
|
['', 'video/mp4']
|
]
|
};
|
|
var player;
|
var carouselStyle = new CarouselStyle($('#imgCarousel')); // 设置轮播图样式
|
element.on('tab(homeInfoTab)', function(data){
|
var playerName = '基站环境短视频';
|
var tabTxt = $(this).text();
|
if(!player && tabTxt == playerName) {
|
player = new ckplayer(videoObject);
|
}
|
carouselStyle.init();
|
});
|
|
// 点击显示视频列表
|
$('#homeInfoTab').on('click', '.video-slideToggle', function() {
|
var videos = $(this).parent().parent();
|
videos.toggleClass('video-slideHide');
|
});
|
|
// 机房id
|
var sid = homeInfo.sid;
|
|
// 获取视频列表
|
getVideoList(sid);
|
|
// 点击视频列表
|
var gFileName = '';
|
$('#homeInfoTab').on('click', '.video-item', function(){
|
var videoInfo = $(this).data('data');
|
$('#homeInfoTab .video-item').removeClass('video-item-active');
|
$(this).addClass('video-item-active');
|
videoObject.video = [[videoInfo.fileUrl, 'video/mp4']];
|
player = new ckplayer(videoObject);
|
});
|
|
|
// 上传视频模块
|
var videoInfoTbl = $('#videoInfoTbl');
|
// 渲染并初始化上传按钮
|
var uploadVideo = upload.render({
|
elem: '#test5'
|
,url: 'MyFileAction!uploadStationFile'
|
,auto: false
|
,bindAction: '#upload'
|
,multiple: true
|
,number: 1
|
,data: {
|
json:JSON.stringify( {
|
StationId: sid,
|
VideoOrImage: 'video'
|
})
|
}
|
,exts: 'mp4|MOV|avi|rmvb'
|
,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) {
|
element.progress('uploadProgress',percent + '%');
|
}
|
,done: function(res, index, upload) {
|
var rs = JSON.parse(res.result);
|
if(rs.code == 1) {
|
element.progress('uploadProgress', '上传成功！');
|
getVideoList(sid, gFileName, true);
|
}
|
}
|
});
|
|
// 根据指定格式data的值更新tab的内容
|
function updatehomeInfoTab(data) {
|
laytpl(tabTpl).render(data, function(html) {
|
$('#homeInfoTab').html(html);
|
element.render('tab', 'homeInfoTab');
|
});
|
}
|
|
|
|
// 获取视频列表
|
function getVideoList(sid, fileName, update) {
|
var tmp = {
|
StationId: sid,
|
VideoOrImage: 'video'
|
};
|
var videoContainer = $('#videos .video-list-content');
|
// 请求视频播放列表
|
$.ajax({
|
type: 'post',
|
async: true,
|
url: 'MyFileAction!searchStationSource',
|
data: 'json='+JSON.stringify(tmp),
|
dataType: 'json',
|
success: function(result) {
|
var rs = JSON.parse(result.result);
|
//console.log(rs);
|
if(rs.code==1) {
|
var data = rs.data;
|
var rsList = [];
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
var tmp = {};
|
tmp.fileName = _data.fileName;
|
tmp.fileUrl = '../../stationsrc/'+sid+'/video/'+_data.fileName;
|
rsList.push(tmp);
|
}
|
|
// 更新列表并获取当前播放的视频
|
var videoUrl = createVideosList(videoContainer, rsList, fileName);
|
// 是否更新视频列表
|
if(update) {
|
|
}else{
|
videoObject.video = [[videoUrl, 'video/mp4']];
|
}
|
}else {
|
createVideosList(videoContainer, [], fileName);
|
}
|
|
}
|
});
|
}
|
|
// 生成视频列表
|
function createVideosList(container, list, acName) {
|
// 清空container
|
container.text("");
|
// 判断是否存在视频列表
|
if(list.length == 0) {
|
return '';
|
}
|
// 遍历list
|
var acIndex = 0;
|
for(var i=0; i<list.length; i++) {
|
var _list = list[i];
|
var videoItem = $('<div class="video-item"><a href="javascript:;">'+_list.fileName+'</a></div>');
|
|
// 设置信息内容
|
videoItem.data('data', _list);
|
// 设置被激活的视频名称
|
if(_list.fileName == acName) {
|
acIndex = i;
|
}
|
|
container.append(videoItem);
|
}
|
|
// 激活被选中的视频
|
// container.find('.video-item').eq(acIndex).addClass('video-item-active');
|
// 设置全局的正在播放的视频的名称
|
gFileName = list[acIndex].fileName;
|
|
return list[acIndex].fileUrl;
|
}
|
|
|
// 机房环境图片集模块
|
var imgCarouselopts = {
|
elem: '#imgCarousel',
|
arrow: 'always',
|
width: '100%',
|
height: '100%',
|
autoplay: false
|
};
|
|
//常规轮播
|
var homeEnvImgs = carousel.render(imgCarouselopts);
|
var imgsInfo = $('#imgInfoTbl');
|
var uploadImgsLoad;
|
var uploadImgs = upload.render({
|
elem: '#addImgs'
|
,url: 'MyFileAction!uploadStationFile'
|
,accept: 'image'
|
,multiple: true
|
,data: {
|
json:JSON.stringify( {
|
StationId: sid,
|
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(''));
|
var pattern = new RegExp("(.*)\\.(\\w+)$");
|
pattern.test(file.name);
|
var filename = RegExp.$1;
|
var ext = RegExp.$2;
|
// 定义文件名称
|
var fileName = 'image&&'+index+'.'+ext;
|
|
obj.resetFile(index, file, fileName); //重命名文件名
|
|
//单个重传
|
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('上传成功！');
|
searchCarouselImgs(sid, homeEnvImgs, imgCarouselopts, imgsContainer);
|
}else {
|
layer.msg('上传失败！');
|
}
|
layer.close(uploadImgsLoad);
|
}
|
});
|
|
// 查询轮播图资源
|
var imgsContainer = $('#carouselItems');
|
searchCarouselImgs(sid, homeEnvImgs, imgCarouselopts, imgsContainer);
|
function searchCarouselImgs(sid, carousel, options, imgsContainer) {
|
var tmp = {
|
StationId: sid,
|
VideoOrImage: 'image'
|
};
|
// 请求视频播放列表
|
$.ajax({
|
type: 'post',
|
async: true,
|
url: 'MyFileAction!searchStationSource',
|
data: 'json='+JSON.stringify(tmp),
|
dataType: 'json',
|
success: function(result) {
|
var rs = JSON.parse(result.result);
|
//console.log(rs);
|
var rsList = [];
|
if(rs.code==1) {
|
var data = rs.data;
|
//console.log(data);
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
var tmp = {};
|
tmp.fileName = _data.fileName;
|
tmp.fileUrl = '../../stationsrc/'+sid+'/image/'+_data.fileName;
|
tmp.width = _data.ims.width;
|
tmp.height = _data.ims.hight;
|
tmp.sid = sid;
|
tmp.type= 1;
|
rsList.push(tmp);
|
}
|
}else {
|
var tmp = {};
|
tmp.fileName = 'none.jpg';
|
tmp.fileUrl = '../images/none.jpg';
|
tmp.width = 213;
|
tmp.height = 200;
|
tmp.type = 0;
|
rsList.push(tmp);
|
}
|
updateCarouselImgs(homeEnvImgs, imgCarouselopts, imgsContainer, rsList);
|
}
|
});
|
}
|
var carouselImgs = carousel.render(imgCarouselopts);
|
// 更新图片轮播图
|
function updateCarouselImgs(carousel, options, container, imgs) {
|
// 清空容器
|
container.text('');
|
// 遍历imgs
|
for(var i=0; i<imgs.length; i++) {
|
var _imgs = imgs[i];
|
var tmpDiv = $('<div></div>');
|
var img = $('<img src="'+_imgs.fileUrl+'">');
|
img.data('width', _imgs.width);
|
img.data('height', _imgs.height);
|
var btnCont = $('<div class="carousel-img-del-container"></div>');
|
var btn = $('<button class="layui-btn layui-btn-sm layui-btn-danger carousel-img-del">删除</button>');
|
btnCont.append(btn);
|
btn.data('imgs', _imgs);
|
// 绑定删除事件
|
btn.on('click', function() {
|
var __imgs = $(this).data('imgs');
|
__imgs.fileName = __imgs.fileName.replace(/&/g, '%26');
|
var temp = {
|
fileName: __imgs.fileName // 文件名称
|
,filePath: __imgs.sid // 机房id
|
,fileType: 'image'
|
};
|
// 删除图片
|
delCarouselImg(temp)
|
});
|
|
tmpDiv.append(img);
|
// 从后台读到的图片添加按钮
|
if(_imgs.type && isCanDelImgs) {
|
tmpDiv.append(btnCont);
|
}
|
container.append(tmpDiv);
|
}
|
if(imgs.length == 1) {
|
container.siblings('.layui-icon.layui-carousel-arrow').remove();
|
container.siblings('.layui-carousel-ind').remove();
|
}else {
|
options.indicator = 'inside';
|
options.arrow = 'always';
|
}
|
//console.log(options);
|
carouselImgs.reload(options);
|
carouselStyle.init();
|
}
|
|
// 删除图片
|
function delCarouselImg(temp) {
|
// 判断是否删除
|
layer.confirm('是否删除当前图片', {icon:3, title: '提示'}, function(index) {
|
layer.close(index);
|
var loading = layer.load(1);
|
$.ajax({
|
type: 'post'
|
,async: true
|
,url: 'MyFileAction!deleteFile'
|
,data: 'json='+JSON.stringify(temp)
|
,dataType: 'json'
|
,success: function(res) {
|
//var rs = JSON.parse(res.result);
|
console.log(res);
|
searchCarouselImgs(temp.filePath, homeEnvImgs, imgCarouselopts, imgsContainer);
|
}
|
,complete: function() {
|
layer.close(loading);
|
}
|
});
|
});
|
}
|
|
// 机房地图模块
|
var bMap = $('#BMap');
|
// 判断地图容器是否存在
|
if(bMap.length != 0) {
|
// 创建地图
|
let map = createMap();
|
// 生成地图图标
|
createMapPoint(map);
|
}
|
|
// 生成地图
|
function createMap() {
|
let map = new BMap.Map('BMap');
|
var point = new BMap.Point(125.3192,43.8090);
|
map.centerAndZoom(point, 11); // 用城市名设置地图中心点
|
map.enableScrollWheelZoom();
|
map.disableDoubleClickZoom();
|
// 添加地图类型控件
|
map.addControl(new BMap.MapTypeControl());
|
// 给地图添加工具条(地图-卫星-三维)和比例尺控件
|
let bottom_left_control = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
|
map.addControl(bottom_left_control); // 添加比例尺到地图
|
|
return map;
|
}
|
|
// 生成地图图标并移动到中心位置
|
function createMapPoint(map) {
|
var homeData = getTabCItem('homeMap', homeInfo.tabc);
|
// 判断是否获取到了
|
if(homeData.code == 1) {
|
console.log(homeData);
|
var point = new BMap.Point(homeData.data.lng, homeData.data.lat);
|
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.disableDragging(); // 设置不可拖动
|
map.addOverlay(mk); // 将覆盖物添加到地图中
|
mk.setLabel(label); // 给覆盖物添加label提示
|
map.panTo(point); // 将地图移动到添加的点位置
|
map.setZoom(20); // 设置地图的缩放等级
|
}else {
|
layer.msg('获取机房信息失败');
|
}
|
}
|
|
// 获取指定的tabC内容
|
function getTabCItem(type, tabs) {
|
let rs = {
|
code: 0
|
,data: {}
|
,msg: '未检测到信息'
|
};
|
// 遍历tabs
|
for(let i=0; i<tabs.length;i++) {
|
let _tab = tabs[i];
|
if(_tab.type == type) {
|
rs.code = 1;
|
rs.data = _tab;
|
rs.msg = '获取成功' ;
|
break;
|
}
|
}
|
|
return rs;
|
}
|
});
|
</script>
|
</body>
|
</html>
|
