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

图形分析、资源监控、交换机收益

Browse Source
This commit is contained in:
康冉冉
2025-09-03 18:34:47 +08:00
parent 7467bf2f5a
commit 90171cd617
20 changed files with 415 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/disRevenue/earnManage.js
View File

@@ -44,9 +44,9 @@ export function recalBandWidth(Id) {
})
}
// 相关数据
export function relatedBandWidth(Id) {
export function relatedBandWidth(data) {
return request({
url: '/system/bandwidth/relatedData/' + Id,
url: '/system/bandwidth/relatedData/traffic?id=' + data['id'] + '&pageNum=' + data['pageNum'] + '&pageSize=' + data['pageSize'],
method: 'get'
})
}

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

@@ -51,7 +51,7 @@ export function updateregisterType(data) {
data: data
})
}
// 修改注册状态
// 交换机/服务器--节点名称查询
export function resNameBtType(data) {
return request({
url: '/system/registration/selectAllResourceNameByType',

28
src/components/echartsList/bar.vue
View File

@@ -30,6 +30,17 @@
}
}
},
watch: {
barData: {
handler(val) {
this.$nextTick(() => {
this.getList(this.title, this.barData);
});
},
deep: true,
immediate: true
}
},
data() {
return {
barDataList: '',
@@ -74,7 +85,7 @@
xAxis: [
{
type: dataXY && dataXY.yAxis ? 'value' :'category',
data: dataXY && dataXY.yAxis ? [] : dataXY.lineData,
data: dataXY && dataXY.yAxis ? [] : dataXY.lineXData,
// 去掉x轴线
axisLine: { show: false },
// 去掉x轴刻度线
@@ -102,7 +113,7 @@
axisLabel: {
show: true
},
data: dataXY && dataXY.yAxis ? dataXY.lineData : [],
data: dataXY && dataXY.yAxis ? dataXY.lineXData : [],
}
],
series: [
@@ -124,12 +135,13 @@
// })
},
dataChangeValue(val, days) {
// console.log(props.chartData(val));
// this.getList(this.title, {data: this.barData.data, lineData: days, yAxis: this.barData && this.barData.yAxis});
let newbarData = {...this.barData};
newbarData['lineData'] = days && days.length > 0 ? days: this.barData.lineXData;
this.getList(this.title, newbarData);
dataChangeValue(val, days, timeArr) {
if (timeArr) {
this.chartData(timeArr);
}
// let newbarData = {...this.barData};
// newbarData['lineXData'] = days && days.length > 0 ? days: this.barData.lineXData;
// this.getList(this.title, newbarData);
}
}
}

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

@@ -17,16 +17,15 @@
<li :class="{ 'activesbgs' : isActive == 'MONTH' }" @click="toggle('MONTH')">前一个月</li>
</template>
<template v-else>
<li :class="{ 'activesbgs' : isActive == 'THREEMONTH' }" @click="toggle('THREEMONTH')">前三个月</li>
<li :class="{ 'activesbgs' : isActive == 'HALFYEAR' }" @click="toggle('HALFYEAR')">前半年</li>
<li :class="{ 'activesbgs' : isActive == 'YEAR' }" @click="toggle('YEAR')">前一年</li>
<li :class="{ 'activesbgs' : isActive == 'THREEMONTH' }" @click="toggle('THREEMONTH', 3)">前三个月</li>
<li :class="{ 'activesbgs' : isActive == 'HALFYEAR' }" @click="toggle('HALFYEAR', 6)">前半年</li>
<li :class="{ 'activesbgs' : isActive == 'YEAR' }" @click="toggle('YEAR', 12)">前一年</li>
</template>
</ul>
</div>
</template>
<script setup>
import {onMounted} from "vue";
export default {
name: 'dateTimeSelect',
props: {
@@ -43,28 +42,29 @@
},
// DOM 挂载完成后
mounted() {
this.isActive = this.dateShowType && this.dateShowType === 'day' ? 'MONTH' : 'YEAR';
// 可以访问 DOM 元素
setTimeout(() => {
// this.getLastDays(6);
// this.getDaysOfPreviousMonth();
this.$emit("dataChange", this.isActive, []);
}, 500);
// setTimeout(() => {
// // this.getLastDays(6);
// // this.getDaysOfPreviousMonth();
// this.$emit("dataChange", this.isActive, []);
// }, 500);
},
methods: {
toggle(val, num) {
this.isActive = val;
if (val && val === 'MONTH') {
this.getDaysOfPreviousMonth();
} else if (val && val === 'THREEMONTH') {
this.getLastThreeMonths();
} else if (val && val === 'HALFYEAR') {
this.getLastSixMonths();
} else if (val && (val === 'THREEMONTH' || val === 'HALFYEAR' || val === 'YEAR')) {
this.getLastMonths(num);
} else {
this.getLastDays(num - 1);
}
},
// 时间选择器
dateChange() {
this.getDaysOfPreviousMonth(this.dateRange[0], this.dateRange[1]);
this.$emit("dataChange", this.isActive, [], this.dateRange);
// this.getDaysOfPreviousMonth(this.dateRange[0], this.dateRange[1]);
},
// 获取当前日期前7天的所有日期（格式：YYYY-MM-DD）
getLastDays(num) {
@@ -82,7 +82,9 @@
dayList.push(`${year}-${month}-${day}`);
}
this.$emit("dataChange", this.isActive, dayList);
let timeArr = [dayList[0], dayList[dayList.length - 1]];
this.$emit("dataChange", this.isActive, [], timeArr);
// this.$emit("dataChange", this.isActive, dayList);
},
// 获取前一个月的所有日期
getDaysOfPreviousMonth(star, end) {
@@ -109,16 +111,18 @@
currentDay = new Date(currentDay); // 避免引用同一对象
currentDay.setDate(currentDay.getDate() + 1);
}
this.$emit("dataChange", this.isActive, oneMonthDays);
let timeArr = [oneMonthDays[0], oneMonthDays[oneMonthDays.length - 1]];
this.$emit("dataChange", this.isActive, [], timeArr);
// this.$emit("dataChange", this.isActive, oneMonthDays);
},
// 获取前三个月的月
getLastThreeMonths() {
getLastMonths(num) {
const threeMonths = [];
const today = new Date(); // 当前日期
const currentYear = today.getFullYear();
const currentMonth = today.getMonth(); // 月份从0开始（0=1月，11=12月）
// 循环获取前3个月（i=0: 前1个月，i=1: 前2个月，i=2: 前3个月）
for (let i = 1; i <= 3; i++) {
for (let i = 1; i <= num; i++) {
// 计算目标月份（当前月 - i）
let targetMonth = currentMonth - i;
let targetYear = currentYear;
@@ -129,35 +133,11 @@
}
// 格式化月份为两位数（如5月→'05'）
const monthStr = String(targetMonth + 1).padStart(2, '0'); // 加1是因为月份从0开始
threeMonths.push(`${targetYear}-${monthStr}`);
threeMonths.unshift(`${targetYear}-${monthStr}`);
}
console.log('threeMonths===',threeMonths);
this.$emit("dataChange", this.isActive, threeMonths);
},
// 前半年
getLastSixMonths() {
const result = [];
const today = new Date(); // 当前日期
const currentYear = today.getFullYear();
const currentMonth = today.getMonth(); // 月份从0开始（0=1月，11=12月）
// 循环获取前6个月（i=1: 前1个月，i=6: 前6个月）
for (let i = 1; i <= 6; i++) {
let targetMonth = currentMonth - i;
let targetYear = currentYear;
// 处理月份跨年份（如1月-1=12月，年份减1）
if (targetMonth < 0) {
targetMonth += 12;
targetYear -= 1;
}
// 格式化月份为两位数（如5月→'05'）
const monthStr = String(targetMonth + 1).padStart(2, '0'); // 加1转为实际月份（1-12）
result.push(`${targetYear}-${monthStr}`);
}
return result;
let timeArr = [threeMonths[0], threeMonths[threeMonths.length - 1]];
this.$emit("dataChange", this.isActive, [], timeArr);
// this.$emit("dataChange", this.isActive, threeMonths);
},
}
}

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

@@ -30,6 +30,17 @@
}
}
},
watch: {
lineData: {
handler(val) {
this.$nextTick(() => {
this.getList(this.title, this.lineData);
});
},
deep: true,
immediate: true
}
},
data() {
return {
lineDataList: '',
@@ -41,7 +52,7 @@
},
mounted() {
if (this.lineData && this.lineData.hiddenTime) {
this.getList(this.title, {data: this.lineData.data, lineXData: this.lineData.lineXData});
this.getList(this.title, this.lineData);
}
},
methods: {
@@ -103,9 +114,13 @@
// lineDataListIntance.resize()
// })
},
dataChangeValue(val, days) {
let lineDataList = days && days.length > 0 ? days: this.lineData.lineXData;
this.getList(this.title, {data: this.lineData.data, lineXData: lineDataList});
dataChangeValue(val, days, timeArr) {
// 调用父级页面传过来的事件，在父级中处理该方法的逻辑--
if (timeArr) {
this.chartData(timeArr);
}
// let lineDataList = days && days.length > 0 ? days: this.lineData.lineXData;
// this.getList(this.title, {data: this.lineData.data, lineXData: lineDataList});
}
}
}

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

@@ -190,6 +190,9 @@
item.controls[val]['eventName'] = item.controls[val] && item.controls[val]['eventName'] || null;
if (item.controls[val] && item.controls[val]['rules']) {
this.rules[val] = item.controls[val]['rules'];
} else if (item.controls[val] && item.controls[val].required) {
let msgType = item.controls[val].type === 'input' ? '请输入' : '请选择';
this.rules[val] = [{required: true,message: `${msgType}${item.controls[val].label}`}];
}
});
});

15
src/router/index.js
View File

@@ -369,6 +369,21 @@ export const dynamicRoutes = [
}
]
},
// 资源监控
{
path: '/disRevenue/resource/resMonitor/details',
component: Layout,
hidden: true,
permissions: ['disRevenue:resource:resMonitor:details'],
children: [
{
path: 'index/:id?',
component: () => import('@/views/disRevenue/resource/resMonitor/details'),
name: 'resMonitorEdit',
meta: { title: '资源监控策略信息', activeMenu: '/disRevenue/resource/resMonitor' }
}
]
},
]
// 防止连续点击多次路由报错

2
src/views/disRevenue/earnManage/business/details.vue
View File

@@ -17,7 +17,7 @@
id: '',
businessName: ''
},
formList: {},
formList: [],
}
},
created() {

2
src/views/disRevenue/earnManage/server/details.vue
View File

@@ -15,7 +15,7 @@
data() {
return {
ruleForm: {},
formList: {},
formList: [],
paramsData: {}
}
},

226
src/views/disRevenue/earnManage/server/dialogView.vue
View File

@@ -16,31 +16,17 @@
<el-switch v-for="item of switchData" v-model="item.checkType" :activeText="item.label" class="mr20" />
</div>
<div style="height: calc(100vh - 130px);overflow: scroll;">
<!-- <template v-for="(item,index) of selectChoose">-->
<!-- <EchartsLine v-show="switchData[0].checkType" :chartData="chartDataEvent"-->
<!-- :lineData="lineDataParams" :title="'【' + item.nodeName + '】【' + item.businessName + '】' + switchData[0].label" class="w100 h40 mt20 mb20" style="border: 1.5px solid #878787;"></EchartsLine>-->
<!-- <EchartsLine v-show="switchData[1].checkType" :chartData="chartDataEvent"-->
<!-- :lineData="lineDataParams" :title="'【' + item.nodeName + '】【' + item.businessName + '】' + switchData[1].label" class="w100 h40 mt20 mb20" style="border: 1.5px solid #878787;"></EchartsLine>-->
<!-- <EchartsBar v-show="switchData[2].checkType" :chartData="chartDataEvent"-->
<!-- :barData="lineDataParams" :title="'【' + item.nodeName + '】【' + item.businessName + '】' + switchData[2].label" class="w100 h40 mt20 mb20" style="border: 1.5px solid #878787;"></EchartsBar>-->
<!-- </template>-->
<template v-for="(item,index) of echartListData">
<template v-if="item.dateShowType === 'day'">
<EchartsLine v-show="switchData[item.indexVal].checkType" :chartData="chartDataEvent" :dateShowType="item.dateShowType"
<template v-if="item && item.dateShowType === 'day'">
<EchartsLine v-show="switchData[item.indexVal].checkType" :chartData="(valData) => chartDataEvent(valData, item.fnEvent)" :dateShowType="item.dateShowType"
:lineData="item.resultData" :title="'【' + item.nodeName + '】【' + item.businessName + '】' + switchData[item.indexVal].label" class="w100 h40 mt20 mb20" style="border: 1.5px solid #878787;"></EchartsLine>
</template>
<template v-if="item.dateShowType === 'month'">
<EchartsBar v-show="switchData[item.indexVal].checkType" :chartData="chartDataEvent" :dateShowType="item.dateShowType"
<template v-if="item && item.dateShowType === 'month'">
<EchartsBar v-show="switchData[item.indexVal].checkType" :chartData="(valData) => chartDataEvent(valData, item.fnEvent)" :dateShowType="item.dateShowType"
:barData="item.resultData" :title="'【' + item.nodeName + '】【' + item.businessName + '】' + switchData[item.indexVal].label" class="w100 h40 mt20 mb20" style="border: 1.5px solid #878787;"></EchartsBar>
</template>
</template>
</div>
<!-- <template #footer>-->
<!-- <div class="dialog-footer">-->
<!-- &lt;!&ndash; <el-button type="primary" @click="submitForm">确 定</el-button>&ndash;&gt;-->
<!-- <el-button @click="cancel">取 消</el-button>-->
<!-- </div>-->
<!-- </template>-->
</div>
</template>
@@ -60,9 +46,12 @@
storageKey: '',
selectChangeList: [],
switchData: [],
disabledList: {},
selectChoose: [],
echartListData: [],
typeObj: {},
paramsVal: {},
resourceType: '',
lineDataParams: {
lineXData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
data: [120, 132, 101, 134, 90, 230, 210]
@@ -96,26 +85,37 @@
methods: {
// 下拉数据改变时触发
handleChange(eventVal) {
let paramsVal = {
nodeNames: eventVal
};
this.graPackageList(paramsVal);
this.graMonthlyList(paramsVal);
this.graEffectiveMonthlyList(paramsVal);
this.graEffectiveDailyList(paramsVal);
this.graEffectiveAvgMonthlyList(paramsVal);
this.graDailyList(paramsVal);
this.graAvgMonthlyList(paramsVal);
if (this.resourceType === '1') {
this.paramsVal = {
nodeNames: eventVal
};
} else {
this.paramsVal = {
switchNames: eventVal
};
}
let dayList = this.getDaysOfPreviousMonth();
let monthList = this.getLastMonths();
this.graDailyList(dayList);
this.graMonthlyList(monthList);
this.graPackageList(dayList);
this.graAvgMonthlyList(monthList);
this.graEffectiveDailyList(dayList);
this.graEffectiveMonthlyList(monthList);
this.graEffectiveAvgMonthlyList(dayList);
},
// 初始化
processData(list) {
let nameArr = [];
let nameListArr = [];
let showNameList = [];
list.forEach(item => {
if (!nameArr.includes(item.nodeName)) {
item.label = item.nodeName;
item.value = item.nodeName;
nameArr.push(item.nodeName);
this.resourceType = item.resourceType;
let name = item.resourceType === '1' ? item.nodeName : item.uplinkSwitch;
if (!nameArr.includes(name)) {
item.label = name;
item.value = name;
nameArr.push(name);
nameListArr.push(item);
}
});
@@ -129,89 +129,169 @@
this.form.noticeType.forEach(item => {
nameListArr.some(val => {
if (item === val.label) {
showNameList.push(val.label);
this.selectChoose.push(val);
return true;
}
});
});
let paramsVal = {
nodeNames: nameArr
};
this.graPackageList(paramsVal);
this.graMonthlyList(paramsVal);
this.graEffectiveMonthlyList(paramsVal);
this.graEffectiveDailyList(paramsVal);
this.graEffectiveAvgMonthlyList(paramsVal);
this.graDailyList(paramsVal);
this.graAvgMonthlyList(paramsVal);
if (this.resourceType === '1') {
this.paramsVal = {
nodeNames: showNameList
};
} else {
this.paramsVal = {
switchNames: showNameList
};
}
let dayList = this.getDaysOfPreviousMonth();
let monthList = this.getLastMonths();
this.graDailyList(dayList);
this.graMonthlyList(monthList);
this.graPackageList(dayList);
this.graAvgMonthlyList(monthList);
this.graEffectiveDailyList(dayList);
this.graEffectiveMonthlyList(monthList);
this.graEffectiveAvgMonthlyList(dayList);
}
},
// 95带宽值Mbps/日---图表
graDailyList(nameVal){
graDaily(nameVal).then(res => {
graDailyList(timeArr){
graDaily(Object.assign({} ,this.paramsVal, timeArr)).then(res => {
if (res && res.data && res.data.resultData) {
let dataList = Object.assign({dateShowType: 'day'},res.data, this.typeObj[1]);
this.echartListData.push(dataList);
let dataList = Object.assign({dateShowType: 'day', fnEvent: 'graDailyList'},res.data, this.typeObj[1]);
this.$set(this.echartListData, 0, dataList);
this.$set(this.disabledList, 0, dataList);
this.disabledList[1] = {disabled: false};
} else {
this.disabledList[1] = {disabled: true};
this.$set(this.echartListData, 0, {});
}
});
},
// 95带宽值Mbps/月---图表
graMonthlyList(nameVal){
graMonthly(Object.assign({dateShowType: 'month'}, {resourceType: 1, bandwidthType: 2}, nameVal)).then(res => {
graMonthlyList(timeArr){
graMonthly(Object.assign({resourceType: 1, bandwidthType: 2}, this.paramsVal, timeArr)).then(res => {
if (res && res.data && res.data.resultData) {
let dataList = Object.assign({},res.data, this.typeObj[2]);
this.echartListData.push(dataList);
let dataList = Object.assign({dateShowType: 'month', fnEvent: 'graMonthlyList'},res.data, this.typeObj[2]);
this.$set(this.echartListData, 1, dataList);
} else {
this.$set(this.echartListData, 1, {});
}
});
},
// 包端图表
graPackageList(nameVal){
graPackage(Object.assign({dateShowType: 'day'}, {resourceType: 1, bandwidthType: 3}, nameVal)).then(res => {
graPackageList(timeArr){
graPackage(Object.assign({resourceType: 1, bandwidthType: 3}, this.paramsVal, timeArr)).then(res => {
if (res && res.data && res.data.resultData) {
let dataList = Object.assign({},res.data, this.typeObj[3]);
this.echartListData.push(dataList);
let dataList = Object.assign({dateShowType: 'day', fnEvent: 'graPackageList'},res.data, this.typeObj[3]);
this.$set(this.echartListData, 2, dataList);
} else {
this.$set(this.echartListData, 2, {});
}
});
},
// 月均日95值Mbps---图表
graAvgMonthlyList(nameVal){
graAvgMonthly(nameVal).then(res => {
graAvgMonthlyList(timeArr){
graAvgMonthly(Object.assign({}, this.paramsVal, timeArr)).then(res => {
if (res && res.data && res.data.resultData) {
let dataList = Object.assign({dateShowType: 'month'},res.data, this.typeObj[4]);
this.echartListData.push(dataList);
let dataList = Object.assign({dateShowType: 'month', fnEvent: 'graAvgMonthlyList'},res.data, this.typeObj[4]);
this.$set(this.echartListData, 3, dataList);
} else {
this.$set(this.echartListData, 3, {});
}
});
},
// 有效-95带宽值Mbps/日---图表
graEffectiveDailyList(nameVal){
graEffectiveDaily(nameVal).then(res => {
graEffectiveDailyList(timeArr){
graEffectiveDaily(Object.assign({}, this.paramsVal, timeArr)).then(res => {
if (res && res.data && res.data.resultData) {
let dataList = Object.assign({dateShowType: 'day'},res.data, this.typeObj[5]);
this.echartListData.push(dataList);
let dataList = Object.assign({dateShowType: 'day', fnEvent: 'graEffectiveDailyList'},res.data, this.typeObj[5]);
this.$set(this.echartListData, 4, dataList);
} else {
this.$set(this.echartListData, 4, {});
}
});
},
// 有效-95带宽值Mbps/月----图表
graEffectiveMonthlyList(nameVal){
graEffectiveMonthly(nameVal).then(res => {
graEffectiveMonthlyList(timeArr){
graEffectiveMonthly(Object.assign({}, this.paramsVal, timeArr)).then(res => {
if (res && res.data && res.data.resultData) {
let dataList = Object.assign({dateShowType: 'month'},res.data, this.typeObj[6]);
this.echartListData.push(dataList);
let dataList = Object.assign({dateShowType: 'month', fnEvent: 'graEffectiveMonthlyList'},res.data, this.typeObj[6]);
this.$set(this.echartListData, 5, dataList);
} else {
this.$set(this.echartListData, 5, {});
}
});
},
// 有效-月均日95值Mbps----图表
graEffectiveAvgMonthlyList(nameVal){
graEffectiveAvgMonthly(nameVal).then(res => {
graEffectiveAvgMonthlyList(timeArr){
graEffectiveAvgMonthly(Object.assign({}, this.paramsVal, timeArr)).then(res => {
if (res && res.data && res.data.resultData) {
let dataList = Object.assign({dateShowType: 'day'},res.data, this.typeObj[7]);
this.echartListData.push(dataList);
let dataList = Object.assign({dateShowType: 'day', fnEvent: 'graEffectiveAvgMonthlyList'},res.data, this.typeObj[7]);
this.$set(this.echartListData, 6, dataList);
} else {
this.$set(this.echartListData, 6, {});
}
});
},
chartDataEvent(val) {
// console.log('val===',val);
return val;
chartDataEvent(valData, funcName) {
// 检查函数是否存在，避免报错
if (typeof this[funcName] === 'function') {
// 调用实际函数，并传递参数（如选中的值、当前项）
this[funcName]({startTime: valData[0], endTime: valData[1]});
} else {
console.warn(`函数 ${funcName} 未定义`);
}
},
// 获取前一个月的所有日期
getDaysOfPreviousMonth(star, end) {
const currentDate = new Date();
const currentYear = currentDate.getFullYear();
const currentMonth = currentDate.getMonth(); // 0-11 表示 1-12 月
// 计算前一个月的年份和月份
const prevMonth = currentMonth - 1;
const prevYear = prevMonth >= 0 ? currentYear : currentYear - 1;
const prevMonthActual = prevMonth >= 0 ? prevMonth : 11; // 11 表示 12 月
// 获取第一天和最后一天
const firstDay = star ? new Date(star) : new Date(prevYear, prevMonthActual, 1);
const lastDay = end ? new Date(end) : new Date(prevYear, prevMonthActual + 1, 0); // 下个月首日减 1 天
// 生成所有日期
const oneMonthDays = [];
let currentDay = firstDay;
while (currentDay <= lastDay) {
// 格式化为 YYYY-MM-DD
const formattedDate = currentDay.toISOString().split('T')[0];
oneMonthDays.push(formattedDate);
currentDay = new Date(currentDay); // 避免引用同一对象
currentDay.setDate(currentDay.getDate() + 1);
}
return {startTime: oneMonthDays[0], endTime: oneMonthDays[oneMonthDays.length - 1]};
},
// 获取前一年的月
getLastMonths() {
const threeMonths = [];
const today = new Date(); // 当前日期
const currentYear = today.getFullYear();
const currentMonth = today.getMonth(); // 月份从0开始（0=1月，11=12月）
// 循环获取前3个月（i=0: 前1个月，i=1: 前2个月，i=2: 前3个月）
for (let i = 1; i <= 12; i++) {
// 计算目标月份（当前月 - i）
let targetMonth = currentMonth - i;
let targetYear = currentYear;
// 处理月份溢出（如1月-1=12月，年份减1）
if (targetMonth < 0) {
targetMonth += 12;
targetYear -= 1;
}
// 格式化月份为两位数（如5月→'05'）
const monthStr = String(targetMonth + 1).padStart(2, '0'); // 加1是因为月份从0开始
threeMonths.unshift(`${targetYear}-${monthStr}`);
}
return {startTime: threeMonths[0], endTime: threeMonths[threeMonths.length - 1]};
},
// 监听事件
callback(result, dataVal, formVal) {

4
src/views/disRevenue/earnManage/server/relevantData.vue
View File

@@ -52,14 +52,14 @@
{label: `95宽带值Mbps/日`, prop: 'bandwidth95Daily', slotName: true, visible: type},
{label: `有效95带宽值Mbps/日`, prop: 'effectiveAvgMonthlyBandwidth95', slotName: true, visible: type},
{label: `包端带宽值Mbps/日`, prop: 'packageBandwidthDaily', slotName: true, visible: type},
{label: `流量端口`, prop: 'name', visible: !type},
{label: `流量端口`, prop: 'name', width: '550', visible: !type},
{label: `发送流量值（bytes）`, prop: 'outSpeed', visible: !type},
];
},
/** 查询角色列表 */
getList() {
this.loading = true;
relatedBandWidth(this.serverId).then(response => {
relatedBandWidth(Object.assign({}, this.queryParams, {id: this.serverId})).then(response => {
this.loading = false;
this.roleList = response && response.rows;
this.total = response && response.total || response && response.data.length;

75
src/views/disRevenue/earnManage/switch/index.vue
View File

@@ -6,12 +6,13 @@
<el-select
v-model="queryParams.uplinkSwitch"
placeholder="请选择交换机名称"
clearable>
clearable
@change="changeEvent">
<el-option
v-for="dict in uplinkList"
:key="dict.value"
:label="dict.label"
:value="dict.value"/>
v-for="item in uplinkList"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</el-form-item>
</el-col>
@@ -22,10 +23,10 @@
placeholder="请选择接口名称"
clearable>
<el-option
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.label"
:value="dict.value"/>
v-for="item in interfaceList"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</el-form-item>
</el-col>
@@ -41,12 +42,16 @@
</el-col>
<el-col :span="6">
<el-form-item label="服务器节点名称" prop="nodeName">
<el-input
<el-select
v-model="queryParams.nodeName"
placeholder="请输入服务器节点名称"
clearable
@keyup.enter="handleQuery"
/>
clearable>
<el-option
v-for="item in nodeNameList"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
@@ -100,13 +105,19 @@
<template #tempType="{ row, column }">
<dict-tag :options="dict.type.rm_topology_type" :value="row.interfaceLinkDeviceType"/>
</template>
<template #tempDay="{ valueKey, row, column }">
<span v-if="row && row[valueKey]">{{row[valueKey]}}/{{row.createTime}}</span>
</template>
<template #tempMonth="{ valueKey, row, column }">
<span v-if="row && row[valueKey]">{{row[valueKey]}}/{{row.createTime.slice(0, 7)}}</span>
</template>
</TableList>
</div>
</template>
<script setup>
import {listBandWidth, recalBandWidth} from "@/api/disRevenue/earnManage"
import {listAllResourList} from "@/api/disRevenue/resource"
import {listAllResourList,resNameBtType, postInterFaceName} from "@/api/disRevenue/resource"
import EchartsLine from "@/components/echartsList/line.vue";
import TableList from "@/components/table/index.vue";
export default {
@@ -119,6 +130,8 @@
loading: true,
showSearch: true,
uplinkList:[], // 交换机名称
interfaceList:[], // 接口名称
nodeNameList:[], // 服务器节点名称
// 列显隐信息
columns: {
id: { label: `ID`, visible: false },
@@ -129,13 +142,13 @@
slotHeaderName: '不同的类型统计方式不一样，当类型是服务器时，使用的是接口的接收流量，95带宽值Mbs/日和95带宽值Mbs/月统计的是交换机接口的接收流量；当类型是机房出口的时候，95带宽值Mbs/日和95带宽值Mbs/月统计的是交换机接口的发送流量', visible: true },
businessId: {label: `业务代码`},
businessName: {label: `业务名称`},
bandwidth95Daily: { label: `95宽带值Mbps/日`, visible: true },
bandwidth95Monthly: { label: `95宽带值Mbps/月`, visible: true },
bandwidth95Daily: { label: `95宽带值Mbps/日`, slotName: 'tempDay', visible: true },
bandwidth95Monthly: { label: `95宽带值Mbps/月`, slotName: 'tempMonth', visible: true },
nodeName: { label: `服务器节点名称`},
avgMonthlyBandwidth95: {label: `月均日95值Mbps`},
effectiveBandwidth95Daily: {label: `有效95带宽值Mbps/日`},
effectiveBandwidth95Monthly: {label: `有效95带宽值Mbps/月`},
effectiveAvgMonthlyBandwidth95: {label: `有效月均日95值Mbps`},
avgMonthlyBandwidth95: {label: `月均日95值Mbps`, slotName: 'tempDay'},
effectiveBandwidth95Daily: {label: `有效95带宽值Mbps/日`,slotName: 'tempDay'},
effectiveBandwidth95Monthly: {label: `有效95带宽值Mbps/月`, slotName: 'tempMonth',},
effectiveAvgMonthlyBandwidth95: {label: `有效月均日95值Mbps`, slotName: 'tempDay'},
createTime: { label: `创建时间`},
lastModifyTime: { label: `修改时间`}
},
@@ -192,9 +205,27 @@
})
},
fnSelectAllName() {
listAllResourList({resourceType: 2}).then(res => {
resNameBtType({resourceType: 2}).then(res => {
this.uplinkList = res && res.map(item => {
return Object.assign({label: item.resourceName, value: item.resourceName});
return Object.assign({label: item.resourceName, value: item.resourceName, ipAddress: item.ipAddress});
});
});
resNameBtType({resourceType: 1}).then(res => {
this.nodeNameList = res && res.map(item => {
return Object.assign({label: item.resourceName, value: item.resourceName, ipAddress: item.ipAddress});
});
});
},
changeEvent(val){
let params = {};
this.uplinkList.find(item => {
if (item.label === val) {
params = {switchIp: item.ipAddress};
}
});
postInterFaceName(Object.assign({},{resourceType: 2}, params)).then(res => {
this.interfaceList = res && res.map(item => {
return Object.assign({label: item.interfaceName, value: item.interfaceName});
});
});
},

2
src/views/disRevenue/earnManage/switch/switchRelevantData.vue
View File

@@ -62,7 +62,7 @@
/** 查询角色列表 */
getList() {
this.loading = true;
relatedBandWidth(this.switchId).then(response => {
relatedBandWidth(Object.assign({}, this.queryParams, {id: this.switchId})).then(response => {
this.loading = false;
this.roleList = response && response.rows;
this.total = response && response.total || response && response.data.length;

2
src/views/disRevenue/resource/group/details.vue
View File

@@ -13,7 +13,7 @@
data() {
return {
ruleForm: {},
formList: {},
formList: [],
paramsData: {}
}
},

18
src/views/disRevenue/resource/register/handle.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="app-container">
<Form :formList="formList" :ruleFormData="ruleForm" @fnClick="callback"></Form>
<Form :formList="formList" :config="{labelWidth: '140px'}" :ruleFormData="ruleForm" @fnClick="callback"></Form>
</div>
</template>
@@ -41,23 +41,19 @@
controls: {
id: {label: 'ID',hidden: true},
hardwareSn: {label: '硬件SN', span: 12, type: 'input',
disabled: objVal && objVal.id ? true : false, rules: [{required: true, message: '请输入硬件SN', trigger: 'blur'}]},
disabled: objVal && objVal.id ? true : false, required: true},
resourceName: {label: '资源名称', span: 12, type: 'input',required: true},
resourceType: {label: '资源类型', span: 12, type: 'radio', options: this.dict.type.rm_register_resource_type},
ipAddress: {label: 'IP地址', span: 12, type: 'input',required: true, disabled: objVal && objVal.registrationStatus === '1' ? true : false},
protocol: {label: '协议', span: 12, type: 'radio', options: this.dict.type.rm_register_protocol, required: true},
resourcePort: {label: '端口', span: 12, type: 'input', rules: [{required: true, message: '请输入硬件SN', trigger: 'blur'}],disabled: objVal && objVal.registrationStatus === '1' ? true : false},
resourcePort: {label: '端口', span: 12, type: 'input',required: true, disabled: objVal && objVal.registrationStatus === '1' ? true : false},
// otherPortName: {label: ' ', span: 4, type: 'input',
// hidden: objVal && objVal.resourcePort === '2' ? false : true},
snmpDetect: {label: 'SNMP探测', span: 12, type: 'radio', eventName: 'change',required: true, options: this.dict.type.rm_register_snmp_detect},
resourceVersion: {label: 'SNMP版本', span: 12, type: 'radio',required: true,
options: this.dict.type.rm_register_version,hidden: objVal && objVal.snmpDetect === '1' ? false : true},
rwPermission: {label: '读写权限', span: 12, type: 'radio',
options: this.dict.type.rm_register_permission,hidden: objVal && objVal.snmpDetect === '1' ? false : true},
securityLevel: {label: '安全级别', span: 12, type: 'radio',
options: this.dict.type.rm_register_security_level,hidden: objVal && objVal.id ? false : true},
encryption: {label: '加密方式', span: 12, type: 'radio',
options: this.dict.type.rm_register_encryption,hidden: objVal && objVal.id ? false : true},
resourceVersion: {label: 'SNMP版本', span: 12, type: 'radio',required: true, options: this.dict.type.rm_register_version,hidden: objVal && objVal.snmpDetect === '1' ? false : true},
rwPermission: {label: '读写权限', span: 12, type: 'radio', options: this.dict.type.rm_register_permission,hidden: objVal && objVal.snmpDetect === '1' ? false : true},
securityLevel: {label: '安全级别', span: 12, type: 'radio', options: this.dict.type.rm_register_security_level,hidden: objVal && objVal.id ? false : true},
encryption: {label: '加密方式', span: 12, type: 'radio', options: this.dict.type.rm_register_encryption,hidden: objVal && objVal.id ? false : true},
teamName: {label: '团体名称', span: 12, type: 'input', hidden: objVal && objVal.snmpDetect === '1' ? false : true,disabled: objVal && objVal.registrationStatus === '1' ? true : false},
snmpCollectAddr: {label: 'SNMP采集地址', span: 12, type: 'input',required: true, hidden: objVal && objVal.snmpDetect === '1' ? false : true, disabled: objVal && objVal.registrationStatus === '1' ? true : false},
resourceUserName: {label: '用户名', span: 12, type: 'input', hidden: objVal && objVal.id ? false : true, disabled: objVal && objVal.registrationStatus === '1' ? true : false},

104
src/views/disRevenue/resource/resMonitor/details.vue Normal file
View File

@@ -0,0 +1,104 @@
<template>
<div class="app-container">
<Form :formList="formList" :ruleFormData="ruleForm" @fnClick="callback"></Form>
</div>
</template>
<script setup>
import Form from '@/components/form/index.vue';
import {listAllBusinessList, calculateAvg, getBandWidth, updateBandWidth} from "@/api/disRevenue/earnManage"
import {listAllResourList} from "@/api/disRevenue/resource"
export default {
name: 'ResMonitorDetails',
components: {Form},
dicts: ['rm_topology_type', 'rm_register_online_state', 'rm_register_resource_type'],
data() {
return {
ruleForm: {},
formList: [],
paramsData: {}
}
},
created() {
// this.paramsData = this.$route && this.$route.query;
this.fnFormList();
// this.switchList();
},
methods: {
// formList集合
fnFormList() {
this.formList = [{
config: {title: '基本信息'},
controls: {
id: {label: 'ID',hidden: true},
hardwareSn: {label: '硬件SN', span: 12, type: 'input',disabled: true},
resourceType: {label: '资源类型', span: 12, type: 'select',disabled: true, options: this.dict.type.rm_register_resource_type},
resourceName: {label: '资源名称', span: 12, type: 'input', disabled: true},
ipAddress: {label: 'IP地址', span: 12, type: 'input',disabled: true},
onlineStatus: {label: '在线状态', span: 12, type: 'select',disabled: true, options: this.dict.type.rm_register_online_state},
switchName: {label: '关联监控模版', span: 12, type: 'select',disabled: true},
resourceGroup: {label: '所属资源组', span: 12, type: 'select',disabled: true},
cpu: {label: 'CPU使用率%', span: 12, type: 'input',disabled: true},
neicun: {label: '内存使用率%', span: 12, type: 'input',disabled: true},
gaojing: {label: '未处理告警数', span: 12, type: 'input',disabled: true},
}
}];
},
// 获取交换机下拉
switchList() {
listAllResourList({resourceType: this.paramsData.resourceType}).then(val => {
this.formList[0].controls.nodeName['options'] = val && val.map(item => {
return Object.assign({label: item.resourceName, value: item.resourceName});
});
});
listAllBusinessList().then(val => {
this.formList[0].controls.businessName['options'] = val && val.data.map(item => {
return Object.assign({label: item.businessName, value: item.id});
});
});
},
// 监听事件
callback(result, dataVal, formVal) {
if (result && result.fnCode) {
switch (result.fnCode) {
case 'businessName':
if (dataVal) {
formVal.options.forEach(item => {
if (item.value === dataVal) {
this.$set(this.ruleForm, 'businessName', item.label);
}
});
this.$set(this.ruleForm, 'code', dataVal);
}
break;
case 'submit':
dataVal['resourceType'] = this.paramsData.resourceType;
calculateAvg(dataVal).then(response => {
this.$modal.msgSuccess(response.msg);
if (this.paramsData && this.paramsData.resourceType === '1') {
this.$router.push("/earnManage/server");
}
// else {
// this.$router.push("/disRevenue/earnManage/switch");
// }
}).catch(() => {
this.$modal.msgError("操作失败")
});
break;
case 'cancle':
if (this.paramsData && this.paramsData.resourceType === '1') {
this.$router.push("/earnManage/server");
}
// else {
// this.$router.push("/disRevenue/earnManage/switch");
// }
break;
default:
}
}
}
}
}
</script>
<style>
</style>

8
src/views/disRevenue/resource/resMonitor/index.vue
View File

@@ -234,13 +234,9 @@
callback(result, rowData, selectChange) {
if (result && result.fnCode) {
switch (result.fnCode) {
case 'add':
case 'details':
this.$router.push({
path:'/disRevenue/resource/topology/edit/index'});
break;
case 'edit':
this.$router.push({
path:'/disRevenue/resource/topology/edit/index',
path:'/disRevenue/resource/resMonitor/details/index',
query:{
id: rowData.id
}

5
src/views/disRevenue/resource/topology/details.vue
View File

@@ -15,7 +15,7 @@
return {
loading: false,
ruleForm: {},
formList: {},
formList: [],
paramsData: {},
switchNameList: [],
serverNameList: [],
@@ -56,7 +56,6 @@
this.formList[0].controls.switchName['options'] = val && val.map(item => {
if (this.paramsData && this.paramsData.id) {
if (item.resourceName === this.ruleForm.switchName) {
console.log('ruleForm===',this.ruleForm);
this.fnInterFaceNameList({switchIp: item.ipAddress});
}
}
@@ -80,7 +79,7 @@
this.formList[0].controls.serverName['options'] = val && val.map(item => {
if (this.paramsData && this.paramsData.id) {
if (item.resourceName === this.ruleForm.serverName) {
this.fnInterFaceNameList({serverIp: item.ipAddress});
this.fnServerPortList({serverIp: item.ipAddress});
}
}
return Object.assign({label: item.resourceName, value: item.resourceName});

2
src/views/index.vue
View File

@@ -77,7 +77,7 @@ export default {
hidAxisLabel: true,
hidSplitLine: true,
name: ' ',
lineData: ['业务名称1', '业务名称2', '业务名称3', '业务名称4', '业务名称5', '业务名称6', '业务名称7', '业务名称8', '业务名称9', '业务名称10'],
linexData: ['业务名称1', '业务名称2', '业务名称3', '业务名称4', '业务名称5', '业务名称6', '业务名称7', '业务名称8', '业务名称9', '业务名称10'],
data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 10]
},
dataList: [{

2
src/views/sync/problemRecord/details.vue
View File

@@ -20,7 +20,7 @@
ruleForm: {
issueType: []
},
formList: {},
formList: [],
paramsData: {}
}
},