|
@@ -0,0 +1,385 @@
|
|
|
|
+{{include "com/inc.html"}}
|
|
|
|
+<!-- Main Header -->
|
|
|
|
+{{include "com/header.html"}}
|
|
|
|
+<!-- Left side column. 权限菜单 -->
|
|
|
|
+{{include "com/menu.html"}}
|
|
|
|
+
|
|
|
|
+<div class="content-wrapper">
|
|
|
|
+ <section class="content-header">
|
|
|
|
+ <h1>
|
|
|
|
+ <small><a onclick="createModel()" class="btn btn-primary opr">新增程序</a></small>
|
|
|
|
+ </h1>
|
|
|
|
+ <ol class="breadcrumb">
|
|
|
|
+ <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
|
|
|
|
+ <li><a href="#"><i class="fa fa-dashboard"></i> 程序列表</a></li>
|
|
|
|
+ </ol>
|
|
|
|
+ <br/>
|
|
|
|
+ </section>
|
|
|
|
+ <!-- Main content -->
|
|
|
|
+ <section class="content">
|
|
|
|
+ <div class="row">
|
|
|
|
+ <div class="col-xs-12">
|
|
|
|
+ <div class="box">
|
|
|
|
+ <div class="box-body">
|
|
|
|
+ <h3>程序列表</h3>
|
|
|
|
+ <table id="dataTable" class="table table-bordered table-hover">
|
|
|
|
+ <thead>
|
|
|
|
+ <tr>
|
|
|
|
+ <th>编号</th>
|
|
|
|
+ <th>应用名称</th>
|
|
|
|
+ <th>地址&端口</th>
|
|
|
|
+ <th>定时时间</th>
|
|
|
|
+ <th>负责人</th>
|
|
|
|
+ <th>邮箱</th>
|
|
|
|
+ <th>状态</th>
|
|
|
|
+ <th>心跳时间</th>
|
|
|
|
+ <th>操作</th>
|
|
|
|
+ </tr>
|
|
|
|
+ </thead>
|
|
|
|
+ </table>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- /.box-body -->
|
|
|
|
+ </div>
|
|
|
|
+ <!-- /.box -->
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </section>
|
|
|
|
+</div>
|
|
|
|
+
|
|
|
|
+<!-- 新增程序model -->
|
|
|
|
+<div class="modal fade" id="modal-create" tabindex="-1" role="dialog" aria-hidden="true">
|
|
|
|
+ <div class="modal-dialog">
|
|
|
|
+ <div class="modal-content">
|
|
|
|
+ <div class="modal-header">
|
|
|
|
+ <div class="modal-header">
|
|
|
|
+ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
|
|
+ <div class="edit-form">
|
|
|
|
+ <div class="edit-info">
|
|
|
|
+ <span class="info"><i class="fa fa-fw fa-tags fa-lg"></i>新建程序</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="edit-form">
|
|
|
|
+ <hr>
|
|
|
|
+ <form class="form-horizontal">
|
|
|
|
+ <div class="form-group margin-bottom">
|
|
|
|
+ <label class="col-sm-3 control-label"><span style="color:red;">* </span>程序名称</label>
|
|
|
|
+ <div class="col-sm-8">
|
|
|
|
+ <input type="text" class="form-control" id="app-name" placeholder="程序名称" required>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="form-group margin-bottom">
|
|
|
|
+ <label class="col-sm-3 control-label"><span style="color:red;">* </span>服务器&端口</label>
|
|
|
|
+ <div class="col-sm-8">
|
|
|
|
+ <input type="text" class="form-control" id="ip-port" placeholder="服务器&端口" required>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="form-group margin-bottom">
|
|
|
|
+ <label class="col-sm-3 control-label"><span style="color:red;">* </span>定时时间</label>
|
|
|
|
+ <div class="col-sm-8">
|
|
|
|
+ <select class="form-control selectpicker" id="timing">
|
|
|
|
+ <option value="0" selected>10m</option>
|
|
|
|
+ <option value="1">30m</option>
|
|
|
|
+ <option value="2">1h</option>
|
|
|
|
+ <option value="3">3h</option>
|
|
|
|
+ <option value="4">24h</option>
|
|
|
|
+ </select>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+<!-- <div class="form-group margin-bottom">-->
|
|
|
|
+<!-- <label class="col-sm-3 control-label"><span style="color:red;">* </span>程序状态</label>-->
|
|
|
|
+<!-- <div class="col-sm-5 radio">-->
|
|
|
|
+<!-- <label class="margin-r-5">-->
|
|
|
|
+<!-- <input type="radio" name="role" value=1 checked>正常-->
|
|
|
|
+<!-- </label>-->
|
|
|
|
+<!-- <label class="margin-r-5">-->
|
|
|
|
+<!-- <input type="radio" name="role" value=2 checked>废弃-->
|
|
|
|
+<!-- </label>-->
|
|
|
|
+<!-- </div>-->
|
|
|
|
+<!-- </div>-->
|
|
|
|
+ <div class="form-group margin-bottom">
|
|
|
|
+ <label class="col-sm-3 control-label"><span style="color:red;">* </span>负责人</label>
|
|
|
|
+ <div class="col-sm-8">
|
|
|
|
+ <input type="text" class="form-control" id="leader" placeholder="负责人" required>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="form-group margin-bottom">
|
|
|
|
+ <label class="col-sm-3 control-label"><span style="color:red;">* </span>邮箱地址</label>
|
|
|
|
+ <div class="col-sm-8">
|
|
|
|
+ <input type="text" class="form-control" id="email" placeholder="邮箱地址,可以多个英文逗号拼接" required>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </form>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="modal-footer">
|
|
|
|
+ <input type="button" onclick="saveData()" class="btn btn-primary saveBtn" value="保存">
|
|
|
|
+ <input type="button" onclick="cancelModel()" class="btn btn-default" style="margin-left: 24px" value="取消">
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div><!-- /.modal -->
|
|
|
|
+</div>
|
|
|
|
+
|
|
|
|
+<div class="modal fade" id="modal-edit" tabindex="-1" role="dialog" aria-hidden="true">
|
|
|
|
+ <div class="modal-dialog">
|
|
|
|
+ <div class="modal-content">
|
|
|
|
+ <div class="modal-header">
|
|
|
|
+ <div class="modal-header">
|
|
|
|
+ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
|
|
+ <div class="edit-form">
|
|
|
|
+ <div class="edit-info">
|
|
|
|
+ <span class="info"><i class="fa fa-fw fa-tags fa-lg"></i>修改程序</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="edit-form">
|
|
|
|
+ <hr>
|
|
|
|
+ <form class="form-horizontal">
|
|
|
|
+ <div class="form-group margin-bottom">
|
|
|
|
+ <label class="col-sm-3 control-label"><span style="color:red;">* </span>程序名称</label>
|
|
|
|
+ <div class="col-sm-8">
|
|
|
|
+ <input type="text" class="form-control" id="edit-name" placeholder="程序名称" required>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="form-group margin-bottom">
|
|
|
|
+ <label class="col-sm-3 control-label"><span style="color:red;">* </span>服务器&端口</label>
|
|
|
|
+ <div class="col-sm-8">
|
|
|
|
+ <input type="text" class="form-control" id="edit-ip-port" placeholder="服务器&端口" required>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="form-group margin-bottom">
|
|
|
|
+ <label class="col-sm-3 control-label"><span style="color:red;">* </span>定时时间</label>
|
|
|
|
+ <div class="col-sm-8">
|
|
|
|
+ <select class="form-control selectpicker" id="edit-timing">
|
|
|
|
+ <option value="0" selected>10m</option>
|
|
|
|
+ <option value="1">30m</option>
|
|
|
|
+ <option value="2">1h</option>
|
|
|
|
+ <option value="3">3h</option>
|
|
|
|
+ <option value="4">24h</option>
|
|
|
|
+ </select>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="form-group margin-bottom">
|
|
|
|
+ <label class="col-sm-3 control-label"><span style="color:red;">* </span>程序状态</label>
|
|
|
|
+ <div class="col-sm-5 radio">
|
|
|
|
+ <label class="margin-r-5">
|
|
|
|
+ <input type="radio" name="status" value=1>正常
|
|
|
|
+ </label>
|
|
|
|
+ <label class="margin-r-5">
|
|
|
|
+ <input type="radio" name="status" value=0>暂停
|
|
|
|
+ </label>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="form-group margin-bottom">
|
|
|
|
+ <label class="col-sm-3 control-label"><span style="color:red;">* </span>负责人</label>
|
|
|
|
+ <div class="col-sm-8">
|
|
|
|
+ <input type="text" class="form-control" id="edit-leader" placeholder="负责人" required>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="form-group margin-bottom">
|
|
|
|
+ <label class="col-sm-3 control-label"><span style="color:red;">* </span>邮箱地址</label>
|
|
|
|
+ <div class="col-sm-8">
|
|
|
|
+ <input type="text" class="form-control" id="edit-email" placeholder="邮箱地址,可以多个英文逗号拼接" required>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </form>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="modal-footer">
|
|
|
|
+ <input type="button" onclick="saveEdit()" class="btn btn-primary saveBtn" value="保存">
|
|
|
|
+ <input type="button" onclick="cancelModel()" class="btn btn-default" style="margin-left: 24px" value="取消">
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div><!-- /.modal -->
|
|
|
|
+</div>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+{{include "com/footer.html"}}
|
|
|
|
+<script>
|
|
|
|
+ menuActive("/service/app/monitor/list");
|
|
|
|
+
|
|
|
|
+ var _id = ""
|
|
|
|
+
|
|
|
|
+ $(document).ready(function () {
|
|
|
|
+ ttable = $('#dataTable').DataTable({
|
|
|
|
+ "paging": true,
|
|
|
|
+ "lengthChange": false,
|
|
|
|
+ "searching": true,
|
|
|
|
+ "ordering": false,
|
|
|
|
+ "info": true,
|
|
|
|
+ "autoWidth": true,
|
|
|
|
+ "serverSide": true,
|
|
|
|
+ "language": {
|
|
|
|
+ "url": "/dist/js/dataTables.chinese.lang"
|
|
|
|
+ },
|
|
|
|
+ "ajax": {
|
|
|
|
+ "url": "/service/app/monitor/list",
|
|
|
|
+ "type": "post",
|
|
|
|
+ "data": {}
|
|
|
|
+ },
|
|
|
|
+ "fnDrawCallback": function () {
|
|
|
|
+ $("ul.pagination").prepend(" 转到第 <input type='text' id='changePage' style='width:20px;'> 页 <a type='text' href='javascript:void(0);' id='dataTable-btn' style='text-align:center'>GO</a>");
|
|
|
|
+ $('#dataTable-btn').click(function (e) {
|
|
|
|
+ var redirectpage = 0
|
|
|
|
+ if ($("#changePage").val() && $("#changePage").val() > 0) {
|
|
|
|
+ var redirectpage = $("#changePage").val() - 1;
|
|
|
|
+ }
|
|
|
|
+ ttable.page(redirectpage).draw(false);
|
|
|
|
+ });
|
|
|
|
+ this.api().column(0).nodes().each(function(cell, i) {
|
|
|
|
+ cell.innerHTML = i + 1;
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ "columns": [
|
|
|
|
+ {"data": null, width:"4%"},
|
|
|
|
+ {"data": "name", width: "10%"},
|
|
|
|
+ {"data": function (row) {
|
|
|
|
+ var str = ""
|
|
|
|
+ str = row["ip"] + ":" + row["port"]
|
|
|
|
+ return str
|
|
|
|
+ }, width: "10%",},
|
|
|
|
+ {"data": "timing", width: "10%"},
|
|
|
|
+ {"data": "leader", width: "10%"},
|
|
|
|
+ {"data": "mail", width: "20%"},
|
|
|
|
+ {"data": "status", width: "8%", render: function (val) {
|
|
|
|
+ if (val > 0) {
|
|
|
|
+ return "运行中"
|
|
|
|
+ } else if (val < 0) {
|
|
|
|
+ return "异常"
|
|
|
|
+ } else if (val === 0) {
|
|
|
|
+ return "已暂停"
|
|
|
|
+ }
|
|
|
|
+ }},
|
|
|
|
+ {"data": "checktime", width:"10%", render: function (val) {
|
|
|
|
+ var dt = new Date()
|
|
|
|
+ dt.setTime(parseInt(val) * 1000);
|
|
|
|
+ return dt.format("yyyy-MM-dd hh:mm:ss")
|
|
|
|
+ }},
|
|
|
|
+ {"data":"_id",render:function(val,a,row){
|
|
|
|
+ return "<a href='#' onclick='edit(\""+row['name']+"\",\""+row['ip']+"\",\""+row['port']+"\",\""+row['leader']+"\",\""+row['mail']+
|
|
|
|
+ "\",\""+row['timing']+"\",\""+row['status']+"\",\""+row['_id']+"\")'>"+"<i class='fa fa-fw fa-edit text-yellow'></i></a> "+
|
|
|
|
+ "<a href='#' onclick='del(\""+val+"\")'><i class='fa fa-fw fa-trash text-red'></i></a>"
|
|
|
|
+ }}
|
|
|
|
+ ]
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ function saveData() {
|
|
|
|
+ const name = $("#app-name").val();
|
|
|
|
+ const ip_port = $("#ip-port").val()
|
|
|
|
+ const leader = $("#leader").val()
|
|
|
|
+ const mail = $("#email").val()
|
|
|
|
+ const timing = $("#timing option:selected").text()
|
|
|
|
+
|
|
|
|
+ const app = {}
|
|
|
|
+ if (name === "" || ip_port === "" || leader === "" || mail === "") {
|
|
|
|
+ alert("必填信息不能为空")
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ app['name'] = name
|
|
|
|
+ app['ip_port'] = ip_port
|
|
|
|
+ app['leader'] = leader
|
|
|
|
+ app['mail'] = mail
|
|
|
|
+ app['timing'] = timing
|
|
|
|
+ $.ajax({
|
|
|
|
+ url: "/service/app/monitor/create",
|
|
|
|
+ type: 'POST',
|
|
|
|
+ data: {"data": JSON.stringify(app)},
|
|
|
|
+ success: function (r) {
|
|
|
|
+ if (r.rep) {
|
|
|
|
+ showTip("保存成功", 1000);
|
|
|
|
+ ttable.ajax.reload();
|
|
|
|
+ } else {
|
|
|
|
+ showTip("保存失败", 1000);
|
|
|
|
+ }
|
|
|
|
+ $('#modal-create').modal("hide")
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ function createModel() {
|
|
|
|
+ $('#modal-create').modal("show")
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ function cancelModel() {
|
|
|
|
+ $('#modal-create').modal("hide")
|
|
|
|
+ $('#modal-edit').modal("hide")
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ function edit(name, ip, port, leader, mail, timing, status, id) {
|
|
|
|
+ _id = id;
|
|
|
|
+ $("#modal-edit #edit-name").val(name);
|
|
|
|
+ $("#modal-edit #edit-ip-port").val(ip+":"+port);
|
|
|
|
+ $("#modal-edit #edit-leader").val(leader);
|
|
|
|
+ $("#modal-edit #edit-email").val(mail);
|
|
|
|
+ $("#modal-edit").modal("show");
|
|
|
|
+
|
|
|
|
+ const s = document.getElementById("edit-timing");
|
|
|
|
+ for(let i=0; i<s.options.length; i++){
|
|
|
|
+ if(s.options[i].innerHTML === timing){
|
|
|
|
+ s.options[i].selected = true;
|
|
|
|
+ break;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ $("#edit-timing").selectpicker("refresh");
|
|
|
|
+ const r = document.getElementsByName("status");
|
|
|
|
+ for(let i=0;i < r.length;i++) {
|
|
|
|
+ if (r[i].value === status) {
|
|
|
|
+ r[i].checked = true;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ function saveEdit() {
|
|
|
|
+ const name = $("#edit-name").val();
|
|
|
|
+ const ip_port = $("#edit-ip-port").val()
|
|
|
|
+ const leader = $("#edit-leader").val()
|
|
|
|
+ const mail = $("#edit-email").val()
|
|
|
|
+
|
|
|
|
+ const app = {}
|
|
|
|
+
|
|
|
|
+ if (name === "" || ip_port === "" || leader === "" || mail === "") {
|
|
|
|
+ alert("必填信息不能为空")
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ app['name'] = name
|
|
|
|
+ app['ip_port'] = ip_port
|
|
|
|
+ app['leader'] = leader
|
|
|
|
+ app['mail'] = mail
|
|
|
|
+ app['timing'] = timing
|
|
|
|
+ app["timing"] = $("#edit-timing option:selected").text()
|
|
|
|
+ app["status"]= $("input[name='status']:checked").val()
|
|
|
|
+ $.ajax({
|
|
|
|
+ url: "/service/app/monitor/edit",
|
|
|
|
+ type: 'POST',
|
|
|
|
+ data: {"data": JSON.stringify(app), "id": _id},
|
|
|
|
+ success: function (r) {
|
|
|
|
+ if (r.rep) {
|
|
|
|
+ showTip("保存成功", 1000);
|
|
|
|
+ ttable.ajax.reload();
|
|
|
|
+ } else {
|
|
|
|
+ showTip("保存失败", 1000);
|
|
|
|
+ }
|
|
|
|
+ $('#modal-edit').modal("hide")
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ function del(id) {
|
|
|
|
+ $.ajax({
|
|
|
|
+ url: "/service/app/monitor/del",
|
|
|
|
+ type: 'POST',
|
|
|
|
+ data: {"id": id},
|
|
|
|
+ success: function (r) {
|
|
|
|
+ if (r.rep) {
|
|
|
|
+ showTip("删除成功", 1000);
|
|
|
|
+ ttable.ajax.reload();
|
|
|
|
+ } else {
|
|
|
|
+ showTip("删除失败", 1000);
|
|
|
|
+ }
|
|
|
|
+ $('#modal-edit').modal("hide")
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+</script>
|