| | |
|---|
| | | body.homeinfo-tab .layui-tab-content .layui-tab-item.layui-show {
|
|---|
| | | height: 100%;
|
|---|
| | | }
|
|---|
| | | #imgCarousel .carousel-item div {
|
|---|
| | | text-align: center;
|
|---|
| | | }
|
|---|
| | | #imgCarousel img {
|
|---|
| | | width: auto;
|
|---|
| | | height: 100%;
|
|---|
| | | } |
|---|
| | | </style>
|
|---|
| | | </head>
|
|---|
| | | <body class="homeinfo-tab">
|
|---|
| | |
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | {{# }else if(item.type == 'envImg'){ }}
|
|---|
| | | <div class="layui-tab-item">
|
|---|
| | | <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>
|
|---|
| | | </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>
|
|---|
| | | {{# } }}
|
|---|
| | | |
|---|
| | | {{# }); }}
|
|---|
| | | </div>
|
|---|
| | | </script>
|
|---|
| | | <script>
|
|---|
| | | layui.use(['element', 'laytpl', 'upload'], function() {
|
|---|
| | | 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 tabTpl = $('#homeTab').html();
|
|---|
| | | var homeInfo = parent.$('#homeInfoIframeData').data('data');
|
|---|
| | |
|---|
| | | ,number: 1
|
|---|
| | | ,data: {
|
|---|
| | | json:JSON.stringify( {
|
|---|
| | | StationId: sid
|
|---|
| | | StationId: sid,
|
|---|
| | | VideoOrImage: 'video'
|
|---|
| | | })
|
|---|
| | | }
|
|---|
| | | ,accept: 'video' //视频
|
|---|
| | | ,choose: function(obj) {
|
|---|
| | | |
|---|
| | | var files = this.files = obj.pushFile();
|
|---|
| | | console.log(files);
|
|---|
| | | //console.log(files);
|
|---|
| | | videoInfoTbl.text('');
|
|---|
| | | // 遍历
|
|---|
| | | Object.keys(files).forEach(function(key) {
|
|---|
| | | var file = files[key];
|
|---|
| | | console.log(file);
|
|---|
| | | //console.log(file);
|
|---|
| | | var tr = $(['<tr id="upload-'+ key +'">'
|
|---|
| | | ,'<td>'+ file.name +'</td>'
|
|---|
| | | ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
|
|---|
| | |
|---|
| | | function getVideoList(sid, fileName,update) {
|
|---|
| | | var tmp = {
|
|---|
| | | StationId: sid,
|
|---|
| | | StationName: 'video'
|
|---|
| | | VideoOrImage: 'video'
|
|---|
| | | };
|
|---|
| | | var videoContainer = $('#videos .video-list-content');
|
|---|
| | | // 请求视频播放列表
|
|---|
| | |
|---|
| | | dataType: 'json',
|
|---|
| | | success: function(result) {
|
|---|
| | | var rs = JSON.parse(result.result);
|
|---|
| | | //console.log(rs);
|
|---|
| | | if(rs.code==1) {
|
|---|
| | | var data = rs.data;
|
|---|
| | | var rsList = [];
|
|---|
| | |
|---|
| | | if(update) {
|
|---|
| | |
|
|---|
| | | }else{
|
|---|
| | | //videoObject.video = [[videoUrl, 'video/mp4']];
|
|---|
| | | videoObject.video = [[videoUrl, 'video/mp4']];
|
|---|
| | | }
|
|---|
| | | }else {
|
|---|
| | | createVideosList(videoContainer, [], 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(''));
|
|---|
| | | |
|---|
| | | //单个重传
|
|---|
| | | 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;
|
|---|
| | | 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;
|
|---|
| | | rsList.push(tmp);
|
|---|
| | | }
|
|---|
| | | }else {
|
|---|
| | | var tmp = {};
|
|---|
| | | tmp.fileName = 'none.jpg';
|
|---|
| | | tmp.fileUrl = '../images/none.jpg';
|
|---|
| | | rsList.push(tmp);
|
|---|
| | | }
|
|---|
| | | updateCarouselImgs(homeEnvImgs, imgCarouselopts, imgsContainer, rsList);
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | | }
|
|---|
| | | |
|---|
| | | // 更新图片轮播图
|
|---|
| | | function updateCarouselImgs(carousel, options, container, imgs) {
|
|---|
| | | // 清空容器
|
|---|
| | | container.text('');
|
|---|
| | | // 遍历imgs
|
|---|
| | | for(var i=0; i<imgs.length; i++) {
|
|---|
| | | var _imgs = imgs[i];
|
|---|
| | | var item = $('<div><img src="'+_imgs.fileUrl+'"></div>');
|
|---|
| | | container.append(item);
|
|---|
| | | }
|
|---|
| | | |
|---|
| | | carousel.reload(options);
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | | </script>
|
|---|
| | | </body>
|
|---|
