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

告警日志和消息推送开发并联调

Browse Source 
1、优化列表操作列宽度
2、联调告警日志模块(100%)
3、前端开发并联调消息推送模块(100%)
4、服务器管理和交换机管理的图形监控下的数据进行默认展开排序
This commit is contained in:
康冉冉
2025-11-12 18:39:01 +08:00
parent a5186543d3
commit 1dff3d2a9f
26 changed files with 980 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/disRevenue/resource.js
+69
View File
@@ -958,3 +958,72 @@ export function dockerSpeedEcharts(data) {
data: data
})
}
/** ----------------告警日志 ------------ */
// 查询列表
export function listAlarmLog(query) {
return request({
url: '/rocketmq/alarmLog/list',
method: 'post',
data: query
})
}
// 查询详细(未使用)
export function getAlarmLog(Id) {
return request({
url: '/rocketmq/alarmLog/' + Id,
method: 'get'
})
}
// 查询详细(跳转到服务器管理的详情) 通过clientId查询服务器管理详情
export function getAlarmLogServerMsg(query) {
return request({
url: '/system/registration/getServerMsgByClientId',
method: 'post',
data: query
})
}
/** ----------------消息推送 ------------ */
// 查询列表
export function listAlarmPush(query) {
return request({
url: '/rocketmq/alarmPushConfig/list',
method: 'post',
data: query
})
}
// 查询详细
export function getAlarmPush(Id) {
return request({
url: '/rocketmq/alarmPushConfig/' + Id,
method: 'get'
})
}
// 新增
export function addAlarmPush(data) {
return request({
url: '/rocketmq/alarmPushConfig',
method: 'post',
data: data
})
}
// 修改
export function updateAlarmPush(data) {
return request({
url: '/rocketmq/alarmPushConfig',
method: 'put',
data: data
})
}
// 删除
export function delAlarmPush(Ids) {
return request({
url: '/rocketmq/alarmPushConfig/' + Ids,
method: 'delete'
})
}
src/components/table/index.vue
+59 -1
View File
@@ -71,7 +71,7 @@
</el-table-column>
</template>
<!-- 表格行内按钮 -->
<el-table-column v-if="config && config.tableButton && config.tableButton.line" :width="config.tableButton.line.length * 70 + `px`" label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
<el-table-column v-if="config && config.tableButton && config.tableButton.line" :width="calculateOperationColumnWidth(config.tableButton.line, tableList)" label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<template v-for="item of config.tableButton.line">
<template v-if="item && item.more && item.more.length > 0">
@@ -189,6 +189,64 @@
this.$refs.selChangeList.setCurrentRow(targetRow); // 使用传入的row参数
});
},
// 计算操作列宽度
calculateOperationColumnWidth(buttonConfigs, rowData) {
let maxTotalWidth = 0;
// 遍历每一行数据
rowData.forEach(row => {
let currentLineWidth = 0;
let visibleButtonCount = 0;
// 计算当前行所有可见按钮的总宽度
buttonConfigs.forEach(config => {
// 判断按钮是否显示
if (this.isButtonVisible(config, row)) {
// 12是图标的宽度
const btnWidth = this.calculateButtonWidth(config) + 14;
currentLineWidth += btnWidth;
visibleButtonCount++;
}
});
// 加上按钮间距（假设每个按钮左右有5px间距）
if (visibleButtonCount > 0) {
currentLineWidth += (visibleButtonCount - 1) * 10;
}
// 更新最大宽度
if (currentLineWidth > maxTotalWidth) {
maxTotalWidth = currentLineWidth;
}
});
// 加上单元格内边距
return Math.max(maxTotalWidth + 40); // 最小宽度120px
},
// 计算单个按钮宽度（根据字符数）
calculateButtonWidth(buttonConfig) {
const text = buttonConfig.content || buttonConfig.title || '';
let width = 0;
// 计算文本宽度（根据中英文字符不同宽度）
for (const char of text) {
if (char >= '\u4e00' && char <= '\u9fa5') {
// 中文字符约15px
width += 12;
} else {
// 英文字符约8px
width += 4;
}
}
// 加上按钮内边距和边框（约60px基础宽度）
return Math.max(width);
},
// 判断按钮是否显示
isButtonVisible(buttonConfig, row) {
if (buttonConfig.showName) {
return buttonConfig.showVal.includes(row[buttonConfig.showName]);
}
return true;
},
// 所有方法都抛出到父组件里去
handleClick(result, row) {
if (result && result.fnCode) {
src/router/index.js
+19 -3
View File
@@ -298,7 +298,7 @@ export const dynamicRoutes = [
}
]
},
// 业务脚本管理
// 脚本管理
{
path: '/earnManage/businessScript/details',
component: Layout,
@@ -309,7 +309,7 @@ export const dynamicRoutes = [
path: ':id?',
component: () => import('@/views/earnManage/businessScript/details'),
name: 'BusinessScriptDetails',
meta: { title: '业务脚本信息', noCache: true ,activeMenu: '/earnManage/businessScript' }
meta: { title: '脚本信息', noCache: true ,activeMenu: '/earnManage/businessScript' }
}
]
},
@@ -487,6 +487,21 @@ export const dynamicRoutes = [
}
]
},
// 消息推送
{
path: '/resource/messagePush/details',
component: Layout,
hidden: true,
permissions: ['resource:messagePush:details'],
children: [
{
path: ':id?',
component: () => import('@/views/resource/messagePush/details'),
name: 'MessagePushDetails',
meta: { title: '消息推送信息', activeMenu: '/resource/messagePush' }
}
]
},
// 服务器监控策略
{
path: '/resource/serverMonitorStrat/details',
@@ -657,7 +672,8 @@ export const dynamicRoutes = [
children: [
{
path: ':id?',
component: () => import('@/views/resource/alarmLog/alarmLogDetails'),
// component: () => import('@/views/resource/alarmLog/alarmLogDetails'),
component: () => import('@/views/resource/serverRegister/handle'),
name: 'alarmLogDetails',
meta: { title: '告警日志信息', activeMenu: '/resource/alarmLog' }
}
src/views/earnManage/busValueCount/busValueCount.vue
+4 -4
View File
@@ -68,16 +68,16 @@
// 列显隐信息
columns: {
id: {label: `ID`},
taskName: {label: `任务名称`, minWidth: '250', visible: true},
taskName: {label: `任务名称`, minWidth: '150', visible: true},
businessName: {label: `业务名称`, minWidth: '150', visible: true},
resourceType: { label: `包含资源类型`, minWidth: '200', slotName: 'tempResType'},
includedResources: { label: `包含资源`, minWidth: '300'},
calculationType: {label: `计算类型`, minWidth: '150'},
percentile95: {label: `95值(Mbit)`, minWidth: '200',visible: true},
monthlyAvgPercentile95: {label: `月均日95值(Mbit)`, minWidth: '200',visible: true},
percentile95: {label: `95值(Mbit)`, minWidth: '100',visible: true},
monthlyAvgPercentile95: {label: `月均日95值(Mbit)`, minWidth: '150',visible: true},
// js: {label: `外部数据记录95值(Mbit)`, minWidth: '200'},
timeRange: {label: `时间段`, minWidth: '200',visible: true},
taskStatus: {label: `任务状态`, minWidth: '150', slotName: 'tempStatus', visible: true},
taskStatus: {label: `任务状态`, minWidth: '80', slotName: 'tempStatus', visible: true},
updateTime: {label: `修改时间`, minWidth: '150'},
createTime: {label: `创建时间`, minWidth: '150'},
},
src/views/earnManage/busValueCount/details.vue
+80 -10
View File
@@ -1,46 +1,107 @@
<template>
<div class="app-container">
<Form :formList="formList" :ruleFormData="ruleForm" @fnClick="callback"></Form>
<!-- 弹窗 -->
<el-dialog title="选择包含资源" :visible.sync="open" width="900px" height="300px" append-to-body>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="按业务名称选择" name="first">用户管理</el-tab-pane>
<el-tab-pane label="按逻辑节点标识选择" name="second">配置管理</el-tab-pane>
</el-tabs>
<el-row :gutter="20">
<splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
<pane size="16">
<el-col>
<div class="head-container">
<el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" ref="tree" node-key="id" default-expand-all highlight-current @node-click="handleNodeClick" />
</div>
</el-col>
</pane>
<pane size="84">
<TableList ref="tabRef" :columns="columns" :config="{colHiddenCheck: true, colTopHiddenIcon: true, currentSel: true}" :queryParams="{total: 0}" :tableList="tableList" @fnClick="callback"></TableList>
</pane>
</splitpanes>
</el-row>
<div style="text-align: right;margin-right: 20px;margin-top: 20px;">
<el-button type="primary" style="margin-left: 10px;" @click="submitPubilc">确定</el-button>
<el-button @click="open = false">取消</el-button>
</div>
</el-dialog>
</div>
</template>
<script setup>
import Form from '@/components/form/index.vue';
import TableList from "@/components/table/index.vue"
import {deptTreeSelect } from "@/api/system/user"
import { Splitpanes, Pane } from "splitpanes"
import {listAllBusinessList, addTaskStatic, switchNameTree} from "@/api/disRevenue/earnManage"
import {listAllSwitchName, getRegistList} from "@/api/disRevenue/resource"
import "splitpanes/dist/splitpanes.css"
export default {
name: 'busValueCount_Details',
components: {Form},
components: {Form, TableList, Splitpanes, Pane},
dicts: ['resource_type', 'caculate_type'],
data() {
return {
activeName: 'first',
// 所有树选项
deptOptions: undefined,
defaultProps: {
children: "children",
label: "label"
},
ruleForm: {},
formList: [],
switchNameList: [],
paramsData: {},
busNameList: {},
open: false,
tableList: [],
// 列显隐信息
columns: {
id: { label: `ID`,width: '50'},
clientId: { label: `ClientID`, minWidth: '200', visible: true },
businessName: { label: `业务名称`,minWidth: '200',visible: true},
logicalNodeId: { label: `逻辑节点标识`,minWidth: '320',visible: true},
},
}
},
created() {
this.paramsData = this.$route && this.$route.query;
this.fnFormList();
this.switchList();
this.getDeptTree();
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
/** 查询部门下拉树结构 */
getDeptTree() {
deptTreeSelect().then(response => {
this.deptOptions = response.data;
})
},
// 节点单击事件
handleNodeClick(data) {
// this.queryParams.deptId = data.id;
// this.handleQuery();
},
// formList集合
fnFormList(objVal) {
this.formList = [{
config: {title: '基本信息', colSpan: 'disBlock'},
config: {title: '基本信息'},
controls: {
id: {label: 'ID',hidden: true},
taskName: {label: '任务名称', span: 12, type: 'input',required: true},
businessName: {label: '业务名称', span: 12, type: 'select', options:[]},
resourceType: {label: '包含资源类型', span: 12, type: 'select', eventName: 'change', options: this.dict.type.resource_type, required: true},
includedResourcesTree: {label: '包含资源', span: 12, type: 'treeSelect', options: [], searchable: true, multiple: true, required: true, hidden: this.ruleForm.resourceType && this.ruleForm.resourceType === '1' ? false : true},
includedResources: {label: '包含资源', span: 12, type: 'cascader', options: [], required: true, hidden: this.ruleForm.resourceType && this.ruleForm.resourceType === '2' ? false : true},
calculationType: {label: '计算类型', span: 12, type: 'select', options: this.dict.type.caculate_type, eventName: 'change', required: true},
startTime: {label: '时间段', span: 12, type: 'month', hidden: this.ruleForm.calculationType && this.ruleForm.calculationType === '2' ? false : true},
endTime: {label: '时间段', span: 12, type: 'datetimerange', hidden: this.ruleForm.calculationType && this.ruleForm.calculationType === '1' ? false : true},
taskName: {label: '任务名称', span: 18, type: 'input',required: true},
businessName: {label: '业务名称', span: 18, type: 'select', options:[]},
resourceType: {label: '包含资源类型', span: 18, type: 'select', eventName: 'change', options: this.dict.type.resource_type, required: true},
includedResourcesTree: {label: '包含资源', span: 18, type: 'treeSelect', options: [], searchable: true, multiple: true, required: true, hidden: this.ruleForm.resourceType && this.ruleForm.resourceType === '1' ? false : true},
changeClientId: {label: '选择ClientID', span: 3, type: 'button', eventName: 'change', hidden: this.ruleForm.resourceType && this.ruleForm.resourceType === '1' ? false : true},
includedResources: {label: '包含资源', span: 18, type: 'cascader', options: [], required: true, hidden: this.ruleForm.resourceType && this.ruleForm.resourceType === '2' ? false : true},
calculationType: {label: '计算类型', span: 18, type: 'select', options: this.dict.type.caculate_type, eventName: 'change', required: true},
startTime: {label: '时间段', span: 18, type: 'month', hidden: this.ruleForm.calculationType && this.ruleForm.calculationType === '2' ? false : true},
endTime: {label: '时间段', span: 18, type: 'datetimerange', hidden: this.ruleForm.calculationType && this.ruleForm.calculationType === '1' ? false : true},
}
}];
},
@@ -71,6 +132,10 @@
});
}
},
submitPubilc() {
this.open = false;
this.getFormDataList(this.currentDataList.id, 'btnGain');
},
// 监听事件
callback(result, dataVal, formVal) {
if (result && result.fnCode) {
@@ -79,6 +144,7 @@
if (dataVal) {
if (dataVal === '1') {
this.formList[0].controls.includedResourcesTree['hidden'] = false;
this.formList[0].controls.changeClientId['hidden'] = false;
this.formList[0].controls.includedResources['hidden'] = true;
} else if (dataVal === '2') {
this.formList[0].controls.includedResources['hidden'] = false;
@@ -87,6 +153,7 @@
this.includeDataList(dataVal);
} else {
this.formList[0].controls.includedResourcesTree['hidden'] = true;
this.formList[0].controls.changeClientId['hidden'] = true;
this.formList[0].controls.includedResources['hidden'] = true;
}
// if (dataVal) {}
@@ -106,6 +173,9 @@
this.formList[0].controls.endTime['hidden'] = true;
}
break;
case 'changeClientId':
this.open = true;
break;
case 'submit':
dataVal['calculationMode'] = this.paramsData.calculationMode;
if (dataVal.includedResources) {
src/views/earnManage/businessIssued/businessIssued.vue
+4 -4
View File
@@ -45,15 +45,15 @@
},
// 列显隐信息
columns: {
id: {label: 'ID'},
id: {label: 'ID', width: '50'},
taskName: { label: `任务名称`, minWidth: '120', visible: true},
businessName: { label: `业务名称`, minWidth: '120', visible: true},
scriptName: { label: `脚本名称`, minWidth: '120', visible: true},
scriptParams: { label: `脚本参数`, minWidth: '120',},
deployDevice: { label: `部署设备`, minWidth: '120',},
deployDevice: { label: `部署设备`, minWidth: '120', customTooltip: true},
submitBy: { label: `提交人`, minWidth: '120',},
reviewStatus: { label: `审核状态`, minWidth: '120', slotName: 'tempStatus', visible: true},
reviewTime: { label: `审核时间`, minWidth: '160'},
reviewStatus: { label: `审核状态`, minWidth: '100', slotName: 'tempStatus', visible: true},
reviewTime: { label: `审核时间`, minWidth: '120'},
reviewComment: { label: `审核意见`, minWidth: '160'},
createTime: { label: `创建时间`, minWidth: '160'},
updateTime: { label: `修改时间`, minWidth: '160'},
src/views/earnManage/businessScript/businessScript.vue
+2 -2
View File
@@ -40,7 +40,7 @@
},
// 列显隐信息
columns: {
id: {label: 'ID'},
id: {label: 'ID', width: '50'},
scriptName: { label: `脚本名称`, visible: true},
scriptPath: { label: `脚本文件地址`, visible: true},
defaultParams: { label: `脚本默认参数`, visible: true},
@@ -143,7 +143,7 @@
// });
// this.download("/system/Business/export", {properties: dataList,}, `业务管理_${new Date().getTime()}.xlsx`);
let paramsList = Object.assign({}, this.queryParams,rowData);
this.download("system/businessScript/export", paramsList, `业务脚本管理_${new Date().getTime()}.xlsx`, null, 'json');
this.download("system/businessScript/export", paramsList, `脚本管理_${new Date().getTime()}.xlsx`, null, 'json');
break;
default:
src/views/earnManage/revenueMethod/index.vue
+1 -1
View File
@@ -55,7 +55,7 @@
// 列显隐信息
columns: {
id: {label: `ID`, visible: false},
id: {label: `ID`, width: '50'},
updateTime: {label: `修改时间`, minWidth: '160', visible: true},
clientId: {label: `ClientID`, minWidth: '300', visible: true},
hardwareSn: {label: `硬件SN`},
src/views/earnManage/server/serverTabs.vue
+6 -6
View File
@@ -174,14 +174,14 @@
showSearch: true,
// 列显隐信息
columns: {
id: {label: `ID`},
clientId: {label: `ClientID`, minWidth: '320', visible: true},
hardwareSn: {label: `硬件SN`, minWidth: '350'},
id: {label: `ID`, width: '50'},
clientId: {label: `ClientID`, minWidth: '280', visible: true},
hardwareSn: {label: `硬件SN`, minWidth: '150'},
businessName: {label: `业务名称`, minWidth: '150', visible: true},
businessId: {label: `业务代码`, minWidth: '150'},
bandwidth95Daily: {label: `95带宽值/日(Mbit)`, minWidth: '200', slotName: 'tempDay',visible: true},
bandwidth95Monthly: {label: `95带宽值/月(Mbit)`, minWidth: '200', slotName: 'tempMonth',visible: true},
avgMonthlyBandwidth95: {label: `月均日95值(Mbit)`, minWidth: '200',slotName: 'tempDay',visible: true},
bandwidth95Daily: {label: `95带宽值/日(Mbit)`, minWidth: '150', slotName: 'tempDay',visible: true},
bandwidth95Monthly: {label: `95带宽值/月(Mbit)`, minWidth: '150', slotName: 'tempMonth',visible: true},
avgMonthlyBandwidth95: {label: `月均日95值(Mbit)`, minWidth: '150',slotName: 'tempDay',visible: true},
machineFlow: {label: `金山machineCode`, minWidth: '150',visible: true},
uplinkSwitch: {label: `上联交换机`, minWidth: '150'},
uplinkSwitchPort: {label: `上联交换机端口`, minWidth: '150'},
src/views/earnManage/switch/switchTabs.vue
+10 -10
View File
@@ -215,14 +215,14 @@
// 列显隐信息
columns: {
id: { label: `ID`,width: '50', visible: false },
uplinkSwitch: { label: `交换机名称`, minWidth: '180', visible: true },
hardwareSn: { label: `硬件SN`, minWidth: '200'},
interfaceName: { label: `接口名称`, minWidth: '120',visible: true },
interfaceLinkDeviceType: { label: `接口连接设备类型`, slotName: 'tempType',minWidth: '180', visible: true },
interfaceRemark: {label: `接口备注`,minWidth: '150'},
bandwidth95Daily: { label: `95带宽值/日(Mbit)`, minWidth: '200', slotName: 'tempDay', visible: true },
bandwidth95Monthly: { label: `95带宽值/月(Mbit)`, minWidth: '200', slotName: 'tempMonth', visible: true},
avgMonthlyBandwidth95: {label: `月均日95值(Mbit`, minWidth: '200', slotName: 'tempDay', visible: true},
uplinkSwitch: { label: `交换机名称`, minWidth: '120', visible: true },
hardwareSn: { label: `硬件SN`, minWidth: '220'},
interfaceName: { label: `接口名称`, minWidth: '100',visible: true },
interfaceLinkDeviceType: { label: `接口连接设备类型`, slotName: 'tempType',minWidth: '130', visible: true },
interfaceRemark: {label: `接口备注`,minWidth: '120'},
bandwidth95Daily: { label: `95带宽值/日(Mbit)`, minWidth: '180', slotName: 'tempDay', visible: true },
bandwidth95Monthly: { label: `95带宽值/月(Mbit)`, minWidth: '180', slotName: 'tempMonth', visible: true},
avgMonthlyBandwidth95: {label: `月均日95值(Mbit`, minWidth: '180', slotName: 'tempDay', visible: true},
clientId: {label: `ClientID`,minWidth: '320'},
businessId: {label: `业务代码`,minWidth: '150'},
businessName: {label: `业务名称`,minWidth: '100'},
@@ -230,8 +230,8 @@
// effectiveBandwidth95Daily: {label: `有效95带宽值Mbps/日`, minWidth: '200', slotName: 'tempDay', visible: true },
// effectiveBandwidth95Monthly: {label: `有效95带宽值Mbps/月`, minWidth: '200', slotName: 'tempMonth',},
// effectiveAvgMonthlyBandwidth95: {label: `有效月均日95值Mbps`, minWidth: '200', slotName: 'tempDay'},
createTime: { label: `创建时间`, minWidth: '160'},
lastModifyTime: { label: `修改时间`, minWidth: '160'}
createTime: { label: `创建时间`, minWidth: '120'},
lastModifyTime: { label: `修改时间`, minWidth: '120'}
},
config: {
// searcherForm: [
src/views/resource/agentUpdate/agentUpdate.vue
+6 -6
View File
@@ -68,18 +68,18 @@
// 列显隐信息
columns: {
id: { label: `ID`,width: '50'},
hardwareSn: { label: `硬件SN`, minWidth: '150'},
hardwareSn: { label: `硬件SN`, minWidth: '120'},
// resourceName: { label: `资源名称`, minWidth: '250', visible: true },
// internalIp: { label: `内网IP`,minWidth: '100', visible: true},
clientId: { label: `ClientID`, minWidth: '320', visible: true },
clientId: { label: `ClientID`, minWidth: '300', visible: true },
managePublicIp: { label: `管理网-公网IP`,minWidth: '120', visible: true},
status: { label: `状态`, minWidth: '100', slotName: 'tempStatus'},
agentVersion: { label: `AGENT版本`,minWidth: '150', visible: true },
method: { label: `更新方式`,minWidth: '200', slotName: 'tempMethod'},
status: { label: `状态`, minWidth: '80', slotName: 'tempStatus'},
agentVersion: { label: `AGENT版本`,minWidth: '100', visible: true },
method: { label: `更新方式`,minWidth: '80', slotName: 'tempMethod'},
scheduledUpdateTime: { label: `定时执行时间`,minWidth: '160'},
// fileUrlType: { label: `文件地址格式`,minWidth: '200'},
fileUrl: { label: `文件地址`,minWidth: '200'},
lastUpdateResult: { label: `最后一次更新结果`,minWidth: '160', slotName: 'tempResult', visible: true},
lastUpdateResult: { label: `最后一次更新结果`,minWidth: '140', slotName: 'tempResult', visible: true},
lastUpdateTime: { label: `最后一次更新时间`,minWidth: '160', visible: true},
},
config: {
src/views/resource/alarmLog/alarmLog.vue
+35 -47
View File
@@ -2,9 +2,9 @@
<div class="app-container pageTopForm">
<el-form :model="queryParams" ref="queryRef" size="small" v-show="showSearch" label-width="auto">
<el-col :span="6">
<el-form-item label="搜索" prop="switchName">
<el-form-item label="告警关键字" prop="clientId" titl="告警关键字">
<el-input
v-model="queryParams.switchName"
v-model="queryParams.clientId"
placeholder="请输入告警关键字"
clearable
@keyup.enter.native="handleQuery"
@@ -12,27 +12,13 @@
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="资源名称" prop="bandwidthType">
<el-form-item label="告警类型" prop="alarmType">
<el-select
v-model="queryParams.bandwidthType"
placeholder="请选择资源名称"
v-model="queryParams.alarmType"
placeholder="请选择告警类型"
clearable>
<el-option
v-for="dict in dict.type.eps_bandwidth_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="状态" prop="type">
<el-select
v-model="queryParams.bandwidthType"
placeholder="请选择状态"
clearable>
<el-option
v-for="dict in dict.type.eps_bandwidth_type"
v-for="dict in dict.type.alarm_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"/>
@@ -47,8 +33,8 @@
</el-col>
</el-form>
<TableList :columns="columns" :config="config" :modelIdent="this.$options.name" :queryParams="queryParams" :tableList="tableList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
<template #tempType="{ row, column }">
<dict-tag :options="dict.type.rm_topology_type" :value="row.connectedDeviceType"/>
<template #tempAlarmType="{ row, column }">
<dict-tag :options="dict.type.alarm_type" :value="row.alarmType"/>
</template>
</TableList>
</div>
@@ -56,11 +42,11 @@
<script setup>
import TableList from "@/components/table/index.vue"
import {listMonitorTemp, delMonitorTemp} from "@/api/disRevenue/resource"
import {listAlarmLog} from "@/api/disRevenue/resource"
export default {
name: 'AlarmLog',
components: {TableList},
dicts: ['rm_topology_type','eps_bandwidth_type'],
dicts: ['alarm_type'],
data() {
return {
loading: true,
@@ -74,20 +60,19 @@
// 列显隐信息
columns: {
id: { label: `ID`,width: '50'},
switchName: { label: `资源名称`, minWidth: '250', visible: true },
switchSn: { label: `源IP`,minWidth: '200',visible: false},
createTime: { label: `发生时间`,minWidth: '160'},
interfaceName: { label: `内容`,minWidth: '250', visible: true },
serverName: { label: `状态`,minWidth: '100',visible: true },
clientId: { label: `告警设备`, minWidth: '250', visible: true },
mgmPublicIp: { label: `管理网-公网IP`,minWidth: '120',visible: true},
alarmType: { label: `告警类型`,minWidth: '85', slotName: 'tempAlarmType', visible: true},
alarmTime: { label: `告警时间`,minWidth: '160',visible: true},
alarmContent: { label: `告警内容`,minWidth: '250', visible: true },
},
config: {
tableButton: {
top: [
{content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'resource:alarmManage:export'},
{content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'resource:alarmLog:export'},
],
line: [
{content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'resource:alarmManage:details'},
{content: '处理', fnCode: 'handle', type: 'text', icon: 'el-icon-document-copy', hasPermi: 'resource:alarmManage:handle'},
{content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'resource:alarmLog:details'},
]
}
}
@@ -96,11 +81,16 @@
created() {
this.getList();
},
activated() {
this.$nextTick(() => {
this.getList();
});
},
methods: {
/** 查询列表 */
getList() {
this.loading = true;
listMonitorTemp(this.queryParams).then(response => {
listAlarmLog(this.queryParams).then(response => {
this.tableList = response.rows;
this.queryParams.total = response.total;
this.loading = false;
@@ -128,23 +118,21 @@
if (result && result.fnCode) {
switch (result.fnCode) {
case 'details':
// this.$router.push({
// path:'/resource/alarmLog/details',
// query:{
// id: rowData.id
// }
// });
this.$router.push({
path:'/resource/alarmLog/details',
query:{
id: rowData.id
path: '/resource/alarmLog/details',
query: {
id: rowData.clientId,
readonly: true,
type: 'alarmLog'
}
});
break;
case 'handle':
break;
case 'delete':
this.$modal.confirm('是否确认删除数据项？').then(function() {
return delMonitorTemp(selectChange)
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功")
}).catch(() => {});
break;
case 'export':
// let dataList = [];
// Object.keys(this.columns).forEach(item => {
@@ -154,7 +142,7 @@
// });
// this.download("/system/alarmManage/export", {properties: dataList,}, `拓扑管理_${new Date().getTime()}.xlsx`);
let paramsList = Object.assign({}, this.queryParams,rowData);
this.download("system/alarmManage/export", paramsList, `资源监控策略_${new Date().getTime()}.xlsx`, null, 'json');
this.download("rocketmq/alarmLog/export", paramsList, `告警日志 _${new Date().getTime()}.xlsx`, null, 'json');
break;
default:
}
src/views/resource/alarmLog/alarmLogDetails.vue
+2 -3
View File
@@ -6,7 +6,7 @@
<script setup name="Handle">
import Form from '@/components/form/index.vue';
import {addGroup, getGroup, updateGroup, resNameList} from "@/api/disRevenue/resource"
import {getAlarmLog} from "@/api/disRevenue/resource"
export default {
name: 'AlarmLogDetails',
components: {Form},
@@ -45,9 +45,8 @@
},
// 获取详情
getFormDataList(id) {
getGroup(id).then(val => {
getAlarmLog(id).then(val => {
if (val && val.data) {
val.data['includedDevices'] = val.data['includedDevices'].split(',');
this.ruleForm = val.data;
}
}).catch(() => {
src/views/resource/messagePush/details.vue
+91
View File
@@ -0,0 +1,91 @@
<template>
<div class="app-container">
<Form :formList="formList" :ruleFormData="ruleForm" :config="paramsData && paramsData.readonly ? config : {}" @fnClick="callback"></Form>
</div>
</template>
<script setup name="Handle">
import Form from '@/components/form/index.vue';
import {addAlarmPush, getAlarmPush, updateAlarmPush} from "@/api/disRevenue/resource"
export default {
name: 'messagePushDetails',
components: {Form},
dicts: ['alarm_type', 'push_method'],
data() {
return {
ruleForm: {},
formList: [],
config: {
buttonGroup: [{title: '返回', fnCode: 'goBack'}]
},
paramsData: {}
}
},
created() {
this.paramsData = this.$route && this.$route.query;
if (this.paramsData && this.paramsData.id) {
this.getFormDataList(this.paramsData.id);
}
this.fnFormList();
},
methods: {
// formList集合
fnFormList(objVal) {
let spanNum = this.paramsData && this.paramsData.readonly ? 12 : 16;
this.formList = [{
config: {title: '基本信息', readonly: this.paramsData && this.paramsData.readonly},
controls: {
id: {label: 'ID',hidden: true},
configName: {label: '配置名称', span: spanNum, type: 'input', required: true},
pushMethod: {label: '推送方式', span: spanNum, type: 'select', options: this.dict.type.push_method, required: true},
pushAddress: {label: '推送地址', span: spanNum, type: 'input', required: true},
pushAlarmTypes: {label: '推送告警类型', span: spanNum, type: 'select', options: this.dict.type.alarm_type, required: true},
contactPhones: {label: '提示人手机号', span: spanNum, type: 'input'},
createBy: {label: '创建人', span: spanNum, type: 'input', hidden: !(this.paramsData && this.paramsData.readonly)},
createTime: {label: '创建时间', span: spanNum, type: 'datetime', hidden: !(this.paramsData && this.paramsData.readonly)},
updateTime: {label: '修改时间', span: spanNum, type: 'datetime', hidden: !(this.paramsData && this.paramsData.readonly)},
messageContent: {label: '消息内容', span: spanNum, type: 'textarea', required: true, warningTitle: '可引用的告警字段包括[告警时间]、[管理网-公网IP]、[告警类型]、[告警设备]、[告警内容]'}
}
}];
},
// 获取详情
getFormDataList(id) {
getAlarmPush(id).then(val => {
if (val && val.data) {
this.ruleForm = val.data;
}
}).catch(() => {
this.$modal.msgError("操作失败")
});
},
// 监听事件
callback(result, dataVal, formVal) {
if (result && result.fnCode) {
switch (result.fnCode) {
case 'submit':
let fnType = addAlarmPush;
if (dataVal && dataVal.id) {
fnType = updateAlarmPush;
}
if(this.loading) return;
this.loading = true;
fnType(dataVal).then(response => {
this.$modal.msgSuccess(response.msg);
this.$router.push("/resource/messagePush");
this.loading = false;
}).catch(() => {
this.$modal.msgError("操作失败")
});
break;
case 'cancel':
this.$router.push("/resource/messagePush");
break;
default:
}
}
}
}
}
</script>
<style>
</style>
src/views/resource/messagePush/messagePush.vue
+171
View File
@@ -0,0 +1,171 @@
<template>
<div class="app-container pageTopForm">
<el-form :model="queryParams" ref="queryRef" size="small" v-show="showSearch" label-width="auto">
<el-col :span="6">
<el-form-item label="配置名称" prop="configName">
<el-input
v-model="queryParams.configName"
placeholder="请输入配置名称"
clearable
@keyup.enter.native="handleQuery"
/>
</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" :modelIdent="this.$options.name" :queryParams="queryParams" :tableList="tableList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
<template #tempAlarmType="{ row, column }">
<dict-tag :options="dict.type.alarm_type" :value="row.pushAlarmTypes"/>
</template>
<template #tempPushMethod="{ row, column }">
<dict-tag :options="dict.type.push_method" :value="row.pushMethod"/>
</template>
</TableList>
</div>
</template>
<script setup>
import TableList from "@/components/table/index.vue"
import {listAlarmPush, delAlarmPush} from "@/api/disRevenue/resource"
export default {
name: 'MessagePush',
components: {TableList},
dicts: ['alarm_type', 'push_method'],
data() {
return {
loading: true,
showSearch: true,
tableList: [],
queryParams: {
total: 0,
pageNum: 1,
pageSize: 10
},
// 列显隐信息
columns: {
id: { label: `ID`,width: '50'},
configName: { label: `配置名称`, minWidth: '120', visible: true },
pushMethod: { label: `推送方式`, minWidth: '80', slotName: 'tempPushMethod', visible: true},
pushAddress: { label: `推送地址`,minWidth: '150',visible: true},
pushAlarmTypes: { label: `推送告警类型`,minWidth: '120', slotName: 'tempAlarmType', visible: true},
messageContent: { label: `消息内容`,minWidth: '200', visible: true },
contactPhones: { label: `消息提示人手机号`,minWidth: '150'},
createBy: { label: `创建人`,minWidth: '80'},
createTime: { label: `创建时间`,minWidth: '160'},
updateTime: { label: `修改时间`,minWidth: '160'},
},
config: {
tableButton: {
top: [
{content: '添加配置', fnCode: 'add', type: 'primary', icon: 'el-icon-plus', hasPermi: 'resource:messagePush:add'},
{content: '删除', fnCode: 'delete', type: 'danger', icon: 'el-icon-delete', hasPermi: 'resource:messagePush:detele'},
{content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'resource:messagePush:export'},
],
line: [
{content: '修改', fnCode: 'edit', type: 'text', icon: 'el-icon-edit', hasPermi: 'resource:messagePush:edit'},
{content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'resource:messagePush:details'},
]
}
}
}
},
created() {
this.getList();
},
activated() {
this.$nextTick(() => {
this.getList();
});
},
methods: {
/** 查询列表 */
getList() {
this.loading = true;
listAlarmPush(this.queryParams).then(response => {
this.tableList = response.rows;
this.queryParams.total = response.total;
this.loading = false;
})
},
// 处理子组件传递的新值
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/messagePush/details'});
break;
case 'edit':
this.$router.push({
path:'/resource/messagePush/details',
query:{
id: rowData.id
}
});
break;
case 'details':
this.$router.push({
path: '/resource/messagePush/details',
query: {
id: rowData.id,
readonly: true
}
});
break;
case 'delete':
if (selectList && selectList.length <= 0) {
this.$modal.msgWarning("请选择数据！");
return;
}
this.$modal.confirm('是否确认删除数据项？').then(function() {
return delAlarmPush(selectChange)
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功")
}).catch(() => {});
break;
case 'export':
// let dataList = [];
// Object.keys(this.columns).forEach(item => {
// if (item.visible) {
// dataList.push(item.prop);
// }
// });
// this.download("/system/alarmManage/export", {properties: dataList,}, `拓扑管理_${new Date().getTime()}.xlsx`);
let paramsList = Object.assign({}, this.queryParams,rowData);
this.download("system/alarmManage/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>
src/views/resource/serverMonitorStrat/serverMonitorStrat.vue
+2 -2
View File
@@ -61,14 +61,14 @@
// 列显隐信息
columns: {
id: { label: `ID`,width: '50'},
policyName: { label: `策略名称`, minWidth: '250', visible: true },
policyName: { label: `策略名称`, minWidth: '180', visible: true },
description: { label: `描述`,minWidth: '200',visible: true},
deployDevice: { label: `部署设备`,minWidth: '200',visible: true},
priority: { label: `优先级`,minWidth: '150', visible: true },
connected: { label: `策略内容`,minWidth: '200'},
status: { label: `策略状态`, minWidth: '100', slotName: 'tempStatus', visible: true },
deployTime: { label: `下发策略时间`,minWidth: '160'},
createBy:{ label: `创建人`,minWidth: '160'},
createBy:{ label: `创建人`,minWidth: '100'},
createTime: { label: `创建时间`,minWidth: '160'},
},
config: {
src/views/resource/serverRegister/handle.vue
+13 -3
View File
@@ -7,7 +7,7 @@
<script setup>
import Form from '@/components/form/index.vue';
import {addMachine, getHandle, updateTopology, getRegistList, bindBusByClient} from "@/api/disRevenue/resource";
import {addMachine, getHandle, updateTopology, getRegistList, bindBusByClient, getAlarmLogServerMsg} from "@/api/disRevenue/resource";
import {listAllBusinessList} from "@/api/disRevenue/earnManage";
export default {
name: 'serverRegister_Edit',
@@ -136,7 +136,13 @@
},
// 获取详情
getFormDataList(id) {
getHandle(id).then(val => {
let params = id;
let fnName = getHandle;
if (this.paramsData && this.paramsData.type === 'alarmLog') {
params = {clientId: this.paramsData.id};
fnName = getAlarmLogServerMsg;
}
fnName(params).then(val => {
this.ruleForm = val && val.data;
}).catch(() => {
this.$modal.msgError("操作失败")
@@ -174,7 +180,11 @@
}
break;
case 'cancel':
this.$router.push("/resource/serverRegister");
if (this.paramsData && this.paramsData.type === 'alarmLog') {
this.$router.push("/resource/alarmLog");
} else {
this.$router.push("/resource/serverRegister");
}
break;
default:
}
src/views/resource/serverRegister/index.vue
+11 -11
View File
@@ -169,31 +169,31 @@
columns: {
id: { label: `ID`,width: '50'},
clientId: { label: `clientID`, minWidth: '320', slotName: 'tempCopy'},
hardwareSn: { label: `设备SN`,minWidth: '200'},
ip1Isp: { label: `IP1-运营商`, visible: true, minWidth: '90'},
ip1Province: { label: `IP1-省`, visible: true, minWidth: '80'},
ip1City: { label: `IP1-市`, minWidth: '80'},
hardwareSn: { label: `设备SN`,minWidth: '120'},
ip1Isp: { label: `IP1-运营商`, visible: true, minWidth: '85'},
ip1Province: { label: `IP1-省`, visible: true, minWidth: '60'},
ip1City: { label: `IP1-市`, minWidth: '60'},
ip1PublicIp:{ label: `IP1-业务公网`,visible: true,minWidth: '120'},
ip1InterfaceName: { label: `IP1-接口名称`, minWidth: '100'},
ip1MacAddress: { label: `IP1-mac地址`, minWidth: '150'},
ip1MacAddress: { label: `IP1-mac地址`, minWidth: '120'},
ip1InterfaceType: { label: `IP1-接口类型`, minWidth: '100'},
ip1Ipv4Address: { label: `IP1-IPv4地址`, minWidth: '120'},
ip1Gateway: { label: `IP1-网关`, minWidth: '120'},
ip2Isp: { label: `IP2-运营商`, minWidth: '90'},
ip2Province: { label: `IP2-省`,minWidth: '80'},
ip2City: { label: `IP2-市`, minWidth: '80'},
ip2Province: { label: `IP2-省`,minWidth: '60'},
ip2City: { label: `IP2-市`, minWidth: '60'},
ip2PublicIp:{ label: `IP2-业务公网`,minWidth: '120'},
ip2InterfaceName: { label: `IP2-接口名称`, minWidth: '100'},
ip2MacAddress: { label: `IP2-mac地址`, minWidth: '150'},
ip2MacAddress: { label: `IP2-mac地址`, minWidth: '120'},
ip2InterfaceType: { label: `IP2-接口类型`, minWidth: '100'},
ip2Ipv4Address: { label: `IP2-IPv4地址`, minWidth: '120'},
ip2Gateway: { label: `IP2-网关`, minWidth: '120'},
ip3Isp: { label: `IP3-运营商`, minWidth: '90'},
ip3Province: { label: `IP3-省`, minWidth: '80'},
ip3City: { label: `IP3-市`, minWidth: '80'},
ip3Province: { label: `IP3-省`, minWidth: '60'},
ip3City: { label: `IP3-市`, minWidth: '60'},
ip3PublicIp:{ label: `IP3-业务公网`,minWidth: '120'},
ip3InterfaceName: { label: `IP3-接口名称`, minWidth: '100'},
ip3MacAddress: { label: `IP3-mac地址`, minWidth: '150'},
ip3MacAddress: { label: `IP3-mac地址`, minWidth: '120'},
ip3InterfaceType: { label: `IP3-接口类型`, minWidth: '100'},
ip3Ipv4Address: { label: `IP3-IPv4地址`, minWidth: '120'},
ip3Gateway: { label: `IP3-网关`, minWidth: '120'},
src/views/resource/serverRegister/secondAutoFind.vue
+7 -6
View File
@@ -67,20 +67,21 @@
// 筛选
fnFilterData(chartList) {
const allKeys = Object.keys(chartList);
const hasKeys = allKeys.filter(key => key.includes('Corporation')); // 含'Corporation'的键
const noKeys = allKeys.filter(key => !key.includes('Corporation')); // 不含'Corporation'的键
const hasKeys = allKeys.filter(key => chartList[key].type === 'net'); // 含'net'的键
const noKeys = allKeys.filter(key => chartList[key].type !== 'net'); // 不含'net'的键
const newObj = {};
// 先添加含'Corporation'的键（保持原顺序）
// 先添加含'net'的键（保持原顺序）
hasKeys.forEach(key => {
newObj[key] = chartList[key];
});
// 再添加不含'Corporation'的键（保持原顺序）
// 再添加不含'net'的键（保持原顺序）
noKeys.forEach(key => {
newObj[key] = chartList[key];
});
// 默认打开第一个元素
// 默认打开hasKeys的所有元素
if (newObj && Object.keys(newObj).length > 0 && this.activeShowList && this.activeShowList <= 0) {
this.collapseChange([hasKeys[0]] || [Object.keys(newObj)[0]]);
let selectData = hasKeys && hasKeys.length > 0 ? hasKeys : [Object.keys(newObj)[0]];
this.collapseChange(selectData);
}
return newObj;
},
src/views/resource/serverScriptStrat/serverScriptStrat.vue
+11 -11
View File
@@ -98,18 +98,18 @@
// 列显隐信息
columns: {
id: { label: `ID`,width: '50'},
policyName: { label: `策略名称`, minWidth: '200', visible: true },
description: { label: `描述`,minWidth: '200'},
taskName: { label: `关联业务下发`,minWidth: '200',visible: true},
deployDevice: { label: `部署设备`,minWidth: '250'},
scriptName: { label: `脚本名称`,minWidth: '150'},
policyName: { label: `策略名称`, minWidth: '150', visible: true },
description: { label: `描述`,minWidth: '150'},
taskName: { label: `关联业务下发`,minWidth: '100',visible: true},
deployDevice: { label: `部署设备`,minWidth: '300'},
scriptName: { label: `脚本名称`,minWidth: '120'},
scriptPath: { label: `脚本地址`,minWidth: '200'},
scriptParams: { label: `脚本参数`,minWidth: '200'},
executionMethod: { label: `执行方式`,minWidth: '200', slotName: 'tmpExecution'},
offlineNum: { label: `不在线数量`,minWidth: '100', slotName: 'tempFirst', visible: true},
sucessNum: { label: `执行成功数量`,minWidth: '120', slotName: 'tempSecond', visible: true},
failNum: { label: `执行失败数量`,minWidth: '120', slotName: 'tempThird', visible: true},
policyStatus: { label: `策略状态`, minWidth: '100', slotName: 'tempStatus', visible: true },
scriptParams: { label: `脚本参数`,minWidth: '150'},
executionMethod: { label: `执行方式`,minWidth: '80', slotName: 'tmpExecution'},
offlineNum: { label: `不在线数量`,minWidth: '90', slotName: 'tempFirst', visible: true},
sucessNum: { label: `执行成功数量`,minWidth: '100', slotName: 'tempSecond', visible: true},
failNum: { label: `执行失败数量`,minWidth: '100', slotName: 'tempThird', visible: true},
policyStatus: { label: `策略状态`, minWidth: '80', slotName: 'tempStatus', visible: true },
deployTime: { label: `下发策略时间`,minWidth: '160'},
createBy:{ label: `创建人`,minWidth: '100'},
createTime: { label: `创建时间`,minWidth: '160'},
src/views/resource/switchMonitorStrat/switchMonitorStrat.vue
+4 -4
View File
@@ -63,13 +63,13 @@
// 列显隐信息
columns: {
id: { label: `ID`,width: '50'},
policyName: { label: `策略名称`, minWidth: '250', visible: true },
policyName: { label: `策略名称`, minWidth: '200', 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 },
switchType: { label: `交换机类型`,minWidth: '100', slotName: 'tempType', visible: true },
priority: { label: `优先级`,minWidth: '60', visible: true },
connected: { label: `策略内容`,minWidth: '200'},
status: { label: `策略状态`, minWidth: '100', slotName: 'tempStatus', visible: true },
status: { label: `策略状态`, minWidth: '80', slotName: 'tempStatus', visible: true },
deployTime: { label: `下发策略时间`,minWidth: '160'},
updateTime:{ label: `创建人`,minWidth: '160'},
createTime: { label: `创建时间`,minWidth: '160'},
src/views/resource/switchRegister/index.vue
+26 -14
View File
@@ -38,6 +38,18 @@
<template #tempType="{ row, column }">
<dict-tag :options="dict.type.rm_register_resource_type" :value="row.resourceType"/>
</template>
<!-- 读写权限 -->
<template #tempReadWrite="{ row, column }">
<dict-tag :options="dict.type.rm_register_permission" :value="row.readWritePermission"/>
</template>
<!-- 加密方式 -->
<template #tempEncry="{ row, column }">
<dict-tag :options="dict.type.rm_register_encryption" :value="row.encryptionMethod"/>
</template>
<!-- 读写权限 -->
<template #tempSecurity="{ row, column }">
<dict-tag :options="dict.type.rm_register_security_level" :value="row.securityLevel"/>
</template>
<!-- 端口 -->
<template #tempPort="{ row, column }">
<dict-tag :options="dict.type.rm_register_port" :value="row.resourcePort"/>
@@ -70,7 +82,7 @@
export default {
name: 'SwitchRegister',
components: {TableList, MonitorStrategy},
dicts: ['rm_register_resource_type', 'rm_register_protocol', 'rm_register_status', 'rm_register_port', 'rm_register_online_state'],
dicts: ['rm_register_resource_type', 'rm_register_protocol', 'rm_register_status', 'rm_register_port', 'rm_register_online_state', 'rm_register_permission', 'rm_register_encryption', 'rm_register_security_level'],
data() {
return {
open: false,
@@ -82,24 +94,24 @@
meltiple: true,
// 列显隐信息
columns: {
id: { label: `ID`,width: '80'},
switchName: { label: `交换机名称`, visible: true, minWidth: '200'},
id: { label: `ID`,width: '50'},
switchName: { label: `交换机名称`, visible: true, minWidth: '120'},
hardwareSn: { label: `硬件SN`,minWidth: '250'},
resourceType: { label: `交换机类型`, minWidth: '100', slotName: 'tempType'},
snmpAddress: { label: `SNMP采集地址`, visible: true, minWidth: '150'},
snmpPort: { label: `SNMP采集端口`, visible: true, minWidth: '150'},
onlineStatus: { label: `在线状态`, slotName: 'tempOnlineStatus', minWidth: '120', visible: true },
snmpAddress: { label: `SNMP采集地址`, visible: true, minWidth: '120'},
snmpPort: { label: `SNMP采集端口`, visible: true, minWidth: '120'},
onlineStatus: { label: `在线状态`, slotName: 'tempOnlineStatus', minWidth: '80', visible: true },
upTime:{ label: `上机时间`,minWidth: '160'},
updateTime:{ label: `修改时间`,minWidth: '160'},
createTime:{ label: `创建时间`,minWidth: '160'},
heartbeatCount: { label: `交换机心跳检测次数`, minWidth: '180'},
heartbeatInterval: { label: `交换机心跳检测周期`, minWidth: '180'},
heartbeatOid: { label: `交换机心跳检测OID`, minWidth: '180'},
protocol: { label: `SNMP版本`, minWidth: '150'},
readWritePermission: { label: `读写权限`, minWidth: '120'},
securityLevel: { label: `安全级别`, minWidth: '120'},
encryptionMethod: { label: `加密方式`, minWidth: '120'},
communityName: { label: `团体名称`, minWidth: '120'},
heartbeatCount: { label: `交换机心跳检测次数`, minWidth: '140'},
heartbeatInterval: { label: `交换机心跳检测周期`, minWidth: '140'},
heartbeatOid: { label: `交换机心跳检测OID`, minWidth: '140'},
protocol: { label: `SNMP版本`, minWidth: '100', slotName: 'tempProtocol'},
readWritePermission: { label: `读写权限`, minWidth: '80', slotName: 'tempReadWrite'},
securityLevel: { label: `安全级别`, minWidth: '80', slotName: 'tempSecurity'},
encryptionMethod: { label: `加密方式`, minWidth: '80', slotName: 'tempEncry'},
communityName: { label: `团体名称`, minWidth: '80'},
resourceUserName: { label: `用户名`, minWidth: '100'},
resourcePwd: { label: `密码`, minWidth: '100'}
},
src/views/resource/switchRegister/monitorChart.vue
+51 -50
View File
@@ -125,10 +125,10 @@
formList: {ifDescr: '端口名称', ifType: '端口类型', ifOperStatus: '端口状态', ifSpeed: '端口适配速率(Mbps)'},
formModel: {},
echartFors: [
{title: '的网络速率', oneName: '端口实时接收速率', twoName: '端口实时发送速率', unitSel: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}]},
{title: '的丢包数', oneName: '入站丢包', twoName: '出站丢包'},
// {title: '的Bites总数', oneName: '端口发送Bites总数', twoName: '端口接收Bites总数'},
{title: '的错误包数量', oneName: '错误的入站数据包数量', twoName: '错误的出战数据包数量'},
{title: '的网络速率', oneName: '端口实时接收速率', twoName: '端口实时发送速率', unitSel: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}]},
],
echartList: []
},
@@ -281,6 +281,7 @@
res && res.forEach(async(item,index) => {
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['net']));
oneData.title = item && item.interfaceName;
oneData['expand'] = item.expand;
tabNameList[item.interfaceName + '_net'] = oneData;
});
this.secondChartList = {...tabNameList};
@@ -295,7 +296,7 @@
},500);
},500);
},500);
this.getNetDetailsData(this.currTimeList, tabNameList[Object.keys(tabNameList)[0]].title, Object.keys(tabNameList)[0]);
// this.getNetDetailsData(this.currTimeList, tabNameList[Object.keys(tabNameList)[0]].title, Object.keys(tabNameList)[0]);
} else {
this.fnModuleNameList(); // 第二模块名称
setTimeout(() => {
@@ -327,23 +328,55 @@
this.eventDataMap[keyName] = true;
switchNetDetails({clientId: this.paramsData.clientId, ifDescr: titleName}).then(async res => {
this.secondChartList[keyName].formModel = res && res.data || [];
if (await this.getNetDiscards(times ,titleName, keyName)) {
if (await this.getNetSpeed(times ,titleName, keyName)) {
// if (await this.getNetTotal(times, titleName, keyName)) {
if (await this.getNetErrDisc(times, titleName, keyName)) {
this.getNetSpeed(times, titleName, keyName);
if (await this.getNetDiscards(times, titleName, keyName)) {
this.getNetErrDisc(times, titleName, keyName);
}
// }
}
}).catch(async error => {
if (await this.getNetDiscards(times ,titleName, keyName)) {
if (await this.getNetSpeed(times ,titleName, keyName)) {
// if (await this.getNetTotal(times, titleName, keyName)) {
if (await this.getNetErrDisc(times, titleName, keyName)) {
this.getNetSpeed(times, titleName, keyName);
if (await this.getNetDiscards(times, titleName, keyName)) {
this.getNetErrDisc(times, titleName, keyName);
}
// }
}
});
},
// 实时流量
getNetSpeed(times, titleName, keyName, unitData) {
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[keyName]));
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
netEcharts.fnEvent = 'getNetSpeed';
return switchNetSpeed(Object.assign(unitData || {}, {ifDescr : titleName, clientId: this.paramsData.clientId}, times)).then(res => {
if (res && res.data) {
netEcharts.title = titleName + content.echartFors[0].title;
netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
netEcharts.dataVal.dataList[0] = {
name: content.echartFors[0].oneName,
data: res.data && res.data.yData['netInSpeedData'] || []
};
netEcharts.dataVal.dataList[1] = {
name: content.echartFors[0].twoName,
data: res.data && res.data.yData['netOutSpeedData'] || []
};
if (content.echartFors[0].unitSel) {
netEcharts.dataVal['unitModel'] = res && res.data && res.data.unit || '';
netEcharts.dataVal['unitSelList'] = content.echartFors[2].unitSel;
}
mountCollect['echartList'][0] = netEcharts;
this.$set(this.secondChartList, keyName, mountCollect);
return true;
}
}).catch(() => {
return true;
});
},
// 丢包
getNetDiscards(times,titleName, keyName) {
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[keyName]));
@@ -353,20 +386,20 @@
netEcharts.fnEvent = 'getNetDiscards';
return switchNetDiscards(Object.assign({}, {ifDescr : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
if (res && res.data) {
netEcharts.title = titleName + content.echartFors[0].title;
netEcharts.title = titleName + content.echartFors[1].title;
netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
// 入
netEcharts.dataVal.dataList[0] = {
name: content.echartFors[0].oneName,
name: content.echartFors[1].oneName,
data: res.data && res.data.yData['netInDiscardsData'] || []
};
// 出
netEcharts.dataVal.dataList[1] = {
name: content.echartFors[0].twoName,
name: content.echartFors[1].twoName,
data: res.data && res.data.yData['netOutDiscardsData'] || []
};
mountCollect['echartList'][0] = netEcharts;
mountCollect['echartList'][1] = netEcharts;
this.$set(this.secondChartList, keyName, mountCollect);
return true;
}
@@ -412,50 +445,18 @@
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
netEcharts.fnEvent = 'getNetErrDisc';
return switchNetErrDiscard(Object.assign({}, {ifDescr : titleName, clientId: this.paramsData.clientId}, times)).then(res => {
if (res && res.data) {
netEcharts.title = titleName + content.echartFors[1].title;
netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
netEcharts.dataVal.dataList[0] = {
name: content.echartFors[1].oneName,
data: res.data && res.data.yData['netInErrDiscardsData'] || []
};
netEcharts.dataVal.dataList[1] = {
name: content.echartFors[1].twoName,
data: res.data && res.data.yData['netOutErrDiscardsData'] || []
};
mountCollect['echartList'][1] = netEcharts;
this.$set(this.secondChartList, keyName, mountCollect);
return true;
}
}).catch(() => {
return true;
});
},
// 实时流量
getNetSpeed(times, titleName, keyName, unitData) {
let mountCollect = JSON.parse(JSON.stringify(this.secondChartList[keyName]));
let netEcharts = JSON.parse(JSON.stringify(this.echartData));
let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
netEcharts.fnEvent = 'getNetSpeed';
return switchNetSpeed(Object.assign(unitData || {}, {ifDescr : titleName, clientId: this.paramsData.clientId}, times)).then(res => {
if (res && res.data) {
netEcharts.title = titleName + content.echartFors[2].title;
netEcharts.dataVal.yAxisName = res && res.data && res.data.unit ? '单位' + res.data.unit : ' ';
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
netEcharts.dataVal.dataList[0] = {
name: content.echartFors[2].oneName,
data: res.data && res.data.yData['netInSpeedData'] || []
data: res.data && res.data.yData['netInErrDiscardsData'] || []
};
netEcharts.dataVal.dataList[1] = {
name: content.echartFors[2].twoName,
data: res.data && res.data.yData['netOutSpeedData'] || []
data: res.data && res.data.yData['netOutErrDiscardsData'] || []
};
if (content.echartFors[2].unitSel) {
netEcharts.dataVal['unitModel'] = res && res.data && res.data.unit || '';
netEcharts.dataVal['unitSelList'] = content.echartFors[2].unitSel;
}
mountCollect['echartList'][2] = netEcharts;
this.$set(this.secondChartList, keyName, mountCollect);
// return true;
@@ -480,7 +481,7 @@
});
if (this.activeNames && this.activeNames.length <= 0) {
this.activeNames = [Object.keys(tabNameList)[0]];
this.getModuleDetailsData(this.currTimeList, tabNameList[Object.keys(tabNameList)[0]].title, Object.keys(tabNameList)[0]);
// this.getModuleDetailsData(this.currTimeList, tabNameList[Object.keys(tabNameList)[0]].title, Object.keys(tabNameList)[0]);
}
}
});
@@ -576,7 +577,7 @@
});
if (this.activeNames && this.activeNames.length <= 0) {
this.activeNames = [Object.keys(tabNameList)[0]];
this.getMpuDetailsData(this.currTimeList, tabNameList[Object.keys(tabNameList)[0]].title, Object.keys(tabNameList)[0]);
// this.getMpuDetailsData(this.currTimeList, tabNameList[Object.keys(tabNameList)[0]].title, Object.keys(tabNameList)[0]);
}
}
});
@@ -691,7 +692,7 @@
});
if (this.activeNames && this.activeNames.length <= 0) {
this.activeNames = [Object.keys(tabNameList)[0]];
this.getPwrDetailsData(this.currTimeList, tabNameList[Object.keys(tabNameList)[0]].title, Object.keys(tabNameList)[0]);
// this.getPwrDetailsData(this.currTimeList, tabNameList[Object.keys(tabNameList)[0]].title, Object.keys(tabNameList)[0]);
}
}
});
@@ -777,7 +778,7 @@
});
if (this.activeNames && this.activeNames.length <= 0) {
this.activeNames = [Object.keys(tabNameList)[0]];
this.getFanDetailsData(this.currTimeList, tabNameList[Object.keys(tabNameList)[0]].title, Object.keys(tabNameList)[0]);
// this.getFanDetailsData(this.currTimeList, tabNameList[Object.keys(tabNameList)[0]].title, Object.keys(tabNameList)[0]);
}
}
});
src/views/resource/switchRegister/secondAutoFind.vue
+35 -3
View File
@@ -36,7 +36,16 @@
watch: {
activeNames: {
handler(val) {
this.activeShowList = val;
// this.activeShowList = val;
},
deep: true,
immediate: true
},
secondChartList: {
handler(val) {
this.chartDataLit = this.fnFilterData(val);
// 因加入了fnFilterData方法进行了筛选排序，导致默认打开的不为原指定的元素了，这里就没用了
// this.activeShowList = val;
},
deep: true,
immediate: true
@@ -49,9 +58,32 @@
},
created() {},
methods: {
// 筛选
fnFilterData(chartList) {
const allKeys = Object.keys(chartList);
const hasKeys = allKeys.filter(key => chartList[key].expand); // 含'net'的键
const noKeys = allKeys.filter(key => !chartList[key].expand); // 不含'net'的键
const newObj = {};
// 先添加含'net'的键（保持原顺序）
hasKeys.forEach(key => {
newObj[key] = chartList[key];
});
// 再添加不含'net'的键（保持原顺序）
noKeys.forEach(key => {
newObj[key] = chartList[key];
});
// 默认打开hasKeys的所有元素
if (newObj && Object.keys(newObj).length > 0 && this.activeShowList && this.activeShowList <= 0) {
let selectData = hasKeys && hasKeys.length > 0 ? hasKeys : [Object.keys(newObj)[0]];
this.collapseChange(selectData);
}
return newObj;
},
collapseChange(val) {
this.activeShowList = this.activeNames;
this.$emit("collapseChangeData", val);
this.activeShowList = val;
if (val && val.length > 0) {
this.$emit("collapseChangeData", val);
}
},
chartDataEvent(valData, funcName, tabName, key, unit) {
this.$emit("chartFnEvent", valData, funcName, tabName, key, unit);
src/views/resource/topology/index.vue
+8 -8
View File
@@ -46,17 +46,17 @@
columns: {
id: { label: `ID`, width: '50', visible: false },
clientId: { label: `交换机ID`, minWidth: '320', visible: true},
switchName: { label: `交换机名称`, minWidth: '150', visible: true },
switchSn: { label: `交换机硬件SN`, minWidth: '200'},
switchName: { label: `交换机名称`, minWidth: '120', visible: true },
switchSn: { label: `交换机硬件SN`, minWidth: '150'},
interfaceName: { label: `接口名称`, minWidth: '100', visible: true },
connectedDeviceType: { label: `接口连接设备类型`, slotName: 'tempType', minWidth: '150', visible: true },
serverClientId: { label: `服务器ClientID`, minWidth: '320', visible: true},
serverSn: { label: `服务器硬件SN`, minWidth: '200', visible: false},
connectedDeviceType: { label: `接口连接设备类型`, slotName: 'tempType', minWidth: '130', visible: true },
serverClientId: { label: `服务器ClientID`, minWidth: '180', visible: true},
serverSn: { label: `服务器硬件SN`, minWidth: '150', visible: false},
serverPort: { label: `服务器网口`, minWidth: '250', visible: true },
peerSwitchName: { label: `对端交换机名称`, minWidth: '250', visible: true },
peerSwitchInterface: { label: `对端交换机接口`, minWidth: '250', visible: true },
createTime: { label: `创建时间`, minWidth: '150'},
updateTime:{ label: `修改时间`, minWidth: '150'}
peerSwitchInterface: { label: `对端交换机接口`, minWidth: '150', visible: true },
createTime: { label: `创建时间`, minWidth: '160'},
updateTime:{ label: `修改时间`, minWidth: '160'}
},
config: {
searcherForm: [
src/views/welcome.vue
+253
View File
@@ -0,0 +1,253 @@
<template>
<!-- <div class="w100" style="height: calc(100vh - 85px);overflow: auto;">-->
<!-- <div class="pt50">-->
<!-- <div class="textAlignCenter" style="font-size: 3rem;color: #BFBF00;font-weight: 600;">彤然科技-分布式SaaS收益管理平台</div>-->
<!-- <div class="textAlignCenter" style="font-size: 1.8rem;">欢迎您{{user.nickName}}：现在是{{newDateTime}}</div>-->
<!-- <div class="w100 m0Auto">-->
<!-- <div style="width: 85%;margin: 10px auto;">-->
<!-- <div v-for="menuItem of menuList" @click="menuRouter(menuItem)" class="disInlineBlock" style="width: 20%;min-width: 200px;height: 70px;padding: 10px;cursor: pointer;">-->
<!-- <div class="w100 h100" style="display: flex; justify-content: center; align-items: center;background: #02a7f099; color: #fff;border-radius: 10px;">{{menuItem.name}}</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<div class="welcome-container">
<div class="header-section textAlignCenter">
<div class="main-title">彤然科技-分布式SaaS收益管理平台</div>
<div class="welcome-text">欢迎您{{user.nickName}}：现在是{{newDateTime}}</div>
</div>
<div class="w100 plr-20">
<div class="menu-container">
<div v-for="menuItem of menuList" @click="menuRouter(menuItem)" class="menu-item">
<div class="menu-item-content">{{menuItem.name}}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "welcome",
data() {
return {
newDateTime: '',
getWeekday: {0: '星期日', 1: '星期一', 2: '星期二', 3: '星期三',4: '星期四', 5: '星期五', 6: '星期六'},
user: {},
menuList: []
}
},
created() {
this.user = this.$store.state.user;
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 hours = String(new Date().getHours()).padStart(2, '0') + ':'; // 当前日（如8）
const minutes = String(new Date().getMinutes()).padStart(2, '0') + ':'; // 当前日（如8）
const seconds = String(new Date().getSeconds()).padStart(2, '0'); // 当前日（如8）
const week = this.getWeekday[new Date().getDay()]; // 当前日（如8）
this.newDateTime = year + month + day + ' ' + hours + minutes + seconds + ' ' + week;
let menu = this.$store.state.permission.sidebarRouters;
this.menuHandle(menu);
},
methods: {
// 处理菜单
menuHandle(menu) {
menu.forEach(item => {
if (!item.hidden) {
item.children.forEach(val => {
if (!val.hidden) {
if (val.children) {
val.path = item.path + '/' + val.path;
this.menuHandle([val]);
} else {
this.menuList.push({name: val.meta.title, link: item.path && item.path === '/' ? item.path + val.path : item.path + '/' + val.path});
}
}
});
}
});
},
// 菜单跳转
menuRouter(menuLink) {
this.$router.push({
path: menuLink.link
});
}
}
}
</script>
<style scoped>
/* 主容器 */
.welcome-container {
height: 100vh;
/*overflow: auto;*/
display: flex;
flex-direction: column;
padding: 20px;
margin-bottom: 20px;
}
/* 标题区域 */
.header-section {
margin-bottom: 30px;
}
.main-title {
font-size: 2.5rem;
color: #BFBF00;
font-weight: 600;
margin-bottom: 15px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.welcome-text {
font-size: 1.5rem;
color: #666;
}
/* 菜单区域 */
.menu-container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start; /* 改为左对齐 */
gap: 20px;
/*max-width: 1200px;*/
margin: 0 auto;
}
.menu-item {
/*flex: 1 1 200px;*/
flex: 0 0 calc(20% - 16px); /* 固定宽度，确保每行显示5个 */
min-width: 200px;
height: 70px;
cursor: pointer;
transition: all 0.3s ease;
}
.menu-item-content {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #02a7f099 0%, #0280c099 100%);
color: #fff;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
padding: 10px;
text-align: center;
font-size: 1.1rem;
font-weight: 500;
}
.menu-item:hover .menu-item-content {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
background: linear-gradient(135deg, #0280c099 0%, #026aa099 100%);
}
/* 响应式设计 - 媒体查询 */
@media (max-width: 1200px) {
.main-title {
font-size: 2.2rem;
}
.welcome-text {
font-size: 1.3rem;
}
.menu-item {
flex: 0 0 calc(25% - 15px); /* 中屏每行4个 */
}
}
@media (max-width: 768px) {
.welcome-container {
padding: 15px;
height: auto;
min-height: 100vh;
}
.pt50 {
padding-top: 30px;
}
.main-title {
font-size: 1.8rem;
}
.welcome-text {
font-size: 1.1rem;
}
.menu-container {
gap: 15px;
}
.menu-item {
flex: 0 0 calc(33.333% - 10px); /* 平板每行3个 */
height: 60px;
}
.menu-item-content {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.welcome-container {
padding: 10px;
}
.pt50 {
padding-top: 20px;
}
.main-title {
font-size: 1.5rem;
}
.welcome-text {
font-size: 1rem;
}
.menu-container {
gap: 10px;
justify-content: center; /* 小屏幕居中对齐 */
}
.menu-item {
flex: 0 0 calc(50% - 10px); /* 手机每行2个 */
max-width: 100%;
height: 50px;
}
.menu-item-content {
font-size: 0.9rem;
}
}
@media (max-width: 360px) {
.menu-item {
flex: 0 0 100%; /* 超小屏幕每行1个 */
}
}
/* 大屏幕优化 */
@media (min-width: 1600px) {
.welcome-container {
max-width: 1400px;
margin: 0 auto;
}
.menu-item {
flex: 0 0 calc(16.666% - 17px); /* 大屏每行6个 */
}
}
</style>