实现设备模板管理界面
This commit is contained in:
53
src/api/deviceTemplate.js
Normal file
53
src/api/deviceTemplate.js
Normal file
@@ -0,0 +1,53 @@
|
||||
import http from '../utils/http.js';
|
||||
|
||||
/**
|
||||
* 设备模板管理API
|
||||
*/
|
||||
export class DeviceTemplateApi {
|
||||
/**
|
||||
* 获取设备模板列表
|
||||
* @returns {Promise} 设备模板列表
|
||||
*/
|
||||
static list() {
|
||||
return http.get('/api/v1/device-templates');
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建新设备模板
|
||||
* @param {Object} deviceTemplateData 设备模板数据
|
||||
* @returns {Promise} 创建结果
|
||||
*/
|
||||
static create(deviceTemplateData) {
|
||||
return http.post('/api/v1/device-templates', deviceTemplateData);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取设备模板详情
|
||||
* @param {string|number} id 设备模板ID
|
||||
* @returns {Promise} 设备模板详情
|
||||
*/
|
||||
static get(id) {
|
||||
return http.get(`/api/v1/device-templates/${id}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新设备模板信息
|
||||
* @param {string|number} id 设备模板ID
|
||||
* @param {Object} deviceTemplateData 设备模板数据
|
||||
* @returns {Promise} 更新结果
|
||||
*/
|
||||
static update(id, deviceTemplateData) {
|
||||
return http.put(`/api/v1/device-templates/${id}`, deviceTemplateData);
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除设备模板
|
||||
* @param {string|number} id 设备模板ID
|
||||
* @returns {Promise} 删除结果
|
||||
*/
|
||||
static delete(id) {
|
||||
return http.delete(`/api/v1/device-templates/${id}`);
|
||||
}
|
||||
}
|
||||
|
||||
export default DeviceTemplateApi;
|
||||
@@ -1,6 +1,7 @@
|
||||
import { AreaControllerApi, DeviceApi } from './device.js';
|
||||
import PlanApi from './plan.js';
|
||||
import UserApi from './user.js';
|
||||
import DeviceTemplateApi from './deviceTemplate.js'; // 导入设备模板API
|
||||
|
||||
/**
|
||||
* API客户端
|
||||
@@ -11,6 +12,7 @@ export class ApiClient {
|
||||
this.devices = DeviceApi;
|
||||
this.plans = PlanApi;
|
||||
this.users = UserApi;
|
||||
this.deviceTemplates = DeviceTemplateApi; // 添加设备模板API
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
282
src/components/DeviceTemplateForm.vue
Normal file
282
src/components/DeviceTemplateForm.vue
Normal file
@@ -0,0 +1,282 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:model-value="visible"
|
||||
:title="title"
|
||||
@close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
width="600px"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
@submit.prevent
|
||||
>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="formData.name" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="制造商" prop="manufacturer">
|
||||
<el-input v-model="formData.manufacturer" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="描述" prop="description">
|
||||
<el-input v-model="formData.description" type="textarea" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="类别" prop="category">
|
||||
<el-select v-model="formData.category" placeholder="请选择类别" @change="handleCategoryChange">
|
||||
<el-option label="执行器" value="actuator" />
|
||||
<el-option label="传感器" value="sensor" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="指令 (JSON)" prop="commands">
|
||||
<el-input
|
||||
v-model="formData.commands"
|
||||
type="textarea"
|
||||
:rows="5"
|
||||
placeholder="请输入JSON格式的指令参数"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-if="formData.category === 'sensor'"
|
||||
label="值描述 (JSON)"
|
||||
prop="values"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.values"
|
||||
type="textarea"
|
||||
:rows="5"
|
||||
placeholder="请输入JSON格式的值描述数组"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit" :loading="loading">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, reactive, computed, watch, nextTick } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import deviceTemplateService from '../services/deviceTemplateService.js';
|
||||
|
||||
// 默认的JSON模板
|
||||
const DEFAULT_ACTUATOR_COMMANDS = JSON.stringify({
|
||||
modbus_start_address: 0,
|
||||
modbus_quantity: 1
|
||||
}, null, 2);
|
||||
|
||||
const DEFAULT_SENSOR_COMMANDS = JSON.stringify({
|
||||
modbus_function_code: 3,
|
||||
modbus_start_address: 0,
|
||||
modbus_quantity: 1
|
||||
}, null, 2);
|
||||
|
||||
const DEFAULT_SENSOR_VALUES = JSON.stringify([
|
||||
{
|
||||
type: "temperature",
|
||||
multiplier: 0.1,
|
||||
offset: 0
|
||||
}
|
||||
], null, 2);
|
||||
|
||||
export default {
|
||||
name: 'DeviceTemplateForm',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
templateData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
isEdit: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['update:visible', 'success', 'cancel'],
|
||||
setup(props, { emit }) {
|
||||
const formRef = ref(null);
|
||||
const loading = ref(false);
|
||||
|
||||
const initialFormData = () => ({
|
||||
id: '',
|
||||
name: '',
|
||||
manufacturer: '',
|
||||
description: '',
|
||||
category: 'actuator', // 默认执行器
|
||||
commands: DEFAULT_ACTUATOR_COMMANDS, // 预填充执行器指令
|
||||
values: '',
|
||||
});
|
||||
|
||||
const formData = reactive(initialFormData());
|
||||
|
||||
// JSON 验证器
|
||||
const validateJson = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error(rule.message));
|
||||
}
|
||||
try {
|
||||
JSON.parse(value);
|
||||
callback();
|
||||
} catch (e) {
|
||||
callback(new Error('请输入有效的 JSON 格式'));
|
||||
}
|
||||
};
|
||||
|
||||
const rules = computed(() => ({
|
||||
name: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
|
||||
category: [{ required: true, message: '请选择模板类别', trigger: 'change' }],
|
||||
commands: [
|
||||
{ required: true, message: '请输入指令参数', trigger: 'blur' },
|
||||
{ validator: validateJson, message: '指令参数必须是有效的 JSON 格式', trigger: 'blur' },
|
||||
],
|
||||
values: [
|
||||
{ required: formData.category === 'sensor', message: '请输入值描述', trigger: 'blur' },
|
||||
{ validator: validateJson, message: '值描述必须是有效的 JSON 格式', trigger: 'blur' },
|
||||
],
|
||||
}));
|
||||
|
||||
const title = computed(() => {
|
||||
return props.isEdit ? '编辑设备模板' : '新增设备模板';
|
||||
});
|
||||
|
||||
const handleCategoryChange = (newCategory) => {
|
||||
if (newCategory === 'actuator') {
|
||||
formData.commands = DEFAULT_ACTUATOR_COMMANDS;
|
||||
formData.values = ''; // 执行器没有values
|
||||
} else if (newCategory === 'sensor') {
|
||||
formData.commands = DEFAULT_SENSOR_COMMANDS;
|
||||
formData.values = DEFAULT_SENSOR_VALUES; // 传感器预填充values
|
||||
}
|
||||
nextTick(() => {
|
||||
if (formRef.value) {
|
||||
formRef.value.clearValidate();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
emit('update:visible', false);
|
||||
emit('cancel');
|
||||
// 重置表单
|
||||
Object.assign(formData, initialFormData());
|
||||
nextTick(() => {
|
||||
if (formRef.value) {
|
||||
formRef.value.resetFields();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!formRef.value) return;
|
||||
await formRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
try {
|
||||
const submitData = {
|
||||
name: formData.name,
|
||||
manufacturer: formData.manufacturer,
|
||||
description: formData.description,
|
||||
category: formData.category,
|
||||
commands: JSON.parse(formData.commands),
|
||||
};
|
||||
|
||||
if (formData.category === 'sensor' && formData.values) {
|
||||
submitData.values = JSON.parse(formData.values);
|
||||
}
|
||||
|
||||
if (props.isEdit) {
|
||||
await deviceTemplateService.updateDeviceTemplate(formData.id, submitData);
|
||||
} else {
|
||||
await deviceTemplateService.createDeviceTemplate(submitData);
|
||||
}
|
||||
|
||||
emit('success');
|
||||
handleClose();
|
||||
} catch (error) {
|
||||
console.error('保存设备模板失败:', error);
|
||||
ElMessage.error(
|
||||
props.isEdit ? '编辑设备模板失败: ' + (error.message || '未知错误') : '创建设备模板失败: ' + (error.message || '未知错误')
|
||||
);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.templateData,
|
||||
(newVal) => {
|
||||
if (newVal && Object.keys(newVal).length > 0) {
|
||||
// 填充表单数据
|
||||
formData.id = newVal.id;
|
||||
formData.name = newVal.name;
|
||||
formData.manufacturer = newVal.manufacturer;
|
||||
formData.description = newVal.description;
|
||||
formData.category = newVal.category;
|
||||
// 格式化JSON显示
|
||||
formData.commands = newVal.commands ? JSON.stringify(newVal.commands, null, 2) : '';
|
||||
formData.values = newVal.values ? JSON.stringify(newVal.values, null, 2) : '';
|
||||
} else {
|
||||
// 重置表单数据到初始状态 (新增模式)
|
||||
Object.assign(formData, initialFormData());
|
||||
}
|
||||
nextTick(() => {
|
||||
if (formRef.value) {
|
||||
formRef.value.clearValidate();
|
||||
}
|
||||
});
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(newVal) => {
|
||||
if (newVal && !props.isEdit) {
|
||||
// 如果是新增模式且对话框打开，重置表单
|
||||
Object.assign(formData, initialFormData());
|
||||
nextTick(() => {
|
||||
if (formRef.value) {
|
||||
formRef.value.clearValidate();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
return {
|
||||
formRef,
|
||||
loading,
|
||||
formData,
|
||||
rules,
|
||||
title,
|
||||
handleCategoryChange,
|
||||
handleClose,
|
||||
handleSubmit,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -3,17 +3,160 @@
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h2 class="page-title">设备模板管理</h2>
|
||||
<div class="title-container">
|
||||
<h2 class="page-title">设备模板管理</h2>
|
||||
<el-button type="text" @click="loadDeviceTemplates" class="refresh-btn" title="刷新设备模板列表">
|
||||
<el-icon :size="20"><Refresh /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button type="primary" @click="addTemplate">新增模板</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<el-empty description="设备模板管理功能待开发" />
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="loading" class="loading">
|
||||
<el-skeleton animated />
|
||||
</div>
|
||||
|
||||
<!-- 错误状态 -->
|
||||
<div v-else-if="error" class="error">
|
||||
<el-alert
|
||||
title="获取设备模板数据失败"
|
||||
:description="error"
|
||||
type="error"
|
||||
show-icon
|
||||
closable
|
||||
@close="error = null"
|
||||
/>
|
||||
<el-button type="primary" @click="loadDeviceTemplates" class="retry-btn">重新加载</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 设备模板列表 -->
|
||||
<el-table
|
||||
v-else
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
:fit="true"
|
||||
table-layout="auto"
|
||||
row-key="id"
|
||||
:highlight-current-row="false"
|
||||
:scrollbar-always-on="true"
|
||||
>
|
||||
<el-table-column prop="id" label="ID" min-width="80" />
|
||||
<el-table-column prop="name" label="名称" min-width="150" />
|
||||
<el-table-column prop="manufacturer" label="制造商" min-width="120" />
|
||||
<el-table-column prop="description" label="描述" min-width="200" />
|
||||
<el-table-column prop="category" label="类别" min-width="100">
|
||||
<template #default="scope">
|
||||
{{ formatCategory(scope.row.category) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 移除创建时间和更新时间列 -->
|
||||
<!-- <el-table-column prop="created_at" label="创建时间" min-width="160" /> -->
|
||||
<!-- <el-table-column prop="updated_at" label="更新时间" min-width="160" /> -->
|
||||
<el-table-column label="操作" min-width="150" align="center">
|
||||
<template #default="scope">
|
||||
<el-button size="small" @click="editTemplate(scope.row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteTemplate(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<!-- 设备模板表单对话框 -->
|
||||
<DeviceTemplateForm
|
||||
v-model:visible="dialogVisible"
|
||||
:template-data="currentTemplate"
|
||||
:is-edit="isEdit"
|
||||
@success="onTemplateSuccess"
|
||||
@cancel="dialogVisible = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Refresh } from '@element-plus/icons-vue';
|
||||
import deviceTemplateService from '../services/deviceTemplateService.js';
|
||||
import DeviceTemplateForm from './DeviceTemplateForm.vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
|
||||
export default {
|
||||
name: 'DeviceTemplateList',
|
||||
components: {
|
||||
DeviceTemplateForm,
|
||||
Refresh
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
loading: false,
|
||||
error: null,
|
||||
dialogVisible: false,
|
||||
currentTemplate: {},
|
||||
isEdit: false
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
await this.loadDeviceTemplates();
|
||||
},
|
||||
methods: {
|
||||
async loadDeviceTemplates() {
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
try {
|
||||
const data = await deviceTemplateService.getDeviceTemplates();
|
||||
this.tableData = data;
|
||||
} catch (err) {
|
||||
this.error = err.message || '未知错误';
|
||||
console.error('加载设备模板列表失败:', err);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
formatCategory(category) {
|
||||
const categoryMap = {
|
||||
'actuator': '执行器',
|
||||
'sensor': '传感器'
|
||||
};
|
||||
return categoryMap[category] || category || '-';
|
||||
},
|
||||
addTemplate() {
|
||||
this.currentTemplate = {};
|
||||
this.isEdit = false;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
editTemplate(template) {
|
||||
// 深度拷贝，避免直接修改表格数据
|
||||
this.currentTemplate = JSON.parse(JSON.stringify(template));
|
||||
this.isEdit = true;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
async deleteTemplate(template) {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确认删除设备模板 "${template.name}" 吗？`,
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
);
|
||||
await deviceTemplateService.deleteDeviceTemplate(template.id);
|
||||
ElMessage.success('删除成功');
|
||||
await this.loadDeviceTemplates();
|
||||
} catch (err) {
|
||||
if (err !== 'cancel') {
|
||||
ElMessage.error('删除失败: ' + (err.message || '未知错误'));
|
||||
}
|
||||
}
|
||||
},
|
||||
onTemplateSuccess() {
|
||||
ElMessage.success(this.isEdit ? '设备模板更新成功' : '设备模板添加成功');
|
||||
this.dialogVisible = false;
|
||||
this.loadDeviceTemplates();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -31,10 +174,41 @@ export default {
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.title-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
color: black;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.loading {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.error {
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
margin-top: 15px;
|
||||
}
|
||||
</style>
|
||||
79
src/services/deviceTemplateService.js
Normal file
79
src/services/deviceTemplateService.js
Normal file
@@ -0,0 +1,79 @@
|
||||
import apiClient from '../api/index.js';
|
||||
|
||||
class DeviceTemplateService {
|
||||
/**
|
||||
* 获取设备模板列表
|
||||
* @returns {Promise<Array>} 设备模板列表
|
||||
*/
|
||||
async getDeviceTemplates() {
|
||||
try {
|
||||
const response = await apiClient.deviceTemplates.list();
|
||||
return response.data || [];
|
||||
} catch (error) {
|
||||
console.error('获取设备模板列表失败:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建新设备模板
|
||||
* @param {Object} deviceTemplateData 设备模板数据
|
||||
* @returns {Promise<Object>} 创建的设备模板信息
|
||||
*/
|
||||
async createDeviceTemplate(deviceTemplateData) {
|
||||
try {
|
||||
const response = await apiClient.deviceTemplates.create(deviceTemplateData);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('创建设备模板失败:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取设备模板详情
|
||||
* @param {number} id 设备模板ID
|
||||
* @returns {Promise<Object>} 设备模板详情
|
||||
*/
|
||||
async getDeviceTemplate(id) {
|
||||
try {
|
||||
const response = await apiClient.deviceTemplates.get(id);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('获取设备模板详情失败:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新设备模板信息
|
||||
* @param {number} id 设备模板ID
|
||||
* @param {Object} deviceTemplateData 更新的设备模板信息
|
||||
* @returns {Promise<Object>} 更新后的设备模板信息
|
||||
*/
|
||||
async updateDeviceTemplate(id, deviceTemplateData) {
|
||||
try {
|
||||
const response = await apiClient.deviceTemplates.update(id, deviceTemplateData);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('更新设备模板失败:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除设备模板
|
||||
* @param {number} id 设备模板ID
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async deleteDeviceTemplate(id) {
|
||||
try {
|
||||
await apiClient.deviceTemplates.delete(id);
|
||||
} catch (error) {
|
||||
console.error('删除设备模板失败:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default new DeviceTemplateService();
|
||||
Reference in New Issue
Block a user