You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
343 lines
10 KiB
343 lines
10 KiB
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
|
pageEncoding="UTF-8"%>
|
|
<%@ page import="com.lp.cfg.ProConfig"%>
|
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
|
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<%@ include file="/WEB-INF/oss/iot/common/variable.jsp"%>
|
|
<%@ include file="/WEB-INF/oss/iot/common/variable_js.jsp"%>
|
|
<%@ include file="/WEB-INF/oss/iot/common/resource_lib.jsp"%>
|
|
<script type="text/javascript" src="<%=basePath%>/lib/distpicker/distpicker.data.js" charset="UTF-8"></script>
|
|
<script type="text/javascript" src="<%=basePath%>/lib/distpicker/distpicker.js" charset="UTF-8"></script>
|
|
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=<%=ProConfig.Map.BAIDU_MAP_KEY%>"></script>
|
|
<style type="text/css">
|
|
#map {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
|
|
.mapContainer{
|
|
width:100%;
|
|
}
|
|
.dashboard-menu{
|
|
border-top:1px solid #ecf0f5;
|
|
}
|
|
.app-container{
|
|
width: 100%;border-top:1px solid #ecf0f5;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.box-white {
|
|
width: 97%;
|
|
min-width: 897px;
|
|
padding-bottom: 0;
|
|
margin: 0 auto;
|
|
}
|
|
.box {
|
|
padding: 10px;
|
|
padding-top:1px;
|
|
border-left: 1px solid #d2d6de;
|
|
border-right: 1px solid #d2d6de;
|
|
border-bottom: 1px solid #d2d6de;
|
|
}
|
|
.box {
|
|
border: 0!important;
|
|
|
|
}
|
|
.box {
|
|
position: relative;
|
|
border-radius: 3px;
|
|
background: #fff;
|
|
border-top: 3px solid #d2d6de;
|
|
margin-bottom: 20px;
|
|
margin: 0 auto;
|
|
}
|
|
.sceneList-info{
|
|
padding-top: 10px;
|
|
padding-left: 10px;
|
|
}
|
|
.BMap_cpyCtrl {
|
|
display: none;
|
|
}
|
|
.p-title{
|
|
padding: 20px 0;
|
|
font-size: 20px;
|
|
margin-left: -50px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<!-- 下方部位 -->
|
|
<div>
|
|
<div class="mapContainer" >
|
|
<div class="app-container">
|
|
<div class="container-layout sceneList-info">
|
|
<div class="box join-device-box">
|
|
<div class="clearfix" style="width: 600px;margin: 0 auto;">
|
|
<div>
|
|
<div class="ml-20" id="form_submit_add" config-option=" url:'/scene',
|
|
submit:'.add-Btn',
|
|
success:'sunccessReturn' " >
|
|
<div id="form_submit_update" config-option=" url:'/scene','method':'put',
|
|
submit:'.add-Btn',
|
|
success:'sunccessReturn' " >
|
|
<div id="detail_get" config-option=" 'url':'/scene?id=$#init-id$',success:'getIdCallBack' ">
|
|
<input id="init-id" type-name="id" type="hidden">
|
|
|
|
<div class="form-line">
|
|
<div class="float-left" style="width: 48%; ">
|
|
<span class="red">*</span> <span>项目名称：</span>
|
|
<div class="pb-10 pt-10">
|
|
<input placeholder="项目名称" validate="empty" type-name="name" class="input input-big" >
|
|
</div>
|
|
</div>
|
|
<div class="float-left" style="width: 48%;margin-left: 4%;" >
|
|
<span class="red">*</span> <span>排序：</span>
|
|
<div class="pb-10 pt-10">
|
|
<input placeholder="显示顺序" value="1" type="number" validate="empty" type-name="seq" class="input input-big" >
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-line">
|
|
<div class="float-left" style="width: 48%; ">
|
|
<span class="red">*</span> <span>经度：</span>
|
|
<div class="pb-10 pt-10">
|
|
<input placeholder="经度" validate="empty" onclick="showMap()" type-name="lon" class="input input-big input-map" >
|
|
</div>
|
|
</div>
|
|
<div class="float-left" style="width: 48%;margin-left: 4%;" >
|
|
<span class="red">*</span> <span>纬度：</span>
|
|
<div class="pb-10 pt-10">
|
|
<input placeholder="纬度" validate="empty" onclick="showMap()" type-name="lat" class="input input-big input-map" >
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-line">
|
|
<span class="red">*</span> <span>省市 ：</span>
|
|
<div id="distpicker" style="margin-top: 10px;margin-bottom: 10px">
|
|
<select id="city1" type-name="province" class="input input-big" style="width: 49%;float: left"></select>
|
|
<select id="city2" type-name="city" class="input input-big " style="width: 49%;float: left;margin-left: 10px"></select>
|
|
<input style="display: none" type-name="province_code" >
|
|
<input style="display: none" type-name="city_code" >
|
|
<div style="clear: both"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-line">
|
|
<div class="float-left" style="width: 48%; ">
|
|
<span>项目描述：</span>
|
|
<div class="pb-10 pt-10">
|
|
<input placeholder="项目描述" type-name="description" class="input input-big" >
|
|
</div>
|
|
</div>
|
|
<div class="float-left" style="width: 48%;margin-left: 4%;" >
|
|
<span>备注：</span>
|
|
<div class="pb-10 pt-10">
|
|
<input placeholder="备注信息" type-name="remark" class="input input-big" >
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-line clearfix pb-10">
|
|
<button onclick="parent.layer.close(index);" style="background: #aaa;" class="cancel-btn layui-btn ml-20 border-gray float-right">取消</button>
|
|
<button class="add-Btn ml-10 float-right layui-btn layui-btn-normal">保存</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="map_container" class="hide">
|
|
<div style="height: 350px;width: 100%;">
|
|
<div id="map"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<style>
|
|
#city .ivu-select-selection{
|
|
height: 46px;
|
|
}
|
|
#city .ivu-select-selection .ivu-select-input{
|
|
line-height: 46px;
|
|
height: 46px;
|
|
font-size: 16px;
|
|
}
|
|
#city .ivu-select-selection .ivu-select-selected-value{
|
|
line-height: 46px;
|
|
height: 46px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
</style>
|
|
<script type="text/javascript">
|
|
function initCity(province,city){
|
|
$("#distpicker").distpicker('destroy');
|
|
$("#distpicker").distpicker({
|
|
placeholder: false,
|
|
province: province,
|
|
city:city
|
|
});
|
|
gic("province_code").val($('#distpicker').find('select').eq(0).find('option:selected').attr('data-code'));
|
|
gic("city_code").val($('#distpicker').find('select').eq(1).find('option:selected').attr('data-code'));
|
|
}
|
|
function getIdCallBack(data) {
|
|
initCity(data.data.province,data.data.city)
|
|
$('#city1').on('change', function(e) {
|
|
gic("province_code").val($('#distpicker').find('select').eq(0).find('option:selected').attr('data-code'));
|
|
gic("city_code").val($('#distpicker').find('select').eq(1).find('option:selected').attr('data-code'));
|
|
})
|
|
$('#city2').on('change', function(e) {
|
|
gic("province_code").val($('#distpicker').find('select').eq(0).find('option:selected').attr('data-code'));
|
|
gic("city_code").val($('#distpicker').find('select').eq(1).find('option:selected').attr('data-code'));
|
|
})
|
|
|
|
}
|
|
|
|
function showMap(){
|
|
openWindow("地图获取","#map_container","600px");
|
|
if(! validater.empty( gic("lon").val() ) ){
|
|
// 如果当前已有定位，则将定位显示到地图上
|
|
theLocation2(gic("lon").val(),gic("lat").val());
|
|
}
|
|
}
|
|
|
|
//获取窗口索引
|
|
var index = parent.layer.getFrameIndex(window.name);
|
|
|
|
function sunccessReturn(){
|
|
// forwardUrl("/iot/app_manager",1000,"保存成功");
|
|
tip("成功");
|
|
setTimeout(function() {
|
|
// 添加成功
|
|
parent.layer.close(index);
|
|
//parent.location.reload();
|
|
window.parent.reflesh();
|
|
}, 1000);
|
|
|
|
}
|
|
|
|
|
|
|
|
$(function(){
|
|
// 初始化url参数
|
|
var id = GetQueryString("id");
|
|
if(validater.empty(id)){
|
|
manual_form_submit($("#form_submit_add"))
|
|
}else{
|
|
$(".p-title").html("编辑项目");
|
|
writeVal("init-id",id);
|
|
manual_form_submit($("#form_submit_update"));
|
|
manual_init_detail_get($("#detail_get"));
|
|
}
|
|
|
|
// 百度地图API功能
|
|
map = new BMap.Map("map"); // 创建Map实例
|
|
map.setMapStyle({
|
|
styleJson: [{
|
|
"featureType": "road",//道路
|
|
"elementType": "all",
|
|
"stylers": {
|
|
"color": "#ffffff",
|
|
"visibility": "off"
|
|
}
|
|
},
|
|
{
|
|
"featureType": "building",
|
|
"elementType": "all",
|
|
"stylers": {
|
|
"visibility": "off"
|
|
}
|
|
},
|
|
{
|
|
"featureType": "poilabel",//景点
|
|
"elementType": "all",
|
|
"stylers": {
|
|
"visibility": "off"
|
|
}
|
|
},
|
|
{
|
|
"featureType": "manmade",//学院
|
|
"elementType": "all",
|
|
"stylers": {
|
|
"visibility": "off"
|
|
}
|
|
}
|
|
]
|
|
});
|
|
map.centerAndZoom('南京', 9); // 初始化地图,设置中心点坐标和地图级别
|
|
//添加地图类型控件
|
|
map.addControl(new BMap.MapTypeControl({
|
|
mapTypes:[
|
|
BMAP_NORMAL_MAP,
|
|
BMAP_HYBRID_MAP
|
|
]}));
|
|
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
|
|
|
|
map.addEventListener("click", showInfo);
|
|
|
|
function showInfo(e){
|
|
theLocation(e.point.lng , e.point.lat);
|
|
}
|
|
|
|
function theLocation(lon,lat){
|
|
map.clearOverlays();
|
|
var icon = new BMap.Icon('<%=basePath%>/image/oss/iot/location2.png', new BMap.Size(32, 32), {
|
|
anchor: new BMap.Size(32, 32)
|
|
});
|
|
var mkr = new BMap.Marker(new BMap.Point(lon,lat), {
|
|
icon: icon
|
|
});
|
|
var new_point = new BMap.Point(lon,lat);
|
|
map.addOverlay(mkr);
|
|
|
|
$.ajax({
|
|
url:localUrl+'/baidu/api/geocoder',
|
|
dataType: "json",
|
|
type:'POST',
|
|
data:{
|
|
lat:lat.toString(),
|
|
lon:lon.toString()
|
|
},
|
|
success:function (res) {
|
|
console.log(res) ;
|
|
initCity(res.result.addressComponent.province,res.result.addressComponent.city)
|
|
}
|
|
})
|
|
|
|
tip("标注成功");
|
|
gic("lon").val(lon);
|
|
gic("lat").val(lat);
|
|
setTimeout(function() {
|
|
closeAll();
|
|
}, 1000);
|
|
}
|
|
|
|
$(".cancel-btn").click(function(){
|
|
forwardUrl("/iot/app_manager");
|
|
})
|
|
})
|
|
var map ;
|
|
|
|
function theLocation2(lon,lat){
|
|
map.clearOverlays();
|
|
var icon = new BMap.Icon('<%=basePath%>/image/oss/iot/location2.png', new BMap.Size(32, 32), {
|
|
anchor: new BMap.Size(32, 32)
|
|
});
|
|
var mkr = new BMap.Marker(new BMap.Point(lon,lat), {
|
|
icon: icon
|
|
});
|
|
var new_point = new BMap.Point(lon,lat);
|
|
map.addOverlay(mkr);
|
|
// 如果已有定位，则地图以改中心点居中
|
|
setTimeout(function(){
|
|
map.panTo(new_point);
|
|
},200);
|
|
|
|
}
|
|
|
|
</script>
|
|
</html>
|