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

首页和资源监控

Browse Source
This commit is contained in:
康冉冉
2025-08-29 17:21:52 +08:00
parent fd38d86bf1
commit 5c5f144e60
8 changed files with 458 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

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

@@ -80,6 +80,9 @@ div:focus {
.plr-50 {
padding: 0 50px;
}
.p10 {
padding: 10px;
}
.p15 {
padding: 15px;
}
@@ -220,6 +223,9 @@ aside {
.w30 {
width: 30%;
}
.w40 {
width: 40%;
}
.w45 {
width: 45%;
}

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

@@ -36,7 +36,7 @@
this.num = Math.floor(Math.random() * 9000);
},
mounted() {
console.log('barData=',this.barData);
// console.log('barData=',this.barData);
if (this.barData && this.barData.hiddenTime) {
this.getList(this.title,this.barData)
}
@@ -44,13 +44,20 @@
methods: {
getList(title, dataXY) {
const barDataListIntance = echarts.init(document.getElementById('barChart' + this.num));
let option = {
title: [{
let titleSet = {};
if (dataXY && dataXY.titleVal) {
titleSet = {
text: title,
x: '50%',
y: '3%',
textAlign: 'center',
}],
x: dataXY && dataXY.titleVal && dataXY.titleVal.x || '50%',
y: dataXY && dataXY.titleVal && dataXY.titleVal.y || '3%',
textAlign: dataXY && dataXY.titleVal && dataXY.titleVal.textAlign || 'center',
textStyle: {
fontSize: 14
},
};
}
let option = {
title: [titleSet],
tooltip: {
trigger: 'axis',
axisPointer: {
@@ -58,7 +65,7 @@
}
},
grid: {
top: '20%',
top: dataXY && dataXY.gridTop || '20%',
left: '3%',
right: '4%',
bottom: '3%',
@@ -66,17 +73,36 @@
},
xAxis: [
{
type: 'category',
data: dataXY.lineXData,
axisTick: {
type: dataXY && dataXY.yAxis ? 'value' :'category',
data: dataXY && dataXY.yAxis ? [] : dataXY.lineData,
// 去掉x轴线
axisLine: { show: false },
// 去掉x轴刻度线
axisTick: { show: false },
// 去掉X轴网格线（竖向网格）
splitLine: { show: false },
// x轴标签样式（保留标签便于阅读）
axisLabel: {
show: false
},
}
}
],
yAxis: [
{
type: 'value',
name: '单位Mbps'
type: dataXY && dataXY.yAxis ? 'category' :'value',
name: dataXY.name || '单位Mbps',
inverse: true,
// 去掉y轴线
axisLine: { show: false },
// 去掉y轴刻度线
axisTick: { show: false },
// 去掉y轴网格线（横向网格）
splitLine: { show: false },
// Y轴标签样式（保留标签便于阅读）
axisLabel: {
show: true
},
data: dataXY && dataXY.yAxis ? dataXY.lineData : [],
}
],
series: [
@@ -84,7 +110,11 @@
// name: 'Direct',
type: 'bar',
barWidth: '60%',
data: dataXY.data
data: dataXY.data,
label: {
show: dataXY && dataXY.seriesLabel || false,
position: 'insideLeft',
}
}
]
};
@@ -96,7 +126,10 @@
dataChangeValue(val, days) {
// console.log(props.chartData(val));
this.getList(this.title, {data: this.barData.data, lineXData: days});
// this.getList(this.title, {data: this.barData.data, lineData: days, yAxis: this.barData && this.barData.yAxis});
let newbarData = {...this.barData};
newbarData['lineData'] = days;
this.getList(this.title, newbarData);
}
}
}

175
src/components/echartsList/pie.vue
View File

@@ -35,70 +35,161 @@
methods: {
getList(dataList) {
const pieDataListIntance = echarts.init(document.getElementById('pieChart' + this.num));
let titleSet = {};
if (dataList && dataList.titleVal) {
titleSet = {
show: dataList && dataList.titleVal && dataList.titleVal.show || false,
text: dataList && dataList.titleVal && dataList.titleVal.title || '',
x: dataList && dataList.titleVal && dataList.titleVal.x || '50%',
y: dataList && dataList.titleVal && dataList.titleVal.y || '3%',
textAlign: dataList && dataList.titleVal && dataList.titleVal.textAlign || 'center',
textStyle: {
fontSize: 14
},
};
}
let option = {
title: titleSet,
color: dataList.color,
// title: [
// {
// text: `${dataList.centerVal}${dataList.unit}`,
// left: "16%",
// top: "43%",
// textStyle: {
// fontSize: 18,
// fontWeight: "bold",
// color: "#333",
// },
// }
// ],
legend: {
// orient: 'vertical', // 垂直排列
top: 'bottom', // 垂直居中
// right: 1, // 距离右侧40px
itemWidth: 12, // 图例标记宽度
itemHeight: 12, // 图例标记高度
itemGap: 20, // 图例项间距
textStyle: {
fontSize: 14,
fontSize: 12,
color: '#333'
},
formatter: function(name) {
// 查找对应数据项
const item = dataList.data.find(item => item.name === name);
// 返回带数量的图例文本
return `${name} ${item.value}${dataList.unit}`;
}
// formatter: function(name) {
// // 查找对应数据项
// const item = dataList.data.find(item => item.name === name);
// // 返回带数量的图例文本
// return `${name} ${item.value}${dataList.unit}`;
// }
},
series: [{
name: 'Access From',
type: 'pie',
radius: dataList && dataList.radius || ['40%', '70%'],
// center: dataList && dataList.center || ['20%', '50%'],
label: {
show: false,
position: 'center'
normal: {
show: true,
position: 'center',
color: '#333',
fontSize: 16,
formatter: function () {
// let total = 0;
// for (let i = 0; i < m2R2Data.length; i++) {
// const val = parseFloat(m2R2Data[i].value);
// if (!isNaN(val)) total += val;
// }
return `{value|${dataList.centerVal}}\n{unit|${dataList.lastVal}}`;
},
rich: {
value: {
fontSize: 24,
fontFamily: 'HarmonyOS Sans SC',
fontweight: 'bold',
color: '#333',
},
unit: {
fontFamily: 'HarmonyOS Sans SC',
fontSize: 10,
color: '#333',
},
},
emphasis: {
label: {
show: false,
}
},
labelLine: {
show: false
},
data: dataList.data
}],
graphic: [{
type: 'text',
left: 'center',
top: 'middle',
style: {
text: `${dataList.centerVal}${dataList.unit}`,
textBaseline: 'middle',
textAlign: 'center',
fontSize: 20,
fill: '#333'
}
}],
// graphic: [{
// type: 'text',
// left: 'center',
// top: 'middle',
// style: {
// text: `${dataList.centerVal}\n${dataList.lastVal}`,
// textBaseline: 'middle',
// textAlign: 'center',
// fontSize: 20,
// fill: '#333'
// }
// }],
};
// let option = {
// title: {
// text: '{a|' + Math.round((dataList.value * 100) / dataList.total) + '%}\n{b|' + dataList.lastVal + '}', // 显示标题
// show: true, // 是否显示
// x: 'center', // x轴位置
// y: 'center', // y轴位置
// textStyle: { // 样式配置
// rich: {
// a: {
// fontSize: 24, // 字体大小
// color: '#333333', // 字体颜色
// padding: [0, 0, 5, 0], // 边距
// },
// b: {
// fontSize: 14, // 字体大小
// color: '#808080', // 字体颜色
// },
// },
// },
// },
// angleAxis: {
// max: dataList.total,
// clockwise: false, // 逆时针
// // 隐藏刻度线
// show: false,
// // 开始的角度
// startAngle: 180
// },
// radiusAxis: {
// type: 'category',
// show: true,
// axisLabel: {
// show: false, // 是否显示标签
// },
// axisLine: {
// show: false, // 是否显示轴线
// },
// axisTick: {
// show: false, // 是否显示刻度
// },
// },
// polar: [
// {
// radius: ['54%', '66%'] //图形大小
// }
// ],
// series: [
// {
// type: 'bar',
// z: 10,
// data: [dataList.value], // 数据
// coordinateSystem: 'polar', // 坐标
// roundCap: true, // 是否在环形柱条两侧使用圆弧效果
// barWidth: 20, // 大的占比环
// itemStyle: { // 图形样式
// normal: {
// color: "#2A91D9",
// }
// }
// },
// {
// type: 'pie',
// name: '内层细圆环',
// radius: ['55%', '65%'], // 饼图的半径
// hoverAnimation: false, // 悬浮突出
// itemStyle: { // 图形样式
// color: "#DFE0EF", // 颜色
// },
// label: {
// show: false // 是否显示
// },
// data: [dataList.total]
// }
// ]
// };
pieDataListIntance.setOption(option);
// window.addEventListener("resize", () => {
// pieDataListIntance.resize()

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

@@ -11,7 +11,7 @@
</el-row>
<!-- 表格数据 -->
<el-table v-loading="loading" :data="tableList" ref="selChangeList" @selection-change="handleSelectionChange">
<el-table-column v-if="!config.colHiddenCheck" type="selection" width="55" align="center" />
<el-table-column v-if="!config && config.colHiddenCheck" type="selection" width="55" align="center" />
<template v-for="(column, key, index) of columns">
<el-table-column :label="column.label" :key="key" :prop="key" :width="column.width" min-width="100px" v-if="column && column.visible" align="center" :show-overflow-tooltip="true">
<!-- 插槽 自定义列表表头数据格式 -->
@@ -72,7 +72,9 @@
},
config: {
type: Object,
default: () => {}
default: () => ({
colHiddenCheck: false
})
}
},
data() {

56
src/views/disRevenue/resource/register/handle.vue
View File

@@ -43,28 +43,24 @@
hardwareSn: {label: '硬件SN', span: 12, type: 'input',
disabled: objVal && objVal.id ? true : false, rules: [{required: true, message: '请输入硬件SN', trigger: 'blur'}]},
resourceName: {label: '资源名称', span: 12, type: 'input'},
resourceType: {label: '资源类型', span: 12, type: 'radio',
options: this.dict.type.rm_register_resource_type},
resourceType: {label: '资源类型', span: 12, type: 'radio', options: this.dict.type.rm_register_resource_type},
ipAddress: {label: 'IP地址', span: 12, type: 'input'},
protocol: {label: '协议', span: 12, type: 'radio',
options: this.dict.type.rm_register_protocol,},
resourcePort: {label: '端口', span: 8, type: 'select', eventName: 'change',
options: this.dict.type.rm_register_port, rules: [{required: true, message: '请输入硬件SN', trigger: 'blur'}]},
otherPortName: {label: ' ', span: 4, type: 'input',
hidden: objVal && objVal.resourcePort === '2' ? false : true},
resourceVersion: {label: '版本', span: 12, type: 'radio',
options: this.dict.type.rm_register_version,hidden: objVal && objVal.resourcePort === '1' ? false : true},
securityLevel: {label: '安全级别', span: 12, type: 'radio',
options: this.dict.type.rm_register_security_level,hidden: objVal && objVal.resourcePort === '1' ? false : true},
protocol: {label: '协议', span: 12, type: 'radio', options: this.dict.type.rm_register_protocol,},
resourcePort: {label: '端口', span: 12, type: 'input', rules: [{required: true, message: '请输入硬件SN', trigger: 'blur'}]},
// otherPortName: {label: ' ', span: 4, type: 'input',
// hidden: objVal && objVal.resourcePort === '2' ? false : true},
snmp: {label: 'SNMP探测', span: 12, type: 'radio', eventName: 'change', options: this.dict.type.rm_register_version},
resourceVersion: {label: 'SNMP版本', span: 12, type: 'radio',
options: this.dict.type.rm_register_version,hidden: objVal && objVal.snmp === '1' ? false : true},
// securityLevel: {label: '安全级别', span: 12, type: 'radio',
// options: this.dict.type.rm_register_security_level,hidden: objVal && objVal.resourcePort === '1' ? false : true},
rwPermission: {label: '读写权限', span: 12, type: 'radio',
options: this.dict.type.rm_register_permission,hidden: objVal && objVal.resourcePort === '1' ? false : true},
resourceUserName: {label: '用户名', span: 12, type: 'input',
hidden: objVal && objVal.resourcePort === '1' ? false : true},
encryption: {label: '加密方式', span: 12, type: 'radio',
options: this.dict.type.rm_register_encryption,hidden: objVal && objVal.resourcePort === '1' ? false : true},
resourcePwd: {label: '密码', span: 12, type: 'input',
hidden: objVal && objVal.resourcePort === '1' ? false : true},
description: {label: '描述', span: 12, type: 'textarea'},
options: this.dict.type.rm_register_permission,hidden: objVal && objVal.snmp === '1' ? false : true},
resourceUserName: {label: '团体名称', span: 12, type: 'input', hidden: objVal && objVal.snmp === '1' ? false : true},
// encryption: {label: '加密方式', span: 12, type: 'radio',
// options: this.dict.type.rm_register_encryption,hidden: objVal && objVal.resourcePort === '1' ? false : true},
resourcePwd: {label: 'SNMP采集地址', span: 12, type: 'input', hidden: objVal && objVal.snmp === '1' ? false : true},
description: {label: '描述', span: 24, type: 'textarea'},
// customerName: {label: '设备业务客户', span: 12, type: 'input'},
// serviceNumber: {label: '业务号', span: 12, type: 'input'},
}
@@ -84,24 +80,24 @@
callback(result, dataVal, formVal) {
if (result && result.fnCode) {
switch (result.fnCode) {
case 'resourcePort':
case 'snmp':
if (dataVal === '1') {
this.formList[0].controls.otherPortName['hidden'] = true;
// this.formList[0].controls.otherPortName['hidden'] = true;
this.formList[0].controls.resourceVersion['hidden'] = false;
this.formList[0].controls.securityLevel['hidden'] = false;
// this.formList[0].controls.securityLevel['hidden'] = false;
this.formList[0].controls.rwPermission['hidden'] = false;
this.formList[0].controls.resourceVersion['hidden'] = false;
this.formList[0].controls.encryption['hidden'] = false;
// this.formList[0].controls.resourceVersion['hidden'] = false;
// this.formList[0].controls.encryption['hidden'] = false;
this.formList[0].controls.resourcePwd['hidden'] = false;
this.formList[0].controls.resourceUserName['hidden'] = false;
} else {
this.formList[0].controls.otherPortName['hidden'] = false;
// this.formList[0].controls.otherPortName['hidden'] = false;
this.formList[0].controls.resourceVersion['hidden'] = true;
this.formList[0].controls.securityLevel['hidden'] = true;
// this.formList[0].controls.securityLevel['hidden'] = true;
this.formList[0].controls.rwPermission['hidden'] = true;
this.formList[0].controls.resourceVersion['hidden'] = true;
this.formList[0].controls.resourceUserName['hidden'] = true;
this.formList[0].controls.encryption['hidden'] = true;
// this.formList[0].controls.resourceVersion['hidden'] = true;
// this.formList[0].controls.resourceUserName['hidden'] = true;
// this.formList[0].controls.encryption['hidden'] = true;
this.formList[0].controls.resourcePwd['hidden'] = true;
}
break;

59
src/views/disRevenue/resource/resMonitor/index.vue
View File

@@ -1,8 +1,23 @@
<template>
<div class="app-container pageTopForm">
<div style="height: 200px;">
<EchartsPie v-for="item of dataList" :dataList="item" style="width: 33%;" class="h100 disInlineBlock"></EchartsPie>
<!-- <div style="height: 200px;">-->
<!-- <EchartsPie v-for="item of dataList" :dataList="item" style="width: 33%;" class="h100 disInlineBlock"></EchartsPie>-->
<!-- </div>-->
<el-row :gutter="20">
<splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
<!--部门数据-->
<pane size="16">
<el-col>
<div class="head-container">
<el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
</div>
<div class="head-container">
<el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current @node-click="handleNodeClick" />
</div>
</el-col>
</pane>
<!--用户数据-->
<pane size="84">
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" label-width="auto">
<el-col :span="7">
<el-form-item label="搜索" prop="switchName">
@@ -54,6 +69,9 @@
<dict-tag :options="dict.type.rm_topology_type" :value="row.connectedDeviceType"/>
</template>
</TableList>
</pane>
</splitpanes>
</el-row>
</div>
</template>
@@ -61,13 +79,25 @@
import TableList from "@/components/table/index.vue"
import EchartsPie from "@/components/echartsList/pie.vue"
import {listTopology, delTopology} from "@/api/disRevenue/resource"
import {deptTreeSelect } from "@/api/system/user"
import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css"
export default {
name: 'ResMonitor',
components: {TableList,EchartsPie},
components: {TableList,EchartsPie, Splitpanes, Pane},
dicts: ['rm_topology_type'],
data() {
return {
loading: true,
// 部门名称
deptName: undefined,
// 所有部门树选项
deptOptions: undefined,
defaultProps: {
children: "children",
label: "label"
},
showSearch: true,
roleList: [],
queryParams: {
@@ -129,10 +159,33 @@
}]
}
},
watch: {
// 根据名称筛选部门树
deptName(val) {
this.$refs.tree.filter(val)
}
},
created() {
this.getList();
this.getDeptTree();
},
methods: {
/** 查询部门下拉树结构 */
getDeptTree() {
deptTreeSelect().then(response => {
this.deptOptions = response.data;
})
},
// 筛选节点
filterNode(value, data) {
if (!value) return true
return data.label.indexOf(value) !== -1
},
// 节点单击事件
handleNodeClick(data) {
this.queryParams.deptId = data.id;
this.handleQuery();
},
/** 查询列表 */
getList() {
this.loading = true;

226
src/views/index.vue
View File

@@ -1,19 +1,49 @@
<template>
<div class="app-container home w100" style="height: calc(100vh - 85px);">
<div class="app-container home w100" style="height: calc(100vh - 85px);color: #000;">
<!-- header -->
<div class="w100" style="height: 40%;">
<div class="h100 disInlineBlock" style="width: 25%;border: 1px solid #d8dce6;border-radius: 10px">
<div class="w100" style="height: 17%;min-height: 110px;">
<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 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="">
</div>
<div style="font-size: 10px;">{{item.lastVal}} <span>{{item.lastNum}}</span></div>
</div>
</div>
<!-- middle -->
<div class="w100" style="height: 35%;margin: 1% 0;">
<div class="disInlineBlock h100" style="width: 24%;border: 1px solid #d8dce6;border-radius: 10px;">
<EchartsPie :dataList="dataList[0]" class="w100 h100"></EchartsPie>
</div>
<div class="h100 disInlineBlock" style="width: 48%;border: 1px solid #d8dce6;margin: 0 1%;border-radius: 10px">
<EchartsLine :lineData="lineDataParams" :title="``" class="w100 h100"></EchartsLine>
<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>
</div>
<div class="h100 disInlineBlock" style="width: 25%;border: 1px solid #d8dce6;border-radius: 10px">
<div class="disInlineBlock h100" style="width: 24%;border: 1px solid #d8dce6;border-radius: 10px;">
<EchartsPie :dataList="dataList[1]" class="w100 h100"></EchartsPie>
</div>
</div>
<div class="w100" style="height: 58%;margin: 1% 0;border: 1px solid #d8dce6;border-radius: 10px">
<EchartsBar :barData="lineDataParams" :title="``" class="w100 h100"></EchartsBar>
<!-- footer -->
<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 @click="routerLine(1)" style="float: right;font-size: 12px; color: #0d52d9;cursor: pointer;">更多 >></span>
</div>
<div style="height: 90%;overflow: scroll;" class="newSty">
<TableList :columns="serverColumns" :queryParams="serQueryParams" :tableList="serTableList"></TableList>
</div>
</div>
<div class="disInlineBlock h100 p10" style="width: 49.5%;border: 1px solid #d8dce6;border-radius: 10px;vertical-align: middle;">
<div style="font-size: 14px;height: 10%">
<span>资源监控</span>
<span @click="routerLine(2)" style="float: right;font-size: 12px; color: #0d52d9;cursor: pointer;">更多 >></span>
</div>
<div style="height: 90%;overflow: scroll;" class="newSty">
<TableList :columns="resMonitorColumns" :queryParams="resQueryParams" :tableList="resTableList"></TableList>
</div>
</div>
</div>
</div>
</template>
@@ -22,117 +52,121 @@
import EchartsPie from "@/components/echartsList/pie.vue"
import EchartsLine from "@/components/echartsList/line.vue"
import EchartsBar from "@/components/echartsList/bar.vue"
import TableList from "@/components/table/index.vue";
import {listBandWidth} from "@/api/disRevenue/earnManage"
import {listTopology} from "@/api/disRevenue/resource"
export default {
name: "Index",
components: {EchartsPie, EchartsLine, EchartsBar},
components: {EchartsPie, EchartsLine, EchartsBar, TableList},
data() {
return {
// 版本号
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'},
],
lineDataParams: {
titleVal: {x: '1%', y: '3%', textAlign: 'left'},
gridTop: '15%',
seriesLabel: true,
hiddenTime: true,
yAxis: true,
name: ' ',
lineData: ['业务名称1', '业务名称2', '业务名称3', '业务名称4', '业务名称5', '业务名称6', '业务名称7', '业务名称8', '业务名称9', '业务名称10'],
data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 10]
},
dataList: [{
centerVal: '56',
unit: '台',
center: ['30%', '50%'],
color: ['#31bb42', '#f96602'],
titleVal: {title: '服务器在线率', show: true, x: '1%', y: '3%', textAlign: 'left'},
centerVal: '82%',
lastVal: '在线率',
color: ['#0d52d9', '#bbc4d2'],
radius: ['60%', '70%'],
data: [
{ value: 36, name: '在线服务器' },
{ value: 20, name: '离线服务器' }
{ value: 82, name: '在线' },
{ value: 28, name: '总数' }
]
},{
centerVal: '10',
unit: '台',
center: ['30%', '50%'],
color: ['#1c7dbc', '#f80a4f'],
titleVal: {title: '资源告警处理情况', show: true, x: '1%', y: '3%', textAlign: 'left'},
centerVal: '82%',
lastVal: '告警处理率',
radius: ['60%', '70%'],
color: ['#0d52d9', '#bbc4d2'],
data: [
{ value: 8, name: '在线交换机' },
{ value: 2, name: '离线交换机' }
]
},{
centerVal: '82',
unit: '%',
center: ['30%', '50%'],
color: ['#1a7aff', '#f96602'],
data: [
{ value: 82, name: '服务器整体带宽利用率' },
{ value: 18, name: '离线交换机' }
{ value: 82, name: '已处理告警数' },
{ value: 28, name: '总告警数' }
]
}],
lineDataParams: {
hiddenTime: true,
lineXData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
data: [820, 932, 901, 934, 1290, 1330, 1320]
// 列显隐信息
serverColumns: {
id: {label: `ID`},
nodeName: {label: `节点名称`, visible: true},
businessName: {label: `业务名称`, visible: true},
effectiveBandwidth95Daily: {label: `有效95带宽值Mbps/日`, width: '160px', visible: true},
avgMonthlyBandwidth95: {label: `月均日95值Mbps`, width: '130px', visible: true}
},
serTableList:[],
serQueryParams: {
pageNum: 1,
pageSize: 5,
total: 0
},
// 列显隐信息
resMonitorColumns: {
id: { label: `ID`, visible: false },
switchName: { label: `资源名称`, visible: true },
interfaceName: { label: `ip地址`, visible: true },
serverSn: { label: `CPU使用率%`,visible: true},
serverPort: { label: `内存使用率%`, visible: true }
},
resTableList: [],
resQueryParams: {
pageNum: 1,
pageSize: 6,
total: 0
}
}
},
created() {
this.serverTableList();
this.resMonitorTableList();
},
methods: {
goTarget(href) {
window.open(href, "_blank")
serverTableList() {
listBandWidth(this.serQueryParams).then(response => {
this.serTableList = response.rows;
this.serQueryParams.total = response.total;
})
},
resMonitorTableList() {
listTopology(this.resQueryParams).then(response => {
this.resTableList = response.rows;
this.resQueryParams.total = response.total;
})
},
// 跳转页面
routerLine(num) {
if (num === 1) {
this.$router.push({path:'/earnManage/server'});
}
if (num === 2) {
this.$router.push({path:'/resource/resMonitor'});
}
}
}
}
</script>
<style scoped lang="scss">
.home {
blockquote {
padding: 10px 20px;
margin: 0 0 20px;
font-size: 17.5px;
border-left: 5px solid #eee;
::-webkit-scrollbar {
width: 0px!important;
height: 0px!important;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #eee;
}
.col-item {
margin-bottom: 20px;
}
ul {
padding: 0;
margin: 0;
}
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
color: #676a6c;
overflow-x: hidden;
ul {
list-style-type: none;
}
h4 {
margin-top: 0px;
}
h2 {
margin-top: 10px;
font-size: 26px;
font-weight: 100;
}
p {
margin-top: 10px;
b {
font-weight: 700;
}
}
.update-log {
ol {
display: block;
list-style-type: decimal;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 40px;
}
}
}
/*::v-deep .newSty .el-table {*/
/* height: 190px;*/
/* overflow-y: scroll;*/
/*}*/
</style>