541 lines
24 KiB
HTML
541 lines
24 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>展板数据配置</title>
|
||
<link rel="favicon" href="/favicon.ico" type="image/x-icon">
|
||
<link href="layui/css/layui.css" rel="stylesheet">
|
||
<style>
|
||
.container {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 15vh;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h2>展板数据配置</h2>
|
||
</div>
|
||
<form class="layui-form" action="">
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">时间</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" class="layui-input" id="time" name="time" placeholder="HH:mm:ss" lay-verify="required">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">字体大小</label>
|
||
<div class="layui-input-inline">
|
||
<input type="number" id="timeSize" name="timeSize" lay-verify="required" placeholder="字体大小" lay-verify="required" autocomplete="off" class="layui-input" min="15" max="60" step="1" lay-affix="number">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">负责人</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" class="layui-input" id="charger" name="charger" placeholder="负责人" lay-verify="required">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">字体大小</label>
|
||
<div class="layui-input-inline">
|
||
<input type="number" name="chargerSize" id="chargerSize" lay-verify="required" placeholder="字体大小" autocomplete="off" class="layui-input" min="15" max="60" step="1" lay-affix="number">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">风险等级</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" class="layui-input" id="riskLevel" name="riskLevel" placeholder="风险等级" lay-verify="required">
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">字体大小</label>
|
||
<div class="layui-input-inline">
|
||
<input type="number" name="riskLevelSize" id="riskLevelSize" placeholder="字体大小" autocomplete="off" class="layui-input" min="15" max="60" step="1" lay-affix="number">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">工作内容</label>
|
||
<div class="layui-input-inline">
|
||
<textarea name="content" id="content" class="layui-textarea"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">字体大小</label>
|
||
<div class="layui-input-inline">
|
||
<input type="number" name="contentSize" id="contentSize" placeholder="字体大小" autocomplete="off" class="layui-input" min="15" max="60" step="1" lay-affix="number">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">危险点</label>
|
||
<div class="layui-input-inline">
|
||
<textarea name="dangerPoint" id="dangerPoint" class="layui-textarea"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">字体大小</label>
|
||
<div class="layui-input-inline">
|
||
<input type="number" name="dangerPointSize" id="dangerPointSize" placeholder="字体大小" autocomplete="off" class="layui-input" min="15" max="60" step="1" lay-affix="number">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">重点管控措施</label>
|
||
<div class="layui-input-inline">
|
||
<textarea name="measures" id="measures" class="layui-textarea"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">字体大小</label>
|
||
<div class="layui-input-inline">
|
||
<input type="number" name="measuresSize" id="measuresSize" placeholder="字体大小" autocomplete="off" class="layui-input" min="15" max="60" step="1" lay-affix="number">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">党员1姓名</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" class="layui-input" id="cpcMember1Name" name="cpcMember1Name" placeholder="党员1姓名" lay-verify="required">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<div class="layui-upload">
|
||
<button type="button" class="layui-btn" id="upload1" style="margin-left:30px">
|
||
<i class="layui-icon layui-icon-upload"></i> 党员1上传
|
||
</button>
|
||
<button type="button" class="layui-btn" id="delete1" style="margin-left:30px">
|
||
<i class="layui-icon layui-icon-close"></i> 党员1删除
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div style="width: 132px;margin-left:100px">
|
||
<div class="layui-upload-list">
|
||
<img class="layui-upload-img" id="image1" style="width: 100%; height: 92px;" />
|
||
<div id="upload-text1"></div>
|
||
</div>
|
||
<!--<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-progress1">
|
||
<div class="layui-progress-bar" lay-percent=""></div>
|
||
</div>-->
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">党员2姓名</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" class="layui-input" id="cpcMember2Name" name="cpcMember2Name" placeholder="党员2姓名" lay-verify="required">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<div class="layui-upload">
|
||
<button type="button" class="layui-btn" id="upload2" style="margin-left:30px">
|
||
<i class="layui-icon layui-icon-upload"></i> 党员2上传
|
||
</button>
|
||
<button type="button" class="layui-btn" id="delete2" style="margin-left:30px">
|
||
<i class="layui-icon layui-icon-close"></i> 党员2删除
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div style="width: 132px;margin-left:100px">
|
||
<div class="layui-upload-list">
|
||
<img class="layui-upload-img" id="image2" style="width: 100%; height: 92px;" />
|
||
<div id="upload-text2"></div>
|
||
</div>
|
||
<!--<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-progress2">
|
||
<div class="layui-progress-bar" lay-percent=""></div>
|
||
</div>-->
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">党员3姓名</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" class="layui-input" id="cpcMember3Name" name="cpcMember3Name" placeholder="党员3姓名" lay-verify="required">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<div class="layui-upload">
|
||
<button type="button" class="layui-btn" id="upload3" style="margin-left:30px">
|
||
<i class="layui-icon layui-icon-upload"></i> 党员3上传
|
||
</button>
|
||
<button type="button" class="layui-btn" id="delete3" style="margin-left:30px">
|
||
<i class="layui-icon layui-icon-close"></i> 党员3删除
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div style="width: 132px;margin-left:100px">
|
||
<div class="layui-upload-list">
|
||
<img class="layui-upload-img" id="image3" style="width: 100%; height: 92px;" />
|
||
<div id="upload-text3"></div>
|
||
</div>
|
||
<!--<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-progress3">
|
||
<div class="layui-progress-bar" lay-percent=""></div>
|
||
</div>-->
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">党员4姓名</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" class="layui-input" id="cpcMember4Name" name="cpcMember4Name" placeholder="党员4姓名" lay-verify="required">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<div class="layui-upload">
|
||
<button type="button" class="layui-btn" id="upload4" style="margin-left:30px">
|
||
<i class="layui-icon layui-icon-upload"></i> 党员4上传
|
||
</button>
|
||
<button type="button" class="layui-btn" id="delete4" style="margin-left:30px">
|
||
<i class="layui-icon layui-icon-close"></i> 党员4删除
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div style="width: 132px;margin-left:100px">
|
||
<div class="layui-upload-list">
|
||
<img class="layui-upload-img" id="image4" style="width: 100%; height: 92px;" />
|
||
<div id="upload-text4"></div>
|
||
</div>
|
||
<!--<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-progress4">
|
||
<div class="layui-progress-bar" lay-percent=""></div>
|
||
</div>-->
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">字体大小</label>
|
||
<div class="layui-input-inline">
|
||
<input type="number" name="cpcMemberSize" id="cpcMemberSize" placeholder="字体大小" autocomplete="off" class="layui-input" min="15" max="60" step="1" lay-affix="number">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-left:100px">
|
||
<button type="button" id="saveconfig" class="layui-btn" style="margin-left:30px">
|
||
<i class="layui-icon layui-icon-set-fill"></i> 保存配置
|
||
</button>
|
||
</div>
|
||
</form>
|
||
|
||
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
|
||
<script src="layui/layui.js"></script>
|
||
<script src="jquery/jquery-1.9.1.min.js"></script>
|
||
<script>
|
||
layui.use(['form', 'laydate', 'util'], function () {
|
||
var form = layui.form;
|
||
var layer = layui.layer;
|
||
var laydate = layui.laydate;
|
||
var upload = layui.upload;
|
||
var util = layui.util;
|
||
|
||
// 时间选择器
|
||
laydate.render({
|
||
elem: '#time',
|
||
type: 'time'
|
||
});
|
||
|
||
// 单图片上传
|
||
var uploadInst1 = upload.render({
|
||
elem: '#upload1',
|
||
url: '/uploadImage', // 实际使用时改成您自己的上传接口即可。
|
||
before: function (obj) {
|
||
// 预读本地文件示例，不支持ie8
|
||
//obj.preview(function (index, file, result) {
|
||
// $('#image1').attr('src', result); // 图片链接（base64）
|
||
//});
|
||
//element.progress('filter-progress1', '0%'); // 进度条复位
|
||
//layer.msg('上传中', { icon: 16, time: 0 });
|
||
},
|
||
done: function (res) {
|
||
// 若上传失败
|
||
if (res.state != 1) {
|
||
layer.msg('上传失败', { icon: 2 });
|
||
return;
|
||
}
|
||
// 上传成功的一些操作
|
||
$('#image1').attr('src', res.data); // 置空上传失败的状态
|
||
$('#upload-text1').html(''); // 置空上传失败的状态
|
||
layer.msg('上传成功', { icon: 1 });
|
||
},
|
||
error: function () {
|
||
var demoText = $('#upload-text1');
|
||
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs" id="reload1">重试</a>');
|
||
demoText.find('#reload1').on('click', function () {
|
||
uploadInst.upload();
|
||
});
|
||
},
|
||
// 进度条
|
||
//progress: function (n, elem, e) {
|
||
// element.progress('filter-progress1', n + '%'); // 可配合 layui 进度条元素使用
|
||
// if (n == 100) {
|
||
// layer.msg('上传完毕', { icon: 1 });
|
||
// }
|
||
//}
|
||
});
|
||
|
||
var uploadInst2 = upload.render({
|
||
elem: '#upload2',
|
||
url: '/uploadImage', // 实际使用时改成您自己的上传接口即可。
|
||
before: function (obj) {
|
||
// 预读本地文件示例，不支持ie8
|
||
//obj.preview(function (index, file, result) {
|
||
// $('#image2').attr('src', result); // 图片链接（base64）
|
||
//});
|
||
//element.progress('filter-progress2', '0%'); // 进度条复位
|
||
//layer.msg('上传中', { icon: 16, time: 0 });
|
||
},
|
||
done: function (res) {
|
||
// 若上传失败
|
||
if (res.state != 1) {
|
||
layer.msg('上传失败', { icon: 2 });
|
||
return;
|
||
}
|
||
// 上传成功的一些操作
|
||
$('#image2').attr('src', res.data); // 置空上传失败的状态
|
||
$('#upload-text2').html(''); // 置空上传失败的状态
|
||
layer.msg('上传成功', { icon: 1 });
|
||
},
|
||
error: function () {
|
||
// 演示失败状态，并实现重传
|
||
var demoText = $('#upload-text2');
|
||
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs" id="reload2">重试</a>');
|
||
demoText.find('#reload2').on('click', function () {
|
||
uploadInst.upload();
|
||
});
|
||
},
|
||
// 进度条
|
||
//progress: function (n, elem, e) {
|
||
// element.progress('filter-progress2', n + '%'); // 可配合 layui 进度条元素使用
|
||
// if (n == 100) {
|
||
// layer.msg('上传完毕', { icon: 1 });
|
||
// }
|
||
//}
|
||
});
|
||
|
||
var uploadInst3 = upload.render({
|
||
elem: '#upload3',
|
||
url: '/uploadImage', // 实际使用时改成您自己的上传接口即可。
|
||
before: function (obj) {
|
||
// 预读本地文件示例，不支持ie8
|
||
//obj.preview(function (index, file, result) {
|
||
// $('#image3').attr('src', result); // 图片链接（base64）
|
||
//});
|
||
//element.progress('filter-progress3', '0%'); // 进度条复位
|
||
//layer.msg('上传中', { icon: 16, time: 0 });
|
||
},
|
||
done: function (res) {
|
||
// 若上传失败
|
||
if (res.state != 1) {
|
||
layer.msg('上传失败', { icon: 2 });
|
||
return;
|
||
}
|
||
// 上传成功的一些操作
|
||
$('#image3').attr('src', res.data); // 置空上传失败的状态
|
||
$('#upload-text3').html(''); // 置空上传失败的状态
|
||
layer.msg('上传成功', { icon: 1 });
|
||
},
|
||
error: function () {
|
||
// 演示失败状态，并实现重传
|
||
var demoText = $('#upload-text3');
|
||
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs" id="reload3">重试</a>');
|
||
demoText.find('#reload3').on('click', function () {
|
||
uploadInst.upload();
|
||
});
|
||
},
|
||
// 进度条
|
||
//progress: function (n, elem, e) {
|
||
// element.progress('filter-progress3', n + '%'); // 可配合 layui 进度条元素使用
|
||
// if (n == 100) {
|
||
// layer.msg('上传完毕', { icon: 1 });
|
||
// }
|
||
//}
|
||
});
|
||
|
||
var uploadInst4 = upload.render({
|
||
elem: '#upload4',
|
||
url: '/uploadImage', // 实际使用时改成您自己的上传接口即可。
|
||
before: function (obj) {
|
||
// 预读本地文件示例，不支持ie8
|
||
//obj.preview(function (index, file, result) {
|
||
// $('#image4').attr('src', result); // 图片链接（base64）
|
||
//});
|
||
//element.progress('filter-progress4', '0%'); // 进度条复位
|
||
//layer.msg('上传中', { icon: 16, time: 0 });
|
||
},
|
||
done: function (res) {
|
||
// 若上传失败
|
||
if (res.state != 1) {
|
||
layer.msg('上传失败', { icon: 2 });
|
||
return;
|
||
}
|
||
// 上传成功的一些操作
|
||
$('#image4').attr('src', res.data); // 置空上传失败的状态
|
||
$('#upload-text4').html(''); // 置空上传失败的状态
|
||
layer.msg('上传成功', { icon: 1 });
|
||
},
|
||
error: function () {
|
||
// 演示失败状态，并实现重传
|
||
var demoText = $('#upload-text4');
|
||
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs" id="reload4">重试</a>');
|
||
demoText.find('#reload4').on('click', function () {
|
||
uploadInst.upload();
|
||
});
|
||
},
|
||
// 进度条
|
||
//progress: function (n, elem, e) {
|
||
// element.progress('filter-progress4', n + '%'); // 可配合 layui 进度条元素使用
|
||
// if (n == 100) {
|
||
// layer.msg('上传完毕', { icon: 1 });
|
||
// }
|
||
//}
|
||
});
|
||
|
||
init();
|
||
|
||
|
||
$("#delete1").click(function () {
|
||
$("#image1").attr("src", "");
|
||
});
|
||
$("#delete2").click(function () {
|
||
$("#image2").attr("src", "");
|
||
});
|
||
$("#delete3").click(function () {
|
||
$("#image3").attr("src", "");
|
||
});
|
||
$("#delete4").click(function () {
|
||
$("#image4").attr("src", "");
|
||
});
|
||
|
||
|
||
$("#saveconfig").click(function () {
|
||
save();
|
||
});
|
||
|
||
});
|
||
|
||
|
||
function init() {
|
||
$.ajax({
|
||
url: '/getConfig',
|
||
method: 'GET',
|
||
dataType: 'json',
|
||
success: function (response) {
|
||
// 成功处理响应数据
|
||
$("#time").val(response.Time);
|
||
$("#timeSize").val(response.TimeSize);
|
||
$("#charger").val(response.Charger);
|
||
$("#chargerSize").val(response.ChargerSize);
|
||
$("#riskLevel").val(response.RiskLevel);
|
||
$("#riskLevelSize").val(response.RiskLevelSize);
|
||
$("#content").text(response.Content);
|
||
$("#contentSize").val(response.ContentSize);
|
||
$("#dangerPoint").text(response.DangerPoint);
|
||
$("#dangerPointSize").val(response.DangerPointSize);
|
||
$("#measures").text(response.Measures);
|
||
$("#measuresSize").val(response.MeasuresSize);
|
||
|
||
$("#cpcMember1Name").val(response.CPCMember1Name);
|
||
$("#cpcMember2Name").val(response.CPCMember2Name);
|
||
$("#cpcMember3Name").val(response.CPCMember3Name);
|
||
$("#cpcMember4Name").val(response.CPCMember4Name);
|
||
|
||
$("#image1").attr("src", response.CPCMember1Path);
|
||
$("#image2").attr("src", response.CPCMember2Path);
|
||
$("#image3").attr("src", response.CPCMember3Path);
|
||
$("#image4").attr("src", response.CPCMember4Path);
|
||
$("#cpcMemberSize").val(response.CPCMemberSize);
|
||
},
|
||
error: function (xhr, status, error) {
|
||
// 处理错误
|
||
//layer.msg('');
|
||
}
|
||
});
|
||
}
|
||
|
||
function save() {
|
||
var json = {
|
||
Time: $("#time").val(),
|
||
TimeSize: $("#timeSize").val(),
|
||
Charger: $("#charger").val(),
|
||
ChargerSize: $("#chargerSize").val(),
|
||
RiskLevel: $("#riskLevel").val(),
|
||
RiskLevelSize: $("#riskLevelSize").val(),
|
||
Content: $("#content").text(),
|
||
ContentSize: $("#contentSize").val(),
|
||
DangerPoint: $("#dangerPoint").text(),
|
||
DangerPointSize: $("#dangerPointSize").val(),
|
||
Measures: $("#measures").text(),
|
||
MeasuresSize: $("#measuresSize").val(),
|
||
CPCMember1Name: $("#cpcMember1Name").val(),
|
||
CPCMember2Name: $("#cpcMember2Name").val(),
|
||
CPCMember3Name: $("#cpcMember3Name").val(),
|
||
CPCMember4Name: $("#cpcMember4Name").val(),
|
||
CPCMember1Path: $("#image1").attr("src"),
|
||
CPCMember2Path: $("#image2").attr("src"),
|
||
CPCMember3Path: $("#image3").attr("src"),
|
||
CPCMember4Path: $("#image4").attr("src"),
|
||
CPCMemberSize: $("#cpcMemberSize").val(),
|
||
};
|
||
$.ajax({
|
||
url: '/save',
|
||
method: 'POST',
|
||
dataType: 'json',
|
||
data: json,
|
||
success: function (response) {
|
||
if (response.state == 1) {
|
||
layer.msg('保存成功', { icon: 1 });
|
||
} else {
|
||
layer.msg('保存失败', { icon: 2 });
|
||
}
|
||
},
|
||
error: function (xhr, status, error) {
|
||
layer.msg('保存失败', { icon: 2 });
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html> |