| | |
| | | <div class="search-section"> |
| | | <el-form :model="searchForm" :inline="true" class="search-form"> |
| | | <el-form-item label="设备类型"> |
| | | <el-select v-model="searchForm.deviceType" placeholder="选择设备类型" clearable> |
| | | <el-option label="PLC控制器" value="PLC控制器" /> |
| | | <el-option label="传感器" value="传感器" /> |
| | | <el-option label="执行器" value="执行器" /> |
| | | <el-option label="控制器" value="控制器" /> |
| | | <el-option label="采集器" value="采集器" /> |
| | | <el-select v-model="searchForm.deviceType" placeholder="选择设备类型" clearable :loading="deviceTypesLoading"> |
| | | <el-option |
| | | v-for="type in deviceTypes" |
| | | :key="type" |
| | | :label="type" |
| | | :value="type" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="设备状态"> |
| | |
| | | const deviceList = ref([]) |
| | | const selectedDevices = ref([]) |
| | | |
| | | // 设备类型列表 |
| | | const deviceTypes = ref([]) |
| | | const deviceTypesLoading = ref(false) |
| | | |
| | | // 搜索表单 |
| | | const searchForm = reactive({ |
| | | deviceType: '', |
| | |
| | | const emit = defineEmits(['device-selected', 'refresh-statistics']) |
| | | |
| | | // 方法定义 |
| | | // 加载设备类型列表 |
| | | const loadDeviceTypes = async () => { |
| | | if (deviceTypes.value.length > 0) { |
| | | // 如果已经加载过,不再重复加载 |
| | | return |
| | | } |
| | | // 所有支持的设备类型(确保包含所有有配置组件的类型) |
| | | const supportedTypes = ['大车设备', '大理片笼', '卧转立扫码', '卧转立'] |
| | | |
| | | try { |
| | | deviceTypesLoading.value = true |
| | | const res = await deviceConfigApi.getDeviceTypes() |
| | | if (res?.data && Array.isArray(res.data)) { |
| | | // 合并数据库中的类型和支持的类型,去重并排序 |
| | | const dbTypes = res.data |
| | | const allTypes = [...new Set([...supportedTypes, ...dbTypes])].sort() |
| | | deviceTypes.value = allTypes |
| | | } else { |
| | | // 如果API返回失败,使用默认类型 |
| | | deviceTypes.value = supportedTypes |
| | | console.warn('获取设备类型列表失败,使用默认类型') |
| | | } |
| | | } catch (error) { |
| | | console.error('加载设备类型列表失败:', error) |
| | | // 失败时使用默认类型 |
| | | deviceTypes.value = supportedTypes |
| | | } finally { |
| | | deviceTypesLoading.value = false |
| | | } |
| | | } |
| | | |
| | | const loadDeviceList = async () => { |
| | | try { |
| | | tableLoading.value = true |
| | |
| | | |
| | | // 组件挂载时加载数据 |
| | | onMounted(() => { |
| | | loadDeviceTypes() |
| | | loadDeviceList() |
| | | }) |
| | | </script> |