diff --git a/src/views/iot/rule/scene/form/configs/DeviceControlConfig.vue b/src/views/iot/rule/scene/form/configs/DeviceControlConfig.vue
index 2eb1c5a3d..7bf056bdf 100644
--- a/src/views/iot/rule/scene/form/configs/DeviceControlConfig.vue
+++ b/src/views/iot/rule/scene/form/configs/DeviceControlConfig.vue
@@ -23,11 +23,29 @@
-
+ >
+
+
+ {{ service.name }}
+
+ {{ service.callType === 'sync' ? '同步' : '异步' }}
+
+
+
+
@@ -302,7 +320,6 @@ import { useVModel } from '@vueuse/core'
import { InfoFilled } from '@element-plus/icons-vue'
import ProductSelector from '../selectors/ProductSelector.vue'
import DeviceSelector from '../selectors/DeviceSelector.vue'
-import ServiceSelector from '../selectors/ServiceSelector.vue'
import { ActionFormData, ThingModelService } from '@/api/iot/rule/scene/scene.types'
import { IotRuleSceneActionTypeEnum } from '@/views/iot/utils/constants'
@@ -319,38 +336,36 @@ const emit = defineEmits<{
const action = useVModel(props, 'modelValue', emit)
-// 状态
-const paramsJson = ref('')
-const jsonError = ref('')
-const thingModelProperties = ref
([])
-const loadingThingModel = ref(false)
-const propertyValues = ref>({})
+const paramsJson = ref('') // 参数JSON字符串
+const jsonError = ref('') // JSON格式错误信息
+const thingModelProperties = ref([]) // 物模型属性列表
+const loadingThingModel = ref(false) // 物模型加载状态
+const propertyValues = ref>({}) // 属性值映射
-// 服务调用相关状态
-const selectedService = ref(null)
+const selectedService = ref(null) // 选中的服务对象
+const serviceList = ref([]) // 服务列表
+const loadingServices = ref(false) // 服务加载状态
-// 示例弹出层相关状态
-const showExampleDetail = ref(false)
-const exampleTriggerRef = ref()
-const exampleDetailRef = ref()
-const examplePopoverStyle = ref({})
+const showExampleDetail = ref(false) // 示例详情弹出层显示状态
+const exampleTriggerRef = ref() // 示例触发按钮引用
+const exampleDetailRef = ref() // 示例详情弹出层引用
+const examplePopoverStyle = ref({}) // 示例弹出层样式
-// 计算属性
const isPropertySetAction = computed(() => {
+ // 是否为属性设置类型
return action.value.type === IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET
})
const isServiceInvokeAction = computed(() => {
+ // 是否为服务调用类型
return action.value.type === IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE
})
-// 事件处理
+/**
+ * 处理产品变化事件
+ * @param productId 产品ID
+ */
const handleProductChange = (productId?: number) => {
- console.log('🔄 handleProductChange called:', {
- productId,
- currentProductId: action.value.productId
- })
-
// 当产品变化时,清空设备选择和参数配置
if (action.value.productId !== productId) {
action.value.deviceId = undefined
@@ -360,16 +375,23 @@ const handleProductChange = (productId?: number) => {
jsonError.value = ''
propertyValues.value = {}
selectedService.value = null // 清空选中的服务
-
- console.log('🧹 Cleared action data due to product change')
+ serviceList.value = [] // 清空服务列表
}
- // 加载新产品的物模型属性
- if (productId && isPropertySetAction.value) {
- loadThingModelProperties(productId)
+ // 加载新产品的物模型属性或服务列表
+ if (productId) {
+ if (isPropertySetAction.value) {
+ loadThingModelProperties(productId)
+ } else if (isServiceInvokeAction.value) {
+ loadServiceList(productId)
+ }
}
}
+/**
+ * 处理设备变化事件
+ * @param deviceId 设备ID
+ */
const handleDeviceChange = (deviceId?: number) => {
// 当设备变化时,清空参数配置
if (action.value.deviceId !== deviceId) {
@@ -379,11 +401,14 @@ const handleDeviceChange = (deviceId?: number) => {
}
}
-const handleServiceChange = (serviceIdentifier?: string, service?: ThingModelService) => {
- console.log('🔄 handleServiceChange called:', { serviceIdentifier, service: service?.name })
-
- // 更新服务对象
- selectedService.value = service || null
+/**
+ * 处理服务变化事件
+ * @param serviceIdentifier 服务标识符
+ */
+const handleServiceChange = (serviceIdentifier?: string) => {
+ // 根据服务标识符找到对应的服务对象
+ const service = serviceList.value.find((s) => s.identifier === serviceIdentifier) || null
+ selectedService.value = service
// 当服务变化时,清空参数配置并根据服务输入参数生成默认参数结构
action.value.params = {}
@@ -398,19 +423,21 @@ const handleServiceChange = (serviceIdentifier?: string, service?: ThingModelSer
})
action.value.params = defaultParams
paramsJson.value = JSON.stringify(defaultParams, null, 2)
-
- console.log('✅ Generated default params:', defaultParams)
}
}
-// 快速填充示例数据
+/**
+ * 快速填充示例数据
+ */
const fillExampleJson = () => {
const exampleData = generateExampleJson()
paramsJson.value = exampleData
handleParamsChange()
}
-// 快速填充服务示例数据
+/**
+ * 快速填充服务示例数据
+ */
const fillServiceExampleJson = () => {
if (selectedService.value && selectedService.value.inputParams) {
const exampleData = generateServiceExampleJson()
@@ -419,7 +446,9 @@ const fillServiceExampleJson = () => {
}
}
-// 清空参数
+/**
+ * 清空参数
+ */
const clearParams = () => {
paramsJson.value = ''
action.value.params = {}
@@ -437,7 +466,10 @@ const clearParams = () => {
// jsonError.value = ''
// }
-// 加载物模型属性
+/**
+ * 加载物模型属性
+ * @param productId 产品ID
+ */
const loadThingModelProperties = async (productId: number) => {
if (!productId) {
thingModelProperties.value = []
@@ -490,40 +522,48 @@ const loadThingModelProperties = async (productId: number) => {
}
}
-// 从TSL加载服务信息
-const loadServiceFromTSL = async (productId: number, serviceIdentifier: string) => {
- console.log('🔍 loadServiceFromTSL called:', { productId, serviceIdentifier })
+/**
+ * 加载服务列表
+ * @param productId 产品ID
+ */
+const loadServiceList = async (productId: number) => {
+ if (!productId) {
+ serviceList.value = []
+ return
+ }
+
+ loadingServices.value = true
try {
const { ThingModelApi } = await import('@/api/iot/thingmodel')
const tslData = await ThingModelApi.getThingModelTSLByProductId(productId)
- console.log('📡 TSL data loaded:', tslData)
-
- if (tslData?.services) {
- const service = tslData.services.find((s: any) => s.identifier === serviceIdentifier)
- console.log('🎯 Found service:', service)
-
- if (service) {
- // 设置服务对象
- selectedService.value = service
-
- console.log('✅ Service set:', {
- serviceIdentifier,
- selectedService: selectedService.value?.name
- })
-
- // 确保在下一个tick中更新,让ServiceSelector有时间处理
- await nextTick()
- } else {
- console.warn('⚠️ Service not found in TSL')
- }
- } else {
- console.warn('⚠️ No services in TSL data')
- }
+ serviceList.value = tslData?.services || []
} catch (error) {
- console.error('❌ 加载服务信息失败:', error)
+ console.error('加载服务列表失败:', error)
+ serviceList.value = []
+ } finally {
+ loadingServices.value = false
}
}
+/**
+ * 从TSL加载服务信息(用于编辑模式回显)
+ * @param productId 产品ID
+ * @param serviceIdentifier 服务标识符
+ */
+const loadServiceFromTSL = async (productId: number, serviceIdentifier: string) => {
+ // 先加载服务列表
+ await loadServiceList(productId)
+
+ // 然后设置选中的服务
+ const service = serviceList.value.find((s: any) => s.identifier === serviceIdentifier)
+ if (service) {
+ selectedService.value = service
+ }
+}
+
+/**
+ * 处理参数变化事件
+ */
const handleParamsChange = () => {
try {
jsonError.value = '' // 清除之前的错误
@@ -550,7 +590,11 @@ const handleParamsChange = () => {
}
}
-// 工具函数 - 参考 PropertySelector 的设计
+/**
+ * 获取属性类型名称
+ * @param dataType 数据类型
+ * @returns 类型名称
+ */
const getPropertyTypeName = (dataType: string) => {
const typeMap = {
int: '整数',
@@ -566,7 +610,11 @@ const getPropertyTypeName = (dataType: string) => {
return typeMap[dataType] || dataType
}
-// 根据参数类型获取默认值
+/**
+ * 根据参数类型获取默认值
+ * @param param 参数对象
+ * @returns 默认值
+ */
const getDefaultValueForParam = (param: any) => {
switch (param.dataType) {
case 'int':
@@ -589,6 +637,11 @@ const getDefaultValueForParam = (param: any) => {
}
}
+/**
+ * 获取属性类型标签样式
+ * @param dataType 数据类型
+ * @returns 标签类型
+ */
const getPropertyTypeTag = (dataType: string) => {
const tagMap = {
int: 'primary',
@@ -604,6 +657,11 @@ const getPropertyTypeTag = (dataType: string) => {
return tagMap[dataType] || 'info'
}
+/**
+ * 获取属性示例值
+ * @param property 属性对象
+ * @returns 示例值
+ */
const getExampleValue = (property: any) => {
switch (property.dataType) {
case 'int':
@@ -622,7 +680,11 @@ const getExampleValue = (property: any) => {
}
}
-// 获取参数示例值
+/**
+ * 获取参数示例值
+ * @param param 参数对象
+ * @returns 示例值
+ */
const getExampleValueForParam = (param: any) => {
switch (param.dataType) {
case 'int':
@@ -644,6 +706,10 @@ const getExampleValueForParam = (param: any) => {
}
}
+/**
+ * 生成示例JSON
+ * @returns JSON字符串
+ */
const generateExampleJson = () => {
if (thingModelProperties.value.length === 0) {
return JSON.stringify(
@@ -680,7 +746,10 @@ const generateExampleJson = () => {
return JSON.stringify(example, null, 2)
}
-// 生成服务示例JSON
+/**
+ * 生成服务示例JSON
+ * @returns JSON字符串
+ */
const generateServiceExampleJson = () => {
if (!selectedService.value || !selectedService.value.inputParams) {
return JSON.stringify({}, null, 2)
@@ -694,7 +763,9 @@ const generateServiceExampleJson = () => {
return JSON.stringify(example, null, 2)
}
-// 示例弹出层控制方法 - 参考 PropertySelector 的设计
+/**
+ * 切换示例详情弹出层显示状态
+ */
const toggleExampleDetail = () => {
if (showExampleDetail.value) {
hideExampleDetail()
@@ -703,6 +774,9 @@ const toggleExampleDetail = () => {
}
}
+/**
+ * 显示示例详情弹出层
+ */
const showExampleDetailPopover = () => {
if (!exampleTriggerRef.value) return
@@ -713,10 +787,16 @@ const showExampleDetailPopover = () => {
})
}
+/**
+ * 隐藏示例详情弹出层
+ */
const hideExampleDetail = () => {
showExampleDetail.value = false
}
+/**
+ * 更新示例弹出层位置
+ */
const updateExamplePopoverPosition = () => {
if (!exampleTriggerRef.value || !exampleDetailRef.value) return
@@ -754,7 +834,10 @@ const updateExamplePopoverPosition = () => {
}
}
-// 点击外部关闭弹出层
+/**
+ * 点击外部关闭弹出层
+ * @param event 鼠标事件
+ */
const handleClickOutside = (event: MouseEvent) => {
if (
showExampleDetail.value &&
@@ -767,14 +850,18 @@ const handleClickOutside = (event: MouseEvent) => {
}
}
-// 监听窗口大小变化,重新计算弹出层位置
+/**
+ * 监听窗口大小变化,重新计算弹出层位置
+ */
const handleResize = () => {
if (showExampleDetail.value) {
updateExamplePopoverPosition()
}
}
-// 初始化
+/**
+ * 组件初始化
+ */
onMounted(() => {
if (action.value.params && Object.keys(action.value.params).length > 0) {
try {
@@ -803,7 +890,9 @@ onMounted(() => {
window.addEventListener('resize', handleResize)
})
-// 组件卸载时清理事件监听器
+/**
+ * 组件卸载时清理事件监听器
+ */
onUnmounted(() => {
document.removeEventListener('click', handleClickOutside)
window.removeEventListener('resize', handleResize)
@@ -840,21 +929,20 @@ watch(
watch(
() => action.value,
async (newAction) => {
- console.log('🔄 action.value changed:', {
- type: newAction?.type,
- productId: newAction?.productId,
- identifier: newAction?.identifier,
- isServiceInvokeAction: isServiceInvokeAction.value
- })
-
if (newAction) {
// 处理服务调用的数据回显
- if (isServiceInvokeAction.value && newAction.productId && newAction.identifier) {
- // 异步加载服务信息以设置selectedService
- await loadServiceFromTSL(newAction.productId, newAction.identifier)
+ if (isServiceInvokeAction.value && newAction.productId) {
+ if (newAction.identifier) {
+ // 编辑模式:加载服务信息并设置选中的服务
+ await loadServiceFromTSL(newAction.productId, newAction.identifier)
+ } else {
+ // 新建模式:只加载服务列表
+ await loadServiceList(newAction.productId)
+ }
} else if (isServiceInvokeAction.value) {
// 清空服务选择
selectedService.value = null
+ serviceList.value = []
}
// 处理参数回显
@@ -865,10 +953,9 @@ watch(
paramsJson.value = newJsonString
propertyValues.value = { ...newAction.params }
jsonError.value = ''
- console.log('✅ Params restored:', newAction.params)
}
} catch (error) {
- console.error('❌ 参数格式化失败:', error)
+ console.error('参数格式化失败:', error)
jsonError.value = '参数格式化失败'
}
} else {
@@ -876,7 +963,6 @@ watch(
paramsJson.value = ''
propertyValues.value = {}
jsonError.value = ''
- console.log('🧹 Params cleared')
}
}
}
diff --git a/src/views/iot/rule/scene/form/selectors/ServiceSelector.vue b/src/views/iot/rule/scene/form/selectors/ServiceSelector.vue
index f03911bc2..d9ef7ed19 100644
--- a/src/views/iot/rule/scene/form/selectors/ServiceSelector.vue
+++ b/src/views/iot/rule/scene/form/selectors/ServiceSelector.vue
@@ -209,6 +209,10 @@ const servicePopoverStyle = ref({})
// 事件处理
const handleChange = (value?: string) => {
+ // 更新 modelValue(这是 v-model 绑定的关键)
+ emit('update:modelValue', value)
+
+ // 触发 change 事件,传递服务对象
const service = serviceList.value.find((s) => s.identifier === value)
emit('change', value, service)
}
@@ -336,22 +340,11 @@ watch(
watch(
() => props.modelValue,
(newValue) => {
- console.log('🔄 ServiceSelector modelValue changed:', {
- newValue,
- serviceListLength: serviceList.value.length,
- serviceList: serviceList.value.map((s) => s.identifier)
- })
-
if (newValue && serviceList.value.length > 0) {
// 确保服务列表已加载,然后设置选中的服务
const service = serviceList.value.find((s) => s.identifier === newValue)
- console.log('🎯 ServiceSelector found service:', service)
-
if (service) {
selectedService.value = service
- console.log('✅ ServiceSelector service set:', service.name)
- } else {
- console.warn('⚠️ ServiceSelector service not found for identifier:', newValue)
}
}
},
@@ -362,20 +355,11 @@ watch(
watch(
() => serviceList.value,
(newServiceList) => {
- console.log('📋 ServiceSelector serviceList changed:', {
- length: newServiceList.length,
- services: newServiceList.map((s) => s.identifier),
- modelValue: props.modelValue
- })
-
if (newServiceList.length > 0 && props.modelValue) {
// 服务列表加载完成后,如果有modelValue,设置选中的服务
const service = newServiceList.find((s) => s.identifier === props.modelValue)
- console.log('🎯 ServiceSelector found service in list:', service)
-
if (service) {
selectedService.value = service
- console.log('✅ ServiceSelector service set from list:', service.name)
}
}
},