视频/图片机房的定位的上传

hdw

2018-12-13 eb5f33c8ffdb60db5613353b8dadeb81dff7f798

视频/图片机房的定位的上传 

 gx_tieta/WebRoot/mobil/app/css/common.css

@@ -154,4 +154,11 @@
/* layui */

.layui-form-pane.layui-form-default .layui-form-label {

    color: #000000;

}

/* color */

gray1 {

    color: #c2c2c2;

}

.black {

    color: #000000;

}

 gx_tieta/WebRoot/mobil/app/css/map.css

@@ -6,6 +6,24 @@
    height: 32px;

    background-color: #FFFFFF;

}

.map-location-logo-container{

    width: 100%;

    height: 100%;

}

.map-location-logo-container {

    background-size: 20px 20px;

    background-repeat: no-repeat;

    background-position: center center;

}

.map-location-logo-container.default {

    background-image: url("../../image/default-40x40.png");

}

.map-location-logo-container.loading {

    background-image: url("../../image/loading-40x40.gif");

}

.map-location-logo-container.success {

    background-image: url("../../image/success-40x40.png");

}

.map-search-container {

    position: absolute;

    top: 10px;


 gx_tieta/WebRoot/mobil/iframe/homeinfo.html

@@ -29,30 +29,30 @@
                            <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 layui-bg-gray">

                                    <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 layui-bg-gray">

                                    <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"></textarea>

                                    <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 layui-bg-gray" disabled=""></textarea>

                                    <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">提交机房信息</button>

                                    <button class="layui-btn layui-btn-normal layui-btn-sm" id="addHome">提交机房信息</button>

                                </div>

                            </div>

                        </div>

@@ -82,12 +82,12 @@
                                    </div>

                                </div>

                                <div class="layui-col-12 mrt5">

                                    <div class="layui-progress layui-progress-big" lay-showpercent="true">

                                        <div class="layui-progress-bar" lay-percent="70%"></div>

                                    <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">视频上传</button>

                                    <button class="layui-btn layui-btn-normal layui-btn-sm" id="uploadVideo">视频上传</button>

                                </div>

                            </div>

                        </div>

@@ -117,7 +117,7 @@
                                </div>

                            </div>

                            <div class="layui-col-12 t-align-right mrt5">

                                <button class="layui-btn layui-btn-normal layui-btn-sm">图片上传</button>

                                <button class="layui-btn layui-btn-normal layui-btn-sm" id="uploadImgs">图片上传</button>

                            </div>

                        </div>

                    </div>

@@ -144,19 +144,40 @@
            </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="../../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'], function() {

        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层的索引

@@ -173,11 +194,14 @@
                elem: '#videoSelect'

                ,url: 'MyFileAction!uploadStationFile'

                ,auto: false

                ,bindAction: '#upload'

                ,bindAction: '#uploadVideo'

                ,multiple: true

                ,number: 1

                ,data: {

                    
                    json:JSON.stringify( {

                        StationId: homeInfo.homeId,

                        VideoOrImage: 'video'

                    })

                }

                ,accept: 'video' //视频

                ,choose: function(obj) {

@@ -207,10 +231,14 @@
                    });

                }

                ,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', '上传成功！');

                    }

                }

            });



@@ -223,7 +251,10 @@
                ,accept: 'image'

                ,multiple: true

                ,data: {

                    
                    json:JSON.stringify( {

                        StationId: homeInfo.homeId,

                        VideoOrImage: 'image'

                    })

                }

                ,auto: false

                ,bindAction: '#uploadImgs'

@@ -264,13 +295,54 @@
                    var rs = JSON.parse(res.result);

                    if(rs.code == 1) {

                        layer.msg('上传成功！');

                        searchCarouselImgs(sid, homeEnvImgs, imgCarouselopts, imgsContainer);

                    }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("设置成功");

                                map.clearOverlays();

                                searchStation();

                                searchProvince();

                            }else{

                                alert("设置失败");

                            }

                        } 				
                    });

                }

            }

        });

    </script>

</body>


 gx_tieta/WebRoot/mobil/iframe/searchHome.html

@@ -57,24 +57,12 @@
            });



            //  获取所有机房的列表

            var homeSource = [

                {label: '湖北-武汉-东西湖区-测试机房1'}

                ,{label: '湖北-武汉-东西湖区-测试机房5'}

                ,{label: '湖北-武汉-东西湖区-测试机房6'}

                ,{label: '湖北-武汉-东西湖区-测试机房7'}

                ,{label: '湖北-武汉-东西湖区-测试机房8'}

                ,{label: '湖北-武汉-东西湖区-测试机房9'}

                ,{label: '湖北-武汉-东西湖区-测试机房10'}

                ,{label: '广西-百色-呵呵区-测试机房1'}

                ,{label: '广西-百色-呵呵区-测试机房2'}

                ,{label: '广西-百色-呵呵区-测试机房3'}

                ,{label: '广西-百色-呵呵区-测试机房4'}

            ];

            
            createHomeList($('#homeList'), homeSource);



            var homeSource = parent.$('#searchHomeIframe').data('homeSource');

            // 实例化数据检测

            var checkHomeData = new CheckData();

            checkHomeData.setSource(homeSource);

            createHomeList($('#homeList'), homeSource);

            
            

            // 更改文本框的值获取

            $('#searchInput').on('input propertychange', function() {


 gx_tieta/WebRoot/mobil/image/default-40x40.png

 gx_tieta/WebRoot/mobil/image/loading-40x40.gif

 gx_tieta/WebRoot/mobil/image/success-40x40.png

 gx_tieta/WebRoot/mobil/map.html

@@ -14,6 +14,40 @@
    <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>

        .map-panel-btn {

            /*初始化按钮*/

            font-size: 12px;

            text-decoration: none!important;

            font-family: Helvetica, Arial, sans serif;

            padding: 4px 12px;

            border-radius: 3px;

            -moz-border-radius: 3px;

            box-shadow: inset 0px 0px 2px #fff;

            -o-box-shadow: inset 0px 0px 2px #fff;

            -webkit-box-shadow: inset 0px 0px 2px #fff;

            -moz-box-shadow: inset 0px 0px 2px #fff;

            /*定义颜色和样式*/

            color: #41788c;

            border: 1px solid #6fb1c7;

            background-image: -moz-linear-gradient(#aae5f7, #73d0f1);

            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#73d0f1), to(#aae5f7));

            background-image: -webkit-linear-gradient(#aae5f7, #73d0f1);

            background-image: -o-linear-gradient(#aae5f7, #73d0f1);

            text-shadow: 1px 1px 1px #bfeafb;

            background-color: #73d0f1;

            /* 定义位置 */

            margin-left: 200px;

        }

        .map-panel-btn:hover {

            border: 1px solid #4690ad;

            background-image: -moz-linear-gradient(#73d0f1, #aae5f7);

            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#aae5f7), to(#73d0f1));

            background-image: -webkit-linear-gradient(#73d0f1, #aae5f7);

            background-image: -o-linear-gradient(#73d0f1, #aae5f7);

            background-color: #aae5f7;

        }

    </style>

</head>

<body class="full-height">

    <div class="abs">

@@ -25,7 +59,7 @@
                    </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 t-align-right">

                        <button class="layui-btn layui-btn-primary layui-btn-sm mrr8" id="homeInfo"><i class="fa fa fa-bars mrr4"></i>功能</button>

                        <!-- <button class="layui-btn layui-btn-primary layui-btn-sm mrr8" id="homeInfo"><i class="fa fa fa-bars mrr4"></i>功能</button> -->

                    </div>

                </div>

            </div>

@@ -42,13 +76,19 @@
                            </div>

                        </div>

                    </div>

                    <div id="mapLocationLogo" class="map-location-logo"></div>

                    <div id="mapLocationLogo" class="map-location-logo">

                        <div class="map-location-logo-container default"></div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <!-- 存储机房信息列表 -->

    <div id="searchHomeIframe"></div>

    <!-- 存在机房信息 -->

    <div id="homeInfoIframe"></div>

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

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

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

    <script>

        //  百度地图模块

        var map = new BMap.Map('map');

@@ -59,44 +99,209 @@
        // 给地图添加工具条(地图-卫星-三维)和比例尺控件

        map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));



        // 添加定位控件

        var geolocationControl = new BMap.GeolocationControl();

        map.addControl(geolocationControl);

        // 浏览器定位（前提是有网络和开启GPS权限）

        var geolocation = new BMap.Geolocation();

        
        // 点击定位按钮

        $('#mapLocationLogo .map-location-logo-container').click(function() {

            $(this).removeClass('default loading success').addClass('loading');

            var _this = $(this);

            geolocation.getCurrentPosition(function(r){

                   if(this.getStatus() == BMAP_STATUS_SUCCESS){

                       delMkByLabel('新机房');

                       _this.removeClass('default loading success').addClass('success');

                       var mk = new BMap.Marker(r.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(r.point, 20);        // 将地图移动到添加的点位置

                    map.setZoom(20);            // 设置地图的缩放等级

					
                    // 给maker点绑定点击事件

                    mk.addEventListener('click', function(e) {

                        var target = e.target;

                        showAddMapPanel(target);

                    });

                   }else {

                       layer.msg('定位失败，请检查GPS或网络！');

                   }

           });

        });

		
        // 删除

        function delMkByLabel(str) {

            var allOverlay = map.getOverlays();

            for (var i = 0; i < allOverlay.length -1; i++){

                if(allOverlay[i].getLabel) {

                    if(allOverlay[i].getLabel().content == str){

                        map.removeOverlay(allOverlay[i]);

                        return false;

                    }

                }

				
            }

        }

		
        // 添加增加机房的面板

        function showAddMapPanel(target) {

            var geoc = new BMap.Geocoder();

            var searchInforWin = null;

            var pt = target.point;



        // layui模块

        layui.use(['layer'], function() {

            var layer = layui.layer;      // 获取layer模块

            var iframePopup;

            
            // 点击筛选弹出内容

            $('#homeInfo').click(function() {

                iframePopup = layer.open({

                    type: 2

                    ,closeBtn: 0

                    ,title: false

                    ,area: ['100%', '100%']

                    ,full: true

                    ,anim: 4

                    ,content: 'iframe/homeinfo.html'

                });

            var opts = {

                title  : '设置站点位置',      //标题

                width  : 290,             //宽度

                height : 150,              //高度

                panel  : "panel",         //检索结果面板

                enableAutoPan : true,     //自动平移

                searchTypes   :[

                    // BMAPLIB_TAB_SEARCH,   //周边检索

                    // BMAPLIB_TAB_TO_HERE,  //到这里去

                    // BMAPLIB_TAB_FROM_HERE //从这里出发

                ]

            };

            geoc.getLocation(pt, function(rs){

                var addComp = rs.addressComponents;

                $.ajax({ 	
                    type: "post", 				
                    url: "BattMap_informationAction!serchNotInBattMap",				
                    async:true,				
                    dataType:'text',

                    data:null,		
                    success: function(data){ 
                        //console.info(data);

                        data = eval('('+data+')');

                        var model = eval('('+data.result+')');

                        //console.info(model);

                        var options = "";

                        if(model.code == 1){

                            for(var i=0;i<model.data.length;i++){

                                options+= '<option value="'+model.data[i].StationId+'">'+model.data[i].StationName+'</option>';

                            }

                        }else{

                            options = "<option value='0'>暂无可设站点</option>";

                        }

						
                        var content = '<div class="add-panel">'+

                            '<div style="padding: 6px 4px"><span>地址：</span>'+

                            '<span class="addr">'+addComp.province+'-'+addComp.city+'-'+addComp.district+'-'+addComp.street+'</span></div>'+

                            '<div style="padding: 6px 4px">经度：<span class="lng">'+rs.point.lng+'</span>，纬度：<span class="lat">'+rs.point.lat+'</span></div>'+

                            '<div style="padding: 6px 4px"><span>设置站点名：</span>'+'<select style="border: 1px solid #ccc; width: 180px">'+options+'</select></div>'+

                            '<div style="padding: 6px 4px; margin-top: 20px">'+

                            '<a href="javascript:showHomeInfo();" class="map-panel-btn">确定</a></div>'

                        +'</div>';

	
                        searchInforWin = new BMapLib.SearchInfoWindow(map, content, opts);

	
                        searchInforWin.open(rs.point);

                        $('.BMapLib_sendToPhone').hide();

                    } 				
                });

            });

        }

		
		
        // 显示机房详细信息

        var iframePopup;

        function showHomeInfo() {

            var lng = $('.add-panel .lng').text();                            // 获取经度

            var lat = $('.add-panel .lat').text();                            // 获取纬度

            var addr = $('.add-panel .addr').text();                        // 获取地址

            var homeId = $('.add-panel select option:selected').val();        // 机房Id

            var homeName = $('.add-panel select option:selected').text();    // 机房名称

            var temp = {

                homeId: homeId

                ,homeName: homeName

                ,addr: addr

                ,lng: lng

                ,lat: lat

            }

            // 显示暂无可设站点

            if(homeId == 0) {

                layer.msg(homeName);

                return;

            }

            // 存储值

            $('#homeInfoIframe').data('homeInfo', temp);

			
            iframePopup = layer.open({

                type: 2

                ,closeBtn: 0

                ,title: false

                ,area: ['100%', '100%']

                ,full: true

                ,anim: 4

                ,content: 'iframe/homeinfo.html'

            });



            // 搜索机房获取焦点

            $('#searchInput').on('focus', function() {

                $(this).blur();

                iframePopup = layer.open({

                    type: 2

                    ,closeBtn: 0

                    ,title: false

                    ,area: ['100%', '100%']

                    ,full: true

                    ,anim: 5

                    ,content: 'iframe/searchHome.html'

                });

        }

        
        // 点击筛选弹出内容

        $('#homeInfo').click(function() {

            iframePopup = layer.open({

                type: 2

                ,closeBtn: 0

                ,title: false

                ,area: ['100%', '100%']

                ,full: true

                ,anim: 4

                ,content: 'iframe/homeinfo.html'

            });



        });



        // 搜索机房获取焦点

        $('#searchInput').on('focus', function() {

            $(this).blur();

            iframePopup = layer.open({

                type: 2

                ,closeBtn: 0

                ,title: false

                ,area: ['100%', '100%']

                ,full: true

                ,anim: 5

                ,content: 'iframe/searchHome.html'

            });

        });

        
        // 查询机房

        findHome();

        function findHome() {

            var tmp = {

                StationName1:'',

                StationName2: '',

                StationName5:''

            };

			
            // 查询将信息

            $.post("BattInfAction!serchStationName3","json="+JSON.stringify(tmp),function(result){

                var rs = JSON.parse(result.result);

                if(rs.code==1){

                    homeSource = [];

                    var data = rs.data;

                    for(var i=0; i<data.length; i++) {

                        var _data = data[i];

                        var tmp = {

                            label: _data.StationName+'('+_data.StationId+')',

                            province: _data.StationName1,

                            city: _data.StationName2,

                            county: _data.StationName5,

                            home: _data.StationName,

                            homeid: _data.StationId

                        };

						
                        // 添加到资源

                        homeSource.push(tmp);

                    }

                    //console.log(homeSource)

                    // 设置资源内容

                    $('#searchHomeIframe').data('homeSource', homeSource);

                }

            });

			
        }

        
		
        //拦截安卓回退按钮

        history.pushState(null, null, location.href);

        window.addEventListener('popstate', function(event) {