<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>舰R脚本管理器</title> <link rel="stylesheet" href="layui/css/layui.css"> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> </head> <body> <div class="myDiy"> <blockquote class="layui-elem-quote">舰R脚本管理器:<span id="taskStatus"></span><br/><br/><span id="taskName">当前无任务</span><br/><br/><span id="runIndex"></span><br/><br/><span id="log"></span> </blockquote> <button class="layui-btn layui-btn-lg layui-btn-normal" onclick="createTask()">创建任务</button> <button class="layui-btn layui-btn-lg layui-btn-normal" id="createDevice">选择设备 <i class="layui-icon layui-icon-down layui-font-12"></i> </button> <blockquote class="layui-elem-quote"> 调用设备:<span id="deviceName"></span><br> </blockquote> <br/><br/><br/> <div class="layui-bg-gray layui-row layui-col-space15" id="card" style="padding: 30px;"> </div> </div> </body> <script src="layui/layui.js"></script> <script src="layui/jquery-3.2.1.js"></script> <script> let homeUrl=""; let device; let deviceModel=[]; function createTask() { if(device===undefined){ layer.msg('请选择设备') return } layer.prompt({ formType: 2, value: '{\n' + ' "title":"",\n' + ' "script":[\n' + ' {\n' + ' "title":"",\n' + ' "activity":"map|attack|formationType#{0-4}|dialog_go|dialog_back|dialog_assets",\n' + ' "nextWaitTime": 0,\n' + ' "randomNextWaitTime": 0\n' + ' }\n' + ' ]\n' + '}', title: '创建任务', maxlength: 99999, area: ['800px', '350px'] //自定义文本域宽高 }, function (value, index, elem) { $.post(homeUrl+"/jianr/task/add.do", {task: value}, function (json) { layer.msg(json.msg) }) layer.close(index); }); } function runTask(name,title) { if(device===undefined){ layer.msg('请选择设备') return } $.post(homeUrl+"/jianr/run.do", {task: name,device:device.title,modelName:title}, function (json) { layer.msg(json.msg) }) } function stopTask() { $.post(homeUrl+"/jianr/stop.do", function (json) { layer.msg(json.msg) }) } function removeTask(name) { $.post(homeUrl+"/jianr/task/remove.do", {task: name}, function (json) { layer.msg(json.msg) }) } function showDevice() { if(isSelectDevice()){ layer.msg("当前未选择设备") }else{ layer.prompt({ formType: 2, value: JSON.stringify(device), title: '查看设备', maxlength: 99999, area: ['800px', '350px'] //自定义文本域宽高 }, function (value, index, elem) { $.post(homeUrl+"/jianr/device/edit.do", {device: value,oldDevice:device.title}, function (json) { layer.msg(json.msg) }) layer.close(index); }); } } function delDevice() { } function isSelectDevice() { return device===undefined; } function getStatus() { $.post(homeUrl+"/jianr/status.do", function (json) { if(json.data.status){ $('#taskStatus')[0].innerHTML="运行" $('#taskStatus').css('color','#5C962C') $('#taskName')[0].innerHTML='执行次数: '+json.data.runIndex; $('#runIndex')[0].innerHTML='当前正在执行: '+json.data.taskName; $('#log')[0].innerHTML=json.data.log }else{ $('#taskStatus')[0].innerHTML="停止" $('#taskStatus').css('color','#FF5722') } setTimeout(function () { getStatus() },1000) }) } layui.use('dropdown', function(){ let dropdown = layui.dropdown function createCard(name) { let html = '<div class="layui-card layui-col-md3 layui-col-lg-offset1"><div class="layui-card-header">' + name + '</div><div class="layui-card-body">' + '<button class="layui-btn layui-btn-radius layui-btn-normal" id="runTask_'+name+'" ><i class="layui-icon"></i>运行 <i class="layui-icon layui-icon-down layui-font-12"></i></button><br/><br/><button class="layui-btn layui-btn-radius layui-btn-warm" onclick="stopTask()"><i class="layui-icon"></i>停止</button><br/><br/><button class="layui-btn layui-btn-radius layui-btn-danger" onclick="removeTask(\'' + name + '\')"><i class="layui-icon"></i>删除</button></div></div>'; $('#card').append(html) dropdown.render({ elem: '#runTask_'+name //可绑定在任意元素中,此处以上述按钮为例 ,data: deviceModel ,id: 'runTask_'+name //菜单被点击的事件 ,click: function(obj){ console.log(obj); if(obj.title==='查看'){ $.post(homeUrl+"/jianr/task/get.do",{task:name},function (json) { layer.prompt({ formType: 2, value: json.data, title: '脚本内容', area: ['800px', '350px'] //自定义文本域宽高 }, function(value, index, elem){ layer.close(index); }); }) }else{ runTask(name,obj.title) } } }); } $.get(homeUrl+"/jianr/task/list.do", function (json) { json.data.forEach(function (item) { createCard(item) } ) }) $.get(homeUrl+"/jianr/device/list.do",function (json) { let devices=json.data; devices.push({type:'-'}) devices.push({ title: '添加设备', name:"addDevice" ,href: '#' }) dropdown.render({ elem: '#createDevice' //可绑定在任意元素中,此处以上述按钮为例 ,data: devices ,id: 'createDevice' //菜单被点击的事件 ,click: function(obj){ if(obj.name==='addDevice'){ layer.prompt({ formType: 2, value: '{\n' + ' "deviceId":"",\n' + ' "title":"",\n' + ' "androidDevice":{\n' + ' "height":0,\n' + ' "width":0\n' + ' },\n' + ' "deviceDisplay":[\n' + ' {\n' + ' "title":"",\n' + ' "start":{\n' + ' "x":0,\n' + ' "y":0,\n' + ' "enableRandomX":false,\n' + ' "enableRandomY":false,\n' + ' "absRandomX":false,\n' + ' "absRandomY":false,\n' + ' "randomNumX":0,\n' + ' "randomNumY":0\n' + ' },\n' + ' "end":{\n' + ' "x": 0,\n' + ' "y": 0,\n' + ' "enableRandomX": false,\n' + ' "enableRandomY": false,\n' + ' "absRandomX": false,\n' + ' "absRandomY": false,\n' + ' "randomNumX": 0,\n' + ' "randomNumY": 0\n' + ' }\n' + ' }\n' + ' ]\n' + '}', title: '添加设备', maxlength: 99999, area: ['800px', '350px'] //自定义文本域宽高 }, function (value, index, elem) { $.post(homeUrl+"/jianr/device/add.do", {device: value}, function (json) { layer.msg(json.msg) }) layer.close(index); }); }else{ console.log(obj) if(obj.data==='select'){ device=obj.device; device.deviceDisplay.forEach(function (item){ deviceModel.push({ title:item.title }) deviceModel.push({type: '-'}) }) deviceModel.push({ title:"查看", }) $('#deviceName')[0].innerHTML=obj.device.title; }else if (obj.data==='edit'){ showDevice() }else if (obj.data==='del'){ delDevice() }else if (obj.data==='connect'){ $.post(homeUrl+"/jianr/device/connect.do",{device:obj.device.deviceId},function (json) { layer.msg(json.msg) }) } } } }); }) }); window.onload = function init() { getStatus() } </script> <style> .myDiy { width: 40%; height: 300px; margin-top: 10px; margin-left: 25%; } .button { width: 100px; height: 100px; font-size: 1em; } </style> </html>