|
|
<!DOCTYPE html>
|
|
|
<!--suppress ALL-->
|
|
|
<html lang="en" xmlns:th="https://www.thymeleaf.org/">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<title th:if="${type == 'add'}">新增控制策略</title>
|
|
|
<title th:if="${type == 'detail'}">查看控制策略</title>
|
|
|
<!-- 引入 layui.css -->
|
|
|
<link href="../static/layui-v2.8.11/css/layui.css" rel="stylesheet">
|
|
|
<!-- 引入 layui.js -->
|
|
|
<script src="../static/layui-v2.8.11/layui.js"></script>
|
|
|
<script src="../static/jquery/jquery-3.2.1.min.js"></script>
|
|
|
<!-- 加载 Select2 -->
|
|
|
<link href="../static/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
|
|
|
<script src="../static/select2/4.0.8/js/select2.min.js"></script>
|
|
|
<style>
|
|
|
body {
|
|
|
background-color: #f5f5f5;
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
}
|
|
|
|
|
|
.body {
|
|
|
padding: 23.8px;
|
|
|
}
|
|
|
|
|
|
.left-title {
|
|
|
font-size: 22px;
|
|
|
margin-bottom: 15px;
|
|
|
margin-top: 15px;
|
|
|
}
|
|
|
|
|
|
.z-body {
|
|
|
}
|
|
|
|
|
|
.z-body .layui-form-label {
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.layui-input-inline{
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
.z-body .layui-input-inline .layui-btn {
|
|
|
padding: 0;
|
|
|
height: 36px;
|
|
|
width: 80px;
|
|
|
line-height: 0px;
|
|
|
}
|
|
|
|
|
|
.z-search .layui-form-item {
|
|
|
margin: 10px 0px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
table th {
|
|
|
background-color: #fafafa;
|
|
|
color: #2c2a29;
|
|
|
}
|
|
|
|
|
|
.layui-form-onswitch {
|
|
|
border-color: #1890ff;
|
|
|
background-color: #1890ff;
|
|
|
}
|
|
|
|
|
|
.layui-table-body .layui-table-cell {
|
|
|
height: 56px;
|
|
|
line-height: 41px;
|
|
|
}
|
|
|
|
|
|
.layui-table-column {
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
}
|
|
|
/*单选按钮颜色*/
|
|
|
.layui-form-radio:hover>*, .layui-form-radioed, .layui-form-radioed>i{
|
|
|
color: #1890ff;
|
|
|
}
|
|
|
.layui-form-radio{
|
|
|
padding-right: 35px;
|
|
|
}
|
|
|
.layui-input-split{
|
|
|
/*border-color: #7f6666 !important;*/
|
|
|
/*border-width:1px;*/
|
|
|
}
|
|
|
|
|
|
/*设置奇数行颜色*/
|
|
|
table tr:nth-child(odd)
|
|
|
{
|
|
|
/*background: #f5f5f5;*/
|
|
|
}
|
|
|
/*设置偶数行颜色*/
|
|
|
table tr:nth-child(even)
|
|
|
{
|
|
|
/*background: #f5f5f5;*/
|
|
|
}
|
|
|
.layui-col-md7 {
|
|
|
width: 50.6%;
|
|
|
}
|
|
|
.layui-laydate-linkage .layui-laydate-content td.laydate-selected>div {
|
|
|
background-color: #83bdf5;
|
|
|
}
|
|
|
.select2{
|
|
|
width: 50.6% !important;
|
|
|
}
|
|
|
.select2-selection__choice__remove{
|
|
|
float: right !important;
|
|
|
}
|
|
|
.select2-container--default .select2-selection--multiple{
|
|
|
border: 1px solid #eee !important;
|
|
|
}
|
|
|
/* #1890ff-> #16b777*/
|
|
|
/*旧的颜色#16baaa*/
|
|
|
/*.layui-badge-rim, .layui-border, .layui-colla-content, .layui-colla-item, .layui-collapse, .layui-elem-field, .layui-form-pane .layui-form-item[pane], .layui-form-pane .layui-form-label, .layui-input, .layui-input-split, .layui-panel, .layui-quote-nm, .layui-select, .layui-tab-bar, .layui-tab-card, .layui-tab-title, .layui-tab-title .layui-this:after, .layui-textarea {
|
|
|
border-color: #c1c1c1;
|
|
|
}*/
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="body">
|
|
|
<div class="left-title layui-row">
|
|
|
<div class="layui-col-md6 layui-col-xs6 layui-col-sm6 layui-col-lg6 layui-col-xl6">
|
|
|
<p th:if="${type == 'add'}">新增控制策略</p>
|
|
|
<p th:if="${type == 'detail'}">查看控制策略</p>
|
|
|
</div>
|
|
|
<div class="layui-col-md6 layui-col-xs6 layui-col-sm6 layui-col-lg6 layui-col-xl6">
|
|
|
<!--<button type="button" class="layui-btn" style="font-size: 16px;float: right;background-color: #41a69a">返回</button>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="z-body">
|
|
|
<div class="layui-card layui-panel">
|
|
|
<div class="layui-card-body z-search">
|
|
|
<form>
|
|
|
<table class="layui-table">
|
|
|
<colgroup>
|
|
|
<col width="150">
|
|
|
<col>
|
|
|
</colgroup>
|
|
|
<tbody>
|
|
|
<tr>
|
|
|
<td>策略名称:</td>
|
|
|
<td>
|
|
|
<div class="layui-col-md7">
|
|
|
<div class="layui-form">
|
|
|
<input type="text" name="name" id="celueName" placeholder="请填写策略名称···" class="layui-input" th:value="${detail.name}" th:readonly="${type=='detail'}">
|
|
|
</div>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>选择设备:</td>
|
|
|
<td>
|
|
|
<input id="devids" th:value="${detail.devid}" type="hidden"/>
|
|
|
<select id="id_select2_demo1" class="layui-col-md7" multiple="multiple">
|
|
|
<!-- <optgroup label="Group 1" class="group-1">
|
|
|
<option value="1-1">Option 1.1</option>
|
|
|
<option value="1-2">Option 1.2</option>
|
|
|
<option value="1-3">Option 1.3</option>
|
|
|
</optgroup>
|
|
|
<optgroup label="Group 2" class="group-2">
|
|
|
<option value="2-1">Option 2.1</option>
|
|
|
<option value="2-2">Option 2.2</option>
|
|
|
<option value="2-3">Option 2.3</option>
|
|
|
</optgroup>-->
|
|
|
</select>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>操作类型</td>
|
|
|
<td>
|
|
|
<div class="layui-form layui-row layui-col-space16">
|
|
|
<div class="layui-col-md3">
|
|
|
<select id="type" th:value="${detail.type}" th:readonly="${type=='detail'}" th:if="${type!='detail'}">
|
|
|
<option value="">请选择</option>
|
|
|
<option value="1">开灯/放电</option>
|
|
|
<option value="0">关灯/断电</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
<div th:else th:switch="${detail.type}">
|
|
|
<div class="layui-field-box">
|
|
|
<span th:case="1">开灯/放电</span>
|
|
|
<span th:case="0">关灯/断电</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>执行周期:</td>
|
|
|
<td>
|
|
|
<div class="layui-form">
|
|
|
<input type="radio" name="timeType" value="everyDay" lay-filter="demo-radio-filter" title="每天" th:checked="${detail.timeType=='everyDay'}">
|
|
|
<input type="radio" name="timeType" value="weekly" lay-filter="demo-radio-filter" title="每周" th:checked="${detail.timeType=='weekly'}">
|
|
|
<input type="radio" name="timeType" value="day" lay-filter="demo-radio-filter" title="单日" th:checked="${detail.timeType=='day'}">
|
|
|
<input type="radio" name="timeType" value="date" lay-filter="demo-radio-filter" title="日期段" th:checked="${detail.timeType=='date'}">
|
|
|
<!--<input type="radio" name="AAA" value="3" title="禁用" disabled>-->
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr id="weeklyTr" th:hidden="${type=='add' && detail.timeType!='weekly'}">
|
|
|
<!--周-->
|
|
|
<td>选择日期:</td>
|
|
|
<td>
|
|
|
<div class="layui-col-md6" id="weeklyDiv">
|
|
|
<div class="layui-form">
|
|
|
<input id="weeklyd" type="hidden" th:value="${detail.weeklyDay}"/>
|
|
|
<input type="checkbox" name="weeklyDay" title="星期一" value="1" id="weeklyDay1">
|
|
|
<input type="checkbox" name="weeklyDay" title="星期二" value="2" id="weeklyDay2">
|
|
|
<input type="checkbox" name="weeklyDay" title="星期三" value="3" id="weeklyDay3">
|
|
|
<input type="checkbox" name="weeklyDay" title="星期四" value="4" id="weeklyDay4">
|
|
|
<input type="checkbox" name="weeklyDay" title="星期五" value="5" id="weeklyDay5">
|
|
|
<input type="checkbox" name="weeklyDay" title="星期六" value="6" id="weeklyDay6">
|
|
|
<input type="checkbox" name="weeklyDay" title="星期日" value="7" id="weeklyDay7">
|
|
|
<!--<input type="checkbox" name="weeklyDay" lay-text="选中" checked>
|
|
|
<input type="checkbox" name="weeklyDay" title="禁用" disabled>-->
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr id="dayTr" th:hidden="${type=='add' && detail.timeType!='day'}">
|
|
|
<!--单日-->
|
|
|
<td>选择日期:</td>
|
|
|
<td>
|
|
|
<div class="layui-col-md3" id="dayDiv">
|
|
|
<div class="layui-input-wrap">
|
|
|
<input type="text" class="layui-input" id="ID-laydate-demo" placeholder="选择策略执行时间">
|
|
|
<div class="layui-input-split layui-input-suffix" style="background-color: #f5f5f5">
|
|
|
<i class="layui-icon layui-icon-time"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr id="dateTr" th:hidden="${type=='add' && detail.timeType!='date'}">
|
|
|
<!--范围-->
|
|
|
<td>选择日期:</td>
|
|
|
<td>
|
|
|
<div id="ID-laydate-rangeLinked">
|
|
|
<div class="layui-col-md3" style="margin-right: 0.5%">
|
|
|
<div class="layui-input-wrap">
|
|
|
<input type="text" autocomplete="off" id="ID-laydate-start-date-1" class="layui-input" placeholder="选择策略执行开始日期">
|
|
|
<div class="layui-input-split layui-input-suffix" style="background-color: #f5f5f5">
|
|
|
<i class="layui-icon layui-icon-date"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="layui-col-md3">
|
|
|
<div class="layui-input-wrap">
|
|
|
<input type="text" autocomplete="off" id="ID-laydate-end-date-1" class="layui-input" placeholder="选择策略执行结束日期">
|
|
|
<div class="layui-input-split layui-input-suffix" style="background-color: #f5f5f5">
|
|
|
<i class="layui-icon layui-icon-date"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>执行时段:</td>
|
|
|
<td>
|
|
|
<div class="layui-col-md3">
|
|
|
<div class="layui-input-wrap">
|
|
|
<input type="text" class="layui-input" id="ID-laydate-type-time" placeholder="选择策略开始时间">
|
|
|
<div class="layui-input-split layui-input-suffix" style="background-color: #f5f5f5">
|
|
|
<i class="layui-icon layui-icon-time"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>备注信息:</td>
|
|
|
<td>
|
|
|
<div class="layui-col-md7">
|
|
|
<div class="layui-form">
|
|
|
<textarea name="detail" id="detail" placeholder="请填写备注文字···" class="layui-textarea"></textarea>
|
|
|
</div>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
<div class="layui-input-inline" th:if="${type == 'add'}">
|
|
|
<button type="button" onclick="sub()" class="layui-btn layui-btn-normal">提交</button>
|
|
|
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
|
|
</div>
|
|
|
<div class="layui-input-inline" th:if="${type == 'detail'}">
|
|
|
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
|
|
</div>
|
|
|
</form>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
var laypage;
|
|
|
var name='';
|
|
|
var status='';
|
|
|
getDeviceList()
|
|
|
|
|
|
|
|
|
/*select2 回显*/
|
|
|
var str=$("#devids").val();
|
|
|
var arr=str.split(',');
|
|
|
console.log(arr)
|
|
|
$('#id_select2_demo1').val(arr).trigger('change')
|
|
|
|
|
|
loadTable();
|
|
|
var form;
|
|
|
function loadTable(){
|
|
|
layui.use('table', function () {
|
|
|
var table = layui.table;
|
|
|
var $=layui.$;
|
|
|
var util = layui.util;
|
|
|
var laydate = layui.laydate;
|
|
|
form = layui.form;
|
|
|
|
|
|
// 时间选择器
|
|
|
laydate.render({
|
|
|
elem: '#ID-laydate-demo'
|
|
|
});
|
|
|
laydate.render({
|
|
|
elem: '#ID-laydate-type-time',
|
|
|
type: 'time'
|
|
|
});
|
|
|
// 日期范围 - 左右面板联动选择模式
|
|
|
laydate.render({
|
|
|
elem: '#ID-laydate-rangeLinked',
|
|
|
range: ['#ID-laydate-start-date-1', '#ID-laydate-end-date-1'],
|
|
|
rangeLinked: true // 开启日期范围选择时的区间联动标注模式 --- 2.8+ 新增
|
|
|
});
|
|
|
/*$("#weeklyTr").hide();
|
|
|
$("#dayTr").hide();
|
|
|
$("#dateTr").hide();*/
|
|
|
/*$('#dayTr').hide();
|
|
|
$('#dayTr2').show();*/
|
|
|
|
|
|
let weeklyd = $("#weeklyd").val();
|
|
|
if (weeklyd != null && weeklyd != '') {
|
|
|
let split = weeklyd.split(',');
|
|
|
$("[name=weeklyDay]").each(function () {
|
|
|
// 根据值回显
|
|
|
if (weeklyd.indexOf($(this).val())!=-1) {
|
|
|
$(this).attr("checked", "checked");
|
|
|
/*return false;*/
|
|
|
}
|
|
|
form.render();
|
|
|
});
|
|
|
/*for (let i = 0; i < split.length; i++) {
|
|
|
console.log(split[i])
|
|
|
$("#weeklyDay"+split[i]).attr("checked","checked");
|
|
|
}*/
|
|
|
}
|
|
|
|
|
|
// 事件
|
|
|
// radio 事件
|
|
|
form.on('radio(demo-radio-filter)', function(data){
|
|
|
var elem = data.elem; // 获得 radio 原始 DOM 对象
|
|
|
var checked = elem.checked; // 获得 radio 选中状态
|
|
|
var value = elem.value; // 获得 radio 值
|
|
|
var othis = data.othis; // 获得 radio 元素被替换后的 jQuery 对象
|
|
|
|
|
|
var i=0;
|
|
|
console.log(value)
|
|
|
if(value=='weekly'){
|
|
|
$("#weeklyTr").show();
|
|
|
$("#dayTr").hide();
|
|
|
$("#dateTr").hide();
|
|
|
}else if (value == 'day') {
|
|
|
$("#weeklyTr").hide();
|
|
|
$("#dayTr").show();
|
|
|
$("#dateTr").hide();
|
|
|
}else if(value==='date'){
|
|
|
$("#weeklyTr").hide();
|
|
|
$("#dayTr").hide();
|
|
|
$("#dateTr").show();
|
|
|
}else{
|
|
|
$("#weeklyTr").hide();
|
|
|
$("#dayTr").hide();
|
|
|
$("#dateTr").hide();
|
|
|
}
|
|
|
|
|
|
/*if (value == 'day') {
|
|
|
$('#dayTr').show();
|
|
|
$("#dayTr2").hide();
|
|
|
$('tr').each(function(i) {
|
|
|
i++;
|
|
|
if(i % 2 ==0){
|
|
|
$(this).css("background","#f5f5f5");
|
|
|
}else{
|
|
|
$(this).css("background",'');
|
|
|
}
|
|
|
});
|
|
|
}else{
|
|
|
$('#dayTr').hide();
|
|
|
$('#dayTr2').show();
|
|
|
$('tr').each(function() {
|
|
|
if ($(this).attr('id') != 'dayTr') {
|
|
|
i++;
|
|
|
if (i % 2 == 0) {
|
|
|
$(this).css("background", "#f5f5f5");
|
|
|
} else {
|
|
|
$(this).css("background", '');
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}*/
|
|
|
|
|
|
});
|
|
|
});
|
|
|
};
|
|
|
|
|
|
function sub(){
|
|
|
//策略名称
|
|
|
let celueName = $("#celueName").val();
|
|
|
//选择设备
|
|
|
let devidList = $("#id_select2_demo1").val();
|
|
|
let type = $("#type").val();
|
|
|
//执行周期
|
|
|
let timeType = null;
|
|
|
var radio = document.getElementsByName("timeType");
|
|
|
for (i=0; i<radio.length; i++) {
|
|
|
if (radio[i].checked) {
|
|
|
timeType = radio[i].value;
|
|
|
}
|
|
|
}
|
|
|
//执行时段
|
|
|
let exeTime = $("#ID-laydate-type-time").val();
|
|
|
//每周-选择日期
|
|
|
//let weeklyDay=$("#weeklyDay").val();
|
|
|
let weeklyDay = document.getElementsByName("weeklyDay");
|
|
|
var weeklyDayList = [];
|
|
|
if (weeklyDay != null) {
|
|
|
for(k in weeklyDay){
|
|
|
if(weeklyDay[k].checked)
|
|
|
weeklyDayList.push(weeklyDay[k].value);
|
|
|
}
|
|
|
}
|
|
|
//单日-选择日期
|
|
|
let day=$("#ID-laydate-demo").val();
|
|
|
//日期段-选择日期
|
|
|
let startDate = $("#ID-laydate-start-date-1").val();
|
|
|
let endDate = $("#ID-laydate-end-date-1").val();
|
|
|
//描述
|
|
|
let description = $("#detail").val();
|
|
|
console.log('策略名称:'+celueName)
|
|
|
console.log('选择设备:'+devidList)
|
|
|
console.log('执行周期:'+timeType)
|
|
|
console.log('执行时段:'+exeTime)
|
|
|
console.log('每周-选择日期:'+weeklyDayList)
|
|
|
console.log('单日-选择日期:'+day)
|
|
|
console.log('日期段-选择日期:'+startDate+"-"+endDate)
|
|
|
if(checkNull(celueName)){
|
|
|
layer.msg('请输入[策略名称]', {icon: 0}, function(){
|
|
|
// layer.msg('提示框关闭后的回调');
|
|
|
});
|
|
|
return false;
|
|
|
}
|
|
|
if(checkArray(devidList)){
|
|
|
layer.msg('请选择[设备]', {icon: 0}, function(){
|
|
|
// layer.msg('提示框关闭后的回调');
|
|
|
});
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
if(timeType=='weekly'){
|
|
|
if (checkArray(weeklyDayList)) {
|
|
|
layer.msg('请选择[选择日期]', {icon: 0}, function(){
|
|
|
// layer.msg('提示框关闭后的回调');
|
|
|
});
|
|
|
return false;
|
|
|
}
|
|
|
}else if (timeType == 'day') {
|
|
|
if (checkNull(day)) {
|
|
|
layer.msg('请选择[选择日期]', {icon: 0}, function(){
|
|
|
// layer.msg('提示框关闭后的回调');
|
|
|
});
|
|
|
return false;
|
|
|
}
|
|
|
startDate=day;
|
|
|
endDate=day;
|
|
|
}else if(timeType==='date'){
|
|
|
if(checkNull(startDate)&&checkNull(endDate)){
|
|
|
layer.msg('请选择[选择日期]', {icon: 0}, function(){
|
|
|
// layer.msg('提示框关闭后的回调');
|
|
|
});
|
|
|
return false;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
var index = layer.load(0, {shade: false});
|
|
|
//请求保存
|
|
|
var obj = JSON.stringify({
|
|
|
'name':celueName,
|
|
|
'devidList':devidList,
|
|
|
'type':type,
|
|
|
'timeType':timeType,
|
|
|
'exeTime':exeTime,
|
|
|
'weeklyDay':weeklyDayList.join(','),
|
|
|
'day':day,
|
|
|
'starDate':startDate,
|
|
|
'endDate':endDate,
|
|
|
'description':description
|
|
|
});
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
url: "/celue",
|
|
|
data: obj,
|
|
|
contentType: 'application/json;charset=utf-8',
|
|
|
success: function(res){
|
|
|
console.log(res)
|
|
|
layer.close(index);
|
|
|
if (res.success) {
|
|
|
layer.msg(res.message, {icon: 0});
|
|
|
}else{
|
|
|
layer.msg(res.message, {icon: 0});
|
|
|
}
|
|
|
},error:function (res){
|
|
|
layer.close(index);
|
|
|
layer.msg(res.message, {icon: 0});
|
|
|
}
|
|
|
});
|
|
|
setTimeout(function(){
|
|
|
layer.close(index); // 关闭 loading
|
|
|
}, 5000);
|
|
|
|
|
|
}
|
|
|
|
|
|
function checkNull(o){
|
|
|
if (o == null || o == undefined || o == '') {
|
|
|
return true;
|
|
|
}
|
|
|
return false;
|
|
|
}
|
|
|
function checkArray(a){
|
|
|
if (a == null || a == undefined || a.length == 0) {
|
|
|
return true;
|
|
|
}
|
|
|
return false;
|
|
|
}
|
|
|
function getDeviceList(){
|
|
|
$.ajax({
|
|
|
type: "GET",
|
|
|
url: "/device/listAll",
|
|
|
/*data: obj,
|
|
|
contentType: 'application/json;charset=utf-8',*/
|
|
|
success: function(res){
|
|
|
console.log(res)
|
|
|
if(res.success){
|
|
|
var selectorx = $('#id_select2_demo1').select2();
|
|
|
$("#id_select2_demo1").select2({
|
|
|
data:res.result
|
|
|
});
|
|
|
}else{
|
|
|
}
|
|
|
},error:function (res){
|
|
|
/*layer.msg('删除失败,'+res.message, {icon: 1});*/
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
</body>
|
|
|
</html> |