| | |
| | | margin-top: 5px; |
| | | } |
| | | |
| | | .text2 { |
| | | float: left; |
| | | color: white; |
| | | font-size: 14px; |
| | | margin-left: 30px; |
| | | margin-top: 20px; |
| | | } |
| | | |
| | | .labelInput { |
| | | width: 150px; |
| | | .input { |
| | | width: 100%; |
| | | |
| | | height: 30px; |
| | | margin-left: 25px; |
| | | margin-right: 50px; |
| | | line-height: 40px; |
| | | font-size: 14px; |
| | | text-indent: 8px; |
| | |
| | | color: white; |
| | | } |
| | | |
| | | .textarea { |
| | | width: 240px; |
| | | height: 140px; |
| | | margin-left: 25px; |
| | | margin-right: 50px; |
| | | margin-top: 20px; |
| | | font-size: 16px; |
| | | text-indent: 8px; |
| | | outline: 0; |
| | | 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; |
| | | resize: none; |
| | | } |
| | | |
| | | .my-save-btn { |
| | | margin-top: 20px; |
| | | margin-left: 50px; |
| | | width: 200px; |
| | | width: 250px; |
| | | height: 30px; |
| | | color: white; |
| | | background-color: rgba(35, 68, 117, 0.85); |
| | |
| | | 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> |
| | |
| | | |
| | | <body> |
| | | <div style="margin-top: 20px;"> |
| | | <form class="layui-form" action=""> |
| | | <div> |
| | | <span class="text">名字</span> |
| | | <input id="name" class="labelInput" type="text" placeholder="输入名称" autocomplete="off" /> |
| | | </div> |
| | | <div> |
| | | <div style="display:inline-block;margin-top: 20px;margin-left: 30px;color:white"> |
| | | 颜色 |
| | | <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 id="colorSelect" style="display:inline-block;margin-top: 5px;margin-left: 20px;"> |
| | | <div style="width: 70%; float:left;"> |
| | | <input id="name" class="input" type="text" placeholder="输入名称" autocomplete="off" /> |
| | | </div> |
| | | </div> |
| | | |
| | | <div> |
| | | <div style="display:inline-block;margin-top: 20px;margin-left: 30px;color:white"> |
| | | 类型 |
| | | <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="display:inline-block;margin-top: 5px;width: 150px;margin-left: 20px;"> |
| | | <select id="type" lay-verify="required" class="my-select" lay-filter="fontfamily"> |
| | | <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> |
| | | <span class="text2">文件</span> |
| | | <button type="button" class="layui-btn layui-bg-black" |
| | | style="width:150px;height:30px;margin-top:15px;margin-left: 25px;line-height: 30px;float: left;" |
| | | id="uploadIcon"> |
| | | <i class="layui-icon"></i>上传shp |
| | | </button> |
| | | <input type="hidden" id="path"> |
| | | </div> |
| | | <br /> |
| | | |
| | | <button class="my-save-btn" onclick="uploadShp()">上传</button> |
| | | <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> |
| | |
| | | var upload = layui.upload; |
| | | colorpicker.render({ |
| | | elem: '#colorSelect', |
| | | color: "red", |
| | | color: "#ffde06", |
| | | size: '20px', |
| | | done: function (color) { |
| | | |
| | | }, |
| | | change: function(color){ |
| | | console.log(color); |
| | | $("#color").val(color); |
| | | } |
| | | }); |
| | | |
| | | upload.render({ |
| | |
| | | url: parent.httpConfig.webApiUrl + "landstamp/front/uploadShp", |
| | | done: function (res) { |
| | | if (res.code == 0) { |
| | | console.log(res.msg); |
| | | $("#path").val(res.msg); |
| | | $("#path").val(res.url); |
| | | $("#tips").html("上传文件:"+res.filename); |
| | | |
| | | } else { |
| | | layui.use('layer', function () { |
| | | var layer = layui.layer; |
| | | layer.msg(res.msg, { time: 1000 }); |
| | | }); |
| | | parent.vMsg.warning(res.msg); |
| | | } |
| | | } |
| | | }); |
| | | form.render(); |
| | | }); |
| | | |
| | | function uploadShp() { |
| | | var name = $("#name").val(); |
| | | var color = $("#colorSelect").val(); |
| | | var color = $("#color").val(); |
| | | var type = $("#type").val(); |
| | | var path = $("#path").val(); |
| | | if (name == "") { |
| | | |
| | | parent.vMsg.warning("请输入名字"); |
| | | return; |
| | | } |
| | | if(path == ""){ |
| | | layui.use('layer', function () { |
| | | var layer = layui.layer; |
| | | layer.msg("请上传shp文件"); |
| | | }); |
| | | if (path == "") { |
| | | parent.vMsg.warning("请上传shp文件"); |
| | | return; |
| | | } |
| | | console.log(name, color, type, path); |
| | | var obj = { |
| | | "name": name, |
| | | "color": color, |
| | |
| | | $.ajax({ |
| | | url: parent.httpConfig.webApiUrl + "landstamp/front/saveShp", |
| | | type: 'POST', |
| | | contentType: "application/json;charset=utf-8", |
| | | 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("上传失败"); |
| | | } |
| | | } |
| | | }); |
| | | |