<!DOCTYPE html>
|
<html xmlns:th="http://www.w3.org/1999/xhtml">
|
<head>
|
<meta charset="UTF-8"/>
|
<title th:text="${systemName}"></title>
|
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
|
<link rel="stylesheet" th:href="@{${pubzyWebRoot} + 'BootStrap4/assets/css/style.css'}"/>
|
<link rel="stylesheet" th:href="@{${pubzyWebRoot} + 'BootStrap4/expand/css/bootstrap-extract.css'}"/>
|
<link rel="stylesheet" th:href="@{${pubzyWebRoot} + 'BootStrap4/assets/plugins/mjolnic-bootstrap-colorpicker/css/bootstrap-colorpicker.min.css'}"/>
|
<!-- 表单样式 -->
|
<script th:src="@{${pubzyWebRoot} + 'BootStrap4/assets/js/jquery.min.js'}"></script>
|
<script th:src="@{${pubzyWebRoot} + 'BootStrap4/assets/js/tether.min.js'}"></script>
|
<script th:src="@{${pubzyWebRoot} + 'BootStrap4/assets/js/bootstrap.min.js'}"></script>
|
<script th:src="@{${pubzyWebRoot} + 'media/js/jquery.form-3.51.0.js'}"></script>
|
<script src="../../../js/bootstrap-colorpicker.js" ></script>
|
|
<style>
|
.DivHeight {
|
height: 45px;
|
}
|
|
.form-horizontal .control-label {
|
width: 100px;
|
}
|
|
[class*='span'] {
|
margin-left: 0 !important;
|
}
|
|
.row-fluid [class*='span'] {
|
margin-left: 0 !important;
|
}
|
|
.row {
|
margin-left: 0;
|
margin-right: 0;
|
}
|
|
.col-sm-12, .col-md-6, .col-lg-4, .col-xl-3 {
|
padding-left: 0;
|
padding-right: 0;
|
}
|
|
body {
|
padding: 0px;
|
background-color: #fff;
|
}
|
|
.form-control {
|
padding: 0.3rem 0.7rem;
|
height: 34px;
|
display: inline-block;
|
}
|
|
.control-label {
|
padding-top: 0 !important;
|
width: 100px;
|
float: left;
|
line-height: 30px;
|
padding-right: 1em;
|
text-align: right;
|
}
|
|
.control-group {
|
margin-bottom: 1em;
|
}
|
|
.controls {
|
margin-left: 100px;
|
}
|
|
.col-sm-3, .col-sm-6, .col-sm-12 {
|
padding-left: 0;
|
padding-right: 0;
|
}
|
|
.fade {
|
display: none;
|
}
|
|
.in.fade {
|
display: block;
|
}
|
|
.control-group error {
|
border-color: #b94a48;
|
}
|
|
.modal-dialog {
|
width: 750px !important;
|
}
|
|
.colorpicker {
|
top: 235px!important;
|
left: 207px!important;
|
}
|
|
.colorpicker:before {
|
right: auto!important;
|
left: 6px!important;
|
top: 120px!important;
|
border-bottom: none!important;
|
border-top: 6px solid #fff!important;
|
}
|
|
.colorpicker:after {
|
right: auto!important;
|
left: 6px!important;
|
top: 120px!important;
|
border-bottom: none!important;
|
border-top: 6px solid #fff!important;
|
}
|
|
.colorpicker-alpha {
|
display: block;
|
}
|
</style>
|
<script th:inline="javascript">
|
/*<![CDATA[*/
|
var symbol = [[${resSymbolLibrary.symbol}]];
|
var geotype = [[${resSymbolLibrary.geotype}]];
|
/*]]>*/
|
$(function () {
|
//初始化颜色选择器
|
$('.colorpicker-rgba').colorpicker({
|
format: 'rgba'
|
}).on("hide", function (color) {
|
//颜色选择回调
|
var bgcolor = $(color.target).find('i').css("background-color");
|
if(bgcolor.indexOf("rgba") > -1) {
|
bgcolor = bgcolor.replace("rgba(", "[").replace(")", "]");
|
} else if (bgcolor.indexOf("rgb") > -1) {
|
bgcolor = bgcolor.replace("rgb(", "[").replace(")", ", 1]");
|
}
|
$("#symbol").text($("#symbol").text() + bgcolor);//符号风格追加选择颜色
|
});
|
var url = "symbolmap?symbol=" + encodeURIComponent(symbol) + "&geotype=" + encodeURIComponent(geotype);
|
document.getElementById("symbolmapFrame").src = url;
|
});
|
|
//保存
|
function Save() {
|
var symbol = $("#symbol").val();
|
try {
|
if(symbol.trim() == "") {
|
alert("请填写符号风格配置！");
|
} else {
|
var json = JSON.parse(symbol);
|
var objectid = $("#objectid").val();
|
$('#mainfrom').ajaxSubmit({
|
url: 'save',
|
type: 'post',
|
dataType: 'text',
|
data: {},
|
success: function (data) {
|
var result = eval("(" + data + ")");
|
if (result.success) {
|
alert("保存成功！");
|
} else {
|
alert(rsult.msg);
|
}
|
},
|
error: function (e) {
|
alert(e.message);
|
}
|
});
|
}
|
} catch (e){
|
alert("符号风格配置格式错误，请重新校对！");
|
}
|
}
|
|
//关闭弹窗
|
function CloseSaveModal() {
|
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
|
parent.layer.close(index);
|
}
|
|
//设置选择图片64位编码
|
function setImageBase64(obj) {
|
var file = obj.files !== undefined ? obj.files[0] : (obj.value ? { name: obj.value.replace(/^.+\\/, '') } : null)
|
|
if (!file) {
|
return;
|
}
|
|
if ((typeof file.type !== "undefined" && file.type != "" ? file.type.match('image.*') : file.name.match('\\.(gif|png|jpe?g)$')) && typeof FileReader !== "undefined") {
|
var reader = new FileReader();
|
|
reader.onload = function(e) {
|
$("#symbol").text($("#symbol").text() + "\"" + e.target.result.replace("data:;base64,", "") + "\"");//符号风格追加图片64位编码
|
}
|
|
reader.readAsDataURL(file);
|
}
|
obj.value = "";//清空选择文件
|
}
|
|
//获取选择文本并判断是否为颜色，为颜色时设置底部选择颜色
|
function setSelectedColor() {
|
if(document.getSelection) {
|
var text = document.getSelection().toString();
|
if(text.length > 0) {
|
var arr = text.split(',');
|
if(arr.length == 3 || arr.length == 4) {
|
var isNumber = true;
|
var color = "";
|
for(var i = 0; i < arr.length; i++) {
|
if(arr[i].trim() != "" && !isNaN(arr[i].trim())) {
|
color += (i > 0 ? "," : "") + arr[i].trim();
|
} else {
|
isNumber = false;
|
break;
|
}
|
}
|
if(isNumber) {
|
if(arr.length == 3) {
|
color = "rgb(" + color +")";
|
} else if(arr.length == 4) {
|
color = "rgba(" + color + ")";
|
}
|
$(".add-on").find("i").css("background-color", color);
|
}
|
}
|
}
|
}
|
}
|
</script>
|
</head>
|
<body>
|
<div id="rapp">
|
<form class="form-horizontal" id="mainfrom" xmlns:th="http://www.w3.org/1999/xhtml">
|
<div style="padding: 15px;">
|
<div class="row">
|
<div class="col-sm-6">
|
<div class="control-group">
|
<label class="control-label">编码：</label>
|
<div class="controls input-icon">
|
<input class="form-control col-sm-11" id="fhid" name="fhid" required="" type="text" th:value="${resSymbolLibrary.fhid}" readonly="readonly">
|
<span class="input-warning tooltips" data-original-title="">
|
<i class="icon-warning-sign" style="display: none;"></i>
|
</span>
|
</div>
|
</div>
|
<div class="control-group">
|
<label class="control-label">数据类型：</label>
|
<div class="controls input-icon">
|
<input class="form-control col-sm-11" id="mc" name="mc" required="" type="text" th:value="${resSymbolLibrary.mc}" readonly="readonly">
|
<span class="input-warning tooltips" data-original-title="">
|
<i class="icon-warning-sign" style="display: none;"></i>
|
</span>
|
</div>
|
</div>
|
<div class="control-group">
|
<label class="control-label">空间类型：</label>
|
<div class="controls input-icon">
|
<select class="form-control col-sm-11" id="geotype" name="geotype" required="" disabled="disabled">
|
<option value="">-- 请选择 --</option>
|
<option value="点" th:selected="(${resSymbolLibrary.geotype}=='点')?'true':'false'">点
|
</option>
|
<option value="线" th:selected="(${resSymbolLibrary.geotype}=='线')?'true':'false'">线
|
</option>
|
<option value="面" th:selected="(${resSymbolLibrary.geotype}=='面')?'true':'false'">面
|
</option>
|
</select>
|
<span class="input-warning tooltips" data-original-title="">
|
<i class="icon-warning-sign" style="display: none;"></i>
|
</span>
|
</div>
|
</div>
|
<div class="control-group">
|
<label class="control-label">符号风格：</label>
|
<div class="controls input-icon">
|
<textarea class="form-control col-sm-11" id="symbol" name="symbol" required="" rows="10" onmouseup="setSelectedColor()"
|
cols="50" style="height: 185px;" th:text="${resSymbolLibrary.symbol}"></textarea>
|
<span class="input-warning tooltips" data-original-title="">
|
<i class="icon-warning-sign" style="display: none;"></i>
|
</span>
|
</div>
|
</div>
|
</div>
|
<div class="col-sm-6">
|
<div style="border: 1px solid #ddd;">
|
<iframe id="symbolmapFrame" name="symbolmapFrame" frameborder="0" scrolling="no" style="width: 100%;height: 323px;"></iframe>
|
</div>
|
</div>
|
</div>
|
<div class="row">
|
<input type="hidden" id="objectid" name="objectid" th:value="${resSymbolLibrary.objectid}"/>
|
<div class="col-sm-6">
|
<button type="button" class="btn btn-primary" onclick="javascript: document.getElementById('uploadImgFile').click();" style="margin-right: 10px;float: left;">获取图标编码</button>
|
<input id="uploadImgFile" type="file" onchange="setImageBase64(this);" style="display: none;" />
|
<div data-color-format="rgba" data-color="rgba(0, 0, 0,1)" class="color colorpicker-rgba input-group colorpicker-element" style="float: left;margin-top: 2px;">
|
<span style="line-height: 30px;">获取颜色：</span>
|
<span class="input-group-btn add-on">
|
<button class="btn btn-white" type="button" style="padding: 0.2rem 0.375rem;border-radius: 0px;">
|
<i style="background-color: rgba(0, 0, 0, 1);width: 20px;height: 20px;"></i>
|
</button>
|
</span>
|
</div>
|
</div>
|
<div class="col-sm-6" style="text-align: right;">
|
<button type="button" class="btn btn-primary" onclick="Save()" style="margin-right: 10px;">确定</button>
|
<button type="button" class="btn" onclick="CloseSaveModal()">关闭</button>
|
</div>
|
</div>
|
</div>
|
</form>
|
</div>
|
</body>
|
</html>
|
