升级：1、增加界面夜间模式
2、qtask 功能交互升级
3、mysql连接管理增加心跳保活
4、其他修改
This commit is contained in:
@@ -1,9 +1,43 @@
|
||||
<style>
|
||||
.edit {
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
thead {
|
||||
text-align: center;
|
||||
/*th {
|
||||
background-color: #c3deff;
|
||||
}*/
|
||||
}
|
||||
th {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
input,textarea,select {
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
/*border-left: 2px!important;*/
|
||||
border-bottom: 0;
|
||||
/*background-color: #DDF3F5;*/
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
.tpl-debug>pre{
|
||||
background-color: #F1F1F1;
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<row class="qtask-list">
|
||||
<div class="col-md-12">
|
||||
<h3 v-text="cfg.title"></h3>
|
||||
<button @click="openDia({'x':1})" class="btn btn-primary" type="button"> 添加QTask</button>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 ">
|
||||
|
||||
<div class="col-md-4">
|
||||
<!--<div class="col-md-2" style="padding-left: 0">
|
||||
<div class="input-group">
|
||||
<span class="input-group-btn">
|
||||
@@ -16,13 +50,16 @@
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<div class="input-group pull-right">
|
||||
<!--<div class="input-group pull-right">
|
||||
<button @click="openDia({})" class="btn btn-primary" type="button"> 添加QTask</button>
|
||||
<!--<button @click="openDia({})" class="btn btn-primary" type="button" style="margin-left: 5px"> 添加QTask</button>-->
|
||||
</div>
|
||||
<!–<button @click="openDia({})" class="btn btn-primary" type="button" style="margin-left: 5px"> 添加QTask</button>–>
|
||||
</div>-->
|
||||
</div>
|
||||
<div class="col-md-12" style="padding-top: 10px;overflow:auto;">
|
||||
<table class="table table-bordered table-hover" style="width: 100%">
|
||||
<div class="clearfix"></div>
|
||||
|
||||
<div class="col-md-5" style="padding-top: 10px;overflow:auto;">
|
||||
<ul id="treeDemo" class="ztree" style="display: none"></ul>
|
||||
<table class="table table-bordered table-hover" style="width: 100%; ">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="field in cfg.cols" v-text="field.label"></th>
|
||||
@@ -30,12 +67,14 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="row in list.rows">
|
||||
<tr v-for="row in list.rows" @click="openDia(row)">
|
||||
<td v-for="field in cfg.cols" v-title="row[field.col]" v-text="row[field.col]"></td>
|
||||
<td>
|
||||
<a @click="openDia(row)" href="javascript:;">编辑</a>|
|
||||
<a @click="openDia(row)" href="javascript:;">编辑</a> |
|
||||
<!--
|
||||
<a @click="row['status']=1;qsave(row);" v-show="row.status != 1" href="javascript:;">启用</a>
|
||||
<a @click="row['status']=0;qsave(row);" v-show="row.status == 1" href="javascript:;">不启用</a> |
|
||||
-->
|
||||
<a @click="row['status']=-1;comfirmDel(row);" href="javascript:;">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -46,8 +85,116 @@
|
||||
<img src="../res/img/none.png">
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div>
|
||||
<ul class="pager pull-right" style="margin: 1px 0">
|
||||
|
||||
<li class="previous">
|
||||
<a >共{{list.total}}条数据</a>
|
||||
</li>
|
||||
<li :class="['previous', {'disabled':limit.pn==1}]">
|
||||
<a @click="loadList(-- limit.pn)" href="javascript:;">«上一页</a>
|
||||
</li>
|
||||
<li :class="['next', {'disabled':limit.pn >= limit.total}]">
|
||||
<a @click="loadList(limit.pn = ++limit.pn )" href="javascript:;">»下一页</a>
|
||||
</li>
|
||||
|
||||
<li class="previous">
|
||||
<a>到第<input v-model="limit.pn" style="width: 30px;height: 20px;margin: 0">/ {{limit.total}}页</a>
|
||||
</li>
|
||||
<li class="previous">
|
||||
<a @click="loadList(limit.pn)" href="javascript:;">确定</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-7 edit">
|
||||
<table v-show="editStatus==1" class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="4"><h5>【任务编辑】</h5></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<th style="width: 120px">任务名称</th>
|
||||
<td>
|
||||
<input v-model="row.title" class="form-control">
|
||||
</td>
|
||||
<th style="width: 120px">任务KEY</th>
|
||||
<td>
|
||||
<input v-model="row.name" class="form-control">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>数据平台</th>
|
||||
<td>
|
||||
<select v-model="row.dbplatid" class="form-control">
|
||||
<option v-for="item in dbPlats" :value="item.key" v-text="item.name"></option>
|
||||
</select>
|
||||
</td>
|
||||
<th>CataLog</th>
|
||||
<td>
|
||||
<select v-model="row.catalog" class="form-control">
|
||||
<option v-for="item in catalogs()" :value="item" v-text="item"></option>
|
||||
</select>
|
||||
</td>
|
||||
<!--<td colspan="3">
|
||||
<div class="col-xs-6" style="padding: 0;">
|
||||
<select v-model="row.dbplatid" class="form-control" style="background-color: #f2f4f9">
|
||||
<option></option>
|
||||
<option v-for="item in dbPlats" :value="item.key" v-text="item.name"></option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<select v-model="row.catalog" class="form-control" style="background-color: #f2f4f9">
|
||||
<option></option>
|
||||
<option v-for="item in catalogs()" :value="item" v-text="item"></option>
|
||||
</select>
|
||||
</div>
|
||||
</td>-->
|
||||
</tr>
|
||||
<tr>
|
||||
<th>执行模板</th>
|
||||
<td colspan="3" class="tpl-content">
|
||||
<textarea v-model="row.content" @change="parsePara(row)" rows="6" class="pre-scrollable form-control"></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>默认参数</th>
|
||||
<td colspan="3" class="tpl-para">
|
||||
<textarea rows="1" v-model="row.para" class="form-control"></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>备注</th>
|
||||
<td colspan="3" class="tpl-remark">
|
||||
<textarea rows="1" v-model="row.remark" class="form-control"></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
|
||||
<div class="pull-right">
|
||||
<button @click="debug()" type="button" class="btn btn-primary" style="margin-right: 20px">调试</button>
|
||||
<button @click="openDia({})" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
|
||||
<button @click="reset(row.name)" type="button" class="btn btn-default" data-dismiss="modal">重置</button>
|
||||
<button @click="save()" type="button" class="btn btn-primary">保存</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>调试结果</th>
|
||||
<td colspan="3" class="tpl-debug"><pre class="pre-scrollable">{{debugRet}}</pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div v-show="editStatus!=1" style="text-align: center">
|
||||
<img src="../res/img/none.png">
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- modal-tpl -->
|
||||
<div class="col-md-12">
|
||||
<!-- 对话框触发按钮 -->
|
||||
@@ -70,7 +217,7 @@
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 required">任务标识码</label>
|
||||
<div class="col-md-6 col-sm-10">
|
||||
<input v-model="row.name" :readonly="row.key" class="form-control" placeholder="请输入 任务标识码">
|
||||
<input v-model="row.name" :disabled="row.qtaskid" :readonly="row.key" class="form-control" placeholder="请输入 任务标识码">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" style="margin-bottom: 0">
|
||||
@@ -87,13 +234,13 @@
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="para" class="col-sm-2 required">数据平台</label>
|
||||
<div class="col-md-6">
|
||||
<select v-model="row.dbPlatId" class="form-control">
|
||||
<div class="col-xs-6">
|
||||
<select v-model="row.dbplatid" class="form-control">
|
||||
<option></option>
|
||||
<option v-for="item in dbPlats" :value="item.key" v-text="item.name"></option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="col-xs-4">
|
||||
<select v-model="row.catalog" class="form-control">
|
||||
<option></option>
|
||||
<option v-for="item in catalogs()" :value="item" v-text="item"></option>
|
||||
@@ -126,7 +273,7 @@
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
|
||||
<button @click="save()" type="button" class="btn btn-primary">确定</button>
|
||||
<button @click="del()" type="button" class="btn btn-primary">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -134,9 +281,21 @@
|
||||
</row>
|
||||
<script src="http://www.1216.top/res/layui/layui.js"></script>
|
||||
<script>
|
||||
let {qtaskList,qtaskSave} = qtask
|
||||
//let {qtaskList, qtaskSave, qtaskDelete} = qtask
|
||||
let {dbList} = plat
|
||||
|
||||
function beforeDrag(treeId, treeNodes) {
|
||||
for (var i=0,l=treeNodes.length; i<l; i++) {
|
||||
if (treeNodes[i].drag === false) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
function beforeDrop(treeId, treeNodes, targetNode, moveType) {
|
||||
return targetNode ? targetNode.drop !== false : true;
|
||||
}
|
||||
|
||||
var vm = new Vue({
|
||||
el: ".qtask-list",
|
||||
data: {
|
||||
@@ -152,56 +311,151 @@
|
||||
cates: ["find","update"]
|
||||
},
|
||||
list: {rows:[], total: 0},
|
||||
row: {},
|
||||
limit: {pn: 1, ps: 20, total: 0},
|
||||
row: {name:"",content:"", remark:"", para:"", x:""},
|
||||
_row: {name:"",content:"", remark:""},
|
||||
dbPlats: [],
|
||||
sysPlats: [{name: "工控系统"}]
|
||||
sysPlats: [{name: "工控系统"}],
|
||||
editStatus: 0,
|
||||
debugRet:"",
|
||||
|
||||
// ZTree
|
||||
setting : {
|
||||
edit: {
|
||||
enable: true,
|
||||
showRemoveBtn: false,
|
||||
showRenameBtn: false
|
||||
},
|
||||
data: {
|
||||
simpleData: {
|
||||
enable: true
|
||||
}
|
||||
},
|
||||
callback: {
|
||||
beforeDrag: beforeDrag,
|
||||
beforeDrop: beforeDrop
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
loadList: function () {
|
||||
qtaskList().then(res => {
|
||||
let list = res
|
||||
this.list = list
|
||||
})
|
||||
},
|
||||
openDia: function (row) {
|
||||
vm.row = row;
|
||||
$('#myModal').modal({moveable: true});
|
||||
if (this.dbPlats.length == 0) {
|
||||
row: function (row) {
|
||||
if (row.name || row.x) {
|
||||
vm.editStatus = 1
|
||||
} else {
|
||||
vm.editStatus = 0
|
||||
}
|
||||
if (this.dbPlats.length === 0) {
|
||||
dbList().then(res => {
|
||||
this.dbPlats = res.rows;
|
||||
})
|
||||
}
|
||||
this.debugRet = ""
|
||||
$(".tpl-content>textarea").attr("rows", this.countLines(row.content))
|
||||
$(".tpl-remark>textarea").attr("rows", this.countLines(row.remark, 2, 5))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadList: function (pn = 1) {
|
||||
let limit = this.limit.ps
|
||||
let offset = (pn - 1) * limit
|
||||
qtask.qtaskList({flipper: {offset, limit}}).then(res => {
|
||||
this.list = res
|
||||
|
||||
let zNodes = [
|
||||
{id: 1, pId: 0, name: "qtask 任务", open: true},
|
||||
/*{id: 11, pId: 1, name: "随意拖拽 1-1"},
|
||||
{id: 12, pId: 1, name: "随意拖拽 1-2", open: true},*/
|
||||
];
|
||||
for (let i in res.rows) {
|
||||
let row = res.rows[i]
|
||||
zNodes.push({id: row.qtaskid, pId: "1", name: row.title + '-(' + row.name+')'})
|
||||
}
|
||||
|
||||
$.fn.zTree.init($("#treeDemo"), this.setting, zNodes);
|
||||
this.limit.total = Math.ceil(this.list.total / limit)
|
||||
})
|
||||
},
|
||||
openDia: function (row) {
|
||||
vm.row = red.deepClone(row);
|
||||
vm._row = red.deepClone(row);
|
||||
vm.editStatus = 1
|
||||
/*$('#myModal').modal({moveable: true});
|
||||
if (this.dbPlats.length === 0) {
|
||||
dbList().then(res => {
|
||||
this.dbPlats = res.rows;
|
||||
})
|
||||
}*/
|
||||
this.parsePara(row)
|
||||
},
|
||||
save() {
|
||||
qtaskSave({task:this.row}).then(res => {
|
||||
qtask.qtaskSave(this.row).then(res => {
|
||||
red.showOk()
|
||||
this.loadList()
|
||||
$('#myModal').modal('hide')
|
||||
this.row = {}
|
||||
red.wait(1000).then(() => {
|
||||
this.loadList()
|
||||
this.row = {}
|
||||
$('#myModal').modal('hide')
|
||||
})
|
||||
})
|
||||
},
|
||||
dealStatus: function (n) {
|
||||
var arr = {"0":"未启用", "1":"启用", "-1":"删除",}
|
||||
|
||||
return arr[n+""] || "";
|
||||
},
|
||||
comfirmDel: function (row) {
|
||||
vm.row = row;
|
||||
$('#mySmModal').modal({});
|
||||
},
|
||||
del: function () {
|
||||
qtask.qtaskDelete(this.row.qtaskid).then(res => {
|
||||
$('#mySmModal').modal('hide')
|
||||
this.loadList()
|
||||
})
|
||||
},
|
||||
abc: function () {
|
||||
$(".container-fixed").load("abc.html");
|
||||
},
|
||||
catalogs: function () {
|
||||
let dbPlats = this.dbPlats;
|
||||
for (i in dbPlats) {
|
||||
if (dbPlats[i].key == this.row.dbPlatId) {
|
||||
if (dbPlats[i].key === this.row.dbplatid) {
|
||||
return dbPlats[i]["catalogs"]
|
||||
}
|
||||
}
|
||||
},
|
||||
debug: function () {
|
||||
qtask.qtaskDebug({task: this.row}).then(res => {
|
||||
this.debugRet = "";
|
||||
this.debugRet = res;
|
||||
red.showOk("查询成功")
|
||||
})
|
||||
},
|
||||
countLines: function (text='', min=3, max=15) {
|
||||
// 计算"\n"和"\r\n"两种换行符的数量
|
||||
let line = (text.match(/\n/g) || []).length + (text.match(/\r\n/g) || []).length + 1
|
||||
if (line < 3) {
|
||||
line = min;
|
||||
}
|
||||
if (line > 15) {
|
||||
line = max;
|
||||
}
|
||||
return line; // 最后+1是因为可能末尾没有换行符，但仍然算一行
|
||||
},
|
||||
reset: function () {
|
||||
this.row = red.deepClone(vm._row)
|
||||
},
|
||||
parsePara(row) {
|
||||
let sql = row.content || ''
|
||||
let pattern = /#\((.*?)\)/g; // 创建一个正则表达式来查找 "#()" 内的任何内容
|
||||
let match;
|
||||
|
||||
let para = JSON.parse(row.para)
|
||||
let _para = {}
|
||||
while ((match = pattern.exec(sql)) !== null) {
|
||||
// console.log("提取的变量:", match[1]); // match[1] 存储的是第一个括号内捕获的内容
|
||||
_para[match[1]] = para[match[1]] || ''
|
||||
}
|
||||
|
||||
this.row.para = JSON.stringify(_para)
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
|
||||
Reference in New Issue
Block a user