perf: 【IoT 物联网】场景联动优化 ConditionTypeSelector 的内容直接内联在主组件中
parent
d077604bc9
commit
18b4775e98
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue