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

业务95值计算、服务器收益和交换机收益的图形分析、自定义列、修复bug

Browse Source
This commit is contained in:
康冉冉
2025-10-31 20:38:21 +08:00
parent d7963d69a5
commit d7dd17a38b
47 changed files with 667 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files

226
src/views/earnManage/server/analysisChart.vue
View File

@@ -2,9 +2,9 @@
<div style="height: calc(100vh)!important">
<div style="height: 90px;">
<el-form ref="noticeRef" :model="form" label-width="80px">
<el-form-item label="节点名称" prop="noticeType">
<el-form-item label="ClientID" prop="clientId">
<!-- allow-create default-first-option： 搜索下拉框中没有的数据并展示查询 -->
<el-select v-model="form.noticeType" multiple filterable placeholder="请选择节点名称" @change="handleChange">
<el-select v-model="form.clientId" multiple filterable placeholder="请选择ClientID" @change="handleChange">
<el-option
v-for="item in selectChangeList"
:key="item.value"
@@ -19,26 +19,31 @@
<el-date-picker
v-model="timeList[item.value]"
:style="{width: '300px!important', marginRight: '10px'}"
:type="item.value === '1' ? 'datetimerange' : 'monthrange'"
:type="item.value === '1' ? 'daterange' : 'monthrange'"
:start-placeholder="item.value === '2' ? '开始日期' : '开始时间'"
:end-placeholder="item.value === '2' ? '结束日期' : '结束时间'"
range-separator="至"
:format="item.value === '2' ? 'yyyy-MM' : 'yyyy-MM-dd HH:mm:ss'"
:value-format="item.value === '2' ? 'yyyy-MM' : 'yyyy-MM-dd HH:mm:ss'"
:default-time="item.value === '1' ? ['12:00:00', '12:00:00'] : null"
:format="item.value === '2' ? 'yyyy-MM' : 'yyyy-MM-dd'"
:value-format="item.value === '2' ? 'yyyy-MM' : 'yyyy-MM-dd'"
@change="(val) => dateChange(val, item.value)"/>
</template>
</div>
<div style="height: calc(100vh - 160px);overflow: scroll;">
<template v-for="(item,index) of echartListData">
<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.titleList + switchData[item.indexVal].label" class="w100 h40 mt20 mb20" style="border: 1.5px solid #878787;"></EchartsLine>
</template>
<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.titleList + switchData[item.indexVal].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 && item.dateShowType === 'day'">-->
<!-- <EchartsLine v-show="switchData[item.indexVal].checkType" :chartData="(valData) => chartDataEvent(valData, item.fnEvent)" :dateShowType="item.dateShowType"-->
<!-- :lineData="item.resultData" :title="item.titleList + switchData[item.indexVal].label" class="w100 h40 mt20 mb20" style="border: 1.5px solid #878787;"></EchartsLine>-->
<!-- </template>-->
<!-- <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.titleList + switchData[item.indexVal].label" class="w100 h40 mt20 mb20" style="border: 1.5px solid #878787;"></EchartsBar>-->
<!-- </template>-->
<!-- </template>-->
<template v-for="(item,index) of echartListData['day']">
<EchartsLine v-show="switchData[item.indexVal].checkType" :lineData="item" :title="item.title" class="w100 mt20 mb20" style="border: 1.5px solid #878787;height:60%;"></EchartsLine>
</template>
<template v-for="(item,index) of echartListData['month']">
<EchartsLine v-show="switchData[item.indexVal].checkType" :lineData="item" :title="item.title " class="w100 mt20 mb20" style="border: 1.5px solid #878787;height:60%;"></EchartsLine>
</template>
</div>
</div>
@@ -48,8 +53,8 @@
import Form from '@/components/form/index.vue';
import EchartsLine from "@/components/echartsList/line.vue";
import EchartsBar from "@/components/echartsList/bar.vue";
import {graPackage, graMonthly, graEffectiveMonthly, graEffectiveDaily, graEffectiveAvgMonthly, graDaily, graAvgMonthly} from "@/api/disRevenue/earnManage"
import {listAllResourList} from "@/api/disRevenue/resource";
import {graPackage, graMonthly, graEffectiveMonthly, graEffectiveDaily, graEffectiveAvgMonthly, graDaily, graAvgMonthly, serverGraphDaily, serverGraphMonth, switchGraphDaily, switchGraphMonth} from "@/api/disRevenue/earnManage"
import {listAllResourList, getRegistList} from "@/api/disRevenue/resource";
export default {
name: 'AnalysisChart',
components: {Form, EchartsLine, EchartsBar},
@@ -59,7 +64,7 @@
type: String,
default: "1000"
},
noticeType: {
clientId: {
type: Array,
default: []
}
@@ -81,15 +86,27 @@
storageKey: '',
selectChangeList: [],
switchData: [],
disabledList: {},
echartListData: [],
echartListData: {},
typeObj: {},
paramsVal: {},
resourceType: '',
lineDataParams: {
lineXData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sa', 'Sun'],
data: [120, 132, 101, 134, 90, 230, 210]
echartData: {
title: 'tux',
titleSubtext: {subtext: '', bottom: '14%', x: '50%', textAlign: 'center', subtextStyle: {fontWeight: 'bold', fontSize: 14}},
yAxisName: ' ',
content: {},
legend: {orient: 'vertical',bottom: '0%', formatter: true},
gridTop: '60px',
gridBotm: '25%',
hiddenTime: true,
lineXData: [],
dataList: [
{name: '发送流量值', data: []},
{name: '金山API记录的发送流量值', data: []},
{name: '95带宽值/日', areaStyleNone: true, data: []},
]
},
lineDataParams: {chart: {}},
}
},
created() {},
@@ -121,27 +138,21 @@
}
},
fnNodeName(type){
listAllResourList({resourceType: type}).then(val => {
this.selectChangeList = val && val.map(item => {
return Object.assign({label: item.resourceName, value: item.resourceName});
getRegistList({resourceType: type}).then(val => {
this.selectChangeList = val && val.data.map(item => {
return Object.assign({label: item.clientId, value: item.clientId});
});
});
},
// 下拉数据改变时触发
handleChange(eventVal) {
if (this.resourceType === 1) {
this.paramsVal = {
nodeNames: eventVal
};
} else {
this.paramsVal = {
switchNames: eventVal
};
}
this.echartListData = [];
this.paramsVal = {
clientIds: eventVal.toString()
};
this.echartListData = {};
this.paramsVal['calculationMode'] = this.activeName;
let dayList = this.getDaysOfPreviousMonth();
let monthList = this.getLastMonths();
let dayList = {startTime: this.timeList['1'][0], endTime: this.timeList['1'][1]};
let monthList = {startTime: this.timeList['2'][0], endTime: this.timeList['2'][1]};
this.graDailyList(dayList);
this.graMonthlyList(monthList);
// this.graPackageList(dayList);
@@ -152,7 +163,20 @@
},
// 时间变化时
dateChange(val, idNum){
console.log('id=====',idNum, 'val===',val);
// console.log('id=====',idNum, 'val===',val);
this.paramsVal['calculationMode'] = this.activeName;
let timeStr = {startTime: val[0], endTime: val[1]};
if (idNum === '1') {
this.timeList['1'] = val;
if (this.paramsVal && this.paramsVal.clientIds) {
this.graDailyList(timeStr);
}
} else if (idNum === '2') {
this.timeList['2'] = val;
if (this.paramsVal && this.paramsVal.clientIds) {
this.graMonthlyList(timeStr);
}
}
},
// 初始化
processData(list) {
@@ -160,42 +184,56 @@
let nameListArr = [];
let showNameList = [];
list.forEach(item => {
let name = this.resourceType === 1 ? item.nodeName : item.uplinkSwitch;
if (!nameArr.includes(name)) {
item.label = name;
item.value = name;
nameArr.push(name);
nameListArr.push(item);
if (this.paramsData && this.paramsData.resourceType === '1') {
if (item && item.clientId) {
let name = item.clientId;
if (!nameArr.includes(name)) {
item.label = name;
item.value = name;
nameArr.push(name);
nameListArr.push(item);
}
}
} else if (this.paramsData && this.paramsData.resourceType === '2') {
if (item && item.serverClientId) {
let name = item.serverClientId;
if (!nameArr.includes(name)) {
item.label = name;
item.value = name;
nameArr.push(name);
nameListArr.push(item);
}
}
}
});
if (this.noticeType && this.noticeType.length > 0) {
this.form.noticeType = this.noticeType;
if (this.clientId && this.clientId.length > 0) {
this.form.clientId = this.clientId;
} else {
if (nameArr && nameArr.length > 0) {
if (nameListArr.length >=2) {
this.form.noticeType = [nameListArr[0].label, nameListArr[1].label];
this.form.clientId = [nameListArr[0].label, nameListArr[1].label];
} else {
this.form.noticeType = [nameListArr[0].label];
this.form.clientId = [nameListArr[0].label];
}
}
}
showNameList = this.form.noticeType;
this.echartListData = [];
showNameList = this.form.clientId;
this.echartListData = {};
let dayList = this.getBeforDay();
let monthList = this.getLastMonths(2);
this.timeList['1'] = [dayList.startTime, dayList.endTime];
this.timeList['2'] = [monthList.startTime, monthList.endTime];
if (showNameList && showNameList.length > 0) {
if (this.resourceType === 1) {
this.paramsVal = {
nodeNames: showNameList
clientIds: showNameList.toString()
};
} else {
this.paramsVal = {
switchNames: showNameList
clientIds: showNameList.toString()
};
}
this.paramsVal['calculationMode'] = this.activeName;
let dayList = this.getBeforDay();
let monthList = this.getLastMonths(2);
this.timeList['1'] = [dayList.startTime + ' 00:00:00', dayList.endTime + ' 00:00:00'];
this.timeList['2'] = [monthList.startTime, monthList.endTime];
this.graDailyList(dayList);
this.graMonthlyList(monthList);
// this.graPackageList(dayList);
@@ -205,38 +243,70 @@
// this.graEffectiveAvgMonthlyList(dayList);
}
},
// 95带宽值Mbps/日---图表
// 95带宽值Mbps/日---图表 serverGraphDaily, serverGraphMonth, switchGraphDaily, switchGraphMonth
graDailyList(timeArr){
graDaily(Object.assign({resourceType: this.resourceType, bandwidthType: 1} ,this.paramsVal, timeArr)).then(res => {
let fnType = serverGraphDaily;
if (this.resourceType === 2) {
fnType = switchGraphDaily;
}
let newChartData = JSON.parse(JSON.stringify(this.echartData));
fnType(Object.assign({} ,this.paramsVal, timeArr)).then(res => {
if (res && res.data && res.data.length > 0) {
let chartList = [];
res.data.forEach((item, index) => {
item.titleList = this.resourceType === 1 ? '【' + item.nodeName + '】【' + item.businessName + '】' : '【' + item.nodeName + '】【' + item.interfaceName + '】【' + item.businessName + '】';
item.resultData['hiddenTime'] = true;
let dataList = Object.assign({dateShowType: 'day', fnEvent: 'graDailyList'},item, this.typeObj[1]);
this.$set(this.echartListData, index * 7, dataList);
this.$set(this.disabledList, index * 7, dataList);
let outContent = `最后一个值：${item && item.other && item.other.lastOutSpeedGb ? item.other.lastOutSpeedGb + 'G' : '0'} 平均值：${item && item.other && item.other.avgOutSpeedGb ? item.other.avgOutSpeedGb + 'G' : '0'} 最大值：${item && item.other && item.other.maxOutSpeedGb ? item.other.maxOutSpeedGb + 'G' : '0'}`;
let inContent = `最后一个值：${item && item.other && item.other.lastInSpeedGb ? item.other.lastInSpeedGb + 'G' : '0'} 平均值：${item && item.other && item.other.avgInSpeedGb ? item.other.avgInSpeedGb + 'G' : '0'} 最大值：${item && item.other && item.other.maxInSpeedGb ? item.other.maxInSpeedGb + 'G' : '0'}`;
let kdContent = `(${item && item.percentile95 ? item.percentile95 + 'mbit' : '0'} out)`;
newChartData.title = item && item.name;
newChartData.yAxisName = item && item.other && item.other.recommendedUnit ? '单位' + item.other.recommendedUnit : ' ';
newChartData.titleSubtext.subtext = item && item.timeRange || ' ';
newChartData.content[newChartData.dataList[0].name] = outContent;
newChartData.content[newChartData.dataList[1].name] = inContent;
newChartData.content[newChartData.dataList[2].name] = kdContent;
newChartData.lineXData = item && item.xData || [];
newChartData.dataList[0].data = item && item.yData && item.yData['netOutSpeedData'] || [];
newChartData.dataList[1].data = item && item.yData && item.yData['netInSpeedData'] || [];
newChartData.dataList[2].data = item && item.yData && item.yData['percentile95'] || [];
let dataList = Object.assign({}, newChartData, this.typeObj[1]);
chartList.push(dataList);
});
this.disabledList[1] = {disabled: false};
this.$set(this.echartListData, 'day', chartList);
} else {
this.disabledList[1] = {disabled: true};
this.$set(this.echartListData, 0, {});
this.$set(this.echartListData, 'day', []);
}
});
},
// 95带宽值Mbps/月---图表
// 95带宽值Mbps/月---图表 serverGraphDaily, serverGraphMonth, switchGraphDaily, switchGraphMonth
graMonthlyList(timeArr){
graMonthly(Object.assign({resourceType: this.resourceType, bandwidthType: 2}, this.paramsVal, timeArr)).then(res => {
let fnType = serverGraphMonth;
if (this.resourceType === 2) {
fnType = switchGraphMonth;
}
let newChartData = JSON.parse(JSON.stringify(this.echartData));
newChartData.dataList[newChartData.dataList.length - 1].name = '95带宽值/月';
fnType(Object.assign({}, this.paramsVal, timeArr)).then(res => {
if (res && res.data && res.data.length > 0) {
let chartList = [];
res.data.forEach((item, index) => {
item.titleList = this.resourceType === 1 ? '【' + item.nodeName + '】【' + item.businessName + '】' : '【' + item.nodeName + '】【' + item.interfaceName + '】【' + item.businessName + '】';
item.resultData['hiddenTime'] = true;
let dataList = Object.assign({dateShowType: 'month', fnEvent: 'graMonthlyList'},item, this.typeObj[2]);
this.$set(this.echartListData, index * 7 + 1, dataList);
let outContent = `最后一个值：${item && item.other && item.other.lastOutSpeedGb ? item.other.lastOutSpeedGb + 'G' : '0'} 平均值：${item && item.other && item.other.avgOutSpeedGb ? item.other.avgOutSpeedGb + 'G' : '0'} 最大值：${item && item.other && item.other.maxOutSpeedGb ? item.other.maxOutSpeedGb + 'G' : '0'}`;
let inContent = `最后一个值：${item && item.other && item.other.lastInSpeedGb ? item.other.lastInSpeedGb + 'G' : '0'} 平均值：${item && item.other && item.other.avgInSpeedGb ? item.other.avgInSpeedGb + 'G' : '0'} 最大值：${item && item.other && item.other.maxInSpeedGb ? item.other.maxInSpeedGb + 'G' : '0'}`;
let kdContent = `(${item && item.percentile95 ? item.percentile95 + 'mbit' : '0'} out)`;
newChartData.title = item && item.name;
newChartData.yAxisName = item && item.other && item.other.recommendedUnit ? '单位' + item.other.recommendedUnit : ' ';
newChartData.titleSubtext.subtext = item && item.timeRange || ' ';
newChartData.content[newChartData.dataList[0].name] = outContent;
newChartData.content[newChartData.dataList[1].name] = inContent;
newChartData.content[newChartData.dataList[2].name] = kdContent;
newChartData.lineXData = item && item.xData || [];
newChartData.dataList[0].data = item && item.yData && item.yData['netOutSpeedData'] || [];
newChartData.dataList[1].data = item && item.yData && item.yData['netInSpeedData'] || [];
newChartData.dataList[2].data = item && item.yData && item.yData['percentile95'] || [];
let dataList = Object.assign({}, newChartData, this.typeObj[2]);
chartList.push(dataList);
});
// let dataList = Object.assign({dateShowType: 'month', fnEvent: 'graMonthlyList'},res.data, this.typeObj[2]);
// this.$set(this.echartListData, 1, dataList);
this.$set(this.echartListData, 'month', chartList);
} else {
this.$set(this.echartListData, 1, {});
this.$set(this.echartListData, 'month', []);
}
});
},
@@ -338,8 +408,8 @@
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} 00:00:00`;
startData = `${year}-${month}-${prevDay}`;
endData = `${year}-${month}-${day}`;
return {startTime: startData, endTime: endData};
},
// 获取前一个月的所有日期