From f1ee0aa9d6c6c89ee9f0e5d845cd3c64f161aeaf Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期二, 16 十二月 2025 20:03:08 +0800
Subject: [PATCH] 代码调整6
---
src/views/device/DeviceManagement.vue | 513 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 513 insertions(+), 0 deletions(-)
diff --git a/src/views/device/DeviceManagement.vue b/src/views/device/DeviceManagement.vue
new file mode 100644
index 0000000..80ccd27
--- /dev/null
+++ b/src/views/device/DeviceManagement.vue
@@ -0,0 +1,513 @@
+<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="璇疯緭鍏P鍦板潃"></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="璇疯緭鍏P鍦板潃"></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: '绌哄帇鏈篈-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: '鍐峰嵈濉擝-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: '鍙戠數鏈篋-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: '鍙樺帇鍣‥-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: '璇疯緭鍏P鍦板潃', 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 = () => {
+ // 绛涢�夐�昏緫宸茬粡鍦╟omputed涓疄鐜�
+}
+
+// 閲嶇疆绛涢�夋潯浠�
+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>
--
Gitblit v1.9.3