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

联调监控看板分组流量图

Browse Source 
1、联调监控看板分组流量图
2、联调分组的增删改查功能
3、优化多选/单选下拉增删改查功能
4、添加图表图例太多时滚动条展示
This commit is contained in:
康冉冉
2026-01-23 19:27:09 +08:00
parent 9b2c0eb638
commit ccd7a7179f
9 changed files with 294 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/disRevenue/resource.js
+30
View File
@@ -1228,6 +1228,36 @@ export function monitorViewChart(data) {
data: data
})
}
// 查询分组
export function getMonitorGroup(Id) {
return request({
url: '/system/rmMonitorGroup/list',
method: 'get'
})
}
// 新增分组
export function addMonitorGroup(data) {
return request({
url: '/system/rmMonitorGroup',
method: 'post',
data: data
})
}
// 修改分组
export function updateMonitorGroup(data) {
return request({
url: '/system/rmMonitorGroup',
method: 'put',
data: data
})
}
// 删除分组
export function delMonitorGroup(Ids) {
return request({
url: '/system/rmMonitorGroup/' + Ids,
method: 'delete'
})
}
// 95带宽值列表
export function getBandWidthList(data) {
return request({
src/assets/styles/index.scss
+3
View File
@@ -360,3 +360,6 @@ aside {
.my-custom-select-dropdown {
top: 98px!important;
}
.el-scrollbar__wrap {
overflow: auto!important;
}
src/components/customModule/selectModule.vue
+121 -86
View File
@@ -3,11 +3,12 @@
<!-- 多选下拉框 -->
<el-select
v-model="selectedValues"
multiple
:multiple="multiple"
placeholder="请选择或搜索"
@visible-change="handleVisibleChange"
class="multi-select w100"
class="multi-select"
ref="selectRef"
clearable
@remove-tag="handleRemoveTag"
>
<!-- 自定义下拉面板 -->
@@ -46,7 +47,7 @@
:key="item.value"
class="editable-option"
:class="{
'selected': selectedValues.includes(item.value),
'selected': multiple ? selectedValues.includes(item.value) : selectedValues === item.value,
'editing': editingItem === item.value
}"
@click.stop="handleOptionClick(item.value)"
@@ -79,13 +80,21 @@
<!-- 查看模式 -->
<div v-else class="view-mode">
<!-- 多选复选框 -->
<!-- 多选复选框 用于多选下拉-->
<!-- <el-checkbox-->
<!-- :value="selectedValues.includes(item.value)"-->
<!-- @click.native.stop="toggleOption(item.value)"-->
<!-- class="option-checkbox"-->
<!-- ></el-checkbox>-->
<!-- 单选指示器（选中时的圆点） 用于单选下拉-->
<!-- <div class="option-radio-indicator">-->
<!-- <div-->
<!-- class="radio-dot"-->
<!-- :class="{ 'selected': selectedValue === item.value }"-->
<!-- ></div>-->
<!-- </div>-->
<!-- 选项标签（高亮搜索关键词） -->
<span class="option-label" :title="item.label">
<template v-if="searchQuery && highlightSearch">
@@ -139,7 +148,7 @@
},
// 初始选中的值
value: {
type: Array,
type: [String, Number, Array],
default: () => []
},
// 是否允许创建新选项
@@ -156,6 +165,10 @@
width: {
type: String,
default: '100%'
},
multiple: {
type: Boolean,
default: false
}
},
data() {
@@ -163,7 +176,7 @@
// 所有选项
options: [],
// 选中值
selectedValues: this.value,
selectedValues: null,
// 搜索关键词
searchQuery: '',
// 当前编辑的选项值
@@ -188,7 +201,11 @@
value: {
immediate: true,
handler(newVal) {
this.selectedValues = Array.isArray(newVal) ? newVal : [];
if (this.multiple) {
this.selectedValues = Array.isArray(newVal) ? newVal : [];
} else {
this.selectedValues = newVal;
}
}
},
selectedValues(newVal) {
@@ -304,8 +321,9 @@
value: newValue
};
this.options.push(newOption);
this.selectedValues.push(newValue);
// 新增的值更新到选项 并 默认选中
// this.options.push(newOption);
// this.selectedValues.push(newValue);
this.searchQuery = '';
this.filterOptions();
@@ -313,7 +331,7 @@
this.$emit('option-added', newOption);
this.$emit('options-updated', this.options);
this.$message.success('添加成功');
// this.$message.success('添加成功');
},
// 切换选项选中状态
@@ -328,10 +346,31 @@
// 选项点击事件
handleOptionClick(value) {
if (this.editingItem) {
return;
if (this.multiple) {
if (this.editingItem) {
return;
}
this.toggleOption(value);
} else {
this.selectedValues = value;
// 延迟更新原生select的状态
this.$nextTick(() => {
// 确保原生select的显示值更新
if (this.$refs.selectRef) {
// 手动触发input事件，让el-select更新显示
this.$refs.selectRef.blur();
}
});
// 选中后延迟关闭下拉框
setTimeout(() => {
this.dropdownVisible = false;
}, 100);
}
this.toggleOption(value);
this.handleChange(this.selectedValues);
},
// 选中值变化时
handleChange(val){
this.$emit('value-change', val);
},
// 开始编辑
@@ -341,8 +380,10 @@
// // 下一个tick聚焦到输入框
this.$nextTick(() => {
if (this.$refs.editInputRef && this.$refs.editInputRef.length > 0) {
this.$refs.editInputRef[0].focus();
if (this.$refs.editInputRef) {
if (this.$refs.editInputRef.length > 0) {
this.$refs.editInputRef[0].focus();
}
}
});
},
@@ -366,34 +407,41 @@
// 检查是否重复（排除自身）
const duplicate = this.options.find(
opt => opt.value !== oldValue && opt.label.toLowerCase() === newValue.toLowerCase()
opt => opt.value === oldValue && opt.label.toLowerCase() === newValue.toLowerCase()
);
if (duplicate) {
this.$message.warning('该选项已存在');
// this.$message.warning('该选项已存在');
this.editingItem = null;
this.saveType = false;
return;
}
// 更新选项
const index = this.options.findIndex(opt => opt.value === oldValue);
if (index !== -1) {
this.options[index] = {
...this.options[index],
label: newValue,
// value: newValue
};
// 如果原值被选中，更新选中值
const selectedIndex = this.selectedValues.indexOf(oldValue);
if (selectedIndex !== -1) {
this.selectedValues.splice(selectedIndex, 1, newValue);
}
}
// // 更新选项 针对不走接口的操作
// const index = this.options.findIndex(opt => opt.value === oldValue);
// if (index !== -1) {
// this.options[index] = {
// ...this.options[index],
// label: newValue,
// // value: newValue
// };
//
// // 如果原值被选中，更新选中值 多选下拉
// if (this.multiple) {
// const selectedIndex = this.selectedValues.indexOf(oldValue);
// if (selectedIndex !== -1) {
// this.selectedValues.splice(selectedIndex, 1, newValue);
// }
// } else {
// // 如果原值被选中，更新选中值 单选下拉
// if (this.selectedValue === oldValue) {
// this.selectedValue = newValue;
// }
// }
// }
this.editingItem = null;
this.filterOptions();
// 触发更新事件
this.$emit('option-updated', { oldValue, newValue: newValue });
this.$emit('options-updated', this.options);
@@ -408,34 +456,46 @@
// 删除选项
deleteOption(value) {
this.saveType = true;
this.$confirm('确定删除这个选项吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const index = this.options.findIndex(opt => opt.value === value);
if (index !== -1) {
this.options.splice(index, 1);
// 触发删除事件
this.$emit('option-deleted', value);
this.$emit('options-updated', this.options);
// 从选中值中移除
const selectedIndex = this.selectedValues.indexOf(value);
if (selectedIndex !== -1) {
this.selectedValues.splice(selectedIndex, 1);
}
}
this.editingItem = null;
this.filterOptions();
// 触发删除事件
this.$emit('option-deleted', value);
this.$emit('options-updated', this.options);
this.$message.success('删除成功');
this.saveType = false;
}).catch(() => {
this.saveType = false;
});
// this.saveType = true;
// this.$confirm('确定删除这个选项吗？', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// const index = this.options.findIndex(opt => opt.value === value);
// if (index !== -1) {
// this.options.splice(index, 1);
//
// // 从选中值中移除 多选下拉
// if (this.multiple) {
// const selectedIndex = this.selectedValues.indexOf(value);
// if (selectedIndex !== -1) {
// this.selectedValues.splice(selectedIndex, 1);
// }
// } else {
// // 如果删除的是当前选中的选项，清空选中 单选下拉
// if (this.this.selectedValue === value) {
// this.selectedValue = '';
// }
// }
// }
//
// this.editingItem = null;
// this.filterOptions();
//
// // 触发删除事件
// this.$emit('option-deleted', value);
// this.$emit('options-updated', this.options);
//
// this.$message.success('删除成功');
// this.saveType = false;
// }).catch(() => {
// this.saveType = false;
// });
},
// 移除标签
@@ -458,6 +518,7 @@
// 下拉框显示状态变化
handleVisibleChange(visible) {
// 下拉框显隐与否
this.dropdownVisible = visible;
if (visible) {
// 下拉框打开时，如果有搜索框，聚焦
@@ -487,32 +548,6 @@
this.dropdownVisible = false;
}
},
// 获取当前所有选项
getOptions() {
return this.options;
},
// 添加选项（外部调用）
addOption(option) {
const processedOption = typeof option === 'string'
? { label: option, value: option }
: option;
this.options.push(processedOption);
this.filterOptions();
this.$emit('options-updated', this.options);
},
// 删除选项（外部调用）
removeOption(value) {
this.deleteOption(value);
},
// 清空选中
clearSelection() {
this.selectedValues = [];
}
}
}
</script>
src/components/echartsList/line.vue
+9 -4
View File
@@ -193,11 +193,16 @@
return [x - 5, y + 18];
},
formatter: !dataXY.tooltipFormatter ? null : function(params) { // 主要应对与MTRAgent丢包趋势图模块的功能
formatter: function(params) { // 主要应对与MTRAgent丢包趋势图模块的功能
// 获取当前悬停的日期
const date = params[0].name;
// 构建提示框HTML内容
let html = `<div>${date}</div>`;
let html = `<div><div>${date}</div>`;
if (params && params.length >= 7) {
html = `<div style="max-height: 175px; overflow-y: auto;">
<div>${date}</div>
`;
}
// 遍历所有系列
params.forEach(paramItem => {
if (dataXY.tooltipFormatter && dataXY.tooltipFormatter.customList) {
@@ -230,11 +235,11 @@
<span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${paramItem.color}; margin-right: 8px;"></span>
<span style="color: #57606f;">${paramItem.seriesName} </span>
</div>
<span style="font-weight: bold; color: #2f3542;margin-left:20px;"> ${paramItem.value}</span>
<span style="font-weight: bold; color: #2f3542;margin-left:20px;"> ${paramItem.value || paramItem.value === 0 ? paramItem.value : '-'}</span>
</div>`;
}
});
return html;
return html += `</div>`;
}
},
grid: {
src/views/resource/monitorBoard/dialogMonitor.vue
+50 -22
View File
@@ -3,11 +3,13 @@
<Form style="margin-bottom: 30px;" ref="formRef" :formList="formList" :config="{labelWidth: '140px'}" :ruleFormData="ruleFormData" @fnClick="callback">
<template #tempGroup="{field, model, formModel}">
<EditableMultiSelect
v-model="formModel[field.key]"
:initial-options="options1"
v-model="groupModel"
:multiple="false"
:initial-options="groupList"
@option-added="handleOptionAdded"
@option-updated="handleOptionUpdated"
@option-deleted="handleOptionDeleted"
@value-change="handelValueChange"
></EditableMultiSelect>
</template>
</Form>
@@ -18,7 +20,7 @@
import Form from '@/components/form/index.vue';
import EditableMultiSelect from "@/components/customModule/selectModule.vue";
import {switchNameTree, listAllBusinessList} from "@/api/disRevenue/earnManage";
import {addMonitorConfig, updateMonitorConfig} from "@/api/disRevenue/resource";
import {addMonitorConfig, updateMonitorConfig, getMonitorGroup, addMonitorGroup, updateMonitorGroup, delMonitorGroup} from "@/api/disRevenue/resource";
export default {
name: "dialogMonitor",
components: {Form, EditableMultiSelect},
@@ -43,8 +45,10 @@
} else if (val && val.resourceType === '3') {
this.businessList();
}
this.ruleFormData = val;
this.ruleFormData = JSON.parse(JSON.stringify(val));
this.groupModel = this.ruleFormData && this.ruleFormData['groupId'] || '';
this.fnFormList();
this.groupListData();
}
},
deep: true,
@@ -52,38 +56,62 @@
},
data() {
return {
options1: [
{ label: 'JavaScript', value: 'js' },
{ label: 'TypeScript', value: 'ts' },
{ label: 'Vue.js', value: 'vue' },
{ label: 'React', value: 'react' },
{ label: 'Node.js', value: 'node' },
{ label: 'Python', value: 'python' },
{ label: 'Java', value: 'java' },
{ label: 'Go', value: 'go' }
groupList: [
{ label: '', value: '' },
],
ruleFormData: {},
formList: [],
busNameList: {},
switchNameList: {},
groupModel: '',
}
},
created() {
},
methods: {
// 查询分组
groupListData(type, targetVal) {
getMonitorGroup().then(res => {
if (res && res.data && res.data.length > 0) {
this.groupList = res && res.data.map(item => {
return Object.assign({}, item, {value: item.id, label: item.name})
});
if (type === 'del') {
// 从选中值中移除
const selectedIndex = this.groupModel.toString().indexOf(targetVal.toString());
if (selectedIndex !== -1) {
this.groupModel = ' ';
}
}
} else {
this.groupList = [{label: '', value: ''}];
}
});
},
// 新增
handleOptionAdded(option) {
console.log('添加了新选项:', option);
this.$message.info(`添加了: ${option.label}`);
addMonitorGroup({name: option.label}).then(res => {
this.$message.success(`添加成功！`);
this.groupListData();
});
},
// 编辑
handleOptionUpdated(data) {
console.log('选项已更新:', data);
this.$message.info(`更新了: ${data.oldValue} -> ${data.newValue}`);
updateMonitorGroup({id: data.oldValue, name: data.newValue}).then(res => {
this.$message.success(`更新成功！`);
this.groupListData();
});
},
// 删除
handleOptionDeleted(value) {
console.log('删除了选项:', value);
this.$message.info(`删除了: ${value}`);
delMonitorGroup(value).then(res => {
this.$message.info(`删除成功！`);
this.groupListData('del', value);
});
},
// 值变化时
handelValueChange(value) {
this.$set(this.ruleFormData, 'groupId', value);
},
// formList集合
fnFormList() {
@@ -91,7 +119,7 @@
config: {colSpan: 'disBlock'},
controls: {
id: {label: 'ID',hidden: true},
groupList: {label: '分组', span: 18, slotName: 'tempGroup'},
groupId: {label: '分组', span: 18, slotName: 'tempGroup', required: true},
configName: {label: '配置名称', span: 18, type: 'input', required: true},
monitorStartTime: {label: '监控数据开始时间', span: 18, type: 'datetime', disabled: this.ruleFormData && this.ruleFormData.id ? true : false, required: true},
resourceType: {label: '资源类型', span: 18, type: 'select', eventName: 'change', required: true, options: this.dict.type.resource_type, disabled: this.ruleFormData && this.ruleFormData.id ? true : false},
src/views/resource/monitorBoard/monitorBoard.vue
+35 -19
View File
@@ -77,7 +77,7 @@
</el-dialog>
</template>
<template v-else>
<monitorBoardView :timeModelOne="timeModel" :datetimeModelOne="datetimeModel" :activeType="activeType" @activeTypeChange="fnActiveTypeChange"></monitorBoardView>
<monitorBoardView :timeModelOne="timeModel" :datetimeModelOne="datetimeModel" :activeTypeOne="activeType" :groupDataOne="groupData" @activeTypeChange="fnActiveTypeChange"></monitorBoardView>
</template>
</div>
</template>
@@ -86,7 +86,7 @@
import dialogMonitor from './dialogMonitor';
import monitorBoardView from './monitorBoardView';
import EchartsLine from "@/components/echartsList/line.vue";
import {monitorViewChart, delMonitorConfig} from "@/api/disRevenue/resource";
import {monitorViewChart, delMonitorConfig, getMonitorGroup} from "@/api/disRevenue/resource";
import { checkPermi } from "@/utils/permission";
export default {
name: "monitor-board",
@@ -110,7 +110,7 @@
formModel: {},
currTimeList: {},
datetimeModel: [],
timeModel: '30000',
timeModel: '0',
timeInterModel: null,
open: false,
title: '',
@@ -136,7 +136,7 @@
lineDataParams: {},
btnList: [{title: '详情', value: 'view', hasPermi: 'resource:monitorBoard:view'}, {title: '修改', value: 'edit'}, {title: '删除', value: 'del'}],
groupData: '',
groupList: [{value:'g1', label: '分组1'},{value:'g2', label: '分组2'}],
groupList: [],
timesMap: {},
pickerOptions: {
shortcuts: [{
@@ -219,7 +219,7 @@
// this.datetimeModel = this.datetimeModelDefault && this.datetimeModelDefault.length > 0 ? this.datetimeModelDefault : [startData, endData];
this.currTimeList = {startTime: startData, endTime: endData};
this.datetimeModel = [startData, endData];
this.fnChartView(this.currTimeList);
this.groupListData();
},
beforeDestroy() {
clearInterval(this.timeInterModel);
@@ -251,10 +251,28 @@
this.datetimeModel = [startData,endData];
this.timesMap = {};
},
// 查询分组
groupListData(groupId) {
getMonitorGroup().then(res => {
if (res && res.data) {
this.groupList = res && res.data.map((item,index) => {
if (index === 0) {
this.groupData = groupId || item.id;
}
return Object.assign({}, item, {value: item.id, label: item.name})
});
}
this.fnChartView(this.currTimeList, null, null, groupId || this.groupData);
});
},
// 查询流量图
fnChartView(times, unitVal,keyName) {
fnChartView(times, unitVal,keyName, groupId) {
this.$modal.loading();
monitorViewChart(Object.assign({}, times, unitVal)).then(res => {
let groupObj = {};
if (groupId) {
groupObj = {groupId: groupId};
}
monitorViewChart(Object.assign({}, times, unitVal, groupObj)).then(res => {
let dataList = {};
res && res.data.forEach(item => {
let chart = JSON.parse(JSON.stringify(this.echartData));
@@ -286,10 +304,6 @@
} else {
if (dataList && Object.keys(dataList).length > 0) {
this.lineDataParams = {...dataList};
} else {
this.lineDataParams['one'] = {
echartList: this.echartData
};
}
}
this.$modal.closeLoading();
@@ -309,8 +323,7 @@
// 分组
fnGroupChange() {
this.updateTimes();
// this.groupData
this.fnChartView(this.currTimeList);
this.fnChartView(this.currTimeList, null, null, this.groupData);
},
// 定时刷新下拉
fnTimeInter(val) {
@@ -319,7 +332,7 @@
if (val !== '0') {
this.timeInterModel = setInterval(() => {
this.updateTimes();
this.fnChartView(this.currTimeList);
this.fnChartView(this.currTimeList, null, null, this.groupData);
}, Number(val));
}
},
@@ -329,7 +342,7 @@
// 使用$nextTick确保DOM更新完成后再初始化子组件
this.$nextTick(() => {
// 强制更新formModel，确保子组件能接收到
this.formModel = {};
this.formModel = {groupId: this.groupData};
});
},
// 弹窗关闭
@@ -337,7 +350,8 @@
this.updateTimes();
// 新增或编辑操作时
if (res && res.type === 'submit') {
this.fnChartView(this.currTimeList);
this.groupListData(this.groupData);
// this.fnChartView(this.currTimeList, null, null, this.groupData);
}
this.open = false;
},
@@ -353,7 +367,9 @@
this.timeModel = val && val.timeModel;
this.activeType = val && val.activeType;
this.datetimeModel = val && val.datetimeModel;
this.fnChartView(this.currTimeList);
this.groupData = val && val.groupData;
this.groupListData(this.groupData);
// this.fnChartView(this.currTimeList);
},
// 右侧点击下拉按钮
handleCommand(val, chartKey, chartVal) {
@@ -361,7 +377,7 @@
if (val && val.value === 'del') {
this.updateTimes();
delMonitorConfig(chartVal.rmMonitorConfig.id).then(res => {
this.fnChartView(this.currTimeList);
this.fnChartView(this.currTimeList, null, null, this.groupData);
});
} else if (val && val.value === 'edit') {
this.title = '修改配置';
@@ -374,7 +390,7 @@
} else if (val && val.value === 'view') {
this.$router.push({
path: '/resource/monitorBoard/view',
query: {id: chartVal.rmMonitorConfig.id}
query: {id: chartVal.rmMonitorConfig.id, groupId: this.groupData}
});
}
},
src/views/resource/monitorBoard/monitorBoardView.vue
+39 -16
View File
@@ -76,7 +76,7 @@
import dialogMonitor from './dialogMonitor';
import EchartsLine from "@/components/echartsList/line.vue";
import TableList from '@/components/table/index.vue';
import {monitorViewChart, monitorConfigList, delMonitorConfig, getBandWidthList, getSwitchInfoList} from "@/api/disRevenue/resource";
import {monitorViewChart, monitorConfigList, delMonitorConfig, getBandWidthList, getSwitchInfoList, getMonitorGroup} from "@/api/disRevenue/resource";
export default {
name: "monitorBoardView",
components: {dialogMonitor, EchartsLine, TableList},
@@ -92,6 +92,10 @@
activeTypeOne: {
type: String,
default: '2'
},
groupDataOne: {
type: [String, Number],
default: ''
}
},
data() {
@@ -224,16 +228,33 @@
this.currTimeList = this.datetimeModelOne && this.datetimeModelOne.length > 0 ? {startTime: this.datetimeModelOne[0], endTime: this.datetimeModelOne[1]} : {startTime: startData, endTime: endData};
this.datetimeModel = this.datetimeModelOne && this.datetimeModelOne.length > 0 ? this.datetimeModelOne : [startData, endData];
this.timeModel = this.timeModelOne;
this.fnConfigName();
if (this.configModel) {
this.fnChartView();
}
this.groupData = this.paramsData && this.paramsData.groupId ? Number(this.paramsData.groupId) : Number(this.groupDataOne);
// this.fnConfigName(this.groupDataOne);
// if (this.configModel) {
// this.fnChartView();
// }
this.groupListData();
},
beforeDestroy() {
clearInterval(this.timeInterModel);
this.timeInterModel = null;
},
methods: {
// 查询分组
groupListData() {
getMonitorGroup().then(res => {
if (res && res.data) {
let newVal = '';
this.groupList = res && res.data.map((item,index) => {
if (index === 0) {
newVal = item.id;
}
return Object.assign({}, item, {value: item.id, label: item.name})
});
this.fnConfigName(this.groupData || newVal);
}
});
},
// 查询流量图
fnChartView(unitData) {
this.lineDataParams = {};
@@ -323,9 +344,10 @@
};
},
// 下拉
fnConfigName() {
monitorConfigList({}).then(res => {
if (res && res.data && res.data.length > 0) {
fnConfigName(groupId) {
monitorConfigList({groupId: groupId}).then(res => {
if (res && res.data) {
this.configModel = '';
this.configNameList = res && res.data;
let index = 0;
res && res.data.forEach(item => {
@@ -333,7 +355,7 @@
index = 1;
}
});
if (index === 0) {
if (index === 0 && this.configNameList.length > 0) {
this.configModel = this.configNameList[0].id;
this.fnChartView();
}
@@ -358,7 +380,7 @@
// 使用$nextTick确保DOM更新完成后再初始化子组件
this.$nextTick(() => {
// 强制更新formModel，确保子组件能接收到
this.formModel = {};
this.formModel = {groupId: this.groupData};
});
} else if (val === 'edit') {
this.title = '修改配置';
@@ -373,7 +395,7 @@
'<p style="height: 0px;margin-bottom: 50px;">删除 ' + this.reserveForm.configName + ' 配置后，相应的服务器/交换机集合的总流量的相关数据都将删除</p>';
this.$modal.confirm(content).then(() => {
delMonitorConfig(this.reserveForm.id).then(res => {
this.fnConfigName();
this.fnConfigName(this.groupData);
});
}).catch(() => {});
}
@@ -388,17 +410,18 @@
this.fnChartView();
},
// 分组
fnGroupChange() {
fnGroupChange(val) {
// this.groupData
this.fnChartView({});
this.fnConfigName(val);
},
addMonitor() {
this.open = true;
},
fnDialogResult(res){
this.open = false;
this.fnConfigName();
this.fnChartView();
this.groupListData();
// this.fnConfigName(this.groupData);
// this.fnChartView();
},
// 详细视图
viewMonitorChart(val) {
@@ -409,7 +432,7 @@
path: '/resource/monitorBoard',
});
} else {
this.$emit("activeTypeChange", {activeType: val, timeModel: this.timeModel, datetimeModel: this.datetimeModel});
this.$emit("activeTypeChange", {activeType: val, timeModel: this.timeModel, datetimeModel: this.datetimeModel, groupData: this.groupData});
}
}
},
src/views/resource/serverRegister/flowForm.vue
+3 -4
View File
@@ -28,16 +28,16 @@
</template>
</Form>
<div>
<div class="mt20 mb20" style="border: 1px solid #eee;padding: 10px;">
<div class="mb20" style="border: 1px solid #eee;padding: 10px;">
<span>出省流量统计</span>
<div style="height: calc(100vh - 462px);overflow: auto;">
<div style="height: calc(100vh - 445px);overflow: auto;">
<div v-for="item of timelineList" class="ml20">
<pre>{{item.description}}</pre>
</div>
</div>
</div>
</div>
<div style="text-align: right;" class="mt20 mb20 mr20">
<div style="text-align: right;" class="mr20">
<el-button @click="callback({fnCode: 'cancel'})">返回</el-button>
</div>
</div>
@@ -119,7 +119,6 @@
// 出省流量统计
fnRmOutTrafficFlow() {
rmOutTrafficFlow({clientId: this.paramsData.clientId}).then(res => {
console.log('res===',res);
if (res && res.data) {
this.timelineList = res.data;
}
src/views/resource/serverRegister/index.vue
+4 -4
View File
@@ -232,7 +232,7 @@
clientId: { label: `clientID`, minWidth: '270', slotName: 'tempCopy',visible: true, disabled: true},
ip1Isp: { label: `运营商1`, minWidth: '55',visible: true, disabled: true},
ip1Province: { label: `省1`, minWidth: '50',visible: true, disabled: true},
ip1PublicIp:{ label: `业务公网1`,minWidth: '100',visible: true, disabled: true},
ip1PublicIp:{ label: `IP1`,minWidth: '100',visible: true, disabled: true},
businessName: { label: `业务名称`, minWidth: '90', visible: true, disabled: true},
bandwidthResult: { label: `昨日95值`, minWidth: '75', visible: true, disabled: true, sortable: 'custom'},
bandwidthRate: { label: `日95利用率`, minWidth: '75', visible: true, disabled: true},
@@ -249,7 +249,7 @@
ip2Isp: { label: `运营商2`, minWidth: '55'},
ip2Province: { label: `省2`,minWidth: '50'},
ip2City: { label: `市2`, minWidth: '50'},
ip2PublicIp:{ label: `业务公网2`,minWidth: '100'},
ip2PublicIp:{ label: `IP2`,minWidth: '100'},
ip2InterfaceName: { label: `接口名称2`, minWidth: '70'},
ip2MacAddress: { label: `mac地址2`, minWidth: '120'},
ip2InterfaceType: { label: `接口类型2`, minWidth: '70'},
@@ -259,7 +259,7 @@
ip3Isp: { label: `运营商3`, minWidth: '55'},
ip3Province: { label: `省3`, minWidth: '50'},
ip3City: { label: `市3`, minWidth: '50'},
ip3PublicIp:{ label: `业务公网3`,minWidth: '100'},
ip3PublicIp:{ label: `IP3`,minWidth: '100'},
ip3InterfaceName: { label: `接口名称3`, minWidth: '70'},
ip3MacAddress: { label: `mac地址3`, minWidth: '120'},
ip3InterfaceType: { label: `接口类型3`, minWidth: '70'},
@@ -269,7 +269,7 @@
mgmtIsp: { label: `管理网-运营商`, minWidth: '95'},
mgmtProvince: { label: `管理网-省`,minWidth: '65'},
mgmtCity: { label: `管理网-市`, minWidth: '65'},
mgmtPublicIp:{ label: `管理网-业务公网`,minWidth: '120'},
mgmtPublicIp:{ label: `管理网-IP`,minWidth: '120'},
mgmtInterfaceName: { label: `管理网-接口名称`, minWidth: '110'},
mgmtMacAddress: { label: `管理网-mac地址`, minWidth: '120'},
mgmtInterfaceType: { label: `管理网-接口类型`, minWidth: '110'},