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

图形监控优化、业务95值计算和交换机收益管理模块开发

Browse Source
This commit is contained in:
康冉冉
2025-10-29 18:21:41 +08:00
parent 1aa53d7d90
commit 9cc43a8700
20 changed files with 1010 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/RightToolbar/index.vue
View File

@@ -11,7 +11,7 @@
<el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/>
<el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'">
<el-button size="mini" circle icon="el-icon-menu" />
<el-dropdown-menu slot="dropdown">
<el-dropdown-menu slot="dropdown" style="max-height: calc(100% - 320px); overflow: auto;">
<!-- 全选/反选 按钮 -->
<el-dropdown-item>
<el-checkbox :indeterminate="isIndeterminate" v-model="isChecked" @change="toggleCheckAll"> 列展示 </el-checkbox>
@@ -151,17 +151,25 @@ export default {
if (Array.isArray(this.columns)) {
this.columns.filter(item => item.key == key)[0].visible = event
} else {
this.columns[key].visible = event
let newBackup = JSON.parse(JSON.stringify(this.columns));
newBackup[key].visible = event;
this.$set(this.columns, key, newBackup[key]);
// this.columns[key].visible = event
}
this.$emit("columnsChange", this.columns);
},
// 切换全选/反选
toggleCheckAll() {
const newValue = !this.isChecked
const newValue = !this.isChecked;
let newBackup = JSON.parse(JSON.stringify(this.columns));
if (Array.isArray(this.columns)) {
this.columns.forEach((col) => (col.visible = newValue))
} else {
Object.values(this.columns).forEach((col) => (col.visible = newValue))
Object.keys(newBackup).forEach(col => {
newBackup[col].visible = newValue;
this.$set(this.columns, col, newBackup[col]);
});
// Object.values(this.columns).forEach((col) => (col.visible = newValue))
}
this.$emit("columnsChange", this.columns);
}

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

@@ -76,7 +76,11 @@
series.push({
name: item && item.name || '',
type: 'line',
stack: 'Total',
// showSymbol: false,
symbol: 'circle',
areaStyle: {
opacity: 0.6
},
data: item && item.data || []
});
});

57
src/router/index.js
View File

@@ -181,6 +181,49 @@ export const dynamicRoutes = [
}
]
},
// 业务95值计算
{
path: '/earnManage/busValueCount/edit',
component: Layout,
hidden: true,
permissions: ['earnManage:busValueCount:edit'],
children: [
{
path: 'index/:id?',
component: () => import('@/views/earnManage/busValueCount/details'),
name: 'busValueCountEdit',
meta: { title: '新增任务', activeMenu: '/earnManage/busValueCount' }
}
]
},
{
path: '/earnManage/busValueCount/list',
component: Layout,
hidden: true,
permissions: ['earnManage:busValueCount:list'],
children: [
{
path: 'index/:id?',
component: () => import('@/views/earnManage/busValueCount/relevantData'),
name: 'busValueCountRelevant',
meta: { title: '相关数据', activeMenu: '/earnManage/busValueCount' }
}
]
},
{
path: '/earnManage/busValueCount/chart',
component: Layout,
hidden: true,
permissions: ['earnManage:busValueCount:chart'],
children: [
{
path: 'index/:id?',
component: () => import('@/views/earnManage/busValueCount/viewChart'),
name: 'busValueCountChart',
meta: { title: '查看图形', activeMenu: '/earnManage/busValueCount' }
}
]
},
// 服务器带宽收益管理
{
path: '/earnManage/server/list',
@@ -225,6 +268,20 @@ export const dynamicRoutes = [
}
]
},
{
path: '/earnManage/switch/edit',
component: Layout,
hidden: true,
permissions: ['earnManage:switch:edit'],
children: [
{
path: 'index/:switchId?',
component: () => import('@/views/earnManage/switch/details'),
name: 'SwitchDetails',
meta: { title: '相关数据', activeMenu: '/earnManage/switch' }
}
]
},
// 业务标识管理
{
path: '/earnManage/businessIdent/details',

248
src/views/earnManage/busValueCount/busValueCount.vue Normal file
View File

@@ -0,0 +1,248 @@
<template>
<div class="pageTopForm">
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" size="small" label-width="80px" class="demo-ruleForm">
<el-col :span="8">
<el-form-item label="任务名称" prop="taskName">
<el-input
v-model="queryParams.taskName"
placeholder="请输入任务名称"
clearable
@keyup.enter.native="handleQuery">
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item class="lastBtnSty">
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-col>
</el-form>
<!-- 表格数据 -->
<TableList class="w100 h100" :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 EchartsBar from "@/components/echartsList/bar.vue";
import TableList from "@/components/table/index.vue";
import {listBandWidth, avgDetailMsg, recalBandWidth} from "@/api/disRevenue/earnManage"
export default {
name: 'busValueCount',
dicts: ['eps_bandwidth_type'],
components: {TableList, EchartsBar},
props: {
activeName: {
type: String,
default: "1000"
}
},
watch: {
activeName: {
handler(val) {
this.getList();
},
deep: true,
immediate: true
}
},
data() {
return {
tableList: [],
loading: true,
showSearch: true,
// 列显隐信息
columns: {
id: {label: `ID`},
taskName: {label: `任务名称`, minWidth: '250', visible: true},
businessName: {label: `业务名称`, minWidth: '150', visible: true},
resourceGroupNameType: { label: `包含资源类型`, minWidth: '200'},
resourceGroupName: { label: `包含资源`, minWidth: '200'},
businessId: {label: `计算类型`, minWidth: '150'},
bandwidth95Daily: {label: `95值(Mbit)`, minWidth: '200',visible: true},
avgMonthlyBandwidth95: {label: `月均日95值(Mbit)`, minWidth: '200',visible: true},
js: {label: `外部数据记录95值(Mbit)`, minWidth: '200',visible: true},
timelist: {label: `时间段`, minWidth: '200',visible: true},
machineCode: {label: `任务状态`, minWidth: '150',visible: true},
updatatime: {label: `修改时间`, minWidth: '150'},
createDatetime: {label: `创建时间`, minWidth: '150'},
},
config: {
tableButton: {
top: [
{content: '新增', fnCode: 'add', type: 'primary', icon: 'el-icon-plus', hasPermi: 'resource:monitorStategy:add'},
{content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'earnManage:server:export'},
],
line: [
{content: '相关数据', fnCode: 'edit', type: 'text', icon: 'el-icon-tickets', hasPermi: 'earnManage:server:relevantData'},
{content: '重新计算', fnCode: 'calculate', type: 'text', icon: 'el-icon-brush', hasPermi: 'earnManage:server:calculate'},
{content: '图形查看', fnCode: 'echartView', type: 'text', icon: 'el-icon-data-analysis', hasPermi: 'earnManage:server:graphicAnalysis'},
{}
]
}
},
queryParams: {
pageNum: 1,
pageSize: 10,
total: 0,
bandwidthType: undefined,
hardwareSn: undefined,
bandwidth95Daily: undefined,
bandwidth95Monthly: undefined,
packageBandwidthDaily: undefined,
avgMonthlyBandwidth95: undefined,
effectiveBandwidth95Daily: undefined,
effectiveBandwidth95Monthly: undefined,
effectiveAvgMonthlyBandwidth95: undefined,
},
}
},
// created() {
// this.$nextTick(() => {
// this.getList(1);
// });
// },
// activated() {
// this.$nextTick(() => {
// this.getList();
// });
// },
methods: {
/** 查询角色列表 */
getList(num) {
this.loading = true;
let newParams = {...this.queryParams};
delete newParams['total'];
newParams['calculationMode'] = this.activeName;
if (newParams && newParams.bandwidthType && !newParams['startTime']) {
this.$refs['queryRef'].validate((valid) => {
if (!valid) {
return false;
}
});
return;
}
listBandWidth(newParams).then(response => {
this.tableList = response.rows;
this.queryParams.total = response.total;
this.loading = false;
})
},
/** 搜索按钮操作 */
handleQuery() {
this.$refs['queryRef'].validate((valid) => {
if (!valid) {
return false;
}
});
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryRef");
this.handleQuery();
},
/** 图形分析 */
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: list, dictList: dictTypeArr, resourceType: 1, activeName: this.activeName}));
// 1. 用 Vue Router 解析目标路由的完整 URL
const routeLocation = this.$router.resolve({
name: 'DialogView',
query: { storageKey }
});
// 2. 打开新窗口（routeLocation.href 是完整路径）
window.open(routeLocation.href, '_blank');
// _blank：新标签页；_self：当前窗口（默认）
},
chartDataEvent(val) {
// console.log('val===',val);
return val;
},
// 处理子组件传递的新值
handleValueChange(newValue) {
// 父组件更新自身数据，实现同步
this.showSearch = newValue;
// console.log('父组件拿到新值:', newValue);
},
callback(result, rowData, selectChange, selectList) {
if (result && result.fnCode) {
switch (result.fnCode) {
case 'add':
this.$router.push({
path:'/earnManage/busValueCount/edit/index',
});
break;
case 'edit':
this.$router.push({
path:'/earnManage/busValueCount/list/index',
query:{
id: rowData.id,
bandwidthType: rowData && rowData.bandwidthType,
resourceType: rowData && rowData.resourceType
}
});
break;
case 'echartView':
this.$router.push({
path:'/earnManage/busValueCount/chart/index',
query:{
id: rowData.id,
bandwidthType: rowData && rowData.bandwidthType,
resourceType: rowData && rowData.resourceType
}
});
// this.graphicAnalysis(selectList);
break;
case 'createData':
this.$router.push({
path:'/earnManage/server/edit/index',
query:{
resourceType: 1
}
});
break;
case 'calculate':
let fnType = recalBandWidth;
if (rowData && rowData.bandwidthType === '4') {
fnType = avgDetailMsg;
}
fnType(rowData.id).then(res => {
this.getList();
this.$modal.msgSuccess("操作成功！");
}).catch(() => {});
break;
case 'export':
let paramsList = Object.assign(this.queryParams,rowData, {resourceType: 1,calculationMode: this.activeName});
this.download("system/bandwidth/export", paramsList, `服务器带宽收益_${new Date().getTime()}.xlsx`, null, 'json');
break;
default:
}
}
},
}
}
</script>
<style scoped>
::v-deep .lastBtnSty .el-form-item__content{
margin-left: 10px!important;
}
</style>

80
src/views/earnManage/busValueCount/details.vue Normal file
View File

@@ -0,0 +1,80 @@
<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: 'busValueCount_Details',
components: {Form},
dicts: ['rm_topology_type'],
data() {
return {
ruleForm: {},
formList: [],
switchNameList: [],
paramsData: {}
}
},
created() {
this.paramsData = this.$route && this.$route.query;
this.fnFormList();
this.switchList();
},
methods: {
// formList集合
fnFormList(objVal) {
this.formList = [{
config: {title: '基本信息', colSpan: 'disBlock'},
controls: {
id: {label: 'ID',hidden: true},
clientId: {label: '任务名称', span: 12, type: 'input',required: true},
businessName: {label: '业务名称', span: 12, type: 'select', options:[]},
businessId: {label: '包含资源类型', span: 12, type: 'select', options: [],required: true},
monthTime: {label: '包含资源', span: 12, type: 'select', options: [],required: true},
js: {label: '计算类型', span: 12, type: 'select', options: [],required: true},
}
}];
},
// 获取交换机下拉
switchList() {
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 'submit':
this.switchNameList.find(item => {
if (item.resourceName === dataVal['nodeName']) {
dataVal['hardwareSn'] = item.hardwareSn;
}
});
dataVal['resourceType'] = this.paramsData.resourceType;
calculateAvg(dataVal).then(response => {
this.$modal.msgSuccess(response.msg);
this.$router.push("/earnManage/busValueCount");
}).catch(() => {
this.$modal.msgError("操作失败")
});
break;
case 'cancel':
this.$router.push("/earnManage/busValueCount");
break;
default:
}
}
}
}
}
</script>
<style>
</style>

42
src/views/earnManage/busValueCount/index.vue Normal file
View File

@@ -0,0 +1,42 @@
<template>
<div class="app-container" style="height: calc(100vh - 85px);">
<el-tabs class="h100" v-model="activeName">
<el-tab-pane label="1000计算方式" name="1000">
<busValueCount v-if="activeName === '1000'" :activeName="activeName"></busValueCount>
</el-tab-pane>
<el-tab-pane label="1024计算方式" name="1024">
<busValueCount v-if="activeName === '1024'" :activeName="activeName"></busValueCount>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import busValueCount from './busValueCount'
export default {
name: 'busValueCount_index',
components: {busValueCount},
data() {
return {
activeName: '1000'
}
},
created() {
this.$nextTick(() => {
});
},
activated() {
this.$nextTick(() => {
});
},
methods: {}
}
</script>
<style scoped>
::v-deep .el-tabs__content{
height: 100%;
overflow: auto;
padding-bottom: 40px;
}
</style>

131
src/views/earnManage/busValueCount/relevantData.vue Normal file
View File

@@ -0,0 +1,131 @@
<template>
<div class="app-container">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane v-for="item of timeList" label="item" name="item"></el-tab-pane>
</el-tabs>
<TableList :columns="columns" :config="{colTopHiddenIcon: true}" :queryParams="queryParams" :tableList="roleList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
<template #tempBusinessName="{ row, column }">
<div>
<!-- 非编辑状态：显示文本 -->
<template v-if="!row.editStatus">
<span>{{ row.businessName }}</span>
<el-button icon="el-icon-edit" type="text" @click="rowDataChange(row)"></el-button>
</template>
<template v-else>
<!-- 编辑状态：显示输入框 -->
<el-col :span="16">
<el-input
v-model="row.businessName"
size="mini"
@keyup.enter="callback({fnCode: 'edit'}, row)"
@blur="callback({fnCode: 'edit'}, row)"
></el-input>
</el-col>
<el-col :span="8">
<el-button size="mini" type="primary" @click="callback({fnCode: 'submit'}, row)">确定</el-button>
<el-button size="mini" @click="callback({fnCode: 'cancel'}, row)">取消</el-button>
</el-col>
</template>
</div>
</template>
</TableList>
<div style="float: right;margin-top: 20px;">
<el-button type="primary" @click="goBack">返回</el-button>
</div>
</div>
</template>
<script setup name="ServerEdit">
import TableList from "@/components/table/index.vue"
import {relatedBandWidth} from "@/api/disRevenue/earnManage";
export default {
name: 'busValCount_relevantData',
components: {TableList},
data() {
return {
roleList: [],
loading: true,
total: 0,
serverId: '',
// 列显隐信息
columns: [],
paramsData: {},
timeList: [],
activeName: '',
}
},
created() {
this.paramsData = this.$route.query && this.$route.query;
this.serverId = this.$route.query && this.$route.query.id;
this.columsList(this.$route.query && this.$route.query.bandwidthType);
this.getList();
},
methods: {
handleClick(){
this.getList();
},
rowDataChange(row) {
this.$set(row, 'editStatus', true);
},
columsList(num) {
if (num && num === '4') {
this.timeList = ['2025-10-01', '2025-10-02', '2025-10-03', '2025-10-04', '2025-10-05'];
this.activeName = this.timeList[0];
}
// 服务器
if (this.paramsData && this.paramsData.resourceType === '1') {
this. columns = {
businessCode: {label: `业务代码`, minWidth: '120',visible: true},
clientId: {label: `ClientID`,minWidth: '160',visible: true},
time: {label: `时间`,minWidth: '160',visible: true},
outSpeed: {label: `总发送流量值（bit/s）`, minWidth: '150', slotName: 'tempBusinessName',visible: true},
};
} else {
this. columns = {
businessCode: {label: `交换机接口`, minWidth: '220',visible: true},
time: {label: `时间`,minWidth: '160',visible: true},
putSpeed: {label: `总接收流量值(bit/s)`, minWidth: '150', visible: true},
outSpeed: {label: `总发送流量值(bit/s)`, minWidth: '150', visible: true},
totalSpeed: {label: `流量值最大值(bit/s)`, minWidth: '150', slotName: 'tempBusinessName',visible: true},
};
}
},
/** 查询角色列表 */
getList() {
let params = {};
if (this.activeName) {
params['time'] = this.activeName;
}
this.loading = true;
relatedBandWidth(Object.assign( this.queryParams, {id: this.serverId}, params)).then(response => {
this.loading = false;
this.roleList = response && response.rows;
this.total = response && response.total || response && response.data.length;
})
},
goBack() {
this.$router.go(-1);
},
callback(result, rowData, selectChange) {
if (result && result.fnCode) {
switch (result.fnCode) {
case 'submit':
if (this.loading) return;
this.loading = true;
this.$set(rowData, 'editStatus', false);
this.getList();
break;
case 'cancel':
this.$set(rowData, 'editStatus', false);
break;
default:
}
}
},
}
}
</script>
<style scoped>
</style>

29
src/views/earnManage/busValueCount/viewChart.vue Normal file
View File

@@ -0,0 +1,29 @@
<template>
<div style="height: calc(100vh)!important">
<EchartsLine :lineData="lineDataParams" :title="lineDataParams.title" class="w100 h40 mt20 mb20"></EchartsLine>
</div>
</template>
<script>
import EchartsLine from "@/components/echartsList/line.vue";
export default {
name: "busValCount_viewChart",
components: {EchartsLine},
data() {
return {
lineDataParams: {
title: 'tux',
hiddenTime: true,
lineXData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sa', 'Sun'],
data: [120, 132, 101, 134, 90, 230, 210]
},
}
},
created() {},
methods: {}
}
</script>
<style scoped>
</style>

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

@@ -14,7 +14,20 @@
</el-select>
</el-form-item>
</el-form>
<el-switch v-for="item of switchData" v-model="item.checkType" :activeText="item.label" class="mr20" />
<template v-for="item of switchData">
<el-switch v-model="item.checkType" :activeText="item.label" class="mr20" />
<el-date-picker
v-model="timeList[item.value]"
:style="{width: '300px!important', marginRight: '10px'}"
:type="item.value === '1' ? 'datetimerange' : '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"
@change="(val) => dateChange(val, item.value)"/>
</template>
</div>
<div style="height: calc(100vh - 160px);overflow: scroll;">
<template v-for="(item,index) of echartListData">
@@ -62,6 +75,7 @@
},
data() {
return {
timeList: {'1': [], '2': []},
paramsData: {},
form: {},
storageKey: '',
@@ -87,14 +101,15 @@
this.paramsData = JSON.parse(localStorage.getItem(this.storageKey));
this.resourceType = this.paramsData && this.paramsData.resourceType;
if (this.paramsData && this.paramsData.dictList) {
this.switchData = this.paramsData.dictList.map((item,index) => {
this.typeObj[item.value] = {type: item.value, indexVal: index};
let obj = {
label: item.label,
value: item.value,
checkType: true
};
return obj;
this.paramsData.dictList.forEach((item,index) => {
if (item.value === '1' || item.value === '2') {
this.typeObj[item.value] = {type: item.value, indexVal: index};
this.switchData.push({
label: item.label,
value: item.value,
checkType: true
});
}
});
}
if (this.paramsData && this.paramsData.list) {
@@ -129,11 +144,15 @@
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);
// this.graPackageList(dayList);
// this.graAvgMonthlyList(monthList);
// this.graEffectiveDailyList(dayList);
// this.graEffectiveMonthlyList(monthList);
// this.graEffectiveAvgMonthlyList(dayList);
},
// 时间变化时
dateChange(val, idNum){
console.log('id=====',idNum, 'val===',val);
},
// 初始化
processData(list) {
@@ -173,15 +192,17 @@
};
}
this.paramsVal['calculationMode'] = this.activeName;
let dayList = this.getDaysOfPreviousMonth();
let monthList = this.getLastMonths();
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);
this.graAvgMonthlyList(monthList);
this.graEffectiveDailyList(dayList);
this.graEffectiveMonthlyList(monthList);
this.graEffectiveAvgMonthlyList(dayList);
// this.graPackageList(dayList);
// this.graAvgMonthlyList(monthList);
// this.graEffectiveDailyList(dayList);
// this.graEffectiveMonthlyList(monthList);
// this.graEffectiveAvgMonthlyList(dayList);
}
},
// 95带宽值Mbps/日---图表
@@ -190,6 +211,7 @@
if (res && res.data && res.data.length > 0) {
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);
@@ -207,6 +229,7 @@
if (res && res.data && res.data.length > 0) {
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);
});
@@ -307,6 +330,18 @@
console.warn(`函数 ${funcName} 未定义`);
}
},
// 获取前一天的
getBeforDay() {
let startData = '';
let endData = '';
const year = new Date().getFullYear();
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`;
return {startTime: startData, endTime: endData};
},
// 获取前一个月的所有日期
getDaysOfPreviousMonth(star, end) {
const currentDate = new Date();
@@ -345,13 +380,13 @@
return {startTime: dateCollection[0], endTime: dateCollection[dateCollection.length - 1]};
},
// 获取前一年的月
getLastMonths() {
getLastMonths(num) {
const threeMonths = [];
const today = new Date(); // 当前日期
const currentYear = today.getFullYear();
const currentMonth = today.getMonth() + 1; // 月份从0开始（0=1月，11=12月）
// 循环获取前3个月（i=0: 前1个月，i=1: 前2个月，i=2: 前3个月）
for (let i = 1; i <= 12; i++) {
for (let i = 1; i <= num; i++) {
// 计算目标月份（当前月 - i）
let targetMonth = currentMonth - i;
let targetYear = currentYear;

123
src/views/earnManage/switch/details.vue Normal file
View File

@@ -0,0 +1,123 @@
<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 {listAllSwitchName, postInterFaceName} from "@/api/disRevenue/resource"
export default {
name: 'Switch_Details',
components: {Form},
dicts: ['rm_topology_type'],
data() {
return {
ruleForm: {},
formList: [],
switchNameList: [],
paramsData: {}
}
},
created() {
this.paramsData = this.$route && this.$route.query;
this.fnFormList();
this.switchList();
},
methods: {
// formList集合
fnFormList(objVal) {
this.formList = [{
config: {title: '基本信息', colSpan: 'disBlock'},
controls: {
id: {label: 'ID',hidden: true},
uplinkSwitch: {label: '交换机名称', span: 12, type: 'select',options:[], eventName: 'change', required: true},
interfaceName: {label: '接口名称', span: 12, type: 'select',options:[], required: true},
interfaceRemark: {label: '接口备注', span: 12, type: 'input', disabled: true},
businessName: {label: '业务名称', span: 12, type: 'select', options:[], eventName: 'change', required: true},
businessId: {label: '业务代码', span: 12, type: 'input', disabled: true},
monthTime: {label: '月份选择', span: 12, type: 'month', required: true},
}
}];
},
// 获取交换机下拉
switchList() {
listAllSwitchName({}).then(val => {
if(val && val.data) {
this.switchNameList = val && val.data;
this.formList[0].controls.uplinkSwitch['options'] = val && val.data.map(item => {
return Object.assign({label: item.switchName, value: item.id});
});
}
});
listAllBusinessList().then(val => {
this.formList[0].controls.businessName['options'] = val && val.data.map(item => {
return Object.assign({label: item.businessName, value: item.id});
});
});
},
// 接口名称
fnInterFaceNameList(val) {
postInterFaceName(val).then(res => {
// this.interfaceNameList = res;
this.formList[0].controls.interfaceName['options'] = res && res.map(item => {
return Object.assign({label: item.interfaceName, 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, 'businessId', dataVal);
}
break;
case 'uplinkSwitch':
let switchIp = '';
this.switchNameList.find(item => {
if (item.id === dataVal) {
switchIp = item.snmpAddress;
}
});
this.fnInterFaceNameList({switchIp: switchIp});
break;
case 'submit':
this.switchNameList.find(item => {
if (item.resourceName === dataVal['nodeName']) {
dataVal['hardwareSn'] = item.hardwareSn;
}
});
dataVal['resourceType'] = this.paramsData.resourceType;
calculateAvg(dataVal).then(response => {
this.$modal.msgSuccess(response.msg);
this.$router.push("/earnManage/switch");
// else {
// this.$router.push("/disRevenue/earnManage/switch");
// }
}).catch(() => {
this.$modal.msgError("操作失败")
});
break;
case 'cancel':
this.$router.push("/earnManage/switch");
// else {
// this.$router.push("/disRevenue/earnManage/switch");
// }
break;
default:
}
}
}
}
}
</script>
<style>
</style>

18
src/views/earnManage/switch/switchRelevantData.vue
View File

@@ -48,15 +48,17 @@
type = true;
}
this. columns = [
{label: `接口名称`, prop: 'interfaceName', visible: true},
{label: `接口备注`, prop: 'interfaceRemark', visible: type},
{label: `业务名称`, prop: 'businessName',visible: true},
{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},
// {label: `业务代码`, prop: 'businessId',visible: type},
{label: `95带宽值/日(Mbi)`, prop: 'bandwidth95Daily', slotName: true, visible: type},
// {label: `有效95带宽值Mbps/日`, prop: 'effectiveAvgMonthlyBandwidth95', slotName: true, visible: type},
// {label: `包端带宽值Mbps/日`, prop: 'packageBandwidthDaily', slotName: true, visible: type},
{label: `接收流量(bites/s)`, prop: 'inSpeed', visible: !type},
{label: `发送流量(bites/s)`, prop: 'outSpeed', visible: !type},
{label: `流量最大值(bites/s)`, prop: 'name', visible: !type},
];
},
/** 查询角色列表 */

90
src/views/earnManage/switch/switchTabs.vue
View File

@@ -31,29 +31,29 @@
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="硬件SN" prop="hardwareSn">
<el-form-item label="业务名称" prop="hardwareSn">
<el-input
v-model="queryParams.hardwareSn"
placeholder="请输入硬件SN"
placeholder="请选择业务名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="服务器节点名称" title="服务器节点名称" prop="nodeName">
<el-select
v-model="queryParams.nodeName"
placeholder="请输入服务器节点名称"
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">-->
<!-- <el-form-item label="服务器节点名称" title="服务器节点名称" prop="nodeName">-->
<!-- <el-select-->
<!-- v-model="queryParams.nodeName"-->
<!-- placeholder="请输入服务器节点名称"-->
<!-- 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">
<el-form-item label="类型" prop="bandwidthType">
<el-select
@@ -206,24 +206,26 @@
showSearch: true,
uplinkList:[], // 交换机名称
interfaceList:[], // 接口名称
nodeNameList:[], // 服务器节点名称
// nodeNameList:[], // 服务器节点名称
// 列显隐信息
columns: {
id: { label: `ID`,width: '50', visible: false },
uplinkSwitch: { label: `交换机名称`, minWidth: '180', visible: true },
hardwareSn: { label: `硬件SN`, minWidth: '200', visible: false },
hardwareSn: { label: `硬件SN`, minWidth: '200'},
interfaceName: { label: `接口名称`, minWidth: '120',visible: true },
interfaceLinkDeviceType: { label: `接口连接设备类型`, slotName: 'tempType',minWidth: '180',
slotHeaderName: '不同的类型统计方式不一样，当类型是服务器时，使用的是接口的接收流量，95带宽值Mbs/日和95带宽值Mbs/月统计的是交换机接口的接收流量；当类型是机房出口的时候，95带宽值Mbs/日和95带宽值Mbs/月统计的是交换机接口的发送流量', visible: true },
interfaceRemark: {label: `接口备注`,minWidth: '150'},
bandwidth95Daily: { label: `95带宽值/日(Mbit)`, minWidth: '200', slotName: 'tempDay', visible: true },
bandwidth95Monthly: { label: `95带宽值/月(Mbit)`, minWidth: '200', slotName: 'tempMonth', visible: true},
avgMonthlyBandwidth95: {label: `月均日95值(Mbit`, minWidth: '200', slotName: 'tempDay', visible: true},
clientId: {label: `ClientID`,minWidth: '150'},
businessId: {label: `业务代码`,minWidth: '150'},
businessName: {label: `业务名称`,minWidth: '100'},
nodeName: { label: `服务器节点名称`, minWidth: '200'},
bandwidth95Daily: { label: `95带宽值Mbps/日`, minWidth: '200', slotName: 'tempDay', visible: true },
effectiveBandwidth95Daily: {label: `有效95带宽值Mbps/日`, minWidth: '200', slotName: 'tempDay', visible: true },
bandwidth95Monthly: { label: `95带宽值Mbps/月`, minWidth: '200', slotName: 'tempMonth'},
avgMonthlyBandwidth95: {label: `月均日95值Mbps`, minWidth: '200', slotName: 'tempDay'},
effectiveBandwidth95Monthly: {label: `有效95带宽值Mbps/月`, minWidth: '200', slotName: 'tempMonth',},
effectiveAvgMonthlyBandwidth95: {label: `有效月均日95值Mbps`, minWidth: '200', slotName: 'tempDay'},
// nodeName: { label: `服务器节点名称`, minWidth: '200'},
// effectiveBandwidth95Daily: {label: `有效95带宽值Mbps/日`, minWidth: '200', slotName: 'tempDay', visible: true },
// effectiveBandwidth95Monthly: {label: `有效95带宽值Mbps/月`, minWidth: '200', slotName: 'tempMonth',},
// effectiveAvgMonthlyBandwidth95: {label: `有效月均日95值Mbps`, minWidth: '200', slotName: 'tempDay'},
createTime: { label: `创建时间`, minWidth: '160'},
lastModifyTime: { label: `修改时间`, minWidth: '160'}
},
@@ -235,7 +237,7 @@
top: [
{content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'earnManage:switch:export'},
{content: '图形分析', fnCode: 'echartView', type: 'success', icon: 'el-icon-data-analysis', hasPermi: 'earnManage:switch:graphicAnalysis'},
// {content: '生成月均日95值', fnCode: 'createData', type: 'success', icon: 'el-icon-data-analysis', hasPermi: 'disRevenue:earnManage:switch:add'},
{content: '生成接口月均日95值', fnCode: 'createData', type: 'success', icon: 'el-icon-data-analysis', hasPermi: 'earnManage:switch:add'},
],
line: [
{content: '相关数据', fnCode: 'edit', type: 'text', icon: 'el-icon-tickets', hasPermi: 'earnManage:switch:relevantData'},
@@ -329,15 +331,19 @@
},
fnSelectAllName() {
resNameBtType({resourceType: 2}).then(res => {
this.uplinkList = res && res.map(item => {
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});
});
if(res && res.length > 0) {
this.uplinkList = res && res.map(item => {
return Object.assign({label: item.resourceName, value: item.resourceName, ipAddress: item.ipAddress});
});
}
});
// resNameBtType({resourceType: 1}).then(res => {
// if(res && res.length > 0) {
// this.nodeNameList = res && res.map(item => {
// return Object.assign({label: item.resourceName, value: item.resourceName, ipAddress: item.ipAddress});
// });
// }
// });
},
changeEvent(val){
let params = {};
@@ -418,14 +424,14 @@
// }
this.graphicAnalysis(selectList);
break;
// case 'createData':
// this.$router.push({
// path:'/disRevenue/earnManage/switch/edit/index',
// query:{
// resourceType: 2
// }
// });
// break;
case 'createData':
this.$router.push({
path:'/earnManage/switch/edit/index',
query:{
resourceType: 2
}
});
break;
case 'calculate':
recalBandWidth(rowData.id).then(res => {
this.getList();

2
src/views/resource/serverRegister/firstMonitor.vue
View File

@@ -2,7 +2,7 @@
<div style="padding: 8px 20px 20px;">
<div class="w100 plr-20" style="font-size: 14px">
<div v-for="(item, key, index) of formData['formFirst']" class="w50 disInlineBlock p10">
<div class="disInlineBlock" style="width: 120px;">{{item}}</div>
<div class="disInlineBlock" style="width: 120px;color: #C0C4CC;">{{item}}</div>
<div style="width: calc(100% - 120px);vertical-align: top;" class="disInlineBlock">{{formData['formValue'] && formData['formValue'][key]}}</div>
</div>
</div>

2
src/views/resource/serverRegister/handle.vue
View File

@@ -77,7 +77,7 @@
mgmtMacAddress: {label: '管理网-mac地址', span: 12, type: 'input'},
mgmtInterfaceType: {label: '管理网-接口类型', span: 12, type: 'input'},
mgmtIpv4Address: {label: '管理网-IPv4地址', span: 12, type: 'input'},
mgmt3Gateway: {label: '管理网-网关', span: 12, type: 'input'},
mgmtGateway: {label: '管理网-网关', span: 12, type: 'input'},
heartbeatInterval: {label: '心跳时间间隔', span: 12, type: 'input'},
heartbeatCount: {label: '心跳次数', span: 12, type: 'input'},
businessName: {label: '业务名称', span: 12, type: 'input'},

2
src/views/resource/serverRegister/index.vue
View File

@@ -203,7 +203,7 @@
mgmtMacAddress: { label: `管理网-mac地址`, minWidth: '150'},
mgmtInterfaceType: { label: `管理网-接口类型`, minWidth: '120'},
mgmtIpv4Address: { label: `管理网-IPv4地址`, minWidth: '120'},
mgmt3Gateway: { label: `管理网-网关`, minWidth: '120'},
mgmtGateway: { label: `管理网-网关`, minWidth: '120'},
heartbeatInterval: { label: `心跳时间间隔`, minWidth: '180'},
heartbeatCount: { label: `心跳次数`, minWidth: '180'},
registrationStatus: { label: `注册状态`, slotName: 'tempStatus', minWidth: '120', visible: true },

124
src/views/resource/serverRegister/monitorChart.vue
View File

@@ -466,7 +466,15 @@
});
this.secondChartList = {...tabNameList};
this.activeNames = [Object.keys(tabNameList)[0]];
this.fnSwitchNetNames(); // 第二模块名称
setTimeout(() => {
this.fnDiskNames(); // 第三模块名称
setTimeout(() => {
this.fnDockerNames(); // 第四模块名称
},500);
},500);
this.getPointDetailsData(this.currTimeList, Object.keys(tabNameList)[0]);
} else {
this.fnSwitchNetNames(); // 第二模块名称
setTimeout(() => {
this.fnDiskNames(); // 第三模块名称
@@ -565,23 +573,25 @@
tabNameList[item.interfaceName] = oneData;
this.$set(this.secondChartList, item.interfaceName, oneData);
});
if (this.activeNames && this.activeNames.length <= 0) {
this.activeNames = [res[0].interfaceName];
this.getNetDetailsData(this.currTimeList, res[0].interfaceName);
}
}
});
},
// 基本信息
getNetDetailsData(times, titleName) {
this.eventDataMap[titleName] = true;
netDetails({clientId: this.paramsData.clientId, name: titleName}).then(res => {
netDetails({clientId: this.paramsData.clientId, name: titleName}).then(async res => {
this.secondChartList[titleName].formModel = res && res.data || [];
this.getNetEcharts(times, titleName);
setTimeout(() => {
if (await this.getNetEcharts(times, titleName)) {
this.getNetDropped(times ,titleName);
},500);
}).catch(() => {
this.getNetEcharts(times, titleName);
setTimeout(() => {
}
}).catch(async () => {
if (await this.getNetEcharts(times, titleName)) {
this.getNetDropped(times ,titleName);
},500);
}
});
},
// 流量
@@ -591,7 +601,7 @@
let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
netEcharts.fnEvent = 'getNetEcharts';
trafficEcharts(Object.assign({}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
return trafficEcharts(Object.assign({}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
if (res && res.data) {
netEcharts.title = titleName + content.echartFors[0].title;
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
@@ -606,9 +616,9 @@
mountCollect['echartList'][0] = netEcharts;
this.$set(this.secondChartList, titleName, mountCollect);
}
this.$modal.closeLoading();
return true;
}).catch(() => {
this.$modal.closeLoading();
return true;
});
},
// 丢包数
@@ -618,7 +628,7 @@
let content = JSON.parse(JSON.stringify(this.linuxSystem['net']));
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
netEcharts.fnEvent = 'getNetDropped';
droppedEcharts(Object.assign({}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
return droppedEcharts(Object.assign({}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
if (res && res.data) {
netEcharts.title = titleName + content.echartFors[1].title;
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
@@ -634,8 +644,10 @@
this.$set(this.secondChartList, titleName, mountCollect);
}
this.$modal.closeLoading();
return true;
}).catch(() => {
this.$modal.closeLoading();
return true;
});
},
@@ -650,29 +662,29 @@
tabNameList[item.name] = oneData;
this.$set(this.secondChartList, item.name, oneData);
});
if (this.activeNames && this.activeNames.length <= 0) {
this.activeNames = [res.data[0].name];
this.getDiskDetailsData(this.currTimeList, res.data[0].name);
}
}
});
},
// 基本信息
getDiskDetailsData(times, titleName) {
this.eventDataMap[titleName] = true;
diskDetails({clientId: this.paramsData.clientId, name: titleName}).then(res => {
diskDetails({clientId: this.paramsData.clientId, name: titleName}).then(async res => {
this.secondChartList[titleName].formModel = res && res.data || [];
this.getSpeedEcharts(times, titleName);
setTimeout(() => {
this.getDiskTimes(times ,titleName);
setTimeout(() => {
if (await this.getSpeedEcharts(times, titleName)) {
if (await this.getDiskTimes(times ,titleName)) {
this.getDiskBytes(times ,titleName);
},500);
},500);
}).catch(() => {
this.getSpeedEcharts(times, titleName);
setTimeout(() => {
this.getDiskTimes(times ,titleName);
setTimeout(() => {
}
}
}).catch(async () => {
if (await this.getSpeedEcharts(times, titleName)) {
if (await this.getDiskTimes(times ,titleName)) {
this.getDiskBytes(times ,titleName);
},500);
},500);
}
}
});
},
//
@@ -682,7 +694,7 @@
let content = JSON.parse(JSON.stringify(this.linuxSystem['disk']));
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
netEcharts.fnEvent = 'getSpeedEcharts';
speedEcharts(Object.assign({}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
return speedEcharts(Object.assign({}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
if (res && res.data) {
netEcharts.title = titleName + content.echartFors[0].title;
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
@@ -697,9 +709,9 @@
mountCollect['echartList'][0] = netEcharts;
this.$set(this.secondChartList, titleName, mountCollect);
}
this.$modal.closeLoading();
return true;
}).catch(() => {
this.$modal.closeLoading();
return true;
});
},
//
@@ -709,7 +721,7 @@
let content = JSON.parse(JSON.stringify(this.linuxSystem['disk']));
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
netEcharts.fnEvent = 'getDiskTimes';
timesEcharts(Object.assign({}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
return timesEcharts(Object.assign({}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
if (res && res.data) {
netEcharts.title = titleName + content.echartFors[1].title;
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
@@ -724,9 +736,9 @@
mountCollect['echartList'][1] = netEcharts;
this.$set(this.secondChartList, titleName, mountCollect);
}
this.$modal.closeLoading();
return true;
}).catch(() => {
this.$modal.closeLoading();
return true;
});
},
//
@@ -736,7 +748,7 @@
let content = JSON.parse(JSON.stringify(this.linuxSystem['disk']));
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
netEcharts.fnEvent = 'getDiskBytes';
bytesEcharts(Object.assign({}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
return bytesEcharts(Object.assign({}, {name : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
if (res && res.data) {
netEcharts.title = titleName + content.echartFors[2].title;
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
@@ -752,8 +764,10 @@
this.$set(this.secondChartList, titleName, mountCollect);
}
this.$modal.closeLoading();
return true;
}).catch(() => {
this.$modal.closeLoading();
return true;
});
},
@@ -768,29 +782,29 @@
tabNameList[item.id] = oneData;
this.$set(this.secondChartList, item.id, oneData);
});
if (this.activeNames && this.activeNames.length <= 0) {
this.activeNames = [res.data[0].id];
this.getDockerDetailsData(this.currTimeList, res.data[0].id);
}
}
});
},
// 基本信息
getDockerDetailsData(times, titleName) {
this.eventDataMap[titleName] = true;
dockerDetails({clientId: this.paramsData.clientId, id: titleName}).then(res => {
dockerDetails({clientId: this.paramsData.clientId, id: titleName}).then(async res => {
this.secondChartList[titleName].formModel = res && res.data || [];
this.getCpuEcharts(times, titleName);
setTimeout(() => {
this.getDockerMem(times ,titleName);
setTimeout(() => {
if (await this.getCpuEcharts(times, titleName)) {
if (await this.getDockerMem(times ,titleName)) {
this.getDockerSpeed(times ,titleName);
},500);
},500);
}).catch(() => {
this.getCpuEcharts(times, titleName);
setTimeout(() => {
this.getDockerMem(times ,titleName);
setTimeout(() => {
}
}
}).catch(async () => {
if (await this.getCpuEcharts(times, titleName)) {
if (await this.getDockerMem(times ,titleName)) {
this.getDockerSpeed(times ,titleName);
},500);
},500);
}
}
});
},
//
@@ -800,7 +814,7 @@
let content = JSON.parse(JSON.stringify(this.linuxSystem['dock']));
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
netEcharts.fnEvent = 'getCpuEcharts';
cpuUtilEcharts(Object.assign({}, {id : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
return cpuUtilEcharts(Object.assign({}, {id : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
if (res && res.data) {
netEcharts.title = titleName + content.echartFors[0].title;
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
@@ -811,9 +825,9 @@
mountCollect['echartList'][0] = netEcharts;
this.$set(this.secondChartList, titleName, mountCollect);
}
this.$modal.closeLoading();
return true;
}).catch(() => {
this.$modal.closeLoading();
return true;
});
},
//
@@ -823,7 +837,7 @@
let content = JSON.parse(JSON.stringify(this.linuxSystem['dock']));
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
netEcharts.fnEvent = 'getDockerMem';
dockerMemEcharts(Object.assign({}, {id : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
return dockerMemEcharts(Object.assign({}, {id : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
if (res && res.data) {
netEcharts.title = titleName + content.echartFors[1].title;
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
@@ -834,9 +848,9 @@
mountCollect['echartList'][1] = netEcharts;
this.$set(this.secondChartList, titleName, mountCollect);
}
this.$modal.closeLoading();
return true;
}).catch(() => {
this.$modal.closeLoading();
return true;
});
},
//
@@ -846,7 +860,7 @@
let content = JSON.parse(JSON.stringify(this.linuxSystem['dock']));
netEcharts.dateDataTrans['dateRange'] = this.defaultTimes;
netEcharts.fnEvent = 'getDockerSpeed';
dockerSpeedEcharts(Object.assign({}, {id : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
return dockerSpeedEcharts(Object.assign({}, {id : titleName,clientId: this.paramsData.clientId}, times)).then(res => {
if (res && res.data) {
netEcharts.title = titleName + content.echartFors[2].title;
netEcharts.dataVal.lineXData = res.data && res.data.xData.length > 0 ? res.data.xData : this.firstChartTrans && this.firstChartTrans['timeList'] || [];
@@ -862,8 +876,10 @@
this.$set(this.secondChartList, titleName, mountCollect);
}
this.$modal.closeLoading();
return true;
}).catch(() => {
this.$modal.closeLoading();
return true;
});
},

2
src/views/resource/serverRegister/secondAutoFind.vue
View File

@@ -5,7 +5,7 @@
<div class="mt10 w100">
<div class="w100 plr-20" style="font-size: 14px">
<div v-for="(item,key,index) of val && val.formList || []" :key="`${key}-${index}`" class="w50 disInlineBlock p10">
<span class="w50 disInlineBlock">{{item}}</span><span class="w50">{{val && val.formModel[key] || '-'}}</span>
<span class="w50 disInlineBlock" style="color: #C0C4CC;">{{item}}</span><span class="w50">{{val && val.formModel[key] || '-'}}</span>
</div>
</div>
<div v-for="item of val && val.echartList || []" :key="`div-${val && val.title || ''}-${item && item.title || ''}-${index}`" class="w100 mt20 mb20" style="height: 200px;border-top: 1px solid #d8dce5">

4
src/views/resource/switchRegister/firstMonitor.vue
View File

@@ -2,12 +2,12 @@
<div style="padding: 8px 20px 20px;">
<div class="w100 plr-20" style="font-size: 14px">
<div v-for="(item, key, index) of formData['formFirst']" class="w50 disInlineBlock p10">
<div class="disInlineBlock" style="width: 120px;">{{item}}</div>
<div class="disInlineBlock" style="width: 120px;color: #C0C4CC;">{{item}}</div>
<div class="disInlineBlock" style="width: calc(100% - 120px); vertical-align: top;">{{formData['formValue'] && formData['formValue'][key]}}</div>
</div>
</div>
<div v-for="item of chartList" class="w100 mt10 mb10" style="height: 200px;border-top: 1px solid #d8dce5">
<EchartsLine class="w100 h100" :lineData="item.dataVal" :dateDataTrans="item.dateDataTrans" :dateShowType="item.dateShowType" :title="item.title" :chartData="(valData) => chartDataEvent(valData, item.fnEvent)"></EchartsLine>
<EchartsLine class="w100 h100" :lineData="item && item.dataVal || {}" :dateDataTrans="item && item.dateDataTrans || {}" :dateShowType="item && item.dateShowType || 'datetimerange'" :title="item && item.title || '图表数据'" :chartData="(valData) => chartDataEvent(valData, item.fnEvent)"></EchartsLine>
</div>
</div>
</template>

153
src/views/resource/switchRegister/monitorChart.vue
View File

@@ -32,7 +32,7 @@
loading: false,
currTimeList: {},
defaultTimes: [],
activeName: 'second',
activeName: 'first',
paramsData: {},
// 第一栏
firstChartTrans: {},
@@ -195,9 +195,9 @@
if (this.activeName === 'first') {
await Promise.all([
this.getMonitorData(),
this.getCpuData(),
this.getMemData(),
this.getPowerData()
this.getCpuData(this.currTimeList),
this.getMemData(this.currTimeList),
this.getPowerData(this.currTimeList)
]);
this.loading = true;
} else {
@@ -215,8 +215,9 @@
},
getCpuData(val) {
let cpuData = JSON.parse(JSON.stringify(this.resultData[0]));
cpuData.dateDataTrans['dateRange'] = this.defaultTimes;
cpuData['fnEvent'] = 'getCpuData';
switchCpuData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
cpuData['fnEvent'] = 'getCpuData';
if (res && res.data) {
cpuData.dataVal.lineXData = res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
@@ -230,8 +231,9 @@
},
getMemData(val) {
let memData = JSON.parse(JSON.stringify(this.resultData[1]));
memData.dateDataTrans['dateRange'] = this.defaultTimes;
memData['fnEvent'] = 'getMemData';
switchMemData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
memData['fnEvent'] = 'getMemData';
if (res && res.data) {
memData.dataVal.lineXData = res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
@@ -245,8 +247,9 @@
},
getPowerData(val) {
let powerData = JSON.parse(JSON.stringify(this.resultData[2]));
powerData.dateDataTrans['dateRange'] = this.defaultTimes;
powerData['fnEvent'] = 'getPowerData';
switchPowerData(Object.assign({},{clientId: this.paramsData.clientId}, val)).then(res => {
powerData['fnEvent'] = 'getPowerData';
if (res && res.data) {
powerData.dataVal.lineXData = res.data && res.data['xData'] && res.data['xData'].length > 0 ? res.data['xData'] :
this.firstChartTrans && this.firstChartTrans['timeList'] && this.firstChartTrans['timeList'].length > 0 ? this.firstChartTrans['timeList'] : [];
@@ -265,24 +268,37 @@
this.activeNames = [];
postInterFaceName({clientId: this.paramsData.clientId,resourceType: 2}).then(res => {
let tabNameList = {};
res && res.forEach(async(item,index) => {
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['net']));
oneData.title = item && item.interfaceName;
tabNameList[item.interfaceName + '_net'] = oneData;
});
this.secondChartList = {...tabNameList};
this.activeNames = [Object.keys(tabNameList)[0]];
this.fnModuleNameList(); // 第二模块名称
setTimeout(() => {
this.fnMpuNameList(); // 第三模块名称
if (res && res.length > 0) {
res && res.forEach(async(item,index) => {
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['net']));
oneData.title = item && item.interfaceName;
tabNameList[item.interfaceName + '_net'] = oneData;
});
this.secondChartList = {...tabNameList};
this.activeNames = [Object.keys(tabNameList)[0]];
this.fnModuleNameList(); // 第二模块名称
setTimeout(() => {
this.fnPwrNameList(); // 第四模块名称
this.fnMpuNameList(); // 第三模块名称
setTimeout(() => {
this.fnFanNameList(); // 第五模块名称
this.fnPwrNameList(); // 第四模块名称
setTimeout(() => {
this.fnFanNameList(); // 第五模块名称
},500);
},500);
},500);
},500);
this.getNetDetailsData(this.currTimeList, tabNameList[Object.keys(tabNameList)[0]].title, Object.keys(tabNameList)[0]);
this.getNetDetailsData(this.currTimeList, tabNameList[Object.keys(tabNameList)[0]].title, Object.keys(tabNameList)[0]);
} else {
this.fnModuleNameList(); // 第二模块名称
setTimeout(() => {
this.fnMpuNameList(); // 第三模块名称
setTimeout(() => {
this.fnPwrNameList(); // 第四模块名称
setTimeout(() => {
this.fnFanNameList(); // 第五模块名称
},500);
},500);
},500);
}
}).catch((error) => {
this.fnModuleNameList(); // 第二模块名称
setTimeout(() => {
@@ -302,21 +318,6 @@
this.eventDataMap[keyName] = true;
switchNetDetails({clientId: this.paramsData.clientId, ifDescr: titleName}).then(async res => {
this.secondChartList[keyName].formModel = res && res.data || [];
// const [one, two, three, four] = await Promise.all([
// this.getNetDiscards(times, titleName, keyName),
// this.getNetTotal(times, titleName, keyName),
// this.getNetErrDisc(times, titleName, keyName), // 原 tree 应为 three
// this.getNetSpeed(times, titleName, keyName)
// ]);
// console.log('one==', one);
// console.log('two==', two);
// console.log('tree==', three);
// console.log('four==', four);
// if (one && two && three && four) {
// console.log('vvvvvvvv========');
// this.$modal.closeLoading();
// }
if (await this.getNetDiscards(times ,titleName, keyName)) {
if (await this.getNetTotal(times, titleName, keyName)) {
if (await this.getNetErrDisc(times, titleName, keyName)) {
@@ -453,13 +454,18 @@
fnModuleNameList(val) {
moduleAllName({clientId: this.paramsData.clientId}).then(res => {
let tabNameList = {};
res && res.data.forEach(async(item,index) => {
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['light']));
oneData.title = item && item.fiberPortName;
tabNameList[item.fiberPortName + '_module'] = oneData;
this.$set(this.secondChartList, item.fiberPortName + '_module', oneData);
});
}).catch((error) => {
if (res && res.data && res.data.length > 0) {
res && res.data.forEach(async(item,index) => {
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['light']));
oneData.title = item && item.fiberPortName;
tabNameList[item.fiberPortName + '_module'] = oneData;
this.$set(this.secondChartList, item.fiberPortName + '_module', oneData);
});
if (this.activeNames && this.activeNames.length <= 0) {
this.activeNames = [Object.keys(tabNameList)[0]];
this.getModuleDetailsData(this.currTimeList, tabNameList[Object.keys(tabNameList)[0]].title, Object.keys(tabNameList)[0]);
}
}
});
},
// 基本信息
@@ -542,13 +548,18 @@
fnMpuNameList(val) {
mpuAllName({clientId: this.paramsData.clientId}).then(res => {
let tabNameList = {};
res && res.data.forEach(async(item,index) => {
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['mpu']));
oneData.title = item && item.mpuName;
tabNameList[item.mpuName + '_mpu'] = oneData;
this.$set(this.secondChartList, item.mpuName + '_mpu', oneData);
});
}).catch((error) => {
if (res && res.data && res.data.length > 0) {
res && res.data.forEach(async(item,index) => {
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['mpu']));
oneData.title = item && item.mpuName;
tabNameList[item.mpuName + '_mpu'] = oneData;
this.$set(this.secondChartList, item.mpuName + '_mpu', oneData);
});
if (this.activeNames && this.activeNames.length <= 0) {
this.activeNames = [Object.keys(tabNameList)[0]];
this.getMpuDetailsData(this.currTimeList, tabNameList[Object.keys(tabNameList)[0]].title, Object.keys(tabNameList)[0]);
}
}
});
},
// 基本信息
@@ -649,13 +660,18 @@
fnPwrNameList(val) {
pwrAllName({clientId: this.paramsData.clientId}).then(res => {
let tabNameList = {};
res && res.data.forEach(async(item,index) => {
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['pw']));
oneData.title = item && item.pwrName;
tabNameList[item.pwrName + '_pw'] = oneData;
this.$set(this.secondChartList, item.pwrName + '_pw', oneData);
});
}).catch((error) => {
if (res && res.data && res.data.length > 0) {
res && res.data.forEach(async(item,index) => {
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['pw']));
oneData.title = item && item.pwrName;
tabNameList[item.pwrName + '_pw'] = oneData;
this.$set(this.secondChartList, item.pwrName + '_pw', oneData);
});
if (this.activeNames && this.activeNames.length <= 0) {
this.activeNames = [Object.keys(tabNameList)[0]];
this.getPwrDetailsData(this.currTimeList, tabNameList[Object.keys(tabNameList)[0]].title, Object.keys(tabNameList)[0]);
}
}
});
},
// 基本信息
@@ -728,13 +744,18 @@
fnFanNameList(val) {
fanAllName({clientId: this.paramsData.clientId}).then(res => {
let tabNameList = {};
res && res.data.forEach(async(item,index) => {
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['fan']));
oneData.title = item && item.fanName;
tabNameList[item.fanName + '_fan'] = oneData;
this.$set(this.secondChartList, item.fanName + '_fan', oneData);
});
}).catch((error) => {
if (res && res.data && res.data.length > 0) {
res && res.data.forEach(async(item,index) => {
let oneData = JSON.parse(JSON.stringify(this.linuxSystem['fan']));
oneData.title = item && item.fanName;
tabNameList[item.fanName + '_fan'] = oneData;
this.$set(this.secondChartList, item.fanName + '_fan', oneData);
});
if (this.activeNames && this.activeNames.length <= 0) {
this.activeNames = [Object.keys(tabNameList)[0]];
this.getFanDetailsData(this.currTimeList, tabNameList[Object.keys(tabNameList)[0]].title, Object.keys(tabNameList)[0]);
}
}
});
},
// 基本信息
@@ -766,13 +787,13 @@
}
});
},
chartFnEvent(valData, fnName, tabName) {
chartFnEvent(valData, fnName, tabName, key) {
this.firstChartTrans = valData;
// 检查函数是否存在，避免报错
if (typeof this[fnName] === 'function') {
this.defaultTimes = valData.timeArr;
// 调用实际函数，并传递参数（如选中的值、当前项）
this[fnName]({startTime: valData.timeArr[0], endTime: valData.timeArr[1]}, tabName);
this[fnName]({startTime: valData.timeArr[0], endTime: valData.timeArr[1]}, tabName, key);
} else {
console.warn(`函数 ${fnName} 未定义`);
}

8
src/views/resource/switchRegister/secondAutoFind.vue
View File

@@ -5,11 +5,11 @@
<div class="mt10 w100">
<div class="w100 plr-20" style="font-size: 14px">
<div v-for="(item,key,index) of val && val.formList || []" :key="`${key}-${index}`" class="w50 disInlineBlock p10">
<span class="w50 disInlineBlock">{{item}}</span><span class="w50">{{val && val.formModel[key] || '-'}}</span>
<span class="w50 disInlineBlock" style="color: #C0C4CC;">{{item}}</span><span class="w50">{{val && val.formModel[key] || '-'}}</span>
</div>
</div>
<div v-for="item of val && val.echartList || []" :key="`div-${val && val.title || ''}-${item && item.title || ''}-${index}`" class="w100 mt20 mb20" style="height: 200px;border-top: 1px solid #d8dce5">
<EchartsLine class="w100 h100" :key="`chart-${val && val.title || ''}-${item && item.title || ''}-${index}`" :lineData="item && item.dataVal || {}" :dateDataTrans="item && item.dateDataTrans || {}" :dateShowType="item && item.dateShowType || 'datetimerange'" :title="item && item.title || '图表数据'" :chartData="(valData) => chartDataEvent(valData, item.fnEvent,val.title)"></EchartsLine>
<EchartsLine class="w100 h100" :key="`chart-${val && val.title || ''}-${item && item.title || ''}-${index}`" :lineData="item && item.dataVal || {}" :dateDataTrans="item && item.dateDataTrans || {}" :dateShowType="item && item.dateShowType || 'datetimerange'" :title="item && item.title || '图表数据'" :chartData="(valData) => chartDataEvent(valData, item.fnEvent,val.title, key)"></EchartsLine>
</div>
</div>
</el-collapse-item>
@@ -52,8 +52,8 @@
this.activeShowList = this.activeNames;
this.$emit("collapseChangeData", val);
},
chartDataEvent(valData, funcName, tabName) {
this.$emit("chartFnEvent", valData, funcName, tabName);
chartDataEvent(valData, funcName, tabName, key) {
this.$emit("chartFnEvent", valData, funcName, tabName, key);
// // 检查函数是否存在，避免报错
// if (typeof this[funcName] === 'function') {
// // 调用实际函数，并传递参数（如选中的值、当前项）