TRKJ/profitManage1.1
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

服务器注册的图形分析功能、服务器收益管理

Browse Source
This commit is contained in:
康冉冉
2025-10-24 18:43:49 +08:00
parent b9f6460e02
commit 5df64af456
10 changed files with 357 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/api/disRevenue/resource.js
View File

@@ -612,71 +612,111 @@ export function networkList(query) {
// 图形监控-基础信息
export function serverMonitorData(data) {
return request({
url: '/rocketmq/systemOtherCollectData/getSwitchMonitorMsg',
url: '/rocketmq/systemOtherCollectData/getMontiorMsg',
method: 'post',
data: data
})
}
// 图形监控-设备cpu使用率
export function serverCpuData(data) {
// 图形监控-cpu负载
export function cpuLoadData(data) {
return request({
url: '/rocketmq/systemOtherCollectData/getSwitchCpuUseMsg',
url: '/rocketmq/cpuInfo/cpuLoadEcharts',
method: 'post',
data: data
})
}
// 图形监控-设备内存使用率
export function serverMemData(data) {
// 图形监控-cpu时间
export function cpuTimeData(data) {
return request({
url: '/rocketmq/systemOtherCollectData/getSwitchMemUseMsg',
url: '/rocketmq/cpuInfo/cpuTimeEcharts',
method: 'post',
data: data
})
}
// 图形监控-功率
export function serverPowerData(data) {
// 图形监控-进程
export function procNum(data) {
return request({
url: '/rocketmq/systemOtherCollectData/getSwitchPowerMsg',
url: '/rocketmq/systemOtherCollectData/procNumEcharts',
method: 'post',
data: data
})
}
// 图形监控-自动发现项-基础信息
export function serverNetDetails(data) {
// 图形监控-登录用户数
export function serverUserNum(data) {
return request({
url: '/rocketmq/switchInfo/getSwitchNetDetailsMsg',
url: '/rocketmq/systemOtherCollectData/systemUserNumEcharts',
method: 'post',
data: data
})
}
// 图形监控-自动发现项-丢包
export function serverNetDiscards(data) {
// 图形监控-交换卷/文件的可用空间
export function swapSizeFree(data) {
return request({
url: '/rocketmq/systemOtherCollectData/switchNetDiscardsEcharts',
url: '/rocketmq/systemOtherCollectData/systemSwapSizeFreeEcharts',
method: 'post',
data: data
})
}
// 图形监控-自动发现项-总流量
export function serverNeTotal(data) {
// 图形监控-内存利用率
export function memoryUtilization(data) {
return request({
url: '/rocketmq/systemOtherCollectData/switchNetTotalEcharts',
url: '/rocketmq/systemOtherCollectData/memoryUtilizationEcharts',
method: 'post',
data: data
})
}
// 图形监控-自动发现项-错误丢包
export function serverNetErrDiscard(data) {
// 图形监控-可用交换空间百分比
export function swapSizePercent(data) {
return request({
url: '/rocketmq/systemOtherCollectData/switchNetErrDiscardsEcharts',
url: '/rocketmq/systemOtherCollectData/systemSwapSizePercentEcharts',
method: 'post',
data: data
})
}
// 图形监控-自动发现项-实时流量
export function serverNetSpeed(data) {
// 图形监控-可用内存
export function memorySizeAvailable(data) {
return request({
url: '/rocketmq/systemOtherCollectData/switchNetSpeedEcharts',
url: '/rocketmq/systemOtherCollectData/memorySizeAvailableEcharts',
method: 'post',
data: data
})
}
// 图形监控-可用内存百分比
export function memorySizePercent(data) {
return request({
url: '/rocketmq/systemOtherCollectData/memorySizePercentEcharts',
method: 'post',
data: data
})
}
// 图形监控-所有挂载名称
export function mountNameList(data) {
return request({
url: '/rocketmq/mountPointInfo/getAllMountName',
method: 'post',
data: data
})
}
// 图形监控-自动发现项-挂载的-基础信息
export function pointDetails(data) {
return request({
url: '/rocketmq/mountPointInfo/pointDetailsMsg',
method: 'post',
data: data
})
}
// 图形监控-自动发现项-挂载的-空间
export function spaceEcharts(data) {
return request({
url: '/rocketmq/mountPointInfo/spaceEcharts',
method: 'post',
data: data
})
}
// 图形监控-自动发现项-挂载的-空间利用率
export function spaceRate(data) {
return request({
url: '/rocketmq/mountPointInfo/spaceRateEcharts',
method: 'post',
data: data
})

12
src/components/echartsList/line.vue
View File

@@ -71,18 +71,18 @@
titleList = Object.assign({},titleList, dataXY.titleVal);
}
let series = [];
if (dataXY && dataXY.dataList) {
if (dataXY && dataXY.dataList && dataXY.dataList.length > 0) {
dataXY.dataList.forEach(item => {
series.push({
name: item.name,
name: item && item.name || '',
type: 'line',
stack: 'Total',
data: item.data
data: item && item.data || []
});
});
} else {
series = [{
data: dataXY.data,
data: dataXY && dataXY.data || [],
type: 'line',
smooth: true,
// areaStyle: { // 阴影
@@ -135,13 +135,13 @@
},
// lineHeight: 10, // 行高（确保换行后不重叠）
},
data: dataXY.lineXData
data: dataXY && dataXY.lineXData || []
},
yAxis: {
type: 'value',
name: dataXY?.yAxisName || '单位Mbps',
min: 0, // 自定义最小刻度（根据业务需求调整，如 0）
max: dataXY && dataXY.data && dataXY.data.length > 0 ? null : dataXY.dataList && dataXY.dataList[0] && dataXY.dataList[0].data.length > 0 ? null : 100,
max: dataXY && dataXY.data && dataXY.data.length > 0 ? null : dataXY && dataXY.dataList && dataXY.dataList[0] && dataXY.dataList[0].data.length > 0 ? null : 100,
splitLine: {
show: true,
},

2
src/views/earnManage/server/details.vue
View File

@@ -32,7 +32,7 @@
config: {title: '基本信息'},
controls: {
id: {label: 'ID',hidden: true},
nodeName: {label: '节点名称', span: 12, type: 'select',options:[],
clientId: {label: 'ClientID', span: 12, type: 'select',options:[],
rules: [{required: true, message: '请选择节点名称', trigger: 'change'}]},
businessName: {label: '业务名称', span: 12, style: 'display: block;', type: 'select', options:[], eventName: 'change',
rules: [{required: true, message: '请选择业务名称', trigger: 'change'}]},

9
src/views/earnManage/server/relevantData.vue
View File

@@ -47,13 +47,14 @@
type = true;
}
this. columns = [
{label: `业务名称`, minWidth: '120', prop: 'businessName',visible: true},
{label: `时间`,minWidth: '160', prop: 'createTime', visible: !type},
{label: `业务代码`, minWidth: '120', prop: 'businessId',visible: true},
{label: `95带宽值Mbps/日`, prop: 'bandwidth95Daily', slotName: true, visible: type},
{label: `有效95带宽值Mbps/日`, prop: 'effectiveAvgMonthlyBandwidth95', slotName: true, visible: type},
{label: `包端带宽值Mbps/日`, prop: 'packageBandwidthDaily', slotName: true, visible: type},
{label: `95带宽值/日(Mbit)`, prop: 'bandwidth95Daily', slotName: true, visible: type},
// {label: `有效95带宽值Mbps/日`, prop: 'effectiveAvgMonthlyBandwidth95', slotName: true, visible: type},
// {label: `包端带宽值Mbps/日`, prop: 'packageBandwidthDaily', slotName: true, visible: type},
{label: `流量端口`, prop: 'name', width: '550', visible: !type},
{label: `发送流量值（bytes/s）`, minWidth: '150', prop: 'outSpeed', visible: !type},
{label: `金山API记录的发送流量值（bites/s）`, minWidth: '250', prop: 'machineCode', visible: !type},
];
},
/** 查询角色列表 */

48
src/views/earnManage/server/serverTabs.vue
View File

@@ -2,10 +2,10 @@
<div class="pageTopForm">
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" size="small" label-width="80px" class="demo-ruleForm">
<el-col :span="8">
<el-form-item label="节点名称" prop="nodeName">
<el-form-item label="ClientID" prop="clientId">
<el-input
v-model="queryParams.nodeName"
placeholder="节点名称"
v-model="queryParams.clientId"
placeholder="请输入ClientID"
clearable
@keyup.enter.native="handleQuery">
</el-input>
@@ -109,17 +109,22 @@
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="硬件SN" prop="hardwareSn">
<el-input
v-model="queryParams.hardwareSn"
placeholder="请输入硬件SN"
clearable
@keyup.enter.native="handleQuery"
/>
<el-form-item label="业务名称" prop="businessName">
<el-select
v-model="queryParams.businessName"
placeholder="请选择业务名称"
clearable>
<el-option
v-for="dict in dict.type.eps_bandwidth_type"
: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">
<!-- 暂时不需要提交 v-hasPermi="['system:bandwidth:list']" -->
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
@@ -169,19 +174,20 @@
// 列显隐信息
columns: {
id: {label: `ID`},
nodeName: {label: `节点名称`, minWidth: '250', visible: true},
clientId: {label: `ClientID`, minWidth: '250', visible: true},
hardwareSn: {label: `硬件SN`, minWidth: '350'},
uplinkSwitch: {label: `上联交换机`, minWidth: '150'},
businessName: {label: `业务名称`, minWidth: '150', visible: true},
businessId: {label: `业务代码`, minWidth: '150'},
businessName: {label: `业务名称`, minWidth: '150'},
bandwidth95Daily: {label: `95带宽值Mbps/日`, minWidth: '200', slotName: 'tempDay',visible: true},
effectiveBandwidth95Daily: {label: `有效95带宽值Mbps/日`, minWidth: '200', slotName: 'tempDay', visible: true},
packageBandwidthDaily: {label: `包端带宽值Mbps/日`, minWidth: '200', slotName: 'tempDay',visible: true},
bandwidth95Monthly: {label: `95带宽值Mbps/月`, minWidth: '200', slotName: 'tempMonth'},
// customerName: {label: `设备业务客户`,visible: true},
avgMonthlyBandwidth95: {label: `月均日95值Mbps`, minWidth: '200',slotName: 'tempDay'},
effectiveBandwidth95Monthly: {label: `有效95带宽值Mbps/月`, minWidth: '200', slotName: 'tempMonth'},
effectiveAvgMonthlyBandwidth95: {label: `有效月均日95值Mbps`, minWidth: '200', slotName: 'tempDay'},
bandwidth95Daily: {label: `95带宽值/日(Mbit)`, minWidth: '200', slotName: 'tempDay',visible: true},
bandwidth95Monthly: {label: `95带宽值/月(Mbit)`, minWidth: '200', slotName: 'tempMonth',visible: true},
avgMonthlyBandwidth95: {label: `月均日95值(Mbit)`, minWidth: '200',slotName: 'tempDay',visible: true},
machineCode: {label: `金山machineCode`, minWidth: '150',visible: true},
uplinkSwitch: {label: `上联交换机`, minWidth: '150'},
uplinkSwitchPort: {label: `上联交换机端口`, minWidth: '150'},
// effectiveBandwidth95Daily: {label: `有效95带宽值Mbps/日`, minWidth: '200', slotName: 'tempDay', visible: true},
// packageBandwidthDaily: {label: `包端带宽值Mbps/日`, minWidth: '200', slotName: 'tempDay',visible: true},
// effectiveBandwidth95Monthly: {label: `有效95带宽值Mbps/月`, minWidth: '200', slotName: 'tempMonth'},
// effectiveAvgMonthlyBandwidth95: {label: `有效月均日95值Mbps`, minWidth: '200', slotName: 'tempDay'},
createDatetime: {label: `创建时间`, minWidth: '150'},
},
config: {

2
src/views/resource/serverRegister/firstMonitor.vue
View File

@@ -7,7 +7,7 @@
</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 && item.dataVal" :dateDataTrans="item.dateDataTrans" :dateShowType="item.dateShowType" :title="item.title" :chartData="(valData) => chartDataEvent(valData, item.fnEvent)"></EchartsLine>
<EchartsLine class="w100 h100" :lineData="item && item.dataVal" :dateDataTrans="item && item.dateDataTrans" :dateShowType="item && item.dateShowType" :title="item && item.title" :chartData="(valData) => chartDataEvent(valData, item.fnEvent)"></EchartsLine>
</div>
</div>
</template>

25
src/views/resource/serverRegister/index.vue
View File

@@ -216,8 +216,7 @@
{content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'resource:serverRegister:export'},
],
line: [
//showName: 'multiPublicIpStatus', showVal: '0',
{content: '选择公网业务IP', fnCode: 'pubilcNet', type: 'text', icon: 'el-icon-thumb', hasPermi: 'resource:serverRegister:pubilcNet'},
{content: '选择公网业务IP', fnCode: 'pubilcNet', type: 'text', icon: 'el-icon-thumb', showName: 'multiPublicIpStatus', showVal: '0', 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: [
@@ -332,7 +331,7 @@
case 'echartView':
this.$router.push({
path:'/resource/serverRegister/monitorChart',
query: {clientId: rowData.hardwareSn}
query: {clientId: rowData.clientId}
});
break;
case 'result':
@@ -347,6 +346,12 @@
case 'pubilcNet':
this.pubilcNetOpen = true;
this.pubilcNetRuleForm = {publicIp: [],mgmtIp: '', descriptionOne: '', descriptionTwo: ''};
this.$nextTick(() => {
// 5. 最后执行重置
if (this.$refs['publicNetFormRef']?.$refs.ruleForm) {
this.$refs['publicNetFormRef'].$refs.ruleForm.resetFields();
}
});
networkList({clientId: rowData.clientId}).then(res => {
let ipList = [];
res && res.data.map(item => {
@@ -358,9 +363,9 @@
});
break;
case 'publicIp':
let content = '';
this.pubilcNetRuleForm = Object.assign({}, this.pubilcNetRuleForm, this.$refs.publicNetFormRef.$refs.ruleForm.model);
if (rowData && rowData.length > 0) {
this.pubilcNetRuleForm = Object.assign({}, this.pubilcNetRuleForm, this.$refs.publicNetFormRef.$refs.ruleForm.model);
let content = '';
rowData.forEach(item => {
content+= '运营商：' + this.ipContentList[item].isp + '<br>' + '省：' + this.ipContentList[item].province + '<br>'
+ '市：' + this.ipContentList[item].city + '<br>' + '公网IP：' + this.ipContentList[item].publicIp + '<br>'
@@ -368,20 +373,20 @@
+ '接口类型：' + this.ipContentList[item].interfaceType + '<br>' + 'IPv4地址：' + this.ipContentList[item].ipv4Address + '<br>'
+ '网关：' + this.ipContentList[item].gateway + '<br><br>';
});
this.$set(this.pubilcNetRuleForm, 'descriptionOne', content);
}
this.$set(this.pubilcNetRuleForm, 'descriptionOne', content);
break;
case 'mgmtIp':
let contentTow = '';
this.pubilcNetRuleForm = Object.assign({}, this.pubilcNetRuleForm, this.$refs.publicNetFormRef.$refs.ruleForm.model);
if (rowData) {
this.pubilcNetRuleForm = Object.assign({}, this.pubilcNetRuleForm, this.$refs.publicNetFormRef.$refs.ruleForm.model);
let content = '';
content+= '运营商：' + this.ipContentList[rowData].isp + '<br>' + '省：' + this.ipContentList[rowData].province + '<br>'
contentTow+= '运营商：' + this.ipContentList[rowData].isp + '<br>' + '省：' + this.ipContentList[rowData].province + '<br>'
+ '市：' + this.ipContentList[rowData].city + '<br>' + '公网IP：' + this.ipContentList[rowData].publicIp + '<br>'
+ '接口名称：' + this.ipContentList[rowData].interfaceName + '<br>' + 'mac地址：' + this.ipContentList[rowData].macAddress + '<br>'
+ '接口类型：' + this.ipContentList[rowData].interfaceType + '<br>' + 'IPv4地址：' + this.ipContentList[rowData].ipv4Address + '<br>'
+ '网关：' + this.ipContentList[rowData].gateway + '<br><br>';
this.$set(this.pubilcNetRuleForm, 'descriptionTwo', content);
}
this.$set(this.pubilcNetRuleForm, 'descriptionTwo', contentTow);
break;
case 'issueBusiness':
this.issueOpen = true;

382
src/views/resource/serverRegister/monitorChart.vue
View File

@@ -8,7 +8,7 @@
</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>
<SecondAutoFind v-if="loading" :secondChartList="secondChartList" :activeNames="activeNames" @collapseChangeData="collapseChangeData" @chartFnEvent="chartFnEvent"></SecondAutoFind>
</template>
</el-tab-pane>
</el-tabs>
@@ -21,21 +21,21 @@
<script>
import FirstMonitor from "./firstMonitor";
import SecondAutoFind from "./secondAutoFind";
import {switchMonitorData, switchCpuData, switchMemData,switchPowerData, postInterFaceName, switchNetDetails,switchNetDiscards,switchNeTotal,switchNetErrDiscard, switchNetSpeed} from "@/api/disRevenue/resource"
import {serverMonitorData, cpuLoadData, cpuTimeData, procNum, serverUserNum, swapSizeFree, memoryUtilization, swapSizePercent, memorySizeAvailable, memorySizePercent, mountNameList, pointDetails, spaceEcharts, spaceRate} from "@/api/disRevenue/resource"
export default {
name: "MonitorChart",
name: "serverMonitorChart",
components: {FirstMonitor, SecondAutoFind},
data() {
return {
loading: false,
currTimeList: {},
defaultTimes: [],
activeName: 'first',
activeName: 'second',
paramsData: {},
// 第一栏
firstChartTrans: {},
formFirst: {
cpuNum: 'CPU数量', sysLocation: '操作系统', sysObjectID: '操作系统架构', hwStackSystemMac: '最大进程数', sysUpTime: '硬盘',
cpuNum: 'CPU数量', sysLocation: '操作系统', sysObjectID: '操作系统架构', hwStackSystemMac: '最大进程数', sysUpTime: '硬盘-总可用空间',
entPhysicalName: '系统启动时间', sysContact: '系统描述', entPhysicalSoftwareRev: '系统正确运行时间', sysName: '系统本地时间', sysDescr: '总内存'
},
formData: {},
@@ -203,74 +203,16 @@
}
},
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'},
mount: {
title: '挂载文件系统',
formList: {name: '文件系统类型'},
formModel: {name: 'vfs'},
echartFors: [
{title: 'sabc的光衰阈值(dBm)', oneName: '光模块发送光衰阈值', twoName: '光模块接收光衰阈值'},
{title: 'sabc的功率(dBm)', oneName: '光模块接收功率', twoName: '光模块发送功率'}
{title: '的空间(KB)', oneName: '可用空间', twoName: '总空间'},
{title: '的空间利用率(%)', oneName: '空间利用率'},
],
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: []
}
},
}
},
@@ -293,10 +235,16 @@
this.loading = false;
if (this.activeName === 'first') {
await Promise.all([
this.getMonitorData(),
this.getCpuData(),
this.getMemData(),
this.getPowerData()
this.getMonitorData(this.currTimeList),
this.getCpuLoadData(this.currTimeList),
this.getCpuTimeData(this.currTimeList),
this.getProcNumData(this.currTimeList),
this.getUserNumData(this.currTimeList),
this.getSwapSizeFreeData(this.currTimeList),
this.getMemoryUtilizationData(this.currTimeList),
this.getSwapSizePercentData(this.currTimeList),
this.getMemorySizeAvailableData(this.currTimeList),
this.getMemorySizePercentData(this.currTimeList),
]);
this.loading = true;
} else {
@@ -306,20 +254,24 @@
},
getMonitorData() {
this.formData = {formFirst: this.formFirst};
switchMonitorData({clientId: this.paramsData.clientId}).then(res => {
serverMonitorData({clientId: this.paramsData.clientId}).then(res => {
if (res && res.data) {
this.formData['formValue'] = res.data;
}
});
},
getCpuData(val) {
getCpuLoadData(val) {
let cpuData = JSON.parse(JSON.stringify(this.resultData[0]));
switchCpuData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
cpuData['fnEvent'] = 'getCpuData';
cpuLoadData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
cpuData['fnEvent'] = 'getCpuLoadData';
cpuData.dateDataTrans['dateRange'] = this.defaultTimes;
if (res && res.data) {
cpuData.dataVal.lineXData = res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
cpuData.dataVal.lineXData = res && 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'] : [];
cpuData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['load1Data'] && res.data['yData']['load1Data'].length > 0 ? res.data['yData']['load1Data'] : [];
cpuData.dataVal.dataList[1].data = res && res.data && res.data['yData'] && res.data['yData']['load5Data'] && res.data['yData']['load5Data'].length > 0 ? res.data['yData']['load5Data'] : [];
cpuData.dataVal.dataList[2].data = res && res.data && res.data['yData'] && res.data['yData']['load15Data'] && res.data['yData']['load15Data'].length > 0 ? res.data['yData']['load15Data'] : [];
cpuData.dataVal.dataList[3].data = res && res.data && res.data['yData'] && res.data['yData']['utiData'] && res.data['yData']['utiData'].length > 0 ? res.data['yData']['utiData'] : [];
}
// this.firstChartList[0] = cpuData;
this.$set(this.firstChartList, 0, cpuData);
@@ -327,14 +279,20 @@
this.firstChartList[0] = cpuData;
});
},
getMemData(val) {
getCpuTimeData(val) {
let memData = JSON.parse(JSON.stringify(this.resultData[1]));
switchMemData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
memData['fnEvent'] = 'getMemData';
cpuTimeData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
memData['fnEvent'] = 'getCpuTimeData';
memData.dateDataTrans['dateRange'] = this.defaultTimes;
if (res && res.data) {
memData.dataVal.lineXData = res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
memData.dataVal.lineXData = res && 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'] : [];
memData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['normalData'] && res.data['yData']['normalData'].length > 0 ? res.data['yData']['normalData'] : [];
memData.dataVal.dataList[1].data = res && res.data && res.data['yData'] && res.data['yData']['idleData'] && res.data['yData']['idleData'].length > 0 ? res.data['yData']['idleData'] : [];
memData.dataVal.dataList[2].data = res && res.data && res.data['yData'] && res.data['yData']['iowaitData'] && res.data['yData']['iowaitData'].length > 0 ? res.data['yData']['iowaitData'] : [];
memData.dataVal.dataList[3].data = res && res.data && res.data['yData'] && res.data['yData']['norespData'] && res.data['yData']['norespData'].length > 0 ? res.data['yData']['norespData'] : [];
memData.dataVal.dataList[4].data = res && res.data && res.data['yData'] && res.data['yData']['switchMemUse'] && res.data['yData']['switchMemUse'].length > 0 ? res.data['yData']['switchMemUse'] : [];
memData.dataVal.dataList[5].data = res && res.data && res.data['yData'] && res.data['yData']['userpData'] && res.data['yData']['userpData'].length > 0 ? res.data['yData']['userpData'] : [];
}
// this.firstChartList[1] = memData;
this.$set(this.firstChartList, 1, memData);
@@ -342,119 +300,194 @@
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';
getProcNumData(val) {
let procData = JSON.parse(JSON.stringify(this.resultData[2]));
procNum(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
procData['fnEvent'] = 'getProcNumData';
procData.dateDataTrans['dateRange'] = this.defaultTimes;
if (res && res.data) {
powerData.dataVal.lineXData = res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
procData.dataVal.lineXData = res && 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'] : [];
procData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['procNumRunData'] && res.data['yData']['procNumRunData'].length > 0 ? res.data['yData']['procNumRunData'] : [];
procData.dataVal.dataList[1].data = res && res.data && res.data['yData'] && res.data['yData']['procNumData'] && res.data['yData']['procNumData'].length > 0 ? res.data['yData']['procNumData'] : [];
}
// this.firstChartList[2] = powerData;
this.$set(this.firstChartList, 2, powerData);
this.$set(this.firstChartList, 2, procData);
}).catch(() => {
this.firstChartList[2] = powerData;
this.firstChartList[2] = procData;
});
},
getUserNumData(val) {
let userNumData = JSON.parse(JSON.stringify(this.resultData[3]));
serverUserNum(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
userNumData['fnEvent'] = 'getUserNumData';
userNumData.dateDataTrans['dateRange'] = this.defaultTimes;
if (res && res.data) {
userNumData.dataVal.lineXData = res && 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'] : [];
userNumData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['switchAvgPower'] && res.data['yData']['switchAvgPower'].length > 0 ? res.data['yData']['switchAvgPower'] : [];
}
// this.firstChartList[2] = powerData;
this.$set(this.firstChartList, 3, userNumData);
}).catch(() => {
this.firstChartList[3] = userNumData;
});
},
getSwapSizeFreeData(val) {
let swapSizeFreeData = JSON.parse(JSON.stringify(this.resultData[4]));
swapSizeFree(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
swapSizeFreeData['fnEvent'] = 'getSwapSizeFreeData';
swapSizeFreeData.dateDataTrans['dateRange'] = this.defaultTimes;
if (res && res.data) {
swapSizeFreeData.dataVal.lineXData = res && 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'] : [];
swapSizeFreeData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['usersNumData'] && res.data['yData']['usersNumData'].length > 0 ? res.data['yData']['usersNumData'] : [];
}
// this.firstChartList[2] = powerData;
this.$set(this.firstChartList, 4, swapSizeFreeData);
}).catch(() => {
this.firstChartList[4] = swapSizeFreeData;
});
},
getMemoryUtilizationData(val) {
let memoryUtilizaData = JSON.parse(JSON.stringify(this.resultData[5]));
memoryUtilization(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
memoryUtilizaData['fnEvent'] = 'getMemoryUtilizationData';
memoryUtilizaData.dateDataTrans['dateRange'] = this.defaultTimes;
if (res && res.data) {
memoryUtilizaData.dataVal.lineXData = res && 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'] : [];
memoryUtilizaData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['memoryUtilizationData'] && res.data['yData']['memoryUtilizationData'].length > 0 ? res.data['yData']['memoryUtilizationData'] : [];
}
// this.firstChartList[2] = powerData;
this.$set(this.firstChartList, 5, memoryUtilizaData);
}).catch(() => {
this.firstChartList[5] = memoryUtilizaData;
});
},
getSwapSizePercentData(val) {
let swapSizePercentData = JSON.parse(JSON.stringify(this.resultData[6]));
swapSizePercent(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
swapSizePercentData['fnEvent'] = 'getSwapSizePercentData';
swapSizePercentData.dateDataTrans['dateRange'] = this.defaultTimes;
if (res && res.data) {
swapSizePercentData.dataVal.lineXData = res && 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'] : [];
swapSizePercentData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['swapSizePercentData'] && res.data['yData']['swapSizePercentData'].length > 0 ? res.data['yData']['swapSizePercentData'] : [];
}
// this.firstChartList[2] = powerData;
this.$set(this.firstChartList, 6, swapSizePercentData);
}).catch(() => {
this.firstChartList[6] = swapSizePercentData;
});
},
getMemorySizeAvailableData(val) {
let memorySizeAvailData = JSON.parse(JSON.stringify(this.resultData[7]));
memorySizeAvailable(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
memorySizeAvailData['fnEvent'] = 'getMemorySizeAvailableData';
memorySizeAvailData.dateDataTrans['dateRange'] = this.defaultTimes;
if (res && res.data) {
memorySizeAvailData.dataVal.lineXData = res && 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'] : [];
memorySizeAvailData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['memorySizeAvailableData'] && res.data['yData']['memorySizeAvailableData'].length > 0 ? res.data['yData']['memorySizeAvailableData'] : [];
}
// this.firstChartList[2] = powerData;
this.$set(this.firstChartList, 7, memorySizeAvailData);
}).catch(() => {
this.firstChartList[7] = memorySizeAvailData;
});
},
getMemorySizePercentData(val) {
let memorySizePercentData = JSON.parse(JSON.stringify(this.resultData[8]));
memorySizePercent(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
memorySizePercentData['fnEvent'] = 'getMemorySizePercentData';
memorySizePercentData.dateDataTrans['dateRange'] = this.defaultTimes;
if (res && res.data) {
memorySizePercentData.dataVal.lineXData = res && 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'] : [];
memorySizePercentData.dataVal.dataList[0].data = res && res.data && res.data['yData'] && res.data['yData']['memorySizePercentData'] && res.data['yData']['memorySizePercentData'].length > 0 ? res.data['yData']['memorySizePercentData'] : []
}
// this.firstChartList[2] = powerData;
this.$set(this.firstChartList, 8, memorySizePercentData);
}).catch(() => {
this.firstChartList[8] = memorySizePercentData;
});
},
// two
// 接口名称
async fnInterFaceNameList(val) {
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);
}
mountNameList({clientId: this.paramsData.clientId}).then(res => {
if (res && res.data && res.data.length > 0) {
let tabNameList = {};
res && res.data.forEach(async(item,index) => {
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['mount']));
oneData.title = item && item.mount;
tabNameList[item.mount] = oneData;
});
// });
} catch (error) {
this.$modal.closeLoading();
console.error('获取接口名称列表失败：', error);
this.secondChartList = {...tabNameList};
console.log('secondChartList===',this.secondChartList);
this.activeNames = [Object.keys(tabNameList)[0]];
this.getPointDetailsData(Object.keys(tabNameList)[0]);
this.getSpaceEcharts(this.currTimeList ,Object.keys(tabNameList)[0]);
this.getSpaceRate(this.currTimeList ,Object.keys(tabNameList)[0]);
}
}).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;
}
getPointDetailsData(titleName) {
pointDetails({clientId: this.paramsData.clientId, mount: titleName}).then(res => {
this.secondChartList[titleName].formModel = res && 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, []);
// 空间
getSpaceEcharts(times,titleName) {
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
let mountEcharts = JSON.parse(JSON.stringify(this.echartData));
let content = JSON.parse(JSON.stringify(this.linuxSystem['mount']));
console.log('content==',content);
mountEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
mountEcharts.fnEvent = 'getSpaceEcharts';
spaceEcharts(Object.assign({}, {mount : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
if (res && res.data) {
this.eventDataMap['interfaceName'] = false;
netEcharts.title = `${interfaceName}的丢包数`;
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 || []
mountEcharts.title = titleName + content.echartFors[0].title;
mountEcharts.dataVal.lineXData = res.data && res.data.xData || [];
mountEcharts.dataVal.dataList[0] = {
name: content.echartFors[0].oneName,
data: res.data && res.data.yData['vfsFreeData'] || []
};
// 出
netEcharts.dataVal.dataList[1] = {
name: this.secondChartList[interfaceName].echartFors[0].twoName,
data: res.data.yData?.netOutDiscardsData || []
mountEcharts.dataVal.dataList[1] = {
name: content.echartFors[0].twoName,
data: res.data && res.data.yData['vfsTotalData'] || []
};
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));
}
}
mountCollect['echartList'][0] = mountEcharts;
this.$set(this.secondChartList, titleName, mountCollect);
});
},
// 总数
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 => {
// 空间利用率
getSpaceRate(times,titleName) {
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
let mountEcharts = JSON.parse(JSON.stringify(this.echartData));
let content = JSON.parse(JSON.stringify(this.linuxSystem['mount']));
console.log('content==vvv===',content);
mountEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
mountEcharts.fnEvent = 'getSpaceRate';
spaceRate(Object.assign({}, {mount : titleName,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 || []
mountEcharts.title = titleName + content.echartFors[1].title;
mountEcharts.dataVal.lineXData = res.data && res.data.xData || [];
mountEcharts.dataVal.dataList[0] = {
name: content.echartFors[1].oneName,
data: res.data && res.data.yData['vfsUtilData'] || []
};
// 出
netEcharts.dataVal.dataList[1] = {
name: this.secondChartList[interfaceName].echartFors[1].twoName,
data: res.data.yData?.netOutTotalData || []
};
this.$set(this.secondChartList[interfaceName].echartList, 1, netEcharts);
}
mountCollect['echartList'][1] = mountEcharts;
this.$set(this.secondChartList, titleName, mountCollect);
});
},
// 错误丢包
@@ -511,14 +544,15 @@
this.firstChartTrans = valData;
// 检查函数是否存在，避免报错
if (typeof this[fnName] === 'function') {
this.defaultTimes = valData.timeArr;
// 调用实际函数，并传递参数（如选中的值、当前项）
this[fnName]({startTime: valData.timeArr[0], endTime: valData.timeArr[1]}, {interfaceName: tabName});
this[fnName]({startTime: valData.timeArr[0], endTime: valData.timeArr[1]}, tabName);
} else {
console.warn(`函数 ${fnName} 未定义`);
}
},
goBack() {
this.$router.push("/resource/switchRegister");
this.$router.push("/resource/serverRegister");
}
}
}

36
src/views/resource/serverRegister/secondAutoFind.vue
View File

@@ -1,15 +1,15 @@
<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">
<el-collapse-item v-for="(val,key, index) of secondChartList" :title="`【${val && val.title || ''}】`" :name="val && 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 v-for="(item,key,index) of val && val.formList || []" :key="`${key}-${index}`" class="w50 disInlineBlock p10">
<span class="w50 disInlineBlock">{{item}}</span><span class="w50">{{val && 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 v-for="item of val && val.echartList || []" :key="`div-${val && val.title || ''}-${item && item.title || ''}-${index}`" class="w100 mt20 mb20" style="height: 200px;border-top: 1px solid #d8dce5">
<EchartsLine class="w100 h100" :key="`chart-${val && val.title || ''}-${item && item.title || ''}-${index}`" :lineData="item && item.dataVal || {}" :dateDataTrans="item && item.dateDataTrans || {}" :dateShowType="item && item.dateShowType || 'datetimerange'" :title="item && item.title || '图表数据'" :chartData="(valData) => chartDataEvent(valData, item.fnEvent,val.title)"></EchartsLine>
</div>
</div>
</el-collapse-item>
@@ -31,19 +31,11 @@
type: Array,
default: () => []
},
defaultTimes: {
type: Array,
default: () => []
},
matchNum: {
type: Object,
default: () => {}
}
},
watch: {
activeNames: {
handler(val) {
console.log('val==',val);
// console.log('val==',val);
this.activeShowList = val;
},
deep: true,
@@ -51,25 +43,11 @@
},
secondChartList: {
handler(val) {
console.log('val=000000=',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 {

42
src/views/resource/topology/details.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="app-container">
<Form :formList="formList" :ruleFormData="ruleForm" :config="{labelWidth: '140px'}" @fnClick="callback"></Form>
<Form ref="formRef" :formList="formList" :ruleFormData="ruleForm" :config="{labelWidth: '140px'}" @fnClick="callback"></Form>
</div>
</template>
<script setup>
import Form from '@/components/form/index.vue';
import {listHandle, resNameBtType, addTopology, getTopology, updateTopology, postInterFaceName} from "@/api/disRevenue/resource"
import {listAllSwitchName, resNameBtType, addTopology, getTopology, updateTopology, postInterFaceName} from "@/api/disRevenue/resource"
export default {
name: 'TopologyDetails',
components: {Form},
@@ -41,7 +41,7 @@
config: {title: '基本信息',labelWidth: '140px'},
controls: {
id: {label: 'ID',hidden: true},
switchName: {label: '交换机名称', span: 12, type: 'select', eventName: 'change', options:[], required: true},
clientId: {label: '交换机名称', span: 12, type: 'select', eventName: 'change', options:[], required: true},
interfaceName: {label: '接口名称', span: 12, type: 'select', options:[],required: true},
connectedDeviceType: {label: '接口连接设备类型', span: 12, type: 'radio', options:this.dict.type.rm_topology_type, required: true},
serverClientId: {label: '服务器ClientID', span: 12, eventName: 'change', options:[], type: 'select'},
@@ -51,16 +51,18 @@
},
// 获取交换机下拉
switchList() {
resNameBtType({resourceType: 2}).then(val => {
this.switchNameList = val && val;
this.formList[0].controls.switchName['options'] = val && val.map(item => {
if (this.paramsData && this.paramsData.id) {
if (item.resourceName === this.ruleForm.switchName) {
this.fnInterFaceNameList({switchIp: item.ipAddress});
listAllSwitchName({}).then(val => {
if(val && val.data) {
this.switchNameList = val && val.data;
this.formList[0].controls.clientId['options'] = val && val.data.map(item => {
if (this.paramsData && this.paramsData.id) {
if (item.clientId === this.ruleForm.clientId) {
this.fnInterFaceNameList({switchIp: item.snmpAddress});
}
}
}
return Object.assign({label: item.resourceName, value: item.resourceName});
});
return Object.assign({label: item.switchName, value: item.clientId});
});
}
});
},
// 接口名称
@@ -109,13 +111,15 @@
callback(result, dataVal, formVal) {
if (result && result.fnCode) {
switch (result.fnCode) {
case 'switchName':
case 'clientId':
this.ruleForm = Object.assign({}, this.ruleForm, this.$refs.formRef.$refs.ruleForm.model);
let switchIp = '';
this.switchNameList.find(item => {
if (item.resourceName === dataVal) {
switchIp = item.ipAddress;
if (item.clientId === dataVal) {
switchIp = item.snmpAddress;
}
});
this.ruleForm['interfaceName'] = '';
this.fnInterFaceNameList({switchIp: switchIp});
break;
case 'serverClientId':
@@ -129,10 +133,8 @@
break;
case 'submit':
this.switchNameList.find(item => {
if (item.resourceName === dataVal['switchName'] || item.resourceName === dataVal['switchName']) {
dataVal['switchName'] = item.resourceName;
dataVal['switchIpAddress'] = item.ipAddress;
dataVal['switchSn'] = item.hardwareSn;
if (item.clientId === dataVal['clientId']) {
dataVal['switchName'] = item.switchName;
}
});
this.serverNameList.find(item => {
@@ -159,7 +161,7 @@
this.loading = true;
fnType(dataVal).then(response => {
this.$modal.msgSuccess(response.msg);
this.$router.push("/resource/topology")
this.$router.push("/resource/topology");
this.loading = false;
}).catch(() => {
this.$modal.msgError("操作失败")