first commit
This commit is contained in:
izory
+151
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row>
|
||||
<el-col :span="24" class="card-box">
|
||||
<el-card>
|
||||
<div slot="header"><span>基本信息</span></div>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<table cellspacing="0" style="width: 100%">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><div class="cell">Redis版本</div></td>
|
||||
<td><div class="cell" v-if="cache.info">{{ cache.info.redis_version }}</div></td>
|
||||
<td><div class="cell">运行模式</div></td>
|
||||
<td><div class="cell" v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</div></td>
|
||||
<td><div class="cell">端口</div></td>
|
||||
<td><div class="cell" v-if="cache.info">{{ cache.info.tcp_port }}</div></td>
|
||||
<td><div class="cell">客户端数</div></td>
|
||||
<td><div class="cell" v-if="cache.info">{{ cache.info.connected_clients }}</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="cell">运行时间(天)</div></td>
|
||||
<td><div class="cell" v-if="cache.info">{{ cache.info.uptime_in_days }}</div></td>
|
||||
<td><div class="cell">使用内存</div></td>
|
||||
<td><div class="cell" v-if="cache.info">{{ cache.info.used_memory_human }}</div></td>
|
||||
<td><div class="cell">使用CPU</div></td>
|
||||
<td><div class="cell" v-if="cache.info">{{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}</div></td>
|
||||
<td><div class="cell">内存配置</div></td>
|
||||
<td><div class="cell" v-if="cache.info">{{ cache.info.maxmemory_human }}</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="cell">AOF是否开启</div></td>
|
||||
<td><div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div></td>
|
||||
<td><div class="cell">RDB是否成功</div></td>
|
||||
<td><div class="cell" v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</div></td>
|
||||
<td><div class="cell">Key数量</div></td>
|
||||
<td><div class="cell" v-if="cache.dbSize">{{ cache.dbSize }} </div></td>
|
||||
<td><div class="cell">网络入口/出口</div></td>
|
||||
<td><div class="cell" v-if="cache.info">{{ cache.info.instantaneous_input_kbps }}kps/{{cache.info.instantaneous_output_kbps}}kps</div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="card-box">
|
||||
<el-card>
|
||||
<div slot="header"><span>命令统计</span></div>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<div ref="commandstats" style="height: 420px" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="card-box">
|
||||
<el-card>
|
||||
<div slot="header">
|
||||
<span>内存信息</span>
|
||||
</div>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<div ref="usedmemory" style="height: 420px" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCache } from "@/api/monitor/cache";
|
||||
// import echarts from "echarts";
|
||||
|
||||
export default {
|
||||
name: "Server",
|
||||
data() {
|
||||
return {
|
||||
// 加载层信息
|
||||
loading: [],
|
||||
// 统计命令信息
|
||||
commandstats: null,
|
||||
// 使用内存
|
||||
usedmemory: null,
|
||||
// cache信息
|
||||
cache: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.openLoading();
|
||||
},
|
||||
methods: {
|
||||
/** 查缓存询信息 */
|
||||
getList() {
|
||||
getCache().then((response) => {
|
||||
this.cache = response.data;
|
||||
this.loading.close();
|
||||
|
||||
this.commandstats = echarts.init(this.$refs.commandstats, "macarons");
|
||||
this.commandstats.setOption({
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "命令",
|
||||
type: "pie",
|
||||
roseType: "radius",
|
||||
radius: [15, 95],
|
||||
center: ["50%", "38%"],
|
||||
data: response.data.commandStats,
|
||||
animationEasing: "cubicInOut",
|
||||
animationDuration: 1000,
|
||||
},
|
||||
],
|
||||
});
|
||||
this.usedmemory = echarts.init(this.$refs.usedmemory, "macarons");
|
||||
this.usedmemory.setOption({
|
||||
tooltip: {
|
||||
formatter: "{b} <br/>{a} : {c}M",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "峰值",
|
||||
type: "gauge",
|
||||
detail: {
|
||||
formatter: "{value}M",
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: parseFloat(this.cache.info.used_memory_human),
|
||||
name: "内存消耗",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
},
|
||||
// 打开加载层
|
||||
openLoading() {
|
||||
this.loading = this.$loading({
|
||||
lock: true,
|
||||
text: "拼命读取中",
|
||||
spinner: "el-icon-loading",
|
||||
background: "rgba(0, 0, 0, 0.7)",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,464 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row v-if="searchToggle" :gutter="20">
|
||||
<el-col>
|
||||
<el-form :inline="true" @submit.native.prevent>
|
||||
<el-form-item>
|
||||
<el-input v-model="queryParams.queryText" placeholder="请输入计划任务名称" clearable prefix-icon="el-icon-search" @keyup.enter.native="handleQuery" @clear="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="mb8" :gutter="20">
|
||||
<el-col :span="1.5">
|
||||
<el-button v-hasPermi="['system:task:add']" plain type="primary" icon="el-icon-plus" size="mini" @click="handleCreate">新增</el-button>
|
||||
</el-col>
|
||||
<!-- <el-col :span="1.5">
|
||||
<el-button v-hasPermi="['PRIV_TASKS_UPDATE']" plain type="success" icon="el-icon-edit" size="mini" @click="handleRun(null)" :disabled="single">运行一次</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button v-hasPermi="['system:task:delete']" plain type="danger" icon="el-icon-remove" size="mini" @click="handleDelete(null)" :disabled="single">删除</el-button>
|
||||
</el-col>-->
|
||||
<el-col :span="1.5">
|
||||
<el-button type="info" icon="el-icon-s-operation" size="mini" @click="handleJobLog({id: 1})">日志</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="searchToggle" @queryTable="handleQuery"></right-toolbar>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-table ref="tasks" v-loading="loading" :data="dataTasks" border="" row-key="id" :height="tableHeight*0.65" @sort-change="handleSortable" @selection-change="handleSelectionChange">
|
||||
<!-- <el-table-column type="selection" width="55" align="center" /> -->
|
||||
<el-table-column type="index" :index="handleIndexCalc" label="#" align="center" />
|
||||
<el-table-column prop="name" :show-overflow-tooltip="true" label="任务名称" />
|
||||
<el-table-column prop="jobGroup" :show-overflow-tooltip="true" align="center" label="任务分组" />
|
||||
<el-table-column prop="assemblyName" align="center" label="程序集名称" :show-overflow-tooltip="true" />
|
||||
<el-table-column prop="className" align="center" label="任务类名" :show-overflow-tooltip="true" />
|
||||
<!-- <el-table-column prop="runTimes" align="center" label="执行次数" width="120" /> -->
|
||||
<el-table-column prop="cron" align="center" label="运行表达式" />
|
||||
<el-table-column sortable prop="isStart" align="center" label="状态" width="90">
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="mini" :type="scope.row.isStart ? 'success' : 'danger'" disable-transitions>{{ scope.row.isStart ? "运行中":"已停止" }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
|
||||
<el-button type="text" size="mini" icon="el-icon-view">
|
||||
<router-link :to="{path: '/job/log', query: {jobId: scope.row.id}}">日志</router-link>
|
||||
</el-button>
|
||||
|
||||
<el-button type="text" v-if="scope.row.isStart" v-hasPermi="['system:task:run']" size="mini" icon="el-icon-remove" title="运行" @click="handleRun(scope.row)">运行</el-button>
|
||||
<el-button type="text" v-if="scope.row.isStart" v-hasPermi="['system:task:stop']" size="mini" icon="el-icon-video-pause" style="color:red" title="停止" @click="handleStop(scope.row)">停止</el-button>
|
||||
|
||||
<el-button type="text" v-if="!scope.row.isStart" v-hasPermi="['system:task:start']" size="mini" icon="el-icon-video-play" title="启动" @click="handleStart(scope.row)">启动</el-button>
|
||||
<el-button type="text" v-if="!scope.row.isStart" v-hasPermi="['system:task:edit']" size="mini" icon="el-icon-edit" style="color:gray" title="编辑" @click="handleUpdate(scope.row)">编辑</el-button>
|
||||
<el-button type="text" v-if="!scope.row.isStart" v-hasPermi="['system:task:delete']" size="mini" icon="el-icon-delete" style="color:red" title="删除" @click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination :total="total" :page.sync="queryParams.PageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
|
||||
</el-row>
|
||||
|
||||
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body @close="cancel">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="任务ID">
|
||||
<div>{{form.id}}</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="任务名称" maxlength="200" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入任务名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="触发器类型" prop="triggerType">
|
||||
<el-select v-model="form.triggerType" placeholder="请选择触发器类型" style="width:100%">
|
||||
<el-option v-for="item in triggerTypeOptions" :key="item.value" :label="item.label" :value="parseInt(item.value)" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="任务分组" maxlength="200" prop="jobGroup">
|
||||
<el-select v-model="form.jobGroup" placeholder="请选择">
|
||||
<el-option v-for="dict in jobGroupOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="任务状态">
|
||||
<el-tag>{{form.isStart? "运行中":"已停止" }}</el-tag>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="程序集名称" maxlength="200" prop="assemblyName">
|
||||
<el-input v-model="form.assemblyName" placeholder="请输入程序集名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="任务类名" maxlength="200" prop="className">
|
||||
<el-input v-model="form.className" placeholder="请输入任务类名" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="传入参数" prop="jobParams">
|
||||
<el-input v-model="form.jobParams" placeholder="传入参数" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-form-item v-show="form.triggerType == 1" label="间隔(Cron)" prop="cron">
|
||||
<el-input v-model="form.cron" placeholder="如10分钟执行一次：0/0 0/10 * * * ?" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label-width="20px">
|
||||
<el-link href="https://cron.qqe2.com/" type="primary" target="_blank" class="mr10">cyon在线生成</el-link>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item v-show="form.triggerType == 0" label="开始日期" prop="beginTime">
|
||||
<el-date-picker v-model="form.beginTime" style="width:100%" type="date" placeholder="选择开始日期" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item v-show="form.triggerType == 0" label="结束日期" prop="endTime">
|
||||
<el-date-picker v-model="form.endTime" style="width:100%" type="date" placeholder="选择结束日期" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item v-show="form.triggerType == 0" label="执行间隔(单位:秒)" prop="intervalSecond">
|
||||
<el-input-number v-model="form.intervalSecond" :max="9999999999" step-strictly controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="open = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
queryTasks,
|
||||
createTasks,
|
||||
updateTasks,
|
||||
deleteTasks,
|
||||
startTasks,
|
||||
stopTasks,
|
||||
runTasks,
|
||||
} from "@/api/monitor/job";
|
||||
export default {
|
||||
name: "tasks",
|
||||
data() {
|
||||
var cronValidate = (rule, value, callback) => {
|
||||
if (this.form.triggerType === 1) {
|
||||
if (value === "" || value === undefined) {
|
||||
callback(new Error("运行时间表达式不能为空!"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
var beginTimeValidate = (rule, value, callback) => {
|
||||
if (this.form.triggerType === 0) {
|
||||
if (value === "" || value === undefined) {
|
||||
callback(new Error("选择开始日期!"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
var endTimeValidate = (rule, value, callback) => {
|
||||
if (this.form.triggerType === 0) {
|
||||
if (value === "" || value === undefined) {
|
||||
callback(new Error("选择结束日期!"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
var intervalSecondValidate = (rule, value, callback) => {
|
||||
if (this.form.triggerType === 0) {
|
||||
if (value === "" || value === undefined) {
|
||||
callback(new Error("请设置执行间隔!"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 表单
|
||||
form: {},
|
||||
// 表单标题
|
||||
title: "",
|
||||
// 显示搜索
|
||||
searchToggle: true,
|
||||
// 表格高度
|
||||
tableHeight: window.innerHeight,
|
||||
// 合计条数
|
||||
total: 0,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
queryText: undefined,
|
||||
PageNum: 1,
|
||||
pageSize: 10,
|
||||
orderby: "createTime",
|
||||
sort: "descending",
|
||||
},
|
||||
// 计划任务列表
|
||||
dataTasks: [],
|
||||
//任务组名字典
|
||||
jobGroupOptions: [],
|
||||
// 触发器类型
|
||||
triggerTypeOptions: [
|
||||
// {
|
||||
// label: 'Simple / [普通]',
|
||||
// value: 0
|
||||
// },
|
||||
{
|
||||
label: "Cron / [表达式]",
|
||||
value: 1,
|
||||
},
|
||||
],
|
||||
// 表单校验
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: "任务名称不能为空", trigger: "blur" },
|
||||
],
|
||||
jobGroup: [
|
||||
{ required: true, message: "任务分组不能为空", trigger: "blur" },
|
||||
],
|
||||
assemblyName: [
|
||||
{ required: true, message: "程序集名称不能为空", trigger: "blur" },
|
||||
],
|
||||
className: [
|
||||
{ required: true, message: "任务类名不能为空", trigger: "blur" },
|
||||
],
|
||||
triggerType: [
|
||||
{ required: true, message: "请选择触发器类型", trigger: "blur" },
|
||||
],
|
||||
cron: [{ validator: cronValidate, trigger: "blur" }],
|
||||
beginTime: [{ validator: beginTimeValidate, trigger: "blur" }],
|
||||
endTime: [{ validator: endTimeValidate, trigger: "blur" }],
|
||||
intervalSecond: [
|
||||
{
|
||||
validator: intervalSecondValidate,
|
||||
type: "number",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
|
||||
this.getDicts("sys_job_group").then((response) => {
|
||||
this.jobGroupOptions = response.data;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
/** 查询计划任务列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
queryTasks(this.queryParams).then((response) => {
|
||||
this.dataTasks = response.data.result;
|
||||
this.total = response.data.totalCount;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleQuery() {
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
handleReset() {
|
||||
this.queryParams.queryText = "";
|
||||
this.getList();
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleCreate() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加计划任务";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
|
||||
this.form = row;
|
||||
this.open = true;
|
||||
this.title = "修改计划任务";
|
||||
},
|
||||
/** 任务日志列表查询 */
|
||||
handleJobLog(param) {
|
||||
this.$router.push({ path: "/job/log", params: param });
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
console.log(selection);
|
||||
this.ids = selection; // selection.map(item => item.id);
|
||||
this.single = selection.length != 1;
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
// 启动按钮
|
||||
handleStart(row) {
|
||||
startTasks(row.id).then((response) => {
|
||||
if (response.code === 200) {
|
||||
this.$message({
|
||||
message: response.msg,
|
||||
type: "success",
|
||||
});
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 停止按钮
|
||||
handleStop(row) {
|
||||
stopTasks(row.id).then((response) => {
|
||||
if (response.code === 200) {
|
||||
this.$message({
|
||||
message: response.msg,
|
||||
type: "success",
|
||||
});
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const jobInfo = row;
|
||||
|
||||
this.$confirm(
|
||||
'是否确认删除名称为"' + jobInfo.name + '"的计划任务?',
|
||||
"警告",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
deleteTasks(jobInfo.id).then((response) => {
|
||||
if (response.code === 200) {
|
||||
this.getList();
|
||||
this.$message({
|
||||
message: "删除成功",
|
||||
type: "success",
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(function () {});
|
||||
},
|
||||
/* 立即执行一次 */
|
||||
handleRun(row) {
|
||||
const jobInfo = row;
|
||||
|
||||
this.$confirm('确认要立即执行一次"' + jobInfo.name + '"任务吗?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then((res) => {
|
||||
runTasks(jobInfo.id).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message({
|
||||
message: "执行成功",
|
||||
type: "success",
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function () {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.form.id !== undefined) {
|
||||
updateTasks(this.form).then((response) => {
|
||||
if (response.code === 200) {
|
||||
this.$message({
|
||||
message: "修改成功",
|
||||
type: "success",
|
||||
});
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
createTasks(this.form).then((response) => {
|
||||
if (response.code === 200) {
|
||||
this.$message({
|
||||
message: "新增成功",
|
||||
type: "success",
|
||||
});
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 排序操作
|
||||
handleSortable(val) {
|
||||
this.queryParams.orderby = val.prop;
|
||||
this.queryParams.sort = val.order;
|
||||
this.getList();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
jobGroup: undefined,
|
||||
assemblyName: undefined,
|
||||
className: undefined,
|
||||
jobParams: undefined,
|
||||
triggerType: 1,
|
||||
beginTime: undefined,
|
||||
endTime: undefined,
|
||||
intervalSecond: 1,
|
||||
};
|
||||
},
|
||||
// 自动计算分页 Id
|
||||
handleIndexCalc(index) {
|
||||
return (
|
||||
(this.queryParams.PageNum - 1) * this.queryParams.pageSize + index + 1
|
||||
);
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
this.getList();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="任务名称" prop="jobName">
|
||||
<el-input v-model="queryParams.jobName" placeholder="请输入任务名称" clearable size="small" style="width: 240px" @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="任务组名" prop="jobGroup">
|
||||
<el-select v-model="queryParams.jobGroup" placeholder="请任务组名" clearable size="small" style="width: 240px">
|
||||
<el-option v-for="dict in jobGroupOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="执行状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择执行状态" clearable size="small" style="width: 240px">
|
||||
<el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="执行时间">
|
||||
<el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['PRIV_JOBLOG_DELETE']">删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" icon="el-icon-delete" size="mini" @click="handleClean" v-hasPermi="['PRIV_JOBLOG_REMOVE']">清空</el-button>
|
||||
</el-col>
|
||||
<!-- <el-col :span="1.5">
|
||||
<el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['monitor:job:export']">导出</el-button>
|
||||
</el-col> -->
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="jobLogList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="日志编号" width="80" align="center" prop="jobLogId" />
|
||||
<el-table-column label="任务名称" align="center" prop="jobName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="任务组名" align="center" prop="jobGroup" :formatter="jobGroupFormat" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="调用目标字符串" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="日志信息" align="center" prop="jobMessage" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="执行状态" align="center" prop="status" :formatter="statusFormat" />
|
||||
<el-table-column label="作业用时" align="center" prop="elapsed" >
|
||||
<template slot-scope="scope">
|
||||
<span :style="scope.row.elapsed < 1000 ? 'color:green':scope.row.elapsed <3000 ?'color:orange':'color:red'">{{ scope.row.elapsed }} ms</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="执行时间" align="center" prop="createTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">详细</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
|
||||
|
||||
<!-- 调度日志详细 -->
|
||||
<el-dialog title="调度日志详细" :visible.sync="open" width="700px" append-to-body>
|
||||
<el-form ref="form" :model="form" label-width="100px" size="mini">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="日志序号：">{{ form.jobLogId }}</el-form-item>
|
||||
<el-form-item label="任务名称：">{{ form.jobName }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="任务分组：">{{ form.jobGroup }}</el-form-item>
|
||||
<el-form-item label="执行时间：">{{ form.createTime }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="调用方法：">{{ form.invokeTarget }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="日志信息：">{{ form.jobMessage }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="执行状态：">
|
||||
<div v-if="form.status == 0">正常</div>
|
||||
<div v-else-if="form.status == 1">失败</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="异常信息：" v-if="form.status == 1">{{ form.exceptionInfo }}</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="open = false">关 闭</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
listJobLog,
|
||||
delJobLog,
|
||||
exportJobLog,
|
||||
cleanJobLog,
|
||||
} from "@/api/monitor/jobLog";
|
||||
|
||||
export default {
|
||||
name: "JobLog",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 调度日志表格数据
|
||||
jobLogList: [],
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 日期范围
|
||||
dateRange: [],
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 执行状态字典
|
||||
statusOptions: [],
|
||||
// 任务组名字典
|
||||
jobGroupOptions: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
jobName: undefined,
|
||||
jobGroup: undefined,
|
||||
status: undefined,
|
||||
jobId: undefined
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.queryParams.jobId = this.$route.query.jobId;
|
||||
this.getList();
|
||||
this.getDicts("sys_job_status").then((response) => {
|
||||
this.statusOptions = response.data;
|
||||
});
|
||||
this.getDicts("sys_job_group").then((response) => {
|
||||
this.jobGroupOptions = response.data;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
/** 查询调度日志列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listJobLog(this.addDateRange(this.queryParams, this.dateRange)).then(
|
||||
(response) => {
|
||||
this.jobLogList = response.data.result;
|
||||
this.total = response.data.totalCount;
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
},
|
||||
// 执行状态字典翻译
|
||||
statusFormat(row, column) {
|
||||
return this.selectDictLabel(this.statusOptions, row.status);
|
||||
},
|
||||
// 任务组名字典翻译
|
||||
jobGroupFormat(row, column) {
|
||||
return this.selectDictLabel(this.jobGroupOptions, row.jobGroup);
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.dateRange = [];
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map((item) => item.jobLogId);
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
/** 详细按钮操作 */
|
||||
handleView(row) {
|
||||
this.open = true;
|
||||
this.form = row;
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const jobLogIds = this.ids;
|
||||
this.$confirm(
|
||||
'是否确认删除调度日志编号为"' + jobLogIds + '"的数据项?',
|
||||
"警告",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}
|
||||
)
|
||||
.then(function () {
|
||||
return delJobLog(jobLogIds);
|
||||
})
|
||||
.then(() => {
|
||||
this.getList();
|
||||
this.msgSuccess("删除成功");
|
||||
});
|
||||
},
|
||||
/** 清空按钮操作 */
|
||||
handleClean() {
|
||||
this.$confirm("是否确认清空所有调度日志数据项?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(function () {
|
||||
return cleanJobLog();
|
||||
})
|
||||
.then(() => {
|
||||
this.getList();
|
||||
this.msgSuccess("清空成功");
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.queryParams;
|
||||
this.$confirm("是否确认导出所有调度日志数据项?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(function () {
|
||||
return exportJobLog(queryParams);
|
||||
})
|
||||
.then((response) => {
|
||||
this.download(response.msg);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="登录地址" prop="ipaddr">
|
||||
<el-input v-model="queryParams.ipaddr" placeholder="请输入登录地址" clearable style="width: 240px;" size="small" @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px;" size="small" @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="登录状态" clearable size="small" style="width: 240px">
|
||||
<el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录时间">
|
||||
<el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:logininfor:remove']">删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleClean" v-hasPermi="['monitor:logininfor:remove']">清空</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="访问编号" align="center" prop="infoId" />
|
||||
<el-table-column label="用户名称" align="center" prop="userName" />
|
||||
<el-table-column label="登录地址" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="浏览器" align="center" prop="browser" />
|
||||
<el-table-column label="操作系统" align="center" prop="os" />
|
||||
<el-table-column label="登录状态" align="center" prop="status" :formatter="statusFormat" />
|
||||
<el-table-column label="操作信息" align="center" prop="msg" />
|
||||
<el-table-column label="登录日期" align="center" prop="loginTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.loginTime }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
list,
|
||||
delLogininfor,
|
||||
cleanLogininfor,
|
||||
exportLogininfor,
|
||||
} from "@/api/monitor/logininfor";
|
||||
|
||||
export default {
|
||||
name: "Logininfor",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 表格数据
|
||||
list: [],
|
||||
// 状态数据字典
|
||||
statusOptions: [],
|
||||
// 日期范围
|
||||
dateRange: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
ipaddr: undefined,
|
||||
userName: undefined,
|
||||
status: undefined,
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getDicts("sys_common_status").then((response) => {
|
||||
this.statusOptions = response.data;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
/** 查询登录日志列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
list(this.addDateRange(this.queryParams, this.dateRange)).then(
|
||||
(response) => {
|
||||
this.loading = false;
|
||||
if (response.code == 200) {
|
||||
this.list = response.data.result;
|
||||
this.total = response.data.totalNum;
|
||||
} else {
|
||||
this.total = 0;
|
||||
this.list = [];
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
// 登录状态字典翻译
|
||||
statusFormat(row, column) {
|
||||
return this.selectDictLabel(this.statusOptions, row.status);
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.dateRange = [];
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map((item) => item.infoId);
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const infoIds = row.infoId || this.ids;
|
||||
this.$confirm(
|
||||
'是否确认删除访问编号为"' + infoIds + '"的数据项?',
|
||||
"警告",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}
|
||||
)
|
||||
.then(function () {
|
||||
return delLogininfor(infoIds);
|
||||
})
|
||||
.then(() => {
|
||||
this.getList();
|
||||
this.msgSuccess("删除成功");
|
||||
});
|
||||
},
|
||||
/** 清空按钮操作 */
|
||||
handleClean() {
|
||||
this.$confirm("是否确认清空所有登录日志数据项?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(function () {
|
||||
return cleanLogininfor();
|
||||
})
|
||||
.then(() => {
|
||||
this.getList();
|
||||
this.msgSuccess("清空成功");
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.queryParams;
|
||||
this.$confirm("是否确认导出所有操作日志数据项?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(function () {
|
||||
return exportLogininfor(queryParams);
|
||||
})
|
||||
.then((response) => {
|
||||
this.download(response.msg);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
|
||||
<el-form-item label="登录地址" prop="ipaddr">
|
||||
<el-input
|
||||
v-model="queryParams.ipaddr"
|
||||
placeholder="请输入登录地址"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input
|
||||
v-model="queryParams.userName"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="list.slice((pageNum-1)*pageSize,pageNum*pageSize)"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<el-table-column label="序号" type="index" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="会话编号" align="center" prop="tokenId" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="登录名称" align="center" prop="userName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="部门名称" align="center" prop="deptName" />
|
||||
<el-table-column label="主机" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="浏览器" align="center" prop="browser" />
|
||||
<el-table-column label="操作系统" align="center" prop="os" />
|
||||
<el-table-column label="登录时间" align="center" prop="loginTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.loginTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleForceLogout(scope.row)"
|
||||
v-hasPermi="['monitor:online:forceLogout']"
|
||||
>强退</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { list, forceLogout } from "@/api/monitor/online";
|
||||
|
||||
export default {
|
||||
name: "Online",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 表格数据
|
||||
list: [],
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
ipaddr: undefined,
|
||||
userName: undefined
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询登录日志列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
list(this.queryParams).then(response => {
|
||||
this.list = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 强退按钮操作 */
|
||||
handleForceLogout(row) {
|
||||
this.$confirm('是否确认强退名称为"' + row.userName + '"的数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
return forceLogout(row.tokenId);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.msgSuccess("强退成功");
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="系统模块" prop="title">
|
||||
<el-input v-model="queryParams.title" placeholder="请输入系统模块" clearable style="width: 200px;" size="small" @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="操作人员" prop="operName">
|
||||
<el-input v-model="queryParams.operName" placeholder="请输入操作人员" clearable style="width: 160px;" size="small" @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="businessType">
|
||||
<el-select v-model="queryParams.businessType" placeholder="操作类型" clearable size="small" style="width: 240px">
|
||||
<el-option v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="操作状态" clearable size="small" style="width: 240px">
|
||||
<el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作时间">
|
||||
<!-- <el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> -->
|
||||
<date-range-picker v-model="dateRange" class="date-item" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:operlog:remove']">删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleClean" v-hasPermi="['monitor:operlog:remove']">清空</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="30" align="center" />
|
||||
<el-table-column label="日志编号" align="center" prop="operId" />
|
||||
<el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true"/>
|
||||
<!-- <el-table-column label="操作类型" align="center" prop="businessType" :formatter="typeFormat" /> -->
|
||||
<el-table-column label="请求方式" align="center" prop="requestMethod" />
|
||||
<el-table-column label="操作人员" align="center" prop="operName" />
|
||||
<el-table-column label="主机" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="操作地点" align="center" prop="operLocation" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="操作状态" align="center" prop="status" :formatter="statusFormat" />
|
||||
<el-table-column label="用时" align="center" prop="elapsed">
|
||||
<template slot-scope="scope">
|
||||
<span :style="scope.row.elapsed < 1000 ? 'color:green':scope.row.elapsed <3000 ?'color:orange':'color:red'">{{ scope.row.elapsed }} ms</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="日志内容" align="center" prop="errorMsg" :show-overflow-tooltip="true"/>
|
||||
<el-table-column label="操作日期" align="center" prop="operTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.operTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row,scope.index)" v-hasPermi="['monitor:operlog:query']">详细</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
|
||||
|
||||
<!-- 操作日志详细 -->
|
||||
<el-dialog title="操作日志详细" :visible.sync="open" width="700px" append-to-body>
|
||||
<el-form ref="form" :model="form" label-width="100px" size="mini">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="操作模块：">{{ form.title }} </el-form-item>
|
||||
<el-form-item label="登录信息：">{{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="请求地址：">{{ form.operUrl }}</el-form-item>
|
||||
<el-form-item label="请求方式：">{{ form.requestMethod }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="操作方法：">{{ form.method }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="操作类型：">{{ typeFormat(form) }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="请求参数：">{{ form.operParam }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="返回结果：">
|
||||
{{ form.jsonResult }}
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="操作状态：">
|
||||
<div v-if="form.status === 0">正常</div>
|
||||
<div v-else-if="form.status === 1">失败</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="操作时间：">{{ parseTime(form.operTime) }}</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="异常信息：" v-if="form.status === 1">{{ form.errorMsg }}</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="open = false">关 闭</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
list,
|
||||
delOperlog,
|
||||
cleanOperlog,
|
||||
exportOperlog,
|
||||
} from "@/api/monitor/operlog";
|
||||
import template from "../../../../document/template.vue";
|
||||
import DateRangePicker from '@/components/DateRangePicker'
|
||||
|
||||
export default {
|
||||
components: { template ,DateRangePicker},
|
||||
name: "Operlog",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 表格数据
|
||||
list: [],
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 类型数据字典
|
||||
typeOptions: [],
|
||||
// 类型数据字典
|
||||
statusOptions: [],
|
||||
// 日期范围
|
||||
dateRange: [],
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
title: undefined,
|
||||
operName: undefined,
|
||||
businessType: undefined,
|
||||
status: undefined,
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.getDicts("sys_oper_type").then((response) => {
|
||||
this.typeOptions = response.data;
|
||||
});
|
||||
this.getDicts("sys_common_status").then((response) => {
|
||||
this.statusOptions = response.data;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
/** 查询登录日志 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
list(this.addDateRange(this.queryParams, this.dateRange)).then(
|
||||
(response) => {
|
||||
this.loading = false;
|
||||
if (response.code == 200) {
|
||||
this.list = response.data.result;
|
||||
this.total = response.data.totalNum;
|
||||
} else {
|
||||
this.total = 0;
|
||||
this.list = [];
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
// 操作日志状态字典翻译
|
||||
statusFormat(row, column) {
|
||||
return this.selectDictLabel(this.statusOptions, row.status);
|
||||
},
|
||||
// 操作日志类型字典翻译
|
||||
typeFormat(row, column) {
|
||||
return this.selectDictLabel(this.typeOptions, row.businessType);
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.dateRange = [];
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map((item) => item.operId);
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
/** 详细按钮操作 */
|
||||
handleView(row) {
|
||||
this.open = true;
|
||||
this.form = row;
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const operIds = row.operId || this.ids;
|
||||
this.$confirm(
|
||||
'是否确认删除日志编号为"' + operIds + '"的数据项?',
|
||||
"警告",
|
||||
{
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}
|
||||
)
|
||||
.then(function () {
|
||||
return delOperlog(operIds);
|
||||
})
|
||||
.then(() => {
|
||||
this.getList();
|
||||
this.msgSuccess("删除成功");
|
||||
});
|
||||
},
|
||||
/** 清空按钮操作 */
|
||||
handleClean() {
|
||||
this.$confirm("是否确认清空所有操作日志数据项?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(function () {
|
||||
return cleanOperlog();
|
||||
})
|
||||
.then(() => {
|
||||
this.getList();
|
||||
this.msgSuccess("清空成功");
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
const queryParams = this.queryParams;
|
||||
this.$confirm("是否确认导出所有操作日志数据项?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(function () {
|
||||
return exportOperlog(queryParams);
|
||||
})
|
||||
.then((response) => {
|
||||
this.download(response.msg);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,340 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row>
|
||||
<el-col :span="12" class="card-box">
|
||||
<el-card>
|
||||
<div slot="header"><span>CPU</span></div>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<table cellspacing="0" style="width: 100%;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="is-leaf">
|
||||
<div class="cell">属性</div>
|
||||
</th>
|
||||
<th class="is-leaf">
|
||||
<div class="cell">值</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell">核心数</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell" v-if="server.sys">{{ server.sys.cpuNum }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- <tr>
|
||||
<td><div class="cell">用户使用率</div></td>
|
||||
<td><div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div></td>
|
||||
</tr> -->
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell">cpu使用率</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell" v-if="server.cpu">{{ server.cpu.cpuRate }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="card-box">
|
||||
<el-card>
|
||||
<div slot="header"><span>内存</span></div>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<table cellspacing="0" style="width: 100%;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="is-leaf">
|
||||
<div class="cell">属性</div>
|
||||
</th>
|
||||
<th class="is-leaf">
|
||||
<div class="cell">内存</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell">总内存</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell" v-if="server.cpu">{{ server.cpu.totalRAM }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell">内存使用率</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell" v-if="server.cpu">{{ server.cpu.ramRate}}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- <tr>
|
||||
<td><div class="cell">运行时间</div></td>
|
||||
<td><div class="cell" v-if="server.cpu">{{ server.cpu.runTime }}</div></td>
|
||||
</tr> -->
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" class="card-box">
|
||||
<el-card>
|
||||
<div slot="header">
|
||||
<span>服务器信息</span>
|
||||
</div>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<table cellspacing="0" style="width: 100%;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell">服务器名称</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell" v-if="server.sys">{{ server.sys.computerName }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">操作系统</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell" v-if="server.sys">{{ server.sys.osName }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell">服务器IP</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell" v-if="server.sys">{{ server.sys.serverIP }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">系统架构</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell" v-if="server.sys">{{ server.sys.osArch }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell">系统运行时长</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell" v-if="server.cpu">{{ server.cpu.runTime }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" class="card-box">
|
||||
<el-card>
|
||||
<div slot="header">
|
||||
<span>.NET Core信息</span>
|
||||
</div>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<table cellspacing="0" style="width: 100%;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell">环境变量</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell" v-if="server.app">{{ server.app.name }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">.NetCore版本</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell" v-if="server.app">{{ server.app.version }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell">启动时间</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell" v-if="server.app">{{ server.app.startTime }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">运行时长</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell" v-if="server.app">{{ server.app.runTime }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell">占用内存</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell" v-if="server.app">{{ server.app.appRAM }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">启动地址</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell" v-if="server.app">{{server.app.host}}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="cell">ContentRootPath</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell" v-if="server.app">{{ server.app.rootPath }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">webPath</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell" v-if="server.app">{{ server.app.webRootPath }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<!--
|
||||
<el-col :span="24" class="card-box">
|
||||
<el-card>
|
||||
<div slot="header">
|
||||
<span>磁盘状态</span>
|
||||
</div>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<table cellspacing="0" style="width: 100%;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="is-leaf">
|
||||
<div class="cell">盘符路径</div>
|
||||
</th>
|
||||
<th class="is-leaf">
|
||||
<div class="cell">文件系统</div>
|
||||
</th>
|
||||
<th class="is-leaf">
|
||||
<div class="cell">盘符类型</div>
|
||||
</th>
|
||||
<th class="is-leaf">
|
||||
<div class="cell">总大小</div>
|
||||
</th>
|
||||
<th class="is-leaf">
|
||||
<div class="cell">可用大小</div>
|
||||
</th>
|
||||
<th class="is-leaf">
|
||||
<div class="cell">已用大小</div>
|
||||
</th>
|
||||
<th class="is-leaf">
|
||||
<div class="cell">已用百分比</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody v-if="server.sysFiles">
|
||||
<tr v-for="sysFile in server.sysFiles">
|
||||
<td>
|
||||
<div class="cell">{{ sysFile.dirName }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">{{ sysFile.sysTypeName }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">{{ sysFile.typeName }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">{{ sysFile.total }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">{{ sysFile.free }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell">{{ sysFile.used }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="cell" :class="{'text-danger': sysFile.usage > 80}">{{ sysFile.usage }}%</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getServer } from "@/api/monitor/server";
|
||||
|
||||
export default {
|
||||
name: "Server",
|
||||
data() {
|
||||
return {
|
||||
// 加载层信息
|
||||
loading: [],
|
||||
// 服务器信息
|
||||
server: [],
|
||||
intervalId: null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.openLoading();
|
||||
this.dataRefreh();
|
||||
},
|
||||
methods: {
|
||||
/** 查询服务器信息 */
|
||||
getList() {
|
||||
getServer()
|
||||
.then((response) => {
|
||||
this.server = response.data;
|
||||
this.loading.close();
|
||||
})
|
||||
.catch((err) => {
|
||||
this.loading.close();
|
||||
});
|
||||
},
|
||||
// 打开加载层
|
||||
openLoading() {
|
||||
this.loading = this.$loading({
|
||||
lock: true,
|
||||
text: "拼命读取中",
|
||||
spinner: "el-icon-loading",
|
||||
background: "rgba(0, 0, 0, 0.7)",
|
||||
});
|
||||
},
|
||||
dataRefreh() {
|
||||
if (this.intervalId != null) {
|
||||
return;
|
||||
}
|
||||
this.intervalId = setInterval(() => {
|
||||
this.getList();
|
||||
}, 5000);
|
||||
},
|
||||
/**
|
||||
* 停止定时器
|
||||
*/
|
||||
clear() {
|
||||
clearInterval(this.intervalId);
|
||||
this.intervalId = null;
|
||||
},
|
||||
},
|
||||
destroyed() {
|
||||
this.clear();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user