【功能新增】IOT: ThingModel 服务和事件
This commit is contained in:
39
src/views/iot/thingmodel/ThingModelEvent.vue
Normal file
39
src/views/iot/thingmodel/ThingModelEvent.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<el-form-item
|
||||
:rules="[{ required: true, message: '请选择事件类型', trigger: 'change' }]"
|
||||
label="事件类型"
|
||||
prop="thingModelEvent.type"
|
||||
>
|
||||
<el-radio-group v-model="thingModelEvent.type">
|
||||
<el-radio :value="ThingModelServiceEventType.INFO.value">
|
||||
{{ ThingModelServiceEventType.INFO.label }}
|
||||
</el-radio>
|
||||
<el-radio :value="ThingModelServiceEventType.ALERT.value">
|
||||
{{ ThingModelServiceEventType.ALERT.label }}
|
||||
</el-radio>
|
||||
<el-radio :value="ThingModelServiceEventType.ERROR.value">
|
||||
{{ ThingModelServiceEventType.ERROR.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import { ThingModelEvent, ThingModelServiceEventType } from '@/api/iot/thingmodel'
|
||||
|
||||
/** IoT 物模型事件 */
|
||||
defineOptions({ name: 'ThingModelEvent' })
|
||||
|
||||
const props = defineProps<{ modelValue: any; isStructDataSpecs?: boolean }>()
|
||||
const emits = defineEmits(['update:modelValue'])
|
||||
const thingModelEvent = useVModel(props, 'modelValue', emits) as Ref<ThingModelEvent>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-form-item) {
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -25,10 +25,17 @@
|
||||
<el-input v-model="formData.identifier" placeholder="请输入标识符" />
|
||||
</el-form-item>
|
||||
<!-- 属性配置 -->
|
||||
<ThingModelDataSpecs
|
||||
v-if="formData.type === ProductFunctionTypeEnum.PROPERTY"
|
||||
<ThingModelProperty
|
||||
v-if="formData.type === ThingModelType.PROPERTY"
|
||||
v-model="formData.property"
|
||||
/>
|
||||
<!-- 服务配置 -->
|
||||
<ThingModelService
|
||||
v-if="formData.type === ThingModelType.SERVICE"
|
||||
v-model="formData.service"
|
||||
/>
|
||||
<!-- 事件配置 -->
|
||||
<ThingModelEvent v-if="formData.type === ThingModelType.EVENT" v-model="formData.event" />
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
@ -40,8 +47,10 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ProductVO } from '@/api/iot/product/product'
|
||||
import ThingModelDataSpecs from './ThingModelDataSpecs.vue'
|
||||
import { ProductFunctionTypeEnum, ThingModelApi, ThingModelData } from '@/api/iot/thingmodel'
|
||||
import ThingModelProperty from './ThingModelProperty.vue'
|
||||
import ThingModelService from './ThingModelService.vue'
|
||||
import ThingModelEvent from './ThingModelEvent.vue'
|
||||
import { ThingModelApi, ThingModelData, ThingModelType } from '@/api/iot/thingmodel'
|
||||
import { IOT_PROVIDE_KEY } from '@/views/iot/utils/constants'
|
||||
import { DataSpecsDataType, ThingModelFormRules } from './config'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
@ -61,14 +70,16 @@ const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
|
||||
const formType = ref('') // 表单的类型:create - 新增;update - 修改
|
||||
const formData = ref<ThingModelData>({
|
||||
type: ProductFunctionTypeEnum.PROPERTY,
|
||||
type: ThingModelType.PROPERTY,
|
||||
dataType: DataSpecsDataType.INT,
|
||||
property: {
|
||||
dataType: DataSpecsDataType.INT,
|
||||
dataSpecs: {
|
||||
dataType: DataSpecsDataType.INT
|
||||
}
|
||||
}
|
||||
},
|
||||
service: {},
|
||||
event: {}
|
||||
})
|
||||
|
||||
const formRef = ref() // 表单 Ref
|
||||
@ -104,13 +115,7 @@ const submitForm = async () => {
|
||||
data.dataType = data.property.dataType
|
||||
data.property.identifier = data.identifier
|
||||
data.property.name = data.name
|
||||
// 处理 dataSpecs 为空的情况
|
||||
if (isEmpty(data.property.dataSpecs)) {
|
||||
delete data.property.dataSpecs
|
||||
}
|
||||
if (isEmpty(data.property.dataSpecsList)) {
|
||||
delete data.property.dataSpecsList
|
||||
}
|
||||
removeExtraAttributes(data)
|
||||
if (formType.value === 'create') {
|
||||
await ThingModelApi.createThingModel(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
@ -125,10 +130,34 @@ const submitForm = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
/** 删除额外的属性 */
|
||||
const removeExtraAttributes = (data: any) => {
|
||||
// 处理 dataSpecs 为空的情况
|
||||
if (isEmpty(data.property.dataSpecs)) {
|
||||
delete data.property.dataSpecs
|
||||
}
|
||||
if (isEmpty(data.property.dataSpecsList)) {
|
||||
delete data.property.dataSpecsList
|
||||
}
|
||||
// 处理不同类型的情况
|
||||
if (data.type === ThingModelType.PROPERTY) {
|
||||
delete data.service
|
||||
delete data.event
|
||||
}
|
||||
if (data.type === ThingModelType.SERVICE) {
|
||||
delete data.property
|
||||
delete data.event
|
||||
}
|
||||
if (data.type === ThingModelType.EVENT) {
|
||||
delete data.property
|
||||
delete data.service
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
type: ProductFunctionTypeEnum.PROPERTY,
|
||||
type: ThingModelType.PROPERTY,
|
||||
dataType: DataSpecsDataType.INT,
|
||||
property: {
|
||||
dataType: DataSpecsDataType.INT,
|
||||
|
||||
@ -77,8 +77,12 @@
|
||||
/>
|
||||
<el-form-item v-if="!isStructDataSpecs" label="读写类型" prop="property.accessMode">
|
||||
<el-radio-group v-model="property.accessMode">
|
||||
<el-radio label="rw">读写</el-radio>
|
||||
<el-radio label="r">只读</el-radio>
|
||||
<el-radio :label="ThingModelAccessMode.READ_WRITE.value">
|
||||
{{ ThingModelAccessMode.READ_WRITE.label }}
|
||||
</el-radio>
|
||||
<el-radio :label="ThingModelAccessMode.READ_ONLY.value">
|
||||
{{ ThingModelAccessMode.READ_ONLY.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="属性描述" prop="description">
|
||||
@ -101,10 +105,10 @@ import {
|
||||
ThingModelNumberDataSpecs,
|
||||
ThingModelStructDataSpecs
|
||||
} from './dataSpecs'
|
||||
import { ThingModelProperty } from '@/api/iot/thingmodel'
|
||||
import { ThingModelAccessMode, ThingModelProperty } from '@/api/iot/thingmodel'
|
||||
|
||||
/** IoT 物模型数据 */
|
||||
defineOptions({ name: 'ThingModelDataSpecs' })
|
||||
defineOptions({ name: 'ThingModelProperty' })
|
||||
|
||||
const props = defineProps<{ modelValue: any; isStructDataSpecs?: boolean }>()
|
||||
const emits = defineEmits(['update:modelValue'])
|
||||
@ -117,6 +121,7 @@ const getDataTypeOptions = computed(() => {
|
||||
!([DataSpecsDataType.STRUCT, DataSpecsDataType.ARRAY] as any[]).includes(item.value)
|
||||
)
|
||||
}) // 获得数据类型列表
|
||||
|
||||
/** 属性值的数据类型切换时初始化相关数据 */
|
||||
const handleChange = (dataType: any) => {
|
||||
property.value.dataSpecsList = []
|
||||
36
src/views/iot/thingmodel/ThingModelService.vue
Normal file
36
src/views/iot/thingmodel/ThingModelService.vue
Normal file
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<el-form-item
|
||||
:rules="[{ required: true, message: '请选择调用方式', trigger: 'change' }]"
|
||||
label="调用方式"
|
||||
prop="service.callType"
|
||||
>
|
||||
<el-radio-group v-model="service.callType">
|
||||
<el-radio :value="ThingModelServiceCallType.ASYNC.value">
|
||||
{{ ThingModelServiceCallType.ASYNC.label }}
|
||||
</el-radio>
|
||||
<el-radio :value="ThingModelServiceCallType.SYNC.value">
|
||||
{{ ThingModelServiceCallType.SYNC.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import { ThingModelService, ThingModelServiceCallType } from '@/api/iot/thingmodel'
|
||||
|
||||
/** IoT 物模型服务 */
|
||||
defineOptions({ name: 'ThingModelService' })
|
||||
|
||||
const props = defineProps<{ modelValue: any; isStructDataSpecs?: boolean }>()
|
||||
const emits = defineEmits(['update:modelValue'])
|
||||
const service = useVModel(props, 'modelValue', emits) as Ref<ThingModelService>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-form-item) {
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -47,10 +47,10 @@
|
||||
@change="unitChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in UnifyUnitSpecsDTO"
|
||||
v-for="(item, index) in getStrDictOptions(DICT_TYPE.IOT_PRODUCT_THING_MODEL_UNIT)"
|
||||
:key="index"
|
||||
:label="item.Name + '-' + item.Symbol"
|
||||
:value="item.Name + '-' + item.Symbol"
|
||||
:label="item.label + '-' + item.value"
|
||||
:value="item.label + '-' + item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@ -58,8 +58,8 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import { UnifyUnitSpecsDTO } from '@/views/iot/utils/constants'
|
||||
import { DataSpecsNumberDataVO } from '../config'
|
||||
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
|
||||
|
||||
/** 数值型的 dataSpecs 配置组件 */
|
||||
defineOptions({ name: 'ThingModelNumberDataSpecs' })
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
<el-input v-model="formData.identifier" placeholder="请输入标识符" />
|
||||
</el-form-item>
|
||||
<!-- 属性配置 -->
|
||||
<ThingModelDataSpecs v-model="formData.property" is-struct-data-specs />
|
||||
<ThingModelProperty v-model="formData.property" is-struct-data-specs />
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
@ -47,7 +47,7 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import ThingModelDataSpecs from '../ThingModelDataSpecs.vue'
|
||||
import ThingModelProperty from '../ThingModelProperty.vue'
|
||||
import { DataSpecsDataType, ThingModelFormRules } from '../config'
|
||||
import { isEmpty } from '@/utils/is'
|
||||
|
||||
|
||||
Reference in New Issue
Block a user