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

首页联调、资源监控开发、文字和列表bug修复

Browse Source
This commit is contained in:
康冉冉
2025-09-10 10:30:21 +08:00
parent 5a35edad38
commit 9468268136
18 changed files with 483 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
import request from '@/utils/request'
/** ------------------服务器宽带收益------------------- */
/** ------------------服务器带宽收益------------------- */
// 查询列表
export function listBandWidth(data) {
return request({
@@ -74,7 +74,7 @@ export function graPackage(data) {
data: data
})
}
// 95宽带值Mbps/月---图
// 95带宽值Mbps/月---图
export function graMonthly(data) {
return request({
url: '/system/bandwidth/graphicalAnalysisMonthly',
@@ -82,7 +82,7 @@ export function graMonthly(data) {
data: data
})
}
// 有效-95宽带值Mbps/月---图
// 有效-95带宽值Mbps/月---图
export function graEffectiveMonthly(data) {
return request({
url: '/system/bandwidth/graphicalAnalysisEffectiveMonthly',
@@ -90,7 +90,7 @@ export function graEffectiveMonthly(data) {
data: data
})
}
// 有效-95宽带值Mbps/日---图
// 有效-95带宽值Mbps/日---图
export function graEffectiveDaily(data) {
return request({
url: '/system/bandwidth/graphicalAnalysisEffectiveDaily',
@@ -106,7 +106,7 @@ export function graEffectiveAvgMonthly(data) {
data: data
})
}
// 95宽带值/日----图
// 95带宽值/日----图
export function graDaily(data) {
return request({
url: '/system/bandwidth/graphicalAnalysisDaily',

44
src/api/homeIndex.js Normal file
View File

@@ -0,0 +1,44 @@
import request from '@/utils/request'
// 统计当前在线服务器的流量相关的业务数
export function countBusiness() {
return request({
url: '/system/screen/countBusinessByTraffic',
method: 'get'
})
}
// 当前在线服务器发送带宽总流量
export function sumTrafficByServer() {
return request({
url: '/system/screen/sumTrafficByServer',
method: 'get'
})
}
// 当前在线交换机接收带宽总流量
export function sumTrafficBySwitch() {
return request({
url: '/system/screen/sumTrafficBySwitch',
method: 'get'
})
}
// 交换机在线数量
export function countSwitchNum() {
return request({
url: '/system/screen/countSwitchNum',
method: 'get'
})
}
// 服务器在线率
export function serverOnlineRate() {
return request({
url: '/system/screen/getServerOnlineRate',
method: 'get'
})
}
// 当日业务的在线设备数量统计TOP5
export function countDeviceNumTop5() {
return request({
url: '/system/screen/countDeviceNumTop5',
method: 'get'
})
}

BIN
src/assets/images/switch.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

17
src/assets/styles/index.scss
View File

@@ -142,6 +142,10 @@ aside {
height: calc(100vh - 132px);
padding: 8px 20px 20px;
}
.app-viewContent {
height: calc(100vh - 85px);
overflow: scroll;
}
.components-container {
margin: 30px 50px;
@@ -282,3 +286,16 @@ aside {
left: 10px;
right: 0px;
}
// form表单只读时
.el-input.is-disabled .el-input__inner {
background-color: transparent;
border-color: transparent;
color: #C0C4CC;
cursor: not-allowed;
}
.el-input.is-disabled .el-input__icon {
display: none;
}
.el-select .el-input.is-disabled .el-input__inner:hover {
border-color: transparent;
}

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

@@ -153,6 +153,7 @@ export default {
} else {
this.columns[key].visible = event
}
this.$emit("columnsChange", this.columns);
},
// 切换全选/反选
toggleCheckAll() {
@@ -162,6 +163,7 @@ export default {
} else {
Object.values(this.columns).forEach((col) => (col.visible = newValue))
}
this.$emit("columnsChange", this.columns);
}
},
}

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

@@ -76,7 +76,7 @@
}
},
grid: {
top: dataXY && dataXY.gridTop || '20%',
top: dataXY && dataXY.gridTop || '80px',
left: '3%',
right: '4%',
bottom: '3%',
@@ -125,6 +125,7 @@
label: {
show: dataXY && dataXY.seriesLabel || false,
position: 'insideLeft',
offset: [-4, 0]
}
}
]

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

@@ -1,27 +1,27 @@
<template>
<div class="ultabs">
<el-date-picker
v-model="dateRange"
:type="dateShowType === 'day' ? 'daterange' : 'monthrange'"
:start-placeholder="dateShowType === 'day' ? '开始时间' : '开始日期'"
:end-placeholder="dateShowType === 'day' ? '结束时间' : '结束日期'"
range-separator="至"
:format="dateShowType === 'day' ? 'yyyy-MM-dd' : 'yyyy-MM'"
:value-format="dateShowType === 'day' ? 'yyyy-MM-dd' : 'yyyy-MM'"
style="display: inline-block!important;width: 45%!important;vertical-align: middle;"
@change="dateChange"/>
<ul style="display: inline-block;padding-left: 10px;vertical-align: middle;">
<div class="ultabs" :style="{'margin-top': dateShowType && (dateShowType === 'day' || dateShowType === 'month') ? '35px' : '10px'}">
<ul style="display: inline-block;padding-left: 1px;vertical-align: middle;margin:0;float: right;">
<template v-if="dateShowType === 'day'">
<li :class="{ 'activesbgs' : isActive == 'DAY' }" @click="toggle('DAY',7)">前7天</li>
<li :class="{ 'activesbgs' : isActive == 'WEEK' }" @click="toggle('WEEK',15)">前15天</li>
<li :class="{ 'activesbgs' : isActive == 'MONTH' }" @click="toggle('MONTH')">前一个月</li>
</template>
<template v-else>
<template v-if="dateShowType === 'month'">
<li :class="{ 'activesbgs' : isActive == 'THREEMONTH' }" @click="toggle('THREEMONTH', 3)">前三个月</li>
<li :class="{ 'activesbgs' : isActive == 'HALFYEAR' }" @click="toggle('HALFYEAR', 6)">前半年</li>
<li :class="{ 'activesbgs' : isActive == 'YEAR' }" @click="toggle('YEAR', 12)">前一年</li>
</template>
</ul>
<el-date-picker
v-model="dateRange"
:type="dateShowType === 'month' ? 'monthrange' : 'daterange'"
:start-placeholder="dateShowType === 'month' ? '开始日期' : '开始时间'"
:end-placeholder="dateShowType === 'month' ? '结束日期' : '结束时间'"
range-separator="至"
:format="dateShowType === 'month' ? 'yyyy-MM' : 'yyyy-MM-dd'"
:value-format="dateShowType === 'month' ? 'yyyy-MM' : 'yyyy-MM-dd'"
style="display: inline-block!important;width: 45%!important;vertical-align: middle;float: right;margin-right: 10px;"
@change="dateChange"/>
</div>
</template>
@@ -154,12 +154,17 @@
}
</script>
<style scoped>
::v-deep .el-range-editor .el-range-input {
vertical-align: super!important;
}
::v-deep .el-date-editor .el-range-separator {
vertical-align: super!important;
}
.ultabs {
width: 500px;
float: right;
position: relative;
z-index: 9;
margin-top: -10px;
}
.ultabs ul li {

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

@@ -57,14 +57,33 @@
},
methods: {
getList(title, dataXY) {
const lineDataListIntance = echarts.init(document.getElementById('lineChart' + this.num))
const lineDataListIntance = echarts.init(document.getElementById('lineChart' + this.num));
let titleList = {text: title, x: '50%', y: '3%', textAlign: 'center'};
if (dataXY && dataXY.titleVal) {
titleList = Object.assign({},titleList, dataXY.titleVal);
}
let series = [];
if (dataXY && dataXY.dataList) {
dataXY.dataList.forEach(item => {
series.push({
name: item.name,
type: 'line',
stack: 'Total',
data: item.data
});
});
} else {
series = [{
data: dataXY.data,
type: 'line',
// areaStyle: { // 阴影
// color: 'rgba(140, 158, 217, 1)'
// }
}];
}
let option = {
title: [{
text: title,
x: '50%',
y: '3%',
textAlign: 'center',
}],
title: [titleList],
legend: dataXY && dataXY.legend ? dataXY.legend : {},
tooltip: {
trigger: 'axis',
axisPointer: {
@@ -75,7 +94,7 @@
}
},
grid: {
top: '20%',
top: dataXY && dataXY.gridTop || '80px',
left: '2%',
right: '4%',
bottom: '3%',
@@ -99,15 +118,7 @@
show: true,
},
},
series: [
{
data: dataXY.data,
type: 'line',
// areaStyle: { // 阴影
// color: 'rgba(140, 158, 217, 1)'
// }
}
]
series: series
};
lineDataListIntance.setOption(option);
// window.addEventListener("resize", () => {

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

@@ -14,7 +14,7 @@
v-model="ruleForm[key]"
:clearable="formVal.clearable !== false"
:disabled="toBoolean(formVal.disabled)"
:placeholder="formVal.placeholder || `请输入${formVal.label}`"
:placeholder="toBoolean(formVal.disabled) ? null : formVal.placeholder || `请输入${formVal.label}`"
:class="toBoolean(formVal.disabled) ? 'cursorAuto' : ''"
@[formVal.eventName]="(val) => handleChange(key,val,formVal)"></el-input>
</template>
@@ -26,14 +26,14 @@
:rows="formVal.rows"
:clearable="formVal.clearable !== false"
:class="toBoolean(formVal.disabled) ? 'cursorAuto' : ''"
:placeholder="formVal.placeholder || `请输入${formVal.label}`"></el-input>
:placeholder="toBoolean(formVal.disabled) ? null : formVal.placeholder || `请输入${formVal.label}`"></el-input>
</template>
<template v-else-if="formVal.type === 'select'">
<el-select
v-model="ruleForm[key]"
:placeholder="formVal.placeholder || `请选择${formVal.label}`"
:disabled="toBoolean(formVal.disabled)"
:placeholder="toBoolean(formVal.disabled) ? null : formVal.placeholder || `请输入${formVal.label}`"
:clearable="formVal.clearable !== false"
@[formVal.eventName]="(val) => handleChange(key,val,formVal)">
<el-option
@@ -69,9 +69,9 @@
<template v-else-if="formVal.type === 'date'">
<el-date-picker
v-model="ruleForm[key]"
:placeholder="formVal.placeholder || `请选择${formVal.label}`"
:type="formVal.type || 'date'"
:disabled="toBoolean(formVal.disabled)"
:placeholder="toBoolean(formVal.disabled) ? null : formVal.placeholder || `请输入${formVal.label}`"
:format="formVal.format || 'yyyy-MM-dd'"
@[formVal.eventName]="(val) => handleChange(key,val,formVal)"
></el-date-picker>
@@ -119,8 +119,8 @@
<el-transfer
v-model="ruleForm[key]"
:data="formVal.options"
:placeholder="formVal.placeholder || `请选择${formVal.label}`"
:disabled="toBoolean(formVal.disabled)"
:placeholder="toBoolean(formVal.disabled) ? formVal.placeholder || `请输入${formVal.label}` : null"
@[formVal.eventName]="(val) => handleChange(key,val,formVal)"
></el-transfer>
</template>

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

@@ -7,11 +7,11 @@
<el-button :type="item.type" plain size="mini" :icon="item.icon" @click="handleClick(item,{})" :hasPermi="[item.hasPermi]">{{item.content}}</el-button>
</el-col>
</template>
<right-toolbar v-if="!(config && config.colTopHiddenIcon)" :showSearch.sync="showSearch" @queryTable="renderList" :columns="columns"></right-toolbar>
<right-toolbar v-if="!(config && config.colTopHiddenIcon)" :showSearch.sync="showSearch" @queryTable="renderList" @columnsChange="columnsChange" :columns="columns"></right-toolbar>
</el-row>
<!-- 表格数据 -->
<el-table height="80%" v-loading="loading" :data="tableList" ref="selChangeList" highlight-selection-row @selection-change="handleSelectionChange">
<el-table-column v-if="!(config && config.colHiddenCheck)" fixed type="selection" width="55" align="center" />
<el-table height="80%" v-loading="loading" :data="tableList" ref="selChangeList" :key="tableKey" highlight-selection-row @selection-change="handleSelectionChange">
<el-table-column v-if="!(config && config.colHiddenCheck)" fixed="left" type="selection" width="55" align="center" />
<template v-for="(column, key, index) of columns">
<el-table-column v-if="column && column.visible" :label="column.label" :key="key" :prop="key" :width="column.width" :min-width="column.minWidth || '100px'" align="left" :show-overflow-tooltip="true">
<!-- 插槽 自定义列表表头数据格式 -->
@@ -94,6 +94,7 @@
},
data() {
return {
tableKey: 0,
loading: false,
showSearch: true,
dialogOpen: false,
@@ -193,6 +194,10 @@
renderList() {
this.$emit("fnRenderList");
},
// columns改变时触发，重新计算样式并渲染列表(解决：新增列，多选框和操作按钮错位)
columnsChange() {
this.tableKey++;
},
}
}
</script>

4
src/router/index.js
View File

@@ -168,7 +168,7 @@ export const dynamicRoutes = [
}
]
},
// 服务器宽带收益管理
// 服务器带宽收益管理
{
path: '/disRevenue/earnManage/server/list',
component: Layout,
@@ -211,7 +211,7 @@ export const dynamicRoutes = [
}
]
},
// 交换机宽带收益
// 交换机带宽收益
{
path: '/disRevenue/earnManage/switch/list',
component: Layout,

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

@@ -26,7 +26,7 @@
</el-form-item>
</el-col>
<el-col :span="8" v-if="queryParams.bandwidthType === '1'">
<el-form-item label="95宽带值Mbps/日" title="95宽带值Mbps/日" prop="bandwidth95Daily" :rules="[{ required: true, message: `95宽带值Mbps/日为必填项`, trigger: 'change' }]">
<el-form-item label="95带宽值Mbps/日" title="95带宽值Mbps/日" prop="bandwidth95Daily" :rules="[{ required: true, message: `95带宽值Mbps/日为必填项`, trigger: 'change' }]">
<el-date-picker
v-model="queryParams.bandwidth95Daily"
type="daterange"
@@ -38,7 +38,7 @@
</el-form-item>
</el-col>
<el-col :span="8" v-if="queryParams.bandwidthType === '2'">
<el-form-item label="95宽带值Mbps/月" title="95宽带值Mbps/月" prop="bandwidth95Monthly" :rules="[{ required: true, message: `95宽带值Mbps/月为必填项`, trigger: 'change' }]">
<el-form-item label="95带宽值Mbps/月" title="95带宽值Mbps/月" prop="bandwidth95Monthly" :rules="[{ required: true, message: `95带宽值Mbps/月为必填项`, trigger: 'change' }]">
<el-date-picker
v-model="queryParams.bandwidth95Monthly"
type="monthrange"
@@ -159,13 +159,13 @@
uplinkSwitch: {label: `上联交换机`, minWidth: '150'},
businessId: {label: `业务代码`, minWidth: '150'},
businessName: {label: `业务名称`, minWidth: '150'},
bandwidth95Daily: {label: `95宽带值Mbps/日`, minWidth: '200', slotName: 'tempDay', slotHeaderName: '使用服务器的发送流量，发送流量值除以1000000'},
bandwidth95Monthly: {label: `95宽带值Mbps/月`, minWidth: '200', slotName: 'tempMonth',
bandwidth95Daily: {label: `95带宽值Mbps/日`, minWidth: '200', slotName: 'tempDay', slotHeaderName: '使用服务器的发送流量，发送流量值除以1000000',visible: true},
effectiveBandwidth95Daily: {label: `有效95带宽值Mbps/日`, minWidth: '200', slotName: 'tempDay', visible: true},
packageBandwidthDaily: {label: `包端带宽值Mbps/日`, minWidth: '200', slotName: 'tempDay',visible: true},
bandwidth95Monthly: {label: `95带宽值Mbps/月`, minWidth: '200', slotName: 'tempMonth',
slotHeaderName: '使用服务器的发送流量，发送流量值除以1000000；若服务器在一个自然月内有收益方式的变更，以最后一次变更的时间为开始到月末，进行该值的统计；若服务器收益方式为包端，则月底不用进行该值的计算。'},
packageBandwidthDaily: {label: `包端带宽值Mbps/日`, minWidth: '200', slotName: 'tempDay'},
// customerName: {label: `设备业务客户`,visible: true},
avgMonthlyBandwidth95: {label: `月均日95值Mbps`, minWidth: '200',slotName: 'tempDay'},
effectiveBandwidth95Daily: {label: `有效95带宽值Mbps/日`, minWidth: '200', slotName: 'tempDay', visible: true},
effectiveBandwidth95Monthly: {label: `有效95带宽值Mbps/月`, minWidth: '200', slotName: 'tempMonth', visible: true},
effectiveAvgMonthlyBandwidth95: {label: `有效月均日95值Mbps`, minWidth: '200', slotName: 'tempDay', visible: true},
createDatetime: {label: `创建时间`, minWidth: '150'},

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

@@ -49,7 +49,7 @@
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: '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', width: '550', visible: !type},

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

@@ -69,7 +69,7 @@
</el-form-item>
</el-col>
<el-col :span="6" v-if="queryParams.bandwidthType === '1'">
<el-form-item label="95宽带值Mbps/日" title="95宽带值Mbps/日" prop="bandwidth95Daily" :rules="[{ required: true, message: `95宽带值Mbps/日为必填项`, trigger: 'change' }]">
<el-form-item label="95带宽值Mbps/日" title="95带宽值Mbps/日" prop="bandwidth95Daily" :rules="[{ required: true, message: `95带宽值Mbps/日为必填项`, trigger: 'change' }]">
<el-date-picker
v-model="queryParams.bandwidth95Daily"
type="daterange"
@@ -81,7 +81,7 @@
</el-form-item>
</el-col>
<el-col :span="6" v-if="queryParams.bandwidthType === '2'">
<el-form-item label="95宽带值Mbps/月" title="95宽带值Mbps/月" prop="bandwidth95Monthly" :rules="[{ required: true, message: `95宽带值Mbps/月为必填项`, trigger: 'change' }]">
<el-form-item label="95带宽值Mbps/月" title="95带宽值Mbps/月" prop="bandwidth95Monthly" :rules="[{ required: true, message: `95带宽值Mbps/月为必填项`, trigger: 'change' }]">
<el-date-picker
v-model="queryParams.bandwidth95Monthly"
type="monthrange"
@@ -202,8 +202,8 @@
slotHeaderName: '不同的类型统计方式不一样，当类型是服务器时，使用的是接口的接收流量，95带宽值Mbs/日和95带宽值Mbs/月统计的是交换机接口的接收流量；当类型是机房出口的时候，95带宽值Mbs/日和95带宽值Mbs/月统计的是交换机接口的发送流量', visible: true },
businessId: {label: `业务代码`,minWidth: '150'},
businessName: {label: `业务名称`,minWidth: '100'},
bandwidth95Daily: { label: `95宽带值Mbps/日`, minWidth: '200', slotName: 'tempDay', visible: true },
bandwidth95Monthly: { label: `95宽带值Mbps/月`, minWidth: '200', slotName: 'tempMonth', visible: true },
bandwidth95Daily: { label: `95带宽值Mbps/日`, minWidth: '200', slotName: 'tempDay', visible: true },
bandwidth95Monthly: { label: `95带宽值Mbps/月`, minWidth: '200', slotName: 'tempMonth', visible: true },
nodeName: { label: `服务器节点名称`, minWidth: '200'},
avgMonthlyBandwidth95: {label: `月均日95值Mbps`, minWidth: '200', slotName: 'tempDay'},
effectiveBandwidth95Daily: {label: `有效95带宽值Mbps/日`, minWidth: '200', slotName: 'tempDay'},

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

@@ -51,7 +51,7 @@
{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: '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},

198
src/views/disRevenue/resource/resMonitor/details.vue
View File

@@ -1,55 +1,80 @@
<template>
<div class="app-container">
<div class="app-container app-viewContent">
<Form :formList="formList" :ruleFormData="ruleForm" :config="{buttonGroup: []}" @fnClick="callback"></Form>
<el-tabs v-model="activeName">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="监控项" name="first">
<Form :formList="formListTow" :ruleFormData="ruleFormTow" :config="{buttonGroup: []}" @fnClick="callback"></Form>
<ResMonitorDigitalSuper></ResMonitorDigitalSuper>
</el-tab-pane>
<el-tab-pane label="自动发现项" name="second">
<el-collapse v-model="activeNames">
<el-collapse-item v-for="(val,index) of linuxSystem" :title="val.title" :name="index">
<div class="mt10 w100">
<Form :formList="val.formList" :ruleFormData="val.formModel" :config="val.config" @fnClick="callback"></Form>
<div v-for="item of val.echartList" class="w100 mt20 mb20" style="height: 200px;border-top: 1px solid #d8dce5">
<EchartsLine class="w100 h100" :lineData="item.dataVal" :title="item.title"></EchartsLine>
</div>
</div>
</el-collapse-item>
</el-collapse>
</el-tab-pane>
<el-tab-pane label="告警信息" name="third">
<TableList style="height: 500px" class="w100" :config="{colHiddenCheck: true, colTopHiddenIcon: true}" :columns="columns" :queryParams="queryParams" :tableList="tableList" @fnRenderList="getList"></TableList>
</el-tab-pane>
<el-tab-pane label="自动发现项" name="second">自动发现项</el-tab-pane>
<el-tab-pane label="告警信息" name="third">告警信息</el-tab-pane>
</el-tabs>
</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"
import TableList from "@/components/table/index.vue"
import {listAllBusinessList, calculateAvg} from "@/api/disRevenue/earnManage"
import {listAllResourList, listTopology} from "@/api/disRevenue/resource"
import EchartsLine from "@/components/echartsList/line.vue";
import ResMonitorDigitalSuper from "./digitalSuper";
export default {
name: 'ResMonitorDetails',
components: {Form},
components: {Form, TableList, EchartsLine, ResMonitorDigitalSuper},
dicts: ['rm_topology_type', 'rm_register_online_state', 'rm_register_resource_type'],
data() {
return {
ruleForm: {},
formList: [],
ruleFormTow: {},
formListTow: [{
controls: {
id: {label: 'ID',hidden: true},
hardwareSn: {label: '系统描述', span: 12, type: 'input',disabled: true},
resourceType: {label: '系统位置', span: 12, type: 'input',disabled: true},
resourceName: {label: '系统Object ID', span: 12, type: 'input', disabled: true},
ipAddress: {label: '系统MAC地址', span: 12, type: 'input',disabled: true},
onlineStatus: {label: '系统运行时间', span: 12, type: 'date',disabled: true},
switchName: {label: '设备名称', span: 12, type: 'select',disabled: true},
resourceGroup: {label: '系统联系信息', span: 12, type: 'select',disabled: true},
cpu: {label: '设备软件版本', span: 12, type: 'input',disabled: true},
neicun: {label: '系统名称', span: 12, type: 'input',disabled: true},
}
}],
formListTow: [],
paramsData: {},
activeName: 'first'
activeName: 'first',
activeNames: [0, 1],
linuxSystem: [],
columns: {
id: { label: `ID`, width: '50', visible: false },
switchSn: { label: `源IP`, minWidth: '200', visible: true},
switchName: { label: `发生时间`, minWidth: '250', visible: true },
interfaceName: { label: `状态`, minWidth: '100', visible: true },
connectedDeviceType: { label: `内容`, minWidth: '250', visible: true },
},
queryParams: {
pageNum: 1,
pageSize: 10,
total: 0,
},
tableList: []
}
},
created() {
// this.paramsData = this.$route && this.$route.query;
this.fnFormList();
this.fnFormList('1');
// this.switchList();
},
methods: {
handleClick(tab, event) {
if (tab && tab.index === '1') {
this.secondList();
} else if (tab && tab.index === '2') {
this.getList();
}
},
// formList集合
fnFormList() {
fnFormList(num) {
this.formList = [{
config: {title: '基本信息'},
controls: {
@@ -66,6 +91,38 @@
gaojing: {label: '未处理告警数', span: 12, type: 'input',disabled: true},
}
}];
let formFirst = [
{name: '系统描述', value: 'aaa'},
{name: '系统位置', value: 'aaa'},
{name: '系统Object ID', value: 'aaa'},
{name: '系统MAC地址', value: 'aaa'},
{name: '系统运行时间', value: 'aaa'},
{name: '设备名称', value: 'aaa'},
{name: '系统联系信息', value: 'aaa'},
{name: '设备软件版本', value: 'aaa'},
{name: '系统名称', value: 'aaa'},
];
let formSecond = [
{name: '总内存', value: 'aaa'},
{name: '操作系统', value: 'aaa'},
{name: '操作系统架构', value: 'aaa'},
{name: '最大进程数', value: 'aaa'},
{name: '硬盘总可用空间', value: 'aaa'},
{name: '系统启动时间', value: 'aaa'},
{name: '系统描述', value: 'aaa'},
{name: '系统正常运行时间', value: 'aaa'},
{name: '系统本地时间', value: 'aaa'},
{name: 'CPU数量', value: 'aaa'},
];
this.formListTow = num && num === '1' ? formFirst : formSecond;
},
getList() {
this.loading = true;
listTopology(this.addDateRange(this.queryParams)).then(response => {
this.tableList = response.rows;
this.queryParams.total = response.total;
this.loading = false;
})
},
// 获取交换机下拉
switchList() {
@@ -80,6 +137,89 @@
});
});
},
// 第二节点 自动发现项
secondList(){
this.linuxSystem = [{
title: '网络端口GE1/0/1',
formList: [{
controls: {
id: {label: 'ID',hidden: true},
hardwareSn: {label: '端口名称', span: 12, type: 'input',disabled: true},
resourceType: {label: '端口类型', span: 12, type: 'input',disabled: true},
resourceName: {label: '端口状态', span: 12, type: 'input', disabled: true},
ipAddress: {label: '端口适配速率(Mbps)', span: 12, type: 'input',disabled: true}
}
}],
formModel: {},
config: {labelWidth: '160px', buttonGroup: []},
echartList: [{
title: '设备CPU使用率(%)',
dataVal: {
titleVal: {textAlign: 'left', left: '1%'},
gridTop: '30%',
legend: {top: '5%', left: 'center'},
lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
dataList: [{
name: '设备CPU使用率',
data: [120, 132, 101, 134, 90, 230, 210],
}]
}
},{
title: '设备内存使用率(%)',
dataVal: {
titleVal: {textAlign: 'left', left: '1%'},
gridTop: '30%',
legend: {top: '5%', left: 'center'},
lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
dataList: [{
name: '设备内存使用率',
data: [120, 132, 101, 134, 90, 230, 210],
},{
name: 'CPU运行用户进程所花费的时间',
data: [220, 182, 191, 234, 290, 330, 310]
}]
}
}]
},{
title: '光模块sabc',
formList: [{
controls: {
id: {label: 'ID',hidden: true},
hardwareSn: {label: '光模块端口名称', span: 12, type: 'input',disabled: true}
}
}],
formModel: {},
config: {buttonGroup: []},
echartList: [{
title: '设备CPU使用率(%)',
dataVal: {
titleVal: {textAlign: 'left', left: '1%'},
gridTop: '30%',
legend: {top: '5%', left: 'center'},
lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
dataList: [{
name: '设备CPU使用率',
data: [120, 132, 101, 134, 90, 230, 210],
}]
}
},{
title: '设备内存使用率(%)',
dataVal: {
titleVal: {textAlign: 'left', left: '1%'},
gridTop: '30%',
legend: {top: '5%', left: 'center'},
lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
dataList: [{
name: '设备内存使用率',
data: [120, 132, 101, 134, 90, 230, 210],
},{
name: 'CPU运行用户进程所花费的时间',
data: [220, 182, 191, 234, 290, 330, 310]
}]
}
}]
}];
},
// 监听事件
callback(result, dataVal, formVal) {
if (result && result.fnCode) {
@@ -123,5 +263,11 @@
}
}
</script>
<style>
<style scoped>
::v-deep .el-collapse-item__header {
background-color: #d4e3fc!important;
/*color: #fff!important;*/
padding-left: 20px;
font-size: 1rem;
}
</style>

88
src/views/disRevenue/resource/resMonitor/digitalSuper.vue Normal file
View File

@@ -0,0 +1,88 @@
<template>
<div>
<div class="w100 plr-20" style="font-size: 14px">
<div v-for="item of formListTow" class="w50 disInlineBlock p10">
<span class="w50 disInlineBlock">{{item.name}}</span><span class="w50">{{item.value}}</span>
</div>
</div>
<div v-for="item of resultData" class="w100 mt20 mb20" style="height: 200px;border-top: 1px solid #d8dce5">
<EchartsLine class="w100 h100" :lineData="item.dataVal" :title="item.title"></EchartsLine>
</div>
</div>
</template>
<script setup>
import EchartsLine from "@/components/echartsList/line.vue";
export default {
name: 'ResMonitorDigitalSuper',
components: {EchartsLine},
data() {
return {
formListTow: [],
paramsData: {},
resultData: [{
title: '设备CPU使用率(%)',
dataVal: {
titleVal: {textAlign: 'left', left: '1%'},
gridTop: '30%',
legend: {top: '5%', left: 'center'},
lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
dataList: [{
name: '设备CPU使用率',
data: [120, 132, 101, 134, 90, 230, 210],
}]
}
},{
title: '设备内存使用率(%)',
dataVal: {
titleVal: {textAlign: 'left', left: '1%'},
gridTop: '30%',
legend: {top: '5%', left: 'center'},
lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
dataList: [{
name: '设备内存使用率',
data: [120, 132, 101, 134, 90, 230, 210],
},{
name: 'CPU运行用户进程所花费的时间',
data: [220, 182, 191, 234, 290, 330, 310]
}]
}
}],
}
},
created() {
// this.paramsData = this.$route && this.$route.query;
this.fnFormList('1');
// this.switchList();
},
methods: {
// formList集合
fnFormList(num) {
let formFirst = [
{name: '系统描述', value: 'aaa'},
{name: '系统位置', value: 'aaa'},
{name: '系统Object ID', value: 'aaa'},
{name: '系统MAC地址', value: 'aaa'},
{name: '系统运行时间', value: 'aaa'},
{name: '设备名称', value: 'aaa'},
{name: '系统联系信息', value: 'aaa'},
{name: '设备软件版本', value: 'aaa'},
{name: '系统名称', value: 'aaa'},
];
let formSecond = [
{name: '总内存', value: 'aaa'},
{name: '操作系统', value: 'aaa'},
{name: '操作系统架构', value: 'aaa'},
{name: '最大进程数', value: 'aaa'},
{name: '硬盘总可用空间', value: 'aaa'},
{name: '系统启动时间', value: 'aaa'},
{name: '系统描述', value: 'aaa'},
{name: '系统正常运行时间', value: 'aaa'},
{name: '系统本地时间', value: 'aaa'},
{name: 'CPU数量', value: 'aaa'},
];
this.formListTow = num && num === '1' ? formFirst : formSecond;
},
}
}
</script>

82
src/views/index.vue
View File

@@ -5,9 +5,10 @@
<div v-for="(item,index) of headerList" class="h100 disInlineBlock" :style="`margin-right:${index + 1 === headerList.length ? 'none' : '1.3%'}`"
style="width: 24%;padding: 10px 15px;border: 1px solid #d8dce6;border-radius: 10px;vertical-align: bottom;">
<div style="font-size: 14px;">{{item.title}}</div>
<div style="margin: 15px 0 10px 15px;">
<div style="margin: 15px 0 10px;">
<div class="disInlineBlock w50"><span style="font-size: 1.5rem;">{{item.num}}</span><span>{{item.unit}}</span></div>
<img src="@/assets/images/line.png" class="fr" width="100" alt="">
<img v-if="item && item.type === 'switch'" src="@/assets/images/switch.png" class="fr" width="100" height="35px" alt="">
<img v-else src="@/assets/images/line.png" class="fr" width="100" alt="">
</div>
<div style="font-size: 10px;">{{item.lastVal}} <span>{{item.lastNum}}</span></div>
</div>
@@ -18,7 +19,7 @@
<EchartsPie :dataList="dataList[0]" class="w100 h100"></EchartsPie>
</div>
<div class="disInlineBlock h100" style="width: 49.4%;border: 1px solid #d8dce6;border-radius: 10px;margin: 0 1.3%;">
<EchartsBar :barData="lineDataParams" :title="`当日业务的在线设备数量统计TOP10`" class="w100 h100"></EchartsBar>
<EchartsBar :barData="lineDataParams" :title="`当日业务的在线设备数量统计TOP`+ lineDataParams.data.length" class="w100 h100"></EchartsBar>
</div>
<div class="disInlineBlock h100" style="width: 24%;border: 1px solid #d8dce6;border-radius: 10px;">
<EchartsPie :dataList="dataList[1]" class="w100 h100"></EchartsPie>
@@ -28,7 +29,7 @@
<div class="w100" style="height: 44%;margin: 1% 0 0;">
<div class="disInlineBlock h100 p10" style="width: 49.5%;border: 1px solid #d8dce6;border-radius: 10px;margin-right: 1%;vertical-align: middle;">
<div style="font-size: 14px;height: 10%">
<span>服务器宽带收益</span>
<span>服务器带宽收益</span>
<span @click="routerLine(1)" style="float: right;font-size: 12px; color: #0d52d9;cursor: pointer;">更多 >></span>
</div>
<div style="height: 90%;overflow: scroll;" class="newSty">
@@ -55,6 +56,7 @@
import TableList from "@/components/table/index.vue";
import {listBandWidth} from "@/api/disRevenue/earnManage"
import {listTopology} from "@/api/disRevenue/resource"
import {countBusiness, sumTrafficByServer, sumTrafficBySwitch, countSwitchNum, serverOnlineRate, countDeviceNumTop5} from "@/api/homeIndex";
export default {
name: "Index",
components: {EchartsPie, EchartsLine, EchartsBar, TableList},
@@ -63,10 +65,10 @@ export default {
// 版本号
version: "3.6.6",
headerList: [
{title: '当前在线服务器的流量相关的业务数', num: '76800', unit: '个'},
{title: '当前在线服务器发送带宽总流量', num: '1126', unit: 'Mbps'},
{title: '当前在线交换机接收带宽总流量', num: '1140', unit: 'Mbps'},
{title: '交换机在线数量', num: '1111', unit: '个', lastVal: '交换机注册总数', lastNum: '11112222'},
{title: '当前在线服务器的流量相关的业务数', num: '0', unit: '个'},
{title: '当前在线服务器发送带宽总流量', type: 'switch', num: '0', unit: 'Mbps'},
{title: '当前在线交换机接收带宽总流量', type: 'switch', num: '0', unit: 'Mbps'},
{title: '交换机在线数量', num: '0', unit: '个', lastVal: '交换机注册总数', lastNum: '0'},
],
lineDataParams: {
titleVal: {x: '1%', y: '3%',fontSize: 14, textAlign: 'left'},
@@ -77,18 +79,18 @@ export default {
hidAxisLabel: true,
hidSplitLine: true,
name: ' ',
linexData: ['业务名称1', '业务名称2', '业务名称3', '业务名称4', '业务名称5', '业务名称6', '业务名称7', '业务名称8', '业务名称9', '业务名称10'],
data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 10]
lineXData: [],
data: []
},
dataList: [{
titleVal: {title: '服务器在线率', show: true, x: '1%', y: '3%', textAlign: 'left'},
centerVal: '82%',
centerVal: '0%',
lastVal: '在线率',
color: ['#0d52d9', '#bbc4d2'],
radius: ['60%', '70%'],
data: [
{ value: 82, name: '在线' },
{ value: 28, name: '总数' }
{ value: 0, name: '在线' },
{ value: 0, name: '总数' }
]
},{
titleVal: {title: '资源告警处理情况', show: true, x: '1%', y: '3%', textAlign: 'left'},
@@ -136,8 +138,62 @@ export default {
created() {
this.serverTableList();
this.resMonitorTableList();
this.getCountBusiness();
this.getSumTrafficByServer();
this.getSumTrafficBySwitch();
this.getCountSwitchNum();
this.getServerOnlineRate();
this.getCountDeviceNumTop5();
},
methods: {
getCountBusiness(){
countBusiness().then(res => {
this.headerList[0].num = res && res.data;
});
},
getSumTrafficByServer(){
sumTrafficByServer().then(res => {
this.headerList[1].num = res && res.data;
});
},
getSumTrafficBySwitch(){
sumTrafficBySwitch().then(res => {
this.headerList[2].num = res && res.data;
});
},
getCountSwitchNum(){
countSwitchNum().then(res => {
this.headerList[3].num = res && res.onlineCount;
this.headerList[3].lastNum = res && res.total;
});
},
getServerOnlineRate(){
serverOnlineRate().then(res => {
if (res) {
let newParams = {
centerVal: res.onlineRate + '%',
data: [
{value: res && res.onlineCount, name: '在线'},
{value: res && res.offlineCount, name: '总数'}
]
};
this.dataList[0] = Object.assign({}, this.dataList[0], newParams);
}
});
},
getCountDeviceNumTop5(){
countDeviceNumTop5().then(res => {
console.log('4444===',res);
let lineXData = [];
let dataList = [];
res && res.data.forEach(item => {
lineXData.push(item.businessName);
dataList.push(item.total);
});
this.lineDataParams['lineXData'] = lineXData;
this.lineDataParams['data'] = dataList;
});
},
serverTableList() {
listBandWidth(this.serQueryParams).then(response => {
this.serTableList = response.rows;