<script setup name="threadManage">
|
import { ref, onMounted, reactive, computed, watchEffect } from "vue";
|
import useWebSocket from "@/hooks/useWebsocket.js";
|
import formatSeconds from '@/utils/formatSeconds';
|
|
import useElement from "@/hooks/useElement.js";
|
|
import {
|
updateFlag,
|
judgeRestart,
|
paramSetting,
|
} from '@/api/system.js';
|
|
const { $loading, $message, $confirm } = useElement();
|
const { sendData, message: listMessage } = useWebSocket("processSurvey");
|
const dialogVisible = ref(false);
|
const pwdDialog = ref(false);
|
const form = reactive({
|
num: -1, // 线程编号
|
note: "", // 线程名称
|
outTime: "", // 超时时间
|
serverName: "", // 服务名称
|
processVersion: "", // 版本号
|
});
|
|
const pwdFrom = reactive({
|
pwd: "",
|
serverName: "",
|
serverFlag: 0,
|
});
|
|
const pwdRef = ref(null);
|
const ruleForm = ref(null);
|
|
const rules = {
|
note: [{ required: true, message: "不能为空", trigger: "change" }],
|
outTime: [{ required: true, message: "不能为空", trigger: "change" }],
|
pwd: [{ required: true, message: "不能为空", trigger: "change" }],
|
};
|
|
const header = [
|
{
|
prop: "processId",
|
label: "进程ID",
|
width: 120,
|
},
|
{
|
prop: "note",
|
label: "线程名称",
|
minWidth: 158,
|
},
|
{
|
prop: "processVersion",
|
label: "服务版本号",
|
width: 180,
|
},
|
{
|
prop: "serverName",
|
label: "服务名称",
|
minWidth: 228,
|
},
|
{
|
prop: "processTime",
|
label: "运行时间",
|
width: 180,
|
},
|
{
|
prop: "processStarttime",
|
label: "线程启动时间",
|
width: 180,
|
},
|
{
|
prop: "runTimelong",
|
label: "运行时长",
|
width: 180,
|
},
|
{
|
prop: "progressStatus",
|
label: "线程状态",
|
width: 120,
|
},
|
{
|
prop: "outTime",
|
label: "超时时间",
|
width: 180,
|
},
|
];
|
|
const tableData = ref([]);
|
|
|
watchEffect(() => {
|
if (listMessage.value) {
|
let _list = JSON.parse(listMessage.value).data;
|
|
|
tableData.value = _list.map(item => {
|
// 设置是否可以重启
|
if (item.serverFlag == 2) {
|
item.noRestart = true;
|
} else {
|
item.noRestart = false;
|
}
|
|
item.btnText = item.serverFlag == 2 ? "启用线程" : "禁用线程";
|
item.btnType = item.serverFlag == 2 ? "success" : "danger";
|
|
// 线程监控线程无法被禁用
|
if (
|
item.serverName == "BMS_ELECT_LOCK_COMM" ||
|
item.serverName == "BMS_FBSDEV_LISTEN"
|
) {
|
item.disabled = true;
|
item.btnType = "info";
|
} else {
|
item.disabled = false;
|
}
|
|
// 线程状态
|
item.progressStatus = getThreadState(item.serverFlag);
|
// 运行时间
|
let seconds =
|
new Date(item.processTime).getTime() / 1000 -
|
new Date(item.processStarttime) / 1000;
|
item.runTimelong = formatSeconds(seconds);
|
return item;
|
});
|
}
|
});
|
|
function getThreadState(flag) {
|
var str = "";
|
switch (flag) {
|
case 0:
|
str = "停止";
|
break;
|
case 1:
|
str = "正在运行";
|
break;
|
case 2:
|
str = "禁用";
|
break;
|
default:
|
str = "";
|
}
|
return str;
|
}
|
|
function handleClick(data) {
|
form.num = data.num;
|
form.note = data.note;
|
form.outTime = data.outTime;
|
form.serverName = data.serverName;
|
form.processVersion = data.processVersion;
|
dialogVisible.value = true;
|
}
|
|
onMounted(() => {
|
sendMessage();
|
});
|
|
function sendMessage() {
|
let params = {};
|
sendData(JSON.stringify(params));
|
}
|
function confirmChange(data) {
|
$confirm(
|
data.btnText + ":" + data.note,
|
() => {
|
let params = {
|
serverName: data.serverName,
|
serverFlag: data.serverFlag == 2 ? 0 : 2,
|
};
|
updateState(params);
|
}
|
);
|
}
|
function updateState(info) {
|
let loading = $loading();
|
// 请求后台修改信息
|
updateFlag(info)
|
.then((res) => {
|
// 关闭弹出框
|
loading.close();
|
if (res.code && res.data) {
|
$message.success("成功！");
|
pwdDialog.value = false;
|
} else {
|
$message.error("失败！");
|
}
|
})
|
.catch((error) => {
|
// 关闭弹出框
|
loading.close();
|
$message("网络请求失败！");
|
});
|
}
|
|
function confirmHandler(data) {
|
$confirm(
|
"重启" + data.note,
|
() => {
|
pwdFrom.serverName = data.serverName;
|
// 关闭面板
|
pwdDialog.value = true;
|
}
|
);
|
}
|
|
function submitFrom() {
|
ruleForm.value.validate((valid) => {
|
// 校验通过
|
if (valid) {
|
// 更新数据
|
update({
|
num: form.num,
|
note: form.note,
|
outTime: form.outTime,
|
});
|
} else {
|
$message("存在校验未通过的数据！");
|
return false;
|
}
|
});
|
}
|
function update(info) {
|
let loading = $loading();
|
// 请求后台修改信息
|
paramSetting(info)
|
.then((res) => {
|
// 关闭弹出框
|
loading.close();
|
if (res.code && res.data) {
|
$message.success("修改成功！");
|
dialogVisible.value = false;
|
} else {
|
$message.error("修改失败！");
|
}
|
})
|
.catch((error) => {
|
// 关闭弹出框
|
loading.close();
|
});
|
}
|
|
function submitPwdFrom() {
|
pwdRef.value.validate((valid) => {
|
// 校验通过
|
if (valid) {
|
checkPwd(pwdFrom.pwd);
|
} else {
|
$message("存在校验未通过的数据！");
|
return false;
|
}
|
});
|
|
}
|
function checkPwd(pwd) {
|
// 请求后台校验密码
|
judgeRestart(pwd)
|
.then((res) => {
|
if (res.code && res.data) {
|
updateState({
|
serverName: pwdFrom.serverName,
|
serverFlag: pwdFrom.serverFlag,
|
});
|
} else {
|
$message("密码错误");
|
}
|
// 清空密码
|
pwdFrom.pwd = "";
|
// 关闭弹出框
|
pwdDialog.value = false;
|
})
|
.catch((error) => {
|
console.log(error);
|
$message("网络请求失败！");
|
});
|
|
}
|
</script>
|
|
<template>
|
<div class="page-wrapper">
|
<div class="page-header">
|
</div>
|
<div class="page-content">
|
<hdw-card is-full>
|
<div class="page-content-wrapper">
|
<div class="page-content-table">
|
<div class="pos-rel">
|
<div class="pos-abs">
|
<el-table stripe :data="tableData" border style="width: 100%; height: 100%">
|
<el-table-column type="index" label="编号" width="50"></el-table-column>
|
<el-table-column v-for="item in header" :key="item.prop" :prop="item.prop" :label="item.label"
|
:min-width="item.minWidth" :width="item.width" :resizable="false" align="center">
|
</el-table-column>
|
<el-table-column fixed="right" label="操作" width="180" align="center">
|
<template #default="scope">
|
<el-popover placement="top" trigger="click" popper-style="width: auto;">
|
<div class="el-popover-content">
|
<el-button size="small" type="primary" @click="handleClick(scope.row)">参数设置</el-button>
|
<el-button :disabled="scope.row.disabled" size="small" :type="scope.row.btnType"
|
@click="confirmChange(scope.row)">{{ scope.row.btnText }}</el-button>
|
</div>
|
<template #reference>
|
<el-button icon="Setting" type="primary" size="small">设置</el-button>
|
</template>
|
</el-popover>
|
<div class="white-block"></div>
|
<el-button icon="RefreshRight" :type="scope.row.noRestart ? 'info' : 'danger'" size="small"
|
:disabled="scope.row.noRestart" @click="confirmHandler(scope.row)">重启</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
<div class="page-content-page">
|
<div class="page-tool"></div>
|
<div class="page-tool"></div>
|
</div>
|
</div>
|
</hdw-card>
|
</div>
|
<div class="page-footer"></div>
|
<!-- 线程设置 -->
|
<el-dialog title="线程设置" width="520px" v-model="dialogVisible" :close-on-click-modal="false" top="0"
|
class="dialog-center" :modal-append-to-body="false">
|
<div class="params-container" v-if="dialogVisible">
|
<el-form ref="ruleForm" size="mini" label-position="top" :model="form" :rules="rules" class="params-dialog">
|
<el-row :gutter="16">
|
<el-col :span="12">
|
<el-form-item label="线程名称" prop="note">
|
<el-input v-model="form.note"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="服务名称" prop="serverName">
|
<el-input v-model="form.serverName" readonly="readonly"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="超时时间" prop="outTime">
|
<el-input v-model="form.outTime"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="服务版本号" prop="processVersion">
|
<el-input v-model="form.processVersion" readonly="readonly"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<div class="form-footer">
|
<el-button type="primary" @click="submitFrom">确定</el-button>
|
</div>
|
</el-form>
|
</div>
|
</el-dialog>
|
<!-- 密码校验 -->
|
<el-dialog title="系统提示" width="320px" v-model="pwdDialog" :close-on-click-modal="false" top="0" class="dialog-center"
|
:modal-append-to-body="false">
|
<div class="params-container" v-if="pwdDialog">
|
<el-form ref="pwdRef" size="mini" label-position="top" :model="pwdFrom" :rules="rules" class="params-dialog">
|
<el-form-item label="重启密码" prop="pwd">
|
<el-input type="password" v-model="pwdFrom.pwd"></el-input>
|
</el-form-item>
|
<div class="form-footer">
|
<el-button type="primary" @click="submitPwdFrom">确定</el-button>
|
</div>
|
</el-form>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
.page-wrapper {
|
display: flex;
|
flex-direction: row;
|
padding: 8px;
|
height: 100%;
|
|
.page-content {
|
flex: 1;
|
}
|
}
|
|
.page-content-wrapper {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
|
.page-content-tools {
|
padding-bottom: 8px;
|
}
|
|
.page-content-table {
|
border-top: 1px solid var(--border-light-color);
|
box-sizing: border-box;
|
flex: 1;
|
margin-left: -8px;
|
margin-right: -8px;
|
}
|
|
.page-content-page {
|
padding: 8px 8px 0 8px;
|
text-align: center;
|
|
.el-page-container {
|
display: inline-block;
|
padding: 0 16px;
|
}
|
|
.page-tool {
|
display: inline-block;
|
}
|
}
|
}
|
|
.hdw-card-container {
|
width: 240px;
|
padding-right: 8px;
|
height: 100%;
|
}
|
|
.pos-rel {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
|
.pos-abs {
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.tools-filter {
|
display: inline-block;
|
font-size: 14px;
|
|
.tools-filter-item {
|
display: inline-block;
|
margin-right: 8px;
|
|
.filter-label {
|
display: inline-block;
|
}
|
|
.filter-content {
|
display: inline-block;
|
}
|
}
|
}
|
|
.page-content-tools {
|
display: flex;
|
|
.item {
|
display: flex;
|
align-items: center;
|
|
&+.item {
|
margin-left: 20px;
|
}
|
|
.label {
|
&::after {
|
content: ":";
|
}
|
}
|
|
.value {
|
margin-left: 8px;
|
font-weight: bold;
|
color: #090;
|
font-size: 18px;
|
}
|
}
|
}
|
|
.el-popover-content {
|
background-color: #ffffff;
|
// padding: 8px 16px;
|
}
|
|
.white-block {
|
display: inline-block;
|
width: 8px;
|
}
|
|
.form-footer {
|
text-align: right;
|
}
|
</style>
|
