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) { export function serverMonitorData(data) {
return request({ return request({
url: '/rocketmq/systemOtherCollectData/getSwitchMonitorMsg', url: '/rocketmq/systemOtherCollectData/getMontiorMsg',
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 图形监控-设备cpu使用率 // 图形监控-cpu负载
export function serverCpuData(data) { export function cpuLoadData(data) {
return request({ return request({
url: '/rocketmq/systemOtherCollectData/getSwitchCpuUseMsg', url: '/rocketmq/cpuInfo/cpuLoadEcharts',
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 图形监控-设备内存使用率 // 图形监控-cpu时间
export function serverMemData(data) { export function cpuTimeData(data) {
return request({ return request({
url: '/rocketmq/systemOtherCollectData/getSwitchMemUseMsg', url: '/rocketmq/cpuInfo/cpuTimeEcharts',
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 图形监控-功率 // 图形监控-进程
export function serverPowerData(data) { export function procNum(data) {
return request({ return request({
url: '/rocketmq/systemOtherCollectData/getSwitchPowerMsg', url: '/rocketmq/systemOtherCollectData/procNumEcharts',
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 图形监控-自动发现项-基础信息 // 图形监控-登录用户数
export function serverNetDetails(data) { export function serverUserNum(data) {
return request({ return request({
url: '/rocketmq/switchInfo/getSwitchNetDetailsMsg', url: '/rocketmq/systemOtherCollectData/systemUserNumEcharts',
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 图形监控-自动发现项-丢包 // 图形监控-交换卷/文件的可用空间
export function serverNetDiscards(data) { export function swapSizeFree(data) {
return request({ return request({
url: '/rocketmq/systemOtherCollectData/switchNetDiscardsEcharts', url: '/rocketmq/systemOtherCollectData/systemSwapSizeFreeEcharts',
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 图形监控-自动发现项-总流量 // 图形监控-内存利用率
export function serverNeTotal(data) { export function memoryUtilization(data) {
return request({ return request({
url: '/rocketmq/systemOtherCollectData/switchNetTotalEcharts', url: '/rocketmq/systemOtherCollectData/memoryUtilizationEcharts',
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 图形监控-自动发现项-错误丢包 // 图形监控-可用交换空间百分比
export function serverNetErrDiscard(data) { export function swapSizePercent(data) {
return request({ return request({
url: '/rocketmq/systemOtherCollectData/switchNetErrDiscardsEcharts', url: '/rocketmq/systemOtherCollectData/systemSwapSizePercentEcharts',
method: 'post', method: 'post',
data: data data: data
}) })
} }
// 图形监控-自动发现项-实时流量 // 图形监控-可用内存
export function serverNetSpeed(data) { export function memorySizeAvailable(data) {
return request({ 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', method: 'post',
data: data data: data
}) })

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

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

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

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

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

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

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

@@ -7,7 +7,7 @@
</div> </div>
</div> </div>
<div v-for="item of chartList" class="w100 mt10 mb10" style="height: 200px;border-top: 1px solid #d8dce5"> <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>
</div> </div>
</template> </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'}, {content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'resource:serverRegister:export'},
], ],
line: [ line: [
//showName: 'multiPublicIpStatus', showVal: '0', {content: '选择公网业务IP', fnCode: 'pubilcNet', type: 'text', icon: 'el-icon-thumb', showName: 'multiPublicIpStatus', showVal: '0', hasPermi: 'resource:serverRegister:pubilcNet'},
{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: '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'}, {content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'resource:serverRegister:details'},
{title: ' 执行策略', more: [ {title: ' 执行策略', more: [
@@ -332,7 +331,7 @@
case 'echartView': case 'echartView':
this.$router.push({ this.$router.push({
path:'/resource/serverRegister/monitorChart', path:'/resource/serverRegister/monitorChart',
query: {clientId: rowData.hardwareSn} query: {clientId: rowData.clientId}
}); });
break; break;
case 'result': case 'result':
@@ -347,6 +346,12 @@
case 'pubilcNet': case 'pubilcNet':
this.pubilcNetOpen = true; this.pubilcNetOpen = true;
this.pubilcNetRuleForm = {publicIp: [],mgmtIp: '', descriptionOne: '', descriptionTwo: ''}; 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 => { networkList({clientId: rowData.clientId}).then(res => {
let ipList = []; let ipList = [];
res && res.data.map(item => { res && res.data.map(item => {
@@ -358,9 +363,9 @@
}); });
break; break;
case 'publicIp': case 'publicIp':
if (rowData && rowData.length > 0) {
this.pubilcNetRuleForm = Object.assign({}, this.pubilcNetRuleForm, this.$refs.publicNetFormRef.$refs.ruleForm.model);
let content = ''; let content = '';
this.pubilcNetRuleForm = Object.assign({}, this.pubilcNetRuleForm, this.$refs.publicNetFormRef.$refs.ruleForm.model);
if (rowData && rowData.length > 0) {
rowData.forEach(item => { rowData.forEach(item => {
content+= '运营商：' + this.ipContentList[item].isp + '<br>' + '省：' + this.ipContentList[item].province + '<br>' content+= '运营商：' + this.ipContentList[item].isp + '<br>' + '省：' + this.ipContentList[item].province + '<br>'
+ '市：' + this.ipContentList[item].city + '<br>' + '公网IP：' + this.ipContentList[item].publicIp + '<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].interfaceType + '<br>' + 'IPv4地址：' + this.ipContentList[item].ipv4Address + '<br>'
+ '网关：' + this.ipContentList[item].gateway + '<br><br>'; + '网关：' + this.ipContentList[item].gateway + '<br><br>';
}); });
this.$set(this.pubilcNetRuleForm, 'descriptionOne', content);
} }
this.$set(this.pubilcNetRuleForm, 'descriptionOne', content);
break; break;
case 'mgmtIp': case 'mgmtIp':
if (rowData) { let contentTow = '';
this.pubilcNetRuleForm = Object.assign({}, this.pubilcNetRuleForm, this.$refs.publicNetFormRef.$refs.ruleForm.model); this.pubilcNetRuleForm = Object.assign({}, this.pubilcNetRuleForm, this.$refs.publicNetFormRef.$refs.ruleForm.model);
let content = ''; if (rowData) {
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].city + '<br>' + '公网IP：' + this.ipContentList[rowData].publicIp + '<br>'
+ '接口名称：' + this.ipContentList[rowData].interfaceName + '<br>' + 'mac地址：' + this.ipContentList[rowData].macAddress + '<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].interfaceType + '<br>' + 'IPv4地址：' + this.ipContentList[rowData].ipv4Address + '<br>'
+ '网关：' + this.ipContentList[rowData].gateway + '<br><br>'; + '网关：' + this.ipContentList[rowData].gateway + '<br><br>';
this.$set(this.pubilcNetRuleForm, 'descriptionTwo', content);
} }
this.$set(this.pubilcNetRuleForm, 'descriptionTwo', contentTow);
break; break;
case 'issueBusiness': case 'issueBusiness':
this.issueOpen = true; this.issueOpen = true;

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

@@ -8,7 +8,7 @@
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="自动发现项" name="second"> <el-tab-pane label="自动发现项" name="second">
<template v-if="activeName === '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> </template>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
@@ -21,21 +21,21 @@
<script> <script>
import FirstMonitor from "./firstMonitor"; import FirstMonitor from "./firstMonitor";
import SecondAutoFind from "./secondAutoFind"; 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 { export default {
name: "MonitorChart", name: "serverMonitorChart",
components: {FirstMonitor, SecondAutoFind}, components: {FirstMonitor, SecondAutoFind},
data() { data() {
return { return {
loading: false, loading: false,
currTimeList: {}, currTimeList: {},
defaultTimes: [], defaultTimes: [],
activeName: 'first', activeName: 'second',
paramsData: {}, paramsData: {},
// 第一栏 // 第一栏
firstChartTrans: {}, firstChartTrans: {},
formFirst: { formFirst: {
cpuNum: 'CPU数量', sysLocation: '操作系统', sysObjectID: '操作系统架构', hwStackSystemMac: '最大进程数', sysUpTime: '硬盘', cpuNum: 'CPU数量', sysLocation: '操作系统', sysObjectID: '操作系统架构', hwStackSystemMac: '最大进程数', sysUpTime: '硬盘-总可用空间',
entPhysicalName: '系统启动时间', sysContact: '系统描述', entPhysicalSoftwareRev: '系统正确运行时间', sysName: '系统本地时间', sysDescr: '总内存' entPhysicalName: '系统启动时间', sysContact: '系统描述', entPhysicalSoftwareRev: '系统正确运行时间', sysName: '系统本地时间', sysDescr: '总内存'
}, },
formData: {}, formData: {},
@@ -203,74 +203,16 @@
} }
}, },
linuxSystem: { linuxSystem: {
net: { mount: {
title: '网络端口GE1/0/1', title: '挂载文件系统',
formList: {name: '端口名称', type: '端口类型', status: '端口状态', mbps: '端口适配速率(Mbps)'}, formList: {name: '文件系统类型'},
formModel: {name: 'GE1/0/1', type: 'ETHNET', status: 'up', mbps: '1000'}, formModel: {name: 'vfs'},
// 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: [ echartFors: [
{title: 'sabc的光衰阈值(dBm)', oneName: '光模块发送光衰阈值', twoName: '光模块接收光衰阈值'}, {title: '的空间(KB)', oneName: '可用空间', twoName: '总空间'},
{title: 'sabc的功率(dBm)', oneName: '光模块接收功率', twoName: '光模块发送功率'} {title: '的空间利用率(%)', oneName: '空间利用率'},
], ],
echartList: [] 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; this.loading = false;
if (this.activeName === 'first') { if (this.activeName === 'first') {
await Promise.all([ await Promise.all([
this.getMonitorData(), this.getMonitorData(this.currTimeList),
this.getCpuData(), this.getCpuLoadData(this.currTimeList),
this.getMemData(), this.getCpuTimeData(this.currTimeList),
this.getPowerData() 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; this.loading = true;
} else { } else {
@@ -306,20 +254,24 @@
}, },
getMonitorData() { getMonitorData() {
this.formData = {formFirst: this.formFirst}; this.formData = {formFirst: this.formFirst};
switchMonitorData({clientId: this.paramsData.clientId}).then(res => { serverMonitorData({clientId: this.paramsData.clientId}).then(res => {
if (res && res.data) { if (res && res.data) {
this.formData['formValue'] = res.data; this.formData['formValue'] = res.data;
} }
}); });
}, },
getCpuData(val) { getCpuLoadData(val) {
let cpuData = JSON.parse(JSON.stringify(this.resultData[0])); let cpuData = JSON.parse(JSON.stringify(this.resultData[0]));
switchCpuData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => { cpuLoadData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
cpuData['fnEvent'] = 'getCpuData'; cpuData['fnEvent'] = 'getCpuLoadData';
cpuData.dateDataTrans['dateRange'] = this.defaultTimes;
if (res && res.data) { 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'] : []; 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.firstChartList[0] = cpuData;
this.$set(this.firstChartList, 0, cpuData); this.$set(this.firstChartList, 0, cpuData);
@@ -327,14 +279,20 @@
this.firstChartList[0] = cpuData; this.firstChartList[0] = cpuData;
}); });
}, },
getMemData(val) { getCpuTimeData(val) {
let memData = JSON.parse(JSON.stringify(this.resultData[1])); let memData = JSON.parse(JSON.stringify(this.resultData[1]));
switchMemData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => { cpuTimeData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
memData['fnEvent'] = 'getMemData'; memData['fnEvent'] = 'getCpuTimeData';
memData.dateDataTrans['dateRange'] = this.defaultTimes;
if (res && res.data) { 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'] : []; 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.firstChartList[1] = memData;
this.$set(this.firstChartList, 1, memData); this.$set(this.firstChartList, 1, memData);
@@ -342,119 +300,194 @@
this.firstChartList[1] = memData; this.firstChartList[1] = memData;
}); });
}, },
getPowerData(val) { getProcNumData(val) {
let powerData = JSON.parse(JSON.stringify(this.resultData[2])); let procData = JSON.parse(JSON.stringify(this.resultData[2]));
switchPowerData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => { procNum(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
powerData['fnEvent'] = 'getPowerData'; procData['fnEvent'] = 'getProcNumData';
procData.dateDataTrans['dateRange'] = this.defaultTimes;
if (res && res.data) { 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'] : []; 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'] : []; 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'] : [];
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[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.firstChartList[2] = powerData;
this.$set(this.firstChartList, 2, powerData); this.$set(this.firstChartList, 2, procData);
}).catch(() => { }).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 // two
// 接口名称 // 接口名称
async fnInterFaceNameList(val) { fnInterFaceNameList(val) {
this.activeNames = []; this.activeNames = [];
try { mountNameList({clientId: this.paramsData.clientId}).then(res => {
const res = await postInterFaceName({clientId: this.paramsData.clientId}); if (res && res.data && res.data.length > 0) {
// .then(res => { let tabNameList = {};
res && res.forEach(async(item,index) => { res && res.data.forEach(async(item,index) => {
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['net'])); let oneData = JSON.parse(JSON.stringify(this.linuxSystem['mount']));
oneData.title = item && item.interfaceName; oneData.title = item && item.mount;
this.secondChartList[item.interfaceName] = oneData; tabNameList[item.mount] = 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);
}
}); });
// }); this.secondChartList = {...tabNameList};
} catch (error) { console.log('secondChartList===',this.secondChartList);
this.$modal.closeLoading(); this.activeNames = [Object.keys(tabNameList)[0]];
console.error('获取接口名称列表失败：', error); this.getPointDetailsData(Object.keys(tabNameList)[0]);
// 可添加错误提示，如this.$message.error('数据加载失败') 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() { getPointDetailsData(titleName) {
switchNetDetails({clientId: this.paramsData.clientId}).then(res => { pointDetails({clientId: this.paramsData.clientId, mount: titleName}).then(res => {
if (res && res.data) { this.secondChartList[titleName].formModel = res && res.data || [];
this.formData['formValue'] = res.data;
}
}); });
}, },
// 丢包 // 空间
getNetDiscards(times,val) { getSpaceEcharts(times,titleName) {
const interfaceName = val.interfaceName; let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
let netEcharts = JSON.parse(JSON.stringify(this.echartData)); let mountEcharts = JSON.parse(JSON.stringify(this.echartData));
if (netEcharts && netEcharts.dateDataTrans) { let content = JSON.parse(JSON.stringify(this.linuxSystem['mount']));
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes; console.log('content==',content);
} mountEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
netEcharts.fnEvent = 'getNetDiscards'; mountEcharts.fnEvent = 'getSpaceEcharts';
switchNetDiscards(Object.assign({}, {name : interfaceName,clientId: this.paramsData.clientId}, times)).then(res => { spaceEcharts(Object.assign({}, {mount : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
this.$set(this.secondChartList[interfaceName].echartList, 0, []);
if (res && res.data) { if (res && res.data) {
this.eventDataMap['interfaceName'] = false; mountEcharts.title = titleName + content.echartFors[0].title;
netEcharts.title = `${interfaceName}的丢包数`; mountEcharts.dataVal.lineXData = res.data && res.data.xData || [];
mountEcharts.dataVal.dataList[0] = {
netEcharts.dataVal.lineXData = res.data?.xData.length > 0 ? res.data.xData : this.firstChartTrans?.timeList || []; name: content.echartFors[0].oneName,
// 入 data: res.data && res.data.yData['vfsFreeData'] || []
netEcharts.dataVal.dataList[0] = {
name: this.secondChartList[interfaceName].echartFors[0].oneName,
data: res.data.yData?.netInDiscardsData || []
}; };
// 出 mountEcharts.dataVal.dataList[1] = {
netEcharts.dataVal.dataList[1] = { name: content.echartFors[0].twoName,
name: this.secondChartList[interfaceName].echartFors[0].twoName, data: res.data && res.data.yData['vfsTotalData'] || []
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));
}
} }
mountCollect['echartList'][0] = mountEcharts;
this.$set(this.secondChartList, titleName, mountCollect);
}); });
}, },
// 总数 // 空间利用率
getNetTotal(times,val) { getSpaceRate(times,titleName) {
const interfaceName = val.interfaceName; let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[titleName]));
// let netData = JSON.parse(JSON.stringify(this.secondChartList[interfaceName])); let mountEcharts = JSON.parse(JSON.stringify(this.echartData));
let netEcharts = JSON.parse(JSON.stringify(this.echartData)); let content = JSON.parse(JSON.stringify(this.linuxSystem['mount']));
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes; console.log('content==vvv===',content);
netEcharts.fnEvent = 'getNetTotal'; mountEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
switchNeTotal(Object.assign({}, {name : interfaceName,clientId: this.paramsData.clientId}, times)).then(res => { mountEcharts.fnEvent = 'getSpaceRate';
spaceRate(Object.assign({}, {mount : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
if (res && res.data) { if (res && res.data) {
netEcharts.title = `${interfaceName}的Bites总数`; mountEcharts.title = titleName + content.echartFors[1].title;
netEcharts.dataVal.lineXData = res.data && res.data.xData || []; mountEcharts.dataVal.lineXData = res.data && res.data.xData || [];
// 入 mountEcharts.dataVal.dataList[0] = {
netEcharts.dataVal.dataList[0] = { name: content.echartFors[1].oneName,
name: this.secondChartList[interfaceName].echartFors[1].oneName, data: res.data && res.data.yData['vfsUtilData'] || []
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);
} }
mountCollect['echartList'][1] = mountEcharts;
this.$set(this.secondChartList, titleName, mountCollect);
}); });
}, },
// 错误丢包 // 错误丢包
@@ -511,14 +544,15 @@
this.firstChartTrans = valData; this.firstChartTrans = valData;
// 检查函数是否存在，避免报错 // 检查函数是否存在，避免报错
if (typeof this[fnName] === 'function') { 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 { } else {
console.warn(`函数 ${fnName} 未定义`); console.warn(`函数 ${fnName} 未定义`);
} }
}, },
goBack() { 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> <template>
<div style="padding: 8px 20px 20px;"> <div style="padding: 8px 20px 20px;">
<el-collapse v-model="activeShowList" @change="collapseChange"> <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="mt10 w100">
<div class="w100 plr-20" style="font-size: 14px"> <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"> <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.formModel[key] || '-'}}</span> <span class="w50 disInlineBlock">{{item}}</span><span class="w50">{{val && val.formModel[key] || '-'}}</span>
</div> </div>
</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"> <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.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> <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>
</div> </div>
</el-collapse-item> </el-collapse-item>
@@ -31,19 +31,11 @@
type: Array, type: Array,
default: () => [] default: () => []
}, },
defaultTimes: {
type: Array,
default: () => []
},
matchNum: {
type: Object,
default: () => {}
}
}, },
watch: { watch: {
activeNames: { activeNames: {
handler(val) { handler(val) {
console.log('val==',val); // console.log('val==',val);
this.activeShowList = val; this.activeShowList = val;
}, },
deep: true, deep: true,
@@ -51,25 +43,11 @@
}, },
secondChartList: { secondChartList: {
handler(val) { handler(val) {
console.log('val=000000=',val); // console.log('val=000000=',val);
}, },
deep: true, deep: true,
// immediate: 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() { data() {
return { return {

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

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