<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="UTF-8">
|
<title>shp 添加</title>
|
<style>
|
.text {
|
float: left;
|
color: white;
|
font-size: 14px;
|
margin-left: 30px;
|
margin-top: 5px;
|
}
|
|
.input {
|
width: 100%;
|
|
height: 30px;
|
line-height: 40px;
|
font-size: 14px;
|
text-indent: 8px;
|
outline: 0;
|
float: left;
|
border: none;
|
border-color: #3b403f;
|
/* box-shadow: 0 2px 6px #3a3c42; */
|
border-top-left-radius: 2px;
|
border-bottom-left-radius: 2px;
|
background-color: rgba(63, 72, 84, 0.7);
|
color: white;
|
}
|
|
|
.my-save-btn {
|
margin-left: 50px;
|
width: 250px;
|
height: 30px;
|
color: white;
|
background-color: rgba(35, 68, 117, 0.85);
|
border: 1px;
|
cursor: pointer;
|
border-radius: 2px;
|
}
|
|
.my-save-btn:hover {
|
background-color: rgb(107, 169, 220);
|
}
|
|
.layui-form-select .layui-input {
|
padding-right: 30px;
|
height: 30px;
|
cursor: pointer;
|
background: #20212b;
|
color: grey;
|
border-color: #3b403f;
|
}
|
|
.layui-form-select dl dd.layui-this {
|
background-color: grey;
|
top: 35px;
|
color: #fff;
|
}
|
|
/*下拉框高度*/
|
.layui-form-select dl {
|
top: 33px;
|
background: #3b403f !important;
|
color: white;
|
height: 100px;
|
}
|
|
.layui-colorpicker {
|
width: 20px !important;
|
height: 20px !important;
|
border: 1px solid #e6e6e6;
|
padding: 5px;
|
border-radius: 2px;
|
line-height: 24px;
|
display: inline-block;
|
cursor: pointer;
|
transition: all .3s;
|
-webkit-transition: all .3s;
|
}
|
</style>
|
<link href="../../libs/layui/css/layui.css" rel="stylesheet">
|
<script type="text/javascript" src="../../libs/jquery/jquery-3.5.1.min.js"></script>
|
<script type="text/javascript" src="../../libs/layui/layui.js"></script>
|
</head>
|
|
<body>
|
<div style="margin-top: 20px;">
|
<form class="layui-form">
|
<div style="height: 40px;width: 100%;margin-top: 10px;">
|
<div
|
style="width: 20%; float:left;text-align: center;color: white;font-size:14px;line-height: 14px;line-height: 30px;">
|
名字:
|
</div>
|
<div style="width: 70%; float:left;">
|
<input id="name" class="input" type="text" placeholder="输入名称" autocomplete="off" />
|
</div>
|
</div>
|
|
<div style="height:40px;width: 100%;margin-top: 10px;">
|
<div
|
style="width: 20%; float:left;text-align: center;color: white;font-size:14px;line-height: 14px;line-height: 30px;">
|
颜色:
|
</div>
|
<div style="width: 70%; float:left;">
|
<div id="colorSelect" style="display:inline-block;margin-top: 5px;">
|
</div>
|
</div>
|
</div>
|
|
<div style="height: 40px;width: 100%;margin-top: 10px;">
|
<div
|
style="width: 20%; float:left;text-align: center;color: white;font-size:14px;line-height: 14px;line-height: 30px;">
|
类型:
|
</div>
|
<div style="width: 70%; float:left;">
|
|
<select id="type" lay-verify="required" lay-filter="fontfamily" style="margin-top: 10px;">
|
<option value="point">点</option>
|
<option value="line">线</option>
|
<option value="polygon">面</option>
|
</select>
|
|
</div>
|
</div>
|
|
<div style="height: 40px;width: 100%;margin-top: 10px;">
|
<div style="width: 20%; float:left;text-align: center;color: white;font-size:14px;line-height: 14px;line-height: 30px;">
|
文件
|
</div>
|
<div style="width: 70%; float:left;">
|
<button type="button" class="layui-btn layui-bg-black"
|
style="width:150px;height:35px;float: left;" id="uploadIcon">
|
<i class="layui-icon"></i>上传shp
|
</button>
|
<input type="hidden" id="path">
|
<input type="hidden" id="color" value="#ffde06">
|
</div>
|
</div>
|
<div style="width: 100%;margin-top: 10px; color: white;">
|
<div id="tips" style="margin-left: 50px;color: white;font-family: emoji;font-size: 14px;font-style: italic;"></div>
|
</div>
|
<div style="height: 40px;width: 100%;margin-top: 10px;">
|
<button class="my-save-btn" onclick="uploadShp()">上传</button>
|
</div>
|
|
|
</form>
|
</div>
|
<script>
|
|
layui.use(['element', 'layer', 'form', 'colorpicker', 'upload'], function () {
|
var element = layui.element;
|
var form = layui.form;
|
var colorpicker = layui.colorpicker;
|
var upload = layui.upload;
|
colorpicker.render({
|
elem: '#colorSelect',
|
color: "#ffde06",
|
size: '20px',
|
done: function (color) {
|
|
},
|
change: function(color){
|
console.log(color);
|
$("#color").val(color);
|
}
|
});
|
|
upload.render({
|
elem: '#uploadIcon', //绑定元素
|
accept: 'file',
|
url: parent.httpConfig.webApiUrl + "landstamp/front/uploadShp",
|
done: function (res) {
|
if (res.code == 0) {
|
$("#path").val(res.url);
|
$("#tips").html("上传文件:"+res.filename);
|
|
} else {
|
parent.vMsg.warning(res.msg);
|
}
|
}
|
});
|
});
|
|
function uploadShp() {
|
var name = $("#name").val();
|
var color = $("#color").val();
|
var type = $("#type").val();
|
var path = $("#path").val();
|
if (name == "") {
|
parent.vMsg.warning("请输入名字");
|
return;
|
}
|
if (path == "") {
|
parent.vMsg.warning("请上传shp文件");
|
return;
|
}
|
var obj = {
|
"name": name,
|
"color": color,
|
"type": type,
|
"path": path,
|
}
|
let token = window.localStorage.getItem("token");
|
|
$.ajax({
|
url: parent.httpConfig.webApiUrl + "landstamp/front/saveShp",
|
type: 'POST',
|
dataType: "json",
|
async:false,
|
data: JSON.stringify(obj),
|
contentType: "application/json;charset=utf-8",
|
beforeSend: function (request) {
|
request.setRequestHeader("token", token);
|
},
|
success: function (result) {
|
console.log(result);
|
if(result.code ==0){
|
parent.vMsg.warning("上传成功");
|
}else{
|
parent.vMsg.warning("上传失败");
|
}
|
}
|
});
|
|
}
|
|
|
</script>
|
|
|
</body>
|
|
</html>
|
