服务器注册
This commit is contained in:
康冉冉
@@ -315,6 +315,20 @@ export const dynamicRoutes = [
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/resource/serverRegister/monitorChart',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
permissions: ['resource:serverRegister:echartView'],
|
||||
children: [
|
||||
{
|
||||
path: ':id?',
|
||||
component: () => import('@/views/resource/serverRegister/monitorChart'),
|
||||
name: 'SwitchRegisterChart',
|
||||
meta: { title: '图形监控', activeMenu: '/resource/serverRegister' }
|
||||
}
|
||||
]
|
||||
},
|
||||
// 交换机管理
|
||||
{
|
||||
path: '/resource/switchRegister/edit',
|
||||
|
||||
39
src/views/resource/serverRegister/firstMonitor.vue
Normal file
39
src/views/resource/serverRegister/firstMonitor.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div style="padding: 8px 20px 20px;">
|
||||
<div class="w100 plr-20" style="font-size: 14px">
|
||||
<div v-for="(item, key, index) of formData['formFirst']" class="w50 disInlineBlock p10">
|
||||
<span class="w50 disInlineBlock">{{item}}</span><span class="w50">{{formData['formValue'] && formData['formValue'][key]}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="item of chartList" class="w100 mt10 mb10" style="height: 200px;border-top: 1px solid #d8dce5">
|
||||
<EchartsLine class="w100 h100" :lineData="item.dataVal" :dateDataTrans="item.dateDataTrans" :dateShowType="item.dateShowType" :title="item.title" :chartData="(valData) => chartDataEvent(valData, item.fnEvent)"></EchartsLine>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import EchartsLine from "@/components/echartsList/line.vue";
|
||||
export default {
|
||||
name: 'FirstMonitor',
|
||||
components: {EchartsLine},
|
||||
props: {
|
||||
chartList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
formData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
chartDataEvent(valData, funcName) {
|
||||
this.$emit("chartFnEvent", valData, funcName);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
142
src/views/resource/serverRegister/handle.vue
Normal file
142
src/views/resource/serverRegister/handle.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<Form :formList="formList" :ruleFormData="ruleForm" :config="this.paramsData && this.paramsData.readonly ? {labelWidth: '140px', buttonGroup: []} : {labelWidth: '140px'}" @fnClick="callback"></Form>
|
||||
<el-button v-if="this.paramsData && this.paramsData.readonly" style="float: right;margin-top: 12px;margin-left: 10px;" @click="callback({fnCode: 'cancel'})">返回</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Form from '@/components/form/index.vue';
|
||||
import {listHandle, resNameBtType, addTopology, getTopology, updateTopology, postInterFaceName} from "@/api/disRevenue/resource"
|
||||
export default {
|
||||
name: 'serverRegisterEdit',
|
||||
components: {Form},
|
||||
dicts: ['rm_topology_type'],
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
ruleForm: {},
|
||||
formList: [],
|
||||
paramsData: {},
|
||||
switchNameList: [],
|
||||
serverNameList: [],
|
||||
serverPortList: [],
|
||||
interfaceNameList: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.paramsData = this.$route && this.$route.query;
|
||||
if (this.paramsData && this.paramsData.id) {
|
||||
// this.getFormDataList(this.paramsData.id);
|
||||
}
|
||||
this.switchList();
|
||||
this.fnFormList();
|
||||
|
||||
},
|
||||
methods: {
|
||||
// formList集合
|
||||
fnFormList(objVal) {
|
||||
if (this.paramsData && this.paramsData.readonly) {
|
||||
this.formList = [{
|
||||
config: {title: '基本信息',labelWidth: '140px', readonly: true},
|
||||
controls: {
|
||||
id: {label: 'ID',hidden: true},
|
||||
clientId: {label: 'ClientID', span: 12, type: 'select', options:[]},
|
||||
hardwareSn: {label: '设备SN', span: 12, type: 'input'},
|
||||
one: {label: 'IP1-运营商', span: 12, type: 'input'},
|
||||
one1: {label: 'IP1-省', span: 12, type: 'input'},
|
||||
one2: {label: 'IP1-市', span: 12, type: 'input'},
|
||||
one3: {label: 'IP1-业务公网', span: 12, type: 'input'},
|
||||
one4: {label: 'IP1-接口名称', span: 12, type: 'input'},
|
||||
one5: {label: 'IP1-mac地址', span: 12, type: 'input'},
|
||||
one6: {label: 'IP1-接口类型', span: 12, type: 'input'},
|
||||
one7: {label: 'IP1-IPv4地址', span: 12, type: 'input'},
|
||||
one8: {label: '管理网-运营商', span: 12, type: 'input'},
|
||||
one9: {label: '管理网-省', span: 12, type: 'input'},
|
||||
one10: {label: '管理网-市', span: 12, type: 'input'},
|
||||
one11: {label: '管理网-公网IP', span: 12, type: 'input'},
|
||||
one12: {label: '管理网-接口名称', span: 12, type: 'input'},
|
||||
one13: {label: '管理网-mac地址', span: 12, type: 'input'},
|
||||
one14: {label: '管理网-接口类型', span: 12, type: 'input'},
|
||||
one15: {label: '管理网-IPv4地址', span: 12, type: 'input'},
|
||||
one16: {label: '管理网-网关', span: 12, type: 'input'},
|
||||
one17: {label: '心跳时间间隔', span: 12, type: 'input'},
|
||||
one18: {label: '心跳次数', span: 12, type: 'input'},
|
||||
one19: {label: '业务名称', span: 12, type: 'input'},
|
||||
one20: {label: '逻辑节点标识', span: 12, type: 'input'},
|
||||
one21: {label: '在线状态', span: 12, type: 'input'},
|
||||
one22: {label: '注册状态', span: 12, type: 'input'},
|
||||
one23: {label: '注册时间', span: 12, type: 'input'},
|
||||
one24: {label: '上机时间', span: 12, type: 'input'},
|
||||
one25: {label: 'agent版本', span: 12, type: 'input'},
|
||||
machineCode: {label: '金山machineCode', span: 12, type: 'input'},
|
||||
}
|
||||
}];
|
||||
} else {
|
||||
this.formList = [{
|
||||
config: {title: '基本信息',labelWidth: '140px', colSpan: 'disBlock'},
|
||||
controls: {
|
||||
id: {label: 'ID',hidden: true},
|
||||
clientId: {label: 'ClientID', span: 12, type: 'select', options:[], required: true},
|
||||
machineCode: {label: '金山machineCode', span: 12, type: 'input', required: true},
|
||||
}
|
||||
}];
|
||||
}
|
||||
},
|
||||
// 获取交换机下拉
|
||||
switchList() {
|
||||
resNameBtType({resourceType: 2}).then(val => {
|
||||
this.switchNameList = val && val;
|
||||
this.formList[0].controls.clientId['options'] = val && val.map(item => {
|
||||
return Object.assign({label: item.resourceName, value: item.resourceName});
|
||||
});
|
||||
});
|
||||
},
|
||||
// 获取详情
|
||||
getFormDataList(id) {
|
||||
getTopology(id).then(val => {
|
||||
this.ruleForm = val && val.data;
|
||||
this.switchList();
|
||||
this.fnServerNameList();
|
||||
}).catch(() => {
|
||||
this.$modal.msgError("操作失败")
|
||||
});
|
||||
},
|
||||
// 监听事件
|
||||
callback(result, dataVal, formVal) {
|
||||
if (result && result.fnCode) {
|
||||
switch (result.fnCode) {
|
||||
case 'submit':
|
||||
let content = '<p style="font-size: 1rem;font-weight: 600;">确认添加machineCode</p>' +
|
||||
'<p style="height: 0px;margin-bottom: 50px;">一旦添加machineCode后，将不能修改</p>';
|
||||
this.$modal.confirm(content, {submitTitle: '确认添加'}).then(() => {
|
||||
let fnType = addTopology;
|
||||
if (dataVal && dataVal.id) {
|
||||
fnType = updateTopology;
|
||||
}
|
||||
if(this.loading) return;
|
||||
this.loading = true;
|
||||
fnType(dataVal).then(response => {
|
||||
this.$modal.msgSuccess(response.msg);
|
||||
this.$router.push("/resource/serverRegister");
|
||||
this.loading = false;
|
||||
}).catch(() => {
|
||||
this.$modal.msgError("操作失败")
|
||||
});
|
||||
}).catch(() => {});
|
||||
break;
|
||||
case 'cancel':
|
||||
this.$router.push("/resource/serverRegister");
|
||||
break;
|
||||
default:
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
::v-deep .el-radio {
|
||||
margin-right: 15px!important;
|
||||
}
|
||||
</style>
|
||||
319
src/views/resource/serverRegister/index.vue
Normal file
319
src/views/resource/serverRegister/index.vue
Normal file
@@ -0,0 +1,319 @@
|
||||
<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="switchName">
|
||||
<el-input
|
||||
v-model="queryParams.switchName"
|
||||
placeholder="请输入公网IP/私网IP/设备SN"
|
||||
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="6">
|
||||
<el-form-item label="多公网IP状态" title="多公网IP状态" prop="onlineStatus">
|
||||
<el-select
|
||||
v-model="queryParams.onlineStatus"
|
||||
placeholder="请选择多公网IP状态"
|
||||
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="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="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="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" :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 #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="800px" append-to-body>
|
||||
<div class="block">
|
||||
<el-timeline :reverse="true">
|
||||
<el-timeline-item v-for="item of timelineList" :timestamp="item.createTime" placement="top">
|
||||
<pre>{{item.content}}</pre>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
</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';
|
||||
export default {
|
||||
name: 'ServerRegister',
|
||||
components: {TableList, MonitorStrategy},
|
||||
dicts: ['rm_register_resource_type', 'rm_register_protocol', 'rm_register_status', 'rm_register_port', 'rm_register_online_state'],
|
||||
data() {
|
||||
return {
|
||||
open: false,
|
||||
roleList: [],
|
||||
loading: true,
|
||||
showSearch: true,
|
||||
ids: [],
|
||||
single: true,
|
||||
meltiple: true,
|
||||
// 列显隐信息
|
||||
columns: {
|
||||
id: { label: `ID`,width: '80'},
|
||||
switchName: { label: `交换机名称`, visible: true, minWidth: '200'},
|
||||
hardwareSn: { label: `硬件SN`,minWidth: '250'},
|
||||
resourceType: { label: `交换机类型`, minWidth: '100', slotName: 'tempType'},
|
||||
snmpAddress: { label: `SNMP采集地址`, visible: true, minWidth: '150'},
|
||||
snmpPort: { label: `SNMP采集端口`, visible: true, minWidth: '150'},
|
||||
onlineStatus: { label: `在线状态`, slotName: 'tempOnlineStatus', minWidth: '120', visible: true },
|
||||
upTime:{ label: `上机时间`,minWidth: '160'},
|
||||
updateTime:{ label: `修改时间`,minWidth: '160'},
|
||||
createTime:{ label: `创建时间`,minWidth: '160'},
|
||||
heartbeatCount: { label: `交换机心跳检测次数`, minWidth: '180'},
|
||||
heartbeatInterval: { label: `交换机心跳检测周期`, minWidth: '180'},
|
||||
heartbeatOid: { label: `交换机心跳检测OID`, minWidth: '180'},
|
||||
protocol: { label: `SNMP版本`, minWidth: '150'},
|
||||
readWritePermission: { label: `读写权限`, minWidth: '120'},
|
||||
securityLevel: { label: `安全级别`, minWidth: '120'},
|
||||
encryptionMethod: { label: `加密方式`, minWidth: '120'},
|
||||
communityName: { label: `团体名称`, minWidth: '120'},
|
||||
resourceUserName: { label: `用户名`, minWidth: '100'},
|
||||
resourcePwd: { label: `密码`, minWidth: '100'}
|
||||
},
|
||||
config: {
|
||||
tableButton: {
|
||||
top: [
|
||||
{content: '新增', fnCode: 'add', type: 'primary', icon: 'el-icon-plus', hasPermi: 'resource:serverRegister:add'},
|
||||
{content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'resource:serverRegister:export'},
|
||||
],
|
||||
line: [
|
||||
{content: '选择公网业务IP', fnCode: 'pubilcNet', type: 'text', icon: 'el-icon-thumb', hasPermi: 'resource:serverRegister:pubilcNet'},
|
||||
{content: '图形监控', fnCode: 'echartView', type: 'text', icon: 'el-icon-data-analysis', hasPermi: 'resource:serverRegister:graphicAnalysis'},
|
||||
{content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'resource:serverRegister:details'},
|
||||
{title: ' 执行策略', more: [
|
||||
{content: '下发业务', fnCode: 'issueBusiness', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'resource:serverRegister:issueBusiness'},
|
||||
{content: '下发脚本策略', fnCode: 'issueScript', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'resource:serverRegister:issueScript'},
|
||||
{content: '下发监控策略', fnCode: 'issueMonitor', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'resource:serverRegister:issueMonitor'},
|
||||
]
|
||||
},
|
||||
{content: '查看执行结果', fnCode: 'result', type: 'text', icon: 'el-icon-s-check', hasPermi: 'resource:serverRegister:result'},
|
||||
{},{},{}
|
||||
// {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
|
||||
},
|
||||
timelineList: [
|
||||
{content: '【服务器节点名称1】执行脚本命令', time: '2025-12-12 12:12:12'},
|
||||
{content: '【服务器节点名称1】执行脚本命令', time: '2025-12-11 12:12:12'},
|
||||
{content: '【服务器节点名称1】执行脚本命令', time: '2025-12-10 12:12:12'}
|
||||
],
|
||||
}
|
||||
},
|
||||
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/serverRegister/edit");
|
||||
break;
|
||||
case 'edit':
|
||||
this.$router.push({
|
||||
path:'/resource/serverRegister/edit',
|
||||
query: {id: rowData.id}
|
||||
});
|
||||
break;
|
||||
case 'details':
|
||||
this.$router.push({
|
||||
path:'/resource/serverRegister/edit',
|
||||
query: {id: rowData.id, readonly: true}
|
||||
});
|
||||
break;
|
||||
case 'echartView':
|
||||
this.$router.push({
|
||||
path:'/resource/serverRegister/monitorChart',
|
||||
query: {clientId: rowData.hardwareSn}
|
||||
});
|
||||
break;
|
||||
case 'result':
|
||||
this.open = true;
|
||||
// 获取详情
|
||||
getScriptResultBySn({hardwareSn: rowData.hardwareSn}).then(val => {
|
||||
this.timelineList = val && val.data && val.data.scriptResult || [];
|
||||
}).catch(() => {
|
||||
this.$modal.msgError("操作失败")
|
||||
});
|
||||
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;
|
||||
}
|
||||
::v-deep .el-timeline .el-timeline-item:last-child .el-timeline-item__tail {
|
||||
display: block!important;
|
||||
}
|
||||
::v-deep .el-tree-node__label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
529
src/views/resource/serverRegister/monitorChart.vue
Normal file
529
src/views/resource/serverRegister/monitorChart.vue
Normal file
@@ -0,0 +1,529 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="监控项" name="first">
|
||||
<template v-if="activeName === 'first'">
|
||||
<FirstMonitor v-if="loading" :formData="formData" :chartList="firstChartList" @chartFnEvent="chartFnEvent"></FirstMonitor>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="自动发现项" name="second">
|
||||
<template v-if="activeName === 'second'">
|
||||
<SecondAutoFind v-if="loading" :defaultTimes="defaultTimes" :matchNum="matchNum" :secondChartList="secondChartList" :activeNames="activeNames" @collapseChangeData="collapseChangeData" @chartFnEvent="chartFnEvent"></SecondAutoFind>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div style="float: right;margin-top: 20px;">
|
||||
<el-button type="primary" @click="goBack">返回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FirstMonitor from "./firstMonitor";
|
||||
import SecondAutoFind from "./secondAutoFind";
|
||||
import {switchMonitorData, switchCpuData, switchMemData,switchPowerData, postInterFaceName, switchNetDetails,switchNetDiscards,switchNeTotal,switchNetErrDiscard, switchNetSpeed} from "@/api/disRevenue/resource"
|
||||
export default {
|
||||
name: "MonitorChart",
|
||||
components: {FirstMonitor, SecondAutoFind},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
currTimeList: {},
|
||||
defaultTimes: [],
|
||||
activeName: 'first',
|
||||
paramsData: {},
|
||||
// 第一栏
|
||||
firstChartTrans: {},
|
||||
formFirst: {
|
||||
sysDescr: '总内存', sysLocation: '操作系统', sysObjectID: '操作系统架构', hwStackSystemMac: '最大进程数', sysUpTime: '硬盘',
|
||||
entPhysicalName: '系统启动时间', sysContact: '系统描述', entPhysicalSoftwareRev: '系统正确运行时间', sysName: '系统本地时间', cpuNum: 'CPU数量'
|
||||
},
|
||||
formData: {},
|
||||
firstChartList: [],
|
||||
resultData: [
|
||||
{
|
||||
title: 'CPU负载(%)',
|
||||
dateShowType: 'datetimerange',
|
||||
dateDataTrans: {transList: true},
|
||||
dataVal: {
|
||||
titleVal: {textAlign: 'left', left: '1%'},
|
||||
yAxisName: ' ',
|
||||
gridTop: '35%',
|
||||
legend: {top: '15%', left: '10%'},
|
||||
lineXData: [],
|
||||
dataList: [
|
||||
{name: 'CPU的1分钟负载', data: []},
|
||||
{name: 'CPU的5分钟负载', data: []},
|
||||
{name: 'CPU的15分钟负载', data: []},
|
||||
{name: 'CPU使用率', data: []},
|
||||
]
|
||||
}
|
||||
},{
|
||||
title: 'CPU时间(s)',
|
||||
dateShowType: 'datetimerange',
|
||||
dateDataTrans: {transList: true},
|
||||
dataVal: {
|
||||
titleVal: {textAlign: 'left', left: '1%'},
|
||||
yAxisName: ' ',
|
||||
gridTop: '35%',
|
||||
legend: {top: '15%', left: '10%'},
|
||||
lineXData: [],
|
||||
dataList: [
|
||||
{name: 'CPU正常运行时间', data: []},
|
||||
{name: 'CPU空闲时间', data: []},
|
||||
{name: 'CPU等待响应时间', data: []},
|
||||
{name: 'CPU系统时间', data: []},
|
||||
{name: 'CPU软件无响应时间', data: []},
|
||||
{name: 'CPU运行用户进程所花费的时间', data: []},
|
||||
]
|
||||
}
|
||||
},{
|
||||
title: '进程(个)',
|
||||
dateShowType: 'datetimerange',
|
||||
dateDataTrans: {transList: true},
|
||||
dataVal: {
|
||||
titleVal: {textAlign: 'left', left: '1%'},
|
||||
yAxisName: ' ',
|
||||
gridTop: '35%',
|
||||
legend: {top: '15%', left: '10%'},
|
||||
lineXData: [],
|
||||
dataList: [
|
||||
{name: '正在运行的进程数', data: []},
|
||||
{name: '进程数', data: []}
|
||||
]
|
||||
}
|
||||
},{
|
||||
title: '登录用户数(个)',
|
||||
dateShowType: 'datetimerange',
|
||||
dateDataTrans: {transList: true},
|
||||
dataVal: {
|
||||
titleVal: {textAlign: 'left', left: '1%'},
|
||||
yAxisName: ' ',
|
||||
gridTop: '35%',
|
||||
legend: {top: '15%', left: '10%'},
|
||||
lineXData: [],
|
||||
dataList: [
|
||||
{name: '登录用户数', data: []}
|
||||
]
|
||||
}
|
||||
},{
|
||||
title: '交换卷/文件的可用空间(字节)',
|
||||
dateShowType: 'datetimerange',
|
||||
dateDataTrans: {transList: true},
|
||||
dataVal: {
|
||||
titleVal: {textAlign: 'left', left: '1%'},
|
||||
yAxisName: ' ',
|
||||
gridTop: '35%',
|
||||
legend: {top: '15%', left: '10%'},
|
||||
lineXData: [],
|
||||
dataList: [
|
||||
{name: '交换卷/文件的可用空间', data: []}
|
||||
]
|
||||
}
|
||||
},{
|
||||
title: '内存利用率(%)',
|
||||
dateShowType: 'datetimerange',
|
||||
dateDataTrans: {transList: true},
|
||||
dataVal: {
|
||||
titleVal: {textAlign: 'left', left: '1%'},
|
||||
yAxisName: ' ',
|
||||
gridTop: '35%',
|
||||
legend: {top: '15%', left: '10%'},
|
||||
lineXData: [],
|
||||
dataList: [
|
||||
{name: '内存利用率', data: []}
|
||||
]
|
||||
}
|
||||
},{
|
||||
title: '可用交换空间百分比(%)',
|
||||
dateShowType: 'datetimerange',
|
||||
dateDataTrans: {transList: true},
|
||||
dataVal: {
|
||||
titleVal: {textAlign: 'left', left: '1%'},
|
||||
yAxisName: ' ',
|
||||
gridTop: '35%',
|
||||
legend: {top: '15%', left: '10%'},
|
||||
lineXData: [],
|
||||
dataList: [
|
||||
{name: '可用交换空间百分比', data: []}
|
||||
]
|
||||
}
|
||||
},{
|
||||
title: '可用内存(KB)',
|
||||
dateShowType: 'datetimerange',
|
||||
dateDataTrans: {transList: true},
|
||||
dataVal: {
|
||||
titleVal: {textAlign: 'left', left: '1%'},
|
||||
yAxisName: ' ',
|
||||
gridTop: '35%',
|
||||
legend: {top: '15%', left: '10%'},
|
||||
lineXData: [],
|
||||
dataList: [
|
||||
{name: '可用内存', data: []}
|
||||
]
|
||||
}
|
||||
},{
|
||||
title: '可用内存百分比(%)',
|
||||
dateShowType: 'datetimerange',
|
||||
dateDataTrans: {transList: true},
|
||||
dataVal: {
|
||||
titleVal: {textAlign: 'left', left: '1%'},
|
||||
yAxisName: ' ',
|
||||
gridTop: '35%',
|
||||
legend: {top: '15%', left: '10%'},
|
||||
lineXData: [],
|
||||
dataList: [
|
||||
{name: '可用内存百分比', data: []}
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
// 第二栏
|
||||
activeNames: [],
|
||||
matchNum: {num: ''},
|
||||
secondChartList: {},
|
||||
eventDataMap: {},
|
||||
echartData: {
|
||||
title: 'GE1/0/1的丢包数',
|
||||
dateShowType: 'datetimerange',
|
||||
dateDataTrans: {transList: true},
|
||||
dataVal: {
|
||||
titleVal: {textAlign: 'left', left: '1%'},
|
||||
yAxisName: ' ',
|
||||
gridTop: '35%',
|
||||
legend: {top: '15%', left: '10%'},
|
||||
lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
|
||||
dataList: [{
|
||||
name: '入站丢包',
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
},{
|
||||
name: '出站丢包',
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
}]
|
||||
}
|
||||
},
|
||||
linuxSystem: {
|
||||
net: {
|
||||
title: '网络端口GE1/0/1',
|
||||
formList: {name: '端口名称', type: '端口类型', status: '端口状态', mbps: '端口适配速率(Mbps)'},
|
||||
formModel: {name: 'GE1/0/1', type: 'ETHNET', status: 'up', mbps: '1000'},
|
||||
// echartFors: [
|
||||
// {title: 'GE1/0/1的丢包数', oneName: '入站丢包', twoName: '出站丢包'},
|
||||
// {title: 'GE1/0/1的Bites总数', oneName: '端口发送Bites总数', twoName: '端口接收Bites总数'},
|
||||
// {title: 'GE1/0/1的错误包数量', oneName: '错误的入站数据包数量', twoName: '错误的出战数据包数量'},
|
||||
// {title: 'GE1/0/1的网络速率(bites/sec)', oneName: '端口实时接收速率(bites/sec)', twoName: '端口实时发送速率(bites/sec)'},
|
||||
// ],
|
||||
echartList: [{
|
||||
title: 'GE1/0/1的丢包数',
|
||||
dateShowType: 'datetimerange',
|
||||
dateDataTrans: {transList: true},
|
||||
dataVal: {
|
||||
titleVal: {textAlign: 'left', left: '1%'},
|
||||
yAxisName: ' ',
|
||||
gridTop: '35%',
|
||||
legend: {top: '15%', left: '10%'},
|
||||
lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
|
||||
dataList: [{
|
||||
name: '入站丢包',
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
},{
|
||||
name: '出站丢包',
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
}]
|
||||
}
|
||||
}]
|
||||
},
|
||||
light: {
|
||||
title: '光模块sabc',
|
||||
formList: {name: '光模块端口名称'},
|
||||
formModel: {name: 'sabc'},
|
||||
echartFors: [
|
||||
{title: 'sabc的光衰阈值(dBm)', oneName: '光模块发送光衰阈值', twoName: '光模块接收光衰阈值'},
|
||||
{title: 'sabc的功率(dBm)', oneName: '光模块接收功率', twoName: '光模块发送功率'}
|
||||
],
|
||||
echartList: []
|
||||
},
|
||||
mpu: {
|
||||
title: 'MPU1',
|
||||
formList: {name: 'MPU名称', system: 'MPU的操作系统'},
|
||||
formModel: {name: 'MPU1', system: 'xxxx'},
|
||||
echartFors: [
|
||||
{title: 'MPU1的CPU使用率(%)', oneName: 'CPU利用率'},
|
||||
{title: 'MPU1的内存使用率(%)', oneName: '内存利用率'},
|
||||
{title: 'MPU1的温度(°C)', oneName: '温度'},
|
||||
],
|
||||
echartList: []
|
||||
},
|
||||
pw: {
|
||||
title: '电源PW1',
|
||||
formList: {name: '电源名称', status: '电源状态'},
|
||||
formModel: {name: 'PW1', status: '正在供电'},
|
||||
echartFors: [
|
||||
{title: '电源电流(mA)', oneName: '电源电流'},
|
||||
{title: '电源电压(mV)', oneName: '电源电压'}
|
||||
],
|
||||
echartList: []
|
||||
},
|
||||
fan: {
|
||||
title: '风扇FAN1',
|
||||
formList: {name: '风扇名称', status: '风扇状态'},
|
||||
formModel: {name: 'FAN1', status: 'xxx'},
|
||||
echartFors: [],
|
||||
echartList: []
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let startData = '';
|
||||
let endData = '';
|
||||
const year = new Date().getFullYear();
|
||||
const month = String(new Date().getMonth() + 1).padStart(2, '0'); // 0=1月，11=12月
|
||||
const day = String(new Date().getDate()).padStart(2, '0'); // 当前日（如8）
|
||||
const prevDay = String(new Date().getDate() - 1).padStart(2, '0');
|
||||
startData = `${year}-${month}-${prevDay} 00:00:00`;
|
||||
endData = `${year}-${month}-${day} 00:00:00`;
|
||||
this.currTimeList = {startTime: startData, endTime: endData};
|
||||
this.defaultTimes = [startData, endData];
|
||||
this.paramsData = this.$route && this.$route.query;
|
||||
this.handleClick();
|
||||
},
|
||||
methods: {
|
||||
async handleClick(tab, event) {
|
||||
this.loading = false;
|
||||
if (this.activeName === 'first') {
|
||||
await Promise.all([
|
||||
this.getMonitorData(),
|
||||
this.getCpuData(),
|
||||
this.getMemData(),
|
||||
this.getPowerData()
|
||||
]);
|
||||
this.loading = true;
|
||||
} else {
|
||||
await this.fnInterFaceNameList();
|
||||
this.loading = true;
|
||||
}
|
||||
},
|
||||
getMonitorData() {
|
||||
this.formData = {formFirst: this.formFirst};
|
||||
switchMonitorData({clientId: this.paramsData.clientId}).then(res => {
|
||||
if (res && res.data) {
|
||||
this.formData['formValue'] = res.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
getCpuData(val) {
|
||||
let cpuData = JSON.parse(JSON.stringify(this.resultData[0]));
|
||||
switchCpuData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
|
||||
cpuData['fnEvent'] = 'getCpuData';
|
||||
if (res && res.data) {
|
||||
cpuData.dataVal.lineXData = res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
|
||||
this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
|
||||
cpuData.dataVal.dataList[0].data = res.data && res.data['yData'] && res.data['yData']['switchCpuUse'] && res.data['yData']['switchCpuUse'].length > 0 ? res.data['yData']['switchCpuUse'] : [];
|
||||
}
|
||||
// this.firstChartList[0] = cpuData;
|
||||
this.$set(this.firstChartList, 0, cpuData);
|
||||
}).catch(() => {
|
||||
this.firstChartList[0] = cpuData;
|
||||
});
|
||||
},
|
||||
getMemData(val) {
|
||||
let memData = JSON.parse(JSON.stringify(this.resultData[1]));
|
||||
switchMemData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
|
||||
memData['fnEvent'] = 'getMemData';
|
||||
if (res && res.data) {
|
||||
memData.dataVal.lineXData = res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
|
||||
this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
|
||||
memData.dataVal.dataList[0].data = res.data && res.data['yData'] && res.data['yData']['switchMemUse'] && res.data['yData']['switchMemUse'].length > 0 ? res.data['yData']['switchMemUse'] : [];
|
||||
}
|
||||
// this.firstChartList[1] = memData;
|
||||
this.$set(this.firstChartList, 1, memData);
|
||||
}).catch(() => {
|
||||
this.firstChartList[1] = memData;
|
||||
});
|
||||
},
|
||||
getPowerData(val) {
|
||||
let powerData = JSON.parse(JSON.stringify(this.resultData[2]));
|
||||
switchPowerData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
|
||||
powerData['fnEvent'] = 'getPowerData';
|
||||
if (res && res.data) {
|
||||
powerData.dataVal.lineXData = res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
|
||||
this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
|
||||
powerData.dataVal.dataList[0].data = res.data && res.data['yData'] && res.data['yData']['switchAvgPower'] && res.data['yData']['switchAvgPower'].length > 0 ? res.data['yData']['switchAvgPower'] : [];
|
||||
powerData.dataVal.dataList[1].data = res.data && res.data['yData'] && res.data['yData']['switchcurrentPower'] && res.data['yData']['switchcurrentPower'].length > 0 ? res.data['yData']['switchcurrentPower'] : [];
|
||||
}
|
||||
// this.firstChartList[2] = powerData;
|
||||
this.$set(this.firstChartList, 2, powerData);
|
||||
}).catch(() => {
|
||||
this.firstChartList[2] = powerData;
|
||||
});
|
||||
},
|
||||
// two
|
||||
// 接口名称
|
||||
async fnInterFaceNameList(val) {
|
||||
this.activeNames = [];
|
||||
try {
|
||||
const res = await postInterFaceName({clientId: this.paramsData.clientId});
|
||||
// .then(res => {
|
||||
res && res.forEach(async(item,index) => {
|
||||
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['net']));
|
||||
oneData.title = item && item.interfaceName;
|
||||
this.secondChartList[item.interfaceName] = oneData;
|
||||
if (index === 0) {
|
||||
this.$modal.loading();
|
||||
await Promise.all([
|
||||
this.getNetDiscards(this.currTimeList, item),
|
||||
// this.getNetTotal(this.currTimeList, item),
|
||||
// this.getNetErrDisc(this.currTimeList, item),
|
||||
// this.getNetSpeed(this.currTimeList, item)
|
||||
]);
|
||||
setTimeout(() => {
|
||||
if (!this.activeNames.includes(item.interfaceName)) this.activeNames.push(item.interfaceName);
|
||||
this.$modal.closeLoading();
|
||||
},2000);
|
||||
}
|
||||
});
|
||||
// });
|
||||
} catch (error) {
|
||||
this.$modal.closeLoading();
|
||||
console.error('获取接口名称列表失败：', error);
|
||||
// 可添加错误提示，如this.$message.error('数据加载失败')
|
||||
}
|
||||
},
|
||||
// 基本信息
|
||||
getNetData() {
|
||||
switchNetDetails({clientId: this.paramsData.clientId}).then(res => {
|
||||
if (res && res.data) {
|
||||
this.formData['formValue'] = res.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 丢包
|
||||
getNetDiscards(times,val) {
|
||||
const interfaceName = val.interfaceName;
|
||||
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
||||
if (netEcharts && netEcharts.dateDataTrans) {
|
||||
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
||||
}
|
||||
netEcharts.fnEvent = 'getNetDiscards';
|
||||
switchNetDiscards(Object.assign({}, {name : interfaceName,clientId: this.paramsData.clientId}, times)).then(res => {
|
||||
this.$set(this.secondChartList[interfaceName].echartList, 0, []);
|
||||
if (res && res.data) {
|
||||
this.eventDataMap['interfaceName'] = false;
|
||||
netEcharts.title = `${interfaceName}的丢包数`;
|
||||
console.log('');
|
||||
netEcharts.dataVal.lineXData = res.data?.xData.length > 0 ? res.data.xData : this.firstChartTrans?.timeList || [];
|
||||
// 入
|
||||
netEcharts.dataVal.dataList[0] = {
|
||||
name: this.secondChartList[interfaceName].echartFors[0].oneName,
|
||||
data: res.data.yData?.netInDiscardsData || []
|
||||
};
|
||||
// 出
|
||||
netEcharts.dataVal.dataList[1] = {
|
||||
name: this.secondChartList[interfaceName].echartFors[0].twoName,
|
||||
data: res.data.yData?.netOutDiscardsData || []
|
||||
};
|
||||
this.$set(this.secondChartList[interfaceName].echartList, 0, netEcharts);
|
||||
this.$set(this.eventDataMap, interfaceName, true);
|
||||
if (this.firstChartTrans?.timeList) {
|
||||
this.matchNum['interfaceName'] = val.interfaceName;
|
||||
this.$set(this.matchNum, 'num', Math.floor(Math.random() * 9000));
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 总数
|
||||
getNetTotal(times,val) {
|
||||
const interfaceName = val.interfaceName;
|
||||
// let netData = JSON.parse(JSON.stringify(this.secondChartList[interfaceName]));
|
||||
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
||||
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
||||
netEcharts.fnEvent = 'getNetTotal';
|
||||
switchNeTotal(Object.assign({}, {name : interfaceName,clientId: this.paramsData.clientId}, times)).then(res => {
|
||||
if (res && res.data) {
|
||||
netEcharts.title = `${interfaceName}的Bites总数`;
|
||||
netEcharts.dataVal.lineXData = res.data && res.data.xData || [];
|
||||
// 入
|
||||
netEcharts.dataVal.dataList[0] = {
|
||||
name: this.secondChartList[interfaceName].echartFors[1].oneName,
|
||||
data: res.data.yData?.netInTotalData || []
|
||||
};
|
||||
// 出
|
||||
netEcharts.dataVal.dataList[1] = {
|
||||
name: this.secondChartList[interfaceName].echartFors[1].twoName,
|
||||
data: res.data.yData?.netOutTotalData || []
|
||||
};
|
||||
this.$set(this.secondChartList[interfaceName].echartList, 1, netEcharts);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 错误丢包
|
||||
getNetErrDisc(times, val) {
|
||||
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
||||
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
||||
netEcharts.fnEvent = 'getNetErrDisc';
|
||||
switchNetErrDiscard(Object.assign({}, {name : val.interfaceName,clientId: this.paramsData.clientId}, times)).then(res => {
|
||||
if (res && res.data) {
|
||||
netEcharts.title = `${val.interfaceName}的错误包数量`;
|
||||
netEcharts.dataVal.lineXData = res.data && res.data.xData || [];
|
||||
netEcharts.dataVal.dataList[0].name = this.secondChartList[val.interfaceName].echartFors[2].oneName;
|
||||
netEcharts.dataVal.dataList[0].data = res.data && res.data.yData?.netInErrDiscardsData || [];
|
||||
netEcharts.dataVal.dataList[1].name = this.secondChartList[val.interfaceName].echartFors[2].twoName;
|
||||
netEcharts.dataVal.dataList[1].data = res.data && res.data.yData?.netOutErrDiscardsData || [];
|
||||
this.$set(this.secondChartList[val.interfaceName].echartList, 2, netEcharts);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 实时流量
|
||||
getNetSpeed(times, val) {
|
||||
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
|
||||
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
|
||||
netEcharts.fnEvent = 'getNetSpeed';
|
||||
switchNetSpeed(Object.assign({}, {name : val.interfaceName,clientId: this.paramsData.clientId}, times)).then(res => {
|
||||
if (res && res.data) {
|
||||
netEcharts.title = `${val.interfaceName}的网络速率(bites/sec)`;
|
||||
netEcharts.dataVal.lineXData = res.data && res.data.xData || [];
|
||||
netEcharts.dataVal.dataList[0].name = this.secondChartList[val.interfaceName].echartFors[3].oneName;
|
||||
netEcharts.dataVal.dataList[0].data = res.data && res.data.yData?.netInSpeedData || [];
|
||||
netEcharts.dataVal.dataList[1].name = this.secondChartList[val.interfaceName].echartFors[3].twoName;
|
||||
netEcharts.dataVal.dataList[1].data = res.data && res.data.yData?.netOutSpeedData || [];
|
||||
this.$set(this.secondChartList[val.interfaceName].echartList, 3, netEcharts);
|
||||
}
|
||||
});
|
||||
},
|
||||
collapseChangeData(valList) {
|
||||
valList && valList.forEach(item => {
|
||||
if (!this.eventDataMap[item]) {
|
||||
this.$modal.loading();
|
||||
this.getNetDiscards(this.currTimeList, {interfaceName: item});
|
||||
this.getNetTotal(this.currTimeList, {interfaceName: item});
|
||||
this.getNetErrDisc(this.currTimeList, {interfaceName: item});
|
||||
this.getNetSpeed(this.currTimeList, {interfaceName: item});
|
||||
setTimeout(() => {
|
||||
if (!this.activeNames.includes(item)) this.activeNames.push(item);
|
||||
this.$modal.closeLoading();
|
||||
},2500);
|
||||
}
|
||||
});
|
||||
},
|
||||
chartFnEvent(valData, fnName, tabName) {
|
||||
console.log('ccccc===',fnName,'vvv==', typeof this[fnName] === 'function');
|
||||
this.firstChartTrans = valData;
|
||||
// 检查函数是否存在，避免报错
|
||||
if (typeof this[fnName] === 'function') {
|
||||
// 调用实际函数，并传递参数（如选中的值、当前项）
|
||||
this[fnName]({startTime: valData.timeArr[0], endTime: valData.timeArr[1]}, {interfaceName: tabName});
|
||||
} else {
|
||||
console.warn(`函数 ${fnName} 未定义`);
|
||||
}
|
||||
},
|
||||
goBack() {
|
||||
this.$router.push("/resource/switchRegister");
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
239
src/views/resource/serverRegister/monitorStrategy.vue
Normal file
239
src/views/resource/serverRegister/monitorStrategy.vue
Normal file
@@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div style="width: 80%; margin: auto;">
|
||||
<Form ref="formRef" :formList="formList" :config="{labelWidth: '140px',buttonGroup: []}" :ruleFormData="ruleFormData" @fnClick="callback"></Form>
|
||||
</div>
|
||||
<div>
|
||||
<h3 style="background: #d4e3fc;padding: 15px 10px;">策略内容</h3>
|
||||
<el-tabs v-model="activeName" class="plr-20">
|
||||
<el-tab-pane label="监控项" name="first">
|
||||
<div v-for="item of firstData">
|
||||
<div class="plr-50">
|
||||
<div v-for="city of item.checkList" class="w100 mt10 mb10 disInlineBlock fontSize15">
|
||||
<div class="disInlineBlock w50">
|
||||
<span style="width: 200px" class="disInlineBlock">{{ city.metricKey }}</span>
|
||||
<span>{{city.metricName}}</span>
|
||||
</div>
|
||||
<div class="disInlineBlock" style="color: #606266">
|
||||
采集周期：<el-select v-model="city['time']" placeholder="请选择" clearable>
|
||||
<el-option v-for="val in timeOptions" :key="val.value" :label="val.label" :value="val.value"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="自动发现项" name="second">
|
||||
<el-collapse v-model="activeTwoName">
|
||||
<el-collapse-item v-for="(item,key,index) of secondData" :title="item.title" :name="index">
|
||||
<template slot="title">
|
||||
<span class="disInlineBlock" style="width: 15%;">{{item.title}}</span>
|
||||
<div style="font-size: 13px;margin-left: 10%;">
|
||||
采集周期：<el-select v-model="item['time']" id="selDisabled" :disabled="key === 'switchNet' ? true : false" clearable placeholder="请选择">
|
||||
<el-option v-for="val in timeOptions" :key="val.value" :label="val.label" :value="val.value"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
<div class="plr-50">
|
||||
<div v-for="city of item.checkList" class="w100 mt10 mb10 disBlock fontSize15">
|
||||
<span style="width: 300px" class="disInlineBlock">{{city.metricKey}}</span>
|
||||
<span>{{city.metricName}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<el-button style="float: right;margin-top: 12px;margin-left: 10px;" @click="cancel">取消</el-button>
|
||||
<el-button type="primary" style="float: right;margin-top: 12px;" @click="submit">提交</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Form from '@/components/form/index.vue';
|
||||
export default {
|
||||
name: "MonitorStrategy",
|
||||
components: {Form},
|
||||
dicts: ['rm_register_resource_type', 'collection_cycle'],
|
||||
props: {
|
||||
open: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
open: {
|
||||
handler(val) {
|
||||
if (!val) {
|
||||
// 清空form
|
||||
this.$refs['formRef'].$refs.ruleForm.resetFields();
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
activeTwoName: [0,1,2,3,4],
|
||||
timeOptions: [],
|
||||
ruleFormData: {},
|
||||
formList: [],
|
||||
firstData: [
|
||||
{checkList: [
|
||||
{id: '1', metricKey: 'sysDescr', metricName: '系统描述', time: ''},
|
||||
{id: '2', metricKey: 'sysObjectID', metricName: '系统ObjectID', time: ''},
|
||||
{id: '3', metricKey: 'sysUpTime', metricName: '系统运行时间', time: ''},
|
||||
{id: '4', metricKey: 'hwStackSystemMac', metricName: '系统MAC地址', time: ''},
|
||||
{id: '5', metricKey: 'entPhysicalSoftwareRev', metricName: '设备软件版本', time: ''},
|
||||
{id: '6', metricKey: 'hwEntityMemUsage', metricName: '设备内存使用率(%)', time: ''},
|
||||
]}
|
||||
],
|
||||
secondData: {
|
||||
switchNet: {title: '网络端口发现', time: '300',
|
||||
checkList: [
|
||||
{id: '11', metricKey: 'ifIndex', metricName: '端口索引'},
|
||||
{id: '12', metricKey: 'ifHCOutOctets', metricName: '端口发送Bites总数'},
|
||||
{id: '13', metricKey: 'ifRevRate', metricName: '端口实时接收速率(bites/sec)'},
|
||||
{id: '14', metricKey: 'ifSentRate', metricName: '端口实时发送速率(bites/sec)'},
|
||||
]
|
||||
},
|
||||
switchModule: {title: '光模块发现', time: '',
|
||||
checkList: [
|
||||
{id: '15', metricKey: 'fiberEntIndex', metricName: '光模块端口索引'},
|
||||
{id: '16', metricKey: 'hwEntityOpticalTxLowThreshold', metricName: '光模块发送光衰阈值(dBm)'},
|
||||
{id: '17', metricKey: 'hwEntityOpticalRxLowThreshold', metricName: '光模块接收光衰阈值(dBm)'},
|
||||
{id: '18', metricKey: 'hwEntityOpticalTxPower', metricName: '光模块发送功率(dBm)'},
|
||||
]
|
||||
},
|
||||
switchMpu: {title: 'MPU发现', time: '',
|
||||
checkList: [
|
||||
{id: '19', metricKey: 'mpuEntIndex', metricName: 'MPU索引'},
|
||||
{id: '20', metricKey: 'mpuEntityCpuUsage', metricName: 'MPU的CPU使用率'},
|
||||
{id: '21', metricKey: 'mpuEntityMemUsage', metricName: 'MPU的内存使用率'},
|
||||
{id: '22', metricKey: 'mpuPhysicalSoftwareRev', metricName: 'MPU的操作系统'},
|
||||
]
|
||||
},
|
||||
switchPwr: {title: '电源发现', time: '',
|
||||
checkList: [
|
||||
{id: '23', metricKey: 'pwrEntIndex', metricName: '电源索引'},
|
||||
{id: '24', metricKey: 'pwrName', metricName: '电源名称'},
|
||||
{id: '25', metricKey: 'pwrEntityPwrState', metricName: '电源状态'},
|
||||
{id: '26', metricKey: 'pwrEntityPwrCurrent', metricName: '电源电流(mA)'},
|
||||
]
|
||||
},
|
||||
switchFan: {title: '风扇发现', time: '',
|
||||
checkList: [
|
||||
{id: '27', metricKey: 'fanEntIndex', metricName: '风扇索引'},
|
||||
{id: '28', metricKey: 'pwrEntityPwrState', metricName: '电源状态'},
|
||||
{id: '29', metricKey: 'pwrEntityPwrCurrent', metricName: '电源电流(mA)'},
|
||||
{id: '30', metricKey: 'pwrEntityPwrVoltage', metricName: '电源电压(mV)'},
|
||||
]
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log('dddd===');
|
||||
this.timeOptions = this.dict.type.collection_cycle;
|
||||
this.fnFormList();
|
||||
},
|
||||
methods: {
|
||||
// formList集合
|
||||
fnFormList(objVal) {
|
||||
this.formList = [{
|
||||
config: {},
|
||||
controls: {
|
||||
id: {label: 'ID',hidden: true},
|
||||
switchName: {label: '策略名称', span: 24, type: 'input', required: true},
|
||||
hardwareSn: {label: '描述', span: 24, type: 'textarea'},
|
||||
resourceType: {label: '交换机类型', span: 24, type: 'select', required: true, options: this.dict.type.rm_register_resource_type},
|
||||
bushu: {label: '部署设备', span: 24, type: 'textarea', rows: 15},
|
||||
}
|
||||
}];
|
||||
},
|
||||
// form验证
|
||||
fnFormValid() {
|
||||
return new Promise((resolve) => {
|
||||
this.ruleFormData = {};
|
||||
const formValid = this.$refs.formRef.$refs.ruleForm;
|
||||
// 3. 操作form（如验证）
|
||||
formValid.validate((valid) => {
|
||||
if (valid) {
|
||||
this.ruleFormData = formValid.model;
|
||||
resolve(true);
|
||||
} else {
|
||||
resolve(false);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
async submit() {
|
||||
if (!await this.fnFormValid()) return;
|
||||
// 监控项
|
||||
let idsList = [];
|
||||
this.firstData.forEach(item => {
|
||||
item && item.checkList.forEach(ids => {
|
||||
if (ids && ids.time) {
|
||||
idsList.push({id: ids.id, collectionCycle: ids.time});
|
||||
}
|
||||
});
|
||||
});
|
||||
// 自动发现项
|
||||
let autoIds = [];
|
||||
Object.keys(this.secondData).forEach(key => {
|
||||
if (this.secondData[key].time) {
|
||||
this.secondData[key] && this.secondData[key].checkList.forEach(ids => {
|
||||
autoIds.push({id: ids.id, collectionCycle: this.secondData[key].time});
|
||||
});
|
||||
}
|
||||
});
|
||||
console.log('ruleFormData===',this.ruleFormData);
|
||||
console.log('idsList===',idsList);
|
||||
console.log('autoIds===',autoIds);
|
||||
this.$emit("dialogResult", {open: false});
|
||||
},
|
||||
cancel() {
|
||||
this.$emit("dialogResult", {open: false});
|
||||
},
|
||||
// 监听事件
|
||||
callback(result, dataVal, formVal) {
|
||||
if (result && result.fnCode) {
|
||||
switch (result.fnCode) {
|
||||
case 'submit':
|
||||
let fnType = addHandle;
|
||||
if (dataVal && dataVal.id) {
|
||||
fnType = updateHandle;
|
||||
}
|
||||
fnType(dataVal).then(response => {
|
||||
this.$modal.msgSuccess(response.msg);
|
||||
this.$router.push("/resource/switchRegister");
|
||||
}).catch(() => {
|
||||
this.$modal.msgError("操作失败")
|
||||
});
|
||||
break;
|
||||
case 'cancel':
|
||||
this.$router.push("/resource/switchRegister");
|
||||
break;
|
||||
default:
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
::v-deep #selDisabled{
|
||||
color: #303133!important;
|
||||
}
|
||||
::v-deep .el-collapse-item__header {
|
||||
background-color: #d4e3fc!important;
|
||||
/*color: #fff!important;*/
|
||||
padding-left: 20px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
</style>
|
||||
105
src/views/resource/serverRegister/secondAutoFind.vue
Normal file
105
src/views/resource/serverRegister/secondAutoFind.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div style="padding: 8px 20px 20px;">
|
||||
<el-collapse v-model="activeShowList" @change="collapseChange">
|
||||
<el-collapse-item v-for="(val,key, index) of secondChartList" :title="`【${val.title}】`" :name="val.title">
|
||||
<div class="mt10 w100">
|
||||
<div class="w100 plr-20" style="font-size: 14px">
|
||||
<div v-for="(item,key,index) of val.formList" :key="`${key}-${index}`" class="w50 disInlineBlock p10">
|
||||
<span class="w50 disInlineBlock">{{item}}</span><span class="w50">{{val.formModel[key] || '-'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="item of val.echartList" :key="`div-${val.title}-${item.title}-${index}`" class="w100 mt20 mb20" style="height: 200px;border-top: 1px solid #d8dce5">
|
||||
<EchartsLine class="w100 h100" :key="`chart-${val.title}-${item.title}-${index}`" :lineData="item && item.dataVal || {}" :dateDataTrans="item.dateDataTrans" :dateShowType="item.dateShowType" :title="item.title || '图表数据'" :chartData="(valData) => chartDataEvent(valData, item.fnEvent,val.title)"></EchartsLine>
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import EchartsLine from "@/components/echartsList/line.vue";
|
||||
export default {
|
||||
name: 'SecondAutoFind',
|
||||
components: {EchartsLine},
|
||||
props: {
|
||||
secondChartList: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
activeNames: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
defaultTimes: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
matchNum: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
activeNames: {
|
||||
handler(val) {
|
||||
console.log('val==',val);
|
||||
this.activeShowList = val;
|
||||
},
|
||||
deep: true,
|
||||
// immediate: true
|
||||
},
|
||||
secondChartList: {
|
||||
handler(val) {
|
||||
console.log('val=000000=',val);
|
||||
},
|
||||
deep: true,
|
||||
// immediate: true
|
||||
},
|
||||
matchNum: {
|
||||
handler(val) {
|
||||
// if (val && val.interfaceName) {
|
||||
// let newData = JSON.parse(JSON.stringify(this.secondChartList));
|
||||
// this.secondChartList[val.interfaceName].echartList = [];
|
||||
// setTimeout(() => {
|
||||
// // this.secondChartList[val.interfaceName].echartList = newData[val.interfaceName].echartList;
|
||||
// },1000);
|
||||
// console.log('val=matchNum=',val,'this.secondChartList=====',this.secondChartList);
|
||||
// }
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeShowList: []
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
collapseChange(val) {
|
||||
this.activeShowList = this.activeNames;
|
||||
this.$emit("collapseChangeData", val);
|
||||
},
|
||||
chartDataEvent(valData, funcName, tabName) {
|
||||
this.$emit("chartFnEvent", valData, funcName, tabName);
|
||||
// // 检查函数是否存在，避免报错
|
||||
// if (typeof this[funcName] === 'function') {
|
||||
// // 调用实际函数，并传递参数（如选中的值、当前项）
|
||||
// // this[funcName]({startTime: valData[0], endTime: valData[1]});
|
||||
// } else {
|
||||
// console.warn(`函数 ${funcName} 未定义`);
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
::v-deep .el-collapse-item__header {
|
||||
background-color: #d4e3fc!important;
|
||||
/*color: #fff!important;*/
|
||||
padding-left: 20px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -30,7 +30,7 @@
|
||||
loading: false,
|
||||
currTimeList: {},
|
||||
defaultTimes: [],
|
||||
activeName: 'second',
|
||||
activeName: 'first',
|
||||
paramsData: {},
|
||||
// 第一栏
|
||||
firstChartTrans: {},
|
||||
|
||||
Reference in New Issue
Block a user