首页和资源监控
This commit is contained in:
康冉冉
@@ -1,59 +1,77 @@
|
||||
<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>
|
||||
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" label-width="auto">
|
||||
<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>
|
||||
<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>
|
||||
<!-- <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">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user