<!-- 属性选择器组件 -->
|
<template>
|
<div class="flex items-center gap-8px">
|
<el-select
|
v-model="localValue"
|
placeholder="请选择监控项"
|
filterable
|
clearable
|
@change="handleChange"
|
class="!w-150px"
|
:loading="loading"
|
>
|
<el-option-group v-for="group in propertyGroups" :key="group.label" :label="group.label">
|
<el-option
|
v-for="property in group.options"
|
:key="property.identifier"
|
:label="property.name"
|
:value="property.identifier"
|
>
|
<div class="flex items-center justify-between w-full py-2px">
|
<span class="text-14px font-500 text-[var(--el-text-color-primary)] flex-1 truncate">
|
{{ property.name }}
|
</span>
|
<el-tag
|
:type="getDataTypeTagType(property.dataType)"
|
size="small"
|
class="ml-8px flex-shrink-0"
|
>
|
{{ property.identifier }}
|
</el-tag>
|
</div>
|
</el-option>
|
</el-option-group>
|
</el-select>
|
|
<!-- 属性详情弹出层 -->
|
<el-popover
|
v-if="selectedProperty"
|
placement="right-start"
|
:width="350"
|
trigger="click"
|
:show-arrow="true"
|
:offset="8"
|
popper-class="property-detail-popover"
|
>
|
<template #reference>
|
<el-button
|
type="info"
|
:icon="InfoFilled"
|
circle
|
size="small"
|
class="flex-shrink-0"
|
title="查看属性详情"
|
/>
|
</template>
|
|
<!-- 弹出层内容 -->
|
<div class="property-detail-content">
|
<div class="flex items-center gap-8px mb-12px">
|
<Icon icon="ep:info-filled" class="text-[var(--el-color-info)] text-16px" />
|
<span class="text-14px font-500 text-[var(--el-text-color-primary)]">
|
{{ selectedProperty.name }}
|
</span>
|
<el-tag :type="getDataTypeTagType(selectedProperty.dataType)" size="small">
|
{{ getDataTypeName(selectedProperty.dataType) }}
|
</el-tag>
|
</div>
|
|
<div class="space-y-8px ml-24px">
|
<div class="flex items-start gap-8px">
|
<span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">
|
标识符：
|
</span>
|
<span class="text-12px text-[var(--el-text-color-primary)] flex-1">
|
{{ selectedProperty.identifier }}
|
</span>
|
</div>
|
|
<div v-if="selectedProperty.description" class="flex items-start gap-8px">
|
<span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">
|
描述：
|
</span>
|
<span class="text-12px text-[var(--el-text-color-primary)] flex-1">
|
{{ selectedProperty.description }}
|
</span>
|
</div>
|
|
<div v-if="selectedProperty.unit" class="flex items-start gap-8px">
|
<span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">
|
单位：
|
</span>
|
<span class="text-12px text-[var(--el-text-color-primary)] flex-1">
|
{{ selectedProperty.unit }}
|
</span>
|
</div>
|
|
<div v-if="selectedProperty.range" class="flex items-start gap-8px">
|
<span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">
|
取值范围：
|
</span>
|
<span class="text-12px text-[var(--el-text-color-primary)] flex-1">
|
{{ selectedProperty.range }}
|
</span>
|
</div>
|
|
<!-- 根据属性类型显示额外信息 -->
|
<div
|
v-if="
|
selectedProperty.type === IoTThingModelTypeEnum.PROPERTY &&
|
selectedProperty.accessMode
|
"
|
class="flex items-start gap-8px"
|
>
|
<span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">
|
访问模式：
|
</span>
|
<span class="text-12px text-[var(--el-text-color-primary)] flex-1">
|
{{ getAccessModeLabel(selectedProperty.accessMode) }}
|
</span>
|
</div>
|
|
<div
|
v-if="
|
selectedProperty.type === IoTThingModelTypeEnum.EVENT && selectedProperty.eventType
|
"
|
class="flex items-start gap-8px"
|
>
|
<span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">
|
事件类型：
|
</span>
|
<span class="text-12px text-[var(--el-text-color-primary)] flex-1">
|
{{ getEventTypeLabel(selectedProperty.eventType) }}
|
</span>
|
</div>
|
|
<div
|
v-if="
|
selectedProperty.type === IoTThingModelTypeEnum.SERVICE && selectedProperty.callType
|
"
|
class="flex items-start gap-8px"
|
>
|
<span class="text-12px text-[var(--el-text-color-secondary)] min-w-60px flex-shrink-0">
|
调用类型：
|
</span>
|
<span class="text-12px text-[var(--el-text-color-primary)] flex-1">
|
{{ getThingModelServiceCallTypeLabel(selectedProperty.callType) }}
|
</span>
|
</div>
|
</div>
|
</div>
|
</el-popover>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { useVModel } from '@vueuse/core'
|
import { InfoFilled } from '@element-plus/icons-vue'
|
import {
|
IotRuleSceneTriggerTypeEnum,
|
IoTThingModelTypeEnum,
|
getAccessModeLabel,
|
getEventTypeLabel,
|
getThingModelServiceCallTypeLabel,
|
getDataTypeName,
|
getDataTypeTagType,
|
THING_MODEL_GROUP_LABELS
|
} from '@/views/iot/utils/constants'
|
import type {
|
IotThingModelTSLResp,
|
ThingModelEvent,
|
ThingModelParam,
|
ThingModelProperty,
|
ThingModelService
|
} from '@/api/iot/thingmodel'
|
import { ThingModelApi } from '@/api/iot/thingmodel'
|
|
/** 属性选择器组件 */
|
defineOptions({ name: 'PropertySelector' })
|
|
/** 属性选择器内部使用的统一数据结构 */
|
interface PropertySelectorItem {
|
identifier: string
|
name: string
|
description?: string
|
dataType: string
|
type: number // IoTThingModelTypeEnum
|
accessMode?: string
|
required?: boolean
|
unit?: string
|
range?: string
|
eventType?: string
|
callType?: string
|
inputParams?: ThingModelParam[]
|
outputParams?: ThingModelParam[]
|
property?: ThingModelProperty
|
event?: ThingModelEvent
|
service?: ThingModelService
|
}
|
|
const props = defineProps<{
|
modelValue?: string
|
triggerType: number
|
productId?: number
|
deviceId?: number
|
}>()
|
|
const emit = defineEmits<{
|
(e: 'update:modelValue', value: string): void
|
(e: 'change', value: { type: string; config: any }): void
|
}>()
|
|
const localValue = useVModel(props, 'modelValue', emit)
|
|
const loading = ref(false) // 加载状态
|
const propertyList = ref<PropertySelectorItem[]>([]) // 属性列表
|
const thingModelTSL = ref<IotThingModelTSLResp | null>(null) // 物模型TSL数据
|
|
// 计算属性：属性分组
|
const propertyGroups = computed(() => {
|
const groups: { label: string; options: any[] }[] = []
|
|
if (props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST) {
|
groups.push({
|
label: THING_MODEL_GROUP_LABELS.PROPERTY,
|
options: propertyList.value.filter((p) => p.type === IoTThingModelTypeEnum.PROPERTY)
|
})
|
}
|
|
if (props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST) {
|
groups.push({
|
label: THING_MODEL_GROUP_LABELS.EVENT,
|
options: propertyList.value.filter((p) => p.type === IoTThingModelTypeEnum.EVENT)
|
})
|
}
|
|
if (props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE) {
|
groups.push({
|
label: THING_MODEL_GROUP_LABELS.SERVICE,
|
options: propertyList.value.filter((p) => p.type === IoTThingModelTypeEnum.SERVICE)
|
})
|
}
|
|
return groups.filter((group) => group.options.length > 0)
|
})
|
|
// 计算属性：当前选中的属性
|
const selectedProperty = computed(() => {
|
return propertyList.value.find((p) => p.identifier === localValue.value)
|
})
|
|
/**
|
* 处理选择变化事件
|
* @param value 选中的属性标识符
|
*/
|
const handleChange = (value: string) => {
|
const property = propertyList.value.find((p) => p.identifier === value)
|
if (property) {
|
emit('change', {
|
type: property.dataType,
|
config: property
|
})
|
}
|
}
|
|
/**
|
* 获取物模型TSL数据
|
*/
|
const getThingModelTSL = async () => {
|
if (!props.productId) {
|
thingModelTSL.value = null
|
propertyList.value = []
|
return
|
}
|
|
loading.value = true
|
try {
|
const tslData = await ThingModelApi.getThingModelTSLByProductId(props.productId)
|
|
if (tslData) {
|
thingModelTSL.value = tslData
|
parseThingModelData()
|
} else {
|
console.error('获取物模型TSL失败: 返回数据为空')
|
propertyList.value = []
|
}
|
} catch (error) {
|
console.error('获取物模型TSL失败:', error)
|
propertyList.value = []
|
} finally {
|
loading.value = false
|
}
|
}
|
|
/** 解析物模型 TSL 数据 */
|
const parseThingModelData = () => {
|
const tsl = thingModelTSL.value
|
const properties: PropertySelectorItem[] = []
|
|
if (!tsl) {
|
propertyList.value = properties
|
return
|
}
|
// 解析属性
|
if (tsl.properties && Array.isArray(tsl.properties)) {
|
tsl.properties.forEach((prop) => {
|
properties.push({
|
identifier: prop.identifier,
|
name: prop.name,
|
description: prop.description,
|
dataType: prop.dataType,
|
type: IoTThingModelTypeEnum.PROPERTY,
|
accessMode: prop.accessMode,
|
required: prop.required,
|
unit: getPropertyUnit(prop),
|
range: getPropertyRange(prop),
|
property: prop
|
})
|
})
|
}
|
|
// 解析事件
|
if (tsl.events && Array.isArray(tsl.events)) {
|
tsl.events.forEach((event) => {
|
properties.push({
|
identifier: event.identifier,
|
name: event.name,
|
description: event.description,
|
dataType: 'struct',
|
type: IoTThingModelTypeEnum.EVENT,
|
eventType: event.type,
|
required: event.required,
|
outputParams: event.outputParams,
|
event: event
|
})
|
})
|
}
|
|
// 解析服务
|
if (tsl.services && Array.isArray(tsl.services)) {
|
tsl.services.forEach((service) => {
|
properties.push({
|
identifier: service.identifier,
|
name: service.name,
|
description: service.description,
|
dataType: 'struct',
|
type: IoTThingModelTypeEnum.SERVICE,
|
callType: service.callType,
|
required: service.required,
|
inputParams: service.inputParams,
|
outputParams: service.outputParams,
|
service: service
|
})
|
})
|
}
|
propertyList.value = properties
|
}
|
|
/**
|
* 获取属性单位
|
* @param property 属性对象
|
* @returns 属性单位
|
*/
|
const getPropertyUnit = (property: any) => {
|
if (!property) return undefined
|
|
// 数值型数据的单位
|
if (property.dataSpecs && property.dataSpecs.unit) {
|
return property.dataSpecs.unit
|
}
|
|
return undefined
|
}
|
|
/**
|
* 获取属性范围描述
|
* @param property 属性对象
|
* @returns 属性范围描述
|
*/
|
const getPropertyRange = (property: any) => {
|
if (!property) return undefined
|
|
// 数值型数据的范围
|
if (property.dataSpecs) {
|
const specs = property.dataSpecs
|
if (specs.min !== undefined && specs.max !== undefined) {
|
return `${specs.min}~${specs.max}`
|
}
|
}
|
|
// 枚举型和布尔型数据的选项
|
if (property.dataSpecsList && Array.isArray(property.dataSpecsList)) {
|
return property.dataSpecsList.map((item: any) => `${item.name}(${item.value})`).join(', ')
|
}
|
|
return undefined
|
}
|
|
/** 监听产品变化 */
|
watch(
|
() => props.productId,
|
() => {
|
getThingModelTSL()
|
},
|
{ immediate: true }
|
)
|
|
/** 监听触发类型变化 */
|
watch(
|
() => props.triggerType,
|
() => {
|
localValue.value = ''
|
}
|
)
|
</script>
|
|
<style scoped>
|
/* 下拉选项样式 */
|
:deep(.el-select-dropdown__item) {
|
height: auto;
|
padding: 6px 20px;
|
}
|
|
/* 弹出层内容样式 */
|
.property-detail-content {
|
padding: 4px 0;
|
}
|
|
/* 弹出层自定义样式 */
|
:global(.property-detail-popover) {
|
/* 可以在这里添加全局弹出层样式 */
|
max-width: 400px !important;
|
}
|
|
:global(.property-detail-popover .el-popover__content) {
|
padding: 16px !important;
|
}
|
</style>
|
