<!DOCTYPE html>
|
<html xmlns:th="http://www.thymeleaf.org">
|
<head>
|
<meta charset="utf-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<title>任务首页</title>
|
<meta name="author" content="小柒2012" />
|
<meta name="site" content="https://blog.52itstyle.com" />
|
<link rel="stylesheet" th:href="@{/iview/iview.css}">
|
<script th:src="@{/libs/jquery-3.2.1.min.js}" type="text/javascript"></script>
|
<script th:src="@{/libs/vue.min.js}" type="text/javascript"></script>
|
<script th:src="@{/layer/layer.js}" type="text/javascript"></script>
|
<script th:src="@{/iview/iview.min.js}" type="text/javascript"></script>
|
<script th:src="@{/common.js}" type="text/javascript"></script>
|
<style type="text/css">
|
[v-cloak] {
|
display: none;
|
}
|
</style>
|
</head>
|
<body>
|
<div id="app" v-cloak>
|
<div style="margin-bottom: 6px;margin: 30px">
|
<i-input v-model="content" placeholder="数据分发日志" style="width: 300px"></i-input>
|
<i-button type="primary" @click="search()" icon="ios-search">搜索</i-button>
|
<i-button type="primary" @click="empty()" icon="ios-close-empty">清空</i-button>
|
</div>
|
<div style="margin-bottom: 6px;margin: 30px">
|
<template>
|
<i-table border :content="self" :columns="tableTitle" :data="JobData"></i-table>
|
<br>
|
<Page style="float: right;" :current="pageNo" :total="tableSize" :page-size="pageSize" @on-change="changePage" @on-page-size-change="changePageSize" show-elevator show-sizer show-total></Page>
|
</template>
|
</div>
|
</div>
|
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
|
<script type="text/javascript">
|
var vm = new Vue({
|
el : '#app',
|
data : {
|
content : '',
|
pageNo : 1,
|
pageSize : 10,
|
jobName : "",
|
JobData : [],
|
tableSize : 50,
|
tableTitle:[ {
|
key : "interfaceName",
|
title : "分发接口名称"
|
}, {
|
key : "url",
|
title : "分发地址"
|
}, {
|
key : "createTime",
|
title : "发送时间"
|
}/*, {
|
key : "prams",
|
title : "请求参数"
|
}*/, {
|
key : "result",
|
title : "响应结果"
|
},{
|
title : '操作',
|
key : 'action',
|
width : 300,
|
align : 'left',
|
render : function(h, params) {
|
var functionList = [];
|
//查看
|
var show = h('Button', {
|
props : {
|
type : 'primary',
|
size : 'small',
|
icon : 'edit'
|
},
|
style : {
|
marginRight : '8px'
|
},
|
on : {
|
click : function() {
|
vm.show(params.row);
|
}
|
}
|
}, '查看');
|
functionList.push(show);
|
// 返回方法集合
|
return h('div', functionList);
|
}
|
}]
|
|
},
|
methods : {
|
//搜索
|
search : function(){
|
$.ajax({
|
url:"../interface/list",
|
type:"post",
|
data:{'sysName':this.content,"pageNo":this.pageNo,'pageSize':this.pageSize},
|
success: function(result) {
|
|
}
|
});
|
},
|
empty : function(){
|
vm.content = '';
|
this.list();
|
},
|
//任务列表(自行实现分页)
|
list : function() {
|
$.ajax({
|
url:"../interface/list",
|
type:"post",
|
data:{'time':(new Date()).toString(),"pageNo":this.pageNo,'pageSize':this.pageSize},
|
success: function(result) {
|
vm.JobData = result.msg.pageData;
|
vm.tableSize = result.msg.totalCount;
|
}
|
});
|
},
|
show : function(log){
|
dialogOpen({
|
title: '查看',
|
url: 'log/showLog.shtml',
|
scroll : true,
|
width: '1200px',
|
height: '800px',
|
success : function(iframeId){
|
top.frames[iframeId].vm.formQuartz=log;
|
const params = Process(log.prams);
|
const result = Process(log.result);
|
top.frames[iframeId].document.getElementById("fromParam").innerHTML = params;
|
top.frames[iframeId].document.getElementById("fromResule").innerHTML = result;
|
},
|
});
|
},
|
reload : function(){
|
this.load();
|
},
|
changePage : function(pageNo) {
|
vm.pageNo = pageNo;
|
vm.load();
|
},
|
changePageSize : function(pageSize) {
|
vm.pageSize = pageSize;
|
vm.load();
|
}
|
},
|
created : function() {
|
this.list();
|
}
|
})
|
|
//格式化代码函数,已经用原生方式写好了不需要改动,直接引用就好
|
function formatJson(json, options) {
|
var reg = null,
|
formatted = '',
|
pad = 0,
|
PADDING = ' ';
|
options = options || {};
|
options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
|
options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;
|
if (typeof json !== 'string') {
|
json = JSON.stringify(json);
|
} else {
|
json = JSON.parse(json);
|
json = JSON.stringify(json);
|
}
|
reg = /([\{\}])/g;
|
json = json.replace(reg, '\r\n$1\r\n');
|
reg = /([\[\]])/g;
|
json = json.replace(reg, '\r\n$1\r\n');
|
reg = /(\,)/g;
|
json = json.replace(reg, '$1\r\n');
|
reg = /(\r\n\r\n)/g;
|
json = json.replace(reg, '\r\n');
|
reg = /\r\n\,/g;
|
json = json.replace(reg, ',');
|
if (!options.newlineAfterColonIfBeforeBraceOrBracket) {
|
reg = /\:\r\n\{/g;
|
json = json.replace(reg, ':{');
|
reg = /\:\r\n\[/g;
|
json = json.replace(reg, ':[');
|
}
|
if (options.spaceAfterColon) {
|
reg = /\:/g;
|
json = json.replace(reg, ':');
|
}
|
(json.split('\r\n')).forEach(function (node, index) {
|
//console.log(node);
|
var i = 0,
|
indent = 0,
|
padding = '';
|
|
if (node.match(/\{$/) || node.match(/\[$/)) {
|
indent = 1;
|
} else if (node.match(/\}/) || node.match(/\]/)) {
|
if (pad !== 0) {
|
pad -= 1;
|
}
|
} else {
|
indent = 0;
|
}
|
|
for (i = 0; i < pad; i++) {
|
padding += PADDING;
|
}
|
|
formatted += padding + node + '\r\n';
|
pad += indent;
|
});
|
return formatted;
|
};
|
//引用示例部分
|
//(1)创建json格式或者从后台拿到对应的json格式
|
//var originalJson = {"name": "binginsist", "sex": "男", "age": "25"};
|
//下面用一个真实的json数据做测试
|
//var originalJson = {
|
// "_errmsg":"ok",
|
// "result":[
|
// ],
|
// "stat":"wechat",
|
// "_token":"",
|
// "weixinId":"900504",
|
// "_errcode":"0",
|
// "regionId":"00000000"
|
//}
|
//
|
//(2)调用formatJson函数,将json格式进行格式化
|
//var resultJson = formatJson(originalJson);
|
//将格式化好后的json写入页面中
|
//document.getElementById("writePlace").innerHTML = '<pre>' +resultJson + '<pre/>';
|
|
//着色
|
function IsArray(obj) {
|
return obj &&
|
typeof obj === 'object' && typeof obj.length === 'number' && !(obj.propertyIsEnumerable('length'));
|
}
|
function Process(params) {
|
var json = params;
|
var html = "";
|
try {
|
if (json == "") {
|
json = '""';
|
}
|
var obj = eval("[" + json + "]");
|
html = ProcessObject(obj[0], 0, false, false, false);
|
return html;
|
} catch(e) {
|
}
|
}
|
function ProcessObject(obj, indent, addComma, isArray, isPropertyContent) {
|
var html = "";
|
var comma = (addComma) ? "<span class='Comma'>,</span> ": "";
|
var type = typeof obj;
|
if (IsArray(obj)) {
|
if (obj.length == 0) {
|
html += GetRow(indent, "<span class='ArrayBrace'>[ ]</span>" + comma, isPropertyContent);
|
} else {
|
html += GetRow(indent, "<span class='ArrayBrace'>[</span>", isPropertyContent);
|
for (var i = 0; i < obj.length; i++) {
|
html += ProcessObject(obj[i], indent + 1, i < (obj.length - 1), true, false);
|
}
|
html += GetRow(indent, "<span class='ArrayBrace'>]</span>" + comma);
|
}
|
} else {
|
if (type == "object" && obj == null) {
|
html += FormatLiteral("null", "", comma, indent, isArray, "Null");
|
} else {
|
if (type == "object") {
|
var numProps = 0;
|
for (var prop in obj) {
|
numProps++;
|
}
|
if (numProps == 0) {
|
html += GetRow(indent, "<span class='ObjectBrace'>{ }</span>" + comma, isPropertyContent)
|
} else {
|
html += GetRow(indent, "<span class='ObjectBrace'>{</span>", isPropertyContent);
|
var j = 0;
|
for (var prop in obj) {
|
html += GetRow(indent + 1, '<span class="PropertyName">"' + prop + '"</span>: ' + ProcessObject(obj[prop], indent + 1, ++j < numProps, false, true))
|
}
|
html += GetRow(indent, "<span class='ObjectBrace'>}</span>" + comma);
|
}
|
} else {
|
if (type == "number") {
|
html += FormatLiteral(obj, "", comma, indent, isArray, "Number");
|
} else {
|
if (type == "boolean") {
|
html += FormatLiteral(obj, "", comma, indent, isArray, "Boolean");
|
} else {
|
if (type == "function") {
|
obj = FormatFunction(indent, obj);
|
html += FormatLiteral(obj, "", comma, indent, isArray, "Function");
|
} else {
|
if (type == "undefined") {
|
html += FormatLiteral("undefined", "", comma, indent, isArray, "Null");
|
} else {
|
html += FormatLiteral(obj, '"', comma, indent, isArray, "String");
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
return html;
|
};
|
|
function FormatLiteral(literal, quote, comma, indent, isArray, style) {
|
if (typeof literal == "string") {
|
literal = literal.split("<").join("<").split(">").join(">");
|
}
|
var str = "<span class='" + style + "'>" + quote + literal + quote + comma + "</span>";
|
if (isArray) {
|
str = GetRow(indent, str);
|
}
|
return str;
|
}
|
function FormatFunction(indent, obj) {
|
var tabs = "";
|
for (var i = 0; i < indent; i++) {
|
tabs += " ";
|
}
|
var funcStrArray = obj.toString().split("\n");
|
var str = "";
|
for (var i = 0; i < funcStrArray.length; i++) {
|
str += ((i == 0) ? "": tabs) + funcStrArray[i] + "\n";
|
}
|
return str;
|
}
|
function GetRow(indent, data, isPropertyContent) {
|
var tabs = "";
|
for (var i = 0; i < indent && !isPropertyContent; i++) {
|
tabs += " ";
|
}
|
if (data != null && data.length > 0 && data.charAt(data.length - 1) != "\n") {
|
data = data + "\n";
|
}
|
return tabs + data;
|
};
|
</script>
|
</body>
|
</html>
|
