309 lines
12 KiB
Vue
309 lines
12 KiB
Vue
|
<template>
|
||
|
|
<div class="app-container home w100" style="height: calc(100vh - 85px);color: #000;overflow: scroll;">
|
||
|
|
<!-- header -->
|
||
|
|
<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;">
|
||
|
|
<div class="disInlineBlock w50"><span style="font-size: 1.5rem;">{{item.num}}</span><span style="display: inline-block;margin-left: 5px">{{item.unit}}</span></div>
|
||
|
|
<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>
|
||
|
|
</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="disInlineBlock h100" style="width: 49.4%;border: 1px solid #d8dce6;border-radius: 10px;margin: 0 1.3%;">
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 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: 7%">
|
||
|
|
<span>服务器带宽收益</span>
|
||
|
|
<span @click="routerLine(1)" style="float: right;font-size: 12px; color: #0d52d9;cursor: pointer;">更多 >></span>
|
||
|
|
</div>
|
||
|
|
<div style="height: 93%;overflow: scroll;" class="newSty">
|
||
|
|
<TableList style="height: 95%" class="w100" :config="{colHiddenCheck: true, colTopHiddenIcon: true}" :columns="serverColumns" :queryParams="serQueryParams" :tableList="serTableList" @fnRenderList="serverTableList"></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: 7%">
|
||
|
|
<span>资源监控</span>
|
||
|
|
<span @click="routerLine(2)" style="float: right;font-size: 12px; color: #0d52d9;cursor: pointer;">更多 >></span>
|
||
|
|
</div>
|
||
|
|
<div style="height: 93%;overflow: scroll;" class="newSty">
|
||
|
|
<TableList style="height: 95%" class="w100" :config="{colHiddenCheck: true, colTopHiddenIcon: true}" :columns="resMonitorColumns" :queryParams="resQueryParams" :tableList="resTableList" @fnRenderList="resMonitorTableList"></TableList>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-if="echartList && echartList.length > 0" class="w100" style="height: 30%;margin: 1% 0 0">
|
||
|
|
<!-- 拖拽容器 -->
|
||
|
|
<draggable
|
||
|
|
class="w100 h100"
|
||
|
|
v-model="echartList"
|
||
|
|
:animation="150"
|
||
|
|
:handle="'.el-collapse-item__header'"
|
||
|
|
:ghost-class="'ghost-item'"
|
||
|
|
:chosen-class="'chosen-item'"
|
||
|
|
@start="onDragStart"
|
||
|
|
@end="onDragEnd">
|
||
|
|
<template v-for="(val,index) of echartList">
|
||
|
|
<el-collapse v-model="activeNames" class="w100 h100">
|
||
|
|
<el-collapse-item :title="val.title" name="1" class="w100 h100">
|
||
|
|
<EchartsLine class="w100 h100" :sideIcon="{iconName: [{name: '从首页删除',type: 'del'}]}" :lineData="val.dataVal" :chartData="(valData) => chartDataEvent(valData, val)"></EchartsLine>
|
||
|
|
</el-collapse-item>
|
||
|
|
</el-collapse>
|
||
|
|
</template>
|
||
|
|
</draggable>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import draggable from 'vuedraggable'
|
||
|
|
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"
|
||
|
|
import {countBusiness, sumTrafficByServer, sumTrafficBySwitch, countSwitchNum, serverOnlineRate, countDeviceNumTop5} from "@/api/homeIndex";
|
||
|
|
export default {
|
||
|
|
name: "Index",
|
||
|
|
components: {draggable, EchartsPie, EchartsLine, EchartsBar, TableList},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
// 版本号
|
||
|
|
version: "3.6.6",
|
||
|
|
headerList: [
|
||
|
|
{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'},
|
||
|
|
gridTop: '15%',
|
||
|
|
seriesLabel: true,
|
||
|
|
hiddenTime: true,
|
||
|
|
yAxis: true,
|
||
|
|
hidAxisLabel: true,
|
||
|
|
hidSplitLine: true,
|
||
|
|
name: ' ',
|
||
|
|
lineXData: [],
|
||
|
|
data: []
|
||
|
|
},
|
||
|
|
dataList: [{
|
||
|
|
titleVal: {title: '服务器在线率', show: true, x: '1%', y: '3%', textAlign: 'left'},
|
||
|
|
centerVal: '0%',
|
||
|
|
lastVal: '在线率',
|
||
|
|
color: ['#0d52d9', '#bbc4d2'],
|
||
|
|
radius: ['60%', '70%'],
|
||
|
|
data: [
|
||
|
|
{ value: 0, name: '在线' },
|
||
|
|
{ value: 0, name: '总数' }
|
||
|
|
]
|
||
|
|
},{
|
||
|
|
titleVal: {title: '资源告警处理情况', show: true, x: '1%', y: '3%', textAlign: 'left'},
|
||
|
|
centerVal: '82%',
|
||
|
|
lastVal: '告警处理率',
|
||
|
|
radius: ['60%', '70%'],
|
||
|
|
color: ['#0d52d9', '#bbc4d2'],
|
||
|
|
data: [
|
||
|
|
{ value: 82, name: '已处理告警数' },
|
||
|
|
{ value: 28, name: '总告警数' }
|
||
|
|
]
|
||
|
|
}],
|
||
|
|
// 列显隐信息
|
||
|
|
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,
|
||
|
|
layout: 'pager'
|
||
|
|
},
|
||
|
|
// 列显隐信息
|
||
|
|
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,
|
||
|
|
layout: 'pager'
|
||
|
|
},
|
||
|
|
// 拖拽列
|
||
|
|
activeNames: ['1'],
|
||
|
|
dragStatus: '',
|
||
|
|
echartList: [{
|
||
|
|
title: '设备CPU使用率(%)',
|
||
|
|
dataVal: {
|
||
|
|
titleVal: {textAlign: 'left', left: '1%'},
|
||
|
|
gridTop: '30%',
|
||
|
|
legend: {top: '5%', left: '10%'},
|
||
|
|
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: '10%'},
|
||
|
|
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.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 => {
|
||
|
|
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;
|
||
|
|
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'});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 拖拽开始
|
||
|
|
onDragStart(evt){
|
||
|
|
this.dragStatus = `开始拖拽：从位置 ${evt.oldIndex + 1}`;
|
||
|
|
},
|
||
|
|
// 拖拽结束（获取最新顺序）
|
||
|
|
onDragEnd (evt) {
|
||
|
|
this.dragStatus = `拖拽结束：从位置 ${evt.oldIndex + 1} → 位置 ${evt.newIndex + 1}`;
|
||
|
|
// 此时 items 已自动更新顺序，可直接使用
|
||
|
|
console.log('更新后的列表：', this.items);
|
||
|
|
},
|
||
|
|
chartDataEvent(val, itemVal) {
|
||
|
|
console.log('val===',val);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
::-webkit-scrollbar {
|
||
|
|
width: 0px!important;
|
||
|
|
height: 0px!important;
|
||
|
|
}
|
||
|
|
/*::v-deep .newSty .el-table {*/
|
||
|
|
/* height: 190px;*/
|
||
|
|
/* overflow-y: scroll;*/
|
||
|
|
/*}*/
|
||
|
|
::v-deep .el-collapse-item__header {
|
||
|
|
background-color: #d4e3fc!important;
|
||
|
|
/*color: #fff!important;*/
|
||
|
|
padding-left: 20px;
|
||
|
|
font-size: 1rem;
|
||
|
|
}
|
||
|
|
::v-deep .el-collapse-item__wrap {
|
||
|
|
height: 85%;
|
||
|
|
}
|
||
|
|
::v-deep .el-collapse-item__content {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|