280 lines
10 KiB
Vue
280 lines
10 KiB
Vue
<template>
|
|
<div class="app-container pageTopForm">
|
|
<div class="w100 mb10" style="height: 125px;font-size: 14px">
|
|
<div v-for="(item,index) of headerList" class="disInlineBlock h100 verticalAlign" :style="`margin-right:${index + 1 === headerList.length ? 'none' : '1%'}`"
|
|
style="width: 32.66%; border: 1px solid #d8dce6;border-radius: 10px;padding: 10px 20px;">
|
|
<div>{{item.title}}</div>
|
|
<div class="mtb10">{{item.percent}}%</div>
|
|
<el-progress :percentage="item.percent" :show-text="false"></el-progress>
|
|
<div class="mt10" style="font-size: 12px">
|
|
<span><span class="mr10">{{item.btmOne}}</span>{{item.numOne}}</span>
|
|
<template v-if="index + 1 === headerList.length">
|
|
<br/>
|
|
<span><span class="mr10">{{item.btmTow}}</span>{{item.numTow}}</span>
|
|
</template>
|
|
<span v-else class="ml20"><span class="mr10">{{item.btmTow}}</span>{{item.numTow}}</span>
|
|
</div>
|
|
</div>
|
|
</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="80px">
|
|
<el-col :span="7">
|
|
<el-form-item label="搜索" prop="switchName">
|
|
<el-input
|
|
v-model="queryParams.switchName"
|
|
placeholder="请输入硬件SN/资源名称/IP地址"
|
|
clearable
|
|
@keyup.enter="handleQuery"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="资源类型" prop="bandwidthType">
|
|
<el-select
|
|
v-model="queryParams.bandwidthType"
|
|
placeholder="请选择资源类型"
|
|
clearable>
|
|
<el-option
|
|
v-for="dict in dict.type.rm_topology_type"
|
|
:key="dict.value"
|
|
:label="dict.label"
|
|
:value="dict.value"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="在线状态" prop="status">
|
|
<el-select
|
|
v-model="queryParams.status"
|
|
placeholder="请选择在线状态"
|
|
clearable>
|
|
<el-option
|
|
v-for="dict in dict.type.rm_topology_type"
|
|
:key="dict.value"
|
|
:label="dict.label"
|
|
:value="dict.value"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<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 :columns="columns" :config="config" :queryParams="queryParams" :tableList="roleList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
|
|
<template #tempType="{ row, column }">
|
|
<dict-tag :options="dict.type.rm_topology_type" :value="row.connectedDeviceType"/>
|
|
</template>
|
|
</TableList>
|
|
</pane>
|
|
</splitpanes>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
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, Splitpanes, Pane},
|
|
dicts: ['rm_topology_type'],
|
|
data() {
|
|
return {
|
|
loading: true,
|
|
// 部门名称
|
|
deptName: undefined,
|
|
// 所有部门树选项
|
|
deptOptions: undefined,
|
|
defaultProps: {
|
|
children: "children",
|
|
label: "label"
|
|
},
|
|
|
|
showSearch: true,
|
|
roleList: [],
|
|
queryParams: {
|
|
total: 0,
|
|
pageNum: 1,
|
|
pageSize: 10
|
|
},
|
|
// 列显隐信息
|
|
columns: {
|
|
id: { label: `ID`, visible: false },
|
|
switchSn: { label: `硬件SN`,visible: true},
|
|
switchName: { label: `资源名称`, visible: true },
|
|
interfaceName: { label: `ip地址`, visible: true },
|
|
connectedDeviceType: { label: `监控项`, slotName: 'tempType', visible: true },
|
|
serverName: { label: `自动发现项`, visible: true},
|
|
serverSn: { label: `CPU使用率%`,visible: true},
|
|
serverPort: { label: `内存使用率`, visible: true }
|
|
},
|
|
config: {
|
|
searcherForm: [
|
|
{label: '交换机名称', prop: 'roleName', type: 'selset', options: []}
|
|
],
|
|
tableButton: {
|
|
// top: [
|
|
// {content: '导出', fnCode: 'export', type: 'primary', icon: 'el-icon-download', hasPermi: 'disRevenue:resource:resMonitor:export'},
|
|
// ],
|
|
line: [
|
|
{content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'disRevenue:resource:resMonitor:details'},
|
|
]
|
|
}
|
|
},
|
|
headerList: [
|
|
{title: '服务器在线率', percent: 50, btmOne: '服务器在线数', numOne: '1000', btmTow: '服务器总数', numTow: '2000'},
|
|
{title: '交换机在线率', percent: 50, btmOne: '交换机在线数', numOne: '1000', btmTow: '交换机总数', numTow: '2000'},
|
|
{title: '服务器整体发送带宽利用率', percent: 50, btmOne: '服务器发送带宽总量', numOne: '10020 Mbps', btmTow: '服务器总带宽', numTow: '2000000 Mbps'},
|
|
],
|
|
dataList: [{
|
|
centerVal: '56',
|
|
unit: '台',
|
|
center: ['20%', '50%'],
|
|
color: ['#31bb42', '#f96602'],
|
|
data: [
|
|
{ value: 36, name: '在线服务器' },
|
|
{ value: 20, name: '离线服务器' }
|
|
]
|
|
},{
|
|
centerVal: '10',
|
|
unit: '台',
|
|
center: ['20%', '50%'],
|
|
color: ['#1c7dbc', '#f80a4f'],
|
|
data: [
|
|
{ value: 8, name: '在线交换机' },
|
|
{ value: 2, name: '离线交换机' }
|
|
]
|
|
},{
|
|
centerVal: '82',
|
|
unit: '%',
|
|
center: ['20%', '50%'],
|
|
color: ['#1a7aff', '#f96602'],
|
|
data: [
|
|
{ value: 82, name: '服务器整体带宽利用率' },
|
|
{ value: 18, name: '离线交换机' }
|
|
]
|
|
}]
|
|
}
|
|
},
|
|
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;
|
|
listTopology(this.addDateRange(this.queryParams)).then(response => {
|
|
this.roleList = response.rows;
|
|
this.queryParams.total = response.total;
|
|
this.loading = false;
|
|
})
|
|
},
|
|
// 处理子组件传递的新值
|
|
handleValueChange(newValue) {
|
|
// 父组件更新自身数据，实现同步
|
|
this.showSearch = newValue;
|
|
// console.log('父组件拿到新值:', newValue);
|
|
},
|
|
/** 搜索按钮操作 */
|
|
handleQuery() {
|
|
this.queryParams.pageNum = 1;
|
|
this.getList();
|
|
},
|
|
|
|
/** 重置按钮操作 */
|
|
resetQuery() {
|
|
this.resetForm("queryRef");
|
|
this.handleQuery();
|
|
},
|
|
|
|
callback(result, rowData, selectChange) {
|
|
if (result && result.fnCode) {
|
|
switch (result.fnCode) {
|
|
case 'add':
|
|
this.$router.push({
|
|
path:'/disRevenue/resource/topology/edit/index'});
|
|
break;
|
|
case 'edit':
|
|
this.$router.push({
|
|
path:'/disRevenue/resource/topology/edit/index',
|
|
query:{
|
|
id: rowData.id
|
|
}
|
|
});
|
|
break;
|
|
case 'delete':
|
|
this.$modal.confirm('是否确认删除数据项？').then(function() {
|
|
return delTopology(selectChange)
|
|
}).then(() => {
|
|
this.getList();
|
|
this.$modal.msgSuccess("删除成功")
|
|
}).catch(() => {});
|
|
break;
|
|
case 'export':
|
|
let dataList = [];
|
|
Object.keys(this.columns).forEach(item => {
|
|
if (item.visible) {
|
|
dataList.push(item.prop);
|
|
}
|
|
});
|
|
this.download("/system/management/export", {
|
|
properties: dataList,
|
|
}, `拓扑管理_${new Date().getTime()}.xlsx`);
|
|
break;
|
|
default:
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
::v-deep .lastBtnSty .el-form-item__content{
|
|
margin-left: unset!important;
|
|
}
|
|
</style>
|