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-16 19:08:32 +08:00
parent 432cdc7c14
commit 653b3c2cc3
12 changed files with 1161 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -288,6 +288,24 @@ export function getResMonitorGroup() {
method: 'get'
})
}
/** ----------------交换机监控策略------------ */
// 新增
export function addResourcePolicy(data) {
return request({
url: '/rocketmq/monitorPolicy/addResourcePolicy',
method: 'post',
data: data
})
}
// 修改
export function updateResourcePolicy(data) {
return request({
url: '/rocketmq/monitorPolicy/updateResourcePolicy',
method: 'post',
data: data
})
}
/** ----------------脚本服务器策略------------ */
// 查询列表
export function listPolicy(query) {
@@ -484,6 +502,46 @@ export function switchPowerData(data) {
data: data
})
}
// 图形监控-自动发现项-基础信息
export function switchNetDetails(data) {
return request({
url: '/rocketmq/switchInfo/getSwitchNetDetailsMsg',
method: 'post',
data: data
})
}
// 图形监控-自动发现项-丢包
export function switchNetDiscards(data) {
return request({
url: '/rocketmq/switchInfo/switchNetDiscardsEcharts',
method: 'post',
data: data
})
}
// 图形监控-自动发现项-总流量
export function switchNeTotal(data) {
return request({
url: '/rocketmq/switchInfo/switchNetTotalEcharts',
method: 'post',
data: data
})
}
// 图形监控-自动发现项-错误丢包
export function switchNetErrDiscard(data) {
return request({
url: '/rocketmq/switchInfo/switchNetErrDiscardsEcharts',
method: 'post',
data: data
})
}
// 图形监控-自动发现项-实时流量
export function switchNetSpeed(data) {
return request({
url: '/rocketmq/switchInfo/switchNetSpeedEcharts',
method: 'post',
data: data
})
}
/** --------------接口备注信息--------------- */

71
src/components/echartsList/dateTimeSelect.vue
View File

@@ -26,13 +26,15 @@
</ul>
<el-date-picker
v-model="dateRange"
:type="dateShowType === 'month' ? 'monthrange' : 'daterange'"
:class="dateShowType === 'datetimerange' ? null : 'timeIconSty'"
:type="dateShowType === 'month' ? 'monthrange' : dateShowType === 'day' ? 'daterange' : dateShowType ? dateShowType : 'daterange'"
:start-placeholder="dateShowType === 'month' ? '开始日期' : '开始时间'"
:end-placeholder="dateShowType === 'month' ? '结束日期' : '结束时间'"
range-separator="至"
:format="dateShowType === 'month' ? 'yyyy-MM' : 'yyyy-MM-dd'"
:value-format="dateShowType === 'month' ? 'yyyy-MM' : 'yyyy-MM-dd'"
style="display: inline-block!important;width: 45%!important;vertical-align: middle;float: right;margin-right: 10px;"
:format="dateShowType === 'month' ? 'yyyy-MM' : dateShowType === 'datetimerange' ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd' "
:value-format="dateShowType === 'month' ? 'yyyy-MM' : dateShowType === 'datetimerange' ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'"
:style="{display: 'inline-block!important', verticalAlign: 'middle', marginRight: '10px', float: 'right', width: dateShowType === 'datetimerange' ? '75%!important' : '45%!important'}"
:default-time="dateShowType === 'datetimerange' ? ['12:00:00', '12:00:00'] : null"
@change="dateChange"/>
</div>
</template>
@@ -48,6 +50,21 @@
sideIcon: {
type: Object,
default: () => {}
},
dateDataTrans: {
type: Object,
default: () => {}
}
},
watch: {
dateDataTrans: {
handler(val) {
if (val && val.dateRange) {
this.dateRange = val.dateRange;
}
},
deep: true,
immediate: true
}
},
data() {
@@ -80,9 +97,12 @@
},
// 时间选择器
dateChange() {
this.$emit("dataChange", this.isActive, this.dateRange);
this.isActive = '';
// this.getDaysOfPreviousMonth(this.dateRange[0], this.dateRange[1]);
if (this.dateDataTrans && this.dateDataTrans.transList) {
this.getDaysOfPreviousMonth(this.dateRange[0], this.dateRange[1]);
} else {
this.$emit("dataChange", this.isActive, this.dateRange);
this.isActive = '';
}
},
// 获取当前日期前7天的所有日期（格式：YYYY-MM-DD）
getLastDays(num) {
@@ -107,15 +127,29 @@
// 获取前一个月的所有日期
getDaysOfPreviousMonth(star, end) {
// 1. 获取当前日期（终点日期）
const currentDate = new Date();
let currentDate = new Date();
if (end) {
currentDate = new Date(end);
}
const endYear = currentDate.getFullYear();
const endMonth = currentDate.getMonth(); // 0=1月，11=12月
const endDay = currentDate.getDate(); // 当前日（如8）
// 2. 计算起点日期（当前日期的“上月同日”，处理边界：如3月31日→2月28/29日）
const startDate = new Date(endYear, endMonth, endDay);
// 核心：将当前日期的月份减1（得到上月同日，自动处理天数不足问题）
startDate.setMonth(startDate.getMonth() - 1);
let startDate = new Date(endYear, endMonth, endDay);
if (star) {
startDate = new Date(star);
} else {
// 核心：将当前日期的月份减1（得到上月同日，自动处理天数不足问题）
startDate.setMonth(startDate.getMonth() - 1);
}
// 日期后面的时间
let timeStar = '';
let timeEnd = '';
if (this.dateShowType === 'datetimerange') {
timeStar = String(new Date(startDate).getHours()).padStart(2, '0') + ':' + String(new Date(startDate).getMinutes()).padStart(2, '0') + ':' + String(new Date(startDate).getSeconds()).padStart(2, '0');
timeEnd = String(new Date(currentDate).getHours()).padStart(2, '0') + ':' + String(new Date(currentDate).getMinutes()).padStart(2, '0') + ':' + String(new Date(currentDate).getSeconds()).padStart(2, '0');
}
// 3. 提取起点日期的年、月、日（用于循环判断）
const startYear = startDate.getFullYear();
@@ -133,15 +167,20 @@
const year = tempDate.getFullYear();
const month = String(tempDate.getMonth() + 1).padStart(2, '0');
const day = String(tempDate.getDate()).padStart(2, '0');
const formattedDate = `${year}-${month}-${day}`;
let formattedDate = `${year}-${month}-${day}`;
if (this.dateShowType === 'datetimerange') {
if (dateCollection && dateCollection.length <= 0) {
formattedDate = formattedDate + ' ' + timeStar;
} else {
formattedDate = formattedDate + ' ' + timeEnd;
}
}
dateCollection.push(formattedDate);
// 临时日期加1天（进入下一天）
tempDate.setDate(tempDate.getDate() + 1);
}
let timeArr = [dateCollection[0], dateCollection[dateCollection.length - 1]];
this.$emit("dataChange", this.isActive, timeArr);
this.$emit("dataChange", this.isActive, {timeArr: timeArr, timeList: dateCollection});
// this.$emit("dataChange", this.isActive, oneMonthDays);
},
// 获取前三个月的月
@@ -181,7 +220,7 @@
::v-deep .el-date-editor .el-range-separator {
vertical-align: super!important;
}
::v-deep .el-date-editor .el-range__close-icon {
::v-deep .timeIconSty .el-range__close-icon {
margin-top: -38px;
margin-right: -14px;
}

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

@@ -1,6 +1,6 @@
<template>
<div>
<DateTimeSelect v-if="!(lineData && lineData.hiddenTime)" :sideIcon="sideIcon" :dateShowType="dateShowType" @dataChange="dataChangeValue"></DateTimeSelect>
<DateTimeSelect v-if="!(lineData && lineData.hiddenTime)" :sideIcon="sideIcon" :dateDataTrans="dateDataTrans" :dateShowType="dateShowType" @dataChange="dataChangeValue"></DateTimeSelect>
<div :id="`lineChart` + num" style="width:100%;height: 100%;" />
</div>
</template>
@@ -24,6 +24,10 @@
type: String,
default: null
},
dateDataTrans: {
type: Object,
default: () => ({})
},
chartData: {
type: Function,
default: () => {
@@ -114,11 +118,30 @@
axisTick: {
show: false
},
axisLabel: {
formatter: function(value) {
// 每4个字符换一行（根据实际文本长度调整）
const maxLength = 11;
let result = '';
let count = 0;
for (let i = 0; i < value.length; i++) {
count++;
result += value[i];
if (count % maxLength === 0 && i !== value.length - 1) {
result += '\n'; // 换行
}
}
return result;
},
// lineHeight: 10, // 行高（确保换行后不重叠）
},
data: dataXY.lineXData
},
yAxis: {
type: 'value',
name: '单位Mbps',
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,
splitLine: {
show: true,
},

2
src/components/form/index.vue
View File

@@ -42,7 +42,7 @@
:multiple="formVal.multiple"
:collapse-tags="formVal.collapseTags"
:disabled="toBoolean(formVal.disabled || formItem.config.readonly)"
:placeholder="toBoolean(formVal.disabled || formItem.config.readonly) ? null : formVal.placeholder || `请输入${formVal.label}`"
:placeholder="toBoolean(formVal.disabled || formItem.config.readonly) ? null : formVal.placeholder || `请选择${formVal.label}`"
:clearable="formVal.clearable !== false"
@[formVal.eventName]="(val) => handleChange(key,val,formVal)">
<el-option

15
src/router/index.js
View File

@@ -400,6 +400,21 @@ export const dynamicRoutes = [
}
]
},
// 交换机监控策略
{
path: '/resource/switchMonitorStrat/details',
component: Layout,
hidden: true,
permissions: ['resource:switchMonitorStrat:edit'],
children: [
{
path: 'index/:id?',
component: () => import('@/views/resource/switchMonitorStrat/monitorStrategy'),
name: 'switchMonitorStatEdit',
meta: { title: '交换机监控策略信息', activeMenu: '/resource/switchMonitorStrat' }
}
]
},
// 监控模版
{
path: '/resource/monitorTemp/details',

44
src/views/index.vue
View File

@@ -32,7 +32,7 @@
<span>服务器带宽收益</span>
<span @click="routerLine(1)" style="float: right;font-size: 12px; color: #0d52d9;cursor: pointer;">更多 >></span>
</div>
<div style="height: 93%;overflow: scroll;" class="newSty">
<div style="height: 93%;overflow: scroll;" class="newSty w100">
<TableList style="height: 95%" class="w100" :config="{colHiddenCheck: true, colTopHiddenIcon: true}" :columns="serverColumns" :queryParams="serQueryParams" :tableList="serTableList" @fnRenderList="serverTableList"></TableList>
</div>
</div>
@@ -41,31 +41,31 @@
<span>资源监控</span>
<span @click="routerLine(2)" style="float: right;font-size: 12px; color: #0d52d9;cursor: pointer;">更多 >></span>
</div>
<div style="height: 93%;overflow: scroll;" class="newSty">
<div style="height: 93%;overflow: scroll;" class="newSty w100">
<TableList style="height: 95%" class="w100" :config="{colHiddenCheck: true, colTopHiddenIcon: true}" :columns="resMonitorColumns" :queryParams="resQueryParams" :tableList="resTableList" @fnRenderList="resMonitorTableList"></TableList>
</div>
</div>
</div>
<div v-if="echartList && echartList.length > 0" class="w100" style="height: 30%;margin: 1% 0 0">
<!-- 拖拽容器 -->
<draggable
class="w100 h100"
v-model="echartList"
:animation="150"
:handle="'.el-collapse-item__header'"
:ghost-class="'ghost-item'"
:chosen-class="'chosen-item'"
@start="onDragStart"
@end="onDragEnd">
<template v-for="(val,index) of echartList">
<el-collapse v-model="activeNames" class="w100 h100">
<el-collapse-item :title="val.title" name="1" class="w100 h100">
<EchartsLine class="w100 h100" :sideIcon="{iconName: [{name: '从首页删除',type: 'del'}]}" :lineData="val.dataVal" :chartData="(valData) => chartDataEvent(valData, val)"></EchartsLine>
</el-collapse-item>
</el-collapse>
</template>
</draggable>
</div>
<!-- <div v-if="echartList && echartList.length > 0" class="w100" style="height: 30%;margin: 1% 0 0">-->
<!-- &lt;!&ndash; 拖拽容器 &ndash;&gt;-->
<!-- <draggable-->
<!-- class="w100 h100"-->
<!-- v-model="echartList"-->
<!-- :animation="150"-->
<!-- :handle="'.el-collapse-item__header'"-->
<!-- :ghost-class="'ghost-item'"-->
<!-- :chosen-class="'chosen-item'"-->
<!-- @start="onDragStart"-->
<!-- @end="onDragEnd">-->
<!-- <template v-for="(val,index) of echartList">-->
<!-- <el-collapse v-model="activeNames" class="w100 h100">-->
<!-- <el-collapse-item :title="val.title" name="1" class="w100 h100">-->
<!-- <EchartsLine class="w100 h100" :sideIcon="{iconName: [{name: '从首页删除',type: 'del'}]}" :lineData="val.dataVal" :chartData="(valData) => chartDataEvent(valData, val)"></EchartsLine>-->
<!-- </el-collapse-item>-->
<!-- </el-collapse>-->
<!-- </template>-->
<!-- </draggable>-->
<!-- </div>-->
</div>
</template>

298
src/views/resource/switchMonitorStrat/monitorStrategy.vue Normal file
View File

@@ -0,0 +1,298 @@
<template>
<div class="app-container">
<div style="display: flex; justify-content: center;">
<div class="w100">
<Form ref="formRef" :formList="formList" :config="{labelWidth: '140px',buttonGroup: []}" :ruleFormData="ruleFormData" @fnClick="callback"></Form>
</div>
</div>
<div>
<h3 style="background: #d4e3fc;padding: 15px 10px;">策略内容</h3>
<el-tabs v-model="activeName" class="plr-20">
<el-tab-pane label="监控项" name="first">
<div v-for="item of firstData">
<div class="plr-50">
<div v-for="city of item.checkList" class="w100 mt10 mb10 disInlineBlock fontSize15">
<div class="disInlineBlock w50">
<span style="width: 200px" class="disInlineBlock">{{ city.metricKey }}</span>
<span>{{city.metricName}}</span>
</div>
<div class="disInlineBlock" style="color: #606266">
采集周期：<el-select v-model="city['time']" placeholder="请选择" clearable>
<el-option v-for="val in timeOptions" :key="val.value" :label="val.label" :value="val.value"></el-option>
</el-select>
</div>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="自动发现项" name="second">
<el-collapse v-model="activeTwoName">
<el-collapse-item v-for="(item,key,index) of secondData" :title="item.title" :name="index">
<template slot="title">
<span class="disInlineBlock" style="width: 15%;">{{item.title}}</span>
<div style="font-size: 13px;margin-left: 10%;">
采集周期：<el-select v-model="item['time']" id="selDisabled" :disabled="key === 'switchNet' ? true : false" clearable placeholder="请选择">
<el-option v-for="val in timeOptions" :key="val.value" :label="val.label" :value="val.value"></el-option>
</el-select>
</div>
</template>
<div class="plr-50">
<div v-for="city of item.checkList" class="w100 mt10 mb10 disBlock fontSize15">
<span style="width: 300px" class="disInlineBlock">{{city.metricKey}}</span>
<span>{{city.metricName}}</span>
</div>
</div>
</el-collapse-item>
</el-collapse>
</el-tab-pane>
</el-tabs>
</div>
<el-button style="float: right;margin-top: 12px;margin-left: 10px;" @click="cancel">取消</el-button>
<el-button type="primary" style="float: right;margin-top: 12px;" @click="submit">提交</el-button>
</div>
</template>
<script>
import Form from '@/components/form/index.vue';
import {addResourcePolicy, updateResourcePolicy,getMonitorTempList, getMonitorPolicy, getMonitorPolicyTemp, getResMonitorGroup} from "@/api/disRevenue/resource"
export default {
name: "MonitorStrategy",
components: {Form},
dicts: ['rm_register_resource_type', 'collection_cycle', 'switch_type', 'policy_status'],
// props: {
// open: {
// type: Boolean,
// default: false
// }
// },
// watch: {
// open: {
// handler(val) {
// if (!val) {
// // 清空form
// this.$refs['formRef'].$refs.ruleForm.resetFields();
// }
// },
// deep: true,
// immediate: true
// },
// },
data() {
return {
activeName: 'first',
activeTwoName: [0,1,2,3,4],
timeOptions: [],
ruleFormData: {},
formList: [],
firstData: [
{checkList: []}
],
tempContent: {},
secondData: {
switchNet: {title: '网络端口发现', time: '300',
checkList: []
},
switchModule: {title: '光模块发现', time: '',
checkList: []
},
switchMpu: {title: 'MPU发现', time: '',
checkList: []
},
switchPwr: {title: '电源发现', time: '',
checkList: []
},
switchFan: {title: '风扇发现', time: '',
checkList: []
},
}
}
},
created() {
this.timeOptions = this.dict.type.collection_cycle;
this.paramsData = this.$route && this.$route.query;
// console.log('paramsData===',this.paramsData);
if (this.paramsData && this.paramsData.id) {
this.getFormDataList(this.paramsData.id);
} else {
this.getDataList();
}
this.fnFormList();
},
methods: {
// formList集合
fnFormList(objVal) {
this.formList = [{
config: {readonly: this.paramsData && this.paramsData.readonly, colSpan: this.paramsData && this.paramsData.readonly ? '' : 'disBlock'},
controls: {
id: {label: 'ID',hidden: true},
policyName: {label: '策略名称', span: 12, type: 'input', required: true},
description: {label: '描述', span: 12, type: 'textarea'},
priority: {label: '优先级', span: 12, type: 'input', hidden: this.paramsData && this.paramsData.readonly ? false : true},
status: {label: '策略状态', span: 12, type: 'select',options: this.dict.type.dicpolicy_status, hidden: this.paramsData && this.paramsData.readonly ? false : true},
deployTime: {label: '下发策略时间', span: 12, type: 'textarea', hidden: this.paramsData && this.paramsData.readonly ? false : true},
createTime: {label: '创建时间', span: 12, type: 'textarea', hidden: this.paramsData && this.paramsData.readonly ? false : true},
switchType: {label: '交换机类型', span: 12, type: 'select', required: true, options: this.dict.type.switch_type},
deployDevice: {label: '部署设备', span: 12, type: 'textarea', rows: 15,required: true},
createBy: {label: '创建人', span: 12, type: 'input',hidden: this.paramsData && this.paramsData.readonly ? false : true},
}
}];
},
// 获取详情
getFormDataList(id) {
this.tempContent = {};
getMonitorPolicy(id).then(val => {
if (val && val.data) {
this.ruleFormData = val.data?.policy;
this.tempContent = val.data['switch'];
console.log('val====',this.tempContent);
}
this.getDataList();
}).catch(() => {
this.getDataList();
// this.$modal.msgError("操作失败")
});
},
getDataList() {
let itemTypeList = ['monitorItem', 'autodiscoverItem'];
itemTypeList.forEach(item => {
let params = {resourceType: 'switch', itemType: item};
this.fnGetMonitorTempList(params);
});
},
// 通过监控模版选项 查询监控策略展示项
fnGetMonitorTempList(params) {
getMonitorTempList(params).then(res => {
if (res && res.data) {
if (params.itemType === 'monitorItem') {
let otherData = res.data?.switchOther || [];
if (this.tempContent?.switchOther) {
this.tempContent['switchOther'].forEach(item => {
otherData.some(val => {
if (item.metricKey === val.metricKey) {
val['time'] = item.collectionCycle.toString();
return true;
}
})
});
}
this.firstData[0].checkList = otherData;
}
if (params.itemType === 'autodiscoverItem') {
if (this.tempContent?.switchNet && this.tempContent?.switchNet.length > 0) {
this.secondData['switchNet'].time = this.tempContent.switchNet[0].collectionCycle.toString();
}
this.secondData['switchNet'].checkList = res.data?.switchNet || [];
if (this.tempContent?.switchModule && this.tempContent?.switchModule.length > 0) {
this.secondData['switchModule'].time = this.tempContent.switchModule[0].collectionCycle.toString();
}
this.secondData['switchModule'].checkList = res.data?.switchModule || [];
if (this.tempContent?.switchMpu && this.tempContent?.switchMpu.length > 0) {
this.secondData['switchMpu'].time = this.tempContent.switchMpu[0].collectionCycle.toString();
}
this.secondData['switchMpu'].checkList = res.data?.switchMpu || [];
if (this.tempContent?.switchPwr && this.tempContent?.switchPwr.length > 0) {
this.secondData['switchPwr'].time = this.tempContent.switchPwr[0].collectionCycle.toString();
}
this.secondData['switchPwr'].checkList = res.data?.switchPwr || [];
if (this.tempContent?.switchFan && this.tempContent?.switchFan.length > 0) {
this.secondData['switchFan'].time = this.tempContent.switchFan[0].collectionCycle.toString();
}
this.secondData['switchFan'].checkList = res.data?.switchFan || [];
}
}
})
},
// form验证
fnFormValid() {
return new Promise((resolve) => {
this.ruleFormData = {};
const formValid = this.$refs.formRef.$refs.ruleForm;
// 3. 操作form（如验证）
formValid.validate((valid) => {
if (valid) {
this.ruleFormData = formValid.model;
resolve(true);
} else {
resolve(false);
}
});
});
},
async submit() {
if (!await this.fnFormValid()) return;
// 监控项
let idsList = [];
this.firstData.forEach(item => {
item && item.checkList.forEach(ids => {
if (ids && ids.time) {
idsList.push({id: ids.id, collectionCycle: ids.time});
}
});
});
// 自动发现项
let autoIds = [];
Object.keys(this.secondData).forEach(key => {
if (this.secondData[key].time) {
this.secondData[key] && this.secondData[key].checkList.forEach(ids => {
autoIds.push({id: ids.id, collectionCycle: this.secondData[key].time});
});
}
});
// console.log('ruleFormData===',this.ruleFormData);
// console.log('idsList===',idsList);
// console.log('autoIds===',autoIds);
// this.$emit("dialogResult", {open: false});
let paramsList = idsList.concat(autoIds);
let params = Object.assign(this.ruleFormData, {resourceType: 'switch'},{collectionAndIdList: paramsList});
let fnType = addResourcePolicy;
if (this.paramsData && this.paramsData.id) {
fnType = updateResourcePolicy;
}
this.$modal.loading();
fnType(params).then(response => {
this.$modal.msgSuccess(response.msg);
this.$router.push("/resource/switchMonitorStrat");
this.$modal.closeLoading();
}).catch(error => {
this.$modal.closeLoading();
});
},
cancel() {
this.$router.push("/resource/switchMonitorStrat");
// this.$emit("dialogResult", {open: false});
},
// 监听事件
callback(result, dataVal, formVal) {
if (result && result.fnCode) {
switch (result.fnCode) {
case 'submit':
break;
case 'cancel':
this.$router.push("/resource/switchRegister");
break;
default:
}
}
},
}
}
</script>
<style scoped>
::v-deep #selDisabled{
color: #303133!important;
}
::v-deep .el-collapse-item__header {
background-color: #d4e3fc!important;
/*color: #fff!important;*/
padding-left: 20px;
font-size: 1rem;
}
</style>

203
src/views/resource/switchMonitorStrat/switchMonitorStrat.vue Normal file
View File

@@ -0,0 +1,203 @@
<template>
<div class="app-container pageTopForm">
<el-form :model="queryParams" ref="queryRef" size="small" v-show="showSearch" label-width="auto">
<el-col :span="8">
<el-form-item label="搜索" prop="queryName">
<el-input
v-model="queryParams.queryName"
placeholder="请输入策略名称/部署设备"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="策略状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="请选择策略状态"
clearable>
<el-option
v-for="dict in dict.type.policy_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item class="lastBtnSty">
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-col>
</el-form>
<TableList :columns="columns" :config="config" :queryParams="queryParams" :tableList="tableList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
<template #tempType="{ row, column }">
<dict-tag :options="dict.type.switch_type" :value="row.switchType"/>
</template>
<template #tempStatus="{ row, column }">
<dict-tag :options="dict.type.policy_status" :value="row.status"/>
</template>
</TableList>
</div>
</template>
<script setup>
import TableList from "@/components/table/index.vue"
import {listMonitorPolicy, delMonitorPolicy, getMonitorPolicyList} from "@/api/disRevenue/resource"
export default {
name: 'switchMonitorStrat',
components: {TableList},
dicts: ['switch_type','eps_bandwidth_type', 'policy_status'],
data() {
return {
loading: true,
showSearch: true,
tableList: [],
queryParams: {
total: 0,
pageNum: 1,
pageSize: 10
},
// 列显隐信息
columns: {
id: { label: `ID`,width: '50'},
policyName: { label: `策略名称`, minWidth: '250', visible: true },
description: { label: `描述`,minWidth: '200',visible: true},
deployDevice: { label: `部署设备`,minWidth: '200',visible: true},
switchType: { label: `交换机类型`,minWidth: '150', slotName: 'tempType', visible: true },
priority: { label: `优先级`,minWidth: '150', visible: true },
connected: { label: `策略内容`,minWidth: '200'},
status: { label: `策略状态`, minWidth: '100', slotName: 'tempStatus', visible: true },
deployTime: { label: `下发策略时间`,minWidth: '160'},
updateTime:{ label: `创建人`,minWidth: '160'},
createTime: { label: `创建时间`,minWidth: '160'},
},
config: {
tableButton: {
top: [
{content: '新增', fnCode: 'add', type: 'primary', icon: 'el-icon-plus', hasPermi: 'resource:monitorStategy:add'},
{content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'resource:monitorStategy:export'},
],
line: [
{content: '修改', fnCode: 'edit', type: 'text', showName: 'status', showVal: '0', icon: 'el-icon-edit', hasPermi: 'resource:monitorStategy:edit'},
{content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'resource:monitorStategy:details'},
{content: '删除', fnCode: 'delete', type: 'text', showName: 'status', showVal: '0', icon: 'el-icon-delete', hasPermi: 'resource:monitorStategy:detele'},
// {content: '复制', fnCode: 'copy', type: 'text', icon: 'el-icon-document-copy', hasPermi: 'disRevenue:resource:monitorStategy:copy'},
// {content: '下发策略', fnCode: 'strategy', type: 'text', showName: 'status', showVal: '0', icon: 'el-icon-sort-down', hasPermi: 'resource:monitorStategy:strategy'},
{}
]
}
}
}
},
created() {
this.getList();
},
activated() {
this.$nextTick(() => {
this.getList();
});
},
methods: {
/** 查询列表 */
getList() {
// this.$modal.loading();
listMonitorPolicy(this.queryParams).then(response => {
this.tableList = response.rows;
this.queryParams.total = response.total;
// this.$modal.closeLoading();
}).catch(err => {
// this.$modal.closeLoading();
})
},
// 处理子组件传递的新值
handleValueChange(newValue) {
// 父组件更新自身数据，实现同步
this.showSearch = newValue;
// console.log('父组件拿到新值:', newValue);
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryRef");
this.handleQuery();
},
callback(result, rowData, selectChange, selectList) {
if (result && result.fnCode) {
switch (result.fnCode) {
case 'add':
this.$router.push({
path:'/resource/switchMonitorStrat/details/index'});
break;
case 'edit':
this.$router.push({
path:'/resource/switchMonitorStrat/details/index',
query:{
id: rowData.id
}
});
break;
case 'details':
this.$router.push({
path:'/resource/switchMonitorStrat/details/index',
query:{
id: rowData.id,
readonly: true
}
});
break;
case 'delete':
if (selectList && selectList.length <= 0) {
this.$modal.msgWarning("请选择数据！");
return;
}
this.$modal.confirm('是否确认删除数据项？').then(function() {
return delMonitorPolicy(selectChange)
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功")
}).catch(() => {});
break;
case 'strategy':
this.$modal.confirm('是否确认下发策略？').then(() => {
this.$modal.loading();
getMonitorPolicyList(rowData.id).then(res => {
this.getList();
this.$modal.msgSuccess(res.msg);
this.$modal.closeLoading();
}).catch(error => {
this.$modal.closeLoading();
});
}).catch(() => {});
break;
case 'export':
// let dataList = [];
// Object.keys(this.columns).forEach(item => {
// if (item.visible) {
// dataList.push(item.prop);
// }
// });
// this.download("/system/monitorStategy/export", {properties: dataList,}, `拓扑管理_${new Date().getTime()}.xlsx`);
let paramsList = Object.assign({}, this.queryParams,rowData);
this.download("rocketmq/monitorPolicy/export", paramsList, `资源监控策略_${new Date().getTime()}.xlsx`, null, 'json');
break;
default:
}
}
}
}
}
</script>
<style scoped>
::v-deep .lastBtnSty .el-form-item__content{
margin-left: 10px!important;
}
</style>

88
src/views/resource/switchRegister/firstMonitor.vue
View File

@@ -1,12 +1,12 @@
<template>
<div style="padding: 8px 20px 20px;">
<div class="w100 plr-20" style="font-size: 14px">
<div v-for="(item, key, index) of formListTow" class="w50 disInlineBlock p10">
<span class="w50 disInlineBlock">{{item}}</span><span class="w50">{{formValue[key]}}</span>
<div v-for="(item, key, index) of formData['formFirst']" class="w50 disInlineBlock p10">
<span class="w50 disInlineBlock">{{item}}</span><span class="w50">{{formData['formValue'] && formData['formValue'][key]}}</span>
</div>
</div>
<div v-for="item of resultData" class="w100 mt20 mb20" style="height: 200px;border-top: 1px solid #d8dce5">
<EchartsLine class="w100 h100" :lineData="item.dataVal" :title="item.title" :chartData="(valData) => chartDataEvent(valData, item.fnEvent)"></EchartsLine>
<div v-for="item of chartList" class="w100 mt10 mb10" style="height: 200px;border-top: 1px solid #d8dce5">
<EchartsLine class="w100 h100" :lineData="item.dataVal" :dateDataTrans="item.dateDataTrans" :dateShowType="item.dateShowType" :title="item.title" :chartData="(valData) => chartDataEvent(valData, item.fnEvent)"></EchartsLine>
</div>
</div>
</template>
@@ -16,79 +16,23 @@
export default {
name: 'FirstMonitor',
components: {EchartsLine},
data() {
return {
formListTow: [],
formValue: {remarks: 'aaa', address: 'aaa', objId: 'aaa', macAddress: 'aaa',
time: 'aaa', sbName: 'aaa', msg: 'aaa', versions: 'aaa', sysName: 'aaa'},
paramsData: {},
resultData: [{
title: '设备CPU使用率(%)',
dataVal: {
titleVal: {textAlign: 'left', left: '1%'},
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: '设备CPU使用率',
data: [120, 132, 101, 134, 90, 230, 210],
}]
}
},{
title: '设备内存使用率(%)',
dataVal: {
titleVal: {textAlign: 'left', left: '1%'},
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: 'CPU运行用户进程所花费的时间',
data: [220, 182, 191, 234, 290, 330, 310]
}]
}
},{
title: '功率',
dataVal: {
titleVal: {textAlign: 'left', left: '1%'},
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: '系统平均功率(mW)',
data: [120, 132, 101, 134, 90, 230, 210],
},{
name: '系统实时功率(mW)',
data: [220, 182, 191, 234, 290, 330, 310]
}]
}
}],
props: {
chartList: {
type: Array,
default: () => []
},
formData: {
type: Object,
default: () => {}
}
},
created() {
// this.paramsData = this.$route && this.$route.query;
this.fnFormList();
// this.switchList();
data() {
return {}
},
created() {},
methods: {
// formList集合
fnFormList() {
let formFirst = {
remarks: '系统描述', address: '系统位置', objId: '系统Object ID', macAddress: '系统MAC地址',
time: '系统运行时间', sbName: '设备名称', msg: '系统联系信息', versions: '设备软件版本', sysName: '系统名称'
};
this.formListTow = {...formFirst};
},
chartDataEvent(valData, funcName) {
// 检查函数是否存在，避免报错
if (typeof this[funcName] === 'function') {
// 调用实际函数，并传递参数（如选中的值、当前项）
// this[funcName]({startTime: valData[0], endTime: valData[1]});
} else {
console.warn(`函数 ${funcName} 未定义`);
}
this.$emit("chartFnEvent", valData, funcName);
},
}
}

407
src/views/resource/switchRegister/monitorChart.vue
View File

@@ -2,11 +2,13 @@
<div class="app-container">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="监控项" name="first">
<FirstMonitor></FirstMonitor>
<template v-if="activeName === 'first'">
<FirstMonitor v-if="loading" :formData="formData" :chartList="firstChartList" @chartFnEvent="chartFnEvent"></FirstMonitor>
</template>
</el-tab-pane>
<el-tab-pane label="自动发现项" name="second">
<template v-if="activeName === 'second'">
<SecondAutoFind></SecondAutoFind>
<SecondAutoFind v-if="loading" :defaultTimes="defaultTimes" :matchNum="matchNum" :secondChartList="secondChartList" :activeNames="activeNames" @collapseChangeData="collapseChangeData" @chartFnEvent="chartFnEvent"></SecondAutoFind>
</template>
</el-tab-pane>
</el-tabs>
@@ -19,21 +21,402 @@
<script>
import FirstMonitor from "./firstMonitor";
import SecondAutoFind from "./secondAutoFind";
export default {
name: "MonitorChart",
components: {FirstMonitor, SecondAutoFind},
data() {
return {
activeName: 'first',
import {switchMonitorData, switchCpuData, switchMemData,switchPowerData, postInterFaceName, switchNetDetails,switchNetDiscards,switchNeTotal,switchNetErrDiscard, switchNetSpeed} from "@/api/disRevenue/resource"
export default {
name: "MonitorChart",
components: {FirstMonitor, SecondAutoFind},
data() {
return {
loading: false,
currTimeList: {},
defaultTimes: [],
activeName: 'second',
paramsData: {},
// 第一栏
firstChartTrans: {},
formFirst: {
sysDescr: '系统描述', sysLocation: '系统位置', sysObjectID: '系统Object ID', hwStackSystemMac: '系统MAC地址',
sysUpTime: '系统运行时间', entPhysicalName: '设备名称', sysContact: '系统联系信息', entPhysicalSoftwareRev: '设备软件版本', sysName: '系统名称'
},
formData: {},
firstChartList: [],
resultData: [
{
title: '设备CPU使用率(%)',
dateShowType: 'datetimerange',
dateDataTrans: {transList: true},
dataVal: {
titleVal: {textAlign: 'left', left: '1%'},
yAxisName: ' ',
gridTop: '35%',
legend: {top: '15%', left: '10%'},
lineXData: [],
dataList: [{
name: '设备CPU使用率',
data: [],
}]
}
},{
title: '设备内存使用率(%)',
dateShowType: 'datetimerange',
dateDataTrans: {transList: true},
dataVal: {
titleVal: {textAlign: 'left', left: '1%'},
yAxisName: ' ',
gridTop: '35%',
legend: {top: '15%', left: '10%'},
lineXData: [],
dataList: [{
name: '设备内存使用率',
data: [],
}]
}
},{
title: '功率',
dateShowType: 'datetimerange',
dateDataTrans: {transList: true},
dataVal: {
titleVal: {textAlign: 'left', left: '1%'},
yAxisName: ' ',
gridTop: '35%',
legend: {top: '15%', left: '10%'},
lineXData: [],
dataList: [{
name: '系统平均功率(mW)',
data: [],
},{
name: '系统实时功率(mW)',
data: []
}]
}
}
],
// 第二栏
activeNames: [],
matchNum: {num: ''},
secondChartList: {},
eventDataMap: {},
echartData: {
title: 'GE1/0/1的丢包数',
dateShowType: 'datetimerange',
dateDataTrans: {transList: true},
dataVal: {
titleVal: {textAlign: 'left', left: '1%'},
yAxisName: ' ',
gridTop: '35%',
legend: {top: '15%', left: '10%'},
lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
dataList: [{
name: '入站丢包',
data: [120, 132, 101, 134, 90, 230, 210],
},{
name: '出站丢包',
data: [220, 182, 191, 234, 290, 330, 310]
}]
}
},
linuxSystem: {
net: {
title: '网络端口GE1/0/1',
formList: {name: '端口名称', type: '端口类型', status: '端口状态', mbps: '端口适配速率(Mbps)'},
formModel: {name: 'GE1/0/1', type: 'ETHNET', status: 'up', mbps: '1000'},
echartFors: [
{title: 'GE1/0/1的丢包数', oneName: '入站丢包', twoName: '出站丢包'},
{title: 'GE1/0/1的Bites总数', oneName: '端口发送Bites总数', twoName: '端口接收Bites总数'},
{title: 'GE1/0/1的错误包数量', oneName: '错误的入站数据包数量', twoName: '错误的出战数据包数量'},
{title: 'GE1/0/1的网络速率(bites/sec)', oneName: '端口实时接收速率(bites/sec)', twoName: '端口实时发送速率(bites/sec)'},
],
echartList: []
},
light: {
title: '光模块sabc',
formList: {name: '光模块端口名称'},
formModel: {name: 'sabc'},
echartFors: [
{title: 'sabc的光衰阈值(dBm)', oneName: '光模块发送光衰阈值', twoName: '光模块接收光衰阈值'},
{title: 'sabc的功率(dBm)', oneName: '光模块接收功率', twoName: '光模块发送功率'}
],
echartList: []
},
mpu: {
title: 'MPU1',
formList: {name: 'MPU名称', system: 'MPU的操作系统'},
formModel: {name: 'MPU1', system: 'xxxx'},
echartFors: [
{title: 'MPU1的CPU使用率(%)', oneName: 'CPU利用率'},
{title: 'MPU1的内存使用率(%)', oneName: '内存利用率'},
{title: 'MPU1的温度(°C)', oneName: '温度'},
],
echartList: []
},
pw: {
title: '电源PW1',
formList: {name: '电源名称', status: '电源状态'},
formModel: {name: 'PW1', status: '正在供电'},
echartFors: [
{title: '电源电流(mA)', oneName: '电源电流'},
{title: '电源电压(mV)', oneName: '电源电压'}
],
echartList: []
},
fan: {
title: '风扇FAN1',
formList: {name: '风扇名称', status: '风扇状态'},
formModel: {name: 'FAN1', status: 'xxx'},
echartFors: [],
echartList: []
}
},
}
},
created() {
let startData = '';
let endData = '';
const year = new Date().getFullYear();
const month = String(new Date().getMonth() + 1).padStart(2, '0'); // 0=1月，11=12月
const day = String(new Date().getDate()).padStart(2, '0'); // 当前日（如8）
const prevDay = String(new Date().getDate() - 1).padStart(2, '0');
startData = `${year}-${month}-${prevDay} 00:00:00`;
endData = `${year}-${month}-${day} 00:00:00`;
this.currTimeList = {startTime: startData, endTime: endData};
this.defaultTimes = [startData, endData];
this.paramsData = this.$route && this.$route.query;
this.handleClick();
},
methods: {
async handleClick(tab, event) {
this.loading = false;
if (this.activeName === 'first') {
await Promise.all([
this.getMonitorData(),
this.getCpuData(),
this.getMemData(),
this.getPowerData()
]);
this.loading = true;
} else {
await this.fnInterFaceNameList();
this.loading = true;
}
},
methods: {
handleClick(tab, event) {},
goBack() {
this.$router.push("/resource/switchRegister");
getMonitorData() {
this.formData = {formFirst: this.formFirst};
switchMonitorData({clientId: this.paramsData.clientId}).then(res => {
if (res && res.data) {
this.formData['formValue'] = res.data;
}
});
},
getCpuData(val) {
let cpuData = JSON.parse(JSON.stringify(this.resultData[0]));
switchCpuData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
cpuData['fnEvent'] = 'getCpuData';
if (res && res.data) {
cpuData.dataVal.lineXData = res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
cpuData.dataVal.dataList[0].data = res.data && res.data['yData'] && res.data['yData']['switchCpuUse'] && res.data['yData']['switchCpuUse'].length > 0 ? res.data['yData']['switchCpuUse'] : [];
}
// this.firstChartList[0] = cpuData;
this.$set(this.firstChartList, 0, cpuData);
}).catch(() => {
this.firstChartList[0] = cpuData;
});
},
getMemData(val) {
let memData = JSON.parse(JSON.stringify(this.resultData[1]));
switchMemData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
memData['fnEvent'] = 'getMemData';
if (res && res.data) {
memData.dataVal.lineXData = res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
memData.dataVal.dataList[0].data = res.data && res.data['yData'] && res.data['yData']['switchMemUse'] && res.data['yData']['switchMemUse'].length > 0 ? res.data['yData']['switchMemUse'] : [];
}
// this.firstChartList[1] = memData;
this.$set(this.firstChartList, 1, memData);
}).catch(() => {
this.firstChartList[1] = memData;
});
},
getPowerData(val) {
let powerData = JSON.parse(JSON.stringify(this.resultData[2]));
switchPowerData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
powerData['fnEvent'] = 'getPowerData';
if (res && res.data) {
powerData.dataVal.lineXData = res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
powerData.dataVal.dataList[0].data = res.data && res.data['yData'] && res.data['yData']['switchAvgPower'] && res.data['yData']['switchAvgPower'].length > 0 ? res.data['yData']['switchAvgPower'] : [];
powerData.dataVal.dataList[1].data = res.data && res.data['yData'] && res.data['yData']['switchcurrentPower'] && res.data['yData']['switchcurrentPower'].length > 0 ? res.data['yData']['switchcurrentPower'] : [];
}
// this.firstChartList[2] = powerData;
this.$set(this.firstChartList, 2, powerData);
}).catch(() => {
this.firstChartList[2] = powerData;
});
},
// two
// 接口名称
async fnInterFaceNameList(val) {
this.activeNames = [];
try {
const res = await postInterFaceName({clientId: this.paramsData.clientId});
// .then(res => {
res && res.forEach(async(item,index) => {
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['net']));
oneData.title = item && item.interfaceName;
this.secondChartList[item.interfaceName] = oneData;
if (index === 0) {
this.$modal.loading();
await Promise.all([
this.getNetDiscards(this.currTimeList, item),
this.getNetTotal(this.currTimeList, item),
this.getNetErrDisc(this.currTimeList, item),
this.getNetSpeed(this.currTimeList, item)
]);
setTimeout(() => {
if (!this.activeNames.includes(item.interfaceName)) this.activeNames.push(item.interfaceName);
this.$modal.closeLoading();
},2000);
}
});
// });
} catch (error) {
this.$modal.closeLoading();
console.error('获取接口名称列表失败：', error);
// 可添加错误提示，如this.$message.error('数据加载失败')
}
},
// 基本信息
getNetData() {
switchNetDetails({clientId: this.paramsData.clientId}).then(res => {
if (res && res.data) {
this.formData['formValue'] = res.data;
}
});
},
// 丢包
getNetDiscards(times,val) {
const interfaceName = val.interfaceName;
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
if (netEcharts && netEcharts.dateDataTrans) {
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
}
netEcharts.fnEvent = 'getNetDiscards';
switchNetDiscards(Object.assign({}, {name : interfaceName,clientId: this.paramsData.clientId}, times)).then(res => {
this.$set(this.secondChartList[interfaceName].echartList, 0, []);
if (res && res.data) {
this.eventDataMap['interfaceName'] = false;
netEcharts.title = `${interfaceName}的丢包数`;
console.log('');
netEcharts.dataVal.lineXData = res.data?.xData.length > 0 ? res.data.xData : this.firstChartTrans?.timeList || [];
// 入
netEcharts.dataVal.dataList[0] = {
name: this.secondChartList[interfaceName].echartFors[0].oneName,
data: res.data.yData?.netInDiscardsData || []
};
// 出
netEcharts.dataVal.dataList[1] = {
name: this.secondChartList[interfaceName].echartFors[0].twoName,
data: res.data.yData?.netOutDiscardsData || []
};
this.$set(this.secondChartList[interfaceName].echartList, 0, netEcharts);
this.$set(this.eventDataMap, interfaceName, true);
if (this.firstChartTrans?.timeList) {
this.matchNum['interfaceName'] = val.interfaceName;
this.$set(this.matchNum, 'num', Math.floor(Math.random() * 9000));
}
}
});
},
// 总数
getNetTotal(times,val) {
const interfaceName = val.interfaceName;
// let netData = JSON.parse(JSON.stringify(this.secondChartList[interfaceName]));
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
netEcharts.fnEvent = 'getNetTotal';
switchNeTotal(Object.assign({}, {name : interfaceName,clientId: this.paramsData.clientId}, times)).then(res => {
if (res && res.data) {
netEcharts.title = `${interfaceName}的Bites总数`;
netEcharts.dataVal.lineXData = res.data && res.data.xData || [];
// 入
netEcharts.dataVal.dataList[0] = {
name: this.secondChartList[interfaceName].echartFors[1].oneName,
data: res.data.yData?.netInTotalData || []
};
// 出
netEcharts.dataVal.dataList[1] = {
name: this.secondChartList[interfaceName].echartFors[1].twoName,
data: res.data.yData?.netOutTotalData || []
};
this.$set(this.secondChartList[interfaceName].echartList, 1, netEcharts);
}
});
},
// 错误丢包
getNetErrDisc(times, val) {
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
netEcharts.fnEvent = 'getNetErrDisc';
switchNetErrDiscard(Object.assign({}, {name : val.interfaceName,clientId: this.paramsData.clientId}, times)).then(res => {
if (res && res.data) {
netEcharts.title = `${val.interfaceName}的错误包数量`;
netEcharts.dataVal.lineXData = res.data && res.data.xData || [];
netEcharts.dataVal.dataList[0].name = this.secondChartList[val.interfaceName].echartFors[2].oneName;
netEcharts.dataVal.dataList[0].data = res.data && res.data.yData?.netInErrDiscardsData || [];
netEcharts.dataVal.dataList[1].name = this.secondChartList[val.interfaceName].echartFors[2].twoName;
netEcharts.dataVal.dataList[1].data = res.data && res.data.yData?.netOutErrDiscardsData || [];
this.$set(this.secondChartList[val.interfaceName].echartList, 2, netEcharts);
}
});
},
// 实时流量
getNetSpeed(times, val) {
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
netEcharts.fnEvent = 'getNetSpeed';
switchNetSpeed(Object.assign({}, {name : val.interfaceName,clientId: this.paramsData.clientId}, times)).then(res => {
if (res && res.data) {
netEcharts.title = `${val.interfaceName}的网络速率(bites/sec)`;
netEcharts.dataVal.lineXData = res.data && res.data.xData || [];
netEcharts.dataVal.dataList[0].name = this.secondChartList[val.interfaceName].echartFors[3].oneName;
netEcharts.dataVal.dataList[0].data = res.data && res.data.yData?.netInSpeedData || [];
netEcharts.dataVal.dataList[1].name = this.secondChartList[val.interfaceName].echartFors[3].twoName;
netEcharts.dataVal.dataList[1].data = res.data && res.data.yData?.netOutSpeedData || [];
this.$set(this.secondChartList[val.interfaceName].echartList, 3, netEcharts);
}
});
},
collapseChangeData(valList) {
valList && valList.forEach(item => {
if (!this.eventDataMap[item]) {
this.$modal.loading();
this.getNetDiscards(this.currTimeList, {interfaceName: item});
this.getNetTotal(this.currTimeList, {interfaceName: item});
this.getNetErrDisc(this.currTimeList, {interfaceName: item});
this.getNetSpeed(this.currTimeList, {interfaceName: item});
setTimeout(() => {
if (!this.activeNames.includes(item)) this.activeNames.push(item);
this.$modal.closeLoading();
},2500);
}
});
},
chartFnEvent(valData, fnName, tabName) {
console.log('ccccc===',fnName,'vvv==', typeof this[fnName] === 'function');
this.firstChartTrans = valData;
// 检查函数是否存在，避免报错
if (typeof this[fnName] === 'function') {
// 调用实际函数，并传递参数（如选中的值、当前项）
this[fnName]({startTime: valData.timeArr[0], endTime: valData.timeArr[1]}, {interfaceName: tabName});
} else {
console.warn(`函数 ${fnName} 未定义`);
}
},
goBack() {
this.$router.push("/resource/switchRegister");
}
}
}
</script>
<style scoped>

191
src/views/resource/switchRegister/secondAutoFind.vue
View File

@@ -1,15 +1,15 @@
<template>
<div style="padding: 8px 20px 20px;">
<el-collapse v-model="activeNames">
<el-collapse-item v-for="(val,key, index) of linuxSystem" :title="val.title" :name="index">
<el-collapse v-model="activeShowList" @change="collapseChange">
<el-collapse-item v-for="(val,key, index) of secondChartList" :title="`【${val.title}】`" :name="val.title">
<div class="mt10 w100">
<div class="w100 plr-20" style="font-size: 14px">
<div v-for="(item,key,index) of val.formList" 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.formList" :key="`${key}-${index}`" class="w50 disInlineBlock p10">
<span class="w50 disInlineBlock">{{item}}</span><span class="w50">{{val.formModel[key] || '-'}}</span>
</div>
</div>
<div v-for="item of val.echartList" class="w100 mt20 mb20" style="height: 200px;border-top: 1px solid #d8dce5">
<EchartsLine class="w100 h100" :lineData="item.dataVal" :title="item.title" :chartData="(valData) => chartDataEvent(valData, item.fnEvent)"></EchartsLine>
<div v-for="item of val.echartList" :key="`div-${val.title}-${item.title}-${index}`" class="w100 mt20 mb20" style="height: 200px;border-top: 1px solid #d8dce5">
<EchartsLine class="w100 h100" :key="`chart-${val.title}-${item.title}-${index}`" :lineData="item && item.dataVal || {}" :dateDataTrans="item.dateDataTrans" :dateShowType="item.dateShowType" :title="item.title || '图表数据'" :chartData="(valData) => chartDataEvent(valData, item.fnEvent,val.title)"></EchartsLine>
</div>
</div>
</el-collapse-item>
@@ -22,126 +22,75 @@
export default {
name: 'SecondAutoFind',
components: {EchartsLine},
data() {
return {
activeNames: [0, 1,2,3,4],
echartData: {
title: 'GE1/0/1的丢包数',
dataVal: {
titleVal: {textAlign: 'left', left: '1%'},
gridTop: '35%',
legend: {top: '15%', left: '10%'},
lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
dataList: [{
name: '入站丢包',
data: [120, 132, 101, 134, 90, 230, 210],
},{
name: '出站丢包',
data: [220, 182, 191, 234, 290, 330, 310]
}]
}
},
linuxSystem: {
net: {
title: '网络端口GE1/0/1',
formList: {name: '端口名称', type: '端口类型', status: '端口状态', mbps: '端口适配速率(Mbps)'},
formModel: {name: 'GE1/0/1', type: 'ETHNET', status: 'up', mbps: '1000'},
config: {labelWidth: '160px', buttonGroup: []},
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: []
},
light: {
title: '光模块sabc',
formList: {name: '光模块端口名称'},
formModel: {name: 'sabc'},
config: {buttonGroup: []},
echartFors: [
{title: 'sabc的光衰阈值(dBm)', oneName: '光模块发送光衰阈值', twoName: '光模块接收光衰阈值'},
{title: 'sabc的功率(dBm)', oneName: '光模块接收功率', twoName: '光模块发送功率'}
],
echartList: []
},
mpu: {
title: 'MPU1',
formList: {name: 'MPU名称', system: 'MPU的操作系统'},
formModel: {name: 'MPU1', system: 'xxxx'},
config: {buttonGroup: []},
echartFors: [
{title: 'MPU1的CPU使用率(%)', oneName: 'CPU利用率'},
{title: 'MPU1的内存使用率(%)', oneName: '内存利用率'},
{title: 'MPU1的温度(°C)', oneName: '温度'},
],
echartList: []
},
pw: {
title: '电源PW1',
formList: {name: '电源名称', status: '电源状态'},
formModel: {name: 'PW1', status: '正在供电'},
config: {buttonGroup: []},
echartFors: [
{title: '电源电流(mA)', oneName: '电源电流'},
{title: '电源电压(mV)', oneName: '电源电压'}
],
echartList: []
},
fan: {
title: '风扇FAN1',
formList: {name: '风扇名称', status: '风扇状态'},
formModel: {name: 'FAN1', status: 'xxx'},
config: {buttonGroup: []},
echartFors: [],
echartList: []
}
},
props: {
secondChartList: {
type: Object,
default: () => {}
},
activeNames: {
type: Array,
default: () => []
},
defaultTimes: {
type: Array,
default: () => []
},
matchNum: {
type: Object,
default: () => {}
}
},
created() {
// this.$nextTick(() => {
this.secondList();
// });
watch: {
activeNames: {
handler(val) {
console.log('val==',val);
this.activeShowList = val;
},
deep: true,
// immediate: true
},
secondChartList: {
handler(val) {
console.log('val=000000=',val);
},
deep: true,
// immediate: true
},
matchNum: {
handler(val) {
// if (val && val.interfaceName) {
// let newData = JSON.parse(JSON.stringify(this.secondChartList));
// this.secondChartList[val.interfaceName].echartList = [];
// setTimeout(() => {
// // this.secondChartList[val.interfaceName].echartList = newData[val.interfaceName].echartList;
// },1000);
// console.log('val=matchNum=',val,'this.secondChartList=====',this.secondChartList);
// }
},
deep: true,
immediate: true
}
},
data() {
return {
activeShowList: []
}
},
created() {},
methods: {
deepClone(obj) {
return JSON.parse(JSON.stringify(obj))
collapseChange(val) {
this.activeShowList = this.activeNames;
this.$emit("collapseChangeData", val);
},
// 第二节点 自动发现项
secondList(){
Object.keys(this.linuxSystem).forEach((key,index) => {
// 用可选链简化空值判断，避免报错
const targetModule = this.linuxSystem[key];
if (!targetModule?.echartFors?.length) return; // 无图表模板则跳过
targetModule.echartFors.forEach(item => {
// 深拷贝基础配置，确保每个图表配置独立
const chartData = this.deepClone(this.echartData);
// 3. 替换图表标题（模板有标题则用模板，无则保留基础配置的标题）
if (item.title) chartData.title = item.title;
if (item.twoName) {
chartData.dataVal.dataList[1].name = item.twoName;
} else {
chartData.dataVal.dataList.splice(1,1);
}
if (item.oneName) {
chartData.dataVal.dataList[0].name = item.oneName;
} else {
chartData.dataVal.dataList.splice(0,1);
}
this.linuxSystem[key].echartList.push(chartData);
});
});
},
chartDataEvent(valData, funcName) {
// 检查函数是否存在，避免报错
if (typeof this[funcName] === 'function') {
// 调用实际函数，并传递参数（如选中的值、当前项）
// this[funcName]({startTime: valData[0], endTime: valData[1]});
} else {
console.warn(`函数 ${funcName} 未定义`);
}
chartDataEvent(valData, funcName, tabName) {
this.$emit("chartFnEvent", valData, funcName, tabName);
// // 检查函数是否存在，避免报错
// if (typeof this[funcName] === 'function') {
// // 调用实际函数，并传递参数（如选中的值、当前项）
// // this[funcName]({startTime: valData[0], endTime: valData[1]});
// } else {
// console.warn(`函数 ${funcName} 未定义`);
// }
}
}
}

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

@@ -41,9 +41,9 @@
config: {title: '基本信息',labelWidth: '140px'},
controls: {
id: {label: 'ID',hidden: true},
switchName: {label: '交换机名称', span: 12, type: 'select', eventName: 'change', options:[], rules: [{required: true, message: '请输入硬件SN', trigger: 'blur'}]},
interfaceName: {label: '接口名称', span: 12, type: 'select', options:[]},
connectedDeviceType: {label: '接口连接设备类型', span: 12, type: 'radio', options:this.dict.type.rm_topology_type},
switchName: {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'},
serverPort: {label: '服务器网口', span: 12, options:[], type: 'select'},
}