<template>
|
<div class="device-management-container">
|
<el-card shadow="hover">
|
<template #header>
|
<div class="card-header">
|
<span>设备管理</span>
|
<div class="header-buttons">
|
<el-button type="primary" @click="showAddDeviceDialog">
|
<el-icon-plus /> 添加设备
|
</el-button>
|
<el-button @click="exportDevices">
|
<el-icon-download /> 导出
|
</el-button>
|
<el-button @click="showImportDialog">
|
<el-icon-upload /> 导入
|
</el-button>
|
</div>
|
</div>
|
</template>
|
|
<!-- 筛选条件 -->
|
<el-form :inline="true" :model="filterForm" class="device-filter-form">
|
<el-form-item label="设备名称">
|
<el-input v-model="filterForm.name" placeholder="请输入设备名称" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="型号">
|
<el-input v-model="filterForm.model" placeholder="请输入型号" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="状态">
|
<el-select v-model="filterForm.status" placeholder="请选择状态" clearable>
|
<el-option label="在线" value="online"></el-option>
|
<el-option label="离线" value="offline"></el-option>
|
<el-option label="故障" value="fault"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="handleFilter">查询</el-button>
|
<el-button @click="resetFilter">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<!-- 设备列表 -->
|
<el-table :data="filteredDevices" stripe style="width: 100%" @selection-change="handleSelectionChange">
|
<el-table-column type="selection" width="55"></el-table-column>
|
<el-table-column prop="id" label="设备ID" width="100"></el-table-column>
|
<el-table-column prop="name" label="设备名称" width="180"></el-table-column>
|
<el-table-column prop="model" label="型号" width="120"></el-table-column>
|
<el-table-column prop="ip" label="IP地址" width="150"></el-table-column>
|
<el-table-column prop="status" label="状态" width="100">
|
<template #default="scope">
|
<el-tag :type="scope.row.status === 'online' ? 'success' : scope.row.status === 'offline' ? 'info' : 'danger'">
|
{{ scope.row.status === 'online' ? '在线' : scope.row.status === 'offline' ? '离线' : '故障' }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="location" label="安装位置" width="180"></el-table-column>
|
<el-table-column prop="installDate" label="安装日期" width="150"></el-table-column>
|
<el-table-column prop="manufacturer" label="制造商" width="150"></el-table-column>
|
<el-table-column label="操作" width="220" fixed="right">
|
<template #default="scope">
|
<el-button type="text" size="small" @click="showDeviceDetail(scope.row)">
|
详情
|
</el-button>
|
<el-button type="text" size="small" @click="showEditDeviceDialog(scope.row)">
|
编辑
|
</el-button>
|
<el-button type="text" size="small" @click="handleDelete(scope.row)">
|
删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 分页 -->
|
<div class="pagination-container">
|
<el-pagination
|
background
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="filteredDevices.length"
|
:current-page="currentPage"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="pageSize"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
></el-pagination>
|
</div>
|
</el-card>
|
|
<!-- 添加设备对话框 -->
|
<el-dialog v-model="addDeviceDialogVisible" title="添加设备" width="600px">
|
<el-form :model="deviceForm" :rules="deviceRules" ref="deviceFormRef" label-width="100px">
|
<el-form-item label="设备名称" prop="name">
|
<el-input v-model="deviceForm.name" placeholder="请输入设备名称"></el-input>
|
</el-form-item>
|
<el-form-item label="型号" prop="model">
|
<el-input v-model="deviceForm.model" placeholder="请输入型号"></el-input>
|
</el-form-item>
|
<el-form-item label="IP地址" prop="ip">
|
<el-input v-model="deviceForm.ip" placeholder="请输入IP地址"></el-input>
|
</el-form-item>
|
<el-form-item label="安装位置" prop="location">
|
<el-input v-model="deviceForm.location" placeholder="请输入安装位置"></el-input>
|
</el-form-item>
|
<el-form-item label="制造商" prop="manufacturer">
|
<el-input v-model="deviceForm.manufacturer" placeholder="请输入制造商"></el-input>
|
</el-form-item>
|
<el-form-item label="安装日期" prop="installDate">
|
<el-date-picker v-model="deviceForm.installDate" type="date" placeholder="选择安装日期" style="width: 100%"></el-date-picker>
|
</el-form-item>
|
<el-form-item label="状态" prop="status">
|
<el-select v-model="deviceForm.status" placeholder="请选择状态">
|
<el-option label="在线" value="online"></el-option>
|
<el-option label="离线" value="offline"></el-option>
|
<el-option label="故障" value="fault"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="addDeviceDialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="handleAddDevice">确定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
|
<!-- 编辑设备对话框 -->
|
<el-dialog v-model="editDeviceDialogVisible" title="编辑设备" width="600px">
|
<el-form :model="deviceForm" :rules="deviceRules" ref="deviceFormRef" label-width="100px">
|
<el-form-item label="设备名称" prop="name">
|
<el-input v-model="deviceForm.name" placeholder="请输入设备名称"></el-input>
|
</el-form-item>
|
<el-form-item label="型号" prop="model">
|
<el-input v-model="deviceForm.model" placeholder="请输入型号"></el-input>
|
</el-form-item>
|
<el-form-item label="IP地址" prop="ip">
|
<el-input v-model="deviceForm.ip" placeholder="请输入IP地址"></el-input>
|
</el-form-item>
|
<el-form-item label="安装位置" prop="location">
|
<el-input v-model="deviceForm.location" placeholder="请输入安装位置"></el-input>
|
</el-form-item>
|
<el-form-item label="制造商" prop="manufacturer">
|
<el-input v-model="deviceForm.manufacturer" placeholder="请输入制造商"></el-input>
|
</el-form-item>
|
<el-form-item label="安装日期" prop="installDate">
|
<el-date-picker v-model="deviceForm.installDate" type="date" placeholder="选择安装日期" style="width: 100%"></el-date-picker>
|
</el-form-item>
|
<el-form-item label="状态" prop="status">
|
<el-select v-model="deviceForm.status" placeholder="请选择状态">
|
<el-option label="在线" value="online"></el-option>
|
<el-option label="离线" value="offline"></el-option>
|
<el-option label="故障" value="fault"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="editDeviceDialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="handleEditDevice">确定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
|
<!-- 设备详情对话框 -->
|
<el-dialog v-model="deviceDetailDialogVisible" title="设备详情" width="600px">
|
<el-descriptions :column="1" border>
|
<el-descriptions-item label="设备名称">{{ selectedDevice.name }}</el-descriptions-item>
|
<el-descriptions-item label="设备ID">{{ selectedDevice.id }}</el-descriptions-item>
|
<el-descriptions-item label="型号">{{ selectedDevice.model }}</el-descriptions-item>
|
<el-descriptions-item label="IP地址">{{ selectedDevice.ip }}</el-descriptions-item>
|
<el-descriptions-item label="状态">
|
<el-tag :type="selectedDevice.status === 'online' ? 'success' : selectedDevice.status === 'offline' ? 'info' : 'danger'">
|
{{ selectedDevice.status === 'online' ? '在线' : selectedDevice.status === 'offline' ? '离线' : '故障' }}
|
</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item label="安装位置">{{ selectedDevice.location }}</el-descriptions-item>
|
<el-descriptions-item label="制造商">{{ selectedDevice.manufacturer }}</el-descriptions-item>
|
<el-descriptions-item label="安装日期">{{ selectedDevice.installDate }}</el-descriptions-item>
|
<el-descriptions-item label="创建时间">{{ selectedDevice.createTime }}</el-descriptions-item>
|
</el-descriptions>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="deviceDetailDialogVisible = false">关闭</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
|
<!-- 导入对话框 -->
|
<el-dialog v-model="importDialogVisible" title="导入设备" width="400px">
|
<el-upload
|
class="upload-demo"
|
action="#"
|
:on-change="handleFileChange"
|
:auto-upload="false"
|
accept=".xlsx,.xls"
|
>
|
<el-button type="primary">选择文件</el-button>
|
<template #tip>
|
<div class="el-upload__tip">
|
只能上传 xlsx/xls 文件，且不超过 2MB
|
</div>
|
</template>
|
</el-upload>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="importDialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="handleImport">确定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, computed } from 'vue'
|
|
// 设备列表数据
|
const devices = ref([
|
{
|
id: 'D001',
|
name: '空压机A-001',
|
model: 'KA-200',
|
ip: '192.168.1.101',
|
status: 'online',
|
location: '车间A-1区',
|
manufacturer: '康普斯',
|
installDate: '2023-05-10',
|
createTime: '2023-05-10 10:30:00'
|
},
|
{
|
id: 'D002',
|
name: '冷却塔B-002',
|
model: 'CT-300',
|
ip: '192.168.1.102',
|
status: 'warning',
|
location: '车间B-2区',
|
manufacturer: '良机',
|
installDate: '2023-06-15',
|
createTime: '2023-06-15 14:20:00'
|
},
|
{
|
id: 'D003',
|
name: '水泵C-003',
|
model: 'WP-150',
|
ip: '192.168.1.103',
|
status: 'online',
|
location: '车间C-3区',
|
manufacturer: '格兰富',
|
installDate: '2023-07-20',
|
createTime: '2023-07-20 09:15:00'
|
},
|
{
|
id: 'D004',
|
name: '发电机D-004',
|
model: 'GE-500',
|
ip: '192.168.1.104',
|
status: 'fault',
|
location: '机房',
|
manufacturer: '卡特彼勒',
|
installDate: '2023-08-25',
|
createTime: '2023-08-25 16:45:00'
|
},
|
{
|
id: 'D005',
|
name: '变压器E-005',
|
model: 'TR-1000',
|
ip: '192.168.1.105',
|
status: 'online',
|
location: '配电房',
|
manufacturer: 'ABB',
|
installDate: '2023-09-30',
|
createTime: '2023-09-30 11:20:00'
|
}
|
])
|
|
// 筛选表单
|
const filterForm = ref({
|
name: '',
|
model: '',
|
status: ''
|
})
|
|
// 分页数据
|
const currentPage = ref(1)
|
const pageSize = ref(10)
|
|
// 对话框状态
|
const addDeviceDialogVisible = ref(false)
|
const editDeviceDialogVisible = ref(false)
|
const deviceDetailDialogVisible = ref(false)
|
const importDialogVisible = ref(false)
|
|
// 设备表单数据
|
const deviceForm = ref({
|
id: '',
|
name: '',
|
model: '',
|
ip: '',
|
status: 'online',
|
location: '',
|
manufacturer: '',
|
installDate: ''
|
})
|
|
// 表单验证规则
|
const deviceRules = ref({
|
name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
|
model: [{ required: true, message: '请输入型号', trigger: 'blur' }],
|
ip: [{ required: true, message: '请输入IP地址', trigger: 'blur' }],
|
location: [{ required: true, message: '请输入安装位置', trigger: 'blur' }],
|
manufacturer: [{ required: true, message: '请输入制造商', trigger: 'blur' }],
|
installDate: [{ required: true, message: '请选择安装日期', trigger: 'change' }],
|
status: [{ required: true, message: '请选择状态', trigger: 'change' }]
|
})
|
|
// 表单引用
|
const deviceFormRef = ref(null)
|
|
// 选中的设备
|
const selectedDevice = ref({})
|
|
// 选中的设备列表（用于批量操作）
|
const selectedDevices = ref([])
|
|
// 导入的文件
|
const importFile = ref(null)
|
|
// 过滤后的设备列表
|
const filteredDevices = computed(() => {
|
let result = [...devices.value]
|
|
// 按名称筛选
|
if (filterForm.value.name) {
|
result = result.filter(device => device.name.includes(filterForm.value.name))
|
}
|
|
// 按型号筛选
|
if (filterForm.value.model) {
|
result = result.filter(device => device.model.includes(filterForm.value.model))
|
}
|
|
// 按状态筛选
|
if (filterForm.value.status) {
|
result = result.filter(device => device.status === filterForm.value.status)
|
}
|
|
return result
|
})
|
|
// 显示添加设备对话框
|
const showAddDeviceDialog = () => {
|
// 重置表单
|
deviceForm.value = {
|
id: '',
|
name: '',
|
model: '',
|
ip: '',
|
status: 'online',
|
location: '',
|
manufacturer: '',
|
installDate: ''
|
}
|
addDeviceDialogVisible.value = true
|
}
|
|
// 显示编辑设备对话框
|
const showEditDeviceDialog = (device) => {
|
deviceForm.value = { ...device }
|
editDeviceDialogVisible.value = true
|
}
|
|
// 显示设备详情
|
const showDeviceDetail = (device) => {
|
selectedDevice.value = { ...device }
|
deviceDetailDialogVisible.value = true
|
}
|
|
// 显示导入对话框
|
const showImportDialog = () => {
|
importDialogVisible.value = true
|
}
|
|
// 处理添加设备
|
const handleAddDevice = () => {
|
// 模拟添加设备
|
const newDevice = {
|
...deviceForm.value,
|
id: `D${String(devices.value.length + 1).padStart(3, '0')}`,
|
createTime: new Date().toLocaleString()
|
}
|
devices.value.push(newDevice)
|
addDeviceDialogVisible.value = false
|
ElMessage.success('设备添加成功')
|
}
|
|
// 处理编辑设备
|
const handleEditDevice = () => {
|
// 模拟编辑设备
|
const index = devices.value.findIndex(device => device.id === deviceForm.value.id)
|
if (index !== -1) {
|
devices.value[index] = { ...deviceForm.value }
|
editDeviceDialogVisible.value = false
|
ElMessage.success('设备编辑成功')
|
}
|
}
|
|
// 处理删除设备
|
const handleDelete = (device) => {
|
ElMessageBox.confirm('确定要删除该设备吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
// 模拟删除设备
|
const index = devices.value.findIndex(item => item.id === device.id)
|
if (index !== -1) {
|
devices.value.splice(index, 1)
|
ElMessage.success('设备删除成功')
|
}
|
}).catch(() => {
|
// 取消删除
|
})
|
}
|
|
// 处理筛选
|
const handleFilter = () => {
|
// 筛选逻辑已经在computed中实现
|
}
|
|
// 重置筛选条件
|
const resetFilter = () => {
|
filterForm.value = {
|
name: '',
|
model: '',
|
status: ''
|
}
|
}
|
|
// 处理分页大小变化
|
const handleSizeChange = (size) => {
|
pageSize.value = size
|
currentPage.value = 1
|
}
|
|
// 处理当前页变化
|
const handleCurrentChange = (current) => {
|
currentPage.value = current
|
}
|
|
// 处理文件变化（导入）
|
const handleFileChange = (file) => {
|
importFile.value = file
|
}
|
|
// 处理导入
|
const handleImport = () => {
|
// 模拟导入
|
if (importFile.value) {
|
importDialogVisible.value = false
|
ElMessage.success('设备导入成功')
|
importFile.value = null
|
} else {
|
ElMessage.warning('请选择要导入的文件')
|
}
|
}
|
|
// 导出设备
|
const exportDevices = () => {
|
// 模拟导出
|
ElMessage.success('设备导出成功')
|
}
|
|
// 处理选择变化（用于批量操作）
|
const handleSelectionChange = (selection) => {
|
selectedDevices.value = selection
|
}
|
</script>
|
|
<style scoped>
|
.device-management-container {
|
padding: 20px;
|
background-color: #f5f7fa;
|
min-height: 100vh;
|
}
|
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.header-buttons {
|
display: flex;
|
gap: 10px;
|
}
|
|
.device-filter-form {
|
margin-bottom: 20px;
|
padding: 10px 0;
|
border-bottom: 1px solid #ebeef5;
|
}
|
|
.pagination-container {
|
display: flex;
|
justify-content: flex-end;
|
margin-top: 20px;
|
}
|
|
:deep(.el-icon-plus),
|
:deep(.el-icon-download),
|
:deep(.el-icon-upload) {
|
margin-right: 5px;
|
}
|
</style>
|
