keke
blame | 历史 | 补丁 | 提交 | 提交对比 | ignore whitespace
hdw
2019-01-18 9c670af9d062caf6ee2a3835c52932ba11b05a3e 
 gx_tieta/WebRoot/iframe/homeinfo.html


@@ -9,6 +9,11 @@


    <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;



@@ -19,6 +24,16 @@


        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 {



         width: auto;



         height: 100%;



      } 


    </style>



</head>



<body class="homeinfo-tab">



@@ -29,6 +44,7 @@


    </div>



    <script src="../js/jquery-1.8.3.js"></script>



    <script src="../src/layui.js"></script>



    <script src="../ckplayer/ckplayer.js"></script>



    <script type="text/html" id="homeTab">



        <ul class="layui-tab-title">



            {{# layui.each(d.tabc, function(index, item){ }}



@@ -39,7 +55,7 @@


            {{# layui.each(d.tabc, function(index, item){ }}



                {{# if(item.type == 'group'){ }}



                <div class="layui-tab-item {{ item.cshow }}">



                    <table class="hdw-tbl">



                    <table class="hdw-tbl mrb8">



                        <thead>



                            <tr>



                                <th style="width:30%">参数名称</th>



@@ -103,12 +119,16 @@


                                <td>负责人</td>



                                <td>{{ item.content.person }}</td>



                            </tr>



                     <tr>



                                <td>安装人员</td>



                                <td>{{ item.content.install_user }}</td>



                            </tr>



                        </tbody>



                    </table>



                </div>



                {{# }else{ }}



                {{# }else if(item.type == 'home'){ }}



                <div class="layui-tab-item {{ item.cshow }}">



                    <table class="hdw-tbl">



                    <table class="hdw-tbl mrb8">



                        <thead>



                            <tr>



                                <th style="width:30%">参数名称</th>



@@ -271,19 +291,218 @@


                        </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 class="layui-input-inline">



                                 <input type="text" name="title" autocomplete="off" placeholder="请输入视频名称" class="layui-input">



                           </div>



                        </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;">请上传有关机房的图片</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'], 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');



            //console.log(homeInfo);



            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;



         element.on('tab(homeInfoTab)', function(data){



            var playerName = '基站环境短视频';



            var tabTxt = $(this).text();



            if(!player && tabTxt == playerName) {



               player = new ckplayer(videoObject);



            }



         });



            


            // 点击显示视频列表



            $('#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) {



@@ -291,6 +510,277 @@


                    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(''));



				        


                    //单个重传



                    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);



         }



			


         // 机房地图模块



         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>