开发并联调监控看板
This commit is contained in:
康冉冉
@@ -1045,6 +1045,13 @@ export function updateMonitorConfig(data) {
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 删除
|
||||
export function delMonitorConfig(Ids) {
|
||||
return request({
|
||||
url: '/system/monitorConfig/' + Ids,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
// 配置下拉
|
||||
export function monitorConfigList(data) {
|
||||
return request({
|
||||
@@ -1053,4 +1060,27 @@ export function monitorConfigList(data) {
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 监控看板流量图
|
||||
export function monitorViewChart(data) {
|
||||
return request({
|
||||
url: '/system/monitorConfigDetails/getTrafficByMonitorView',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 95带宽值列表
|
||||
export function getBandWidthList(data) {
|
||||
return request({
|
||||
url: '/system/bandwidth/getListByMonitorView',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 交换机流量出入列表
|
||||
export function getSwitchInfoList(data) {
|
||||
return request({
|
||||
url: '/system/switchInfoDetails/geSwitchListByMonitorView',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
@@ -424,6 +424,21 @@ export const dynamicRoutes = [
|
||||
}
|
||||
]
|
||||
},
|
||||
// 监控看板
|
||||
{
|
||||
path: '/resource/monitorBoard/view',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
permissions: ['resource:monitorBoard:view'],
|
||||
children: [
|
||||
{
|
||||
path: ':id?',
|
||||
component: () => import('@/views/resource/monitorBoard/monitorBoardView'),
|
||||
name: 'MonitorBoardView',
|
||||
meta: { title: '监控看板详情视图', activeMenu: '/resource/monitorBoard' }
|
||||
}
|
||||
]
|
||||
},
|
||||
// 资源拓扑
|
||||
{
|
||||
path: '/resource/topology/edit',
|
||||
|
||||
@@ -7,54 +7,87 @@
|
||||
<script>
|
||||
import Form from '@/components/form/index.vue';
|
||||
import {switchNameTree, listAllBusinessList} from "@/api/disRevenue/earnManage";
|
||||
import {addMonitorConfig} from "@/api/disRevenue/resource";
|
||||
import {addMonitorConfig, updateMonitorConfig} from "@/api/disRevenue/resource";
|
||||
export default {
|
||||
name: "dialogMonitor",
|
||||
components: {Form},
|
||||
dicts: ['resource_type'],
|
||||
props: {
|
||||
formModel: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
formModel: {
|
||||
handler(val) {
|
||||
if (val && val.resourceType === '2') {
|
||||
val.deployDeviceSwitch = [];
|
||||
let newData = val && val.deployDevice ? val.deployDevice.split(',') : val.deployDevice;
|
||||
newData.forEach(item => {
|
||||
let lastVal = item.split(';');
|
||||
val.deployDeviceSwitch.push([Number(lastVal[lastVal.length - 1]), item]);
|
||||
});
|
||||
this.includeDataList();
|
||||
} else if (val && val.resourceType === '3') {
|
||||
this.businessList();
|
||||
}
|
||||
this.ruleFormData = val;
|
||||
this.fnFormList();
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ruleFormData: {},
|
||||
formList: [],
|
||||
busNameList: {},
|
||||
switchNameList: {},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fnFormList();
|
||||
this.includeDataList();
|
||||
this.businessList();
|
||||
},
|
||||
methods: {
|
||||
// formList集合
|
||||
fnFormList(objVal) {
|
||||
fnFormList() {
|
||||
this.formList = [{
|
||||
config: {colSpan: 'disBlock'},
|
||||
controls: {
|
||||
id: {label: 'ID',hidden: true},
|
||||
configName: {label: '配置名称', span: 18, type: 'input', required: true},
|
||||
monitorStartTime: {label: '监控数据开始时间', span: 18, type: 'datetime', required: true},
|
||||
resourceType: {label: '资源类型', span: 18, type: 'select', eventName: 'change', options: this.dict.type.resource_type},
|
||||
monitorStartTime: {label: '监控数据开始时间', span: 18, type: 'datetime', disabled: this.ruleFormData && this.ruleFormData.id ? true : false, required: true},
|
||||
resourceType: {label: '资源类型', span: 18, type: 'select', eventName: 'change', options: this.dict.type.resource_type, disabled: this.ruleFormData && this.ruleFormData.id ? true : false},
|
||||
deployDevice: {label: '包含资源', span: 18, type: 'textarea', rows: 10, required: true, hidden: this.ruleFormData.resourceType && this.ruleFormData.resourceType === '1' ? false : true},
|
||||
deployDeviceSwitch: {label: '包含资源', span: 18, type: 'cascader', options: [], hidden: this.ruleFormData.resourceType && this.ruleFormData.resourceType === '2' ? false : true},
|
||||
businessName: {label: '包含业务', span: 18, type: 'select', options: [], hidden: this.ruleFormData.resourceType && this.ruleFormData.resourceType === '3' ? false : true},
|
||||
businessName: {label: '包含业务', span: 18, type: 'select', options: [], disabled: this.ruleFormData && this.ruleFormData.id ? true : false, hidden: this.ruleFormData.resourceType && this.ruleFormData.resourceType === '3' ? false : true},
|
||||
}
|
||||
}];
|
||||
},
|
||||
// 包含资源
|
||||
includeDataList(num) {
|
||||
switchNameTree().then(val => {
|
||||
this.switchNameList = val && val;
|
||||
this.formList[0].controls.deployDeviceSwitch['options'] = val && val.data;
|
||||
});
|
||||
this.$modal.loading();
|
||||
// if (this.switchNameList && Object.keys(this.switchNameList).length <= 0) {
|
||||
switchNameTree().then(val => {
|
||||
this.switchNameList = val && val;
|
||||
this.formList[0].controls.deployDeviceSwitch['options'] = val && val.data;
|
||||
this.$modal.closeLoading();
|
||||
}).catch(() => {
|
||||
this.$modal.closeLoading();
|
||||
});
|
||||
// }
|
||||
},
|
||||
// 业务名称
|
||||
businessList() {
|
||||
listAllBusinessList().then(val => {
|
||||
this.formList[0].controls.businessName['options'] = val && val.data.map(item => {
|
||||
this.busNameList[item.businessName] = item;
|
||||
return Object.assign({label: item.businessName, value: item.businessName});
|
||||
// if (this.busNameList && Object.keys(this.busNameList).length <= 0) {
|
||||
listAllBusinessList().then(val => {
|
||||
this.formList[0].controls.businessName['options'] = val && val.data.map(item => {
|
||||
this.busNameList[item.businessName] = item;
|
||||
return Object.assign({label: item.businessName, value: item.businessName});
|
||||
});
|
||||
});
|
||||
});
|
||||
// }
|
||||
},
|
||||
// 监听事件
|
||||
callback(result, dataVal, formVal) {
|
||||
@@ -70,10 +103,12 @@
|
||||
this.formList[0].controls.deployDevice['hidden'] = true;
|
||||
this.formList[0].controls.deployDeviceSwitch['hidden'] = false;
|
||||
this.formList[0].controls.businessName['hidden'] = true;
|
||||
this.includeDataList();
|
||||
} else if (dataVal === '3') {
|
||||
this.formList[0].controls.deployDevice['hidden'] = true;
|
||||
this.formList[0].controls.deployDeviceSwitch['hidden'] = true;
|
||||
this.formList[0].controls.businessName['hidden'] = false;
|
||||
this.businessList();
|
||||
}
|
||||
} else {
|
||||
this.formList[0].controls.deployDevice['hidden'] = true;
|
||||
@@ -93,8 +128,12 @@
|
||||
dataVal.deployDevice = newArr.toString();
|
||||
delete dataVal.deployDeviceSwitch;
|
||||
}
|
||||
addMonitorConfig(dataVal).then(res => {
|
||||
this.$emit("dialogResult", {open: false});
|
||||
let fnName = addMonitorConfig;
|
||||
if (dataVal && dataVal.id) {
|
||||
fnName = updateMonitorConfig;
|
||||
}
|
||||
fnName(dataVal).then(res => {
|
||||
this.$emit("dialogResult", {open: false, type: 'submit'});
|
||||
});
|
||||
break;
|
||||
case 'cancel':
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="w100" style="height: 60px;">
|
||||
<div class="w50 fr" style="text-align: right;">
|
||||
<div class="fr" style="text-align: right;">
|
||||
<el-date-picker
|
||||
v-model="datetimeModel"
|
||||
style="width: 360px!important;margin-right: 10px;"
|
||||
@@ -10,7 +10,8 @@
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期时间"
|
||||
end-placeholder="结束日期时间">
|
||||
end-placeholder="结束日期时间"
|
||||
@change="dateChange">
|
||||
</el-date-picker>
|
||||
<el-select v-model="timeModel" placeholder="请选择" style="width: 100px;margin-right: 10px;">
|
||||
<el-option
|
||||
@@ -20,40 +21,40 @@
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-button>详情视图</el-button>
|
||||
<el-button @click="viewMonitorChart">详情视图</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: calc(100% - 60px);" class="w100">
|
||||
<div class="w50 disInlineBlock plr-10" style="height: 200px;vertical-align: middle;">
|
||||
<div class="w50 disInlineBlock plr-10 mtb10" style="height: 200px;vertical-align: middle;">
|
||||
<div class="w100 h100" style="border: 1px solid #e8e8e8;display: flex;justify-content: center;align-items: center;flex-direction: column;">
|
||||
<el-button type="primary" icon="el-icon-plus" plain circle @click="addMonitor"></el-button>
|
||||
<div style="font-size: 1rem;margin-top: 5px;">新增监控配置</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="charItem of lineDataParams" class="w50 disInlineBlock plr-10" style="height: 200px;vertical-align: middle;">
|
||||
<div v-for="(chartItem, key, index) of lineDataParams" class="w50 disInlineBlock plr-10 mtb10" style="height: 200px;vertical-align: middle;">
|
||||
<div class="w100 h100" style="border: 1px solid #e8e8e8; padding: 10px 10px 2px;">
|
||||
<div class="w100" style="height: 20px">
|
||||
<span>配置名称1</span>
|
||||
<el-dropdown trigger="click" style="float: right;">
|
||||
<span>{{chartItem && chartItem.rmMonitorConfig && chartItem.rmMonitorConfig.configName}}</span>
|
||||
<el-dropdown trigger="click" style="float: right;" @command="(command) => handleCommand(command, key, chartItem)">
|
||||
<span class="el-dropdown-link">
|
||||
<i class="el-icon-more" style="transform: rotate(90deg);"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="item of btnList" class="clearfix" @click="fnBtnSide(item)">
|
||||
<el-dropdown-item v-for="item of btnList" :command="item" class="clearfix">
|
||||
{{item.title}}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="w100" style="height: calc(100% - 20px)">
|
||||
<EchartsLine :lineData="charItem || {}" :title="charItem && charItem.title || ''" class="w100 h100" :chartData="(valData, unit) => chartDataEvent(valData, unit)"></EchartsLine>
|
||||
<EchartsLine :lineData="chartItem && chartItem.echartList || {}" :title="chartItem && chartItem.echartList && chartItem.echartList.title || ''" class="w100 h100" :chartData="(valData, unit) => chartDataEvent(valData, key, unit)"></EchartsLine>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 弹窗 -->
|
||||
<el-dialog title="添加配置" :visible.sync="open" width="800px" append-to-body>
|
||||
<dialogMonitor @dialogResult="fnDialogResult"></dialogMonitor>
|
||||
<dialogMonitor :formModel="formModel" @dialogResult="fnDialogResult"></dialogMonitor>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -61,11 +62,14 @@
|
||||
<script>
|
||||
import dialogMonitor from './dialogMonitor';
|
||||
import EchartsLine from "@/components/echartsList/line.vue";
|
||||
import {monitorViewChart, delMonitorConfig} from "@/api/disRevenue/resource";
|
||||
export default {
|
||||
name: "monitorBoard",
|
||||
components: {dialogMonitor, EchartsLine},
|
||||
data() {
|
||||
return {
|
||||
formModel: {},
|
||||
currTimeList: {},
|
||||
datetimeModel: [],
|
||||
timeModel: '30000',
|
||||
open: false,
|
||||
@@ -78,7 +82,6 @@
|
||||
title: ' ',
|
||||
yAxisName: ' ',
|
||||
unitModel: 'Kb',
|
||||
unitSelList: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}],
|
||||
legend: {bottom: '0%'},
|
||||
gridTop: '40px',
|
||||
gridBotm: '15%',
|
||||
@@ -89,7 +92,7 @@
|
||||
{name: '出方向总流量', data: []}
|
||||
]
|
||||
},
|
||||
lineDataParams: [],
|
||||
lineDataParams: {},
|
||||
btnList: [{title: '详情', value: 'view'}, {title: '修改', value: 'edit'}, {title: '删除', value: 'del'}],
|
||||
}
|
||||
},
|
||||
@@ -102,28 +105,99 @@
|
||||
const prevDay = String(new Date().getDate() - 1).padStart(2, '0');
|
||||
startData = `${year}-${month}-${prevDay} 00:00:00`;
|
||||
endData = `${year}-${month}-${day} 23:59:59`;
|
||||
this.currTimeList = {startTime: startData, endTime: endData};
|
||||
this.datetimeModel = [startData, endData];
|
||||
this.lineDataParams.push(this.echartData);
|
||||
// 循环定时查询
|
||||
// setInterval(() => {
|
||||
// console.log('vvv====',Number(this.timeModel));
|
||||
// }, Number(this.timeModel));
|
||||
this.fnChartView({});
|
||||
},
|
||||
methods: {
|
||||
// 查询流量图
|
||||
fnChartView(unitVal,keyName) {
|
||||
monitorViewChart(Object.assign({}, this.currTimeList, unitVal)).then(res => {
|
||||
let dataList = {};
|
||||
res && res.data.forEach(item => {
|
||||
let chart = JSON.parse(JSON.stringify(this.echartData));
|
||||
let modelVal = item.rmMonitorConfig;
|
||||
dataList[modelVal.configName + '_' + modelVal.id] = item;
|
||||
if (item && item.unit) {
|
||||
chart.unitModel = item.unit;
|
||||
chart.unitSelList = [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}];
|
||||
}
|
||||
chart.lineXData = item && item.xData || [];
|
||||
chart.dataList[0].data = item && item.yData && item.yData.netInSpeedData || [];
|
||||
chart.dataList[1].data = item && item.yData && item.yData.netOutSpeedData || [];
|
||||
dataList[modelVal.configName + '_' + modelVal.id]['echartList'] = chart;
|
||||
});
|
||||
if (keyName) {
|
||||
this.$set(this.lineDataParams, keyName, dataList[keyName]);
|
||||
} else {
|
||||
if (dataList && Object.keys(dataList).length > 0) {
|
||||
this.lineDataParams = {...dataList};
|
||||
} else {
|
||||
this.lineDataParams['one'] = {
|
||||
echartList: this.echartData
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 时间选择器
|
||||
dateChange() {
|
||||
this.currTimeList = {startTime: this.datetimeModel[0], endTime: this.datetimeModel[1]};
|
||||
this.fnChartView({});
|
||||
},
|
||||
addMonitor() {
|
||||
this.open = true;
|
||||
// 使用$nextTick确保DOM更新完成后再初始化子组件
|
||||
this.$nextTick(() => {
|
||||
// 强制更新formModel，确保子组件能接收到
|
||||
this.formModel = {};
|
||||
});
|
||||
},
|
||||
// 弹窗关闭
|
||||
fnDialogResult(res){
|
||||
// 新增或编辑操作时
|
||||
if (res && res.type === 'submit') {
|
||||
this.fnChartView({});
|
||||
}
|
||||
this.open = false;
|
||||
},
|
||||
// 右侧点击下拉按钮
|
||||
fnBtnSide(val) {
|
||||
|
||||
// 详细视图
|
||||
viewMonitorChart() {
|
||||
this.$router.push({
|
||||
path: '/resource/monitorBoard/view',
|
||||
query: {}
|
||||
});
|
||||
},
|
||||
chartDataEvent(valData, unit) {
|
||||
// // 检查函数是否存在，避免报错
|
||||
// if (typeof this[funcName] === 'function') {
|
||||
// // 调用实际函数，并传递参数（如选中的值、当前项）
|
||||
// // this[funcName]({startTime: valData[0], endTime: valData[1]});
|
||||
// } else {
|
||||
// console.warn(`函数 ${funcName} 未定义`);
|
||||
// }
|
||||
// 右侧点击下拉按钮
|
||||
handleCommand(val, chartKey, chartVal) {
|
||||
this.formModel = {};
|
||||
if (val && val.value === 'del') {
|
||||
delMonitorConfig(chartVal.rmMonitorConfig.id).then(res => {
|
||||
this.fnChartView({});
|
||||
});
|
||||
} else if (val && val.value === 'edit') {
|
||||
this.open = true;
|
||||
// 使用$nextTick确保DOM更新完成后再初始化子组件
|
||||
this.$nextTick(() => {
|
||||
// 强制更新formModel，确保子组件能接收到
|
||||
this.formModel = chartVal && chartVal.rmMonitorConfig;
|
||||
});
|
||||
} else if (val && val.value === 'view') {
|
||||
this.$router.push({
|
||||
path: '/resource/monitorBoard/view',
|
||||
query: {id: chartVal.rmMonitorConfig.id}
|
||||
});
|
||||
}
|
||||
},
|
||||
chartDataEvent(valData, keyName, unit) {
|
||||
if (unit) {
|
||||
let params = {unit: unit, monitorId: this.lineDataParams[keyName].rmMonitorConfig.id};
|
||||
this.fnChartView(params,keyName);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,274 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="w100" style="height: 60px;">
|
||||
<div class="fl" style="text-align: left;">
|
||||
<el-select v-model="configModel" placeholder="请选择配置" style="margin-right: 10px;" @change="selectValChange">
|
||||
<el-option
|
||||
v-for="item in configNameList"
|
||||
:key="item.id"
|
||||
:label="item.configName"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-button type="primary" @click="fnFormHandle('add')">添加配置</el-button>
|
||||
<el-button @click="fnFormHandle('edit')">修改配置</el-button>
|
||||
<el-button @click="fnFormHandle('del')">删除配置</el-button>
|
||||
</div>
|
||||
<div class="fr" style="text-align: right;">
|
||||
<el-date-picker
|
||||
v-model="datetimeModel"
|
||||
style="width: 360px!important;margin-right: 10px;"
|
||||
type="datetimerange"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期时间"
|
||||
end-placeholder="结束日期时间"
|
||||
@change="dateChange">
|
||||
</el-date-picker>
|
||||
<el-select v-model="timeModel" placeholder="请选择" style="width: 100px;margin-right: 10px;">
|
||||
<el-option
|
||||
v-for="item in timeModelOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-button @click="viewMonitorChart">概览视图</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: calc(100% - 60px);" class="w100">
|
||||
<div v-for="(chartItem, key, index) of lineDataParams" class="h40 w100" style="min-height: 300px;">
|
||||
<div class="w100 h100" style="border: 1px solid #e8e8e8;">
|
||||
<EchartsLine :lineData="chartItem || {}" :title="chartItem && chartItem.title || ''" class="w100 h100" :chartData="(valData, unit) => chartDataEvent(valData, unit)"></EchartsLine>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <TableList :columns="columns" :config="config" :queryParams="queryParams" :tableList="roleList" @fnClick="callback" @fnRenderList="getList"></TableList>-->
|
||||
<!-- 弹窗 -->
|
||||
<el-dialog title="添加配置" :visible.sync="open" width="800px" append-to-body>
|
||||
<dialogMonitor :formModel="formModel" @dialogResult="fnDialogResult"></dialogMonitor>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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";
|
||||
export default {
|
||||
name: "monitorBoardView",
|
||||
components: {dialogMonitor, EchartsLine, TableList},
|
||||
data() {
|
||||
return {
|
||||
paramsData: {},
|
||||
configModel: '',
|
||||
configNameList: [],
|
||||
formModel: {},
|
||||
reserveForm: {},
|
||||
datetimeModel: [],
|
||||
timeModel: '30000',
|
||||
open: false,
|
||||
timeModelOptions: [
|
||||
{value: '30000', label: '30s刷新'},
|
||||
{value: '10000', label: '10s刷新'},
|
||||
{value: '0', label: '不刷新'},
|
||||
],
|
||||
echartData: {
|
||||
title: ' ',
|
||||
yAxisName: ' ',
|
||||
unitModel: 'Kb',
|
||||
unitSelList: [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}],
|
||||
legend: {bottom: '0%'},
|
||||
gridTop: '40px',
|
||||
gridBotm: '15%',
|
||||
hiddenTime: true,
|
||||
lineXData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sa', 'Sun'],
|
||||
dataList: [
|
||||
{name: '入方向总流量', data: []},
|
||||
{name: '出方向总流量', data: []}
|
||||
]
|
||||
},
|
||||
lineDataParams: {},
|
||||
btnList: [{title: '详情', value: 'view'}, {title: '修改', value: 'edit'}, {title: '删除', value: 'del'}],
|
||||
// 列显隐信息
|
||||
columns: {
|
||||
id: { label: `ID`,width: '50'},
|
||||
clientId: { label: `ClientID`, visible: true, minWidth: '120'},
|
||||
businessName: {label: `业务名称`, minWidth: '150', visible: true},
|
||||
bandwidth95Daily: {label: `95带宽值/日(Mbit)`, minWidth: '150', slotName: 'tempDay',visible: true},
|
||||
},
|
||||
config: {
|
||||
tableButton: {
|
||||
line: [
|
||||
{content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'resource:monitorBoardView:details'},
|
||||
]
|
||||
}
|
||||
},
|
||||
roleList: [],
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.paramsData = this.$route && this.$route.query;
|
||||
this.configModel = this.paramsData && this.paramsData.id ? Number(this.paramsData.id) : '';
|
||||
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} 23:59:59`;
|
||||
this.currTimeList = {startTime: startData, endTime: endData};
|
||||
this.datetimeModel = [startData, endData];
|
||||
this.lineDataParams['one'] = this.echartData;
|
||||
// 循环定时查询
|
||||
// setInterval(() => {
|
||||
// console.log('vvv====',Number(this.timeModel));
|
||||
// }, Number(this.timeModel));
|
||||
this.fnConfigName();
|
||||
if (this.configModel) {
|
||||
this.fnChartView();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
if (this.reserveForm.resourceType === '1') {
|
||||
getBandWidthList(this.queryParams).then(response => {
|
||||
this.roleList = response.rows;
|
||||
this.queryParams.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
} else if (this.reserveForm.resourceType === '2') {
|
||||
getSwitchInfoList(this.queryParams).then(response => {
|
||||
this.roleList = response.rows;
|
||||
this.queryParams.total = response.total;
|
||||
this.loading = false;
|
||||
})
|
||||
}
|
||||
},
|
||||
// 查询流量图
|
||||
fnChartView(unitData) {
|
||||
this.lineDataParams = {};
|
||||
monitorViewChart(Object.assign(unitData || {},this.currTimeList, {monitorId: this.configModel})).then(res => {
|
||||
let dataList = {};
|
||||
res && res.data.forEach(item => {
|
||||
let chart = JSON.parse(JSON.stringify(this.echartData));
|
||||
let modelVal = item && item.rmMonitorConfig || {id: 'one', configName: 'one'};
|
||||
this.reserveForm = modelVal;
|
||||
dataList[modelVal && modelVal.configName + '_' + modelVal.id] = {};
|
||||
if (item && item.unit) {
|
||||
chart.unitModel = item.unit;
|
||||
chart.unitSelList = [{label: 'Kb', value: 'Kb'},{label: 'Mb', value: 'Mb'}, {label: 'Gb', value: 'Gb'}];
|
||||
}
|
||||
chart.lineXData = item && item.xData || [];
|
||||
chart.dataList[0].data = item && item.yData && item.yData.netInSpeedData || [];
|
||||
chart.dataList[1].data = item && item.yData && item.yData.netOutSpeedData || [];
|
||||
dataList[modelVal.configName + '_' + modelVal.id] = chart;
|
||||
});
|
||||
if (dataList && Object.keys(dataList).length > 0) {
|
||||
this.lineDataParams = {...dataList};
|
||||
} else {
|
||||
this.lineDataParams['one'] = this.echartData;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 下拉
|
||||
fnConfigName() {
|
||||
monitorConfigList({}).then(res => {
|
||||
if (res && res.data && res.data.length > 0) {
|
||||
this.configNameList = res && res.data;
|
||||
let index = 0;
|
||||
res && res.data.forEach(item => {
|
||||
if (item.id === this.configModel) {
|
||||
index = 1;
|
||||
}
|
||||
});
|
||||
if (index === 0) {
|
||||
this.configModel = this.configNameList[0].id;
|
||||
this.fnChartView();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 按钮操作弹窗
|
||||
fnFormHandle(val) {
|
||||
if (val === 'add') {
|
||||
this.open = true;
|
||||
// 使用$nextTick确保DOM更新完成后再初始化子组件
|
||||
this.$nextTick(() => {
|
||||
// 强制更新formModel，确保子组件能接收到
|
||||
this.formModel = {};
|
||||
});
|
||||
} else if (val === 'edit') {
|
||||
this.open = true;
|
||||
// 使用$nextTick确保DOM更新完成后再初始化子组件
|
||||
this.$nextTick(() => {
|
||||
// 强制更新formModel，确保子组件能接收到
|
||||
this.formModel = this.reserveForm;
|
||||
});
|
||||
} else if (val === 'del') {
|
||||
let content = '<p style="font-size: 1rem;font-weight: 600;">确认删除 ' + this.reserveForm.configName + '</p>' +
|
||||
'<p style="height: 0px;margin-bottom: 50px;">删除 ' + this.reserveForm.configName + ' 配置后，相应的服务器/交换机集合的总流量的相关数据都将删除</p>';
|
||||
this.$modal.confirm(content).then(() => {
|
||||
delMonitorConfig(this.reserveForm.id).then(res => {
|
||||
this.fnConfigName();
|
||||
});
|
||||
}).catch(() => {});
|
||||
}
|
||||
},
|
||||
// 时间选择器
|
||||
dateChange() {
|
||||
this.currTimeList = {startTime: this.datetimeModel[0], endTime: this.datetimeModel[1]};
|
||||
this.fnChartView({});
|
||||
},
|
||||
// 下拉值变化事件
|
||||
selectValChange(val) {
|
||||
this.fnChartView();
|
||||
},
|
||||
addMonitor() {
|
||||
this.open = true;
|
||||
},
|
||||
fnDialogResult(res){
|
||||
this.open = false;
|
||||
this.fnConfigName();
|
||||
this.fnChartView();
|
||||
},
|
||||
// 详细视图
|
||||
viewMonitorChart() {
|
||||
this.$router.push({
|
||||
path: '/resource/monitorBoard',
|
||||
});
|
||||
},
|
||||
chartDataEvent(valData, unit) {
|
||||
if (unit) {
|
||||
let unitData = {unit: unit};
|
||||
this.fnChartView(unitData);
|
||||
}
|
||||
},
|
||||
callback(){
|
||||
if (result && result.fnCode) {
|
||||
switch (result.fnCode) {
|
||||
case 'details':
|
||||
// this.$router.push({
|
||||
// path:'/resource/serverRegister/edit',
|
||||
// query: {id: rowData.id, readonly: true}
|
||||
// });
|
||||
break;
|
||||
default:
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user