ops/front
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

deving

Browse Source
This commit is contained in:
yanweidonog
2026-03-21 23:43:24 +08:00
parent 3d97443707
commit 3f028044c8
9 changed files with 455 additions and 785 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/views/ops/pages/dc/database/components/FormDialog.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<a-modal <a-modal
:visible="visible" :visible="visible"
:title="isEdit ? '编辑办公PC' : '新增办公PC'" :title="isEdit ? '编辑数据库' : '新增数据库'"
@ok="handleOk" @ok="handleOk"
@cancel="handleCancel" @cancel="handleCancel"
@update:visible="handleUpdateVisible" @update:visible="handleUpdateVisible"
@@ -20,25 +20,30 @@
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item field="name" label="办公PC名称"> <a-form-item field="name" label="数据库名称">
<a-input v-model="formData.name" placeholder="请输入办公PC名称" /> <a-input v-model="formData.name" placeholder="请输入数据库名称" />
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="20"> <a-row :gutter="20">
<a-col :span="12"> <a-col :span="12">
<a-form-item field="os" label="操作系统"> <a-form-item field="database" label="数据库类型">
<a-select v-model="formData.os" placeholder="请选择操作系统"> <a-select v-model="formData.database" placeholder="请选择数据库类型">
<a-option value="windows">Windows</a-option> <a-option value="MySQL">MySQL</a-option>
<a-option value="linux">Linux</a-option> <a-option value="PostgreSQL">PostgreSQL</a-option>
<a-option value="other">其它</a-option> <a-option value="Oracle">Oracle</a-option>
<a-option value="SQL Server">SQL Server</a-option>
<a-option value="Redis">Redis</a-option>
<a-option value="MongoDB">MongoDB</a-option>
<a-option value="Elasticsearch">Elasticsearch</a-option>
<a-option value="Other">其它</a-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item field="tags" label="标签"> <a-form-item field="version" label="版本">
<a-input v-model="formData.tags" placeholder="多个标签，逗号间隔" /> <a-input v-model="formData.version" placeholder="请输入数据库版本" />
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
@@ -52,20 +57,42 @@
<a-row :gutter="20"> <a-row :gutter="20">
<a-col :span="12"> <a-col :span="12">
<a-form-item field="ip" label="IP地址"> <a-form-item field="tags" label="标签">
<a-input v-model="formData.ip" placeholder="可以输入多个IP，逗号做分隔" /> <a-input v-model="formData.tags" placeholder="多个标签，逗号间隔" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item field="remote_port" label="远程访问端口"> <a-form-item field="ip" label="IP 地址">
<a-input v-model="formData.remote_port" placeholder="为空则不可远程访问" /> <a-input v-model="formData.ip" placeholder="请输入 IP 地址" />
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-form-item field="agent_url" label="Agent URL配置"> <a-row :gutter="20">
<a-input v-model="formData.agent_url" placeholder="请输入Agent URL配置" /> <a-col :span="12">
</a-form-item> <a-form-item field="port" label="端口">
<a-input v-model="formData.port" placeholder="请输入数据库端口" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item field="remote_access" label="远程访问">
<a-switch v-model="formData.remote_access" />
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="20">
<a-col :span="12">
<a-form-item field="agent_config" label="Agent 配置">
<a-switch v-model="formData.agent_config" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item v-if="formData.agent_config" field="agent_url" label="Agent URL">
<a-input v-model="formData.agent_url" placeholder="请输入 Agent URL" />
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="20"> <a-row :gutter="20">
<a-col :span="12"> <a-col :span="12">
@@ -74,17 +101,30 @@
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item v-if="formData.data_collection" field="collection_interval" label="采集时间"> <a-form-item v-if="formData.data_collection" field="collection_interval" label="采集间隔">
<a-select v-model="formData.collection_interval" placeholder="请选择采集时间"> <a-select v-model="formData.collection_interval" placeholder="请选择采集间隔">
<a-option :value="1">1分钟</a-option> <a-option :value="1">1 分钟</a-option>
<a-option :value="5">5分钟</a-option> <a-option :value="5">5 分钟</a-option>
<a-option :value="10">10分钟</a-option> <a-option :value="10">10 分钟</a-option>
<a-option :value="30">30分钟</a-option> <a-option :value="30">30 分钟</a-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="20">
<a-col :span="12">
<a-form-item field="status" label="状态">
<a-select v-model="formData.status" placeholder="请选择状态">
<a-option value="online">在线</a-option>
<a-option value="offline">离线</a-option>
<a-option value="maintenance">维护中</a-option>
<a-option value="retired">已退役</a-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-form-item field="remark" label="备注信息"> <a-form-item field="remark" label="备注信息">
<a-textarea <a-textarea
v-model="formData.remark" v-model="formData.remark"
@@ -122,22 +162,25 @@ const isEdit = computed(() => !!props.record?.id)
const formData = reactive({ const formData = reactive({
unique_id: '', unique_id: '',
name: '', name: '',
server_type: '', database: '',
os: '', version: '',
location: '', location: '',
tags: '', tags: '',
ip: '', ip: '',
remote_port: '', port: '',
remote_access: false,
agent_config: false,
agent_url: '', agent_url: '',
data_collection: false, data_collection: false,
collection_interval: 5, collection_interval: 5,
status: 'offline',
remark: '', remark: '',
}) })
const rules = { const rules = {
name: [{ required: true, message: '请输入办公名称' }], name: [{ required: true, message: '请输入数据库名称' }],
server_type: [{ required: true, message: '请选择办公类型' }], database: [{ required: true, message: '请选择数据库类型' }],
os: [{ required: true, message: '请选择操作系统' }], ip: [{ required: true, message: '请输入 IP 地址' }],
} }
const locationOptions = ref([ const locationOptions = ref([
@@ -158,15 +201,18 @@ watch(
Object.assign(formData, { Object.assign(formData, {
unique_id: '', unique_id: '',
name: '', name: '',
server_type: '', database: '',
os: '', version: '',
location: '', location: '',
tags: '', tags: '',
ip: '', ip: '',
remote_port: '', port: '',
remote_access: false,
agent_config: false,
agent_url: '', agent_url: '',
data_collection: false, data_collection: false,
collection_interval: 5, collection_interval: 5,
status: 'offline',
remark: '', remark: '',
}) })
} }

41
src/views/ops/pages/dc/database/config/columns.ts
View File

@@ -16,13 +16,13 @@ export const columns = [
width: 150, width: 150,
}, },
{ {
dataIndex: 'type', dataIndex: 'database',
title: '类型', title: '数据库',
width: 120, width: 120,
}, },
{ {
dataIndex: 'os', dataIndex: 'version',
title: '操作系统', title: '版本',
width: 150, width: 150,
}, },
{ {
@@ -41,40 +41,27 @@ export const columns = [
width: 150, width: 150,
}, },
{ {
dataIndex: 'remote_access', dataIndex: 'port',
title: '远程访问', title: '端口',
width: 100, width: 100,
slotName: 'remote_access',
}, },
{ {
dataIndex: 'agent_config', dataIndex: 'sys_indicator',
title: 'Agent配置', title: '系统指标',
width: 150,
slotName: 'agent_config',
},
{
dataIndex: 'cpu',
title: 'CPU使用率',
width: 150, width: 150,
slotName: 'cpu', slotName: 'cpu',
}, },
{ {
dataIndex: 'memory', dataIndex: 'qps',
title: '内存使用率', title: '数据库指标 QPS',
width: 150, width: 150,
slotName: 'memory', slotName: 'qps',
}, },
{ {
dataIndex: 'disk', dataIndex: 'conn',
title: '硬盘使用率', title: '数据库指标 Conn',
width: 150, width: 150,
slotName: 'disk', slotName: 'conn',
},
{
dataIndex: 'data_collection',
title: '数据采集',
width: 100,
slotName: 'data_collection',
}, },
{ {
dataIndex: 'status', dataIndex: 'status',

317
src/views/ops/pages/dc/database/index.vue
View File

@@ -30,73 +30,36 @@
{{ record.id }} {{ record.id }}
</template> </template>
<!-- 远程访问 --> <!-- 数据库类型 -->
<template #remote_access="{ record }"> <template #database="{ record }">
<a-tag :color="record.remote_access ? 'green' : 'gray'"> {{ record.database || '-' }}
{{ record.remote_access ? '已开启' : '未开启' }} </template>
<!-- 版本 -->
<template #version="{ record }">
{{ record.version || '-' }}
</template>
<!-- 位置信息 -->
<template #location="{ record }">
{{ record.location || '-' }}
</template>
<!-- 标签 -->
<template #tags="{ record }">
<a-tag v-for="(tag, index) in (record.tags || '').split(',').filter(t => t.trim())" :key="index">
{{ tag.trim() }}
</a-tag> </a-tag>
</template> </template>
<!-- Agent配置 --> <!-- IP 地址 -->
<template #agent_config="{ record }"> <template #ip="{ record }">
<a-tag :color="record.agent_config ? 'green' : 'gray'"> {{ record.ip || '-' }}
{{ record.agent_config ? '已配置' : '未配置' }}
</a-tag>
</template> </template>
<!-- CPU --> <!-- 端口 -->
<template #cpu="{ record }"> <template #port="{ record }">
<div class="resource-display"> {{ record.port || '-' }}
<div class="resource-info">
<span class="resource-label">CPU</span>
<span class="resource-value">{{ record.cpu_info?.value || 0 }}%</span>
</div>
<a-progress
:percent="(record.cpu_info?.value || 0) / 100"
:color="getProgressColor(record.cpu_info?.value || 0)"
size="small"
:show-text="false"
/>
</div>
</template>
<!-- 内存 -->
<template #memory="{ record }">
<div class="resource-display">
<div class="resource-info">
<span class="resource-laebl">内存</span>
<span class="resource-value">{{ record.memory_info?.value || 0 }}%</span>
</div>
<a-progress
:percent="(record.memory_info?.value || 0) / 100"
:color="getProgressColor(record.memory_info?.value || 0)"
size="small"
:show-text="false"
/>
</div>
</template>
<!-- 硬盘 -->
<template #disk="{ record }">
<div class="resource-display">
<div class="resource-info">
<span class="resource-label">硬盘</span>
<span class="resource-value">{{ record.disk_info?.value || 0 }}%</span>
</div>
<a-progress
:percent="(record.disk_info?.value || 0) / 100"
:color="getProgressColor(record.disk_info?.value || 0)"
size="small"
:show-text="false"
/>
</div>
</template>
<!-- 数据采集 -->
<template #data_collection="{ record }">
<a-tag :color="record.data_collection ? 'green' : 'gray'">
{{ record.data_collection ? '已启用' : '未启用' }}
</a-tag>
</template> </template>
<!-- 状态 --> <!-- 状态 -->
@@ -209,204 +172,124 @@ const router = useRouter()
const mockServerData = [ const mockServerData = [
{ {
id: 1, id: 1,
unique_id: 'SRV-2024-0001', unique_id: 'DB-2024-0001',
name: 'Web数据库-01', name: 'MySQL 主库 -01',
type: 'Web数据库', database: 'MySQL',
os: 'CentOS 7.9', version: '8.0.32',
location: '数据中心A-1楼-机柜01-U1', location: '数据中心 A-1 楼 - 机柜 01-U1',
tags: 'Web,应用', tags: '生产，核心，主库',
ip: '192.168.1.101', ip: '192.168.1.101',
port: '3306',
remote_access: true, remote_access: true,
agent_config: true, agent_config: true,
cpu: '8核 Intel Xeon',
memory: '32GB',
disk: '1TB SSD',
cpu_info: { value: 45, total: '8核', used: '3.6核' },
memory_info: { value: 62, total: '32GB', used: '19.8GB' },
disk_info: { value: 78, total: '1TB', used: '780GB' },
data_collection: true, data_collection: true,
status: 'online', status: 'online',
}, },
{ {
id: 2, id: 2,
unique_id: 'SRV-2024-0002', unique_id: 'DB-2024-0002',
name: '数据库数据库-01', name: 'PostgreSQL 从库 -01',
type: '数据库数据库', database: 'PostgreSQL',
os: 'Ubuntu 22.04', version: '15.2',
location: '数据中心A-1楼-机柜02-U1', location: '数据中心 A-1 楼 - 机柜 02-U1',
tags: '数据库,MySQL', tags: '生产，从库，备份',
ip: '192.168.1.102', ip: '192.168.1.102',
port: '5432',
remote_access: true, remote_access: true,
agent_config: true, agent_config: true,
cpu: '16核 AMD EPYC',
memory: '64GB',
disk: '2TB NVMe',
cpu_info: { value: 78, total: '16核', used: '12.5核' },
memory_info: { value: 85, total: '64GB', used: '54.4GB' },
disk_info: { value: 92, total: '2TB', used: '1.84TB' },
data_collection: true, data_collection: true,
status: 'online', status: 'online',
}, },
{ {
id: 3, id: 3,
unique_id: 'SRV-2024-0003', unique_id: 'DB-2024-0003',
name: '应用数据库-01', name: 'Redis 缓存 -01',
type: '应用数据库', database: 'Redis',
os: 'Windows Server 2019', version: '7.0.9',
location: '数据中心A-2楼-机柜05-U2', location: '数据中心 A-2 楼 - 机柜 05-U2',
tags: '应用,.NET', tags: '缓存，会话存储',
ip: '192.168.1.103', ip: '192.168.1.103',
port: '6379',
remote_access: false, remote_access: false,
agent_config: false, agent_config: false,
cpu: '4核 Intel Xeon',
memory: '16GB',
disk: '500GB SSD',
cpu_info: { value: 0, total: '4核', used: '0核' },
memory_info: { value: 0, total: '16GB', used: '0GB' },
disk_info: { value: 0, total: '500GB', used: '0GB' },
data_collection: false, data_collection: false,
status: 'offline', status: 'offline',
}, },
{ {
id: 4, id: 4,
unique_id: 'SRV-2024-0004', unique_id: 'DB-2024-0004',
name: '缓存数据库-01', name: 'MongoDB 集群 -01',
type: '缓存数据库', database: 'MongoDB',
os: 'CentOS 8.5', version: '6.0.5',
location: '数据中心A-2楼-机柜06-U1', location: '数据中心 A-2 楼 - 机柜 06-U1',
tags: '缓存,Redis', tags: '文档存储，日志',
ip: '192.168.1.104', ip: '192.168.1.104',
port: '27017',
remote_access: true, remote_access: true,
agent_config: true, agent_config: true,
cpu: '8核 Intel Xeon',
memory: '32GB',
disk: '1TB SSD',
cpu_info: { value: 35, total: '8核', used: '2.8核' },
memory_info: { value: 68, total: '32GB', used: '21.8GB' },
disk_info: { value: 42, total: '1TB', used: '420GB' },
data_collection: true, data_collection: true,
status: 'online', status: 'online',
}, },
{ {
id: 5, id: 5,
unique_id: 'SRV-2024-0005', unique_id: 'DB-2024-0005',
name: '文件数据库-01', name: 'Oracle 数据库 -01',
type: '文件数据库', database: 'Oracle',
os: 'Debian 11', version: '19c',
location: '数据中心B-1楼-机柜03-U1', location: '数据中心 B-1 楼 - 机柜 03-U1',
tags: '文件,NFS', tags: '财务系统，核心',
ip: '192.168.2.101', ip: '192.168.2.101',
port: '1521',
remote_access: true, remote_access: true,
agent_config: true, agent_config: true,
cpu: '12核 Intel Xeon',
memory: '48GB',
disk: '10TB HDD',
cpu_info: { value: 28, total: '12核', used: '3.4核' },
memory_info: { value: 45, total: '48GB', used: '21.6GB' },
disk_info: { value: 88, total: '10TB', used: '8.8TB' },
data_collection: true, data_collection: true,
status: 'maintenance', status: 'maintenance',
}, },
{ {
id: 6, id: 6,
unique_id: 'SRV-2024-0006', unique_id: 'DB-2024-0006',
name: '测试数据库-01', name: 'SQL Server-01',
type: '测试数据库', database: 'SQL Server',
os: 'CentOS 7.9', version: '2019',
location: '数据中心B-2楼-机柜10-U1', location: '数据中心 B-2 楼 - 机柜 10-U1',
tags: '测试,开发', tags: 'OA 系统，报表',
ip: '192.168.2.102', ip: '192.168.2.102',
port: '1433',
remote_access: false, remote_access: false,
agent_config: false, agent_config: false,
cpu: '4核 Intel Xeon',
memory: '8GB',
disk: '256GB SSD',
cpu_info: { value: 0, total: '4核', used: '0核' },
memory_info: { value: 0, total: '8GB', used: '0GB' },
disk_info: { value: 0, total: '256GB', used: '0GB' },
data_collection: false, data_collection: false,
status: 'retired', status: 'retired',
}, },
{ {
id: 7, id: 7,
unique_id: 'SRV-2024-0007', unique_id: 'DB-2024-0007',
name: '监控数据库-01', name: 'Elasticsearch-01',
type: '监控数据库', database: 'Elasticsearch',
os: 'Ubuntu 20.04', version: '8.7.0',
location: '数据中心A-1楼-机柜08-U1', location: '数据中心 A-1 楼 - 机柜 08-U1',
tags: '监控,Prometheus', tags: '搜索，日志分析',
ip: '192.168.1.105', ip: '192.168.1.105',
port: '9200',
remote_access: true, remote_access: true,
agent_config: true, agent_config: true,
cpu: '8核 Intel Xeon',
memory: '32GB',
disk: '1TB SSD',
cpu_info: { value: 55, total: '8核', used: '4.4核' },
memory_info: { value: 72, total: '32GB', used: '23.0GB' },
disk_info: { value: 65, total: '1TB', used: '650GB' },
data_collection: true, data_collection: true,
status: 'online', status: 'online',
}, },
{ {
id: 8, id: 8,
unique_id: 'SRV-2024-0008', unique_id: 'DB-2024-0008',
name: '备份数据库-01', name: 'MySQL 测试库 -01',
type: '备份数据库', database: 'MySQL',
os: 'Rocky Linux 9', version: '8.0.30',
location: '数据中心B-1楼-机柜04-U1', location: '数据中心 B-1 楼 - 机柜 04-U1',
tags: '备份,存储', tags: '测试，开发',
ip: '192.168.2.103', ip: '192.168.2.103',
port: '3307',
remote_access: true, remote_access: true,
agent_config: true, agent_config: true,
cpu: '16核 AMD EPYC',
memory: '64GB',
disk: '20TB HDD',
cpu_info: { value: 42, total: '16核', used: '6.7核' },
memory_info: { value: 38, total: '64GB', used: '24.3GB' },
disk_info: { value: 75, total: '20TB', used: '15TB' },
data_collection: true, data_collection: true,
status: 'online', status: 'online',
}, },
{
id: 9,
unique_id: 'SRV-2024-0009',
name: 'CI/CD数据库-01',
type: 'CI/CD数据库',
os: 'Ubuntu 22.04',
location: '数据中心A-2楼-机柜07-U1',
tags: 'CI/CD,Jenkins',
ip: '192.168.1.106',
remote_access: true,
agent_config: true,
cpu: '8核 Intel Xeon',
memory: '16GB',
disk: '500GB SSD',
cpu_info: { value: 68, total: '8核', used: '5.4核' },
memory_info: { value: 75, total: '16GB', used: '12GB' },
disk_info: { value: 55, total: '500GB', used: '275GB' },
data_collection: true,
status: 'online',
},
{
id: 10,
unique_id: 'SRV-2024-0010',
name: '日志数据库-01',
type: '日志数据库',
os: 'CentOS Stream 9',
location: '数据中心B-2楼-机柜12-U1',
tags: '日志,ELK',
ip: '192.168.2.104',
remote_access: true,
agent_config: true,
cpu: '12核 Intel Xeon',
memory: '48GB',
disk: '2TB SSD',
cpu_info: { value: 0, total: '12核', used: '0核' },
memory_info: { value: 0, total: '48GB', used: '0GB' },
disk_info: { value: 0, total: '2TB', used: '0TB' },
data_collection: true,
status: 'offline',
},
] ]
// 状态管理 // 状态管理
@@ -639,38 +522,4 @@ export default {
.container { .container {
margin-top: 20px; margin-top: 20px;
} }
.resource-display {
display: flex;
flex-direction: column;
gap: 4px;
padding: 4px 0;
.resource-info {
display: flex;
align-items: center;
justify-content: space-between;
> div {
display: inline-block;
}
.resource-value {
font-size: 12px;
font-weight: 500;
color: rgb(var(--text-1));
}
}
:deep(.arco-progress) {
margin: 0;
.arco-progress-bar-bg {
border-radius: 2px;
}
.arco-progress-bar {
border-radius: 2px;
transition: all 0.3s ease;
}
}
}
</style> </style>

44
src/views/ops/pages/dc/middleware/components/FormDialog.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<a-modal <a-modal
:visible="visible" :visible="visible"
:title="isEdit ? '编辑办公PC' : '新增办公PC'" :title="isEdit ? '编辑中间件' : '新增中间件'"
@ok="handleOk" @ok="handleOk"
@cancel="handleCancel" @cancel="handleCancel"
@update:visible="handleUpdateVisible" @update:visible="handleUpdateVisible"
@@ -14,31 +14,35 @@
<a-form-item field="unique_id" label="唯一标识"> <a-form-item field="unique_id" label="唯一标识">
<a-input <a-input
v-model="formData.unique_id" v-model="formData.unique_id"
placeholder="输入为空系统自动生成UUID" placeholder="输入为空系统自动生成 UUID"
:disabled="isEdit" :disabled="isEdit"
/> />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item field="name" label="办公PC名称"> <a-form-item field="name" label="中间件名称">
<a-input v-model="formData.name" placeholder="请输入办公PC名称" /> <a-input v-model="formData.name" placeholder="请输入中间件名称" />
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="20"> <a-row :gutter="20">
<a-col :span="12"> <a-col :span="12">
<a-form-item field="os" label="操作系统"> <a-form-item field="middleware" label="中间件类型">
<a-select v-model="formData.os" placeholder="请选择操作系统"> <a-select v-model="formData.middleware" placeholder="请选择中间件类型">
<a-option value="windows">Windows</a-option> <a-option value="nginx">Nginx</a-option>
<a-option value="linux">Linux</a-option> <a-option value="tomcat">Tomcat</a-option>
<a-option value="redis">Redis</a-option>
<a-option value="kafka">Kafka</a-option>
<a-option value="rabbitmq">RabbitMQ</a-option>
<a-option value="elasticsearch">Elasticsearch</a-option>
<a-option value="other">其它</a-option> <a-option value="other">其它</a-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item field="tags" label="标签"> <a-form-item field="version" label="版本">
<a-input v-model="formData.tags" placeholder="多个标签，逗号间隔" /> <a-input v-model="formData.version" placeholder="请输入版本号" />
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
@@ -50,6 +54,10 @@
/> />
</a-form-item> </a-form-item>
<a-form-item field="tags" label="标签">
<a-input v-model="formData.tags" placeholder="多个标签，逗号间隔" />
</a-form-item>
<a-row :gutter="20"> <a-row :gutter="20">
<a-col :span="12"> <a-col :span="12">
<a-form-item field="ip" label="IP地址"> <a-form-item field="ip" label="IP地址">
@@ -122,8 +130,8 @@ const isEdit = computed(() => !!props.record?.id)
const formData = reactive({ const formData = reactive({
unique_id: '', unique_id: '',
name: '', name: '',
server_type: '', middleware: '',
os: '', version: '',
location: '', location: '',
tags: '', tags: '',
ip: '', ip: '',
@@ -135,9 +143,9 @@ const formData = reactive({
}) })
const rules = { const rules = {
name: [{ required: true, message: '请输入办公名称' }], name: [{ required: true, message: '请输入中间件名称' }],
server_type: [{ required: true, message: '请选择办公类型' }], middleware: [{ required: true, message: '请选择中间件类型' }],
os: [{ required: true, message: '请选择操作系统' }], version: [{ required: true, message: '请输入版本号' }],
} }
const locationOptions = ref([ const locationOptions = ref([
@@ -158,8 +166,8 @@ watch(
Object.assign(formData, { Object.assign(formData, {
unique_id: '', unique_id: '',
name: '', name: '',
server_type: '', middleware: '',
os: '', version: '',
location: '', location: '',
tags: '', tags: '',
ip: '', ip: '',

42
src/views/ops/pages/dc/middleware/config/columns.ts
View File

@@ -16,13 +16,13 @@ export const columns = [
width: 150, width: 150,
}, },
{ {
dataIndex: 'type', dataIndex: 'middleware',
title: '类型', title: '中间件',
width: 120, width: 120,
}, },
{ {
dataIndex: 'os', dataIndex: 'version',
title: '操作系统', title: '版本',
width: 150, width: 150,
}, },
{ {
@@ -41,40 +41,16 @@ export const columns = [
width: 150, width: 150,
}, },
{ {
dataIndex: 'remote_access', dataIndex: 'sys_indicator',
title: '远程访问', title: '系统指标',
width: 100,
slotName: 'remote_access',
},
{
dataIndex: 'agent_config',
title: 'Agent配置',
width: 150,
slotName: 'agent_config',
},
{
dataIndex: 'cpu',
title: 'CPU使用率',
width: 150, width: 150,
slotName: 'cpu', slotName: 'cpu',
}, },
{ {
dataIndex: 'memory', dataIndex: 'middleware_indicator',
title: '内存使用率', title: '中间件指标',
width: 150, width: 150,
slotName: 'memory', slotName: 'middleware_indicator',
},
{
dataIndex: 'disk',
title: '硬盘使用率',
width: 150,
slotName: 'disk',
},
{
dataIndex: 'data_collection',
title: '数据采集',
width: 100,
slotName: 'data_collection',
}, },
{ {
dataIndex: 'status', dataIndex: 'status',

218
src/views/ops/pages/dc/middleware/index.vue
View File

@@ -36,16 +36,16 @@
{{ record.remote_access ? '已开启' : '未开启' }} {{ record.remote_access ? '已开启' : '未开启' }}
</a-tag> </a-tag>
</template> </template>
<!-- Agent配置 --> <!-- Agent 配置 -->
<template #agent_config="{ record }"> <template #agent_config="{ record }">
<a-tag :color="record.agent_config ? 'green' : 'gray'"> <a-tag :color="record.agent_config ? 'green' : 'gray'">
{{ record.agent_config ? '已配置' : '未配置' }} {{ record.agent_config ? '已配置' : '未配置' }}
</a-tag> </a-tag>
</template> </template>
<!-- CPU --> <!-- 系统指标 -->
<template #cpu="{ record }"> <template #sys_indicator="{ record }">
<div class="resource-display"> <div class="resource-display">
<div class="resource-info"> <div class="resource-info">
<span class="resource-label">CPU</span> <span class="resource-label">CPU</span>
@@ -59,12 +59,12 @@
/> />
</div> </div>
</template> </template>
<!-- 内存 --> <!-- 中间件指标 -->
<template #memory="{ record }"> <template #middleware_indicator="{ record }">
<div class="resource-display"> <div class="resource-display">
<div class="resource-info"> <div class="resource-info">
<span class="resource-laebl">内存</span> <span class="resource-label">内存</span>
<span class="resource-value">{{ record.memory_info?.value || 0 }}%</span> <span class="resource-value">{{ record.memory_info?.value || 0 }}%</span>
</div> </div>
<a-progress <a-progress
@@ -76,22 +76,6 @@
</div> </div>
</template> </template>
<!-- 硬盘 -->
<template #disk="{ record }">
<div class="resource-display">
<div class="resource-info">
<span class="resource-label">硬盘</span>
<span class="resource-value">{{ record.disk_info?.value || 0 }}%</span>
</div>
<a-progress
:percent="(record.disk_info?.value || 0) / 100"
:color="getProgressColor(record.disk_info?.value || 0)"
size="small"
:show-text="false"
/>
</div>
</template>
<!-- 数据采集 --> <!-- 数据采集 -->
<template #data_collection="{ record }"> <template #data_collection="{ record }">
<a-tag :color="record.data_collection ? 'green' : 'gray'"> <a-tag :color="record.data_collection ? 'green' : 'gray'">
@@ -195,8 +179,8 @@ import {
import type { FormItem } from '@/components/search-form/types' import type { FormItem } from '@/components/search-form/types'
import SearchTable from '@/components/search-table/index.vue' import SearchTable from '@/components/search-table/index.vue'
import { searchFormConfig } from './config/search-form' import { searchFormConfig } from './config/search-form'
import FormDialog from '../pc/components/FormDialog.vue' import FormDialog from './components/FormDialog.vue'
import QuickConfigDialog from '../pc/components/QuickConfigDialog.vue' import QuickConfigDialog from './components/QuickConfigDialog.vue'
import { columns as columnsConfig } from './config/columns' import { columns as columnsConfig } from './config/columns'
import { import {
fetchServerList, fetchServerList,
@@ -209,201 +193,161 @@ const router = useRouter()
const mockServerData = [ const mockServerData = [
{ {
id: 1, id: 1,
unique_id: 'SRV-2024-0001', unique_id: 'MW-2024-0001',
name: 'Web中间件-01', name: 'Nginx 服务器 -01',
type: 'Web中间件', middleware: 'nginx',
os: 'CentOS 7.9', version: '1.24.0',
location: '数据中心A-1楼-机柜01-U1', location: '数据中心 A-1 楼 -机柜 01-U1',
tags: 'Web,应用', tags: 'Web,负载均衡',
ip: '192.168.1.101', ip: '192.168.1.101',
remote_access: true, remote_access: true,
agent_config: true, agent_config: true,
cpu: '8核 Intel Xeon', cpu_info: { value: 45, total: '8 核', used: '3.6 核' },
memory: '32GB',
disk: '1TB SSD',
cpu_info: { value: 45, total: '8核', used: '3.6核' },
memory_info: { value: 62, total: '32GB', used: '19.8GB' }, memory_info: { value: 62, total: '32GB', used: '19.8GB' },
disk_info: { value: 78, total: '1TB', used: '780GB' },
data_collection: true, data_collection: true,
status: 'online', status: 'online',
}, },
{ {
id: 2, id: 2,
unique_id: 'SRV-2024-0002', unique_id: 'MW-2024-0002',
name: '数据库中间件-01', name: 'Redis 缓存 -01',
type: '数据库中间件', middleware: 'redis',
os: 'Ubuntu 22.04', version: '7.2.3',
location: '数据中心A-1楼-机柜02-U1', location: '数据中心 A-1 楼 -机柜 02-U1',
tags: '数据库,MySQL', tags: '缓存，高性能',
ip: '192.168.1.102', ip: '192.168.1.102',
remote_access: true, remote_access: true,
agent_config: true, agent_config: true,
cpu: '16核 AMD EPYC', cpu_info: { value: 78, total: '16 核', used: '12.5 核' },
memory: '64GB',
disk: '2TB NVMe',
cpu_info: { value: 78, total: '16核', used: '12.5核' },
memory_info: { value: 85, total: '64GB', used: '54.4GB' }, memory_info: { value: 85, total: '64GB', used: '54.4GB' },
disk_info: { value: 92, total: '2TB', used: '1.84TB' },
data_collection: true, data_collection: true,
status: 'online', status: 'online',
}, },
{ {
id: 3, id: 3,
unique_id: 'SRV-2024-0003', unique_id: 'MW-2024-0003',
name: '应用中间件-01', name: 'Tomcat 应用 -01',
type: '应用中间件', middleware: 'tomcat',
os: 'Windows Server 2019', version: '10.1.15',
location: '数据中心A-2楼-机柜05-U2', location: '数据中心 A-2 楼 -机柜 05-U2',
tags: '应用,.NET', tags: '应用，Java',
ip: '192.168.1.103', ip: '192.168.1.103',
remote_access: false, remote_access: false,
agent_config: false, agent_config: false,
cpu: '4核 Intel Xeon', cpu_info: { value: 0, total: '4 核', used: '0 核' },
memory: '16GB',
disk: '500GB SSD',
cpu_info: { value: 0, total: '4核', used: '0核' },
memory_info: { value: 0, total: '16GB', used: '0GB' }, memory_info: { value: 0, total: '16GB', used: '0GB' },
disk_info: { value: 0, total: '500GB', used: '0GB' },
data_collection: false, data_collection: false,
status: 'offline', status: 'offline',
}, },
{ {
id: 4, id: 4,
unique_id: 'SRV-2024-0004', unique_id: 'MW-2024-0004',
name: '缓存中间件-01', name: 'Kafka 消息队列 -01',
type: '缓存中间件', middleware: 'kafka',
os: 'CentOS 8.5', version: '3.6.0',
location: '数据中心A-2楼-机柜06-U1', location: '数据中心 A-2 楼 -机柜 06-U1',
tags: '缓存,Redis', tags: '消息队列，分布式',
ip: '192.168.1.104', ip: '192.168.1.104',
remote_access: true, remote_access: true,
agent_config: true, agent_config: true,
cpu: '8核 Intel Xeon', cpu_info: { value: 35, total: '8 核', used: '2.8 核' },
memory: '32GB',
disk: '1TB SSD',
cpu_info: { value: 35, total: '8核', used: '2.8核' },
memory_info: { value: 68, total: '32GB', used: '21.8GB' }, memory_info: { value: 68, total: '32GB', used: '21.8GB' },
disk_info: { value: 42, total: '1TB', used: '420GB' },
data_collection: true, data_collection: true,
status: 'online', status: 'online',
}, },
{ {
id: 5, id: 5,
unique_id: 'SRV-2024-0005', unique_id: 'MW-2024-0005',
name: '文件中间件-01', name: 'Elasticsearch-01',
type: '文件中间件', middleware: 'elasticsearch',
os: 'Debian 11', version: '8.11.1',
location: '数据中心B-1楼-机柜03-U1', location: '数据中心 B-1 楼 -机柜 03-U1',
tags: '文件,NFS', tags: '搜索，日志分析',
ip: '192.168.2.101', ip: '192.168.2.101',
remote_access: true, remote_access: true,
agent_config: true, agent_config: true,
cpu: '12核 Intel Xeon', cpu_info: { value: 28, total: '12 核', used: '3.4 核' },
memory: '48GB',
disk: '10TB HDD',
cpu_info: { value: 28, total: '12核', used: '3.4核' },
memory_info: { value: 45, total: '48GB', used: '21.6GB' }, memory_info: { value: 45, total: '48GB', used: '21.6GB' },
disk_info: { value: 88, total: '10TB', used: '8.8TB' },
data_collection: true, data_collection: true,
status: 'maintenance', status: 'maintenance',
}, },
{ {
id: 6, id: 6,
unique_id: 'SRV-2024-0006', unique_id: 'MW-2024-0006',
name: '测试中间件-01', name: 'RabbitMQ-01',
type: '测试中间件', middleware: 'rabbitmq',
os: 'CentOS 7.9', version: '3.12.10',
location: '数据中心B-2楼-机柜10-U1', location: '数据中心 B-2 楼 -机柜 10-U1',
tags: '测试,开发', tags: '消息队列，AMQP',
ip: '192.168.2.102', ip: '192.168.2.102',
remote_access: false, remote_access: false,
agent_config: false, agent_config: false,
cpu: '4核 Intel Xeon', cpu_info: { value: 0, total: '4 核', used: '0 核' },
memory: '8GB',
disk: '256GB SSD',
cpu_info: { value: 0, total: '4核', used: '0核' },
memory_info: { value: 0, total: '8GB', used: '0GB' }, memory_info: { value: 0, total: '8GB', used: '0GB' },
disk_info: { value: 0, total: '256GB', used: '0GB' },
data_collection: false, data_collection: false,
status: 'retired', status: 'retired',
}, },
{ {
id: 7, id: 7,
unique_id: 'SRV-2024-0007', unique_id: 'MW-2024-0007',
name: '监控中间件-01', name: 'Nginx 反向代理 -01',
type: '监控中间件', middleware: 'nginx',
os: 'Ubuntu 20.04', version: '1.25.3',
location: '数据中心A-1楼-机柜08-U1', location: '数据中心 A-1 楼 -机柜 08-U1',
tags: '监控,Prometheus', tags: '反向代理，负载均衡',
ip: '192.168.1.105', ip: '192.168.1.105',
remote_access: true, remote_access: true,
agent_config: true, agent_config: true,
cpu: '8核 Intel Xeon', cpu_info: { value: 55, total: '8 核', used: '4.4 核' },
memory: '32GB',
disk: '1TB SSD',
cpu_info: { value: 55, total: '8核', used: '4.4核' },
memory_info: { value: 72, total: '32GB', used: '23.0GB' }, memory_info: { value: 72, total: '32GB', used: '23.0GB' },
disk_info: { value: 65, total: '1TB', used: '650GB' },
data_collection: true, data_collection: true,
status: 'online', status: 'online',
}, },
{ {
id: 8, id: 8,
unique_id: 'SRV-2024-0008', unique_id: 'MW-2024-0008',
name: '备份中间件-01', name: 'Redis 集群 -01',
type: '备份中间件', middleware: 'redis',
os: 'Rocky Linux 9', version: '7.0.15',
location: '数据中心B-1楼-机柜04-U1', location: '数据中心 B-1 楼 -机柜 04-U1',
tags: '备份,存储', tags: '缓存，集群',
ip: '192.168.2.103', ip: '192.168.2.103',
remote_access: true, remote_access: true,
agent_config: true, agent_config: true,
cpu: '16核 AMD EPYC', cpu_info: { value: 42, total: '16 核', used: '6.7 核' },
memory: '64GB',
disk: '20TB HDD',
cpu_info: { value: 42, total: '16核', used: '6.7核' },
memory_info: { value: 38, total: '64GB', used: '24.3GB' }, memory_info: { value: 38, total: '64GB', used: '24.3GB' },
disk_info: { value: 75, total: '20TB', used: '15TB' },
data_collection: true, data_collection: true,
status: 'online', status: 'online',
}, },
{ {
id: 9, id: 9,
unique_id: 'SRV-2024-0009', unique_id: 'MW-2024-0009',
name: 'CI/CD中间件-01', name: 'Tomcat 集群 -01',
type: 'CI/CD中间件', middleware: 'tomcat',
os: 'Ubuntu 22.04', version: '9.0.83',
location: '数据中心A-2楼-机柜07-U1', location: '数据中心 A-2 楼 -机柜 07-U1',
tags: 'CI/CD,Jenkins', tags: '应用，集群',
ip: '192.168.1.106', ip: '192.168.1.106',
remote_access: true, remote_access: true,
agent_config: true, agent_config: true,
cpu: '8核 Intel Xeon', cpu_info: { value: 68, total: '8 核', used: '5.4 核' },
memory: '16GB',
disk: '500GB SSD',
cpu_info: { value: 68, total: '8核', used: '5.4核' },
memory_info: { value: 75, total: '16GB', used: '12GB' }, memory_info: { value: 75, total: '16GB', used: '12GB' },
disk_info: { value: 55, total: '500GB', used: '275GB' },
data_collection: true, data_collection: true,
status: 'online', status: 'online',
}, },
{ {
id: 10, id: 10,
unique_id: 'SRV-2024-0010', unique_id: 'MW-2024-0010',
name: '日志中间件-01', name: 'Kafka 日志 -01',
type: '日志中间件', middleware: 'kafka',
os: 'CentOS Stream 9', version: '3.5.2',
location: '数据中心B-2楼-机柜12-U1', location: '数据中心 B-2 楼 -机柜 12-U1',
tags: '日志,ELK', tags: '日志，流处理',
ip: '192.168.2.104', ip: '192.168.2.104',
remote_access: true, remote_access: true,
agent_config: true, agent_config: true,
cpu: '12核 Intel Xeon', cpu_info: { value: 0, total: '12 核', used: '0 核' },
memory: '48GB',
disk: '2TB SSD',
cpu_info: { value: 0, total: '12核', used: '0核' },
memory_info: { value: 0, total: '48GB', used: '0GB' }, memory_info: { value: 0, total: '48GB', used: '0GB' },
disk_info: { value: 0, total: '2TB', used: '0TB' },
data_collection: true, data_collection: true,
status: 'offline', status: 'offline',
}, },

146
src/views/ops/pages/dc/network/components/FormDialog.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<a-modal <a-modal
:visible="visible" :visible="visible"
:title="isEdit ? '编辑办公PC' : '新增办公PC'" :title="isEdit ? '编辑网络设备' : '新增网络设备'"
@ok="handleOk" @ok="handleOk"
@cancel="handleCancel" @cancel="handleCancel"
@update:visible="handleUpdateVisible" @update:visible="handleUpdateVisible"
@@ -14,28 +14,72 @@
<a-form-item field="unique_id" label="唯一标识"> <a-form-item field="unique_id" label="唯一标识">
<a-input <a-input
v-model="formData.unique_id" v-model="formData.unique_id"
placeholder="输入为空系统自动生成UUID" placeholder="输入为空系统自动生成 UUID"
:disabled="isEdit" :disabled="isEdit"
/> />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item field="name" label="办公PC名称"> <a-form-item field="name" label="设备名称">
<a-input v-model="formData.name" placeholder="请输入办公PC名称" /> <a-input v-model="formData.name" placeholder="请输入设备名称" />
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-row :gutter="20"> <a-row :gutter="20">
<a-col :span="12"> <a-col :span="12">
<a-form-item field="os" label="操作系统"> <a-form-item field="type" label="设备类型">
<a-select v-model="formData.os" placeholder="请选择操作系统"> <a-select v-model="formData.type" placeholder="请选择设备类型">
<a-option value="windows">Windows</a-option> <a-option value="交换机">交换机</a-option>
<a-option value="linux">Linux</a-option> <a-option value="路由器">路由器</a-option>
<a-option value="other">其它</a-option> <a-option value="防火墙">防火墙</a-option>
<a-option value="负载均衡">负载均衡</a-option>
<a-option value="无线控制器">无线控制器</a-option>
<a-option value="其它">其它</a-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12">
<a-form-item field="manu" label="厂商">
<a-select v-model="formData.manu" placeholder="请选择厂商">
<a-option value="华为">华为</a-option>
<a-option value="华三">华三</a-option>
<a-option value="思科">思科</a-option>
<a-option value="深信服">深信服</a-option>
<a-option value="F5">F5</a-option>
<a-option value="锐捷">锐捷</a-option>
<a-option value="TP-LINK">TP-LINK</a-option>
<a-option value="其它">其它</a-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="20">
<a-col :span="12">
<a-form-item field="model_num" label="型号">
<a-input v-model="formData.model_num" placeholder="请输入设备型号" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item field="protocol" label="通讯协议">
<a-select v-model="formData.protocol" placeholder="请选择通讯协议">
<a-option value="SNMP">SNMP</a-option>
<a-option value="TELNET">TELNET</a-option>
<a-option value="SSH">SSH</a-option>
<a-option value="HTTP">HTTP</a-option>
<a-option value="HTTPS">HTTPS</a-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="20">
<a-col :span="12">
<a-form-item field="ip" label="IP 地址">
<a-input v-model="formData.ip" placeholder="可以输入多个 IP，逗号做分隔" />
</a-form-item>
</a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item field="tags" label="标签"> <a-form-item field="tags" label="标签">
<a-input v-model="formData.tags" placeholder="多个标签，逗号间隔" /> <a-input v-model="formData.tags" placeholder="多个标签，逗号间隔" />
@@ -50,41 +94,6 @@
/> />
</a-form-item> </a-form-item>
<a-row :gutter="20">
<a-col :span="12">
<a-form-item field="ip" label="IP地址">
<a-input v-model="formData.ip" placeholder="可以输入多个IP，逗号做分隔" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item field="remote_port" label="远程访问端口">
<a-input v-model="formData.remote_port" placeholder="为空则不可远程访问" />
</a-form-item>
</a-col>
</a-row>
<a-form-item field="agent_url" label="Agent URL配置">
<a-input v-model="formData.agent_url" placeholder="请输入Agent URL配置" />
</a-form-item>
<a-row :gutter="20">
<a-col :span="12">
<a-form-item field="data_collection" label="数据采集">
<a-switch v-model="formData.data_collection" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item v-if="formData.data_collection" field="collection_interval" label="采集时间">
<a-select v-model="formData.collection_interval" placeholder="请选择采集时间">
<a-option :value="1">1分钟</a-option>
<a-option :value="5">5分钟</a-option>
<a-option :value="10">10分钟</a-option>
<a-option :value="30">30分钟</a-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-form-item field="remark" label="备注信息"> <a-form-item field="remark" label="备注信息">
<a-textarea <a-textarea
v-model="formData.remark" v-model="formData.remark"
@@ -115,39 +124,28 @@ const emit = defineEmits(['update:visible', 'success'])
const formRef = ref<FormInstance>() const formRef = ref<FormInstance>()
const confirmLoading = ref(false) const confirmLoading = ref(false)
const selectedLocation = ref('')
const isEdit = computed(() => !!props.record?.id) const isEdit = computed(() => !!props.record?.id)
const formData = reactive({ const formData = reactive({
unique_id: '', unique_id: '',
name: '', name: '',
server_type: '', type: '',
os: '', manu: '',
location: '', model_num: '',
tags: '', protocol: '',
ip: '', ip: '',
remote_port: '', tags: '',
agent_url: '', location: '',
data_collection: false,
collection_interval: 5,
remark: '', remark: '',
}) })
const rules = { const rules = {
name: [{ required: true, message: '请输入办公名称' }], name: [{ required: true, message: '请输入设备名称' }],
server_type: [{ required: true, message: '请选择办公类型' }], type: [{ required: true, message: '请选择设备类型' }],
os: [{ required: true, message: '请选择操作系统' }], manu: [{ required: true, message: '请选择厂商' }],
} }
const locationOptions = ref([
{ label: 'A数据中心-3层-24机柜-5U位', value: 'A数据中心-3层-24机柜-5U位' },
{ label: 'A数据中心-3层-24机柜-6U位', value: 'A数据中心-3层-24机柜-6U位' },
{ label: 'B数据中心-1层-12机柜-1U位', value: 'B数据中心-1层-12机柜-1U位' },
{ label: 'B数据中心-1层-12机柜-2U位', value: 'B数据中心-1层-12机柜-2U位' },
{ label: 'C数据中心-2层-8机柜-3U位', value: 'C数据中心-2层-8机柜-3U位' },
])
watch( watch(
() => props.visible, () => props.visible,
(val) => { (val) => {
@@ -158,15 +156,13 @@ watch(
Object.assign(formData, { Object.assign(formData, {
unique_id: '', unique_id: '',
name: '', name: '',
server_type: '', type: '',
os: '', manu: '',
location: '', model_num: '',
tags: '', protocol: '',
ip: '', ip: '',
remote_port: '', tags: '',
agent_url: '', location: '',
data_collection: false,
collection_interval: 5,
remark: '', remark: '',
}) })
} }
@@ -174,10 +170,6 @@ watch(
} }
) )
const handleLocationSelect = (value: string) => {
formData.location = value
}
const handleOk = async () => { const handleOk = async () => {
try { try {
await formRef.value?.validate() await formRef.value?.validate()
@@ -208,4 +200,4 @@ const handleCancel = () => {
emit('update:visible', false) emit('update:visible', false)
formRef.value?.resetFields() formRef.value?.resetFields()
} }
</script> </script>

46
src/views/ops/pages/dc/network/config/columns.ts
View File

@@ -7,7 +7,7 @@ export const columns = [
}, },
{ {
dataIndex: 'unique_id', dataIndex: 'unique_id',
title: '唯一标识', title: 'OID',
width: 150, width: 150,
}, },
{ {
@@ -21,8 +21,13 @@ export const columns = [
width: 120, width: 120,
}, },
{ {
dataIndex: 'os', dataIndex: 'manu',
title: '操作系统', title: '厂商',
width: 150,
},
{
dataIndex: 'model_num',
title: '型号',
width: 150, width: 150,
}, },
{ {
@@ -41,40 +46,15 @@ export const columns = [
width: 150, width: 150,
}, },
{ {
dataIndex: 'remote_access', dataIndex: 'protocol',
title: '远程访问', title: '通讯协议',
width: 100, width: 100,
slotName: 'remote_access',
}, },
{ {
dataIndex: 'agent_config', dataIndex: 'indicator',
title: 'Agent配置', title: '网络设备指标',
width: 150, width: 150,
slotName: 'agent_config', slotName: 'indicator',
},
{
dataIndex: 'cpu',
title: 'CPU使用率',
width: 150,
slotName: 'cpu',
},
{
dataIndex: 'memory',
title: '内存使用率',
width: 150,
slotName: 'memory',
},
{
dataIndex: 'disk',
title: '硬盘使用率',
width: 150,
slotName: 'disk',
},
{
dataIndex: 'data_collection',
title: '数据采集',
width: 100,
slotName: 'data_collection',
}, },
{ {
dataIndex: 'status', dataIndex: 'status',

274
src/views/ops/pages/dc/network/index.vue
View File

@@ -109,29 +109,12 @@
<!-- 操作栏 - 下拉菜单 --> <!-- 操作栏 - 下拉菜单 -->
<template #actions="{ record }"> <template #actions="{ record }">
<a-space> <a-space>
<a-button
v-if="!record.agent_config"
type="outline"
size="small"
@click="handleQuickConfig(record)"
>
<template #icon>
<icon-settings />
</template>
快捷配置
</a-button>
<a-dropdown trigger="hover"> <a-dropdown trigger="hover">
<a-button type="primary" size="small"> <a-button type="primary" size="small">
管理 管理
<icon-down /> <icon-down />
</a-button> </a-button>
<template #content> <template #content>
<a-doption @click="handleRestart(record)">
<template #icon>
<icon-refresh />
</template>
重启
</a-doption>
<a-doption @click="handleDetail(record)"> <a-doption @click="handleDetail(record)">
<template #icon> <template #icon>
<icon-eye /> <icon-eye />
@@ -144,12 +127,6 @@
</template> </template>
编辑 编辑
</a-doption> </a-doption>
<a-doption @click="handleRemoteControl(record)">
<template #icon>
<icon-desktop />
</template>
远程控制
</a-doption>
<a-doption @click="handleDelete(record)" style="color: rgb(var(--danger-6))"> <a-doption @click="handleDelete(record)" style="color: rgb(var(--danger-6))">
<template #icon> <template #icon>
<icon-delete /> <icon-delete />
@@ -195,8 +172,7 @@ import {
import type { FormItem } from '@/components/search-form/types' import type { FormItem } from '@/components/search-form/types'
import SearchTable from '@/components/search-table/index.vue' import SearchTable from '@/components/search-table/index.vue'
import { searchFormConfig } from './config/search-form' import { searchFormConfig } from './config/search-form'
import FormDialog from '../pc/components/FormDialog.vue' import FormDialog from './components/FormDialog.vue'
import QuickConfigDialog from '../pc/components/QuickConfigDialog.vue'
import { columns as columnsConfig } from './config/columns' import { columns as columnsConfig } from './config/columns'
import { import {
fetchServerList, fetchServerList,
@@ -209,204 +185,116 @@ const router = useRouter()
const mockServerData = [ const mockServerData = [
{ {
id: 1, id: 1,
unique_id: 'SRV-2024-0001', unique_id: 'NET-2024-0001',
name: 'Web网络设备-01', name: '核心交换机 -01',
type: 'Web网络设备', type: '交换机',
os: 'CentOS 7.9', manu: '华为',
location: '数据中心A-1楼-机柜01-U1', model_num: 'CE6857-48S6CQ',
tags: 'Web,应用', location: '数据中心 A-3 层 -24 机柜 -5U 位',
ip: '192.168.1.101', tags: '核心，生产',
remote_access: true, ip: '192.168.1.1',
agent_config: true, protocol: 'SNMP',
cpu: '8核 Intel Xeon', indicator: 'CPU:45%,内存:62%',
memory: '32GB',
disk: '1TB SSD',
cpu_info: { value: 45, total: '8核', used: '3.6核' },
memory_info: { value: 62, total: '32GB', used: '19.8GB' },
disk_info: { value: 78, total: '1TB', used: '780GB' },
data_collection: true,
status: 'online', status: 'online',
}, },
{ {
id: 2, id: 2,
unique_id: 'SRV-2024-0002', unique_id: 'NET-2024-0002',
name: '数据库网络设备-01', name: '汇聚路由器 -01',
type: '数据库网络设备', type: '路由器',
os: 'Ubuntu 22.04', manu: '思科',
location: '数据中心A-1楼-机柜02-U1', model_num: 'ISR4451-X/K9',
tags: '数据库,MySQL', location: '数据中心 A-3 层 -24 机柜 -6U 位',
ip: '192.168.1.102', tags: '汇聚，生产',
remote_access: true, ip: '192.168.1.2',
agent_config: true, protocol: 'SNMP',
cpu: '16核 AMD EPYC', indicator: 'CPU:78%,内存:85%',
memory: '64GB',
disk: '2TB NVMe',
cpu_info: { value: 78, total: '16核', used: '12.5核' },
memory_info: { value: 85, total: '64GB', used: '54.4GB' },
disk_info: { value: 92, total: '2TB', used: '1.84TB' },
data_collection: true,
status: 'online', status: 'online',
}, },
{ {
id: 3, id: 3,
unique_id: 'SRV-2024-0003', unique_id: 'NET-2024-0003',
name: '应用网络设备-01', name: '接入交换机 -01',
type: '应用网络设备', type: '交换机',
os: 'Windows Server 2019', manu: '华三',
location: '数据中心A-2楼-机柜05-U2', model_num: 'S5560X-54C-EI',
tags: '应用,.NET', location: '数据中心 B-1 层 -12 机柜 -1U 位',
ip: '192.168.1.103', tags: '接入，办公',
remote_access: false, ip: '192.168.2.1',
agent_config: false, protocol: 'SNMP',
cpu: '4核 Intel Xeon', indicator: '-',
memory: '16GB',
disk: '500GB SSD',
cpu_info: { value: 0, total: '4核', used: '0核' },
memory_info: { value: 0, total: '16GB', used: '0GB' },
disk_info: { value: 0, total: '500GB', used: '0GB' },
data_collection: false,
status: 'offline', status: 'offline',
}, },
{ {
id: 4, id: 4,
unique_id: 'SRV-2024-0004', unique_id: 'NET-2024-0004',
name: '缓存网络设备-01', name: '防火墙 -01',
type: '缓存网络设备', type: '防火墙',
os: 'CentOS 8.5', manu: '深信服',
location: '数据中心A-2楼-机柜06-U1', model_num: 'AF-2000',
tags: '缓存,Redis', location: '数据中心 B-1 层 -12 机柜 -2U 位',
ip: '192.168.1.104', tags: '安全，边界',
remote_access: true, ip: '192.168.1.254',
agent_config: true, protocol: 'SNMP',
cpu: '8核 Intel Xeon', indicator: 'CPU:35%,内存:68%',
memory: '32GB',
disk: '1TB SSD',
cpu_info: { value: 35, total: '8核', used: '2.8核' },
memory_info: { value: 68, total: '32GB', used: '21.8GB' },
disk_info: { value: 42, total: '1TB', used: '420GB' },
data_collection: true,
status: 'online', status: 'online',
}, },
{ {
id: 5, id: 5,
unique_id: 'SRV-2024-0005', unique_id: 'NET-2024-0005',
name: '文件网络设备-01', name: '负载均衡器 -01',
type: '文件网络设备', type: '负载均衡',
os: 'Debian 11', manu: 'F5',
location: '数据中心B-1楼-机柜03-U1', model_num: 'BIG-IP i2800',
tags: '文件,NFS', location: '数据中心 C-2 层 -8 机柜 -3U 位',
ip: '192.168.2.101', tags: '负载，应用',
remote_access: true, ip: '192.168.3.1',
agent_config: true, protocol: 'SNMP',
cpu: '12核 Intel Xeon', indicator: 'CPU:28%,内存:45%',
memory: '48GB',
disk: '10TB HDD',
cpu_info: { value: 28, total: '12核', used: '3.4核' },
memory_info: { value: 45, total: '48GB', used: '21.6GB' },
disk_info: { value: 88, total: '10TB', used: '8.8TB' },
data_collection: true,
status: 'maintenance', status: 'maintenance',
}, },
{ {
id: 6, id: 6,
unique_id: 'SRV-2024-0006', unique_id: 'NET-2024-0006',
name: '测试网络设备-01', name: '无线控制器 -01',
type: '测试网络设备', type: '无线控制器',
os: 'CentOS 7.9', manu: '锐捷',
location: '数据中心B-2楼-机柜10-U1', model_num: 'WS6008',
tags: '测试,开发', location: '数据中心 A-1 层 -05 机柜 -8U 位',
ip: '192.168.2.102', tags: '无线，办公',
remote_access: false, ip: '192.168.4.1',
agent_config: false, protocol: 'SNMP',
cpu: '4核 Intel Xeon', indicator: '-',
memory: '8GB',
disk: '256GB SSD',
cpu_info: { value: 0, total: '4核', used: '0核' },
memory_info: { value: 0, total: '8GB', used: '0GB' },
disk_info: { value: 0, total: '256GB', used: '0GB' },
data_collection: false,
status: 'retired', status: 'retired',
}, },
{ {
id: 7, id: 7,
unique_id: 'SRV-2024-0007', unique_id: 'NET-2024-0007',
name: '监控网络设备-01', name: '光模块交换机 -01',
type: '监控网络设备', type: '交换机',
os: 'Ubuntu 20.04', manu: '华为',
location: '数据中心A-1楼-机柜08-U1', model_num: 'CE8850-64CQ-EI',
tags: '监控,Prometheus', location: '数据中心 A-2 层 -15 机柜 -10U 位',
ip: '192.168.1.105', tags: '高速，存储网络',
remote_access: true, ip: '192.168.5.1',
agent_config: true, protocol: 'SNMP',
cpu: '8核 Intel Xeon', indicator: 'CPU:55%,内存:72%',
memory: '32GB',
disk: '1TB SSD',
cpu_info: { value: 55, total: '8核', used: '4.4核' },
memory_info: { value: 72, total: '32GB', used: '23.0GB' },
disk_info: { value: 65, total: '1TB', used: '650GB' },
data_collection: true,
status: 'online', status: 'online',
}, },
{ {
id: 8, id: 8,
unique_id: 'SRV-2024-0008', unique_id: 'NET-2024-0008',
name: '备份网络设备-01', name: '管理交换机 -01',
type: '备份网络设备', type: '交换机',
os: 'Rocky Linux 9', manu: 'TP-LINK',
location: '数据中心B-1楼-机柜04-U1', model_num: 'TL-SG3428',
tags: '备份,存储', location: '数据中心 B-2 层 -18 机柜 -12U 位',
ip: '192.168.2.103', tags: '管理，带外',
remote_access: true, ip: '192.168.100.1',
agent_config: true, protocol: 'SNMP',
cpu: '16核 AMD EPYC', indicator: 'CPU:42%,内存:38%',
memory: '64GB',
disk: '20TB HDD',
cpu_info: { value: 42, total: '16核', used: '6.7核' },
memory_info: { value: 38, total: '64GB', used: '24.3GB' },
disk_info: { value: 75, total: '20TB', used: '15TB' },
data_collection: true,
status: 'online', status: 'online',
}, },
{
id: 9,
unique_id: 'SRV-2024-0009',
name: 'CI/CD网络设备-01',
type: 'CI/CD网络设备',
os: 'Ubuntu 22.04',
location: '数据中心A-2楼-机柜07-U1',
tags: 'CI/CD,Jenkins',
ip: '192.168.1.106',
remote_access: true,
agent_config: true,
cpu: '8核 Intel Xeon',
memory: '16GB',
disk: '500GB SSD',
cpu_info: { value: 68, total: '8核', used: '5.4核' },
memory_info: { value: 75, total: '16GB', used: '12GB' },
disk_info: { value: 55, total: '500GB', used: '275GB' },
data_collection: true,
status: 'online',
},
{
id: 10,
unique_id: 'SRV-2024-0010',
name: '日志网络设备-01',
type: '日志网络设备',
os: 'CentOS Stream 9',
location: '数据中心B-2楼-机柜12-U1',
tags: '日志,ELK',
ip: '192.168.2.104',
remote_access: true,
agent_config: true,
cpu: '12核 Intel Xeon',
memory: '48GB',
disk: '2TB SSD',
cpu_info: { value: 0, total: '12核', used: '0核' },
memory_info: { value: 0, total: '48GB', used: '0GB' },
disk_info: { value: 0, total: '2TB', used: '0TB' },
data_collection: true,
status: 'offline',
},
] ]
// 状态管理 // 状态管理