diff --git a/src/api/disRevenue/resource.js b/src/api/disRevenue/resource.js index fd270f6..3f2f17f 100644 --- a/src/api/disRevenue/resource.js +++ b/src/api/disRevenue/resource.js @@ -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({ diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 1704084..974eeaf 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -360,3 +360,6 @@ aside { .my-custom-select-dropdown { top: 98px!important; } +.el-scrollbar__wrap { + overflow: auto!important; +} diff --git a/src/components/customModule/selectModule.vue b/src/components/customModule/selectModule.vue index afef018..84669cd 100644 --- a/src/components/customModule/selectModule.vue +++ b/src/components/customModule/selectModule.vue @@ -3,11 +3,12 @@ @@ -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 @@
- + + + + + + + + +
@@ -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} }); } }, diff --git a/src/views/resource/monitorBoard/monitorBoardView.vue b/src/views/resource/monitorBoard/monitorBoardView.vue index 3cda0ff..acb888e 100644 --- a/src/views/resource/monitorBoard/monitorBoardView.vue +++ b/src/views/resource/monitorBoard/monitorBoardView.vue @@ -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 @@ '

删除 ' + this.reserveForm.configName + ' 配置后，相应的服务器/交换机集合的总流量的相关数据都将删除

'; 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}); } } }, diff --git a/src/views/resource/serverRegister/flowForm.vue b/src/views/resource/serverRegister/flowForm.vue index 0fbdf50..9720e64 100644 --- a/src/views/resource/serverRegister/flowForm.vue +++ b/src/views/resource/serverRegister/flowForm.vue @@ -28,16 +28,16 @@
-
+
出省流量统计 -
+ 
{{item.description}}
-
+
返回
@@ -119,7 +119,6 @@ // 出省流量统计 fnRmOutTrafficFlow() { rmOutTrafficFlow({clientId: this.paramsData.clientId}).then(res => { - console.log('res===',res); if (res && res.data) { this.timelineList = res.data; } diff --git a/src/views/resource/serverRegister/index.vue b/src/views/resource/serverRegister/index.vue index e50e20c..a30d068 100644 --- a/src/views/resource/serverRegister/index.vue +++ b/src/views/resource/serverRegister/index.vue @@ -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'},