MTR探测策略/MTRAgent管理模块
1、MTRAgent管理模块 2、MTR探测策略 3、修改流量图默认显示时间 4、优化并修改bug
This commit is contained in:
康冉冉
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div class="app-container pageTopForm">
|
||||
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" size="small" label-width="auto">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="搜索" title="搜索" prop="queryName">
|
||||
<el-input
|
||||
v-model="queryParams.queryName"
|
||||
placeholder="请输入策略名称/MTRClientID/ClientID"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item class="lastBtnSty">
|
||||
<el-button type="primary" size="mini" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
|
||||
<!-- 表格数据 -->
|
||||
<TableList :columns="columns" :config="config" :modelIdent="this.$options.name" :queryParams="queryParams" :tableList="roleList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
|
||||
<template #tempCopy="{ row, column}">
|
||||
{{row.clientId}}<el-link :underline="false" icon="el-icon-document-copy" title="复制" v-clipboard:copy="row.clientId" v-clipboard:success="clipboardSuccess" style="margin-left: 10px;color: #409EFF;"></el-link>
|
||||
</template>
|
||||
<!-- 更新方式 -->
|
||||
<template #tempMethod="{ row, column }">
|
||||
<dict-tag :options="dict.type.policy_method" :value="row.method"/>
|
||||
</template>
|
||||
<!-- 多公网IP状态 -->
|
||||
<template #tempMultipubStatus="{ row, column }">
|
||||
<dict-tag :options="dict.type.rm_moreip_status" :value="row.multiPublicIpStatus"/>
|
||||
</template>
|
||||
<!-- 注册状态 -->
|
||||
<template #tempStatus="{ row, column }">
|
||||
<dict-tag :options="dict.type.rm_register_status" :value="row.registerStatus"/>
|
||||
</template>
|
||||
<!-- 在线状态 -->
|
||||
<template #tempOnlineStatus="{ row, column }">
|
||||
<dict-tag :options="dict.type.rm_register_online_state" :value="row.onlineStatus"/>
|
||||
</template>
|
||||
</TableList>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Register">
|
||||
import Form from '@/components/form/index.vue';
|
||||
import {listMtrAgent} from '@/api/disRevenue/resource';
|
||||
import TableList from '@/components/table/index.vue';
|
||||
export default {
|
||||
name: 'mtrProbe',
|
||||
components: {TableList,Form},
|
||||
dicts: ['rm_moreip_status', 'rm_register_status', 'rm_register_online_state', 'policy_method'],
|
||||
data() {
|
||||
return {
|
||||
roleList: [],
|
||||
showSearch: true,
|
||||
ids: [],
|
||||
single: true,
|
||||
// 列显隐信息
|
||||
columns: {
|
||||
id: { label: `ID`,width: '50'},
|
||||
mtrTC: { label: `MTR探测策略`, minWidth: '120'},
|
||||
policyName: { label: `策略名称`, minWidth: '120', visible: true},
|
||||
priority: { label: `优先级`,minWidth: '150', visible: true },
|
||||
mtrClientId: { label: `MTRClientID`, minWidth: '320', visible: true},
|
||||
description:{ label: `服务器集合`,minWidth: '90', visible: true},
|
||||
heartbeatInterval: { label: `是否探测`, minWidth: '100', visible: true},
|
||||
heartbeatCount: { label: `开始时间`, minWidth: '80'},
|
||||
networkInfo: { label: `结束时间`, minWidth: '100'},
|
||||
scheduledUpdateTime: { label: `探测频率`,minWidth: '160'},
|
||||
filePath: { label: `探测目标IP集合`,minWidth: '200'},
|
||||
updateTime:{ label: `修改时间`,minWidth: '160'},
|
||||
createTime: { label: `创建时间`,minWidth: '160'},
|
||||
},
|
||||
config: {
|
||||
tableButton: {
|
||||
top: [
|
||||
{content: '添加', fnCode: 'add', type: 'primary', icon: 'el-icon-plus', hasPermi: 'resource:mtrProbe:add'},
|
||||
{content: '删除', fnCode: 'delete', type: 'danger', icon: 'el-icon-delete', hasPermi: 'resource:mtrProbe:delete'},
|
||||
{content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'resource:mtrProbe:export'},
|
||||
],
|
||||
line: [
|
||||
{content: '修改', fnCode: 'edit', type: 'text', icon: 'el-icon-edit', hasPermi: 'resource:mtrProbe:edit'},
|
||||
{content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'resource:mtrProbe:details'},
|
||||
{content: '删除', fnCode: 'delete', type: 'text', icon: 'el-icon-delete', hasPermi: 'resource:mtrProbe:delete'},
|
||||
]
|
||||
}
|
||||
},
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
activated() {
|
||||
this.$nextTick(() => {
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
// 处理子组件传递的新值
|
||||
handleValueChange(newValue) {
|
||||
// 父组件更新自身数据，实现同步
|
||||
this.showSearch = newValue;
|
||||
// console.log('父组件拿到新值:', newValue);
|
||||
},
|
||||
/** 查询角色列表 */
|
||||
getList() {
|
||||
let params = JSON.parse(JSON.stringify(this.queryParams));
|
||||
if (params && !params.queryName) {
|
||||
params.queryName = null;
|
||||
}
|
||||
listMtrAgent(this.addDateRange(params)).then(response => {
|
||||
this.roleList = response.rows;
|
||||
this.queryParams.total = response.total;
|
||||
})
|
||||
},
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList()
|
||||
},
|
||||
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.$refs['queryRef'].resetFields();
|
||||
this.queryParams = {pageNum: 1, pageSize: 10,total: 0};
|
||||
this.handleQuery();
|
||||
},
|
||||
|
||||
/** 多选框选中数据 */
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.roleId);
|
||||
this.single = selection.length != 1;
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
/** 复制代码成功 */
|
||||
clipboardSuccess() {
|
||||
this.$modal.msgSuccess("复制成功")
|
||||
},
|
||||
fnDialogResult(res){
|
||||
this.viewOpen = false;
|
||||
if (res && res.open) {
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
callback(result, rowData, selectChange, selectList) {
|
||||
if (result && result.fnCode) {
|
||||
switch (result.fnCode) {
|
||||
case 'add':
|
||||
this.$router.push({
|
||||
path:'/resource/mtrProbe/view'
|
||||
});
|
||||
break;
|
||||
case 'edit':
|
||||
this.$router.push({
|
||||
path:'/resource/mtrProbe/view',
|
||||
query: {id: rowData.id}
|
||||
});
|
||||
break;
|
||||
case 'details':
|
||||
this.$router.push({
|
||||
path:'/resource/mtrProbe/view',
|
||||
query: {id: rowData.id, readonly: true}
|
||||
});
|
||||
break;
|
||||
case 'delete':
|
||||
let ids = '';
|
||||
if (rowData && rowData.id) {
|
||||
ids = rowData.id;
|
||||
} else {
|
||||
if (selectList && selectList.length <= 0) {
|
||||
this.$modal.msgWarning("请选择数据！");
|
||||
}
|
||||
ids = selectChange;
|
||||
}
|
||||
if (!ids) return;
|
||||
let content = '<p style="font-size: 1rem;font-weight: 600;">删除MTR探测策略</p>' +
|
||||
'<p style="height: 0px;margin-bottom: 50px;">删除后数据将不能恢复，请确认是否继续！！！</p>';
|
||||
this.$modal.confirm(content).then(function() {
|
||||
return delMonitorPolicy(rowData.id)
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {});
|
||||
break;
|
||||
case 'export':
|
||||
let paramsList = Object.assign({}, this.queryParams,rowData);
|
||||
this.download("mtragent/mtrClientRegistration/export", paramsList, `MTR探测策略_${new Date().getTime()}.xlsx`, null, 'json');
|
||||
break;
|
||||
default:
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
::v-deep .lastBtnSty .el-form-item__content{
|
||||
margin-left: 10px!important;
|
||||
}
|
||||
::v-deep .el-dialog__body {
|
||||
padding: 0 0 10px!important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user