257 lines
11 KiB
Vue
257 lines
11 KiB
Vue
<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="请输入交换机名称"
|
|
clearable
|
|
@keyup.enter.native="handleQuery"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="交换机在线状态" title="交换机在线状态" prop="onlineStatus">
|
|
<el-select
|
|
v-model="queryParams.onlineStatus"
|
|
placeholder="请选择交换机在线状态"
|
|
clearable>
|
|
<el-option
|
|
v-for="dict in dict.type.rm_register_online_state"
|
|
:key="dict.value"
|
|
:label="dict.label"
|
|
:value="dict.value"/>
|
|
</el-select>
|
|
</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 #tempType="{ row, column }">
|
|
<dict-tag :options="dict.type.rm_register_resource_type" :value="row.resourceType"/>
|
|
</template>
|
|
<!-- 读写权限 -->
|
|
<template #tempReadWrite="{ row, column }">
|
|
<dict-tag :options="dict.type.rm_register_permission" :value="row.readWritePermission"/>
|
|
</template>
|
|
<!-- 加密方式 -->
|
|
<template #tempEncry="{ row, column }">
|
|
<dict-tag :options="dict.type.rm_register_encryption" :value="row.encryptionMethod"/>
|
|
</template>
|
|
<!-- 读写权限 -->
|
|
<template #tempSecurity="{ row, column }">
|
|
<dict-tag :options="dict.type.rm_register_security_level" :value="row.securityLevel"/>
|
|
</template>
|
|
<!-- 端口 -->
|
|
<template #tempPort="{ row, column }">
|
|
<dict-tag :options="dict.type.rm_register_port" :value="row.resourcePort"/>
|
|
</template>
|
|
<!-- 协议 -->
|
|
<template #tempProtocol="{ row, column }">
|
|
<dict-tag :options="dict.type.rm_register_protocol" :value="row.protocol"/>
|
|
</template>
|
|
<!-- 注册状态 -->
|
|
<template #tempStatus="{ row, column }">
|
|
<dict-tag :options="dict.type.rm_register_status" :value="row.registrationStatus"/>
|
|
</template>
|
|
<!-- 在线状态 -->
|
|
<template #tempOnlineStatus="{ row, column }">
|
|
<dict-tag :options="dict.type.rm_register_online_state" :value="row.onlineStatus"/>
|
|
</template>
|
|
</TableList>
|
|
<!-- 弹窗 -->
|
|
<el-dialog title="添加监控策略" :visible.sync="open" width="1000px" append-to-body>
|
|
<MonitorStrategy :open="`type_${open}`" @dialogResult="fnDialogResult"></MonitorStrategy>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup name="Register">
|
|
import {listSwitchManage} from '@/api/disRevenue/resource';
|
|
import TableList from '@/components/table/index.vue';
|
|
// import MonitorStrategy from './monitorStrategy';
|
|
import MonitorStrategy from '../switchMonitorStrat/monitorStrategy';
|
|
export default {
|
|
name: 'SwitchRegister',
|
|
components: {TableList, MonitorStrategy},
|
|
dicts: ['rm_register_resource_type', 'rm_register_protocol', 'rm_register_status', 'rm_register_port', 'rm_register_online_state', 'rm_register_permission', 'rm_register_encryption', 'rm_register_security_level'],
|
|
data() {
|
|
return {
|
|
open: false,
|
|
roleList: [],
|
|
loading: true,
|
|
showSearch: true,
|
|
ids: [],
|
|
single: true,
|
|
meltiple: true,
|
|
// 列显隐信息
|
|
columns: {
|
|
id: { label: `ID`,width: '50'},
|
|
switchName: { label: `交换机名称`, visible: true, minWidth: '120'},
|
|
hardwareSn: { label: `硬件SN`,minWidth: '250'},
|
|
resourceType: { label: `交换机类型`, minWidth: '100', slotName: 'tempType'},
|
|
snmpAddress: { label: `SNMP采集地址`, visible: true, minWidth: '120'},
|
|
snmpPort: { label: `SNMP采集端口`, visible: true, minWidth: '120'},
|
|
onlineStatus: { label: `在线状态`, slotName: 'tempOnlineStatus', minWidth: '80', visible: true },
|
|
upTime:{ label: `上机时间`,minWidth: '160'},
|
|
updateTime:{ label: `修改时间`,minWidth: '160'},
|
|
createTime:{ label: `创建时间`,minWidth: '160'},
|
|
heartbeatCount: { label: `交换机心跳检测次数`, minWidth: '140'},
|
|
heartbeatInterval: { label: `交换机心跳检测周期`, minWidth: '140'},
|
|
heartbeatOid: { label: `交换机心跳检测OID`, minWidth: '140'},
|
|
protocol: { label: `SNMP版本`, minWidth: '100', slotName: 'tempProtocol'},
|
|
readWritePermission: { label: `读写权限`, minWidth: '80', slotName: 'tempReadWrite'},
|
|
securityLevel: { label: `安全级别`, minWidth: '80', slotName: 'tempSecurity'},
|
|
encryptionMethod: { label: `加密方式`, minWidth: '80', slotName: 'tempEncry'},
|
|
communityName: { label: `团体名称`, minWidth: '80'},
|
|
resourceUserName: { label: `用户名`, minWidth: '100'},
|
|
resourcePwd: { label: `密码`, minWidth: '100'}
|
|
},
|
|
config: {
|
|
tableButton: {
|
|
top: [
|
|
{content: '新增', fnCode: 'add', type: 'primary', icon: 'el-icon-plus', hasPermi: 'resource:switchRegister:add'},
|
|
{content: '接口备注', fnCode: 'portRemarks', type: 'success', icon: 'el-icon-plus', hasPermi: 'resource:switchRegister:portRemarks'},
|
|
{content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'resource:switchRegister:export'},
|
|
],
|
|
line: [
|
|
{content: '图形监控', fnCode: 'echartView', type: 'text', icon: 'el-icon-data-analysis', hasPermi: 'resource:switchRegister:graphicAnalysis'},
|
|
{content: '修改', fnCode: 'edit', type: 'text', icon: 'el-icon-edit', hasPermi: 'resource:switchRegister:edit'},
|
|
{content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'resource:switchRegister:details'},
|
|
{content: '执行监控策略', fnCode: 'monitorStrategy', type: 'text', icon: 'el-icon-document-checked', hasPermi: 'resource:switchRegister:monitorStrategy'},
|
|
{},{}
|
|
// {content: '注册', fnCode: 'enroll', showName: 'registrationStatus', showVal: '0', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'resource:register:enroll'},
|
|
// {content: '取消注册', fnCode: 'unenroll', showName: 'registrationStatus', showVal: '1', type: 'text', icon: 'el-icon-circle-close', hasPermi: 'resource:register:unenroll'},
|
|
]
|
|
}
|
|
},
|
|
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() {
|
|
this.loading = true
|
|
listSwitchManage(this.addDateRange(this.queryParams)).then(response => {
|
|
this.roleList = response.rows;
|
|
this.queryParams.total = response.total;
|
|
this.loading = false;
|
|
})
|
|
},
|
|
|
|
/** 搜索按钮操作 */
|
|
handleQuery() {
|
|
this.queryParams.pageNum = 1
|
|
this.getList()
|
|
},
|
|
|
|
/** 重置按钮操作 */
|
|
resetQuery() {
|
|
this.$refs['queryRef'].resetFields();
|
|
this.queryParams = {pageNum: 1, pageSize: 10,total: 0};
|
|
// this.resetForm("queryRef");
|
|
this.handleQuery();
|
|
},
|
|
|
|
/** 多选框选中数据 */
|
|
handleSelectionChange(selection) {
|
|
this.ids = selection.map(item => item.roleId);
|
|
this.single = selection.length != 1;
|
|
this.multiple = !selection.length;
|
|
},
|
|
fnDialogResult(res){
|
|
this.open = false;
|
|
},
|
|
callback(result, rowData, selectChange) {
|
|
// console.log('result==',result);
|
|
if (result && result.fnCode) {
|
|
switch (result.fnCode) {
|
|
case 'add':
|
|
this.$router.push("/resource/switchRegister/edit/index");
|
|
break;
|
|
case 'portRemarks':
|
|
// if (selectChange && selectChange.length <= 0) {
|
|
// this.$modal.msgWarning("请选择数据！");
|
|
// return;
|
|
// }
|
|
this.$router.push({
|
|
path: '/resource/switchRegister/portRemarks',
|
|
// query: {ids: selectChange}
|
|
});
|
|
break;
|
|
case 'edit':
|
|
this.$router.push({
|
|
path:'/resource/switchRegister/edit/index',
|
|
query: {id: rowData.id}
|
|
});
|
|
break;
|
|
case 'details':
|
|
this.$router.push({
|
|
path:'/resource/switchRegister/edit/index',
|
|
query: {id: rowData.id, readonly: true}
|
|
});
|
|
break;
|
|
case 'echartView':
|
|
this.$router.push({
|
|
path:'/resource/switchRegister/monitorChart',
|
|
query: {clientId: rowData.clientId}
|
|
});
|
|
break;
|
|
case 'monitorStrategy':
|
|
this.open = true;
|
|
break;
|
|
case 'export':
|
|
// let dataList = [];
|
|
// Object.keys(this.columns).forEach(item => {
|
|
// if (item.visible) {
|
|
// dataList.push(item.prop);
|
|
// }
|
|
// });
|
|
// this.download("/system/registration/export", {properties: dataList,}, `资源管理_${new Date().getTime()}.xlsx`);
|
|
let paramsList = Object.assign({}, this.queryParams,rowData);
|
|
this.download("system/switchManagement/export", paramsList, `交换机管理_${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: 0px!important;
|
|
}
|
|
</style>
|