perf: 【IoT 物联网】场景联动优化 ConditionTypeSelector 的内容直接内联在主组件中

pull/808/head
puhui999 2025-08-07 15:13:01 +08:00
parent d077604bc9
commit 18b4775e98
2 changed files with 27 additions and 80 deletions

View File

@ -5,11 +5,20 @@
<el-row :gutter="16">
<el-col :span="8">
<el-form-item label="条件类型" required>
<ConditionTypeSelector
<el-select
:model-value="condition.type"
@update:model-value="(value) => updateConditionField('type', value)"
@change="handleConditionTypeChange"
/>
placeholder="请选择条件类型"
class="w-full"
>
<el-option
v-for="option in conditionTypeOptions"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
@ -114,7 +123,6 @@
<script setup lang="ts">
import { useVModel } from '@vueuse/core'
import ConditionTypeSelector from '../selectors/ConditionTypeSelector.vue'
import DeviceStatusConditionConfig from './DeviceStatusConditionConfig.vue'
import CurrentTimeConditionConfig from './CurrentTimeConditionConfig.vue'
import ProductSelector from '../selectors/ProductSelector.vue'
@ -146,6 +154,22 @@ const condition = useVModel(props, 'modelValue', emit)
//
const ConditionTypeEnum = IotRuleSceneTriggerConditionTypeEnum
//
const conditionTypeOptions = [
{
value: IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS,
label: '设备状态'
},
{
value: IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY,
label: '设备属性'
},
{
value: IotRuleSceneTriggerConditionTypeEnum.CURRENT_TIME,
label: '当前时间'
}
]
//
const propertyType = ref<string>('string')
const propertyConfig = ref<any>(null)

View File

@ -1,77 +0,0 @@
<!-- 条件类型选择器组件 -->
<template>
<el-select
:model-value="modelValue"
@update:model-value="handleChange"
placeholder="请选择条件类型"
class="w-full"
>
<el-option
v-for="option in conditionTypeOptions"
:key="option.value"
:label="option.label"
:value="option.value"
>
<div class="flex items-center justify-between w-full">
<div class="flex items-center gap-8px">
<Icon :icon="option.icon" :class="option.iconClass" />
<span>{{ option.label }}</span>
</div>
<el-tag :type="option.tag" size="small">{{ option.category }}</el-tag>
</div>
</el-option>
</el-select>
</template>
<script setup lang="ts">
import { IotRuleSceneTriggerConditionTypeEnum } from '@/views/iot/utils/constants'
/** 条件类型选择器组件 */
defineOptions({ name: 'ConditionTypeSelector' })
defineProps<{
modelValue?: number
}>()
const emit = defineEmits<{
(e: 'update:modelValue', value: number): void
(e: 'change', value: number): void
}>()
//
const conditionTypeOptions = [
{
value: IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS,
label: '设备状态',
description: '监控设备的在线/离线状态变化',
icon: 'ep:connection',
iconClass: 'text-blue-500',
tag: 'primary',
category: '设备'
},
{
value: IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY,
label: '设备属性',
description: '监控设备属性值的变化',
icon: 'ep:data-analysis',
iconClass: 'text-green-500',
tag: 'success',
category: '属性'
},
{
value: IotRuleSceneTriggerConditionTypeEnum.CURRENT_TIME,
label: '当前时间',
description: '基于当前时间的条件判断',
icon: 'ep:timer',
iconClass: 'text-orange-500',
tag: 'warning',
category: '时间'
}
]
//
const handleChange = (value: number) => {
emit('update:modelValue', value)
emit('change', value)
}
</script>