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

从1.0迁移过来

Browse Source
This commit is contained in:
康冉冉
2025-10-10 13:48:09 +08:00
parent 0fc39366c1
commit 2b58b00e3b
360 changed files with 37490 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

308
src/views/index.vue Normal file
View File

@@ -0,0 +1,308 @@
<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>