<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="utf-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="renderer" content="webkit">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<link rel="icon" href="favicon.ico">
|
<title>xxx系统</title>
|
|
<link rel="stylesheet" href="css/main.css" />
|
|
<link rel="stylesheet" href="js/lib/element-plus/index.css" />
|
<script src="js/lib/vue.global.js"></script>
|
<script src="js/lib/element-plus/element-plus.js"></script>
|
<script src="js/lib/element-plus/icons-vue.js"></script>
|
|
<script src="js/lib/axios.min.js"></script>
|
<script src="js/lib/httpVueLoader.js"></script>
|
|
<style>#app-job-record{padding:10px;}</style>
|
</head>
|
<body>
|
<div id="app-job-record">
|
<div id="loader-wrapper" v-if="loading">
|
<div id="loader"></div>
|
<div class="loader-section section-left"></div>
|
<div class="loader-section section-right"></div>
|
<div class="load_title">正在加载系统资源，请耐心等待</div>
|
</div>
|
|
<el-form :model="queryParams" :inline="true">
|
<el-form-item label="执行结果" prop="listStatus">
|
<el-select
|
v-model="queryParams.listStatus"
|
multiple
|
placeholder="请选择"
|
style="width: 240px"
|
>
|
<el-option label="成功" value="200"></el-option>
|
<el-option label="失败" value="300"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="任务执行时间">
|
<el-date-picker
|
v-model="dateRangeExecuteTime"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
type="daterange"
|
range-separator="-"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
:default-time="[
|
new Date(2000, 1, 1, 0, 0, 0),
|
new Date(2000, 1, 1, 23, 59, 59),
|
]"
|
></el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<el-table
|
:stripe="true"
|
:border="true"
|
:data="dataList"
|
@selection-change="handleSelectionChange"
|
@row-dblclick="handleDetail"
|
>
|
<el-table-column label="执行时间" min-width="155" align="center" prop="startTimeView"></el-table-column>
|
<el-table-column label="任务编号" min-width="175" align="center" prop="taskNo"></el-table-column>
|
<el-table-column label="任务名称" min-width="300" align="center" prop="taskName"></el-table-column>
|
<el-table-column label="执行参数" min-width="175" align="center" prop="executeParameter"></el-table-column>
|
<el-table-column label="执行完成时间" min-width="155" align="center" prop="endTimeView"></el-table-column>
|
<el-table-column label="执行耗时(ms)" min-width="150" align="center" prop="executeTimes">
|
<template #default="scope">
|
{{ scope.row.executeTimes }}
|
{{ showExecuteTimes(scope.row.executeTimes) }}
|
</template>
|
</el-table-column>
|
<el-table-column label="任务状态" min-width="80" align="center" prop="taskStatusView"></el-table-column>
|
<el-table-column label="执行结果" min-width="80" align="center" prop="failReason" :show-overflow-tooltip="true"></el-table-column>
|
<el-table-column
|
label="操作"
|
align="center"
|
min-width="90"
|
fixed="right"
|
class-name="small-padding fixed-width"
|
>
|
<template #default="scope">
|
<el-button
|
link
|
type="primary"
|
v-if="scope.row.taskStatus === 300"
|
@click="handleDetail(scope.row)"
|
>错误信息</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 修改对话框 -->
|
<el-dialog
|
title="错误信息"
|
v-model="dialogOpenModify"
|
width="80%"
|
append-to-body
|
>
|
<div style="white-space: pre-wrap;">
|
{{ formModify.errorValue }}
|
</div>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="cancelModify">关闭</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
|
<el-pagination
|
v-if="total > 0"
|
:background="tabConfig.background"
|
:hide-on-single-page="tabConfig.hideOnSinglePage"
|
:page-sizes="tabConfig.listPageSize"
|
:total="total"
|
v-model:current-page="queryParams.page"
|
v-model:page-size="queryParams.limit"
|
@change ="getList"
|
/>
|
</div>
|
|
<script type="module">
|
function queryURLParams(url, paramName) {
|
let parameterStr = url.split("?")[1];
|
const urlSearchParams = new URLSearchParams(parameterStr);
|
const params = Object.fromEntries(urlSearchParams.entries());
|
|
if (!paramName) {
|
// 没有传入参数名称, 返回含有所有参数的对象params
|
return params;
|
} else {
|
if (params[paramName]) {
|
return params[paramName];
|
} else {
|
return '';
|
}
|
}
|
}
|
|
import { EState } from "/js/enums.js"
|
|
const { createApp, ref, onMounted, h } = Vue
|
const loading = ref(true)
|
|
const Http = axios.create({
|
baseURL: location.pathname.substr(0, location.pathname.lastIndexOf('/')),
|
timeout: 1000,
|
headers: {'X-Custom-Header': 'foobar'}
|
});
|
const $message = ElementPlus.ElMessage;
|
const $confirm = ElementPlus.ElMessageBox;
|
|
var app = Vue.createApp({
|
el: '#app-job-record',
|
props: {
|
taskNo: String
|
},
|
data() {
|
return {
|
ddd: true
|
}
|
},
|
methods: {
|
funcA() {
|
console.log(this.ddd);
|
this.$message('这是一条普通info消息');
|
this.$message.success('恭喜你，这是一条成功消息');
|
this.$message.warning('警告哦，这是一条警告消息');
|
this.$message.error('错了哦，这是一条错误消息');
|
this.$message({
|
message: h('p', { style: 'line-height: 1; font-size: 14px' }, [
|
h('span', null, '这是一条自定义样式的消息 '),
|
h('i', { style: 'color: teal' }, 'VNode'),
|
])
|
});
|
}
|
},
|
|
mounted: () => {
|
//$message('这是一条普通info消息');
|
},
|
|
setup() {
|
const tabConfig = ref({
|
background: true,
|
hideOnSinglePage: true,
|
listPageSize: [20, 50, 100, 200]
|
});
|
|
const listEState = EState.enums;
|
const getEStateLabel = (value) => {
|
return EState.getLabelByValue(value)
|
}
|
const loading = ref(false);
|
const dataList = ref([]);
|
|
const modifyLoading = ref(false);
|
const dialogOpenModify = ref(false);
|
|
const total = ref(0);
|
const dateRangeExecuteTime = ref([]);
|
const ids = ref([]);
|
const single = ref(true);
|
const multiple = ref(true);
|
|
const queryParams = ref({
|
page: 1,
|
limit: 10,
|
listStatus: [],
|
taskNo: queryURLParams(location.href, 'taskNo'),
|
executeTimeRange: ''
|
});
|
|
const formModify = ref({});
|
|
/** 查询列表 */
|
function getList() {
|
loading.value = true;
|
if (
|
dateRangeExecuteTime &&
|
dateRangeExecuteTime.value &&
|
dateRangeExecuteTime.value[0]
|
) {
|
queryParams.value.executeTimeRange = dateRangeExecuteTime.value.join(" ~ ");
|
}
|
Http.post('/quartz/taskRecords', queryParams.value)
|
.then((response) => {
|
let data = response.data.data;
|
dataList.value = data.list;
|
total.value = data.total;
|
loading.value = false;
|
});
|
}
|
/** 搜索按钮操作 */
|
function handleQuery() {
|
queryParams.value.page = 1;
|
getList();
|
}
|
/** 重置按钮操作 */
|
function resetQuery() {
|
dateRangeCreateTime.value = [];
|
dateRangeJoinTime.value = [];
|
handleQuery();
|
}
|
/** 选择条数 */
|
function handleSelectionChange(selection) {
|
ids.value = selection.map((item) => item.id);
|
single.value = selection.length != 1;
|
multiple.value = !selection.length;
|
}
|
|
|
|
/** 详情按钮 */
|
function handleDetail(row) {
|
modifyLoading.value = true;
|
resetModify();
|
const id = row.id || ids.value[0];
|
|
Http.get('/quartz/taskErrors/' + row.id)
|
.then((response) => {
|
let data = response.data.data;
|
formModify.value = data;
|
if (formModify.value) {
|
dialogOpenModify.value = true;
|
} else {
|
$message.warning("没有更多信息");
|
}
|
}).finally(() => {
|
modifyLoading.value = false;
|
})
|
}
|
/** 编辑表单重置 */
|
function resetModify() {
|
formModify.value = {
|
id: undefined,
|
taskName: undefined,
|
schedulerRule: undefined,
|
executor: undefined,
|
sendType: undefined,
|
url: undefined,
|
executeParameter: undefined,
|
};
|
}
|
/** 取消编辑按钮 */
|
function cancelModify() {
|
dialogOpenModify.value = false;
|
resetModify();
|
}
|
|
function showExecuteTimes(times) {
|
let str = (times / 1000) + '';
|
if (str.indexOf('.') > -1) {
|
str = str.substring(0, str.indexOf('.') + 2);
|
}
|
return '(' + str + 's)';
|
}
|
|
onMounted(() => {
|
loading.value = false
|
getList()
|
})
|
return {
|
tabConfig,
|
listEState,
|
getEStateLabel,
|
loading,
|
dataList,
|
modifyLoading,
|
dialogOpenModify,
|
total,
|
dateRangeExecuteTime,
|
ids,
|
single,
|
multiple,
|
queryParams,
|
formModify,
|
getList,
|
handleQuery,
|
resetQuery,
|
handleSelectionChange,
|
handleDetail,
|
resetModify,
|
cancelModify,
|
showExecuteTimes
|
}
|
}
|
})
|
app.use(ElementPlus)
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
app.component(key, component)
|
}
|
app.mount("#app-job-record")
|
</script>
|
</body>
|
</html>
|
