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

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

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

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

@@ -11,7 +11,7 @@
</el-row> </el-row>
<!-- 表格数据 --> <!-- 表格数据 -->
<el-table v-loading="loading" :data="tableList" ref="selChangeList" @selection-change="handleSelectionChange"> <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"> <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"> <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 <slot
:name="column.slotName" :name="column.slotName"
:valueKey="key"
:row="scope.row" :row="scope.row"
:rowIndex="scope.$index" :rowIndex="scope.$index"
:column="column" :column="column"
@@ -102,6 +103,7 @@
/** 多选框选中数据 */ /** 多选框选中数据 */
handleSelectionChange(selection) { handleSelectionChange(selection) {
if (this.config && this.config['tableKey']) {
this.selectList = []; this.selectList = [];
this.ids = []; this.ids = [];
if (this.isProcessing) return; if (this.isProcessing) return;
@@ -133,8 +135,12 @@
this.selectList.forEach(val => { this.selectList.forEach(val => {
this.$refs.selChangeList.toggleRowSelection(val,true); this.$refs.selChangeList.toggleRowSelection(val,true);
}); });
} else {
this.selectList = selection;
this.ids = selection.map(item => item.id);
}
}, },
// 提供给父组件调用的方法：返回当前表格的选中数据 // 提供给父组件调用的方法：返回当前表格的选中数据 资源监控策略和资源监控模块使用
getSelectedData() { getSelectedData() {
return { return {
tableKey: this.config.tableKey, // 表格唯一标识 tableKey: this.config.tableKey, // 表格唯一标识

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

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

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

@@ -3,7 +3,11 @@
<!-- 表格数据 --> <!-- 表格数据 -->
<el-table v-loading="loading" :data="roleList"> <el-table v-loading="loading" :data="roleList">
<template v-for="(item,index) of columns"> <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> </template>
</el-table> </el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
@@ -24,15 +28,7 @@
total: 0, total: 0,
serverId: '', serverId: '',
// 列显隐信息 // 列显隐信息
columns: [ 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},
],
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10 pageSize: 10
@@ -41,16 +37,32 @@
}, },
created() { created() {
this.serverId = this.$route.query && this.$route.query.id; this.serverId = this.$route.query && this.$route.query.id;
this.columsList(this.$route.query && this.$route.query.bandwidthType);
this.getList(); this.getList();
}, },
methods: { 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() { getList() {
this.loading = true; this.loading = true;
relatedBandWidth(this.serverId).then(response => { relatedBandWidth(this.serverId).then(response => {
this.roleList = response.data;
this.total = response && response.total || response && response.data.length;
this.loading = false; this.loading = false;
this.roleList = response && response.rows;
this.total = response && response.total || response && response.data.length;
}) })
}, },
goBack() { goBack() {

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

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

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

@@ -3,7 +3,11 @@
<!-- 表格数据 --> <!-- 表格数据 -->
<el-table v-loading="loading" :data="roleList"> <el-table v-loading="loading" :data="roleList">
<template v-for="(item,index) of columns"> <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> </template>
</el-table> </el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
@@ -25,16 +29,7 @@
dateRange: [], dateRange: [],
switchId: '', switchId: '',
// 列显隐信息 // 列显隐信息
columns: [ 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},
],
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10 pageSize: 10
@@ -43,16 +38,34 @@
}, },
created() { created() {
this.switchId = this.$route.query && this.$route.query.id; this.switchId = this.$route.query && this.$route.query.id;
this.columsList(this.$route.query && this.$route.query.bandwidthType);
this.getList(); this.getList();
}, },
methods: { 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() { getList() {
this.loading = true; this.loading = true;
relatedBandWidth(this.switchId).then(response => { relatedBandWidth(this.switchId).then(response => {
this.roleList = response.data;
this.total = response && response.total || response && response.data.length;
this.loading = false; this.loading = false;
this.roleList = response && response.rows;
this.total = response && response.total || response && response.data.length;
}) })
}, },
goBack() { goBack() {