414 lines
18 KiB
HTML
414 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="/css/font.css">
|
|
<link rel="stylesheet" href="/css/xadmin.css">
|
|
<link rel="stylesheet" href="/css/win10ui.css">
|
|
<link rel="stylesheet" href="/css/theme.css">
|
|
<link rel="stylesheet" href="/lib/layui/css/layui.css">
|
|
<link rel="stylesheet" href="/T4/css/task.css">
|
|
<link rel="stylesheet" href="/T4/css/hardware.css">
|
|
<link rel="stylesheet" href="/T4/css/font.css">
|
|
<link rel="stylesheet" href="/T4/css/chart.css">
|
|
<link rel="stylesheet" href="/T4/css/cmd.css">
|
|
<script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
|
|
<script type="text/javascript" src="/js/xadmin.js"></script>
|
|
<script src="/assets/js/socket/Socket.IO.js"></script>
|
|
<script src="/assets/js/core/echarts.min.js"></script>
|
|
|
|
<script>window.breadcrumbs = [{ name: "首页", url: "" }, { name: "Termination4", url: "" }, { name: "L3T" }];</script>
|
|
<script src="/js/address.bar.js"></script>
|
|
<style>
|
|
.layui-card {
|
|
margin: 15px;
|
|
}
|
|
|
|
.layui-table-cell {
|
|
height: auto;
|
|
white-space: normal;
|
|
}
|
|
|
|
.time-type-select {
|
|
width: 100%;
|
|
}
|
|
|
|
/* 调整表单标签宽度 */
|
|
.layui-form-label {
|
|
width: 120px;
|
|
}
|
|
|
|
.layui-input-block {
|
|
margin-left: 150px;
|
|
}
|
|
|
|
/* 调整弹窗宽度 */
|
|
.layui-layer-page .layui-layer-content {
|
|
padding: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="layui-fluid">
|
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-md12">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">L3T<button class="layui-btn" onclick="socket.emit('T4CMDL3TGetL3T', { PCMachineGUID: PCMachineGUID });" style="margin-left: 30px;">刷新</button></div>
|
|
<script type="text/html" id="TPL-Task">
|
|
<div class="layui-btn-container">
|
|
<button class="layui-btn" lay-event="btnAddTask">新增任务</button>
|
|
<button class="layui-btn layui-btn-danger" lay-event="btnDeleteSelected">删除选中</button>
|
|
</div>
|
|
</script>
|
|
<div class="layui-card-body">
|
|
<table id="taskTable" lay-filter="taskTable"></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 新增/编辑任务表单 -->
|
|
<div id="taskForm" style="display: none; padding: 20px;">
|
|
<form class="layui-form" lay-filter="taskForm">
|
|
<input type="text" name="TaskUUID" style="display: none;">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">任务名称</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="TaskName" required lay-verify="required" placeholder="请输入任务名称"
|
|
autocomplete="off" class="layui-input">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">生效时间类型</label>
|
|
<div class="layui-input-block">
|
|
<select name="ETimeType" lay-filter="ETimeType" class="time-type-select">
|
|
<option value="1">具体时间</option>
|
|
<option value="2">每日执行时间</option>
|
|
<option value="3">每周循环时间</option>
|
|
<option value="4">月循环时间</option>
|
|
<option value="5">间隔时间</option>
|
|
<option value="6">开机时执行</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item" id="ETimeContainer">
|
|
<label class="layui-form-label">生效时间</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="ETime" placeholder="请输入生效时间" autocomplete="off" class="layui-input">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">执行时间类型</label>
|
|
<div class="layui-input-block">
|
|
<select name="RTimeType" lay-filter="RTimeType" class="time-type-select">
|
|
<option value="1">具体时间</option>
|
|
<option value="2">每日执行时间</option>
|
|
<option value="3">每周循环时间</option>
|
|
<option value="4">月循环时间</option>
|
|
<option value="5">间隔时间</option>
|
|
<option value="6">开机时执行</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item" id="RTimeContainer">
|
|
<label class="layui-form-label">执行时间</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="RTime" placeholder="请输入执行时间" autocomplete="off" class="layui-input">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">执行代码类型</label>
|
|
<div class="layui-input-block">
|
|
<select name="RType" lay-filter="RType">
|
|
<option value="1">Python脚本</option>
|
|
<option value="2">Shell脚本</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">执行代码</label>
|
|
<div class="layui-input-block">
|
|
<textarea name="RCode" placeholder="请输入执行代码" class="layui-textarea"
|
|
style="min-height: 150px;"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-block">
|
|
<button class="layui-btn" lay-submit lay-filter="submitTask">提交</button>
|
|
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
|
</div>
|
|
</div>
|
|
|
|
<input type="hidden" name="TaskUUID">
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
socket = io("/Termination4SocketIOSpace");
|
|
socket.on(PCMachineGUID + 'CMDRL3TRELOAD', (message) => {
|
|
location.reload();
|
|
});
|
|
layui.use(['table', 'form', 'layer', 'laydate'], function () {
|
|
var table = layui.table;
|
|
var form = layui.form;
|
|
var layer = layui.layer;
|
|
var laydate = layui.laydate;
|
|
var $ = layui.$;
|
|
|
|
socket.on(PCMachineGUID + 'CMDRL3T', (message) => {
|
|
console.log("CMDRL3T", message.L3T)
|
|
table.render({
|
|
elem: '#taskTable',
|
|
data: message.L3T,
|
|
toolbar: '#TPL-Task',
|
|
cols: [[
|
|
{ type: 'checkbox' },
|
|
{ field: 'TaskName', title: '任务名称', width: 150 },
|
|
{ field: 'TaskUUID', title: '任务UUID', width: 250 },
|
|
{
|
|
field: 'ETimeType', title: '生效时间类型', width: 150, templet: function (d) {
|
|
return getTimeTypeName(d.ETimeType);
|
|
}
|
|
},
|
|
{ field: 'ETime', title: '生效时间', width: 180 },
|
|
{
|
|
field: 'RTimeType', title: '执行时间类型', width: 150, templet: function (d) {
|
|
return getTimeTypeName(d.RTimeType);
|
|
}
|
|
},
|
|
{ field: 'RTime', title: '执行时间', width: 180 },
|
|
{
|
|
field: 'RType', title: '执行代码类型', width: 120, templet: function (d) {
|
|
return getCodeTypeName(d.RType);
|
|
}
|
|
},
|
|
{ field: 'RCode', title: '执行代码', width: 200 },
|
|
{ fixed: 'right', title: '操作', width: 150, align: 'center', toolbar: '#bar' }
|
|
]],
|
|
page: false
|
|
});
|
|
});
|
|
|
|
table.on("toolbar(taskTable)", function (obj) {
|
|
var config = obj.config;
|
|
var tableId = config.id;
|
|
var status = table.checkStatus(tableId);
|
|
console.log(obj);
|
|
|
|
// 新增任务按钮点击事件
|
|
if (obj.event === "btnAddTask") {
|
|
layer.open({
|
|
type: 1,
|
|
title: '新增任务',
|
|
area: ['800px', '700px'],
|
|
content: $('#taskForm'),
|
|
success: function () {
|
|
form.val('taskForm', {
|
|
TaskUUID: '',
|
|
TaskName: '',
|
|
ETimeType: '1',
|
|
ETime: '',
|
|
RTimeType: '1',
|
|
RTime: '',
|
|
RType: '1',
|
|
RCode: '',
|
|
TaskUUID: ''
|
|
});
|
|
// 初始化时间输入框
|
|
updateTimeInput('ETime', '1');
|
|
updateTimeInput('RTime', '1');
|
|
}
|
|
});
|
|
}
|
|
if (obj.event === "btnDeleteSelected") {
|
|
var checkStatus = table.checkStatus('taskTable');
|
|
var data = checkStatus.data;
|
|
|
|
if (data.length === 0) {
|
|
layer.msg('请至少选择一条数据', { icon: 2 });
|
|
return;
|
|
}
|
|
|
|
layer.confirm('确定删除选中的 ' + data.length + ' 条数据吗？', function (index) {
|
|
var uuids = data.map(function (item) { return item.TaskUUID; });
|
|
|
|
// 这里应该发送AJAX请求批量删除数据
|
|
// $.ajax({
|
|
// url: '/api/tasks/batchDelete',
|
|
// type: 'POST',
|
|
// data: {uuids: uuids},
|
|
// success: function(res) {
|
|
// if(res.code === 0) {
|
|
// layer.msg('删除成功', {icon: 1});
|
|
// table.reload('taskTable');
|
|
// } else {
|
|
// layer.msg(res.msg || '删除失败', {icon: 2});
|
|
// }
|
|
// }
|
|
// });
|
|
// 演示用，直接重新加载表格
|
|
layer.msg('已选择删除 ' + data.length + ' 条数据', { icon: 1 });
|
|
table.reload('taskTable');
|
|
layer.close(index);
|
|
});
|
|
}
|
|
});
|
|
|
|
|
|
// 时间类型名称映射
|
|
function getTimeTypeName(type) {
|
|
var types = {
|
|
'1': '具体时间',
|
|
'2': '每日执行时间',
|
|
'3': '每周循环时间',
|
|
'4': '月循环时间',
|
|
'5': '间隔时间',
|
|
'6': '开机时执行'
|
|
};
|
|
return types[type] || '未知';
|
|
}
|
|
|
|
// 代码类型名称映射
|
|
function getCodeTypeName(type) {
|
|
var types = {
|
|
'1': 'Shell脚本',
|
|
'2': 'Python脚本'
|
|
};
|
|
return types[type] || '未知';
|
|
}
|
|
|
|
form.on('select(ETimeType)', function (data) {
|
|
updateTimeInput('ETime', data.value);
|
|
});
|
|
|
|
form.on('select(RTimeType)', function (data) {
|
|
updateTimeInput('RTime', data.value);
|
|
});
|
|
|
|
function updateTimeInput(prefix, type) {
|
|
var container = $('#' + prefix + 'Container');
|
|
var input = container.find('input');
|
|
|
|
// Reset input field state
|
|
input.val('');
|
|
input.prop('disabled', false);
|
|
input.attr('placeholder', '');
|
|
|
|
switch (type) {
|
|
case '1': // Specific time
|
|
input.attr('placeholder', '请输入具体时间 (yyyy-MM-dd HH:mm:ss)');
|
|
break;
|
|
case '2': // Daily execution time
|
|
input.attr('placeholder', '请输入每日执行时间 (HH:mm:ss)');
|
|
break;
|
|
case '3': // Weekly cycle time
|
|
input.attr('placeholder', '请输入每周循环时间 (X HH:mm:ss, X=1-7)');
|
|
break;
|
|
case '4': // Monthly cycle time
|
|
input.attr('placeholder', '请输入月循环时间 (X HH:mm:ss, X=1-31)');
|
|
break;
|
|
case '5': // Interval time
|
|
input.attr('placeholder', '请输入间隔时间 (HH:mm:ss)');
|
|
break;
|
|
case '6': // Execute on startup
|
|
input.attr('placeholder', '开机时执行无需输入时间');
|
|
input.val('开机时执行');
|
|
input.prop('disabled', true);
|
|
break;
|
|
}
|
|
form.render();
|
|
}
|
|
|
|
// 表单提交
|
|
form.on('submit(submitTask)', function (data) {
|
|
if (data.field.TaskUUID) {
|
|
socket.emit('T4CMDL3TChangeL3T', { PCMachineGUID: PCMachineGUID, 'Command': data.field });
|
|
} else {
|
|
socket.emit('T4CMDL3TAddL3T', { PCMachineGUID: PCMachineGUID, 'Command': data.field });
|
|
}
|
|
layer.closeAll();
|
|
return false;
|
|
});
|
|
|
|
// 表格工具栏事件
|
|
table.on('tool(taskTable)', function (obj) {
|
|
var data = obj.data;
|
|
var layEvent = obj.event;
|
|
|
|
if (layEvent === 'edit') {
|
|
layer.open({
|
|
type: 1,
|
|
title: '编辑任务',
|
|
area: ['800px', '700px'],
|
|
content: $('#taskForm'),
|
|
success: function () {
|
|
// First update the time input fields based on their types
|
|
updateTimeInput('ETime', data.ETimeType);
|
|
updateTimeInput('RTime', data.RTimeType);
|
|
|
|
// Then set the form values
|
|
form.val('taskForm', {
|
|
TaskUUID: data.TaskUUID,
|
|
TaskName: data.TaskName,
|
|
ETimeType: data.ETimeType,
|
|
ETime: data.ETime,
|
|
RTimeType: data.RTimeType,
|
|
RTime: data.RTime,
|
|
RType: data.RType,
|
|
RCode: data.RCode,
|
|
TaskUUID: data.TaskUUID
|
|
});
|
|
|
|
form.render();
|
|
}
|
|
});
|
|
} else if (layEvent === 'del') {
|
|
layer.confirm('确定删除此任务吗？', function (index) {
|
|
// 这里应该发送AJAX请求删除数据
|
|
// $.ajax({
|
|
// url: '/api/tasks/delete',
|
|
// type: 'POST',
|
|
// data: {TaskUUID: data.TaskUUID},
|
|
// success: function(res) {
|
|
// if(res.code === 0) {
|
|
// layer.msg('删除成功', {icon: 1});
|
|
// table.reload('taskTable');
|
|
// } else {
|
|
// layer.msg(res.msg || '删除失败', {icon: 2});
|
|
// }
|
|
// }
|
|
// });
|
|
|
|
socket.emit('T4CMDL3TDelL3T', { PCMachineGUID: PCMachineGUID, 'Command': data.TaskUUID });
|
|
// 演示用，直接删除表格中的行
|
|
//obj.del();
|
|
layer.close(index);
|
|
//layer.msg('删除成功', {icon: 1});
|
|
});
|
|
}
|
|
});
|
|
});
|
|
window.addEventListener('load', function() {
|
|
socket.emit('T4CMDL3TGetL3T', { PCMachineGUID: PCMachineGUID });
|
|
});
|
|
</script>
|
|
|
|
<script type="text/html" id="bar">
|
|
<div class="layui-btn-container">
|
|
<button class="layui-btn" lay-event="edit">查看</button>
|
|
<button class="layui-btn layui-btn-danger" lay-event="del">删除</button>
|
|
</div>
|
|
</script>
|
|
</body>
|
|
|
|
</html> |