后台添加脚本
# 新建脚本
首先要有一个js文件的静态地址。
脚本的存储位置，可以放在oss或git仓库里，也可以放在ESC云服务器里。
这里我们放在ECS里。
文件目录为：phalapi/public/cloud/components/Module/aweme
在该目录下，新建一个js文件，名为“yanghao.js”
在文件里，写一个简单的字符串hello
此文件的全路径为
/www/wwwroot/api-new-cloud.feiyunjs.cn/phalapi/public/cloud/components/Module/aweme/yanghao.js
因为绑定过域名，我们可以得到文件的静态地址：
http://new-cloud.feiyunjs.cn/components/Module/aweme/yanghao.js
访问这个地址，就可以看到hello字样
# 新建脚本分组
创建一个名为“某音”的脚本分组
# 添加脚本
在DY免root脚本菜单下，添加一个脚本
脚本地址，为刚才得到的js文件静态地址
脚本平台分类，约定为aweme
任务编辑页面路径，我们设置为components/Module/aweme/yanghao.html
添加设置如下
确定添加后，脚本列表就会多出来一个脚本
这里的脚本名称，是根据js文件名自动获取的。
如果你想显示中文，就把js文件命名为中文即可。
脚本添加完以后，点击创建任务，会显示空页面。这是因为脚本任务编辑页面的html，我们还没有编写。
# 新建任务编辑页面
进入文件目录：phalapi/public/cloud/components/Module/aweme
在该目录下，新建一个html文件，名为“yanghao.html”
文件内容如下：
```html
<div class="layui-fluid">
<!-- 分布表单开始 -->
<div class="layui-tab layui-steps layui-steps-vertical layui-steps-readonly" lay-filter="formStepsStep"
style="max-width: 800px;padding: 10px 0;">
<!-- 标题 -->
<ul class="layui-tab-title" style="padding: 0 50px;">
<li class="layui-this">
<i class="layui-icon layui-icon-ok">1</i>
<span class="layui-steps-title">脚本配置</span>
</li>
<li>
<i class="layui-icon layui-icon-ok">2</i>
<span class="layui-steps-title">选择设备</span>
</li>
<li>
<i class="layui-icon layui-icon-ok">3</i>
<span class="layui-steps-title">任务配置</span>
</li>
<li>
<i class="layui-icon layui-icon-ok">4</i>
<span class="layui-steps-title">完成</span>
</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<!-- 表单一 -->
<div id="formStepForm1" class="layui-form" lay-filter="formStepForm1"
style="max-width: 800px;margin: 0 auto;padding-top: 30px;">
<div class="layui-form-item layui-hide">
<label class="layui-form-label layui-form-required">脚本ID</label>
<div class="layui-input-inline">
<input type="text" name="module_id" value="" placeholder="" autocomplete="off"
class="layui-input" lay-verType="tips" lay-verify="required" required>
</div>
</div>
<div class="layui-form-item layui-hide">
<label class="layui-form-label layui-form-required">脚本名称</label>
<div class="layui-input-inline">
<input type="text" name="module_name" value="" placeholder="" autocomplete="off"
class="layui-input" lay-verType="tips" lay-verify="required" required>
</div>
</div>
<div class="layui-form-item layui-hide">
<label class="layui-form-label layui-form-required">脚本分组</label>
<div class="layui-input-inline">
<input type="text" name="module_group_id" value="" placeholder="" autocomplete="off"
class="layui-input" lay-verType="tips" lay-verify="required" required>
</div>
</div>
<div class="layui-form-item layui-hide">
<label class="layui-form-label layui-form-required">脚本地址</label>
<div class="layui-input-inline" style="width: 600px;">
<input type="text" name="module_url" autocomplete="off" placeholder="" class="layui-input"
lay-verType="tips" lay-verify="required" required>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">浏览数量</label>
<div class="layui-input-inline little-input">
<input type="number" name="watch_num" value="3" placeholder="" autocomplete="off"
class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">个<i class="fa fa-fw fa-lg fa-question-circle-o"
lay-tips="本次任务总共浏览的作品数量" style="margin-left: 10px;"></i></div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">浏览</label>
<div class="layui-input-inline little-input">
<input type="number" name="watch_min" value="3" placeholder="" autocomplete="off"
class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">-</div>
<div class="layui-input-inline little-input">
<input type="number" name="watch_max" value="5" placeholder="" autocomplete="off"
class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">秒</div>
</div>
<div class="layui-form-item" style="text-align:right;margin-top: 30px;">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formStepSubmit1">下一步</button>
</div>
</div>
</div>
</div>
<div class="layui-tab-item">
<!-- 表单二 -->
<div class="layui-form" style="max-width: 800px;margin: 0 auto;padding-top: 30px;">
<!-- 设备树形列表 -->
<div class="layui-form-item" id="deviceAll">
<label class="layui-form-label" style="border: none;background: none;"></label>
<div class="layui-input-inline" id="deviceTree"
style="width: 450px;min-height:100px;background: #FBFBFB;border-radius: 2px;border: 1px dashed #e6e6e6;padding:10px 10px 20px;">
</div>
</div>
<div class="layui-form-item" style="text-align:right;margin-top: 30px;">
<div class="layui-input-block">
<button type="button" class="layui-btn layui-btn-primary" data-steps="prev">上一步</button>
<button class="layui-btn" lay-submit lay-filter="formStepSubmit2">下一步</button>
</div>
</div>
</div>
</div>
<div class="layui-tab-item">
<!-- 表单3 -->
<div class="layui-form" style="max-width: 800px;margin: 0 auto;padding-top: 30px;">
<div class="layui-form-item">
<label class="layui-form-label layui-form-required">执行模式</label>
<div class="layui-input-block">
<!-- <input type="radio" name="mode" lay-filter="mode" value="0" title="即时"/>-->
<input type="radio" name="mode" lay-filter="mode" value="1" title="排队" checked />
<input type="radio" name="mode" lay-filter="mode" value="2" title="定时" />
</div>
</div>
<div class="layui-form-item layui-hide" id="startTime">
<label class="layui-form-label layui-form-required">开始时间</label>
<div class="layui-input-inline">
<input type="text" name="start_time" class="layui-input" id="start_time" lay-verType="tips">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label layui-form-required">时间限制</label>
<div class="layui-input-block">
<input type="radio" name="is_limited_time" lay-filter="is_limited_time" value="0"
title="不限时" checked />
<input type="radio" name="is_limited_time" lay-filter="is_limited_time" value="1"
title="限时" />
</div>
</div>
<div class="layui-form-item layui-hide" id="limitTime">
<label class="layui-form-label layui-form-required">限定时长</label>
<div class="layui-input-inline">
<input type="number" name="limit_time" value="600" class="layui-input" lay-verType="tips">
</div>
<div class="layui-form-mid layui-word-aux">秒</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label layui-form-required">启动等待</label>
<div class="layui-input-inline little-input">
<input type="number" name="wait_time_min" value="1" placeholder="" autocomplete="off"
class="layui-input" lay-verType="tips" lay-verify="required" required>
</div>
<div class="layui-form-mid layui-word-aux">-</div>
<div class="layui-input-inline little-input">
<input type="number" name="wait_time_max" value="3" placeholder="" autocomplete="off"
class="layui-input" lay-verType="tips" lay-verify="required" required>
</div>
<div class="layui-form-mid layui-word-aux">秒<i class="fa fa-fw fa-lg fa-question-circle-o"
lay-tips="同一批任务错开时间启动" style="margin-left: 10px;"></i></div>
</div>
<div class="layui-form-item">
<label class="layui-form-label layui-form-required">全局延时</label>
<div class="layui-input-inline little-input">
<input type="number" name="delay_min" value="1" placeholder="" autocomplete="off"
class="layui-input" lay-verType="tips" lay-verify="required" required>
</div>
<div class="layui-form-mid layui-word-aux">-</div>
<div class="layui-input-inline little-input">
<input type="number" name="delay_max" value="3" placeholder="" autocomplete="off"
class="layui-input" lay-verType="tips" lay-verify="required" required>
</div>
<div class="layui-form-mid layui-word-aux">秒<i class="fa fa-fw fa-lg fa-question-circle-o"
lay-tips="根据设备的硬件配置和网络信号强度而定，低配的设备建议将延迟设置大一些。" style="margin-left: 10px;"></i></div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">任务备注</label>
<div class="layui-input-inline">
<input type="text" name="remarks" value="" placeholder="" autocomplete="off"
class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux"><i class="fa fa-fw fa-lg fa-question-circle-o"
lay-tips="任务的简要说明，方便查找任务"></i></div>
</div>
<div class="layui-form-item" style="text-align:right;margin-top: 30px;">
<div class="layui-input-block">
<button type="button" class="layui-btn layui-btn-primary" data-steps="prev">上一步</button>
<button class="layui-btn" lay-submit lay-filter="formStepSubmit3">创建任务</button>
</div>
</div>
</div>
</div>
<div class="layui-tab-item text-center" style="padding-top: 30px;">
<div class="layui-hide" id="tableList" style="padding: 0 150px;text-align: left;"></div>
<div style="text-align: center;margin-top: 30px;">
<button class="layui-btn" data-steps="next">再次创建</button>
<button class="layui-btn layui-btn-primary end">关闭</button>
</div>
</div>
</div>
</div>
<!-- //分布表单结束 -->
</div>
<!-- js部分 -->
<script>
layui.use(['layer', 'form', 'steps', 'notice', 'laydate', 'admin', 'setter', 'tree'], function () {
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
var steps = layui.steps;
var notice = layui.notice;
var laydate = layui.laydate;
var admin = layui.admin;
var setter = layui.setter;
var tree = layui.tree;
/* 表单1提交事件 */
var field_first = {}, field_second = {};
form.on('submit(formStepSubmit1)', function (data) {
field_first = data.field;
admin.putTempData(key, field_first, true); //保存表单数据
steps.next('formStepsStep');
return false;
});
/* 表单2提交事件 */
var device_numbers = "", device_groups = "", device_models = "", num_device = 0, imeis = ''
form.on('submit(formStepSubmit2)', function (data) {
field_second = data.field;
// 全部设备--------------------------------------------
//获得选中设备的节点
var checkData = tree.getChecked('demoId'), imeiArr = new Array();
checkData.forEach((item, index, array) => {
if (item.title.indexOf("在线") > -1 || item.title.indexOf("离线") > -1) {
imeiArr.push(item.id);
};
let children = item.children;
if (children) {
children.forEach((cont, i, arr) => {
if (cont.title.indexOf("在线") > -1 || cont.title.indexOf("离线") > -1) {
imeiArr.push(cont.id);
};
});
};
});
num_device = imeiArr.length; //设备数量
if (num_device > 0) {
imeis = imeiArr.join(',');
steps.next('formStepsStep'); //进入下一步
} else {
return notice.msg('请选择设备', { icon: 2, timeout: 2000 });
};
return false;
});
/* 表单3提交事件 */
form.on('submit(formStepSubmit3)', function (data) {
let field = {}, field_zuhe = {};
$.extend(field_zuhe, field_first, field_second); //合并两个不同的对象
$.extend(field, field_zuhe, data.field); //合并两个不同的对象
// console.log(field)
//向任务总表添加任务
$.ajax({
url: setter.baseServer,
data: {
service: "App.Task_Total.UpdateData",
module_param: JSON.stringify(field),
task_num: num_device,
module_name: field.module_name,
module_group_id: field.module_group_id,
imeis: imeis,
mode: field.mode,
start_time: field.start_time,
// device_way: field.device_way,
// device_numbers: field.device_numbers,
// device_groups: device_groups,
// device_models: device_models,
remarks: field.remarks,
state: '1',
access_token: setter.getToken().access_token,
},
method: 'POST', //请求方式
crossDomain: true,
complete: function (result, status, xhr) {
result = JSON.parse(result.response || result.responseText); //反Json化
if (result.ret == 200) {
steps.next('formStepsStep');
let taskMode = ''; //任务执行模式
switch (field.mode) {
case '0':
taskMode = '<span class="layui-badge layui-badge-green">即时</span>';
break;
case '1':
taskMode = '<span class="layui-badge layui-badge-blue">排队</span>';
break;
case '2':
taskMode = '<span class="layui-badge layui-badge-yellow">定时</span>';
break;
};
var tr = $(['<table class="layui-table">'
, '<colgroup>'
, '<col width="150">'
, '<col>'
, '</colgroup>'
, '<tbody>'
, '<tr>'
, '<td>任务ID</td>'
, '<td>' + result.data.id + '</td>'
, '</tr>'
, '<tr>'
, '<td>执行模式</td>'
, '<td>' + taskMode + '</td>'
, '</tr>'
, '<tr>'
, '<td>脚本分组</td>'
, '<td>' + mUser.group_name + '</td>'
, '</tr>'
, '<tr>'
, '<td>脚本名称</td>'
, '<td>' + mUser.module_name + '</td>'
, '</tr>'
, '<tr>'
, '<td>下发数量</td>'
, '<td>' + num_device + '</td>'
, '</tr>'
, '<tr>'
, '<td>任务备注</td>'
, '<td>' + field.remarks + '</td>'
, '</tr>'
, '<tr>'
, '<td>创建时间</td>'
, '<td>' + result.data.add_time + '</td>'
, '</tr>'
, '</tbody>'
, '</table>'].join(''));
$('#tableList').removeClass("layui-hide").append(tr);
} else {
notice.msg(result.msg, { icon: 2, timeout: 2000 });
};
},
});
return false;
});
//完成
$('.end').click(function () {
layer.closeAll();
});
//查询设备树
$.ajax({
url: setter.baseServer,
data: {
service: "App.Device_Device.GetTreeData",
access_token: setter.getToken().access_token,
},
method: 'POST', //请求方式
crossDomain: true,
complete: function (result, status, xhr) {
//反Json化-将数据转换为 JavaScript 对象
result = JSON.parse(result.response || result.responseText);
// console.log(result)
if (result.ret === 200) {
//开启复选框
tree.render({
elem: '#deviceTree'
, data: result.data
, showCheckbox: true
, id: 'demoId' //定义索引
});
}
},
});
var mUser = admin.getLayerData('#formStepForm1').tableData; // 列表页面传递的数据
var ws = admin.getLayerData('#formStepForm1').ws;
form.val('formStepForm1', mUser); // 回显数据——这里一定要用formX.val，form.val不能回显跨iframe的数据
//读取上次保存的脚本配置
let reg = /.*\/(([^\/]+)(\/[^\/]+){1}\.[^\.]+)$/;
let key = mUser.path.replace(reg, "$1").replace('.html', ''); //任务编辑页面路径中的文件名，不带.html后缀
let localStorage = admin.getTempData(key, true); //读取表单数据
if (localStorage) {
form.val('formStepForm1', localStorage); // 回显数据——这里一定要用formX.val，form.val不能回显跨iframe的数据
$("input[name='module_url']").val(mUser.module_url); //重置脚本地址
//设置复选框状态
$("#formStepForm1 input[type='checkbox']").each(function () {
let name = $(this).attr('name');
$(this).prop('checked', localStorage[name] === 'on' ? true : false);
});
// //设置选择框状态
// $("#formStepForm1 select").each(function(){
// let name = $(this).attr('name');
// $(this).val(localStorage[name]);
// form.render('select');
// });
};
form.render();
//日期时间选择器
laydate.render({
elem: '#start_time'
, type: 'datetime'
});
});
</script>
```
这是通用的脚本任务编辑页面模版。
别看代码量比较多，其实很多地方都是固定的，不需要改动。
新开发脚本时，直接套用这个模版。
着重编写分布表单中，id为formStepForm1的form里的脚本运行参数即可。
其他部分基本不用改动。
以新增的这个脚本为例，我们只需要在html模版的第一个form中，添加如下代码即可
```html
<div class="layui-form-item">
<label class="layui-form-label">浏览数量</label>
<div class="layui-input-inline little-input">
<input type="number" name="watch_num" value="3" placeholder="" autocomplete="off"
class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">个<i class="fa fa-fw fa-lg fa-question-circle-o"
lay-tips="本次任务总共浏览的作品数量" style="margin-left: 10px;"></i></div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">浏览</label>
<div class="layui-input-inline little-input">
<input type="number" name="watch_min" value="3" placeholder="" autocomplete="off"
class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">-</div>
<div class="layui-input-inline little-input">
<input type="number" name="watch_max" value="5" placeholder="" autocomplete="off"
class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">秒</div>
</div>
```
这是控制脚本运行的最重要参数。