yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

【功能完善】IOT: 物模型数据类型组件完善

pull/620/head
puhui999 2024-12-15 23:15:51 +08:00
parent 488800b304
commit 187b5b03ee
4 changed files with 87 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/api/iot/thinkmodelfunction/index.ts
View File

@ -1,17 +1,40 @@
import request from '@/config/axios'
// IoT 产品物模型 VO
export interface ThinkModelFunctionVO {
id: number // 物模型功能编号
identifier: string // 功能标识
name: string // 功能名称
description: string // 功能描述
productId: number // 产品编号
productKey: string // 产品标识
type: number // 功能类型
property: string // 属性
event: string // 事件
service: string // 服务
/**
* IoT 产品物模型
*/
export interface ThingModelData {
id?: number // 物模型功能编号
identifier?: string // 功能标识
name?: string // 功能名称
description?: string // 功能描述
productId?: number // 产品编号
productKey?: string // 产品标识
type: ProductFunctionTypeEnum // 功能类型
property: ThingModelProperty // 属性
event?: ThingModelEvent // 事件
service?: ThingModelService // 服务
}
/**
* ThingModelProperty 类型
*/
export interface ThingModelProperty {
[key: string]: any
}
/**
* ThingModelEvent 类型
*/
export interface ThingModelEvent {
[key: string]: any
}
/**
* ThingModelService 类型
*/
export interface ThingModelService {
[key: string]: any
}
// IOT 产品功能（物模型）类型枚举类
@ -47,22 +70,17 @@ export const ThinkModelFunctionApi = {
},
// 新增产品物模型
createThinkModelFunction: async (data: ThinkModelFunctionVO) => {
createThinkModelFunction: async (data: ThingModelData) => {
return await request.post({ url: `/iot/think-model-function/create`, data })
},
// 修改产品物模型
updateThinkModelFunction: async (data: ThinkModelFunctionVO) => {
updateThinkModelFunction: async (data: ThingModelData) => {
return await request.put({ url: `/iot/think-model-function/update`, data })
},
// 删除产品物模型
deleteThinkModelFunction: async (id: number) => {
return await request.delete({ url: `/iot/think-model-function/delete?id=` + id })
},
// 导出产品物模型 Excel
exportThinkModelFunction: async (params) => {
return await request.download({ url: `/iot/think-model-function/export-excel`, params })
}
}

52
src/views/iot/product/product/detail/ThingModel/ThingModelDataSpecs.vue
View File

@ -1,6 +1,6 @@
<template>
<el-form-item label="数据类型" prop="dataType">
<el-select v-model="formData.dataType" placeholder="请选择数据类型" @change="handleChange">
<el-select v-model="property.dataType" placeholder="请选择数据类型" @change="handleChange">
<el-option
v-for="option in dataTypeOptions"
:key="option.value"
@ -13,19 +13,19 @@
<ThingModelNumberTypeDataSpecs
v-if="
[DataSpecsDataType.INT, DataSpecsDataType.DOUBLE, DataSpecsDataType.FLOAT].includes(
formData.dataType || ''
property.dataType || ''
)
"
v-model="formData.dataSpecs"
v-model="property.dataSpecs"
/>
<!-- 枚举型配置 -->
<ThingModelEnumTypeDataSpecs
v-if="formData.dataType === DataSpecsDataType.ENUM"
v-model="formData.dataSpecsList"
v-if="property.dataType === DataSpecsDataType.ENUM"
v-model="property.dataSpecsList"
/>
<!-- 布尔型配置 -->
<el-form-item label="布尔值" prop="bool" v-if="formData.dataType === DataSpecsDataType.BOOL">
<template v-for="item in formData.dataSpecsList" :key="item.value">
<el-form-item label="布尔值" prop="bool" v-if="property.dataType === DataSpecsDataType.BOOL">
<template v-for="item in property.dataSpecsList" :key="item.value">
<div class="flex items-center justify-start w-1/1 mb-5px">
<span>{{ item.value }}</span>
<span class="mx-2">-</span>
@ -38,20 +38,29 @@
</template>
</el-form-item>
<!-- 文本型配置 -->
<el-form-item label="数据长度" prop="text" v-if="formData.dataType === DataSpecsDataType.TEXT">
<el-input v-model="formData.length" class="w-255px!" placeholder="请输入文本字节长度">
<el-form-item label="数据长度" prop="text" v-if="property.dataType === DataSpecsDataType.TEXT">
<el-input v-model="property.length" class="w-255px!" placeholder="请输入文本字节长度">
<template #append>字节</template>
</el-input>
</el-form-item>
<!-- 时间型配置 -->
<el-form-item label="时间格式" prop="date" v-if="formData.dataType === DataSpecsDataType.DATE">
<el-form-item label="时间格式" prop="date" v-if="property.dataType === DataSpecsDataType.DATE">
<el-input disabled class="w-255px!" placeholder="String类型的UTC时间戳（毫秒）" />
</el-form-item>
<!-- 数组型配置-->
<ThingModelArrayTypeDataSpecs
v-model="formData.dataSpecs"
v-if="formData.dataType === DataSpecsDataType.ARRAY"
v-model="property.dataSpecs"
v-if="property.dataType === DataSpecsDataType.ARRAY"
/>
<el-form-item label="读写类型" prop="accessMode">
<el-radio-group v-model="property.accessMode">
<el-radio label="rw">读写</el-radio>
<el-radio label="r">只读</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="属性描述" prop="description">
<el-input v-model="property.description" placeholder="请输入属性描述" type="textarea" />
</el-form-item>
</template>
<script lang="ts" setup>
@ -62,30 +71,31 @@ import {
ThingModelEnumTypeDataSpecs,
ThingModelNumberTypeDataSpecs
} from './dataSpecs'
import { ThingModelProperty } from '@/api/iot/thinkmodelfunction'
/** 物模型数据 */
defineOptions({ name: 'ThingModelDataSpecs' })
const props = defineProps<{ modelValue: any }>()
const emits = defineEmits(['update:modelValue'])
const formData = useVModel(props, 'modelValue', emits) as Ref<any>
const property = useVModel(props, 'modelValue', emits) as Ref<ThingModelProperty>
/** 属性值的数据类型切换时初始化相关数据 */
const handleChange = (dataType: any) => {
formData.value.dataSpecsList = []
formData.value.dataSpecs = {}
property.value.dataSpecsList = []
property.value.dataSpecs = {}
switch (dataType) {
case DataSpecsDataType.INT:
formData.value.dataSpecs.dataType = DataSpecsDataType.INT
property.value.dataSpecs.dataType = DataSpecsDataType.INT
break
case DataSpecsDataType.DOUBLE:
formData.value.dataSpecs.dataType = DataSpecsDataType.DOUBLE
property.value.dataSpecs.dataType = DataSpecsDataType.DOUBLE
break
case DataSpecsDataType.FLOAT:
formData.value.dataSpecs.dataType = DataSpecsDataType.FLOAT
property.value.dataSpecs.dataType = DataSpecsDataType.FLOAT
break
case DataSpecsDataType.ENUM:
formData.value.dataSpecsList.push({
property.value.dataSpecsList.push({
dataType: DataSpecsDataType.ENUM,
name: '', // 枚举项的名称
value: undefined // 枚举值
@ -93,7 +103,7 @@ const handleChange = (dataType: any) => {
break
case DataSpecsDataType.BOOL:
for (let i = 0; i < 2; i++) {
formData.value.dataSpecsList.push({
property.value.dataSpecsList.push({
dataType: DataSpecsDataType.BOOL,
name: '', // 布尔值的名称
value: i // 布尔值
@ -101,7 +111,7 @@ const handleChange = (dataType: any) => {
}
break
case DataSpecsDataType.ARRAY:
formData.value.dataSpecs.dataType = DataSpecsDataType.ARRAY
property.value.dataSpecs.dataType = DataSpecsDataType.ARRAY
break
}
}

51
src/views/iot/product/product/detail/ThingModel/ThingModelForm.vue
View File

@ -20,16 +20,11 @@
<el-form-item label="标识符" prop="identifier">
<el-input v-model="formData.identifier" placeholder="请输入标识符" />
</el-form-item>
<ThingModelDataSpecs v-model="formData" />
<el-form-item label="读写类型" prop="accessMode">
<el-radio-group v-model="formData.accessMode">
<el-radio label="rw">读写</el-radio>
<el-radio label="r">只读</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="属性描述" prop="property.description">
<el-input v-model="formData.description" placeholder="请输入属性描述" type="textarea" />
</el-form-item>
<!-- 属性配置 -->
<ThingModelDataSpecs
v-model="formData.property"
v-if="formData.type === ProductFunctionTypeEnum.PROPERTY"
/>
</el-form>
<template #footer>
@ -45,7 +40,7 @@ import ThingModelDataSpecs from './ThingModelDataSpecs.vue'
import {
ProductFunctionTypeEnum,
ThinkModelFunctionApi,
ThinkModelFunctionVO
ThingModelData
} from '@/api/iot/thinkmodelfunction'
import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
import { DataSpecsDataType } from './config'
@ -61,18 +56,13 @@ const dialogVisible = ref(false)
const dialogTitle = ref('')
const formLoading = ref(false)
const formType = ref('')
const formData = ref({
id: undefined,
productId: undefined,
productKey: undefined,
identifier: undefined,
name: undefined,
description: undefined,
const formData = ref<ThingModelData>({
type: ProductFunctionTypeEnum.PROPERTY,
dataType: DataSpecsDataType.INT,
dataSpecsList: [],
dataSpecs: {},
accessMode: undefined
property: {
dataType: DataSpecsDataType.INT,
dataSpecsList: [],
dataSpecs: {}
}
})
const formRules = reactive({
name: [
@ -138,7 +128,7 @@ const submitForm = async () => {
await formRef.value.validate()
formLoading.value = true
try {
const data = formData.value as unknown as ThinkModelFunctionVO
const data = formData.value as unknown as ThingModelData
data.productId = product!.value.id
data.productKey = product!.value.productKey
if (formType.value === 'create') {
@ -158,17 +148,12 @@ const submitForm = async () => {
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
productId: undefined,
productKey: undefined,
identifier: undefined,
name: undefined,
description: undefined,
type: ProductFunctionTypeEnum.PROPERTY,
dataType: DataSpecsDataType.INT,
dataSpecsList: [],
dataSpecs: {},
accessMode: undefined
property: {
dataType: DataSpecsDataType.INT,
dataSpecsList: [],
dataSpecs: {}
}
}
formRef.value?.resetFields()
}

2
src/views/iot/product/product/detail/ThingModel/dataSpecs/ThingModelArrayTypeDataSpecs.vue
View File

@ -24,7 +24,7 @@
import { useVModel } from '@vueuse/core'
import { DataSpecsDataType, dataTypeOptions } from '../config'
/** 数值型的 dataSpecs 配置组件 */
/** 数组型的 dataSpecs 配置组件 */
defineOptions({ name: 'ThingModelArrayTypeDataSpecs' })
const props = defineProps<{ modelValue: any }>()
const emits = defineEmits(['update:modelValue'])