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-01 18:33:42 +08:00
parent 5c5f144e60
commit 8451b074f6
8 changed files with 172 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -91,7 +91,7 @@
{
type: dataXY && dataXY.yAxis ? 'category' :'value',
name: dataXY.name || '单位Mbps',
inverse: true,
inverse: dataXY && dataXY.yAxis ? true : false,
// 去掉y轴线
axisLine: { show: false },
// 去掉y轴刻度线

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

@@ -88,9 +88,9 @@
{
data: dataXY.data,
type: 'line',
areaStyle: {
color: 'rgba(140, 158, 217, 1)'
}
// areaStyle: { // 阴影
// color: 'rgba(140, 158, 217, 1)'
// }
}
]
};

10
src/components/table/index.vue
View File

@@ -11,7 +11,7 @@
</el-row>
<!-- 表格数据 -->
<el-table v-loading="loading" :data="tableList" ref="selChangeList" @selection-change="handleSelectionChange">
<el-table-column v-if="!config && config.colHiddenCheck" type="selection" width="55" align="center" />
<el-table-column v-if="!(config && config.colHiddenCheck)" type="selection" width="55" align="center" />
<template v-for="(column, key, index) of columns">
<el-table-column :label="column.label" :key="key" :prop="key" :width="column.width" min-width="100px" v-if="column && column.visible" align="center" :show-overflow-tooltip="true">
<!-- 插槽 自定义列表表头数据格式 -->
@@ -27,6 +27,7 @@
<!-- 传递行数据、行索引等信息到父组件的插槽 -->
<slot
:name="column.slotName"
:valueKey="key"
:row="scope.row"
:rowIndex="scope.$index"
:column="column"
@@ -102,6 +103,7 @@
/** 多选框选中数据 */
handleSelectionChange(selection) {
if (this.config && this.config['tableKey']) {
this.selectList = [];
this.ids = [];
if (this.isProcessing) return;
@@ -133,8 +135,12 @@
this.selectList.forEach(val => {
this.$refs.selChangeList.toggleRowSelection(val,true);
});
} else {
this.selectList = selection;
this.ids = selection.map(item => item.id);
}
},
// 提供给父组件调用的方法：返回当前表格的选中数据
// 提供给父组件调用的方法：返回当前表格的选中数据 资源监控策略和资源监控模块使用
getSelectedData() {
return {
tableKey: this.config.tableKey, // 表格唯一标识

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

@@ -3,25 +3,26 @@
<div style="height: 90px;">
<el-form ref="noticeRef" :model="form" label-width="80px">
<el-form-item label="节点名称" prop="noticeType">
<el-select v-model="form.noticeType" multiple placeholder="请选择节点名称">
<el-select v-model="form.noticeType" multiple filterable allow-create default-first-option placeholder="请选择节点名称">
<el-option
v-for="item in selectChangeList"
:key="item.id"
:label="item.nodeName"
:value="item.id"/>
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
<el-switch v-for="item of switchData" v-model="item.type" :activeText="item.name" class="mr20" />
<el-switch v-for="item of switchData" v-model="item.type" :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].type" :chartData="chartDataEvent"
:lineData="lineDataParams" :title="'【' + item.nodeName + '】【' + item.businessName + '】' + switchData[0].name" class="w100 h40 mt20 mb20" style="border: 1.5px solid #878787;"></EchartsLine>
: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].type" :chartData="chartDataEvent"
:lineData="lineDataParams" :title="'【' + item.nodeName + '】【' + item.businessName + '】' + switchData[1].name" class="w100 h40 mt20 mb20" style="border: 1.5px solid #878787;"></EchartsLine>
: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].type" :chartData="chartDataEvent"
:barData="lineDataParams" :title="'【' + item.nodeName + '】【' + item.businessName + '】' + switchData[2].name" class="w100 h40 mt20 mb20" style="border: 1.5px solid #878787;"></EchartsBar>
:barData="lineDataParams" :title="'【' + item.nodeName + '】【' + item.businessName + '】' + switchData[2].label" class="w100 h40 mt20 mb20" style="border: 1.5px solid #878787;"></EchartsBar>
</template>
</div>
<!-- <template #footer>-->
@@ -40,21 +41,18 @@
export default {
name: 'DialogView',
components: {Form, EchartsLine, EchartsBar},
dicts: ['eps_bandwidth_type'],
data() {
return {
paramsData: {},
form: {},
storageKey: '',
selectChangeList: [],
switchData: [
{id: 'ninetyFiveDay', type: true, name: '95宽带值Mbps/日'},
{id: 'ninetyFiveMonth', type: true, name: '95宽带值Mbps/月'},
{id: 'packageEnd', type: true, name: '包端宽带值Mbps/日'}
],
switchData: [],
selectChoose: [],
lineDataParams: {
lineXData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
data: [820, 932, 901, 934, 1290, 1330, 1320]
data: [120, 132, 101, 134, 90, 230, 210]
},
}
},
@@ -62,9 +60,19 @@
mounted() {
this.storageKey = this.$route.query && this.$route.query['storageKey'];
if (this.storageKey) {
this.paramsData = localStorage.getItem(this.storageKey);
if (this.paramsData) {
this.processData(JSON.parse(this.paramsData));
this.paramsData = JSON.parse(localStorage.getItem(this.storageKey));
if (this.paramsData && this.paramsData.dictList) {
this.switchData = this.paramsData.dictList.map(item => {
let obj = {
label: item.label,
value: item.value,
type: true
};
return obj;
});
}
if (this.paramsData && this.paramsData.list) {
this.processData(this.paramsData.list);
}
}
},

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

@@ -1,6 +1,6 @@
<template>
<div class="app-container pageTopForm">
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" label-width="70px" class="demo-ruleForm">
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" label-width="80px" class="demo-ruleForm">
<el-col :span="8">
<el-form-item label="节点名称" prop="nodeName">
<el-input
@@ -79,19 +79,25 @@
</el-form>
<!-- 表格数据 -->
<TableList :columns="columns" :config="config" :queryParams="queryParams" :tableList="tableList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange"></TableList>
<TableList :columns="columns" :config="config" :queryParams="queryParams" :tableList="tableList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
<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>
import EchartsLine from "@/components/echartsList/line.vue";
import EchartsBar from "@/components/echartsList/bar.vue";
import TableList from "@/components/table/index.vue";
import {listBandWidth, avgDetailMsg, recalBandWidth} from "@/api/disRevenue/earnManage"
export default {
name: 'Server',
dicts: ['eps_bandwidth_type'],
components: {TableList, EchartsLine, EchartsBar},
components: {TableList, EchartsBar},
data() {
return {
tableList: [],
@@ -105,16 +111,16 @@
uplinkSwitch: {label: `上联交换机`},
businessId: {label: `业务代码`},
businessName: {label: `业务名称`},
bandwidth95Daily: {label: `95宽带值Mbps/日`, slotHeaderName: '使用服务器的发送流量，发送流量值除以1000000', visible: true},
bandwidth95Monthly: {label: `95宽带值Mbps/月`, visible: true,
bandwidth95Daily: {label: `95宽带值Mbps/日`, slotName: 'tempDay', slotHeaderName: '使用服务器的发送流量，发送流量值除以1000000', visible: true},
bandwidth95Monthly: {label: `95宽带值Mbps/月`, visible: true, slotName: 'tempMonth',
slotHeaderName: '使用服务器的发送流量，发送流量值除以1000000；若服务器在一个自然月内有收益方式的变更，以最后一次变更的时间为开始到月末，进行该值的统计；若服务器收益方式为包端，则月底不用进行该值的计算。'},
packageBandwidthDaily: {label: `包端带宽值Mbps/日`, visible: true},
packageBandwidthDaily: {label: `包端带宽值Mbps/日`, slotName: 'tempDay', visible: true},
// customerName: {label: `设备业务客户`,visible: true},
avgMonthlyBandwidth95: {label: `月均日95值Mbps`,slotName: 'tempDay'},
effectiveBandwidth95Daily: {label: `有效95带宽值Mbps/日`, slotName: 'tempDay'},
effectiveBandwidth95Monthly: {label: `有效95带宽值Mbps/月`,slotName: 'tempMonth'},
effectiveAvgMonthlyBandwidth95: {label: `有效月均日95值Mbps`,slotName: 'tempDay'},
resourceType: {label: `创建时间`},
avgMonthlyBandwidth95: {label: `月均日95值Mbps`},
effectiveBandwidth95Daily: {label: `有效95带宽值Mbps/日`},
effectiveBandwidth95Monthly: {label: `有效95带宽值Mbps/月`},
effectiveAvgMonthlyBandwidth95: {label: `有效月均日95值Mbps`}
},
config: {
// searcherForm: [
@@ -137,9 +143,11 @@
pageNum: 1,
pageSize: 10,
total: 0,
bandwidth95Daily: [],
bandwidth95Monthly: [],
packageBandwidthDaily: [],
bandwidthType: undefined,
hardwareSn: undefined,
bandwidth95Daily: undefined,
bandwidth95Monthly: undefined,
packageBandwidthDaily: undefined,
}
}
},
@@ -153,23 +161,24 @@
/** 查询角色列表 */
getList() {
this.loading = true;
this.queryParams['resourceType'] = 1;
if (this.queryParams['bandwidth95Daily']) {
this.queryParams['startTime'] = this.queryParams['bandwidth95Daily'][0];
this.queryParams['endTime'] = this.queryParams['bandwidth95Daily'][1];
delete this.queryParams['bandwidth95Daily'];
let newParams = {...this.queryParams};
newParams['resourceType'] = 1;
if (newParams['bandwidth95Daily']) {
newParams['startTime'] = newParams['bandwidth95Daily'][0];
newParams['endTime'] = newParams['bandwidth95Daily'][1];
delete newParams['bandwidth95Daily'];
}
if (this.queryParams['bandwidth95Monthly']) {
this.queryParams['startTime'] = this.queryParams['bandwidth95Monthly'][0];
this.queryParams['endTime'] = this.queryParams['bandwidth95Monthly'][1];
delete this.queryParams['bandwidth95Monthly'];
if (newParams['bandwidth95Monthly']) {
newParams['startTime'] = newParams['bandwidth95Monthly'][0];
newParams['endTime'] = newParams['bandwidth95Monthly'][1];
delete newParams['bandwidth95Monthly'];
}
if (this.queryParams['packageBandwidthDaily']) {
this.queryParams['startTime'] = this.queryParams['packageBandwidthDaily'][0];
this.queryParams['endTime'] = this.queryParams['packageBandwidthDaily'][1];
delete this.queryParams['packageBandwidthDaily'];
if (newParams['packageBandwidthDaily']) {
newParams['startTime'] = newParams['packageBandwidthDaily'][0];
newParams['endTime'] = newParams['packageBandwidthDaily'][1];
delete newParams['packageBandwidthDaily'];
}
listBandWidth(this.queryParams).then(response => {
listBandWidth(newParams).then(response => {
this.tableList = response.rows;
this.queryParams.total = response.total;
this.loading = false;
@@ -190,10 +199,11 @@
/** 图形分析 */
graphicAnalysis(list) {
const dictTypeArr = this.dict.type.eps_bandwidth_type;
// 生成唯一 key（避免数据冲突）
const storageKey = `temp_data_${Date.now()}`;
// 1. 将数据存入 localStorage（需序列化）
localStorage.setItem(storageKey, JSON.stringify(list));
localStorage.setItem(storageKey, JSON.stringify({list: list, dictList: dictTypeArr}));
// 1. 用 Vue Router 解析目标路由的完整 URL
const routeLocation = this.$router.resolve({
name: 'DialogView',
@@ -222,15 +232,12 @@
this.$router.push({
path:'/disRevenue/earnManage/server/list/index',
query:{
id: rowData.id
id: rowData.id,
bandwidthType: rowData && rowData.bandwidthType
}
});
break;
case 'echartView':
if (selectList && selectList.length <= 0) {
this.$modal.msgWarning("请选择数据！");
return;
}
this.graphicAnalysis(selectList);
break;
case 'createData':

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

@@ -3,7 +3,11 @@
<!-- 表格数据 -->
<el-table v-loading="loading" :data="roleList">
<template v-for="(item,index) of columns">
<el-table-column :label="item.label" :prop="item.prop" :sortable="item.sortable" :width="item.width" v-if="item.visible" :show-overflow-tooltip="true"></el-table-column>
<el-table-column :label="item.label" :prop="item.prop" :sortable="item.sortable" :width="item.width" v-if="item.visible" :show-overflow-tooltip="true">
<template v-if="item.slotName" #default="scope">
<span v-if="scope.row && scope.row[item.prop]">{{scope.row[item.prop]}}/{{scope.row.createTime}}</span>
</template>
</el-table-column>
</template>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
@@ -24,15 +28,7 @@
total: 0,
serverId: '',
// 列显隐信息
columns: [
{label: `时间`, prop: 'createTime', visible: true},
{label: `业务代码`, prop: 'businessId',visible: true},
{label: `95宽带值Mbps/日`, prop: 'bandwidth95Daily', visible: true},
{label: `有效95带宽值Mbps/日`, prop: 'effectiveAvgMonthlyBandwidth95', visible: true},
{label: `包端带宽值Mbps/日`, prop: 'packageBandwidthDaily', visible: true},
{label: `流量端口`, prop: 'trafficPort', visible: true},
{label: `发送流量值（bytes）`, prop: 'sendTraffic', visible: true},
],
columns: [],
queryParams: {
pageNum: 1,
pageSize: 10
@@ -41,16 +37,32 @@
},
created() {
this.serverId = this.$route.query && this.$route.query.id;
this.columsList(this.$route.query && this.$route.query.bandwidthType);
this.getList();
},
methods: {
columsList(num) {
let type = false;
if (num === '4') {
type = true;
}
this. columns = [
{label: `时间`, prop: 'createTime', visible: !type},
{label: `业务代码`, prop: 'businessId',visible: true},
{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: `发送流量值（bytes）`, prop: 'outSpeed', visible: !type},
];
},
/** 查询角色列表 */
getList() {
this.loading = true;
relatedBandWidth(this.serverId).then(response => {
this.roleList = response.data;
this.total = response && response.total || response && response.data.length;
this.loading = false;
this.roleList = response && response.rows;
this.total = response && response.total || response && response.data.length;
})
},
goBack() {

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

@@ -1,6 +1,6 @@
<template>
<div class="app-container pageTopForm">
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" label-width="auto" class="demo-ruleForm">
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" label-width="80px" class="demo-ruleForm">
<el-col :span="6">
<el-form-item label="交换机名称" prop="uplinkSwitch">
<el-select
@@ -159,7 +159,14 @@
queryParams: {
pageNum: 1,
pageSize: 10,
total: 0
total: 0,
uplinkSwitch:undefined,
interfaceName:undefined,
hardwareSn:undefined,
nodeName:undefined,
bandwidthType:undefined,
bandwidth95Daily:undefined,
bandwidth95Monthly:undefined,
}
}
},
@@ -174,10 +181,11 @@
/** 查询角色列表 */
getList() {
this.loading = true;
this.queryParams['resourceType'] = 2;
this.queryParams['bandwidth95Daily'] = this.queryParams['bandwidth95Daily'] && this.queryParams['bandwidth95Daily'].length >1 ? this.queryParams['bandwidth95Daily'] : null;
this.queryParams['bandwidth95Monthly'] = this.queryParams['bandwidth95Monthly'] && this.queryParams['bandwidth95Monthly'].length >1 ? this.queryParams['bandwidth95Monthly'] : null;
listBandWidth(this.queryParams).then(response => {
let newParams = {...this.queryParams};
newParams['resourceType'] = 2;
newParams['bandwidth95Daily'] = newParams['bandwidth95Daily'] && newParams['bandwidth95Daily'].length >1 ? newParams['bandwidth95Daily'] : null;
newParams['bandwidth95Monthly'] = newParams['bandwidth95Monthly'] && newParams['bandwidth95Monthly'].length >1 ? newParams['bandwidth95Monthly'] : null;
listBandWidth(newParams).then(response => {
this.tableList = response.rows;
this.queryParams.total = response.total;
this.loading = false;
@@ -204,10 +212,11 @@
/** 图形分析 */
graphicAnalysis(list) {
const dictTypeArr = this.dict.type.eps_bandwidth_type;
// 生成唯一 key（避免数据冲突）
const storageKey = `temp_data_${Date.now()}`;
// 1. 将数据存入 localStorage（需序列化）
localStorage.setItem(storageKey, JSON.stringify(list));
localStorage.setItem(storageKey, JSON.stringify({list: list, dictList: dictTypeArr}));
// 1. 用 Vue Router 解析目标路由的完整 URL
const routeLocation = this.$router.resolve({
name: 'DialogView',
@@ -238,7 +247,8 @@
this.$router.push({
path:'/disRevenue/earnManage/switch/list/index',
query:{
id: rowData.id
id: rowData.id,
bandwidthType: rowData && rowData.bandwidthType
}
});
break;

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

@@ -3,7 +3,11 @@
<!-- 表格数据 -->
<el-table v-loading="loading" :data="roleList">
<template v-for="(item,index) of columns">
<el-table-column :label="item.label" :prop="item.prop" :sortable="item.sortable" :width="item.width" v-if="item.visible" :show-overflow-tooltip="true"></el-table-column>
<el-table-column :label="item.label" :prop="item.prop" :sortable="item.sortable" :width="item.width" v-if="item.visible" :show-overflow-tooltip="true">
<template v-if="item.slotName" #default="scope">
<span v-if="scope.row && scope.row[item.prop]">{{scope.row[item.prop]}}/{{scope.row.createTime}}</span>
</template>
</el-table-column>
</template>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
@@ -25,16 +29,7 @@
dateRange: [],
switchId: '',
// 列显隐信息
columns: [
{label: `时间`, prop: 'createTime', visible: true},
{label: `业务代码`, prop: 'businessId',visible: true},
{label: `95宽带值Mbps/日`, prop: 'bandwidth95Daily', visible: true},
{label: `有效95带宽值Mbps/日`, prop: 'effectiveAvgMonthlyBandwidth95', visible: true},
{label: `包端带宽值Mbps/日`, prop: 'packageBandwidthDaily', visible: true},
{label: `流量端口`, prop: 'trafficPort', visible: true},
{label: `发送流量值（bytes/s）`, prop: 'sendTraffic', visible: true},
{label: `接收流量值（bytes/s）`, prop: 'receiveTraffic', visible: true},
],
columns: [],
queryParams: {
pageNum: 1,
pageSize: 10
@@ -43,16 +38,34 @@
},
created() {
this.switchId = this.$route.query && this.$route.query.id;
this.columsList(this.$route.query && this.$route.query.bandwidthType);
this.getList();
},
methods: {
columsList(num) {
let type = false;
if (num === '4') {
type = true;
}
this. columns = [
{label: `时间`, prop: 'createTime', visible: !type},
{label: `业务代码`, prop: 'businessCode',visible: !type},
{label: `业务代码`, prop: 'businessId',visible: type},
{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: `发送流量值（bytes/s）`, prop: 'outSpeed', visible: !type},
{label: `接收流量值（bytes/s）`, prop: 'inSpeed', visible: !type},
];
},
/** 查询角色列表 */
getList() {
this.loading = true;
relatedBandWidth(this.switchId).then(response => {
this.roleList = response.data;
this.total = response && response.total || response && response.data.length;
this.loading = false;
this.roleList = response && response.rows;
this.total = response && response.total || response && response.data.length;
})
},
goBack() {